/* ============================================================
   Rolando's Energy Drink — Distribution Operations System
   Design system: industrial / voltage. Not a SaaS card kit.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Palette — industrial / power plant, not cream+serif, not neon-on-black.
     Brand colors sourced directly from the PaService.ph Technology Solutions logo. */
  --ink:        #181D35;   /* near-navy black, primary text — matches logo navy */
  --ink-soft:   #4A4968;   /* secondary text — matches the logo's "Tech Solutions" tone */
  --line:       #D8DEE3;   /* hairline borders */
  --line-soft:  #E8ECEF;
  --bg:         #EEF1F3;   /* cool industrial off-white */
  --surface:    #FFFFFF;
  --sidebar:    #12162B;   /* darker than ink, almost black-navy */
  --sidebar-line:#282C4A;
  --volt:       #FFC107;   /* primary accent — yellow gold */
  --volt-ink:   #181D35;
  --teal:       #A25600;   /* secondary structural accent — deep amber, kept dark
                               enough to pass WCAG AA both as text-on-white and as a
                               background with white text on top (verified at 4.5:1+
                               in every actual usage context in this stylesheet) */
  --teal-soft:  #FFF1E0;
  --red:        #C1432D;
  --red-soft:   #FBEAE6;
  --green:      #2F8F5B;
  --green-soft: #E7F4ED;
  --amber-soft: #FFF4D6;

  --radius: 3px;
  --radius-lg: 5px;
  --shadow: 0 1px 2px rgba(16,24,32,.06);
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  margin:0;
  letter-spacing:-0.01em;
}
a{ color:var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }
button, input, select{ font-family:inherit; font-size:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- App shell ---------- */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width:230px;
  flex:0 0 230px;
  background:var(--sidebar);
  color:#C9D4DC;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
}
.brand{
  padding:22px 20px 16px;
  border-bottom:1px solid var(--sidebar-line);
}
.brand-mark{
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-mark .bolt{ color:var(--volt); font-size:20px; font-family:'Archivo',sans-serif; font-weight:800; }
.brand-logo{ height:26px; width:auto; display:block; flex-shrink:0; }
.brand-name{
  font-family:'Archivo', sans-serif;
  font-weight:800;
  font-size:16.5px;
  color:#fff;
  line-height:1.2;
}
.brand-tag{
  font-size:11px;
  color:#8695A2;
  margin-top:4px;
  letter-spacing:.02em;
}

.nav{ flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--radius);
  color:#AEBAC5;
  font-size:13.5px;
  font-weight:500;
  border-left:3px solid transparent;
  cursor:pointer;
}
.nav-item:hover{ background:#1A223B; color:#fff; text-decoration:none; }
.nav-item.active{
  background:#1A223B;
  color:#fff;
  border-left:3px solid var(--volt);
}
.nav-item .ic{ width:16px; text-align:center; font-size:14px; opacity:.9; }

.nav-group{ display:flex; flex-direction:column; }
.nav-group-head{ display:flex; align-items:stretch; }
.nav-chevron-btn{
  background:transparent; border:none; color:#7C8A97; cursor:pointer;
  padding:0 10px; display:flex; align-items:center; justify-content:center;
}
.nav-chevron-btn:hover{ color:#fff; }
.nav-chevron{ display:inline-block; font-size:11px; transition:transform .15s ease; }
.nav-chevron.rot{ transform:rotate(180deg); }
.nav-subitems{
  max-height:0; overflow:hidden; transition:max-height .18s ease;
  display:flex; flex-direction:column; padding-left:20px;
}
.nav-subitems.open{ max-height:1400px; }
.nav-item.nav-subitem{ font-size:12.5px; padding:7px 12px; }
.nav-section-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#5C6B78;
  padding:14px 12px 4px;
}
.nav-section-label-btn{
  background:transparent; border:none; width:100%; text-align:left; cursor:pointer;
  border-radius:var(--radius); border-left:3px solid transparent;
  font-size:13.5px; font-weight:500; color:#AEBAC5;
  padding:9px 12px; margin-top:6px; display:flex; align-items:center; justify-content:space-between;
}
.nav-section-label-btn:hover{ background:#1A223B; color:#fff; }
.nav-section-label-btn-main{ display:flex; align-items:center; gap:10px; }
.nav-section-label-btn .ic{ width:16px; text-align:center; font-size:14px; opacity:.9; }
.nav-section-label-btn .nav-chevron{ font-size:10px; }

/* Sub-categories within a large nav group (currently Finance & Reports) —
   each is its own small accordion, collapsed by default, so a 36-link
   group reads as 8 short, labeled clusters instead of one long list. */
.nav-subgroup{ display:flex; flex-direction:column; }
.nav-subgroup-label-btn{
  background:transparent; border:none; width:100%; text-align:left; cursor:pointer;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#6B7A87;
  padding:8px 10px 4px 8px; display:flex; align-items:center; justify-content:space-between;
}
.nav-subgroup-label-btn:hover{ color:#AEBAC5; }
.nav-subgroup-label-btn .nav-chevron{ font-size:9px; }
.nav-subitems-nested{ padding-left:8px; }
.nav-subitems-nested .nav-item.nav-subitem{ font-size:12px; padding:6px 12px; }

.sidebar-foot{
  padding:14px 20px 18px;
  border-top:1px solid var(--sidebar-line);
  font-size:11.5px;
  color:#75838F;
  line-height:1.6;
}
.sidebar-foot strong{ color:#C9D4DC; display:block; font-size:12px; }

/* ---------- Main column ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:60px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  position:sticky;
  top:0;
  z-index:5;
}
.topbar-title{ font-size:18px; }
.topbar-sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; font-weight:400; font-family:'IBM Plex Sans'; }
.topbar-right{ display:flex; align-items:center; gap:14px; }

.role-select{
  border:1px solid var(--line);
  background:var(--surface);
  padding:7px 10px;
  border-radius:var(--radius);
  font-size:12.5px;
  color:var(--ink);
  cursor:pointer;
}
.clock{ font-size:12px; color:var(--ink-soft); font-family:'IBM Plex Mono'; }

.export-wrap{ position:relative; }
.export-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(16,24,32,.14);
  min-width:220px;
  z-index:20;
  overflow:hidden;
}
.export-menu.open{ display:block; }
.export-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  padding:10px 13px;
  font-size:12.5px;
  font-weight:500;
  color:var(--ink);
  background:#fff;
  border:none;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
}
.export-menu-item:last-child{ border-bottom:none; }
.export-menu-item:hover{ background:#FAFBFC; }
.export-menu-item .sub{ display:block; font-size:11px; color:var(--ink-soft); font-weight:400; margin-top:1px; }

.notif-badge{
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:700; line-height:1;
  min-width:16px; height:16px; border-radius:8px;
  align-items:center; justify-content:center; padding:0 4px;
}
.notif-dropdown{ min-width:320px; max-width:360px; max-height:420px; overflow-y:auto; }
.notif-mark-all{ background:none; border:none; color:var(--teal); font-size:11px; font-weight:600; cursor:pointer; padding:0; }
.notif-item{ padding:10px 13px; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.notif-item:hover{ background:#FAFBFC; }
.notif-item.unread{ background:#FEF3EF; }
.notif-item.unread:hover{ background:#FEECE5; }
.notif-msg{ font-size:12.5px; color:var(--ink); line-height:1.4; }
.notif-time{ font-size:11px; color:var(--ink-soft); margin-top:3px; }

.content{ padding:26px; flex:1; }
.content-narrow{ max-width:1180px; }

/* ---------- Grid / layout helpers ---------- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-a2b1{ grid-template-columns:2fr 1fr; }
@media(max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-a2b1{ grid-template-columns:1fr; }
}

.section{ margin-bottom:26px; }
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
  gap:12px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:15.5px; }
.section-head .hint{ font-size:12px; color:var(--ink-soft); font-weight:400; font-family:'IBM Plex Sans'; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.card-pad{ padding:18px; }

.kpi{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--ink);
  border-radius:var(--radius);
  padding:14px 16px;
}
.kpi.accent-volt{ border-left-color:var(--volt); }
.kpi.accent-teal{ border-left-color:var(--teal); }
.kpi.accent-red{ border-left-color:var(--red); }
.kpi.accent-green{ border-left-color:var(--green); }
.kpi-label{ font-size:11.5px; color:var(--ink-soft); text-transform:none; margin-bottom:6px; }
.kpi-value{ font-family:'Archivo',sans-serif; font-weight:800; font-size:26px; line-height:1; }
.kpi-foot{ font-size:11.5px; color:var(--ink-soft); margin-top:6px; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
table.data{ font-size:13px; }
table.data th{
  text-align:left;
  font-family:'IBM Plex Sans';
  font-weight:600;
  font-size:11.5px;
  color:var(--ink-soft);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:#FAFBFC;
  white-space:nowrap;
}
table.data td{
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
table.data tbody tr:last-child td{ border-bottom:none; }
table.data tbody tr:hover{ background:#FAFBFC; }
td.num, th.num{ text-align:right; font-family:'IBM Plex Mono'; }
td.low{ background:var(--red-soft); color:var(--red); font-weight:600; border-radius:2px; }

/* ---------- Badges / status ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:20px;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-pending{ background:var(--amber-soft); color:#8A6100; }
.badge-transit{ background:var(--teal-soft); color:var(--teal); }
.badge-delivered{ background:var(--green-soft); color:var(--green); }
.badge-low{ background:var(--red-soft); color:var(--red); }
.badge-ok{ background:var(--green-soft); color:var(--green); }
.badge-neutral{ background:var(--line-soft); color:var(--ink-soft); }

/* ---------- Buttons / forms ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  padding:8px 14px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.btn:hover{ background:var(--sidebar-line); text-decoration:none; }
.btn-volt{ background:var(--volt); border-color:var(--volt); color:var(--volt-ink); }
.btn-volt:hover{ background:#E6AC00; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ background:var(--line-soft); }
.btn-sm{ padding:5px 10px; font-size:12px; }
.btn-danger{ background:var(--red); border-color:var(--red); }

.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field label{ font-size:12px; font-weight:600; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 10px;
  background:#fff;
  width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus, button:focus-visible, .nav-item:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:1px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.pw-checklist{ display:flex; flex-direction:column; gap:4px; margin:-6px 0 14px; padding:10px 12px; background:var(--line-soft); border-radius:var(--radius); }
.pw-check-item{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft); }
.pw-check-item.ok{ color:var(--green); }
.pw-check-ic{ font-size:12px; width:14px; text-align:center; }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tab{
  padding:9px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--ink); border-bottom-color:var(--volt); }

/* ---------- Misc ---------- */
.chip{
  display:inline-block; padding:3px 8px; border:1px solid var(--line);
  border-radius:20px; font-size:11.5px; color:var(--ink-soft); background:#FAFBFC;
}
.muted{ color:var(--ink-soft); }
.divider{ height:1px; background:var(--line); border:0; margin:18px 0; }
.empty{ padding:34px 20px; text-align:center; color:var(--ink-soft); font-size:13px; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(16,24,32,.45);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:#fff; border-radius:var(--radius-lg); width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto; padding:22px;
  box-shadow:0 10px 40px rgba(16,24,32,.25);
}
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-close{ cursor:pointer; border:none; background:none; font-size:18px; color:var(--ink-soft); line-height:1; }

.locations-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.loc-pill{
  border:1px solid var(--line); background:#fff; border-radius:var(--radius);
  padding:10px 13px; min-width:150px; flex:1;
}
.loc-pill .loc-name{ font-weight:700; font-family:'Archivo'; font-size:13.5px; }
.loc-pill .loc-role{ font-size:11.5px; color:var(--teal); margin-top:3px; }
.loc-pill .loc-person{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }

.progress-track{ display:flex; align-items:center; gap:0; margin:6px 0; }
.progress-step{ flex:1; text-align:center; position:relative; }
.progress-dot{
  width:18px; height:18px; border-radius:50%; background:var(--line);
  margin:0 auto 6px; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:#fff; font-weight:700;
}
.progress-step.done .progress-dot{ background:var(--green); }
.progress-step.current .progress-dot{ background:var(--volt); color:var(--volt-ink); }
.progress-line{
  position:absolute; top:9px; left:-50%; width:100%; height:2px; background:var(--line); z-index:-1;
}
.progress-step:first-child .progress-line{ display:none; }
.progress-step.done .progress-line, .progress-step.current .progress-line{ background:var(--green); }
.progress-label{ font-size:10.5px; color:var(--ink-soft); }

.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.bar-row .bar-label{ width:88px; font-size:12px; color:var(--ink-soft); flex:0 0 88px; }
.bar-track{ flex:1; height:8px; background:var(--line-soft); border-radius:4px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--teal); border-radius:4px; }
.bar-fill.volt{ background:var(--volt); }
.bar-row .bar-val{ width:56px; text-align:right; font-family:'IBM Plex Mono'; font-size:11.5px; }

.toast{
  position:fixed; bottom:22px; right:22px; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:var(--radius); font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.25);
  z-index:100; opacity:0; transform:translateY(8px); transition:all .2s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }

@media(max-width:860px){
  .content{ padding:16px; }
}

@media(max-width:600px){
  .topbar{
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:14px 16px;
  }
  .topbar-right{ width:100%; justify-content:space-between; flex-wrap:wrap; gap:8px; }
  .clock{ display:none; } /* least essential on a small screen; saves space */
  .topbar-title{ font-size:16px; }
}

/* ---------- Mobile navigation: hamburger + overlay sidebar ---------- */
.mobile-menu-btn{
  display:none;
  width:36px; height:36px; border-radius:var(--radius); border:1px solid var(--line);
  background:#fff; font-size:18px; cursor:pointer; flex:0 0 auto;
}
.sidebar-backdrop{
  display:none;
  position:fixed; inset:0; background:rgba(16,24,32,.5); z-index:39;
}
.sidebar-backdrop.show{ display:block; }

@media(max-width:860px){
  .mobile-menu-btn{ display:block; }
  .sidebar{
    display:flex; /* keep it in the DOM/flex layout, just move off-screen */
    position:fixed; top:0; left:0; height:100vh; z-index:40;
    transform:translateX(-100%);
    transition:transform .2s ease;
  }
  .sidebar.mobile-open{ transform:translateX(0); }
}

/* ---------- Shared step-form styles (used by Point of Sale) ---------- */
.qo-step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:14px;
}
.qo-step-label{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-soft); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.qo-step-label .num{
  width:20px; height:20px; border-radius:50%; background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-family:'IBM Plex Mono';
}
.qo-search{
  width:100%; padding:13px 14px; font-size:16px; border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:10px;
}
.qo-list{ max-height:260px; overflow-y:auto; border:1px solid var(--line-soft); border-radius:var(--radius); }
.qo-list-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 14px; border-bottom:1px solid var(--line-soft); cursor:pointer; min-height:44px;
}
.qo-list-item:last-child{ border-bottom:none; }
.qo-list-item:hover{ background:#FAFBFC; }
.qo-list-item.selected{ background:var(--amber-soft); }
.qo-list-item .main{ font-weight:600; font-size:14px; }
.qo-list-item .sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.qo-list-item .price{ font-family:'IBM Plex Mono'; font-size:13.5px; white-space:nowrap; text-align:right; }
.qo-list-item .stock-low{ color:var(--red); }

.qo-selected-card{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--green-soft); border:1px solid var(--green); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:10px;
}
.qo-selected-card .main{ font-weight:700; font-size:15px; }
.qo-selected-card .sub{ font-size:12px; color:var(--ink-soft); margin-top:2px; }

.qo-stepper{ display:flex; align-items:center; gap:12px; justify-content:center; margin:10px 0; }
.qo-stepper button{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:#fff;
  font-size:24px; font-family:'IBM Plex Mono'; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.qo-stepper button:active{ background:var(--line-soft); }
.qo-stepper input{
  width:90px; text-align:center; font-size:24px; font-family:'IBM Plex Mono'; font-weight:700;
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 6px;
}

.qo-summary-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:14px; }
.qo-summary-row.total{ border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-weight:700; font-size:17px; }

.qo-submit{
  width:100%; padding:18px; font-size:17px; font-weight:700; justify-content:center;
  border-radius:var(--radius-lg);
}
.qo-submit:disabled{ opacity:.5; cursor:not-allowed; }

.qo-success{
  background:var(--green-soft); border:1px solid var(--green); border-radius:var(--radius-lg);
  padding:28px 20px; text-align:center;
}
.qo-success .icon{ font-size:40px; margin-bottom:10px; }
.qo-success h2{ font-size:18px; margin-bottom:6px; }
.qo-success .actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }

/* ============================================================
   Mobile enlargement — bigger text and touch targets on phones
   and small terminal devices. Applies everywhere (login, the
   restricted sales-agent pages, and the full admin dashboard if
   viewed on a phone), matching the existing 860px sidebar
   breakpoint so everything shifts together at the same width.

   Input font-size is set to exactly 16px on purpose: below that,
   iOS Safari auto-zooms the whole page when a field is focused,
   which is jarring — 16px+ prevents that zoom entirely.
   ============================================================ */
@media (max-width: 860px){
  body{ font-size:16px; }
  h1{ font-size:22px; }
  .section-head h2{ font-size:17px; }

  .field label{ font-size:14px; }
  .field{ margin-bottom:16px; }
  .field input, .field select, .field textarea{
    font-size:16px;
    padding:13px 14px;
  }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .field-row[style]{ grid-template-columns:1fr !important; }
  .field-row[style] > *{ margin-bottom:12px; }

  .btn{ font-size:15px; padding:12px 18px; }
  .btn-sm{ font-size:13.5px; padding:9px 14px; }

  .nav-item{ font-size:15.5px; padding:13px 14px; }
  .nav-item.nav-subitem{ font-size:14.5px; padding:11px 14px; }
  .nav-section-label{ font-size:11.5px; }
  .nav-section-label-btn{ font-size:15.5px; padding:13px 14px; }

  .kpi{ padding:16px; }
  .kpi-value{ font-size:30px; }
  .kpi-label{ font-size:13px; }
  .kpi-foot{ font-size:13px; }

  table.data{ font-size:14.5px; }
  table.data th, table.data td{ padding:12px 10px; }

  .tab{ font-size:14.5px; padding:12px 16px; }
  .chip{ font-size:12.5px; padding:5px 10px; }
  .badge{ font-size:12px; }
  .hint{ font-size:13px; }

  .card-pad{ padding:18px; }
  .content{ padding:16px; }

  .qo-list-item .main{ font-size:15px; }
  .qo-list-item .sub{ font-size:13px; }
  .qo-list-item .price{ font-size:14.5px; }
  .qo-step-label{ font-size:13.5px; }
}

/* ---------- Shared chat message bubbles (used by the AI Copilot page) ---------- */
.chatbot-msg {
  padding: 9px 13px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 85%;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(16,24,32,.06);
  animation: chatbotMsgIn .18s ease-out;
}
@keyframes chatbotMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chatbot-msg-bot {
  background: var(--surface);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chatbot-msg-user {
  background: var(--volt);
  color: var(--volt-ink);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(16,24,32,.1);
}

/* ---------- Leave team calendar (Leave Management) ---------- */
.leave-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.leave-cal-headcell {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.leave-cal-cell {
  min-height: 76px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 6px;
  background: #fff;
}
.leave-cal-cell.leave-cal-empty {
  border: none;
  background: transparent;
}
.leave-cal-daynum {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.leave-cal-chip {
  font-size: 10.5px;
  background: var(--teal-soft);
  color: var(--teal);
  border-radius: 4px;
  padding: 1px 5px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ---------- AI Copilot page ---------- */
.ai-copilot-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  height: calc(100vh - 190px);
  min-height: 460px;
}
.ai-copilot-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ai-copilot-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.ai-copilot-conv-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background .12s ease;
}
.ai-copilot-conv-item:hover { background: var(--bg); }
.ai-copilot-conv-item.active { background: var(--volt-soft, var(--bg)); border: 1px solid var(--line); }
.ai-copilot-conv-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-copilot-conv-time {
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.ai-copilot-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
.ai-copilot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #F7F9FA;
}
.ai-copilot-messages .chatbot-msg { max-width: 78%; font-size: 13.5px; }
.ai-copilot-pending-card {
  align-self: flex-start;
  max-width: 78%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--volt);
  border-radius: 10px;
  padding: 11px 13px;
}
.ai-copilot-pending-summary {
  font-size: 13px;
  white-space: pre-wrap;
  margin-bottom: 9px;
}
.ai-copilot-pending-actions { display: flex; gap: 8px; }
.ai-copilot-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}
.ai-copilot-form input[type="text"] {
  flex: 1;
  padding: 9px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  font-size: 13.5px;
}
.ai-copilot-typing {
  align-self: flex-start;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}
@media(max-width:820px){
  .ai-copilot-layout { grid-template-columns: 1fr; height: auto; }
  .ai-copilot-sidebar { max-height: 180px; }
}

/* ---------- AI widget (floating chat icon + panel, injected by js/nav.js
   on every page — replaces the old AI Copilot nav link) ---------- */
.ai-widget-fab {
  position: fixed;
  bottom: 90px; /* clear of .toast's bottom-right corner (bottom:22px) */
  right: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--volt);
  color: var(--volt-ink);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16,24,32,.22);
  z-index: 80;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ai-widget-fab:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(16,24,32,.28); }
.ai-widget-fab.open { transform: scale(0.9); opacity: .85; }

.ai-widget-panel {
  position: fixed;
  bottom: 154px;
  right: 24px;
  width: 360px;
  height: min(560px, 70vh);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(16,24,32,.24);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 79;
}
.ai-widget-panel.open {
  display: flex;
  animation: chatbotMsgIn .16s ease-out;
}
.ai-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ai-widget-title {
  font-weight: 700;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
}
.ai-widget-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-widget-icon-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease;
}
.ai-widget-icon-btn:hover { background: var(--bg); color: var(--ink); }
.ai-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F7F9FA;
}
.ai-widget-messages .chatbot-msg { max-width: 88%; font-size: 13px; }
.ai-widget-messages .ai-copilot-pending-card { max-width: 88%; }
.ai-widget-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}
.ai-widget-form input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  font-size: 13px;
}

@media(max-width:480px){
  .ai-widget-fab { bottom: 82px; right: 16px; width: 50px; height: 50px; font-size: 22px; }
  .ai-widget-panel {
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 82vh;
    border-radius: 14px 14px 0 0;
  }
}

@media(max-width:640px){
  .leave-cal-cell { min-height: 54px; padding: 4px; }
  .leave-cal-chip { font-size: 9px; }
}