/* ---------------------------------------------------------------------------
   COMAPP dashboard — ported verbatim from the previous React build's style.css.
   The utility classes below are the exact subset of Tailwind output the markup
   used, inlined so the theme needs no Node build step.
   --------------------------------------------------------------------------- */

/* Reset (Tailwind preflight subset) */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -webkit-tap-highlight-color: transparent; }
body { margin: 0; line-height: inherit; }
h1, p { margin: 0; font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
img { display: block; vertical-align: middle; max-width: 100%; height: auto; }

/* Root canvas gradient — paints the whole scrollable area (incl. mobile overscroll),
   so no white shows when the page is taller than the viewport */
html {
  background: linear-gradient(177.9deg, rgb(58, 62, 88) 3.6%, rgb(119, 127, 148) 105.8%);
  min-height: 100%;
}

/* Global gradient background */
body {
  background: linear-gradient(177.9deg, rgb(58, 62, 88) 3.6%, rgb(119, 127, 148) 105.8%);
  min-height: 100vh;
}

/* Page gradient background */
.page-gradient {
  background: linear-gradient(177.9deg, rgb(58, 62, 88) 3.6%, rgb(119, 127, 148) 105.8%);
  background-size: 180% 180%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  animation: bg-breathe 22s ease-in-out infinite;
}

/* Slow drift so the gradient gently "breathes" */
@keyframes bg-breathe {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Barely-there grain overlay for depth (sits above the gradient, below content) */
.page-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Soft blue light that follows the cursor (position set via JS) */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.06) 35%, transparent 65%);
  transition: transform 0.18s ease-out, opacity 0.4s ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .page-gradient { animation: none; }
  .cursor-glow { display: none; }
}

/* Resting shadow.
   The React build emitted `@tailwind utilities` after style.css, so Tailwind's
   own `.drop-shadow` utility — same specificity, later in the cascade — won the
   `filter` property and this subtle shadow is what production actually renders.
   The richer five-layer shadow style.css declared never applied at rest; it only
   took effect on hover, where the higher-specificity selector below wins.
   Reproduced verbatim so the port matches the live site. To adopt the richer
   shadow the original author appears to have intended, replace the `filter`
   below with the five `drop-shadow()` layers from the hover rule at lower
   intensity. */
.drop-shadow {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}

.app-tile:hover .drop-shadow {
  filter:
    drop-shadow(0 35px 35px rgba(0, 0, 0, 0.2))
    drop-shadow(0 15px 15px rgba(0, 0, 0, 0.15))
    drop-shadow(0 6px 6px rgba(0, 0, 0, 0.1))
    drop-shadow(0 0 30px rgba(59, 130, 246, 0.25))
    drop-shadow(0 0 60px rgba(59, 130, 246, 0.12));
  transform: translateY(-6px) scale(1.05);
}

/* Staggered entrance — each tile fades + rises in sequence (delay set inline by index) */
@keyframes tile-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.app-tile {
  opacity: 0;
  animation: tile-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Shrink the logos a touch within their cells, keeping them centered */
.app-tile img {
  max-width: 82%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* Each logo fades in once it has loaded, so partial page loads look intentional */
.app-tile img.is-loaded {
  opacity: 1;
}

/* Stand-in for tiles saved without any icon, so the grid keeps its rhythm */
.app-tile__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82%;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 1rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.75rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .app-tile { animation: none; opacity: 1; }
  .app-tile:hover .drop-shadow { transform: none; }
}

.home__heading h1 {
  font-family: 'Lato', sans-serif;
  font-style: italic;
  font-weight: bold;
}

/* Greeting + live clock, right-aligned opposite the title */
.home__clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1.1;
  text-align: right;
}

.home__greeting {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.home__time {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .home__time { font-size: 1.05rem; }
}

/* --- Tailwind utility subset used by the markup --- */
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0px; margin-bottom: 0px; }
.mb-0 { margin-bottom: 0px; }
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.min-w-0 { min-width: 0px; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-4 { gap: 1rem; }
.w-1\/3 { width: 33.333333%; }
.max-w-2xl { max-width: 42rem; }
.max-w-6xl { max-width: 72rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pt-1 { padding-top: 0.25rem; }
.rounded-2xl { border-radius: 1rem; }
.text-center { text-align: center; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-extrabold { font-weight: 800; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.text-gray-200 { color: rgb(229 231 235); }
.text-white { color: rgb(255 255 255); }

@media (min-width: 640px) {
  .sm\:mx-12 { margin-left: 3rem; margin-right: 3rem; }
  .sm\:my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
  .sm\:mb-2 { margin-bottom: 0.5rem; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:leading-5 { line-height: 1.25rem; }
  .sm\:leading-9 { line-height: 2.25rem; }
}

@media (min-width: 768px) {
  .md\:w-1\/4 { width: 25%; }
  .md\:pt-3 { padding-top: 0.75rem; }
}

@media (min-width: 1024px) {
  .lg\:w-1\/5 { width: 20%; }
}