/* =====================================================================
   Stitch Plus  —  Light Glossy Theme
   ===================================================================== */
:root{
  --bg:#eef2f9;
  --glass:rgba(255,255,255,0.65);
  --glass-strong:rgba(255,255,255,0.85);
  --border:rgba(255,255,255,0.5);
  --primary:#6d5bf6;
  --primary-2:#9b7bfa;
  --accent:#22c1c3;
  --success:#1fbf75;
  --warning:#f7a844;
  --danger:#f25c67;
  --text:#2b2d42;
  --muted:#7b7f9e;
  --shadow: 0 8px 30px rgba(109,91,246,0.12);
  --radius:18px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Poppins','Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, #dfe7ff 0%, transparent 40%),
    radial-gradient(circle at 90% 20%, #e3fbf6 0%, transparent 40%),
    linear-gradient(180deg,#f4f7fd 0%, #e9edf9 100%);
  min-height:100vh;
}

a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#c9cdfb;border-radius:10px;}

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

.sidebar{
  width:250px;flex:0 0 250px;
  background:linear-gradient(160deg, rgba(255,255,255,0.75), rgba(255,255,255,0.4));
  backdrop-filter:blur(20px);
  border-right:1px solid var(--border);
  padding:22px 16px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 22px;}
.brand .logo{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  box-shadow:var(--shadow);
}
.brand h1{font-size:18px;margin:0;font-weight:700;}
.brand span{display:block;font-size:11px;color:var(--muted);}

.nav-section-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:16px 10px 8px;}
.nav-link{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;margin:3px 0;border-radius:12px;
  color:var(--text);font-size:14px;font-weight:500;
  transition:all .15s ease;
  text-decoration: none !important;
}
.nav-link:hover{background:rgba(109,91,246,0.08);}
.nav-link.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;box-shadow:0 6px 16px rgba(109,91,246,0.35);
}
.nav-link .ic{width:18px;text-align:center;}

.main{flex:1;min-width:0;padding:22px 28px 60px;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--glass);backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 20px;margin-bottom:22px;box-shadow:var(--shadow);
}
.topbar h2{margin:0 !important;font-size:20px;}
.topbar .sub{font-size:12px;color:var(--muted);}

/* Mobile menu toggle */
.mobile-menu-toggle {
  background: transparent; border: none; font-size: 24px; color: var(--primary);
  cursor: pointer; padding: 0 10px 0 0; display: none;
}
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40;
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.sidebar-backdrop.active { opacity: 1; visibility: visible; }
.searchbox{
  display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:30px;padding:8px 16px;
  border:1px solid #e6e8fb;min-width:280px;
}
.searchbox input{border:none;outline:none;background:transparent;flex:1;font-size:14px;}
.user-chip{display:flex;align-items:center;gap:10px;}
.user-chip .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}

/* ---------- Cards / glass panels ---------- */
.card{
  background:var(--glass-strong);
  backdrop-filter:blur(18px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}
.card + .card{margin-top:20px;}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-bottom:22px;}
.kpi{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);
}
.kpi::after{
  content:"";position:absolute;top:-40px;right:-40px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.9), transparent 70%);
}
.kpi .icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;margin-bottom:10px;box-shadow:0 6px 14px rgba(0,0,0,0.12);
}
.kpi .val{font-size:26px;font-weight:700;margin:2px 0;}
.kpi .lbl{font-size:12.5px;color:var(--muted);font-weight:500;}
.kpi .delta{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block;margin-top:6px;}
.bg-violet{background:linear-gradient(135deg,#6d5bf6,#9b7bfa);}
.bg-teal{background:linear-gradient(135deg,#22c1c3,#3edbb0);}
.bg-orange{background:linear-gradient(135deg,#f7a844,#ffcf6b);}
.bg-pink{background:linear-gradient(135deg,#f25c67,#ff8fa3);}
.bg-blue{background:linear-gradient(135deg,#3b82f6,#60a5fa);}
.bg-green{background:linear-gradient(135deg,#1fbf75,#5be2a0);}
.delta.up{background:#e4f9ef;color:#1fbf75;}
.delta.down{background:#fdeaec;color:#f25c67;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table.gtable{width:100%;border-collapse:separate;border-spacing:0 8px;}
table.gtable thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:0 14px 8px;
}
table.gtable tbody tr{background:#fff;box-shadow:0 3px 10px rgba(43,45,66,0.05);}
table.gtable tbody td{padding:13px 14px;font-size:13.5px;border-top:1px solid #f0f1fa;border-bottom:1px solid #f0f1fa;}
table.gtable tbody tr td:first-child{border-left:1px solid #f0f1fa;border-radius:12px 0 0 12px;}
table.gtable tbody tr td:last-child{border-right:1px solid #f0f1fa;border-radius:0 12px 12px 0;}
table.gtable tbody tr:hover{box-shadow:0 6px 18px rgba(109,91,246,0.12);}

/* Badges / pills */
.badge{padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:600;display:inline-block;}
.badge-new{background:#e8ecff;color:#5b6ee8;}
.badge-cutting{background:#fff2df;color:#e08a1f;}
.badge-stitching{background:#e6f2ff;color:#2f7bd6;}
.badge-finishing{background:#f1e6ff;color:#8a3ff0;}
.badge-ready{background:#e2f9ee;color:#12a35f;}
.badge-delivered{background:#e4f9ef;color:#1fbf75;}
.badge-cancelled{background:#fdeaec;color:#f25c67;}
.badge-unpaid{background:#fdeaec;color:#f25c67;}
.badge-partial{background:#fff2df;color:#e08a1f;}
.badge-paid{background:#e4f9ef;color:#1fbf75;}
.badge-normal{background:#eef0f7;color:#7b7f9e;}
.badge-urgent{background:#fff2df;color:#e08a1f;}
.badge-express{background:#fdeaec;color:#f25c67;}

/* ---------- Buttons / forms ---------- */
.btn{
  border:none;cursor:pointer;padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 6px 16px rgba(109,91,246,0.35);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(109,91,246,0.4);}
.btn-outline{background:#fff;border:1px solid #e2e5fb;color:var(--text);}
.btn-success{background:linear-gradient(135deg,#1fbf75,#5be2a0);color:#fff;}
.btn-danger{background:linear-gradient(135deg,#f25c67,#ff8fa3);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:9px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:12.5px;font-weight:600;color:var(--muted);}
.form-group input,.form-group select,.form-group textarea{
  padding:10px 13px;border-radius:11px;border:1px solid #e2e5fb;background:#fff;font-size:13.5px;
  font-family:inherit;outline:none;transition:border .15s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);}
fieldset{border:1px dashed #d8dcfb;border-radius:14px;padding:16px;margin:0 0 16px;}
legend{padding:0 8px;font-weight:600;font-size:13px;color:var(--primary);}

.section-title{font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px;}
.pill-tab{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.pill-tab a{padding:9px 16px;border-radius:30px;background:#fff;border:1px solid #e2e5fb;font-size:13px;font-weight:600;color:var(--muted);}
.pill-tab a.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(109,91,246,0.3);}

.alert{padding:12px 16px;border-radius:12px;font-size:13.5px;margin-bottom:16px;}
.alert-success{background:#e4f9ef;color:#12a35f;}
.alert-error{background:#fdeaec;color:#e14b57;}

.timeline{list-style:none;margin:0;padding:0;}
.timeline li{position:relative;padding:0 0 22px 30px;border-left:2px solid #e6e8fb;}
.timeline li:last-child{border-color:transparent;}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px #eceafe;}
.timeline li.done::before{background:var(--success);box-shadow:0 0 0 4px #e4f9ef;}
.timeline .t-title{font-weight:600;font-size:14px;}
.timeline .t-meta{font-size:12px;color:var(--muted);}

.empty-state{text-align:center;padding:40px 20px;color:var(--muted);}

@media(max-width:900px){
  .sidebar{position:fixed;left:-260px;z-index:50;transition:left .3s ease; height: 100vh;}
  .sidebar.open{left:0;}
  .main{padding:16px;}
  .topbar{flex-wrap:wrap;gap:12px;padding:12px;}
  .topbar > div:first-child{width:100%;}
  .searchbox{flex:1;min-width:0;}
  .mobile-menu-toggle { display: block; }
}

/* =====================================================================
   Stitch Plus v2.0 — Extended Styles
   ===================================================================== */

/* Image gallery in order views */
.img-gallery-wrap { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.img-gallery-thumb { width:80px; height:80px; border-radius:10px; object-fit:cover;
                     border:2px solid #e2e5fb; cursor:pointer; transition:.2s; }
.img-gallery-thumb:hover { border-color:var(--primary); transform:scale(1.06); }

/* Lightbox */
.lightbox-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:999;
                    align-items:center; justify-content:center; cursor:zoom-out; }
.lightbox-overlay.open { display:flex; }
.lightbox-overlay img { max-width:90vw; max-height:88vh; border-radius:14px;
                        box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:default; }
.lightbox-close-btn { position:absolute; top:20px; right:24px; font-size:26px; color:#fff;
                      cursor:pointer; background:rgba(255,255,255,.1); border:none;
                      border-radius:50%; width:42px; height:42px; display:flex; align-items:center; justify-content:center; }

/* Image upload zone */
.img-upload-zone { border:2px dashed #c5caff; border-radius:14px; padding:18px;
                   text-align:center; cursor:pointer; transition:all .2s; background:#f8f9ff;
                   user-select:none; }
.img-upload-zone:hover { border-color:var(--primary); background:#f0f1fd; }
.img-upload-zone.drag-over { border-color:var(--primary); background:#ebe9ff; }
.img-preview-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.img-preview { position:relative; width:88px; height:88px; border-radius:10px;
               overflow:hidden; border:2px solid #e2e5fb; }
.img-preview img { width:100%; height:100%; object-fit:cover; }
.img-preview .del-img { position:absolute; top:2px; right:2px; background:rgba(220,53,69,.85);
                         color:#fff; border:none; border-radius:50%; width:22px; height:22px;
                         font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* Measurement field animation */
.mfield-item { transition:all .25s; overflow:hidden; }
.mfield-item.hidden { display:none; }

/* Settings page tabs */
.settings-page-wrap .tab-bar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px; }
.settings-page-wrap .tab-bar a { padding:10px 18px; border-radius:10px; border:1.5px solid #e2e5fb;
  background:#f8f9ff; color:#555; font-weight:600; font-size:13px; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.settings-page-wrap .tab-bar a:hover,
.settings-page-wrap .tab-bar a.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Garment item card */
.garment-item { border:1px solid #e2e5fb; border-radius:16px; padding:18px;
                margin-top:16px; background:#fff; transition:.15s; }
.garment-item:hover { box-shadow:0 6px 20px rgba(109,91,246,.08); }

/* Enhanced KPI – compact variant */
.kpi-grid-sm { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.kpi-grid-sm .kpi .val { font-size:20px; }

/* Reports progress bars */
.progress-bar-wrap { background:#f0f1fa; border-radius:6px; overflow:hidden; height:7px; }
.progress-bar-fill { height:100%; border-radius:6px;
                     background:linear-gradient(90deg,var(--primary),#a855f7); transition:width .5s; }

/* Public page: tracking link copy box */
.tracking-link-copy { background:#f0f4ff; border:1px solid #dde; border-radius:10px;
                       padding:10px 14px; font-size:13px; display:flex; align-items:center; gap:10px; }
.tracking-link-copy a { color:var(--primary); font-weight:600; word-break:break-all; }

/* Export button */
.export-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
              border-radius:9px; background:#12a35f; color:#fff; font-weight:700;
              font-size:12.5px; text-decoration:none; border:none; cursor:pointer;
              transition:.15s; }
.export-btn:hover { background:#0e8a50; }

/* Responsive */
@media (max-width:600px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .form-grid { grid-template-columns:1fr; }
}