/* =========================================================
   ROOT + RESET
========================================================= */
:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --primary:#2563eb;
  --ok:#16a34a;
  --bad:#dc2626;
  --warn:#f59e0b;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  height:100%;
  font-family:Inter,-apple-system,BlinkMacSystemFont,
               "Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

a{text-decoration:none;color:inherit}

/* =========================================================
   HEADER
========================================================= */
.vendor-header{
  position:fixed;
  top:0;left:0;right:0;
  height:56px;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 18px;
}

.vendor-left{display:flex;gap:12px;align-items:center}

.menu-btn{
  display:none;
  background:none;
  border:none;
  font-size:20px;
  font-weight:600;
  cursor:pointer;
}

.brand{
  font-weight:600;           /* FIX */
  font-size:16px;
  letter-spacing:-0.01em;
}

/* =========================================================
   SIDEBAR
========================================================= */
.sidebar{
  position:fixed;
  top:56px;
  left:0;
  width:240px;
  height:calc(100vh - 56px);
  background:#fff;
  border-right:1px solid var(--line);
  overflow-y:auto;
  z-index:900;
}

.menu a{
  display:block;
  padding:12px 18px;
  margin:4px 10px;
  border-radius:12px;
  font-weight:600;           /* FIX */
  color:#0f172a;
}

.menu a:hover{
  background:#f1f5ff;
  color:var(--primary);
}

.menu a.active{
  background:#eef3ff;
  color:var(--primary);
  box-shadow:inset 3px 0 0 var(--primary);
}

/* =========================================================
   CONTENT
========================================================= */
.vendor-content{
  margin-left:240px;
  padding:72px 32px 32px;
  min-height:100vh;
  background:var(--bg);
}

.vendor-container{
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

/* =========================================================
   CARD
========================================================= */
.card{
  background:#fff;
  border-radius:20px;
  padding:20px;
  box-shadow:0 10px 24px rgba(15,23,42,.05); /* FIX */
  margin-bottom:22px;
}

/* =========================================================
   TEXT
========================================================= */
.title{
  font-size:22px;
  font-weight:700;           /* FIX */
  letter-spacing:-0.01em;
}

.muted{
  font-size:14px;
  font-weight:500;
  color:var(--muted);
}

/* =========================================================
   BUTTON
========================================================= */
.btn{
  padding:8px 14px;
  border-radius:10px;
  font-weight:600;           /* FIX */
  cursor:pointer;
}

.btn.primary{background:var(--primary);color:#fff;border:none}
.btn.light{background:#f1f5f9}
.btn.outline{border:1px solid var(--primary);color:var(--primary)}
.btn.sm{padding:6px 12px;font-size:12px}

/* =========================================================
   KPI – STANDARD
========================================================= */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:24px;
}

.kpi{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}

.kpi-label{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}

.kpi-value{
  margin-top:6px;
  font-size:24px;            /* FIX */
  font-weight:700;           /* FIX */
  color:var(--text);
}

.kpi small{
  display:block;
  font-size:12px;
  color:#94a3b8;
  margin-top:2px;
}

/* =========================================================
   TABLE
========================================================= */
.table-wrap{
  overflow-x:auto;
}

.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
}

.tbl th{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  padding:8px 12px;
}

.tbl td{
  background:#fff;
  padding:14px 12px;
  font-size:14px;
  font-weight:500;
}

.tbl tbody tr{
  box-shadow:0 6px 14px rgba(15,23,42,.05);
  border-radius:14px;
}

.tbl td:first-child{font-weight:600}

/* =========================================================
   STATUS COLORS
========================================================= */
.badge{
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;          /* FIX */
}

.badge.completed{background:#dcfce7;color:#166534}
.badge.pending{background:#fef3c7;color:#92400e}
.badge.rejected,
.badge.cancelled{background:#fee2e2;color:#991b1b}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:980px){

  .menu-btn{display:block}

  .sidebar{
    top:0;
    left:-260px;
    width:260px;
    height:100vh;
    box-shadow:4px 0 20px rgba(0,0,0,.12);
    transition:left .25s ease;
    z-index:1002;
  }

  body.sidebar-open .sidebar{left:0}

  .vendor-content{
    margin-left:0;
    padding:70px 16px 16px;
  }

  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===============================
   AVATAR DROPDOWN – FINAL
================================ */
.vendor-right{position:relative}

.avatar-wrap{cursor:pointer}

.avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line);
}

.avatar-menu{
  position:absolute;
  top:48px;
  right:0;
  width:220px;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(15,23,42,.15);
  display:none;
  z-index:1300;
}

.avatar-menu.show{display:block}

.am-head{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.am-head strong{display:block;font-size:14px}
.am-head span{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.avatar-menu a{
  display:block;
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
}
.avatar-menu a:hover{background:#f8fafc}
.avatar-menu a.danger{color:#dc2626}
/* dropdown icon */
.avatar-menu a{
  display:flex;
  align-items:center;
  gap:10px;
}


.avatar-menu .am-ico{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.85;
}

.avatar-menu a:hover .am-ico{
  opacity:1;
}

.avatar-menu a.danger .am-ico{
  opacity:1;
}
/* ===== SIDEBAR ICON ===== */
.menu a{
  display:flex;
  align-items:center;
  gap:12px;
}

.menu a .ico{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.85;
}

.menu a:hover .ico,
.menu a.active .ico{
  opacity:1;
}

/* KPI ICON */
.kpi-label{
  display:flex;
  align-items:center;
  gap:8px;
}
.kpi-label .ico{
  width:16px;
  height:16px;
  fill:currentColor;
  opacity:.7;
}

/* WARNING ICON */
.ico-warn{
  width:20px;
  height:20px;
  fill:#f59e0b;
}
/* ===== LINE LIST ALIGN FIX ===== */

.list-head,
.list-row{
  display:grid;
  grid-template-columns:1fr 1.5fr 1.2fr 1.5fr;
  align-items:center;
}

/* HEADER */
.list-head{
  padding:10px 6px;
  font-size:13px;
  font-weight:700;
  color:#64748b;
  border-bottom:1px solid #eef2f7;
}

/* ROW */
.list-row{
  padding:14px 6px;
  border-bottom:1px solid #eef2f7;
}

.list-row:hover{
  background:#f9fafb;
}

/* DATE COLUMN – IMPORTANT */
.list-head .date,
.list-row .date{
  text-align:right;
}

/* ID / TOTAL */
.list-row .id{font-weight:900}
.list-row .total{font-weight:800}

/* MOBILE */
@media(max-width:768px){
  .list-head{display:none}
  .list-row{
    grid-template-columns:1fr;
    gap:6px;
  }
  .list-row .date{
    text-align:left;
    font-size:13px;
  }
}
/* ===== STORES LIST (DESKTOP) ===== */

.store-head,
.store-row{
  display:grid;
  grid-template-columns:
    .6fr     /* # */
    2.5fr    /* store */
    1.4fr    /* phone */
    1.6fr    /* location */
    .8fr     /* products */
    1fr      /* status */
    1.6fr;   /* actions */
  align-items:center;
  gap:12px;
}

.store-head{
  font-size:13px;
  font-weight:700;
  color:#64748b;
  padding:12px 8px;
  border-bottom:1px solid #eef2f7;
}

.store-row{
  padding:14px 8px;
  border-bottom:1px solid #eef2f7;
}

.store-row:hover{
  background:#f9fafb;
}

.store-cell{
  display:flex;
  align-items:center;
  gap:12px;
}

.store-logo{
  width:42px;
  height:42px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--line);
}



.store-name{font-weight:900; width: 150px;}
.store-id{font-size:12px;color:var(--muted)}

.actions{display:flex;gap:8px}

/* ===== MOBILE ===== */
@media(max-width:900px){
  .store-head{display:none}

  .store-row{
    grid-template-columns:1fr;
    gap:10px;
    padding:16px;
  }
}

@media(max-width:640px){
  .kpi-grid{grid-template-columns:1fr}
}
/* ===== CONFIRM MODAL (CENTER FIX) ===== */

.confirm-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  display: none;               /* hidden by default */
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  z-index: 9999;
}

.confirm-box{
  background:#fff;
  border-radius:22px;
  padding:26px;
  width:100%;
  max-width:420px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  animation: pop .25s ease;
}

@keyframes pop{
  from{transform:scale(.92);opacity:0}
  to{transform:scale(1);opacity:1}
}

.confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:20px;
}
/* ===== PAGE HEAD (STORES) ===== */

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.page-head-left h2{
  font-size:20px;
  font-weight:900;
  margin:0;
}

.store-usage{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
}

.store-usage .usage{
  background:#f1f5f9;
  padding:6px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
}

.store-usage .usage small{
  color:var(--muted);
  font-weight:700;
}

.limit-badge{
  background:#fee2e2;
  color:#991b1b;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

@media(max-width:768px){
  .page-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}
/* ===== DANGER BUTTON ===== */
.btn.danger{
  background:#fee2e2;
  color:#991b1b;
  border:1px solid #fecaca;
  font-weight:900;
}

.btn.danger:hover{
  background:#fecaca;
}

/* ===== STORE VIEW NEW UI ===== */

.store-view h2{font-size:22px;font-weight:1000}

.sv-hero{
  display:flex;
  gap:20px;
  align-items:center;
}

.sv-hero-left{
  width:120px;
  height:120px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
}

.sv-hero-left img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.sv-hero-title{
  font-size:20px;
  font-weight:1000;
  display:flex;
  gap:10px;
  align-items:center;
}

.sv-hero-meta{
  margin-top:6px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
}

.sv-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:18px 0;
}

.sv-kpi-box{
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.sv-kpi-box span{font-size:13px;color:var(--muted)}
.sv-kpi-box strong{font-size:24px;font-weight:1000}

.sv-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.sv-info-grid span{font-size:12px;color:var(--muted)}

.sv-qr{
  display:flex;
  gap:16px;
  align-items:center;
}

.sv-qr img{
  width:100px;
  height:100px;
  border-radius:14px;
  border:1px solid var(--line);
}

.sv-prod-head,
.sv-prod-row{
  display:grid;
  grid-template-columns:2.5fr 1fr .8fr 1fr;
  gap:12px;
  align-items:center;
}

.sv-prod-head{
  font-size:13px;
  font-weight:800;
  color:#64748b;
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
}

.sv-prod-row{
  padding:12px 0;
  border-bottom:1px solid #f1f5f9;
}

.sv-prod-info{
  display:flex;
  gap:12px;
  align-items:center;
}

.sv-prod-info img{
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid var(--line);
  object-fit:cover;
}

.sv-prod-card{
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  margin-bottom:14px;
}

.sv-prod-card img{
  width:64px;
  height:64px;
  border-radius:14px;
  object-fit:cover;
}

@media(max-width:768px){
  .sv-hero{flex-direction:column;align-items:flex-start}
  .sv-hero-left{width:100%;height:200px}
  .sv-info-grid{grid-template-columns:1fr}
  .sv-kpi-grid{grid-template-columns:1fr}
}

.sv-hero-title{
  font-size:20px;
  font-weight:1000;
  display:flex;
  align-items:center;
  gap:10px;
}

/* STATUS BADGE */
.badge.active{
  background:#dcfce7;
  color:#166534;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}

.badge.inactive{
  background:#fee2e2;
  color:#991b1b;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}
.sv-kpi-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.sv-kpi-box strong{
  font-size:28px;
}
.sv-info-grid strong{
  display:block;
  margin-top:4px;
  font-size:15px;
}
.sv-qr{
  align-items:center;
}

.sv-qr img{
  background:#f8fafc;
}
.map-link{
  font-size:14px;
  font-weight:800;
  color:var(--primary);
  text-decoration:none;
}

.map-link:hover{
  text-decoration:underline;
}

/* FORM */
.form-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top: 10px;
}

.form-block label{
  font-size:13px;
  font-weight:700;
  color:var(--text);
}

.inp{
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  padding:0 14px;
  font-size:14px;
  background:#fff;
}

textarea.inp{
  height:auto;
  padding:12px 14px;
  resize:vertical;
}

/* TWO COLUMN */
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding-top: 10px;
}

/* SECTION */
.form-section{
  margin-bottom:28px;
}

.form-section h3{
  font-size:15px;
  font-weight:900;
  margin-bottom:16px;
}

/* MEDIA */
.media-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.media-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px dashed var(--line);
  border-radius:16px;
  background:#fafafa;
}

.media-preview{
  width:64px;
  height:64px;
  border-radius:14px;
  object-fit:cover;
  background:#f1f5f9;
}

/* FILE INPUT FIX */
.media-body input[type=file]{
  font-size:13px;
}

.hint{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

/* ACTIONS */
.form-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:20px;
}

/* MOBILE */
@media(max-width:768px){
  .form-row,
  .media-row{
    grid-template-columns:1fr;
  }
}

.media-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
@media(max-width:640px){
  .media-grid{grid-template-columns:1fr}
}
.media-preview{
  width:80px;
  height:80px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid var(--line);
  background:#f1f5f9;
}
.req{color:var(--bad);font-weight:900}
.media-body input[type=file]{
  font-size:13px;
}
.form-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
}

.form-section{margin-top:28px}

.section-title{
  font-size:16px;
  font-weight:900;
  margin-bottom:14px;
}

.media-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.media-block{
  display:flex;
  gap:14px;
  padding:16px;
  border:1px dashed var(--line);
  border-radius:16px;
  background:#fafafa;
}

.media-preview{
  width:80px;
  height:80px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid var(--line);
  background:#f1f5f9;
}

.media-body label{
  font-weight:800;
  font-size:14px;
}

.media-body .hint{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

@media(max-width:640px){
  .media-grid{grid-template-columns:1fr}
}

/* ===== PRODUCT TABLE ===== */
.prod-cell{
  display:flex;
  align-items:center;
  gap:12px;
}

.prod-img{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:12px;
  background:#f1f5f9;
  flex-shrink:0;
}

.prod-name{
  font-weight:700;
}

.prod-id{
  font-size:12px;
  color:#64748b;
}

/* ACTION ALIGN */
.tbl .right{
  text-align:right;
}
/* ===== PRODUCT FORM ===== */
.product-form{
  max-width:860px;
  margin:auto;
}

.form-section{
  margin-bottom:28px;
}

.section-title{
  font-size:16px;
  font-weight:800;
  margin-bottom:14px;
}

.field label{
  font-weight:600;
  display:block;
  margin-bottom:6px;
}

.grid.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media(max-width:700px){
  .grid.two{grid-template-columns:1fr}
}

/* ===== IMAGE CARD ===== */
.image-card{
  display:flex;
  gap:18px;
  align-items:center;
}

.image-preview{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:16px;
  background:#f1f5f9;
}

.image-body{
  flex:1;
}

.check{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-size:14px;
}

/* ===== ACTIONS ===== */
.form-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  padding-top:12px;
  border-top:1px solid var(--line);
}
/* Center form on desktop */
.product-form{
  max-width: 860px;
  margin: 0 auto;
}

/* Better spacing */
.form-section{
  margin-bottom: 28px;
}

.section-title{
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
}

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

@media(max-width:900px){
  .form-grid{
    grid-template-columns: 1fr;
  }
}

/* Center form on desktop */
.product-form{
  max-width: 860px;
  margin: 0 auto;
}

/* Better spacing */
.form-section{
  margin-bottom: 28px;
}

.section-title{
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
}

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

@media(max-width:900px){
  .form-grid{
    grid-template-columns: 1fr;
  }
}

/* FILTER */
.filter-card{
  margin-bottom:18px;
}
.filter-grid{
  display:grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr auto;
  gap:12px;
  align-items:end;
}

/* TABLE */
.tbl th{
  font-size:13px;
  text-transform:uppercase;
  color:#6b7280;
}
.tbl td{
  vertical-align:middle;
}

/* EMPTY */
.empty-soft{
  padding:40px;
  text-align:center;
  color:#6b7280;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .filter-grid{
    grid-template-columns:1fr 1fr;
  }
}

.order-view .order-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:18px;
}
@media(max-width:900px){
  .order-view .order-grid{grid-template-columns:1fr}
}

.head-actions{display:flex;gap:8px;flex-wrap:wrap}

.store-name{font-size:14px;font-weight:900}
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.buyer-address{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}

.total-box{
  margin-top:14px;
  text-align:right;
  font-size:18px;
  font-weight:900;
}
.total-box span{color:var(--primary)}

.payslip-img{
  width:100%;
  max-width:300px;
  border-radius:16px;
  border:1px solid var(--line);
}

.full{width:100%}
.mt{margin-top:10px}
/* ===== ORDER ITEMS TABLE ===== */
.order-items{
  width:100%;
  border-collapse:collapse;
}

.order-items th,
.order-items td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}

.order-items thead th{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
}

/* column widths */
.order-items .col-product{width:45%; text-align:left}
.order-items .col-qty{width:10%; text-align:center}
.order-items .col-price{width:20%; text-align:right}
.order-items .col-subtotal{width:25%; text-align:right}

/* total */
.order-total{
  margin-top:16px;
  text-align:right;
  font-size:18px;
  font-weight:900;
}
.order-total span{
  color:var(--primary);
}

/* ================= REPORT FILTER ================= */
.report-filter.full{
  width:100%;
}

.filter-grid{
  width:100%;
  grid-template-columns: 260px 1fr auto 1fr auto;
  gap:12px;
  align-items:center;
}

.range-sep{
  font-weight:900;
  color:var(--muted);
  text-align:center;
}

.filter-actions{
  display:flex;
  gap:10px;
}

/* ================= MOBILE ================= */
@media(max-width:980px){
  .filter-grid{
    grid-template-columns:1fr;
  }

  .range-sep{
    display:none;
  }

  .filter-actions{
    justify-content:flex-end;
  }
}

/* ================= REPORT PAGE ================= */
.report-page .report-filter{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between; /* ⭐️ key */
  gap:16px;
  padding:18px 22px;
}

/* LEFT (filters) */
.report-filter .filter-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* RIGHT (buttons) */
.report-filter .filter-right{
  display:flex;
  gap:10px;
}

/* inputs size */
.report-filter .inp.sm{
  height:42px;
  min-width:160px;
}

/* arrow between dates */
.range-sep{
  color:var(--muted);
  font-size:14px;
}

/* ===== MOBILE ===== */
@media(max-width:900px){
  .report-page .report-filter{
    flex-direction:column;
    align-items:stretch;
  }

  .report-filter .filter-left{
    width:100%;
  }

  .report-filter .filter-right{
    justify-content:flex-end;
  }
}
/* ================= REPORT TABLE ================= */
.tbl.report{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
  table-layout:fixed; /* ⭐️ important */
}
/* Daily Ledger */
.tbl.report thead th:nth-child(1),
.tbl.report tbody td:nth-child(1){
  width:25%;
  text-align:left;
}

.tbl.report thead th:nth-child(2),
.tbl.report tbody td:nth-child(2),
.tbl.report thead th:nth-child(3),
.tbl.report tbody td:nth-child(3),
.tbl.report thead th:nth-child(4),
.tbl.report tbody td:nth-child(4){
  width:25%;
  text-align:right;
}
.tbl.report thead th{
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 14px;
}
.tbl.report tbody tr{
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.tbl.report tbody td{
  padding:14px;
  vertical-align:middle;
}
.tbl.report td.blue{color:var(--primary);font-weight:700}
.tbl.report td.green{color:var(--ok);font-weight:700}
.tbl.report td.red{color:var(--bad);font-weight:700}

/* ===== TABLE BASE ===== */
.expense-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
}

/* ===== HEADER ===== */
.expense-table thead th{
  font-size:12px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
  padding:8px 16px;
  text-align:left;
}

/* ===== ROW ===== */
.expense-table tbody tr{
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  border-radius:16px;
}

/* ===== CELL ===== */
.expense-table tbody td{
  padding:none;
  width: 200px;
  font-size:14px;
  vertical-align:middle;
}

/* ===== COLUMN WIDTH FIX ===== */
.c-date{width:140px}
.c-store{width:240px}
.c-title{width:auto}
.c-amount{width:180px;text-align:right}
.c-action{width:160px;text-align:right}

/* ===== BODY ALIGN ===== */
.expense-table tbody td:nth-child(4){
  text-align:none;
  font-weight:800;
  color:var(--bad);
}

/* ===== FIRST / LAST RADIUS ===== */
.expense-table tbody td:first-child{
  border-radius:16px 0 0 16px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.expense-table tbody td:last-child{
  border-radius:0 16px 16px 0;
}

/* ===== ACTION ===== */
.actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* ===== EMPTY ===== */
.empty{
  text-align:center;
  padding:40px;
  color:var(--muted);
}
.expense-filter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.filter-left{
  width:100%;
  align-items:center;
  gap:10px;
}

.filter-right{
  display:flex;
  gap:10px;
}

.range-sep{
  color:var(--muted);
  font-weight:700;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:100;
}
.modal.show{display:flex}

.modal-box{
  background:#fff;
  border-radius:18px;
  padding:24px;
  width:360px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}

.expense-form{
  max-width:none;
}
.form-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.form-grid.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.req{color:var(--bad)}
.form-actions{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  gap:12px;
}
.alert.error{
  background:#fee2e2;
  color:#991b1b;
  padding:12px 16px;
  border-radius:14px;
  margin-bottom:16px;
}
@media(max-width:640px){
  .form-grid.two{grid-template-columns:1fr}
}
/* NOTE COLUMN FIX (Khmer friendly) */
.c-note{
  width:280px;
}

td.note{
  max-width:280px;
  white-space:normal;        /* ⬅️ allow wrap */
  word-break:break-word;     /* ⬅️ Khmer / long text safe */
  line-height:1.5;
  color:var(--text);
  font-size:14px;
}

/* Empty note */
td.note .muted{
  display:block;
  text-align:none;
  color:var(--muted);
  font-style:italic;
}

/* ===== HEADER ===== */
.head-actions{
  display:flex;
  gap:12px;
  align-items:center;
}
.hint{
  font-size:13px;
  color:var(--muted);
}

/* ===== FILTER ===== */
.staff-filter{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:18px;
  align-items: center;
}
.filter-left,
.filter-right{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ===== TABLE ===== */
.staff-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.staff-table thead th{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  padding:10px 14px;
}
.staff-table tbody tr{
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
  border-radius:14px;
}
.staff-table td{
  padding:14px;
  vertical-align:middle;
}

/* STAFF CELL */
.staff-cell{
  display:flex;
  align-items:center;
  gap:12px;
}
.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line);
  background:#fff;
}
.staff-name{
  font-weight:800;
}
.staff-id{
  font-size:12px;
  color:var(--muted);
}

/* ROLE */
.pill{
  background:#eef2ff;
  color:var(--primary);
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
}

/* STATUS */
.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
}
.badge.ok{
  background:#dcfce7;
  color:#166534;
}
.badge.bad{
  background:#fee2e2;
  color:#991b1b;
}

/* ACTION */
.actions{
  text-align:right;
}

/* EMPTY */
.empty{
  text-align:center;
  padding:30px;
  color:var(--muted);
}

/* ===== GRID ===== */
.staff-edit-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:18px;
}
@media(max-width:980px){
  .staff-edit-grid{grid-template-columns:1fr}
}

/* ===== PROFILE ===== */
.profile-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.avatar-lg{
  width:88px;
  height:88px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line);
}
.staff-name{
  font-size:14px;
  font-weight:900;
}
.staff-id{
  font-size:13px;
  color:var(--muted);
}

/* ===== FORM ===== */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}
}
.lbl{
  font-size:13px;
  font-weight:700;
  margin-top:6px;
  display:block;
}
.form-actions{
  margin-top:18px;
}

/* ===== PASSWORD ===== */
.staff-password .card-title{
  font-weight:900;
  margin-bottom:10px;
}

/* ===== ALERT ===== */
.alert.bad{
  background:#fee2e2;
  color:#991b1b;
  padding:12px 16px;
  border-radius:14px;
  margin-bottom:16px;
}
/* ================= HEADER ================= */
.head-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ================= PROFILE ================= */
.staff-profile-card{
  display:flex;
  gap:26px;
  max-width:none;
}

.profile-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.profile-avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line);
  background:#fff;
}

.badge.big{
  padding:6px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.4px;
}

.profile-name{
  font-size:26px;
  font-weight:1000;
}

.role-badge{
  display:inline-block;
  margin:6px 0 16px;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:#eef2ff;
  color:var(--primary);
}

.profile-grid{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:14px 22px;
}

.g-label{
  font-weight:800;
  font-size:13px;
  color:var(--muted);
}

/* ================= ACTIONS ================= */
.staff-actions-card{
  max-width:none;
  margin-top:18px;
}

.action-row{
  display:flex;
  gap:12px;
  align-items:center;
}

.action-row .btn.danger{
  margin-left:auto;
}

/* ================= MODAL ================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.modal.show{display:flex}

.modal-box{
  background:#fff;
  border-radius:18px;
  padding:22px;
  width:420px;
  max-width:94%;
}

.modal-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ================= PERMISSIONS ================= */
.perm-card{
  max-width:none;
  margin:auto;
}

/* HEADER */
.perm-head{
  display:grid;
  grid-template-columns:1fr 80px;
  padding:12px 16px;
  font-size:13px;
  font-weight:900;
  color:var(--muted);
}

/* ROW */
.perm-row{
  display:grid;
  grid-template-columns:1fr 80px;
  align-items:center;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  margin-bottom:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}

/* NAME */
.perm-name small{
  display:block;
  font-size:12px;
  color:var(--muted);
}

/* CHECK CENTER */
.perm-check{
  text-align:center;
}

/* CHECKBOX STYLE */
.perm-check input{
  width:22px;
  height:22px;
  accent-color:#2563eb; /* blue check */
  cursor:pointer;
}

/* ACTION */
.perm-actions{
  margin-top:20px;
}

.staff-form{
  max-width:none;
  margin:auto;
}

.req{color:var(--bad)}

.avatar-upload{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

.avatar-preview{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line);
}

.avatar-upload small{
  color:var(--muted);
  font-size:12px;
}

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

.form-actions{
  margin-top:24px;
}

.alert.bad{
  background:#fee2e2;
  color:#991b1b;
  padding:12px 16px;
  border-radius:12px;
  margin-bottom:16px;
}

/* MOBILE */
@media(max-width:680px){
  .form-grid{
    grid-template-columns:1fr;
  }
}
.profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

.profile-card{
  padding:26px;
}

.avatar-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}

.avatar-lg{
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  margin-bottom:18px;
}

.full{
  width:100%;
}

.hint{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.alert.ok{
  background:#dcfce7;
  color:#166534;
  padding:12px 16px;
  border-radius:12px;
  margin-bottom:16px;
}

.alert.bad{
  background:#fee2e2;
  color:#991b1b;
  padding:12px 16px;
  border-radius:12px;
  margin-bottom:16px;
}

/* MOBILE */
@media(max-width:980px){
  .profile-grid{
    grid-template-columns:1fr;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
}

.subscription-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}

.sub-card{
  background:#fff;
  border-radius:20px;
  padding:22px;
  box-shadow:0 14px 30px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}

.sub-card.active-plan{
  border:2px solid var(--primary);
}

.sub-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.sub-name{
  font-size:18px;
  font-weight:1000;
}

.sub-cycle{
  font-size:13px;
  color:var(--muted);
}

.sub-price{
  font-size:32px;
  font-weight:1000;
  color:var(--primary);
  margin:14px 0;
}

.sub-features{
  display:flex;
  justify-content:space-between;
  margin-bottom:16px;
}

.sub-features span{
  font-size:13px;
  color:var(--muted);
}
.sub-features b{
  display:block;
  font-size:18px;
  font-weight:900;
}

.sub-action{margin-top:auto}

/* STATUS PILL */
.pill{
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}
.pill.ok{background:#dcfce7;color:#166534}
.pill.bad{background:#fee2e2;color:#991b1b}
.pill.muted{background:#f1f5f9;color:#64748b}
.sub-features{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:18px;
}

.feature-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  border-radius:12px;
  background:#f8fafc;
}

.feature-line span{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}

.feature-line b{
  font-size:18px;
  font-weight:1000;
  color:var(--text);
}

/* ===== GRID ===== */
.buy-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media(max-width:900px){
  .buy-grid{grid-template-columns:1fr}
}

/* ===== PLAN SUMMARY ===== */
.plan-summary{
  padding:24px;
}
.plan-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.plan-name{
  font-size:22px;
  font-weight:1000;
}
.plan-cycle{
  font-size:13px;
  color:var(--muted);
}
.plan-price{
  font-size:32px;
  font-weight:1000;
  color:var(--primary);
}

/* FEATURES */
.plan-features{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.feature-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f8fafc;
  padding:10px 14px;
  border-radius:14px;
}
.feature-line span{
  color:var(--muted);
  font-weight:700;
}
.feature-line b{
  font-size:18px;
  font-weight:1000;
}

/* ===== PAYMENT ===== */
.payment-card{
  padding:24px;
}
.qr-pay{
  text-align:center;
  padding:16px;
  border-radius:18px;
  background:#f8fafc;
  border:1px dashed var(--line);
}
.qr-pay img{
  width:170px;
  max-width:100%;
  border-radius:16px;
  margin:14px auto;
  box-shadow:0 12px 26px rgba(0,0,0,.15);
}
.qr-title{
  font-weight:1000;
  font-size:16px;
}
.qr-note{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* FORM */
.pay-form{
  margin-top:18px;
}
.pay-form .lbl{
  font-weight:900;
  margin-bottom:6px;
  display:block;
}

/* ===== PENDING ===== */
.pending-card{
  display:flex;
  gap:16px;
  align-items:center;
}
.pending-icon{
  font-size:40px;
}
.pending-text h3{
  margin:0 0 4px;
}

/* ================= AUTH PAGE ================= */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}

.auth-wrap{
  width:100%;
  max-width:420px;
  padding:16px;
}

.auth-card{
  padding:28px 26px;
}

/* HEADER */
.auth-head{
  text-align:center;
  margin-bottom:18px;
}

.auth-logo{
  width:56px;
  height:56px;
  border-radius:18px;
  background:var(--primary);
  color:#fff;
  font-size:26px;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
}

.auth-title{
  font-size:22px;
  font-weight:1000;
}

.auth-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* INPUT FIX */
.auth-card .inp{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:14px;
}

.auth-card .inp:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* FOOT */
.auth-foot{
  margin-top:18px;
  text-align:center;
  font-size:14px;
}

.auth-foot a{
  display:block;
  margin-top:6px;
  font-weight:900;
  color:var(--primary);
  text-decoration:none;
}

/* ALERT */
.alert.bad{
  background:#fee2e2;
  color:#991b1b;
  padding:12px;
  border-radius:12px;
  margin-bottom:14px;
  text-align:center;
}


/* ================= AUTH PAGE ================= */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
}

.auth-wrap{
  width:100%;
  max-width:520px;
  padding:16px;
}

.auth-card{
  padding:28px 26px;
}

/* HEADER */
.auth-head{
  text-align:center;
  margin-bottom:18px;
}

.auth-logo{
  width:56px;
  height:56px;
  border-radius:18px;
  background:var(--primary);
  color:#fff;
  font-size:26px;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
}

.auth-title{
  font-size:22px;
  font-weight:1000;
}

.auth-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* FORM */
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.inp{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:14px;
}

.inp:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.help{
  font-size:13px;
  color:var(--muted);
}

/* FOOT */
.auth-foot{
  margin-top:18px;
  text-align:center;
  font-size:14px;
}

.auth-foot a{
  display:block;
  margin-top:6px;
  font-weight:900;
  color:var(--primary);
  text-decoration:none;
}

/* ALERT */
.alert.bad{
  background:#fee2e2;
  color:#991b1b;
  padding:12px;
  border-radius:12px;
  margin-bottom:14px;
  text-align:center;
}

/* ===== Avatar Plan Status ===== */
.am-plan{
  padding:10px 14px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
}

.am-label{
  color:var(--muted);
}

.am-badge{
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

.am-badge.ok{
  background:#dcfce7;
  color:#166534;
}

.am-badge.warn{
  background:#fff7ed;
  color:#9a3412;
}

.am-badge.bad{
  background:#fee2e2;
  color:#991b1b;
}

.am-badge.muted{
  background:#f1f5f9;
  color:#475569;
}