/* StitchCore main stylesheet (extracted from demo.html)
   NOTE: Paste ALL CSS from your demo.html <style> blocks below, 1:1, no edits.
   If any path tweaks are ever required for assets, I’ll mark them like this: // 🔁 Replace here
*/

/* === PASTE FROM DEMO.HTML <style> TAGS BELOW THIS LINE === */
/* (Everything between <style>…</style> in your demo.html) */
/* ============ ROOT & TOKENS ============ */
:root{
  --plum:#2b124c;        /* accent */
  --plum-dark:#1a0a2e;
  --bg:#f9f9fb;
  --radius:16px;
  --shadow:0 4px 18px rgba(0,0,0,.06);
  --tr:.25s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:Poppins,sans-serif;background:var(--bg);color:#2c3e50;line-height:1.5}

/* ============ UTILITIES ============ */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.btn{border:none;border-radius:var(--radius);cursor:pointer;transition:var(--tr)}
.btn-primary{background:var(--plum);color:#fff;padding:1rem 0.5rem;font-size:0.9rem; width:150px;}
.btn-primary:hover{background:#fff !important; color: var(--plum);transform:translateY(-2px);border: 1px solid var(--plum);}
.btn-secondary{background:#fff;color:var(--plum);padding:1rem 0.5rem;font-size:0.9rem; width:150px;border: 1px solid var(--plum);}
.btn-secondary:hover{background:var(--plum) !important; color: #fff;transform:translateY(-2px)}
.badge{display:inline-block;padding:.25rem .65rem;border-radius:999px;font-size:.7rem;font-weight:600;text-transform:capitalize}
.hide{display:none!important}
/* 1️⃣  Make the TD fill solid and let the <select> blend in */


/* ============ TOP BAR ============ */
.sc-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.si-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.sc-logo {
  font-size: 2.2rem;
  letter-spacing: 0.5px;
  display: inline-flex;
  gap: 4px;

  align-items: baseline;
}

.sc-logo .script {
  font-family: 'Ephesis', cursive;  line-height: 1;font-weight: 700;

  color: var(--plum);
}

.sc-logo .core {
  font-family: 'Ephesis', cursive;
  color: #8d857a;
}
.sc-byline {
  font-size: 0.65rem;
  color: #777;
  margin-top: 0.1rem;
  display: none;
  font-family: 'Inter', sans-serif;
}
.topbar {
  background: #fff;
  padding: 0.8rem 1rem;
  z-index:300;
  position: sticky !important;
    top: 0px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.topbar-content {
  display: flex;
  width: 90%;
  justify-self:center;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ---- Desktop ---- */
@media (min-width: 769px) {
  .topbar-left {
    flex: 1;
    justify-content: flex-start;
  }

  .topbar-right {
    flex: 1;
    justify-content: flex-end;
  }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .topbar-left {
    order: 1;
    flex: 1;
    justify-content: flex-start;
  }
  .topbar-content {
  width: 95%;}
  .topbar-right {
    order: 2;
    flex: 1;
    justify-content: flex-end;
  }

  /* Hide on mobile: search, role, avatar */
  #searchInput,
 
  .sc-logo-wrapper {
    display: none;
  }
}

.search-bar{flex:1;max-width:200px;padding:.75rem 1.25rem !important;border:2px solid #e1e8ed !important;border-radius:var(--radius) !important;font-size:.9rem}
.search-bar:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(43,18,76,.1)}
.role-selector{display:none;padding:.75rem 1.25rem !important;border:2px solid #e1e8ed !important ;border-radius:var(--radius) !important;font-size:.9rem;max-width:120px;}
.user-avatar{width:45px;height:45px;max-width: 45px;border-radius:50%;    border: 1px var(--plum) solid;
    object-fit: contain;}

/* ============ SUMMARY ============ */
.summary-grid{max-width:1400px;margin:1.2rem auto;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));padding:0.5rem 1.5rem}
.summary-card h3{color:var(--plum);margin-bottom:1rem;font-size:1rem;font-weight:600}
@media (max-width: 768px) {
.summary-grid{
display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.summary-card{min-width:260px;}
}
.summary-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.stat{background:#f8f9fa;padding:.75rem;border-radius:8px;text-align:center}
.stat-number{font-size:1.6rem;font-weight:700;color:var(--plum)}
.stat-label{font-size:.7rem;color:#666;margin-top:.25rem}
.delivery-list, .appointment-list {
            list-style: none;
            margin:0px;
        }

        .delivery-list li, .appointment-list li {
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .delivery-date {
            font-size: 12px;
            color: #e74c3c;
            font-weight: 500;
        }
/* ============ FILTER BAR ============ */
.filters{max-width:1400px;margin:0.25rem 0.5rem;padding:0 0.5rem;display:flex;flex-wrap:wrap; align-items:center;}
.pill{padding:.3rem 0.8rem;border:2px solid #e1e8ed;border-radius:999px;font-size:.85rem;cursor:pointer}
.pill.active,.pill:hover{background:var(--plum);border-color:var(--plum);color:#fff}
.orderssearchnpager{
    margin-left:auto; display:flex; align-items:center; gap:.5rem; overflow:hidden;
}

/* ============ ORDERS LIST ============ */
.orders-wrap{max-width:1400px;margin:1rem 1rem 3rem;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.orders-head{background:var(--plum);color:#fff;font-weight:600;padding:1.3rem 2rem;font-size:1.1rem}
.row-head,.order-row{display:grid;align-items:center;padding:1rem 2rem;gap:1.2rem}
.row-head{background:#f8f9fa;font-weight:600;color:var(--plum);    border-bottom: 1px solid #e1e8ed;}
.row-head div{display:flex;align-items:center;gap:.4rem;cursor:pointer;justify-content: center;}
.sort-icon{font-size:.6rem;opacity:.5;transform:rotate(90deg)}
.row-head .sorted-asc .sort-icon{transform:rotate(-90deg);opacity:1}
.row-head .sorted-desc .sort-icon{transform:rotate(90deg);opacity:1}

.row-head,
.order-row{grid-template-columns:20% 20% 20% 20% 15%;}

.order-row div{
    display: flex;
    justify-content: center;
    align-items: center;
}
.order-row{border-bottom:1px solid #e1e8ed;cursor:pointer;transition:background .15s}
.order-row:hover{background:#f8f9fa}
.book-num{font-weight:600;color:var(--plum)}
.sla-badge{padding:.25rem .6rem;border-radius:8px;font-size:.75rem;font-weight:500;text-align:center}
.sla-good{background:#d4edda;color:#155724}
.sla-warn{background:#f8d7da;color:#721c24}
.sla-bad{background:#f8d7da;color:#721c24}
.expand-btn{width:28px;height:28px;border-radius:50%;background:#e1e8ed;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.expand-btn svg{width:12px;height:12px;stroke:#333;stroke-width:2;fill:none;transition:var(--tr)}
.expand-btn.open{transform:rotate(180deg)}

/* ============ EXPANDED DETAILS ============ */
.details{display:none;background:#f8f9fa;border-top:1px solid #e1e8ed;padding:2rem}
.details.open{display:block}
.details-grid{display:flex;gap:0.5rem;overflow-x: scroll;padding:5px;}
@media (max-width: 768px) {
    
    #searchnpager {
        
    }
.details-grid {
  display: flex;
  gap: 1rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.client-card, .team-card, .status-card {
  min-width: 320px; /* adjust as needed */
  flex: 0 0 auto;
  background: #fff;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.status-vertical{
display:flex !important;}
.status-card-vertical {
max-width:260px;}

}
@media(max-width:900px){.details-grid{grid-template-columns:1fr}}
/* ---  Card 1: Client & Mea --- */
.client-card,.team-card,.status-card{min-width:320px;background:#fff;border-radius:var(--radius);box-shadow:0 3px 12px rgba(0,0,0,.05);padding:1.5rem}
.status-card{display:flex;flex-direction: column; overflow-x:scroll;-webkit-overflow-scrolling: touch; 
  overscroll-behavior-x: none; }
.client-card h4,.team-card h4,.status-card h4{color:var(--plum);margin-bottom:1rem;font-size:1rem;font-weight:600}
.client-info{display:flex;gap:1rem;margin-bottom:1rem}
.client-avatar{width:60px;height:60px;border-radius:50%;background:#ddd;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.1rem;background:linear-gradient(135deg,var(--plum),#8e44ad)}
.meas-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.4rem}
.meas-item{background:#f8f9fa;padding:.45rem .7rem;border-radius:8px;font-size:.8rem;display:flex;justify-content:space-between}

/* ---  Card 2: Team & Buttons --- */
.team-list li{font-size:.85rem;margin-bottom:.3rem}
/* buttons already styled (.btn-primary) */

/* ---  Card 3: Status table --- */
.status-table{width:100%;border-collapse:collapse;font-size:.8rem}
.status-table th,.status-table td{padding:.55rem .8rem;border-bottom:1px solid #e1e8ed;text-align:left}
.status-table th{background:#f8f9fa;color:var(--plum)}
.status-table select{padding:.25rem .4rem;border-radius:6px;border:0px solid #ccc;font-size:.75rem;text-transform: capitalize;cursor:pointer}
.icon-button-group {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.75rem;
}
.sync-btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:#ffffff00; padding:0; cursor:pointer;
  }
  
  .sync-btn:hover, .sync-btn:focus{
      background:#ffffff00;
  }
  .sync-btn svg{ width:18px; height:18px; transition:transform .2s ease; }
  .sync-btn.is-spinning svg{ animation: scspin .8s linear infinite; }
  @keyframes scspin { to { transform: rotate(360deg); } }
.icon-btn {
  border-radius: 25px;
  background-color: #2b124c;
  border: none;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.icon-btn:hover {
  background-color: #ddd;
  transform: scale(1.05);
}

/* ============ MODAL (unchanged) ============ */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}
.modal-box {
  width: 720px;
  height:80vh;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.close{padding: 4px 8px;border-radius:10px;border:none;font-size:2rem;cursor:pointer}
.status-vertical {
  display: flex !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  
}
#woSteps {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.status-card-vertical {
  flex: 1 1 460px;
  min-width:420px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
  width:260px;
}

.status-card-vertical h5 {
  font-size: 0.95rem;
  color: var(--plum);
  margin-bottom: 0.8rem;
}

.status-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
}

.status-field label {
  font-weight: 600;
  flex: 1;
  color:black;
}

.status-field select {
  flex: 1;
  padding: 0.3rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight:500;
  border: 1px solid #ddd;
  text-transform: capitalize;
}

/* Sidebar Base */
.sliding-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background: white;
  padding: 5rem 1rem;
  box-shadow: 2px 0 6px rgba(0,0,0,0.05);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 200;
}

.sliding-sidebar.show {
  transform: translateX(0%);
}

.sidebar-header {
  font-size: 1.2rem;
  color: #2b124c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.sidebar-toggle {
  position: static;
  top: 1rem;
  left: 1rem;
  z-index: 1100;
  background: #2b124c;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  border-radius: 30px;
  cursor: pointer;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #2b124c;
  cursor: pointer;
}

.sliding-sidebar nav button {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  margin-bottom: 0.5rem;
  border: none;
  background: none;
  text-align: left;
  font-weight: 500;
  color: #333;
  border-radius: 8px;
  cursor: pointer;
}

.sliding-sidebar nav button.active {
  background: #2b124c;
  color: white;
}
.sidebar-toggle:focus,
.sidebar-toggle:active {
  outline: none;
  background: #2b124c;
  color: white;
  box-shadow: none;
}
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  
  .row-head{
  grid-template-columns:30% 30% 25%;
}
  .order-row {
  grid-template-columns:35% 25% 15% 20%;
}
  .row-head, .order-row {
    padding: 1rem 1rem;
    gap: 1.2rem;
    font-size:0.9rem;
}
.row-head{
    gap: 1.4rem;
}
}
#logModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 700px;
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
  z-index: 999;
  overflow:auto;
}
/* wizard helpers */
.wo-step {display:block;}
.wo-step.hide {display:none;}
#newOrderModal .modal-box input,
#newOrderModal .modal-box select,
#newOrderModal .modal-box textarea{
  width:100%;padding:.65rem;border:1px solid #ccc;border-radius:8px;font-size:.85rem;
}
#newOrderModal .garment-card.active{border:2px solid var(--plum)}
#newOrderModal .garment-card.disabled{opacity:.4;pointer-events:none}
.upload-box{
  flex:1;
  min-height:160px;           /* taller */
  border:2px dashed #bbb;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  color:#475569;
  cursor:pointer;
  transition:background .25s;
}
.upload-box:hover{background:#f8f9fb}
.upload-box svg{width:30px;height:30px;stroke:currentColor;fill:none}

/* ── Article grid: 3-up & centered ───────────────────── */
#woArticleGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1.2rem;
  justify-items:center;
  text-align:center;
}
.btn-pre{background:white;color:var(--plum);padding:1rem 0.5rem;font-size:0.9rem; width:150px;border:2px solid var(--plum)}
.btn-pre{background:white;transform:translateY(-2px)}
/* ── Measurement input grid ──────────────────────────── */
.measure-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:600px){
  .measure-grid{grid-template-columns:repeat(2,1fr)}
}
#woArticleGrid .garment-card img{
  height:220px;
  object-fit:cover;   /* keep aspect-ratio, crop if taller */
  width:100%;         /* full card width */
}
/* ── smooth mobile scroll for cards (details-grid) ──── */


.style-section  {margin-bottom:1.4rem}
.style-section h4{margin:.4rem 0 .6rem;font-size:.9rem;color:#475569}

.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:.75rem;
}
.style-swatch{
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition:border .25s;
}
.style-swatch img{
  width:100%;height:90px;object-fit:cover;display:block;
}
.style-swatch.active{border-color:var(--plum)}

/* ==== TEAM TAB =========================================================== */

/* container */
.team-wrap{max-width: 1400px;
    margin: 1rem 1rem 3rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;}

/* header row & collapsed rows (inherit same feel as Orders) */

.team-row{
  background:#fff;
  border-bottom:1px solid #eee;
  cursor:pointer;
  transition:background .15s;
}
.team-row:hover{background:#fafafa}

/* hide some columns on small screens */
.hide-mobile{display:block}
@media(max-width:640px){
 
  .row-head .hide-mobile,
  .team-row .hide-mobile{display:none}
}

/* arrow button */
.expand-btn{display:flex;justify-content:center;align-items:center;transition:transform .3s}
.expand-btn svg{width:18px;height:18px;stroke:#666;fill:none;stroke-width:2px}
.expand-btn.open{transform:rotate(180deg)}

/* expanded details area */
.details{display:none;background:#fdfdfd;padding:1.2rem 1rem}
.details.open{display:block}



/* info cards */
.client-card,
.team-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}
.stat{text-align:center;flex:1}
.stat-number{font-size:1.4rem;font-weight:700;color:var(--plum)}
.stat-label{font-size:.75rem;color:#666;text-transform:uppercase;margin-top:.2rem}

/* assignment table */
.assign-table{width:100%;border-collapse:collapse;font-size:.8rem}
.assign-table th,
.assign-table td{padding:.4rem .35rem;border-bottom:1px solid #e6e6e6;text-align:left}
.assign-table th{background:#fafafa;color:var(--plum)}

/* skill dots */
.skill-strip{display:flex;gap:.25rem}
.skill-dot{width:10px;height:10px;border-radius:50%;background:#ddd}
.skill-dot.on{background:var(--plum)}

/* horizontal swipe on small devices */

/* ==== TEAM – new bits ==================================================== */
.capacity-strip {display:flex;gap:4px;margin-top:.4rem}
.capacity-bar{flex:1;height:10px;border-radius:3px;background:#E6E1DB}
.capacity-bar.on{background:#C3B8A9}
.quick-actions{display:flex;gap:.6rem;margin-top:1.2rem; justify-content:center;}
.quick-actions button{border:none;border-radius:50%;width:32px;height:32px;padding:0px;
  display:flex;align-items:center;justify-content:center;background:#2b124c;color:#fff;
  transition:transform .2s}
.quick-actions button:hover{transform:scale(1.08)}
/* neutralise payroll col if not applicable */
.no-pay{color:#999}
.team-head{
  font-size:1.05rem;
  font-weight:600;
  background:#f7f8fb;
  border-bottom:1px solid #e5e7eb;
  padding:.9rem 1.4rem;
  letter-spacing:.3px;
}

/* 2 ▪ Collapsed rows */
.team-row{
  background:#fff;
  border:1px solid #eceff3;
  border-radius:12px;
  margin:.35rem 0;
  transition:box-shadow .15s,transform .15s;
}
.team-row:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  transform:translateY(-2px);
}

/* Arrow icon */
.expand-btn svg{stroke:#6b6b6b;transition:stroke .2s}
.team-row:hover .expand-btn svg{stroke:var(--plum)}

/* 3 ▪ Expanded section */
.details{
  margin:-.5rem 0 .7rem;
  padding:1.4rem 1.2rem 1.6rem;
  border:1px solid #e4e6eb;
  border-top:none;
  border-radius:0 0 14px 14px;
  background:#fafbfe;
}



/* Stat numbers */
.stat-number{
  font-size:1.55rem;
  font-weight:700;
  color:#2b124c;
}

/* Payroll pill */
.stat-label{letter-spacing:.4px}

/* Assignment table lines */
.assign-table th{
  background:#fbfbfd;
  font-size:.76rem;
}
.assign-table td{color:#555}

/* 4 ▪ Capacity strip — softer earthy palette */
.capacity-bar     {background:#d8d4cc}
.capacity-bar.on  {background:#b6ae9e}

/* 5 ▪ Quick-action buttons */
.quick-actions button{
  background:var(--plum);
  border-radius:10px;
  width:38px;height:38px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.quick-actions button:hover{transform:translateY(-2px)}



.activity-list{padding:.4rem 1rem .7rem 1rem;font-size:.78rem}
.activity-item{display:flex;align-items:center;gap:.5rem;margin:.45rem 0}
.activity-time{width:44px;color:#888;font-size:.7rem;flex-shrink:0}
.activity-badge{background:#eee;border-radius:8px;padding:.15rem .45rem;font-size:.7rem;text-transform:capitalize}
.badge-done{background:#b8d0b0;color:#24552b}
.badge-rework{background:#f3c8b8;color:#6b2b20}
.badge-cut   {background:#d1c0f2;color:#45307a}
.activity-note{font-style:italic;color:#666}
.details-grid-t{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:2rem}
@media (max-width: 768px) {
.details-grid-t {
  display: flex;
  gap: 1rem;
  overflow-x: scroll;
  padding-bottom: 1rem;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.modal-box {
    width: 95vw;
    height:70vh;
  }
}
@media(max-width:900px){.details-grid-t{grid-template-columns:1fr}}

.cust-status_tag{padding:.25rem .6rem;border-radius:8px;font-size:.7rem;font-weight:600;text-transform:capitalize}
.cust-status_active  {background:#e8f5e9;color:#2e7d32}
.cust-status_dormant {background:#fff4e5;color:#a65b00}
.cust-status_prospect{background:#e3f2fd;color:#01579b}
/* profile avatar */
.cust-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--plum),#8e44ad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;font-weight:700}
/* scroll‑snap for expansion grid (mobile) already set in base */
.note-area{display:flex;flex-direction:column;gap:.6rem}
.note-area textarea{width:100%;border:1px solid #ccc;border-radius:10px;min-height:80px;padding:.6rem;font-size:.85rem}

.modal-footer {
  border-top: 1px solid #eee;
  background: #fff;
  padding: 1rem 1.5rem;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.wo-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
/* 🔁 Replace here — add charge pill style */
.pill-amount{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:999px;
  border:1px solid #e6e8f0;
  background:#f7f9fc;
  font-weight:600;
  line-height:1;
  margin-left:.5rem;
  font-size:.85rem;
}
.status-card .team-mini{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
}
.tab-page { display: none; }
.tab-page.active { display: block !important; }

.hidden-by-search { display: none !important; }

.sc-rbac-readonly,
.sc-rbac-readonly * {
  cursor: default !important;
}

.sc-rbac-readonly input,
.sc-rbac-readonly select,
.sc-rbac-readonly textarea,
.sc-rbac-readonly button {
  pointer-events: none;
  opacity: 0.85;
}

.sc-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  font-family: inherit;
}
.sc-sheet.open { pointer-events: auto; }

.sc-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity var(--tr, .25s ease);
}

.sc-sheet-card {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  transform: translateY(12%);
  opacity: 1;
  background: #fff;                         /* align with .card background */
  color: #222;
  border-top-left-radius: var(--radius, 16px);
  border-top-right-radius: var(--radius, 16px);
  box-shadow: 0 -10px 24px rgba(0,0,0,.12), var(--shadow, 0 4px 18px rgba(0,0,0,.06));
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  transition: transform var(--tr, .25s ease), opacity var(--tr, .25s ease);
}

.sc-sheet.open .sc-sheet-backdrop { opacity: 1; }
.sc-sheet.open .sc-sheet-card { transform: translateY(0); }

.sc-sheet-head { padding: 4px 4px 10px; }
.sc-sheet-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
  color: var(--plum, #2b124c);
}
.sc-sheet-sub {
  color: rgba(0,0,0,.55);
  font-size: 12px;
  margin-top: 2px;
}

.sc-sheet-actions {
  display: grid;
  gap: 10px;
  padding: 6px 4px;
}

/* Buttons styled like your .btn variants */
.sc-sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius, 16px);
  background: #fff;
  color: var(--plum, #2b124c);
  border: 1px solid var(--plum, #2b124c);
  font-weight: 600;
  font-size: 14px;
  transition: transform var(--tr, .25s ease), box-shadow var(--tr, .25s ease);
  box-shadow: none;
}
.sc-sheet-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.06); }

.sc-sheet-btn.primary {
  background: var(--plum, #2b124c);
  color: #fff;
  border-color: var(--plum, #2b124c);
}

.sc-sheet-cancel {
  display: block;
  width: 100%;
  margin: 8px 4px 0;
  min-height: 44px;
  border-radius: var(--radius, 16px);
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: #333;
  font-weight: 600;
  font-size: 14px;
  transition: transform var(--tr, .25s ease), box-shadow var(--tr, .25s ease);
}
.sc-sheet-cancel:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.06); }

/* Compact on very small phones */
@media (max-width: 380px) {
  .sc-sheet-card { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .sc-sheet-btn, .sc-sheet-cancel { min-height: 42px; font-size: 13.5px; }
}

/* 🔁 Replace here — orders list: booking code + client name stacked */
.order-row .book-num{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.order-row .book-num .client-name{
  font-size:.82em;
  opacity: 0.7;
  font-weight: 500;
  line-height:1.2;
  margin-top:2px;
  color:#4b5563;           /* subtle, readable grey */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.client-card .pi-diff{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:.5rem 0 .25rem;
  padding:.4rem .5rem;
  border:1px dashed var(--rule, #2a2a2a);
  background: rgba(196,181,154,.08); /* soft gold tint to match system */
  border-radius: 8px;
  font-weight: normal;
}
.client-card .pi-diff .badge{
  display:inline-block;
  font-size:.72rem;
  line-height:1;
  padding:.25rem .4rem;
  border-radius:6px;
  background: var(--gold-soft, rgba(196,181,154,.18));
  color: #000000;
}
.btn.btn-xxs{
  font-size:.75rem;
  line-height:1;
  padding:.25rem .5rem;
  border-radius:6px;
}

.scope-toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
    border: 2px solid #e1e8ed;
    border-radius: 999px;
    cursor: pointer;
}
.scope-toggle .seg{
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 8px 14px;
  line-height: 1;
  cursor: pointer;
  flex: 1 1 50%;
  text-align: center;
  z-index: 1;
  color: inherit;
}
.scope-toggle .slider{
  position: absolute;
  top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 4px);
  border-radius: inherit;
  background: currentColor;
  opacity: .12;
  transition: left .18s ease, opacity .18s ease;
}
.scope-toggle[data-scope="open"]  .slider{ left: 2px; }
.scope-toggle[data-scope="closed"] .slider{ left: calc(50% + 2px); }

/* active label emphasis */
.scope-toggle .seg{ opacity: .6; transition: opacity .18s ease; }
.scope-toggle[data-scope="open"]   .seg[data-seg="open"]{   opacity: 1; background: #2b124c;
    color: white;}
.scope-toggle[data-scope="closed"] .seg[data-seg="closed"]{ opacity: 1; background: #2b124c;
    color: white;}

.scope-toggle .seg:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: -2px;
  border-radius: inherit;
}

.filters { display: flex;
    align-items: center;
    justify-content: space-between;flex-direction: row-reverse; gap:10px; }
.filters__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin-bottom: 6px;
}
.filters__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}

/* Mobile toggle button (hidden on desktop) */
.filters-toggle{
  display:none; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border:1px solid var(--stroke, #ccc);
  border-radius: 999px; background:#fff; color:#333; cursor:pointer;
}
.filters-toggle svg{ display:block; }
.filters-toggle__label{ font-weight:400; font-size:.85rem; }

/* Collapsible area */
.filters__extras{ /* desktop default */
  overflow: visible;
}

/* Mobile behavior */
@media (max-width: 1024px){
    .filters{ flex-direction: row;}
  .filters-toggle{ display:inline-flex; }
  /* collapse extras by default with slide-down animation */
  .filters__extras{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
  }
  /* open state toggled via class on #filterBar */
  #filterBar.filters--open .filters__extras{
    max-height: 420px; /* large enough for content */
    opacity: 1;
    transform: translateY(0);
  }

  /* make the search take the row width neatly */
  #searchnpager{ flex: 1; }
  #searchnpager input{ width: 100% !important; }

  /* compact dates */
  .filters__date{ font-size: .9rem; }
}

#sc-wizard .sc-style-panel{
  margin-bottom: 12px;
  padding: 12px;
  border: 1px dashed var(--sc-border, #d7d7d7);
  border-radius: 10px;
  background: var(--sc-style-bg, #fafafa);
}
#sc-wizard .sc-style-panel__title{
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}
#sc-wizard .sc-style-attr{ margin-bottom: 10px; }
#sc-wizard .sc-style-attr__head .title{
  font-size: 13px; font-weight: 600; margin-bottom: 6px;
}
#sc-wizard .sc-style-attr__tiles{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px; margin-bottom: 6px;
}
#sc-wizard .sc-style-tile{
  display: inline-flex;
  flex-direction: column;           /* stack icon over label */
  align-items: center;
  justify-content: center;
  gap: 4px;                          /* small space between icon and label */
  min-height: 64px;                  /* a bit taller for icon+label */
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  text-align: center;
}
#sc-wizard .sc-style-tile img{
  display: block;
  max-width: 100%;
  height: 70px;
  object-fit: contain;
}
#sc-wizard .sc-style-tile .label{
  display: block;                    /* always render label */
  font-size: 12px;
  line-height: 1.15;
  color: #333;
  white-space: normal;               /* wrap long labels if needed */
}
#sc-wizard .sc-style-tile.is-selected{
  border-color: #6b4dc6; box-shadow: 0 0 0 2px rgba(107,77,198,0.15) inset;
}
#sc-wizard .sc-style-note{
  width: 100%; height: 30px; padding: 4px 8px;
  border: 1px solid #ddd; border-radius: 6px; font-size: 12px;
}
@media (max-width: 640px){
  #sc-wizard .sc-style-attr__tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sc-print-split{ position:relative; display:inline-flex; align-items:stretch; overflow:visible; }
.sc-print-caret{ border-left:0; border-top-left-radius:0; border-bottom-left-radius:0; width:28px; padding:0; }

/* Flip menu upwards */
.sc-print-menu{
  position:absolute;
  bottom: calc(100% + 6px);   /* show ABOVE */
  top: auto;                  /* disable downward placement */
  left: 0;
  z-index: 9999;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  padding:6px;
  min-width:180px;
}

/* Ensure parent action cluster doesn’t clip the dropdown */
.icon-button-group{ overflow: visible; }

/* (keep your item styles) */
.sc-print-item{
  display:flex; align-items:center; gap:8px; width:100%;
  background:#fff; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px;
}
.sc-print-item:hover{ background:#f7f7f7; }
.sc-print-item[disabled]{ opacity:.45; cursor:not-allowed; }
.sc-print-item svg{ flex:0 0 auto; }
.sc-print-item:hover{ background:#f7f7f7; }
.sc-print-item[disabled]{ opacity:.45; cursor:not-allowed; }


#sc-wizard .meas-groups{ margin-top: 6px; }
#sc-wizard .meas-group{ border:1px solid #e7e7e7; border-radius:12px; padding:10px; margin:10px 0; background:#fff; }
#sc-wizard .meas-title{ margin:0 0 8px; font-size:13px; letter-spacing:.3px; }
#sc-wizard .meas-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
#sc-wizard .meas-cell{ display:flex; align-items:center; gap:8px; border:1px solid #eee; border-radius:10px; padding:8px; }
#sc-wizard .meas-label{ flex:1; color:#666; }
#sc-wizard .meas-input{ width:90px; text-align:right; }
#sc-wizard .meas-extra{ margin-top:10px; }
#sc-wizard .meas-extra-label{ display:block; font-size:12px; margin-bottom:4px; color:#555; }
#sc-wizard .meas-extra-input{ width:100%; border:1px dashed #ccc; border-radius:8px; padding:8px; }
@media (max-width: 640px){
  #sc-wizard .meas-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.sc-alt-pill{
  display:inline-block;
  margin-left:6px;
  padding:0 .38rem;
  line-height:1.25rem;
  border-radius:8px;
  font-size:.72rem;
  font-weight:600;
  background:#fbcfe8;             /* alteration tone */
  color:#5b2140;                   /* readable on light pink */
  border:1px solid #f6a9d1;        /* subtle outline */
  vertical-align:middle;
}