/* FILE: css/styles.css
   Small hand-written layer on top of Tailwind (loaded via CDN in each page).
   Keep this file lean — Tailwind utility classes do almost everything. */

:root {
  --accent: #1F8760; /* brand-500 */
  --accent-ink: #0E1912;
  --gold: #C08A2E;
  --pwa-banner-offset: 0px;
  /* Tells the browser to render native UI (select dropdowns, date/time
     pickers, scrollbars, checkboxes) in the app's own light/dark state
     instead of following the device's OS-level theme. Without this,
     phones set to system dark mode show a dark native <select> popup
     even though the app chrome around it is light (and vice-versa). */
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* Makes room for the "Install App" banner above the header/sidebar. */
body.pwa-banner-visible {
  padding-top: var(--pwa-banner-offset);
}
body.pwa-banner-visible #sidebar-root aside,
body.pwa-banner-visible #topbar-root header {
  top: var(--pwa-banner-offset);
}

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: #f8faf8;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

.font-display {
  font-family: "Fraunces", serif;
}

/* Numbers should line up in tables/cards regardless of typeface. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* No page redirects guests away, so there's nothing sensitive to hide —
   the app shell renders immediately and fills in with real data as soon
   as requireAuth() resolves (usually a few ms). The old version hid
   #app-shell with visibility:hidden while it was still in the page's
   layout flow, which stacked it under #auth-loading and made the page
   scroll to double its real height — this version never does that. */
#auth-loading {
  display: none !important;
}

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Cards ---------- */
.card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(14, 25, 18, 0.18);
}

/* ---------- Buttons ---------- */
.btn-press {
  transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-press:active {
  transform: scale(0.97);
}

/* ---------- Entrance choreography ----------
   One deliberate reveal on page load: content rises in with a short
   per-item stagger. Respects reduced-motion preference. */
.stagger-in > * {
  opacity: 0;
  animation: riseIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.stagger-in > *:nth-child(1)  { animation-delay: 0.02s; }
.stagger-in > *:nth-child(2)  { animation-delay: 0.07s; }
.stagger-in > *:nth-child(3)  { animation-delay: 0.12s; }
.stagger-in > *:nth-child(4)  { animation-delay: 0.17s; }
.stagger-in > *:nth-child(5)  { animation-delay: 0.22s; }
.stagger-in > *:nth-child(6)  { animation-delay: 0.27s; }
.stagger-in > *:nth-child(7)  { animation-delay: 0.32s; }
.stagger-in > *:nth-child(8)  { animation-delay: 0.37s; }
.stagger-in > *:nth-child(n+9) { animation-delay: 0.4s; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeInSimple 0.4s ease forwards;
}
@keyframes fadeInSimple {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stagger-in > *,
  .fade-in,
  .card-hover,
  .btn-press {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Sidebar active-nav indicator ---------- */
.nav-link {
  position: relative;
}
.nav-link.active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
}

/* ---------- Toasts ---------- */
.toast-enter {
  animation: toastIn 0.22s ease-out;
}
.toast-exit {
  animation: toastOut 0.22s ease-in forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(12px); }
}

/* ---------- Modals ---------- */
#confirm-dialog-host,
.app-modal {
  transition: opacity 0.15s ease;
}
.app-modal .modal-panel {
  transition: transform 0.18s ease, opacity 0.18s ease;
  transform: translateY(8px);
  opacity: 0;
}
.app-modal.modal-open .modal-panel {
  transform: translateY(0);
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Spinner ---------- */
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Scrollbars (webkit) ---------- */
.thin-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.thin-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* ---------- Status dots ---------- */
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
}

/* ---------- Dark mode ----------
   Tailwind is loaded via CDN with no build step, so instead of configuring
   Tailwind's dark: variant we override the small, consistent set of utility
   classes this app actually uses. Toggled by adding/removing `dark` on
   <html> (see layout.js). Persisted in localStorage as "theme". */
html.dark body {
  background-color: #0b1220;
  color: #e2e8f0;
}
html.dark .bg-white { background-color: #131b2c !important; }
html.dark .bg-slate-50 { background-color: #0f1729 !important; }
html.dark .bg-slate-100 { background-color: #1b2436 !important; }
html.dark .bg-ink-900 { background-color: #060a14 !important; }
html.dark .text-slate-900 { color: #eef2f7 !important; }
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #b3c0d1 !important; }
html.dark .text-slate-500 { color: #93a1b8 !important; }
html.dark .text-slate-400 { color: #74839c !important; }
html.dark .border-slate-100 { border-color: #1c2536 !important; }
html.dark .border-slate-200 { border-color: #232d42 !important; }
html.dark .border-slate-300 { border-color: #2e3a52 !important; }
html.dark .divide-slate-100 > * + * { border-color: #1c2536 !important; }
html.dark .divide-slate-50 > * + * { border-color: #1c2536 !important; }
html.dark .hover\:bg-slate-50:hover { background-color: #182234 !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #1f2a3f !important; }
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f1729;
  color: #e2e8f0;
}
html.dark ::placeholder { color: #5b6b85; }
html.dark .bg-brand-50 { background-color: rgba(20,184,166,0.12) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
html.dark .bg-rose-50 { background-color: rgba(244,63,94,0.14) !important; }
html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.14) !important; }

.theme-toggle-icon-sun { display: none; }
html.dark .theme-toggle-icon-moon { display: none; }
html.dark .theme-toggle-icon-sun { display: inline-flex; }

/* ---------- Dashboard hero (Karyana-style header) ---------- */
.hero-teal {
  background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
  border-radius: 0 0 28px 28px;
}
html.dark .hero-teal {
  background: linear-gradient(135deg, #0B4B45 0%, #0D9488 100%);
}

.stats-card {
  background: #ffffff;
  box-shadow: 0 12px 30px -12px rgba(15, 118, 110, 0.28), 0 2px 8px -2px rgba(15, 23, 42, 0.06);
  border: 1px solid #f1f5f9;
}
html.dark .stats-card {
  background: #131b2c;
  border-color: #232d42;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}

.pill-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: filter 0.15s ease;
}
.pill-alert:hover { filter: brightness(0.97); }
.pill-amber { background: #FEF3C7; color: #B45309; border-color: #FDE68A; }
.pill-sky   { background: #E0F2FE; color: #0369A1; border-color: #BAE6FD; }
html.dark .pill-amber { background: rgba(245,158,11,0.16); color: #FBBF24; border-color: rgba(245,158,11,0.28); }
html.dark .pill-sky   { background: rgba(14,165,233,0.16); color: #38BDF8; border-color: rgba(14,165,233,0.28); }

.quick-tile { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.quick-tile:active { transform: scale(0.96); }

/* Masks sensitive figures when the eye-toggle is switched off */
.sensitive-hidden .sensitive-amount {
  filter: blur(6px);
  user-select: none;
}

/* ---------- Bottom-nav "+" quick-sale button ----------
   Sits raised in the centre slot of the mobile bottom nav, instead of a
   floating pill that could overlap the nav bar's own icons. Uses a crisp
   layered ring (white separator + thin solid teal ring) rather than a
   soft blurred glow — a blurred glow straddling the nav's top border
   picks up a visible seam where the blur crosses that border line. */
.nav-fab {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #14B8A6, #0F766E);
  box-shadow: 0 10px 20px -6px rgba(15, 118, 110, 0.5), 0 0 0 4px #ffffff, 0 0 0 7px rgba(20, 184, 166, 0.28);
}
html.dark .nav-fab {
  box-shadow: 0 10px 20px -6px rgba(15, 118, 110, 0.5), 0 0 0 4px #131b2c, 0 0 0 7px rgba(20, 184, 166, 0.28);
}

/* ---------- Bottom nav bar polish ----------
   A touch of upward elevation to lift it off the page content, plus a
   small active-tab indicator dot for clearer at-a-glance state. */
#bottom-nav-root nav {
  box-shadow: 0 -8px 24px -14px rgba(15, 23, 42, 0.25);
}
.nav-dot {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #0F766E;
  opacity: 0;
  transform: translateX(-50%) scale(0.4);
  transition: opacity .15s ease, transform .15s ease;
}
.nav-dot.active {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
html.dark .nav-dot {
  background: #14B8A6;
}

/* ---------- "Coming soon" language badge ---------- */
.lang-soon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F5A623, #D6860F);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  box-shadow: 0 2px 5px -1px rgba(214, 134, 15, 0.5);
}

/* ---------- Print: Settings -> Data & Export report ---------- */
#print-area { display: none; }
@media print {
  body.printing-export > *:not(#print-area) { display: none !important; }
  body.printing-export { background: #fff !important; padding: 0 !important; }
  body.printing-export #print-area { display: block !important; color: #0f172a; font: 12px/1.45 Inter, system-ui, sans-serif; padding: 0; }
  #print-area .ex-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #0D9488; padding-bottom: 10px; margin-bottom: 14px; }
  #print-area h1 { font-size: 22px; margin: 0; color: #0B1B3A; }
  #print-area .ex-head p { margin: 2px 0 0; color: #475569; font-size: 13px; }
  #print-area .ex-head .meta { text-align: right; font-size: 11px; color: #64748b; }
  #print-area .ex-section { margin-bottom: 22px; }
  #print-area .ex-section + .ex-section { break-before: page; }
  #print-area h2 { font-size: 15px; margin: 0 0 8px; color: #0F766E; }
  #print-area h2 small { font-size: 11px; font-weight: 400; color: #64748b; }
  #print-area .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  #print-area .chip { border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 10px; background: #f8fafc; }
  #print-area .chip span { display: block; font-size: 10px; color: #64748b; }
  #print-area .chip strong { font-size: 13px; }
  #print-area table { width: 100%; border-collapse: collapse; font-size: 11px; }
  #print-area th { background: #0F766E; color: #fff; text-align: left; padding: 6px 7px; font-weight: 600; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-area td { padding: 5px 7px; border-bottom: 1px solid #e2e8f0; }
  #print-area tbody tr:nth-child(even) td { background: #f8fafc; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-area tr { break-inside: avoid; }
  #print-area thead { display: table-header-group; }
  #print-area .r { text-align: right; white-space: nowrap; }
  #print-area .empty { text-align: center; color: #94a3b8; padding: 16px; }
  @page { margin: 14mm; }
}

/* ---------- Modals: stay fully visible with the PWA/offline banner showing ---------- */
.app-modal {
  padding-top: var(--pwa-banner-offset, 0px);
  box-sizing: border-box;
}
.app-modal .modal-panel {
  max-height: calc(100vh - var(--pwa-banner-offset, 0px) - 12px) !important;
  max-height: calc(100dvh - var(--pwa-banner-offset, 0px) - 12px) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-modal .modal-panel form {
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

/* ---------- Auth pages (login / register) ---------- */
.auth-hero {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(250,194,77,.22), transparent 55%),
    linear-gradient(145deg, #0D9488 0%, #0F766E 45%, #0B1B3A 100%);
}
.auth-orb { position: absolute; border-radius: 999px; pointer-events: none; }
.auth-orb-a { width: 340px; height: 340px; right: -110px; top: -110px; background: rgba(255,255,255,.08); }
.auth-orb-b { width: 260px; height: 260px; left: -90px; bottom: -70px; background: rgba(250,194,77,.10); }
.auth-tick {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); font-size: 12px;
}
html.dark #tpl-login, html.dark .auth-card { color-scheme: dark; }