/* AL SAQAFAH theme for the ERP — same tokens and shell as manage.alsaqafah.com.
   Loaded after Bootstrap and style.css; changes look only, never behaviour. */
:root {
  --green-900: #0A3A2C; --green-700: #0E4D3A; --green-500: #2F6B57; --green-100: #DCE8E2;
  --gold-600: #A8862C; --gold-500: #C9A13B; --gold-100: #F3E7C4;
  --cream: #F4EEDD;
  --bg: #F7F4EC; --surface: #FFFFFF; --surface-2: #FBF8F0; --border: #E4DDCB; --border-strong: #CFC6AE;
  --text: #1C2A24; --text-2: #4E5C55; --text-3: #7A857F;
  --sidebar-bg: var(--green-900); --sidebar-fg: #E9F0EC; --sidebar-muted: #9DB5AA; --sidebar-active: rgba(201,161,59,.16);
  --accent: var(--green-700); --accent-fg: #FFFFFF; --focus: #C9A13B;
  --shadow: 0 1px 2px rgba(10,58,44,.06), 0 2px 8px rgba(10,58,44,.05);
  --radius: 10px;
  --font-latin: "Inter", system-ui, sans-serif;
  --font-bn: "Hind Siliguri", "Noto Sans Bengali", system-ui, sans-serif;
  --font-brand: "Cinzel", Georgia, serif;
  --font-ar-display: "Amiri", "Noto Naskh Arabic", serif;
  --sb-w: 264px; --hd-h: 64px;

  /* the old stylesheet's own variables */
  --erp-bg: var(--bg); --erp-primary: var(--green-700); --erp-text: var(--text);

  /* Bootstrap 5.3 */
  --bs-primary: #0E4D3A; --bs-primary-rgb: 14,77,58;
  --bs-primary-text-emphasis: #0A3A2C; --bs-primary-bg-subtle: #DCE8E2; --bs-primary-border-subtle: #B7D0C5;
  --bs-success: #1F7A4D; --bs-success-rgb: 31,122,77;
  --bs-warning: #C9A13B; --bs-warning-rgb: 201,161,59;
  --bs-danger: #B3261E; --bs-danger-rgb: 179,38,30;
  --bs-info: #245C8F; --bs-info-rgb: 36,92,143;
  --bs-secondary-color: #4E5C55;
  --bs-body-bg: #F7F4EC; --bs-body-color: #1C2A24; --bs-body-color-rgb: 28,42,36;
  --bs-tertiary-bg: #FBF8F0; --bs-secondary-bg: #F4EEDD;
  --bs-border-color: #E4DDCB; --bs-border-color-translucent: rgba(10,58,44,.12);
  --bs-link-color: #0E4D3A; --bs-link-color-rgb: 14,77,58; --bs-link-hover-color: #0A3A2C; --bs-link-hover-color-rgb: 10,58,44;
  --bs-focus-ring-color: rgba(201,161,59,.35);
  --bs-border-radius: 8px; --bs-border-radius-lg: 10px;
}

html, body, button, input, select, textarea, .tooltip, .popover { font-family: var(--font-bn) !important }
body { background: var(--bg) !important; color: var(--text); font-size: 15px; line-height: 1.6 }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
[hidden] { display: none !important }

/* ---------- Shell: sidebar + header (as manage.alsaqafah.com) ---------- */
.app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100vh }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 16px 12px; gap: 2px; z-index: 30; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; text-decoration: none }
.brand-logo { width: 36px; height: 36px; border-radius: 8px; flex: none }
.brand-text { display: flex; flex-direction: column; min-width: 0 }
.brand-name { font-family: var(--font-brand) !important; font-weight: 700; letter-spacing: .06em; font-size: 15px; line-height: 1.2; color: #fff }
.brand-sub { font-size: 12px; color: var(--sidebar-muted) }
.nav-section > summary { list-style: none }
.nav-section > summary::-webkit-details-marker { display: none }
.nav-group { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; border-radius: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--sidebar-muted); padding: 12px 10px 6px; user-select: none }
.nav-group:hover { color: #fff }
.nav-group .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; flex: none }
.nav-section[open] > .nav-group .chev { transform: rotate(90deg) }
.sidebar .nav { display: flex; flex-direction: column; gap: 1px; flex-wrap: nowrap }
.sidebar .nav a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--sidebar-fg); text-decoration: none; font-size: 14.5px; position: relative; line-height: 1.4 }
.sidebar .nav a:hover { background: rgba(255,255,255,.06); color: #fff }
.sidebar .nav a[aria-current="page"] { background: var(--sidebar-active); color: #fff }
.sidebar .nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold-500) }
.sidebar .nav a .ic { color: var(--sidebar-muted) }
.sidebar .nav a[aria-current="page"] .ic, .sidebar .nav a:hover .ic { color: var(--gold-500) }
.sb-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: var(--sidebar-muted) }
.sb-foot .ar { font-family: var(--font-ar-display) !important; font-size: 16px }

.main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh }
.header { position: sticky; top: 0; z-index: 20; height: var(--hd-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; padding: 0 16px }
@media (min-width: 900px) { .header { padding: 0 28px } }
.header-title { font-weight: 600; font-size: 16px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.spacer { flex: 1 }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-2); flex: none }
.icon-btn:hover { background: var(--surface-2); border-color: var(--border) }
.menu-btn { display: none }
.profile { display: flex; align-items: center; gap: 8px }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-100); color: var(--green-900); display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none }
.profile-meta { display: flex; flex-direction: column; line-height: 1.25 }
.profile-meta b { font-size: 13.5px; font-weight: 600 } .profile-meta small { font-size: 12px; color: var(--text-3) }
.btn-logout { height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 14px; cursor: pointer }
.btn-logout:hover { border-color: var(--bad, #B3261E); color: #B3261E }
.btn-logout .ic { width: 18px; height: 18px }

.content-area.container-fluid { padding: 20px 16px 32px; max-width: 1480px; margin: 0; width: 100% }
@media (min-width: 900px) { .content-area.container-fluid { padding: 24px 28px 36px } }
.erp-footer { margin-top: auto; padding: 14px 16px 22px; text-align: center; font-size: 12.5px; color: var(--text-3); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap }
.no-shell .erp-footer { margin-top: 0 }

.scrim { position: fixed; inset: 0; background: rgba(5,20,15,.45); z-index: 25 }
@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr) }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(280px, 86vw); transform: translateX(-105%); transition: transform .2s ease; visibility: hidden }
  .app.drawer-open .sidebar { transform: none; visibility: visible }
  .menu-btn { display: inline-grid }
  .profile-meta { display: none }
}
@media (max-width: 560px) { .hide-xs { display: none } .btn-logout { padding: 0 10px } }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none } }

/* ---------- Bootstrap components in the AL SAQAFAH look ---------- */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-weight: 700 }
a { color: var(--accent) }
.text-primary { color: var(--green-700) !important }
.bg-primary { background-color: var(--green-700) !important }
.text-secondary, .text-muted { color: var(--text-2) !important }

.btn { border-radius: 8px; font-weight: 500 }
.btn-primary { --bs-btn-bg: #0E4D3A; --bs-btn-border-color: #0E4D3A; --bs-btn-hover-bg: #0A3A2C; --bs-btn-hover-border-color: #0A3A2C; --bs-btn-active-bg: #0A3A2C; --bs-btn-active-border-color: #0A3A2C; --bs-btn-disabled-bg: #0E4D3A; --bs-btn-disabled-border-color: #0E4D3A; --bs-btn-focus-shadow-rgb: 201,161,59 }
.btn-outline-primary { --bs-btn-color: #0E4D3A; --bs-btn-border-color: #0E4D3A; --bs-btn-hover-bg: #0E4D3A; --bs-btn-hover-border-color: #0E4D3A; --bs-btn-active-bg: #0A3A2C; --bs-btn-active-border-color: #0A3A2C; --bs-btn-focus-shadow-rgb: 201,161,59 }
.btn-outline-secondary { --bs-btn-color: #4E5C55; --bs-btn-border-color: #CFC6AE; --bs-btn-hover-bg: #FBF8F0; --bs-btn-hover-color: #1C2A24; --bs-btn-hover-border-color: #A8A089; --bs-btn-active-bg: #F4EEDD; --bs-btn-active-color: #1C2A24 }
.btn-success { --bs-btn-bg: #1F7A4D; --bs-btn-border-color: #1F7A4D; --bs-btn-hover-bg: #186340; --bs-btn-hover-border-color: #186340 }
.btn-outline-success { --bs-btn-color: #1F7A4D; --bs-btn-border-color: #1F7A4D; --bs-btn-hover-bg: #1F7A4D; --bs-btn-hover-border-color: #1F7A4D }
.btn-warning { --bs-btn-bg: #C9A13B; --bs-btn-border-color: #C9A13B; --bs-btn-color: #1C2A24; --bs-btn-hover-bg: #A8862C; --bs-btn-hover-border-color: #A8862C }
.btn-outline-warning { --bs-btn-color: #8A6D1F; --bs-btn-border-color: #C9A13B; --bs-btn-hover-bg: #C9A13B; --bs-btn-hover-border-color: #C9A13B; --bs-btn-hover-color: #1C2A24 }
.btn-dark { --bs-btn-bg: #0A3A2C; --bs-btn-border-color: #0A3A2C }
.btn-light { --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #E4DDCB; --bs-btn-color: #0E4D3A; --bs-btn-hover-bg: #F3E7C4; --bs-btn-hover-border-color: #C9A13B }

.card { --bs-card-border-color: var(--border); --bs-card-border-radius: var(--radius); --bs-card-cap-bg: var(--surface-2); background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius); box-shadow: var(--shadow) !important }
.card.shadow-lg { box-shadow: 0 12px 32px rgba(10,58,44,.12) !important }
.card-header { background: var(--surface-2); border-bottom: 1px solid var(--border) !important; font-weight: 600 }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--border) }

.table { --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--surface-2); --bs-table-striped-bg: #FBF8F0; font-size: 14px }
.table > :not(caption) > * > * { padding: .7rem 1rem }
.table thead th, .table-light, .table > thead.table-light > tr > th { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text-3); background: var(--surface-2) !important; color: var(--text-3) !important; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--border) }
.table-dark { --bs-table-bg: var(--green-900) }

.form-control, .form-select { border-color: var(--border-strong); border-radius: 8px; min-height: 42px; background-color: var(--surface) }
.form-control:focus, .form-select:focus { border-color: var(--gold-500); box-shadow: 0 0 0 .2rem rgba(201,161,59,.25) }
.form-check-input:checked { background-color: var(--green-700); border-color: var(--green-700) }
.form-check-input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 .2rem rgba(201,161,59,.25) }
.form-label { font-weight: 500; color: var(--text-2) }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong) }

.badge.text-bg-primary { background: var(--green-700) !important }
.badge.text-bg-success { background: #E2F2E8 !important; color: #1F7A4D !important }
.badge.text-bg-warning { background: #FCF0D2 !important; color: #8A6000 !important }
.badge.text-bg-danger { background: #FBE4E2 !important; color: #B3261E !important }
.badge.text-bg-secondary { background: var(--surface-2) !important; color: var(--text-3) !important; border: 1px solid var(--border) }
.badge.text-bg-info { background: #E3EDF7 !important; color: #245C8F !important }
.badge { font-weight: 600; border-radius: 11px }

.alert { border-radius: var(--radius) }
.alert-success { --bs-alert-bg: #E2F2E8; --bs-alert-color: #165C3A; --bs-alert-border-color: #BFDFCC }
.alert-info { --bs-alert-bg: #E3EDF7; --bs-alert-color: #245C8F; --bs-alert-border-color: #C6D9EC }
.alert-warning { --bs-alert-bg: #FCF0D2; --bs-alert-color: #7A5400; --bs-alert-border-color: #EED79C }
.alert-danger { --bs-alert-bg: #FBE4E2; --bs-alert-color: #8C1D17; --bs-alert-border-color: #F1C2BE }

.pagination { --bs-pagination-color: var(--green-700); --bs-pagination-active-bg: var(--green-700); --bs-pagination-active-border-color: var(--green-700); --bs-pagination-border-color: var(--border); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(201,161,59,.25) }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--green-700); --bs-nav-tabs-border-color: var(--border) }
.nav-pills { --bs-nav-pills-link-active-bg: var(--green-700) }
.nav-link { color: var(--green-700) }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--green-700); border-color: var(--border) }
.progress { --bs-progress-bar-bg: var(--green-700); background: var(--surface-2) }
.list-group { --bs-list-group-border-color: var(--border); --bs-list-group-active-bg: var(--green-700); --bs-list-group-active-border-color: var(--green-700) }

/* Hero / callout panels from the old stylesheet: brand green with a gold edge */
.personal-hero, .inventory-hero, .personal-dashboard-callout, .inventory-dashboard-callout,
.stock-detail-hero, .loan-detail-hero, .delivery-detail-hero:not(.void), .sales-delivery-hero:not(.void), .inventory-engine-banner {
  background:
    radial-gradient(circle at 88% 10%, rgba(201,161,59,.22), transparent 30%),
    linear-gradient(135deg, #0A3A2C 0%, #0E4D3A 60%, #2F6B57 100%) !important;
  border: 0; border-left: 4px solid var(--gold-500); box-shadow: var(--shadow)
}
.personal-eyebrow, .inventory-eyebrow { color: var(--gold-500) !important }
.personal-nav-link, .inventory-nav-link { color: inherit !important }
.personal-subnav a.active, .inventory-subnav a.active { background: var(--green-700) !important; color: #fff !important; box-shadow: none }
.personal-subnav a:hover, .inventory-subnav a:hover { background: var(--gold-100); color: var(--green-900) }
.dashboard-card { border-radius: var(--radius) }
.dashboard-card:hover { box-shadow: 0 8px 22px rgba(10,58,44,.10) !important }
.catalog-count, .price-pill { background: var(--gold-100) !important; color: var(--green-900) !important }
.milestone-node.done, .milestone-connector.done { background: var(--green-700); border-color: var(--green-700) }

/* ---------- Login page ---------- */
.no-shell .login-main { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 32px 16px }
.no-shell .login-main > .login-hero { width: 100%; margin: 0 }
.no-shell .login-hero::before { display: none }
.login-card { border-radius: 14px !important; border-top: 4px solid var(--gold-500) !important }
.login-logo { width: 150px; height: auto; display: block; margin: 0 auto }
.login-title { font-family: var(--font-brand) !important; letter-spacing: .06em; color: var(--green-700); font-size: 22px; margin: 14px 0 2px }
.login-sub { color: var(--text-2); font-size: 14px }
.no-shell { background:
  radial-gradient(circle at 12% 18%, rgba(201,161,59,.10), transparent 28%),
  radial-gradient(circle at 88% 82%, rgba(14,77,58,.08), transparent 30%), var(--bg) !important }

@media print {
  .sidebar, .header, .erp-footer, .scrim { display: none !important }
  .app { display: block }
  .content-area.container-fluid { padding: 0 !important; max-width: none }
  body { background: #fff !important }
}

/* ---------- One type scale for every page (same rhythm as manage.alsaqafah.com) ---------- */
.content-area h1, .content-area .h1, .content-area .h2 { font-size: 1.5rem; line-height: 1.35 }
.content-area h2, .content-area .h3 { font-size: 1.25rem; line-height: 1.4 }
.content-area h3, .content-area .h4 { font-size: 1.1rem }
.content-area h4, .content-area h5, .content-area .h5 { font-size: 1rem }
.content-area .display-1 { font-size: 3rem }
.content-area .display-6 { font-size: 1.6rem }
.content-area .fs-4 { font-size: 1.2rem !important } .content-area .fs-5 { font-size: 1.08rem !important }
.content-area .small, .content-area small { font-size: .875rem }
.content-area .form-label, .content-area .card-header { font-size: .95rem }
.content-area .btn { font-size: .95rem } .content-area .btn-sm { font-size: .85rem } .content-area .btn-lg { font-size: 1.05rem }

/* hero / callout panels: smaller headline, readable labels */
.personal-hero h1, .inventory-hero h1, .page-heading h1 { font-size: clamp(1.45rem, 2.1vw, 1.85rem) !important; line-height: 1.35 }
.personal-dashboard-callout h2, .inventory-dashboard-callout h2 { font-size: clamp(1.2rem, 1.7vw, 1.45rem) !important; color: #fff }
.loan-detail-hero h1, .stock-detail-hero h1, .delivery-detail-hero h1, .sales-delivery-hero h1 { font-size: clamp(1.35rem, 2vw, 1.7rem) !important }
.personal-hero p, .inventory-hero p { font-size: .97rem !important }
.net-worth-panel strong, .inventory-valuation-panel > strong, .loan-detail-hero > div:last-child > strong,
.stock-detail-hero > div:last-child > strong, .delivery-detail-hero > div:last-child strong { font-size: clamp(1.5rem, 2.4vw, 2rem) !important }
.metric-card strong, .investment-value { font-size: clamp(1.25rem, 1.9vw, 1.6rem) !important }
.account-tile > strong, .transfer-visual span { font-size: 1.3rem !important }
.personal-eyebrow, .inventory-eyebrow { font-size: .82rem !important; letter-spacing: .02em }
.quick-action-grid span, .account-type-chip, .transaction-type-badge, .movement-chip, .personal-callout-numbers span,
.inventory-callout-numbers span, .inventory-engine-banner span, .opening-preview span, .inventory-cost-method, .delivery-post-warning span { font-size: .85rem !important }
.quick-action-grid strong { font-size: .98rem !important }
.personal-callout-numbers strong, .inventory-callout-numbers strong { font-size: 1.15rem !important }
.table { font-size: .93rem }
.table thead th { font-size: .85rem !important }
@media (max-width: 575.98px) { .content-area h1, .content-area .h1, .content-area .h2 { font-size: 1.3rem } }