/* ==========================================================================
   Dufeu Design System, ported from the Pinnacle app (src/app/globals.css).
   Token names and values match Pinnacle exactly so every Dufeu app shares
   one visual language: --duf-* variables, Poppins headings / Open Sans body,
   indigo-family dark mode, 0.12–0.18s motion, soft focus rings.

   Dark mode keys off the html.dark class this app already toggles
   (js/darkmode-init.js pre-paint + the Settings switch), previously the
   class existed with no CSS behind it.
   ========================================================================== */

:root {
  /* Two-colour primary */
  --duf-blue: #6cace4;
  --duf-blue-hover: #5a9ad2;
  --duf-green: #96d404;
  --duf-green-hover: #85bd03;

  /* Extended brand */
  --duf-teal: #127691;
  --duf-teal-deep: #0e6076;
  --duf-mid-teal: #6fc2bc;
  --duf-indigo: #1c2133;
  --duf-indigo-partner: #283050;
  --duf-iris: #6477ba;
  --duf-iris-deep: #4a59a0;

  /* Neutrals */
  --duf-body: #4e4e4f;
  --duf-muted: #818285;
  --duf-muted-2: #5f6063;
  --duf-border: #bebebf;
  --duf-border-soft: #e3e4e6;
  --duf-border-soft-2: #e7e7e8;
  --duf-track: #f0f0f0;
  --duf-surface: #f2f2f2;
  --duf-page-app: #f2f2f2;
  --duf-white: #fff;
  --duf-on-indigo: #fff;

  /* Semantic */
  --duf-success: #5a8003;
  --duf-success-bg: rgba(150, 212, 4, 0.14);
  --duf-warning: #b45309;
  --duf-warning-bg: rgba(180, 83, 9, 0.1);
  --duf-destructive: #dc2626;
  --duf-destructive-deep: #b91c1c;
  --duf-destructive-bg: #fbeaea;
  --duf-info-bg: #f2f7fb;
  --duf-info-border: #e2ecf6;

  /* Gradients */
  --duf-grad: linear-gradient(135deg, #96d404, #6cace4);
  --duf-grad-full: linear-gradient(135deg, #96d404, #6fc2bc, #6cace4, #6477ba);
  --duf-grad-bar: linear-gradient(90deg, #127691, #6cace4, #96d404);
  --duf-grad-indigo: linear-gradient(135deg, #1c2133, #283050);

  /* Shadows (indigo-tinted) */
  --duf-shadow-card: 0 1px 2px rgba(28, 33, 51, 0.05);
  --duf-shadow-raised: 0 1px 3px rgba(28, 33, 51, 0.18);
  --duf-shadow-modal: 0 24px 40px rgba(28, 33, 51, 0.24);
  --duf-focus-ring: 0 0 0 3px rgba(108, 172, 228, 0.18);
}

/* ── Dark theme (Pinnacle values verbatim): indigo-family surfaces, light
   text, brand blue/green unchanged as accents. ── */
html.dark {
  --duf-indigo: #e8eaf1;
  --duf-indigo-partner: #d4d9e7;
  --duf-white: #1c2133;
  --duf-on-indigo: #141828;

  --duf-body: #c0c4d2;
  --duf-muted: #8b90a3;
  --duf-muted-2: #a7abbd;
  --duf-border: #3a415c;
  --duf-border-soft: #2b3149;
  --duf-border-soft-2: #2b3149;
  --duf-track: #232a44;
  --duf-surface: #232a44;
  --duf-page-app: #141828;

  --duf-teal: #6fc2bc;
  --duf-teal-deep: #8ed0ca;
  --duf-iris: #8b9bd4;
  --duf-iris-deep: #a3b1e0;

  --duf-success: #a8dc3c;
  --duf-success-bg: rgba(150, 212, 4, 0.16);
  --duf-warning: #e8a04f;
  --duf-warning-bg: rgba(232, 160, 79, 0.14);
  --duf-destructive: #f47272;
  --duf-destructive-deep: #f8a0a0;
  --duf-destructive-bg: rgba(220, 38, 38, 0.16);
  --duf-info-bg: #1b2540;
  --duf-info-border: #27345a;

  --duf-grad-indigo: linear-gradient(135deg, #0f1322, #1c2133);

  --duf-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --duf-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.55);
  --duf-shadow-modal: 0 24px 40px rgba(0, 0, 0, 0.6);
  --duf-focus-ring: 0 0 0 3px rgba(108, 172, 228, 0.28);

  color-scheme: dark;
}

/* ── Base ── */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--duf-page-app);
  color: var(--duf-body);
}
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
}

/* Tabular numerals for figures and timestamps */
.tnum { font-variant-numeric: tabular-nums; }

/* Inputs and buttons share the Pinnacle focus ring */
input:focus-visible,
button:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--duf-focus-ring);
}

/* Brand status dot with soft glow */
.duf-glow-dot { box-shadow: 0 0 0 3px rgba(150, 212, 4, 0.18); }

/* ── Motion (brand rule: .12–.18s, no bounces) ── */
@keyframes pin-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes pin-slide-left {
  from { transform: translateX(-24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes pin-spin { to { transform: rotate(360deg); } }
@keyframes pin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.pin-rise { animation: pin-rise 0.17s ease-out; }
.pin-slide-left { animation: pin-slide-left 0.18s cubic-bezier(0.22, 0.61, 0.36, 1); }
.pin-spin { animation: pin-spin 0.7s linear infinite; }
.pin-pulse { animation: pin-pulse 1.2s ease-in-out infinite; }

/* ==========================================================================
   Dark-mode adoption layer.

   The portal's markup carries hard-coded Tailwind utility classes
   (bg-white, text-[#4E4E4F], border-[#BEBEBF], …) that are correct for the
   light theme. Rather than rewriting ~20 modules' class strings, dark mode
   remaps those exact utilities to the dark tokens, the vanilla-stack
   equivalent of Pinnacle's bg-white sweep. Light mode is untouched.
   ========================================================================== */

/* Surfaces */
html.dark .bg-white { background-color: var(--duf-white) !important; }
html.dark .bg-\[\#F2F2F2\] { background-color: var(--duf-surface) !important; }
html.dark .hover\:bg-\[\#F2F2F2\]:hover { background-color: var(--duf-track) !important; }
html.dark .bg-gray-off { background-color: var(--duf-surface) !important; }
html.dark .bg-\[\#F9FAFB\], html.dark .bg-gray-50 { background-color: var(--duf-track) !important; }
/* Top nav + other indigo fills sit on the dark page as "card" level */
html.dark .bg-\[\#1C2133\] { background-color: #1c2133 !important; }

/* Text */
html.dark .text-\[\#4E4E4F\] { color: var(--duf-body) !important; }
html.dark .text-\[\#818285\] { color: var(--duf-muted) !important; }
html.dark .text-\[\#1C2133\] { color: var(--duf-indigo) !important; }
html.dark .text-gray-dark { color: var(--duf-body) !important; }
html.dark .text-gray-medium { color: var(--duf-muted) !important; }
html.dark .hover\:text-\[\#4E4E4F\]:hover { color: var(--duf-body) !important; }
html.dark .text-\[\#BEBEBF\] { color: var(--duf-muted) !important; }

/* Destructive text + hover.
   Stock Tailwind reds were the one family this layer never remapped, so they
   kept their light values on dark: #dc2626 text goes muddy against the dark
   page, and hovering anything with hover:bg-red-50 flashed a near-white pink.
   The Log out item in the account menu was the visible one (#352), but the
   same classes carry every critical count, failed check and error line in the
   portal, so this is fixed here rather than in that one button's markup.
   Light is untouched: --duf-destructive IS #dc2626 there.
   bg-red-600 is deliberately absent. White on a saturated red reads correctly
   in both themes, and remapping it would wash out the notification badge. */
html.dark .text-red-600 { color: var(--duf-destructive) !important; }
html.dark .text-red-700,
html.dark .text-red-800 { color: var(--duf-destructive-deep) !important; }
/* The hex form of red-600, used directly in ~10 places. Same colour, so it has
   to be remapped alongside the utility or those spots stay light-mode red. */
html.dark .text-\[\#DC2626\] { color: var(--duf-destructive) !important; }
html.dark .hover\:text-red-600:hover { color: var(--duf-destructive) !important; }
/* Opacity variants are separate classes, not modifiers Tailwind resolves for
   us here, so bg-red-50/30 and /50 need their own rules or those panels keep a
   near-white pink on dark. The alpha is folded into the value. */
html.dark .bg-red-50 { background-color: var(--duf-destructive-bg) !important; }
html.dark .bg-red-50\/50 { background-color: rgba(220, 38, 38, 0.10) !important; }
html.dark .bg-red-50\/30 { background-color: rgba(220, 38, 38, 0.07) !important; }
html.dark .hover\:bg-red-50:hover { background-color: var(--duf-destructive-bg) !important; }
html.dark .border-red-200,
html.dark .border-red-300,
html.dark .border-red-400 { border-color: var(--duf-destructive) !important; }

/* Borders + dividers */
html.dark .border-\[\#BEBEBF\] { border-color: var(--duf-border) !important; }
html.dark .border-\[\#BEBEBF\]\/60 { border-color: rgba(58, 65, 92, 0.6) !important; }
html.dark .border-\[\#BEBEBF\]\/40 { border-color: rgba(58, 65, 92, 0.4) !important; }
html.dark .border-gray-light { border-color: var(--duf-border) !important; }
html.dark .divide-\[\#BEBEBF\] > * + * { border-color: var(--duf-border) !important; }
html.dark .divide-\[\#BEBEBF\]\/60 > * + * { border-color: rgba(58, 65, 92, 0.6) !important; }

/* Skeleton pulses read as track on dark */
html.dark .animate-pulse.bg-\[\#F2F2F2\],
html.dark .animate-pulse .bg-\[\#F2F2F2\] { background-color: var(--duf-track) !important; }

/* Form controls */
html.dark input, html.dark select, html.dark textarea {
  background-color: var(--duf-surface);
  color: var(--duf-body);
  border-color: var(--duf-border);
}
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--duf-muted); }

/* Shadows deepen on dark surfaces */
html.dark .shadow-sm { box-shadow: var(--duf-shadow-card) !important; }
html.dark .shadow-md, html.dark .shadow-lg { box-shadow: var(--duf-shadow-raised) !important; }

/* Scrollbars follow the theme */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: var(--duf-page-app); }
html.dark ::-webkit-scrollbar-thumb { background: var(--duf-border); border-radius: 5px; }

/* ── Print: always light, hide chrome (matches Pinnacle print rule) ── */
@media print {
  .print-hide, .no-print { display: none !important; }
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}