/* ==========================================================================
   Inovit PREMIUM design system — additive layer, loaded AFTER inovit-fun.css
   via templates/partials/inovit_fun.html. LIGHT theme only, brand #1E6F5C.
   The base design is Tailwind-CDN utilities + a small inline <style> block
   in base_app.html; this file upgrades the shared components (cards,
   buttons, inputs, tables, badges, sidebar, header) with token-driven
   rules at higher specificity, and adds the mobile app shell (<=820px)
   plus the PWA install banner. inovit-fun effects stay untouched.
   ========================================================================== */

:root {
  /* Brand teal ramp (anchored on #1E6F5C) */
  --brand-50:  #eef7f3;
  --brand-100: #d7ece2;
  --brand-200: #b2d9c7;
  --brand-300: #84bda4;
  --brand-400: #4f9a7d;
  --brand-500: #2f8262;
  --brand-600: #1e6f5c;
  --brand-700: #185a4b;
  --brand-800: #123f35;
  --brand-900: #0c2b24;
  /* Ink / slate text ramp */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  /* Surfaces (all light) */
  --canvas: #f3f8f5;
  --surface: #ffffff;
  --line: #dfe9e2;
  /* Radius scale */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  /* Soft layered SaaS shadows */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .85),
                 0 1px 2px rgba(16, 40, 32, .05),
                 0 12px 32px -12px rgba(16, 40, 32, .14);
  --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .9),
                 0 2px 4px rgba(16, 40, 32, .06),
                 0 22px 44px -16px rgba(30, 111, 92, .24);
  --shadow-btn: 0 8px 18px -8px rgba(30, 111, 92, .55),
                inset 0 1px 0 rgba(255, 255, 255, .25);
  /* Mobile shell */
  --tab-h: 60px;
}

/* ---------- Base polish ---------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { letter-spacing: -0.02em; }
body :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
body.inov-app ::-webkit-scrollbar-thumb { background: #bcd6c8; }

/* App canvas — very light green-tinted wash under the inovit-fun aurora */
body.inov-app { background-color: var(--canvas); }

/* ---------- Cards (the recurring bg-white rounded card pattern) ---------- */
main .bg-white.rounded-2xl,
main .bg-white.rounded-3xl {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
main .bg-white.rounded-2xl { border-radius: var(--r-lg); }
main .bg-white.rounded-3xl { border-radius: var(--r-xl); }
main .bg-white.card-hover:hover { box-shadow: var(--shadow-lift); }

/* ---------- Buttons ---------- */
/* Primary = brand gradient with depth (inovit-fun adds lift + shine) */
button[class~="bg-emerald-600"], a[class~="bg-emerald-600"],
button[class~="bg-teal-600"],    a[class~="bg-teal-600"] {
  background-image: linear-gradient(135deg, #2b8a6d 0%, #1e6f5c 55%, #175943 100%);
  box-shadow: var(--shadow-btn);
}
/* Header icon buttons / chips get a soft tinted surface */
body.inov-app header a[class~="bg-slate-100"],
body.inov-app header button[class~="bg-slate-100"],
body.inov-app header div[class~="bg-slate-100"] {
  background-color: #eef4f0;
  border: 1px solid #dde8e0;
}

/* ---------- Forms ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea { border-radius: 12px; }
body input:not([type="checkbox"]):not([type="radio"]):focus,
body textarea:focus, body select:focus {
  box-shadow: 0 0 0 4px rgba(30, 111, 92, .16), 0 1px 2px rgba(16, 40, 32, .06);
}
/* Taller, touch-friendly fields inside app forms */
main form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
main form select { min-height: 44px; }

/* ---------- Tables ---------- */
main table thead th {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #71827a;
  font-weight: 600;
}
/* JS-wrapped scroll container for wide tables (see premium.js) */
.inov-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- Badges / pills (status_badge, priority_badge) ---------- */
main span.rounded-full.text-xs {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .07);
  font-weight: 600;
}

/* ---------- Sidebar (existing deep-navy identity, refined) ---------- */
body.inov-app aside {
  background: linear-gradient(180deg, #0d1a2e 0%, #0b1220 46%, #081018 100%);
  box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 24px 0 48px -32px rgba(2, 20, 14, .45);
}
body.inov-app aside .navlink { border-radius: 12px; }
body.inov-app aside .navlink.active {
  background: linear-gradient(135deg, #1e6f5c, #0f766e);
  box-shadow: 0 10px 22px -8px rgba(20, 120, 90, .65),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  color: #fff;
}
body.inov-app aside .navlink.active svg { color: #6ee7b7; }
body.inov-app .nav-sec-label { letter-spacing: .14em; color: #7186a0; }
body.inov-app aside div[class~="bg-emerald-500"] {
  background-image: linear-gradient(135deg, #34d399, #1e6f5c);
  box-shadow: 0 8px 18px -6px rgba(30, 111, 92, .7);
}

/* ---------- Header (glassy) + breadcrumb ---------- */
body.inov-app header {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px) saturate(1.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.45);
  border-bottom: 1px solid rgba(209, 224, 216, .85);
  box-shadow: 0 12px 30px -22px rgba(15, 40, 32, .28);
}
body.inov-app header h1 { font-size: 1.3rem; font-weight: 800; }
#pageCrumb { color: var(--brand-600); letter-spacing: .13em; }

/* ---------- Stat / dashboard cards ---------- */
.stat-card .text-3xl {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.stat-card > div:first-child { color: var(--ink-500); font-weight: 600; }

/* ---------- PWA install banner (JS-gated: mobile, not installed) ---------- */
#installBanner {
  position: fixed; z-index: 46;
  left: 1rem; right: 1rem;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + .8rem);
  display: none; align-items: center; gap: .8rem;
  background: var(--surface); border: 1px solid #d9e7dd;
  border-radius: var(--r-lg); padding: .8rem .9rem;
  box-shadow: 0 24px 48px -16px rgba(10, 40, 30, .35);
}
#installBanner.show { display: flex; animation: inovBannerUp .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes inovBannerUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.install-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #2b8a6d, #1e6f5c); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px;
  box-shadow: 0 8px 16px -8px rgba(30, 111, 92, .6);
}
@media (min-width: 821px) {
  #installBanner { left: auto; width: 350px; right: 1.25rem; bottom: 1.25rem; }
}

/* Mobile shell pieces are hidden until the phone layout takes over */
#mobileTopBar, #mobileTabs, #drawerOverlay { display: none; }

/* ==========================================================================
   MOBILE APP SHELL — <=820px: top app bar, drawer sidebar, bottom tabs
   ========================================================================== */
@media (max-width: 820px) {

  /* --- Top app bar --- */
  #mobileTopBar {
    display: flex; align-items: center; gap: .6rem;
    position: sticky; top: 0; z-index: 40;
    padding: calc(.55rem + env(safe-area-inset-top)) .8rem .55rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid rgba(209, 224, 216, .9);
    box-shadow: 0 12px 28px -20px rgba(15, 40, 32, .35);
  }
  .mtb-logo {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #34d399, #1e6f5c); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 17px;
    box-shadow: 0 6px 14px -6px rgba(30, 111, 92, .6);
  }
  #mobilePageTitle {
    flex: 1; min-width: 0;
    font-weight: 700; font-size: .98rem; letter-spacing: -0.01em; color: var(--ink-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mtb-btn {
    position: relative; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #33473f; background: #eef4f0; border: 1px solid #dde8e0; cursor: pointer;
  }
  .mtb-btn svg { width: 20px; height: 20px; }
  .mtb-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 9999px;
    background: #f43f5e; color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }

  /* --- Layout: full-width column, room for the two bars --- */
  body.inov-app .ml-64 { margin-left: 0; }
  body.inov-app .ml-64 > header { display: none; }  /* desktop header -> mobile bar */
  body.inov-app main {
    padding: 1.15rem 1rem calc(var(--tab-h) + env(safe-area-inset-bottom) + 1.75rem);
    max-width: 100%;
  }

  /* --- Sidebar becomes a slide-in drawer (same element, same items) --- */
  body.inov-app aside {
    left: 0; width: 17rem; max-width: 86vw; z-index: 70;
    transform: translateX(-106%);
    transition: transform .36s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 30px 0 60px -30px rgba(2, 20, 14, .55);
  }
  body.drawer-open { overflow: hidden; }
  body.inov-app.drawer-open aside { transform: translateX(0); }
  body.inov-app aside .navlink { min-height: 46px; }
  #drawerOverlay {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(5, 26, 19, .5);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  body.drawer-open #drawerOverlay { opacity: 1; pointer-events: auto; }

  /* --- Bottom tab bar --- */
  #mobileTabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-top: 1px solid rgba(209, 224, 216, .9);
    box-shadow: 0 -14px 34px -22px rgba(15, 40, 32, .4);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mt-tab {
    flex: 1 1 0; min-height: var(--tab-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: .35rem 0 .3rem;
    color: #71827a; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    background: none; border: none; cursor: pointer; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mt-ic {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 30px; border-radius: 9999px;
    transition: background-color .2s ease, color .2s ease;
  }
  .mt-ic svg { width: 22px; height: 22px; }
  .mt-tab:active .mt-ic { background: #e3f0e8; }
  .mt-tab.mt-active { color: var(--brand-700); }
  .mt-tab.mt-active .mt-ic { background: var(--brand-100); color: var(--brand-700); }

  /* --- Touch & readability --- */
  body input:not([type="checkbox"]):not([type="radio"]),
  body select, body textarea { font-size: 16px !important; }  /* stops iOS zoom */
  main .inov-table-scroll > table,
  main .overflow-x-auto > table { min-width: 600px; }

  /* --- Support chat floats above the tab bar --- */
  #chatFab { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px); right: 14px; }
  #chatPanel {
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 84px);
    right: 14px; left: 14px; width: auto;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #installBanner.show { animation: none; }
  body.inov-app aside { transition: none; }
  .mt-ic { transition: none; }
}

/* ==========================================================================
   MOBILE FIX PACK — page interiors (24 Oct)
   The premium pack built the app SHELL; page interiors are still Tailwind
   utility layouts. Tailwind-CDN utilities are single-class selectors
   (specificity 0,1,0) in a runtime-generated sheet whose document order
   vs. this file is not guaranteed — so every rule below carries body/main
   scoping (>= 0,1,1) and reliably wins at phone widths regardless of
   cascade order. These rules also ship to standalone/public pages that
   link premium.css directly (no app shell), so they key off `body`,
   not `body.inov-app main`.
   ========================================================================== */

/* --- Overflow seatbelt (all widths) -------------------------------------
   overflow-x: clip (NOT hidden): clip never creates a scroll container,
   so position:sticky (desktop header, sticky table/report bars) keeps
   working. The @supports fallback uses hidden only on <body>, whose
   overflow propagates to the viewport in browsers, leaving the root
   scroll container — and sticky — intact. */
body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
/* Media can never force the page wider than the screen */
img, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
/* Code / JSON blocks scroll inside themselves instead of the page */
pre { max-width: 100%; overflow-x: auto; }
/* Long names/URLs wrap instead of stretching the layout (only ever
   breaks a word that would otherwise overflow — desktop unaffected) */
main, .page { overflow-wrap: break-word; }

@media (max-width: 820px) {

  /* --- Grids: collapse bare desktop column counts -----------------------
     3–6 cols -> 2 (card/stat grids stay scannable, nothing squeezes);
     inside forms every multi-col grid -> 1 (fields get full width).
     grid-cols-7 is deliberately untouched: it is the month-calendar
     weekday grid (content + task calendars), a native mobile pattern.
     grid-cols-2 outside forms stays 2 (stat cards, label/value rows). */
  body .grid-cols-3,
  body .grid-cols-4,
  body .grid-cols-5,
  body .grid-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body form .grid-cols-2,
  body form .grid-cols-3,
  body form .grid-cols-4,
  body form .grid-cols-5,
  body form .grid-cols-6 { grid-template-columns: minmax(0, 1fr); }
  /* Responsive variants still apply inside the <=820 band (sm: from
     640px, md: from 768px) — cap them at 2 columns too. */
  body .sm\:grid-cols-3, body .sm\:grid-cols-4, body .sm\:grid-cols-6,
  body .md\:grid-cols-3, body .md\:grid-cols-4,
  body .md\:grid-cols-5, body .md\:grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Exception: the public NPS 0–10 scale keeps its 6 chunky tap targets
     per row (collapsing it to 2 would make the scale a long scroll). */
  body .grid.inov-scale-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* --- Toolbars / header rows -------------------------------------------
     flex + justify-between rows (card headers, page toolbars, standalone
     page headers): wrap instead of squeezing or overflowing. flex-wrap is
     a no-op when the row fits on one line, so desktop-look rows that fit
     are pixel-identical; rows that don't fit stack readably. The drawer
     (aside) keeps its single-line rows. */
  body .flex.justify-between { flex-wrap: wrap; row-gap: .5rem; }
  body aside .flex.justify-between { flex-wrap: nowrap; }

  /* --- Floating panels / dropdowns --------------------------------------
     Absolutely-positioned panels with desktop fixed widths (task-detail
     action forms w-72/w-80, menus) can never stick out past the screen. */
  body .absolute.w-72,
  body .absolute.w-80,
  body .absolute.w-96 { max-width: calc(100vw - 2rem); }

  /* --- Tables ------------------------------------------------------------
     Same rule as the shell block above, generalised from `main` to
     `body` so platform/Mission Control pages (no <main> element) and
     standalone pages get it too: wrapped tables (premium.js wraps bare
     ones in .inov-table-scroll) scroll inside their card at >=600px
     instead of squeezing columns into unreadability. */
  body .inov-table-scroll > table,
  body .overflow-x-auto > table { min-width: 600px; }
  body .inov-table-scroll { max-width: 100%; }
}