/* ─────────────────────────────────────────────
   WHS Services — Obsidian & Gold Design System
   ───────────────────────────────────────────── */

/* Prevent page-level horizontal scroll on all devices.
   Only set on body (not html) to avoid breaking position:sticky on topbar.
   Tables/drawers that need scroll use their own overflow-x:auto containers. */
body { overflow-x: hidden; }

/* Center <dialog> elements — Tailwind v4 resets margin:0 which breaks showModal() centering */
dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

:root {
  /* ── Brand ── */
  --gold:          #F59E0B;
  --gold-dark:     #D97706;
  --gold-glow:     rgba(245, 158, 11, 0.12);
  --gold-border:   rgba(245, 158, 11, 0.25);

  /* ── Accent / Status ── */
  --accent:        #6366F1;
  --accent-light:  rgba(99, 102, 241, 0.10);
  --danger:        #EF4444;
  --danger-light:  rgba(239, 68, 68, 0.10);
  --success:       #22C55E;
  --success-light: rgba(34, 197, 94, 0.10);

  /* ── Surfaces ── */
  --sidebar-bg:    #141420;
  --content-bg:    #F5F4F1;
  --card-bg:       #FFFFFF;
  --card-border:   #ECEAE6;

  /* ── Typography ── */
  --text-base:     #1C1B22;   /* primary — near-black */
  --text-sub:      #3D3C4A;   /* secondary — dark grey, readable on white */
  --text-muted:    #1f1f31;   /* muted — still readable on white/light backgrounds */
  --text-faint:    #9997A8;   /* hints, placeholders */

  /* ── Input ── */
  --input-border:  #e8ad74;   /* warm amber border for all inputs */

  /* ── Fonts ── */
  --font-display:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:     system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     ui-monospace, 'Cascadia Code', 'Fira Mono', Menlo, Consolas, monospace;
}

/* ── Aurora blobs ── */
@keyframes aurora-drift {
  0%,100% { transform: translate(0%,    0%)    scale(1)    rotate(0deg);   }
  25%     { transform: translate(4%,   -3%)    scale(1.07) rotate(1.2deg); }
  50%     { transform: translate(-3%,   5%)    scale(0.95) rotate(-1deg);  }
  75%     { transform: translate(-4%,  -2%)    scale(1.03) rotate(0.4deg); }
}
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  animation: aurora-drift linear infinite;
  will-change: transform;
}

/* ── Entry animations ── */
@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
.anim-slide-up { animation: slide-up-fade 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-fade-in  { animation: fade-in 0.28s ease both; }

/* ── Login glass card ── */
.auth-card {
  background: rgba(25, 25, 42, 0.82);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1.5px solid var(--gold-border);
  border-radius: 18px;
  box-shadow:
    0 32px 64px rgba(0,0,0,0.55),
    0  0  0  1px rgba(255,255,255,0.025),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Dark inputs (auth pages) ── */
.input-dark {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  color: #E8E7F2;
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-dark:focus {
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.09);
  background: rgba(255,255,255,0.07);
}
.input-dark::placeholder { color: rgba(232,231,242,0.38); }

/* ── Form input — light panels / modals ── */
.form-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--content-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-base);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.1);
}
.form-input::placeholder { color: var(--text-faint); }
select.form-input { cursor: pointer; }

/* ── OTP digit boxes ── */
.otp-box {
  width: 42px;
  height: 48px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  color: #F0EFF8;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
}
.otp-box:focus {
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.09);
}
.otp-box.filled {
  background: rgba(245,158,11,0.09);
  border-color: rgba(245,158,11,0.35);
  color: var(--gold);
}

/* ── Gold button ── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  padding: 10px 20px;
  background: linear-gradient(135deg, #F5A623 0%, var(--gold-dark) 100%);
  color: #1A0900;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn-gold:hover  { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245,158,11,0.3); filter: brightness(1.05); }
.btn-gold:active { transform: translateY(0);    box-shadow: 0 2px  8px rgba(245,158,11,0.2); }

/* ── Sidebar nav items ── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #B8B7CC;
  border-left: 2px solid transparent;
  margin-left: -1px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s, background .12s, border-color .12s;
}
.nav-link:hover  { color: #E2E1F0; background: rgba(255,255,255,0.07); }
.nav-link.active { color: var(--gold); background: rgba(245,158,11,0.07); border-left-color: var(--gold); }

.nav-section-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5A5A78;
  padding: 0 10px;
  margin-bottom: 4px;
  user-select: none;
}

/* ── Sidebar ── */
#sidebar { transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); }

/* ── Light cards (content area) ── */
.panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}
.panel-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-header-left { display: flex; align-items: center; gap: 7px; }

/* ── Stat cards ── */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.stat-card:hover { border-color: #D4D1CC; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Grain overlay ── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #252535; border-radius: 99px; }

/* ── Toastr ── */
#toast-container > div {
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
}

/* ── DataTables ── */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 5px 10px;
  outline: none;
  background: white;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-sub) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #1A0900 !important;
  font-weight: 600;
}


/* ─────────────────────────────────────────────
   Upload Zone — global reusable component
   ───────────────────────────────────────────── */

.uz-dropzone {
    border: 2px dashed #DDDBD6;
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    background: #FAFAF9;
    transition: border-color .2s, background .2s;
    cursor: default;
}
.uz-dropzone.uz-over {
    border-color: var(--accent);
    background: rgba(99,102,241,.04);
}

.uz-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    margin-bottom: 5px;
    background: #FAFAF9;
    transition: background .12s;
}
.uz-file-item:hover { background: var(--content-bg); }
.uz-file-item.uz-queue {
    border-color: #C7D2FE;
    background: rgba(99,102,241,.04);
}

.uz-del-btn {
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 3px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition: color .12s, background .12s;
}
.uz-del-btn:hover { color: var(--danger); background: #FEF2F2; }

/* ── Drawer / panel shared form styles ── */
.field-input {
    background: #FAFAF9;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--text-base);
    font-family: var(--font-body);
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.field-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
    background: #FFF;
}
.field-input::placeholder { color: var(--text-faint); }
.field-input:disabled, .field-input[readonly] { opacity: .65; cursor: not-allowed; }
.flabel {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.flabel .req { color: var(--danger); margin-left: 2px; }

/* ── Global drawer close button (always red) ── */
.drawer-close-btn {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid #FCA5A5;
    background: #FEF2F2;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--danger);
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
}
.drawer-close-btn:hover { background: var(--danger); color: #FFF; border-color: var(--danger); }

/* ── Action buttons (table row actions) ── */
.action-btn {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: filter .15s, transform .1s;
}
.action-btn:hover { filter: brightness(0.88); transform: scale(1.08); }
.ab-view   { background: #EEF2FF; color: #6366F1; }
.ab-edit   { background: #FFF8E1; color: #D97706; }
.ab-docs   { background: #F0FDF4; color: #16A34A; }
.ab-del    { background: #FEF2F2; color: #EF4444; }

/* ── Expiry flash (within 90 days) ── */
@keyframes expire-flash {
    0%,100% { color: #EF4444; }
    50%      { color: #FCA5A5; }
}
.expire-flash { animation: expire-flash 1.4s ease-in-out infinite; font-weight: 700; }

/* ── Sortable table headers ── */
th[data-col] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th[data-col]:hover { color: var(--gold) !important; }
th[data-col] .sort-ico {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    margin-left: 4px;
    gap: 1px;
    opacity: .35;
    line-height: 1;
}
th[data-col] .sort-ico .s-up  { font-size: 7px; line-height: 1; }
th[data-col] .sort-ico .s-dn  { font-size: 7px; line-height: 1; }
th[data-col].sort-asc  .sort-ico { opacity: 1; }
th[data-col].sort-asc  .sort-ico .s-dn  { opacity: .2; }
th[data-col].sort-desc .sort-ico { opacity: 1; }
th[data-col].sort-desc .sort-ico .s-up  { opacity: .2; }

/* ── Alpine x-cloak ── */
[x-cloak] { display: none !important; }

/* ── Module tabs ── */
.whs-tabs { display:flex; gap:6px; padding:4px; background:var(--content-bg); border:1px solid var(--card-border); border-radius:10px; margin-bottom:20px; width:fit-content; }
.whs-tab-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border:none; border-radius:7px; cursor:pointer;
  font-size:12.5px; font-weight:600; transition:all .15s;
  background:transparent; color:var(--text-muted);
}
.whs-tab-btn:hover { background:rgba(255,255,255,.7); color:var(--text-base); }
.whs-tab-btn.active {
  background:#fff; color:var(--gold);
  box-shadow:0 1px 4px rgba(0,0,0,.10), 0 0 0 1px var(--gold-border);
}
.whs-tab-btn .tab-badge {
  font-size:10px; font-weight:700; padding:1px 6px;
  border-radius:99px; background:var(--danger); color:#fff; min-width:16px; text-align:center;
}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVE — < 1024px
   ═══════════════════════════════════════════════════ */

/* ── Table scroll wrapper ── */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 12px 12px;
}

/* ── Responsive grid helpers ── */
.grid-fin-cards  { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.grid-dash-panel { display: grid; grid-template-columns: 1fr 220px; gap: 12px; }
.grid-cf-creds   { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }

/* ── Page-level outer wrapper ── */
.page-wrap { padding: 18px 20px; min-height: 100%; }

/* ── Module page header ── */
.page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}

@media (max-width: 1023px) {
  /* Main content area padding */
  main { padding: 12px 14px !important; }
  /* page-wrap gets padding from main — zero it out to avoid double padding */
  .page-wrap { padding: 0 !important; }

  /* ── Topbar: fixed on mobile so it reliably sticks above content ──── */
  .topbar-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 35 !important;
  }
  /* Offset main content below the fixed 56px header */
  .lg\:pl-56 { padding-top: 56px !important; }

  /* ── Sidebar drawer (right-sliding panels) ── */
  .whs-drawer {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* ── Table wrapper: horizontal scroll on all tables ── */
  .tbl-wrap,
  .panel .tbl-wrap { overflow-x: auto; }

  /* wrap any bare table inside a panel */
  .panel table { min-width: 560px; }

  /* ── Dashboard financial cards: 2-col → 1-col ── */
  .grid-fin-cards { grid-template-columns: repeat(2,1fr); }

  /* ── Dashboard side panels: stack vertically ── */
  .grid-dash-panel { grid-template-columns: 1fr; }

  /* ── CF credentials grid in Admin Tools ── */
  .grid-cf-creds { grid-template-columns: 1fr; max-width: 100% !important; }

  /* ── Admin tools inner form grids ── */
  .grid-2col  { grid-template-columns: 1fr !important; }
  .grid-3col  { grid-template-columns: 1fr 1fr !important; }

  /* ── Tabs: wrap to multiple lines on mobile (no horizontal scroll) ── */
  .whs-tabs {
    width: 100%;
    overflow-x: visible;
    flex-wrap: wrap;
    gap: 4px;
  }
  .whs-tab-btn { white-space: nowrap; flex-shrink: 0; flex-grow: 1; text-align: center; }

  /* ── Page header: action button full-width on tiny screens ── */
  .page-hdr .btn-gold { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  /* ── Dashboard financial cards: 1-col on phones ── */
  .grid-fin-cards { grid-template-columns: 1fr; }

  /* ── Page header: keep button inline but smaller ── */
  .page-hdr .btn-gold { width: auto; }

  /* ── Topbar breadcrumb: truncate aggressively ── */
  header nav span { max-width: 120px; }
}


/* ══ MOBILE DRAWER — SINGLE COLUMN LAYOUT ═══════════════════════════════════
   Percentage-based calc() and fr-unit grids both fail in nested flex/scroll
/* ══ MOBILE DRAWER — BOTTOM SHEET REDESIGN ══════════════════════════════════
   On mobile (≤767px) the side panel is replaced by a bottom sheet that slides
   up from the bottom. JS uses translateY instead of translateX on mobile.
   Form layout uses display:block — block elements always fill parent width,
   zero overflow possible regardless of scrollbars or form element intrinsics.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Bottom sheet: slide from bottom ──────────────────────────────────── */
  .whs-drawer {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 90vh !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 2px solid var(--card-border) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18) !important;
  }

  /* Drag handle bar at top of sheet */
  .whs-drawer::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 5px;
    background: var(--card-border);
    border-radius: 3px;
    margin: 10px auto 2px;
  }

  /* Header: compact */
  .whs-drawer > header {
    padding: 8px 16px !important;
  }

  /* Body: full-width safe container */
  .whs-drawer #drawerBody,
  .whs-drawer [id$="Body"] {
    padding: 14px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* ── Block layout for form grids (no flex/grid = no overflow math) ──── */
  .whs-drawer .drawer-grid-6,
  .whs-drawer .drawer-grid-comment {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .whs-drawer .drawer-grid-6 > div,
  .whs-drawer .drawer-grid-comment > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }

  .whs-drawer .drawer-grid-6 > div:last-child,
  .whs-drawer .drawer-grid-comment > div:last-child {
    margin-bottom: 0 !important;
  }

  .whs-drawer .drawer-grid-comment > .drawer-spacer {
    display: none !important;
    margin-bottom: 0 !important;
  }

  /* ── All form controls: block + full width ──────────────────────────── */
  .whs-drawer .field-input,
  .whs-drawer .drw-field,
  .whs-drawer input:not([type="hidden"]):not([type="checkbox"]),
  .whs-drawer select,
  .whs-drawer textarea,
  .whs-drawer .sf {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Search bars ─────────────────────────────────────────────────────── */
  .dom-search-bar {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Bills stat cards */
@media (max-width: 1023px) {
  .bills-stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 479px) {
  .bills-stat-grid {
    grid-template-columns: 1fr !important;
  }
}