/* =====================================================================
   StitchSuite — Design tokens
   Palette: ink navy + brass/gold thread accent on a soft bone background,
   evoking a tailor's workroom (chalk, thread spools, measuring tape)
   without being literal or decorative.
   ===================================================================== */
:root{
  --navy:        #16213E;
  --navy-2:      #1E2C52;
  --navy-soft:   #2A3B66;
  --gold:        #C69A3D;
  --gold-dark:   #A87F2C;
  --bone:        #F6F4EF;
  --panel:       #FFFFFF;
  --ink:         #1C2333;
  --muted:       #707486;
  --border:      #E7E3D8;
  --success:     #2E7D5B;
  --success-bg:  #E7F5EE;
  --danger:      #C0392B;
  --danger-bg:   #FBEAE8;
  --warning:     #B8860B;
  --warning-bg:  #FBF3DF;
  --info:        #2E6E9E;
  --info-bg:     #E8F1F9;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 2px 10px rgba(22,33,62,0.06);
  --shadow-md:   0 8px 24px rgba(22,33,62,0.10);
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  background:var(--bone);
  color:var(--ink);
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,sans-serif;
  font-optical-sizing:auto;
}

body{ font-size:15px; font-weight:500; }

h1,h2,h3,h4,h5,h6{ font-weight:800; letter-spacing:-0.01em; color:var(--navy); }
.fw-800{ font-weight:800 !important; }
.fw-700{ font-weight:700 !important; }
.text-muted-2{ color:var(--muted) !important; }
.text-gold{ color:var(--gold-dark) !important; }
a{ text-decoration:none; }

/* ---------------------------------------------------------------
   Auth screens (login / register)
   --------------------------------------------------------------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, rgba(22,33,62,.97), rgba(30,44,82,.97)),
    repeating-linear-gradient(135deg, rgba(198,154,61,.10) 0 2px, transparent 2px 26px);
  padding:24px;
}
.auth-card{
  width:100%; max-width:960px;
  background:var(--panel);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:grid;
  grid-template-columns:1fr 1fr;
}
.auth-side{
  background:var(--navy);
  color:#fff;
  padding:48px 40px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.auth-side::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 85% 12%, rgba(198,154,61,.20), transparent 45%);
  pointer-events:none;
}
.auth-brand{ display:flex; align-items:center; gap:12px; font-size:22px; font-weight:800; }
.auth-brand .bi{ color:var(--gold); font-size:26px; }
.tape-rule{
  height:6px; border-radius:4px; width:64px; margin:18px 0;
  background:repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px);
}
.auth-form{ padding:48px 44px; }
@media (max-width:820px){
  .auth-card{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
}

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

.sidebar{
  width:250px; flex-shrink:0;
  background:var(--navy);
  color:#dfe3ee;
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0;
  transition:transform .2s ease;
  z-index:1030;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 20px 14px;
  color:#fff; font-weight:800; font-size:19px;
}
.sidebar-brand .bi{ color:var(--gold); font-size:22px; }
.sidebar-scroll{ overflow-y:auto; flex:1; padding:6px 12px 20px; }
.sidebar .nav-section{
  text-transform:uppercase; font-size:11px; letter-spacing:.08em;
  color:#8992ad; font-weight:700; margin:16px 10px 6px;
}
.sidebar .nav-link{
  display:flex; align-items:center; gap:12px;
  color:#c7cce0; padding:10px 12px; border-radius:var(--radius-sm);
  font-weight:600; font-size:14.5px; margin-bottom:2px;
}
.sidebar .nav-link .bi{ font-size:17px; width:18px; text-align:center; color:#9aa2c2; }
.sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active{ background:var(--gold); color:var(--navy); }
.sidebar .nav-link.active .bi{ color:var(--navy); }
.sidebar-foot{ padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#7c85a6; }

.main{ margin-left:250px; flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

.topbar{
  height:64px; background:var(--panel); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:1020;
}
.topbar .page-title{ font-weight:800; font-size:19px; color:var(--navy); }
.burger{ display:none; background:none; border:0; font-size:22px; color:var(--navy); }
.branch-pill{
  background:var(--bone); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px; font-size:13px; font-weight:700; color:var(--navy);
  display:flex; align-items:center; gap:6px;
}
.user-menu img, .user-avatar{
  width:36px; height:36px; border-radius:50%; background:var(--gold);
  color:var(--navy); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}

.content{ padding:24px; flex:1; }

@media (max-width:960px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 0 100vmax rgba(0,0,0,.35); }
  .main{ margin-left:0; }
  .burger{ display:inline-block; }
}

/* ---------------------------------------------------------------
   Cards / components
   --------------------------------------------------------------- */
.card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-header{ background:transparent; border-bottom:1px solid var(--border); font-weight:800; color:var(--navy); }

.stat-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.stat-card .icon-badge{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.stat-card .stat-value{ font-size:24px; font-weight:800; color:var(--navy); line-height:1.1; }
.stat-card .stat-label{ font-size:12.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

.bg-navy{ background:var(--navy) !important; color:#fff; }
.bg-gold-soft{ background:#FBF3DF !important; color:var(--gold-dark) !important; }
.bg-success-soft{ background:var(--success-bg) !important; color:var(--success) !important; }
.bg-danger-soft{ background:var(--danger-bg) !important; color:var(--danger) !important; }
.bg-info-soft{ background:var(--info-bg) !important; color:var(--info) !important; }
.bg-warning-soft{ background:var(--warning-bg) !important; color:var(--warning) !important; }
.bg-secondary-soft{ background:#eef0f4 !important; color:#5b6072 !important; }
.bg-primary-soft{ background:#e7ecfb !important; color:#3448a8 !important; }
.bg-dark-soft{ background:#e7e8ec !important; color:#232838 !important; }

/* Fabric-tag style badges (used for order status / stock status) */
.tag-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:700;
}

.btn{ font-weight:700; border-radius:var(--radius-sm); font-size:14.5px; }
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }
.btn-navy{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.btn-outline-navy{ border-color:var(--navy); color:var(--navy); }
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }

.table thead th{
  text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; color:var(--muted);
  border-bottom:2px solid var(--border); font-weight:800; white-space:nowrap;
}
.table td{ vertical-align:middle; font-size:14.5px; }
.table-hover tbody tr:hover{ background:#faf8f3; }

.form-label{ font-weight:700; font-size:13.5px; color:var(--navy); }
.form-control,.form-select{ border-radius:var(--radius-sm); border-color:var(--border); font-weight:600; font-size:14.5px; }
.form-control:focus,.form-select:focus{ border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(198,154,61,.18); }

/* Stitched divider */
.stitch-divider{
  border:0; height:0; border-top:2px dashed var(--border); margin:20px 0;
}

/* Order status timeline (tailoring) */
.status-track{ display:flex; align-items:center; }
.status-track .step{ flex:1; text-align:center; position:relative; }
.status-track .dot{
  width:30px; height:30px; border-radius:50%; background:#eee; color:#999;
  display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-size:14px;
  border:2px solid var(--border);
}
.status-track .step.done .dot{ background:var(--success); border-color:var(--success); color:#fff; }
.status-track .step.current .dot{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.status-track .line{
  position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--border); z-index:-1;
}
.status-track .step:first-child .line{ display:none; }
.status-track .step.done .line{ background:var(--success); }
.status-track small{ font-size:11px; color:var(--muted); font-weight:700; }

/* POS terminal */
.pos-grid{ display:grid; grid-template-columns:1fr 380px; gap:18px; align-items:start; }
@media (max-width:1100px){ .pos-grid{ grid-template-columns:1fr; } }
.product-tile{
  border:1px solid var(--border); border-radius:var(--radius); background:#fff; padding:14px;
  cursor:pointer; transition:.15s; height:100%;
}
.product-tile:hover{ border-color:var(--gold); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.product-tile .p-icon{
  width:100%; height:64px; border-radius:10px; background:var(--bone);
  display:flex; align-items:center; justify-content:center; color:var(--gold-dark); font-size:26px; margin-bottom:10px;
}
.product-tile .p-name{ font-weight:800; font-size:13.5px; color:var(--navy); line-height:1.25; }
.product-tile .p-price{ font-weight:700; color:var(--gold-dark); font-size:13px; }
.product-tile .p-stock{ font-size:11px; color:var(--muted); }

.cart-panel{ position:sticky; top:80px; }
.cart-line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--border); }
.cart-line .qty-box{ display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; }
.cart-line .qty-box button{ border:0; background:none; width:26px; height:26px; font-weight:800; color:var(--navy); }
.cart-line .qty-box input{ width:34px; text-align:center; border:0; font-weight:700; }

/* Login/register helper text */
.hint{ font-size:12.5px; color:var(--muted); }

/* Print invoice */
@media print{
  .no-print{ display:none !important; }
  .print-only{ display:block !important; }
  body{ background:#fff; }
}
.print-only{ display:none; }

/* Empty state */
.empty-state{ text-align:center; padding:50px 20px; color:var(--muted); }
.empty-state .bi{ font-size:42px; color:var(--border); margin-bottom:10px; display:block; }

/* Scrollbar (subtle) */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#d8d4c6; border-radius:8px; }