/* assets/theme.css — Hostel Management System: corridor-signage look.
   Navy + signal yellow, condensed uppercase headings (Barlow Condensed), Barlow body, door-plate / key-tag details.
   All rules are scoped under html[data-theme="commercial"] (set in theme_head). */
html[data-theme="commercial"]{
  --maroon:#12263F;--maroon-dark:#0B1A2E;--maroon-light:#E3EAF3;--maroon-lighter:#E3EAF3;--maroon-light-hover:#D2DDEB;
  --navy:#2B2F36;--navy-dark:#1B1E23;--navy-light:#E6E8EB;--navy-lighter:#E6E8EB;
  --gray-50:#F4F6F9;--gray-100:#EAEFF5;--gray-200:#D5DDE8;--gray-300:#B9C5D5;--gray-400:#6B7A90;--gray-600:#3F4C60;--gray-800:#12263F;
  --muted:#5B6B82;--ink:#12263F;--line:#CBD5E3;--bg:#EEF2F6;--paper:#EEF2F6;--card:#fff;--ac:#FFC72C;--acd:#8A5A00;
  --radius:3px;--radius-shell:6px;--accent:var(--ac);
  --brand:var(--maroon);--brand-dark:var(--maroon-dark);--brand-light:var(--maroon-light);--ring:var(--brand);
  --shadow-card:none;--shadow-pop:0 22px 48px -20px rgba(11,26,46,.6);
  --font-ui:'Barlow','Segoe UI',system-ui,sans-serif;--font-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  color-scheme:light}
html[data-theme="commercial"][data-portal="admin"]{--brand:var(--navy);--brand-dark:var(--navy-dark);--brand-light:var(--navy-light)}
html[data-theme="commercial"] :is(body,button,input,select,textarea){font-family:var(--font-ui)}
html[data-theme="commercial"] body{background:var(--paper);-webkit-font-smoothing:antialiased}
html[data-theme="commercial"] ::selection{background:var(--ac);color:var(--ink)}
html[data-theme="commercial"] :is(h1,h2,h3,.page-title,.stat-value,.topbar-title,.sidebar-label,.form-label,.table th){font-family:var(--font-display)}
html[data-theme="commercial"] :is(h1,h2,.page-title){text-transform:uppercase;letter-spacing:.02em}

/* shell: navy top bar with a yellow floor-line, door-plate nav */
html[data-theme="commercial"] .topbar{background:var(--brand-dark);border-bottom:4px solid var(--ac);box-shadow:none}
html[data-theme="commercial"] .topbar-title{font-weight:600;font-size:19px;letter-spacing:.06em;text-transform:uppercase}
html[data-theme="commercial"] .topbar-avatar{border-color:var(--ac);background:rgba(255,199,44,.18)}
html[data-theme="commercial"] :is(.logout-link,.toggle-btn){border-radius:2px}
html[data-theme="commercial"] .sidebar{background:#fff;border-right:1px solid var(--line)}
html[data-theme="commercial"] .sidebar-label{font-size:12px;font-weight:600;letter-spacing:.16em}
html[data-theme="commercial"] .nav-item{border-radius:2px;margin:1px 8px;padding-top:10px;padding-bottom:10px;font-weight:500}
html[data-theme="commercial"] .nav-item:hover{background:var(--gray-100)}
html[data-theme="commercial"] .nav-item.active{background:var(--ac);color:var(--ink);font-weight:700}
html[data-theme="commercial"] .nav-badge{background:var(--ink);color:var(--ac);border-radius:2px}
html[data-theme="commercial"] .page-title{font-size:30px;font-weight:700}
html[data-theme="commercial"] .breadcrumb .current{color:var(--acd);font-weight:600}

/* surfaces */
html[data-theme="commercial"] :is(.card,.stat-card,.quick-action,.payment-card,.pay-summary-card,.status-banner,.detail-header,.room-hero){border-radius:3px}
html[data-theme="commercial"] :is(.card,.stat-card,.quick-action,.payment-card){background:#fff;border:1px solid var(--line);box-shadow:none}
html[data-theme="commercial"] .stat-card{border-left:6px solid var(--ac)}
html[data-theme="commercial"] .quick-action:hover{border-color:var(--ink);box-shadow:4px 4px 0 var(--ac)}
html[data-theme="commercial"] .card-title-bar{width:10px;height:10px;border-radius:0;background:var(--ac)}
html[data-theme="commercial"] .stat-value{font-weight:700;letter-spacing:.01em}
html[data-theme="commercial"] .quick-action-icon{border-radius:3px}
html[data-theme="commercial"] :is(.room-hero,.modal-header-gradient){background:var(--brand-dark)}
html[data-theme="commercial"] .ann-banner{background:#FFF6D6;border-color:#F0D77A}
html[data-theme="commercial"] .ann-banner-icon{color:var(--acd)}html[data-theme="commercial"] .ann-banner-title{color:#5C3C00}
html[data-theme="commercial"] .method-btn{border-radius:3px}html[data-theme="commercial"] .method-btn:hover{background:var(--brand-light)}
html[data-theme="commercial"] .badge-navy{background:var(--navy-light);color:var(--navy-dark)}

/* controls */
html[data-theme="commercial"] .btn{border-radius:2px;font-weight:600;letter-spacing:.03em}
html[data-theme="commercial"] .btn:hover{box-shadow:none;transform:none}html[data-theme="commercial"] .btn:active{transform:translateY(1px)}
html[data-theme="commercial"] .btn-primary{background:var(--brand);box-shadow:none}
html[data-theme="commercial"] .btn-primary:hover{background:var(--ac);color:var(--ink)}
html[data-theme="commercial"] .btn-navy{box-shadow:none}html[data-theme="commercial"] .btn-navy:hover{background:var(--ac);color:var(--ink)}
html[data-theme="commercial"] .form-label{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-600)}
html[data-theme="commercial"] .form-input{border-radius:2px;border:1.5px solid var(--gray-300);background:#fff}
html[data-theme="commercial"] .form-input:hover{border-color:var(--gray-400)}
html[data-theme="commercial"] :is(.form-input:focus,.form-input:focus-visible){border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,199,44,.55)}
html[data-theme="commercial"] .table th{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;background:var(--brand-dark);color:#fff;border-bottom:3px solid var(--ac)}
html[data-theme="commercial"] .table td{border-bottom:1px solid var(--gray-200)}
html[data-theme="commercial"] .table tbody tr:nth-child(even) td{background:var(--gray-50)}
html[data-theme="commercial"] .table tbody tr:hover td{background:#FFF6D6}
html[data-theme="commercial"] .pagination :is(a,.current,.disabled){border-radius:2px}
html[data-theme="commercial"] .pagination .current{background:var(--ink);border-color:var(--ink);color:var(--ac)}
html[data-theme="commercial"] :is(.filter-tab,.block-pill,.floor-pill,.profile-tab,.room-tile){border-radius:2px}
html[data-theme="commercial"] .modal-backdrop{background:rgba(11,26,46,.6)}
html[data-theme="commercial"] .modal-dialog{border-radius:4px;box-shadow:var(--shadow-pop)}
html[data-theme="commercial"] footer{border-top-color:var(--line)!important}

/* standalone auth pages: locker-door backdrop */
html[data-theme="commercial"] body.bg-gray-100{background:
  repeating-linear-gradient(90deg,transparent 0 71px,rgba(18,38,63,.07) 71px 72px),
  repeating-linear-gradient(0deg,transparent 0 143px,rgba(18,38,63,.07) 143px 144px),var(--paper)}
html[data-theme="commercial"] header.bg-white{border-color:var(--line);background:#fff}
html[data-theme="commercial"] :is(.rounded-xl,.rounded-lg,.rounded-\[10px\]){border-radius:3px}
html[data-theme="commercial"] .shadow-lg{box-shadow:6px 6px 0 rgba(18,38,63,.12)}
html[data-theme="commercial"] .auth-card{background:#fff;border-top:6px solid var(--ac)}
html[data-theme="commercial"] .section-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);border-bottom:2px solid var(--ink)}

/* brand mark: bed icon on a yellow tile */
html[data-theme="commercial"] .brand-mark{display:inline-flex;align-items:center;gap:10px;line-height:1;color:var(--ink)}
html[data-theme="commercial"] .brand-mark-icon{width:34px;height:34px;display:grid;place-items:center;font-size:21px;color:var(--ink);background:var(--ac);border-radius:2px}
html[data-theme="commercial"] .brand-mark-text{display:flex;flex-direction:column;gap:2px;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-400)}
html[data-theme="commercial"] .brand-mark-text b{font-size:18px;letter-spacing:.06em;color:var(--ink)}
html[data-theme="commercial"] .brand-mark-lg{display:flex;justify-content:center;margin:0 auto 18px}
html[data-theme="commercial"] .brand-mark-on-dark{color:#fff}
html[data-theme="commercial"] .brand-mark-on-dark .brand-mark-icon{width:28px;height:28px;font-size:18px}
html[data-theme="commercial"] .brand-mark-on-dark .brand-mark-text{color:rgba(255,255,255,.7)}
html[data-theme="commercial"] .brand-mark-on-dark .brand-mark-text b{color:#fff;font-size:16px}
@media(max-width:520px){html[data-theme="commercial"] .brand-mark-on-dark .brand-mark-text{display:none}}