/* ============================================================
   QuickShop Admin — Green Theme (matches new design mockups)
   Include AFTER quickshop-theme.css on every revamped page.
   ============================================================ */
:root{
  --qs-green:#16a34a;
  --qs-green-dark:#15803d;
  --qs-green-light:#dcfce7;
  --qs-bg:#f4f6f8;
  --qs-surface:#ffffff;
  --qs-border:#e5e7eb;
  --qs-text:#1f2937;
  --qs-muted:#6b7280;
  --qs-blue:#3b82f6;
  --qs-blue-light:#dbeafe;
  --qs-orange:#f97316;
  --qs-orange-light:#ffedd5;
  --qs-purple:#a855f7;
  --qs-purple-light:#f3e8ff;
  --qs-red:#ef4444;
  --qs-red-light:#fee2e2;
  --qs-yellow:#eab308;
  --qs-sidebar-w:230px;
}
*{box-sizing:border-box;}
body.qs-body{
  margin:0;
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--qs-bg);
  color:var(--qs-text);
  overflow-x:hidden;
  max-width:100vw;
}
html{ overflow-x:hidden; }
a{text-decoration:none;color:inherit;}

/* ---------- Sidebar ---------- */
.qs-sidebar{
  width:var(--qs-sidebar-w);
  background:#fff;
  border-right:1px solid var(--qs-border);
  height:100vh;
  position:fixed;left:0;top:0;bottom:0;
  overflow-y:auto;
  z-index:1000;
  padding-bottom:110px;
}
.qs-sidebar::-webkit-scrollbar{width:5px;}
.qs-sidebar::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px;}
.qs-brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--qs-border);}
.qs-brand .qs-logo{width:34px;height:34px;background:var(--qs-green);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;}
.qs-brand h1{font-size:16px;margin:0;font-weight:800;color:#111827;}
.qs-brand small{font-size:11px;color:var(--qs-muted);}

.qs-nav{padding:10px 12px;}
.qs-nav-item{position:relative;}
.qs-nav a.qs-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;margin-bottom:2px;border-radius:9px;
  font-size:13.5px;font-weight:500;color:#4b5563;
}
.qs-nav a.qs-link:hover{background:#f0fdf4;color:var(--qs-green-dark);}
.qs-nav a.qs-link.active{background:var(--qs-green);color:#fff;font-weight:700;}
.qs-nav .qs-link .qs-ico{width:18px;text-align:center;}
.qs-nav .qs-link .qs-caret{margin-left:auto;font-size:10px;transition:transform .15s;}
.qs-nav-item.open > .qs-link .qs-caret{transform:rotate(90deg);}
.qs-submenu{display:none;padding-left:30px;margin-bottom:4px;overflow-x:hidden;}
.qs-nav-item.open .qs-submenu{display:block;}
.qs-submenu a{display:block;padding:7px 8px;font-size:12.5px;color:#6b7280;border-radius:7px;margin-bottom:1px;}
.qs-submenu a:hover{background:#f0fdf4;color:var(--qs-green-dark);}
.qs-submenu a.active{background:var(--qs-green-light);color:var(--qs-green-dark);font-weight:700;}

/* Reference-only file list (Other Files) — plain span, not a link, so
   nothing navigates/triggers on tap. Monospace so it visually reads as
   a filename rather than a clickable menu item. */
.qs-ref{
  display:block;
  font-family:Consolas,Menlo,monospace;
  font-size:11px;color:#9ca3af;
  padding:5px 8px 5px 16px;
  border-radius:6px;
  user-select:text;
  cursor:default;
  word-break:break-all;      /* long_filenames_like_this.php have no spaces to wrap on — force-break so they never overflow the sidebar width */
  overflow-wrap:anywhere;
  max-width:100%;
  box-sizing:border-box;
}
.qs-ref:hover{background:#f9fafb;color:#6b7280;}

/* ---------- Topbar ---------- */
.qs-main{margin-left:var(--qs-sidebar-w);min-height:100vh;}
.qs-topbar{
  display:flex;align-items:center;gap:14px;
  background:#fff;border-bottom:1px solid var(--qs-border);
  padding:12px 22px;position:sticky;top:0;z-index:99;
}
.qs-search{
  flex:1;max-width:420px;display:flex;align-items:center;gap:8px;
  background:var(--qs-bg);border:1px solid var(--qs-border);border-radius:10px;padding:8px 12px;
}
.qs-search input{border:0;background:transparent;outline:0;font-size:13px;width:100%;}
.qs-topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.qs-daterange{border:1px solid var(--qs-border);border-radius:9px;padding:7px 12px;font-size:12.5px;color:#374151;background:#fff;display:flex;align-items:center;gap:6px;}
.qs-bell{position:relative;font-size:18px;color:#374151;}
.qs-bell .qs-badge{position:absolute;top:-6px;right:-8px;background:var(--qs-red);color:#fff;font-size:10px;font-weight:800;padding:1px 5px;border-radius:999px;}
.qs-admin{display:flex;align-items:center;gap:8px;}
.qs-admin img{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.qs-admin .qs-name{font-size:13px;font-weight:700;}
.qs-admin .qs-role{font-size:11px;color:var(--qs-muted);}

.qs-content{padding:22px;}
.qs-pagehead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.qs-pagehead h2{font-size:22px;margin:0 0 4px;font-weight:800;}
.qs-breadcrumb{font-size:12.5px;color:var(--qs-muted);}
.qs-breadcrumb a{color:var(--qs-muted);}
.qs-btn{
  background:var(--qs-green);color:#fff;border:0;padding:10px 16px;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.qs-btn:hover{background:var(--qs-green-dark);}
.qs-btn.outline{background:#fff;color:var(--qs-green-dark);border:1px solid var(--qs-green);}

/* ---------- Stat cards ---------- */
.qs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
@media(max-width:900px){.qs-stats{grid-template-columns:repeat(2,1fr);}}
.qs-stat{background:#fff;border:1px solid var(--qs-border);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:flex-start;}
.qs-stat-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.qs-stat-ico.g{background:var(--qs-green-light);color:var(--qs-green-dark);}
.qs-stat-ico.b{background:var(--qs-blue-light);color:var(--qs-blue);}
.qs-stat-ico.o{background:var(--qs-orange-light);color:var(--qs-orange);}
.qs-stat-ico.p{background:var(--qs-purple-light);color:var(--qs-purple);}
.qs-stat-ico.r{background:var(--qs-red-light);color:var(--qs-red);}
.qs-stat-label{font-size:12.5px;color:var(--qs-muted);margin-bottom:4px;}
.qs-stat-value{font-size:22px;font-weight:800;margin-bottom:3px;}
.qs-stat-delta{font-size:11.5px;font-weight:700;}
.qs-stat-delta.up{color:var(--qs-green-dark);}
.qs-stat-delta.down{color:var(--qs-red);}

/* ---------- Cards / panels ---------- */
.qs-card{background:#fff;border:1px solid var(--qs-border);border-radius:14px;padding:18px;margin-bottom:18px;}
.qs-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.qs-card-head h3{font-size:15px;font-weight:800;margin:0;}
.qs-card-head a{font-size:12.5px;color:var(--qs-green-dark);font-weight:700;}

/* ---------- Filters row ---------- */
.qs-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.qs-filters input[type=text],.qs-filters select{
  border:1px solid var(--qs-border);border-radius:9px;padding:9px 12px;font-size:12.5px;background:#fff;color:#374151;
}
.qs-filters input[type=text]{flex:1;min-width:200px;}

/* ---------- Table wrapper (mobile horizontal scroll) ---------- */
.qs-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.qs-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
.qs-table th{text-align:left;padding:10px 12px;color:var(--qs-muted);font-weight:700;font-size:11.5px;text-transform:uppercase;border-bottom:1px solid var(--qs-border);}
.qs-table td{padding:12px;border-bottom:1px solid #f1f3f5;vertical-align:middle;}
.qs-table tr:hover td{background:#fafafa;}
.qs-row-title{font-weight:700;color:#111827;}
.qs-row-sub{font-size:11.5px;color:var(--qs-muted);}
.qs-avatar-sq{width:34px;height:34px;border-radius:9px;object-fit:cover;background:#e5e7eb;display:inline-flex;align-items:center;justify-content:center;font-size:15px;}

/* ---------- Badges ---------- */
.qs-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;}
.qs-badge.green{background:var(--qs-green-light);color:var(--qs-green-dark);}
.qs-badge.red{background:var(--qs-red-light);color:var(--qs-red);}
.qs-badge.orange{background:var(--qs-orange-light);color:var(--qs-orange);}
.qs-badge.blue{background:var(--qs-blue-light);color:var(--qs-blue);}
.qs-badge.gray{background:#f3f4f6;color:#4b5563;}
.qs-star{color:var(--qs-yellow);}

/* ---------- Pagination ---------- */
.qs-pagination{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:14px;}
.qs-pagination a,.qs-pagination span{
  min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:12.5px;color:#374151;border:1px solid var(--qs-border);
}
.qs-pagination .active{background:var(--qs-green);color:#fff;border-color:var(--qs-green);font-weight:700;}

/* ---------- Form ---------- */
.qs-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:700px){.qs-form-grid{grid-template-columns:1fr;}}
.qs-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:#374151;}
.qs-field input,.qs-field select,.qs-field textarea{
  width:100%;border:1px solid var(--qs-border);border-radius:9px;padding:10px 12px;font-size:13px;background:#fff;color:#111827;
}
.qs-field input:focus,.qs-field select:focus,.qs-field textarea:focus{outline:2px solid var(--qs-green-light);border-color:var(--qs-green);}
.qs-msg{padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:14px;}
.qs-msg.ok{background:var(--qs-green-light);color:var(--qs-green-dark);}
.qs-msg.err{background:var(--qs-red-light);color:var(--qs-red);}

/* mobile sidebar toggle — fixed so it's always reachable (tap → Dashboard
   is the first sidebar item) even on pages with their own sticky top bar
   that would otherwise scroll over it (e.g. the bulk-tool pages). */
.qs-menu-btn{
  display:none;font-size:19px;background:#fff;border:1px solid var(--qs-border,#e5e7eb);
  cursor:pointer;color:#374151;
  position:fixed;top:12px;left:12px;z-index:1200;
  width:40px;height:40px;border-radius:50%;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  align-items:center;justify-content:center;
}
/* two-column dashboard rows stack on tablet/mobile */
.qs-row-2col{display:grid;grid-template-columns:2fr 1fr;gap:18px;}
.qs-row-2col.even{grid-template-columns:1fr 1fr;}
@media(max-width:900px){
  .qs-stats{grid-template-columns:repeat(2,1fr) !important;}
  .qs-row-2col,.qs-row-2col.even{grid-template-columns:1fr !important;}
}
@media(max-width:920px){
  .qs-sidebar{transform:translateX(-100%);transition:transform .2s;}
  .qs-sidebar.qs-open{transform:translateX(0);}
  .qs-main{margin-left:0;}
  .qs-menu-btn{display:flex;}
  .qs-search{display:none;}
  .qs-content{padding:14px;}
  .qs-pagehead h2{font-size:19px;}
}
@media(max-width:480px){
  .qs-stats{grid-template-columns:1fr 1fr !important;gap:10px;}
  .qs-stat{padding:12px;}
  .qs-stat-value{font-size:18px;}
}