/*Enterprise POS & OpenCart Sync — Admin Dashboard
   Custom design system (no framework)
 */

 html, body{
  overflow-x:hidden;
  max-width:100%;
}

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* --- Palette --- */
  --ink-950:#0a0f1e;
  --ink-900:#0f1526;
  --ink-800:#161d33;
  --ink-700:#212a45;
  --ink-line: rgba(255,255,255,0.07);

  --bg-app:#f3f5f9;
  --bg-card:#ffffff;
  --border:#e6e9f0;
  --text-heading:#0f172a;
  --text-body:#475269;
  --text-muted:#94a0b8;

  --teal:#1fc7b6;
  --teal-dark:#12a394;
  --teal-glow: rgba(31,199,182,0.35);

  --amber:#f5a524;
  --violet:#7c6bf2;
  --rose:#f2576b;
  --white:#fff;

  --blue:#3762f2;
  --blue-dark:#2748c4;
  --blue-glow: rgba(55,98,242,0.3);

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:10px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px -8px rgba(15,23,42,0.15);
  --shadow-lg: 0 20px 45px -12px rgba(15,23,42,0.22);
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
}

body{
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--bg-app);
  color:var(--text-body);
  display:flex;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--teal-glow); }

/* Scrollbars */
.scroll-thin::-webkit-scrollbar{ width:5px; }
.scroll-thin::-webkit-scrollbar-track{ background:transparent; }
.scroll-thin::-webkit-scrollbar-thumb{ background:var(--ink-700); border-radius:4px; }

/*SIDEBAR*/
.sidebar{
  width:272px;
  min-width:272px;
  height:100vh;
  background:linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  color:#cbd3e6;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--ink-line);
}

.sidebar-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:22px 22px;
  border-bottom:1px solid var(--ink-line);
  flex-shrink:0;
}

.brand-mark{
  width:36px; height:36px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#04231f;
  font-size:16px;
  box-shadow:0 6px 16px -4px var(--teal-glow);
}

.brand span{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:0.02em;
  color:#fff;
}

.nav{
  flex:1;
  overflow-y:auto;
  padding:16px 14px 24px;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  margin-bottom:4px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  color:#94a0b8;
  transition:background .18s ease, color .18s ease;
  position:relative;
}

.nav-link i{ width:18px; text-align:center; font-size:14px; }

.nav-link:hover{
  background:rgba(255,255,255,0.05);
  color:#fff;
}

.nav-link.active{
  background:linear-gradient(90deg, var(--teal) 0%, var(--teal-dark) 100%);
  color:#04231f;
  font-weight:700;
  box-shadow:0 8px 18px -6px var(--teal-glow);
}
.nav-link.active i{ color:#04231f; }

/* dropdown group */
.nav-group{ margin-bottom:4px; }

.nav-group-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 14px;
  border:none;
  background:transparent;
  color:#94a0b8;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  transition:background .18s ease, color .18s ease;
}
.nav-group-btn span{ display:flex; align-items:center; gap:12px; }
.nav-group-btn i.chev{ font-size:11px; transition:transform .2s ease; }
.nav-group-btn:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.nav-group.open .nav-group-btn{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-group.open .nav-group-btn i.chev{ transform:rotate(180deg); color:var(--teal); }

.nav-group-btn.active{
  background:rgba(15,156,141,0.16);
  color:#fff;
  font-weight:600;
  position:relative;
}
.nav-group-btn.active span i{ color:var(--teal); }
.nav-group-btn.active::before{
  content:'';
  position:absolute;
  left:-14px; top:7px; bottom:7px;
  width:3px;
  background:var(--teal);
}

.nav-submenu{
  max-height:0;
  overflow:hidden;
  padding:0 6px 0 34px;
  transition:max-height .28s ease, padding .28s ease;
  border-left:1px solid var(--ink-line);
  margin-left:22px;
}
.nav-group.open .nav-submenu{
  max-height:600px;
  padding:6px 6px 8px 12px;
}

.nav-submenu a{
  display:block;
  padding:8px 12px;
  font-size:13px;
  color:#8894ac;
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.nav-submenu a:hover{ color:#fff; background:rgba(255,255,255,0.05); }
.nav-submenu a.accent-violet{ color:#b9adf9; font-weight:600; }
.nav-submenu a.accent-violet:hover{ color:#d6cffc; }
.nav-submenu a.accent-blue{ color:#8fb9f9; font-weight:600; }
.nav-submenu a.accent-blue:hover{ color:#b4d3ff; }

/* user footer */
.sidebar-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--ink-line);
  background:rgba(0,0,0,0.15);
  flex-shrink:0;
}
.sidebar-user .avatar{
  width:38px; height:38px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:13px;
  flex-shrink:0;
}
.sidebar-user .info p{ margin:0; }
.sidebar-user .name{ font-size:13.5px; font-weight:600; color:#fff; }
.sidebar-user .role{ font-size:11.5px; color:#6b7690; }
.sidebar-user .logout{
  margin-left:auto;
  color:#697690;
  font-size:15px;
  padding:6px;
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.sidebar-user .logout:hover{ color:var(--rose); background:rgba(242,87,107,0.1); }

/*MAIN AREA*/
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  height:100vh;
}

/* Header */
.topbar{
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  padding:16px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(6px);
}

.search-wrap{
  position:relative;
  width:100%;
  max-width:420px;
}
.search-wrap i.icon-search{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:13px;
  pointer-events:none;
}
.search-wrap input{
  width:100%;
  padding:11px 16px 11px 38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#f8fafc;
  font-size:13.5px;
  color:var(--text-heading);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.search-wrap input::placeholder{ color:var(--text-muted); }
.search-wrap input:focus{
  outline:none;
  border-color:var(--teal);
  background:#fff;
  box-shadow:0 0 0 4px var(--teal-glow);
}

.search-results{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0; right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  max-height:380px;
  overflow-y:auto;
  z-index:50;
}
.search-results.show{ display:block; }
.search-results .result-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.search-results .result-item:last-child{ border-bottom:none; }

.topbar-right{
  display:flex;
  align-items:center;
  gap:22px;
}

.badge-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:999px;
  background:#e6faf6;
  color:var(--teal-dark);
  font-size:12px;
  font-weight:700;
}
.badge-live .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 var(--teal-glow);
  animation:pulse-dot 1.8s infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(31,199,182,0.5); }
  70%{ box-shadow:0 0 0 8px rgba(31,199,182,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,199,182,0); }
}

.icon-btn{
  position:relative;
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-body);
  font-size:15px;
  transition:background .15s ease, border-color .15s ease;
}
.icon-btn:hover{ background:#f8fafc; border-color:#d7dceb; }
.icon-btn .ping{
  position:absolute;
  top:7px; right:8px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--rose);
  border:2px solid #fff;
}

.branch-info{ text-align:right; }
.branch-info .label{ margin:0; font-size:11px; color:var(--text-muted); }
.branch-info .value{ margin:0; font-size:13.5px; font-weight:700; color:var(--text-heading); }

/* DASHBOARD CONTENT*/
.content{
  padding:28px;
  flex:1;
}

.page-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:22px;
  flex-wrap:wrap;
  gap:14px;
}
.page-heading h1{
  font-family:'Manrope', sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 4px;
}
.page-heading p{ margin:0; font-size:13.5px; color:var(--text-muted); }

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:11px;
  border:none;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#04231f;
  font-weight:700;
  font-size:13.5px;
  box-shadow:0 10px 22px -8px var(--teal-glow);
}

/* stat cards */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-bottom:24px;
}
.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.stat-card .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.stat-icon{
  width:35px; height:35px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  color:#fff;
}
.stat-icon.teal{ background:linear-gradient(135deg, var(--teal), var(--teal-dark)); }
.stat-icon.violet{ background:linear-gradient(135deg, #9b8cf7, var(--violet)); }
.stat-icon.amber{ background:linear-gradient(135deg, #fbbf4d, var(--amber)); }
.stat-icon.rose{ background:linear-gradient(135deg, #f77e8d, var(--rose)); }

.stat-trend{ font-size:12px; font-weight:700; }
.stat-trend.up{ color:var(--teal-dark); }
.stat-trend.down{ color:var(--rose); }

.stat-card .value{
  font-family:'Manrope', sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 2px;
}
.stat-card .label{ margin:0; font-size:12.5px; color:var(--text-muted); }

/* two column panels */
.panel-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:18px;
}

.panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-sm);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.panel-head h3{
  font-family:'Manrope', sans-serif;
  font-size:15.5px;
  font-weight:700;
  color:var(--text-heading);
  margin:0;
}
.panel-head a{ font-size:12.5px; font-weight:600; color:var(--teal-dark); }

table.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.data-table th{
  text-align:left;
  padding:10px 12px;
  color:var(--text-muted);
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:12px;
  border-bottom:1px solid #f0f2f7;
  color:var(--text-body);
}
.data-table tr:last-child td{ border-bottom:none; }

.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.pill.green{ background:#e6faf6; color:var(--teal-dark); }
.pill.amber{ background:#fef3e0; color:#b9790f; }
.pill.rose{ background:#fde8ea; color:var(--rose); }

.activity-item{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #f0f2f7;
}
.activity-item:last-child{ border-bottom:none; }
.activity-dot{
  width:8px; height:8px;
  border-radius:50%;
  margin-top:6px;
  flex-shrink:0;
}
.activity-item p{ margin:0; font-size:13px; color:var(--text-body); }
.activity-item span{ font-size:11.5px; color:var(--text-muted); }

/* view panels */
.view-panel{ display:none; }
.view-panel.active{ display:block; }

/* hamburger button for responsive Start*/
.hamburger-btn{
  display:none;
  width:36px; height:36px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  align-items:center;
  justify-content:center;
  font-size:15px;
  flex-shrink:0;
}
.hamburger-btn:hover{ background:var(--bg-subtle); }

.sidebar-close-btn{
  display:none;
  width:30px; height:30px;
  border-radius:var(--radius-sm);
  border:1px solid var(--ink-line);
  background:transparent;
  color:#9aa5bd;
  align-items:center;
  justify-content:center;
  font-size:14px;
  margin-left:auto;
}
.sidebar-close-btn:hover{ background:rgba(255,255,255,0.08); color:#fff; }
/* hamburger button for responsive End*/

/* RESPONSIVE */
@media (max-width:1100px){
  .stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .panel-grid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .sidebar{
    display:flex !important;
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:272px;
    z-index:99999;
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .sidebar.mobile-open{
    transform:translateX(0) !important;
  }
  .hamburger-btn{ display:flex; }
  .sidebar-close-btn{ display:flex; }
}

.sidebar-mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:99998;
}
.sidebar-mobile-overlay.show{ display:block; }

@media (max-width:640px){
  .stat-grid{ grid-template-columns:1fr; }
  .branch-info{ display:none; }
  .topbar{ padding:14px 16px; }
  .content{ padding:18px; }
}

html,body{
  height:100%;
}

body{
  margin:0;
  font-family:'Inter', sans-serif;
  background:var(--bg-app);
  color:var(--text-body);
  display:flex;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--teal-glow); }

/* Scrollbars */
.scroll-thin::-webkit-scrollbar{ width:5px; }
.scroll-thin::-webkit-scrollbar-track{ background:transparent; }
.scroll-thin::-webkit-scrollbar-thumb{ background:var(--ink-700); border-radius:4px; }

/* =========================================================
   NOTIFICATIONS — bell badge + right slide-in panel
   ========================================================= */
.notif-count-badge{
  position:absolute;
  top:-5px; right:-5px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--rose);
  color:#fff;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--bg-card);
}

.notif-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,15,30,0.45);
  z-index:70;
}
.notif-overlay.show{ display:block; }

.notif-panel{
  position:fixed;
  top:0; right:0;
  bottom:0;
  width:380px;
  max-width:90vw;
  background:var(--bg-card);
  border-left:1px solid var(--border-strong);
  z-index:71;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .25s ease;
}
.notif-panel.show{ transform:translateX(0); }

.notif-panel-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:var(--bg-subtle);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.notif-panel-header h3{
  font-family:'Manrope', sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--text-heading);
  margin:0;
}
.notif-panel-header-right{ display:flex; align-items:center; gap:14px; }
.notif-mark-all{
  font-size:11.5px;
  font-weight:700;
  color:var(--teal-dark);
}
.notif-mark-all:hover{ color:var(--teal); }
.notif-close{
  width:26px; height:26px;
  border-radius:var(--radius-sm);
  border:none;
  background:transparent;
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  transition:background .15s ease, color .15s ease;
}
.notif-close:hover{ background:var(--border); color:var(--text-heading); }

.notif-list{
  flex:1;
  overflow-y:auto;
}

.notif-item{
  position:relative;
  display:flex;
  gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--bg-subtle);
  cursor:pointer;
  transition:background .15s ease;
}
.notif-item:hover{ background:var(--bg-subtle); }
.notif-item.unread{ background:var(--teal-tint); }
.notif-item.unread::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--teal);
}
.notif-item.unread:hover{ background:#d9f2ee; }

.notif-item-icon{
  width:36px; height:36px;
  border-radius:var(--radius-md);
  background:var(--blue-tint);
  color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  flex-shrink:0;
}

.notif-item-body{ flex:1; min-width:0; }
.notif-item-body .title{
  font-size:12.5px;
  font-weight:700;
  color:var(--text-heading);
  margin:0 0 3px;
}
.notif-item-body .desc{
  font-size:12px;
  color:var(--text-body);
  margin:0 0 5px;
  line-height:1.4;
}
.notif-item-body .time{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--text-muted);
}
.notif-item.unread .time{ color:var(--teal-dark); }

.notif-unread-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
  margin-top:5px;
}

.notif-empty{
  padding:50px 20px;
  text-align:center;
  color:var(--text-muted);
  font-size:12.5px;
}
/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar{
  width:272px;
  min-width:272px;
  height:100vh;
  background:linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  color:#cbd3e6;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--ink-line);
}

.sidebar-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:22px 22px;
  border-bottom:1px solid var(--ink-line);
  flex-shrink:0;
}

.brand-mark{
  width:36px; height:36px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#04231f;
  font-size:16px;
  box-shadow:0 6px 16px -4px var(--teal-glow);
}

.brand span{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:0.02em;
  color:#fff;
}

.nav{
  flex:1;
  overflow-y:auto;
  padding:16px 14px 24px;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  margin-bottom:4px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  color:#94a0b8;
  transition:background .18s ease, color .18s ease;
  position:relative;
}

.nav-link i{ width:18px; text-align:center; font-size:14px; }

.nav-link:hover{
  background:rgba(255,255,255,0.05);
  color:#fff;
}

.nav-link.active{
  background:linear-gradient(90deg, var(--teal) 0%, var(--teal-dark) 100%);
  color:#fff;
  font-weight:700;
  box-shadow:0 8px 18px -6px var(--teal-glow);
}
.nav-link.active i{ color:#fff; }

/* dropdown group */
.nav-group{ margin-bottom:4px; }

.nav-group-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 14px;
  border:none;
  background:transparent;
  color:#94a0b8;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  transition:background .18s ease, color .18s ease;
}
.nav-group-btn span{ display:flex; align-items:center; gap:12px; }
.nav-group-btn i.chev{ font-size:11px; transition:transform .2s ease; }
.nav-group-btn:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.nav-group.open .nav-group-btn{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-group.open .nav-group-btn i.chev{ transform:rotate(180deg); color:var(--teal); }

.nav-submenu{
  max-height:0;
  overflow:hidden;
  padding:0 6px 0 34px;
  transition:max-height .28s ease, padding .28s ease;
  border-left:1px solid var(--ink-line);
  margin-left:22px;
}
.nav-group.open .nav-submenu{
  max-height:600px;
  padding:6px 6px 8px 12px;
}

.nav-submenu a{
  display:block;
  padding:8px 12px;
  font-size:13px;
  color:#8894ac;
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.nav-submenu a:hover{ color:#fff; background:rgba(255,255,255,0.05); }
.nav-submenu a.accent-violet{ color:#b9adf9; font-weight:600; }
.nav-submenu a.accent-violet:hover{ color:#d6cffc; }
.nav-submenu a.accent-blue{ color:#8fb9f9; font-weight:600; }
.nav-submenu a.accent-blue:hover{ color:#b4d3ff; }

/* user footer */
.sidebar-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--ink-line);
  background:rgba(0,0,0,0.15);
  flex-shrink:0;
}
.sidebar-user .avatar{
  width:38px; height:38px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:13px;
  flex-shrink:0;
}
.sidebar-user .info p{ margin:0; }
.sidebar-user .name{ font-size:13.5px; font-weight:600; color:#fff; }
.sidebar-user .role{ font-size:11.5px; color:#6b7690; }
.sidebar-user .logout{
  margin-left:auto;
  color:#697690;
  font-size:15px;
  padding:6px;
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.sidebar-user .logout:hover{ color:var(--rose); background:rgba(242,87,107,0.1); }

/* =========================================================
   MAIN AREA
   ========================================================= */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  height:100vh;
}

/* Header */
.topbar{
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  padding:16px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(6px);
}

.search-wrap{
  position:relative;
  width:100%;
  max-width:420px;
}
.search-wrap i.icon-search{
  position:absolute;
  left:14px; top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  font-size:13px;
  pointer-events:none;
}
.search-wrap input{
  width:100%;
  padding:11px 16px 11px 38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#f8fafc;
  font-size:13.5px;
  color:var(--text-heading);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.search-wrap input::placeholder{ color:var(--text-muted); }
.search-wrap input:focus{
  outline:none;
  border-color:var(--teal);
  background:#fff;
  box-shadow:0 0 0 4px var(--teal-glow);
}

.search-results{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0; right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  max-height:380px;
  overflow-y:auto;
  z-index:50;
}
.search-results.show{ display:block; }
.search-results .result-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.search-results .result-item:last-child{ border-bottom:none; }

.topbar-right{
  display:flex;
  align-items:center;
  gap:22px;
}

.badge-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:999px;
  background:#e6faf6;
  color:var(--teal-dark);
  font-size:12px;
  font-weight:700;
}
.badge-live .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 var(--teal-glow);
  animation:pulse-dot 1.8s infinite;
}
@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(31,199,182,0.5); }
  70%{ box-shadow:0 0 0 8px rgba(31,199,182,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,199,182,0); }
}

.icon-btn{
  position:relative;
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-body);
  font-size:15px;
  transition:background .15s ease, border-color .15s ease;
}
.icon-btn:hover{ background:#f8fafc; border-color:#d7dceb; }
.icon-btn .ping{
  position:absolute;
  top:7px; right:8px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--rose);
  border:2px solid #fff;
}

.branch-info{ text-align:right; }
.branch-info .label{ margin:0; font-size:11px; color:var(--text-muted); }
.branch-info .value{ margin:0; font-size:13.5px; font-weight:700; color:var(--text-heading); }

/* =========================================================
   DASHBOARD CONTENT
   ========================================================= */
.content{
  padding:28px;
  flex:1;
}

.page-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:22px;
  flex-wrap:wrap;
  gap:14px;
}
.page-heading h1{
  font-family:'Manrope', sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 4px;
}
.page-heading p{ margin:0; font-size:13.5px; color:var(--text-muted); }

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:11px;
  border:none;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#04231f;
  font-weight:700;
  font-size:13.5px;
  box-shadow:0 10px 22px -8px var(--teal-glow);
}

/* stat cards */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-bottom:24px;
}
.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.stat-card .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.stat-icon{
  width:42px; height:42px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  color:#fff;
}
.stat-icon.teal{ background:linear-gradient(135deg, var(--teal), var(--teal-dark)); }
.stat-icon.violet{ background:linear-gradient(135deg, #9b8cf7, var(--violet)); }
.stat-icon.amber{ background:linear-gradient(135deg, #fbbf4d, var(--amber)); }
.stat-icon.rose{ background:linear-gradient(135deg, #f77e8d, var(--rose)); }

.stat-trend{ font-size:12px; font-weight:700; }
.stat-trend.up{ color:var(--teal-dark); }
.stat-trend.down{ color:var(--rose); }

.stat-card .value{
  font-family:'Manrope', sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 2px;
}
.stat-card .label{ margin:0; font-size:12.5px; color:var(--text-muted); }

/* two column panels */
.panel-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:18px;
}

.panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-sm);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}
.panel-head h3{
  font-family:'Manrope', sans-serif;
  font-size:15.5px;
  font-weight:700;
  color:var(--text-heading);
  margin:0;
}
.panel-head a{ font-size:12.5px; font-weight:600; color:var(--teal-dark); }

table.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.data-table th{
  text-align:left;
  padding:10px 12px;
  color:var(--text-muted);
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:12px;
  border-bottom:1px solid #f0f2f7;
  color:var(--text-body);
}
.data-table tr:last-child td{ border-bottom:none; }

.pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}
.pill.green{ background:#e6faf6; color:var(--teal-dark); }
.pill.amber{ background:#fef3e0; color:#b9790f; }
.pill.rose{ background:#fde8ea; color:var(--rose); }

.activity-item{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid #f0f2f7;
}
.activity-item:last-child{ border-bottom:none; }
.activity-dot{
  width:8px; height:8px;
  border-radius:50%;
  margin-top:6px;
  flex-shrink:0;
}
.activity-item p{ margin:0; font-size:13px; color:var(--text-body); }
.activity-item span{ font-size:11.5px; color:var(--text-muted); }

/* view panels */
.view-panel{ display:none; }
.view-panel.active{ display:block; }


/* =========================================================
   NEW DASHBOARD (v2) — dedicated color palette
   ========================================================= */
:root{
  --db-orange:#f5a623;
  --db-orange-dark:#d98d10;
  --db-navy:#0f1b3d;
  --db-teal:#159e86;
  --db-blue:#2f6fed;
  --db-green:#1fa971;
  --db-red:#e0483e;
}

.db-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.db-toolbar h1{
  font-family:'Manrope', sans-serif;
  font-size:24px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 4px;
}
.db-toolbar p{ margin:0; font-size:13px; color:var(--text-muted); }
.db-toolbar p strong{ color:var(--db-orange-dark); font-weight:700; }
.db-toolbar-right{ display:flex; align-items:center; gap:10px; }
.db-date-range{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:#fff;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-body);
}
.db-date-range i{ color:var(--text-muted); }

/* Alert banner */
.db-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fdece9;
  border:1px solid #f6c9c2;
  border-radius:var(--radius-md);
  padding:12px 16px;
  margin-bottom:18px;
  font-size:12.5px;
  color:#8a3a2f;
}
.db-alert-left{ display:flex; align-items:center; gap:10px; }
.db-alert-left i{ color:var(--db-red); font-size:14px; }
.db-alert strong{ color:var(--db-red); }
.db-alert a{ color:var(--db-red); font-weight:700; text-decoration:underline; }
.db-alert-close{ background:none; border:none; color:#8a3a2f; font-size:14px; opacity:0.6; }
.db-alert-close:hover{ opacity:1; }

/* Top colored stat cards */
.db-color-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:14px;
}
.db-color-card{
  border-radius:var(--radius-lg);
  padding:18px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
}
.db-color-card.orange{ background:var(--db-orange); }
.db-color-card.navy{ background:#D41D5E; }
.db-color-card.teal{ background:var(--db-teal); }
.db-color-card.blue{ background:var(--db-blue); }
.db-color-card .icon-box{
  width:44px; height:44px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  flex-shrink:0;
}
.db-color-card .label{ font-size:12px; opacity:0.9; margin:0 0 3px; }
.db-color-card .amt{ font-family:'Manrope', sans-serif; font-size:19px; font-weight:800; margin:0; }
.db-color-card .trend-chip{
  margin-left:auto;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  padding:3px 8px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.22);
  white-space:nowrap;
  align-self:flex-start;
}
.db-color-card .trend-chip.down{ background:#fde2e0; color:var(--db-red); }
.db-color-card .trend-chip.up-white{ background:#e3f9ee; color:var(--db-green); }

/* White sub-stat cards */
.db-sub-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:16px;
}
.db-sub-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
}
.db-sub-card-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.db-sub-card .amt{ font-family:'Manrope', sans-serif; font-size:19px; font-weight:800; color:var(--text-heading); margin:0; }
.db-sub-card .label{ font-size:12px; color:var(--text-muted); margin:2px 0 10px; }
.db-sub-card .sub-icon{
  width:36px; height:36px;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  flex-shrink:0;
}
.db-sub-card-bottom{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; }
.db-sub-card-bottom .change{ font-weight:700; }
.db-sub-card-bottom .change.up{ color:var(--db-green); }
.db-sub-card-bottom .change.down{ color:var(--db-red); }
.db-sub-card-bottom a{ font-weight:700; color:var(--text-body); }
.db-sub-card-bottom a:hover{ color:var(--blue); }

/* Generic dashboard card wrapper with header */
.db-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
}
.db-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:10px;
}
.db-card-head-left{ display:flex; align-items:center; gap:10px; }
.db-card-icon{
  width:34px; height:34px;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  flex-shrink:0;
}
.db-card-head h3{ font-family:'Manrope', sans-serif; font-size:14.5px; font-weight:800; color:var(--text-heading); margin:0; }
.db-card-head a{ font-size:11.5px; font-weight:700; color:var(--text-body); }
.db-card-head a:hover{ color:var(--blue); text-decoration:underline; }

.db-mini-filter{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:600;
  color:var(--text-body);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:5px 10px;
  cursor:pointer;
  background:#fff;
}
.db-mini-filter:hover{ background:var(--bg-subtle); }

/* Sales & Purchase chart */
.db-chart-filters{ display:flex; gap:6px; flex-wrap:wrap; }
.db-chart-filter-btn{
  padding:6px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  font-size:11.5px;
  font-weight:700;
}
.db-chart-filter-btn.active{ background:var(--db-orange); border-color:var(--db-orange-dark); color:#fff; }
.db-chart-filter-btn:hover:not(.active){ background:var(--bg-subtle); }

.db-legend-row{ display:flex; gap:10px; margin-bottom:16px; }
.db-legend-chip{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:9px 16px;
}
.db-legend-chip .dot-lbl{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); margin-bottom:3px; }
.db-legend-chip .dot-lbl .dot{ width:7px; height:7px; border-radius:50%; }
.db-legend-chip .val{ font-family:'Manrope', sans-serif; font-size:17px; font-weight:800; color:var(--text-heading); }

.db-bar-chart{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  height:200px;
  padding-top:10px;
  border-top:1px dashed var(--border);
}
.db-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.db-bar-stack{
  width:60%;
  max-width:34px;
  border-radius:6px 6px 0 0;
  overflow:hidden;
  display:flex;
  flex-direction:column-reverse;
  background:#fde9c8;
}
.db-bar-fill-dark{ background:var(--db-orange); width:100%; }
.db-bar-label{ font-size:10px; color:var(--text-muted); margin-top:8px; }

/* Overall information mini stats */
.db-overall-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.db-overall-item{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px 10px;
  text-align:center;
}
.db-overall-item i{ font-size:18px; margin-bottom:8px; display:block; }
.db-overall-item .lbl{ font-size:11.5px; color:var(--text-muted); margin-bottom:4px; }
.db-overall-item .num{ font-family:'Manrope', sans-serif; font-size:18px; font-weight:800; color:var(--text-heading); }

/* Three-column list rows (Top Selling / Low Stock / Recent Orders) */
.db-three-col{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.db-list-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border-bottom:1px solid var(--bg-subtle);
}
.db-list-item:last-child{ border-bottom:none; }
.db-list-thumb{
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
  font-size:13px;
  flex-shrink:0;
  overflow:hidden;
}
.db-list-info{ flex:1; min-width:0; }
.db-list-info .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-list-info .meta{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.db-list-right{ text-align:right; flex-shrink:0; }
.db-list-right .val{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text-heading); }
.db-list-right .chip{
  display:inline-block;
  margin-top:3px;
  font-size:10px;
  font-weight:700;
  padding:2px 7px;
  border-radius:var(--radius-sm);
}
.db-list-right .chip.up{ background:#e3f9ee; color:var(--db-green); }
.db-list-right .chip.down{ background:#fde2e0; color:var(--db-red); }
.db-list-right .date{ font-size:10.5px; color:var(--text-muted); }

/* Sales Statics floating bar chart */
.db-float-chart{
  position:relative;
  height:220px;
  display:flex;
  align-items:center;
  padding:0 4px;
}
.db-float-chart .zero-line{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border); }
.db-float-cols{ position:relative; z-index:1; display:flex; width:100%; height:100%; align-items:center; justify-content:space-between; }
.db-float-col{ display:flex; flex-direction:column; align-items:center; width:100%; height:100%; justify-content:center; position:relative; }
.db-float-bar{ width:6px; border-radius:4px; position:absolute; left:50%; transform:translateX(-50%); }
.db-float-bar.rev{ background:var(--db-green); bottom:50%; }
.db-float-bar.exp{ background:var(--db-red); top:50%; }
.db-float-month{ position:absolute; bottom:0px; font-size:10px; color:var(--text-muted); }

.db-mini-stat-pair{ display:flex; gap:10px; margin-bottom:16px; }
.db-mini-stat-box{ flex:1; background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; }
.db-mini-stat-box .val{ font-family:'Manrope', sans-serif; font-size:16px; font-weight:800; }
.db-mini-stat-box .val.rev{ color:var(--db-green); }
.db-mini-stat-box .val.exp{ color:var(--db-orange); }
.db-mini-stat-box .lbl{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.db-mini-stat-box .chip{ float:right; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:999px; }
.db-mini-stat-box .chip.up{ background:#e3f9ee; color:var(--db-green); }
.db-mini-stat-box .chip.down{ background:#fde2e0; color:var(--db-red); }

/* Recent Transactions tabbed table */
.db-txn-tabs{ display:flex; gap:18px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.db-txn-tab{
  padding:8px 2px;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-muted);
  border-bottom:2px solid transparent;
  background:none;
  border-left:none; border-right:none; border-top:none;
}
.db-txn-tab.active{ color:var(--db-orange-dark); border-bottom-color:var(--db-orange); }
.db-txn-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--bg-subtle); }
.db-txn-row:last-child{ border-bottom:none; }
.db-txn-avatar{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--bg-subtle);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--text-muted);
  flex-shrink:0;
}
.db-txn-info{ flex:1; min-width:0; }
.db-txn-info .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.db-txn-info .ref{ font-size:10.5px; color:var(--db-orange-dark); font-family:var(--mono); }
.db-txn-date{ font-size:11px; color:var(--text-muted); width:80px; }
.db-txn-amt{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--text-heading); width:70px; text-align:right; }
.db-status-pill{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; width:70px; text-align:center; }
.db-status-pill.paid{ background:#e3f9ee; color:var(--db-green); }
.db-status-pill.overdue{ background:#fef3d9; color:#b9790f; }
.db-status-pill.unpaid{ background:#fde2e0; color:var(--db-red); }

/* Top Customers list */
.db-cust-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--bg-subtle); }
.db-cust-row:last-child{ border-bottom:none; }
.db-cust-avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--bg-subtle);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--text-muted);
  flex-shrink:0;
}
.db-cust-info{ flex:1; min-width:0; }
.db-cust-info .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.db-cust-info .meta{ font-size:10.5px; color:var(--text-muted); }
.db-cust-amt{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--text-heading); }

/* Donut chart (pure CSS conic-gradient) */
.db-donut{
  width:150px; height:150px;
  border-radius:50%;
  margin:0 auto 16px;
  background:conic-gradient(
    var(--db-orange) 0% 55%,
    var(--db-navy) 55% 74%,
    #e0653a 74% 100%
  );
  position:relative;
}
.db-donut::after{
  content:'';
  position:absolute;
  inset:24px;
  border-radius:50%;
  background:#fff;
}
.db-cat-legend{ display:flex; flex-direction:column; gap:10px; }
.db-cat-legend-item{ display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.db-cat-legend-item .dot-lbl{ display:flex; align-items:center; gap:7px; color:var(--text-body); }
.db-cat-legend-item .dot{ width:8px; height:8px; border-radius:2px; }
.db-cat-legend-item .num{ font-family:var(--mono); font-weight:700; color:var(--text-heading); }
.db-cat-stats-box{ border-top:1px solid var(--border); margin-top:14px; padding-top:12px; }
.db-cat-stats-row{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-body); padding:3px 0; }
.db-cat-stats-row .num{ font-family:var(--mono); font-weight:700; color:var(--text-heading); }

/* Heatmap grid */
.db-heatmap{
  display:grid;
  grid-template-columns:auto repeat(7, 1fr);
  gap:5px;
  align-items:center;
}
.db-heatmap .day-lbl{ font-size:10px; color:var(--text-muted); text-align:right; padding-right:4px; }
.db-heatmap .hm-cell{ width:100%; aspect-ratio:1; border-radius:4px; background:#fde9c8 !important; transition:background .15s ease; }
.db-heatmap .hm-cell.filled{ background:var(--db-orange) !important; }
.db-heatmap .col-lbl{ font-size:10px; color:var(--text-muted); text-align:center; }

.db-mini-filter-menu button.active{ background:var(--amber-tint); color:var(--db-orange-dark); font-weight:800; }

@media (max-width:1200px){
  .db-color-grid, .db-sub-grid{ grid-template-columns:repeat(2, 1fr); }
  .db-three-col{ grid-template-columns:1fr; }
}

/* =========================================================
   DASHBOARD v2: functional dropdowns + new layout
   ========================================================= */
.db-two-col-recent{ display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:16px; }
.db-two-col-plain{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }

@media (max-width:900px){
  .db-two-col-recent{ grid-template-columns:1fr !important; }
}

/* Top date-range dropdown */
.db-date-dropdown-wrap{ position:relative; }
.db-date-range{ cursor:pointer; }
.db-date-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:200px;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  box-shadow:0 16px 32px -12px rgba(15,23,42,0.22);
  z-index:70;
  padding:6px;
}
.db-date-dropdown-menu.show{ display:block; }
.db-date-option{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 10px;
  border:none;
  background:transparent;
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:600;
  color:var(--text-body);
}
.db-date-option:hover{ background:var(--bg-subtle); }
.db-date-option.active{ background:var(--amber-tint); color:var(--db-orange-dark); }

.db-custom-range-box{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  box-shadow:0 16px 32px -12px rgba(15,23,42,0.22);
  z-index:70;
  padding:14px;
  min-width:280px;
}
.db-custom-range-box.show{ display:block; }
.db-custom-range-box label{ font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; display:block; margin-bottom:5px; }
.db-custom-range-box input{
  width:100%;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:12px;
  font-family:var(--mono);
  margin-bottom:10px;
}

/* Small mini-filter dropdown (Today / Weekly / Monthly) */
.db-mini-filter-wrap{ position:relative; }
.db-mini-filter-menu{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  min-width:110px;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  box-shadow:0 12px 24px -10px rgba(15,23,42,0.2);
  z-index:60;
  padding:4px;
}
.db-mini-filter-menu.show{ display:block; }
.db-mini-filter-menu button{
  display:block;
  width:100%;
  text-align:left;
  padding:6px 9px;
  border:none;
  background:transparent;
  border-radius:var(--radius-sm);
  font-size:11.5px;
  font-weight:600;
  color:var(--text-body);
}
.db-mini-filter-menu button:hover{ background:var(--bg-subtle); }

/* =========================================================
   SALES DASHBOARD
   ========================================================= */
.sd-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:16px;
}
.sd-header h1{
  font-size:15px;
  font-weight:700;
  color:var(--text-heading);
  margin:0;
}
.sd-header h1 .wave{ margin-right:6px; }
.sd-header-right{ display:flex; align-items:center; gap:8px; }
.sd-icon-btn{
  width:36px; height:36px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  flex-shrink:0;
}
.sd-icon-btn:hover{ background:var(--bg-subtle); }

.sd-top-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:14px;
  margin-bottom:16px;
}
.sd-earning-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sd-earning-card .lbl{ font-size:12px; font-weight:700; color:var(--db-orange-dark); margin-bottom:6px; }
.sd-earning-card .amt{ font-family:'Manrope', sans-serif; font-size:24px; font-weight:800; color:var(--text-heading); margin:0 0 6px; }
.sd-earning-card .chg{ font-size:11.5px; color:var(--db-green); font-weight:700; }
.sd-earning-card .emoji{ font-size:40px; }

.sd-stat-card{
  border-radius:var(--radius-lg);
  padding:18px;
  color:#fff;
  position:relative;
}
.sd-stat-card.orange{ background:var(--db-orange); }
.sd-stat-card.navy{ background:var(--db-navy); }
.sd-stat-card .refresh-mini{
  position:absolute;
  top:14px; right:14px;
  color:rgba(255,255,255,0.8);
  font-size:13px;
  cursor:pointer;
}
.sd-stat-card .refresh-mini:hover{ color:#fff; }
.sd-stat-card .icon-big{ font-size:22px; opacity:0.9; margin-bottom:22px; }
.sd-stat-card .num{ font-family:'Manrope', sans-serif; font-size:22px; font-weight:800; margin:0 0 2px; }
.sd-stat-card .lbl{ font-size:11.5px; opacity:0.9; }

.sd-lower-grid{ display:grid; grid-template-columns:1fr 1.7fr; gap:14px; margin-bottom:16px; }

.sd-list-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border-bottom:1px solid var(--bg-subtle);
}
.sd-list-item:last-child{ border-bottom:none; }
.sd-list-item .thumb{
  width:40px; height:40px;
  border-radius:var(--radius-sm);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
  font-size:14px;
  flex-shrink:0;
}
.sd-list-item .info{ flex:1; min-width:0; }
.sd-list-item .info .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.sd-list-item .info .sub{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.sd-list-item .right{ text-align:right; flex-shrink:0; }
.sd-list-item .right .lbl{ font-size:10px; color:var(--text-muted); }
.sd-list-item .right .val{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--text-heading); }

.sd-txn-table td, .sd-txn-table th{ vertical-align:middle; }
.sd-order-cell{ display:flex; align-items:center; gap:10px; }
.sd-order-cell .thumb{
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted);
  font-size:13px;
  flex-shrink:0;
}
.sd-order-cell .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.sd-order-cell .time{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.sd-payment-ref{ font-family:var(--mono); font-size:10.5px; color:var(--blue); display:block; margin-top:2px; }
.sd-status-pill{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; }
.sd-status-pill.success{ background:#e3f9ee; color:var(--db-green); }
.sd-status-pill.cancelled{ background:#fde2e0; color:var(--db-red); }
.sd-status-pill.completed{ background:var(--blue-tint); color:var(--blue); }

/* Sales Analytics area chart (pure SVG) */
.sd-chart-card .db-card-head{ margin-bottom:8px; }
.sd-area-chart-wrap{ width:100%; overflow-x:auto; }
.sd-area-chart-wrap svg{ width:100%; height:auto; display:block; }
.sd-area-chart-wrap .grid-line{ stroke:var(--border); stroke-width:1; stroke-dasharray:2,3; }
.sd-area-chart-wrap .axis-label{ font-size:9px; fill:var(--text-muted); font-family:var(--mono); }

@media (max-width:1100px){
  .sd-top-grid{ grid-template-columns:1fr; }
  .sd-lower-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   POS TERMINAL PANEL
   ========================================================= */
.pos-head{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}
.pos-head-icon{
  width:46px; height:46px;
  border-radius:12px;
  background:linear-gradient(135deg, #6d8bfa, var(--blue));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  box-shadow:0 10px 20px -8px var(--blue-glow);
  flex-shrink:0;
}
.pos-head h1{
  font-family:'Manrope', sans-serif;
  font-size:19px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 3px;
}
.pos-head p{ margin:0; font-size:12.5px; color:var(--text-muted); }

.pos-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:20px;
  align-items:start;
}

.pos-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.pos-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:22px;
}
.pos-card-title{
  font-family:'Manrope', sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:var(--text-heading);
  display:flex;
  align-items:center;
  gap:9px;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.pos-card-title i{ color:var(--text-muted); font-size:13px; }

.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.field label.field-label{
  display:block;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-body);
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:6px;
}
.field-add-link{
  font-size:12px;
  font-weight:700;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.field-add-link:hover{ color:var(--blue-dark); }

.select-wrap, .input-wrap{ position:relative; }

.pos-select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  padding:11px 38px 11px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f8fafc;
  font-size:13.5px;
  font-weight:600;
  color:var(--text-heading);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pos-select:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 0 0 4px var(--blue-glow);
}
.select-wrap .caret{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  font-size:11px;
  color:var(--text-muted);
  pointer-events:none;
}

.pos-input{
  width:100%;
  padding:11px 14px 11px 38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f8fafc;
  font-size:13.5px;
  font-weight:600;
  color:var(--text-heading);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pos-input::placeholder{ font-weight:500; color:var(--text-muted); }
.pos-input:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 0 0 4px var(--blue-glow);
}
.input-wrap .prefix-icon{
  position:absolute;
  left:13px; top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:var(--text-muted);
  pointer-events:none;
}

/* radio / checkbox tiles */
.tile-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.tile-option{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f8fafc;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.tile-option:hover{ background:#f0f3f8; }
.tile-option input{ accent-color:var(--blue); width:15px; height:15px; }
.tile-option span{ font-size:12.5px; font-weight:600; color:var(--text-body); }
.tile-option.checked{
  border-color:var(--blue);
  background:#eef2ff;
}
.tile-option.checked span{ color:var(--blue-dark); }

.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:4px;
  cursor:pointer;
}
.check-row input{ width:16px; height:16px; accent-color:var(--blue); }
.check-row span{ font-size:12.5px; font-weight:700; color:var(--text-body); }

/* search grid inside pos */
.pos-search-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}

/* empty state blocks */
.empty-state{
  border:1.5px dashed var(--border);
  border-radius:var(--radius-md);
  padding:34px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fafbfd;
}
.empty-state .empty-icon{
  width:48px; height:48px;
  border-radius:50%;
  background:#eef1f6;
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  margin-bottom:12px;
}
.empty-state .empty-icon.blue{ background:#e7edff; color:var(--blue); }
.empty-state strong{ font-size:13px; font-weight:700; color:var(--text-muted); }
.empty-state h4{ margin:0 0 4px; font-size:14px; font-weight:800; color:var(--text-heading); }
.empty-state p{ margin:0; font-size:12px; color:var(--text-muted); max-width:230px; }

/* cart card */
.cart-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cart-header{
  padding:14px 20px;
  background:#f8fafc;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cart-header .title{ display:flex; align-items:center; gap:9px; }
.cart-header .title strong{ font-size:13.5px; font-weight:700; color:var(--text-heading); }
.cart-header .dot-sep{ width:5px; height:5px; border-radius:50%; background:var(--text-muted); opacity:.5; }
.cart-header .count{ font-size:11.5px; font-weight:700; color:var(--text-muted); }
.cart-header .clear-btn{ font-size:11.5px; font-weight:700; color:var(--text-muted); }
.cart-header .clear-btn:hover{ color:var(--rose); }

.cart-footer{
  padding:16px 20px;
  background:#f8fafc;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cart-footer .total-label{ font-size:13.5px; font-weight:700; color:var(--text-body); }
.cart-footer .total-value{ font-family:'Manrope', sans-serif; font-size:20px; font-weight:800; color:var(--text-heading); }

.btn-block-primary{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg, #6d8bfa, var(--blue));
  color:#fff;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-shadow:0 14px 26px -10px var(--blue-glow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-block-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 30px -10px var(--blue-glow); }


/* --- Partial payment: amount received + due --- */
.due-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--border);
}
.due-row span:first-child{ font-size:12px; font-weight:700; color:var(--text-body); }
.due-value{ font-family:var(--mono); font-size:14px; font-weight:700; color:var(--text-heading); }
.due-value.negative{ color:var(--rose); }

.prefix-text{
  position:absolute;
  left:12px; top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--text-muted);
  pointer-events:none;
}
.pos-input.with-text-prefix{ padding-left:42px; }

/* --- Search items: live table results --- */
.product-table-wrap{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.product-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
}
.product-table thead th{
  text-align:left;
  padding:9px 12px;
  background:var(--bg-subtle);
  color:var(--text-muted);
  font-weight:700;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  border-bottom:1px solid var(--border);
}
.product-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--bg-subtle);
  color:var(--text-body);
  vertical-align:middle;
}
.product-table tbody tr:last-child td{ border-bottom:none; }
.product-table tbody tr:hover{ background:var(--bg-subtle); }
/* 
.product-thumb-sm{
  width:34px; height:34px;
  border-radius:var(--radius-sm);
  background:var(--blue-tint);
  color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
}
*/
.mono-cell{ font-family:var(--mono); font-size:12px; color:var(--text-heading); }

/* =========================================================
   CHARTS: hover tooltip + heatmap cell height
   ========================================================= */
.db-heatmap .hm-cell{
  width:100%;
  aspect-ratio:auto;
  height:30px;;
  border-radius:4px;
  background:#fde9c8 !important;
  cursor:pointer;
  transition:background .15s ease;
}
.db-heatmap .hm-cell.filled{ background:var(--db-orange) !important; }
.db-heatmap .hm-cell:hover{ outline-offset:-1px; }

.chart-tooltip{
  display:none;
  position:fixed;
  z-index:99999;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  box-shadow:0 14px 30px -10px rgba(15,23,42,0.28);
  min-width:150px;
  pointer-events:none;
}
.chart-tooltip.show{ display:block; }
.chart-tooltip .tt-title{
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  padding:7px 12px;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-heading);
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.chart-tooltip .tt-row{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  font-size:11.5px;
  color:var(--text-body);
}
.chart-tooltip .tt-row .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.chart-tooltip .tt-row .val{ font-weight:700; color:var(--text-heading); margin-left:auto; }

.db-bar-col, .db-float-col{ cursor:pointer; }

.sd-donut-svg-wrap{ display:flex; justify-content:center; margin-bottom:16px; }
.sd-donut-svg-wrap svg path{ cursor:pointer; transition:opacity .15s ease; }
.sd-donut-svg-wrap svg path:hover{ opacity:0.8; }

.qty-input{
  width:56px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--text-heading);
  text-align:center;
}
.qty-input:focus{ outline:none; border-color:var(--blue); background:#fff; }

/* --- POS: Add-to-cart button + cart line items --- */
.add-cart-btn{
  width:26px; height:26px;
  border-radius:var(--radius-sm);
  border:1px solid var(--blue-dark);
  background:var(--blue-tint);
  color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  transition:background .15s ease;
}
.add-cart-btn:hover{ background:#dde5fc; }

.cart-line-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  border-bottom:1px solid var(--bg-subtle);
}
.cart-line-item:last-child{ border-bottom:none; }
.cart-line-item .info{ flex:1; min-width:0; }
.cart-line-item .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.cart-line-item .meta{ font-family:var(--mono); font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.cart-line-item .line-total{ font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--text-heading); }
.cart-line-remove{
  width:22px; height:22px;
  border-radius:var(--radius-sm);
  border:none;
  background:var(--rose-tint);
  color:var(--rose);
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
  flex-shrink:0;
}
.cart-line-remove:hover{ background:#f6d3d9; }

/* =========================================================
   POS TERMINAL: EMI purchase panel
   ========================================================= */
.emi-panel{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px;
  margin-top:10px;
}
.emi-rate-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--blue-tint);
  color:var(--blue);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  padding:3px 9px;
  border-radius:var(--radius-sm);
  margin-bottom:12px;
}
.emi-result-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
  margin-top:12px;
}
.emi-result-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--text-body);
  padding:4px 0;
}
.emi-result-row .amt{ font-family:var(--mono); font-weight:700; color:var(--text-heading); }
.emi-result-row.total{
  border-top:1px solid var(--border);
  margin-top:6px;
  padding-top:8px;
  font-size:13px;
  font-weight:700;
  color:var(--text-heading);
}
.emi-result-row.total .amt{ font-size:15px; color:var(--blue); }

/* =========================================================
   POS TERMINAL: split payment lines
   ========================================================= */
.pay-line-add-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px;
}
.pay-line-add-row .full-row{ grid-column:1 / -1; }
.pay-line-add-row select, .pay-line-add-row input{
  width:100%;
  padding:12px 9px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:600;
  color:var(--text-heading);
}
.pay-line-add-row select:focus, .pay-line-add-row input:focus{ outline:none; border-color:var(--blue); }
.pay-line-add-row .mini-label{
  display:block;
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:5px;
}

.pay-emi-toggle-row{
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-sm);
  padding:9px 11px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.pay-emi-toggle-row:hover{ border-color:var(--blue); }
.pay-emi-toggle-row input{ width:15px; height:15px; accent-color:var(--blue); flex-shrink:0; }
.pay-emi-toggle-row .icon{ color:var(--blue); font-size:13px; flex-shrink:0; }
.pay-emi-toggle-row span.txt{ font-size:12px; font-weight:700; color:var(--text-body); }
.pay-emi-toggle-row.checked{
  border-style:solid;
  border-color:var(--blue);
  background:var(--blue-tint);
}
.pay-emi-toggle-row.checked span.txt{ color:var(--blue-dark); }

.pay-emi-inline{
  display:none;
  grid-column:1 / -1;
  background:#fff;
  border:1px dashed var(--blue);
  border-radius:var(--radius-sm);
  padding:9px 10px;
}
.pay-emi-inline.show{ display:block; }
.pay-emi-inline .row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pay-emi-inline .row:last-child{ margin-bottom:0; }
.pay-emi-inline label.chk{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--blue); }
.pay-emi-inline select{ max-width:120px; }
.pay-emi-inline .rate-note{ font-family:var(--mono); font-size:10.5px; color:var(--text-muted); }

.pay-lines-list{ margin-top:10px; }
.pay-line-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:8px;
  background:#fff;
}
.pay-line-row:last-child{ margin-bottom:0; }
.pay-line-icon{
  width:32px; height:32px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  flex-shrink:0;
  background:var(--blue-tint); color:var(--blue);
}
.pay-line-info{ flex:1; min-width:0; }
.pay-line-info .method{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.pay-line-info .acct{ font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.pay-line-emi-chip{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  background:var(--violet-tint);
  color:var(--violet);
  padding:2px 7px;
  border-radius:var(--radius-sm);
  margin-left:6px;
}
.pay-line-amt{ font-family:var(--mono); font-weight:700; color:var(--text-heading); font-size:13px; white-space:nowrap; }

.pay-summary-box{ margin-top:12px; }
.pay-summary-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-body); padding:4px 0; }
.pay-summary-row .amt{ font-family:var(--mono); font-weight:700; color:var(--text-heading); }
.pay-summary-row.due .amt{ color:var(--rose); }
.pay-summary-row.due.settled .amt{ color:var(--teal-dark); }


/* =========================================================
   POS TERMINAL: delivery method panel
   ========================================================= */
.delivery-panel{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--border);
}
.delivery-panel.show{ display:block; }

.delivery-method-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.delivery-method-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-subtle);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.delivery-method-card:hover{ border-color:var(--border-strong); }
.delivery-method-card input{ display:none; }
.delivery-method-card .icon{
  width:32px; height:32px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  flex-shrink:0;
  color:#fff;
}
.delivery-method-card .name{ font-size:12px; font-weight:700; color:var(--text-heading); }
.delivery-method-card.checked{ border-color:var(--blue); background:var(--blue-tint); }

.delivery-address-box{
  display:none;
  margin-top:12px;
}
.delivery-address-box.show{ display:block; }

.delivery-pickup-note{
  display:none;
  align-items:center;
  gap:9px;
  background:var(--teal-tint);
  border:1px solid var(--teal-dark);
  border-radius:var(--radius-md);
  padding:10px 12px;
  margin-top:12px;
  font-size:11.5px;
  color:var(--teal-dark);
  font-weight:600;
}
.delivery-pickup-note.show{ display:flex; }

/* =========================================================
   POS TERMINAL: floating toast notifications
   ========================================================= */
.pos-toast-container{
  position:fixed;
  top:20px;
  right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:320px;
}
.pos-toast{
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border:1px solid var(--border-strong);
  border-left:4px solid var(--teal);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  box-shadow:0 16px 34px -12px rgba(15,23,42,0.28);
  animation:pos-toast-in .25s ease;
}
.pos-toast.error{ border-left-color:var(--rose); }
.pos-toast .icon{
  width:18px; height:18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px;
  color:#fff;
  background:var(--teal);
  flex-shrink:0;
}
.pos-toast.error .icon{ background:var(--rose); }
.pos-toast .content{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pos-toast .content h5{ font-size:11.5px; font-weight:700; color:var(--text-heading); margin:0; }
.pos-toast .content p{ font-size:11px; color:var(--text-muted); margin:0; line-height:1.3; }

@keyframes pos-toast-in{
  from{ opacity:0; transform:translateX(30px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes pos-toast-out{
  from{ opacity:1; transform:translateX(0); }
  to{ opacity:0; transform:translateX(30px); }
}

/* =========================================================
   POS TERMINAL: payer account number + customer credit info
   ========================================================= */
.pay-credit-box{
  grid-column:1 / -1;
  background:#fff;
  border:1px solid var(--blue);
  border-radius:var(--radius-md);
  padding:12px;
}
.pay-credit-box .head{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:700;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:9px;
}
.pay-credit-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--text-body);
  padding:4px 0;
}
.pay-credit-row .amt{ font-family:var(--mono); font-weight:700; color:var(--text-heading); }
.pay-credit-row.avail .amt{ color:var(--teal-dark); }
.pay-credit-bar-track{ height:6px; border-radius:999px; background:var(--bg-subtle); overflow:hidden; margin:8px 0 2px; }
.pay-credit-bar-fill{ height:100%; border-radius:999px; background:var(--amber); }
.pay-credit-bar-fill.danger{ background:var(--rose); }
.pay-credit-empty{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--rose);
  font-weight:600;
}

/* =========================================================
   POS ORDERS PANEL
   ========================================================= */
.pos-ord-icon-btn{
  width:36px; height:36px;
  border-radius:var(--radius-md);
  border:none;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
}
.pos-ord-icon-btn.pdf{ background:var(--rose); }
.pos-ord-icon-btn.pdf:hover{ background:#b3243b; }
.pos-ord-icon-btn.xls{ background:var(--teal); }
.pos-ord-icon-btn.xls:hover{ background:var(--teal-dark); }

.pos-ord-cust-cell{ display:flex; align-items:center; gap:9px; }

.pos-ord-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:12px;
  color:var(--text-muted);
}
.pos-ord-footer .row-per-page{ display:flex; align-items:center; gap:7px; }
.pos-ord-footer select{
  padding:5px 22px 5px 9px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:600;
  color:var(--text-body);
}

/* =========================================================
   MODAL — ADD NEW CUSTOMER
   ========================================================= */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,15,30,0.55);
  z-index:60;
  align-items:flex-start;
  justify-content:center;
  padding:48px 16px;
  overflow-y:auto;
}
.modal-overlay.show{ display:flex; }

.modal-box{
  width:100%;
  max-width:640px;
  background:var(--bg-card);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.modal-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:var(--bg-subtle);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.modal-header-left{ display:flex; align-items:flex-start; gap:11px; }
.modal-header-icon{
  width:32px; height:32px;
  border-radius:var(--radius-md);
  background:var(--blue);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  flex-shrink:0;
  margin-top:1px;
}
.modal-header h4{
  font-family:'Manrope', sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:var(--text-heading);
  margin:0 0 2px;
}
.modal-header p{ margin:0; font-size:11.5px; color:var(--text-muted); }
.modal-close{
  width:26px; height:26px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  flex-shrink:0;
  transition:background .15s ease, color .15s ease;
}
.modal-close:hover{ background:var(--border); color:var(--text-heading); }

.modal-body{
  padding:20px;
  max-height:70vh;
  overflow-y:auto;
}

.form-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.form-field{ margin-bottom:14px; }
.form-field:last-child{ margin-bottom:0; }
.form-field label{
  display:block;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:6px;
}
.form-field label .req{ color:var(--rose); }

.form-input{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:13px;
  font-weight:600;
  color:var(--text-heading);
  transition:border-color .15s ease, background .15s ease;
}
.form-input::placeholder{ font-weight:500; color:var(--text-muted); }
.form-input:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
}
.form-input.mono{ font-family:var(--mono); letter-spacing:0.01em; }

.form-divider{
  border-top:1px solid var(--border);
  margin:18px 0 14px;
  padding-top:14px;
}
.form-divider-label{
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0 0 12px;
}

.chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:11.5px;
  font-weight:700;
  color:var(--text-body);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover{ border-color:var(--border-strong); }
.chip input{ accent-color:var(--teal); width:12px; height:12px; }
.chip.checked{
  border-color:var(--teal-dark);
  background:var(--teal-tint);
  color:var(--teal-dark);
}

.modal-footer{
  padding:14px 20px;
  border-top:1px solid var(--border);
  background:var(--bg-subtle);
  display:flex;
  justify-content:flex-end;
  gap:9px;
}
.btn-ghost{
  padding:9px 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  background:#fff;
  color:var(--text-body);
  font-size:12.5px;
  font-weight:700;
  transition:background .15s ease;
}
.btn-ghost:hover{ background:var(--bg-subtle); }
.btn-solid-blue{
  padding:9px 18px;
  border-radius:var(--radius-md);
  border:1px solid var(--blue-dark);
  background:var(--blue);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  transition:background .15s ease;
}
.btn-solid-blue:hover{ background:var(--blue-dark); }

@media (max-width:520px){
  .form-grid-2{ grid-template-columns:1fr; }
}
/* =========================================================
   POS — LIVE PRODUCT SEARCH RESULTS
   ========================================================= */
.product-results{
  max-height:280px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.product-result-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--bg-subtle);
  cursor:pointer;
  transition:background .15s ease;
}
.product-result-item:last-child{ border-bottom:none; }
.product-result-item:hover{ background:var(--bg-subtle); }

.product-thumb{
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  background:var(--blue-tint);
  color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  flex-shrink:0;
}

.product-info{ flex:1; min-width:0; }
.product-info .name{
  font-size:13px;
  font-weight:700;
  color:var(--text-heading);
  margin:0 0 1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.product-info .meta{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--text-muted);
}

.product-price{ text-align:right; flex-shrink:0; }
.product-price .amt{
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  color:var(--text-heading);
}
.product-price .stock{
  display:block;
  font-size:10px;
  font-weight:700;
  margin-top:2px;
}
.product-price .stock.in{ color:var(--teal-dark); }
.product-price .stock.low{ color:var(--amber); }

.product-no-result{
  padding:24px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-muted);
}
/* =========================================================
   QUOTATIONS PANEL
   ========================================================= */
.quote-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  border-bottom:1px solid var(--border);
  padding-bottom:16px;
  margin-bottom:20px;
}
.quote-eyebrow{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.quote-toolbar h1{
  font-family:'Manrope', sans-serif;
  font-size:22px;
  font-weight:800;
  color:var(--text-heading);
  margin:4px 0 3px;
}
.quote-toolbar p{ margin:0; font-size:12.5px; color:var(--text-muted); }
.quote-toolbar-actions{ display:flex; gap:10px; }

.stat-sub{ margin:2px 0 0; font-size:11px; color:var(--text-muted); }

.quote-filter-bar{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}
.quote-filter-search{ flex:1; min-width:240px; max-width:420px; }
.quote-filter-controls{ display:flex; gap:10px; flex-wrap:wrap; }
.quote-filter-controls .select-wrap{ min-width:150px; }

.quote-table-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.quote-table-head{
  padding:12px 18px;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  font-size:12px;
  font-weight:600;
  color:var(--text-muted);
}
.quote-table-scroll{ overflow-x:auto; }
.quote-table-scroll table{ min-width:820px; }

.quote-id-cell .desc{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--text-muted);
  font-weight:400;
}
.quote-link-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:4px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  color:var(--violet);
}
.quote-customer-phone{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  color:var(--text-muted);
  font-weight:400;
}
.quote-date-valid{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  color:var(--text-muted);
}
.quote-date-valid.soon{ color:var(--amber); }
.quote-total-tax{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  color:var(--text-muted);
  font-weight:400;
}

.pill.blue{ background:var(--blue-tint); color:var(--blue); }
.pill.violet{ background:var(--violet-tint); color:var(--violet); }

.btn-view{
  padding:5px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--blue-tint);
  background:var(--blue-tint);
  color:var(--blue);
  font-size:11px;
  font-weight:700;
  transition:background .15s ease;
}
.btn-view:hover{ background:#dde5fc; }

.quote-empty-row td{
  padding:40px 20px;
  text-align:center;
  color:var(--text-muted);
  font-size:12.5px;
}

/* --- Quotations: pagination --- */
.quote-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:var(--bg-subtle);
}
.quote-pagination-info{
  font-size:12px;
  color:var(--text-muted);
}
.quote-pagination-controls{
  display:flex;
  align-items:center;
  gap:6px;
}
.page-btn{
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.page-btn:hover:not(:disabled):not(.active){ background:var(--bg-subtle); border-color:var(--border-strong); }
.page-btn.active{
  background:var(--teal);
  border-color:var(--teal-dark);
  color:#04231f;
}
.page-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}
.page-dots{
  font-size:12px;
  color:var(--text-muted);
  padding:0 2px;
}
/* =========================================================
   NEW QUOTATION MODAL
   ========================================================= */
.modal-box.wide{ max-width:640px; }

.cust-search-wrap{ position:relative; }
.cust-dropdown{
  display:none;
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  max-height:160px;
  overflow-y:auto;
  z-index:80;
  box-shadow:0 16px 32px -12px rgba(15,23,42,0.2);
}
.cust-dropdown.show{ display:block; }
.cust-dropdown-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-heading);
  cursor:pointer;
  border-bottom:1px solid var(--bg-subtle);
}
.cust-dropdown-item:last-child{ border-bottom:none; }
.cust-dropdown-item:hover{ background:var(--bg-subtle); }
.cust-dropdown-item .phone{ font-family:var(--mono); font-size:11px; color:var(--text-muted); font-weight:500; }

.form-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}

.form-grid-4{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:12px;
}
@media (max-width:1024px){
  .form-grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .form-grid-4{ grid-template-columns:1fr; }
}

.quote-items-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.quote-items-head h5{
  font-size:11px;
  font-weight:700;
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin:0;
}
.tax-rate-inline{ display:flex; align-items:center; gap:6px; }
.tax-rate-inline span{ font-size:10.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; }
.tax-rate-inline input{
  width:52px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  text-align:center;
  color:var(--text-heading);
}
.tax-rate-inline input:focus{ outline:none; border-color:var(--blue); background:#fff; }

.item-add-row{
  display:grid;
  grid-template-columns:5fr 2fr 2fr 3fr;
  gap:8px;
  align-items:end;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px;
  margin-bottom:12px;
}
.item-add-row .mini-label{
  display:block;
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:5px;
}
.item-add-row select, .item-add-row input{
  width:100%;
  padding:8px 9px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:600;
  color:var(--text-heading);
}
.item-add-row select:focus, .item-add-row input:focus{ outline:none; border-color:var(--blue); }

.btn-dark-sm{
  width:100%;
  padding:12px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--ink-900);
  background:var(--ink-900);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .15s ease;
}
.btn-dark-sm:hover{ background:#000; }

.mini-remove-btn{
  width:22px; height:22px;
  border-radius:var(--radius-sm);
  border:none;
  background:var(--rose-tint);
  color:var(--rose);
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
}
.mini-remove-btn:hover{ background:#f6d3d9; }

.quote-summary-box{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 16px;
  margin-top:12px;
}
.quote-summary-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--text-body);
  padding:3px 0;
}
.quote-summary-row .amt{ font-family:var(--mono); font-weight:600; color:var(--text-heading); }
.quote-summary-row.total{
  border-top:1px solid var(--border);
  margin-top:6px;
  padding-top:8px;
  font-size:14px;
  font-weight:700;
  color:var(--text-heading);
}
.quote-summary-row.total .amt{ font-size:15px; color:var(--teal-dark); }

/* Ensure Add Customer modal always sits above the New Quotation modal when opened nested */
#add-customer-modal-overlay.show{
  z-index:75;
}

/* =========================================================
   QUOTATION DETAIL / EDIT MODAL
   ========================================================= */
.modal-box.xwide{ max-width:800px; }

.qd-topbar{
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:var(--bg-subtle);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.qd-back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-body);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.qd-back-link:hover{ color:var(--blue); }

.qd-identity{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.qd-identity h2{
  font-family:'Manrope', sans-serif;
  font-size:18px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 3px;
}
.qd-identity p{
  margin:0;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.qd-identity p span{ color:var(--text-body); text-transform:none; font-weight:600; }

.qd-meta-box{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.qd-meta-label{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  display:block;
  margin-bottom:6px;
}
.qd-meta-box .cust-name{ font-size:13.5px; font-weight:700; color:var(--text-heading); }
.qd-meta-box .cust-phone{ font-size:12px; color:var(--text-body); margin-top:2px; }
.qd-meta-box .cust-email{ font-family:var(--mono); font-size:10.5px; color:var(--text-muted); margin-top:2px; }

.qd-meta-right{ text-align:right; }
.qd-meta-right .dates-row{
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:5px;
}
.qd-meta-right .dates-row span{ font-family:var(--mono); color:var(--text-heading); text-transform:none; }
.qd-meta-right .balance-row{
  font-size:13px;
  font-weight:700;
  color:var(--text-heading);
  padding-top:8px;
  border-top:1px solid var(--border);
  margin-top:4px;
}
.qd-meta-right .balance-row span{ font-family:var(--mono); color:var(--blue); font-size:14px; }

.qd-add-row{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.qd-add-row select{
  flex:1;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:12.5px;
  font-weight:600;
  color:var(--text-heading);
}
.qd-add-row select:focus{ outline:none; border-color:var(--blue); background:#fff; }

/* --- Quotation detail: status dropdown --- */
.qd-status-select{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--teal-dark);
  background:var(--teal-tint);
  color:var(--teal-dark);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  padding:4px 26px 4px 10px;
  border-radius:999px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%230b7d71' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:9px;
}
.qd-status-select:focus{ outline:none; }
/* =========================================================
   INVOICE PREVIEW MODAL
   ========================================================= */
.inv-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:18px;
}
.inv-header-row h1{
  font-family:'Manrope', sans-serif;
  font-size:20px;
  font-weight:800;
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0;
}
.inv-header-row .inv-id{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  color:var(--blue);
  margin-top:4px;
}
.inv-meta-right{
  text-align:right;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.inv-meta-right div{ margin-bottom:3px; }
.inv-meta-right span{ font-family:var(--mono); color:var(--text-heading); text-transform:none; font-weight:600; }

.inv-billto{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:16px 0;
  margin-bottom:18px;
}
.inv-billto-label{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin:0 0 6px;
}
.inv-billto .name{ font-size:14px; font-weight:700; color:var(--text-heading); }
.inv-billto .phone{ font-size:12px; color:var(--text-body); margin-top:2px; }
.inv-billto .email{ font-family:var(--mono); font-size:10.5px; color:var(--text-muted); margin-top:2px; }

.inv-items-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  margin-bottom:18px;
}
.inv-items-table thead th{
  text-align:left;
  padding:8px 0;
  border-bottom:2px solid var(--border);
  color:var(--text-muted);
  font-weight:700;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.inv-items-table thead th:not(:first-child){ text-align:right; }
.inv-items-table tbody td{
  padding:9px 0;
  border-bottom:1px solid var(--bg-subtle);
  color:var(--text-body);
}
.inv-items-table tbody td:not(:first-child){ text-align:right; font-family:var(--mono); }

/* =========================================================
   INVOICES PANEL
   ========================================================= */
.stat-card.dark{
  background:#D41D5E;
  border-color:#D41D5E;
  position:relative;
  overflow:hidden;
}
.stat-card.dark .label{ color:#ffffff; }
.stat-card.dark .value{ color:#fff }
.stat-card.dark .stat-sub{ color:#ffffff; }
.stat-card.dark .bg-icon{
  position:absolute;
  right:8px; bottom:-10px;
  font-size:60px;
  color:rgba(255,255,255,0.05);
}

.pill.slate{ background:#eef1f6; color:#5b6579; }

.cell-sub{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  color:var(--text-muted);
}
.cell-sub.warn{ color:var(--amber); font-weight:600; }
.cell-sub.danger{ color:var(--rose); font-weight:600; }
.cell-sub.ok{ color:var(--teal-dark); font-weight:600; }

.amt-paid{ color:var(--teal-dark); }
.amt-unpaid{ color:var(--text-muted); }

.quote-filter-controls .select-wrap{ min-width:120px; }

/* =========================================================
   NEW INVOICE MODAL
   ========================================================= */
.toggle-switch{
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}
.toggle-switch input{ display:none; }
.toggle-track{
  width:34px; height:18px;
  border-radius:999px;
  background:var(--border-strong);
  position:relative;
  transition:background .15s ease;
  flex-shrink:0;
}
.toggle-track::after{
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:14px; height:14px;
  border-radius:50%;
  background:#fe8104;
  transition:transform .15s ease;
}
.toggle-switch input:checked ~ .toggle-track{ background:var(--teal); }
.toggle-switch input:checked ~ .toggle-track::after{ transform:translateX(16px); }
.toggle-label{ font-size:12px; font-weight:600; color:var(--text-body); }

.item-add-row.cols-4{ grid-template-columns:6fr 2fr 2fr 2fr; }

.radio-inline-group{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:10px;
}
.radio-inline{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:var(--text-body);
  cursor:pointer;
}
.radio-inline input{ accent-color:var(--teal); width:14px; height:14px; }

.calc-panel{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px;
}
.calc-row{
  display:flex;
  justify-content:space-between;
  font-size:12.5px;
  color:var(--text-body);
  padding:4px 0;
}
.calc-row .amt{ font-family:var(--mono); font-weight:600; color:var(--text-heading); }
.calc-row.discount .amt{ color:var(--rose); }
.calc-row.divider{
  border-top:1px solid var(--border);
  margin-top:6px;
  padding-top:10px;
  font-size:14px;
  font-weight:700;
  color:var(--text-heading);
}
.calc-row.divider .amt{ font-size:16px; color:var(--teal-dark); }

/* --- Payments: extra stat-icon color variants --- */
.stat-icon.blue{ background:var(--blue); }
.stat-icon.slate{ background:#5b6579; }


/* --- Payments: table action icon group --- */
.table-action-group{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.table-icon-btn{
  width:26px; height:26px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.table-icon-btn:hover{ background:var(--bg-subtle); border-color:var(--border-strong); }
.table-icon-btn.print:hover{ color:var(--blue); border-color:var(--blue); }
.table-icon-btn.edit:hover{ color:var(--teal-dark); border-color:var(--teal-dark); }

/* =========================================================
   VIEW / EDIT INVOICE MODAL
   ========================================================= */
.inv-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:18px;
}
.inv-col{ display:flex; flex-direction:column; gap:16px; }

.inv-id-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.inv-id-row .eyebrow{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.inv-id-row h2{
  font-family:var(--mono);
  font-size:18px;
  font-weight:700;
  color:var(--text-heading);
  margin:3px 0 4px;
}
.inv-creator{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  color:var(--text-muted);
}

.inv-status-select{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--border-strong);
  background:var(--bg-subtle);
  color:var(--text-heading);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  padding:7px 30px 7px 12px;
  border-radius:var(--radius-md);
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23475269' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:9px;
}
.inv-status-select:focus{ outline:none; }

.inv-quickbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:2px;
}

.link-copy-row{ display:flex; gap:8px; }
.link-copy-row input{
  flex:1;
  padding:9px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--text-body);
}
.btn-copy{
  padding:9px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--blue);
  background:var(--blue-tint);
  color:var(--blue);
  font-size:11.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.btn-copy:hover{ background:#dde5fc; }

.inv-add-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:8px;
  align-items:end;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px;
}
.inv-add-row select, .inv-add-row input{
  width:100%;
  padding:8px 9px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:600;
  color:var(--text-heading);
}
.inv-add-row select:focus, .inv-add-row input:focus{ outline:none; border-color:var(--blue); }

.inv-line-item .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.inv-line-item .variant{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.discount-input-row{ display:flex; gap:5px; justify-content:center; }
.discount-input-row input{
  width:56px;
  padding:6px 6px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-family:var(--mono);
  font-size:11px;
  text-align:center;
}
.discount-input-row select{
  padding:6px 6px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:10.5px;
  font-weight:600;
  color:var(--text-body);
}

.paid-due-banner{
  text-align:center;
  font-size:11.5px;
  font-weight:700;
  padding:10px;
  border-radius:var(--radius-md);
  border:1px solid var(--teal-dark);
  background:var(--teal-tint);
  color:var(--teal-dark);
}
.paid-due-banner.has-due{
  border-color:var(--amber);
  background:var(--amber-tint);
  color:#8a5a10;
}

/* =========================================================
   BULK SEND PARCEL PANEL
   ========================================================= */
.bulk-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  margin-bottom:16px;
}
.bulk-section-head{ margin-bottom:16px; }
.bulk-section-head h3{
  font-family:'Manrope', sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--text-heading);
  margin:0 0 3px;
}
.bulk-section-head p{ margin:0; font-size:12px; color:var(--text-muted); }

/* Stepper */
.stepper-wrap{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  position:relative;
  max-width:640px;
  margin:0 auto;
}
.stepper-line{
  position:absolute;
  left:0; right:0; top:15px;
  height:2px;
  background:var(--border);
  z-index:0;
}
.step-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--bg-card);
  padding:0 10px;
  position:relative;
  z-index:1;
}
.step-circle{
  width:32px; height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  border:1.5px solid var(--border-strong);
  background:var(--bg-subtle);
  color:var(--text-muted);
}
.step-item.active .step-circle{
  background:var(--teal);
  border-color:var(--teal-dark);
  color:#04231f;
}
.step-item.done .step-circle{
  background:var(--teal-tint);
  border-color:var(--teal-dark);
  color:var(--teal-dark);
}
.step-label{
  font-size:11.5px;
  font-weight:700;
  color:var(--text-muted);
  margin-top:8px;
}
.step-item.active .step-label{ color:var(--teal-dark); }

/* Courier partner cards */
.courier-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.courier-card{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  background:var(--bg-subtle);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:border-color .15s ease;
}
.courier-card:hover{ border-color:var(--text-muted); }
.courier-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.courier-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Manrope', sans-serif;
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.courier-brand.pathao{ color:var(--rose); }
.courier-brand.steadfast{ color:var(--blue); }
.courier-brand.redex{ color:#b8452f; }

.courier-badge{
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:3px 8px;
  border-radius:var(--radius-sm);
  background:var(--border);
  color:var(--text-body);
}
.courier-desc{ font-size:11.5px; color:var(--text-muted); margin:0; }

.btn-disabled{
  width:100%;
  margin-top:20px;
  padding:9px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--border);
  color:var(--text-muted);
  font-size:12px;
  font-weight:700;
  cursor:not-allowed;
}

/* Warning box */
.warning-box{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--amber-tint);
  border:1px solid var(--amber);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin-top:16px;
}
.warning-box i{ color:var(--amber); font-size:14px; margin-top:2px; }
.warning-box h4{ margin:0 0 3px; font-size:12.5px; font-weight:700; color:#8a5a10; }
.warning-box p{ margin:0; font-size:12px; color:#96660f; }
.warning-box p a{ font-weight:700; text-decoration:underline; color:#8a5a10; }

/* =========================================================
   ALL PRODUCTS PANEL
   ========================================================= */
.table-checkbox{ width:15px; height:15px; accent-color:var(--blue); cursor:pointer; }

.product-cell{ display:flex; align-items:center; gap:11px; }
.product-thumb-md{
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  flex-shrink:0;
}
.product-cell .p-name{ font-size:13px; font-weight:700; color:var(--text-heading); cursor:pointer; }
.product-cell .p-name:hover{ color:var(--blue); }
.product-cell .p-meta{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.product-cell .p-meta .variants-count{ font-size:10.5px; color:var(--text-muted); }

.stock-badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  background:var(--bg-subtle);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--text-heading);
}
.stock-badge.low{ background:var(--amber-tint); color:var(--amber); }
.stock-badge.out{ background:var(--rose-tint); color:var(--rose); }

.variant-row td{
  background:var(--bg-subtle);
  padding:7px 12px !important;
  font-size:11.5px;
  color:var(--text-body);
}
.variant-link{ display:flex; align-items:center; gap:8px; padding-left:26px; }
.variant-link .arrow{ color:var(--border-strong); }
.variant-thumb{
  width:22px; height:22px;
  border-radius:var(--radius-sm);
  background:#e9ecf2;
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
  flex-shrink:0;
}
.variant-edit-link{ font-size:11px; font-weight:700; color:var(--blue); }
.variant-edit-link:hover{ color:var(--blue-dark); }

.sub-actions-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:0px;
  padding:10px 14px;
  margin-bottom:14px;
  font-size:12px;
  color:var(--text-body);
}
.sub-actions-bar strong{ color:var(--text-heading); }

.bulk-actions-bar{ display:none; align-items:center; gap:8px; }
.bulk-actions-bar.show{ display:flex; }

.btn-bulk{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:#fff;
  color:var(--text-body);
  font-size:11.5px;
  font-weight:700;
  transition:background .15s ease;
}
.btn-bulk:hover{ background:var(--bg-subtle); }
.btn-bulk.danger{ border-color:var(--rose); color:var(--rose); background:var(--rose-tint); }
.btn-bulk.danger:hover{ background:#f6d3d9; }

.btn-edit-sm{
  padding:5px 11px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-body);
  font-size:11px;
  font-weight:700;
}
.btn-edit-sm:hover{ background:var(--border); }

/* =========================================================
   ADD PRODUCT MODAL
   ========================================================= */
.section-label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-heading);
  margin-bottom:8px;
}
.section-label .optional{ font-size:11px; font-weight:500; color:var(--text-muted); }

.suffix-wrap{ position:relative; }
.suffix-wrap input{ padding-right:52px; text-align:center; }
.suffix-text{
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  pointer-events:none;
}

/* Variation config panel */
.variation-panel{
  background:var(--blue-tint);
  border:1px solid var(--blue);
  border-radius:var(--radius-md);
  padding:14px;
}
.variation-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.variation-panel-head h4{
  font-size:10.5px;
  font-weight:700;
  color:var(--blue-dark);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin:0;
}
/* --- Variation row: remove button --- */
.variation-row{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:center;
}

.variation-remove-btn{
  width:28px; height:28px;
  border-radius:var(--radius-sm);
  border:none;
  background:var(--rose-tint);
  color:var(--rose);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  flex-shrink:0;
}
.variation-remove-btn:hover{ background:#f6d3d9; }

.variation-row:last-child{ margin-bottom:0; }
.variation-row input{
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:12px;
  color:var(--text-heading);
}
.variation-row input:focus{ outline:none; border-color:var(--blue); background:#fff; }

/* Stock type cards */
.stock-type-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.stock-type-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:#fff;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.stock-type-card:hover{ border-color:var(--border-strong); }
.stock-type-card input{ margin-top:2px; accent-color:var(--blue); width:14px; height:14px; }
.stock-type-card .title{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.stock-type-card .desc{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.stock-type-card.checked{ border-color:var(--blue); background:var(--blue-tint); }

.btn-bulk.blue{ border-color:var(--blue); color:var(--blue); background:var(--blue-tint); }
.btn-bulk.blue:hover{ background:#dde5fc; }
.btn-bulk.green{ border-color:var(--teal-dark); color:var(--teal-dark); background:var(--teal-tint); }
.btn-bulk.green:hover{ background:#d0f0eb; }

.serial-log-box{
  font-family:var(--mono);
  font-size:11px;
  color:var(--text-body);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  margin-top:8px;
}

/* Upload dropzone */
.upload-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.upload-box{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-md);
  padding:20px 12px;
  text-align:center;
  background:var(--bg-subtle);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  min-height:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.upload-box:hover{ border-color:var(--blue); background:#eef2ff; }
.upload-box i{ font-size:17px; color:var(--text-muted); margin-bottom:7px; }
.upload-box:hover i{ color:var(--blue); }
.upload-box .upload-label{ font-size:11.5px; font-weight:700; color:var(--blue); }
.upload-box .upload-status{ font-size:10px; color:var(--text-muted); margin-top:3px; }

/* Description editor — OpenCart Journal style tabs */
.editor-shell{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#fff;
}
.editor-tabs{
  display:flex;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
}
.editor-tab{
  padding:9px 18px;
  font-size:12px;
  font-weight:700;
  color:var(--text-muted);
  border:none;
  background:transparent;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease;
}
.editor-tab:hover{ color:var(--text-heading); }
.editor-tab.active{
  color:var(--teal-dark);
  border-bottom-color:var(--teal);
  background:#fff;
}

.editor-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px;
  padding:7px 9px;
  border-bottom:1px solid var(--border);
  background:var(--bg-subtle);
}
.editor-tool-btn{
  width:27px; height:27px;
  border-radius:var(--radius-sm);
  border:none;
  background:transparent;
  color:var(--text-body);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:background .15s ease, color .15s ease;
}
.editor-tool-btn:hover{ background:var(--border); color:var(--text-heading); }
.editor-divider{ width:1px; height:16px; background:var(--border-strong); margin:0 4px; }

.editor-visual{
  padding:14px;
  min-height:150px;
  max-height:300px;
  overflow-y:auto;
  font-size:13px;
  line-height:1.6;
  color:var(--text-body);
}
.editor-visual:focus{ outline:none; }
.editor-visual:empty::before{ content:attr(data-placeholder); color:var(--text-muted); }

.editor-code{
  display:none;
  width:100%;
  border:none;
  padding:14px;
  min-height:150px;
  max-height:300px;
  background:var(--ink-950);
  color:#7fe0c4;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  resize:vertical;
}
.editor-code:focus{ outline:none; }

/* --- Existing variation type quick-select chips --- */
.existing-variation-block{ margin-bottom:14px; }
.chip-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--blue);
  background:#fff;
  color:var(--blue);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease;
}
.chip-btn:hover{ background:var(--blue-tint); }
.chip-btn i{ font-size:9px; }

/* =========================================================
   EDIT PRODUCT MODAL
   ========================================================= */
.info-alert-inline{
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:var(--amber-tint);
  border:1px solid var(--amber);
  border-radius:var(--radius-md);
  padding:10px 12px;
}
.info-alert-inline i{ color:var(--amber); font-size:12px; margin-top:1px; }
.info-alert-inline p{ margin:0; font-size:11px; color:#8a5a10; line-height:1.4; }

.note-box-slate{
  font-size:10.5px;
  color:var(--text-muted);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  margin-top:8px;
}
.note-box-slate i{ color:var(--text-muted); margin-right:4px; }

.selected-count-tag{ font-size:11px; font-weight:600; color:var(--blue); }

/* Media upload box v2 (Edit modal — badge + upload/remove + URL input) */
.media-box-v2{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-md);
  padding:14px 12px;
  min-height:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--bg-subtle);
  transition:border-color .15s ease;
}
.media-box-v2:hover{ border-color:var(--blue); }
.media-badge{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  background:var(--blue);
  color:#fff;
  padding:2px 8px;
  border-radius:var(--radius-sm);
  margin-bottom:8px;
}
.media-actions{ display:flex; align-items:center; gap:12px; }
.media-action-link{ font-size:10.5px; font-weight:700; color:var(--blue); }
.media-action-link:hover{ color:var(--blue-dark); }
.media-action-link.remove{ color:var(--rose); }
.media-action-link.remove:hover{ color:#b3243b; }
.media-url-input{
  width:100%;
  margin-top:8px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  font-size:10.5px;
  text-align:center;
  color:var(--text-heading);
}
.media-url-input:focus{ outline:none; border-color:var(--blue); }
.media-status-text{ display:block; font-size:9.5px; color:var(--text-muted); margin-top:6px; }


/* =========================================================
   VIEW PRODUCT QUICK DETAILS MODAL
   ========================================================= */
.view-snapshot-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:var(--text-body);
}
.pulse-dot-live{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--teal);
  animation:pulse-dot 1.8s infinite;
}

.view-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.view-title-row h2{
  font-size:14.5px;
  font-weight:800;
  color:var(--text-heading);
  margin:0 0 3px;
  line-height:1.3;
}
.view-title-row .sub{ font-size:11px; color:var(--text-muted); font-weight:600; }
.view-title-row .sub span{ color:var(--blue); }

.view-action-btns{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:flex-end;
  flex-shrink:0;
}
.btn-mini{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 9px;
  border-radius:var(--radius-sm);
  border:none;
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
}
.btn-mini.gray{ background:var(--bg-subtle); color:var(--text-body); }
.btn-mini.gray:hover{ background:var(--border); }
.btn-mini.blue{ background:var(--blue-tint); color:var(--blue); }
.btn-mini.blue:hover{ background:#dde5fc; }

.view-divider{ border:none; border-top:1px solid var(--border); margin:0 0 12px; }

.view-badges-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.view-badges-row .back-mini{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
}
.view-badges-row .back-mini:hover{ color:var(--blue); }
.view-badges-row .badges{ display:flex; gap:6px; }

.sku-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:9px 12px;
  margin-bottom:10px;
}
.sku-row .label{ font-size:11px; font-weight:600; color:var(--text-muted); }
.sku-row .val{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--text-heading); text-align:right; word-break:break-all; max-width:200px; }

.warranty-box-mini{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 12px;
  margin-bottom:10px;
}
.warranty-box-mini .top{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-heading);
  margin-bottom:4px;
}
.warranty-box-mini .top i{ color:var(--text-muted); }
.warranty-box-mini p{ margin:0; font-size:10.5px; color:var(--text-muted); padding-left:20px; }

.price-range-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
  margin-bottom:10px;
}
.price-range-row span:first-child{ font-size:12.5px; font-weight:700; color:var(--text-body); }
.price-range-row .amt{ font-family:var(--mono); font-size:13.5px; font-weight:800; color:var(--blue); }

.taxonomy-grid-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 12px;
  margin-bottom:12px;
}
.taxonomy-grid-box .t-label{
  display:block;
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:3px;
}
.taxonomy-grid-box .t-value{ font-size:12px; font-weight:700; color:var(--text-heading); }

.variants-section-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-heading);
  margin-bottom:8px;
}
.variants-section-label i{ color:var(--text-muted); }

.variant-mini-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.variant-mini-card{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:8px;
  text-align:center;
}
.variant-mini-card.low-stock{ background:var(--amber-tint); border-color:var(--amber); }
.variant-mini-card .v-name{ display:block; font-size:11.5px; font-weight:700; color:var(--text-heading); }
.variant-mini-card.low-stock .v-name{ color:#8a5a10; }
.variant-mini-card .v-qty{ display:block; font-size:10px; font-weight:700; color:var(--text-muted); margin-top:2px; }
.variant-mini-card.low-stock .v-qty{ color:var(--amber); }

.view-footer-note{
  text-align:center;
  font-size:10.5px;
  font-weight:700;
  color:var(--border-strong);
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:14px;
}

/* =========================================================
   VARIANT MANAGER MODAL
   ========================================================= */
.info-note-blue{
  background:var(--blue-tint);
  border:1px solid var(--blue);
  border-radius:var(--radius-md);
  padding:10px 12px;
  font-size:11.5px;
  color:var(--text-body);
  line-height:1.5;
}
.info-note-blue strong{ color:var(--blue-dark); }

.vtype-block{
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  margin-bottom:14px;
}
.vtype-block .vtype-label{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.vtype-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
  flex-wrap:wrap;
}
.vtype-row .vtype-name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.vtype-chip{
  padding:3px 9px;
  border-radius:var(--radius-sm);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  font-size:11px;
  font-weight:600;
  color:var(--text-body);
}

.stock-summary-block{ margin-bottom:14px; }
.stock-summary-block .title{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.stock-summary-block .summary{ font-size:11.5px; color:var(--text-body); margin-top:2px; }
.stock-summary-block .hint{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }

.variant-table th:nth-child(1){ width:44%; }
.variant-table th:nth-child(2){ text-align:right; }
.variant-table th:nth-child(3){ text-align:center; }
.variant-table th:nth-child(4){ text-align:right; }
.variant-table td:nth-child(2){ text-align:right; font-family:var(--mono); font-weight:700; color:var(--text-heading); }
.variant-table td:nth-child(3){ text-align:center; font-weight:600; color:var(--text-body); }
.variant-table td:nth-child(3).low{ color:var(--amber); font-weight:700; }
.variant-table td:nth-child(4){ text-align:right; }

.variant-name-cell{ display:flex; align-items:center; gap:9px; }
.variant-name-cell .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.variant-name-cell .sku{ font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-top:2px; }

/* Single variant image upload row (smaller than the multi-upload dropzones) */
.variant-img-upload-row{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 16px;
}
.variant-img-preview{
  width:48px; height:48px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:16px;
  overflow:hidden;
  flex-shrink:0;
}
.variant-img-preview img{ width:100%; height:100%; object-fit:cover; }


/* =========================================================
   LOW STOCKS PANEL
   ========================================================= */
.lowstock-tab-group{ display:flex; gap:8px; margin-bottom:16px; }
.lowstock-tab{
  padding:9px 18px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-body);
  font-size:12.5px;
  font-weight:700;
}
.lowstock-tab.active{ background:var(--db-orange); border-color:none; color:#fff; }
.lowstock-tab:hover:not(.active){ background:var(--border); }

.lowstock-notify-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom:14px;
}
.lowstock-notify-row .toggle-switch{ margin-bottom:0; }

.lowstock-prod-cell{ display:flex; align-items:center; gap:10px; }


/* =========================================================
   CATEGORIES PANEL
   ========================================================= */
.cat-controls-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 14px;
  margin-bottom:14px;
  font-size:12px;
  color:var(--text-body);
}
.depth-badge{
  font-family:var(--mono);
  font-weight:700;
  color:var(--text-heading);
  background:#fff;
  border:1px solid var(--border);
  padding:1px 8px;
  border-radius:var(--radius-sm);
}
.tree-link{ font-weight:700; color:var(--blue); }
.tree-link:hover{ color:var(--blue-dark); }
.cat-controls-bar .sep{ color:var(--border-strong); }
.cat-controls-bar strong{ color:var(--text-heading); }

.cat-toggle-btn{
  width:20px; height:20px;
  border:none;
  background:transparent;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  transition:transform .2s ease, color .15s ease;
  flex-shrink:0;
}
.cat-toggle-btn:hover{ color:var(--text-heading); }
.cat-toggle-btn.collapsed{ transform:rotate(-90deg); }

.cat-thumb{
  width:32px; height:32px;
  border-radius:var(--radius-sm);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  flex-shrink:0;
}
.cat-thumb.sm{ width:26px; height:26px; background:#fff; font-size:10px; }

.cat-row-root td{ font-weight:700; color:var(--text-heading); }
.cat-row-root .cat-name{ cursor:pointer; }
.cat-row-root .cat-name:hover{ color:var(--blue); }

.cat-row-child td{ background:var(--bg-subtle); color:var(--text-body); }
.cat-row-child .child-name-cell{ display:flex; align-items:center; gap:10px; padding-left:28px; }
.cat-row-child .arrow{ color:var(--border-strong); }
.cat-row-child .child-title{ font-weight:700; color:var(--text-heading); font-size:12.5px; cursor:pointer; }
.cat-row-child .child-title:hover{ color:var(--blue); }
.cat-row-child .child-desc{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }

.count-chip{
  display:inline-block;
  padding:2px 9px;
  border-radius:var(--radius-sm);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--text-heading);
}
.cell-sub-categores{
  margin-top: 3px;
    font-size: 10.5px;
    color: var(--text-muted);
}
   
.icon-action-group{ display:flex; align-items:center; justify-content:center; gap:5px; }
.icon-action{
  width:26px; height:26px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10.5px;
  border:1px solid transparent;
  transition:background .15s ease;
}
.icon-action.add{ background:var(--teal-tint); color:var(--teal-dark); border-color:var(--teal-tint); }
.icon-action.add:hover{ background:#d0f0eb; }
.icon-action.edit{ background:var(--blue-tint); color:var(--blue); border-color:var(--blue-tint); }
.icon-action.edit:hover{ background:#dde5fc; }
.icon-action.delete{ background:var(--rose-tint); color:var(--rose); border-color:var(--rose-tint); }
.icon-action.delete:hover{ background:#f6d3d9; }
/* =========================================================
  Description Editor
   ========================================================= */
.rich-editor-toolbar{ display:flex; flex-wrap:wrap; gap:4px; padding:8px; border:1px solid var(--border); border-bottom:none; border-radius:8px 8px 0 0; background:#fafafa; position:relative; }
.rt-btn{ min-width:30px; height:30px; padding:0 8px; border:1px solid var(--border); background:#fff; border-radius:4px; cursor:pointer; font-size:13px; color:var(--text-heading); display:flex; align-items:center; justify-content:center; gap:4px; }
.rt-btn:hover{ background:#f1f5f9; }
.rt-btn-wide{ min-width:90px; }
.rt-dropdown{ position:relative; }
.rt-dd-menu{ display:none; position:absolute; top:34px; left:0; background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,0.16); z-index:9999; min-width:160px; max-height:260px; overflow-y:auto; }
.rt-dd-menu > div{ padding:8px 14px; cursor:pointer; font-size:13px; }
.rt-dd-menu > div:hover{ background:#f1f5f9; }
.rt-body{ min-height:180px; border:1px solid var(--border); border-radius:0 0 8px 8px; padding:14px; font-size:13px; }
.rt-code-wrap{ display:none; border:1px solid #333; border-radius:0 0 8px 8px; background:#1e1e1e; overflow:hidden; }
.rt-code-gutter{ background:#1e1e1e; color:#6e7681; text-align:right; padding:14px 10px 14px 0; font-family:'Courier New',monospace; font-size:12.5px; line-height:1.6; user-select:none; border-right:1px solid #333; min-width:38px; }
.rt-code-content{ flex:1; padding:14px; font-family:'Courier New',monospace; font-size:12.5px; line-height:1.6; color:#d4d4d4; outline:none; white-space:pre-wrap; word-break:break-word; min-height:180px; max-height:280px; overflow-y:auto; }
.tok-tag{ color:#e06c75; }
.tok-attr{ color:#9cdcfe; }
.tok-string{ color:#ce9178; }
.tok-punc{ color:#808080; }
.rt-fullscreen{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:100000; background:#fff; padding:20px; overflow:auto; }
.rt-fullscreen .rt-body{ min-height:calc(100vh - 160px); }

.nav-subgroup-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px 14px;
  font-size:13px;
  color:inherit;
  font-family:inherit;
}
.nav-subgroup-btn .chev{
  transition:transform 0.15s ease;
  font-size:11px;
}
.nav-subgroup-btn.open .chev{
  transform:rotate(180deg);
}
.nav-subgroup-menu{
  padding-left:14px;
}

/* =========================================================
   ADD CATEGORY MODAL
   ========================================================= */
.cat-image-upload{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  padding:22px;
  background:var(--bg-subtle);
  cursor:pointer;
  text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.cat-image-upload:hover{ border-color:var(--blue); background:#eef2ff; }
.cat-image-upload .icon-box{
  width:40px; height:40px;
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--border);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  margin:0 auto 10px;
}
.cat-image-upload .preview-img{
  width:64px; height:64px;
  object-fit:cover;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  margin:0 auto 10px;
  display:block;
}
.cat-image-upload .upload-label{ font-size:12px; font-weight:700; color:var(--blue); }
.cat-image-upload .upload-hint{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }

/* =========================================================
   EDIT CATEGORY MODAL
   ========================================================= */
.hidden-field{ display:none; }

.cat-image-upload.has-preview .upload-trigger-inner{ display:none; }
.cat-image-preview-box{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.cat-image-upload.has-preview .cat-image-preview-box{ display:flex; }
.cat-image-preview-box img{
  width:80px; height:80px;
  object-fit:cover;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
}
.remove-image-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:var(--radius-sm);
  border:1px solid var(--rose);
  background:var(--rose-tint);
  color:var(--rose);
  font-size:11px;
  font-weight:700;
}
.remove-image-btn:hover{ background:#f6d3d9; }

/* --- Description editor: expanded toolbar controls --- */
.editor-select{
  height:27px;
  padding:0 22px 0 8px;
  border:none;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-body);
  font-size:11px;
  font-weight:600;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.editor-select:hover{ background:var(--border); }
.editor-select:focus{ outline:none; }

.editor-color-wrap{
  position:relative;
  width:27px; height:27px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.editor-color-wrap:hover{ background:var(--border); }
.editor-color-wrap input[type="color"]{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:none;
  padding:0;
  cursor:pointer;
  opacity:0;
}
.editor-color-wrap .swatch-icon{
  pointer-events:none;
  font-size:11px;
  font-weight:800;
  color:var(--text-body);
  border-bottom:2.5px solid var(--rose);
  line-height:1;
  padding-bottom:1px;
}

.editor-help-btn{
  width:27px; height:27px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:transparent;
  color:var(--text-muted);
  font-size:10px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}
.editor-help-btn:hover{ background:var(--border); color:var(--text-heading); }

/* Fullscreen mode */
.editor-shell.fullscreen{
  position:fixed;
  inset:16px;
  z-index:200;
  display:flex;
  flex-direction:column;
  box-shadow:0 25px 60px -12px rgba(0,0,0,0.4);
}
.editor-shell.fullscreen .editor-visual,
.editor-shell.fullscreen .editor-code{
  flex:1;
  max-height:none;
}
/* =========================================================
   ADD BRAND MODAL
   ========================================================= */
.brand-logo-upload{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  padding:18px;
  background:var(--bg-subtle);
  text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.brand-logo-upload:hover{ border-color:var(--blue); background:#eef2ff; }
.brand-logo-upload .icon-box{
  width:34px; height:34px;
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--border);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  margin:0 auto 8px;
  cursor:pointer;
}
.brand-logo-upload .upload-trigger-inner{ cursor:pointer; }
.brand-logo-upload .upload-label{ font-size:11.5px; font-weight:700; color:var(--blue); }
.brand-logo-upload .upload-hint{ font-size:10px; color:var(--text-muted); margin-top:2px; }

.brand-logo-preview-box{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.brand-logo-upload.has-preview .upload-trigger-inner{ display:none; }
.brand-logo-upload.has-preview .brand-logo-preview-box{ display:flex; }
.brand-logo-preview-box img{
  width:56px; height:56px;
  object-fit:cover;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
}
/* =========================================================
   VIEW BRAND MODAL
   ========================================================= */
.brand-view-logo{
  width:64px; height:64px;
  border-radius:var(--radius-lg);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  margin:0 auto 14px;
}
.brand-info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 14px;
  margin-bottom:8px;
}
.brand-info-row:last-child{ margin-bottom:0; }
.brand-info-row .label{ font-size:11.5px; font-weight:600; color:var(--text-muted); }
.brand-info-row .val{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.brand-info-row .val.mono{ font-family:var(--mono); }

/* =========================================================
   ATTRIBUTES PANEL
   ========================================================= */
.tab-filter-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:8px 12px;
  margin-bottom:14px;
}
.tab-filter-group{ display:flex; flex-wrap:wrap; gap:4px; }
.tab-filter-btn{
  padding:7px 13px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--text-muted);
  font-size:12px;
  font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.tab-filter-btn:hover{ background:rgba(0,0,0,0.03); color:var(--text-heading); }
.tab-filter-btn.active{
  background:#fff;
  border-color:var(--border);
  color:var(--text-heading);
  font-weight:700;
}
.tab-filter-bar .count-text{ font-size:12px; color:var(--text-muted); padding-right:4px; }
.tab-filter-bar .count-text strong{ color:var(--text-heading); }

.attr-slug{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.attr-meta-line{ font-size:10.5px; color:var(--text-muted); margin-bottom:5px; }
.attr-options-row{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:11px; }
.attr-options-row .options-label{ font-weight:700; color:var(--text-body); margin-right:2px; }
.no-options-note{
  font-size:11px;
  color:var(--rose);
  font-style:italic;
  display:flex;
  align-items:center;
  gap:4px;
}

.icon-action.disabled{
  background:var(--bg-subtle);
  color:var(--border-strong);
  cursor:not-allowed;
  border-color:var(--border);
}

/* =========================================================
   VIEW / EDIT ATTRIBUTE MODALS
   ========================================================= */
.attr-type-lock{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 12px;
}
.attr-type-lock i{ color:var(--text-muted); font-size:12px; }
.attr-type-lock span{ font-size:11.5px; color:var(--text-muted); }

.option-manage-box{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px;
  background:var(--bg-subtle);
}
.option-manage-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:10px;
}
.option-manage-list:empty::after{
  content:'No options yet';
  font-size:11px;
  color:var(--text-muted);
  font-style:italic;
}
.removable-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 6px 5px 11px;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1px solid var(--border);
  font-size:11.5px;
  font-weight:600;
  color:var(--text-heading);
}
.removable-chip button{
  width:16px; height:16px;
  border:none;
  border-radius:50%;
  background:var(--rose-tint);
  color:var(--rose);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:8px;
}
.removable-chip button:hover{ background:#f6d3d9; }

.add-option-row{ display:flex; gap:8px; }
.add-option-row input{
  flex:1;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  color:var(--text-heading);
}
.add-option-row input:focus{ outline:none; border-color:var(--blue); }

/* =========================================================
   IMPORT PRODUCTS PANEL
   ========================================================= */
.import-dropzone{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  padding:44px 20px;
  text-align:center;
  background:var(--bg-subtle);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
  max-width:560px;
  margin:0 auto;
}
.import-dropzone:hover{ border-color:var(--blue); background:#eef2ff; }
.import-dropzone .icon-box{
  width:52px; height:52px;
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--border);
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  margin:0 auto 16px;
}
.import-dropzone:hover .icon-box{ color:var(--blue); border-color:var(--blue); }
.import-dropzone .drop-title{ font-size:14px; font-weight:700; color:var(--text-heading); margin:0 0 4px; }
.import-dropzone .drop-hint{ font-size:11.5px; color:var(--text-muted); margin:0 0 16px; }

.info-note-blue.wide{
  max-width:560px;
  margin:0 auto;
  align-items:flex-start;
}
.info-note-blue.wide h4{
  font-size:13px;
  font-weight:700;
  color:var(--blue-dark);
  margin:0 0 3px;
}
.info-note-blue.wide p{ margin:0 0 10px; color:var(--text-body); }
/* =========================================================
   MIGRATE PRODUCTS PANEL
   ========================================================= */
.stepper-wrap.wide{ max-width:900px; overflow-x:auto; }
.stepper-wrap.wide::-webkit-scrollbar{ height:0; }

.source-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.source-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.source-card:hover{ border-color:var(--blue); }
.source-icon{
  width:44px; height:44px;
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.source-icon.blue{ background:var(--blue-tint); color:var(--blue); }
.source-icon.violet{ background:var(--violet-tint); color:var(--violet); }
.source-icon.rose{ background:var(--rose-tint); color:var(--rose); }
.source-icon.teal{ background:var(--teal-tint); color:var(--teal-dark); }
.source-icon.amber{ background:var(--amber-tint); color:var(--amber); }
.source-card h4{ font-size:13.5px; font-weight:700; color:var(--text-heading); margin:0 0 3px; }
.source-card p{ font-size:11.5px; color:var(--text-muted); margin:0; line-height:1.4; }

.info-note-blue.ai-banner{
  background:linear-gradient(90deg, var(--blue-tint), var(--violet-tint));
  border-color:var(--blue);
  display:flex;
  align-items:center;
  gap:14px;
}
.ai-banner .ai-icon{
  width:36px; height:36px;
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--blue);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex-shrink:0;
  animation:pulse-dot 1.8s infinite;
}
.ai-banner strong{ display:block; font-size:13px; color:var(--blue-dark); margin-bottom:2px; }

/* --- Services table: muted text helpers (safe on <td> directly, no display conflicts) --- */
.svc-slug{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  color:var(--text-muted);
}
.svc-desc{
  display:block;
  max-width:340px;
  white-space:normal;
  margin-top:4px;
  font-size:10.5px;
  color:var(--text-muted);
  line-height:1.4;
}
.svc-muted-cell{
  color:var(--text-muted);
  font-size:11px;
}

/* =========================================================
   SERVICE SALE PANEL
   ========================================================= */
.service-tile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.service-tile{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.service-tile:hover{ border-color:var(--blue); background:var(--blue-tint); }
.service-tile .name{ font-size:13px; font-weight:700; color:var(--text-heading); }
.service-tile:hover .name{ color:var(--blue-dark); }
.service-tile .type{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.service-tile .price{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text-heading); white-space:nowrap; }
.service-tile .price.free{ font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--text-muted); }

/* =========================================================
   ADD WARRANTY FLOW 
   ========================================================= */
.scan-input-group{ display:flex; }
.scan-input-group .input-wrap{ flex:1; position:relative; }
.scan-input-group input{
  width:100%;
  padding:10px 12px 10px 36px;
  border-radius:var(--radius-md) 0 0 var(--radius-md);
  border:1px solid var(--border);
  border-right:none;
  background:var(--bg-subtle);
  font-size:13px;
  color:var(--text-heading);
}
.scan-input-group input:focus{ outline:none; border-color:var(--blue); background:#fff; }
.scan-input-group .scan-btn{
  padding:0 16px;
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-body);
  font-size:14px;
}
.scan-input-group .scan-btn:hover{ background:var(--border); }

.warranty-meta-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 16px;
  margin-bottom:16px;
}
.warranty-meta-header .eyebrow{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.warranty-meta-header h3{ font-family:var(--mono); font-size:14px; font-weight:700; color:var(--text-heading); margin:3px 0 0; }
.warranty-meta-header .val{ font-size:12.5px; font-weight:700; color:var(--text-heading); margin-top:3px; }
.warranty-meta-header .val span{ color:var(--text-muted); font-weight:500; }

.warranty-product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.warranty-product-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
}
.po-demo-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--blue);
  background:var(--blue-tint);
  padding:2px 7px;
  border-radius:var(--radius-sm);
}
.warranty-product-card h4{ font-size:14px; font-weight:700; color:var(--text-heading); margin:6px 0 0; }
.warranty-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.warranty-coverage-text{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:600;
  color:var(--text-muted);
  margin-top:8px;
}
.open-case-alert{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--amber-tint);
  border:1px solid var(--amber);
  border-radius:var(--radius-sm);
  padding:6px 10px;
  margin-top:8px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:#8a5a10;
  width:fit-content;
}
.open-case-alert a{ text-decoration:underline; color:#8a5a10; }
.open-case-alert a:hover{ color:#5c3a09; }

.warranty-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.warranty-summary-box{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
  margin-top:10px;
}
.warranty-summary-box h4{ font-size:12.5px; font-weight:700; color:var(--text-heading); margin:0 0 4px; }
.warranty-summary-box p{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); margin:0; }

/* --- Warranty: invoice not found state --- */
.warranty-not-found{
  text-align:center;
  padding:34px 20px;
  background:var(--bg-subtle);
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  max-width:480px;
  margin:0 auto;
}
.warranty-not-found .icon{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--rose-tint);
  color:var(--rose);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  margin:0 auto 14px;
}
.warranty-not-found h4{ font-size:13.5px; font-weight:700; color:var(--text-heading); margin:0 0 5px; }
.warranty-not-found p{ font-size:12px; color:var(--text-muted); margin:0 0 16px; line-height:1.5; }
.warranty-not-found p strong{ font-family:var(--mono); color:var(--text-heading); }

/* --- Add Invoice to Warranty modal: duration suffix row (reuse warranty pattern) --- */
.wm-duration-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

/* =========================================================
   GENERAL SETTINGS PANEL
   ========================================================= */
.settings-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:18px;
  align-items:start;
}
.settings-col{ display:flex; flex-direction:column; gap:16px; }

.logo-upload-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.logo-preview-box{
  width:150px; height:90px;
  background:var(--bg-subtle);
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text-muted);
  flex-shrink:0;
  overflow:hidden;
}
.logo-preview-box img{ width:100%; height:100%; object-fit:contain; }
.logo-preview-box i{ font-size:20px; margin-bottom:5px; color:var(--border-strong); }
.logo-preview-box span{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }

.upload-logo-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease;
}
.upload-logo-btn:hover{ background:var(--bg-subtle); }
.upload-logo-btn i{ color:var(--blue); }
.upload-hint-text{ font-size:11px; color:var(--text-muted); margin:8px 0 0; line-height:1.5; max-width:280px; }

.currency-info-box{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.currency-info-box .clabel{
  display:block;
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:5px;
}
.currency-info-box .cval{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
  color:var(--text-heading);
}
.currency-info-box .cval i{ color:var(--text-muted); }
.currency-info-box p{ margin:8px 0 0; font-size:10.5px; color:var(--text-muted); }
.currency-info-box p a{ font-weight:700; color:var(--blue); }

.settings-toast{
  display:none;
  align-items:flex-start;
  gap:10px;
  background:var(--teal-tint);
  border:1px solid var(--teal-dark);
  border-radius:var(--radius-lg);
  padding:14px 16px;
}
.settings-toast.show{ display:flex; }
.settings-toast .icon{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  flex-shrink:0;
  margin-top:1px;
}
.settings-toast h4{ font-size:12.5px; font-weight:700; color:var(--teal-dark); margin:0 0 2px; }
.settings-toast p{ font-size:11px; color:var(--text-body); margin:0; }

/* =========================================================
   APP FOOTER — fixed to bottom of viewport
   ========================================================= */
.app-footer{
  position:fixed;
  bottom:0;
  left:272px;
  right:0;
  z-index:40;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding:12px 28px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11.5px;
  color:var(--text-muted);
}
.app-footer-left{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.app-footer-left .copyright{ font-weight:600; color:var(--text-body); }
.app-footer-left .dot-sep{ color:var(--border-strong); }
.app-footer-signed-in{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-body);
  background:var(--bg-subtle);
  border:1px solid var(--border);
  padding:3px 10px;
  border-radius:var(--radius-sm);
}
.app-footer-right{
  display:flex;
  align-items:center;
  gap:16px;
  font-weight:600;
}
.app-footer-right a:hover{ color:var(--blue); }
.app-footer-version{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  color:var(--text-body);
  padding:2px 7px;
  border-radius:var(--radius-sm);
}

/* Prevent panel content from hiding behind the fixed footer */
.content{ padding-bottom:64px; }

/* =========================================================
   COURIER CONFIG PANELS (Pathao / Steadfast / Redex)
   ========================================================= */
.pos-card-header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  margin-bottom:16px;
}
.pos-card-header-row h3{
  font-family:'Manrope', sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--text-heading);
  margin:0 0 2px;
  display:flex;
  align-items:center;
  gap:8px;
}
.pos-card-header-row p{ margin:0; font-size:11px; color:var(--text-muted); }

.enabled-toggle-box{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:8px 12px;
  flex-shrink:0;
}
.enabled-toggle-box .toggle-label{ font-weight:700; color:var(--text-heading); }

.password-field-wrap{ position:relative; }
.password-field-wrap input{ padding-right:38px; }
.password-toggle-btn{
  position:absolute;
  right:10px; top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:var(--text-muted);
  font-size:12px;
}
.password-toggle-btn:hover{ color:var(--text-heading); }

.sandbox-toggle-box{
  display:flex;
  align-items:flex-start;
  gap:11px;
  background:var(--violet-tint);
  border:1px solid var(--violet);
  border-radius:var(--radius-md);
  padding:12px 14px;
  cursor:pointer;
}
.sandbox-toggle-box input{ margin-top:2px; accent-color:var(--violet); width:15px; height:15px; }
.sandbox-toggle-box .title{ font-size:12.5px; font-weight:700; color:var(--violet); display:block; }
.sandbox-toggle-box .desc{ font-size:10.5px; color:#5b4fa8; display:block; margin-top:2px; }

/* =========================================================
   USERS MANAGEMENT PANEL
   ========================================================= */
.user-avatar-circle{
  width:32px; height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}
.user-avatar-circle.amber{ background:var(--amber-tint); color:var(--amber); }
.user-avatar-circle.violet{ background:var(--violet-tint); color:var(--violet); }
.user-avatar-circle.blue{ background:var(--blue-tint); color:var(--blue); }

.status-dot-text{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--teal-dark);
}
.status-dot-text .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); }
.status-dot-text.inactive{ color:var(--text-muted); }
.status-dot-text.inactive .dot{ background:var(--border-strong); }

/* Selection cards (status / role / warehouse) — extends stock-type-card pattern */
.select-card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:13px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.select-card:hover{ background:var(--bg-subtle); }
.select-card-left{ display:flex; align-items:flex-start; gap:10px; }
.select-card input{ margin-top:2px; accent-color:var(--blue); width:14px; height:14px; }
.select-card .title{ font-size:12.5px; font-weight:700; color:var(--text-heading); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.select-card .desc{ font-size:11px; color:var(--text-muted); margin-top:3px; }
.select-card.checked{ border-color:var(--blue); background:var(--blue-tint); }

.perm-count-tag{
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  background:var(--bg-subtle);
  color:var(--text-muted);
  padding:2px 8px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  flex-shrink:0;
}
.perm-count-tag.highlight{ background:var(--blue-tint); color:var(--blue); }

.loc-type-tag{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  padding:2px 7px;
  border-radius:var(--radius-sm);
}
.loc-type-tag.branch{ background:var(--amber-tint); color:#8a5a10; }
.loc-type-tag.outlet{ background:var(--violet-tint); color:var(--violet); }
.loc-type-tag.warehouse{ background:var(--blue-tint); color:var(--blue); }

/* --- Users table: muted text helper (safe on <td> directly) --- */
.usr-muted-cell{
  color:var(--text-muted);
  font-size:11px;
}


/* =========================================================
   ROLES & PERMISSIONS PANEL
   ========================================================= */
.access-summary-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:340px;
}
.access-chip{
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:4px 9px;
  font-size:10.5px;
  white-space:nowrap;
}
.access-chip strong{ color:var(--text-heading); font-weight:700; }
.access-chip span{ color:var(--text-muted); }
.access-chip.more{
  background:var(--blue-tint);
  border-color:var(--blue);
  color:var(--blue);
  font-weight:700;
}

.module-filter-row{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.module-filter-row .flabel{
  display:block;
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:8px;
}

/* =========================================================
   EDIT ROLE — PERMISSIONS MATRIX MODAL
   ========================================================= */
.perm-matrix-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
  margin-bottom:14px;
}
.perm-matrix-header h4{
  font-size:11px;
  font-weight:800;
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin:0 0 2px;
}
.perm-matrix-header p{ margin:0; font-size:10.5px; color:var(--text-muted); }

.quick-select-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 14px;
  margin-bottom:14px;
}
.quick-select-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.quick-select-label{
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.col-select-btn{
  padding:5px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  font-size:10.5px;
  font-weight:700;
}
.col-select-btn:hover{ background:var(--border); }

.allnone-group{
  display:flex;
  gap:6px;
  border-left:1px solid var(--border-strong);
  padding-left:12px;
}
.btn-all-perms{
  padding:5px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--teal-dark);
  background:var(--teal);
  color:#04231f;
  font-size:10.5px;
  font-weight:700;
}
.btn-all-perms:hover{ background:var(--teal-dark); }
.btn-none-perms{
  padding:5px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:#fff;
  color:var(--text-body);
  font-size:10.5px;
  font-weight:700;
}
.btn-none-perms:hover{ background:var(--bg-subtle); }

.module-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:10px;
}
.module-card:last-child{ margin-bottom:0; }
.module-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 14px;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  cursor:pointer;
  user-select:none;
}
.module-header-left{ display:flex; align-items:center; gap:9px; }
.module-header .chevron{
  font-size:10px;
  color:var(--text-muted);
  transition:transform .2s ease;
}
.module-header.collapsed .chevron{ transform:rotate(-90deg); }
.module-header .mname{ font-size:12.5px; font-weight:800; color:var(--text-heading); }
.module-header .mcount{
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  background:var(--border);
  padding:2px 7px;
  border-radius:var(--radius-sm);
}
.module-status-label{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:2px 9px;
  border-radius:var(--radius-sm);
}
.module-status-label.none{ background:var(--bg-subtle); color:var(--text-muted); font-style:italic; }
.module-status-label.some{ background:var(--amber-tint); color:#8a5a10; }
.module-status-label.all{ background:var(--teal-tint); color:var(--teal-dark); }

.module-body{ overflow:hidden; }
.module-header.collapsed + .module-body{ display:none; }

.perm-row{
  display:grid;
  grid-template-columns:1.6fr repeat(5, 1fr);
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--bg-subtle);
}
.perm-row:last-child{ border-bottom:none; }
.perm-row:hover{ background:var(--bg-subtle); }
.perm-row .sub-name{ font-size:12px; font-weight:700; color:var(--text-heading); }
.perm-row .sub-path{ display:block; font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-top:2px; }
.perm-row .col-cell{ display:flex; justify-content:center; }
.perm-row .col-cell input{ width:15px; height:15px; accent-color:var(--blue); cursor:pointer; }
.perm-col-labels{
  display:grid;
  grid-template-columns:1.6fr repeat(5, 1fr);
  padding:0 14px 8px;
  gap:10px;
}
.perm-col-labels span{
  text-align:center;
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.perm-col-labels span:first-child{ text-align:left; visibility:hidden; }

/* =========================================================
   ADD ROLE MODAL — everything needed
   ========================================================= */
.perm-matrix-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
  margin-bottom:14px;
}
.perm-matrix-header h4{
  font-size:11px;
  font-weight:800;
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin:0 0 2px;
}
.perm-matrix-header p{ margin:0; font-size:10.5px; color:var(--text-muted); }

.quick-select-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 14px;
  margin-bottom:14px;
}
.quick-select-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.quick-select-label{
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
}
.col-select-btn{
  padding:5px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  font-size:10.5px;
  font-weight:700;
}
.col-select-btn:hover{ background:var(--border); }

.allnone-group{
  display:flex;
  gap:6px;
  border-left:1px solid var(--border-strong);
  padding-left:12px;
}
.btn-all-perms{
  padding:5px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--teal-dark);
  background:var(--teal);
  color:#04231f;
  font-size:10.5px;
  font-weight:700;
}
.btn-all-perms:hover{ background:var(--teal-dark); }
.btn-none-perms{
  padding:5px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);
  background:#fff;
  color:var(--text-body);
  font-size:10.5px;
  font-weight:700;
}
.btn-none-perms:hover{ background:var(--bg-subtle); }

.perm-col-labels{
  display:grid;
  grid-template-columns:1.6fr repeat(5, 1fr);
  padding:0 14px 8px;
  gap:10px;
}
.perm-col-labels span{
  text-align:center;
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.perm-col-labels span:first-child{ text-align:left; visibility:hidden; }

.module-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:10px;
}
.module-card:last-child{ margin-bottom:0; }
.module-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 14px;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  cursor:pointer;
  user-select:none;
}
.module-header-left{ display:flex; align-items:center; gap:9px; }
.module-header .chevron{
  font-size:10px;
  color:var(--text-muted);
  transition:transform .2s ease;
}
.module-header.collapsed .chevron{ transform:rotate(-90deg); }
.module-header .mname{ font-size:12.5px; font-weight:800; color:var(--text-heading); }
.module-header .mcount{
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  background:var(--border);
  padding:2px 7px;
  border-radius:var(--radius-sm);
}
.module-status-label{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:2px 9px;
  border-radius:var(--radius-sm);
}
.module-status-label.none{ background:var(--bg-subtle); color:var(--text-muted); font-style:italic; }
.module-status-label.some{ background:var(--amber-tint); color:#8a5a10; }
.module-status-label.all{ background:var(--teal-tint); color:var(--teal-dark); }

.module-body{ overflow:hidden; }
.module-header.collapsed + .module-body{ display:none; }

.perm-row{
  display:grid;
  grid-template-columns:1.6fr repeat(5, 1fr);
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--bg-subtle);
}
.perm-row:last-child{ border-bottom:none; }
.perm-row:hover{ background:var(--bg-subtle); }
.perm-row .sub-name{ font-size:12px; font-weight:700; color:var(--text-heading); }
.perm-row .sub-path{ display:block; font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-top:2px; }
.perm-row .col-cell{ display:flex; justify-content:center; }
.perm-row .col-cell input{ width:15px; height:15px; accent-color:var(--blue); cursor:pointer; }

.modal-footer.split{
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer-progress{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:180px;
}
.progress-track{
  flex:1;
  height:6px;
  border-radius:999px;
  background:var(--border);
  overflow:hidden;
  max-width:200px;
}
.progress-fill{
  height:100%;
  width:0%;
  background:var(--teal);
  border-radius:999px;
  transition:width .2s ease;
}
#progress-label{
  font-size:11px;
  font-weight:700;
  color:var(--text-muted);
  white-space:nowrap;
}
.footer-actions{ display:flex; gap:10px; }

/* =========================================================
   PERMISSIONS CATALOG PANEL
   ========================================================= */
.perm-badges-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-top:10px;
  margin-top:10px;
  border-top:1px solid var(--border);
  font-size:11.5px;
  color:var(--text-body);
}
.perm-badges-row strong{ color:var(--text-heading); margin-right:4px; }

.perm-catalog-headrow{
  display:grid;
  grid-template-columns:1fr 2.4fr;
  gap:16px;
  padding:9px 16px;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
}

.perm-module-block{
  display:grid;
  grid-template-columns:1fr 2.4fr;
  gap:16px;
  padding:16px;
  border-bottom:1px solid var(--border);
  align-items:start;
}
.perm-module-block:last-child{ border-bottom:none; }
.perm-module-info .mtitle{ font-size:13px; font-weight:800; color:var(--text-heading); }
.perm-module-info .mmeta{ font-size:10.5px; color:var(--text-muted); margin-top:3px; }

.perm-subrows{ display:flex; flex-direction:column; gap:8px; }
.perm-subrow{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  align-items:center;
  gap:10px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:9px 12px;
}
.perm-subrow .sname{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.perm-subrow .spath{ display:block; font-family:var(--mono); font-size:10px; color:var(--text-muted); margin-top:2px; }
.perm-subrow .action-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.perm-subrow .slug-tag{
  font-family:var(--mono);
  font-weight:700;
  font-size:10.5px;
  color:var(--text-body);
  background:#fff;
  border:1px solid var(--border);
  padding:3px 8px;
  border-radius:var(--radius-sm);
  text-align:right;
  justify-self:end;
}

.action-chip{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.02em;
  padding:2px 7px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.action-chip.view{ background:var(--bg-subtle); border:1px solid var(--border); color:var(--text-muted); }
.action-chip.add-edit{ background:var(--amber-tint); border:1px solid var(--amber); color:#8a5a10; }
.action-chip.delete{ background:var(--rose-tint); border:1px solid var(--rose); color:var(--rose); }
.action-chip.sync{ background:var(--blue-tint); border:1px solid var(--blue); color:var(--blue); }
.action-chip.approve{ background:var(--violet-tint); border:1px solid var(--violet); color:var(--violet); }


/* --- Permissions catalog: clickable filter chips + collapsible modules --- */
.action-chip.clickable{ cursor:pointer; transition:transform .12s ease, box-shadow .15s ease; border-width:1px; }
.action-chip.clickable:hover{ transform:translateY(-1px); }
.action-chip.clickable.active{ box-shadow:0 0 0 2px rgba(15,23,42,0.12); font-weight:900; }

.perm-module-info{ cursor:pointer; user-select:none; }
.perm-module-info .mtitle{ display:flex; align-items:center; gap:8px; }
.perm-module-info .mtitle .chevron{
  font-size:10px;
  color:var(--text-muted);
  transition:transform .2s ease;
  flex-shrink:0;
}
.perm-module-block.collapsed .mtitle .chevron{ transform:rotate(-90deg); }
.perm-module-block.collapsed .perm-subrows{ display:none; }


/* =========================================================
   CUSTOMERS PANEL
   ========================================================= */
.cust-name-cell{ display:flex; align-items:center; gap:10px; }
.cust-avatar-circle{
  width:30px; height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
  color:#fff;
}
.cust-avatar-circle.c1{ background:var(--blue); }
.cust-avatar-circle.c2{ background:var(--violet); }
.cust-avatar-circle.c3{ background:var(--teal); }
.cust-avatar-circle.c4{ background:var(--amber); }
.cust-avatar-circle.c5{ background:var(--rose); }

.cust-name-text{ font-weight:700; color:var(--text-heading); }
.credit-badge{
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  background:var(--blue-tint);
  color:var(--blue);
  padding:2px 7px;
  border-radius:var(--radius-sm);
  margin-left:6px;
}

.addr-cell{
  display:flex;
  align-items:flex-start;
  gap:5px;
  max-width:220px;
  font-size:11.5px;
}
.addr-cell i{ color:var(--text-muted); font-size:10px; margin-top:2px; flex-shrink:0; }
.addr-cell .addr-type{ font-weight:700; color:var(--text-body); }
.addr-cell .addr-text{
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.btn-view-outline{
  padding:6px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-body);
  font-size:11px;
  font-weight:700;
}
.btn-view-outline:hover{ background:var(--border); }
.btn-edit-amber{
  padding:6px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--amber);
  background:var(--amber);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.btn-edit-amber:hover{ background:#b56a12; }

/* --- Customers table: muted text helper (safe on <td> directly) --- */
.cust-muted-cell{
  color:var(--text-muted);
  font-size:11px;
}

/* =========================================================
   ADD CUSTOMER MODAL (multi-address)
   ========================================================= */
.addr-section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
  margin-bottom:14px;
}
.addr-section-head h4{
  font-size:11px;
  font-weight:800;
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin:0 0 2px;
  display:flex;
  align-items:center;
  gap:7px;
}
.addr-section-head p{ margin:0; font-size:10.5px; color:var(--text-muted); }

.address-item{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:4px solid var(--blue);
  border-radius:var(--radius-md);
  padding:16px;
  margin-bottom:12px;
  transition:border-left-color .2s ease;
}
.address-item:last-child{ margin-bottom:0; }
.address-item.type-billing{ border-left-color:var(--blue); }
.address-item.type-shipping{ border-left-color:var(--teal); }
.address-item.type-home{ border-left-color:var(--amber); }
.address-item.type-office{ border-left-color:var(--violet); }
.address-item.type-other{ border-left-color:var(--border-strong); }

.addr-item-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
  margin-bottom:14px;
}
.addr-type-select-wrap{ display:flex; align-items:center; gap:8px; }
.addr-type-select-wrap .lbl{
  font-size:9.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.addr-type-select{
  padding:6px 26px 6px 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:11.5px;
  font-weight:700;
  color:var(--text-heading);
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23475269' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:9px;
}
.addr-type-select:focus{ outline:none; border-color:var(--blue); }

.addr-item-actions{ display:flex; align-items:center; gap:6px; }
.default-btn{
  padding:5px 11px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-muted);
  font-size:10.5px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.default-btn:hover{ background:var(--border); }
.default-btn.is-default{
  background:var(--blue-tint);
  border-color:var(--blue);
  color:var(--blue);
}
.addr-remove-btn{
  width:26px; height:26px;
  border-radius:var(--radius-sm);
  border:none;
  background:var(--rose-tint);
  color:var(--rose);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}
.addr-remove-btn:hover{ background:#f6d3d9; }

.addr-fields-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.addr-fields-grid input{
  width:100%;
  padding:9px 11px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:12.5px;
  color:var(--text-heading);
}
.addr-fields-grid input:focus{ outline:none; border-color:var(--blue); background:#fff; }

/* =========================================================
   CUSTOMER GROUPS PANEL — table format
   ========================================================= */
.group-count-cell{ display:flex; flex-direction:column; gap:5px; min-width:120px; }
.group-count-cell .num{ font-family:var(--mono); font-weight:700; color:var(--text-heading); font-size:13px; }
.group-share-bar-track{
  height:6px;
  border-radius:999px;
  background:var(--bg-subtle);
  overflow:hidden;
  width:100%;
}
.group-share-bar-fill{ height:100%; border-radius:999px; background:var(--blue); }
.group-share-label{ font-size:10px; color:var(--text-muted); font-weight:600; }


/* =========================================================
   EDIT CUSTOMER GROUP MODAL
   ========================================================= */
.stepper-input-group{
  display:flex;
  align-items:stretch;
  max-width:160px;
}
.stepper-input-group input{
  flex:1;
  min-width:0;
  text-align:center;
  border-radius:0;
  border-left:none;
  border-right:none;
}
.stepper-btn{
  width:36px;
  flex-shrink:0;
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-body);
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stepper-btn:first-child{ border-radius:var(--radius-md) 0 0 var(--radius-md); }
.stepper-btn:last-child{ border-radius:0 var(--radius-md) var(--radius-md) 0; }
.stepper-btn:hover{ background:var(--border); }


/* --- Customer Credit: view icon variant --- */
.icon-action.view{ background:var(--bg-subtle); color:var(--text-body); border-color:var(--border); }
.icon-action.view:hover{ background:var(--border); }

/* --- Center this specific modal vertically --- */
#edit-customer-credit-modal{
  align-items:center;
}


/* --- Warehouses: unassigned manager indicator --- */
.unassigned-mgr{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--rose);
  font-weight:700;
}
.unassigned-mgr i{ color:var(--rose); font-size:14px; opacity:0.6; }

/* --- Add Warehouse: account category headers + balance tag --- */
.account-category-head{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:9px;
}
.account-balance-tag{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--teal-dark);
  margin-top:4px;
}
.select-card .desc.mono-code{ font-family:var(--mono); font-size:10px; }

/* =========================================================
   STAFF LOGIN PAGE (supplier-login.html)
   ========================================================= */
.login-page-body{
  margin:0;
  min-height:100vh;
  display:flex;
  font-family:'Inter', sans-serif;
  background:var(--bg-app);
}

.login-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  min-height:100vh;
}

/* Left brand panel */
.login-brand-panel{
  background:var(--ink-950);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:44px;
  color:#fff;
}
.login-brand-panel .pattern-layer{
  position:absolute;
  inset:0;
  opacity:0.5;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(31,199,182,0.16) 0, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(124,107,242,0.14) 0, transparent 40%);
  pointer-events:none;
}
.login-brand-panel .grid-dots{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}

.login-brand-top{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.login-brand-top .mark{
  width:38px; height:38px;
  border-radius:var(--radius-md);
  background:var(--teal);
  color:#04231f;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.login-brand-top span{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:0.01em;
}

.login-brand-mid{ position:relative; z-index:1; max-width:420px; }
.login-brand-mid h1{
  font-family:'Manrope', sans-serif;
  font-size:34px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 14px;
}
.login-brand-mid h1 span{ color:var(--teal); }
.login-brand-mid p{
  font-size:13.5px;
  color:#9aa5bd;
  line-height:1.6;
  margin:0;
}

.login-brand-stats{
  position:relative;
  z-index:1;
  display:flex;
  gap:26px;
}
.login-brand-stats .stat .n{
  font-family:var(--mono);
  font-size:20px;
  font-weight:700;
  color:#fff;
}
.login-brand-stats .stat .l{ font-size:10.5px; color:#8894a8; margin-top:2px; }

.login-brand-bottom{ position:relative; z-index:1; font-size:11px; color:#697690; }

/* Right form panel */
.login-form-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:var(--bg-card);
}
.login-form-box{ width:100%; max-width:380px; }
.login-form-box .eyebrow{
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.login-form-box h2{
  font-family:'Manrope', sans-serif;
  font-size:23px;
  font-weight:800;
  color:var(--text-heading);
  margin:4px 0 6px;
}
.login-form-box .sub{ font-size:13px; color:var(--text-muted); margin:0 0 28px; }

.login-form-box .form-field label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--text-body);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:6px;
}

.login-row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 0 22px;
  font-size:12px;
}
.login-remember{ display:flex; align-items:center; gap:7px; color:var(--text-body); cursor:pointer; }
.login-remember input{ width:14px; height:14px; accent-color:var(--teal); }
.login-forgot{ font-weight:700; color:var(--blue); }
.login-forgot:hover{ color:var(--blue-dark); }

.btn-login-submit{
  width:100%;
  padding:12px;
  border-radius:var(--radius-md);
  border:1px solid var(--teal-dark);
  background:var(--teal);
  color:#04231f;
  font-size:13.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s ease;
}
.btn-login-submit:hover{ background:var(--teal-dark); }

.login-footer-note{
  text-align:center;
  font-size:11px;
  color:var(--text-muted);
  margin-top:24px;
}
.login-footer-note a{ font-weight:700; color:var(--blue); }

/* --- Staff login: demo credentials box (teal variant) --- */
.demo-creds-box.teal-variant{ border-color:var(--border-strong); }
.demo-creds-box.teal-variant .head i{ color:var(--teal); }
.btn-fill-demo.teal-variant{
  border-color:var(--teal-dark);
  background:var(--teal-tint);
  color:var(--teal-dark);
}
.btn-fill-demo.teal-variant:hover{ background:#d0f0eb; }


/* =========================================================
   SUPPLIER PORTAL LOGIN PAGE (supplier-portal-login.html)
   ========================================================= */
.supplier-login-body{
  margin:0;
  min-height:100vh;
  font-family:'Inter', sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(124,107,242,0.16) 0, transparent 48%),
    radial-gradient(circle at 88% 15%, rgba(245,165,36,0.12) 0, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(47,75,214,0.10) 0, transparent 50%),
    var(--bg-app);
}
.supplier-login-body .mesh-glow{ display:none; }
.supplier-login-body .grid-dots{
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
}

.supplier-login-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  background:var(--bg-card);
  border:1px solid var(--ink-line);
  border-radius:var(--radius-lg);
  padding:36px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.55);
}

.supplier-login-icon{
  width:52px; height:52px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--violet), var(--blue));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  margin:0 auto 18px;
}

.supplier-login-card h2{
  font-family:'Manrope', sans-serif;
  font-size:20px;
  font-weight:800;
  color:var(--text-heading);
  text-align:center;
  margin:0 0 5px;
}
.supplier-login-card .sub{
  text-align:center;
  font-size:12.5px;
  color:var(--text-muted);
  margin:0 0 26px;
}

.supplier-login-card .form-field label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--text-body);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:6px;
}

.btn-supplier-submit{
  width:100%;
  padding:12px;
  border-radius:var(--radius-md);
  border:1px solid var(--violet);
  background:var(--violet);
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:6px;
  transition:background .15s ease;
}
.btn-supplier-submit:hover{ background:#5943c9; }

.demo-creds-box{
  margin-top:22px;
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-md);
  padding:14px 16px;
  background:var(--bg-subtle);
}
.demo-creds-box .head{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin-bottom:9px;
}
.demo-creds-box .head i{ color:var(--amber); }
.demo-cred-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  padding:4px 0;
}
.demo-cred-row .k{ color:var(--text-muted); font-weight:600; }
.demo-cred-row .v{ font-family:var(--mono); font-weight:700; color:var(--text-heading); }
.btn-fill-demo{
  width:100%;
  margin-top:10px;
  padding:8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--amber);
  background:var(--amber-tint);
  color:#8a5a10;
  font-size:11.5px;
  font-weight:700;
}
.btn-fill-demo:hover{ background:#fbe4c0; }

.supplier-login-footer{
  text-align:center;
  font-size:11px;
  color:var(--text-muted);
  margin-top:20px;
}
.supplier-login-footer a{ font-weight:700; color:var(--violet); }

/* =========================================================
   ORDER MANAGEMENT PANEL
   ========================================================= */
.order-total-line{
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
  margin-bottom:14px;
}
.order-total-line strong{
  font-family:var(--mono);
  color:var(--text-heading);
  font-weight:700;
}

/* Reload button with spin-on-click processing feel */
.btn-reload{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.btn-reload i{ transition:transform .2s ease; }
.btn-reload.spinning i{
  animation:reload-spin 0.8s linear infinite;
}
@keyframes reload-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Aging pill */
.aging-pill{
  display:inline-block;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  background:var(--teal-tint);
  color:var(--teal-dark);
}
.aging-pill.today{ background:var(--bg-subtle); color:var(--text-muted); }
.aging-pill.warn{ background:var(--amber-tint); color:#8a5a10; }
.aging-pill.danger{ background:var(--rose-tint); color:var(--rose); }

.place-status-link{ font-weight:700; color:var(--blue); }
.place-status-text{ font-style:italic; color:var(--text-muted); font-size:11.5px; }

/* Icon-only action buttons for order rows */
.order-action-btn{
  width:28px; height:28px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}
.order-action-btn.process{ background:var(--blue-tint); color:var(--blue); }
.order-action-btn.process:hover{ background:#dde5fc; }
.order-action-btn.receive{ background:var(--teal-tint); color:var(--teal-dark); }
.order-action-btn.receive:hover{ background:#d0f0eb; }
.order-action-btn.cancel{ background:var(--rose-tint); color:var(--rose); }
.order-action-btn.cancel:hover{ background:#f6d3d9; }
.order-action-btn.print{ background:var(--violet-tint); color:var(--violet); }
.order-action-btn.print:hover{ background:#e0dcfa; }
.order-action-btn.voucher{ background:var(--bg-subtle); color:var(--text-body); border-color:var(--border); }
.order-action-btn.voucher:hover{ background:var(--border); }
.order-action-btn.deliver{ background:var(--teal-tint); color:var(--teal-dark); }
.order-action-btn.deliver:hover{ background:#d0f0eb; }
.order-action-btn.disabled{ opacity:0.35; cursor:not-allowed; pointer-events:none; }

.order-status-pill.cancelled{ background:var(--rose-tint); color:var(--rose); }
.order-status-pill.approved{ background:var(--blue-tint); color:var(--blue); }
.order-status-pill.ontheway{ background:var(--amber-tint); color:#8a5a10; }
.order-status-pill.pending{ background:var(--bg-subtle); color:var(--text-muted); }

/* --- Order Management: safe muted-cell class (no more cell-sub conflicts) --- */
.order-muted-cell{ color:var(--text-muted); font-size:11.5px; }

/* --- Order Management: connected pipeline flow --- */
.tab-filter-group.connected{
  position:relative;
  align-items:center;
}
.tab-connector{
  display:flex;
  align-items:center;
  color:var(--border-strong);
  font-size:11px;
  padding:0 2px;
  transition:color .2s ease;
}
.tab-connector.reached{ color:var(--teal); }
.tab-filter-btn.passed{
  background:var(--teal-tint);
  color:var(--teal-dark);
}
.tab-filter-btn.passed:hover{ background:#d0f0eb; }

/* --- Order Management: numbered-circle pipeline (replaces chevron connectors) --- */
.op-pipeline-wrap{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
  overflow-x:auto;
  padding-bottom:4px;
}
.op-pipeline-line{
  position:absolute;
  left:16px; right:16px; top:16px;
  height:2px;
  background:var(--border);
  z-index:0;
}
.op-pipeline-line-fill{
  position:absolute;
  left:0; top:0;
  height:100%;
  width:0%;
  background:var(--teal);
  transition:width .25s ease;
}

.op-step-item{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:110px;
  border:none;
  cursor:pointer;
  padding:0;
}
.op-step-circle{
  width:32px; height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  background:#D41D5E;
  border:2px solid #D41D5E;
  color:#fff;
  transition:all .2s ease;
  flex-shrink:0;
}
.op-step-item.active .op-step-circle{
  background:var(--teal);
  border-color:var(--teal-dark);
  color:#04231f;
  box-shadow:0 0 0 3px var(--teal-tint);
}
.op-step-item.passed .op-step-circle{
  background:var(--teal-dark);
  border-color:var(--teal-dark);
  color:#fff;
}
.op-step-label{
  font-size:11px;
  font-weight:700;
  color:var(--text-muted);
  margin-top:8px;
  text-align:center;
  line-height:1.3;
}
.op-step-item.active .op-step-label{ color:var(--teal-dark); }
.op-step-item.passed .op-step-label{ color:var(--text-body); }
.op-step-count{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text-muted);
  margin-top:2px;
}

/* --- Sidebar: notification count badge next to a submenu link --- */
.nav-submenu a.with-badge{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-badge{
  background:var(--rose);
  color:#fff;
  font-family:var(--mono);
  font-size:9px;
  font-weight:800;
  padding:1px 6px;
  border-radius:999px;
  line-height:1.5;
}

/* Supplier Login Panel Start*/

/* --- Order actions: Edit / Approve variants (for Pending stage) --- */
.order-action-btn.edit{ background:var(--rose-tint); color:var(--rose); }
.order-action-btn.edit:hover{ background:#f6d3d9; }
.order-action-btn.approve{ background:var(--teal-tint); color:var(--teal-dark); }
.order-action-btn.approve:hover{ background:#d0f0eb; }


/* =========================================================
   ADD NEW ORDER MODAL
   ========================================================= */
.ord-info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin:14px 0;
}
.ord-info-row{ display:flex; align-items:center; gap:8px; font-size:12px; }
.ord-info-row .k{ font-weight:700; color:var(--text-body); white-space:nowrap; }
.ord-info-row .v{
  font-family:var(--mono);
  color:var(--text-heading);
  font-weight:600;
  border-bottom:1px dashed var(--border-strong);
  padding-bottom:2px;
  flex:1;
}
.ord-info-row .v.empty{ color:var(--text-muted); font-weight:500; }

.btn-add-item{
  padding:10px 22px;
  border-radius:var(--radius-md);
  border:1px solid var(--amber);
  background:var(--amber);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:7px;
}
.btn-add-item:hover{ background:#b56a12; }


/* =========================================================
   ORDER TABLE: actions dropdown (kebab menu)
   ========================================================= */
.order-actions-dropdown{
  position:relative;
  display:inline-block;
}
.order-actions-trigger{
  width:28px; height:28px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-body);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
.order-actions-trigger:hover{ background:var(--border); }
.order-actions-trigger.active{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }

.order-actions-menu{
  display:none;
  position:fixed;
  min-width:180px;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  box-shadow:0 16px 32px -12px rgba(15,23,42,0.22);
  z-index:9999;
  padding:5px;
}
.order-actions-menu.show{ display:block; }

.order-actions-menu-item{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:8px 10px;
  border:none;
  background:transparent;
  border-radius:var(--radius-sm);
  font-size:12px;
  font-weight:600;
  color:var(--text-body);
  text-align:left;
}
.order-actions-menu-item:hover{ background:var(--bg-subtle); }
.order-actions-menu-item i{ width:16px; text-align:center; font-size:12px; }
.order-actions-menu-item.process i{ color:var(--blue); }
.order-actions-menu-item.receive i{ color:var(--teal-dark); }
.order-actions-menu-item.deliver i{ color:var(--teal-dark); }
.order-actions-menu-item.print i{ color:var(--violet); }
.order-actions-menu-item.voucher i{ color:var(--text-muted); }
.order-actions-menu-item.edit i{ color:var(--rose); }
.order-actions-menu-item.approve i{ color:var(--teal-dark); }
.order-actions-menu-item.cancel{ color:var(--rose); }
.order-actions-menu-item.cancel i{ color:var(--rose); }
.order-actions-menu-item.disabled{ opacity:0.4; cursor:not-allowed; pointer-events:none; }


/* =========================================================
   ACCOUNTS OVERVIEW PANEL
   ========================================================= */
.acct-hero-card{
  background:#D41D5E;
  border-radius:var(--radius-lg);
  padding:22px;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.acct-hero-card .bg-icon{
  position:absolute;
  right:8px; bottom:-14px;
  font-size:76px;
  color:rgba(255,255,255,0.05);
}
.acct-hero-card .eyebrow{
  font-size:10px;
  font-weight:700;
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.acct-hero-card .amt{
  font-family:'Manrope', sans-serif;
  font-size:28px;
  font-weight:800;
  color:#fff;
  margin:6px 0 8px;
}
.acct-hero-card .status-line{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#f4f4f4;
}
.acct-hero-card .status-line i{ color:var(--teal); font-size:10px; }

.asset-row{
  padding:10px 0;
  border-bottom:1px solid var(--bg-subtle);
}
.asset-row:last-child{ border-bottom:none; }
.asset-row-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
}
.asset-row-left{ display:flex; align-items:center; gap:10px; }
.asset-icon-box{
  width:34px; height:34px;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  flex-shrink:0;
}
.asset-row .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.asset-row .desc{ font-size:10.5px; color:var(--text-muted); margin-top:1px; }
.asset-row .amt{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text-heading); }
.asset-row.hold{ background:var(--amber-tint); border-radius:var(--radius-md); padding:10px 0px; border-bottom:none; margin-bottom:4px; }
.asset-row.hold .name, .asset-row.hold .amt{ color:#8a5a10; }

.acct-ledger-list{ display:flex; flex-direction:column; gap:8px; }
.acct-ledger-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 12px;
}
.acct-ledger-row .name{ font-size:12.5px; font-weight:700; color:var(--text-heading); }
.acct-ledger-row .meta{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.acct-ledger-row .amt{ font-family:var(--mono); font-size:13px; font-weight:700; }
.acct-ledger-row .amt.income{ color:var(--teal-dark); }
.acct-ledger-row .amt.expense{ color:var(--rose); }

/* =========================================================
   POS ORDERS ACTION MODALS
   ========================================================= */
.modal-box.full{ max-width:900px; }

.btn-navy{
  padding:10px 18px;
  border-radius:5px;
  border:1px solid var(--ink-900);
  background:var(--ink-950);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.btn-navy:hover{ background:#000; }
.btn-orange-solid{
  padding:10px 20px;
  border-radius:5px;
  border:none;
  background:var(--db-orange);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
}
.btn-orange-solid:hover{ background:var(--db-orange-dark); }

/* Sale Detail */
.sd-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border);
}
.sd-detail-block h5{
  font-size:11px;
  font-weight:700;
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:0.03em;
  margin:0 0 8px;
}
.sd-detail-block .name{ font-size:13.5px; font-weight:700; color:var(--text-heading); margin:0 0 4px; }
.sd-detail-block p{ margin:0 0 3px; font-size:11.5px; color:var(--text-body); line-height:1.5; }
.sd-info-row{ display:flex; gap:6px; font-size:11.5px; margin-bottom:4px; }
.sd-info-row .k{ color:var(--text-muted); }
.sd-info-row .v{ font-weight:700; color:var(--text-heading); }
.sd-info-row .v.ref{ color:var(--db-orange-dark); font-family:var(--mono); }

/* Edit Sale table qty stepper (compact) */
.sale-qty-stepper{ display:inline-flex; align-items:center; gap:6px; background:var(--blue-tint); border-radius:var(--radius-sm); padding:4px 6px; }
.sale-qty-stepper button{ width:20px; height:20px; border-radius:50%; border:none; background:transparent; color:var(--blue); font-size:11px; display:flex; align-items:center; justify-content:center; }
.sale-qty-stepper button:hover{ background:rgba(255,255,255,0.6); }
.sale-qty-stepper .val{ font-family:var(--mono); font-weight:700; font-size:12px; color:var(--blue-dark); min-width:14px; text-align:center; }

/* Payments table action icons */
.pay-row-actions{ display:flex; gap:5px; justify-content:center; }
.pay-icon-btn{
  width:26px; height:26px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-body);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px;
}
.pay-icon-btn:hover{ background:var(--bg-subtle); }
.pay-icon-btn.delete:hover{ color:var(--rose); border-color:var(--rose); }

/* Simple description editor (no code tab) */
.pay-desc-editor{ border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.pay-desc-toolbar{ display:flex; align-items:center; gap:2px; padding:7px 9px; background:var(--bg-subtle); border-bottom:1px solid var(--border); }
.pay-desc-body{ padding:12px; min-height:80px; font-size:13px; color:var(--text-body); }
.pay-desc-body:focus{ outline:none; }
.char-limit-note{ font-size:10.5px; color:var(--text-muted); margin-top:5px; }

/* =========================================================
   SALES RETURN PANEL
   ========================================================= */
.sret-prod-cell{ display:flex; align-items:center; gap:10px; }


/* =========================================================
   SALES REPORT PANEL
   ========================================================= */
.report-stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:16px; }
.report-stat-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.report-stat-card.green{ border-color:var(--teal-dark); }
.report-stat-card.blue{ border-color:var(--blue); }
.report-stat-card.orange{ border-color:var(--db-orange-dark); }
.report-stat-card.red{ border-color:var(--rose); }
.report-stat-card .icon-box{ width:38px; height:38px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff; flex-shrink:0; }
.report-stat-card.green .icon-box{ background:var(--teal); }
.report-stat-card.blue .icon-box{ background:var(--blue); }
.report-stat-card.orange .icon-box{ background:var(--db-orange); }
.report-stat-card.red .icon-box{ background:var(--rose); }
.report-stat-card .lbl{ font-size:11.5px; color:var(--text-muted); margin-bottom:3px; }
.report-stat-card .amt{ font-family:'Manrope', sans-serif; font-size:17px; font-weight:800; color:var(--text-heading); }

.report-filter-row{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr 1fr auto;
  gap:12px;
  align-items:end;
  margin-bottom:16px;
}
.report-filter-row label{ display:block; font-size:11px; font-weight:700; color:var(--text-body); margin-bottom:6px; }
.report-search-wrap{ position:relative; }
.report-search-wrap input{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  font-size:12.5px;
  color:var(--text-heading);
}
.report-search-wrap input:focus{ outline:none; border-color:var(--blue); background:#fff; }

/* --- Supplier Report/Due: muted text helper (safe on <td> directly) --- */
.sup-muted-cell{ color:var(--text-muted); font-size:11px; }

/* --- Customer Report/Due: muted text helper + avatar --- */
.crep-muted-cell{ color:var(--text-muted); font-size:11px; }
.crep-cust-cell{ display:flex; align-items:center; gap:9px; }

/* --- Product Report: muted text helper --- */
.prep-muted-cell{ color:var(--text-muted); font-size:11px; }
.tax-muted-cell{ color:var(--text-muted); font-size:11px; }
.exprep-muted-cell{ color:var(--text-muted); font-size:11px; }

/* --- Profit/Loss Report matrix table --- */
.pl-matrix-table{ width:100%; border-collapse:collapse; font-size:12px; }
.pl-matrix-table th{
  text-align:left;
  padding:10px 16px;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  font-size:11px;
  font-weight:700;
  color:var(--text-heading);
  white-space:nowrap;
}
.pl-matrix-table td{
  padding:9px 16px;
  border-bottom:1px solid var(--bg-subtle);
  color:var(--text-body);
  white-space:nowrap;
}
.pl-matrix-table tr.pl-section-row td{ font-weight:800; color:var(--text-heading); background:var(--bg-subtle); }
.pl-matrix-table tr.pl-summary-row td{ font-weight:800; color:var(--text-heading); border-top:1px solid var(--border); }
.pl-matrix-table td.pl-row-label{ color:var(--blue); }
.pl-matrix-table tr.pl-section-row td.pl-row-label,
.pl-matrix-table tr.pl-summary-row td.pl-row-label{ color:var(--text-heading); }

/* =========================================================
   ANNUAL REPORT: year picker + matrix table
   ========================================================= */
.year-picker-wrap{ position:relative; }
.year-picker-field{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:#fff;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-body);
  cursor:pointer;
}
.year-picker-panel{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  box-shadow:0 16px 32px -12px rgba(15,23,42,0.22);
  z-index:70;
  padding:12px;
  width:220px;
}
.year-picker-panel.show{ display:block; }
.year-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-heading);
}
.year-picker-head button{
  width:24px; height:24px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-subtle);
  color:var(--text-body);
  font-size:11px;
}
.year-picker-head button:hover{ background:var(--border); }
.year-picker-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
}
.year-picker-grid button{
  padding:8px 0;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  font-size:12px;
  font-weight:600;
  color:var(--text-body);
}
.year-picker-grid button:hover{ background:var(--bg-subtle); }
.year-picker-grid button.today{ background:var(--bg-subtle); color:var(--text-muted); }
.year-picker-grid button.selected{ background:var(--blue); color:#fff; font-weight:700; }

.annual-matrix-table{ width:100%; border-collapse:collapse; font-size:12px; }
.annual-matrix-table th{
  text-align:left;
  padding:10px 16px;
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  font-size:11px;
  font-weight:700;
  color:var(--text-heading);
  white-space:nowrap;
}
.annual-matrix-table td{
  padding:9px 16px;
  border-bottom:1px solid var(--bg-subtle);
  color:var(--text-body);
  white-space:nowrap;
}
.annual-matrix-table td.annual-row-label{ color:var(--blue); font-weight:600; }
.annual-matrix-table tr.annual-total-row td{ font-weight:800; color:var(--text-heading); border-top:1px solid var(--border); background:var(--bg-subtle); }

/* =========================================================
   MANAGE STOCK PANEL
   ========================================================= */
.stock-search-dropdown-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--bg-subtle);
  cursor:pointer;
}
.stock-search-dropdown-item:last-child{ border-bottom:none; }
.stock-search-dropdown-item:hover{ background:var(--bg-subtle); }
.stock-search-dropdown-item .prod{ font-size:12px; font-weight:700; color:var(--text-heading); }
.stock-search-dropdown-item .person{ font-size:11px; color:var(--text-muted); white-space:nowrap; }

.stock-person-cell{ display:flex; align-items:center; gap:9px; }

.icon-action.notes{ background:var(--bg-subtle); color:var(--text-body); border-color:var(--border); }
.icon-action.notes:hover{ background:var(--border); }

.icon-action.view{ background:var(--blue-tint); color:var(--blue); }
.icon-action.view:hover{ background:#dde5fc; }
.purch-muted-cell{ color:var(--text-muted); font-size:11px; }


/* =========================================================
   Supplier Bills Three Doot
   ========================================================= */

   .sbill-status-wrap{ position:relative; display:inline-block; }
.sbill-dots-btn{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  background:#fff; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:13px;
}
.sbill-dots-btn:hover{ background:var(--bg-subtle); }
.sbill-status-menu{
  display:none; position:fixed;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,0.16); min-width:130px; z-index:99999; overflow:hidden;
}
.sbill-status-menu.show{ display:block; }
.sbill-status-menu button{
  width:100%; text-align:left; padding:8px 14px; border:none; background:none;
  font-size:12.5px; color:var(--text-heading); cursor:pointer; display:flex; align-items:center; gap:8px;
}
.sbill-status-menu button:hover{ background:var(--bg-subtle); }
.sbill-status-menu button.delete{ color:var(--rose); }


@media (max-width:1100px){
  .report-stat-grid{ grid-template-columns:1fr 1fr; }
  .report-filter-row{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .login-split{ grid-template-columns:1fr; }
  .login-brand-panel{ display:none; }
}
/* Supplier Login Panel End*/

/* Permission Responsive Start*/

@media (max-width:900px){
  .perm-catalog-headrow{ display:none; }
  .perm-module-block{ grid-template-columns:1fr; }
  .perm-subrow{ grid-template-columns:1fr; text-align:left; }
  .perm-subrow .slug-tag{ justify-self:start; margin-top:4px; }
}

/* Permission Responsive End*/

/*Footer App Responsive Start*/

@media (max-width:900px){
  .app-footer{ left:0; }
}
@media (max-width:700px){
  .app-footer{ flex-direction:column; align-items:flex-start; padding:12px 16px; }
  .content{ padding-bottom:96px; } /* footer is taller when stacked on mobile */
}
/*Footer App Responsive End */

/*General Settings Responsive Start*/

@media (max-width:900px){
  .settings-grid{ grid-template-columns:1fr; }
}
/*General Settings Responsive End*/

/*Add Warranty Responsive Start*/

@media (max-width:700px){
  .warranty-product-grid{ grid-template-columns:1fr; }
}
/*Add Warranty Responsive End*/

/*Service Sale Responsive Start*/
@media (max-width:700px){
  .service-tile-grid{ grid-template-columns:1fr; }
}
/*Service Sale Responsive End*/ 

/*Invoice Vew Responsive Start*/
@media (max-width:900px){
  .inv-grid{ grid-template-columns:1fr; }
}
/*Invoice Vew Responsive End*/

/*migrate Now Responsive Start*/
@media (max-width:900px){
  .source-grid{ grid-template-columns:1fr; }
}
/*migrate Now Responsive End*/

/* Add Product Start Responsive Start*/
@media (max-width:700px){
  .stock-type-grid{ grid-template-columns:1fr; }
  .upload-grid{ grid-template-columns:1fr; }
}
/* Add Product Start Responsive End*/

/* Bulk Send Panel Start Responsive Start*/
@media (max-width:900px){
  .courier-grid{ grid-template-columns:1fr; }
}
/* Bulk Send Panel Start Responsive End*/
/* New Invoice Panel Start Responsive Start*/
@media (max-width:600px){
  .item-add-row.cols-4{ grid-template-columns:1fr 1fr; }
}
/* New Invoice Panel Start Responsive End*/

/*Qutation Panel Responsive start*/
@media (max-width:900px){
  .quote-filter-bar{ flex-direction:column; align-items:stretch; }
  .quote-filter-search{ max-width:none; }
}
/*Qutation Panel Responsive End*/

/* New Qutation Panel Start Responsive*/
@media (max-width:560px){
  .form-grid-3{ grid-template-columns:1fr; }
  .item-add-row{ grid-template-columns:1fr 1fr; }
}
/* New Qutation Panel Start Responsive*/
@media (max-width:600px){
  .item-add-row.cols-4{ grid-template-columns:1fr 1fr; }
}
/*Qutation Panel Edit and Details Responsive Start*/
@media (max-width:560px){
  .qd-meta-box{ grid-template-columns:1fr; }
  .qd-meta-right{ text-align:left; }
}
/*Qutation Panel Edit and Details Responsive End*/
/* Print isolation: only the invoice content shows when printing */
@media print{
  body *{ visibility:hidden; }
  #printable-invoice-content, #printable-invoice-content *{ visibility:visible; }
  #printable-invoice-content{
    position:absolute;
    left:0; top:0;
    width:100%;
    padding:24px;
  }
}


@media (max-width:560px){
  .form-grid-3{ grid-template-columns:1fr; }
  .item-add-row{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .panel-grid{ grid-template-columns:1fr; }
  .pos-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .pos-search-grid{ grid-template-columns:1fr; }
  .tile-options{ grid-template-columns:1fr; }
}


@media (max-width:640px){
  .stat-grid{ grid-template-columns:1fr; }
  .branch-info{ display:none; }
  .topbar{ padding:14px 16px; }
  .content{ padding:18px; }
}
/* =========================================================
   GLOBAL RESPONSIVE OVERHAUL — Desktop / Tablet / Mobile
   Complements (does not replace) the panel-specific rules
   already defined above. Breakpoints used app-wide:
     Desktop : > 1024px  (default styles, no media query)
     Tablet  : 641px – 1024px
     Mobile  : <= 640px
     Small   : <= 400px  (fine-tuning only)
   ========================================================= */

/* ---------- Root scaling ---------- */
@media (max-width:1024px){
  html{ font-size:15px; }
}
@media (max-width:640px){
  html{ font-size:14px; }
}

/* ---------- Topbar / content shell ---------- */
@media (max-width:1024px){
  .topbar{ padding:14px 20px; gap:14px; }
  .content{ padding-top:20px; padding-left:20px; padding-right:20px; }
}
@media (max-width:640px){
  .topbar{ padding:12px 14px; flex-wrap:wrap; gap:10px; }
  .content{ padding-top:14px; padding-left:14px; padding-right:14px; }
}

/* ---------- Panel toolbars (quote-toolbar family, used by every list panel) ---------- */
@media (max-width:900px){
  .quote-toolbar{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .quote-toolbar-actions{
    width:100%;
    flex-wrap:wrap;
  }
}
@media (max-width:480px){
  .quote-toolbar h1{ font-size:18px; }
  .quote-toolbar-actions .btn-orange-solid,
  .quote-toolbar-actions .btn-navy{
    flex:1 1 auto;
    justify-content:center;
    font-size:12.5px;
    padding:9px 12px;
  }
}

/* ---------- Filter bars (search + status/sort dropdowns) ---------- */
@media (max-width:900px){
  .quote-filter-bar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .quote-filter-search{ max-width:none; width:100%; }
  .quote-filter-controls{
    width:100%;
    flex-wrap:wrap;
  }
  .quote-filter-controls .select-wrap,
  .quote-filter-controls .input-wrap{
    flex:1 1 140px;
  }
}

/* ---------- Bulk-action bar ---------- */
@media (max-width:640px){
  .sub-actions-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .sub-actions-bar > div{ width:100%; flex-wrap:wrap; }
  .sub-actions-bar .btn-bulk{ flex:1 1 auto; justify-content:center; }
}

/* ---------- Generic form grids ---------- */
@media (max-width:640px){
  .form-grid-2,
  .form-grid-3{
    grid-template-columns:1fr !important;
  }
}
@media (min-width:641px) and (max-width:900px){
  .form-grid-3{ grid-template-columns:1fr 1fr; }
}

/* ---------- Modals ---------- */
@media (max-width:640px){
  .modal-overlay{ padding:20px 10px; align-items:center; }
  .modal-box{ max-width:100% !important; }
  .modal-body{ padding:16px; max-height:75vh; }
  .modal-header{ padding:14px 16px; }
  .modal-footer{ flex-wrap:wrap; }
  .modal-footer .btn-orange-solid,
  .modal-footer .btn-navy{ flex:1 1 auto; justify-content:center; }
}

/* ---------- Data tables ---------- */
.data-table-wrap, .quote-table-scroll{ -webkit-overflow-scrolling:touch; }
@media (max-width:640px){
  .quote-table-card{ border-radius:10px; }
  .pos-ord-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}

/* ---------- Product / variant / line-item tables inside modals ---------- */
@media (max-width:640px){
  .product-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .product-table{ min-width:640px; }
}

/* ---------- Calc / totals panel (Purchase, Purchase Return, etc.) ---------- */
@media (max-width:640px){
  .calc-panel{ max-width:100% !important; margin-left:0 !important; }
}

/* ---------- Dashboard stat/summary grids ---------- */
@media (max-width:1024px){
  .db-color-grid, .db-sub-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .db-color-grid, .db-sub-grid{ grid-template-columns:1fr; }
  .db-two-col-plain{ grid-template-columns:1fr; }
}

/* ---------- Rich text editor toolbar (Description fields) ---------- */
@media (max-width:640px){
  .rich-editor-toolbar{ gap:3px; padding:6px; }
  .rt-btn{ min-width:26px; height:26px; font-size:12px; }
  .rt-btn-wide{ min-width:70px; }
}

/* ---------- Image upload boxes (Add/Edit User, Brand, Sub Category, Supplier) ---------- */
@media (max-width:480px){
  .modal-body > div[style*="display:flex"][style*="align-items:center"][style*="gap:16px"]{
    flex-wrap:wrap;
  }
}

/* ---------- Select / input widths inside stacked filter rows ---------- */
@media (max-width:480px){
  .select-wrap, .pos-select{ width:100%; }
}

/* ---------- Nav / sidebar fine-tuning on very small screens ---------- */
@media (max-width:400px){
  .sidebar{ width:88vw; max-width:300px; }
}

/* ---------- Tablet-only refinements (things that look fine on mobile
   and desktop but are cramped specifically between 641–1024px) ---------- */
@media (min-width:641px) and (max-width:1024px){
  .quote-toolbar-actions{ flex-wrap:wrap; }
  .db-two-col-recent{ grid-template-columns:1fr; }
}

/* =========================================================
   MISSING CSS FROM CHAT DELIVERIES — Quotations, Settings module,
   Security modals, Toast notifications, Notifications panel.
   Consolidated here so nothing gets lost again.
   ========================================================= */

/* ---- Search-select dropdowns (Quotations: Bill From/To/Product, New Invoice) ---- */
.search-suggestions-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  max-height:220px; overflow-y:auto; box-shadow:0 12px 32px rgba(0,0,0,.10);
}
.search-suggestion-item{ padding:10px 14px; cursor:pointer; font-weight:600; font-size:13.5px; }
.search-suggestion-item:hover{ background:#f3f4f6; }

/* ---- Calendar filter dropdown (Quotations list) ---- */
.calendar-preset-item{
  display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:none;
  border-radius:6px; font-weight:600; font-size:13px; cursor:pointer;
}
.calendar-preset-item:hover{ background:#f3f4f6; }

/* ---- Extra Information tabs (Quotations Notes/Terms, New Invoice) ---- */
.btn-extra-tab{
  padding:9px 14px; border-radius:8px; border:1px solid #e5e7eb; background:#fff;
  font-weight:700; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px;
}
.btn-extra-tab.active{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---- Reusable "clock + muted text" date cell (Device Management,
   Account Activity, Transactions) ---- */
.setg-date-cell{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--text-muted);
}
.setg-date-cell i{ font-size:11px; color:var(--blue); }

/* =========================================================
   SETTINGS MODULE
   ========================================================= */
.setg-sidebar h4{ font-size:15px; }

.setg-group-btn{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:11px 16px; border:none; background:none; cursor:pointer;
  font-weight:700; font-size:13.5px; color:var(--text-heading);
}
.setg-group-btn:hover{ background:#f8f9fb; }
.setg-chev{ transition:transform .2s; font-size:11px; color:var(--text-muted); }
.setg-group.open .setg-chev{ transform:rotate(180deg); }

.setg-submenu{ display:none; flex-direction:column; padding:2px 0 6px; }
.setg-group.open .setg-submenu{ display:flex; }

.setg-link{
  display:block; padding:8px 16px 8px 42px; font-size:13px; font-weight:600;
  color:var(--text-muted); text-decoration:none;
}
.setg-link:hover{ color:var(--blue); background:#f8f9fb; }
.setg-link.active{ color:var(--amber); background:#fff4ea; position:relative; }
.setg-link.active::after{
  content:''; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--amber);
}

.setg-avatar-upload{ cursor:pointer; }
.setg-avatar-box{
  width:88px; height:88px; border:1px dashed #d1d5db; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color:var(--text-muted); font-size:12px; overflow:hidden; background:#fafafa;
}
.setg-avatar-box i{ font-size:20px; }
.setg-avatar-box img{ width:100%; height:100%; object-fit:cover; }

.setg-image-row{
  display:grid; grid-template-columns:280px auto 1fr; align-items:center;
  gap:14px; padding:14px 0; border-bottom:1px solid #f0f0f0;
}
.setg-image-row .title{ font-weight:700; color:var(--text-heading); font-size:13.5px; }
.setg-image-row .sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.setg-image-thumb{
  width:56px; height:56px; border-radius:10px; border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:#fff; overflow:hidden; justify-self:end;
}
.setg-image-thumb.dark{ background:#0f172a; color:#fff; }
.setg-image-thumb img{ width:100%; height:100%; object-fit:contain; }
.setg-thumb-remove{
  position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
  background:var(--rose); color:#fff; border:2px solid #fff; font-size:9px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.setg-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:14px; padding:13px 0; border-bottom:1px solid #f0f0f0;
}
.setg-row .title{ font-weight:700; color:var(--blue); font-size:13.5px; }
.setg-row .sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.setg-row select, .setg-row input{ min-width:200px; }

.setg-security-row{
  display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid #f0f0f0;
}
.setg-security-icon{
  width:40px; height:40px; border-radius:8px; border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); flex-shrink:0;
}
.setg-security-text{ flex:1; }
.setg-security-text .title{ font-weight:700; color:var(--text-heading); font-size:13.5px; }
.setg-security-text .sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }

.setg-tag-input{
  flex:1; display:flex; flex-wrap:wrap; gap:8px; border:1px solid #d1d5db;
  border-radius:8px; padding:8px 10px; min-width:260px;
}
.setg-tag{
  display:flex; align-items:center; gap:6px; background:#f3f4f6; border-radius:6px;
  padding:4px 8px; font-size:12px; font-weight:600;
}
.setg-tag i{ cursor:pointer; font-size:10px; color:var(--text-muted); }

.setg-placeholder p{ margin:0; }

.setg-template-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px;
}
.setg-template-card{
  border:1px solid #e5e7eb; border-radius:10px; padding:14px; background:#fff;
}
.setg-template-preview{
  border:1px solid #eee; border-radius:6px; padding:10px; font-size:9px; color:#333;
  background:#fff; min-height:220px;
}
.setg-template-preview .tpl-header{ display:flex; justify-content:space-between; margin-bottom:8px; }
.setg-template-preview .tpl-logo{ font-weight:800; color:var(--blue); font-size:11px; }
.setg-template-preview table{ width:100%; border-collapse:collapse; font-size:8px; margin:8px 0; }
.setg-template-preview th{ background:#f3f4f6; text-align:left; padding:3px 4px; }
.setg-template-preview td{ padding:3px 4px; border-bottom:1px solid #f5f5f5; }
.setg-template-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.setg-template-star{
  width:26px; height:26px; border-radius:50%; border:1px solid #e5e7eb; background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted);
}
.setg-template-star.active{ color:var(--amber); border-color:var(--amber); }

/* ---- Notifications panel ---- */
.setg-notif-toplevel{ padding:4px 0; }
.setg-notif-toprow{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; font-weight:600; color:var(--blue); font-size:13.5px;
}

/* =========================================================
   SECURITY MODALS (Change Password/Phone/Email, Delete Account)
   ========================================================= */
.setg-strength-bar{ display:flex; gap:5px; margin-top:8px; }
.setg-strength-bar span{ flex:1; height:5px; border-radius:3px; background:#e5e7eb; transition:background .2s; }
.setg-strength-bar.weak span:nth-child(1){ background:var(--rose); }
.setg-strength-bar.fair span:nth-child(1), .setg-strength-bar.fair span:nth-child(2){ background:#f59e0b; }
.setg-strength-bar.good span:nth-child(1), .setg-strength-bar.good span:nth-child(2), .setg-strength-bar.good span:nth-child(3){ background:#3b82f6; }
.setg-strength-bar.strong span{ background:#16a34a; }

.setg-info-note{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted);
  background:#f8f9fb; border-radius:8px; padding:10px 12px; margin:4px 0 16px;
}
.setg-info-note i{ color:var(--blue); }

.setg-radio-row{
  display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid #f0f0f0; cursor:pointer;
}
.setg-radio-row:last-child{ border-bottom:none; }
.setg-radio-row input[type="radio"]{ margin-top:3px; accent-color:var(--amber); flex-shrink:0; }
.setg-radio-row .title{ font-weight:700; color:var(--text-heading); font-size:13.5px; }
.setg-radio-row .sub{ font-size:12px; color:var(--text-muted); margin-top:2px; }

.icon-action.logout{ color:var(--blue); }
.icon-action.logout:hover{ background:#eff6ff; }

/* =========================================================
   TOAST NOTIFICATIONS
   ========================================================= */
.setg-toast{
  min-width:280px; max-width:360px; padding:14px 16px; border-radius:10px;
  display:flex; align-items:flex-start; gap:10px; color:#fff; font-size:13.5px; font-weight:600;
  box-shadow:0 12px 32px rgba(0,0,0,.15);
  animation: setgToastIn .25s ease-out;
}
.setg-toast.success{ background:#16a34a; }
.setg-toast.error{ background:#dc2626; }
.setg-toast i{ font-size:16px; margin-top:1px; }
.setg-toast .close-btn{ margin-left:auto; cursor:pointer; opacity:.8; }
.setg-toast .close-btn:hover{ opacity:1; }
@keyframes setgToastIn{ from{ opacity:0; transform:translateX(20px);} to{ opacity:1; transform:translateX(0);} }

.form-input.setg-invalid, .pos-select.setg-invalid{
  border-color:var(--rose) !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.12);
}
.setg-field-error{ font-size:11.5px; color:var(--rose); margin-top:4px; display:none; }

/* ---- Stock Management module (Manage Stock, Stock Adjustment, Stock
   Transfer) — renamed from the shared .cell-sub so this module's muted
   sub-text cells (category, date) don't collide with any other module's
   .cell-sub usage. ---- */
.stock-muted-cell{
  display:block;
  margin-top:3px;
  font-size:10.5px;
  color:var(--text-muted);
}

/* =========================================================
   Global override: 10px border-radius on every card/panel
   container used across the app.
   ========================================================= */
.pos-card, .quote-table-card, .stat-card, .source-card, .db-card, .db-sub-card,
.report-stat-card, .delivery-method-card, .bulk-card, .cd-recent-card, .db-color-card,
.modal-box, .settings-toast, .courier-card, .db-mini-card{
  border-radius:10px !important;
}


/* =========================================================
   Moved from dashboard.html inline <style> blocks
   ========================================================= */
.group-desc-cell{ color:var(--text-muted); font-size:12.5px; line-height:1.4; }
.cd-nav-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border:none; background:transparent; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--text-heading); cursor:pointer; margin-bottom:4px; }
.cd-nav-item:hover{ background:#f1f5f9; }
.cd-nav-item.active{ background:#f97316; color:#fff; }
.cd-nav-item .cd-nav-count{ margin-left:auto; background:#e2e8f0; color:var(--text-muted); font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.cd-nav-item.active .cd-nav-count{ background:rgba(255,255,255,0.25); color:#fff; }
.cd-nav-divider{ border:none; border-top:1px solid #eef0f2; margin:8px 4px; }
.cd-record-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:16px; }
.cd-record-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff; border:1px solid #eef0f2; border-radius:10px; }
.cd-record-icon{ width:36px; height:36px; border-radius:9px; background:#fff7ed; color:#f97316; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
.cd-record-title{ font-weight:700; font-size:13.5px; color:var(--text-heading); }
.cd-record-sub{ font-size:12px; color:var(--text-muted); }
.cd-recent-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cd-recent-card{ background:#fff; border:1px solid #eef0f2; border-radius:10px; overflow:hidden; }
.cd-recent-card-head{ padding:12px 16px; font-weight:700; font-size:13.5px; color:var(--text-heading); border-bottom:1px solid #eef0f2; }
.cd-recent-row{ display:grid; grid-template-columns:1fr 130px 110px; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid #f5f6f7; font-size:13px; }
.cd-recent-row .cd-recent-left{ display:flex; align-items:center; gap:10px; color:var(--text-heading); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-recent-row .pill{ justify-self:center; }
.cd-recent-row .mono-cell{ justify-self:end; text-align:right; }
.cd-recent-viewall{ display:block; padding:10px 16px; font-size:12.5px; font-weight:700; color:#f97316; text-decoration:none; }
.cd-recent-empty{ padding:30px 16px; text-align:center; color:var(--text-muted); font-size:13px; }
@media print{
  .sidebar, .topbar{ display:none !important; }
  .view-panel{ display:none !important; }
  #sale-detail-view, #supplier-payment-receipt-view, #purchase-order-view, #view-return-view{ display:block !important; }
  .quote-toolbar{ display:none !important; }
  .modal-overlay{ display:none !important; }
  body, .main{ margin:0 !important; padding:0 !important; background:#fff !important; }
}

.eoc-tab-btn{ padding:10px 18px; border:none; background:none; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; }
.eoc-tab-btn.active{ color:var(--blue); border-bottom-color:var(--blue); }
.eoc-address-nav-item{ padding:10px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; margin-bottom:6px; background:#f8fafc; color:var(--text-muted); }
.eoc-address-nav-item.active{ background:var(--blue); color:#fff; }
.eoc-address-nav-item.add-new{ color:var(--blue); background:none; }

.setg-toast{display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.15); font-size:14px; font-weight:500; background:#fff; border-left:4px solid #22c55e; color:#1e293b; animation:setgToastIn .2s ease-out;}
.setg-toast.error{border-left-color:#ef4444;}
.setg-toast.success i.fa-circle-check{color:#22c55e;}
.setg-toast.error i.fa-circle-exclamation{color:#ef4444;}
.setg-toast span{flex:1;}
.setg-toast .close-btn{cursor:pointer; color:#94a3b8; font-size:12px;}
.setg-toast .close-btn:hover{color:#475569;}
@keyframes setgToastIn{from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);}}

/* Recent Live Orders — Source column tag (dedicated class, not shared with cell-sub) */
.db-order-source-tag{
  display:inline-block;
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
}

/* Roles & Permission — Created Date column (dedicated class, not shared with cell-sub) */
.db-role-date-cell{
  display:inline-block;
  font-size:13px;
  color:var(--text-muted);
  white-space:nowrap;
}