/* =========================================================================
   🌟 TAIF AL-EMARAT GROUP — Unified Theme
   Shared design language across all hand-built modules
   Inspired by the POS Premium Gold Theme
   © Ihsan Land for programming | Eng. Iyad Abu Haibeh
   ========================================================================= */

:root {
  /* === Brand Palette === */
  --gold-dark:       #9a7b4f;
  --gold:            #b9975b;
  --gold-light:      #d5b96b;
  --gold-soft:       #e4c98a;
  --gold-highlight:  #d4af37;
  --gold-glow:       rgba(212, 175, 55, 0.45);

  /* === Surfaces === */
  --bg-page:         #f7f8fa;
  --bg-card:         #ffffff;
  --bg-cream:        #fff8e1;
  --bg-cream-soft:   #fffaf0;
  --bg-cream-warm:   #f6ecd4;
  --bg-row-alt:      #faf6ee;

  /* === Borders === */
  --border-soft:     #e6d4a8;
  --border-gold:     #d4af37;
  --border-gold-2:   #e0b94d;
  --border-gold-3:   #cfae2c;

  /* === Text === */
  --text-primary:    #2a2a2a;
  --text-muted:      #6b6b6b;
  --text-gold:       #a57b2f;
  --text-cream:      #4a3f2f;
  --text-on-gold:    #ffffff;
  --text-danger:     #8b0000;

  /* === Status === */
  --success:         #198754;
  --success-bg:      #d1e7dd;
  --danger:          #c9302c;
  --danger-bg:       #f8d7da;
  --warning:         #ffc107;
  --info:            #0dcaf0;

  /* === Effects === */
  --radius-sm:       8px;
  --radius:          12px;
  --radius-lg:       16px;
  --radius-xl:       20px;
  --shadow-sm:       0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow:          0 4px 12px rgba(154, 123, 79, 0.18);
  --shadow-gold:     0 0 14px rgba(212, 175, 55, 0.35);
  --transition:      all 0.25s ease-in-out;

  /* === Layout === */
  --sidebar-width:   240px;
  --sidebar-collapsed: 64px;
  --header-height:   60px;
}

/* =========================================================================
   🧱 Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', 'Calibri', 'Tajawal', system-ui, -apple-system, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--gold-dark); text-decoration: none; }
a:hover { color: var(--gold); }

/* =========================================================================
   📦 App Layout (header + sidebar + content)
   ========================================================================= */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  height: 100vh;       /* lock to viewport so children own the scroll */
  overflow: hidden;
}
.app-header  { grid-area: header; }

/* Sidebar gets its own independent vertical scroll. Header stays put
   at the top of the right column, main is the only area that scrolls
   when you scroll page content. */
.app-sidebar {
  grid-area: sidebar;
  overflow-y: auto;
  overflow-x: hidden;
}
.app-main {
  grid-area: main;
  padding: 20px 24px;
  overflow-y: auto;
  overflow-x: auto;
}

/* Subtler scrollbars so two side-by-side scrollers don't look noisy */
.app-sidebar::-webkit-scrollbar,
.app-main::-webkit-scrollbar { width: 8px; }
.app-sidebar::-webkit-scrollbar-thumb,
.app-main::-webkit-scrollbar-thumb {
  background: rgba(154, 123, 79, 0.25);
  border-radius: 4px;
}
.app-sidebar::-webkit-scrollbar-thumb:hover,
.app-main::-webkit-scrollbar-thumb:hover { background: rgba(154, 123, 79, 0.45); }
.app-sidebar { scrollbar-width: thin; scrollbar-color: rgba(154,123,79,0.25) transparent; }
.app-main    { scrollbar-width: thin; scrollbar-color: rgba(154,123,79,0.25) transparent; }

/* ── Global app footer ───────────────────────────────────────────
   Rendered at the bottom of <main> by taif_page_close() on every
   shell page. Matches the login footer's tone (subtle cream band,
   brand-gold links) so the attribution line is consistent across
   public and private screens. */
.app-footer {
  margin-top: 28px;
  padding: 14px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #6b6253);
  background: var(--bg-cream-soft, #f9f3e2);
  border-top: 1px solid var(--border-soft, #ece4cc);
}
.app-footer a {
  color: var(--gold-dark, #8a6d3b);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}
.app-footer a:hover {
  color: var(--gold, #b9975b);
  text-decoration: underline;
}

/* Collapsed sidebar (desktop only — overridden inside the mobile media block) */
.app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; }
.app-shell.sidebar-collapsed .sidebar-label,
.app-shell.sidebar-collapsed .sidebar-group-title { display: none; }
.app-shell.sidebar-collapsed .sidebar-link { justify-content: center; padding: 12px 0; }

/* Header buttons that only apply to certain breakpoints */
.header-btn-mobile-only { display: none; }    /* hidden on desktop */
.header-btn-desktop-only { display: inline-flex; }

/* Mobile responsive */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main";
  }
  /* Defeat the desktop "collapsed" grid override — on mobile the sidebar is
     an overlay, so the main area must always own the full viewport width. */
  .app-shell.sidebar-collapsed { grid-template-columns: 1fr; }

  .app-sidebar {
    position: fixed; top: 0; left: 0;
    height: 100vh; width: var(--sidebar-width);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999; }
  .app-shell.sidebar-open .sidebar-backdrop { display: block; }

  /* Swap which header buttons are visible on mobile */
  .header-btn-mobile-only  { display: inline-flex; }
  .header-btn-desktop-only { display: none; }
}

/* =========================================================================
   🟡 Header
   ========================================================================= */
.app-header {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(154, 123, 79, 0.25);
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header .brand {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.5px;
  margin-right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-header .brand img { height: 32px; }
.app-header .header-spacer { flex: 1; }
.app-header .header-right { display: flex; align-items: center; gap: 12px; }

.app-header .company-pill {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 600;
  font-size: 13px;
}
.app-header .user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 4px 14px 4px 4px;
}
.app-header .user-pill .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  overflow: hidden;
}
.app-header .user-pill .avatar.avatar--img { background: transparent; }
.app-header .user-pill .avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.app-header .btn-icon {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.app-header .btn-icon:hover { background: rgba(255,255,255,0.28); }

/* =========================================================================
   📂 Sidebar
   ========================================================================= */
.app-sidebar {
  background: #2d2620;
  color: #d4c5a9;
  overflow-y: auto;
  border-right: 1px solid #3d3429;
}
.sidebar-brand {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: linear-gradient(135deg, #1f1a14, #2d2620);
  border-bottom: 1px solid #3d3429;
  font-weight: 700;
  color: var(--gold-soft);
  letter-spacing: 0.5px;
  gap: 10px;
}
.sidebar-brand .brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  box-shadow: 0 0 8px var(--gold-glow);
}
.sidebar-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #807060;
  padding: 14px 18px 6px;
  font-weight: 600;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  color: #d4c5a9;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sidebar-link:hover {
  background: #3a3128;
  color: var(--gold-soft);
}
.sidebar-link.active {
  background: linear-gradient(90deg, rgba(185,151,91,0.25), transparent);
  color: var(--gold-highlight);
  border-left-color: var(--gold-highlight);
  font-weight: 600;
}
.sidebar-link .sidebar-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.sidebar-link .sidebar-new-tab {
  margin-left: auto;
  font-size: 11px;
  color: var(--gold);
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}
.sidebar-link:hover .sidebar-new-tab {
  opacity: 1;
  transform: translate(2px, -2px);
}
.app-shell.sidebar-collapsed .sidebar-new-tab { display: none; }

/* =========================================================================
   Collapsible sidebar sections (<details>) — per-group color accent
   =========================================================================
   The sidebar now renders each group as a native <details> element. Pros:
   no JS needed, accessibility is built in, state survives reloads because
   the server decides which group is open (the one containing the current
   page). Each group's color comes from taif_menu_structure() and is
   injected via the --grp-c custom property on the <details> element. */
.sidebar-group {
  margin: 0;
  padding: 0;
  border-left: 3px solid transparent;
  transition: border-color 0.2s;
}
.sidebar-group.is-active {
  border-left-color: var(--grp-c, var(--gold-dark));
  background: rgba(255,255,255,0.02);
}
.sidebar-group-summary {
  /* Reset default <summary> triangle */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 15px;   /* 15px left so we sit above the colored border */
  color: #d4c5a9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.sidebar-group-summary::-webkit-details-marker { display: none; }
.sidebar-group-summary::marker { content: ''; }
.sidebar-group-summary:hover {
  background: #3a3128;
  color: var(--gold-soft);
}
.sidebar-group-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  /* Solid color tile with white glyph reads cleanly on the dark sidebar.
     A faint inner highlight + outer ring give the chip subtle depth so
     it doesn't look like a flat sticker. */
  background: var(--grp-c, var(--gold-dark));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 1px 3px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.sidebar-group-summary:hover .sidebar-group-icon {
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 2px 6px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.1);
}
.sidebar-group.is-active .sidebar-group-icon {
  /* Active group gets a soft glow in its own color */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 12px color-mix(in srgb, var(--grp-c, var(--gold-dark)) 60%, transparent);
}
.sidebar-group-label { flex: 1; }
.sidebar-group-chevron {
  font-size: 11px;
  color: #a0907a;
  transition: transform 0.2s;
}
.sidebar-group[open] .sidebar-group-chevron { transform: rotate(180deg); }

/* Items inside each open group sit slightly inset so the hierarchy reads
   visually at a glance. */
.sidebar-group-items {
  padding: 2px 0 8px;
}
.sidebar-group-items .sidebar-link {
  padding-left: 48px;   /* under the group icon */
  font-size: 13px;
}
.sidebar-group-items .sidebar-link.active {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--grp-c, var(--gold-dark)) 30%, transparent),
              transparent);
  color: #fff;
  border-left-color: var(--grp-c, var(--gold-highlight));
}

/* Top-level standalone links (Dashboard, Smart Reports, My Inventory)
   visually distinct from grouped ones. */
.sidebar-toplink { margin-bottom: 4px; }

/* Coloured-tile variant — gives each top-level shortcut its own
   recognisable square icon (Dashboard blue, Smart Reports emerald,
   My Inventory amber). The chip uses --top-c set inline on the link,
   so the same CSS rule serves every top-link without duplication.
   Visual language matches the .sidebar-group-icon chips so the eye
   reads them as siblings of the group headers. */
.sidebar-toplink-tile .sidebar-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg,
                color-mix(in srgb, var(--top-c, #b8860b) 100%, #fff 0%),
                color-mix(in srgb, var(--top-c, #b8860b) 75%,  #fff 25%));
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--top-c, #b8860b) 35%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-toplink-tile:hover .sidebar-icon {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--top-c, #b8860b) 50%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.22);
}
.sidebar-toplink-tile .sidebar-icon i {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
/* Active state — keep the colour but add a soft ring + tinted label so
   the user always knows where they are. */
.sidebar-toplink-tile.active {
  background: linear-gradient(90deg,
                color-mix(in srgb, var(--top-c, #b8860b) 18%, transparent),
                transparent);
  color: #fff;
  border-left-color: var(--top-c, var(--gold-highlight));
}
.sidebar-toplink-tile.active .sidebar-icon {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--top-c, #b8860b) 55%, transparent),
              0 4px 12px color-mix(in srgb, var(--top-c, #b8860b) 45%, transparent);
}

/* Pinned in-group link — used by items flagged 'pinned' => true in the
   menu config (e.g. POS Terminal inside the POS / Retail group). Renders
   as a glowing gradient card that draws the eye to the group's primary
   action, while still living inside the group so the navigation tree
   stays coherent. Inherits its colour from the parent group's --grp-c. */
.sidebar-link-pinned {
  position: relative;
  margin: 6px 10px 10px !important;
  padding: 11px 14px !important;
  border-radius: 10px;
  border-left: none !important;
  /* Resting gradient — the group's colour mixed with a touch of white. */
  background: linear-gradient(135deg,
                color-mix(in srgb, var(--grp-c, var(--gold-dark)) 92%, #fff 8%),
                color-mix(in srgb, var(--grp-c, var(--gold-dark)) 70%, #fff 30%)) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--grp-c, #b8860b) 35%, transparent),
              inset 0 -2px 0 rgba(0,0,0,0.10);
  overflow: hidden;
  /* Smooth animation across every property the hover state changes —
     background-image animates the gradient itself (brightens it),
     transform lifts the card, box-shadow deepens the glow. The longer
     cubic-bezier curve makes the transition feel relaxed, not snappy. */
  transition: background-image 0.35s ease,
              background-color 0.35s ease,
              transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1),
              box-shadow 0.25s ease,
              filter 0.35s ease;
}
/* Hover — DEEPEN the gold instead of lightening it. Mixing in white
   washed out the colour and killed contrast against the white text.
   Now the gradient flips to a richer, more saturated version of the
   group colour. The lift + larger coloured glow do the work of saying
   "this is interactive"; the colour stays readable.
   `!important` is needed because the global .sidebar-link:hover above
   sets a dark brown background that would otherwise win. */
.sidebar-link-pinned:hover {
  background: linear-gradient(135deg,
                var(--grp-c, var(--gold-dark)),
                color-mix(in srgb, var(--grp-c, var(--gold-dark)) 82%, #000 18%)) !important;
  transform: translateY(-2px) scale(1.015);
  filter: saturate(1.10);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--grp-c, #b8860b) 60%, transparent),
              inset 0 -2px 0 rgba(0,0,0,0.15);
  color: #fff !important;
}
/* Pressed — small dip back so the click feels like a button. */
.sidebar-link-pinned:active {
  transform: translateY(0) scale(0.995);
  transition-duration: 0.08s;
}
/* The continuous shimmer pass — a diagonal highlight that sweeps across
   the button every 3.2s. Slow + low-contrast so it draws attention
   without being distracting. */
.sidebar-link-pinned::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg,
                transparent 35%,
                rgba(255,255,255,0.28) 50%,
                transparent 65%);
  transform: translateX(-100%);
  animation: pinnedShimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pinnedShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%);  }
  100% { transform: translateX(100%);  }
}
/* Icon: lighter and slightly larger so it pops on the gradient. The text
   is already white; the bi-* icon inherits but we boost contrast + glow. */
.sidebar-link-pinned .sidebar-icon {
  color: #fff;
  font-size: 19px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.55));
}
.sidebar-link-pinned .sidebar-icon i {
  color: #ffffff;
  -webkit-text-stroke: 0.4px rgba(255,255,255,0.4);
}
.sidebar-link-pinned .sidebar-new-tab {
  margin-left: auto;
  font-size: 12px;
  color: #fff;                          /* override the global var(--gold) so it stays visible on the gold gradient */
  opacity: 0.85;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.20));
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}
.sidebar-link-pinned:hover .sidebar-new-tab {
  opacity: 1;
  transform: translate(2px, -2px);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30));
}
/* Accessibility — honour reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .sidebar-link-pinned::before { animation: none; }
}
/* Collapsed sidebar: shrink to centred square but keep the gradient + glow. */
.app-shell.sidebar-collapsed .sidebar-link-pinned {
  margin: 6px auto 10px !important;
  padding: 10px 0 !important;
  width: 44px;
  justify-content: center;
}
.app-shell.sidebar-collapsed .sidebar-link-pinned .sidebar-new-tab { display: none; }

/* Collapsed sidebar — hide group labels, only show icons. */
.app-shell.sidebar-collapsed .sidebar-group-label,
.app-shell.sidebar-collapsed .sidebar-group-chevron { display: none; }
.app-shell.sidebar-collapsed .sidebar-group-summary { justify-content: center; padding: 12px 0; }
.app-shell.sidebar-collapsed .sidebar-group-items .sidebar-link { padding-left: 0; }

/* ── Sidebar hover tooltips (collapsed mode only) ─────────────────────
   A single fixed-positioned chip is appended to <body> by the script
   in taif_page_close() and re-targeted on hover. Using position:fixed
   means the chip sits in the viewport coordinate space and isn't
   clipped by the sidebar's overflow-x:hidden — no structural changes
   to the existing scrollable sidebar are needed.

   The chip is only meaningful while the sidebar is collapsed, so the
   script gates its showing on the .sidebar-collapsed class. */
.sidebar-tip {
  position: fixed;
  background: #2a1f12;
  color: #faf3e1;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.18);
  transform: translateY(-50%) translateX(-4px);
}
.sidebar-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
/* Small caret pointing back at the icon */
.sidebar-tip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -6px;
  border: 6px solid transparent;
  border-right-color: #2a1f12;
}

/* =========================================================================
   Super-admin-locked delete button — visible but disabled
   =========================================================================
   Sensitive tables (Branches, Companies, Employees, Users, Groups, etc.)
   render their delete button via taif_super_delete_button(). For non
   Super-Admin users the trash icon is shown crisply on a neutral grey
   background with a small amber lock badge in the corner — clearer
   than dimming a red button which made both icons hard to read. */
.taif-delete-locked {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #e9e4d7;            /* warm neutral, blends with our cream theme */
  color: #6b6155;                 /* dark enough to read clearly */
  border: 1.5px solid #d4ccb8;
  border-radius: 6px;
  cursor: not-allowed;
  user-select: none;
  font-weight: 500;
  transition: none;               /* don't react on hover — it's disabled */
}
.taif-delete-locked:hover {
  background: #e9e4d7;
  color: #6b6155;
  transform: none;
  box-shadow: none;
}
.taif-delete-locked i.bi-trash    { font-size: 14px; opacity: 0.75; }
/* Padlock badge — small amber pill in the top-right corner. Big enough
   to be unmistakable at a glance, small enough not to dominate. */
.taif-delete-locked-badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold-dark, #b8860b);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  border: 1.5px solid #fff;
}

/* =========================================================================
   In-page section tabs — quick jump between siblings
   =========================================================================
   Rendered just below the breadcrumb by taif_page_open() when the current
   page belongs to a sidebar group. Shows every sibling page (filtered by
   ACL) so users can hop within a section without going to the sidebar. */
.page-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 6px;
  background: var(--bg-cream-soft, #faf6ea);
  border: 1px solid var(--border-soft, #e5dcc4);
  border-radius: 10px;
  border-left: 4px solid var(--sec-c, var(--gold-dark));
}
.page-section-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-primary, #2A2A2A);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.page-section-tabs a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--sec-c, var(--gold-dark));
}
.page-section-tabs a.active {
  background: var(--sec-c, var(--gold-dark));
  color: #fff;
}
.page-section-tabs a i { font-size: 13px; }
.page-section-tabs .page-section-tabs-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--sec-c, var(--gold-dark));
  padding: 6px 8px;
  align-self: center;
}

/* =========================================================================
   🃏 Cards
   ========================================================================= */
.card {
  background: var(--bg-card);
  border: 1px solid #ebe5d3;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-gold {
  background: linear-gradient(180deg, var(--bg-cream-soft), var(--bg-cream-warm));
  border: 1px solid var(--border-soft);
}
.card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-cream);
  margin: 0 0 12px;
}
.card-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: -8px 0 14px;
}

/* KPI Card */
.kpi-card {
  background: linear-gradient(180deg, var(--bg-cream-soft), var(--bg-cream-warm));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.kpi-card .kpi-label {
  font-size: 13px;
  color: var(--text-cream);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kpi-card .kpi-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--gold-dark);
  margin: 6px 0 2px;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
}
.kpi-card .kpi-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* =========================================================================
   🎛️ Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.btn:disabled, .btn.disabled {
  background: linear-gradient(145deg, #e0e0e0, #cfcfcf) !important;
  border-color: #b8b8b8 !important;
  color: #9a9a9a !important;
  cursor: not-allowed;
  box-shadow: none !important;
}
.btn-gold {
  background: linear-gradient(145deg, var(--gold-highlight), var(--gold-light));
  border-color: var(--gold);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.35);
}
.btn-gold:hover {
  /* Darker on hover for contrast — was lighter before, making white text unreadable */
  background: linear-gradient(145deg, var(--gold-dark), var(--gold));
  color: #fff;
  border-color: var(--gold-dark);
  box-shadow: 0 0 14px var(--gold-glow);
  transform: translateY(-1px);
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  border-color: var(--gold-dark);
}
.btn-primary:hover {
  /* Darker on hover (was lighter, killing white-text contrast) */
  background: linear-gradient(135deg, #7a5f38, var(--gold-dark));
  color: #fff;
  border-color: #7a5f38;
  box-shadow: 0 0 12px var(--gold-glow);
  transform: translateY(-1px);
}
.btn-success {
  background: linear-gradient(135deg, #198754, #1aa364);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  border-color: #157347;
}
.btn-success:hover {
  background: linear-gradient(135deg, #146c43, #157347);
  color: #fff;
  border-color: #146c43;
  box-shadow: 0 0 12px rgba(25,135,84,0.45);
  transform: translateY(-1px);
}
.btn-danger {
  background: linear-gradient(145deg, #d9534f, #c9302c);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  border-color: #b52b27;
}
.btn-danger:hover {
  background: linear-gradient(145deg, #b52b27, #9a221d);
  color: #fff;
  border-color: #9a221d;
  box-shadow: 0 0 12px rgba(220,53,69,0.45);
  transform: translateY(-1px);
}
.btn-outline {
  background: #fff;
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}
.btn-outline:hover {
  background: var(--bg-cream);
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  background: #f0eadb;
  color: var(--text-cream);
}
/* Anchor buttons must keep their button color on hover, not the global a:hover gold */
a.btn { color: inherit; }
a.btn-gold, a.btn-gold:hover, a.btn-primary, a.btn-primary:hover,
a.btn-success, a.btn-success:hover, a.btn-danger, a.btn-danger:hover { color: #fff; }
a.btn-outline, a.btn-outline:hover { color: var(--gold-dark); }
a.btn-ghost { color: var(--text-muted); }
a.btn-ghost:hover { color: var(--text-cream); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-lg { padding: 12px 24px; font-size: 16px; }
.btn-icon-only {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--radius);
}

/* =========================================================================
   📝 Forms
   ========================================================================= */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-cream);
  margin-bottom: 6px;
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-control, .form-select {
  width: 100%;
  background: var(--bg-cream);
  border: 1.5px solid var(--border-gold-2);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text-primary);
  transition: var(--transition);
}
.form-control:focus, .form-select:focus {
  outline: none;
  background: #fff3ce;
  border-color: var(--border-gold-3);
  box-shadow: 0 0 6px rgba(236, 198, 110, 0.5);
}
.form-control::placeholder { color: #c9a74a; opacity: 0.7; }
.form-help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; font-weight: 600; }

.input-group {
  display: flex;
  align-items: stretch;
}
.input-group .form-control { border-radius: var(--radius) 0 0 var(--radius); }
.input-group .input-addon {
  display: flex; align-items: center;
  padding: 0 12px;
  background: var(--bg-cream-warm);
  border: 1.5px solid var(--border-gold-2);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
  color: var(--text-cream);
  font-weight: 600;
}

/* =========================================================================
   📊 Tables
   ========================================================================= */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid #ebe5d3;
  border-radius: var(--radius);
  /* Wide tables (e.g. the 14-column payroll grid) need to scroll
     horizontally — but we DO NOT want an inner vertical scrollbar; the
     whole page should scroll vertically so all rows are visible at once.

     Important CSS-spec quirk: pairing `overflow-x: auto` with
     `overflow-y: visible` makes the browser silently coerce BOTH axes to
     `auto`, which is what was producing the unwanted vertical scrollbar.
     Using `overflow-y: clip` avoids the coercion AND doesn't create a
     scroll container — and because we don't constrain the wrap's height,
     it grows to fit the table, so nothing actually gets clipped. */
  overflow-x: auto;
  overflow-y: clip;
  max-height: none;
  height: auto;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* Always-visible gold-themed horizontal scrollbar so users notice
   immediately when a table is scrollable. Webkit + Firefox covered. */
.table-wrap::-webkit-scrollbar         { height: 12px; }
.table-wrap::-webkit-scrollbar-track   {
  background: linear-gradient(to bottom, #fef7e2, #f5e7c0);
  border-top: 1px solid #ebe5d3;
}
.table-wrap::-webkit-scrollbar-thumb   {
  background: linear-gradient(180deg, var(--gold-dark, #b8860b), var(--gold, #d4af37));
  border-radius: 6px;
  border: 2px solid #fef7e2;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold, #d4af37), var(--gold-dark, #b8860b));
}
.table-wrap {
  scrollbar-color: var(--gold-dark, #b8860b) #fef7e2;   /* Firefox */
  scrollbar-width: thin;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table thead {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
}
.data-table th {
  text-align: left;
  font-weight: 600;
  padding: 12px 14px;
  font-size: 13px;
  letter-spacing: 0.3px;
  border-bottom: 2px solid var(--gold);
  white-space: nowrap;
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable::after { content: " ↕"; opacity: 0.4; font-size: 11px; }
.data-table th.sorted-asc::after  { content: " ▲"; opacity: 1; }
.data-table th.sorted-desc::after { content: " ▼"; opacity: 1; }

/* Sticky-header note — `position: sticky` on `<thead>` doesn't work
   when the table is inside `.table-wrap` (which uses `overflow-y: clip`
   to prevent inner vertical scrolling). The wrap acts as the sticky
   containing block, and because it's exactly the table's height, there's
   no room for the header to stick within it. The payroll view.php uses a
   JavaScript-driven cloned header pinned to the top of `.app-main` to
   work around this. Tables NOT inside `.table-wrap` could use this rule,
   but most pages wrap their tables, so adding the global sticky rule
   here is a no-op and just adds confusion.  */
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f0e9d8;
  vertical-align: middle;
}
.data-table tbody tr:nth-child(even) td { background: var(--bg-row-alt); }
.data-table tbody tr:hover td { background: #fff4d4; }
.data-table .row-actions {
  /* td styling only — never display:flex on a <td> (breaks table-cell layout) */
  white-space: nowrap;
  vertical-align: middle;
}
.data-table .row-actions .btn { margin-right: 4px; }
.data-table .row-actions .btn:last-child { margin-right: 0; }
.row-actions-wrap {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  vertical-align: middle;
}

/* =========================================================================
   🏷️ Badges + Pills
   ========================================================================= */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-gold     { background: var(--bg-cream-warm); color: var(--gold-dark); border: 1px solid var(--border-gold-2); }
.badge-success  { background: var(--success-bg); color: #0f5132; }
.badge-danger   { background: var(--danger-bg); color: #842029; }
.badge-info     { background: #cff4fc; color: #055160; }
.badge-muted    { background: #e9ecef; color: #495057; }

/* =========================================================================
   🍞 Breadcrumbs + Page Header
   ========================================================================= */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-cream);
  margin: 0;
  letter-spacing: 0.3px;
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.breadcrumb {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  list-style: none;
  padding: 0;
}
.breadcrumb a { color: var(--gold-dark); }
.breadcrumb .sep { color: #c4b48e; }

/* =========================================================================
   📨 Alerts
   ========================================================================= */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  border-left: 4px solid;
  margin: 12px 0;
  font-size: 14px;
}
.alert-success { background: #e6f4ea; border-color: var(--success); color: #0f5132; }
.alert-danger  { background: #fde2e1; border-color: var(--danger); color: #842029; }
.alert-warning { background: #fff3cd; border-color: var(--warning); color: #664d03; }
.alert-info    { background: #d1ecf1; border-color: var(--info); color: #055160; }

/* =========================================================================
   📐 Utilities
   ========================================================================= */
.text-muted   { color: var(--text-muted); }
.text-gold    { color: var(--gold-dark); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-center  { text-align: center !important; }
.text-right   { text-align: right  !important; }
.text-left    { text-align: left   !important; }
.text-bold    { font-weight: 700; }
.text-sm      { font-size: 12px; }
.text-lg      { font-size: 16px; }
/* Ensure utility classes beat .data-table th/td default alignment */
.data-table th.text-right, .data-table td.text-right { text-align: right; }
.data-table th.text-center, .data-table td.text-center { text-align: center; }

.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}

.grid { display: grid; gap: 16px; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) {
  .grid-cols-5, .grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6 { grid-template-columns: 1fr; }
}

/* =========================================================================
   🌟 SweetAlert2 — Gold Theme
   ========================================================================= */
.swal2-popup {
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.2) !important;
}
.swal2-confirm {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft)) !important;
  border: 1px solid var(--gold) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
}
.swal2-cancel {
  background: linear-gradient(145deg, #e0e0e0, #cfcfcf) !important;
  color: #444 !important;
  border-radius: var(--radius-sm) !important;
}

/* =========================================================================
   ✨ Animations
   ========================================================================= */
@keyframes fadeIn   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes goldGlow { 0%,100% { box-shadow: 0 0 0 rgba(212,175,55,0); } 50% { box-shadow: 0 0 14px var(--gold-glow); } }
.fade-in   { animation: fadeIn 0.35s ease-out; }
.gold-glow { animation: goldGlow 1.8s ease-in-out infinite; }


/* =========================================================================
   🎀 Brand File Picker — theme-matched wrapper for <input type="file">
   Reusable across the whole system. Use via taif_file_picker() helper, or
   hand-author with this markup:

     <label class="taif-file-picker">
       <input type="file" class="taif-file-picker__input" name="...">
       <span class="taif-file-picker__btn">
         <i class="bi bi-cloud-arrow-up-fill"></i> Choose Files
       </span>
       <span class="taif-file-picker__label">No file chosen</span>
     </label>

   Modifiers:
     .taif-file-picker--compact   smaller, fits inside a table cell
     .taif-file-picker--block     fills the parent (default is shrink-to-fit)
   The label text auto-updates from the binder in shared/components.php.
   ========================================================================= */
.taif-file-picker {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, #fffdf8 0%, #fdf6e3 100%);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
  max-width: 100%;
  position: relative;
  font-size: 13px;
}
.taif-file-picker:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 10px rgba(184,134,11,0.15);
}
.taif-file-picker:active { transform: translateY(1px); }
.taif-file-picker--block { display: flex; width: 100%; }

.taif-file-picker__input {
  /* Native input is visually hidden but still focusable and submittable. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.taif-file-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  font-weight: 600;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  white-space: nowrap;
  border-right: 1px solid rgba(0,0,0,.08);
  transition: background .15s ease;
}
.taif-file-picker:hover .taif-file-picker__btn {
  background: linear-gradient(135deg, #7a5f38, var(--gold-dark));
}
.taif-file-picker__btn i { font-size: 15px; }

.taif-file-picker__label {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  color: var(--text-muted, #64748b);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}
.taif-file-picker.has-file .taif-file-picker__label {
  color: var(--gold-dark);
  font-style: normal;
  font-weight: 600;
}
.taif-file-picker:focus-within {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.25);
}

/* Compact variant — for narrow table cells (e.g. per-line attachments). */
.taif-file-picker--compact { font-size: 12px; border-radius: 8px; }
.taif-file-picker--compact .taif-file-picker__btn   { padding: 5px 10px; gap: 4px; }
.taif-file-picker--compact .taif-file-picker__btn i { font-size: 13px; }
.taif-file-picker--compact .taif-file-picker__label { padding: 5px 8px; max-width: 110px; }

.taif-file-picker.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}


/* =========================================================================
   🌓 Dark Mode — applied when <body data-theme="dark">
   We only override the CSS custom properties from :root. Every component
   that uses var(--bg-page), var(--bg-card), var(--text-primary), etc. will
   adapt automatically. Modules that hardcode #fff or other hex colors in
   their inline <style> blocks will still show light patches — those are
   polished case-by-case as we touch the files.

   Palette philosophy: warm dark browns (not generic slate gray), so the
   gold accents still feel like the Taif brand, just at night.
   ========================================================================= */
[data-theme="dark"] {
  /* === Surfaces — body, cards, "cream" tints all flip to warm dark === */
  --bg-page:         #14110c;
  --bg-card:         #1f1a13;
  --bg-cream:        #2a2218;
  --bg-cream-soft:   #25201a;
  --bg-cream-warm:   #2f2620;
  --bg-row-alt:      #221d15;

  /* === Borders — visible but soft against the dark cards === */
  --border-soft:     #3d3422;
  --border-gold:     #c4a35d;
  --border-gold-2:   #d4b56a;
  --border-gold-3:   #e4c98a;

  /* === Text — light cream on dark, with a warm tone (not white) === */
  --text-primary:    #e8dfc8;
  --text-muted:      #a89a78;
  --text-gold:       #e0c382;
  --text-cream:      #f2e8cc;
  --text-on-gold:    #1a1308;
  --text-danger:     #ff8b88;

  /* === Brand gold — slightly brighter so it pops on dark backgrounds === */
  --gold-dark:       #c4a35d;
  --gold:            #d4b56a;
  --gold-light:      #e4c98a;
  --gold-soft:       #f4dca0;
  --gold-highlight:  #f5d76e;
  --gold-glow:       rgba(244, 220, 160, 0.45);

  /* === Status tints — same hues, slightly desaturated for dark contrast === */
  --success-bg:      #1a3325;
  --danger-bg:       #3a1a1a;

  /* === Shadows — deeper on dark so cards still "lift" === */
  --shadow-sm:       0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow:          0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-gold:     0 0 14px rgba(244, 220, 160, 0.18);
}

/* Body / scrollbar baseline. Some browsers don't propagate :root var changes
   to body's already-painted background; force a repaint via the data-theme
   selector directly. */
body[data-theme="dark"] {
  background: var(--bg-page);
  color: var(--text-primary);
  color-scheme: dark;
}

/* Common patches — components whose contrast needs a small tweak under dark
   that var-only overrides don't fully solve. Add to this list as we find
   pages that look off in dark mode. */
[data-theme="dark"] .app-header {
  /* Keep the brand gold header bar — it reads as "header" in both modes. */
  border-bottom: 1px solid #2a2218;
}
[data-theme="dark"] .alert-warning {
  background: #3a2e15; color: #ffdf99; border-color: #5a4520;
}
[data-theme="dark"] .alert-info {
  background: #14313a; color: #9ddff0; border-color: #1f4a5a;
}
[data-theme="dark"] .alert-success {
  background: #1a3325; color: #a9e0b8; border-color: #2a5236;
}
[data-theme="dark"] .alert-danger {
  background: #3a1a1a; color: #ff9c99; border-color: #5a2424;
}
[data-theme="dark"] code {
  background: #2a2218; color: var(--gold-light); border-color: #3d3422;
}

/* The theme.css's own .taif-file-picker uses a cream gradient backdrop —
   tone it down for dark so the picker doesn't glow like a torch. */
[data-theme="dark"] .taif-file-picker {
  background: linear-gradient(180deg, #2a2218 0%, #221d15 100%);
  border-color: #4a4030;
}
[data-theme="dark"] .taif-file-picker__label { color: var(--text-muted); }
[data-theme="dark"] .taif-file-picker.has-file .taif-file-picker__label { color: var(--gold-light); }

/* -------------------------------------------------------------------------
   🌓 Dark-mode patches — Round 2 (cream-on-cream visibility fixes)
   These selectors had hardcoded light backgrounds in their original CSS so
   they didn't pick up the var() overrides automatically. We patch each one
   here rather than editing every module file.
   ------------------------------------------------------------------------- */

/* Table row hover — was hardcoded #fff4d4 (light yellow) and made every
   hovered row invisible in dark mode. Switch to a warm-dark tint. */
[data-theme="dark"] .data-table tbody tr:hover td {
  background: #2f2620;
  color: var(--text-cream);
}

/* Form inputs — focus + placeholder had hardcoded cream tones that fought
   the dark background. */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #221d15;
  border-color: #4a4030;
  color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: #2a2218;
  border-color: var(--gold);
  box-shadow: 0 0 6px rgba(244, 220, 160, 0.30);
}
[data-theme="dark"] .form-control::placeholder { color: #8a7a52; }

/* Status badges — original colors are light-bg + dark-text, invisible in
   dark mode. Re-paint with dark-bg + light-text equivalents. */
[data-theme="dark"] .badge-success { background: #1a3325; color: #a9e0b8; }
[data-theme="dark"] .badge-danger  { background: #3a1a1a; color: #ff9c99; }
[data-theme="dark"] .badge-info    { background: #14313a; color: #9ddff0; }
[data-theme="dark"] .badge-muted   { background: #2a2218; color: #c8baa0; }
[data-theme="dark"] .badge-gold    { background: #2f2620; color: var(--gold-light); border-color: #4a4030; }

/* Design Projects — status filter cards. The bg comes from inline
   --card-t set in PHP (hardcoded light hex per status). In dark mode we
   override the bg with the dark card surface and let --card-c (the brand
   colour) carry the semantic via icon + count. */
[data-theme="dark"] .dp-card {
  background: var(--bg-card);
  border-color: #3d3422;
}
[data-theme="dark"] .dp-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.45); }
[data-theme="dark"] .dp-card.is-active {
  background: linear-gradient(135deg, #2a2218, #322820);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
}

/* Design Projects — brand chips. */
[data-theme="dark"] .dp-chip          { border-color: #3d3422; }
[data-theme="dark"] .dp-chip:hover    { background: #2a2218; border-color: var(--gold); }
[data-theme="dark"] .dp-chip.is-active {
  background: linear-gradient(135deg, #2a2218, #322820);
  border-color: var(--gold);
  color: var(--gold-light);
}
[data-theme="dark"] .dp-chip-count    { background: rgba(255,255,255,0.08); color: var(--text-cream); }
[data-theme="dark"] .dp-chip.is-active .dp-chip-count { background: var(--gold-dark); color: #1a1308; }

/* Design Projects — grid card (hardcoded cream gradient background). */
[data-theme="dark"] .dp-grid-card {
  background: linear-gradient(180deg, #1f1a13 0%, #2a2218 100%);
  border-color: #3d3422;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30),
              inset 0 0 0 1px rgba(244,220,160,0.05);
}
[data-theme="dark"] .dp-grid-card:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 32px rgba(0,0,0,0.55),
              0 0 0 1px rgba(244,220,160,0.18);
}
[data-theme="dark"] .dp-grid-thumb-wrap {
  background: radial-gradient(circle at 50% 38%, #2a2218 0%, #14110c 100%);
  box-shadow: inset 0 0 0 1px rgba(196,163,93,0.28);
}
[data-theme="dark"] .dp-grid-actions  { border-top-color: #3d3422; }
[data-theme="dark"] .dp-grid-no       { color: var(--text-muted); }

/* The "current branch" tooltip in the top bar (sun/moon area) — was the
   browser-default light pill. Force a dark version. */
[data-theme="dark"] [title]:hover::after { color: inherit; }

/* Generic "inline cream highlight rows" — many module pages have inline
   style="background:#fff8e1" or similar to mark a featured row OR to flag
   a readonly input (commonly #f5f0e1). Override anything with a literal
   cream background in dark mode. */
[data-theme="dark"] tr[style*="#fff8e1"] td,
[data-theme="dark"] tr[style*="#fff4d4"] td,
[data-theme="dark"] tr[style*="#fdf6e3"] td,
[data-theme="dark"] tr[style*="#f5f0e1"] td,
[data-theme="dark"] [style*="background:#fff8e1"],
[data-theme="dark"] [style*="background:#fff4d4"],
[data-theme="dark"] [style*="background:#fdf6e3"],
[data-theme="dark"] [style*="background:#f5f0e1"],
[data-theme="dark"] [style*="background: #f5f0e1"] {
  background: #221d15 !important;
  color: var(--text-cream) !important;
}

/* Readonly inputs specifically — keep the visual "this is locked" cue by
   using a slightly different shade than regular inputs, plus a muted text
   colour so it reads as informational, not editable. */
[data-theme="dark"] input[readonly],
[data-theme="dark"] textarea[readonly] {
  background: #1a1610 !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
}

/* KPI cards used on dashboards (.kpi-card) — they often hardcode
   background:#fff. Force a dark card surface in dark mode. */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .kpi-value { color: var(--text-cream); }
[data-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff0"]),
[data-theme="dark"] [style*="background: #fff"]:not([style*="background: #fff0"]),
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
  background: var(--bg-card) !important;
}

/* ===========================================================================
   🔎 SmartSelect — searchable <select> typeahead (shared/js/smart_select.js)
   =========================================================================== */
.smart-select-wrap { position: relative; }
.smart-select-input {
  /* When a long option label is selected (e.g. "CUNZITE · Citywalk -
     shop B04-00-09 (8)"), show ellipsis instead of just truncating —
     and a hover title (set by JS) reveals the full text. text-align:
     left + dir:ltr defend against any RTL/centered inheritance. */
  width: 100%;
  padding-right: 28px !important;
  text-align: left !important;
  direction: ltr;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.smart-select-caret {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  color: #94a3b8; font-size: 10px; user-select: none;
}
/* The popup is appended to <body> by JS and positioned with viewport
   coordinates (position:fixed) so it escapes any ancestor's overflow
   clipping (e.g. .table-wrap's overflow-x:auto). top/left/width/max-height
   are all set inline by positionPopup() — we only style appearance here. */
.smart-select-popup {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-gold-2, #cbd5e1);
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.smart-select-option {
  padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: var(--text-primary, #0f172a);
}
.smart-select-option:last-child { border-bottom: none; }
.smart-select-option.highlighted { background: #fef3c7; }
.smart-select-empty {
  padding: 12px; color: #94a3b8;
  text-align: center; font-size: 12px;
}
[data-theme="dark"] .smart-select-option.highlighted { background: rgba(254, 243, 199, 0.12); }