:root {
  --brand: #8a3b1f;
  --brand-dark: #5c2712;
  --accent-red: #b3261e;
  --sidebar-width: 250px;

  /* Override Bootstrap's default blue "primary" so every .btn-primary,
     .bg-primary, .text-primary, .border-primary etc. picks up the brown
     theme automatically across every view, without editing each page. */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 138, 59, 31;
  --bs-danger: var(--accent-red);
  --bs-danger-rgb: 179, 38, 30;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: 138, 59, 31;
  --bs-link-hover-color: var(--brand-dark);
}
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-danger {
  --bs-btn-bg: var(--accent-red);
  --bs-btn-border-color: var(--accent-red);
  --bs-btn-hover-bg: #8f1e18;
  --bs-btn-hover-border-color: #8f1e18;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
}
.bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.badge.bg-primary { background-color: var(--brand) !important; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

html, body { height: 100%; margin: 0; }
body { background: #f4f6f9; font-family: 'Segoe UI', system-ui, sans-serif; }

/* Full-bleed background helper so pages never show a white gap on short
   viewports or mobile browsers whose chrome shrinks/grows 100vh (login page).
   Clean white background with a soft brand-colored accent, per the client's
   requested login design. */
.full-bleed-bg {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 8%, rgba(30,78,140,.08), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(30,78,140,.06), transparent 45%),
    #ffffff;
  display: flex;
  align-items: center;
}
.full-bleed-bg .text-muted, .full-bleed-bg .text-muted a { color: #6c757d !important; }
.login-brand-strip { height: 6px; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); border-radius: .6rem .6rem 0 0; }
.login-house-footer { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.login-house-footer img { height: 26px; object-fit: contain; }

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: linear-gradient(180deg, var(--brand-dark), var(--brand));
  position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 1030;
  transition: transform .25s ease;
}
.sidebar .brand { color: #fff; font-weight: 700; font-size: 1.2rem; padding: 1.1rem 1.2rem; display: block; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.15); }
.sidebar .nav-link { color: rgba(255,255,255,.85); padding: .6rem 1.2rem; font-size: .92rem; border-left: 3px solid transparent; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: #ffc107; }
.sidebar .nav-section { color: rgba(255,255,255,.5); text-transform: uppercase; font-size: .7rem; padding: .8rem 1.2rem .2rem; letter-spacing: .05em; }
.sidebar .dropdown-toggle-custom { display: flex; align-items: center; cursor: pointer; }
.sidebar .dropdown-toggle-custom .bi-chevron-down { transition: transform .2s ease; }
.sidebar .dropdown-toggle-custom[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.sidebar .sub-link { padding-left: 2.4rem; font-size: .85rem; }
.sidebar .collapse.show { background: rgba(0,0,0,.12); }

.main-content { margin-left: var(--sidebar-width); min-height: 100vh; min-height: 100dvh; transition: margin-left .25s ease; }
.topbar { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); border-bottom: 1px solid #0d2a4d; padding: .6rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; }

.sidebar-toggle-btn { display: inline-flex; align-items: center; background: transparent; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; padding: .2rem .4rem; }
.sidebar-toggle-btn:hover { color: #ffc107; }

.sidebar-close-btn { display: none; position: absolute; top: .7rem; right: .7rem; background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 1.1rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; z-index: 1; }
.sidebar-close-btn:hover { background: rgba(255,255,255,.22); }

/* ---------- Desktop: collapsible sidebar ---------- */
@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  body.sidebar-collapsed .main-content { margin-left: 0; }
}

.license-banner { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; padding: .55rem 1.25rem; font-size: .85rem; }
.license-banner-warning { background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffe69c; }
.license-banner-expired { background: #f8d7da; color: #58151c; border-bottom: 1px solid #f1aeb5; }
.license-banner .alert-link { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Mobile: off-canvas sidebar ---------- */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1045;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  .sidebar.show { transform: translateX(0); }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
  }
  .sidebar-backdrop.show { display: block; }

  .main-content { margin-left: 0; }
  .sidebar-toggle-btn { display: inline-flex; align-items: center; }
  .sidebar-close-btn { display: flex; }
  .topbar-search { max-width: none; }
}
.topbar-search { position: relative; flex: 1; max-width: 460px; }
.topbar-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.6); font-size: .9rem; }
.topbar-search input { width: 100%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: .4rem .8rem .4rem 2.2rem; color: #fff; font-size: .88rem; }
.topbar-search input::placeholder { color: rgba(255,255,255,.55); }
.topbar-search input:focus { outline: none; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.page-body { padding: 1.5rem; }

.stat-card { background: #fff; border-radius: .6rem; padding: 1.1rem 1.3rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid var(--brand); height: 100%; }
.stat-card .stat-label { font-size: .78rem; text-transform: uppercase; color: #6b7280; letter-spacing: .03em; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: #111827; }

.card-panel { background: #fff; border-radius: .6rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.table thead th { background: #f1f4f9; font-size: .8rem; text-transform: uppercase; color: #4b5563; border-bottom: none; }

.badge-status-Pending { background: #9ca3af; }
.badge-status-InTransit { background: #3b82f6; }
.badge-status-Arrived { background: #8b5cf6; }
.badge-status-Processing { background: #f59e0b; }
.badge-status-Completed { background: #10b981; }
.badge-status-Unpaid { background: #ef4444; }
.badge-status-PartiallyPaid { background: #f59e0b; }
.badge-status-Paid { background: #10b981; }
.badge-status-Overdue { background: #b91c1c; }
.badge-status-Cancelled { background: #6b7280; }

@media print {
  .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; }
}