/* =========================================================
   QuickEnterprise — Design System
   A distinct identity for a Ghanaian phone sales & repair shop:
   deep adinkra green + indigo dusk, kente-strip gold/red/black
   accent used as a signature motif (not a background wash),
   Poppins for display, Inter for body/data.
   ========================================================= */

:root{
  --green-deep:      #0B4A3A;   /* primary — forest/adinkra green   */
  --green-bright:    #14795E;   /* primary hover / active           */
  --indigo-dusk:     #1B2540;   /* sidebar / dark surfaces          */
  --gold:             #E8A93B;  /* accent — kente gold               */
  --rust:             #C1440E;  /* alerts / destructive              */
  --cloth-red:        #A6192E;  /* kente strip red                   */
  --cloth-black:      #14171C;  /* kente strip black                 */
  --bg:               #F8FAFC;  /* app background — cool neutral      */
  --surface:          #FFFFFF;
  --surface-soft:     #FBFAF7;
  --border:           #E4E3DC;
  --text:             #1C1F1B;
  --text-soft:        #5B6058;
  --text-faint:       #8B9088;
  --success:          #1E8E5A;
  --warning:           #C77F0E;
  --danger:            #C1440E;
  --radius:            12px;
  --radius-sm:          8px;
  --shadow-sm: 0 1px 2px rgba(20,23,28,.06), 0 1px 1px rgba(20,23,28,.04);
  --shadow-md: 0 6px 20px rgba(20,23,28,.08);
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --kente: linear-gradient(90deg,
      var(--green-deep) 0 20%, var(--gold) 20% 40%,
      var(--cloth-red) 40% 60%, var(--cloth-black) 60% 80%,
      var(--green-bright) 80% 100%);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,.font-display{ font-family: var(--font-display); letter-spacing:-0.01em; }
a{ color: var(--green-bright); text-decoration:none; }
a:hover{ color: var(--green-deep); }
.text-soft{ color: var(--text-soft); }
.text-faint{ color: var(--text-faint); }

/* ---------- Kente signature strip ---------- */
.kente-strip{ height:5px; width:100%; background: var(--kente); }

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

.sidebar{
  width: 248px; flex-shrink:0; background: var(--indigo-dusk); color:#EDEFF3;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  overflow-y:auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.sidebar::-webkit-scrollbar{ display:none; } /* Chrome, Safari, Opera */
.sidebar .brand{ padding:22px 20px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .brand-mark{
  width:38px; height:38px; border-radius:10px; background: var(--kente);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; font-size:15px; flex-shrink:0;
  box-shadow: var(--shadow-sm);
}
.sidebar .brand-name{ font-family: var(--font-display); font-weight:700; font-size:16.5px; line-height:1.1; color:#fff; }
.sidebar .brand-tag{ font-size:11px; font-weight:500; color:#B6C0CF; text-transform:uppercase; letter-spacing:.06em; }

.nav-group-label{ font-size: 10.5px; text-transform: uppercase; letter-spacing:.08em; color:#7C879E; padding: 18px 20px 6px; }
.side-nav{
  padding: 4px 12px; overflow-y:auto; flex:1;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.side-nav::-webkit-scrollbar{ display:none; } /* Chrome, Safari, Opera */
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius: 9px;
  color:#C7CCDA; font-size:13.6px; font-weight:500; margin-bottom:2px; transition:.15s;
}
.side-nav a i{ font-size:16px; width:18px; text-align:center; color:#8E97AC; }
.side-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.side-nav a.active{ background:#0D4D3A; color:#fff; border-left:4px solid #10B981; padding-left:8px; }
.side-nav a.active i{ color:#fff; }
.side-nav a.active:hover{ background:#0D4D3A; }

.sidebar .user-box{ padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar .user-box .u-name{ color:#fff; font-weight:600; font-size:13.5px; }
.sidebar .user-box .u-role{ color:#B6C0CF; font-size:11.5px; font-weight:500; text-transform:capitalize; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  background: var(--surface); border-bottom:1px solid var(--border);
  padding: 14px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar h1{ font-size:19px; margin:0; font-weight:600; }
.topbar .sub{ font-size:12.5px; color:var(--text-faint); margin-top:1px; }
.content{ padding: 24px 28px 60px; flex:1; }

/* ---------- Cards ---------- */
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-header{ padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-header h2, .card-header h3{ margin:0; font-size:15.5px; font-weight:600; }
.card-body{ padding:20px; }

.stat-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px 20px; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); }
.stat-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--accent, var(--green-bright)); }
.stat-card .label{ font-size:12px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600; padding-right:48px; }
.stat-card .value{ font-family: var(--font-display); font-size: clamp(19px, 1.15rem + 0.75vw, 26px); font-weight:700; margin-top:4px; padding-right:48px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-card .delta{ font-size:12px; margin-top:6px; color:var(--text-faint); }
.stat-card .icon{ position:absolute; right:16px; top:16px; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--accent, var(--green-bright)) 14%, white); color: var(--accent, var(--green-bright)); font-size:17px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:7px; justify-content:center; border-radius: var(--radius-sm); padding:9px 16px; font-size:13.5px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:.15s; text-decoration:none; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primary{ background: var(--green-deep); color:#fff; }
.btn-primary:hover{ background: var(--green-bright); color:#fff; }
.btn-gold{ background: var(--gold); color:#3A2A00; }
.btn-gold:hover{ background:#d99b26; color:#3A2A00; }
.btn-outline{ background:transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover{ background: var(--surface-soft); }
.sidebar .btn-outline{ border-color: rgba(255,255,255,.22); color:#EDEFF3; }
.sidebar .btn-outline:hover{ background: rgba(255,255,255,.08); color:#fff; }
.btn-danger{ background: var(--rust); color:#fff; }
.btn-danger:hover{ background:#a4380b; color:#fff; }
.btn-sm{ padding:6px 11px; font-size:12.5px; border-radius:7px; }
.btn-icon{ padding:8px; width:34px; height:34px; }
.btn-block{ width:100%; }

/* ---------- Forms ---------- */
label{ font-size:12.5px; font-weight:600; color: var(--text-soft); margin-bottom:5px; display:block; }
/* Fixed height rather than vertical padding: <select>, date and time inputs
   each carry their own UA internals, so equal padding still renders at
   different heights. Explicit height + centred line-height makes them match. */
.form-control, select.form-control, textarea.form-control{
  width:100%; height:40px; border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:0 12px; line-height:1.4;
  font-size:13.8px; font-family: var(--font-body); background:#fff; color:var(--text); transition:.15s;
}
textarea.form-control{ height:auto; min-height:80px; padding:9px 12px; line-height:1.5; resize:vertical; }
select.form-control{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B9088' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:15px;
}
/* Safari renders date/time controls with baked-in padding — strip it so the
   text sits on the same baseline as a plain text input. */
input[type="date"].form-control, input[type="time"].form-control{ -webkit-appearance:none; appearance:none; }
input[type="date"].form-control::-webkit-date-and-time-value{ text-align:left; margin:0; }
.form-control:focus{ outline:none; border-color: var(--green-bright); box-shadow: 0 0 0 3px rgba(20,121,94,.13); }
label .req{ color: var(--rust); font-weight:700; margin-left:2px; }
.form-hint{ font-size:11.5px; color: var(--text-faint); margin-top:4px; }
.form-row{ margin-bottom:14px; }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.input-group{ display:flex; }
.input-group .form-control{ border-radius:0; }
.input-group>:first-child{ border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group>:last-child{ border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.3px; }
table.tbl thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--text-soft); background: var(--surface-soft); padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.tbl tbody td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.tbl tbody tr:hover{ background: var(--surface-soft); }
table.tbl tbody tr:last-child td{ border-bottom:none; }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.badge-green{ background:#E1F3EB; color:var(--success); }
.badge-gold{ background:#FBF0DA; color:#9A6B0E; }
.badge-red{ background:#FBE7E1; color:var(--danger); }
.badge-gray{ background:#EEEEEA; color:var(--text-soft); }
.badge-blue{ background:#E4EAF7; color:#2C4C9B; }

/* ---------- Login page ---------- */
.login-wrap{ height:100vh; height:100dvh; max-height:100vh; overflow:hidden; display:flex; }
.login-art{ flex:1.1; height:100%; background: var(--indigo-dusk); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#fff; padding:40px 56px; }
.login-art::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--kente); }
.login-art .stripes{ position:absolute; inset:0; opacity:.10; background: repeating-linear-gradient(115deg, var(--gold) 0 3px, transparent 3px 60px, var(--cloth-red) 60px 63px, transparent 63px 120px); }
.login-art .content{ position:relative; max-width:460px; }
.login-form-side{ flex:1; height:100%; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px 1rem; overflow-y:auto; }
.login-box{ width:100%; max-width:440px; }

.login-brand{ display:flex; align-items:center; gap:8px; margin-bottom:28px; }
.login-brand-icon{
  width:54px; height:54px; border-radius:15px; flex-shrink:0;
  background: linear-gradient(135deg, var(--gold), var(--cloth-red));
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; box-shadow: var(--shadow-md);
}
.login-brand-text{ line-height:1.2; }
.login-brand-text .kicker{
  display:block; font-family:var(--font-body); font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:5px;
}
.login-brand-text .name{ font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; }

.login-art-deco{
  position:absolute; right:-30px; bottom:-30px; font-size:260px; line-height:1;
  color:#fff; opacity:.05; transform:rotate(-10deg); pointer-events:none;
}
.login-stats{ margin-top:22px; display:flex; gap:30px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }
.login-stats .stat-num{ font-family:var(--font-display); font-size:22px; font-weight:700; }
.login-stats .stat-label{ font-size:11.5px; color:#9AA3B8; margin-top:2px; }

.login-photo-strip{ display:flex; gap:14px; margin-top:18px; }
.login-photo{
  position:relative; flex:1; height:190px; max-height:22vh; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.login-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.login-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,14,26,.80), rgba(10,14,26,.05) 62%);
}
.login-photo-tag{
  position:absolute; left:11px; bottom:10px; z-index:2; font-size:10.3px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#fff; display:flex; align-items:center; gap:5px;
}
.login-photo-tag i{ color:var(--gold); font-size:11px; }

.login-form-side .login-brand-icon{ width:50px; height:50px; border-radius:14px; font-size:22px; box-shadow:none; }
.login-form-side .login-brand-mobile{ display:none; align-items:center; gap:8px; margin-bottom:26px; }
.login-form-side .login-brand-mobile .name{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text); }
@media (max-width: 900px){
  .login-form-side .login-brand-mobile{ display:flex; }
}

/* Login card + polished form controls */
.login-card{
  background:#fff; border-radius:16px; padding:30px 32px;
  box-shadow: 0 10px 25px -5px rgba(20,23,28,.10), 0 2px 6px rgba(20,23,28,.04);
  border:1px solid var(--border);
}
.login-tagline{ color:#64748B; font-size:13.5px; margin:0 0 26px; }
.input-icon-wrap{ position:relative; display:flex; align-items:center; }
.input-icon-wrap .input-icon{
  position:absolute; left:14px; font-size:15px; color:var(--text-faint); pointer-events:none;
}
.login-input{
  height:46px; padding-left:40px !important; border:1px solid #E2E8F0 !important;
  border-radius:10px; font-size:14px;
}
.login-input:focus{
  border-color: var(--green-bright) !important;
  box-shadow: 0 0 0 3.5px rgba(20,121,94,.14) !important;
}
.pw-toggle-btn{
  position:absolute; right:10px; background:none; border:none; cursor:pointer;
  color:var(--text-faint); padding:6px; display:flex; align-items:center; font-size:15px;
  border-radius:6px; transition:.15s;
}
.pw-toggle-btn:hover{ color:var(--text-soft); background:var(--surface-soft); }
.login-row-between{
  display:flex; align-items:center; justify-content:space-between;
  margin:2px 0 18px; font-size:12.8px;
}
.remember-check{ display:flex; align-items:center; gap:7px; color:var(--text-soft); cursor:pointer; font-weight:500; margin:0; }
.remember-check input{ width:15px; height:15px; accent-color: var(--green-deep); cursor:pointer; }
.login-link{ color: var(--green-deep); font-weight:600; text-decoration:none; }
.login-link:hover{ text-decoration:underline; }
.login-forgot-note{
  display:none; font-size:12px; color:var(--text-soft); background:var(--surface-soft);
  border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin:-8px 0 16px;
  line-height:1.5;
}
.login-forgot-note.open{ display:flex; align-items:flex-start; gap:7px; }
.login-forgot-note i{ margin-top:1.5px; }
.login-submit-btn{
  padding:12px; font-size:14px; font-weight:600; letter-spacing:.02em;
  background: var(--green-deep); transition: filter .15s, transform .1s;
}
.login-submit-btn:hover{ filter:brightness(1.12); background:var(--green-deep); transform: translateY(-1px); }
.login-submit-btn:active{ transform: translateY(0); }
.login-footer-links{
  text-align:center; margin-top:22px; font-size:11.8px; color:var(--text-faint);
}
.login-footer-links a{ color:var(--text-faint); text-decoration:none; }
.login-footer-links a:hover{ color:var(--text-soft); text-decoration:underline; }


/* ---------- POS ---------- */
.pos-grid{ display:grid; grid-template-columns: 1fr 380px; gap:18px; align-items:start; }

/* Toolbar: search + category filter above the grid.
   Desktop/tablet (>=640px): inline, side by side.
   Mobile (<640px): stacked, full width. */
.pos-toolbar{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.pos-search-input{ flex:1 1 260px; max-width:260px; }
.pos-cat-select{ flex:1 1 180px; max-width:200px; }
@media (max-width: 639px){
  .pos-toolbar{ flex-direction:column; }
  .pos-search-input, .pos-cat-select{ max-width:none; width:100%; }
}

/* Product grid — breakpoints per device class:
   <480px: 1 col · 480-639px: 2 compact cols · 640-1023px (tablet): 2 cols
   >=1024px (laptop & desktop): fixed 2-lane layout, cards sized down a
   notch so the grid reads as a tidy list rather than a wall of big tiles. */
.pos-item-grid{
  display:grid; grid-template-columns: 1fr; gap:14px; width:100%;
}
@media (min-width: 480px) and (max-width: 639px){
  .pos-item-grid{ grid-template-columns: repeat(2, 1fr); gap:10px; }
}
@media (min-width: 640px) and (max-width: 1023px){
  .pos-item-grid{ grid-template-columns: repeat(2, 1fr); gap:16px; }
}
@media (min-width: 1024px){
  .pos-item-grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
}

.pos-item-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; box-sizing:border-box;
  padding:16px; background:#fff; border:1px solid #E2E8F0; border-radius:12px; cursor:pointer; transition:.15s;
}
.pos-item-card:hover{ border-color: var(--green-bright); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pos-item-card.out-of-stock{
  cursor:not-allowed; opacity:.55; filter:blur(0.4px) grayscale(.3);
}
.pos-item-card.out-of-stock:hover{ border-color:#E2E8F0; box-shadow:none; transform:none; }
.pos-item-thumb{
  width:60px; height:60px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden;
  background:#F1F5F9; color:#0F4C3A; border:1px solid #E2E8F0;
}
.pos-item-thumb.has-image{ background:transparent; border-color:transparent; }
.pos-item-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
.inv-thumb{
  width:34px; height:34px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px; overflow:hidden;
  background:#F1F5F9; color:#0F4C3A; border:1px solid #E2E8F0;
}
.inv-thumb.has-image{ background:transparent; border-color:transparent; }
.inv-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:7px; display:block; }
.pos-item-info{ flex:1; min-width:0; }
.pos-item-title{
  font-weight:600; font-size:0.95rem; line-height:1.3; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pos-item-meta{ margin-top:6px; }
.pos-item-meta .badge{ white-space:normal; text-align:left; line-height:1.3; }
.pos-item-price{
  font-weight:700; font-size:14px; color:#0F4C3A;
  white-space:nowrap; flex-shrink:0; margin-left:auto; padding-left:8px;
}

/* Compact mode: 2-up on medium phone screens, so shrink the thumb/type
   scale to keep title + badge + price from crowding a ~150px-wide card. */
@media (min-width: 480px) and (max-width: 639px){
  .pos-item-card{ padding:11px; gap:8px; flex-wrap:wrap; }
  .pos-item-thumb{ width:42px; height:42px; font-size:17px; }
  .pos-item-title{ font-size:0.82rem; }
  .pos-item-meta .badge{ font-size:9.5px; padding:2px 7px; }
  .pos-item-price{ font-size:12.5px; }
}

/* Desktop/laptop: two fixed lanes read as a wall of oversized tiles at
   full card size, so trim padding/thumb/type a notch to keep it tidy. */
@media (min-width: 1024px){
  .pos-item-card{ padding:11px 13px; gap:10px; }
  .pos-item-thumb{ width:46px; height:46px; font-size:18px; }
  .pos-item-title{ font-size:0.86rem; }
  .pos-item-meta .badge{ font-size:10.5px; padding:2px 8px; }
  .pos-item-price{ font-size:13px; }
}

.cart-line{ display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--border); }
.cart-line .name{ font-size:12.8px; font-weight:600; flex:1; }
.qty-btn{ width:24px; height:24px; border-radius:6px; border:1px solid var(--border); background:#fff; cursor:pointer; line-height:1; }

/* Floating drafts/cart pills + their popovers must never overflow a narrow
   viewport. Keep them anchored bottom-left / bottom-right as on desktop,
   just tighter to the edge and with smaller pills so the two never collide. */
@media (max-width: 480px){
  #floatDrafts{ left:10px; bottom:10px; }
  #floatCart{ right:10px; bottom:10px; }
  #draftsPopover, #cartPopover{ width:calc(100vw - 20px) !important; max-width:320px; }
  #cartPill, #floatDrafts > button{ padding:9px 14px; font-size:12.5px; gap:7px !important; }
}

/* ---------- Misc ---------- */
.divider{ height:1px; background: var(--border); margin:18px 0; }
.empty-state{ text-align:center; padding:50px 20px; color: var(--text-faint); }
.empty-state i{ font-size:34px; opacity:.5; display:block; margin-bottom:10px; }
.alert{ padding:12px 16px; border-radius: var(--radius-sm); font-size:13.3px; margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.alert-success{ background:#E1F3EB; color:#175C3D; border:1px solid #B9E3CC; }
.alert-danger{ background:#FBE7E1; color:#8C2E0B; border:1px solid #F1C0AC; }
.alert-warning{ background:#FCF1DA; color:#7A5308; border:1px solid #F0DBA8; }
.modal-backdrop-custom{ position:fixed; inset:0; background:rgba(20,23,28,.5); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal-backdrop-custom.show{ display:flex; }
.modal-box{ background:#fff; border-radius: var(--radius); max-width:520px; width:100%; max-height:90vh; overflow-y:auto; box-shadow: var(--shadow-md); }
.modal-box .modal-head{ padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal-box .modal-body-c{ padding:20px; }
.pill-tabs{ display:flex; gap:6px; background: var(--surface-soft); padding:4px; border-radius:99px; width:fit-content; flex-wrap:wrap; }
.pill-tabs a{ padding:7px 16px; border-radius:99px; font-size:12.6px; font-weight:600; color:var(--text-soft); white-space:nowrap; }
.pill-tabs a.active{ background: var(--green-deep); color:#fff; }

/* Two-column "main content + side panel" layout used on dashboard.php and
   repairs/view.php — stacks to a single column once there isn't room for
   both a data table and a sidebar of cards side by side. */
.split-2col{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start; }
@media (max-width: 900px){
  .split-2col{ grid-template-columns:1fr; }
}

@media (max-width: 900px){
  .login-art{ display:none; }
}

/* ---------- Off-canvas sidebar (tablet & mobile) ---------- */
.mobile-menu-btn{ display:none; }
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,23,28,.45);
  z-index:1150; opacity:0; transition:opacity .2s ease;
}
.sidebar-backdrop.show{ display:block; opacity:1; }

@media (max-width: 1024px){
  .mobile-menu-btn{ display:inline-flex; }
  .sidebar{
    position:fixed; left:-270px; top:0; height:100vh; width:270px; z-index:1200;
    transition:left .25s ease; box-shadow:none;
  }
  .sidebar.open{ left:0; box-shadow: 8px 0 24px rgba(0,0,0,.18); }
  .pos-grid{ grid-template-columns:1fr; }

  /* Topbar gets tight once the hamburger + title + date all compete for
     one row — wrap the date/time under the title instead of clipping it. */
  .topbar{ flex-wrap:wrap; row-gap:6px; padding:12px 16px; }
  .topbar > div:last-child{ text-align:left; margin-left:44px; }
  .content{ padding:18px 16px 48px; }
}

@media (max-width: 640px){
  .topbar h1{ font-size:17px; }
  .topbar > div:last-child{ margin-left:0; width:100%; }
}

/* Below 991px the split-screen collapses to a single scrollable column —
   release the desktop viewport lock so short/tall content isn't clipped. */
@media (max-width: 991px){
  body.login-page{ overflow-y:auto; height:auto; }
  .login-wrap{ height:auto; max-height:none; min-height:100vh; overflow:visible; }
  .login-form-side{ height:auto; overflow-y:visible; padding:32px 1rem; }
}

/* ---- Repair job wizard step tracker ---- */
.wizard-steps{
  display:flex; align-items:center; margin-bottom:20px; max-width:760px;
}
.wizard-step{ display:flex; align-items:center; gap:10px; flex:1; }
.wizard-step .dot{
  width:30px; height:30px; min-width:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; background:var(--surface-soft);
  border:2px solid var(--border); color:var(--text-faint);
}
.wizard-step .label{ font-size:12.5px; font-weight:600; color:var(--text-faint); white-space:nowrap; }
.wizard-step.done .dot{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; }
.wizard-step.done .label{ color:var(--green-deep); }
.wizard-step.active .dot{ background:#fff; border-color:var(--green-bright); color:var(--green-bright); }
.wizard-step.active .label{ color:var(--text); }
.wizard-connector{ flex:1; height:2px; background:var(--border); margin:0 6px; min-width:16px; }
.wizard-connector.done{ background:var(--green-deep); }
@media (max-width: 600px){
  .wizard-step .label{ display:none; }
}

@media (max-width: 480px){
  .login-form-side{ padding:24px 1rem; }
  .login-card{ padding:1.5rem; border-radius:14px; }
  .login-card h2{ font-size:20px; }
  .login-tagline{ font-size:12.8px; margin-bottom:20px; }
  .login-brand-mobile .name{ font-size:15.5px; }
  .login-form-side .login-brand-icon{ width:42px; height:42px; font-size:19px; }
  .login-input{ height:44px; font-size:13.5px; }
  .login-row-between{ font-size:12px; }
  .login-footer-links{ font-size:11px; }
}