:root{
  --navy:#083957;--navy2:#06283d;--orange:#ff6b16;--bg:#f4f7fa;--panel:#fff;
  --text:#17232c;--muted:#71808c;--border:#e3e9ee;--danger:#d4414c;--success:#18885d;--warning:#b87600;
  --shadow:0 12px 30px rgba(8,57,87,.08)
}
*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#061f30,#0c4c70)}
.login-card{width:min(440px,95vw);background:#fff;border-radius:22px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.28);text-align:center}
.login-logo{width:100%;max-height:105px;object-fit:contain;margin-bottom:8px}.login-card h1{color:var(--navy);margin:6px 0}.login-card p{color:var(--muted);font-size:13px;margin-bottom:20px}
.login-card label{display:block;text-align:right;font-size:12px;font-weight:bold;color:#536673;margin:10px 0 6px}.mode-hint{display:block;color:var(--muted);margin-top:10px;line-height:1.6}
.divider{position:relative;margin:16px 0;color:#98a4ad}.divider:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--border)}.divider span{position:relative;background:#fff;padding:0 10px}
.app-shell{min-height:100vh;display:flex}.sidebar{position:fixed;right:0;top:0;bottom:0;width:275px;background:linear-gradient(180deg,var(--navy2),#061e2e);color:#fff;padding:16px 13px;display:flex;flex-direction:column;z-index:30}
.brand{background:#fff;border-radius:18px;padding:12px;margin-bottom:16px}.brand img{width:100%;display:block}.user-card{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;margin-bottom:13px}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),#ff914a);font-weight:bold}.user-card small{display:block;color:#a9bbc7;margin-top:3px}
.nav{display:flex;flex-direction:column;gap:5px}.nav-item{border:0;background:transparent;color:#c6d2da;text-align:right;padding:12px 14px;border-radius:11px}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.1);color:#fff}.nav-item.active{box-shadow:inset -3px 0 0 var(--orange)}.sidebar-footer{margin-top:auto;text-align:center}.logout-btn{width:100%;border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff;border-radius:10px;padding:9px;margin-bottom:7px}.sidebar-footer small{color:#7791a2}
.main{margin-right:275px;width:calc(100% - 275px);padding:24px 28px 50px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}.topbar h1{margin:0 0 5px;color:var(--navy);font-size:26px}.topbar p{margin:0;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:8px}
.primary-btn,.secondary-btn,.icon-btn,.text-btn{border:0;border-radius:10px}.primary-btn{background:var(--orange);color:#fff;padding:11px 16px;font-weight:bold}.secondary-btn{background:#edf3f7;color:var(--navy);padding:10px 14px}.icon-btn{width:42px;height:42px;background:#fff;box-shadow:var(--shadow)}.text-btn{background:transparent;color:var(--orange);font-weight:bold;padding:6px}.wide{width:100%;margin-top:12px}
.input,.select,.textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#a4c5d8;box-shadow:0 0 0 3px rgba(8,57,87,.06)}
.view{display:none}.view.active{display:block}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:16px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.stat-card span{color:var(--muted);font-size:13px}.stat-card strong{display:block;font-size:25px;color:var(--navy);margin:8px 0 4px}.stat-card small{color:#98a5ad}
.grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:16px}.panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-head h3{margin:0;color:var(--navy);font-size:17px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.pipeline-row{display:grid;grid-template-columns:115px 1fr 42px;gap:9px;align-items:center;margin:10px 0}.pipeline-track{height:9px;background:#eef2f5;border-radius:99px;overflow:hidden}.pipeline-fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--orange));border-radius:99px}.compact,.activity,.followup{padding:11px 0;border-bottom:1px solid var(--border)}.compact:last-child,.activity:last-child,.followup:last-child{border-bottom:0}.compact{display:flex;justify-content:space-between;gap:10px}.compact small,.activity small,.followup small{color:var(--muted)}.due-overdue{color:var(--danger);font-weight:bold}.due-today{color:var(--orange);font-weight:bold}.due-upcoming{color:var(--success);font-weight:bold}
.performance{display:grid;grid-template-columns:90px 1fr 70px 100px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.mini{height:8px;background:#eef2f5;border-radius:20px;overflow:hidden}.mini span{height:100%;display:block;background:var(--navy)}
.toolbar{display:flex;gap:9px;align-items:center;margin-bottom:13px}.grow{flex:1;min-width:240px}.table-panel{padding:0;overflow:hidden}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:980px}th,td{padding:12px 13px;text-align:right;border-bottom:1px solid var(--border);font-size:13px}th{background:#f8fafb;color:#5b7180;font-size:12px}tr:hover td{background:#fbfcfd}.badge{display:inline-block;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:bold}.blue{background:#e8f2f8;color:var(--navy)}.orange{background:#fff0e7;color:#c95a14}.green{background:#e7f7ef;color:var(--success)}.red{background:#feecef;color:var(--danger)}.gray{background:#eef1f3;color:#6d7880}.table-btn{border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:8px;padding:7px 9px}
.calendar-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}.followup{display:flex;justify-content:space-between;gap:10px}.followup h4{margin:0 0 4px}.followup p{margin:0;color:var(--muted);font-size:12px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.cal-head{text-align:center;font-size:11px;color:var(--muted);padding:5px}.cal-day{min-height:72px;border:1px solid var(--border);border-radius:10px;padding:7px}.cal-day.today{border-color:var(--orange)}.cal-day.muted{opacity:.32}.cal-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;display:inline-block;margin-left:3px}
.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.customer-card,.team-card{background:#fff;border:1px solid var(--border);border-radius:15px;padding:15px;box-shadow:var(--shadow)}.customer-card h3,.team-card h3{color:var(--navy);margin:0 0 8px}.customer-card p,.team-card p{color:var(--muted);font-size:13px;margin:5px 0}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}.modal-backdrop.open{display:flex}.modal{position:relative;background:#fff;border-radius:18px;width:min(820px,96vw);max-height:90vh;overflow:auto;padding:24px}.modal-close{position:absolute;left:14px;top:12px;border:0;background:#eef2f5;border-radius:9px;width:34px;height:34px;font-size:20px}.modal h2{color:var(--navy);margin:0 0 18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group.full{grid-column:1/-1}.form-group label{font-size:12px;color:#536775;font-weight:bold}.form-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:8px}.history{margin-top:15px;border-top:1px solid var(--border);padding-top:10px}.history-entry{padding:9px 0;border-bottom:1px dashed var(--border)}.history-entry small{color:var(--muted)}
.toast{position:fixed;left:24px;bottom:24px;background:#122b3b;color:#fff;border-radius:11px;padding:12px 16px;z-index:999;opacity:0;transform:translateY(10px);transition:.22s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.empty{text-align:center;color:var(--muted);padding:25px}
.print-sheet{padding:15px}.print-sheet h2{color:var(--navy)}.print-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.print-grid div{border:1px solid var(--border);padding:10px;border-radius:8px}
@media(max-width:1000px){.sidebar{width:86px}.brand{padding:6px}.brand img{height:50px;object-fit:cover;object-position:right}.user-card div:not(.avatar),.nav-item span,.sidebar-footer small{display:none}.nav-item{text-align:center;font-size:18px}.main{margin-right:86px;width:calc(100% - 86px);padding:18px}.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.calendar-layout{grid-template-columns:1fr}.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.sidebar{display:none}.main{margin:0;width:100%;padding:13px}.topbar{align-items:flex-start;flex-direction:column}.stats-grid{grid-template-columns:1fr}.cards-grid{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch}.grow{min-width:0}.form-grid{grid-template-columns:1fr}}
@media print{body *{visibility:hidden}.modal,.modal *{visibility:visible}.modal{position:absolute;inset:0;width:100%;max-height:none;box-shadow:none}.modal-close,.no-print{display:none!important}}

/* V4 Media / Attachments */
.media-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.media-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.media-head h3{margin:0;color:var(--navy);font-size:17px}
.media-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.media-upload-row{display:grid;grid-template-columns:180px minmax(180px,1fr) auto auto;gap:8px;align-items:center}
.file-picker{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.selected-files{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 3px}
.file-chip{background:#eef4f7;border:1px solid var(--border);color:#526976;padding:6px 8px;border-radius:999px;font-size:11px}
.media-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.media-card{border:1px solid var(--border);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 7px 18px rgba(8,57,87,.05)}
.media-thumb{display:block;width:100%;height:155px;object-fit:cover;background:#eef2f5}
.file-preview,.file-fallback{height:155px;display:grid;place-items:center;background:linear-gradient(145deg,#eef3f6,#dfe8ed);color:var(--navy);font-size:22px;font-weight:bold;text-decoration:none}
.media-card-body{padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.media-card-body strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.media-card-body p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.media-card-body small{color:#8c99a2;font-size:10px}
.media-actions{display:flex;gap:6px;margin-top:3px}
.media-link{text-decoration:none;display:inline-block}
.danger-btn{color:var(--danger);border-color:#f0c7cc}
.media-upload-row button:disabled{opacity:.6;cursor:not-allowed}
@media(max-width:900px){.media-upload-row{grid-template-columns:1fr 1fr}.media-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.media-upload-row{grid-template-columns:1fr}.media-gallery{grid-template-columns:1fr}}


/* =========================================================
   TOPNITURE V5 — MOBILE-FIRST OVERRIDES
   ========================================================= */
.build-badge{
  position:fixed;left:10px;top:10px;z-index:2000;
  background:#ff6b16;color:#fff;border-radius:999px;
  padding:6px 10px;font-size:10px;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.18)
}

@media (max-width:650px){
  body{padding-bottom:88px}

  /* Turn the desktop sidebar into a real mobile bottom navigation. */
  .sidebar{
    display:block!important;
    position:fixed!important;
    right:0!important;left:0!important;top:auto!important;bottom:0!important;
    width:100%!important;height:auto!important;
    padding:7px 7px calc(7px + env(safe-area-inset-bottom))!important;
    background:#06283d!important;
    border-top:1px solid rgba(255,255,255,.12);
    z-index:1000!important;
    overflow:hidden
  }
  .sidebar .brand,.sidebar .user-card,.sidebar .sidebar-footer{display:none!important}
  .sidebar .nav{
    display:flex!important;
    flex-direction:row!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:1px
  }
  .sidebar .nav::-webkit-scrollbar{display:none}
  .sidebar .nav-item{
    flex:0 0 auto!important;
    min-width:78px!important;
    height:62px!important;
    padding:7px 8px!important;
    border-radius:12px!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    font-size:18px!important;
    line-height:1!important
  }
  .sidebar .nav-item span{
    display:block!important;
    max-width:86px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:9px!important;
    line-height:1.15!important
  }
  .sidebar .nav-item.active{
    box-shadow:none!important;
    background:rgba(255,255,255,.13)!important;
    outline:1px solid rgba(255,107,22,.45)
  }

  .main{
    margin:0!important;width:100%!important;
    padding:12px 10px 104px!important
  }

  .topbar{
    position:sticky;top:0;z-index:25;
    background:rgba(244,247,250,.96);
    backdrop-filter:blur(8px);
    padding:8px 0 10px;
    margin-bottom:12px!important;
    flex-direction:row!important;
    align-items:center!important
  }
  .topbar h1{font-size:20px!important;margin-bottom:2px!important}
  .topbar p{font-size:10px!important;max-width:190px}
  .top-actions{margin-right:auto}
  .top-actions .primary-btn{padding:9px 10px;font-size:11px}
  .top-actions .icon-btn{width:38px;height:38px}

  .stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:10px!important
  }
  .stat-card{padding:12px!important;border-radius:13px!important}
  .stat-card strong{font-size:19px!important;margin:6px 0 3px!important}
  .stat-card span,.stat-card small{font-size:10px!important}

  .grid-2,.calendar-layout{grid-template-columns:1fr!important;gap:10px!important}
  .panel{padding:12px!important;border-radius:13px!important}
  .panel-head{gap:8px;align-items:flex-start!important}
  .panel-head h3{font-size:15px!important}

  .toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important
  }
  .toolbar .input,.toolbar .select,.toolbar button{width:100%!important}
  .grow{min-width:0!important}

  /* Keep tables usable on phone without breaking columns. */
  .table-panel{padding:0!important;overflow:hidden!important}
  .table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    max-width:100vw!important
  }
  table{min-width:860px!important}
  th,td{padding:10px 9px!important;font-size:11px!important}
  th{position:sticky;top:0;z-index:2}

  .cards-grid{grid-template-columns:1fr!important;gap:9px!important}

  .modal-backdrop{
    align-items:flex-end!important;padding:0!important
  }
  .modal{
    width:100%!important;
    max-width:none!important;
    max-height:92dvh!important;
    border-radius:20px 20px 0 0!important;
    padding:18px 12px calc(20px + env(safe-area-inset-bottom))!important
  }
  .modal-close{
    position:sticky!important;
    float:left;
    top:0!important;left:0!important;
    z-index:4
  }
  .form-grid{grid-template-columns:1fr!important;gap:9px!important}
  .form-group.full,.form-actions{grid-column:1!important}
  .form-actions{
    display:grid!important;
    grid-template-columns:1fr!important
  }
  .form-actions button{width:100%!important}

  .print-grid{grid-template-columns:1fr!important}
  .media-upload-row{grid-template-columns:1fr!important}
  .media-gallery{grid-template-columns:1fr!important}
  .media-thumb,.file-preview,.file-fallback{height:210px!important}

  .calendar-grid{gap:3px!important}
  .cal-day{min-height:58px!important;padding:4px!important}
  .cal-head{font-size:9px!important}
  .followup,.compact{gap:6px!important;align-items:flex-start!important}
}

@media (max-width:380px){
  .stats-grid{grid-template-columns:1fr!important}
  .sidebar .nav-item{min-width:72px!important}
}


/* TOPNITURE V6 — uploads inside create forms */
.media-feature-alert{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid #ffd2b7;
  background:#fff4ed;
  color:#7a3510;
  border-radius:12px;
  line-height:1.6;
  font-size:13px
}
.staged-media-box{
  border:2px dashed #b9ccd7;
  border-radius:15px;
  padding:14px;
  background:#f8fbfc
}
.staged-media-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px
}
.staged-media-title b{
  display:block;
  color:var(--navy);
  font-size:15px
}
.staged-media-title small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  line-height:1.5
}
.staged-media-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}
.staged-file-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  cursor:pointer
}
.staged-file-card span{font-weight:700;color:var(--navy);font-size:13px}
.staged-file-card small{color:var(--muted);font-size:10px}
.staged-file-card input[type=file]{
  display:block;
  width:100%;
  margin-top:5px;
  font-size:11px
}
.staged-file-card input[type=file]::file-selector-button{
  border:0;
  border-radius:8px;
  padding:8px 10px;
  margin-inline-end:8px;
  background:#0b5279;
  color:#fff;
  cursor:pointer
}
@media(max-width:650px){
  .staged-media-grid{grid-template-columns:1fr}
  .staged-media-box{padding:10px}
  .staged-media-title{flex-direction:column}
  .staged-file-card{padding:11px}
}


/* TOPNITURE V7 — Leads enhancements */
.field-hint{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.visit-dot{background:#f08a36!important}
#visitAtGroup{transition:.2s ease}
#leadCampaignFilter{min-width:145px}
@media(max-width:650px){
  #leadCampaignFilter{width:100%;min-width:0}
  .staged-media-box .staged-file-card input[type=file]{font-size:12px}
}

/* TOPNITURE V8 — Work Orders / Detailing */
.wo-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.work-order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.work-order-head h2{margin:0;color:var(--navy)}
.work-order-head p{margin:5px 0;color:var(--muted)}
.work-order-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.detailing-wrap{max-height:430px}
.detail-table{min-width:1550px!important}
.compact-input{min-width:90px;padding:8px 7px!important;font-size:11px!important}
.detail-table td:first-child .compact-input{min-width:190px}
.detail-table td:nth-child(5) .compact-input{min-width:150px}
.detail-table td:nth-child(7) .compact-input{min-width:120px}
.wo-section .media-section{border-top:0;margin-top:0;padding-top:0}
@media(max-width:650px){
  .work-order-head{flex-direction:column}
  .work-order-actions{display:grid;grid-template-columns:1fr;width:100%}
  .work-order-actions>*{width:100%!important}
  .wo-section{padding-top:12px}
}


/* TOPNITURE V8.1 — Preparation linked to Contract */
.prep-entry-btn{
  font-weight:700;
  box-shadow:0 8px 22px rgba(8,57,87,.14)
}


/* TOPNITURE V8.2 — Fullscreen Preparation + Supplier Grouping */
.modal.work-order-fullscreen{
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.work-order-backdrop{
  padding:0!important;
  background:#eef3f6!important;
}
.work-order-fullscreen .modal-close{
  position:fixed!important;
  left:14px!important;
  top:12px!important;
  z-index:1205!important;
  box-shadow:0 6px 20px rgba(0,0,0,.16)
}
.prep-fullscreen-shell{
  height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  direction:ltr;
  background:#edf2f5
}
.prep-contract-pane,
.prep-work-pane{
  direction:rtl;
  min-width:0;
  height:100dvh;
  overflow:auto;
}
.prep-contract-pane{
  background:#f7f9fb;
  border-right:1px solid #d9e2e7;
  padding:22px 20px 40px
}
.prep-work-pane{
  background:#fff;
  padding:0 20px 45px
}
.prep-pane-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:4px 46px 15px 0;
  border-bottom:1px solid var(--border)
}
.prep-pane-head h2{
  margin:4px 0!important;
  font-size:24px!important
}
.prep-pane-head p{margin:0;color:var(--muted)}
.prep-kicker{
  display:inline-block;
  font-size:10px;
  letter-spacing:1.4px;
  color:var(--orange);
  font-weight:800
}
.prep-contract-card{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:16px 0
}
.prep-contract-card>div{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px
}
.prep-contract-card span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:4px
}
.prep-contract-card b{font-size:12px;color:var(--navy)}
.prep-contract-notes,
.prep-pane-section{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin-top:12px
}
.prep-contract-notes h3{margin:0 0 8px;color:var(--navy);font-size:14px}
.prep-contract-notes>div{white-space:pre-wrap;line-height:1.7;font-size:12px}
.prep-contract-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.prep-sticky-head{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  padding:16px 48px 14px 0;
  margin:0 -20px 14px;
  border-bottom:1px solid var(--border)
}
.prep-work-pane .wo-section{
  border:1px solid var(--border);
  border-radius:15px;
  padding:14px;
  margin:12px 0;
  background:#fff
}
.supplier-input{min-width:140px}
.supplier-groups-preview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.supplier-preview-card{
  border:1px solid var(--border);
  border-radius:13px;
  padding:12px;
  background:#f8fbfc
}
.supplier-preview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:9px
}
.supplier-preview-head b{display:block;color:var(--navy)}
.supplier-preview-head small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.supplier-preview-items{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:8px 0 10px
}
.supplier-preview-items>div{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  background:#fff;
  border-radius:8px;
  border:1px solid #e5ecef
}
.supplier-preview-items span{font-size:11px;font-weight:700}
.supplier-preview-items small{font-size:9px;color:var(--muted)}
@media(max-width:900px){
  .prep-fullscreen-shell{grid-template-columns:1fr;display:block}
  .prep-contract-pane,.prep-work-pane{height:auto;min-height:100dvh}
  .prep-contract-pane{border-right:0;border-bottom:4px solid #dfe7eb}
  .prep-contract-gallery{grid-template-columns:1fr!important}
  .supplier-groups-preview{grid-template-columns:1fr}
}

/* V9 Settings Control Center */
.settings-shell{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.settings-sidebar{position:sticky;top:86px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:11px;display:flex;flex-direction:column;gap:5px}
.settings-title{padding:8px;border-bottom:1px solid var(--border);margin-bottom:4px}.settings-title b{display:block;color:var(--navy)}.settings-title small{color:var(--muted)}
.settings-tab{border:0;background:transparent;text-align:right;padding:10px;border-radius:9px;color:#526a77;cursor:pointer;font:inherit;font-size:12px}.settings-tab.active{background:#0b5279;color:#fff;font-weight:700}
.settings-panel{display:none}.settings-panel.active{display:block}.settings-content{min-width:0}
.settings-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.settings-page-head h2{margin:0;color:var(--navy)}.settings-page-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.settings-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.settings-stat{background:#fff;border:1px solid var(--border);border-radius:13px;padding:13px;display:flex;justify-content:space-between;align-items:center}.settings-stat span{color:var(--muted);font-size:11px}.settings-stat b{color:var(--navy);font-size:21px}
.settings-info-card{margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:13px;padding:15px}.settings-info-card h3{margin-top:0}
.permission-box{background:#f8fbfc;border:1px solid var(--border);border-radius:13px;padding:12px}.permission-note{font-size:11px;color:var(--muted);margin-bottom:9px}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.permission-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e1e9ed;border-radius:9px;padding:9px;font-size:11px}
.danger-btn{border-color:#efb8bd!important;color:#b32633!important;background:#fff!important}
@media(max-width:900px){.settings-shell{grid-template-columns:1fr}.settings-sidebar{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.settings-title{grid-column:1/-1}.settings-tab{text-align:center}.settings-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.settings-page-head{flex-direction:column}.settings-page-head button{width:100%}.permission-grid{grid-template-columns:1fr}}

/* V9.2 — Optional contract for purchase invoices */
.optional-label{font-size:10px;color:var(--muted);font-weight:400}


/* V9.3 — Keyboard navigation in Preparation */
.prep-work-pane input[data-k]:focus,
.prep-work-pane input[data-mk]:focus,
.prep-work-pane select[data-k]:focus,
.prep-work-pane select[data-mk]:focus,
.prep-work-pane textarea[data-k]:focus,
.prep-work-pane textarea[data-mk]:focus{
  outline:2px solid rgba(11,82,121,.28);
  outline-offset:1px;
  box-shadow:0 0 0 3px rgba(11,82,121,.08);
}
.prep-keyboard-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--muted);
  background:#f5f8fa;
  border:1px solid var(--border);
  border-radius:8px;
  padding:5px 8px;
}


/* V9.5 — Admin password control */
.password-btn{
  white-space:nowrap;
}
.password-user-note{
  color:var(--muted);
  margin:0 0 14px;
}
.password-field-wrap{
  display:flex;
  align-items:stretch;
  gap:7px;
}
.password-field-wrap .input{
  flex:1;
}
.password-toggle-btn{
  min-width:64px;
  border:1px solid var(--border);
  background:#f6f9fb;
  border-radius:10px;
  color:var(--navy);
  font:inherit;
  font-size:11px;
  cursor:pointer;
  padding:0 10px;
}
.password-security-note{
  grid-column:1/-1;
  background:#f7fafb;
  border:1px solid var(--border);
  border-radius:11px;
  padding:10px 12px;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
}


/* V9.6 — Sales supervision filters (Admin + Team Leader) */
#leadSalesFilter,#customerSalesFilter,#contractSalesFilter{min-width:155px}
.sales-breakdown-panel{margin-top:14px}
.sales-breakdown-table td,.sales-breakdown-table th{white-space:nowrap}
.sales-scope-actions{display:flex;gap:5px;flex-wrap:wrap}
.sales-scope-actions .table-btn{font-size:10px;padding:6px 8px}
@media(max-width:700px){
  #leadSalesFilter,#customerSalesFilter,#contractSalesFilter{width:100%;min-width:0}
}


/* V9.6.1 — Fix Admin/Team Leader Sales filters visibility */
.toolbar .sales-supervisor-only[style*="display: block"]{
  flex:0 0 auto;
}
select.sales-supervisor-only[style*="display: block"]{
  display:block!important;
}


/* V9.7 — Import/Export + Supervisor assignment */
.toolbar .sales-supervisor-only.secondary-btn[style*="display: block"]{
  display:block!important;
}
@media(max-width:700px){
  #importCsvBtn,#exportCsvBtn,#importCustomersCsvBtn,#exportCustomersCsvBtn{
    width:100%;
  }
}


/* V9.7.1 — robust Admin / Team Leader controls visibility */
.sales-supervisor-only[hidden]{display:none!important}
select.sales-supervisor-visible{display:block!important}
button.sales-supervisor-visible{display:inline-flex!important;align-items:center;justify-content:center}
article.sales-supervisor-visible{display:block!important}


/* ==========================================================
   TOPNITURE V10 — References / Notifications / Chat / Tasks
   ========================================================== */
.media-original-name{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.reference-file-info{grid-column:1/-1;background:#f6f9fa;border:1px solid var(--border);border-radius:10px;padding:10px;font-size:11px;color:var(--muted)}

.notification-bell{position:relative}
.top-count{position:absolute;top:-6px;left:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#e34e4e;color:#fff;font-size:9px;display:grid;place-items:center;font-weight:800}
.notification-center-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.notification-center-head h2{margin:0}.notification-center-head p{margin:4px 0 0;color:var(--muted);font-size:11px}
.notification-list{display:flex;flex-direction:column;gap:7px;max-height:65vh;overflow:auto}
.notification-item{width:100%;border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;text-align:right;cursor:pointer;font:inherit}
.notification-item:hover{background:#f7fafb}
.notification-icon{width:32px;height:32px;border-radius:10px;background:#eef4f7;display:grid;place-items:center}
.notification-copy b{display:block;color:var(--navy);font-size:12px}.notification-copy small{display:block;color:var(--muted);font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notification-time{font-size:10px;color:var(--muted);white-space:nowrap}
.notification-item.notif-overdue{border-inline-start:4px solid #d94a53}
.notification-item.notif-today{border-inline-start:4px solid #ef8b2c}
.notification-item.notif-upcoming{border-inline-start:4px solid #2e7597}

.tasks-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.tasks-toolbar .select{min-width:150px}
.tasks-layout{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);gap:14px}
.tasks-list{display:flex;flex-direction:column;gap:8px;max-height:680px;overflow:auto}
.task-card{border:1px solid var(--border);border-radius:12px;padding:11px;background:#fff;cursor:pointer;transition:.15s ease}
.task-card:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(8,57,87,.07)}
.task-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.task-card h4{margin:0;color:var(--navy)}.task-card p{margin:3px 0 0;color:var(--muted);font-size:10px}.task-badges{display:flex;gap:5px;flex-wrap:wrap}
.task-desc{margin-top:8px;color:#4b5e68;font-size:11px;line-height:1.6}.task-due{margin-top:9px;font-size:10px;color:var(--muted)}.task-due.overdue{color:#b82e38;font-weight:700}
.task-calendar-head{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;text-align:center}.task-calendar-head>div{text-align:center}
.task-cal-day{min-height:92px!important}.task-cal-chip{display:block;width:100%;border:0;background:#eef4f7;border-radius:6px;padding:3px 5px;margin-top:3px;font:inherit;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:#174b68}
.task-detail{display:grid;grid-template-columns:1fr 1fr;gap:9px}.task-detail>div{background:#f7fafb;border:1px solid var(--border);border-radius:10px;padding:10px}.task-detail-desc{grid-column:1/-1;white-space:pre-wrap;line-height:1.7}

.chat-fab{position:fixed;left:22px;bottom:22px;width:58px;height:58px;border-radius:50%;border:0;background:var(--navy);color:#fff;box-shadow:0 10px 28px rgba(8,57,87,.28);font-size:24px;z-index:1150;cursor:pointer}
.chat-fab-badge{position:absolute;right:-3px;top:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:11px;background:#ef6724;color:#fff;font-size:9px;display:grid;place-items:center;font-weight:800}
.chat-drawer-backdrop{position:fixed;inset:0;background:rgba(7,27,39,.24);z-index:1160;opacity:0;pointer-events:none;transition:.2s}.chat-drawer-backdrop.open{opacity:1;pointer-events:auto}
.chat-drawer{position:fixed;left:0;top:0;bottom:0;width:min(780px,92vw);background:#fff;z-index:1170;transform:translateX(-103%);transition:.22s ease;box-shadow:12px 0 34px rgba(0,0,0,.16);display:flex;flex-direction:column}
.chat-drawer.open{transform:translateX(0)}
.chat-drawer-head{height:68px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:#f7fafb}.chat-drawer-head b{display:block;color:var(--navy)}.chat-drawer-head small{display:block;color:var(--muted);margin-top:3px}.chat-close{position:static!important}
.chat-shell{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:0;flex:1;direction:ltr}
.chat-contacts-pane,.chat-conversation-pane{direction:rtl;min-height:0}.chat-contacts-pane{border-right:1px solid var(--border);padding:10px;background:#f8fafb}.chat-contacts-pane .input{margin-bottom:9px}
.chat-contacts{display:flex;flex-direction:column;gap:5px;overflow:auto;max-height:calc(100vh - 145px)}
.chat-contact{width:100%;border:0;background:#fff;border-radius:10px;padding:8px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:right;cursor:pointer;font:inherit}.chat-contact.active{background:#eaf3f7}.chat-avatar{width:34px;height:34px;border-radius:50%;background:#0b5279;color:#fff;display:grid;place-items:center;font-weight:800}.chat-contact-copy b{display:block;font-size:11px}.chat-contact-copy small{display:block;color:var(--muted);font-size:9px}.chat-contact-unread{min-width:18px;height:18px;border-radius:10px;background:#ef6724;color:#fff;display:grid;place-items:center;font-size:9px}
.chat-conversation-pane{display:flex;flex-direction:column}.chat-conversation-head{min-height:58px;padding:11px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center}.chat-conversation-head b{display:block}.chat-conversation-head small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.chat-messages{flex:1;min-height:0;overflow:auto;padding:14px;background:#f3f7f9;display:flex;flex-direction:column;gap:7px}.chat-message{max-width:78%;padding:8px 10px;border-radius:12px;font-size:11px;line-height:1.6}.chat-message small{display:block;font-size:8px;margin-top:4px;opacity:.65}.chat-message.mine{align-self:flex-start;background:#0b5279;color:#fff;border-bottom-left-radius:3px}.chat-message.theirs{align-self:flex-end;background:#fff;border:1px solid var(--border);border-bottom-right-radius:3px}
.chat-composer{padding:10px;border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end}.chat-composer .textarea{min-height:44px;resize:none}.chat-empty{margin:auto;color:var(--muted);font-size:12px}

@media(max-width:850px){
  .tasks-layout{grid-template-columns:1fr}
  .chat-drawer{width:100vw}
}
@media(max-width:600px){
  .notification-center-head{flex-direction:column}.notification-center-head button{width:100%}
  .notification-item{grid-template-columns:32px minmax(0,1fr)}.notification-time{grid-column:2}
  .task-detail{grid-template-columns:1fr}.task-detail-desc{grid-column:1}
  .chat-shell{grid-template-columns:120px minmax(0,1fr)}
  .chat-contact{grid-template-columns:30px minmax(0,1fr)}.chat-contact-unread{grid-column:2}.chat-contact-copy small{display:none}
  .chat-fab{left:14px;bottom:14px;width:52px;height:52px}
}


/* V10.1 — Lead → Contract media sync + contract editing */
.media-actions{flex-wrap:wrap}
.media-card-body .table-btn{white-space:nowrap}


/* ==========================================================
   TOPNITURE V10.2 — Multi-product Lead Requirements
   ========================================================== */
.lead-products-editor{border:1px solid #d8e3e8;background:#f8fbfc;border-radius:14px;padding:12px}
.lead-products-editor-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.lead-products-editor-head b{display:block;color:var(--navy);font-size:13px}
.lead-products-editor-head small{display:block;color:var(--muted);font-size:10px;margin-top:3px;line-height:1.6}
.lead-products-list{display:flex;flex-direction:column;gap:12px}
.lead-product-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 4px 12px rgba(8,57,87,.04)}
.lead-product-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:9px;border-bottom:1px dashed var(--border)}
.lead-product-card-head>div{display:flex;align-items:center;gap:8px}.lead-product-order{background:var(--navy);color:#fff;border-radius:8px;padding:5px 8px;font-size:9px;font-weight:800}
.product-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product-changes-block{margin-top:10px;background:#f8fafb;border:1px solid var(--border);border-radius:12px;padding:10px}
.product-subhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.product-subhead b{display:block;color:var(--navy);font-size:11px}.product-subhead small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.product-changes-list{display:flex;flex-direction:column;gap:7px}
.lead-product-change-row{display:grid;grid-template-columns:150px minmax(140px,.8fr) minmax(200px,1.5fr) auto;gap:7px;align-items:center}
.product-reference-block{margin-top:10px;display:grid;grid-template-columns:minmax(190px,.65fr) minmax(0,1.35fr);gap:10px;align-items:center}
.product-reference-block>div b{display:block;color:var(--navy);font-size:11px}.product-reference-block>div small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.product-ref-picker{margin:0}
.product-requirements-current,.contract-product-requirements{margin-top:13px;border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}
.product-requirements-view{display:flex;flex-direction:column;gap:8px}
.product-request-view-card{border:1px solid var(--border);border-radius:12px;padding:10px;background:#f9fbfc}
.product-request-view-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.product-request-view-head>div{display:flex;align-items:center;gap:7px;color:var(--navy)}
.product-index{width:24px;height:24px;border-radius:7px;background:#0b5279;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800}
.product-change-view-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.product-change-view-row{display:grid;grid-template-columns:auto minmax(80px,.5fr) minmax(0,1.5fr);gap:7px;align-items:center;background:#fff;border:1px solid #e5ecef;border-radius:8px;padding:6px 8px;font-size:10px}
.product-change-view-row b{color:#294d60}.product-change-view-row>span:last-child{color:#526a77}
.product-notes-view{margin-top:7px;font-size:10px;color:#526a77}.product-no-changes{margin-top:7px;color:var(--muted);font-size:9px}
.customer-product-chips{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.customer-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.customer-requirements-modal{margin:12px 0}.contract-linked-products-box{background:#f8fbfc;border:1px solid var(--border);border-radius:12px;padding:10px}
.product-empty{padding:10px!important}

@media(max-width:800px){
  .lead-products-editor-head{flex-direction:column}.lead-products-editor-head button{width:100%}
  .product-main-grid{grid-template-columns:1fr}
  .lead-product-change-row{grid-template-columns:1fr}
  .lead-product-change-row .danger-btn{width:100%}
  .product-reference-block{grid-template-columns:1fr}
  .product-change-view-row{grid-template-columns:1fr}
}


/* ==========================================================
   TOPNITURE V10.3 — Contract print / image compression / shift
   ========================================================== */
.contract-source-products-preview{
  margin:10px 0 14px;
  border:1px solid var(--border);
  background:#f8fbfc;
  border-radius:12px;
  padding:10px;
}

.shift-toggle-btn{
  min-height:38px;
  border-radius:10px;
  padding:0 13px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  border:1px solid transparent;
  transition:.15s ease;
}
.shift-toggle-btn.offline{
  background:#fff;
  color:#9a3940;
  border-color:#e9c3c6;
}
.shift-toggle-btn.online{
  background:#e9f7ef;
  color:#17673d;
  border-color:#b8dfc8;
}
.shift-toggle-btn:hover{transform:translateY(-1px)}

.shift-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:999px;
  padding:3px 7px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.shift-status.online{background:#e5f6ec;color:#167041}
.shift-status.offline{background:#f1f3f4;color:#6d7880}
.performance .shift-status{margin-inline-start:5px;vertical-align:middle}

.shift-online-panel{margin-top:14px}
.online-users-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:9px;
}
.online-user-card{
  display:flex;
  gap:9px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.online-user-card.is-online{border-inline-start:4px solid #28a465}
.online-user-card.is-offline{opacity:.78}
.online-user-avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:#0b5279;color:#fff;font-weight:900;
  flex:0 0 auto;
}
.online-user-copy{min-width:0}
.online-user-copy>b{display:block;color:var(--navy);font-size:11px;margin-bottom:2px}
.online-user-copy>small{display:block;color:var(--muted);font-size:9px;margin:3px 0}
.shift-table-time{display:block;color:var(--muted);font-size:8px;margin-top:3px}

@media(max-width:650px){
  .top-actions{gap:6px}
  .shift-toggle-btn{padding:0 9px;font-size:10px}
  .online-users-grid{grid-template-columns:1fr}
}


/* ==========================================================
   TOPNITURE V10.4 — Shift Duration Tracking
   ========================================================== */
.shift-duration{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 7px;
  border-radius:999px;
  background:#f1f4f6;
  color:#546670;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.shift-duration.active{
  background:#fff4e8;
  color:#a95b13;
  border:1px solid #f4d4ad;
}
.shift-history-panel{margin-top:14px}
.shift-history-head{align-items:flex-start}
.shift-history-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.shift-history-filters .select{min-width:150px}
.shift-sales-only{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:9px;
  padding:7px 9px;
  font-size:10px;
  cursor:pointer;
  color:#4d626e;
}
.shift-sales-only input{accent-color:#0b5279}
.team-card .shift-duration{margin-inline-start:5px}
@media(max-width:700px){
  .shift-history-head{display:flex!important;flex-direction:column}
  .shift-history-filters{width:100%}
  .shift-history-filters .select{width:100%}
}


/* V10.5 — Permission overrides */
.permission-note b{color:var(--navy)}


/* ==========================================================
   TOPNITURE V10.6 — Product Components / One-Way Sync / Lead Tasks
   ========================================================== */
.product-components-block{
  margin-top:10px;
  background:#f8fafb;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
}
.product-components-list{display:flex;flex-direction:column;gap:7px}
.product-component-row{
  border:1px solid #dce6eb;
  background:#fff;
  border-radius:10px;
  padding:8px;
}
.product-component-row.selected{
  border-color:#8ab8ce;
  box-shadow:0 0 0 2px rgba(11,82,121,.05);
}
.component-check{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
  color:var(--navy);
}
.component-check input{width:17px;height:17px;accent-color:#0b5279}
.component-details{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(6,minmax(100px,1fr));
  gap:7px;
}
.component-details[hidden]{display:none!important}
.product-media-block{
  margin-top:10px;
  border:1px solid var(--border);
  background:#fbfcfd;
  border-radius:12px;
  padding:10px;
}
.product-media-title b{display:block;color:var(--navy);font-size:11px}
.product-media-title small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.product-media-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.existing-media-mark{color:#1d7b4d;font-size:9px;margin-inline-start:5px}
.product-media-counts{display:flex;gap:5px;flex-wrap:wrap}
.component-view-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:7px;
  margin-top:8px;
}
.component-view-card{
  border:1px solid #e0e8ec;
  background:#fff;
  border-radius:9px;
  padding:8px;
}
.component-view-card>b{display:block;color:var(--navy);margin-bottom:5px;font-size:11px}
.component-view-card>div{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:5px;
  font-size:9px;
  margin-top:3px;
}
.component-view-card>div span{color:var(--muted)}
.component-view-card>div strong{color:#304f60}
.component-view-card p{margin:6px 0 0;font-size:9px;color:#526a77;line-height:1.6}
.task-lead-link{
  display:inline-block;
  margin-top:4px;
  padding:3px 6px;
  border-radius:7px;
  background:#eef4f7;
  color:#295c76;
  font-size:9px;
}
.task-detail-lead{grid-column:1/-1}
@media(max-width:850px){
  .component-details{grid-template-columns:1fr 1fr}
  .product-media-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .component-details{grid-template-columns:1fr}
}


/* V10.7 — material field per selected component */


/* ==========================================================
   TOPNITURE V10.8 — Dynamic Product & Workflow Settings
   ========================================================== */
.settings-flow-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}
.settings-flow-card{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;
  min-width:0
}
.settings-flow-card:first-child{grid-row:span 3}
.settings-flow-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}
.settings-flow-card-head h3{margin:0;color:var(--navy);font-size:14px}
.settings-flow-card-head p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.5}
.settings-products-list{display:flex;flex-direction:column;gap:7px}
.settings-product-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid #e2eaee;border-radius:10px;padding:8px;background:#fbfcfd
}
.settings-product-row-main{display:flex;align-items:center;gap:8px;min-width:0}
.settings-product-number{
  width:25px;height:25px;border-radius:8px;background:#eef4f7;color:var(--navy);
  display:grid;place-items:center;font-size:10px;font-weight:800;flex:0 0 auto
}
.settings-product-row-main b{display:block;font-size:11px;color:var(--navy)}
.settings-product-row-main small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.settings-product-row-actions{display:flex;gap:5px;flex-wrap:wrap}
.settings-toggle-grid{display:flex;flex-direction:column;gap:7px}
.settings-switch-row{
  border:1px solid #e2eaee;border-radius:10px;padding:9px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fbfcfd;cursor:pointer
}
.settings-switch-row b{display:block;color:var(--navy);font-size:10px}
.settings-switch-row small{display:block;color:var(--muted);font-size:8px;margin-top:2px;line-height:1.45}
.settings-switch-row input[type="checkbox"]{
  width:19px;height:19px;accent-color:#0b5279;flex:0 0 auto
}
.settings-flow-savebar{
  margin-top:12px;border:1px solid #cfe0e7;background:#f5f9fb;border-radius:12px;
  padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:9px;color:#496573
}
.settings-components-textarea{line-height:1.9;min-height:220px}
@media(max-width:900px){
  .settings-flow-grid{grid-template-columns:1fr}
  .settings-flow-card:first-child{grid-row:auto}
}
@media(max-width:560px){
  .settings-product-row,.settings-flow-savebar{align-items:stretch;flex-direction:column}
}


/* V10.9 — granular edit/delete permissions */
.permission-grid{align-items:stretch}
.danger-btn{border-color:#e7b7b7}


/* ==========================================================
   TOPNITURE V10.10 — In-app popup alerts
   ========================================================== */
.screen-popup-host{
  position:fixed;
  top:78px;
  left:18px;
  z-index:99999;
  width:min(390px,calc(100vw - 28px));
  display:flex;
  flex-direction:column;
  gap:9px;
  pointer-events:none;
}
.screen-popup{
  pointer-events:auto;
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid #dce7ec;
  border-radius:14px;
  padding:10px;
  box-shadow:0 14px 38px rgba(12,43,58,.20);
  animation:topniturePopupIn .22s ease both;
}
.screen-popup.closing{animation:topniturePopupOut .18s ease both}
.screen-popup.task{border-inline-start:4px solid #ef8d32}
.screen-popup.chat{border-inline-start:4px solid #0b6b8f}
.screen-popup.followup{border-inline-start:4px solid #7058b6}
.screen-popup.visit{border-inline-start:4px solid #1c8b62}
.screen-popup.notification{border-inline-start:4px solid #c98317}
.screen-popup-icon{
  width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;background:#eef4f7;
  font-size:18px
}
.screen-popup-copy{min-width:0}
.screen-popup-copy b{
  display:block;color:var(--navy);font-size:11px;margin-bottom:3px
}
.screen-popup-copy p{
  margin:0;color:#5b6f79;font-size:9px;line-height:1.55;
  white-space:normal;overflow-wrap:anywhere
}
.screen-popup-actions{
  display:flex;align-items:center;gap:5px
}
.screen-popup-open,.screen-popup-close{
  border:0;cursor:pointer;border-radius:8px;font-family:inherit
}
.screen-popup-open{
  background:var(--navy);color:#fff;padding:7px 9px;font-size:9px;font-weight:800
}
.screen-popup-close{
  width:28px;height:28px;background:#f1f4f5;color:#5e7078;font-size:17px
}
@keyframes topniturePopupIn{
  from{opacity:0;transform:translateX(-18px) scale(.98)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes topniturePopupOut{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(-18px)}
}
@media(max-width:600px){
  .screen-popup-host{top:68px;left:10px;width:calc(100vw - 20px)}
  .screen-popup{grid-template-columns:36px 1fr}
  .screen-popup-icon{width:34px;height:34px}
  .screen-popup-actions{grid-column:1/-1;justify-content:flex-end}
}


/* V10.11 — popup reliability */
.notification-center-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}


/* ==========================================================
   TOPNITURE V10.12 — Settings Sales / Campaign Filters
   ========================================================== */
.settings-data-filters{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(150px,210px) minmax(150px,210px) auto;
  gap:8px;
  align-items:center;
}
.settings-data-filters .select{min-width:0}
.settings-clear-filter{white-space:nowrap}
@media(max-width:900px){
  .settings-data-filters{
    grid-template-columns:1fr 1fr;
  }
  .settings-data-filters .grow{grid-column:1/-1}
}
@media(max-width:560px){
  .settings-data-filters{
    grid-template-columns:1fr;
  }
  .settings-data-filters .grow{grid-column:auto}
}


/* V10.13 — cascade Lead deletion confirmation */


/* ==========================================================
   TOPNITURE V10.14 — Monthly Sales
   ========================================================== */
.sales-month-toolbar{
  margin-bottom:12px;
  padding:11px 13px;
  border:1px solid #d8e5eb;
  background:#f8fbfc;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sales-month-toolbar b{
  display:block;
  color:var(--navy);
  font-size:12px;
}
.sales-month-toolbar small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
}
.sales-month-controls{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.sales-month-controls .select{
  min-width:180px;
}
.reports-month-toolbar{margin-bottom:14px}
@media(max-width:650px){
  .sales-month-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .sales-month-controls{
    width:100%;
  }
  .sales-month-controls .select{
    flex:1;
    min-width:0;
  }
}


/* ==========================================================
   TOPNITURE V10.15 — Deferred Leads
   ========================================================== */
.deferred-dot{background:#8c5ac8!important}
.screen-popup.deferred{border-inline-start:4px solid #8c5ac8}
#deferredAtGroup .field-hint{color:#725496}


/* ==========================================================
   TOPNITURE V10.16 — Team Leader Self Filter + Quotation Flow
   ========================================================== */
.screen-popup.quotation{border-inline-start:4px solid #d59a18}
.quotation-requests-panel{margin-top:12px}
.quotation-requests-panel td small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.quotation-modal{display:flex;flex-direction:column;gap:12px}
.quotation-modal-head{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  border-bottom:1px solid var(--border);padding-bottom:10px
}
.quotation-modal-head h2{margin:6px 0 2px;color:var(--navy)}
.quotation-modal-head p{margin:0;color:var(--muted);font-size:10px}
.quotation-requester{text-align:left;background:#f5f8fa;border-radius:10px;padding:8px 10px;min-width:150px}
.quotation-requester small,.quotation-requester span{display:block;color:var(--muted);font-size:8px}
.quotation-requester b{display:block;color:var(--navy);font-size:10px;margin:2px 0}
.quotation-lead-preview,.quotation-response-box{
  border:1px solid var(--border);border-radius:12px;padding:10px;background:#fbfcfd
}
.quotation-lead-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.quotation-response-box h3{margin:0 0 7px;color:var(--navy)}
.quotation-response-box>p{white-space:pre-wrap;line-height:1.7}
.quotation-files{display:flex;flex-direction:column;gap:7px;margin:8px 0}
.quotation-file-card{
  text-decoration:none;color:inherit;display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;
  border:1px solid #dce7ec;background:#fff;border-radius:10px;padding:8px
}
.quotation-file-card>span{font-size:20px}
.quotation-file-card b{display:block;color:var(--navy);font-size:10px}
.quotation-file-card small{display:block;color:var(--muted);font-size:8px}
.quotation-file-card strong{font-size:9px;color:#0b5279}
@media(max-width:600px){
  .quotation-modal-head{flex-direction:column}
  .quotation-requester{width:100%;text-align:right}
}

/* V10.17 Quotation Repair */
.quotation-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:12px 14px;border:1px solid #d9e6eb;background:#f8fbfc;border-radius:14px}
.quotation-page-head h2{margin:0;color:var(--navy);font-size:17px}.quotation-page-head p{margin:4px 0 0;color:var(--muted);font-size:9px}.quotation-stats{margin-bottom:12px}
.quotation-system-error{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;padding:10px 12px;border-radius:10px;border:1px solid #edc0c0;background:#fff6f6;color:#8b2525}
.quotation-system-error[hidden]{display:none!important}.quotation-system-error b{font-size:11px}.quotation-system-error span{font-size:9px;word-break:break-word}.quotation-system-error small{font-size:8px;color:#9b5353}
#quotationsPageBody td small{display:block;color:var(--muted);font-size:8px;margin-top:2px}


/* ==========================================================
   TOPNITURE V10.18 — Contract address / product form / payments
   ========================================================== */
.contract-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #d9e6eb;
  border-radius:12px;
  background:#f8fbfc;
}
.contract-section-head b{display:block;color:var(--navy);font-size:11px}
.contract-section-head small{display:block;color:var(--muted);font-size:8px;margin-top:3px;line-height:1.5}
.contract-customer-products-section{margin-bottom:-4px}
.contract-payments-editor{border-top:1px solid #dfe8ec;padding-top:10px}
.contract-payments-grid{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.contract-payment-row{
  display:grid;
  grid-template-columns:82px 1fr 1fr 150px;
  gap:8px;
  align-items:end;
  padding:8px;
  border:1px solid #dce7ec;
  border-radius:10px;
  background:#fbfcfd;
}
.contract-payment-row .form-group{margin:0}
.payment-number{align-self:center;color:var(--navy);font-weight:800;font-size:10px}
.contract-payment-section{margin-top:14px}
.contract-payments-table{width:100%;border-collapse:collapse}
.contract-payments-table th,.contract-payments-table td{
  border:1px solid #dce7ec;
  padding:7px;
  text-align:right;
  font-size:9px;
}
.contract-payments-table th{background:#eef4f7;color:var(--navy)}
@media(max-width:760px){
  .contract-payment-row{grid-template-columns:1fr 1fr}
  .payment-number{grid-column:1/-1}
}
@media(max-width:480px){
  .contract-payment-row{grid-template-columns:1fr}
  .payment-number{grid-column:auto}
}


/* ==========================================================
   TOPNITURE V10.19 — Unsaved Changes Guard
   ========================================================== */
.unsaved-changes-guard{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(4,24,34,.48);
  backdrop-filter:blur(2px);
}
.unsaved-changes-guard.open{display:flex}
.unsaved-guard-card{
  width:min(520px,95vw);
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
  border:1px solid #dce7ec;
  padding:18px;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  animation:unsavedGuardIn .18s ease both;
}
.unsaved-guard-icon{
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#fff4df;
  color:#b86b00;
  font-weight:900;
  font-size:22px;
}
.unsaved-guard-copy h3{
  margin:0 0 5px;
  color:var(--navy);
  font-size:15px;
}
.unsaved-guard-copy p{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.7;
}
.unsaved-guard-actions{
  grid-column:1/-1;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:6px;
}
@keyframes unsavedGuardIn{
  from{opacity:0;transform:scale(.98) translateY(6px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@media(max-width:560px){
  .unsaved-guard-card{grid-template-columns:38px 1fr;padding:14px}
  .unsaved-guard-icon{width:36px;height:36px;border-radius:10px;font-size:18px}
  .unsaved-guard-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .unsaved-guard-actions button{width:100%}
}


/* ==========================================================
   TOPNITURE V10.20 — Desktop Sidebar Scroll + Collapse
   ========================================================== */

/* Let the middle menu take only the available viewport height. */
.sidebar{
  overflow:visible;
  transition:width .22s ease, transform .22s ease, padding .22s ease;
}
.sidebar .brand,
.sidebar .user-card,
.sidebar .sidebar-footer{
  flex:0 0 auto;
}
.sidebar-nav-shell{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:5px;
  overflow:hidden;
}
.sidebar .nav{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
  padding:2px 2px;
}
.sidebar .nav::-webkit-scrollbar{width:5px}
.sidebar .nav::-webkit-scrollbar-track{background:transparent}
.sidebar .nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  border-radius:999px;
}
.sidebar-scroll-btn{
  width:100%;
  height:26px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.07);
  color:#d9e5ec;
  border-radius:8px;
  font-size:10px;
  line-height:1;
  display:grid;
  place-items:center;
  transition:.15s ease;
}
.sidebar-scroll-btn:hover:not(:disabled){
  background:rgba(255,255,255,.14);
  color:#fff;
}
.sidebar-scroll-btn:disabled{
  opacity:.28;
  cursor:default;
}
.sidebar-scroll-btn.sidebar-scroll-hidden{
  visibility:hidden;
}

/* Collapse / expand tab remains reachable at all times. */
.sidebar-toggle-btn{
  position:absolute;
  left:-17px;
  top:18px;
  width:34px;
  height:34px;
  z-index:3;
  border:1px solid #d6e0e5;
  border-radius:10px;
  background:#fff;
  color:var(--navy);
  box-shadow:0 7px 22px rgba(8,57,87,.16);
  display:grid;
  place-items:center;
  padding:0;
}
.sidebar-toggle-icon{
  display:block;
  font-size:24px;
  line-height:1;
  transform:translateY(-1px);
}
.sidebar-toggle-btn:hover{
  background:#f3f7f9;
}

/* True compact mode on wide desktop. */
@media(min-width:1001px){
  .app-shell.sidebar-is-collapsed .sidebar{
    width:78px;
    padding-left:9px;
    padding-right:9px;
  }
  .app-shell.sidebar-is-collapsed .main{
    margin-right:78px;
    width:calc(100% - 78px);
  }
  .app-shell.sidebar-is-collapsed .sidebar .brand{
    padding:5px;
    border-radius:11px;
    margin-bottom:10px;
  }
  .app-shell.sidebar-is-collapsed .sidebar .brand img{
    height:42px;
    object-fit:cover;
    object-position:right;
  }
  .app-shell.sidebar-is-collapsed .sidebar .user-card{
    padding:8px;
    justify-content:center;
  }
  .app-shell.sidebar-is-collapsed .sidebar .user-card>div:not(.avatar),
  .app-shell.sidebar-is-collapsed .sidebar .nav-item span,
  .app-shell.sidebar-is-collapsed .sidebar .sidebar-footer small{
    display:none!important;
  }
  .app-shell.sidebar-is-collapsed .sidebar .avatar{
    width:36px;
    height:36px;
  }
  .app-shell.sidebar-is-collapsed .sidebar .nav-item{
    text-align:center;
    padding:11px 6px;
    font-size:17px;
  }
  .app-shell.sidebar-is-collapsed .sidebar .logout-btn{
    font-size:0;
    padding:9px 5px;
  }
  .app-shell.sidebar-is-collapsed .sidebar .logout-btn:before{
    content:"↪";
    font-size:18px;
  }
}

/* Keep the existing tablet compact layout. The scroll controls still work. */
@media(max-width:1000px) and (min-width:651px){
  .sidebar-toggle-btn{display:none}
  .sidebar-nav-shell{min-height:0}
}

/* Mobile keeps the current mobile behavior. */
@media(max-width:650px){
  .sidebar-toggle-btn,
  .sidebar-scroll-btn{display:none!important}
}


/* ==========================================================
   TOPNITURE V10.21 — Admin System Control
   ========================================================== */
.settings-control-dashboard{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.settings-control-group{
  border:1px solid #dce7ec;
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:0 4px 18px rgba(8,57,87,.04);
}
.settings-control-group .settings-flow-card-head{
  margin-bottom:9px;
}
.settings-list-editor{
  margin-top:10px;
  border-top:1px solid #edf2f4;
  padding-top:9px;
}
.settings-list-editor label{
  display:block;
  font-weight:800;
  color:var(--navy);
  font-size:10px;
  margin-bottom:5px;
}
.settings-list-editor small{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:4px;
}
.settings-contract-control-row{
  margin-top:10px;
  max-width:220px;
}
#settingsQuotationsBody td small{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:2px;
}
@media(max-width:900px){
  .settings-control-dashboard{grid-template-columns:1fr}
}


/* ==========================================================
   TOPNITURE V10.22 — Registration Date Columns & Filters
   ========================================================== */
.registration-date-filter{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 6px;
  border:1px solid #dce7ec;
  background:#f8fbfc;
  border-radius:10px;
  min-height:38px;
}
.registration-date-filter>span:first-child{
  color:var(--navy);
  font-weight:800;
  font-size:8px;
  white-space:nowrap;
}
.registration-date-filter .input{
  width:132px;
  min-width:120px;
  height:30px;
  padding:4px 6px;
  font-size:8px;
  background:#fff;
}
.date-filter-separator{
  color:var(--muted);
  font-size:8px;
}
.date-filter-clear{
  width:27px;
  height:27px;
  border:0;
  border-radius:7px;
  background:#edf2f4;
  color:#687b84;
  font-size:15px;
  cursor:pointer;
}
.date-filter-clear:hover{
  background:#e1e9ed;
  color:var(--navy);
}
.registration-date-line{
  border-top:1px dashed #e2e9ed;
  padding-top:6px;
  margin-top:6px!important;
  color:#5f747e!important;
}
.registration-date-line b{color:var(--navy)}
@media(max-width:760px){
  .registration-date-filter{
    width:100%;
    flex-wrap:wrap;
  }
  .registration-date-filter .input{
    flex:1;
    min-width:125px;
  }
}


/* ==========================================================
   TOPNITURE V10.23 — Quotation Badge + Registration Filter UI
   ========================================================== */

/* Quotations sidebar counter */
.quotation-nav-item{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:8px;
}
.quotation-nav-icon{
  flex:0 0 auto;
}
.quotation-nav-label{
  min-width:0;
}
.quotation-nav-badge{
  margin-right:auto;
  min-width:24px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15);
  color:#dbe6ec;
  font-size:10px;
  line-height:1;
  font-weight:900;
  transition:.18s ease;
}
.quotation-nav-badge.has-pending{
  background:#ef6724;
  border-color:#ef6724;
  color:#fff;
  box-shadow:0 0 0 3px rgba(239,103,36,.12);
}
.app-shell.sidebar-is-collapsed .quotation-nav-item{
  justify-content:center;
}
.app-shell.sidebar-is-collapsed .quotation-nav-label{
  display:none!important;
}
.app-shell.sidebar-is-collapsed .quotation-nav-badge{
  position:absolute;
  top:4px;
  left:4px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  font-size:8px;
}

/* Registration-date filter is now a clean separate row below each main toolbar. */
.registration-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:-3px 0 13px;
  padding:9px 11px;
  border:1px solid #e1e9ed;
  border-radius:11px;
  background:#f8fafb;
}
.registration-filter-copy{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}
.registration-filter-copy b{
  color:var(--navy);
  font-size:10px;
  white-space:nowrap;
}
.registration-filter-copy small{
  color:var(--muted);
  font-size:8px;
}
.registration-filter-row .registration-date-filter{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:auto;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  flex:0 0 auto;
}
.registration-filter-row .registration-date-filter label{
  color:#687b84;
  font-size:8px;
  font-weight:800;
}
.registration-filter-row .registration-date-filter .input{
  width:136px;
  min-width:136px;
  height:31px;
  padding:4px 7px;
  font-size:9px;
  background:#fff;
}
.registration-filter-row .date-filter-clear{
  width:auto;
  min-width:46px;
  height:31px;
  padding:0 9px;
  border:1px solid #dce5e9;
  background:#fff;
  color:#5f727c;
  font-size:8px;
  font-weight:800;
}
.registration-filter-row .date-filter-clear:hover{
  background:#eef3f5;
  color:var(--navy);
}

/* Neutralize old V10.22 full-width mobile rule inside the new row. */
@media(max-width:760px){
  .registration-filter-row{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .registration-filter-copy{
    display:block;
  }
  .registration-filter-copy small{
    display:block;
    margin-top:2px;
  }
  .registration-filter-row .registration-date-filter{
    width:100%;
    flex-wrap:wrap;
  }
  .registration-filter-row .registration-date-filter .input{
    flex:1 1 135px;
    width:auto;
    min-width:120px;
  }
}


/* ==========================================================
   TOPNITURE V10.24 — Android Installable App
   ========================================================== */
.android-install-btn{
  margin-top:10px;
  border:1px solid rgba(239,103,36,.25);
  background:#fff6f0;
  color:var(--navy);
  border-radius:11px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
}
.android-install-btn[hidden]{display:none!important}
.android-install-btn>span:first-child{
  font-size:21px;
}
.android-install-btn>span:last-child{
  display:flex;
  flex-direction:column;
  text-align:right;
  gap:1px;
}
.android-install-btn b{
  font-size:11px;
}
.android-install-btn small{
  color:var(--muted);
  font-size:8px;
}
.android-install-btn:hover{
  background:#fff0e7;
  border-color:#ef6724;
}
.android-install-top{
  border:1px solid #d9e4e9;
  background:#fff;
  color:var(--navy);
  border-radius:9px;
  padding:8px 10px;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.android-install-top[hidden]{display:none!important}
.android-install-top:hover{
  border-color:#ef6724;
  color:#c95a14;
}
.android-install-help{
  text-align:center;
  padding:4px 0;
}
.android-install-hero{
  width:68px;
  height:68px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border-radius:19px;
  background:#fff0e7;
  font-size:32px;
}
.android-install-help p{
  color:var(--muted);
  line-height:1.8;
}
@media(max-width:650px){
  .android-install-top{
    padding:7px 8px;
    font-size:0;
  }
  .android-install-top::first-letter{
    font-size:17px;
  }
}

/* Installed standalone app: respect phone safe areas / cutouts. */
@media(display-mode:standalone){
  body{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .build-badge{
    top:calc(6px + env(safe-area-inset-top));
  }
}


/* ==========================================================
   TOPNITURE V10.25 — Real Excel Detailing Workspace
   ========================================================== */
.excel-detailing-section{
  padding:0!important;
  overflow:hidden;
}
.excel-detailing-head{
  padding:14px 16px 10px;
  margin:0!important;
}
.excel-detailing-head h3{margin-bottom:3px}
.excel-save-state{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.excel-save-state.saved{
  background:#e7f7ef;
  color:#16784a;
}
.excel-save-state.unsaved{
  background:#fff0e7;
  color:#c95a14;
}
.excel-workspace{
  direction:ltr;
  border-top:1px solid #dce6eb;
  background:#fff;
}
.excel-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 10px;
  background:#f7f9fa;
  border-bottom:1px solid #d9e2e7;
}
.excel-toolbar-btn{
  min-height:31px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid #cfdbe1;
  border-radius:6px;
  padding:6px 10px;
  background:#fff;
  color:#173f55;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
  direction:ltr;
}
.excel-toolbar-btn:hover{
  background:#edf4f7;
  border-color:#9fb7c3;
}
.excel-toolbar-btn.primary{
  background:#107c41;
  border-color:#107c41;
  color:#fff;
}
.excel-toolbar-btn.primary:hover{background:#0c6635}
.excel-toolbar-btn.danger{
  color:#b23838;
}
.excel-formula-bar{
  display:grid;
  grid-template-columns:78px 34px minmax(250px,1fr);
  align-items:center;
  min-height:34px;
  background:#fff;
  border-bottom:1px solid #d9e2e7;
}
.excel-name-box,
.excel-formula-input{
  height:33px;
  border:0;
  outline:0;
  background:#fff;
  padding:0 8px;
  font-size:10px;
  color:#233f4f;
}
.excel-name-box{
  border-right:1px solid #d9e2e7;
  text-align:center;
  font-weight:800;
}
.excel-fx{
  height:33px;
  display:grid;
  place-items:center;
  border-right:1px solid #d9e2e7;
  color:#607580;
  font-style:italic;
  font-weight:800;
}
.excel-grid-scroll{
  width:100%;
  height:520px;
  overflow:auto;
  background:#fff;
  border-bottom:1px solid #d9e2e7;
  overscroll-behavior:contain;
}
.excel-grid{
  display:grid;
  width:max-content;
  min-width:100%;
  direction:ltr;
  align-items:stretch;
}
.excel-corner,
.excel-column-header,
.excel-row-header,
.excel-cell{
  box-sizing:border-box;
  min-height:28px;
  border-right:1px solid #d7dfe4;
  border-bottom:1px solid #d7dfe4;
}
.excel-corner{
  position:sticky;
  top:0;
  left:0;
  z-index:8;
  background:#edf1f3;
  border-right:1px solid #bcc9d0;
  border-bottom:1px solid #bcc9d0;
}
.excel-column-header{
  position:sticky;
  top:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f5f6;
  color:#4e606a;
  font-size:9px;
  font-weight:800;
  user-select:none;
}
.excel-row-header{
  position:sticky;
  left:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f5f6;
  color:#5a6b74;
  font-size:9px;
  user-select:none;
}
.excel-cell{
  min-width:120px;
  max-width:120px;
  padding:5px 7px;
  background:#fff;
  color:#243943;
  font-size:10px;
  line-height:17px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  outline:none;
  cursor:text;
}
.excel-cell:hover{background:#fbfdfd}
.excel-cell:focus,
.excel-cell.is-active{
  position:relative;
  z-index:2;
  box-shadow:inset 0 0 0 2px #107c41;
  background:#fff;
}
.excel-cell.excel-template-header{
  font-weight:800;
  background:#f8fbf9;
}
.excel-cell.excel-template-header:focus,
.excel-cell.excel-template-header.is-active{
  background:#fff;
}
.excel-sheet-tabs{
  min-height:34px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:0 10px;
  background:#f4f6f7;
  direction:ltr;
}
.excel-sheet-tab{
  min-width:100px;
  height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:2px solid transparent;
  color:#4f626b;
  font-size:9px;
  font-weight:800;
}
.excel-sheet-tab.active{
  background:#fff;
  border-top-color:#107c41;
  color:#107c41;
}
.excel-sheet-tabs small{
  align-self:center;
  color:#788b94;
  font-size:8px;
}
.excel-setup-error{
  margin:10px;
  padding:13px;
  border:1px solid #f2c6c6;
  border-radius:10px;
  background:#fff7f7;
  direction:rtl;
}
.excel-setup-error b,
.excel-setup-error span,
.excel-setup-error small{
  display:block;
}
.excel-setup-error b{color:#a93636}
.excel-setup-error span{margin-top:4px;color:#644;font-size:9px}
.excel-setup-error small{margin-top:5px;color:#7a6868;font-size:8px}

@media(max-width:760px){
  .excel-grid-scroll{height:430px}
  .excel-toolbar{gap:5px}
  .excel-toolbar-btn{padding:6px 8px;font-size:8px}
  .excel-formula-bar{grid-template-columns:65px 30px minmax(190px,1fr)}
  .excel-cell{min-width:105px;max-width:105px;font-size:9px}
}


/* ==========================================================
   TOPNITURE V10.26 — Android Shift Button Reliability
   ========================================================== */
.shift-toggle-btn{
  position:relative;
  z-index:2;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(8,57,87,.12);
  user-select:none;
}
.shift-toggle-btn:active{
  transform:translateY(1px) scale(.98);
}
.shift-toggle-btn:disabled{
  opacity:.68;
  cursor:wait;
  transform:none!important;
}
.shift-toggle-btn.online.presence-stale{
  background:#fff7e8;
  color:#9b6217;
  border-color:#efd19d;
}


/* ==========================================================
   TOPNITURE V10.27 — Excel navigation, formulas, version UI
   ========================================================== */
.build-badge{display:none!important}
.login-system-version{
  display:block;
  margin-top:10px;
  text-align:center;
  color:#9aa8af;
  font-size:8px;
  letter-spacing:.3px;
}
.sidebar-system-version{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.42)!important;
  font-size:8px!important;
  text-align:center;
  letter-spacing:.5px;
}
.excel-cell.excel-formula-cell{
  color:#0b5d35;
}
.excel-cell.excel-formula-cell:not(:focus){
  background:#fbfffc;
}
.excel-formula-help{
  direction:ltr;
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  padding:7px 10px;
  background:#f8fbf9;
  border-top:1px solid #e0e8e3;
  color:#5e7370;
  font-size:8px;
}
.excel-formula-help b{color:#107c41}
.excel-formula-help span{
  padding:3px 6px;
  border:1px solid #dce8df;
  border-radius:5px;
  background:#fff;
  color:#315a45;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media(max-width:650px){
  .login-system-version{font-size:7px}
  .excel-formula-help{gap:4px}
}


/* ==========================================================
   TOPNITURE V10.28 — Excel Mouse Selection + Cell Resizing
   ========================================================== */
.excel-column-header,
.excel-row-header{
  position:sticky;
  overflow:visible!important;
}
.excel-column-header{
  user-select:none;
}
.excel-column-header>span:first-child,
.excel-row-header>span:first-child{
  pointer-events:none;
}
.excel-col-resizer{
  position:absolute;
  top:0;
  right:-4px;
  width:8px;
  height:100%;
  z-index:12;
  cursor:col-resize;
  touch-action:none;
}
.excel-col-resizer:hover::after,
body.excel-resizing-col .excel-col-resizer::after{
  content:"";
  position:absolute;
  top:0;
  right:3px;
  width:2px;
  height:100%;
  background:#107c41;
}
.excel-row-resizer{
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:8px;
  z-index:12;
  cursor:row-resize;
  touch-action:none;
}
.excel-row-resizer:hover::after,
body.excel-resizing-row .excel-row-resizer::after{
  content:"";
  position:absolute;
  left:0;
  bottom:3px;
  width:100%;
  height:2px;
  background:#107c41;
}
body.excel-resizing-col,
body.excel-resizing-col *{
  cursor:col-resize!important;
  user-select:none!important;
}
body.excel-resizing-row,
body.excel-resizing-row *{
  cursor:row-resize!important;
  user-select:none!important;
}

.excel-cell{
  user-select:none;
  -webkit-user-select:none;
}
.excel-cell:focus{
  user-select:text;
  -webkit-user-select:text;
}
.excel-cell.is-selected{
  background:#eaf5ee!important;
}
.excel-cell.is-selected.selection-top{
  border-top:2px solid #107c41;
}
.excel-cell.is-selected.selection-bottom{
  border-bottom:2px solid #107c41;
}
.excel-cell.is-selected.selection-left{
  border-left:2px solid #107c41;
}
.excel-cell.is-selected.selection-right{
  border-right:2px solid #107c41;
}
.excel-cell.is-active{
  background:#fff!important;
  box-shadow:inset 0 0 0 2px #107c41!important;
  z-index:4!important;
}
.excel-grid-scroll{
  cursor:cell;
}
.excel-grid-scroll .excel-cell:focus{
  cursor:text;
}


/* ==========================================================
   TOPNITURE V10.29 — TRUE EXCEL COLUMN / ROW RESIZE FIX
   ========================================================== */

/* CRITICAL:
   V10.25 had fixed 120px / 105px cell widths.
   Those fixed widths prevented the CSS Grid column track from visually
   expanding or shrinking even though the drag state was changing.
   Grid track size is now the single source of truth. */
.excel-grid .excel-cell{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  overflow:hidden;
}

/* Column headers also stretch exactly with the grid track. */
.excel-grid .excel-column-header{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}

/* Larger hit target on divider, like desktop Excel. */
.excel-col-resizer{
  right:-7px!important;
  width:14px!important;
  z-index:30!important;
  pointer-events:auto!important;
  cursor:col-resize!important;
}
.excel-row-resizer{
  bottom:-7px!important;
  height:14px!important;
  z-index:30!important;
  pointer-events:auto!important;
  cursor:row-resize!important;
}

.excel-column-header.is-resizing,
.excel-row-header.is-resizing{
  background:#e8f4ed!important;
}

/* Strong visible divider while dragging. */
body.excel-resizing-col .excel-column-header.is-resizing .excel-col-resizer::after{
  right:6px!important;
  width:2px!important;
  background:#107c41!important;
}
body.excel-resizing-row .excel-row-header.is-resizing .excel-row-resizer::after{
  bottom:6px!important;
  height:2px!important;
  background:#107c41!important;
}

/* Keep cell selection cursor away from header divider logic. */
.excel-column-header{cursor:default}
.excel-row-header{cursor:default}
.excel-grid-scroll .excel-column-header .excel-col-resizer{cursor:col-resize!important}
.excel-grid-scroll .excel-row-header .excel-row-resizer{cursor:row-resize!important}

/* Override the old mobile 105px fixed rule too. */
@media(max-width:760px){
  .excel-grid .excel-cell{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
}


/* ==========================================================
   TOPNITURE V10.31 — Excel Leads Import Wizard
   ========================================================== */
.modal.lead-import-wizard-modal{
  width:min(1080px,96vw);
}
.lead-import-wizard{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lead-import-head,
.lead-import-section-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.lead-import-head h2,
.lead-import-section h3{
  margin:0;
  color:var(--navy);
}
.lead-import-head p,
.lead-import-section-title p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:10px;
}
.lead-import-section{
  border:1px solid var(--border);
  border-radius:13px;
  background:#fff;
  padding:12px;
}
.lead-import-sheet-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:8px;
  margin-top:10px;
}
.lead-import-sheet-card{
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #dce6eb;
  border-radius:10px;
  padding:10px;
  background:#f9fbfc;
  cursor:pointer;
}
.lead-import-sheet-card input{
  accent-color:#0b5279;
}
.lead-import-sheet-card b,
.lead-import-sheet-card small{
  display:block;
}
.lead-import-sheet-card b{
  color:var(--navy);
  font-size:11px;
}
.lead-import-sheet-card small{
  color:var(--muted);
  font-size:9px;
  margin-top:2px;
}
.lead-import-stats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.lead-import-stats article,
.lead-import-result-grid article{
  border:1px solid #dce6eb;
  background:#f8fafb;
  border-radius:11px;
  padding:10px;
  text-align:center;
}
.lead-import-stats span,
.lead-import-result-grid span{
  display:block;
  color:var(--muted);
  font-size:8px;
}
.lead-import-stats strong,
.lead-import-result-grid strong{
  display:block;
  margin-top:4px;
  color:var(--navy);
  font-size:18px;
}
.lead-import-warning{
  border:1px solid #f0d2a2;
  background:#fff8eb;
  color:#8d5b13;
  border-radius:10px;
  padding:10px 12px;
  font-size:9px;
  line-height:1.6;
}
.lead-import-map-table{
  min-width:600px!important;
}
.lead-import-map-table td small{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:2px;
}
.lead-import-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}
.lead-import-options label{
  display:block;
  border:1px solid #dce6eb;
  border-radius:10px;
  padding:10px;
  background:#f9fbfc;
  cursor:pointer;
}
.lead-import-options input{
  accent-color:#0b5279;
}
.lead-import-options b{
  color:var(--navy);
  font-size:10px;
}
.lead-import-options small{
  display:block;
  color:var(--muted);
  margin:4px 0 0 22px;
  font-size:8px;
  line-height:1.5;
}
.lead-import-progress-wrap{
  border:1px solid #dce6eb;
  border-radius:11px;
  padding:10px;
  background:#f8fafb;
}
.lead-import-progress-copy{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--navy);
  font-size:9px;
}
.lead-import-progress{
  height:8px;
  margin-top:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e4ebef;
}
.lead-import-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:#ef6724;
  transition:width .18s ease;
}
.lead-import-actions{
  position:sticky;
  bottom:-24px;
  z-index:4;
  background:#fff;
  padding:10px 0 0;
  border-top:1px solid #edf1f3;
}
.lead-import-result{
  text-align:center;
  padding:20px 4px;
}
.lead-import-result-icon{
  width:64px;
  height:64px;
  margin:0 auto 10px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e5f6ec;
  color:#167041;
  font-size:28px;
  font-weight:900;
}
.lead-import-result-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:16px 0;
}
.lead-import-result p{
  color:var(--muted);
  font-size:10px;
}
@media(max-width:850px){
  .lead-import-stats{grid-template-columns:repeat(3,1fr)}
  .lead-import-result-grid{grid-template-columns:repeat(2,1fr)}
  .lead-import-options{grid-template-columns:1fr}
}
@media(max-width:650px){
  .modal.lead-import-wizard-modal{
    width:100%!important;
  }
  .lead-import-stats{grid-template-columns:repeat(2,1fr)}
  .lead-import-map-table{min-width:560px!important}
}


/* ==========================================================
   TOPNITURE V10.32 — Assign Roles + Follow-up & Call History
   ========================================================== */
.lead-import-assign-hint{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:8px;
}
.followup-call-history{
  margin-top:14px;
  border:1px solid #dce6eb;
  border-radius:13px;
  padding:12px;
  background:#f9fbfc;
}
.followup-call-history .media-head{
  margin-bottom:10px;
}
.followup-call-history .media-head h3{
  margin:0;
  color:var(--navy);
}
.followup-call-history .media-head p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:9px;
}
.followup-history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.followup-history-card{
  position:relative;
  border:1px solid #dce6eb;
  border-right:4px solid #7692a0;
  border-radius:10px;
  background:#fff;
  padding:10px 11px;
}
.followup-history-card.call{border-right-color:#ef6724}
.followup-history-card.followup{border-right-color:#1674a8}
.followup-history-card.general{border-right-color:#6c7f89}
.followup-history-card.extra{border-right-color:#8e67ad}
.followup-history-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:6px;
}
.followup-history-type{
  font-weight:900;
  color:var(--navy);
  font-size:9px;
}
.followup-history-card-head small{
  color:var(--muted);
  font-size:8px;
  white-space:nowrap;
}
.followup-history-text{
  color:#263e49;
  font-size:10px;
  line-height:1.75;
  white-space:pre-wrap;
}
.followup-history-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:7px;
  padding-top:6px;
  border-top:1px dashed #e2e9ed;
  color:#7a8c94;
  font-size:8px;
}


/* ==========================================================
   TOPNITURE V10.33 — Exact Totals + Multi Select
   ========================================================== */
.entity-selection-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 10px;
  padding:9px 11px;
  border:1px solid #dce6eb;
  border-radius:11px;
  background:#f9fbfc;
}
.entity-totals{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.entity-totals>span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:29px;
  padding:5px 9px;
  border:1px solid #dce6eb;
  border-radius:999px;
  background:#fff;
  color:#526976;
  font-size:9px;
  font-weight:700;
}
.entity-totals b{
  color:var(--navy);
  font-size:11px;
}
.entity-totals .selected-pill{
  border-color:#f0caa9;
  background:#fff7ef;
}
.entity-totals .selected-pill b{
  color:#c75d17;
}
.entity-selection-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.compact-select-btn{
  padding:6px 9px!important;
  min-height:30px;
  font-size:9px!important;
}
.bulk-select-all-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #dce6eb;
  border-radius:8px;
  background:#fff;
  color:#526976;
  font-size:9px;
  cursor:pointer;
}
.select-col{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  text-align:center!important;
}
.select-col input,
.customer-select-box input,
.bulk-select-all-label input{
  width:15px;
  height:15px;
  accent-color:#0b5279;
  cursor:pointer;
}
.bulk-selected-row>td{
  background:#f1f8fb!important;
}
.bulk-selected-row>td:first-child{
  box-shadow:inset -3px 0 0 #0b5279;
}
.customer-card{
  position:relative;
}
.customer-select-box{
  position:absolute;
  left:10px;
  top:10px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:27px;
  padding:4px 7px;
  border:1px solid #dce6eb;
  border-radius:8px;
  background:#fff;
  color:#647985;
  font-size:8px;
  cursor:pointer;
  z-index:2;
}
.customer-card.bulk-selected-card{
  border-color:#82aec4!important;
  box-shadow:0 0 0 2px rgba(11,82,121,.08),0 7px 18px rgba(8,57,87,.05)!important;
  background:#f8fcfe;
}
.customer-card.bulk-selected-card .customer-select-box{
  background:#eaf5fa;
  border-color:#82aec4;
  color:#0b5279;
}
@media(max-width:700px){
  .entity-selection-bar{
    align-items:stretch;
    flex-direction:column;
  }
  .entity-selection-actions{
    width:100%;
  }
  .entity-selection-actions button,
  .bulk-select-all-label{
    flex:1 1 auto;
    justify-content:center;
  }
}


/* ==========================================================
   TOPNITURE V10.34 — Bulk Assign / Bulk Delete
   ========================================================== */
.bulk-action-btn[hidden]{display:none!important}
.bulk-action-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.bulk-action-modal h2{
  margin:5px 0 8px;
  color:var(--navy);
}
.bulk-action-modal>p{
  color:var(--muted);
  font-size:10px;
}
.bulk-action-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}
.bulk-action-summary article{
  padding:11px;
  border:1px solid #dce6eb;
  border-radius:10px;
  background:#f8fafb;
  text-align:center;
}
.bulk-action-summary article.blocked{
  border-color:#f0c7cc;
  background:#fff7f8;
}
.bulk-action-summary span{
  display:block;
  color:var(--muted);
  font-size:8px;
}
.bulk-action-summary strong{
  display:block;
  margin-top:4px;
  color:var(--navy);
  font-size:20px;
}
.bulk-action-summary .blocked strong{
  color:#b8444d;
}
.bulk-action-warning{
  margin:0 0 12px;
  padding:9px 11px;
  border:1px solid #f0d2a2;
  border-radius:9px;
  background:#fff8eb;
  color:#8d5b13;
  font-size:9px;
  line-height:1.6;
}
.bulk-delete-modal{
  max-width:620px;
  margin:auto;
}
@media(max-width:650px){
  .bulk-action-summary{grid-template-columns:1fr 1fr}
  .entity-selection-actions .bulk-action-btn{
    flex:1 1 calc(50% - 4px);
  }
}


/* ==========================================================
   TOPNITURE V10.35 — Complete History + Name-only Leads
   ========================================================== */
.lead-import-info{
  border:1px solid #cfe2ef;
  background:#f2f9fd;
  color:#315f78;
  border-radius:10px;
  padding:10px 12px;
  font-size:9px;
  line-height:1.6;
}


/* ==========================================================
   TOPNITURE V10.36 — Fast Boot + Large Dataset Performance
   ========================================================== */
.boot-screen{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(circle at 50% 18%,rgba(239,103,36,.09),transparent 34%),
    linear-gradient(180deg,#f7fafc 0%,#eef4f7 100%);
}
.boot-screen.hidden{display:none!important}
.boot-card{
  width:min(360px,92vw);
  text-align:center;
  padding:28px 24px;
  border:1px solid #d9e4ea;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 55px rgba(8,57,87,.10);
}
.boot-logo{
  display:block;
  width:min(190px,70%);
  height:auto;
  margin:0 auto 18px;
  object-fit:contain;
}
.boot-spinner{
  width:34px;
  height:34px;
  margin:0 auto 13px;
  border:3px solid #dce7ec;
  border-top-color:#ef6724;
  border-radius:50%;
  animation:topnitureBootSpin .8s linear infinite;
}
@keyframes topnitureBootSpin{to{transform:rotate(360deg)}}
.boot-card h2{
  margin:0;
  color:#083957;
  font-size:20px;
  letter-spacing:.5px;
}
.boot-card p{
  margin:7px 0 0;
  color:#536c78;
  font-size:11px;
}
.boot-card small{
  display:block;
  margin-top:8px;
  color:#8a9aa2;
  font-size:8px;
  letter-spacing:.4px;
}

.data-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid #e4ebef;
  background:#fbfcfd;
}
.data-pager-info{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
  color:#536c78;
  font-size:9px;
}
.data-pager-info b{
  color:#083957;
  font-size:11px;
}
.data-pager-info small{
  color:#8799a2;
}
.data-pager-actions{
  display:flex;
  align-items:center;
  gap:8px;
  color:#536c78;
  font-size:9px;
}
.data-pager-actions .secondary-btn{
  min-width:72px;
  padding:6px 9px;
}
.data-pager-actions .secondary-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

@media(max-width:650px){
  .boot-card{padding:24px 18px}
  .data-pager{
    align-items:stretch;
    flex-direction:column;
  }
  .data-pager-actions{
    justify-content:space-between;
  }
}


/* ==========================================================
   TOPNITURE V10.37 — Admin Today Controls
   ========================================================== */
.today-controls-group{
  border-color:#efd8c7!important;
  background:
    linear-gradient(180deg,rgba(239,103,36,.025),rgba(255,255,255,0)),
    #fff;
}
.today-controls-group>.settings-flow-card-head{
  border-bottom:1px solid #f2e5dc;
  padding-bottom:10px;
  margin-bottom:10px;
}
.today-page-size-row{
  margin-top:12px;
}
.settings-core-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:12px;
  padding:11px 12px;
  border:1px solid #cfe2ef;
  border-radius:10px;
  background:#f3f9fc;
}
.settings-core-info b{
  color:#0b5279;
  font-size:10px;
}
.settings-core-info span{
  color:#58727f;
  font-size:9px;
  line-height:1.6;
}

/* Multi-select visual switches */
.feature-lead-multiselect-off #leads .select-col,
.feature-contract-multiselect-off #contracts .select-col{
  display:none!important;
}
.feature-customer-multiselect-off #customers .customer-select-box{
  display:none!important;
}


/* ==========================================================
   TOPNITURE V10.38 — Mobile Chat Safe Position
   Keeps the floating chat button above the mobile bottom nav.
   ========================================================== */
@media (max-width:650px){
  body.mobile-chat-safe-position .chat-fab{
    left:16px!important;
    bottom:calc(96px + env(safe-area-inset-bottom, 0px))!important;
    width:54px!important;
    height:54px!important;
    z-index:1150!important;
    box-shadow:0 10px 26px rgba(8,57,87,.30)!important;
  }

  body.mobile-chat-safe-position .chat-fab-badge{
    right:-4px!important;
    top:-4px!important;
  }
}

/* Slightly more clearance on very short/narrow phones. */
@media (max-width:430px){
  body.mobile-chat-safe-position .chat-fab{
    left:14px!important;
    bottom:calc(94px + env(safe-area-inset-bottom, 0px))!important;
  }
}


/* ==========================================================
   TOPNITURE V10.39 — Notification Center Fix
   ========================================================== */
.notification-summary-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin:10px 0 12px;
}
.notification-summary-grid button{
  border:1px solid #dce6eb;
  border-radius:10px;
  background:#f8fafb;
  padding:9px 6px;
  text-align:center;
  cursor:pointer;
  font:inherit;
}
.notification-summary-grid button.active{
  border-color:#ef6724;
  background:#fff7ef;
  box-shadow:0 0 0 2px rgba(239,103,36,.08);
}
.notification-summary-grid span{
  display:block;
  color:#667d88;
  font-size:8px;
}
.notification-summary-grid strong{
  display:block;
  margin-top:4px;
  color:#083957;
  font-size:18px;
}
.notification-special-filters{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 10px;
}
.notification-special-filters .active{
  border-color:#ef6724!important;
  background:#fff7ef!important;
}
.notification-explain{
  margin:0 0 10px;
  padding:9px 11px;
  border:1px solid #f0d2a2;
  border-radius:10px;
  background:#fff8eb;
  color:#805717;
  font-size:9px;
  line-height:1.6;
}
.notification-copy em{
  display:inline-block;
  margin-top:4px;
  padding:2px 6px;
  border-radius:999px;
  background:#eef4f7;
  color:#637b87;
  font-style:normal;
  font-size:7px;
  font-weight:800;
}
.notification-item.notif-historical{
  opacity:.72;
  border-inline-start:4px solid #a7b3ba;
  background:#fafbfb;
}
.notification-item.notif-historical .notification-copy b{
  color:#627681;
}
.notification-window-settings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  grid-column:1/-1;
  width:100%;
  margin-top:8px;
}
@media(max-width:800px){
  .notification-summary-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .notification-summary-grid{grid-template-columns:repeat(2,1fr)}
  .notification-window-settings{grid-template-columns:1fr}
  .notification-center .modal{max-height:90dvh}
}


/* ==========================================================
   TOPNITURE V10.40 — Facebook-style Notifications
   ========================================================== */
.notification-panel-backdrop{
  position:fixed;
  inset:0;
  z-index:1180;
  background:rgba(11,31,43,.16);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.notification-panel-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.notification-panel{
  position:fixed;
  top:70px;
  right:14px;
  z-index:1190;
  width:min(430px,calc(100vw - 28px));
  max-height:calc(100dvh - 88px);
  overflow:hidden;
  background:#fff;
  border:1px solid #dbe5ea;
  border-radius:16px;
  box-shadow:0 18px 55px rgba(6,40,61,.20);
  transform:translateY(-8px) scale(.985);
  opacity:0;
  pointer-events:none;
  transition:.18s ease;
}
.notification-panel.open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

.fb-notification-shell{
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 90px);
}
.fb-notification-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 9px;
}
.fb-notification-head h2{
  margin:0;
  color:#083957;
  font-size:22px;
}
.fb-notification-head small{
  display:block;
  margin-top:2px;
  color:#748892;
  font-size:9px;
}
.fb-notification-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#edf2f5;
  color:#294d60;
  font-size:22px;
  cursor:pointer;
}
.fb-notification-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 14px 10px;
  border-bottom:1px solid #edf1f3;
}
.fb-notification-tabs{
  display:flex;
  gap:6px;
}
.fb-notification-tabs button{
  border:0;
  border-radius:999px;
  background:#eef2f4;
  color:#4e6672;
  padding:7px 12px;
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.fb-notification-tabs button.active{
  background:#e7f3ff;
  color:#0866ff;
}
.fb-mark-all{
  border:0;
  background:transparent;
  color:#0866ff;
  font:inherit;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.fb-notification-warning{
  margin:9px 12px 0;
  padding:8px 10px;
  border:1px solid #f0d2a2;
  border-radius:9px;
  background:#fff8eb;
  color:#825918;
  font-size:8px;
  line-height:1.5;
}
.fb-notification-list{
  overflow:auto;
  overscroll-behavior:contain;
  padding:6px;
}
.fb-notification-item{
  width:100%;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 10px;
  align-items:center;
  gap:9px;
  border:0;
  border-radius:11px;
  background:#fff;
  padding:9px 8px;
  text-align:right;
  font:inherit;
  cursor:pointer;
}
.fb-notification-item:hover{
  background:#f4f6f8;
}
.fb-notification-item.unread{
  background:#edf5ff;
}
.fb-notification-item.unread:hover{
  background:#e6f1ff;
}
.fb-notification-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8eef2;
  color:#083957;
  font-size:20px;
}
.fb-notification-icon.type-chat{background:#e7f3ff}
.fb-notification-icon.type-quotation{background:#fff2df}
.fb-notification-icon.type-followup{background:#eaf7ef}
.fb-notification-icon.type-visit{background:#f1edff}
.fb-notification-icon.type-deferred{background:#fff6df}
.fb-notification-icon.type-task{background:#eef2f5}
.fb-notification-copy{
  min-width:0;
}
.fb-notification-copy b{
  display:block;
  color:#173746;
  font-size:11px;
  line-height:1.4;
}
.fb-notification-copy small{
  display:block;
  margin-top:2px;
  color:#627985;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fb-notification-copy time{
  display:block;
  margin-top:3px;
  color:#0866ff;
  font-size:8px;
  font-weight:700;
}
.fb-notification-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#0866ff;
}
.fb-notification-empty{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  color:#71858f;
}
.fb-notification-empty span{
  font-size:36px;
  margin-bottom:9px;
}
.fb-notification-empty b{
  color:#274959;
  font-size:12px;
}
.fb-notification-empty small{
  margin-top:4px;
  font-size:9px;
}

@media(max-width:650px){
  .notification-panel-backdrop{
    background:rgba(6,40,61,.22);
  }
  .notification-panel{
    top:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    padding-top:env(safe-area-inset-top,0px);
  }
  .fb-notification-shell{
    height:100%;
    max-height:none;
  }
  .fb-notification-head{
    padding-top:12px;
  }
  .fb-notification-list{
    flex:1;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  }
  .fb-notification-item{
    grid-template-columns:50px minmax(0,1fr) 10px;
    padding:10px 8px;
  }
  .fb-notification-icon{
    width:48px;
    height:48px;
  }
}


/* ==========================================================
   TOPNITURE V10.41 — Mobile role menu + bell dropdown
   ========================================================== */
@media(max-width:650px){
  .sidebar .user-role-nav .nav-item[style*="display: none"],
  .sidebar .user-role-nav .nav-item[hidden]{
    display:none!important;
  }
}

/* Dropdown grows from the bell instead of fullscreen / bottom sheet. */
.notification-panel{
  transform-origin:var(--notification-arrow-x,32px) top!important;
  transform:translateY(-8px) scale(.97)!important;
}
.notification-panel.open{
  transform:translateY(0) scale(1)!important;
}
.notification-panel::before{
  content:"";
  position:absolute;
  top:-6px;
  left:calc(var(--notification-arrow-x,32px) - 6px);
  width:12px;
  height:12px;
  transform:rotate(45deg);
  background:#fff;
  border-left:1px solid #dbe5ea;
  border-top:1px solid #dbe5ea;
  z-index:2;
}
.notification-panel .fb-notification-shell{
  position:relative;
  z-index:3;
  background:#fff;
  border-radius:16px;
}

@media(max-width:650px){
  .notification-panel{
    max-width:none!important;
    border:1px solid #dbe5ea!important;
    border-radius:16px!important;
    padding-top:0!important;
    overflow:hidden!important;
    box-shadow:0 18px 50px rgba(6,40,61,.24)!important;
  }
  .notification-panel .fb-notification-shell{
    height:auto!important;
    max-height:inherit!important;
  }
  .fb-notification-list{
    max-height:calc(100dvh - 190px);
    padding-bottom:10px!important;
  }
}


/* ==========================================================
   TOPNITURE V10.43 — App Refresh Button
   ========================================================== */
.app-refresh-btn{
  position:relative;
  display:inline-grid;
  place-items:center;
  color:var(--navy);
  border:1px solid #e2e9ed;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.app-refresh-btn:hover{
  background:#f7fafc;
  box-shadow:0 8px 22px rgba(8,57,87,.12);
  transform:translateY(-1px);
}
.app-refresh-icon{
  display:block;
  font-size:23px;
  line-height:1;
  font-family:Arial,sans-serif;
  transform-origin:50% 50%;
}
.app-refresh-btn.refreshing .app-refresh-icon{
  animation:topnitureRefreshSpin .8s linear infinite;
}
.app-refresh-btn.refreshing{
  background:#eef5f8;
  cursor:wait;
}
@keyframes topnitureRefreshSpin{
  to{transform:rotate(360deg)}
}

@media(max-width:650px){
  .app-refresh-btn{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px;
  }
  .app-refresh-icon{
    font-size:21px;
  }
}


/* ==========================================================
   TOPNITURE V10.44 — Urgent Follow-ups Cleanup
   ========================================================== */
.urgent-dashboard-item{
  width:100%;
  border:0;
  background:transparent;
  text-align:right;
  font:inherit;
  cursor:pointer;
}
.urgent-dashboard-item:hover{
  background:#f8fafb;
}
.urgent-state{
  display:inline-block;
  margin-inline-start:4px;
  padding:3px 6px;
  border-radius:999px;
  font-size:8px;
  font-weight:800;
}
.urgent-state.overdue{background:#feecef;color:#b63b4a}
.urgent-state.today{background:#fff0e7;color:#c95a14}
.urgent-state.upcoming{background:#e7f7ef;color:#24744c}

.urgent-dashboard-settings{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  width:100%;
  margin-top:9px;
}
@media(max-width:650px){
  .urgent-dashboard-settings{grid-template-columns:1fr}
}


/* ==========================================================
   TOPNITURE V10.45 — Per-Product Main Image + References
   ========================================================== */
.lead-product-card{
  border:1px solid #d7e3e9!important;
  border-inline-start:4px solid var(--orange)!important;
  box-shadow:0 9px 24px rgba(8,57,87,.06)!important;
}
.lead-product-card-head{
  align-items:flex-start!important;
}
.lead-product-card-head>div:first-child{
  display:flex;
  align-items:center;
  gap:9px;
}
.lead-product-card-head>div:first-child>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.lead-product-card-head small{
  color:var(--muted);
  font-size:9px;
}
.lead-product-order{
  min-width:58px;
  text-align:center;
  background:var(--navy)!important;
  color:#fff!important;
  border-radius:999px!important;
  padding:6px 8px!important;
  font-size:9px!important;
  font-weight:800;
}

.grouped-product-media{
  margin-top:12px;
  border:1px solid #ecd8c8;
  border-radius:13px;
  background:#fffbf8;
  padding:12px;
}
.grouped-product-media .product-media-title{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.grouped-product-media .product-media-title>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.grouped-product-media .product-media-title strong{
  color:var(--orange);
}
.product-existing-media-preview,
.product-selected-media-preview{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #ddcbbd;
}
.product-existing-media-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  margin-bottom:7px;
}
.product-existing-media-head b{font-size:10px;color:var(--navy)}
.product-existing-media-head small{font-size:8px;color:var(--muted)}

.product-inline-media-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}
.product-media-preview-card,
.product-local-preview-card{
  border:1px solid #dbe5ea;
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  min-width:0;
}
.product-media-preview-card.main{
  grid-column:span 2;
}
.product-media-preview-card img,
.product-local-preview-card img{
  width:100%;
  height:100px;
  object-fit:cover;
  display:block;
  background:#eef3f5;
}
.product-media-preview-card.main img{height:130px}
.product-media-preview-card>div,
.product-local-preview-card>div{padding:6px}
.product-media-preview-card b,
.product-local-preview-card b{display:block;font-size:8px;color:var(--navy)}
.product-media-preview-card small,
.product-local-preview-card small{display:block;font-size:7px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-file-preview{
  height:100px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:var(--navy);
  background:#eef3f5;
  font-weight:800;
}
.product-local-preview-card.file>span{
  height:100px;
  display:grid;
  place-items:center;
  background:#eef3f5;
  font-weight:800;
  color:var(--navy);
}

.grouped-product-view{
  border-inline-start:4px solid var(--orange)!important;
}
.product-request-view-head>div:first-child{
  display:flex;
  align-items:center;
  gap:8px;
}
.product-section-label{
  display:block;
  color:var(--orange);
  font-size:8px;
  text-transform:uppercase;
  margin-bottom:2px;
}
.product-group-media-shell{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed #d5e0e6;
}
.product-group-media-title{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}
.product-group-media-title b{font-size:10px;color:var(--navy)}
.product-group-media-title small{font-size:8px;color:var(--muted)}
.product-media-empty{
  grid-column:1/-1;
  padding:9px;
  border:1px dashed #d8e2e7;
  border-radius:8px;
  text-align:center;
  color:#82939c;
  font-size:8px;
}

.prep-products-section .product-requirements-view{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.prep-products-section .product-request-view-card{
  background:#fff;
}
.prep-products-section .product-inline-media-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.prep-products-section .product-media-preview-card.main{
  grid-column:1/-1;
}

@media(max-width:650px){
  .product-inline-media-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .product-media-preview-card.main{
    grid-column:1/-1;
  }
  .product-existing-media-head,
  .product-group-media-title{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ==========================================================
   TOPNITURE V10.46 — Contract Product Image Proportions
   ========================================================== */

/* Main image uses the full product width and never gets cropped. */
.contract-product-requirements .product-inline-media-grid,
.prep-products-section .product-inline-media-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.contract-product-requirements .product-media-preview-card.main,
.prep-products-section .product-media-preview-card.main{
  grid-column:1/-1!important;
}

.contract-product-requirements .product-media-preview-card>a,
.prep-products-section .product-media-preview-card>a,
.product-existing-media-preview .product-media-preview-card>a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background:#f5f7f8;
}

.contract-product-requirements .product-media-preview-card img,
.prep-products-section .product-media-preview-card img{
  width:100%!important;
  height:150px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#f5f7f8!important;
}

.contract-product-requirements .product-media-preview-card.main img,
.prep-products-section .product-media-preview-card.main img{
  height:clamp(220px,32vw,360px)!important;
  object-fit:contain!important;
}

/* Editor previews also preserve the original photo proportions. */
.product-existing-media-preview .product-media-preview-card img,
.product-selected-media-preview .product-local-preview-card img{
  object-fit:contain!important;
  background:#f5f7f8!important;
}

@media(max-width:650px){
  .contract-product-requirements .product-inline-media-grid,
  .prep-products-section .product-inline-media-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .contract-product-requirements .product-media-preview-card.main img,
  .prep-products-section .product-media-preview-card.main img{
    height:240px!important;
  }

  .contract-product-requirements .product-media-preview-card:not(.main) img,
  .prep-products-section .product-media-preview-card:not(.main) img{
    height:130px!important;
  }
}


/* ==========================================================
   TOPNITURE V10.47 — Fast Refresh
   ========================================================== */
.app-refresh-btn.refreshing{
  box-shadow:0 0 0 3px rgba(239,103,36,.10),0 8px 22px rgba(8,57,87,.12)!important;
}


/* TOPNITURE V10.48 — clean saved-product images inside edit forms */
.product-existing-media-preview{
  margin-top:12px!important;
  padding:12px!important;
  border:1px solid #dfe8ec!important;
  border-radius:12px!important;
  background:#f8fafb!important;
}
.product-existing-media-head.clean{
  margin:0 0 10px!important;
  padding-bottom:9px;
  border-bottom:1px solid #e3eaee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.product-existing-media-head.clean>div{min-width:0}
.product-existing-media-head.clean b{display:block;font-size:11px!important;color:var(--navy)!important}
.product-existing-media-head.clean small{display:block;margin-top:2px;font-size:8px!important;color:var(--muted)!important}
.saved-product-media-count{
  flex:0 0 auto;
  border-radius:999px;
  padding:4px 8px;
  background:#eaf1f5;
  color:var(--navy);
  font-size:8px;
  font-weight:800;
}
.saved-product-media-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(230px,.85fr);
  gap:12px;
  align-items:start;
}
.saved-product-main-section,.saved-product-reference-section{min-width:0}
.saved-product-media-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.saved-product-media-section-title b{font-size:9px;color:#21495d}
.saved-product-media-section-title small{font-size:7px;color:#81939c}
.saved-product-media-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid #dce6eb;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  transition:.15s ease;
}
.saved-product-media-card:hover{
  transform:translateY(-1px);
  border-color:#c4d6df;
  box-shadow:0 8px 20px rgba(8,57,87,.09);
}
.saved-product-media-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background:#f2f5f6;
  overflow:hidden;
}
.saved-product-media-card.main .saved-product-media-image{height:230px}
.saved-product-media-card.reference .saved-product-media-image{height:95px}
.saved-product-media-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block;
  background:#f4f6f7!important;
}
.saved-product-media-zoom{
  position:absolute;
  top:6px;
  left:6px;
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(8,57,87,.82);
  color:#fff;
  font-size:12px;
}
.saved-product-media-meta{padding:6px 8px;border-top:1px solid #edf1f3}
.saved-product-media-meta b{display:block;font-size:8px;color:var(--navy)}
.saved-product-reference-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.saved-product-media-file{
  height:95px;
  display:grid;
  place-items:center;
  background:#eef3f5;
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}
.saved-product-media-card.main.file .saved-product-media-file{height:230px}
.saved-product-media-none{
  height:230px;
  border:1px dashed #d6e1e6;
  border-radius:10px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:12px;
  color:#8a9aa2;
  background:#fff;
  font-size:8px;
}
.saved-product-media-none.compact{height:95px}
.product-existing-media-preview .saved-product-media-card img{
  object-fit:contain!important;
  height:100%!important;
  max-height:none!important;
}
@media(max-width:900px){
  .saved-product-media-layout{grid-template-columns:1fr}
  .saved-product-reference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:650px){
  .product-existing-media-preview{padding:10px!important}
  .saved-product-media-layout{display:block}
  .saved-product-reference-section{margin-top:12px}
  .saved-product-media-card.main .saved-product-media-image{height:210px}
  .saved-product-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .saved-product-media-card.reference .saved-product-media-image,
  .saved-product-media-file{height:105px}
}


/* TOPNITURE V10.49 — Preparation Contract Reference cleanup */
.prep-contract-card-clean{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
@media(max-width:650px){
  .prep-contract-card-clean{
    grid-template-columns:1fr 1fr!important;
  }
}


/* ==========================================================
   TOPNITURE V10.50 — Preparation Workflow + Cutting List
   ========================================================== */

/* Work-order attachments now live in the left Contract Reference pane. */
.prep-workorder-media-left .media-head{
  display:none!important;
}
.prep-workorder-media-left .media-section{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.prep-workorder-media-left .media-upload-row{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
}
.prep-workorder-media-left .media-upload-row>*{
  width:100%!important;
  min-width:0!important;
}
.prep-workorder-media-left .media-gallery{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
.prep-workorder-media-left .media-card{
  min-width:0!important;
}
.prep-workorder-media-left .media-thumb{
  height:100px!important;
  object-fit:contain!important;
  background:#f3f6f7!important;
}

.cutting-list-section{
  border-color:#cbdde6!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbfc 100%)!important;
}
.cutting-list-head{
  border-bottom:1px solid #e3ecef;
  padding-bottom:10px;
  margin-bottom:12px;
}
.cutting-dashboard{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.cutting-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.cutting-kpis>div{
  border:1px solid #dbe6eb;
  border-radius:11px;
  background:#fff;
  padding:10px;
}
.cutting-kpis span{
  display:block;
  color:var(--muted);
  font-size:8px;
}
.cutting-kpis b{
  display:block;
  margin-top:3px;
  color:var(--navy);
  font-size:16px;
}
.cutting-warning{
  padding:9px 11px;
  border-radius:9px;
  border:1px solid #efc88e;
  background:#fff8eb;
  color:#81591b;
  font-size:9px;
  line-height:1.5;
}
.cutting-empty{
  min-height:180px;
  border:1px dashed #cbdbe3;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  color:#70858f;
  padding:25px;
}
.cutting-empty b{color:var(--navy);font-size:13px}
.cutting-empty span{font-size:9px}
.cutting-empty small{font-size:8px}

.cutting-config-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.cutting-config-head>div:first-child b{
  display:block;
  color:var(--navy);
  font-size:11px;
}
.cutting-config-head>div:first-child small{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:2px;
}
.cutting-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.cutting-actions button{
  font-size:9px!important;
  padding:8px 10px!important;
}
.cutting-material-configs{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cutting-material-config{
  display:grid;
  grid-template-columns:minmax(140px,1.15fr) repeat(5,minmax(105px,.8fr));
  gap:7px;
  align-items:end;
  border:1px solid #dce7ec;
  border-radius:10px;
  background:#fff;
  padding:9px;
}
.cutting-material-name b{display:block;color:var(--navy);font-size:10px}
.cutting-material-name small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.cutting-material-config label{
  display:flex;
  flex-direction:column;
  gap:3px;
  color:#6c808a;
  font-size:7px;
}
.cutting-material-config input{
  width:100%;
  min-width:0;
  height:34px;
  border:1px solid #d6e1e6;
  border-radius:7px;
  padding:0 7px;
  background:#fff;
  color:#173746;
  font:inherit;
  font-size:9px;
}

.cutting-summary-table-wrap{
  overflow:auto;
  border:1px solid #dce6eb;
  border-radius:10px;
  background:#fff;
}
.cutting-summary-table{
  width:100%;
  border-collapse:collapse;
  min-width:780px;
}
.cutting-summary-table th,
.cutting-summary-table td{
  padding:8px;
  border-bottom:1px solid #edf1f3;
  text-align:right;
  font-size:8px;
}
.cutting-summary-table th{
  background:#eef4f7;
  color:var(--navy);
}
.cutting-board-groups{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cutting-material-boards{
  border-top:2px solid #083957;
  padding-top:9px;
}
.cutting-material-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.cutting-material-board-head h4{margin:0;color:var(--navy);font-size:12px}
.cutting-material-board-head p{margin:2px 0 0;color:var(--muted);font-size:8px}
.cutting-material-board-head strong{color:var(--orange);font-size:11px}
.cutting-board-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.cutting-board-card{
  border:1px solid #d7e2e7;
  border-radius:10px;
  background:#fff;
  padding:8px;
  min-width:0;
}
.cutting-board-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.cutting-board-head b{display:block;color:var(--navy);font-size:9px}
.cutting-board-head small{display:block;color:var(--muted);font-size:7px}
.cutting-board-head>span{
  color:#357257;
  background:#e9f7ef;
  border-radius:999px;
  padding:4px 6px;
  font-size:7px;
  font-weight:800;
}
.cutting-board-canvas{
  position:relative;
  width:100%;
  aspect-ratio:var(--board-ratio);
  min-height:210px;
  max-height:430px;
  border:2px solid #083957;
  background:
    linear-gradient(90deg,rgba(8,57,87,.025) 1px,transparent 1px),
    linear-gradient(rgba(8,57,87,.025) 1px,transparent 1px),
    #f7f9fa;
  background-size:20px 20px;
  overflow:hidden;
}
.cutting-piece{
  position:absolute;
  border:1.5px solid #ef6724;
  background:rgba(239,103,36,.12);
  overflow:hidden;
  padding:2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:2px;
  min-height:2px;
}
.cutting-piece:nth-child(even){
  background:rgba(8,57,87,.10);
  border-color:#527c92;
}
.cutting-piece b{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#083957;
  font-size:7px;
  line-height:1.1;
}
.cutting-piece small{
  color:#536b77;
  font-size:6px;
  line-height:1.1;
}
.cutting-oversize{
  margin-top:7px;
  padding:7px 9px;
  border-radius:7px;
  background:#feecef;
  color:#a33b48;
  font-size:8px;
}
.takeoff-head-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.takeoff-estimated-cost b{
  display:block;
  color:#24684a;
  font-size:9px;
  white-space:nowrap;
}
.takeoff-estimated-cost small{
  display:block;
  color:#6d8278;
  font-size:7px;
}
.cutting-generated-takeoff{
  background:#fbfefc;
}
.cutting-cost-hint{
  display:block;
  margin-top:4px;
  color:#397052;
  font-size:8px;
}

@media(max-width:1100px){
  .cutting-material-config{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .cutting-material-name{grid-column:1/-1}
}

@media(max-width:700px){
  .prep-workorder-media-left .media-gallery{
    grid-template-columns:1fr!important;
  }
  .cutting-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cutting-config-head{
    flex-direction:column;
    align-items:stretch;
  }
  .cutting-actions{
    justify-content:flex-start;
  }
  .cutting-material-config{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cutting-board-grid{
    grid-template-columns:1fr;
  }
  .cutting-board-canvas{
    min-height:180px;
  }
}


/* ==========================================================
   TOPNITURE V10.51 — CM Grain Cutting Layout + Excel UX
   ========================================================== */

/* Cutting sheet inspired by the supplied production layout:
   white parts, green cut edges, hatched unused board. */
.reference-cutting-card{
  background:#fff!important;
  border:1px solid #d3d8da!important;
  border-radius:4px!important;
  padding:10px 12px 8px!important;
}
.reference-board-wrap{
  position:relative;
  padding:26px 0 0 32px;
  direction:ltr;
}
.reference-board-dim-top{
  position:absolute;
  top:2px;
  left:32px;
  right:0;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  color:#111;
}
.reference-board-dim-left{
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-25%) rotate(-90deg);
  transform-origin:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  color:#111;
}
.reference-board-grain{
  position:absolute;
  top:4px;
  right:8px;
  color:#47724d;
  font-size:8px;
  font-weight:700;
}
.reference-cutting-board{
  min-height:290px!important;
  max-height:none!important;
  border:1px solid #333!important;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      rgba(45,45,45,.42) 6.5px,
      rgba(45,45,45,.42) 7.5px
    ),
    #fafafa!important;
  overflow:hidden!important;
}
.reference-cut-piece{
  border:1.5px solid #3a9a47!important;
  background:#fff!important;
  color:#111!important;
  padding:0!important;
  overflow:hidden!important;
}
.reference-cut-piece:nth-child(even){
  background:#fff!important;
  border-color:#3a9a47!important;
}
.cut-piece-label{
  position:absolute;
  inset:16px 13px 12px 13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  direction:rtl;
}
.cut-piece-label b{
  width:100%;
  color:#111!important;
  font-family:Tahoma,Arial,sans-serif;
  font-size:8px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cut-piece-label small{
  margin-top:2px;
  color:#111!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:7px!important;
}
.cut-piece-label em{
  margin-top:3px;
  color:#246d31;
  font-size:7px;
  font-style:normal;
  white-space:nowrap;
}
.cut-piece-dim{
  position:absolute;
  z-index:2;
  color:#111;
  background:rgba(255,255,255,.92);
  font-family:Georgia,"Times New Roman",serif;
  font-size:7px;
  line-height:1;
  padding:1px 2px;
  pointer-events:none;
}
.cut-piece-dim-x{
  top:2px;
  left:50%;
  transform:translateX(-50%);
}
.cut-piece-dim-y{
  left:2px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
}
.reference-board-footer{
  margin-top:5px;
  text-align:center;
  direction:ltr;
  color:#222;
  font-family:Georgia,"Times New Roman",serif;
  font-size:9px;
}
.reference-board-footer span{
  margin:0 3px;
}
.reference-board-footer b{
  font-weight:500;
}

/* Excel-like toolbar */
.excel-toolbar{
  align-items:center!important;
}
.excel-toolbar-separator{
  width:1px;
  align-self:stretch;
  min-height:30px;
  background:#d5e0e5;
  margin:0 2px;
}
.excel-toolbar-btn.icon{
  min-width:35px!important;
  padding-inline:8px!important;
  font-size:17px!important;
  font-weight:700;
}
.excel-shortcut-help{
  background:#f4f8fa;
  border-top:1px solid #e0e8ec;
}
.excel-grain-help{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  padding:7px 10px;
  border-top:1px solid #e3eaee;
  background:#fffdf8;
  color:#617681;
  font-size:8px;
}
.excel-grain-help>b{
  color:var(--navy);
}
.excel-grain-help span{
  border-radius:999px;
  background:#f2f5f6;
  padding:4px 7px;
}
.excel-grain-help strong{
  color:#2d7c3b;
}

/* More desktop-Excel-like focus/selection */
#detailingSpreadsheetGrid .excel-cell{
  cursor:cell!important;
}
#detailingSpreadsheetGrid .excel-cell.is-active{
  box-shadow:inset 0 0 0 2px #217346!important;
}
#detailingSpreadsheetGrid .excel-cell.is-selected:not(.is-active){
  background:rgba(33,115,70,.08)!important;
}
#detailingSpreadsheetGrid .excel-column-header,
#detailingSpreadsheetGrid .excel-row-header{
  user-select:none;
}

/* Cutting config now uses cm values, which are shorter. */
.cutting-material-config{
  grid-template-columns:minmax(130px,1fr) repeat(5,minmax(95px,.72fr))!important;
}

@media(max-width:700px){
  .reference-board-wrap{
    padding-left:25px;
  }
  .reference-cutting-board{
    min-height:210px!important;
  }
  .cut-piece-label{
    inset:13px 7px 8px 7px;
  }
  .cut-piece-label b{font-size:7px!important}
  .cut-piece-label small,
  .cut-piece-label em,
  .cut-piece-dim{font-size:6px!important}
  .reference-board-footer{font-size:7px}
  .excel-toolbar-separator{display:none}
}


/* ==========================================================
   TOPNITURE V10.52 — Structured Detailing (Excel removed)
   ========================================================== */
.structured-detailing-section{
  background:#fbfcfd!important;
}
.structured-detailing-head{
  align-items:flex-end!important;
}
.structured-detail-head-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.structured-detail-save-state{
  border-radius:999px;
  padding:5px 8px;
  font-size:8px;
  font-weight:800;
}
.structured-detail-save-state.saved{
  background:#eaf7ef;
  color:#277347;
}
.structured-detail-save-state.unsaved{
  background:#fff3e8;
  color:#b45c16;
}
.structured-detail-legend{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 11px;
  padding:9px 11px;
  border:1px solid #dde7eb;
  border-radius:10px;
  background:#fff;
}
.structured-detail-legend>div{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-items:center;
  font-size:8px;
}
.structured-detail-legend b{color:var(--navy)}
.structured-detail-legend span{
  padding:3px 6px;
  border-radius:999px;
  background:#f1f5f7;
  color:#506975;
}
.structured-detail-legend small{
  color:#7c8d95;
  font-size:8px;
}
.structured-detail-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.structured-detail-row{
  border:1px solid #d7e3e9;
  border-inline-start:4px solid var(--orange);
  border-radius:12px;
  background:#fff;
  padding:10px;
  box-shadow:0 6px 18px rgba(8,57,87,.045);
}
.structured-detail-row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
  padding-bottom:8px;
  border-bottom:1px solid #edf1f3;
}
.structured-detail-row-head>div:first-child{
  display:flex;
  align-items:center;
  gap:8px;
}
.detail-row-number{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  flex:0 0 29px;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  font-size:9px;
  font-weight:800;
}
.structured-detail-row-head b{
  display:block;
  color:var(--navy);
  font-size:10px;
}
.structured-detail-row-head small{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-top:1px;
}
.structured-detail-row-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.structured-detail-grid{
  display:grid;
  grid-template-columns:minmax(170px,1.4fr) 105px 105px 80px minmax(150px,1fr) 135px 150px;
  gap:8px;
  align-items:start;
}
.detail-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.detail-field>span{
  color:#5c7380;
  font-size:8px;
  font-weight:700;
}
.detail-field>span small{
  color:#9a6e49;
  font-size:7px;
}
.detail-field.notes{
  grid-column:1/-1;
}
.detail-field.notes .textarea{
  min-height:56px;
  resize:vertical;
}
.grain-choice{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.grain-choice-btn{
  min-height:40px;
  border:1px solid #d7e2e7;
  border-radius:8px;
  background:#f7f9fa;
  color:#58717d;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.grain-choice-btn span{
  font-size:18px;
  line-height:1;
}
.grain-choice-btn small{
  font-size:7px;
  font-weight:800;
}
.grain-choice-btn.active{
  border-color:#2e8b45;
  background:#edf8f0;
  color:#1d6d34;
  box-shadow:inset 0 0 0 1px #2e8b45;
}
.edge-banding-picker{
  position:relative;
  width:108px;
  height:62px;
  margin:auto;
}
.edge-piece-preview{
  position:absolute;
  width:44px;
  height:28px;
  left:32px;
  top:17px;
  border:1px solid #b8c9d1;
  background:#f7fafb;
  border-radius:3px;
}
.edge-btn{
  position:absolute;
  width:25px;
  height:25px;
  border-radius:7px;
  border:1px solid #d8e2e7;
  background:#f4f7f8;
  color:#69808b;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
  z-index:2;
}
.edge-btn.top{left:42px;top:-4px}
.edge-btn.down{left:42px;bottom:-4px}
.edge-btn.left{left:3px;top:19px}
.edge-btn.right{right:3px;top:19px}
.edge-btn.active{
  background:#e6f6eb;
  border-color:#2d8a44;
  color:#17692e;
  box-shadow:0 0 0 1px #2d8a44;
}
.structured-detail-empty{
  min-height:150px;
  border:1px dashed #cad9e0;
  border-radius:11px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  text-align:center;
  padding:20px;
}
.structured-detail-empty b{
  color:var(--navy);
  font-size:12px;
}
.structured-detail-empty span{
  color:var(--muted);
  font-size:8px;
}

/* Thick green overlay = edge banding on the finished piece. */
.cut-edge-band{
  position:absolute;
  z-index:5;
  display:block;
  background:#08772e;
  pointer-events:none;
}
.cut-edge-band.top,
.cut-edge-band.bottom{
  left:0;
  right:0;
  height:4px;
}
.cut-edge-band.top{top:0}
.cut-edge-band.bottom{bottom:0}
.cut-edge-band.left,
.cut-edge-band.right{
  top:0;
  bottom:0;
  width:4px;
}
.cut-edge-band.left{left:0}
.cut-edge-band.right{right:0}
.cut-edge-letters{
  margin-top:2px;
  color:#0a6e2c;
  font-size:6px;
  font-weight:900;
}
.cut-piece-note{
  margin-top:2px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#555;
  font-size:6px;
}

@media(max-width:1250px){
  .structured-detail-grid{
    grid-template-columns:minmax(180px,1.4fr) 100px 100px 75px minmax(140px,1fr);
  }
}
@media(max-width:800px){
  .structured-detailing-head{
    align-items:stretch!important;
    flex-direction:column;
  }
  .structured-detail-head-actions{
    justify-content:flex-start;
  }
  .structured-detail-row-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .structured-detail-grid{
    grid-template-columns:1fr 1fr;
  }
  .detail-field.description,
  .detail-field.material,
  .detail-field.notes{
    grid-column:1/-1;
  }
}
@media(max-width:480px){
  .structured-detail-grid{
    grid-template-columns:1fr;
  }
  .detail-field,
  .detail-field.description,
  .detail-field.material,
  .detail-field.notes,
  .detail-field.grain,
  .detail-field.edge{
    grid-column:1!important;
  }
  .edge-banding-picker{
    margin-inline-start:0;
  }
}


/* ==========================================================
   TOPNITURE V10.53 — Excel Headings + Edge/Groove Geometry
   ========================================================== */
.excel-heading-grid{
  grid-template-columns:minmax(170px,1.35fr) 100px 100px 82px minmax(140px,1fr) 145px!important;
}
.full-technical-field{
  grid-column:span 3;
}
.detail-field.notes{
  grid-column:1/-1!important;
}
.edge-banding-controls,
.groove-side-controls{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.edge-heading-btn,
.groove-side-btn{
  min-height:46px;
  border:1px solid #d7e2e7;
  border-radius:8px;
  background:#f7f9fa;
  color:#5c7380;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.edge-heading-btn b{
  font-size:9px;
  color:inherit;
}
.edge-heading-btn small,
.groove-side-btn small{
  font-size:6.5px;
  color:inherit;
}
.edge-heading-btn.active{
  border-color:#16823a;
  background:#eaf7ef;
  color:#126a30;
  box-shadow:inset 0 0 0 1px #16823a;
}
.groove-side-btn span{
  font-size:10px;
  font-weight:900;
}
.groove-side-btn.active{
  border-color:#7b4a9e;
  background:#f3ecf8;
  color:#673a87;
  box-shadow:inset 0 0 0 1px #7b4a9e;
}

/* Edge banding is the actual outside edge. */
.cut-edge-band{
  overflow:visible!important;
}
.cut-edge-band>span{
  position:absolute;
  z-index:7;
  min-width:15px;
  height:15px;
  padding:0 3px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#08772e;
  color:#fff;
  font:700 8px/1 Arial,sans-serif;
}
.cut-edge-band.top>span{
  left:50%;
  top:1px;
  transform:translate(-50%,-50%);
}
.cut-edge-band.bottom>span{
  left:50%;
  bottom:1px;
  transform:translate(-50%,50%);
}
.cut-edge-band.left>span{
  left:1px;
  top:50%;
  transform:translate(-50%,-50%);
}
.cut-edge-band.right>span{
  right:1px;
  top:50%;
  transform:translate(50%,-50%);
}

/* Groove / مفحار: dashed inner operation line, never confused with banding. */
.cut-groove-mark{
  position:absolute;
  z-index:4;
  pointer-events:none;
  border-color:#7b4a9e;
  border-style:dashed;
}
.cut-groove-mark.top,
.cut-groove-mark.bottom{
  left:4px;
  right:4px;
  height:0;
  border-width:2px 0 0;
}
.cut-groove-mark.top{top:10px}
.cut-groove-mark.bottom{bottom:10px}
.cut-groove-mark.left,
.cut-groove-mark.right{
  top:4px;
  bottom:4px;
  width:0;
  border-width:0 0 0 2px;
}
.cut-groove-mark.left{left:10px}
.cut-groove-mark.right{right:10px}
.cut-groove-mark>span{
  position:absolute;
  color:#7b4a9e;
  background:rgba(255,255,255,.9);
  font:700 7px Arial,sans-serif;
  padding:0 2px;
}
.cut-groove-mark.top>span,
.cut-groove-mark.bottom>span{
  left:50%;
  transform:translateX(-50%);
  top:-10px;
}
.cut-groove-mark.left>span,
.cut-groove-mark.right>span{
  top:50%;
  transform:translateY(-50%);
  left:3px;
}

@media(max-width:1050px){
  .excel-heading-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .full-technical-field{
    grid-column:1/-1;
  }
  .detail-field.description,
  .detail-field.material,
  .detail-field.notes{
    grid-column:1/-1!important;
  }
}
@media(max-width:650px){
  .excel-heading-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .full-technical-field,
  .detail-field.description,
  .detail-field.material,
  .detail-field.notes{
    grid-column:1/-1!important;
  }
  .edge-banding-controls,
  .groove-side-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ==========================================================
   TOPNITURE V10.54 — Excel Line Detailing
   One header row + compact lined rows, no cards.
   ========================================================== */
.structured-detailing-section{
  overflow:hidden;
}
.structured-detail-legend.compact{
  flex-direction:row!important;
  align-items:center;
  flex-wrap:wrap;
  gap:5px!important;
  padding:6px 8px!important;
  margin-bottom:8px!important;
  border-radius:6px!important;
  background:#f7f9fa!important;
}
.structured-detail-legend.compact span{
  padding:2px 6px!important;
  font-size:7px!important;
  background:#fff!important;
  border:1px solid #e1e8ec;
}

.structured-detail-rows{
  display:block!important;
  overflow-x:auto;
  overflow-y:visible;
  border:1px solid #bfcdd4;
  border-radius:6px;
  background:#fff;
}
.structured-excel-sheet{
  min-width:1420px;
  width:100%;
  background:#fff;
}
.structured-excel-grid{
  display:grid;
  grid-template-columns:
    42px
    minmax(180px,1.6fr)
    85px
    85px
    72px
    minmax(150px,1.25fr)
    82px
    58px
    58px
    64px
    58px
    132px
    minmax(190px,1.5fr)
    76px
    78px;
}
.structured-excel-header{
  position:sticky;
  top:0;
  z-index:6;
  background:#e9eff2;
  border-bottom:1px solid #9fb2bc;
}
.sheet-head{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 5px;
  border-inline-end:1px solid #b9c8cf;
  color:#183b4c;
  font-size:8px;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}
.sheet-head.description,
.sheet-head.material,
.sheet-head.label{
  justify-content:flex-start;
  padding-inline:8px;
}
.sheet-head small{
  margin-inline-start:2px;
  color:#7f9098;
  font-size:6px;
}
.structured-excel-body{
  display:block;
}
.structured-excel-row{
  min-height:39px;
  border-bottom:1px solid #d4dee3;
  background:#fff;
}
.structured-excel-row:last-child{
  border-bottom:0;
}
.structured-excel-row:hover{
  background:#fbfcfd;
}
.sheet-cell{
  min-width:0;
  min-height:39px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  border-inline-end:1px solid #d4dee3;
  padding:0;
  background:transparent;
}
.sheet-cell.rowno{
  align-items:center;
  background:#f2f5f6;
  color:#617680;
  font-size:8px;
  font-weight:800;
}
.sheet-input{
  width:100%;
  min-width:0;
  height:38px;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0 7px!important;
  color:#173746;
  font-size:8.5px!important;
}
.sheet-input:focus{
  background:#fff!important;
  box-shadow:inset 0 0 0 2px #217346!important;
}
.sheet-input.number{
  text-align:center;
}
.line-grain-choice{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.line-grain-choice button{
  border:0;
  border-inline-end:1px solid #d4dee3;
  background:transparent;
  color:#80929a;
  font-size:17px;
  cursor:pointer;
}
.line-grain-choice button:last-child{
  border-inline-end:0;
}
.line-grain-choice button.active{
  background:#e7f5ec;
  color:#176c33;
  font-weight:900;
}
.line-edge-btn{
  width:100%;
  min-height:38px;
  border:0;
  background:transparent;
  color:#9aa9b0;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}
.line-edge-btn.active{
  background:#e6f5eb;
  color:#116a30;
  box-shadow:inset 0 -3px 0 #16823a;
}
.line-groove-choice{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.line-groove-choice button{
  min-width:0;
  border:0;
  border-inline-end:1px solid #d4dee3;
  background:transparent;
  color:#9a9aa4;
  font-size:7px;
  font-weight:900;
  cursor:pointer;
}
.line-groove-choice button:last-child{
  border-inline-end:0;
}
.line-groove-choice button.active{
  background:#f2eaf7;
  color:#70418e;
  box-shadow:inset 0 -3px 0 #7b4a9e;
}
.sheet-action-btn{
  width:100%;
  min-height:38px;
  border:0;
  background:transparent;
  color:#355b6d;
  font-size:8px;
  cursor:pointer;
}
.sheet-action-btn:hover{
  background:#eef4f7;
}
.sheet-action-btn.image{
  white-space:nowrap;
}
.line-actions{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.line-actions .sheet-action-btn{
  border-inline-end:1px solid #d4dee3;
  font-size:13px;
}
.line-actions .sheet-action-btn:last-child{
  border-inline-end:0;
}
.sheet-action-btn.danger{
  color:#b24751;
}
.sheet-action-btn.danger:hover{
  background:#fff0f1;
}
.structured-excel-row .sheet-cell:last-child,
.structured-excel-header .sheet-head:last-child{
  border-inline-end:0;
}

/* Hide old card/grid styling when using V10.54 rows. */
.structured-excel-row.structured-excel-grid{
  border-inline-start:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.structured-detail-row{
  box-shadow:none;
}

/* Preserve spreadsheet behaviour on small screens:
   horizontal scroll instead of turning every row back into stacked cards. */
@media(max-width:800px){
  .structured-detail-rows{
    margin-inline:0;
    border-radius:5px;
  }
  .structured-excel-sheet{
    min-width:1320px;
  }
  .structured-detailing-head{
    gap:8px;
  }
}


/* ==========================================================
   TOPNITURE V10.55 — Cutting marks + keyboard + drafts
   ========================================================== */

/* Auto grain is the neutral/default state. */
.line-grain-choice.three-state{
  grid-template-columns:repeat(3,1fr)!important;
}
.line-grain-choice button.auto.active{
  background:#eef3f6!important;
  color:#294e61!important;
}

/* The production drawing must stay visually empty in the middle. */
.clean-production-piece{
  overflow:visible!important;
  background:#fff!important;
}
.clean-production-piece .cut-piece-label{
  display:none!important;
}
.production-cutting-board{
  overflow:visible!important;
}

/* Clear dimensions at the outside edge, not in the center. */
.clean-production-piece .cut-piece-dim{
  z-index:20!important;
  min-width:26px;
  color:#111!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(0,0,0,.13);
  border-radius:3px;
  font-family:Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:15px!important;
  padding:0 4px!important;
  text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.clean-production-piece .cut-piece-dim-x{
  top:-17px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
}
.clean-production-piece .cut-piece-dim-y{
  left:-21px!important;
  top:50%!important;
  transform:translateY(-50%) rotate(-90deg)!important;
}

/* Banding: thick green line + visible letter ON the edge. */
.clean-production-piece .cut-edge-band{
  z-index:16!important;
  background:#08772e!important;
  overflow:visible!important;
}
.clean-production-piece .cut-edge-band.top,
.clean-production-piece .cut-edge-band.bottom{
  height:5px!important;
}
.clean-production-piece .cut-edge-band.left,
.clean-production-piece .cut-edge-band.right{
  width:5px!important;
}
.clean-production-piece .cut-edge-band>span{
  z-index:22!important;
  min-width:16px!important;
  height:16px!important;
  border-radius:3px!important;
  background:#08772e!important;
  color:#fff!important;
  font:800 9px/16px Arial,sans-serif!important;
  padding:0 3px!important;
  box-shadow:0 0 0 2px #fff;
}
.clean-production-piece .cut-edge-band.top>span{
  top:7px!important;
  transform:translate(-50%,0)!important;
}
.clean-production-piece .cut-edge-band.bottom>span{
  bottom:7px!important;
  transform:translate(-50%,0)!important;
}
.clean-production-piece .cut-edge-band.left>span{
  left:7px!important;
  transform:translate(0,-50%)!important;
}
.clean-production-piece .cut-edge-band.right>span{
  right:7px!important;
  transform:translate(0,-50%)!important;
}

/* Groove: strong dashed purple machining line inside the selected side. */
.clean-production-piece .cut-groove-mark{
  z-index:14!important;
  border-color:#7b3fa0!important;
  opacity:1!important;
}
.clean-production-piece .cut-groove-mark.top,
.clean-production-piece .cut-groove-mark.bottom{
  left:7px!important;
  right:7px!important;
  border-width:3px 0 0!important;
}
.clean-production-piece .cut-groove-mark.top{top:13px!important}
.clean-production-piece .cut-groove-mark.bottom{bottom:13px!important}
.clean-production-piece .cut-groove-mark.left,
.clean-production-piece .cut-groove-mark.right{
  top:7px!important;
  bottom:7px!important;
  border-width:0 0 0 3px!important;
}
.clean-production-piece .cut-groove-mark.left{left:13px!important}
.clean-production-piece .cut-groove-mark.right{right:13px!important}
.clean-production-piece .cut-groove-mark>span{
  z-index:20!important;
  color:#fff!important;
  background:#7b3fa0!important;
  border-radius:3px;
  min-width:14px;
  height:14px;
  line-height:14px;
  text-align:center;
  font:800 8px/14px Arial,sans-serif!important;
  padding:0 2px!important;
}
.clean-production-piece .cut-groove-mark.top>span,
.clean-production-piece .cut-groove-mark.bottom>span{
  top:-8px!important;
}
.clean-production-piece .cut-groove-mark.left>span,
.clean-production-piece .cut-groove-mark.right>span{
  left:-7px!important;
}

/* Keyboard focus is unmistakable while moving with arrows. */
.structured-excel-row .sheet-input:focus,
.structured-excel-row button:focus{
  outline:none!important;
  box-shadow:inset 0 0 0 2px #217346!important;
  background:#f4fbf7!important;
  position:relative;
  z-index:3;
}

@media(max-width:700px){
  .clean-production-piece .cut-piece-dim{
    font-size:8px!important;
    min-width:22px;
    line-height:13px!important;
  }
  .clean-production-piece .cut-piece-dim-x{top:-15px!important}
  .clean-production-piece .cut-piece-dim-y{left:-18px!important}
}


/* ==========================================================
   TOPNITURE V10.56 — Explicit selection + reference final sheet
   ========================================================== */

/* Strong, unmistakable selected state. */
.line-grain-choice.three-state button{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  min-height:38px;
}
.line-grain-choice.three-state button span{
  font-size:15px;
  line-height:15px;
}
.line-grain-choice.three-state button small{
  font-size:5.5px;
  line-height:8px;
}
.line-grain-choice.three-state button.active{
  background:#176c33!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #0f5628!important;
}
.line-grain-choice.three-state button.active.auto{
  background:#294e61!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #173847!important;
}
.line-grain-choice.three-state button.active::after,
.line-edge-btn.active::after,
.line-groove-choice button.active::after{
  content:"✓";
  position:absolute;
  top:1px;
  right:2px;
  font-size:7px;
  font-weight:900;
  line-height:1;
}
.line-edge-btn,
.line-groove-choice button{
  position:relative;
}
.line-edge-btn.active{
  background:#0b7730!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #075b24!important;
}
.line-groove-choice button.active{
  background:#71458d!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #57336f!important;
}

/* FINAL CUTTING SHEET: intentionally mirrors the supplied reference. */
.final-reference-card{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  padding:2px 4px 0!important;
}
.final-reference-card>.cutting-board-head{
  display:none!important;
}
.final-reference-wrap{
  padding:20px 0 0 28px!important;
}
.final-reference-board{
  min-height:320px!important;
  max-height:none!important;
  overflow:hidden!important;
  border:1px solid #333!important;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      rgba(40,40,40,.48) 6.5px,
      rgba(40,40,40,.48) 7.3px
    ),
    #fbfbfb!important;
}
.final-reference-piece{
  position:absolute;
  overflow:hidden!important;
  padding:0!important;
  background:#fff!important;
  border:1.4px solid #3a9a47!important;
  box-sizing:border-box!important;
}
.reference-piece-dim{
  position:absolute;
  z-index:8;
  color:#111;
  background:rgba(255,255,255,.94);
  font-family:Georgia,"Times New Roman",serif;
  font-size:9px;
  font-weight:400;
  line-height:12px;
  padding:0 2px;
  pointer-events:none;
}
.reference-piece-dim.horizontal{
  top:3px;
  left:50%;
  transform:translateX(-50%);
}
.reference-piece-dim.vertical{
  left:3px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
}

/* Banding markers: no green bars. Show only the letter ش inside the piece,
   offset inward so it prints clearly and never collides with the dimension text. */
.final-band{
  position:absolute;
  z-index:14;
  display:block;
  background:transparent!important;
  pointer-events:none;
}
.final-band.top,.final-band.bottom{
  left:0;right:0;height:0;
}
.final-band.left,.final-band.right{
  top:0;bottom:0;width:0;
}
.final-band.top{top:0}
.final-band.bottom{bottom:0}
.final-band.left{left:0}
.final-band.right{right:0}
.final-band span{
  position:absolute;
  z-index:15;
  color:#111;
  background:rgba(255,255,255,.96);
  font:700 10px/13px Tahoma,Arial,sans-serif;
  min-width:14px;
  height:13px;
  text-align:center;
  padding:0 1px;
  border-radius:2px;
}
.final-band.top span{left:50%;top:18px;transform:translateX(-50%)}
.final-band.bottom span{left:50%;bottom:18px;transform:translateX(-50%)}
.final-band.left span{left:16px;top:50%;transform:translateY(-50%)}
.final-band.right span{right:16px;top:50%;transform:translateY(-50%)}

/* Move dimensions farther inside the piece to avoid overlap in print. */
.reference-piece-dim.horizontal{
  top:12px;
  left:50%;
  transform:translateX(-50%);
}
.reference-piece-dim.vertical{
  left:12px;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
}

/* Groove / مفحار: clean internal line only, with no symbol or text. */
.final-groove{
  position:absolute;
  z-index:12;
  display:block;
  pointer-events:none;
  border-color:#4e4e4e;
  border-style:solid;
}
.final-groove.top,.final-groove.bottom{
  left:8px;right:8px;height:0;border-width:1.6px 0 0;
}
.final-groove.left,.final-groove.right{
  top:8px;bottom:8px;width:0;border-width:0 0 0 1.6px;
}
.final-groove.top{top:10px}
.final-groove.bottom{bottom:10px}
.final-groove.left{left:10px}
.final-groove.right{right:10px}

.final-reference-footer{
  margin-top:3px!important;
  padding:0!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:9px!important;
  color:#111!important;
  text-align:center!important;
}
.final-reference-footer b{
  font-weight:400!important;
}

/* Keyboard navigation focus. */
.structured-excel-row .sheet-input:focus,
.structured-excel-row button:focus-visible{
  outline:none!important;
  box-shadow:inset 0 0 0 2px #217346!important;
  position:relative;
  z-index:5;
}

@media(max-width:700px){
  .final-reference-board{
    min-height:230px!important;
  }
  .reference-piece-dim{
    font-size:7px;
    line-height:10px;
  }
}


/* ==========================================================
   TOPNITURE V10.57 — Table direction + live selected states
   ========================================================== */

/* The technical sheet follows Excel's left-to-right column order,
   independent from the surrounding Arabic RTL application. */
.structured-excel-sheet,
.structured-excel-header,
.structured-excel-body,
.structured-excel-row,
.structured-excel-grid{
  direction:ltr!important;
}

.structured-excel-row .sheet-cell,
.structured-excel-header .sheet-head{
  direction:ltr!important;
}

.structured-excel-row .sheet-input{
  direction:ltr!important;
  unicode-bidi:plaintext;
}

/* Label/notes can contain Arabic; plaintext lets the browser choose
   the correct text direction without reversing the table columns. */
.structured-excel-row .sheet-cell.label .sheet-input{
  unicode-bidi:plaintext!important;
  text-align:start!important;
}

/* Selected controls are deliberately very strong:
   active state remains obvious even while another control has focus. */
.line-grain-choice.three-state button[aria-pressed="true"]{
  background:#176c33!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #0e5226,0 0 0 1px #fff!important;
  font-weight:900!important;
}
.line-grain-choice.three-state button[data-grain-mode="auto"][aria-pressed="true"]{
  background:#294e61!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #173847,0 0 0 1px #fff!important;
}
.line-edge-btn[aria-pressed="true"]{
  background:#08772e!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #075722!important;
}
.line-groove-choice button[aria-pressed="true"]{
  background:#70418e!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 2px #57336f!important;
}

/* Check marker is persistent, not only a focus effect. */
.line-grain-choice button[aria-pressed="true"]::after,
.line-edge-btn[aria-pressed="true"]::after,
.line-groove-choice button[aria-pressed="true"]::after{
  content:"✓"!important;
  position:absolute!important;
  top:2px!important;
  right:3px!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
}

/* Keep the Grid visually aligned: header and data rows share the exact
   same column definition and border model. */
.structured-excel-header,
.structured-excel-row{
  box-sizing:border-box!important;
}
.structured-excel-header .sheet-head,
.structured-excel-row .sheet-cell{
  box-sizing:border-box!important;
  border-right:1px solid #d4dee3!important;
  border-left:0!important;
}
.structured-excel-header .sheet-head:last-child,
.structured-excel-row .sheet-cell:last-child{
  border-right:0!important;
}


/* ==========================================================
   TOPNITURE V10.58 — Organized Fields (table removed)
   ========================================================== */
.structured-detail-rows{
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.detail-input-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.detail-input-card{
  border:1px solid #d5e1e7;
  border-radius:12px;
  background:#fff;
  padding:11px;
  box-shadow:0 5px 16px rgba(8,57,87,.045);
}
.detail-input-card:focus-within{
  border-color:#9ab7c6;
  box-shadow:0 7px 20px rgba(8,57,87,.08);
}
.detail-input-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:9px;
  margin-bottom:10px;
  border-bottom:1px solid #e8eef1;
}
.detail-piece-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.detail-piece-no{
  width:30px;
  height:30px;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:9px;
  font-weight:900;
}
.detail-piece-title b{
  display:block;
  color:var(--navy);
  font-size:10px;
}
.detail-piece-title small{
  display:block;
  color:var(--muted);
  font-size:7px;
  margin-top:1px;
}
.detail-piece-actions{
  display:flex;
  gap:5px;
}
.detail-icon-btn{
  min-width:34px;
  height:30px;
  border:1px solid #d7e2e7;
  border-radius:7px;
  background:#f7f9fa;
  color:#31586a;
  cursor:pointer;
  font-size:9px;
}
.detail-icon-btn:hover{
  background:#edf3f6;
}
.detail-icon-btn.danger{
  color:#a63d48;
}
.detail-icon-btn.danger:hover{
  background:#fff0f1;
}
.detail-fields-grid{
  display:grid;
  grid-template-columns:minmax(210px,1.7fr) 110px 110px 90px minmax(180px,1.25fr);
  gap:8px;
}
.detail-box{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.detail-box>span{
  color:#536d79;
  font-size:8px;
  font-weight:800;
}
.detail-box>span small{
  color:#8a9aa2;
  font-size:6.5px;
}
.detail-input{
  width:100%;
  height:37px;
  border:1px solid #d5e0e5!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#173746;
  padding:0 8px!important;
  font-size:9px!important;
  outline:0!important;
  box-shadow:none!important;
}
.detail-input.number{
  text-align:center;
}
.detail-input:focus{
  border-color:#217346!important;
  box-shadow:0 0 0 2px rgba(33,115,70,.14)!important;
}
.detail-technical-grid{
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(330px,1.2fr) minmax(330px,1.2fr);
  gap:8px;
  margin-top:9px;
}
.detail-technical-box{
  border:1px solid #dce6eb;
  border-radius:9px;
  background:#f9fbfc;
  padding:8px;
}
.detail-technical-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  margin-bottom:6px;
}
.detail-technical-title b{
  color:var(--navy);
  font-size:9px;
}
.detail-technical-title small{
  color:#84959e;
  font-size:6.5px;
}
.detail-choice-row{
  display:grid;
  gap:5px;
}
.detail-choice-row.grain-choice-row{
  grid-template-columns:repeat(3,1fr);
}
.detail-choice-row.four{
  grid-template-columns:repeat(4,1fr);
}
.detail-choice-btn{
  position:relative;
  min-height:42px;
  border:1px solid #d4e0e5;
  border-radius:7px;
  background:#fff;
  color:#607883;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.detail-choice-btn strong{
  font-size:12px;
  line-height:1;
}
.detail-choice-btn span{
  font-size:6.5px;
  line-height:1;
}
.detail-choice-btn:hover{
  background:#f0f5f7;
}
.detail-choice-btn[aria-pressed="true"]::after{
  content:"✓";
  position:absolute;
  top:3px;
  right:4px;
  color:#fff;
  font-size:7px;
  font-weight:900;
}
.detail-choice-btn.grain[aria-pressed="true"]{
  background:#176c33;
  border-color:#176c33;
  color:#fff;
}
.detail-choice-btn.grain.auto[aria-pressed="true"]{
  background:#294e61;
  border-color:#294e61;
}
.detail-choice-btn.edge[aria-pressed="true"]{
  background:#08772e;
  border-color:#08772e;
  color:#fff;
}
.detail-choice-btn.groove[aria-pressed="true"]{
  background:#70418e;
  border-color:#70418e;
  color:#fff;
}
.field-label{
  margin-top:9px;
}
.field-label .detail-input{
  height:39px;
}

/* Keyboard focus is visible on both inputs and option buttons. */
.detail-input-card [data-detail-focus="1"]:focus{
  outline:none!important;
  box-shadow:0 0 0 2px #217346!important;
  position:relative;
  z-index:3;
}

/* Old spreadsheet structures are no longer part of the current renderer. */
.structured-excel-sheet,
.structured-excel-header,
.structured-excel-body,
.structured-excel-row{
  display:none;
}

@media(max-width:1150px){
  .detail-fields-grid{
    grid-template-columns:minmax(200px,1.5fr) 100px 100px 85px;
  }
  .field-material{
    grid-column:1/-1;
  }
  .detail-technical-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:720px){
  .detail-input-card{
    padding:9px;
  }
  .detail-input-card-head{
    align-items:flex-start;
  }
  .detail-fields-grid{
    grid-template-columns:1fr 1fr;
  }
  .field-description,
  .field-material{
    grid-column:1/-1;
  }
  .detail-choice-row.four{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:460px){
  .detail-fields-grid{
    grid-template-columns:1fr;
  }
  .field-description,
  .field-material{
    grid-column:1;
  }
  .detail-choice-row.four{
    grid-template-columns:repeat(2,1fr);
  }
}


/* ==========================================================
   TOPNITURE V10.59 — Fixed Production Detailing Table
   Native HTML table = exact header/row alignment.
   ========================================================== */
.structured-detail-rows{
  display:block!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
}
.detail-table-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  border:1px solid #c8d5dc;
  border-radius:8px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.detail-production-table{
  width:100%;
  min-width:1480px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  direction:ltr;
  background:#fff;
}
.detail-production-table th,
.detail-production-table td{
  box-sizing:border-box;
  border-right:1px solid #d3dde2;
  border-bottom:1px solid #d3dde2;
  padding:0;
  vertical-align:middle;
}
.detail-production-table th:last-child,
.detail-production-table td:last-child{
  border-right:0;
}
.detail-production-table tbody tr:last-child td{
  border-bottom:0;
}
.detail-production-table thead th{
  height:38px;
  padding:4px 5px;
  background:#eaf0f3;
  color:#173e51;
  font-size:7.5px;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:8;
  box-shadow:0 1px 0 #b8c9d1;
}
.detail-production-table thead th small{
  font-size:6px;
  color:#7f929b;
}
.detail-production-table tbody td{
  height:44px;
  background:#fff;
}
.detail-production-table tbody tr:hover td{
  background:#fbfcfd;
}
.detail-production-table .c-no{width:42px}
.detail-production-table .c-desc{width:190px}
.detail-production-table .c-len{width:82px}
.detail-production-table .c-width{width:82px}
.detail-production-table .c-qty{width:72px}
.detail-production-table .c-material{width:145px}
.detail-production-table .c-grain{width:108px}
.detail-production-table .c-edge{width:54px}
.detail-production-table .c-bottom{width:62px}
.detail-production-table .c-groove{width:138px}
.detail-production-table .c-label{width:195px}
.detail-production-table .c-images{width:72px}
.detail-production-table .c-actions{width:76px}

.detail-row-number-cell{
  text-align:center;
  background:#f1f5f7!important;
  color:#5c7580;
  font-size:8px;
  font-weight:900;
}
.detail-table-input{
  display:block;
  width:100%;
  height:43px;
  margin:0;
  padding:0 7px;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#173746;
  font-size:8.5px;
  direction:ltr;
  text-align:left;
}
.detail-table-input.number{
  text-align:center;
}
.detail-table-input.label-input{
  unicode-bidi:plaintext;
}
.detail-table-input:focus{
  background:#f5fbf7!important;
  box-shadow:inset 0 0 0 2px #217346!important;
  position:relative;
  z-index:3;
}

/* Grain */
.table-grain-options{
  height:43px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.table-grain-options button{
  position:relative;
  border:0;
  border-right:1px solid #d3dde2;
  background:transparent;
  color:#7e9098;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
}
.table-grain-options button:last-child{
  border-right:0;
}
.table-grain-options button[aria-pressed="true"]{
  background:#176c33!important;
  color:#fff!important;
}
.table-grain-options button[data-grain-mode="auto"][aria-pressed="true"]{
  background:#294e61!important;
}
.table-grain-options button[aria-pressed="true"]::after{
  content:"✓";
  position:absolute;
  top:2px;
  right:2px;
  color:#fff;
  font-size:6px;
}

/* Edge banding: each side is independent/multi-select. */
.table-edge-toggle{
  position:relative;
  width:100%;
  height:43px;
  border:0;
  background:transparent;
  color:#86979e;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}
.table-edge-toggle[aria-pressed="true"]{
  background:#08772e!important;
  color:#fff!important;
}
.table-edge-toggle[aria-pressed="true"]::after{
  content:"✓";
  position:absolute;
  top:3px;
  right:3px;
  font-size:6px;
}

/* Groove: four independent options in ONE compact cell. */
.table-groove-options{
  height:43px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.table-groove-options button{
  position:relative;
  border:0;
  border-right:1px solid #d3dde2;
  background:transparent;
  color:#8c8292;
  font-size:7px;
  font-weight:900;
  cursor:pointer;
}
.table-groove-options button:last-child{
  border-right:0;
}
.table-groove-options button[aria-pressed="true"]{
  background:#70418e!important;
  color:#fff!important;
}
.table-groove-options button[aria-pressed="true"]::after{
  content:"✓";
  position:absolute;
  top:2px;
  right:2px;
  font-size:6px;
}

/* Small action cells */
.table-mini-action{
  width:100%;
  height:43px;
  border:0;
  background:transparent;
  color:#31596b;
  font-size:8px;
  cursor:pointer;
}
.table-mini-action:hover,
.table-mini-action:focus{
  background:#eef4f7!important;
}
.table-row-actions{
  height:43px;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.table-row-actions .table-mini-action{
  border-right:1px solid #d3dde2;
  font-size:12px;
}
.table-row-actions .table-mini-action:last-child{
  border-right:0;
}
.table-mini-action.danger{
  color:#a53f49;
}
.table-mini-action.danger:hover,
.table-mini-action.danger:focus{
  background:#fff0f1!important;
}

/* Keyboard focus on option cells */
.detail-production-table button[data-detail-focus="1"]:focus{
  outline:none!important;
  box-shadow:inset 0 0 0 2px #217346!important;
  z-index:4;
}

/* Old card renderer is no longer current. */
.detail-input-cards,
.detail-input-card{
  display:none!important;
}

@media(max-width:760px){
  .detail-production-table{
    min-width:1400px;
  }
  .detail-table-scroll{
    border-radius:6px;
  }
}


/* ==========================================================
   TOPNITURE V10.60 — Selection root-cause fix
   ========================================================== */
.detail-production-table button[aria-pressed="true"]{
  position:relative!important;
}
.table-grain-options button[aria-pressed="true"],
.table-edge-toggle[aria-pressed="true"],
.table-groove-options button[aria-pressed="true"]{
  color:#fff!important;
  font-weight:900!important;
}
.table-grain-options button[aria-pressed="true"]::after,
.table-edge-toggle[aria-pressed="true"]::after,
.table-groove-options button[aria-pressed="true"]::after{
  content:"✓"!important;
  position:absolute!important;
  top:2px!important;
  right:3px!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
}
.table-row-actions.three{
  grid-template-columns:repeat(3,1fr)!important;
}
.table-mini-action.reset-tech{
  color:#86611c;
}
.table-mini-action.reset-tech:hover,
.table-mini-action.reset-tech:focus{
  background:#fff7e8!important;
}


/* ==========================================================
   TOPNITURE V10.63 — Cutting List visual repair
   ========================================================== */
/* One production board per row. Two-column layout was compressing the
   240x120 board and causing dimensions/banding/groove to collide. */
.cutting-board-grid{
  grid-template-columns:1fr!important;
  gap:18px!important;
}
.final-reference-card{
  width:100%!important;
  max-width:none!important;
}
.final-reference-wrap{
  padding:24px 8px 4px 34px!important;
}
.final-reference-board{
  min-height:430px!important;
  overflow:hidden!important;
}

/* Dimensions: clearly inside the part, centered on the corresponding edge. */
.reference-piece-dim{
  z-index:20!important;
  color:#111!important;
  background:rgba(255,255,255,.96)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:11px!important;
  line-height:14px!important;
  padding:1px 3px!important;
  border-radius:2px;
  white-space:nowrap;
}
.reference-piece-dim.horizontal{
  top:10px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
}
.reference-piece-dim.vertical{
  left:10px!important;
  top:50%!important;
  transform:translateY(-50%) rotate(-90deg)!important;
}

/* Banding: ONLY the Arabic letter ش. No colored edge. Keep it in a
   separate visual zone from the dimensions for reliable printing. */
.final-band{
  background:transparent!important;
  z-index:22!important;
  pointer-events:none!important;
}
.final-band span{
  color:#111!important;
  background:rgba(255,255,255,.97)!important;
  font:700 12px/15px Tahoma,Arial,sans-serif!important;
  min-width:16px!important;
  height:15px!important;
  padding:0 2px!important;
  border-radius:2px!important;
  text-align:center!important;
}
/* Do NOT place ش at the same centre point as the dimension. */
.final-band.top span{
  left:72%!important;
  top:30px!important;
  transform:translateX(-50%)!important;
}
.final-band.bottom span{
  left:72%!important;
  bottom:30px!important;
  transform:translateX(-50%)!important;
}
.final-band.left span{
  left:30px!important;
  top:72%!important;
  transform:translateY(-50%)!important;
}
.final-band.right span{
  right:30px!important;
  top:72%!important;
  transform:translateY(-50%)!important;
}

/* Groove: plain internal machining line only. No G, no dots, no label. */
.final-groove{
  border-color:#343434!important;
  border-style:solid!important;
  z-index:18!important;
}
.final-groove.top,.final-groove.bottom{
  left:8px!important;
  right:8px!important;
  border-width:1.5px 0 0!important;
}
.final-groove.left,.final-groove.right{
  top:8px!important;
  bottom:8px!important;
  border-width:0 0 0 1.5px!important;
}
.final-groove.top{top:7px!important}
.final-groove.bottom{bottom:7px!important}
.final-groove.left{left:7px!important}
.final-groove.right{right:7px!important}
.final-groove span{display:none!important}

@media(max-width:900px){
  .final-reference-board{min-height:330px!important}
  .reference-piece-dim{font-size:9px!important;line-height:12px!important}
  .final-band span{font-size:10px!important;line-height:13px!important;height:13px!important}
  .final-band.top span{top:24px!important}
  .final-band.bottom span{bottom:24px!important}
  .final-band.left span{left:24px!important}
  .final-band.right span{right:24px!important}
}


/* ==========================================================
   TOPNITURE V10.64 - monochrome cutting preview / print parity
   ========================================================== */
.final-reference-card,
.final-reference-board,
.final-reference-piece{
  color:#111!important;
}
.final-reference-board{
  border-color:#111!important;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 6px,
      rgba(0,0,0,.35) 6.5px,
      rgba(0,0,0,.35) 7.2px
    ),
    #fafafa!important;
}
.final-reference-piece{
  border-color:#111!important;
  background:#fff!important;
}
.final-band span,
.reference-piece-dim,
.final-reference-footer{
  color:#111!important;
}
.final-groove{
  border-color:#444!important;
  border-style:solid!important;
}


/* ==========================================================
   TOPNITURE V10.65 — Label / Notes centered in each piece
   ========================================================== */
.final-piece-note{
  position:absolute;
  z-index:11;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(72%,220px);
  max-height:46%;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  white-space:normal;
  text-align:center;
  direction:rtl;
  unicode-bidi:plaintext;
  color:#111!important;
  background:rgba(255,255,255,.96);
  padding:3px 5px;
  border-radius:2px;
  font:700 8px/1.35 Tahoma,Arial,sans-serif;
  pointer-events:none;
  word-break:break-word;
}
@media(min-width:900px){
  .final-piece-note{
    font-size:9px;
  }
}


/* ==========================================================
   TOPNITURE V10.66 — Print spacing hierarchy
   Edge -> Dimension -> ش -> Groove -> Center Note
   ========================================================== */

/* 1) Dimensions: nearest to the physical edge, but still inside. */
.final-reference-piece .reference-piece-dim.horizontal{
  top:7px!important;
}
.final-reference-piece .reference-piece-dim.vertical{
  left:7px!important;
}

/* 2) Edge-banding marker ش: farther inside than dimensions. */
.final-reference-piece .final-band.top span{
  top:clamp(18px,22%,30px)!important;
}
.final-reference-piece .final-band.bottom span{
  bottom:clamp(18px,22%,30px)!important;
}
.final-reference-piece .final-band.left span{
  left:clamp(18px,22%,30px)!important;
}
.final-reference-piece .final-band.right span{
  right:clamp(18px,22%,30px)!important;
}

/* 3) Groove: deepest operation mark from the selected edge. */
.final-reference-piece .final-groove.top{
  top:clamp(31px,36%,48px)!important;
}
.final-reference-piece .final-groove.bottom{
  bottom:clamp(31px,36%,48px)!important;
}
.final-reference-piece .final-groove.left{
  left:clamp(31px,36%,48px)!important;
}
.final-reference-piece .final-groove.right{
  right:clamp(31px,36%,48px)!important;
}

/* Print-oriented contrast: no colored dependency. */
.final-reference-piece .final-groove{
  border-color:#222!important;
  border-width:1.3px!important;
}
.final-reference-piece .final-band span{
  color:#111!important;
  background:#fff!important;
}

/* Keep centered Label / Notes visually separate from edge operations. */
.final-reference-piece .final-piece-note{
  width:min(64%,210px)!important;
  max-height:40%!important;
  padding:4px 6px!important;
}


/* ==========================================================
   TOPNITURE V10.67 — CRM hover focus
   ========================================================== */
#leadsBody tr:not(.bulk-selected-row):hover td,
#contractsBody tr:not(.bulk-selected-row):hover td{
  background:var(--navy)!important;
  color:#fff!important;
}
#leadsBody tr:hover td *,
#contractsBody tr:hover td *{
  color:#fff!important;
}
#leadsBody tr:hover .badge,
#contractsBody tr:hover .badge{
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.28)!important;
}
#leadsBody tr:hover .table-btn,
#contractsBody tr:hover .table-btn{
  background:#fff!important;
  color:var(--navy)!important;
  border-color:#fff!important;
}
#customersGrid .customer-card{
  transition:background .12s ease,color .12s ease,transform .12s ease;
}
#customersGrid .customer-card:hover{
  background:var(--navy)!important;
  color:#fff!important;
  transform:translateY(-1px);
}
#customersGrid .customer-card:hover h3,
#customersGrid .customer-card:hover p,
#customersGrid .customer-card:hover b,
#customersGrid .customer-card:hover .registration-date-line{
  color:#fff!important;
}
#customersGrid .customer-card:hover .badge{
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
}
#customersGrid .customer-card:hover .secondary-btn{
  background:#fff!important;
  color:var(--navy)!important;
  border-color:#fff!important;
}


/* ==========================================================
   TOPNITURE V10.67 — Standalone Cutting List page
   ========================================================== */
.standalone-cutting-page{display:flex;flex-direction:column;gap:12px}
.cutting-standalone-setup-error{
  border:1px solid #e3b3b8;background:#fff2f3;color:#8f2832;border-radius:10px;padding:12px;font-size:12px
}
.standalone-cutting-editor{
  margin-top:4px;
  border-top:2px solid var(--navy);
  padding-top:16px;
}
.standalone-editor-shell{display:flex;flex-direction:column;gap:12px}
.standalone-editor-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px
}
.standalone-editor-head h2{margin:4px 0;color:var(--navy)}
.standalone-editor-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.standalone-customer-data{background:#fff}
.standalone-detail-scroll .detail-production-table{min-width:1450px}
#standaloneCuttingListsBody tr:hover td{
  background:var(--navy)!important;color:#fff!important
}
#standaloneCuttingListsBody tr:hover td *{color:#fff!important}
#standaloneCuttingListsBody tr:hover .table-btn{background:#fff!important;color:var(--navy)!important}
@media(max-width:760px){
  .standalone-editor-head{flex-direction:column}
  .standalone-editor-actions{justify-content:flex-start}
}


/* ==========================================================
   TOPNITURE V10.68 — Detailing Excel-like controls
   ========================================================== */
.detail-production-table thead th{
  position:sticky!important;
  overflow:visible!important;
}
.detail-th-label{
  pointer-events:none;
}
.detail-col-resizer{
  position:absolute;
  top:0;
  right:-4px;
  width:8px;
  height:100%;
  cursor:col-resize;
  z-index:20;
  touch-action:none;
}
.detail-col-resizer::after{
  content:"";
  position:absolute;
  right:3px;
  top:5px;
  bottom:5px;
  width:1px;
  background:transparent;
}
.detail-col-resizer:hover::after,
body.detail-column-resizing .detail-col-resizer::after{
  background:#304f5d;
}
body.detail-column-resizing{
  cursor:col-resize!important;
  user-select:none!important;
}

.detail-production-table td[data-detail-field]{
  position:relative;
  cursor:cell;
}
.detail-production-table td.detail-cell-selected{
  background:#e8f1f6!important;
  box-shadow:inset 0 0 0 1px #6a91a5;
}
.detail-production-table td.detail-cell-anchor{
  box-shadow:inset 0 0 0 2px #153f55!important;
}
.detail-production-table td.detail-cell-selected .detail-table-input{
  background:transparent!important;
}
.detail-production-table td.detail-cell-selected .detail-table-input:focus{
  box-shadow:none!important;
}

/* Keep the real table width controlled by <colgroup>, not legacy class widths. */
.detail-production-table th,
.detail-production-table td{
  min-width:44px;
}


/* ==========================================================
   TOPNITURE V10.69 — Strong Excel selection frame
   ========================================================== */
.detail-production-table td[data-detail-field]{
  isolation:isolate;
}
.detail-production-table td.detail-cell-selected::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  border:2px solid #456f83;
  box-sizing:border-box;
}
.detail-production-table td.detail-cell-anchor::after{
  border:3px solid #0d3f57;
}
.detail-production-table td.detail-cell-anchor::before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  right:-4px;
  bottom:-4px;
  z-index:31;
  pointer-events:none;
  background:#0d3f57;
  border:1px solid #fff;
}


/* ==========================================================
   TOPNITURE V10.70 — Tiny piece readability
   ========================================================== */
.tiny-reference-piece .reference-piece-dim{
  display:none!important;
}
.tiny-piece-dim{
  position:absolute;
  z-index:26;
  left:34%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:62%;
  padding:1px 3px;
  background:rgba(255,255,255,.98);
  color:#111;
  font:700 8px/10px Georgia,"Times New Roman",serif;
  white-space:nowrap;
  pointer-events:none;
}
.tiny-reference-piece .final-piece-note{
  display:none!important;
}
.tiny-reference-piece .final-band span{
  font-size:8px!important;
  line-height:10px!important;
  height:10px!important;
  min-width:10px!important;
}
.tiny-reference-piece .final-band.top span,
.tiny-reference-piece .final-band.bottom span{
  left:88%!important;
  top:auto!important;
  bottom:auto!important;
}
.tiny-reference-piece .final-band.top span{top:2px!important}
.tiny-reference-piece .final-band.bottom span{bottom:2px!important}
.tiny-reference-piece .final-band.left span,
.tiny-reference-piece .final-band.right span{
  top:88%!important;
  left:auto!important;
  right:auto!important;
}
.tiny-reference-piece .final-band.left span{left:2px!important}
.tiny-reference-piece .final-band.right span{right:2px!important}
.tiny-reference-piece .final-groove.top,
.tiny-reference-piece .final-groove.bottom{
  left:58%!important;
  right:16%!important;
}
.tiny-reference-piece .final-groove.left,
.tiny-reference-piece .final-groove.right{
  top:58%!important;
  bottom:16%!important;
}


/* ==========================================================
   TOPNITURE V10.70 — Lead hover visibility
   ========================================================== */
#leadsBody tr:hover td{
  background:var(--navy)!important;
  color:#fff!important;
}
#leadsBody tr:hover td b,
#leadsBody tr:hover td span:not(.table-btn),
#leadsBody tr:hover td small{
  color:#fff!important;
}
#leadsBody tr.bulk-selected-row:hover td{
  background:var(--navy)!important;
  color:#fff!important;
}
#leadsBody tr.bulk-selected-row:hover td:first-child{
  box-shadow:inset -3px 0 0 #fff!important;
}
#leadsBody tr:hover .table-btn{
  background:#fff!important;
  color:var(--navy)!important;
  border-color:#fff!important;
}


/* ==========================================================
   TOPNITURE V10.71 — Tiny-piece callout system
   ========================================================== */
.tiny-reference-piece .tiny-piece-dim{
  display:none!important;
}
.tiny-piece-code{
  position:absolute;
  z-index:28;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:1px 3px;
  background:#fff;
  color:#111;
  font:800 8px/10px Arial,sans-serif;
  border:1px solid #777;
  border-radius:2px;
  white-space:nowrap;
  pointer-events:none;
}
.tiny-piece-legend{
  margin-top:8px;
  border-top:1px solid #777;
  padding-top:6px;
  color:#111;
  background:#fff;
}
.tiny-piece-legend-title{
  font-size:9px;
  font-weight:900;
  margin-bottom:5px;
}
.tiny-piece-legend-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 10px;
}
.tiny-piece-legend-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  min-width:0;
  border:1px solid #d0d0d0;
  padding:4px 6px;
  font-size:7px;
  line-height:1.25;
}
.tiny-piece-legend-row b{
  min-width:22px;
  font-size:8px;
}
.tiny-piece-legend-note{
  flex:1 1 100%;
  direction:rtl;
  text-align:left;
}
@media(max-width:700px){
  .tiny-piece-legend-grid{grid-template-columns:1fr}
}


/* ==========================================================
   TOPNITURE V10.72 — Smart cutting optimizer
   ========================================================== */
.tiny-piece-code,
.tiny-piece-legend{
  display:none!important;
}
.tiny-reference-piece .tiny-piece-dim{
  display:block!important;
  position:absolute;
  z-index:28;
  left:42%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:70%;
  padding:1px 2px;
  background:rgba(255,255,255,.98);
  color:#111;
  font:700 7px/9px Georgia,"Times New Roman",serif;
  white-space:nowrap;
  pointer-events:none;
}


/* ==========================================================
   TOPNITURE V10.73 — Thin strip readable annotations
   ========================================================== */
.tiny-reference-piece .tiny-piece-dim{
  display:block!important;
  left:36%!important;
  top:50%!important;
  max-width:50%!important;
  padding:1px 4px!important;
  background:#fff!important;
  color:#111!important;
  border:1px solid #999!important;
  font:700 9px/11px Georgia,"Times New Roman",serif!important;
}
.tiny-reference-piece .final-groove{
  border-color:#111!important;
  border-width:2.4px!important;
}
.tiny-reference-piece .final-groove.top,
.tiny-reference-piece .final-groove.bottom{
  left:56%!important;
  right:17%!important;
}
.tiny-reference-piece .final-groove.left,
.tiny-reference-piece .final-groove.right{
  top:12%!important;
  bottom:12%!important;
}


/* ==========================================================
   TOPNITURE V10.77 — Product-linked Preparation
   ========================================================== */
.prep-product-nav{
  position:sticky;
  top:86px;
  z-index:24;
  margin:0 -2px 10px;
  padding:8px 2px 9px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e1e9ed;
}
.prep-product-tabs{
  display:flex;
  gap:7px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding-bottom:2px;
}
.prep-product-tab{
  flex:0 0 auto;
  min-width:150px;
  max-width:230px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #cbd9e0;
  background:#f7fafb;
  color:#173f53;
  border-radius:10px;
  padding:7px 10px;
  cursor:pointer;
  text-align:right;
}
.prep-product-tab:hover{
  border-color:#7da0b1;
  background:#eef5f8;
}
.prep-product-tab.active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
  box-shadow:0 5px 14px rgba(8,57,87,.18);
}
.prep-product-tab-index{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#fff;
  color:var(--navy);
  font-weight:900;
  font-size:11px;
}
.prep-product-tab:not(.active) .prep-product-tab-index{
  background:#e4edf2;
}
.prep-product-tab-text{
  min-width:0;
  display:block;
}
.prep-product-tab-text b{
  display:block;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.prep-product-tab-text small{
  display:block;
  margin-top:2px;
  opacity:.74;
  font-size:8px;
}
.prep-expand-btn{
  min-width:118px;
}

/* Expand only the work/preparation side; contract reference is restored with one click. */
.prep-fullscreen-shell.prep-work-expanded{
  grid-template-columns:1fr!important;
}
.prep-fullscreen-shell.prep-work-expanded .prep-contract-pane{
  display:none!important;
}
.prep-fullscreen-shell.prep-work-expanded .prep-work-pane{
  grid-column:1/-1;
  width:100%;
  max-width:none;
}
.prep-fullscreen-shell.prep-work-expanded .prep-sticky-head{
  padding-left:48px;
}
.prep-fullscreen-shell.prep-work-expanded .detail-production-table{
  max-width:none;
}

/* Work Order print grouping */
.print-prep-product{
  border:1px solid #cddbe2;
  border-radius:8px;
  padding:8px;
  margin:10px 0;
  break-inside:avoid;
}
.print-prep-product>h3{
  margin:0 0 7px;
  color:#083957;
  font-size:13px;
}

@media(max-width:760px){
  .prep-product-nav{
    top:0;
    position:relative;
  }
  .prep-product-tab{
    min-width:132px;
  }
  .prep-expand-btn{
    display:none!important;
  }
}


/* ==========================================================
   TOPNITURE V10.78 — Preparation Lists
   ========================================================== */
.prep-product-menu{
  position:relative;
  flex:0 0 auto;
}
.prep-product-menu>.prep-product-tab{
  min-width:175px;
}
.prep-product-caret{
  margin-inline-start:auto;
  font-size:10px;
  opacity:.75;
}
.prep-product-dropdown{
  position:absolute;
  top:calc(100% + 5px);
  inset-inline-start:0;
  z-index:80;
  min-width:220px;
  max-width:300px;
  padding:6px;
  border:1px solid #cbd9e0;
  border-radius:10px;
  background:#fff;
  box-shadow:0 14px 34px rgba(8,57,87,.16);
  display:none;
}
.prep-product-menu:hover .prep-product-dropdown,
.prep-product-menu:focus-within .prep-product-dropdown{
  display:block;
}
.prep-list-menu-item,
.prep-list-menu-add{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#173f53;
  padding:8px 9px;
  cursor:pointer;
  text-align:right;
}
.prep-list-menu-item:hover,
.prep-list-menu-item.active{
  background:#edf4f7;
}
.prep-list-menu-item.active{
  font-weight:800;
}
.prep-list-menu-item small{
  color:#6c8390;
  font-size:8px;
  white-space:nowrap;
}
.prep-list-menu-add{
  margin-top:4px;
  border-top:1px solid #e2e8eb;
  border-radius:0 0 7px 7px;
  color:#e7691f;
  font-weight:800;
}
.prep-list-menu-add:hover{
  background:#fff6ef;
}

.prep-list-title-wrap{
  flex:1 1 260px;
  min-width:220px;
}
.prep-list-title-input{
  width:min(480px,100%);
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--navy);
  padding:5px 8px;
  font:800 20px/1.3 Tahoma,Arial,sans-serif;
  outline:none;
}
.prep-list-title-input:hover{
  background:#f7fafb;
  border-color:#dbe5e9;
}
.prep-list-title-input:focus{
  background:#fff;
  border-color:#7195a6;
  box-shadow:0 0 0 3px rgba(69,111,131,.10);
}

.prep-cutting-scope-control{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.prep-cutting-scope-control>span{
  font-size:9px;
  font-weight:800;
  color:#607985;
}
.prep-cutting-scope-control .select{
  min-width:190px;
}
.cutting-scope-result{
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:6px 9px;
  margin-bottom:8px;
  border:1px solid #d9e3e8;
  border-radius:8px;
  background:#f8fafb;
}
.cutting-scope-result span{
  color:#728792;
  font-size:9px;
}
.cutting-scope-result b{
  color:#173f53;
  font-size:10px;
}

.print-prep-list{
  margin:8px 0 12px;
}
.print-prep-list>h4{
  margin:0 0 5px;
  padding:5px 7px;
  background:#f4f6f7;
  border:1px solid #d9dfe2;
  font-size:11px;
}

@media(max-width:760px){
  .prep-product-dropdown{
    position:fixed;
    left:12px;
    right:12px;
    top:auto;
    bottom:74px;
    max-width:none;
  }
  .prep-list-title-input{
    font-size:17px;
  }
  .prep-cutting-scope-control{
    width:100%;
  }
  .prep-cutting-scope-control .select{
    width:100%;
  }
}


/* ==========================================================
   TOPNITURE V10.79 — Product menu click fix
   ========================================================== */
.prep-product-menu.open{
  z-index:90;
}
.prep-product-menu.open .prep-product-dropdown{
  display:block!important;
}
.prep-product-menu.open .prep-product-caret{
  transform:rotate(180deg);
}
.prep-product-caret{
  transition:transform .14s ease;
}
.prep-product-dropdown{
  pointer-events:auto;
}
.prep-product-tab{
  user-select:none;
}
@media(max-width:760px){
  .prep-product-menu.open .prep-product-dropdown{
    display:block!important;
  }
}


/* ==========================================================
   TOPNITURE V10.80 — Actual product menu fix
   ========================================================== */
#prepProductNav,
#prepProductNav .prep-product-tabs{
  overflow-y:visible!important;
}
#prepProductNav .prep-product-menu{
  overflow:visible!important;
}
#prepProductNav .prep-product-menu.open{
  z-index:120!important;
}
#prepProductNav .prep-product-menu.open>.prep-product-dropdown{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#prepProductNav .prep-product-dropdown{
  visibility:visible;
  opacity:1;
}
#prepProductNav [data-prep-product-trigger],
#prepProductNav [data-prep-list-trigger],
#prepProductNav [data-prep-list-add]{
  touch-action:manipulation;
}


/* ==========================================================
   TOPNITURE V10.81 — Product Lists Inline Drawer
   Root fix for dropdown clipping inside horizontal overflow.
   ========================================================== */

/* Product row may scroll horizontally; lists are NOT inside this row anymore. */
#prepProductNav .prep-product-tabs{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding-bottom:4px!important;
}

/* Old floating dropdown is retired completely in Preparation. */
#prepProductNav .prep-product-dropdown{
  display:none!important;
}

/* Clicking a product opens a stable full-width drawer under the product row. */
#prepProductNav .prep-list-drawer{
  width:100%;
  margin-top:8px;
  padding:9px;
  border:1px solid #d8e3e8;
  border-radius:11px;
  background:#f8fbfc;
  box-shadow:0 6px 18px rgba(8,57,87,.07);
}

#prepProductNav .prep-list-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}

#prepProductNav .prep-list-drawer-title{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}

#prepProductNav .prep-list-drawer-title>span{
  color:#7a8e98;
  font-size:9px;
  font-weight:700;
}

#prepProductNav .prep-list-drawer-title>b{
  color:#123f56;
  font-size:11px;
}

#prepProductNav .prep-list-drawer-add{
  flex:0 0 auto;
  border:1px solid #e86b25;
  border-radius:8px;
  background:#fff;
  color:#e86b25;
  padding:6px 10px;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

#prepProductNav .prep-list-drawer-add:hover{
  background:#fff4ed;
}

#prepProductNav .prep-list-drawer-items{
  display:flex;
  align-items:stretch;
  gap:7px;
  overflow-x:auto;
  padding:1px 0 3px;
  scrollbar-width:thin;
}

#prepProductNav .prep-list-chip{
  flex:0 0 auto;
  min-width:145px;
  max-width:220px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #d4e0e5;
  border-radius:9px;
  background:#fff;
  color:#173f53;
  padding:7px 9px;
  cursor:pointer;
  text-align:right;
}

#prepProductNav .prep-list-chip:hover{
  border-color:#8aa7b5;
  background:#f4f8fa;
}

#prepProductNav .prep-list-chip.active{
  border-color:#123f56;
  background:#123f56;
  color:#fff;
  box-shadow:0 4px 12px rgba(8,57,87,.15);
}

#prepProductNav .prep-list-chip-index{
  width:23px;
  height:23px;
  flex:0 0 23px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#e9f0f3;
  color:#123f56;
  font-size:9px;
  font-weight:900;
}

#prepProductNav .prep-list-chip.active .prep-list-chip-index{
  background:#fff;
}

#prepProductNav .prep-list-chip-main{
  min-width:0;
  display:block;
  flex:1 1 auto;
}

#prepProductNav .prep-list-chip-main>b{
  display:block;
  max-width:135px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}

#prepProductNav .prep-list-chip-main>small{
  display:block;
  margin-top:2px;
  opacity:.7;
  font-size:8px;
}

#prepProductNav .prep-list-chip-current{
  flex:0 0 auto;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:7px;
  font-weight:800;
}

/* The arrow now represents drawer state, not a floating popup. */
#prepProductNav .prep-product-menu.open .prep-product-caret{
  transform:rotate(180deg);
}

@media(max-width:760px){
  #prepProductNav .prep-list-drawer{
    padding:8px;
  }

  #prepProductNav .prep-list-drawer-head{
    align-items:flex-start;
  }

  #prepProductNav .prep-list-chip{
    min-width:130px;
  }
}


/* ==========================================================
   TOPNITURE V10.82 — Real portal dropdown + delete list
   ========================================================== */

/* V10.81 inline drawer is retired. */
#prepProductNav .prep-list-drawer{
  display:none!important;
}

.prep-product-popover{
  position:fixed;
  z-index:1000000;
  direction:rtl;
  border:1px solid #d7e1e6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 52px rgba(8,42,61,.22);
  padding:8px;
  overflow:hidden;
  animation:prepPopoverIn .12s ease-out;
}

@keyframes prepPopoverIn{
  from{opacity:0;transform:translateY(-4px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.prep-popover-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:5px 6px 9px;
  border-bottom:1px solid #edf1f3;
}

.prep-popover-title{
  min-width:0;
}
.prep-popover-title small{
  display:block;
  margin-bottom:2px;
  color:#8799a2;
  font-size:8px;
  font-weight:700;
}
.prep-popover-title b{
  display:block;
  max-width:275px;
  color:#123f56;
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.prep-popover-close{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:#f3f6f7;
  color:#5d747f;
  font-size:17px;
  line-height:1;
  cursor:pointer;
}

.prep-popover-list{
  max-height:min(330px,55vh);
  overflow:auto;
  padding:6px 0;
  scrollbar-width:thin;
}

.prep-popover-list-row{
  display:flex;
  align-items:stretch;
  gap:4px;
  margin:2px 0;
  border-radius:8px;
}
.prep-popover-list-row.active{
  background:#edf4f7;
}

.prep-popover-list-open{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#173f53;
  padding:8px;
  text-align:right;
  cursor:pointer;
}
.prep-popover-list-open:hover{
  background:#f3f7f9;
}

.prep-popover-list-index{
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#e6eef2;
  color:#123f56;
  font-size:9px;
  font-weight:900;
}

.prep-popover-list-row.active .prep-popover-list-index{
  background:#123f56;
  color:#fff;
}

.prep-popover-list-text{
  min-width:0;
  flex:1 1 auto;
}
.prep-popover-list-text b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}
.prep-popover-list-text small{
  display:block;
  margin-top:2px;
  color:#80919a;
  font-size:8px;
}

.prep-popover-active-badge{
  flex:0 0 auto;
  padding:3px 6px;
  border-radius:999px;
  background:#123f56;
  color:#fff;
  font-size:7px;
  font-weight:800;
}

.prep-popover-delete{
  width:31px;
  flex:0 0 31px;
  align-self:stretch;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#a25555;
  font-size:17px;
  cursor:pointer;
}
.prep-popover-delete:hover{
  background:#fff0f0;
  color:#c73535;
}

.prep-popover-add{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px dashed #e46d2d;
  border-radius:8px;
  background:#fff8f3;
  color:#d95f20;
  padding:8px;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
.prep-popover-add:hover{
  background:#fff1e7;
}

/* Product row remains compact; dropdown lives outside overflow entirely. */
#prepProductNav .prep-product-tabs{
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
#prepProductNav .prep-product-menu.open .prep-product-caret{
  transform:rotate(180deg);
}

@media(max-width:760px){
  .prep-product-popover{
    border-radius:11px;
  }
}


/* ==========================================================
   TOPNITURE V10.83 — Each product optimized separately
   ========================================================== */
.product-batch-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin:8px 0 12px;
}
.product-batch-results{
  display:grid;
  gap:16px;
}
.product-cutting-result{
  border:1px solid #ccdbe2;
  border-radius:13px;
  background:#fff;
  padding:12px;
  box-shadow:0 5px 18px rgba(8,57,87,.05);
}
.product-cutting-result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding-bottom:9px;
  border-bottom:1px solid #e6ecef;
}
.product-cutting-result-head span{
  display:block;
  color:#e66b28;
  font-size:8px;
  font-weight:900;
}
.product-cutting-result-head h4{
  margin:2px 0;
  color:#123f56;
  font-size:16px;
}
.product-cutting-result-head small{
  color:#718792;
  font-size:8px;
}
.product-cutting-kpis{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.product-cutting-kpis b{
  padding:5px 8px;
  border-radius:7px;
  background:#eff5f7;
  color:#123f56;
  font-size:9px;
}
@media(max-width:760px){
  .product-cutting-result-head{
    flex-direction:column;
  }
  .product-cutting-kpis{
    justify-content:flex-start;
  }
}


/* ==========================================================
   TOPNITURE V10.84 — Waste Concentration Optimizer
   ========================================================== */
.cutting-optimizer-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border-radius:999px;
  background:#eef5f7;
  color:#476b7c;
  font-size:7px;
  font-weight:800;
  direction:ltr;
  white-space:nowrap;
}


/* ==========================================================
   TOPNITURE V10.85 — All products + all lists combined scope
   ========================================================== */
.cutting-combined-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border-radius:999px;
  background:#fff4ea;
  color:#b75a22;
  font-size:8px;
  font-weight:900;
  white-space:normal;
}


/* ==========================================================
   TOPNITURE V10.86 — Material Takeoff scope dropdown
   ========================================================== */
.material-takeoff-head{
  align-items:flex-start;
}
.takeoff-current-scope{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  flex-wrap:wrap;
}
.takeoff-current-scope span{
  color:#81949d;
  font-size:8px;
  font-weight:700;
}
.takeoff-current-scope b{
  color:#123f56;
  font-size:9px;
}
.takeoff-import-dropdown{
  position:relative;
  z-index:30;
}
.takeoff-import-dropdown>summary{
  list-style:none;
}
.takeoff-import-dropdown>summary::-webkit-details-marker{
  display:none;
}
.takeoff-import-trigger{
  display:flex!important;
  align-items:center;
  gap:7px;
  cursor:pointer;
  user-select:none;
}
.takeoff-import-arrow{
  font-size:9px;
  transition:transform .12s ease;
}
.takeoff-import-dropdown[open] .takeoff-import-arrow{
  transform:rotate(180deg);
}
.takeoff-import-menu{
  position:absolute;
  top:calc(100% + 6px);
  inset-inline-end:0;
  width:min(355px,calc(100vw - 28px));
  max-height:min(420px,65vh);
  overflow:auto;
  padding:7px;
  border:1px solid #d5e0e5;
  border-radius:11px;
  background:#fff;
  box-shadow:0 18px 45px rgba(8,42,61,.18);
  direction:rtl;
}
.takeoff-import-menu-title{
  padding:5px 7px 8px;
  color:#71858f;
  font-size:8px;
  font-weight:800;
}
.takeoff-import-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#173f53;
  padding:8px;
  text-align:right;
  cursor:pointer;
}
.takeoff-import-option:hover{
  background:#f1f6f8;
}
.takeoff-import-option>span:nth-child(2){
  min-width:0;
  flex:1 1 auto;
}
.takeoff-import-option b{
  display:block;
  font-size:10px;
}
.takeoff-import-option small{
  display:block;
  margin-top:2px;
  color:#7b8f98;
  font-size:8px;
}
.takeoff-import-option-index,
.takeoff-import-option-icon{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#e8f0f3;
  color:#123f56;
  font-size:9px;
  font-weight:900;
}
.takeoff-import-divider{
  height:1px;
  margin:5px 3px;
  background:#e8edef;
}

@media(max-width:760px){
  .takeoff-head-actions{
    width:100%;
  }
  .takeoff-import-dropdown{
    flex:1 1 auto;
  }
  .takeoff-import-trigger{
    width:100%;
    justify-content:center;
  }
  .takeoff-import-menu{
    position:fixed;
    left:12px;
    right:12px;
    top:auto;
    bottom:72px;
    width:auto;
  }
}


/* ==========================================================
   TOPNITURE V10.87 — Combined Takeoff + stable material drafts
   ========================================================== */
.takeoff-import-option-combined{
  background:#fff7ef;
  border:1px solid #f2d1b9;
}
.takeoff-import-option-combined:hover{
  background:#ffefe2;
}
.takeoff-import-option-combined .takeoff-import-option-icon{
  background:#e96b28;
  color:#fff;
}


/* ==========================================================
   TOPNITURE V10.88 — Daily Auto Backup
   ========================================================== */
.backup-settings-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:14px;
  margin-bottom:14px;
}
.backup-control-card,
.backup-status-card{
  margin:0!important;
}
.backup-master-switch{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:6px 10px;
  border:1px solid #d5e1e6;
  border-radius:9px;
  background:#f7fafb;
  color:#123f56;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.backup-master-switch input{
  width:18px;
  height:18px;
  accent-color:#e7691f;
}
.backup-setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid #edf1f3;
}
.backup-setting-row>div{
  min-width:0;
}
.backup-setting-row b{
  display:block;
  color:#153e52;
  font-size:10px;
}
.backup-setting-row small{
  display:block;
  margin-top:2px;
  color:#7b8e98;
  font-size:8px;
}
.backup-setting-row strong{
  color:#153e52;
  font-size:10px;
  white-space:nowrap;
}
.backup-setting-row .select{
  min-width:120px;
}
.backup-save-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.backup-save-row small{
  color:#718792;
  font-size:8px;
}
.backup-status-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.backup-status-tile{
  min-height:82px;
  padding:11px;
  border:1px solid #dce6ea;
  border-radius:10px;
  background:#f8fafb;
}
.backup-status-tile span{
  display:block;
  color:#7d9099;
  font-size:8px;
  font-weight:700;
}
.backup-status-tile b{
  display:block;
  margin-top:8px;
  color:#123f56;
  font-size:14px;
  overflow-wrap:anywhere;
}
.backup-status-error{
  grid-column:1/-1;
  padding:12px;
  border:1px solid #f2c8c8;
  border-radius:10px;
  background:#fff5f5;
}
.backup-status-error b{
  display:block;
  color:#a13b3b;
  font-size:11px;
}
.backup-status-error span{
  display:block;
  margin-top:4px;
  color:#7d5656;
  font-size:8px;
}
.backup-history-panel{
  margin-top:0!important;
}
.backup-history-panel td small{
  display:block;
  margin-top:2px;
  color:#84969f;
}
.backup-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #e6d8c9;
  border-radius:9px;
  background:#fff9f2;
  color:#705746;
  font-size:9px;
  line-height:1.7;
}
.backup-note b{
  color:#b65d28;
}
@media(max-width:900px){
  .backup-settings-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:600px){
  .backup-setting-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .backup-setting-row .select{
    width:100%;
  }
  .backup-status-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* ==========================================================
   TOPNITURE V10.89 — Real Backup ZIP
   ========================================================== */
.backup-download-btn:disabled{
  opacity:.7;
  cursor:wait;
  min-width:132px;
}
.real-backup-note{
  line-height:1.8;
}
.real-backup-note b{
  color:#0c536f;
}


/* TOPNITURE V10.90 — Supplier assignment & Settings actions */
.auto-assigned-supplier{
  border-color:#2fa36b!important;
  box-shadow:0 0 0 2px rgba(47,163,107,.12)!important;
}
.settings-row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.settings-row-actions .table-btn{margin:0;}