/* ═══════════════════════════════════════════════
   HotelLedger — Shared Design System v1.0
   Navy Blue | Top Nav | Balanced Professional
═══════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Brand */
  --navy:#1B3A6B;
  --navy-dark:#122952;
  --navy-light:#2E5FA3;
  --navy-pale:#EEF2F9;
  --navy-border:#C8D5EC;

  /* Neutrals */
  --bg:#F5F6FA;
  --bg-card:#FFFFFF;
  --bg-row:#F9FAFB;
  --text:#111827;
  --text2:#6B7280;
  --text3:#9CA3AF;
  --border:#E5E7EB;
  --border2:#D1D5DB;

  /* Status */
  --green:#166534;--green-bg:#DCFCE7;
  --amber:#854F0B;--amber-bg:#FEF3C7;
  --red:#A32D2D;--red-bg:#FEE2E2;
  --blue:#1D4ED8;--blue-bg:#DBEAFE;
  --purple:#5B21B6;--purple-bg:#EDE9FE;
  --teal:#0F6E56;--teal-bg:#D1FAE5;

  /* Layout */
  --r:6px;--rl:10px;--rxl:14px;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.04);
}

body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
}

/* ── TOP NAVIGATION ── */
.hl-topnav{
  background:var(--navy);
  height:52px;
  display:flex;
  align-items:center;
  padding:0 1.5rem;
  gap:0;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.hl-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:2rem;
  text-decoration:none;
}
.hl-brand-icon{
  width:30px;height:30px;
  background:rgba(255,255,255,0.15);
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  flex-shrink:0;
}
.hl-brand-name{
  font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px;
}
.hl-brand-hotel{
  font-size:10px;color:rgba(255,255,255,0.6);
  display:block;margin-top:-1px;
}

/* Module tabs in top nav */
.hl-nav-tabs{
  display:flex;
  align-items:center;
  gap:2px;
  flex:1;
  overflow-x:auto;
  scrollbar-width:none;
}
.hl-nav-tabs::-webkit-scrollbar{display:none}
.hl-nav-tab{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,0.65);
  border-radius:var(--r);
  cursor:pointer;
  border:none;background:transparent;
  white-space:nowrap;
  transition:all .15s;
  text-decoration:none;
}
.hl-nav-tab:hover{
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.9);
}
.hl-nav-tab.active{
  background:rgba(255,255,255,0.18);
  color:#fff;
  font-weight:600;
}
.hl-nav-tab.coming{opacity:.4;cursor:default;}
.hl-nav-tab .tab-icon{font-size:14px}
.hl-nav-tab .tab-badge{
  font-size:9px;font-weight:700;
  background:#EF4444;color:#fff;
  padding:1px 5px;border-radius:10px;
  margin-left:2px;
}

/* Right side of nav */
.hl-nav-right{
  display:flex;align-items:center;gap:8px;
  margin-left:1rem;
}
.hl-role-badge{
  font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:20px;
  background:rgba(255,255,255,0.15);
  color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  white-space:nowrap;
}
.hl-nav-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;
  font-size:11px;font-weight:500;
  color:rgba(255,255,255,0.75);
  background:transparent;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:var(--r);
  cursor:pointer;
  transition:all .15s;
}
.hl-nav-btn:hover{
  background:rgba(255,255,255,0.1);
  color:#fff;
}

/* ── PAGE LAYOUT ── */
.hl-page{
  max-width:1280px;
  margin:0 auto;
  padding:1.25rem 1.5rem;
}
.hl-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:1.25rem;
  flex-wrap:wrap;
  gap:10px;
}
.hl-page-title{
  font-size:18px;font-weight:700;color:var(--text);
  margin-bottom:2px;
}
.hl-page-sub{
  font-size:12px;color:var(--text2);
}
.hl-page-actions{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}

/* ── CARDS ── */
.hl-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--rl);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hl-card-header{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.hl-card-title{
  font-size:13px;font-weight:600;color:var(--text);
}
.hl-card-sub{
  font-size:11px;color:var(--text2);margin-top:1px;
}
.hl-card-body{padding:16px}
.hl-card-body-p0{padding:0}

/* ── METRICS ── */
.hl-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
  margin-bottom:1.25rem;
}
.hl-metric{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--rl);
  padding:12px 14px;
  box-shadow:var(--shadow);
}
.hl-metric-lbl{
  font-size:10px;font-weight:600;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:4px;
}
.hl-metric-val{
  font-size:20px;font-weight:700;
  color:var(--text);
  line-height:1.2;
}
.hl-metric-sub{
  font-size:11px;color:var(--text2);
  margin-top:3px;
}
.hl-metric.accent{border-left:3px solid var(--navy)}
.hl-metric.danger{border-left:3px solid #EF4444}
.hl-metric.success{border-left:3px solid #22C55E}
.hl-metric.warning{border-left:3px solid #F59E0B}

/* ── TABLES ── */
.hl-table-wrap{overflow-x:auto}
.hl-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.hl-table th{
  padding:9px 12px;
  text-align:left;
  font-size:11px;font-weight:600;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.4px;
  background:var(--bg-row);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.hl-table th.r,.hl-table td.r{text-align:right}
.hl-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:middle;
}
.hl-table tbody tr:last-child td{border-bottom:none}
.hl-table tbody tr:hover td{background:var(--navy-pale)}
.hl-table .vendor-name{font-weight:600;color:var(--navy)}

/* ── TABS ── */
.hl-tabs{
  display:flex;
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 16px;
}
.hl-tabs::-webkit-scrollbar{display:none}
.hl-tab{
  font-size:12px;font-weight:500;
  padding:10px 14px;
  border:none;background:transparent;
  color:var(--text2);cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
  transition:all .15s;
}
.hl-tab:hover{color:var(--navy)}
.hl-tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.hl-tab-badge{
  font-size:9px;font-weight:700;
  background:var(--red-bg);color:var(--red);
  padding:1px 5px;border-radius:10px;
  margin-left:4px;
}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;
  font-size:12px;font-weight:500;
  border:1px solid var(--border2);
  border-radius:var(--r);
  background:var(--bg-card);
  color:var(--text);
  cursor:pointer;
  transition:all .12s;
  white-space:nowrap;
  font-family:inherit;
}
.btn:hover{background:var(--bg);border-color:var(--border2)}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:var(--navy);color:#fff;
  border-color:var(--navy);
  font-weight:600;
}
.btn-primary:hover{background:var(--navy-dark)}
.btn-success{background:var(--green-bg);color:var(--green);border-color:#86EFAC}
.btn-warning{background:var(--amber-bg);color:var(--amber);border-color:#FCD34D}
.btn-danger{background:var(--red-bg);color:var(--red);border-color:#FCA5A5}
.btn-info{background:var(--blue-bg);color:var(--blue);border-color:#93C5FD}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-icon{padding:6px;border-radius:var(--r);aspect-ratio:1}

/* ── BADGES ── */
.badge{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:20px;
  white-space:nowrap;
}
.badge-open{background:var(--amber-bg);color:var(--amber)}
.badge-paid{background:var(--green-bg);color:var(--green)}
.badge-partial{background:var(--blue-bg);color:var(--blue)}
.badge-forwarded{background:var(--purple-bg);color:var(--purple)}
.badge-hold{background:#F1F5F9;color:#475569}
.badge-disputed{background:var(--red-bg);color:var(--red)}
.badge-overdue{background:var(--red-bg);color:var(--red)}
.badge-settled{background:var(--green-bg);color:var(--green)}
.badge-pending{background:var(--amber-bg);color:var(--amber)}
.badge-navy{background:var(--navy-pale);color:var(--navy)}

/* ── FORMS ── */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.form-group label{
  display:block;
  font-size:11px;font-weight:600;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:5px;
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  font-size:13px;
  padding:8px 10px;
  border:1px solid var(--border2);
  border-radius:var(--r);
  background:var(--bg-card);
  color:var(--text);
  outline:none;
  font-family:inherit;
  transition:border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(27,58,107,0.08);
}
.form-group textarea{resize:vertical;min-height:70px}

/* ── FILTER ROW ── */
.filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  background:var(--bg-row);
}
.filter-row label{font-size:11px;color:var(--text2);font-weight:500}
.filter-row input,
.filter-row select{
  font-size:12px;
  padding:5px 9px;
  border:1px solid var(--border2);
  border-radius:var(--r);
  background:var(--bg-card);
  color:var(--text);
  outline:none;
  max-width:160px;
}
.filter-row input:focus,
.filter-row select:focus{border-color:var(--navy)}

/* ── MODAL/OVERLAY ── */
.hl-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.45);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.hl-modal{
  background:var(--bg-card);
  border-radius:var(--rxl);
  width:100%;
  max-width:520px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.hl-modal-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--bg-card);z-index:1;
}
.hl-modal-title{font-size:15px;font-weight:700;color:var(--text)}
.hl-modal-body{padding:20px}
.hl-modal-footer{
  padding:14px 20px;
  border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;
  position:sticky;bottom:0;background:var(--bg-card);
}

/* ── ALERTS ── */
.hl-alert{
  padding:10px 14px;
  border-radius:var(--r);
  font-size:12px;
  margin-bottom:12px;
  display:flex;align-items:flex-start;gap:8px;
}
.hl-alert-info{background:var(--blue-bg);color:var(--blue);border:1px solid #BFDBFE}
.hl-alert-warning{background:var(--amber-bg);color:var(--amber);border:1px solid #FCD34D}
.hl-alert-danger{background:var(--red-bg);color:var(--red);border:1px solid #FCA5A5}
.hl-alert-success{background:var(--green-bg);color:var(--green);border:1px solid #86EFAC}

/* ── LOGIN PAGE ── */
.hl-login-wrap{
  min-height:100vh;
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-light) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.hl-login-card{
  background:var(--bg-card);
  border-radius:var(--rxl);
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  width:100%;max-width:780px;
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;
}
@media(max-width:580px){.hl-login-card{grid-template-columns:1fr}}
.hl-login-left{padding:2rem}
.hl-login-logo{display:flex;align-items:center;gap:10px;margin-bottom:1.5rem}
.hl-login-logo-icon{
  width:36px;height:36px;
  background:var(--navy);
  border-radius:var(--rl);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;
}
.hl-login-logo-text{font-size:17px;font-weight:700;color:var(--navy)}
.hl-login-logo-sub{font-size:11px;color:var(--text2)}
.hl-role-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:7px;margin-bottom:0;
}
.hl-role-card{
  border:1.5px solid var(--border2);
  border-radius:var(--r);
  padding:10px 8px;
  cursor:pointer;text-align:center;
  transition:all .15s;
  background:transparent;
}
.hl-role-card:hover{border-color:var(--navy);background:var(--navy-pale)}
.hl-role-card.active{border-color:var(--navy);background:var(--navy);color:#fff}
.hl-role-card.active .rc-name{color:#fff}
.hl-role-card.active .rc-sub{color:rgba(255,255,255,.7)}
.hl-role-card.coming{opacity:.4;cursor:default}
.rc-icon{font-size:18px;margin-bottom:4px}
.rc-name{font-size:11px;font-weight:600;color:var(--text)}
.rc-sub{font-size:10px;color:var(--text2);margin-top:1px}
.hl-login-right{
  background:var(--navy-pale);
  border-left:1px solid var(--navy-border);
  padding:2rem;
  display:flex;flex-direction:column;
}
.hl-pin-label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.hl-pin-role{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:1rem}
.hl-pin-dots{display:flex;gap:10px;margin-bottom:1rem}
.hl-pin-dot{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--border2);
  background:transparent;transition:all .2s;
}
.hl-pin-dot.filled{background:var(--navy);border-color:var(--navy)}
.hl-pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:.75rem;flex:1}
.hl-pin-key{
  padding:12px;
  border:1px solid var(--border2);
  border-radius:var(--r);
  background:var(--bg-card);
  cursor:pointer;font-size:15px;font-weight:600;
  text-align:center;color:var(--text);
  transition:all .12s;
  font-family:inherit;
}
.hl-pin-key:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.hl-pin-key:active{transform:scale(.95)}
.hl-pin-key.del{font-size:13px;color:var(--text2)}
.hl-pin-err{font-size:12px;color:var(--red);min-height:18px;margin-bottom:6px;text-align:center}

/* ── MISC ── */
.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22C55E;display:inline-block;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.divider{height:1px;background:var(--border);margin:16px 0}
.text-danger{color:var(--red)}
.text-success{color:var(--green)}
.text-warning{color:var(--amber)}
.text-info{color:var(--blue)}
.text-navy{color:var(--navy)}
.text-muted{color:var(--text2)}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.ta-right{text-align:right}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.d-flex{display:flex}.ai-center{align-items:center}.jc-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── PRINT ── */
@media print{
  .hl-topnav,.hl-page-actions,.btn,.filter-row{display:none!important}
  .hl-card{box-shadow:none;border:1px solid #ddd}
}