/* ==========================================================================
   Galileo Dashboard — responsive overrides
   --------------------------------------------------------------------------
   Loaded AFTER the built stylesheet, so these rules win without any change
   to the minified bundle. To revert everything, delete the <link> to this
   file in index.html.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Global safety
   -------------------------------------------------------------------------- */

/* Stop iOS Safari inflating text when a phone is turned to landscape. */
html {
  -webkit-text-size-adjust: 100%;
}


/* --------------------------------------------------------------------------
   2. Login screen
   Was a hard 320px card inside a 100vh box. On a 320px phone that left no
   gutter at all, and 100vh sits under the browser's address bar.
   -------------------------------------------------------------------------- */

#login-view {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;      /* real visible height on mobile browsers */
  padding: 24px 16px;
}

.login-card {
  width: 100%;
  max-width: 340px;
}

@media (max-width: 480px) {
  .login-card {
    padding: 26px 20px;
  }
  /* 16px is the threshold below which iOS Safari zooms in on focus. */
  .login-card input {
    font-size: 16px;
  }
}


/* --------------------------------------------------------------------------
   3. Top bar
   The original is a fixed 70px flex row with no wrapping: brand + nav +
   four controls need roughly 740px, so anything narrower scrolled sideways.
   Below 780px it becomes a wrapping stack:
       row 1  GALILEO ................ ☾ Dark   ⎋ გასვლა
       row 2  Dashboard  (scrolls sideways if more links are added)
       row 3  [ branch ] [ date ]
   -------------------------------------------------------------------------- */

/* Tablet and below — two rows:
       row 1  GALILEO  Dashboard .......... ☾ Dark   ⎋ გასვლა
       row 2  [ branch ] [ date ]                                */
@media (max-width: 780px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 16px;
  }

  /* Dissolve this wrapper so its children become topbar flex items and can
     be re-ordered individually across the rows. */
  .top-controls {
    display: contents;
  }

  .brandtext    { order: 1; }
  .nav          { order: 2; height: auto; }
  .theme-toggle { order: 3; margin-left: auto; }
  .logout-btn   { order: 4; }
  .select       { order: 5; }
  .date-input   { order: 6; }

  .nav a {
    min-width: 0;
    min-height: 36px;
    padding: 7px 14px;
    white-space: nowrap;
  }

  /* A 150px basis makes the pair wrap onto their own row together; the cap
     stops them stretching absurdly wide on a tablet. */
  .select,
  .date-input {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 260px;
  }
}

/* Phone — three rows, with the nav on its own scrollable line so extra
   links can be added later without breaking the layout. */
@media (max-width: 560px) {
  .brandtext    { margin-right: auto; }
  .theme-toggle { order: 2; margin-left: 0; }
  .logout-btn   { order: 3; }
  .nav          { order: 4; }

  .nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }

  .select,
  .date-input {
    max-width: none;
  }
}


/* --------------------------------------------------------------------------
   4. Phone layout
   A three-row sticky header would eat a fifth of a phone screen, so let it
   scroll away. overflow-x is a belt-and-braces guard against any stray
   wide element; it is scoped here so it can't interfere with the sticky
   header still used on larger screens.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  .topbar {
    position: static;
  }

  .page {
    padding: 16px 14px 28px;
  }

  h1 {
    font-size: 22px;
  }

  .subtitle {
    margin-bottom: 14px;
  }

  .grid-kpi {
    gap: 12px;
  }

  .kpi-value {
    font-size: 26px;
  }
}


/* --------------------------------------------------------------------------
   5. KPI cards
   The bundle stacks the donut under the number below 1200px. That made sense
   while three cards shared a row, but below 800px each card is full width,
   so there is plenty of room to put the donut back beside the number and
   save a lot of scrolling. Below 400px it stays stacked.
   -------------------------------------------------------------------------- */

/* The bundle collapses to one very wide column below 800px. Two columns
   suits a portrait tablet far better. */
@media (max-width: 800px) and (min-width: 561px) {
  .grid-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) and (min-width: 360px) {
  .active-card-wrap {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .active-card-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  .active-card-right {
    margin-left: auto;
    gap: 10px;
  }
}

/* Compact donut + legend for the whole narrow range, so the row layout
   above always has room for the title and the number. */
@media (max-width: 800px) {
  .active-members-card {
    padding: 16px;
  }
  .status-donut {
    width: 72px;
    height: 72px;
  }
  .status-donut::after {
    inset: 12px;
  }
  .status-donut-center {
    font-size: 13px;
  }
  .status-legend {
    min-width: 0;
    gap: 4px;
  }
  .status-row {
    gap: 6px;
    font-size: 11.5px;
  }
  .kpi-title {
    margin-bottom: 2px;
  }
}

/* Smallest phones: give the legend a little more room. */
@media (max-width: 400px) {
  .status-donut {
    width: 64px;
    height: 64px;
  }
  .status-donut::after {
    inset: 11px;
  }
  .status-donut-center {
    font-size: 12px;
  }
}


/* --------------------------------------------------------------------------
   6. Touch targets
   The legend rows are interactive (they toggle slices), but at 4px of
   vertical padding they were well under a comfortable finger-sized target.
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .status-row {
    padding: 8px 6px;
  }
  .select,
  .date-input,
  .theme-toggle,
  .logout-btn {
    min-height: 40px;
  }
  /* No hover state on touch — it sticks after a tap. */
  .status-row:hover,
  body.dark .status-row:hover {
    background: transparent;
  }
}