@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════
   LIMO OFFICE · LIGHT DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Page background ── */
  --bg:         #f0f4ff;
  --bg-panel:   #ffffff;
  --bg-input:   #f8f9fc;
  --bg-hover:   #f1f4fb;

  /* ── Light Sidebar ── */
  --sidebar-bg:      #ffffff;
  --sidebar-border:  #e8ecf4;
  --sidebar-w:       240px;
  --sidebar-hover:   #f0f4ff;
  --sidebar-active:  #eef0fe;

  /* ── Department accent colors ── */
  --dept-cs:     #6366f1;   /* indigo  */
  --dept-sales:  #10b981;   /* emerald */
  --dept-admin:  #f59e0b;   /* amber   */

  /* ── Text ── */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;

  /* ── Border ── */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  /* ── Semantic palette ── */
  --indigo:       #6366f1;
  --indigo-light: #eef2ff;
  --indigo-mid:   #c7d2fe;
  --indigo-text:  #4338ca;
  --indigo-dark:  #3730a3;

  --blue:        #3b82f6;
  --blue-light:  #eff6ff;
  --blue-mid:    #bfdbfe;
  --blue-text:   #1d4ed8;

  --green:       #10b981;
  --green-light: #ecfdf5;
  --green-mid:   #a7f3d0;
  --green-text:  #065f46;
  --green-dark:  #047857;

  --amber:       #f59e0b;
  --amber-light: #fffbeb;
  --amber-mid:   #fde68a;
  --amber-text:  #92400e;
  --amber-dark:  #b45309;

  --red:         #ef4444;
  --red-light:   #fef2f2;
  --red-mid:     #fecaca;
  --red-text:    #991b1b;
  --red-dark:    #b91c1c;

  --purple:      #8b5cf6;
  --purple-light:#f5f3ff;
  --purple-mid:  #ddd6fe;
  --purple-text: #5b21b6;

  --teal:        #14b8a6;
  --teal-light:  #f0fdfa;
  --teal-mid:    #99f6e4;
  --teal-text:   #0f766e;

  --rose:        #f43f5e;
  --rose-light:  #fff1f2;
  --rose-text:   #9f1239;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:  0 1px 4px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.03);
  --shadow-md:  0 4px 16px rgba(15,23,42,.08);
  --shadow-lg:  0 12px 32px rgba(15,23,42,.12);
  --shadow-card:0 1px 3px rgba(15,23,42,.05), 0 0 0 1px rgba(15,23,42,.04);

  /* ── Radius ── */
  --r-xs:2px; --r-sm:6px; --r-md:10px;
  --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-3xl:32px;

  /* ── Typography ── */
  --font:      'Inter', sans-serif;
  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* legacy aliases kept for compatibility */
  --surface:var(--bg-panel); --surface-2:var(--bg); --surface-3:var(--bg-hover);
  --border-focus:var(--indigo);
  --accent:var(--indigo); --accent-hover:var(--indigo-dark);
  --accent-light:var(--indigo-light); --accent-mid:var(--indigo-mid);
  --blue-bg:var(--blue-light); --green-bg:var(--green-light);
  --amber-bg:var(--amber-light); --red-bg:var(--red-light); --purple-bg:var(--purple-light);
  --radius-sm:var(--r-sm); --radius-md:var(--r-md);
  --radius-lg:var(--r-lg); --radius-xl:var(--r-xl);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg);color:var(--text-primary);
  min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;}

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

/* ════════════════════════════════════
   LIGHT SIDEBAR
   ════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  display:flex;flex-direction:column;flex-shrink:0;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;overflow-x:hidden;
  box-shadow:1px 0 0 var(--sidebar-border), 2px 0 8px rgba(15,23,42,.03);
}

/* Brand */
.sidebar-brand{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--sidebar-border);
  display:flex;align-items:center;gap:11px;
}
.sidebar-brand .brand-icon{
  width:38px;height:38px;border-radius:11px;
  /*background:linear-gradient(135deg,#6366f1,#8b5cf6);*/
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  /*box-shadow:0 4px 12px rgba(99,102,241,.35);*/
}
.sidebar-brand .brand-icon img{
    width: 50px;
    height: 40px;
}
.sidebar-brand .brand-text{flex:1;}
.sidebar-brand .logo-name{
  font-family:var(--font-head);font-size:14px;font-weight:800;
  color:var(--text-primary);letter-spacing:-.02em;
}
.sidebar-brand .logo-tagline{
  font-size:10px;color:var(--text-muted);margin-top:1px;
  text-transform:uppercase;letter-spacing:.07em;
}

/* Department group header */
.sidebar-dept{
  padding:16px 18px 5px;
  font-size:9px;font-weight:700;color:var(--text-muted);
  letter-spacing:.12em;text-transform:uppercase;
}

/* Nav item */
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px 8px 20px;
  font-size:13px;font-weight:400;color:var(--text-secondary);
  text-decoration:none;transition:all .14s;cursor:pointer;
  border:none;background:none;width:100%;text-align:left;
  position:relative;border-radius:0;margin:1px 0;
}
.nav-item::before{
  content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%) scaleY(0);
  width:3px;height:60%;border-radius:0 3px 3px 0;
  background:var(--indigo);
  transition:transform .18s ease;
}
.nav-item:hover{
  color:var(--text-primary);background:var(--sidebar-hover);
}
.nav-item.active{
  color:var(--indigo);background:var(--sidebar-active);font-weight:600;
}
.nav-item.active::before{transform:translateY(-50%) scaleY(1);}
.nav-icon{
  width:16px;height:16px;flex-shrink:0;
  opacity:.5;transition:opacity .14s;
}
.nav-item:hover .nav-icon{opacity:.75;}
.nav-item.active .nav-icon{opacity:1;}

/* CS department — indigo accent */
.dept-cs .nav-item.active{color:var(--dept-cs);background:#eef0fe;}
.dept-cs .nav-item.active::before{background:var(--dept-cs);}
/* Sales — emerald accent */
.dept-sales .nav-item.active{color:var(--dept-sales);background:#ecfdf5;}
.dept-sales .nav-item.active::before{background:var(--dept-sales);}
/* Admin — amber accent */
.dept-admin .nav-item.active{color:var(--dept-admin);background:#fffbeb;}
.dept-admin .nav-item.active::before{background:var(--dept-admin);}

/* Sidebar footer / user block */
.sidebar-footer{
  margin-top:auto;
  padding:12px 14px;
  border-top:1px solid var(--sidebar-border);
}
.sidebar-user{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--r-md);
  background:var(--bg-hover);margin-bottom:6px;
  transition:background .14s;
}
.sidebar-user:hover{background:var(--bg);}
.sidebar-user .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.sidebar-user .u-name{font-size:12.5px;color:var(--text-primary);font-weight:600;}
.sidebar-user .u-role{font-size:10px;color:var(--text-muted);}

.nav-logout{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  font-size:12.5px;font-weight:500;color:#ef4444;
  text-decoration:none;border-radius:var(--r-md);
  transition:background .14s;
}
.nav-logout:hover{background:#fef2f2;}

/* ── MAIN CONTENT ── */
.main-content{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ── TOPBAR ── */
.topbar{
  background:#fff;border-bottom:1px solid var(--border);
  padding:0 28px;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;position:sticky;top:0;z-index:50;
  box-shadow:0 1px 4px rgba(15,23,42,.04);
}
.topbar-left{display:flex;align-items:center;gap:10px;}
.topbar-title{
  font-family:var(--font-head);font-size:15px;font-weight:700;
  color:var(--text-primary);letter-spacing:-.02em;
}
.topbar-right{display:flex;align-items:center;gap:12px;}
.topbar-clock{
  font-size:11.5px;color:var(--text-muted);font-family:var(--font-mono);
  background:var(--bg);padding:4px 9px;border-radius:20px;
  border:1px solid var(--border);
}
.topbar-ip{
  font-size:10.5px;color:var(--text-muted);font-family:var(--font-mono);
}

.page-body{padding:24px 28px;flex:1;}

/* ═══════════════════════════════════════════════════════════
   STAT CARDS — 3-column design with icon boxes
   ═══════════════════════════════════════════════════════════ */
.stats-grid{display:grid;gap:14px;margin-bottom:20px;}
.stats-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.stats-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stats-5{grid-template-columns:repeat(5,minmax(0,1fr));}

.kpi-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:20px 22px 18px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease;
  animation:cardIn .38s ease backwards;
}
.kpi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}

/* Subtle colored top border */
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--kpi-color,var(--indigo));
}

/* Icon box */
.kpi-icon{
  width:42px;height:42px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:14px;flex-shrink:0;
  background:var(--kpi-icon-bg, var(--indigo-light));
}

.kpi-value{
  font-family:var(--font-head);font-size:28px;font-weight:800;
  color:var(--kpi-color,var(--indigo));line-height:1;
  letter-spacing:-.03em;margin-bottom:5px;
}
.kpi-value.sm{font-size:20px;}
.kpi-value.xs{font-size:16px;}

.kpi-label{
  font-size:12px;font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;
}
.kpi-sub{font-size:11px;color:var(--text-muted);line-height:1.4;}

/* Color variants */
.kpi-indigo{--kpi-color:var(--indigo);--kpi-icon-bg:#eef2ff;}
.kpi-blue  {--kpi-color:var(--blue);  --kpi-icon-bg:var(--blue-light);}
.kpi-green {--kpi-color:var(--green-dark); --kpi-icon-bg:var(--green-light);}
.kpi-amber {--kpi-color:var(--amber-dark); --kpi-icon-bg:var(--amber-light);}
.kpi-red   {--kpi-color:var(--red-dark);   --kpi-icon-bg:var(--red-light);}
.kpi-purple{--kpi-color:var(--purple);     --kpi-icon-bg:var(--purple-light);}
.kpi-teal  {--kpi-color:var(--teal);       --kpi-icon-bg:var(--teal-light);}
.kpi-rose  {--kpi-color:var(--rose);       --kpi-icon-bg:var(--rose-light);}

/* ── Legacy stat-card kept for non-dashboard pages ── */
.stat-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow-card);
  transition:transform .18s,box-shadow .18s;animation:cardIn .38s ease backwards;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.stat-label{font-size:11px;color:var(--text-muted);margin-bottom:6px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.stat-value{font-family:var(--font-head);font-size:26px;font-weight:700;
  color:var(--text-primary);line-height:1;}
.stat-value.blue   {color:var(--blue);}
.stat-value.green  {color:var(--green-dark);}
.stat-value.amber  {color:var(--amber-dark);}
.stat-value.red    {color:var(--red-dark);}
.stat-value.purple {color:var(--purple);}

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-xl);padding:22px 24px;
  box-shadow:var(--shadow-card);
  transition:box-shadow .18s;animation:cardIn .38s ease backwards;
}
.card:hover{box-shadow:var(--shadow-md);}

.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.card-title{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;
  display:flex;align-items:center;gap:8px;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);
}

/* ── Section titles above card groups ── */
.section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.section-title{
  font-family:var(--font-head);font-size:16px;font-weight:700;
  color:var(--text-primary);letter-spacing:-.02em;
}
.section-sub{font-size:12px;color:var(--text-muted);margin-top:2px;}

/* ── Welcome banner (kept, uses light version now) ── */
.welcome-banner{
  background:linear-gradient(135deg,#4f46e5 0%,#6366f1 50%,#818cf8 100%);
  border-radius:var(--r-2xl);padding:24px 28px;color:#fff;
  margin-bottom:22px;position:relative;overflow:hidden;
  box-shadow:0 8px 28px rgba(99,102,241,.3);
  animation:cardIn .35s ease backwards;
}
.welcome-banner::before{
  content:'';position:absolute;right:-30px;top:-30px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.07);pointer-events:none;
}
.welcome-banner::after{
  content:'';position:absolute;right:60px;bottom:-40px;
  width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.05);pointer-events:none;
}
.wb-title{
  font-family:var(--font-head);font-size:20px;font-weight:800;
  letter-spacing:-.02em;margin-bottom:4px;position:relative;
}
.wb-sub{font-size:13px;color:rgba(255,255,255,.65);position:relative;}
.wb-actions{display:flex;gap:10px;margin-top:18px;position:relative;flex-wrap:wrap;}
.wb-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;
  border-radius:var(--r-md);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:all .17s;border:none;
  font-family:var(--font);
}
.wb-btn-primary{background:#fff;color:#4f46e5;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.wb-btn-primary:hover{box-shadow:0 4px 16px rgba(0,0,0,.2);transform:translateY(-1px);}
.wb-btn-ghost{
  background:rgba(255,255,255,.15);color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.wb-btn-ghost:hover{background:rgba(255,255,255,.22);}

/* Sales banner (green) */
.welcome-banner.sales{
  background:linear-gradient(135deg,#059669 0%,#10b981 60%,#34d399 100%);
  box-shadow:0 8px 28px rgba(16,185,129,.3);
}
.welcome-banner.sales .wb-btn-primary{color:#059669;}
/* Admin banner (dark slate) */
.welcome-banner.admin{
  background:linear-gradient(135deg,#1e293b 0%,#334155 100%);
  box-shadow:0 8px 28px rgba(15,23,42,.25);
}
.welcome-banner.admin .wb-btn-primary{color:#1e293b;}

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.form-grid{display:grid;gap:14px;}
.form-grid-2{grid-template-columns:1fr 1fr;}
.form-grid-3{grid-template-columns:1fr 1fr 1fr;}
.form-grid-4{grid-template-columns:1fr 1fr 1fr 1fr;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-label{
  font-size:11px;font-weight:700;color:var(--text-secondary);
  letter-spacing:.04em;text-transform:uppercase;
}
.form-label .required{color:var(--red);}
.form-hint{font-size:11px;color:var(--text-muted);margin-top:4px;}
.form-control{
  padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-input);color:var(--text-primary);
  font-family:var(--font);font-size:13px;transition:border-color .14s,box-shadow .14s;width:100%;
}
.form-control:focus{
  outline:none;border-color:var(--indigo);background:#fff;
  box-shadow:0 0 0 3px rgba(99,102,241,.1);
}
.form-control.la-linked{
  border-color:var(--blue-mid);background:var(--blue-light);
  color:var(--blue-text);font-family:var(--font-mono);font-size:12px;
}
.form-control::placeholder{color:var(--text-muted);}
textarea.form-control{resize:vertical;min-height:80px;}
select.form-control{cursor:pointer;}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;
  border-radius:var(--r-md);font-family:var(--font);font-size:13px;font-weight:600;
  cursor:pointer;border:1.5px solid transparent;transition:all .16s;
  text-decoration:none;white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-dark{background:var(--text-primary);color:#fff;border-color:var(--text-primary);
  box-shadow:0 2px 6px rgba(15,23,42,.2);}
.btn-dark:hover{background:#1e293b;box-shadow:0 4px 12px rgba(15,23,42,.28);}
.btn-primary{background:var(--indigo);color:#fff;border-color:var(--indigo);
  box-shadow:0 2px 8px rgba(99,102,241,.3);}
.btn-primary:hover{background:var(--indigo-dark);box-shadow:0 4px 14px rgba(99,102,241,.4);}
.btn-outline{background:#fff;color:var(--text-secondary);border-color:var(--border-strong);}
.btn-outline:hover{background:var(--bg-hover);color:var(--text-primary);}
.btn-success{background:var(--green-light);color:var(--green-text);border-color:var(--green-mid);}
.btn-success:hover{background:#d1fae5;}
.btn-danger{background:var(--red-light);color:var(--red-text);border-color:var(--red-mid);}
.btn-danger:hover{background:#fee2e2;}
.btn-danger-outline{background:transparent;color:var(--red-text);border-color:var(--red-mid);}
.btn-danger-outline:hover{background:var(--red-light);}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-blue:hover{background:#2563eb;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--r-sm);}
.btn-xs{padding:3px 9px;font-size:11px;border-radius:var(--r-sm);}
.w-full{width:100%;justify-content:center;}

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:3px 10px;
  border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.02em;}
.badge-pending  {background:#fffbeb;color:#92400e;border:1px solid #fde68a;}
.badge-confirmed{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.badge-sent     {background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.badge-cancelled{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}
.badge-paid     {background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.badge-partial  {background:#fffbeb;color:#92400e;border:1px solid #fde68a;}
.badge-unpaid   {background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}
.badge-refund   {background:#f5f3ff;color:#5b21b6;border:1px solid #ddd6fe;}
.badge-cs       {background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe;}
.badge-admin    {background:#faf5ff;color:#6b21a8;border:1px solid #ddd6fe;}
.badge-sales    {background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--r-md);}
table.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table thead th{
  text-align:left;padding:10px 14px;
  font-size:10px;font-weight:700;color:var(--text-muted);
  letter-spacing:.07em;text-transform:uppercase;
  background:var(--bg);border-bottom:1.5px solid var(--border);white-space:nowrap;
}
.data-table tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr{transition:background .1s;}
.data-table tbody tr:hover{background:#f8f9ff;}

/* ═══════════════════════════════════════════════════════════
   FILTER CHIPS & SEARCH
   ═══════════════════════════════════════════════════════════ */
.filter-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.filter-chip{
  padding:5px 13px;border-radius:20px;font-size:12px;font-weight:500;
  border:1.5px solid var(--border);background:#fff;color:var(--text-secondary);
  cursor:pointer;font-family:var(--font);transition:all .14s;text-decoration:none;
  display:inline-block;
}
.filter-chip:hover{border-color:var(--border-strong);color:var(--text-primary);}
.filter-chip.active{
  background:var(--indigo);color:#fff;border-color:var(--indigo);
  box-shadow:0 2px 8px rgba(99,102,241,.25);
}
.search-input{
  padding:8px 13px;border:1.5px solid var(--border);border-radius:var(--r-md);
  font-family:var(--font);font-size:13px;background:#fff;color:var(--text-primary);
  min-width:220px;transition:border-color .14s,box-shadow .14s;
}
.search-input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.1);}

/* ═══════════════════════════════════════════════════════════
   REMINDERS
   ═══════════════════════════════════════════════════════════ */
.reminder-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--r-md);background:var(--bg);
  border:1.5px solid var(--border);margin-bottom:8px;transition:all .14s;
}
.reminder-item:hover{box-shadow:var(--shadow-sm);border-color:var(--border-strong);}
.reminder-item.overdue{background:var(--red-light);border-color:var(--red-mid);}
.reminder-item.done{opacity:.5;}
.reminder-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--amber);box-shadow:0 0 0 2px rgba(245,158,11,.2);}
.reminder-dot.urgent{background:var(--red);box-shadow:0 0 0 2px rgba(239,68,68,.2);}
.reminder-dot.done{background:var(--green);box-shadow:0 0 0 2px rgba(16,185,129,.2);}

/* ═══════════════════════════════════════════════════════════
   ALERTS & FLASH
   ═══════════════════════════════════════════════════════════ */
.alert{padding:11px 15px;border-radius:var(--r-md);font-size:13px;
  margin-bottom:16px;display:flex;align-items:center;gap:10px;
  border:1.5px solid transparent;font-weight:500;}
.alert-info   {background:var(--blue-light);color:var(--blue-text);border-color:var(--blue-mid);}
.alert-warn   {background:var(--amber-light);color:var(--amber-text);border-color:var(--amber-mid);}
.alert-success{background:var(--green-light);color:var(--green-text);border-color:var(--green-mid);}
.alert-danger {background:var(--red-light);color:var(--red-text);border-color:var(--red-mid);}

.flash{
  position:fixed;top:20px;right:20px;z-index:9999;
  padding:12px 18px;border-radius:var(--r-md);font-size:13px;font-weight:600;
  box-shadow:var(--shadow-lg);animation:flashIn .25s cubic-bezier(.16,1,.3,1);max-width:360px;
}
.flash-success{background:var(--green-light);color:var(--green-text);border:1.5px solid var(--green-mid);}
.flash-error  {background:var(--red-light);color:var(--red-text);border:1.5px solid var(--red-mid);}

/* ═══════════════════════════════════════════════════════════
   LAYOUTS
   ═══════════════════════════════════════════════════════════ */
.two-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}

/* ── Mono pill ── */
.mono{
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);
  background:var(--bg);padding:2px 6px;border-radius:4px;border:1px solid var(--border);
}

/* ── Online dot ── */
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 2px rgba(16,185,129,.2);animation:pulseDot 2s infinite;flex-shrink:0;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.5;transform:scale(1.25);}}

/* ── Progress bar ── */
.progress-bar{height:6px;background:var(--bg-hover);border-radius:10px;overflow:hidden;margin-top:6px;}
.progress-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--green),#34d399);transition:width 1s;}

/* ── Utility ── */
.flex{display:flex;}.flex-col{flex-direction:column;}.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}
.mb-8{margin-bottom:8px;}.mb-12{margin-bottom:12px;}.mb-16{margin-bottom:16px;}
.mb-20{margin-bottom:20px;}.mb-24{margin-bottom:24px;}.mt-auto{margin-top:auto;}
.text-sm{font-size:12px;}.text-xs{font-size:11px;}
.text-muted{color:var(--text-muted);}.text-secondary{color:var(--text-secondary);}
.font-mono{font-family:var(--font-mono);}
.hidden{display:none!important;}

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4f46e5 0%,#6366f1 50%,#818cf8 100%);
  position:relative;overflow:hidden;
}
.login-wrap::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.06) 1px,transparent 0);
  background-size:28px 28px;
}
.login-card{
  background:#fff;border-radius:var(--r-2xl);
  padding:44px 40px;width:100%;max-width:400px;
  box-shadow:0 24px 64px rgba(15,23,42,.2);
  animation:loginIn .45s cubic-bezier(.16,1,.3,1) backwards;position:relative;
}
@keyframes loginIn{from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:none;}}
.login-logo-icon{
  width:52px;height:52px;border-radius:14px;margin-bottom:16px;
  /* background:linear-gradient(135deg,#4f46e5,#7c3aed); */
  display:flex;align-items:center;justify-content:center;font-size:26px;
  /* box-shadow:0 8px 20px rgba(79,70,229,.4); */
}
.login-logo-icon img{
  width: 65px;
  height: 65px;
}
.login-logo{font-family:var(--font-head);font-size:22px;font-weight:800;
  color:var(--text-primary);margin-bottom:4px;letter-spacing:-.03em;}
.login-sub{font-size:13px;color:var(--text-muted);margin-bottom:28px;}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes flashIn{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}
.fade-in{animation:fadeIn .26s ease forwards;}
.stats-3 .kpi-card:nth-child(1){animation-delay:.04s;}
.stats-3 .kpi-card:nth-child(2){animation-delay:.09s;}
.stats-3 .kpi-card:nth-child(3){animation-delay:.14s;}
.stats-4 .kpi-card:nth-child(1){animation-delay:.03s;}
.stats-4 .kpi-card:nth-child(2){animation-delay:.07s;}
.stats-4 .kpi-card:nth-child(3){animation-delay:.11s;}
.stats-4 .kpi-card:nth-child(4){animation-delay:.15s;}
.stats-5 .kpi-card:nth-child(1){animation-delay:.02s;}
.stats-5 .kpi-card:nth-child(2){animation-delay:.05s;}
.stats-5 .kpi-card:nth-child(3){animation-delay:.08s;}
.stats-5 .kpi-card:nth-child(4){animation-delay:.11s;}
.stats-5 .kpi-card:nth-child(5){animation-delay:.14s;}

/* ═══════════════════════════════════════════════════════════
   REMINDER POPUP NOTIFICATION
   ═══════════════════════════════════════════════════════════ */
#rem-popup-container{
  position:fixed;bottom:24px;right:24px;z-index:99999;
  display:flex;flex-direction:column-reverse;gap:10px;
  pointer-events:none;max-width:390px;width:calc(100vw - 48px);
}
.rem-popup{
  background:#fff;
  border:1.5px solid #fde68a;
  border-left:5px solid #f59e0b;
  border-radius:16px;
  box-shadow:0 8px 40px rgba(15,23,42,.15),0 0 0 1px rgba(245,158,11,.08);
  pointer-events:all;overflow:hidden;
  opacity:0;transform:translateY(20px) scale(.96);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1);
}
.rem-popup.rem-popup-visible{opacity:1;transform:none;}
.rem-popup.rem-popup-hiding{opacity:0;transform:translateY(14px) scale(.95);}

.rem-popup-header{
  display:flex;align-items:center;gap:10px;padding:13px 14px 10px;
  background:linear-gradient(90deg,#fffbeb,#fef3c7 70%,#fff 100%);
  border-bottom:1px solid #fde68a;
}
.rem-popup-bell{font-size:22px;animation:bellRing .7s ease infinite;display:inline-block;transform-origin:top center;}
@keyframes bellRing{0%,100%{transform:rotate(0);}15%{transform:rotate(18deg);}45%{transform:rotate(-16deg);}65%{transform:rotate(12deg);}85%{transform:rotate(-8deg);}}
.rem-popup-title{flex:1;font-family:var(--font-head);font-size:14px;font-weight:700;color:#92400e;}
.rem-popup-close{
  width:27px;height:27px;border-radius:50%;background:rgba(245,158,11,.15);
  border:none;cursor:pointer;font-size:13px;color:#92400e;
  display:flex;align-items:center;justify-content:center;transition:background .14s;
}
.rem-popup-close:hover{background:rgba(245,158,11,.3);}

.rem-popup-body{padding:12px 14px;}
.rem-popup-text{font-size:14px;font-weight:600;color:#0f172a;line-height:1.5;margin-bottom:8px;}
.rem-popup-booking{
  font-size:12px;color:#475569;margin-bottom:6px;
  padding:6px 10px;background:#eff6ff;border-radius:6px;border:1px solid #bfdbfe;
}
.rem-popup-time{font-size:11px;color:#b45309;font-style:italic;}

.rem-popup-actions{
  display:flex;gap:8px;padding:10px 14px 13px;
  background:#fafaf8;border-top:1px solid #f0ede8;flex-wrap:wrap;
}
.btn-rem-done{
  flex:1;background:#ecfdf5;color:#065f46;border:1.5px solid #a7f3d0;
  border-radius:8px;padding:7px 13px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:var(--font);transition:background .14s;
}
.btn-rem-done:hover{background:#d1fae5;}
.rem-popup-snooze{
  background:#f8fafc;color:#475569;border:1.5px solid #e2e8f0;
  border-radius:8px;padding:7px 11px;font-size:11px;font-weight:600;
  cursor:pointer;font-family:var(--font);transition:all .14s;white-space:nowrap;
}
.rem-popup-snooze:hover{background:#f1f5f9;border-color:#cbd5e1;}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — COMPLETE MOBILE SYSTEM
   Breakpoints: 1100 | 900 | 768 | 540 | 380
   ═══════════════════════════════════════════════════════════ */

/* ── 1100px: Large tablet / small laptop ── */
@media(max-width:1100px){
  .form-grid-4{grid-template-columns:1fr 1fr;}
  .stats-5{grid-template-columns:repeat(3,1fr);}
  .topbar-clock,.topbar-ip{font-size:10.5px;}
}

/* ── 900px: Tablet ── */
@media(max-width:900px){
  :root{--sidebar-w:220px;}
  .two-panel{grid-template-columns:1fr;}
  .form-grid-2,.form-grid-3,.form-grid-4{grid-template-columns:1fr 1fr;}
  .three-col,.stats-3{grid-template-columns:1fr 1fr;}
  .stats-4{grid-template-columns:1fr 1fr;}
  .page-body{padding:16px 18px;}
  .chat-shell{height:calc(100vh - 100px);}
  .booking-info-grid{grid-template-columns:1fr;}
  .booking-info-cell{border-right:none;}
  .booking-timeline{gap:0;}
  .timeline-connector{min-width:12px;}
  .settings-section-body{padding:14px 16px;}
  .kpi-card{padding:16px 18px 14px;}
}

/* ── 768px: Mobile landscape / small tablet ── */
@media(max-width:768px){
  /* Sidebar: hidden offscreen, slides in as a drawer */
  .chat-shell{
    flex-direction: column !important;
  }
   .chat-sidebar{
    width: 100% !important;
   }
  .sidebar{
    position:fixed;inset-y:0;left:0;
    width:260px !important;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
    height:100dvh;
    overflow-y:auto;
  }
  .sidebar.mob-open{
    transform:translateX(0);
    box-shadow:4px 0 32px rgba(15,23,42,.18);
  }

  /* Overlay behind open sidebar */
  #mob-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(15,23,42,.45);
    z-index:999;
    backdrop-filter:blur(2px);
  }
  #mob-overlay.show{display:block;}

  /* Hamburger button */
  #mob-menu-btn{
    display:flex;
    align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:8px;
    background:var(--bg-hover);border:1px solid var(--border);
    cursor:pointer;flex-shrink:0;
    margin-right:8px;
  }
  #mob-menu-btn svg{width:18px;height:18px;color:var(--text-secondary);}

  /* Main content: full width */
  .main-content{width:100%;min-width:0;}
  .app-shell{flex-direction:row;}

  /* Topbar */
  .topbar{padding:0 14px;height:52px;}
  .topbar-title{font-size:14px;}
  .topbar-clock{display:none;}
  .topbar-right > span:last-child{display:none;} /* IP address */

  /* Page body */
  .page-body{padding:14px 14px;}

  /* Grids → single column */
  .form-grid-2,.form-grid-3,.form-grid-4{grid-template-columns:1fr;}
  .three-col,.stats-3,.stats-4,.stats-5{grid-template-columns:1fr 1fr;}

  /* Welcome banner */
  .welcome-banner{padding:18px 20px;border-radius:var(--r-xl);}
  .wb-title{font-size:16px;}
  .wb-sub{font-size:12px;}
  .wb-actions{gap:8px;margin-top:14px;}
  .wb-btn{padding:7px 14px;font-size:12px;}

  /* Cards */
  .card{padding:14px 16px;}
  .kpi-card{padding:14px 16px;}

  /* Chat widget */
  .chat-sidebar{display:none;}

  /* Tables: horizontal scroll */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .data-table{min-width:560px;}

  /* Reminder modal full width */
  #rem-alarm-box{width:calc(100vw - 24px);}

  /* Buttons: larger touch targets */
  .btn{min-height:38px;}
  .btn-sm{min-height:32px;}
}

/* ── 540px: Mobile portrait ── */
@media(max-width:540px){
  .stats-3,.stats-4,.stats-5{grid-template-columns:1fr;}
  .stats-2{grid-template-columns:1fr !important;}

  .topbar{height:50px;padding:0 12px;}
  .topbar-title{font-size:13px;}

  .page-body{padding:12px;}

  /* Welcome banner: compact */
  .welcome-banner{padding:16px;}
  .wb-title{font-size:15px;}
  .wb-actions{flex-direction:column;gap:6px;}
  .wb-btn{width:100%;justify-content:center;}

  /* Two-panel already single col from 900, enforce */
  .two-panel{grid-template-columns:1fr !important;gap:12px;}

  /* Section header: stack on mobile */
  .section-hdr{flex-direction:column;align-items:flex-start;gap:8px;}

  /* Cards */
  .card{padding:12px 14px;border-radius:var(--r-md);}
  .card-title{font-size:11px;margin-bottom:12px;}

  /* KPI stat cards: 2 per row still readable */
  .stats-grid{gap:10px;
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  .kpi-card{padding:12px 14px 10px;}
  .kpi-num{font-size:22px !important;}

  /* Reminder alarm: bottom sheet style */
  #rem-alarm-overlay{align-items:flex-end;}
  #rem-alarm-box{
    width:100%;
    border-radius:20px 20px 0 0;
    animation:remBoxUp .28s cubic-bezier(.34,1.2,.64,1);
  }
  @keyframes remBoxUp{
    from{transform:translateY(100%);}
    to{transform:translateY(0);}
  }

  /* Chat widget: full screen */
  #cw-panel{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    border-radius:0 !important;
    transform:translateY(100%) !important;
    transition:transform .3s cubic-bezier(.4,0,.2,1) !important;
  }
  #cw-panel.cw-open{
    transform:translateY(0) !important;
  }
  #cw-root{
    bottom:16px;right:16px;
  }
  #cw-fab{width:50px;height:50px;}

  /* Flush page content */
  .form-grid{gap:10px;}

  /* Table cards on small mobile */
  .data-table{font-size:12px;}
  .data-table thead th{padding:9px 10px;font-size:10px;}
  .data-table tbody td{padding:9px 10px;}

  /* Badges compact */
  .badge{font-size:9px;padding:2px 7px;}

  /* Booking view */
  .booking-meta-row{flex-direction:column;gap:6px;}
}

/* ── 380px: Very small phones ── */
@media(max-width:380px){
  .page-body{padding:10px;}
  .topbar{padding:0 10px;}
  .stats-grid{gap:8px;
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;}
  .kpi-card{padding:10px 12px 8px;}
  .sidebar{width:240px !important;}
  .wb-title{font-size:14px;}
  .btn{font-size:12px;padding:6px 12px;}
}

/* ── Hamburger always hidden on desktop ── */
@media(min-width:769px){
  #mob-menu-btn{display:none !important;}
  #mob-overlay{display:none !important;}
}
/* ═══════════════════════════════════════════════════════════
   CHAT PAGE — LIGHT THEME COMPLETE
   ═══════════════════════════════════════════════════════════ */
.chat-shell{background:var(--bg-panel);}

/* Channel icon dots by role */
.chat-channel-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--border-strong);
}
.chat-channel-btn.active .chat-channel-dot{background:var(--dept-cs);}
.chat-channel-btn[data-ch="sales"].active .chat-channel-dot{background:var(--dept-sales);}
.chat-channel-btn[data-ch="admin"].active .chat-channel-dot{background:var(--dept-admin);}

/* Online indicator in chat */
.chat-online-bar{
  padding:8px 16px;border-top:1px solid var(--sidebar-border);
  margin-top:auto;font-size:11px;color:var(--text-muted);
  display:flex;align-items:center;gap:6px;
}

/* Own message distinction */
.chat-msg.own .chat-avatar{
  background:linear-gradient(135deg,var(--indigo),var(--purple));
}
.chat-msg.own .chat-name::after{
  content:' (you)';color:var(--blue-text);font-weight:400;
}

/* Typing indicator placeholder */
.chat-typing{
  font-size:11px;color:var(--text-muted);padding:4px 8px;
  font-style:italic;min-height:20px;
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR — ENHANCED
   ═══════════════════════════════════════════════════════════ */
.topbar{
  box-shadow:0 1px 0 var(--border),0 2px 8px rgba(15,23,42,.04);
}
.topbar-breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text-muted);
}
.topbar-breadcrumb span{color:var(--text-primary);font-weight:600;}
.topbar-divider{
  width:1px;height:20px;background:var(--border);margin:0 4px;
}

/* Topbar notification bell */
.topbar-bell{
  position:relative;width:34px;height:34px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border);
  cursor:pointer;transition:background .14s;color:var(--text-secondary);
}
.topbar-bell:hover{background:var(--bg-hover);color:var(--text-primary);}
.topbar-bell-dot{
  position:absolute;top:6px;right:6px;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid #fff;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — COMPLETE LIGHT FIXES
   ═══════════════════════════════════════════════════════════ */
.sidebar{background:var(--sidebar-bg);}
.sidebar-brand{background:var(--sidebar-bg);}

/* Section separator in sidebar */
.sidebar-sep{
  height:1px;background:var(--sidebar-border);margin:8px 16px;
}

/* Sidebar collapse hint */
.sidebar-hint{
  padding:6px 18px;font-size:10px;color:var(--text-muted);
  letter-spacing:.04em;
}

/* ═══════════════════════════════════════════════════════════
   BOOKING PAGES — CS DEPARTMENT
   ═══════════════════════════════════════════════════════════ */
/* Booking status timeline */
.booking-timeline{
  display:flex;align-items:center;gap:0;margin:16px 0;
  overflow-x:auto;padding-bottom:4px;
}
.timeline-step{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;min-width:80px;
}
.timeline-step-dot{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg-hover);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;transition:all .2s;
}
.timeline-step.done .timeline-step-dot{
  background:var(--green-light);border-color:var(--green-mid);color:var(--green-text);
}
.timeline-step.current .timeline-step-dot{
  background:var(--indigo-light);border-color:var(--indigo);
  color:var(--indigo);box-shadow:0 0 0 4px rgba(99,102,241,.12);
}
.timeline-step-label{
  font-size:10px;font-weight:600;color:var(--text-muted);
  text-align:center;letter-spacing:.03em;
}
.timeline-step.done .timeline-step-label{color:var(--green-text);}
.timeline-step.current .timeline-step-label{color:var(--indigo);}
.timeline-connector{
  flex:1;height:2px;background:var(--border);min-width:20px;
  margin-bottom:22px;transition:background .2s;
}
.timeline-connector.done{background:var(--green-mid);}

/* Booking info grid */
.booking-info-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
}
.booking-info-cell{
  padding:12px 16px;border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
}
.booking-info-cell:nth-child(even){border-right:none;}
.booking-info-cell:nth-last-child(-n+2){border-bottom:none;}
.booking-info-label{
  font-size:10px;font-weight:700;color:var(--text-muted);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px;
}
.booking-info-value{
  font-size:13px;color:var(--text-primary);font-weight:500;
}

/* Booking ref pill */
.booking-ref-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:13px;
  background:var(--indigo-light);color:var(--indigo-text);
  border:1px solid var(--indigo-mid);border-radius:var(--r-md);
  padding:6px 14px;font-weight:600;
}

/* ═══════════════════════════════════════════════════════════
   SALES DEPARTMENT PAGES
   ═══════════════════════════════════════════════════════════ */
/* Payment amount display */
.payment-amount{
  font-family:var(--font-head);font-size:22px;font-weight:800;
  letter-spacing:-.02em;
}
.payment-amount.paid   {color:var(--green-dark);}
.payment-amount.partial{color:var(--amber-dark);}
.payment-amount.unpaid {color:var(--red-dark);}
.payment-amount.refund {color:var(--purple);}

/* Payment breakdown row */
.payment-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13px;
}
.payment-row:last-child{border-bottom:none;}
.payment-row-label{color:var(--text-secondary);font-weight:500;}
.payment-row-value{font-weight:700;color:var(--text-primary);font-family:var(--font-mono);}

/* Transaction history item */
.txn-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;background:var(--bg);
  border-radius:var(--r-md);border:1px solid var(--border);
  margin-bottom:8px;transition:box-shadow .14s;
}
.txn-item:hover{box-shadow:var(--shadow-sm);}
.txn-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.txn-icon.received{background:var(--green-light);}
.txn-icon.refund   {background:var(--purple-light);}
.txn-icon.adjust   {background:var(--amber-light);}
.txn-details{flex:1;}
.txn-amount{font-family:var(--font-mono);font-weight:700;font-size:14px;}
.txn-amount.received{color:var(--green-dark);}
.txn-amount.refund  {color:var(--purple);}

/* Sales report table enhancements */
.report-total-row td{
  font-weight:700;background:var(--bg);border-top:2px solid var(--border);
}

/* Refund reason box */
.refund-reason-box{
  background:var(--red-light);border:1px solid var(--red-mid);
  border-radius:var(--r-md);padding:12px 16px;
  font-size:13px;color:var(--red-text);
}

/* ═══════════════════════════════════════════════════════════
   ADMIN PAGES
   ═══════════════════════════════════════════════════════════ */
/* User role badge large */
.role-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-md);
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.role-badge.admin{background:var(--amber-light);color:var(--amber-text);border:1px solid var(--amber-mid);}
.role-badge.cs   {background:var(--indigo-light);color:var(--indigo-text);border:1px solid var(--indigo-mid);}
.role-badge.sales{background:var(--green-light);color:var(--green-text);border:1px solid var(--green-mid);}

/* Active/inactive toggle indicator */
.user-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;
}
.user-status-dot{
  width:7px;height:7px;border-radius:50%;
}
.user-status.active   .user-status-dot{background:var(--green);}
.user-status.inactive .user-status-dot{background:var(--border-strong);}
.user-status.active   {color:var(--green-dark);}
.user-status.inactive {color:var(--text-muted);}

/* Activity log entries */
.activity-entry{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13px;
}
.activity-entry:last-child{border-bottom:none;}
.activity-icon{
  width:32px;height:32px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:14px;background:var(--bg-hover);
}
.activity-meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
.activity-action{font-weight:600;color:var(--text-primary);}

/* Settings page section */
.settings-section{
  border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden;margin-bottom:18px;
}
.settings-section-head{
  padding:16px 22px;background:var(--bg);
  border-bottom:1px solid var(--border);
  font-family:var(--font-head);font-size:13px;font-weight:700;
  color:var(--text-secondary);display:flex;align-items:center;gap:8px;
}
.settings-section-body{padding:20px 22px;background:#fff;}

/* IP restriction badge */
.ip-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:11px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:3px 9px;color:var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   REMINDERS — ENHANCED POPUP & LIST
   ═══════════════════════════════════════════════════════════ */
/* Snooze button group */
.snooze-group{
  display:flex;gap:6px;flex-wrap:wrap;
}

/* Reminder add form — booking link lookup */
.booking-lookup-row{
  display:flex;gap:8px;
}
.booking-lookup-row input{flex:1;}
.booking-preview{
  padding:8px 12px;background:var(--blue-light);border:1px solid var(--blue-mid);
  border-radius:var(--r-sm);font-size:12px;color:var(--blue-text);margin-top:6px;
  display:none;
}
.booking-preview.visible{display:block;}

/* Reminder count badge in sidebar */
.rem-count{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;border-radius:10px;
  padding:1px 6px;min-width:18px;text-align:center;
  font-family:var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATES — ALL PAGES
   ═══════════════════════════════════════════════════════════ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 24px;text-align:center;
  color:var(--text-muted);gap:12px;
}
.empty-state-icon{font-size:48px;opacity:.35;}
.empty-state-title{
  font-family:var(--font-head);font-size:15px;font-weight:700;
  color:var(--text-secondary);
}
.empty-state-sub{font-size:13px;max-width:320px;line-height:1.6;}
.empty-state-action{margin-top:8px;}

/* ═══════════════════════════════════════════════════════════
   MODAL / DIALOG
   ═══════════════════════════════════════════════════════════ */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.45);
  z-index:9000;display:flex;align-items:center;justify-content:center;
  animation:fadeIn .2s ease;
}
.modal{
  background:#fff;border-radius:var(--r-xl);padding:28px;
  max-width:520px;width:calc(100% - 32px);
  box-shadow:var(--shadow-lg);animation:cardIn .25s cubic-bezier(.16,1,.3,1);
  position:relative;
}
.modal-title{
  font-family:var(--font-head);font-size:16px;font-weight:700;
  color:var(--text-primary);margin-bottom:16px;
}
.modal-close{
  position:absolute;top:16px;right:16px;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--border);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;color:var(--text-muted);transition:all .14s;
}
.modal-close:hover{background:var(--bg-hover);color:var(--text-primary);}

/* ═══════════════════════════════════════════════════════════
   CONFIRM DANGER DIALOG
   ═══════════════════════════════════════════════════════════ */
.confirm-danger{border-top:4px solid var(--red);}
.confirm-danger .modal-title{color:var(--red-text);}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination{
  display:flex;align-items:center;gap:4px;justify-content:center;
  margin-top:20px;
}
.page-btn{
  width:32px;height:32px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:500;border:1px solid var(--border);
  background:#fff;color:var(--text-secondary);cursor:pointer;
  text-decoration:none;transition:all .14s;
}
.page-btn:hover{background:var(--bg-hover);border-color:var(--border-strong);}
.page-btn.active{
  background:var(--indigo);color:#fff;border-color:var(--indigo);
  box-shadow:0 2px 8px rgba(99,102,241,.25);
}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ═══════════════════════════════════════════════════════════
   SEARCH HIGHLIGHT
   ═══════════════════════════════════════════════════════════ */
mark.hl{
  background:var(--amber-light);color:var(--amber-text);
  border-radius:2px;padding:0 2px;font-weight:inherit;
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING CHAT WIDGET
   ═══════════════════════════════════════════════════════════════ */

#cw-root {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

/* ── FAB button ── */
#cw-fab {
  pointer-events: all;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(99,102,241,.45), 0 1px 4px rgba(0,0,0,.15);
  position: relative;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  order: 2;
}
#cw-fab svg { width: 22px; height: 22px; color: #fff; }
#cw-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(99,102,241,.55);
}
#cw-fab.cw-fab-open { background: linear-gradient(135deg, #4f46e5, #7c3aed); }

/* FAB badge (total unread) */
#cw-fab-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  font-family: var(--font);
  animation: cw-badge-pop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cw-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── Panel ── */
#cw-panel {
  pointer-events: all;
  order: 1;
  width: 360px;
  height: 520px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.85) translateY(16px);
  opacity: 0;
  transition: transform .28s cubic-bezier(.34,1.3,.64,1), opacity .22s ease;
  pointer-events: none;
}
#cw-panel.cw-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Panel header */
#cw-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  flex-shrink: 0;
}
#cw-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  letter-spacing: -.01em;
}
#cw-panel-title svg { color: rgba(255,255,255,.8); }

/* Status dot */
#cw-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  transition: background .3s;
  flex-shrink: 0;
}
.cw-dot-online  { background: #4ade80; border-color: rgba(255,255,255,.6); }
.cw-dot-error   { background: #fca5a5; }

/* Tabs */
#cw-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 12px 0;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  flex-shrink: 0;
}
.cw-tab {
  flex: 1;
  padding: 7px 6px;
  border: none;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.cw-tab:hover { background: rgba(255,255,255,.28); color: #fff; }
.cw-tab.active {
  background: #fff;
  color: #4338ca;
}

/* Tab badge */
.cw-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}
.cw-tab.active .cw-tab-badge {
  background: #ef4444;
  color: #fff;
}

/* Messages area */
#cw-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg);
  scroll-behavior: smooth;
}
#cw-messages::-webkit-scrollbar { width: 4px; }
#cw-messages::-webkit-scrollbar-track { background: transparent; }
#cw-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* Message */
.cw-msg {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .12s;
}
.cw-msg:hover { background: var(--bg-hover); }
.cw-msg.cw-own { background: rgba(99,102,241,.07); }
.cw-msg-new {
  animation: cw-slide-in .28s ease-out;
}
@keyframes cw-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cw-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.cw-bubble { flex: 1; min-width: 0; }
.cw-meta {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 2px;
}
.cw-sender {
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
}
.cw-you { color: #6366f1; font-weight: 400; }
.cw-time {
  font-size: 10px; color: var(--text-muted);
  font-family: var(--font-mono);
}
.cw-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Date separator */
.cw-date-sep {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 6px 0;
  position: relative;
  margin: 4px 0;
}
.cw-date-sep::before, .cw-date-sep::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 40px);
  height: 1px;
  background: var(--border);
}
.cw-date-sep::before { left: 0; }
.cw-date-sep::after  { right: 0; }

/* Empty / Loading */
.cw-empty, .cw-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  gap: 6px;
  padding: 30px;
}
.cw-empty-icon { font-size: 30px; opacity: .4; }
.cw-loading::before {
  content: '';
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: cw-spin .7s linear infinite;
}
@keyframes cw-spin {
  to { transform: rotate(360deg); }
}

/* Input area */
#cw-input-area {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: #fff;
}
#cw-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
#cw-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-family: var(--font);
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
#cw-input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
  background: #fff;
}
#cw-send-btn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
#cw-send-btn:hover { transform: scale(1.08); box-shadow: 0 3px 12px rgba(99,102,241,.45); }
#cw-send-btn:disabled { opacity: .5; transform: none; cursor: not-allowed; }
#cw-send-btn svg { color: #fff; }
#cw-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* ── Notification banner (floating toast near widget) ── */
#cw-notif-banner {
  pointer-events: all;
  position: absolute;
  bottom: 70px;
  right: 0;
  max-width: 300px;
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  cursor: pointer;
  animation: cw-slide-in .25s ease-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 9901;
  line-height: 1.4;
}

/* ── Sales Dashboard chat notification area ── */
.cw-dash-notif {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--indigo-light);
  border: 1px solid var(--indigo-mid);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--indigo-text);
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 16px;
  animation: cw-slide-in .3s ease-out;
}
.cw-dash-notif:hover { background: var(--indigo-mid); }
.cw-dash-notif-icon { font-size: 18px; flex-shrink: 0; }
.cw-dash-notif-text { flex: 1; font-weight: 500; }
.cw-dash-notif-badge {
  background: #ef4444;
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}

@media (max-width: 600px) {

  /* Stack everything */
  .two-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Make table scrollable */
  .table-wrap {
    overflow-x: auto;
  }

  .data-table {
    min-width: 600px; /* prevents breaking */
  }

  /* Reduce padding/font */
  .card {
    padding: 12px;
  }

  .card-title {
    font-size: 14px;
  }

  .text-sm {
    font-size: 12px;
  }

  .text-xs {
    font-size: 11px;
  }

  /* Buttons full width */
  .btn {
    width: 100%;
    text-align: center;
  }

  .btn-xs {
    padding: 6px 8px;
    font-size: 11px;
  }

  /* Reminder items stack better */
  .reminder-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Form inputs stack */
  form[style*="flex"] {
    flex-direction: column !important;
  }

  form input,
  form button {
    width: 100% !important;
  }
}