/* ═══════════════════════════════════════════════════════════════════════
   DONUT ERP — Unified Brand Theme  (style_one.css)
   Loaded AFTER donut-theme.css + donut-themes.css in head_assets.php,
   and directly linked in login.php.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Google Font: Plus Jakarta Sans (login-page brand font) ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   1. BRAND PALETTE TOKENS
   Defines --brand-* vars used by login.php inline styles, and remaps
   the existing --dn-* system vars onto the same palette so every
   module page inherits the unified identity automatically.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand palette (these are NEW vars — do NOT conflict with the
        donut-themes.css theme system which controls --dn-* vars)  ────── */
  --brand-1:           #ec1f7a;    /* hot pink — always the brand CTA */
  --brand-1-hover:     #c81566;
  --brand-1-soft:      #fce7f3;
  --brand-1-ink:       #a8145a;
  --brand-2:           #7c3aed;    /* deep purple */
  --brand-2-soft:      #ede9fe;
  --brand-2-ink:       #5b21b6;
  --brand-3:           #38bdf8;    /* sky blue */
  --brand-3-soft:      #e0f2fe;
  --brand-3-ink:       #0369a1;

  /* ── Bootstrap primary → always brand pink regardless of theme ───────── */
  --bs-primary:          #ec1f7a;
  --bs-primary-rgb:      236, 31, 122;
  --bs-link-color:       #a8145a;
  --bs-link-hover-color: #ec1f7a;

  /* ── Dashboard accent (used by dashboard_admin.php inline CSS) ───────── */
  --ds-accent:           #ec1f7a;
  --ds-accent-hover:     #c81566;
  --ds-accent-soft:      rgba(236, 31, 122, 0.12);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --dn-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Login-page surface tokens (login.php inline styles reference these) */
  --ink:         #0f172a;
  --ink-soft:    #475569;
  --muted:       #94a3b8;
  --border:      #e6e9f0;
  --surface:     #ffffff;
  --surface-soft:#f7f9fc;
  --danger:      #dc2626;
  --danger-bg:   #fef2f2;
  --success:     #16a34a;
  --success-bg:  #f0fdf4;
  --radius-lg:   22px;
  --radius-md:   14px;
  --radius-sm:   10px;
}

/* ── When NO theme is selected (fallback: lavender-ish brand defaults) ───
   Only fires when <html> has no data-theme attribute at all.             */
:root:not([data-theme]) {
  --dn-primary:        #ec1f7a;
  --dn-primary-dark:   #c81566;
  --dn-sidebar-bg:     #fff9fc;
  --dn-sidebar-active-bg:   #fce7f3;
  --dn-sidebar-active-text: #a8145a;
  --dn-bg:             #fdf2f8;
  --dn-border:         #fce7f3;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. GLOBAL TYPE
   ═══════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--dn-font);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dn-font);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. BOOTSTRAP PRIMARY OVERRIDES
   Bootstrap reads --bs-primary-rgb for utilities like bg-primary, etc.
   ═══════════════════════════════════════════════════════════════════════ */
.btn-primary {
  background-color: var(--brand-1) !important;
  border-color:     var(--brand-1) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--brand-1-hover) !important;
  border-color:     var(--brand-1-hover) !important;
}
.btn-outline-primary {
  color:        var(--brand-1) !important;
  border-color: var(--brand-1) !important;
}
.btn-outline-primary:hover {
  background-color: var(--brand-1) !important;
  color: #fff !important;
}
.bg-primary   { background-color: var(--brand-1) !important; }
.text-primary { color: var(--brand-1) !important; }
.border-primary { border-color: var(--brand-1) !important; }
a { color: var(--brand-1-ink); }
a:hover { color: var(--brand-1); }

/* ═══════════════════════════════════════════════════════════════════════
   4. SIDEBAR ACTIVE STATE
   ═══════════════════════════════════════════════════════════════════════ */
.nav-link.active,
.sidebar .active > .nav-link,
#appSidebar .active,
#appSidebar a.active {
  background-color: var(--dn-sidebar-active-bg) !important;
  color: var(--dn-sidebar-active-text) !important;
  font-weight: 600;
}
#appSidebar a.active i,
#appSidebar .active i {
  color: var(--brand-1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. FORM FOCUS RINGS
   ═══════════════════════════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 0.2rem rgba(236, 31, 122, 0.2) !important;
}
.form-check-input:checked {
  background-color: var(--brand-1) !important;
  border-color:     var(--brand-1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. SELECT2 HIGHLIGHT
   ═══════════════════════════════════════════════════════════════════════ */
.select2-results__option--highlighted {
  background-color: var(--brand-1) !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--brand-1) !important;
  box-shadow: 0 0 0 0.2rem rgba(236, 31, 122, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. DATATABLES PAGINATION
   ═══════════════════════════════════════════════════════════════════════ */
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
  background: var(--brand-1) !important;
  border-color: var(--brand-1) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. TABLE ROW HOVER
   ═══════════════════════════════════════════════════════════════════════ */
.table-hover > tbody > tr:hover > * {
  background-color: var(--brand-1-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. BADGES / STATUS PILLS
   ═══════════════════════════════════════════════════════════════════════ */
.badge.bg-primary { background-color: var(--brand-1) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   10. SCROLLBAR (Webkit)
   ═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #f9a8d4; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-1); }

/* ═══════════════════════════════════════════════════════════════════════
   11. THEME PICKER ITEMS  (rendered by sidebar-shell.js)
   ═══════════════════════════════════════════════════════════════════════ */
.theme-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  transition: background .15s;
}
.theme-picker-item:hover { background: rgba(0,0,0,.06); }
.theme-picker-item.active { background: var(--brand-1-soft); font-weight: 600; }
.theme-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0,0,0,.12);
}

/* ── Brand-coloured active nav link (overrides theme active colour for
      the dashboard icon so it stays on-brand regardless of theme) ───── */
#appSidebar a.active i { color: var(--brand-1) !important; }

/* ── Mobile sidebar toggle — only visible on mobile, never on desktop ── */
@media (min-width: 768px) {
  #sidebarMobileToggle { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Per-theme accent override — remaps --ds-accent onto the chosen
   palette so every topbar/header using var(--ds-accent) follows the
   theme. Placed AFTER the :root block so it wins the cascade.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="sky"]      { --ds-accent: #0EA5E9; --ds-accent-hover: #0284C7; --ds-accent-soft: rgba(14,165,233,.12); }
[data-theme="mint"]     { --ds-accent: #10B981; --ds-accent-hover: #059669; --ds-accent-soft: rgba(16,185,129,.12); }
[data-theme="peach"]    { --ds-accent: #F97316; --ds-accent-hover: #EA580C; --ds-accent-soft: rgba(249,115,22,.12); }
[data-theme="lemon"]    { --ds-accent: #D97706; --ds-accent-hover: #B45309; --ds-accent-soft: rgba(217,119,6,.12); }
[data-theme="rose"]     { --ds-accent: #F43F5E; --ds-accent-hover: #E11D48; --ds-accent-soft: rgba(244,63,94,.12); }
[data-theme="sage"]     { --ds-accent: #16A34A; --ds-accent-hover: #15803D; --ds-accent-soft: rgba(22,163,74,.12); }
[data-theme="coral"]    { --ds-accent: #FB7185; --ds-accent-hover: #F43F5E; --ds-accent-soft: rgba(251,113,133,.12); }
[data-theme="lavender"]  { --ds-accent: #8B5CF6; --ds-accent-hover: #7C3AED; --ds-accent-soft: rgba(139,92,246,.12); }
[data-theme="charcoal"]  { --ds-accent: #1F2937; --ds-accent-hover: #111827; --ds-accent-soft: rgba(31,41,55,.10); }

/* ═══════════════════════════════════════════════════════════════════════
   Sitewide page-header / topbar / banner theming
   Forces ALL .page-header, .topbar and .banner elements to follow the
   active theme — overrides per-page hardcoded gradients via !important
   (per-page inline <style> rules never use !important on these, so ours
   wins regardless of specificity). @media print blocks inside each page
   are unaffected (different medium, and print rules use their own
   !important for print-color-adjust).
   ═══════════════════════════════════════════════════════════════════════ */
.page-header {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: #fff !important;
}
.page-header h1, .page-header h2, .page-header h3, .page-header h4,
.page-header h5, .page-header h6,
.page-header p, .page-header small,
.page-header .text-muted, .page-header [class*="text-"] {
  color: #fff !important;
}

/* .topbar already uses var(--ds-accent) on most pages — this catches
   any that were hardcoded (e.g. leasing_dashboard, dashboardN files) */
.topbar,
header.topbar {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: #fff !important;
}
.topbar h1, .topbar h2, .topbar h3, .topbar h4,
.topbar h5, .topbar h6, .topbar .sub, .topbar .meta {
  color: inherit !important;
}

/* .banner — detail-view header banners (acc_ap_detail, acc_ar_detail etc.) */
.banner {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: #fff !important;
}
.banner h1, .banner h2, .banner h3, .banner h4,
.banner h5, .banner h6, .banner p, .banner small, .banner span {
  color: #fff !important;
}

/* .page-banner — inventory_dashboard, accounting_dashboard, acc_voucher_view etc. */
.page-banner {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: #fff !important;
}
.page-banner h1, .page-banner h2, .page-banner h3, .page-banner h4,
.page-banner h5, .page-banner h6, .page-banner p, .page-banner small,
.page-banner span { color: #fff !important; }

/* .card-main .card-header / .card-header-bar — company_listing, bank pages etc. */
.card-main .card-header,
.card-main .card-header-bar {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: #fff !important;
}
.card-main .card-header *,
.card-main .card-header-bar * { color: #fff !important; }

/* ── form-banner (86+ add_ pages) + view-banner (83+ view_ pages) ───────── */
.form-banner,
.view-banner,
.summary-header,
.case-header,
.exec-banner,
.hub-hero,
.page-hero,
.rr-banner,
.pg-header,
.bank-header,
.inv-banner,
.inv-label-banner,
.list-banner,
.memo-banner,
.prj-banner,
.rcp-header,
.calc-header,
.pdc-dashboard-banner,
.pdc-collected-banner,
.pdc-issued-banner,
.pdc-masters-banner,
.pim-banner,
.aidash header.top,
.ldash header.topbar,
.rc-header,
.arc-header,
.lgl-header,
.amrc-header,
.fmrc-header,
.smrc-header,
.hrrc-header,
.pmrc-header,
.pdcrc-header,
.flt-header,
.pimrc-header {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  color: #fff !important;
}
.form-banner h1, .form-banner h2, .form-banner h3, .form-banner h4,
.form-banner h5, .form-banner h6, .form-banner p, .form-banner small,
.form-banner span, .form-banner .text-muted,
.view-banner h1, .view-banner h2, .view-banner h3, .view-banner h4,
.view-banner h5, .view-banner h6, .view-banner p, .view-banner small,
.view-banner span, .view-banner .text-muted,
.summary-header *, .case-header *, .exec-banner *,
.hub-hero h1, .hub-hero h2, .hub-hero h3, .hub-hero h4, .hub-hero p,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero p,
.rr-banner h1, .rr-banner h2, .rr-banner h3, .rr-banner h4, .rr-banner p,
.pg-header h1, .pg-header h2, .pg-header h3, .pg-header h4, .pg-header p,
.bank-header h1, .bank-header h2, .bank-header h3, .bank-header h4, .bank-header p,
.inv-banner h1, .inv-banner h2, .inv-banner h3, .inv-banner h4, .inv-banner p,
.inv-label-banner h1, .inv-label-banner h2, .inv-label-banner h3, .inv-label-banner h4, .inv-label-banner p,
.list-banner h1, .list-banner h2, .list-banner h3, .list-banner h4, .list-banner p,
.memo-banner h1, .memo-banner h2, .memo-banner h3, .memo-banner h4, .memo-banner p,
.prj-banner h1, .prj-banner h2, .prj-banner h3, .prj-banner h4, .prj-banner p,
.rcp-header h1, .rcp-header h2, .rcp-header h3, .rcp-header h4, .rcp-header p,
.calc-header h1, .calc-header h2, .calc-header h3, .calc-header h4, .calc-header p,
.pdc-dashboard-banner h1, .pdc-dashboard-banner h2, .pdc-dashboard-banner h3, .pdc-dashboard-banner h4, .pdc-dashboard-banner p,
.pdc-collected-banner h1, .pdc-collected-banner h4, .pdc-collected-banner p,
.pdc-issued-banner h1, .pdc-issued-banner h4, .pdc-issued-banner p,
.pdc-masters-banner h1, .pdc-masters-banner h4, .pdc-masters-banner p,
.pim-banner h4, .pim-banner p,
.aidash header.top h1, .aidash header.top h2, .aidash header.top h3, .aidash header.top h4, .aidash header.top p,
.ldash header.topbar h1, .ldash header.topbar h2, .ldash header.topbar h3, .ldash header.topbar h4, .ldash header.topbar p,
.rc-header *, .arc-header *, .lgl-header *,
.amrc-header *, .fmrc-header *, .smrc-header *,
.hrrc-header *, .pmrc-header *, .pdcrc-header *,
.flt-header *, .pimrc-header * { color: #fff !important; }

/* ── .text-white inside any banner/header must stay white on charcoal ── */
/* donut-theme.css neutralises Bootstrap's .text-white to var(--dn-text)  */
/* on charcoal that resolves to #111827 — override it back to white here  */
.page-header .text-white, .topbar .text-white,
.banner .text-white, .page-banner .text-white,
.form-banner .text-white, .view-banner .text-white,
.summary-header .text-white, .case-header .text-white,
.exec-banner .text-white, .hub-hero .text-white, .page-hero .text-white,
.rr-banner .text-white, .pg-header .text-white, .bank-header .text-white,
.inv-banner .text-white, .inv-label-banner .text-white,
.list-banner .text-white, .memo-banner .text-white, .prj-banner .text-white,
.rcp-header .text-white, .calc-header .text-white,
.pdc-dashboard-banner .text-white, .pdc-collected-banner .text-white,
.pdc-issued-banner .text-white, .pdc-masters-banner .text-white,
.pim-banner .text-white,
.rc-header .text-white, .arc-header .text-white, .lgl-header .text-white,
.amrc-header .text-white, .fmrc-header .text-white, .smrc-header .text-white,
.hrrc-header .text-white, .pmrc-header .text-white, .pdcrc-header .text-white,
.flt-header .text-white, .pimrc-header .text-white { color: #fff !important; }