:root{color-scheme:light;--bg:#f6f6f7;--surface:#fff;--surface-2:#eeeeef;--text:#202022;--muted:#6f6f73;--border:#dedee1;--primary:#4b4b4f;--primary-strong:#353538;--primary-soft:#ececef;--amber:#9b630d;--amber-soft:#fff1d6;--red:#a63e3e;--red-soft:#fbe8e8;--purple:#654899;--purple-soft:#eee9f7;--shadow:0 12px 34px rgba(32,32,34,.09);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden;max-width:100vw}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{min-height:100vh;display:grid;grid-template-columns:68px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:#2f2f32;color:#f7f7f8;padding:23px 15px;display:flex;flex-direction:column;z-index:100;width:238px;margin-right:-170px;box-shadow:6px 0 26px rgba(0,0,0,.28);transition:width .22s cubic-bezier(0.4,0,0.2,1),margin-right .22s cubic-bezier(0.4,0,0.2,1),box-shadow .22s ease,padding .22s ease;white-space:nowrap}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;padding:0 8px 24px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eeeeef;color:#343438;font-weight:800}.brand>span:last-child{display:grid}.brand small,.profile small{color:#b8b8bc;margin-top:2px}.main-nav{display:grid;gap:5px}.nav-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;border:0;background:transparent;color:#d1d1d4;padding:11px 12px;border-radius:9px;text-align:left}.nav-item:hover,.nav-item.active{background:#46464a;color:#fff}.nav-icon{display:grid;place-items:center;opacity:.85;text-align:center}.nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-item.active .nav-icon{opacity:1;color:#fff}.nav-count{min-width:20px;text-align:center;padding:2px 5px;border-radius:10px;background:#4a4a4e;font-size:11px}.nav-divider{height:1px;background:#48484c;margin:8px 12px}.sidebar-foot{margin-top:auto;display:grid;gap:18px}.sidebar-foot label{display:grid;gap:6px;font-size:12px;color:#b8b8bc}.sidebar-foot select{background:#414145;color:#fff;border:1px solid #57575c;border-radius:8px;padding:9px}.profile{display:flex;align-items:center;gap:10px}.profile>span:last-child{display:grid;font-size:13px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eeeeef;color:#343438;font-weight:700;overflow:hidden;flex-shrink:0}
.sidebar-collapse{position:absolute;right:-10px;top:0;bottom:0;z-index:2;display:grid;place-items:center;width:20px;height:100%;padding:0;border:0;border-left:1px solid rgba(255,255,255,.05);border-radius:0;background:#3a3a3e;color:#fff;font-size:22px;line-height:1;box-shadow:3px 0 9px rgba(0,0,0,.12);opacity:.72;transition:width .16s ease,opacity .16s ease,background .16s ease}
.sidebar-collapse:hover,.sidebar-collapse:focus-visible{width:26px;right:-13px;background:#505055;opacity:1;outline:none}
@media(min-width:761px){
  .app-shell{grid-template-columns:68px minmax(0,1fr)!important}
  .sidebar{
    min-width:238px!important;
    width:238px!important;
    margin-right:-170px!important;
    box-shadow:6px 0 26px rgba(0,0,0,.32)!important;
    z-index:1000!important;
    transition:min-width .22s cubic-bezier(0.4,0,0.2,1),width .22s cubic-bezier(0.4,0,0.2,1),margin-right .22s cubic-bezier(0.4,0,0.2,1),box-shadow .22s ease,padding .22s ease;
  }
  .sidebar.collapsed{
    min-width:68px!important;
    width:68px!important;
    margin-right:0!important;
    box-shadow:none!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }
  .sidebar.collapsed .brand{justify-content:center;padding-left:0;padding-right:0}
  .sidebar.collapsed .brand-copy,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-count,.sidebar.collapsed .branch-control,.sidebar.collapsed .profile-copy{display:none}
  .sidebar.collapsed .main-nav{gap:7px}
  .sidebar.collapsed .nav-item{display:grid;grid-template-columns:1fr;place-items:center;width:50px;height:46px;padding:0}
  .sidebar.collapsed .nav-icon{font-size:19px;opacity:1}
  .sidebar.collapsed .nav-item.active{box-shadow:inset 3px 0 #57c894}
  .sidebar.collapsed .nav-divider{margin-left:5px;margin-right:5px}
  .sidebar.collapsed .sidebar-foot{justify-items:center}
  .sidebar.collapsed .profile{justify-content:center}
  .sidebar.collapsed .avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25)}
  .sidebar .sidebar-collapse{right:-10px}
  .sidebar .sidebar-collapse:hover,.sidebar .sidebar-collapse:focus-visible{right:-13px}
}
.brand{align-items:center;padding-bottom:18px}
.brand-mark{flex:0 0 38px}
.brand-title-row{display:flex;align-items:center;gap:8px}
.brand-title-row strong{font-size:15px;line-height:1.2;color:#fff}
.company-brand{display:inline-flex;align-items:center;justify-content:center;width:60px;height:22px;margin:0;padding:2px 5px;border-radius:5px;background:#fff;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.company-brand img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:760px){.sidebar-collapse{display:none}}
.workspace{min-width:0;padding:26px 32px 50px;overflow-x:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.eyebrow{margin:0 0 3px;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--muted);font-weight:700}.topbar h1{margin:0;font-size:28px;letter-spacing:-.03em}.top-actions,.button-row,.form-actions{display:flex;align-items:center;gap:9px}.mobile-menu{display:none;border:0;background:transparent;font-size:22px}.primary-button,.secondary-button,.text-button,.icon-button{border:0;border-radius:9px;padding:10px 14px;font-weight:700}.primary-button{background:var(--primary);color:#fff}.primary-button:hover{background:var(--primary-strong)}.secondary-button{background:var(--surface-2);color:var(--text)}.text-button{padding:6px;background:transparent;color:var(--primary)}.icon-button{position:relative;background:var(--surface);border:1px solid var(--border);padding:9px 12px}.icon-button span{position:absolute;right:-5px;top:-6px;background:var(--red);color:#fff;border-radius:12px;min-width:18px;padding:2px 5px;font-size:10px}.live-dot{width:9px;height:9px;border-radius:50%;background:#59d499;box-shadow:0 0 0 5px rgba(89,212,153,.15);animation:livePulse 1.8s ease-in-out infinite}.flash{background:var(--primary-soft);color:var(--primary-strong);border:1px solid #b9ddca;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.route{display:none}.route.active{display:block}.page-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:17px}.page-intro h2{font-size:20px;margin:0}.page-intro p{color:var(--muted);margin:5px 0 0}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.metric{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:17px}.metric small{display:block;color:var(--muted);margin-bottom:8px}.metric strong{font-size:24px;letter-spacing:-.03em}.metric em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:7px}.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}.work-column{background:var(--surface-2);border-radius:13px;padding:12px}.column-head{display:flex;justify-content:space-between;align-items:center;padding:2px 3px 11px;font-size:13px;font-weight:700}.column-head b{background:var(--surface);border-radius:999px;padding:3px 8px}.task-cards{display:grid;gap:9px}.task-card{border:1px solid var(--border);background:var(--surface);border-radius:11px;padding:13px;text-align:left;width:100%;color:var(--text);box-shadow:0 3px 12px rgba(23,33,29,.04)}.task-card:hover{border-color:#a9c8b8;transform:translateY(-1px)}.task-card-top,.task-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:9px}.task-card h3{font-size:14px;margin:11px 0 5px}.task-card p{margin:0;color:var(--muted);font-size:12px}.task-card-bottom{margin-top:13px;color:var(--muted);font-size:12px}.empty-state{padding:20px 10px;text-align:center;color:var(--muted);font-size:13px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}.panel-head,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.panel h2{font-size:17px;margin:0}.panel p,.toolbar p{margin:4px 0 0;color:var(--muted);font-size:13px}.list-view{display:grid}.list-row{display:grid;grid-template-columns:42px minmax(105px,.55fr) minmax(170px,1fr) 120px 100px auto;align-items:center;gap:11px;padding:13px 0;border-top:1px solid var(--border);cursor:pointer}.list-row:first-child{border-top:0}.list-row:hover{background:linear-gradient(90deg,transparent,var(--surface-2),transparent)}.rank{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);font-weight:800;font-size:12px}.rank.high{background:var(--primary);color:#fff}.list-row small{display:block;color:var(--muted);margin-top:3px}.status-chip{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary-strong);font-size:12px;font-weight:700}.status-chip.warning{background:var(--amber-soft);color:var(--amber)}.status-chip.danger{background:var(--red-soft);color:var(--red)}.status-chip.success{background:#dff3e6;color:#08743f}.status-chip.neutral{background:var(--surface-2);color:var(--muted)}.toolbar{margin-bottom:14px}.segmented{display:flex;background:var(--surface-2);padding:4px;border-radius:10px}.segmented button{border:0;background:transparent;padding:8px 12px;border-radius:7px}.segmented button.active{background:var(--surface);box-shadow:0 2px 8px rgba(24,39,31,.08)}.search{min-width:260px;border:1px solid var(--border);border-radius:9px;padding:10px 12px;background:var(--surface)}
.registry-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}.registry-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--border)}.registry-head h2{margin:0;font-size:17px}.registry-head p{margin:4px 0 0;color:var(--muted);font-size:13px}.registry-note{color:var(--muted);font-size:12px;white-space:nowrap}.registry-note i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#24a568;margin-right:5px}.registry-scroll{overflow:auto}.registry-table{width:100%;min-width:1390px;border-collapse:separate;border-spacing:0;font-size:12px}.registry-table th{position:sticky;top:0;z-index:3;background:#eef3f0;color:#526159;padding:7px 8px;text-align:left;border-right:1px solid #d6ded9;border-bottom:1px solid #cbd5cf;white-space:nowrap;font-weight:700}.sort-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:2px 1px 6px;border:0;background:transparent;color:#405048;font-size:12px;font-weight:800;text-align:left}.sort-button span{color:#8a9890;font-size:11px}.registry-table th input,.registry-table th select{width:100%;min-width:72px;height:25px;padding:3px 6px;border:1px solid #d1dad5;border-radius:5px;background:#fff;font-size:10px;font-weight:400}.registry-table td{height:48px;padding:7px 10px;border-right:1px solid #e2e7e4;border-bottom:1px solid #e6ebe8;white-space:nowrap;background:#fff}.registry-table tbody tr:nth-child(even) td{background:#f7f9f8}.registry-table tbody tr{cursor:pointer}.registry-table tbody tr:hover td{background:#edf6f1}.registry-table small{display:block;color:var(--muted);margin-top:3px}.registry-table .sticky-number{position:sticky;left:0;z-index:2;min-width:118px}.registry-table thead .sticky-number{z-index:4}.registry-table .center{text-align:center}.registry-table .hours{font-weight:700;color:#254e9e}.registry-table .status-chip{font-size:11px;padding:4px 8px}.registry-table .folder-link{color:var(--primary);text-decoration:underline}.registry-table .running-row td,.registry-table .running-row:nth-child(even) td{background:#e2f5e9;border-bottom-color:#aad8bb;border-top:1px solid #72bf90}.registry-table .running-row:hover td{background:#d8f0e1}.running-label{display:block;color:#08743f;font-size:10px;margin-top:4px;font-weight:800}.mini-progress{width:72px;height:6px;border-radius:999px;background:#e5ebe7;overflow:hidden}.mini-progress span{display:block;height:100%;background:var(--primary);border-radius:inherit}.row-actions{min-width:145px}.row-actions button{border:0;border-radius:6px;padding:5px 7px;margin-left:4px;font-size:11px;font-weight:700}.running-time{color:#08743f;font-variant-numeric:tabular-nums}.priority-cell{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--surface-2);font-weight:800}
.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.calendar-nav{display:flex;align-items:center;gap:8px}.calendar-nav strong{margin-left:7px}.calendar-surface{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:auto}.calendar-hint{color:var(--muted);font-size:12px}.time-calendar{min-width:800px;display:grid;position:relative}.time-calendar.week{grid-template-columns:64px repeat(5,1fr)}.time-calendar.day{grid-template-columns:64px 1fr}.time-head,.time-label,.time-slot{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.time-head{padding:11px;text-align:center;background:var(--surface-2);font-weight:700;position:sticky;top:0;z-index:2}.time-label{height:38px;padding:5px 7px;text-align:right;color:var(--muted);font-size:11px}.time-slot{height:38px;position:relative;background:linear-gradient(to bottom,transparent calc(100% - 1px),rgba(220,227,222,.35) 1px)}.calendar-event{position:absolute;left:4px;right:4px;top:2px;min-height:34px;border:0;border-left:3px solid var(--primary);border-radius:6px;background:var(--primary-soft);color:var(--text);padding:5px 7px;text-align:left;z-index:1;overflow:hidden}.calendar-event.construction{border-left-color:var(--purple);background:var(--purple-soft)}.calendar-event strong,.calendar-event small{display:block}.calendar-event small{color:var(--muted);margin-top:2px}.month-calendar{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));min-width:780px}.month-weekday,.month-day{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.month-weekday{padding:10px;text-align:center;background:var(--surface-2);font-weight:700;font-size:12px}.month-day{min-height:116px;padding:8px}.month-day.outside{opacity:.42}.month-number{font-size:12px;color:var(--muted)}.month-event{display:block;width:100%;border:0;border-radius:5px;background:var(--primary-soft);color:var(--text);padding:5px 6px;margin-top:5px;text-align:left;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.year-calendar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}.year-month{background:var(--surface);padding:15px;min-height:130px}.year-month h3{margin:0 0 12px;font-size:14px}.year-stat{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--border);font-size:12px}.year-stat span{color:var(--muted)}
.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.span-2{grid-column:span 2}.form-panel label,.readiness-panel label,dialog label{display:grid;gap:7px;font-size:12px;font-weight:700;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .full{grid-column:1/-1}input,select{width:100%;border:1px solid var(--border);border-radius:9px;padding:10px 11px;background:var(--surface);color:var(--text)}input:focus,select:focus{outline:3px solid rgba(28,107,77,.14);border-color:var(--primary)}.form-actions{justify-content:flex-end;border-top:1px solid var(--border);padding-top:16px;margin-top:18px}.readiness-panel{display:grid;align-content:start;gap:13px}.check-row{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--border);padding-top:13px}.check-row span{display:grid}.check-row small{color:var(--muted);margin-top:3px}.check-row input{width:20px;height:20px}.hint{background:var(--surface-2);border-radius:9px;padding:11px!important}.bar-chart{display:grid;gap:13px}.bar-row{display:grid;grid-template-columns:125px 1fr 38px;gap:10px;align-items:center}.bar-track{height:11px;border-radius:999px;background:var(--surface-2);overflow:hidden}.bar-fill{height:100%;background:var(--primary);border-radius:999px}.comparison{display:grid;gap:12px}.compare-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}.settings-list{margin:12px 0 0}.settings-list div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--border)}.settings-list dd{margin:0;color:var(--muted)}.branch-setting{display:grid;grid-template-columns:1fr 120px 120px auto;gap:12px;align-items:end;padding:12px 0;border-top:1px solid var(--border)}.branch-setting label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.toggle-label{display:flex!important;align-items:center;gap:8px!important;color:var(--text)!important}.toggle-label input{width:18px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(13,20,17,.3);z-index:40}.task-drawer{position:fixed;right:-580px;top:0;width:min(540px,100%);height:100vh;background:var(--surface);z-index:50;box-shadow:-20px 0 50px rgba(23,33,29,.18);display:flex;flex-direction:column;transition:right .22s ease}.task-drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px;border-bottom:1px solid var(--border)}.drawer-head h2{margin:0;font-size:22px}.close-button{border:0;background:var(--surface-2);border-radius:50%;width:34px;height:34px;font-size:22px}.drawer-body{padding:22px 24px;overflow:auto;display:grid;align-content:start;gap:20px}.drawer-foot{margin-top:auto;padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px}.task-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.summary-box{background:var(--surface-2);border-radius:10px;padding:12px}.summary-box small{display:block;color:var(--muted);margin-bottom:5px}.summary-box strong{font-size:16px}.progress-wrap{display:grid;gap:8px}.progress-head{display:flex;justify-content:space-between}.progress-track{height:11px;background:var(--surface-2);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--primary);border-radius:999px}.detail-list{margin:0}.detail-list div{display:grid;grid-template-columns:145px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--border)}.detail-list dt{color:var(--muted)}.detail-list dd{margin:0}.drawer-section h3{margin:0 0 10px;font-size:14px}dialog{width:min(600px,calc(100% - 28px));border:0;border-radius:15px;padding:22px;box-shadow:var(--shadow);color:var(--text)}dialog::backdrop{background:rgba(13,20,17,.36)}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.dialog-head h2{margin:0}
@media(max-width:1080px){.metric-grid{grid-template-columns:repeat(2,1fr)}.board-grid{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr 1fr}.span-2{grid-column:span 1}.year-calendar{grid-template-columns:repeat(3,1fr)}.list-row{grid-template-columns:36px minmax(90px,.5fr) 1fr auto}.list-row .hide-medium{display:none}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-255px;width:238px;transition:left .2s}.sidebar.open{left:0}.workspace{padding:20px 15px}.mobile-menu{display:block}.topbar{justify-content:flex-start}.top-actions{margin-left:auto}.top-actions .secondary-button,.top-actions .primary-button{display:none}.metric-grid,.content-grid,.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.page-intro{align-items:stretch;flex-direction:column}.calendar-toolbar{align-items:stretch;flex-direction:column}.calendar-nav{flex-wrap:wrap}.calendar-nav strong{width:100%;margin:5px 0 0}.year-calendar{grid-template-columns:repeat(2,1fr)}.list-row{grid-template-columns:34px 1fr auto}.list-row .list-detail{grid-column:2/-1}.toolbar{align-items:stretch;flex-direction:column}.search{min-width:0}.segmented{overflow:auto}.branch-setting{grid-template-columns:1fr 1fr}.branch-setting strong,.branch-setting .toggle-label{grid-column:1/-1}.task-summary{grid-template-columns:1fr 1fr}.detail-list div{grid-template-columns:1fr}.drawer-head,.drawer-body,.drawer-foot{padding-left:17px;padding-right:17px}}

/* Compact workspaces and independently scrolling registries */
.workspace{height:100vh;overflow:auto;padding:9px 22px 14px}.topbar{margin-bottom:6px}.topbar h1{font-size:22px}.eyebrow{font-size:10px;margin-bottom:1px}.route[data-panel="design"].active,.route[data-panel="construction"].active{height:calc(100vh - 58px);display:flex;flex-direction:column;min-height:0}.route[data-panel="design"] .page-intro,.route[data-panel="construction"] .page-intro{margin-bottom:6px}.route[data-panel="design"] .page-intro p,.route[data-panel="construction"] .page-intro p{margin-top:1px}.route[data-panel="design"] .metric-grid,.route[data-panel="construction"] .metric-grid{margin-bottom:6px;gap:8px}.route[data-panel="design"] .metric,.route[data-panel="construction"] .metric{padding:10px 13px}.route[data-panel="design"] .metric small,.route[data-panel="construction"] .metric small{margin-bottom:3px}.route[data-panel="design"] .metric strong,.route[data-panel="construction"] .metric strong{font-size:19px}.route[data-panel="design"] .metric em,.route[data-panel="construction"] .metric em{margin-top:3px}.registry-panel{display:flex;flex:1;min-height:0;flex-direction:column}.registry-head{padding:10px 14px}.registry-scroll{flex:1;min-height:180px;overflow:auto}.registry-tools{display:flex;align-items:center;gap:13px}.column-picker{position:relative}.column-picker summary{list-style:none;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:7px 10px;color:var(--text);font-size:12px;font-weight:700;cursor:pointer}.column-picker summary::-webkit-details-marker{display:none}.column-picker-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:220px;max-height:360px;overflow:auto;padding:8px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}.column-picker-menu label{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;font-size:12px;cursor:pointer}.column-picker-menu label:hover{background:var(--surface-2)}.column-picker-menu input{width:16px;height:16px}.registry-table thead th{top:0}
@media(max-width:760px){.workspace{height:auto;min-height:100vh;padding:14px 10px}.route[data-panel="design"].active,.route[data-panel="construction"].active{height:calc(100vh - 68px)}.registry-note{display:none}.registry-tools{align-self:flex-start}}
.multi-filter{position:relative}.multi-filter summary{list-style:none;height:25px;min-width:112px;padding:5px 7px;border:1px solid #d1dad5;border-radius:5px;background:#fff;color:#526159;font-size:10px;font-weight:500;cursor:pointer}.multi-filter summary::-webkit-details-marker{display:none}.multi-filter-menu{position:absolute;left:0;top:29px;z-index:30;width:185px;padding:7px;background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:0 10px 30px rgba(23,33,29,.2)}.multi-filter-menu label{display:flex;align-items:center;gap:8px;padding:6px;border-radius:5px;color:var(--text);font-size:11px;font-weight:500;cursor:pointer}.multi-filter-menu label:hover{background:var(--surface-2)}.multi-filter-menu label input{width:15px;height:15px;min-width:15px}.multi-filter-actions{display:flex;justify-content:space-between;gap:7px;padding-top:7px;margin-top:4px;border-top:1px solid var(--border)}.multi-filter-actions button{flex:1;border:0;border-radius:6px;padding:6px;background:var(--surface-2);font-size:10px;font-weight:700}.multi-filter-actions button:last-child{background:var(--primary);color:#fff}
.registry-table th>input,.registry-table th>select,.registry-table th>.multi-filter{display:none!important}.registry-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid var(--border);background:#f7f9f8}.quick-filter,.reset-filters,.toolbar-multiselect summary{height:34px;border:1px solid var(--border);border-radius:8px;background:#fff;padding:8px 11px;color:var(--text);font-size:12px;font-weight:700}.quick-filter.active{background:#2563eb;border-color:#2563eb;color:#fff}.toolbar-multiselect{position:relative}.toolbar-multiselect summary{list-style:none;cursor:pointer}.toolbar-multiselect summary::-webkit-details-marker{display:none}.toolbar-multiselect>div{position:absolute;left:0;top:39px;z-index:30;width:205px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}.toolbar-multiselect label{display:flex;align-items:center;gap:8px;padding:6px;font-size:12px}.toolbar-multiselect input{width:15px;height:15px}.toolbar-multiselect footer{display:flex;gap:7px;padding-top:7px;margin-top:5px;border-top:1px solid var(--border)}.toolbar-multiselect footer button{flex:1;border:0;border-radius:6px;padding:7px;font-size:11px;font-weight:700}.toolbar-multiselect footer button:last-child{background:#2563eb;color:#fff}.date-kind,.date-range{display:flex!important;align-items:center;gap:6px;color:var(--muted);font-size:11px}.date-kind select,.date-range input{height:34px;width:auto;padding:6px 8px;background:#fff}.reset-filters{margin-left:auto;color:var(--primary)}
.preset-filters{display:flex;padding:3px;border-radius:9px;background:#e9efeb}.preset-filters .quick-filter{height:29px;padding:5px 9px;border:0;background:transparent}.preset-filters .quick-filter.active{background:#fff;color:#2563eb;box-shadow:0 2px 7px rgba(37,99,235,.15);border:1px solid #bfdbfe}.registry-search{height:34px;min-width:280px;max-width:420px;flex:1;padding:7px 10px;background:#fff}
.task-state-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.task-state-grid label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}.task-history{display:grid;border:1px solid var(--border);border-radius:10px;overflow:hidden}.task-history button{display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid var(--border);padding:10px 12px;background:#fff;text-align:left}.task-history button:last-child{border-bottom:0}.task-history button:hover{background:var(--surface-2)}.task-history button>span{display:grid;gap:4px}.task-history small{color:var(--muted)}.billing-note{color:var(--amber)!important;font-weight:700}
.order-summary{display:none!important}.order-summary>div{display:none!important}.order-summary small,.selected-stage small{color:var(--muted)}.stage-line{display:grid;gap:0}.stage-node{position:relative;display:flex;align-items:center;gap:11px;border:0;background:transparent;padding:9px 6px;text-align:left}.stage-node:not(:last-child):after{content:"";position:absolute;left:17px;top:38px;width:2px;height:18px;background:#d7e0db}.stage-node i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#edf1ef;color:#75837b;font-style:normal;font-size:11px}.stage-node.done i{background:#dff3e6;color:#08743f}.stage-node.active{border-radius:9px;background:#f1f7f4}.stage-node.active i{background:var(--primary);color:#fff}.stage-node span{display:grid;gap:2px}.stage-node small{color:var(--muted)}.selected-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.selected-stage-head h3{margin:3px 0 0}.task-summary.compact{grid-template-columns:repeat(3,1fr);margin-top:12px}.approval-state{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:10px 12px;border-radius:9px;background:var(--surface-2)}.billing-callout{margin:12px 0 0;padding:10px 12px;border-radius:9px;background:var(--amber-soft);color:var(--amber);font-size:12px;font-weight:700}.stage-form-hint{align-self:end;padding-bottom:10px;color:var(--muted);font-weight:400}
.orders-table{min-width:1050px}.orders-table th:nth-child(3){min-width:420px}.order-progress{display:flex;align-items:center;gap:7px}.order-progress>b{color:#9aa69f;font-weight:500}.order-step{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:7px;background:#edf1ef;color:#6f7d75;font-size:11px;font-weight:700}.order-step i{font-style:normal}.order-step.done{background:#dff3e6;color:#08743f}.order-step.active{background:#e7f0ff;color:#254e9e}
.order-data-grid{display:grid;grid-template-columns:1fr 1fr;margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}.order-data-grid>div{display:grid;grid-template-columns:125px 1fr;gap:8px;padding:9px 11px;border-bottom:1px solid var(--border)}.order-data-grid>div:nth-child(odd){border-right:1px solid var(--border)}.order-data-grid>div.wide{grid-column:1/-1;border-right:0;border-bottom:0}.order-data-grid dt{color:var(--muted)}.order-data-grid dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.task-drawer{right:-760px;width:min(760px,100%);overflow-x:hidden}.drawer-body{padding:12px 20px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:10px;background:#fff;max-width:100%;box-sizing:border-box}.order-data{padding-bottom:2px}.order-info-groups{display:grid;grid-template-columns:1fr 1.15fr 1.35fr;gap:10px}.order-info-groups article{padding:13px 14px;border:1px solid var(--border);border-radius:11px;background:#fff}.order-info-groups h4{margin:0 0 9px;color:var(--primary);font-size:12px}.info-row{display:grid;gap:3px;padding:7px 0;border-top:1px solid #edf1ef}.info-row span,.order-folder span{color:var(--muted);font-size:11px}.info-row strong,.order-folder strong{font-size:13px;line-height:1.35;overflow-wrap:anywhere}.stage-line{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}.stage-node{border:1px solid var(--border);border-radius:10px;padding:10px}.stage-node:not(:last-child):after{display:none}.selected-stage{padding:15px;border-radius:12px;background:#f8faf9}.task-summary.compact .summary-box{background:#fff;border:1px solid var(--border)}
.task-drawer .drawer-head #drawer-project{margin:0;color:#0f172a;font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-0.015em}
.task-drawer .drawer-head #drawer-title{color:#64748b;font-size:13.5px;font-weight:500;line-height:1.2;letter-spacing:normal;margin-top:2px}
.task-drawer .drawer-section.order-data{padding:10px 14px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.task-drawer .order-data>h3{margin-bottom:8px;font-size:13px}
.task-drawer .order-data .order-info-groups article{border-color:#e2e8f0;box-shadow:0 1px 3px rgba(15,23,42,.03)}
.task-drawer .order-data .order-folder{border:1px solid #e2e8f0;background:#fff}
@media(max-width:760px){.order-info-groups{grid-template-columns:1fr}.task-summary.compact{grid-template-columns:1fr 1fr}.stage-line{grid-template-columns:1fr}}
.mes-process-scroll{overflow-x:auto;padding:5px 2px 10px}.mes-process{display:flex;align-items:center;min-width:max-content}.mes-step{display:flex;align-items:center;gap:8px;width:122px;min-height:72px;padding:9px;border:1px solid var(--border);border-radius:11px;background:#fff;color:var(--text);text-align:left}.mes-step i{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:50%;background:#edf1ef;color:#7d8982;font-style:normal;font-weight:800}.mes-step>span{display:grid;gap:2px;min-width:0}.mes-step strong{font-size:12px;white-space:nowrap}.mes-step small{color:var(--muted);font-size:10px}.mes-step em{color:#8a9690;font-size:9px;font-style:normal}.mes-step.done{border-color:#b9dfc8;background:#f1faf4}.mes-step.done i{background:#ccefd9;color:#08743f}.mes-step.current{border-color:#80b9a0;background:#edf8f2;box-shadow:0 0 0 2px rgba(28,107,77,.1)}.mes-step.current i{background:var(--primary);color:#fff}.mes-step.approval{border-color:#edcf8c;background:#fff9ec}.mes-step.approval i{background:#f8dda4;color:#9b6500}.mes-step.rework{border-color:#e9b49f;background:#fff5f1}.mes-step.rework i{background:#f5d4c8;color:#a14322}.mes-step.optional,.mes-step.future,.mes-step.skipped{color:#7d8982;background:#f7f9f8}.mes-step.skipped{opacity:.65}.mes-step.selected{outline:2px solid var(--primary);outline-offset:2px}.mes-connector{display:block;width:22px;height:3px;background:#dce3df}.mes-connector.passed{background:#65b184}.mes-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;color:var(--muted);font-size:10px}.mes-legend span{display:flex;align-items:center;gap:5px}.mes-legend i{width:8px;height:8px;border-radius:50%;background:#dce3df}.mes-legend i.done{background:#65b184}.mes-legend i.current{background:var(--primary)}.mes-legend i.approval{background:#e4b550}.mes-legend i.future{background:#c8d0cc}
.mes-process-scroll{padding:4px 0 7px;scrollbar-width:thin}.mes-process{align-items:center;justify-content:center;width:max-content;min-width:100%}.mes-step{display:grid;grid-template-rows:25px 18px 14px 12px;justify-items:center;align-items:center;gap:1px;width:103px;height:82px;min-height:82px;padding:7px 5px;border-radius:9px;text-align:center;overflow:hidden}.mes-step i{grid-row:1;width:23px;height:23px;flex-basis:23px}.mes-step>span{display:contents}.mes-step strong{grid-row:2;width:100%;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:16px;white-space:nowrap}.mes-step small{grid-row:3;width:100%;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:13px;white-space:nowrap}.mes-step em{grid-row:4;font-size:8px;line-height:11px}.mes-step.done{border-color:#b8d9c5;background:#f5faf7}.mes-step.done i{background:#d7efe0;color:#08743f}.mes-step.current{border-color:#91afe8;background:#f3f7ff;box-shadow:none}.mes-step.current i{background:#356dcc;color:#fff}.mes-step.approval{border-color:#e8cf97;background:#fffaf0}.mes-step.approval i{background:#f5dfa9;color:#8b620b}.mes-step.rework{border-color:#e5b9a9;background:#fff7f4}.mes-step.optional,.mes-step.future,.mes-step.skipped{border-color:#dce3df;background:#fafbfa;color:#7d8982}.mes-step.selected{outline:0;box-shadow:inset 0 -3px 0 #356dcc}.mes-connector{width:13px;height:2px;flex:0 0 13px}.mes-connector.passed{background:#7fbd97}.mes-legend i.current{background:#356dcc}
.mes-step.inferred{border-color:#b8d9c5;background:#f5faf7;color:var(--text)}.mes-step.inferred i{background:#d7efe0;color:#08743f}
.mes-step.inferred.rework{border-color:#e5b9a9;background:#fff7f4}.mes-step.inferred.rework i{background:#f5d4c8;color:#a14322}
.approval-history{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.approval-history>div{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:#fff}.approval-history i{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#edf1ef;color:#607068;font-style:normal;font-size:11px;font-weight:800}.approval-history span{display:grid;gap:2px}.approval-history small{font-size:9px;color:var(--muted)}.approval-history strong{font-size:10px}.approval-history .done i,.approval-history .approved i{background:#d7efe0;color:#08743f}.approval-history .sent i{background:#f5dfa9;color:#8b620b}.approval-history .returned i{background:#f5d4c8;color:#a14322}@media(max-width:760px){.approval-history{grid-template-columns:1fr}}
.mes-step.clickable{cursor:pointer}.mes-step.clickable:hover{border-color:#73b28c;background:#edf8f1}.historical-stage-note{margin-top:12px;padding:14px;border:1px dashed #a9cdb7;border-radius:10px;background:#f4faf6}.historical-stage-note p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.route[data-panel="orders"].active{height:calc(100vh - 58px);display:flex;flex-direction:column;min-height:0}.route[data-panel="orders"] .page-intro{margin-bottom:6px}.route[data-panel="orders"] .metric-grid{margin-bottom:6px;gap:8px}.route[data-panel="orders"] .metric{padding:10px 13px}.orders-panel{flex:1;min-height:0}.order-filterbar{flex-wrap:nowrap}.v3-orders-table{min-width:1420px}.v3-orders-table th:nth-child(2){min-width:190px}.v3-orders-table th:nth-child(3){min-width:135px}.v3-orders-table th:last-child{min-width:190px}.order-row-progress{width:95px}.next-action{color:var(--primary);font-size:11px}.v3-orders-table tbody tr{cursor:pointer}.v3-orders-table tbody tr:hover td{background:#edf6f1}@media(max-width:900px){.order-filterbar{flex-wrap:wrap}.order-filterbar .registry-search{order:3;flex-basis:100%;max-width:none}}
.status-chip.active{background:#e8f0ff;color:#285fbe}

/* Version 3: order-stage and workflow colour language */
.status-chip.stage-status-waiting{background:#f1f5f9;color:#475569;border-color:#cbd5e1;font-weight:500}
.status-chip.stage-status-in_progress{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;font-weight:600}
.status-chip.stage-status-paused{background:#fffbeb;color:#b45309;border-color:#fde68a;font-weight:600}
.status-chip.stage-status-clarification{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe;font-weight:600}
.status-chip.stage-status-pending_approval{background:#fff7ed;color:#c2410c;border-color:#fed7aa;font-weight:600}
.status-chip.stage-status-approved{background:#ecfdf5;color:#047857;border-color:#a7f3d0;font-weight:600}
.status-chip.stage-status-needs_changes{background:#fef2f2;color:#b91c1c;border-color:#fecaca;font-weight:600}
.status-chip.stage-status-completed{background:#f0fdf4;color:#15803d;border-color:#bbf7d0;font-weight:600}
.status-chip.stage-status-awaiting_payment{background:#fff1f2;color:#be123c;border-color:#fecdd3;font-weight:600}
.status-chip.stage-status-missing_spec{background:#fffbeb;color:#b45309;border-color:#fde68a;font-weight:600}
.status-chip.stage-status-blocked-both{background:#fff1f2;color:#991b1b;border-color:#fca5a5;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.status-chip.stage-status-blocked-both .chip-sep{opacity:0.45;font-weight:400}
.chip-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.25);animation:liveDotPulse 1.5s infinite;margin-right:4px;flex-shrink:0}
@keyframes liveDotPulse{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(16,185,129,.7)}70%{transform:scale(1);box-shadow:0 0 0 5px rgba(16,185,129,0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.status-chip.approval-pending_approval{background:#fff0c9;color:#986100}
.status-chip.approval-approved{background:#dcf3e5;color:#08743f}
.status-chip.approval-needs_changes{background:#ffe5dc;color:#ad4522}
.approval-empty{color:#98a39d}
.v3-orders-table tbody tr td,.orders-custom-table tbody tr td{transition:background .15s ease}
.v3-orders-table tbody tr.stage-design td{background:#e3f5e9;border-bottom-color:#9dd4b1;color:#174b2b}
.v3-orders-table tbody tr.stage-correction td{background:#fff7cc;border-bottom-color:#e8d36b;color:#66520a}
.v3-orders-table tbody tr.stage-construction td{background:#e3efff;border-bottom-color:#9fc1ec;color:#173f73}
.v3-orders-table tbody tr.stage-design td:first-child{box-shadow:inset 5px 0 #389b61}
.v3-orders-table tbody tr.stage-correction td:first-child{box-shadow:inset 5px 0 #d0ad22}
.v3-orders-table tbody tr.stage-construction td:first-child{box-shadow:inset 5px 0 #3f82d2}
.v3-orders-table tbody tr.order-completed td,.orders-custom-table tbody tr.order-completed td{background:#f1f3f2;color:#6f7974}
.v3-orders-table tbody tr.order-completed td:first-child,.orders-custom-table tbody tr.order-completed td:first-child{box-shadow:inset 4px 0 #aab2ae}
.v3-orders-table tbody tr.order-completed .next-action,.orders-custom-table tbody tr.order-completed .next-action{color:#7d8782}
.v3-orders-table tbody tr.order-completed .mini-progress span,.orders-custom-table tbody tr.order-completed .mini-progress span{background:#9ca7a1}
.v3-orders-table tbody tr:hover td,.orders-custom-table tbody tr:hover td{filter:brightness(.975)}
.v3-orders-table tbody tr.running-row td,.orders-custom-table tbody tr.running-row td{background:#e2f5e9}
.stage-label{font-weight:700}
.billable-badge{display:inline-flex;margin-left:7px;padding:3px 6px;border-radius:999px;background:#ffe2d3;color:#a64520;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.order-timer-live{display:flex;align-items:center;gap:8px;margin-right:auto;padding:9px 12px;border-radius:9px;background:#e4f4ea;color:#08743f;font-variant-numeric:tabular-nums}
.timer-dot{width:8px;height:8px;border-radius:50%;background:#20a465;box-shadow:0 0 0 4px rgba(32,164,101,.12)}
.danger-action{background:#a9472c}
.danger-action:hover{background:#923921}
.timer-conflict{color:var(--muted);font-size:12px;font-weight:700}
@keyframes pausedOrderPulse{
  0%,100%{filter:brightness(1);box-shadow:inset 0 1px rgba(224,164,42,0),inset 0 -1px rgba(224,164,42,0)}
  50%{filter:brightness(.91) saturate(1.18);box-shadow:inset 0 2px rgba(224,164,42,.5),inset 0 -2px rgba(224,164,42,.5)}
}
.v3-orders-table tbody tr.paused-row td,.orders-custom-table tbody tr.paused-row td{animation:none}
.v3-orders-table tbody tr.paused-row .stage-status-paused,
.orders-custom-table tbody tr.paused-row .stage-status-paused,
.status-chip.stage-status-paused{
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}
.v3-orders-table tbody tr.running-row td,.orders-custom-table tbody tr.running-row td{animation:runningOrderPulse 2s ease-in-out infinite}
@keyframes pausedStatusPulse{0%,100%{}}
@keyframes runningOrderPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(.91) saturate(1.2)}}
@media(prefers-reduced-motion:reduce){.v3-orders-table tbody tr.paused-row .stage-status-paused,.orders-custom-table tbody tr.paused-row .stage-status-paused,.v3-orders-table tbody tr.running-row td,.orders-custom-table tbody tr.running-row td{animation:none}}
.order-metric{appearance:none;width:100%;border:1.5px solid #bfdbfe !important;background:#fff;border-radius:12px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.order-metric:hover{transform:translateY(-1px);border-color:#3b82f6 !important;box-shadow:0 4px 14px rgba(37,99,235,.14) !important}
.order-metric.active{border-color:#2563eb !important;box-shadow:inset 0 0 0 2px #2563eb,0 4px 16px rgba(37,99,235,.18) !important;background:#fff !important}
.order-metric.active small{color:#2563eb !important;font-weight:700 !important}
.show-all-orders.active{background:var(--primary);border-color:var(--primary);color:#fff}
.today-date{display:inline-flex;padding:3px 7px;border-radius:999px;background:#dff3e6;color:#08743f;font-size:11px}
.order-date-filters{display:flex;align-items:center;gap:7px}
.order-date-filters label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px;white-space:nowrap}
.order-date-filters select,.order-date-filters input{height:32px;border:1px solid var(--border);border-radius:7px;background:#fff;padding:5px 7px;font-size:11px}
.custom-date-range{display:flex;align-items:center;gap:4px}
.custom-date-range input{width:118px}
.route[data-panel="orders"] .page-intro,.route[data-panel="orders"] .registry-head{display:none!important}
.route[data-panel="orders"] .metric-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;margin-bottom:8px;gap:8px}
.metric-text-wrap small,
.metric-text-wrap em {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.modal-input.has-error{border-color:#ef4444!important;background-color:#fef2f2!important;box-shadow:0 0 0 2px rgba(239,68,68,.15)!important}
.readiness-note.awaiting_payment{color:#a85a00}.readiness-note.missing_spec{color:#8a6b00}.readiness-note.ready_for_stage{color:#176a9b;font-weight:800}
.specification-confirm{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#f6f9f7}
.specification-confirm label{display:flex;align-items:center;gap:9px;font-weight:800}.specification-confirm input[type="checkbox"]{width:18px;height:18px}
.specification-confirm input[type="date"]{width:auto}
.planner-past-slot{background-color:#f4f5f4}
.planner-history-block{cursor:default!important}
.planner-history-block:after{content:attr(data-history-label);position:absolute;right:5px;top:4px;padding:1px 4px;border-radius:4px;background:rgba(255,255,255,.82);font-size:8px;font-weight:800;color:#607068}
.planner-history-block:not([data-history-label]):after,
.planner-history-block[data-history-label=""]:after{display:none!important}
.planner-history-worked{}.planner-history-worked:after{display:none!important}
.planner-history-paused{filter:saturate(.7);background-image:none}.planner-history-paused:after{color:#8a610e}
.planner-history-missed{filter:saturate(.5);background-image:none}.planner-history-missed:after{color:#a13c35}
.planner-history-block.planner-history-merged-next{border-bottom-style:dashed;border-bottom-color:#9ca9a3;border-bottom-left-radius:0;border-bottom-right-radius:0}
.planner-history-block.planner-history-merged-prev{top:0!important;border-top-style:dashed;border-top-color:#9ca9a3;border-top-left-radius:0;border-top-right-radius:0}
.planner-history-block .planner-merged-duplicate{display:none}
.planner-history-block.planner-history-merged-prev em{margin-top:15px}
.planner-block.planner-continuation-block{top:0!important;border-top:1px dashed #9ca9a3;border-top-left-radius:0;border-top-right-radius:0}
.planner-block.planner-continuation-block .planner-merged-duplicate{display:none}
.planner-history-block.planner-history-merged-next+.planner-continuation-block{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
.planner-consolidated-card{background:transparent!important;overflow:hidden!important;border-radius:7px!important}
.planner-consolidated-card>strong,.planner-consolidated-card>small,.planner-consolidated-card>em,.planner-consolidated-card>.planner-block-number,.planner-consolidated-card>.planner-block-product,.planner-consolidated-card>.planner-block-customer,.planner-consolidated-card>.planner-block-stage,.planner-consolidated-card>.planner-block-invoice,.planner-consolidated-card>.planner-block-time,.planner-consolidated-card>.planner-resize-handle{position:relative;z-index:3}
.planner-history-segments{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit;pointer-events:none}
.planner-consolidated-card>.planner-history-segments{opacity:1!important}
.planner-history-segment{position:absolute;left:0;right:0;display:block;border:0}
.planner-consolidated-card.planner-design .planner-history-segment-worked,
.planner-consolidated-card.planner-design .planner-history-segment-planned{background:#dcf2e4}
.planner-consolidated-card.planner-design.planner-task-family-highlight .planner-history-segment-worked{background:#ccefd7!important}
.planner-consolidated-card.planner-construction .planner-history-segment-worked,
.planner-consolidated-card.planner-construction .planner-history-segment-planned{background:#e1eeff}
.planner-consolidated-card.planner-construction.planner-task-family-highlight .planner-history-segment-worked{background:#d0e4ff!important}
.planner-consolidated-card.planner-correction .planner-history-segment-worked,
.planner-consolidated-card.planner-correction .planner-history-segment-planned{background:#fff6c7}
.planner-consolidated-card.planner-correction.planner-task-family-highlight .planner-history-segment-worked{background:#ffefaa!important}
.planner-consolidated-card .planner-history-segment-worked{background:#e8f3ed}
.planner-history-segment-worked{background:rgba(46,160,90,.14)}
.planner-history-segment-pause,
.planner-history-segment-paused{position:absolute;left:0;right:0;background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;border-top:1px dashed rgba(46,160,90,.45);border-bottom:1px dashed rgba(46,160,90,.45);pointer-events:auto}
.planner-history-segment-pause.is-top-edge,
.planner-history-segment-paused.is-top-edge{border-top:0!important}
.planner-history-segment-pause.is-bottom-edge,
.planner-history-segment-paused.is-bottom-edge{border-bottom:0!important}
.planner-consolidated-card.planner-construction .planner-history-segment-pause,
.planner-consolidated-card.planner-construction .planner-history-segment-paused{border-top-color:rgba(56,115,185,.45);border-bottom-color:rgba(56,115,185,.45)}
.planner-consolidated-card.planner-correction .planner-history-segment-pause,
.planner-consolidated-card.planner-correction .planner-history-segment-paused{border-top-color:rgba(180,150,30,.45);border-bottom-color:rgba(180,150,30,.45)}
.planner-history-segment-missed{background:rgba(182,74,66,.18)}
.planner-history-status{position:absolute!important;z-index:4!important;top:5px;right:5px;max-width:calc(100% - 10px);padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.9);font-size:8px;font-weight:800;line-height:1.1;white-space:nowrap}.planner-history-status-worked{display:none!important}.planner-history-status-paused{color:#8a610e}.planner-history-status-missed{color:#7c3330}
.settings-tabs{display:flex;gap:6px;margin-bottom:14px;padding:5px;border:1px solid var(--border);border-radius:12px;background:#e9efec;width:max-content}
.settings-tabs button{border:0;background:transparent;padding:9px 16px;border-radius:8px;font-weight:800;cursor:pointer}.settings-tabs button.active{background:#fff;box-shadow:0 2px 8px rgba(20,45,34,.1);color:var(--green)}
.settings-page{display:none}.settings-page.active{display:block}
.branch-admin-card{display:grid;grid-template-columns:minmax(240px,1.3fr) 110px 145px minmax(190px,1fr);gap:12px;align-items:end;padding:15px 0;border-top:1px solid var(--border)}
.branch-admin-card:first-child{border-top:0}.branch-admin-card.archived{opacity:.58}
.branch-admin-title{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.branch-admin-title div{display:flex;flex-direction:column;gap:3px}.branch-admin-title small,.admin-table td small{display:block;color:var(--muted);margin-top:3px}
.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}.admin-table th{font-size:12px;color:var(--muted)}.admin-table tr.inactive{opacity:.58}
.admin-dialog{width:min(760px,calc(100vw - 30px));border:0;border-radius:16px;padding:0;box-shadow:0 25px 70px rgba(0,0,0,.28)}.admin-dialog::backdrop{background:rgba(13,28,22,.48)}
.admin-dialog form{display:flex;flex-direction:column;gap:16px;padding:22px}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-dialog fieldset{border:1px solid var(--border);border-radius:10px;padding:12px}.admin-dialog legend{font-weight:800;padding:0 6px}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.check-grid label{display:flex!important;flex-direction:row!important;align-items:center!important;gap:9px!important;padding:8px 12px;background:#f8faf9;border:1px solid var(--border);border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);margin:0;transition:all .15s ease}
.check-grid label:hover{background:#edf6f1;border-color:#a5d3b9}
.check-grid label input[type="checkbox"]{width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;margin:0!important;padding:0!important;cursor:pointer;accent-color:var(--primary)}
.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.permission-grid label{display:grid;grid-template-columns:1fr 125px;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--border);border-radius:8px}.permission-grid span{font-size:12px;font-weight:700}
.user-avatar-upload-zone{display:flex;align-items:center;gap:16px;padding:12px 14px;background:#f8faf9;border:1px dashed var(--border);border-radius:12px}
.user-avatar-preview{width:56px;height:56px;border-radius:50%;background:#e2ebe6;border:2px solid var(--border);display:grid;place-items:center;font-weight:800;font-size:18px;color:#2c5b43;overflow:hidden;flex-shrink:0}
.user-avatar-preview img{width:100%;height:100%;object-fit:cover}
.user-avatar-actions{display:flex;flex-direction:column;gap:6px}
.user-avatar-actions .avatar-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;transition:all .15s}
.user-avatar-actions .avatar-btn:hover{background:#edf6f1;border-color:var(--primary);color:var(--primary)}
.user-avatar-actions .avatar-clear-btn{font-size:11px;color:#8f2d2d;background:transparent;border:0;cursor:pointer;padding:0;text-align:left}
.user-avatar-actions .avatar-clear-btn:hover{text-decoration:underline}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.admin-user-thumb{width:28px;height:28px;border-radius:50%;background:#e2ebe6;display:inline-grid;place-items:center;font-size:10px;font-weight:800;color:#2c5b43;margin-right:8px;vertical-align:middle;overflow:hidden}
.admin-user-thumb img{width:100%;height:100%;object-fit:cover}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.dialog-actions button{padding:10px 16px;border:0;border-radius:9px;font-weight:800;cursor:pointer}
@media(max-width:900px){.branch-admin-card{grid-template-columns:1fr 1fr}.branch-admin-title{grid-column:1/-1}.admin-form-grid,.permission-grid{grid-template-columns:1fr}.check-grid{grid-template-columns:1fr 1fr}}
.order-action-button.start{background:#4b4b4f;color:#fff}
.route[data-panel="orders"] .metric{padding:8px 12px}
.route[data-panel="orders"] .metric small{margin-bottom:4px}
.route[data-panel="orders"] .metric strong{font-size:20px}
.route[data-panel="orders"] .metric em{margin-top:3px}
#notification-button{display:none}
@media(max-width:1100px){.route[data-panel="orders"] .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.order-stage-select{display:none!important}
.order-stage-filters{display:flex;align-items:center;gap:5px;padding:3px;border-radius:10px;background:#e8eeeb;white-space:nowrap}
.stage-filter{height:29px;border:1px solid transparent;border-radius:7px;padding:5px 10px;background:transparent;color:#526159;font-size:11px;font-weight:800;cursor:pointer}
.stage-filter:hover{filter:brightness(.96)}
.stage-filter.active{box-shadow:0 2px 7px rgba(23,33,29,.12)}
.stage-filter.all.active{background:#fff;border-color:#cfd8d3;color:var(--text)}
.stage-filter.design.active{background:#d9f1e2;border-color:#69ac82;color:#17683c}
.stage-filter.correction.active{background:#ffe5bf;border-color:#dda354;color:#8b520c}
.stage-filter.construction.active{background:#dbeaff;border-color:#72a3dc;color:#245f9f}
@media(max-width:1150px){.order-filterbar{flex-wrap:wrap}.order-stage-filters{order:2}.order-filterbar .registry-search{order:3;flex-basis:45%}}
.route[data-panel="history"].active{height:calc(100vh - 72px);display:flex;flex-direction:column;min-height:0}
.route[data-panel="history"] .metric-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:9px;gap:9px}
.route[data-panel="history"] .metric{padding:10px 13px}
.route[data-panel="history"] .metric small{margin-bottom:3px}
.route[data-panel="history"] .metric strong{font-size:20px}
.route[data-panel="history"] .metric em{margin-top:3px}
.history-panel{flex:1;min-height:0}
.history-filterbar{flex-wrap:wrap}
.history-filterbar .registry-search{min-width:220px}
.history-filterbar .column-settings-button{margin-left:auto;height:34px}
.history-filterbar .reset-filters{margin-left:0}
.history-table{min-width:1180px}
.history-table th:first-child{min-width:125px}
.history-table th:nth-child(2){min-width:155px}
.column-settings-button{border:1px solid var(--border);border-radius:9px;padding:8px 11px;background:#fff;color:var(--text);font-size:12px;font-weight:800;cursor:pointer}
.column-settings-button.active{background:var(--primary);border-color:var(--primary);color:#fff}
.history-columns-panel{display:grid;grid-template-columns:minmax(170px,230px) 1fr auto;align-items:start;gap:14px;padding:12px 14px;border-bottom:1px solid var(--border);background:#f5f8f6}
.history-columns-panel>div:first-child{display:grid;gap:3px}
.history-columns-panel small{color:var(--muted)}
#history-columns-list{display:flex;flex-wrap:wrap;gap:6px}
.history-column-item{display:flex;align-items:center;gap:7px;padding:5px 6px 5px 9px;border:1px solid var(--border);border-radius:8px;background:#fff;font-size:11px}
.history-column-item label{display:flex;align-items:center;gap:6px;font-weight:700}
.history-column-item.enabled{cursor:grab}
.history-column-item.disabled{opacity:.58}
.column-drag-handle{color:#6d7a73;font-size:17px;font-style:normal;line-height:1;cursor:grab}
.history-column-item.dragging,[data-history-header].dragging{opacity:.35}
.history-column-item.drag-over,[data-history-header].drag-over{outline:2px solid var(--primary);outline-offset:2px;background:#e8f5ed}
.history-table{table-layout:fixed}
.history-table th{position:sticky}
.history-table.columns-editing th{overflow:visible;outline:1px dashed #78a58e;outline-offset:-2px}
.history-table.columns-editing th[draggable="true"]{cursor:grab;padding-left:27px}
.history-table.columns-editing th[draggable="true"]:before{content:"⠿";position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#237653;font-size:16px;font-weight:400;line-height:1;cursor:grab}
.history-table.columns-editing th[draggable="true"]:active:before{cursor:grabbing}
.orders-custom-table{
  table-layout:fixed;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
.orders-custom-table th,
.orders-custom-table td{
  box-sizing:border-box;
}
.orders-custom-table.columns-editing th{overflow:visible;outline:1px dashed #78a58e;outline-offset:-2px}
.orders-custom-table.columns-editing th[draggable="true"]{cursor:grab;padding-left:27px}
.orders-custom-table.columns-editing th[draggable="true"]:before{content:"⠿";position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#237653;font-size:16px;font-weight:400;line-height:1;cursor:grab}
/* Task Timer running state - Soft Blue Theme */
.timer-strip.timer-running{
  background:#eff6ff;
  border:1.5px solid #93c5fd;
  color:#1e40af;
  box-shadow:0 0 0 3px rgba(59,130,246,.16), 0 2px 8px rgba(37,99,235,.1);
  animation:pillPulseBlue 2s infinite ease-in-out;
}
@keyframes pillPulseBlue{
  0%,100%{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.16), 0 2px 8px rgba(37,99,235,.1)}
  50%{border-color:#60a5fa;box-shadow:0 0 0 5px rgba(59,130,246,.24), 0 3px 12px rgba(37,99,235,.15)}
}
/* Task Timer paused state - Muted Soft Slate */
.timer-strip.timer-paused{
  background:#f8fafc;
  border:1.5px dashed #94a3b8;
  color:#475569;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

/* Messages live centered in the topbar and never change the desk height. */
.topbar-flash-slot{
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:0 6px;
}
.topbar-flash-slot .flash{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:26px;
  height:auto;
  max-height:38px;
  padding:3px 14px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:550;
  line-height:1.25;
  text-align:center;
  max-width:min(860px, 100%);
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
  background:#f0fdf4;
  color:#166534;
  border:1px solid #bbf7d0;
  box-shadow:0 1px 4px rgba(22,101,52,0.08);
  margin:0 auto;
  z-index:10;
  pointer-events:auto;
  cursor:pointer;
  transition:all .18s ease;
}
.topbar-flash-slot .flash.is-compact{
  font-size:10.5px;
  line-height:1.2;
  padding:2px 12px;
}
.topbar-flash-slot .flash:hover{
  background:#ffffff;
  border-color:#86efac;
  box-shadow:0 3px 10px rgba(22,101,52,0.15);
  max-height:none;
  z-index:100;
}
.topbar-flash-slot .flash.is-error{
  background:#fef2f2;
  color:#991b1b;
  border-color:#fecaca;
  box-shadow:0 1px 4px rgba(153,27,27,0.08);
}
.topbar-flash-slot .flash.is-error:hover{
  background:#fff5f5;
  border-color:#f87171;
  box-shadow:0 3px 10px rgba(153,27,27,0.15);
}
.topbar-flash-slot .flash.hidden{
  display:none!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Legacy timer styles replaced by unified Soft Pill */

/* Operational desks occupy one viewport; only their data area scrolls. */
.workspace:has(.route[data-panel="orders"].active),
.workspace:has(.route[data-panel="calendar"].active),
.workspace:has(.route[data-panel="work-schedule"].active){
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.workspace:has(.route[data-panel="orders"].active) .topbar,
.workspace:has(.route[data-panel="calendar"].active) .topbar,
.workspace:has(.route[data-panel="work-schedule"].active) .topbar,
.workspace:has(.route[data-panel="orders"].active) .timer-strip,
.workspace:has(.route[data-panel="calendar"].active) .timer-strip,
.workspace:has(.route[data-panel="work-schedule"].active) .timer-strip{
  flex:0 0 auto;
}
.workspace:has(.route[data-panel="orders"].active) .timer-strip,
.workspace:has(.route[data-panel="calendar"].active) .timer-strip,
.workspace:has(.route[data-panel="work-schedule"].active) .timer-strip{
  position:relative;
  top:auto;
}
.route[data-panel="orders"].active,
.route[data-panel="calendar"].active,
.route[data-panel="work-schedule"].active{
  height:auto;
  flex:1 1 auto;
  min-height:0;
}
.route[data-panel="orders"] .orders-panel{
  overflow:hidden;
  max-width:100%;
}
.route[data-panel="orders"] #orders-list{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding-right:0 !important;
  scrollbar-gutter:auto;
}
.workspace:has(.route[data-panel="orders"].active){
  overflow-x:hidden !important;
}
.route[data-panel="orders"] #orders-list .registry-table thead{
  position:sticky;
  top:0;
  z-index:6;
}

/* One stable command bar: workspace title, system feedback and time tracking. */
.topbar{
  display:grid;
  grid-template-columns:minmax(180px,auto) 1fr auto;
  align-items:center;
  gap:12px;
  min-height:44px;
  height:44px;
  margin-bottom:6px;
}
.topbar-title-zone,
.topbar-timer-zone{
  min-width:0;
  min-height:44px;
  height:44px;
}
.topbar-flash-slot{
  min-width:0;
}
.topbar-title-zone{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:2px 8px 2px 0;
}
.topbar-title-zone .eyebrow{margin-bottom:1px}
.topbar-title-zone h1{font-size:22px;line-height:1.05}
.topbar-timer-zone{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.topbar-timer-empty{
  width:100%;
  min-height:38px;
  border:1px solid transparent;
  border-radius:11px;
}
.topbar-timer-zone:has(.timer-strip:not(.hidden)) .topbar-timer-empty,
.topbar-timer-zone:has(.break-actions) .topbar-timer-empty{display:none}
/* Unified Soft Pill Task Execution Timer (Blue Theme, 36px) */
.timer-strip,
.topbar-timer-zone .timer-strip{
  position:relative;
  top:auto;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:36px;
  min-height:36px;
  max-height:36px;
  padding:0 10px 0 5px;
  border-radius:999px;
  box-sizing:border-box;
  font-size:13px;
  line-height:1;
  user-select:none;
  white-space:nowrap;
  margin:0;
  width:auto;
  max-width:none;
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* 26x26px Icon Circle (Matching Break Buttons) */
.timer-strip-icon{
  width:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 26px !important;
  box-sizing:border-box !important;
  font-size:13px !important;
  line-height:1 !important;
  position:relative;
  transition:all .2s ease;
}
.timer-strip.timer-running .timer-strip-icon{
  background:#dbeafe;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
}
.timer-strip.timer-paused .timer-strip-icon{
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  color:#64748b;
}

/* Live dot inside icon circle */
.timer-strip .live-dot{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:7px;
  height:7px;
  border-radius:50%;
  border:1.5px solid #eff6ff;
  background:#10b981;
  box-shadow:0 0 0 2px rgba(16,185,129,.2);
  z-index:2;
}
.timer-strip.timer-running .live-dot{
  background:#10b981;
  animation:livePulse 1.8s ease-in-out infinite;
}
.timer-strip.timer-paused .live-dot{
  background:#f59e0b;
  animation:none;
}

/* Task Title Typography */
.timer-strip .timer-name{
  display:inline-flex;
  align-items:center;
  min-width:0;
  line-height:1;
}
.timer-strip .timer-name strong{
  font-size:13px;
  font-weight:700;
  line-height:1;
  color:inherit;
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.timer-strip .timer-name small{
  display:none;
}

/* Time display zone with state glyph (⏸ / ▶) */
.timer-time-wrap{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.timer-time-wrap::before{
  content:"·";
  opacity:0.55;
  margin-right:2px;
}
.timer-state-icon{
  font-size:11px;
  line-height:1;
  display:inline-block;
}
.timer-strip.timer-running .timer-state-icon{
  color:#2563eb;
}
.timer-strip.timer-paused .timer-state-icon{
  color:#d97706;
}
.timer-strip time{
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:700;
  line-height:1;
  color:inherit;
}

/* Action button (#pause-timer) */
.timer-action-btn,
.timer-strip .secondary-button#pause-timer{
  border:0 !important;
  cursor:pointer !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  margin-left:2px !important;
  transition:all .15s ease !important;
  user-select:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  box-shadow:none !important;
}
.timer-strip.timer-running .timer-action-btn,
.timer-strip.timer-running .secondary-button#pause-timer{
  background:#dbeafe !important;
  color:#1e40af !important;
}
.timer-strip.timer-running .timer-action-btn:hover,
.timer-strip.timer-running .secondary-button#pause-timer:hover{
  background:#bfdbfe !important;
  color:#1e3a8a !important;
  transform:scale(1.03) !important;
}
.timer-strip.timer-paused .timer-action-btn,
.timer-strip.timer-paused .secondary-button#pause-timer{
  background:#e0e7ff !important;
  color:#3730a3 !important;
}
.timer-strip.timer-paused .timer-action-btn:hover,
.timer-strip.timer-paused .secondary-button#pause-timer:hover{
  background:#c7d2fe !important;
  color:#312e81 !important;
  transform:scale(1.03) !important;
}

/* Timer PiP button */
.timer-pip-btn{
  border:0 !important;
  background:transparent !important;
  cursor:pointer !important;
  padding:3px 6px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1 !important;
  margin-left:2px !important;
  transition:all .15s ease !important;
  color:#64748b !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  user-select:none !important;
  height:auto !important;
  min-height:0 !important;
}
.timer-pip-btn:hover{
  background:rgba(0,0,0,0.08) !important;
  color:#1e293b !important;
  transform:scale(1.1) !important;
}
.timer-pip-btn.active{
  background:#dbeafe !important;
  color:#1d4ed8 !important;
}
.timer-strip.timer-running .timer-pip-btn{
  color:#2563eb !important;
}
.timer-strip.timer-paused .timer-pip-btn{
  color:#4f46e5 !important;
}

@media(max-width:1180px){
  .topbar{grid-template-columns:minmax(180px,24%) minmax(240px,1fr) minmax(330px,38%)}
  .topbar-timer-zone .timer-name small{display:none}
}
@media(max-width:900px){
  .topbar{grid-template-columns:auto minmax(150px,1fr);min-height:auto}
  .topbar-title-zone{grid-column:1}
  .topbar-flash-slot{grid-column:2}
  .topbar-timer-zone{grid-column:1/-1}
}
.route[data-panel="orders"] #orders-list .registry-table thead th{
  position:relative;
}
.route[data-panel="calendar"] .calendar-surface{overflow:auto;scrollbar-gutter:stable}
.route[data-panel="calendar"] .calendar-hint{flex:0 0 18px;margin:3px 0 0;line-height:15px;overflow:hidden}
.route[data-panel="work-schedule"].active{display:flex;flex-direction:column}
.route[data-panel="work-schedule"] .work-schedule-layout{flex:1 1 auto;min-height:0}
.route[data-panel="work-schedule"] .work-schedule-calendar{height:auto;min-height:0}
.order-timer-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}.order-live-time{min-width:66px;padding:5px 7px;border:1px solid rgba(20,118,83,.2);border-radius:7px;background:rgba(255,255,255,.58);color:#0b6847;font-variant-numeric:tabular-nums;font-size:12px;text-align:center}.running-row .order-live-time{background:#123f30;color:#fff;border-color:#123f30}.order-action-button{border:0;border-radius:7px;padding:6px 8px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}.order-action-button:disabled{opacity:.55;cursor:wait}.order-action-button.start{background:#147653;color:#fff}.order-action-button.pause{background:#ffdf91;color:#6c4c00}.order-action-button.finish{background:#dff1e6;color:#11643f}.order-action-button.clarification{background:#eee5ff;color:#6941a5}.order-action-note{font-size:11px;font-weight:700;color:#466057}.order-action-note.blocked{color:#9a5b31}.order-action-note.approval{color:#9a6500}.order-action-note.completed{color:#77827d}
@keyframes livePulse{50%{opacity:.45;transform:scale(.82)}}
[data-order-header].dragging{opacity:.35}
[data-order-header].drag-over,[data-order-column].drag-over{outline:2px solid var(--primary);outline-offset:2px;background:#e8f5ed}
.orders-view-switch{display:flex;gap:4px;margin-left:auto;padding:3px;border:1px solid var(--border);border-radius:10px;background:#eef2f0}.orders-view-choice{height:28px!important;padding:5px 9px!important;border-color:transparent!important}.orders-view-choice.active{background:#2f59df;color:#fff;border-color:#2f59df!important;box-shadow:0 2px 6px rgba(47,89,223,.2)}.orders-columns-compact{width:34px;height:34px!important;padding:0!important;font-size:14px!important}
.orders-kanban{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:10px;min-width:1370px;padding:12px;background:#f4f7f5;align-items:start}
.order-kanban-column{min-width:0;border:1px solid #d6dfda;border-radius:12px;background:#eef3f0;overflow:hidden}
.order-kanban-column>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-bottom:1px solid #d6dfda;background:#fff}
.order-kanban-column>header strong{font-size:13px}.order-kanban-column>header span{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:#e5ece8;color:#4d5d55;font-size:11px;font-weight:800}
.order-kanban-cards{display:grid;gap:8px;padding:8px;max-height:calc(100vh - 340px);overflow-y:auto}
.order-kanban-card{position:relative;padding:10px 11px;border:1px solid #cbd8d1;border-left:4px solid #3a9a62;border-radius:9px;background:#fff;box-shadow:0 2px 5px rgba(25,48,38,.06);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.order-kanban-card:hover{box-shadow:0 5px 14px rgba(25,48,38,.13);transform:translateY(-1px)}
.order-kanban-card.correction{border-left-color:#d0ad22;background:#fffdf2}.order-kanban-card.construction{border-left-color:#3f82d2;background:#f7faff}.order-kanban-card.completed{border-left-color:#9ca7a1;background:#f3f5f4;color:#6f7974}
.order-kanban-card-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.order-kanban-card-head strong{font-size:12px}.order-kanban-card-head span{max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#68776f;font-size:10px}
.order-kanban-card h3{margin:8px 0 2px;font-size:14px}.order-kanban-card p{margin:0;color:#728078;font-size:11px}.order-kanban-stage{margin:9px 0 7px;padding-top:7px;border-top:1px solid rgba(106,124,114,.18);font-size:11px;font-weight:800}
.order-kanban-card dl{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}.order-kanban-card dl div{min-width:0}.order-kanban-card dt{color:#7c8982;font-size:9px}.order-kanban-card dd{margin:2px 0 0;font-size:11px;font-weight:700}.kanban-empty{margin:8px;color:#87938d;font-size:11px;text-align:center}
#orders-columns-list{display:flex;flex-wrap:wrap;gap:6px}
.order-filterbar .column-settings-button{margin-left:0;height:34px}
.order-filterbar .orders-view-switch{margin-left:auto}
.order-filterbar .reset-filters{margin-left:0}

/* Planner */
.route[data-panel="calendar"].active{height:calc(100vh - 72px);display:flex;flex-direction:column;min-height:0}
.planner-actions{display:flex;align-items:center;gap:10px}
.planner-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;flex:1;min-height:0}
.planner-sidebar{display:flex;flex-direction:column;gap:12px}
.planner-layout.planner-tools-hidden{grid-template-columns:minmax(0,1fr)}
.planner-layout.planner-tools-hidden .planner-sidebar{display:none}
.planner-tools-toggle{min-width:42px;font-size:18px;line-height:1}
.planner-tools-toggle.active{background:#4b4b4f;color:#fff;border-color:#4b4b4f}
#planner-mini-calendar,.planner-legend{padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.mini-calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.mini-calendar-head button{border:0;background:transparent;cursor:pointer}
.mini-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.mini-calendar-grid small{padding:4px 0;color:var(--muted);font-size:9px}
.mini-calendar-grid button{height:27px;border:0;border-radius:7px;background:transparent;font-size:10px;cursor:pointer}
.mini-calendar-grid button:hover{background:#edf3ef}.mini-calendar-grid button.outside{color:#abb4af}.mini-calendar-grid button.today{box-shadow:inset 0 0 0 1px var(--primary)}.mini-calendar-grid button.selected{background:var(--primary);color:#fff}
.planner-legend{display:grid;gap:8px;font-size:11px}.planner-legend span{display:flex;align-items:center;gap:7px}.planner-legend span:before{content:"";width:10px;height:10px;border-radius:3px}.planner-legend .design:before{background:#389b61}.planner-legend .correction:before{background:#d0ad22}.planner-legend .construction:before{background:#3f82d2}.planner-legend .meeting:before{background:#7956c8}.planner-legend .absence:before{background:#9ba5a0}
.calendar-surface{min-height:0;overflow:auto}
.planner-time-grid{display:grid;position:relative}
.planner-corner,.planner-day-head{position:sticky;top:0;z-index:12;height:50px;border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
.planner-day-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 6px;cursor:pointer;font-family:inherit;transition:background .12s}
.planner-day-head:hover{background:#f8fafc}
.planner-head-top{display:flex;align-items:baseline;justify-content:center;gap:4px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.planner-head-weekday{font-size:11.5px;font-weight:700;color:#0f172a}
.planner-head-date{font-size:11.5px;font-weight:600;color:#475569}
.planner-head-daynum{font-weight:800;color:#0f172a}
.planner-head-badge{display:flex;align-items:center;justify-content:center;max-width:100%}
.planner-status-chip{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:999px;line-height:1.35;white-space:nowrap;background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}
.planner-status-chip::before{content:"";width:4px;height:4px;border-radius:50%;background:#10b981}
.planner-day-head.planner-weekend{background:#fde8e8;color:#991b1b;border-bottom:2px solid #f87171}
.planner-slot.planner-weekend{background-color:#fff1f1;background-image:none}
.planner-time-label{height:36px;padding:5px 7px;border-right:1px solid var(--border);border-bottom:1px solid #edf1ef;color:var(--muted);font-size:10px;background:#fafbfa}
.planner-slot{position:relative;height:36px;border-right:1px solid var(--border);border-bottom:1px solid #edf1ef;background:#fff;transition:background .12s}
.planner-slot.planner-today{background:#f5fbf7}.planner-slot.planner-today:nth-child(odd){background:#f2f9f4}
.planner-now-line{position:absolute;left:0;right:0;z-index:20;height:2px;background:#e04444;pointer-events:none}.planner-now-line:before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#e04444}.planner-now-line span{position:absolute;right:4px;top:-16px;padding:1px 4px;border-radius:4px;background:#e04444;color:#fff;font-size:9px;font-weight:800}
.compact-time-picker{position:relative}.compact-time-picker summary{display:flex;align-items:center;justify-content:space-between;height:40px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;list-style:none}.compact-time-picker summary::-webkit-details-marker{display:none}.compact-time-picker[open] summary{border-color:var(--primary);box-shadow:0 0 0 2px rgba(20,113,78,.12)}.compact-time-picker>div{position:absolute;left:0;right:0;top:44px;z-index:80;max-height:256px;overflow-y:auto;padding:3px;background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:0 12px 30px rgba(23,33,29,.2)}.compact-time-picker>div button{display:block;width:100%;height:31px;padding:6px 10px;border:0;border-radius:5px;background:#fff;text-align:left}.compact-time-picker>div button:hover{background:#e8f3ed;color:var(--primary)}
.planner-slot:nth-child(odd){background:#fcfdfc}.planner-slot.drop-target{background:#f3f8f5}
.planner-drop-preview{position:absolute;inset:2px 3px auto;z-index:15;display:grid;align-content:start;gap:2px;overflow:hidden;padding:6px 7px;border-width:2px;border-style:dashed;border-radius:7px;box-shadow:0 5px 16px rgba(22,40,31,.18);pointer-events:none;opacity:.78}
.planner-drop-preview strong{font-size:10px}.planner-drop-preview small,.planner-drop-preview em{font-size:9px;font-style:normal}
.planner-block{position:absolute;inset:2px 3px auto;z-index:5;display:grid;align-content:start;gap:2px;overflow:hidden;padding:6px 7px;border:1px solid transparent;border-radius:7px;text-align:left;cursor:grab;box-shadow:0 2px 6px rgba(22,40,31,.09)}
.planner-block-elapsed{position:absolute;z-index:1;top:0;left:0;right:0;height:0;overflow:hidden;border-bottom:2px solid #6bad86;border-radius:inherit inherit 0 0;pointer-events:none;background:#d7eadf;transition:height .8s linear}
.planner-design>.planner-block-elapsed,.planner-correction>.planner-block-elapsed,.planner-construction>.planner-block-elapsed{background:#d7eadf;border-bottom-color:#6bad86}
.planner-block-has-elapsed>strong,.planner-block-has-elapsed>small,.planner-block-has-elapsed>em,.planner-block-has-elapsed>.planner-block-number,.planner-block-has-elapsed>.planner-block-product,.planner-block-has-elapsed>.planner-block-customer,.planner-block-has-elapsed>.planner-block-stage,.planner-block-has-elapsed>.planner-block-invoice,.planner-block-has-elapsed>.planner-block-time{position:relative;z-index:2}
.planner-block strong{font-size:10px}.planner-block small,.planner-block em,.planner-block-invoice{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-style:normal}.planner-block-invoice{opacity:.76}.planner-block.dragging{opacity:.4}
.planner-block-number,.planner-block-product,.planner-block-customer,.planner-block-stage,.planner-block-invoice,.planner-block-time{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.planner-block .planner-block-number{font-size:12px;font-weight:600;line-height:1.15;margin-bottom:1px}
.planner-block-product{font-size:9px;font-weight:700}
.planner-block-customer{font-size:9px;opacity:.82}
.planner-block-stage{font-size:9px;font-weight:700}
.planner-block .planner-block-invoice{font-size:9px;opacity:.76}
.planner-block .planner-block-time{font-size:9px;font-style:normal;font-weight:600}
.planner-block-compact .planner-block-customer,.planner-block-compact .planner-block-invoice{display:none}
.planner-block-tiny{gap:1px;padding:5px 6px}
.planner-block-tiny .planner-block-product,
.planner-block-tiny .planner-block-customer,
.planner-block-tiny .planner-block-invoice,
.planner-block-tiny .planner-block-time{display:none}

.planner-block-micro{gap:0!important;padding:1px 5px!important;min-height:0!important;justify-content:center}
.planner-block-micro .planner-block-product,
.planner-block-micro .planner-block-customer,
.planner-block-micro .planner-block-invoice,
.planner-block-micro .planner-block-stage,
.planner-block-micro .planner-block-time,
.planner-block-micro small,
.planner-block-micro em,
.planner-block-micro .planner-resize-handle{display:none!important}
.planner-block-micro .planner-block-number,
.planner-block-micro strong{font-size:10px!important;line-height:1.1!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

.planner-block-sliver{padding:0!important;min-height:0!important;border-radius:4px!important;cursor:pointer!important}
.planner-block-sliver>*{display:none!important}
.planner-block-sliver:hover{filter:brightness(.92);box-shadow:0 0 0 1px currentColor}

/* Unified action buttons and compact semantic status pills */
:root{
  --action-blue:#2854d7;
  --action-blue-hover:#2146b8;
  --action-blue-soft:#e8efff;
  --action-red:#c94338;
  --action-red-hover:#ad352d;
  --action-red-soft:#fdebea;
}
.primary-button,
.order-action-button.start{
  background:var(--action-blue);
  color:#fff;
  box-shadow:0 1px 2px rgba(25,54,142,.18);
}
.primary-button:hover,
.order-action-button.start:hover{
  background:var(--action-blue-hover);
}
.primary-button:focus-visible,
.order-action-button:focus-visible{
  outline:3px solid rgba(40,84,215,.22);
  outline-offset:2px;
}
.danger-action,
.danger-button,
.primary-button.danger-action,
.secondary-button.danger-action,
.secondary-button.danger-button{
  background:var(--action-red);
  color:#fff;
  border-color:var(--action-red);
  box-shadow:0 1px 2px rgba(140,38,31,.18);
}
.danger-action:hover,
.danger-button:hover,
.primary-button.danger-action:hover,
.secondary-button.danger-action:hover,
.secondary-button.danger-button:hover{
  background:var(--action-red-hover);
  color:#fff;
}
.running-row .order-live-time{
  background:var(--action-blue);
  border-color:var(--action-blue);
  color:#fff;
}
.status-chip{
  gap:5px;
  min-height:24px;
  padding:4px 9px;
  border:1px solid transparent;
  line-height:1;
}
.status-chip::before{
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:12px;
  height:12px;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.status-chip.stage-status-waiting::before,
.status-chip.stage-status-in_progress::before,
.status-chip.stage-status-paused::before,
.status-chip.stage-status-clarification::before,
.status-chip.stage-status-pending_approval::before,
.status-chip.stage-status-needs_changes::before,
.status-chip.stage-status-approved::before,
.status-chip.stage-status-completed::before,
.status-chip.stage-status-awaiting_payment::before,
.status-chip.stage-status-missing_spec::before,
.status-chip.stage-status-blocked-both::before{display:none !important}
.status-chip.neutral::before{content:"○"}
.status-chip.active::before{content:"•"}
.status-chip.approval-approved::before,
.status-chip.success::before{content:"✓"}
.status-chip.approval-pending_approval::before,
.status-chip.warning::before{content:"!"}
.status-chip.approval-needs_changes::before,
.status-chip.stage-status-cancelled::before,
.status-chip.danger::before{content:"×"}
.status-chip.stage-status-blocked::before{content:"!"}
.status-chip.stage-status-blocked{background:var(--action-red-soft);color:var(--action-red)}
.status-chip.stage-status-cancelled{background:#f0f1f3;color:#72757c}

/* Orders without a created stage are neutral, not "Design" green. */
.orders-custom-table tbody tr.readiness-awaiting_payment td,
.orders-custom-table tbody tr.readiness-missing_spec td,
.orders-custom-table tbody tr.readiness-blocked_both td,
.orders-custom-table tbody tr.readiness-ready_for_stage td,
.v3-orders-table tbody tr.readiness-awaiting_payment td,
.v3-orders-table tbody tr.readiness-missing_spec td,
.v3-orders-table tbody tr.readiness-blocked_both td,
.v3-orders-table tbody tr.readiness-ready_for_stage td{
  background:#f5f6f7;
  color:#3f4248;
  border-bottom-color:#d9dcdf;
}
.orders-custom-table tbody tr.readiness-awaiting_payment td:first-child,
.orders-custom-table tbody tr.readiness-missing_spec td:first-child,
.orders-custom-table tbody tr.readiness-blocked_both td:first-child,
.orders-custom-table tbody tr.readiness-ready_for_stage td:first-child,
.v3-orders-table tbody tr.readiness-awaiting_payment td:first-child,
.v3-orders-table tbody tr.readiness-missing_spec td:first-child,
.v3-orders-table tbody tr.readiness-blocked_both td:first-child,
.v3-orders-table tbody tr.readiness-ready_for_stage td:first-child{
  box-shadow:inset 4px 0 #aeb3ba;
}
.orders-custom-table tbody tr.readiness-awaiting_payment:hover td,
.orders-custom-table tbody tr.readiness-missing_spec:hover td,
.orders-custom-table tbody tr.readiness-blocked_both:hover td,
.orders-custom-table tbody tr.readiness-ready_for_stage:hover td{
  background:#eef0f2;
}
.stage-progress{display:flex;align-items:stretch;gap:2px;width:108px;height:8px;padding:1px;border-radius:999px;background:#e3e6ea;overflow:hidden}
.stage-progress-segment{position:relative;flex-basis:0;min-width:3px;height:100%;overflow:hidden;border-radius:999px;background:#cfd4da}
.stage-progress-segment i{display:block;height:100%;border-radius:inherit;background:var(--action-blue)}
.stage-progress-segment.progress-done i{background:#29a564}
.stage-progress-segment.progress-paused i{background:#e3a429}
.stage-progress-segment.progress-blocked i{background:var(--action-red)}
.stage-progress-segment.progress-future i{background:#cfd4da}
.orders-custom-table td:has(.stage-progress)>small{margin-top:4px;color:#656a72;font-size:9px;font-weight:700}
.planner-block-tiny .planner-block-number{font-size:12px;line-height:1.15;margin:0}
.planner-block-tiny .planner-block-stage{font-size:9px;line-height:1.25}
.planner-block.planner-working-day{z-index:1;opacity:.18;border:1px dashed #2c9a61;background:#dff3e6;color:#087747;pointer-events:none}
.planner-block.planner-clarification{z-index:9;opacity:1 !important;filter:none !important;background:#f5f0ff !important;border:1.5px solid #a855f7 !important;color:#581c87 !important;cursor:grab;box-shadow:0 1px 4px rgba(168,85,247,0.14);touch-action:none}
.planner-block.planner-clarification:hover{border-color:#9333ea !important;box-shadow:0 2px 8px rgba(147,51,234,0.22)}
.planner-block.planner-clarification.dragging{cursor:grabbing;opacity:0.65}
.planner-block.planner-clarification:after{content:"🟣 Уточнення";position:absolute;right:6px;bottom:5px;padding:2px 6px;border-radius:999px;background:#ede9fe;color:#6b21a8;font-size:8.5px;font-weight:800;border:1px solid #ddd6fe}
.status.ready-to-plan{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;cursor:pointer;font-weight:600;transition:all .15s ease}
.status.ready-to-plan:hover{background:#dbeafe;border-color:#93c5fd;color:#1e40af;transform:translateY(-1px);box-shadow:0 2px 4px rgba(37,99,235,0.14)}
.status.ready-to-plan .ico.bg-blue{background:#dbeafe;color:#2563eb}
.clarification-note{display:grid;gap:4px;margin-top:12px;padding:11px 13px;border-radius:9px;background:#f1e9ff;color:#55318f}.clarification-note small{color:#7652ac}.clarification-note strong{font-size:13px}
.planner-time-grid.planner-drag-active .planner-block:not(.dragging){pointer-events:none}.planner-time-grid.planner-drag-active .planner-block.dragging{opacity:.16}
.planner-resize-handle{position:absolute;left:50%;z-index:8;width:30px;height:8px;transform:translateX(-50%);cursor:ns-resize;touch-action:none}
.planner-resize-handle:after{content:"";position:absolute;left:9px;right:9px;top:3px;height:2px;border-radius:2px;background:currentColor;opacity:.55}
.planner-resize-handle.top{top:-1px}.planner-resize-handle.bottom{bottom:-1px}.planner-block.resizing{z-index:12;box-shadow:0 5px 16px rgba(22,40,31,.2)}
.planner-design{background:#e3f5e9;border-color:#9dd4b1;color:#174b2b}.planner-correction{background:#fff7cc;border-color:#e8d36b;color:#66520a}.planner-construction{background:#e3efff;border-color:#9fc1ec;color:#173f73}
.planner-block.planner-task-family-highlight{z-index:18;filter:saturate(1.55) brightness(.98);border-color:currentColor;box-shadow:0 0 0 2px rgba(67,70,76,.22),0 5px 16px rgba(32,35,40,.24);animation:planner-task-family-pulse 1.15s ease-in-out infinite}
.planner-history-block.planner-task-family-highlight{opacity:1}
.planner-block.planner-task-family-highlight>.planner-block-elapsed{opacity:0}
@keyframes planner-task-family-pulse{0%,100%{box-shadow:0 0 0 1px rgba(67,70,76,.18),0 4px 12px rgba(32,35,40,.18)}50%{box-shadow:0 0 0 4px rgba(67,70,76,.12),0 7px 20px rgba(32,35,40,.3)}}
@keyframes plannerPulseGlow{0%{box-shadow:0 0 0 0 rgba(37,99,235,.85),0 4px 16px rgba(37,99,235,.4);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(37,99,235,0),0 8px 24px rgba(37,99,235,.5);transform:scale(1.03)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 4px 16px rgba(37,99,235,.4);transform:scale(1)}}
.planner-block.planner-block-highlighted{z-index:60!important;border-color:#2563eb!important;outline:2px solid #2563eb!important;outline-offset:2px!important;animation:plannerPulseGlow 1.2s ease-in-out 3!important}
@media(prefers-reduced-motion:reduce){.planner-block.planner-task-family-highlight,.planner-block.planner-block-highlighted{animation:none}}
.planner-meeting{background:#eee8ff;border-color:#c5b4ed;color:#4d3387}.planner-training{background:#ddf5f1;border-color:#9ed8cd;color:#185b51}.planner-presentation{background:#f5e5f4;border-color:#dfacd9;color:#71336a}.planner-absence{background:#ecefed;border-color:#c8ceca;color:#59635e;background-image:repeating-linear-gradient(135deg,transparent 0,transparent 6px,rgba(90,105,97,.08) 6px,rgba(90,105,97,.08) 12px)}
@media(max-width:900px){.planner-layout{grid-template-columns:1fr}.planner-sidebar{display:none}.planner-actions{flex-wrap:wrap}}
@media(max-width:1200px){.route[data-panel="history"] .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.history-table.columns-editing tbody{display:table-row-group;visibility:visible;opacity:1}
.column-resizer{position:absolute;right:-6px;top:0;z-index:12;width:13px;height:100%;cursor:col-resize;touch-action:none;user-select:none}
.column-resizer:after{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:2px;border-radius:2px;background:#2d8b61}
.route[data-panel="work-schedule"].active{height:calc(100vh - 82px);overflow:hidden}
.work-schedule-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.work-schedule-owner{display:flex;align-items:end;gap:9px}.work-schedule-owner>strong{align-self:center;margin-right:5px}.work-schedule-owner label{display:grid;gap:3px;color:var(--muted);font-size:10px;font-weight:700}.work-schedule-owner select{min-width:165px;padding:7px 9px}
@media(max-width:900px){.work-schedule-toolbar{align-items:stretch;flex-direction:column;gap:9px}.work-schedule-owner{align-items:stretch;flex-wrap:wrap}.work-schedule-owner>strong{width:100%}}
:root{
  --work-border:#bfe8cf;
  --work-bg:#ffffff;
  --work-accent:#24b36b;

  --vac-border:#9fd8ff;
  --vac-bg:#f4fbff;
  --vac-accent:#2f9df4;

  --sick-border:#f2ce67;
  --sick-bg:#fffaf0;
  --sick-accent:#e1a51a;

  --leave-border:#d8c0ff;
  --leave-bg:#faf7ff;
  --leave-accent:#9857f1;

  --weekend-border:#efbcc2;
  --weekend-bg:#fff8f8;
  --weekend-accent:#df5b67;
}

.route[data-panel="work-schedule"].active{height:calc(100vh - 44px);display:flex;flex-direction:column;overflow:hidden}
.work-schedule-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex-shrink:0}
.work-schedule-owner{display:flex;align-items:center;gap:9px}.work-schedule-owner>strong{align-self:center;margin-right:5px}.work-schedule-owner label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:700}.work-schedule-owner select{min-width:165px;padding:6px 9px;border-radius:8px;border:1px solid var(--border)}
@media(max-width:900px){.work-schedule-toolbar{align-items:stretch;flex-direction:column;gap:9px}.work-schedule-owner{align-items:stretch;flex-wrap:wrap}.work-schedule-owner>strong{width:100%}}

/* Work Schedule Month & Year Selectors in Toolbar */
.work-schedule-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}
.schedule-nav-select {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  border-radius: 999px;
  padding: 0 28px 0 14px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text, #0f172a);
  background-color: var(--surface-2, #f1f5f9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
  border: 1px solid var(--border, #cbd5e1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all .15s ease;
  user-select: none;
}
.schedule-nav-select:hover {
  background-color: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.06);
}
.schedule-nav-select:focus {
  outline: none;
  border-color: var(--primary, #2f66e8);
  box-shadow: 0 0 0 3px rgba(47,102,232,0.15);
  background-color: #ffffff;
}
#work-schedule-month-select {
  min-width: 120px;
}
#work-schedule-year-select {
  min-width: 82px;
}
#work-schedule-today.active-month {
  background: #ffffff;
  border-color: #2f66e8;
  color: #2f66e8;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(47,102,232,0.12);
}

/* 2-Column Work Schedule Layout */
.work-schedule-layout{
  display:flex;
  gap:12px;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.work-schedule-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.work-schedule-sidebar{
  width:280px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  min-height:0;
}

.work-schedule-container{
  background:#fff;
  border:1px solid #e3e8ef;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(30,42,60,.06);
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}

.work-schedule-legend{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:8px 16px;border-bottom:1px solid #e3e8ef;background:#fff;
  flex-shrink:0;
}
.work-schedule-legend .legend-item{
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:#667085;font-weight:700;
}
.work-schedule-legend .legend-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
}

.work-schedule-scroll-wrap{
  flex:1;
  min-height:0;
  overflow-x:auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}

.work-schedule-weekheads{
  display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));
  min-width:770px;
  background:#fafbfc;border-bottom:1px solid #e3e8ef;
  flex-shrink:0;
}
.work-schedule-weekheads div{
  padding:8px 10px;font-size:11px;font-weight:800;color:#8691a1;
  text-transform:uppercase;letter-spacing:.05em;text-align:center;
}

.work-schedule-grid{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:770px;
}

.work-schedule-grid .week{
  display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));
  min-width:770px;
  flex:1;min-height:86px;
}
.work-schedule-grid .week:not(:last-child){
  border-bottom:1px solid #e3e8ef;
}

/* Sidebar Widgets: Mini Calendar & Stats */
.work-schedule-mini{
  padding:12px;
  border:1px solid #e3e8ef;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 18px rgba(30,42,60,.04);
}
.work-schedule-mini .mini-calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.work-schedule-mini .mini-calendar-head strong{
  font-size:13px;
  font-weight:800;
  color:#1e293b;
  text-transform:capitalize;
}
.work-schedule-mini .mini-calendar-head button{
  width:26px;
  height:26px;
  border:1px solid #e3e8ef;
  border-radius:7px;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:all .15s;
}
.work-schedule-mini .mini-calendar-head button:hover{
  background:#edf2f7;
  color:#0f172a;
  border-color:#cbd5e1;
}
.work-schedule-mini .mini-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
  text-align:center;
}
.work-schedule-mini .mini-calendar-grid small{
  padding:4px 0;
  color:#94a3b8;
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
}
.work-schedule-mini .mini-calendar-grid button{
  height:28px;
  border:0;
  border-radius:7px;
  background:transparent;
  font-size:11px;
  font-weight:600;
  color:#334155;
  cursor:pointer;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:all .12s;
}
.work-schedule-mini .mini-calendar-grid button:hover{
  background:#f1f5f9;
  color:#0f172a;
}
.work-schedule-mini .mini-calendar-grid button.outside{
  color:#cbd5e1;
}
.work-schedule-mini .mini-calendar-grid button.today{
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:800;
  box-shadow:inset 0 0 0 1.5px #3b82f6;
}
.work-schedule-mini .mini-calendar-grid button.selected{
  background:#2563eb !important;
  color:#fff !important;
  font-weight:800;
}
.work-schedule-mini .mini-calendar-grid button .mini-dot{
  position:absolute;
  bottom:2px;
  width:4px;
  height:4px;
  border-radius:50%;
}

.work-schedule-stats{
  padding:12px;
  border:1px solid #e3e8ef;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 18px rgba(30,42,60,.04);
}
.work-schedule-stats-title{
  font-size:11px;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.work-schedule-stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.work-schedule-stat-card{
  padding:6px 8px;
  border-radius:8px;
  background:#f8fafc;
  border:1px solid #eef2f6;
  display:flex;
  flex-direction:column;
}
.work-schedule-stat-card.span-2{
  grid-column:1 / -1;
  background:#f0fdf4;
  border-color:#bbf7d0;
}
.work-schedule-stat-label{
  font-size:10px;
  color:#64748b;
  font-weight:600;
}
.work-schedule-stat-value{
  font-size:13px;
  font-weight:800;
  color:#1e293b;
  margin-top:2px;
}
.work-schedule-stat-card.span-2 .work-schedule-stat-value{
  color:#15803d;
}

@media(max-width:1020px){
  .work-schedule-layout{flex-direction:column;overflow-y:auto}
  .work-schedule-sidebar{width:100%;overflow-y:visible}
}

.work-schedule-grid .day{
  min-height:92px;
  cursor:pointer;
  border-right:1px solid #e3e8ef;
  padding:8px 10px;
  position:relative;
  background:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .15s ease;
}
.work-schedule-grid .week .day:last-child{border-right:0}
.work-schedule-grid .day:hover{background:#f8fafc}
.work-schedule-grid .day.outside{background:#f7f9fb}
.work-schedule-grid .day.weekend-col{background:#fffdfd}
.work-schedule-grid .day.outside.weekend-col{background:#fafafa}

.work-schedule-grid .date{
  font-size:13.5px;font-weight:850;color:#111827;line-height:1.2;
}
.work-schedule-grid .outside .date{color:#aeb8c5}

.work-schedule-grid .today-chip{
  position:absolute;top:7px;right:8px;
  font-size:9.5px;font-weight:800;color:#2f66e8;background:#eef4ff;
  padding:3px 7px;border-radius:999px;letter-spacing:0.02em;
}

/* Colored status cards */
.work-schedule-grid .status-card{
  width:100%;min-height:48px;
  border-radius:12px;
  border:1.5px solid var(--card-border);
  background:var(--card-bg);
  padding:6px 9px 7px;
  display:flex;flex-direction:column;justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}
.work-schedule-grid .day:hover .status-card{
  box-shadow:0 4px 12px rgba(30,42,60,.07);
  transform:translateY(-1px);
}

.work-schedule-grid .card-top{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-bottom:4px;
}
.work-schedule-grid .card-time{
  font-size:10.5px;color:#6f7a89;font-weight:700;line-height:1.2;
}
.work-schedule-grid .card-hours{
  font-size:10px;color:#586274;font-weight:800;white-space:nowrap;
}
.work-schedule-grid .card-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.work-schedule-grid .status-name{
  font-size:11.5px;font-weight:700;color:#263143;line-height:1.2;
  letter-spacing:-0.01em;
}
.work-schedule-grid .tag{
  min-width:22px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:800;line-height:1;
  font-family:inherit;background:var(--tag-bg);color:var(--accent);border:1px solid var(--tag-border);
}

.work-schedule-grid .work{--card-border:var(--work-border);--card-bg:var(--work-bg);--accent:var(--work-accent);--tag-bg:#eefbf4;--tag-border:#bfe8cf}
.work-schedule-grid .vac{--card-border:var(--vac-border);--card-bg:var(--vac-bg);--accent:var(--vac-accent);--tag-bg:#eef8ff;--tag-border:#9fd8ff}
.work-schedule-grid .sick{--card-border:var(--sick-border);--card-bg:var(--sick-bg);--accent:var(--sick-accent);--tag-bg:#fff5dc;--tag-border:#f2ce67}
.work-schedule-grid .leave{--card-border:var(--leave-border);--card-bg:var(--leave-bg);--accent:var(--leave-accent);--tag-bg:#f5edff;--tag-border:#d8c0ff}
.work-schedule-grid .off{--card-border:var(--weekend-border);--card-bg:var(--weekend-bg);--accent:var(--weekend-accent);--tag-bg:#fff0f1;--tag-border:#efbcc2}

.work-schedule-grid .day.selected{box-shadow:inset 0 0 0 2px var(--blue,#2f66e8)}

/* Month boundary treatment */
.work-schedule-grid .month-start{border-left:2px solid #cfd6df !important}
.work-schedule-grid .next-month-start{border-left:2px solid #cfd6df !important}
.work-schedule-grid .previous-month-end{box-shadow:inset -1px 0 0 #cfd6df}
.work-schedule-grid .current-month-end{box-shadow:inset -1px 0 0 #cfd6df}

/* Day settings popover */
.day-popover{
  position:fixed;z-index:500;width:310px;background:#fff;
  border:1px solid #e3e8ef;border-radius:16px;
  box-shadow:0 18px 48px rgba(31,42,69,.18);
  padding:14px;display:none;
  box-sizing:border-box;
  max-height:calc(100vh - 24px);
  overflow-y:auto;
  transition:top 0.18s cubic-bezier(0.16,1,0.3,1), left 0.18s cubic-bezier(0.16,1,0.3,1);
}
.day-popover.show{display:block}
.pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.pop-title{font-size:16px;font-weight:800;color:#1f2937}
.pop-sub{margin-top:2px;font-size:11px;color:#8a95a6}
.pop-close{width:30px;height:30px;border:0;border-radius:9px;background:#f3f5f8;color:#697386;font-size:18px;cursor:pointer;display:grid;place-items:center}
.pop-close:hover{background:#e2e8f0;color:#0f172a}
.pop-label{font-size:11px;color:#7d8796;font-weight:700;margin:9px 0 5px}
.pop-input,.pop-select{width:100%;height:38px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;color:#243043;padding:0 10px;font-size:13px;font-weight:650;font-family:inherit}
.pop-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.pop-row>div{min-width:0}
.pop-save{width:100%;height:40px;border:0;border-radius:10px;background:#3569e8;color:#fff;font-size:13px;font-weight:800;cursor:pointer;margin-top:12px;font-family:inherit;transition:background .15s}
.pop-save:hover{background:#2557ce}
.pop-divider{height:1px;background:#edf0f4;margin:12px 0 4px}

/* 30-minute time spinner controls */
.time-field{display:grid;grid-template-columns:minmax(0,1fr) 28px;width:100%;align-items:stretch}
.time-field .pop-input{width:100%;min-width:0;padding-right:10px;border-radius:10px 0 0 10px;border-right:0}
.time-spin{position:static;width:28px;height:38px;border:1px solid #e3e8ef;border-left:1px solid #e3e8ef;display:grid;grid-template-rows:1fr 1fr;overflow:hidden;border-radius:0 10px 10px 0;background:#fafbfc}
.time-spin button{width:100%;border:0;background:transparent;color:#738095;font-size:9px;line-height:1;padding:0;cursor:pointer;display:grid;place-items:center}
.time-spin button:first-child{border-bottom:1px solid #e3e8ef}
.time-spin button:hover{background:#eef3fb;color:#2f66e8}
.planner-day-head.planner-weekend,
.planner-day-head.planner-calendar-weekend,
.planner-day-head.planner-nonworking-day{background:#fde8e8!important;color:#991b1b!important;box-shadow:none!important;border-bottom:2px solid #f87171!important}
.planner-day-head.planner-weekend .planner-head-weekday,
.planner-day-head.planner-weekend .planner-head-daynum,
.planner-day-head.planner-calendar-weekend .planner-head-weekday,
.planner-day-head.planner-calendar-weekend .planner-head-daynum,
.planner-day-head.planner-nonworking-day .planner-head-weekday,
.planner-day-head.planner-nonworking-day .planner-head-daynum{color:#991b1b!important}
.planner-day-head.planner-weekend .planner-head-date,
.planner-day-head.planner-calendar-weekend .planner-head-date,
.planner-day-head.planner-nonworking-day .planner-head-date{color:#b91c1c!important}
.planner-day-head.planner-weekend .planner-status-chip,
.planner-day-head.planner-calendar-weekend .planner-status-chip,
.planner-day-head.planner-nonworking-day .planner-status-chip{background:#fee2e2!important;color:#991b1b!important;border:1px solid #fca5a5!important}
.planner-day-head.planner-weekend .planner-status-chip::before,
.planner-day-head.planner-calendar-weekend .planner-status-chip::before,
.planner-day-head.planner-nonworking-day .planner-status-chip::before{display:none}

.planner-slot.planner-weekend,
.planner-slot.planner-weekend:nth-child(odd),
.planner-slot.planner-nonworking-day,
.planner-slot.planner-nonworking-day:nth-child(odd){background-color:#fff1f1!important;background-image:none!important;box-shadow:none}

.planner-day-head.planner-holiday-day{background:#fef3c7!important;color:#854d0e!important;border-bottom:2px solid #eab308!important;border-right-color:#fef08a!important}
.planner-day-head.planner-holiday-day .planner-head-weekday,
.planner-day-head.planner-holiday-day .planner-head-daynum{color:#854d0e!important}
.planner-day-head.planner-holiday-day .planner-head-date{color:#a16207!important}
.planner-day-head.planner-holiday-day .planner-status-chip{background:#fde68a!important;color:#854d0e!important;border:1px solid #fcd34d!important}
.planner-day-head.planner-holiday-day .planner-status-chip::before{display:none}
.planner-slot.planner-holiday-day{background-color:#fffdf7!important;background-image:none!important;box-shadow:none;border-right-color:#fef08a!important}
.planner-slot.planner-holiday-day.planner-slot-alt{background-color:#fef9c3!important}
.planner-slot.planner-holiday-day.planner-half-hour-boundary{border-bottom:1px dashed #fef08a!important}
.planner-slot.planner-holiday-day.planner-hour-boundary{border-bottom:1px solid #fde047!important}

.planner-day-head.planner-sick-day{background:#ffedd5!important;color:#9a3412!important;border-bottom:2px solid #f97316!important;border-right-color:#fed7aa!important}
.planner-day-head.planner-sick-day .planner-head-weekday,
.planner-day-head.planner-sick-day .planner-head-daynum{color:#9a3412!important}
.planner-day-head.planner-sick-day .planner-head-date{color:#c2410c!important}
.planner-day-head.planner-sick-day .planner-status-chip{background:#fed7aa!important;color:#9a3412!important;border:1px solid #fdba74!important}
.planner-day-head.planner-sick-day .planner-status-chip::before{display:none}
.planner-slot.planner-sick-day{background-color:#fffaf5!important;background-image:none!important;box-shadow:none;border-right-color:#fed7aa!important}
.planner-slot.planner-sick-day.planner-slot-alt{background-color:#ffedd5!important}
.planner-slot.planner-sick-day.planner-half-hour-boundary{border-bottom:1px dashed #fed7aa!important}
.planner-slot.planner-sick-day.planner-hour-boundary{border-bottom:1px solid #fdba74!important}

.planner-day-head.planner-vacation-day{background:#e0f2fe!important;color:#0369a1!important;border-bottom:2px solid #38bdf8!important;border-right-color:#bae6fd!important}
.planner-day-head.planner-vacation-day .planner-head-weekday,
.planner-day-head.planner-vacation-day .planner-head-daynum{color:#0369a1!important}
.planner-day-head.planner-vacation-day .planner-head-date{color:#0284c7!important}
.planner-day-head.planner-vacation-day .planner-status-chip{background:#bae6fd!important;color:#0369a1!important;border:1px solid #7dd3fc!important}
.planner-day-head.planner-vacation-day .planner-status-chip::before{display:none}
.planner-slot.planner-vacation-day{background-color:#f8fcff!important;background-image:none!important;box-shadow:none;border-right-color:#bae6fd!important}
.planner-slot.planner-vacation-day.planner-slot-alt{background-color:#e0f2fe!important}
.planner-slot.planner-vacation-day.planner-half-hour-boundary{border-bottom:1px dashed #bae6fd!important}
.planner-slot.planner-vacation-day.planner-hour-boundary{border-bottom:1px solid #7dd3fc!important}

.planner-day-head.planner-dayoff-day{background:#f3e8ff!important;color:#6b21a8!important;border-bottom:2px solid #a855f7!important;border-right-color:#e9d5ff!important}
.planner-day-head.planner-dayoff-day .planner-head-weekday,
.planner-day-head.planner-dayoff-day .planner-head-daynum{color:#6b21a8!important}
.planner-day-head.planner-dayoff-day .planner-head-date{color:#7e22ce!important}
.planner-day-head.planner-dayoff-day .planner-status-chip{background:#e9d5ff!important;color:#6b21a8!important;border:1px solid #d8b4fe!important}
.planner-day-head.planner-dayoff-day .planner-status-chip::before{display:none}
.planner-slot.planner-dayoff-day{background-color:#faf5ff!important;background-image:none!important;box-shadow:none;border-right-color:#e9d5ff!important}
.planner-slot.planner-dayoff-day.planner-slot-alt{background-color:#f3e8ff!important}
.planner-slot.planner-dayoff-day.planner-half-hour-boundary{border-bottom:1px dashed #e9d5ff!important}
.planner-slot.planner-dayoff-day.planner-hour-boundary{border-bottom:1px solid #d8b4fe!important}

.planner-slot.planner-lunch-slot{background-image:repeating-linear-gradient(135deg,rgba(111,122,116,.08) 0,rgba(111,122,116,.08) 5px,transparent 5px,transparent 10px)}
.planner-slot.planner-today.planner-lunch-slot{background-image:repeating-linear-gradient(135deg,rgba(30,105,215,.14) 0,rgba(30,105,215,.14) 5px,transparent 5px,transparent 10px)!important}
.planner-slot.planner-weekend.planner-lunch-slot,.planner-slot.planner-nonworking-day.planner-lunch-slot,.planner-slot.planner-vacation-day.planner-lunch-slot,.planner-slot.planner-sick-day.planner-lunch-slot,.planner-slot.planner-holiday-day.planner-lunch-slot,.planner-slot.planner-dayoff-day.planner-lunch-slot{background-image:none}
.planner-day-head.today{position:sticky!important;top:0;background:#eff6ff!important;color:#1d4ed8!important;box-shadow:inset 0 2px 0 #2563eb!important;border-bottom:2px solid #2563eb!important}
.planner-day-head.today::before{display:none!important;content:none!important}
.planner-day-head.today .planner-head-weekday,
.planner-day-head.today .planner-head-daynum{color:#1d4ed8!important;font-weight:800}
.planner-day-head.today .planner-status-chip{background:#2563eb!important;color:#fff!important;border-color:#2563eb!important}
.planner-day-head.today .planner-status-chip::before{background:#fff}
.planner-slot.planner-today{box-shadow:inset 2px 0 rgba(19,131,79,.2),inset -2px 0 rgba(19,131,79,.2)}
.work-schedule-day.today{z-index:3;background:#eaf2ff!important;color:#173f83!important;box-shadow:inset 0 0 0 3px #3973d6,0 3px 10px rgba(38,93,180,.18)}
.work-schedule-day.today span{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:999px;background:#2f67c5;color:#fff;box-shadow:0 2px 7px rgba(35,83,164,.28)}
.work-schedule-day.today::after{content:"Сьогодні";right:9px;top:9px;padding:3px 7px;border-radius:999px;background:#d7e6ff;color:#1e55ad;font-size:10px;font-weight:900;letter-spacing:.01em}
.work-schedule-day.today small{color:#174b9b;font-weight:900}
.work-schedule-day.today.selected{box-shadow:inset 0 0 0 3px #3973d6,inset 0 0 0 6px #fff,0 3px 10px rgba(38,93,180,.2)}
.planner-slot:nth-child(odd){background-color:#fff}
.planner-slot.planner-today,.planner-slot.planner-today:nth-child(odd){background-color:#f1f6ff;box-shadow:inset 1px 0 #1677ff,inset -1px 0 #1677ff}
.planner-slot.planner-outside-hours,.planner-slot.planner-outside-hours:nth-child(odd){background-color:#f3f4f4!important;background-image:repeating-linear-gradient(135deg,rgba(102,113,107,.08) 0,rgba(102,113,107,.08) 5px,transparent 5px,transparent 10px)!important}
.planner-slot.planner-today.planner-outside-hours{box-shadow:inset 1px 0 #1677ff,inset -1px 0 #1677ff}
.planner-corner{left:0;z-index:30;background:#f4f7f5}
.planner-time-label{position:sticky;left:0;z-index:25;background:#fafbfa;box-shadow:1px 0 0 var(--border)}
@media(max-width:980px){.work-schedule-layout{grid-template-columns:1fr}.work-schedule-editor{position:static}.work-schedule-day{min-height:80px}}
.workspace:has(.route[data-panel="calendar"].active) .route[data-panel="calendar"].active,
.workspace:has(.route[data-panel="work-schedule"].active) .route[data-panel="work-schedule"].active{
  height:auto;
  flex:1 1 auto;
  min-height:0;
}
.route[data-panel="calendar"] .planner-time-label,
.route[data-panel="calendar"] .planner-slot{
  height:var(--planner-slot-px,34px);
}
.route[data-panel="calendar"] .planner-time-label.planner-half-hour-boundary,
.route[data-panel="calendar"] .planner-slot.planner-half-hour-boundary{border-bottom:1px dashed #d9dfdc}
.route[data-panel="calendar"] .planner-time-label.planner-hour-boundary,
.route[data-panel="calendar"] .planner-slot.planner-hour-boundary{border-bottom:1px solid #cbd3cf}
.route[data-panel="calendar"] .planner-time-label.planner-half-hour-boundary{padding-top:5px;border-bottom-color:transparent}
.route[data-panel="calendar"] .planner-time-label.planner-hour-boundary{padding-top:0}
.planner-slot.planner-reserve-slot,.planner-slot.planner-reserve-slot:nth-child(odd){background-color:#edf6fa!important;background-image:none!important}
.planner-slot.planner-reserve-slot.planner-half-hour-boundary{border-bottom:1px dashed #d3e0e6}
.route[data-panel="calendar"] .planner-time-grid{
  padding-bottom:7px;
  background:var(--surface);
}
.workspace:has(.route[data-panel="calendar"].active) .topbar,
.workspace:has(.route[data-panel="work-schedule"].active) .topbar{
  height:44px;
  min-height:44px;
  max-height:44px;
  margin-bottom:5px;
}
.workspace:has(.route[data-panel="calendar"].active) .topbar-title-zone,
.workspace:has(.route[data-panel="calendar"].active) .topbar-flash-slot,
.workspace:has(.route[data-panel="calendar"].active) .topbar-timer-zone,
.workspace:has(.route[data-panel="calendar"].active) .topbar-timer-empty,
.workspace:has(.route[data-panel="work-schedule"].active) .topbar-title-zone,
.workspace:has(.route[data-panel="work-schedule"].active) .topbar-flash-slot,
.workspace:has(.route[data-panel="work-schedule"].active) .topbar-timer-zone,
.workspace:has(.route[data-panel="work-schedule"].active) .topbar-timer-empty{
  height:44px;
  min-height:44px;
  max-height:44px;
}
.workspace:has(.route[data-panel="calendar"].active) .topbar-title-zone h1{font-size:20px}
.workspace:has(.route[data-panel="calendar"].active) .topbar-title-zone .eyebrow{font-size:9px}
.route[data-panel="calendar"].active{height:calc(100vh - 44px)}
.route[data-panel="calendar"] .calendar-toolbar{margin-bottom:6px}
.route[data-panel="work-schedule"].active{height:calc(100vh - 44px)}
.route[data-panel="work-schedule"] .work-schedule-toolbar{margin-bottom:6px}
.route[data-panel="calendar"] .calendar-toolbar .segmented{padding:3px}
.route[data-panel="calendar"] .calendar-toolbar .segmented button{padding:6px 11px}

/* Planner & Schedule Toolbar Unified Soft Pill Buttons (36px) */
.calendar-toolbar .secondary-button,
.work-schedule-toolbar .secondary-button{
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  border-radius: 999px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-sizing: border-box;
  background: var(--surface-2, #f1f5f9);
  color: var(--text, #1e293b);
  border: 1px solid var(--border, #cbd5e1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all .15s ease;
  cursor: pointer;
  user-select: none;
}
.calendar-toolbar .secondary-button:hover,
.work-schedule-toolbar .secondary-button:hover{
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.06);
}
.calendar-toolbar .secondary-button:active,
.work-schedule-toolbar .secondary-button:active{
  transform: translateY(0);
}
/* Circular navigation buttons: ☷, ←, → (Absolute 1:1 perfect circles) */
.calendar-toolbar #planner-tools-toggle,
.calendar-toolbar #calendar-prev,
.calendar-toolbar #calendar-next,
.work-schedule-toolbar #work-schedule-prev,
.work-schedule-toolbar #work-schedule-next{
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  flex: 0 0 36px !important;
  font-size: 14px !important;
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
}
/* Planner Zoom Controls (36px soft pill matching) */
.planner-zoom-controls{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-2, #f1f5f9);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border, #cbd5e1);
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.calendar-toolbar .planner-zoom-controls .zoom-btn,
.planner-zoom-controls .zoom-btn{
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: none !important;
  background: #ffffff !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}
.calendar-toolbar .planner-zoom-controls .zoom-btn:hover,
.planner-zoom-controls .zoom-btn:hover{
  background: #f8fafc !important;
  color: #0f172a !important;
  transform: scale(1.05) !important;
}
.calendar-toolbar .planner-zoom-controls .zoom-btn:active,
.planner-zoom-controls .zoom-btn:active{
  transform: scale(0.95) !important;
}
.planner-zoom-display{
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  min-width: 62px;
  text-align: center;
  user-select: none;
}
#planner-vzoom-display{
  cursor: pointer;
  min-width: 54px;
}
#planner-vzoom-display:hover{
  opacity: .75;
}

/* Soft Pill Status & Timer Buttons */
.break-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.time-pill-btn{
  position:relative;
  overflow:hidden;
  border-radius:999px;
  width:154px;
  height:36px;
  min-height:36px;
  max-height:36px;
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  padding:0 12px 0 5px;
  border:1.5px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  background:#fff;
}
.time-pill-btn:hover:not(:disabled){
  transform:translateY(-1px);
}
.time-pill-btn:active:not(:disabled){
  transform:translateY(0);
}
.time-pill-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
  filter:grayscale(.2);
}
.time-pill-progress{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  border-radius:999px;
  width:var(--progress, 0%);
  transition:width .3s ease;
  z-index:1;
  pointer-events:none;
}
.time-pill-content{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:100%;
}
.time-pill-icon{
  width:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:13px !important;
  line-height:1 !important;
  flex:0 0 26px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  transition:transform .2s ease, background-color .2s ease !important;
}
.time-pill-text{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  min-width:0;
  white-space:nowrap;
  line-height:1;
}
.time-pill-title{
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}
.time-pill-sub{
  font-size:12.5px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  opacity:0.85;
}
.time-pill-sub::before{
  content:"· ";
  opacity:0.55;
  margin-right:1px;
}
.time-pill-badge{
  font-size:9.5px;
  font-weight:700;
  padding:1px 6px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
}

/* Coffee Break Button (Purple theme) */
.time-pill-btn.break-coffee{
  background:#faf5ff;
  border-color:#d8b4fe;
  color:#581c87;
}
.time-pill-btn.break-coffee .time-pill-progress{
  background:#ede9fe;
}
.time-pill-btn.break-coffee .time-pill-icon{
  background:#f3e8ff;
  border:1px solid #d8b4fe;
  color:#7e22ce;
}
.time-pill-btn.break-coffee .time-pill-sub{
  color:#7e22ce;
}
.time-pill-btn.break-coffee:hover:not(:disabled){
  border-color:#c084fc;
  box-shadow:0 3px 10px rgba(126,34,206,.1);
}
.time-pill-btn.break-coffee.is-active{
  border-color:#a855f7;
  box-shadow:0 0 0 3px rgba(168,85,247,.22), 0 3px 12px rgba(126,34,206,.15);
  animation:pillPulsePurple 2s infinite ease-in-out;
}
.time-pill-btn.break-coffee.is-active .time-pill-icon{
  background:#7e22ce;
  border-color:#6b21a8;
  color:#fff;
  transform:scale(1.04);
}
.time-pill-btn.break-coffee.is-active .time-pill-progress{
  background:#e9d5ff;
}
.time-pill-btn.break-coffee .time-pill-badge{
  background:#7e22ce;
  color:#fff;
}

/* Lunch Button (Amber / Warm Yellow theme) */
.time-pill-btn.break-lunch{
  background:#fffbeb;
  border-color:#fde68a;
  color:#78350f;
}
.time-pill-btn.break-lunch .time-pill-progress{
  background:#fef3c7;
}
.time-pill-btn.break-lunch .time-pill-icon{
  background:#fef3c7;
  border:1px solid #fde68a;
  color:#b45309;
}
.time-pill-btn.break-lunch .time-pill-sub{
  color:#b45309;
}
.time-pill-btn.break-lunch:hover:not(:disabled){
  border-color:#fcd34d;
  box-shadow:0 3px 10px rgba(180,83,9,.1);
}
.time-pill-btn.break-lunch.is-active{
  border-color:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.22), 0 3px 12px rgba(180,83,9,.15);
  animation:pillPulseAmber 2s infinite ease-in-out;
}
.time-pill-btn.break-lunch.is-active .time-pill-icon{
  background:#b45309;
  border-color:#92400e;
  color:#fff;
  transform:scale(1.04);
}
.time-pill-btn.break-lunch.is-active .time-pill-progress{
  background:#fde68a;
}
.time-pill-btn.break-lunch .time-pill-badge{
  background:#b45309;
  color:#fff;
}

/* Active Timer color synchronization */
.break-countdown{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  min-height:36px;
  max-height:36px;
  padding:0 12px 0 5px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  box-sizing:border-box;
  transition:all .2s ease;
  user-select:none;
}
.break-countdown .break-timer-icon{
  width:26px !important;
  min-width:26px !important;
  max-width:26px !important;
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:13px !important;
  line-height:1 !important;
  flex:0 0 26px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.break-countdown .break-timer-text{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.break-countdown.is-coffee{
  background:#faf5ff;
  border:1.5px solid #c084fc;
  color:#6b21a8;
  box-shadow:0 0 0 3px rgba(168,85,247,.18), 0 3px 10px rgba(126,34,206,.1);
  animation:pillPulsePurple 2s infinite;
}
.break-countdown.is-coffee .break-timer-icon{
  background:#7e22ce;
  color:#fff;
}
.break-countdown.is-coffee .btn-stop-break{
  color:#581c87;
  font-weight:800;
  cursor:pointer;
  border:0;
  background:#ede9fe;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  margin-left:4px;
  transition:all .15s ease;
}
.break-countdown.is-coffee .btn-stop-break:hover{
  background:#d8b4fe;
  color:#3b0764;
}
.break-countdown.is-lunch{
  background:#fffbeb;
  border:1.5px solid #f59e0b;
  color:#b45309;
  box-shadow:0 0 0 3px rgba(245,158,11,.18), 0 3px 10px rgba(180,83,9,.1);
  animation:pillPulseAmber 2s infinite;
}
.break-countdown.is-lunch .break-timer-icon{
  background:#b45309;
  color:#fff;
}
.break-countdown.is-lunch .btn-stop-break{
  color:#78350f;
  font-weight:800;
  cursor:pointer;
  border:0;
  background:#fef3c7;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  margin-left:4px;
  transition:all .15s ease;
}
.break-countdown.is-lunch .btn-stop-break:hover{
  background:#fde68a;
  color:#451a03;
}
@keyframes pillPulsePurple{
  0%,100%{box-shadow:0 0 0 3px rgba(168,85,247,.22),0 3px 12px rgba(126,34,206,.15)}
  50%{box-shadow:0 0 0 5px rgba(168,85,247,.32),0 4px 16px rgba(126,34,206,.22)}
}
@keyframes pillPulseAmber{
  0%,100%{box-shadow:0 0 0 3px rgba(245,158,11,.22),0 3px 12px rgba(180,83,9,.15)}
  50%{box-shadow:0 0 0 5px rgba(245,158,11,.32),0 4px 16px rgba(180,83,9,.22)}
}
.planner-block-progress{display:none!important}
.planner-block.planner-coffee-break{background:#F8F3FE!important;border:1px solid #D8B4FE!important;color:#7E22CE!important}
.planner-block.planner-lunch-break{background:#F1F5F9!important;border:1px solid #CBD5E1!important;color:#475569!important}
.route[data-panel="calendar"] .planner-layout{flex:1 1 auto;min-height:0;overflow:hidden}
.route[data-panel="calendar"] .calendar-surface{height:100%;min-height:0;flex:1 1 auto}
.overtime-dialog{max-width:620px;border:0;border-radius:20px;padding:24px;box-shadow:0 24px 70px rgba(17,38,30,.28)}
.overtime-dialog::backdrop{background:rgba(17,38,30,.5)}
.overtime-dialog p{line-height:1.5}
.overtime-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.overtime-actions #overtime-pause{grid-column:1/-1}
@media(max-width:700px){.overtime-actions{grid-template-columns:1fr}}
.field-help{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:500}
.order-folder{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px}
.order-folder>span,.order-folder>strong{grid-column:1}
.order-folder>strong{overflow-wrap:anywhere}
.order-folder-open{grid-column:2;grid-row:1/3;white-space:nowrap}
@media(max-width:620px){.order-folder{grid-template-columns:1fr}.order-folder-open{grid-column:1;grid-row:auto;justify-self:start}}
.order-context-section{padding-bottom:14px;border-bottom:1px solid var(--border)}
.order-context-groups{grid-template-columns:minmax(150px,.8fr) minmax(280px,2fr)}
@media(max-width:760px){.order-context-groups{grid-template-columns:1fr}}
/* Compact stage creation and branch estimation settings */
.next-stage-dialog{width:min(620px,calc(100vw - 32px));padding:24px}
.next-stage-dialog .dialog-head{margin-bottom:12px}
.stage-order-context{margin:0 0 18px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);font-size:13px;color:var(--muted)}
.stage-fields{align-items:start}
.stage-fields label{grid-template-rows:18px 42px}
.stage-fields input,.stage-fields select{height:42px}
.stage-limit{padding:10px 12px;border-radius:9px;background:#fff5d6;border:1px solid #efd58a;color:#775600;font-size:13px;font-weight:700}
.stage-form-hint{color:var(--muted);font-size:12px}
.branch-setting{grid-template-columns:minmax(130px,1fr) 105px 140px 95px 190px auto}

@media (max-width:760px){
  .branch-setting{grid-template-columns:1fr 1fr}
  .branch-setting strong,
  .branch-setting .toggle-label{grid-column:1/-1}
}
.order-data{position:relative}
.order-edit-button{position:static;display:block;margin:-4px 0 12px auto}
.order-history{margin:24px 0 8px;padding:20px 4px 8px;border-top:1px solid var(--border)}
.order-history-head{margin-bottom:14px}
.order-history-head .eyebrow{margin:0 0 3px;color:var(--muted)}
.order-history-head h3{margin:0}
.product-analytics-kpi-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px;padding:12px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}
@media(max-width:680px){.product-analytics-kpi-bar{grid-template-columns:repeat(2,1fr);gap:8px}}
.analytics-kpi-card{display:flex;flex-direction:column;gap:3px}
.analytics-kpi-card .kpi-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.analytics-kpi-card .kpi-value{font-size:15px;font-weight:800;color:#0f172a}
.analytics-kpi-card .kpi-sub{font-size:11.5px;font-weight:600}
.analytics-kpi-card.kpi-ok .kpi-sub{color:#16a34a}
.analytics-kpi-card.kpi-warn .kpi-sub{color:#ea580c}
.work-history,.order-history-data{margin:0 0 18px}
.work-history-header,.order-history-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.work-history h4,.order-history-data h4{margin:0;font-size:14px;font-weight:700}
.work-history-product-tag{font-size:12px;font-weight:600;color:#1e40af;background:#dbeafe;padding:2px 8px;border-radius:6px}
.work-history-product{margin:0 0 12px}.work-history-product>h5{margin:0;padding:7px 10px;border-radius:8px 8px 0 0;background:#eef2f7;font-size:13px}
.work-history-compact-stage{border:1px solid var(--border);border-top:0;background:#fff}.work-history-compact-stage:first-of-type{border-top:1px solid var(--border);border-radius:8px 8px 0 0}.work-history-compact-stage:last-child{border-radius:0 0 8px 8px;overflow:hidden}.work-history-compact-stage:only-of-type{border-radius:8px;overflow:hidden}
.work-history-compact-stage>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;list-style:none}.work-history-compact-stage>summary::-webkit-details-marker{display:none}.work-history-compact-stage>summary span{color:var(--muted);font-size:12px}
.stage-metric-summary{font-size:11.5px;color:#64748b;font-weight:500}
.stage-status-chip{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700}
.stage-status-chip.badge-running{background:#dcfce7;color:#15803d}
.stage-status-chip.badge-finished{background:#f1f5f9;color:#475569}
.stage-status-chip.badge-paused{background:#fef3c7;color:#b45309}
.work-history-user{color:#64748b;font-size:11px;font-weight:500;display:inline-block;margin-left:4px}
.work-history-compact-stage .work-history-list{border:0;border-top:1px solid var(--border);border-radius:0}
.work-history-list{margin:0;padding:0;border:1px solid var(--border);border-radius:10px;list-style:none;overflow:hidden}
.work-history-row{display:grid;grid-template-columns:115px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border-bottom:1px solid #e8ecea;background:#fff}
.work-history-row:last-child{border-bottom:0}.work-history-row>time,.work-history-row>span{display:grid;gap:1px}.work-history-row time b{font-size:12px}.work-history-row time span,.work-history-row small{color:var(--muted);font-size:11px}.work-history-row>span strong{font-size:13px}.work-history-row>em{font-size:12px;font-style:normal;font-weight:700;white-space:nowrap}
.work-history-row.work-history-pause{background:#fffaf0}.work-history-row.work-history-pause strong,.work-history-row.work-history-pause>em{color:#956200}
@media(max-width:620px){.work-history-row{grid-template-columns:88px minmax(0,1fr) auto;gap:7px;padding:8px}.work-history-row>span strong{font-size:12px}}
.order-history-timeline{display:flex;flex-direction:column;gap:8px}
.order-history-entry{border:1px solid #e2e8f0;border-radius:10px;background:#fff;transition:border-color .15s ease}
.order-history-entry:hover{border-color:#cbd5e1}
.order-history-entry[open]{border-color:#94a3b8;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.order-history-entry summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;cursor:pointer;list-style:none;user-select:none}
.order-history-entry summary::-webkit-details-marker{display:none}
.history-summary-left{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.history-timestamp{font-family:monospace,ui-monospace,sans-serif;font-size:11.5px;font-weight:700;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;padding:2px 7px;border-radius:6px;white-space:nowrap}
.history-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap}
.history-badge-оплата{background:#dcfce7;color:#15803d}
.history-badge-тз{background:#e0e7ff;color:#4338ca}
.history-badge-параметри{background:#fef3c7;color:#b45309}
.history-badge-фото{background:#fce7f3;color:#be185d}
.history-badge-таймер{background:#f3e8ff;color:#7e22ce}
.history-badge-терміни{background:#ffedd5;color:#c2410c}
.history-badge-норматив{background:#fee2e2;color:#b91c1c}
.history-badge-замовлення{background:#e0f2fe;color:#0369a1}
.history-badge-передача{background:#f1f5f9;color:#334155}
.history-badge-дані,.history-badge-зміна,.history-badge-оновлення,.history-badge-подія{background:#f1f5f9;color:#475569}
.history-title{font-size:13px;font-weight:600;color:#0f172a}
.history-summary-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.history-actor{font-size:11.5px;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;padding:2px 8px;border-radius:999px;white-space:nowrap}
.history-chevron{font-size:12px;color:#94a3b8;transition:transform .2s ease}
.order-history-entry[open] .history-chevron{transform:rotate(180deg)}
.order-history-details{padding:10px 14px 14px;border-top:1px solid #e2e8f0;background:#f8fafc;border-radius:0 0 10px 10px}
.order-history-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:12px;color:#64748b}
.history-diff-table{display:flex;flex-direction:column;gap:6px}
.history-diff-row{display:grid;grid-template-columns:140px minmax(90px,1fr) 20px minmax(90px,1fr);gap:8px;align-items:center;padding:5px 8px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;font-size:12.5px}
.diff-field{font-weight:600;color:#475569}
.diff-before{color:#64748b;background:#f1f5f9;padding:2px 6px;border-radius:4px;word-break:break-word}
.diff-arrow{color:#94a3b8;text-align:center;font-weight:bold}
.diff-after{color:#0f172a;background:#ecfdf5;padding:2px 6px;border-radius:4px;font-weight:600;word-break:break-word}
.history-reason-box{margin-top:8px;padding:8px 12px;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;font-size:12.5px;color:#92400e}
@media(max-width:620px){.history-diff-row{grid-template-columns:1fr;gap:4px}.diff-arrow{display:none}}
.order-edit-dialog{width:min(720px,calc(100vw - 32px))}
.form-validation-alert{border:1px solid #e04b4b;border-radius:10px;background:#fff1f1;color:#9f2020;padding:11px 13px;font-size:13px;line-height:1.35}.form-validation-alert ul{margin:6px 0 0;padding-left:19px}.order-edit-dialog :is(input,select,textarea).field-invalid{border-color:#d93636!important;background:#fff7f7!important;box-shadow:0 0 0 3px rgba(217,54,54,.14)!important}.order-edit-dialog :is(input,select,textarea).field-invalid:focus{outline:0}
.stage-norm-warning{margin-top:14px;padding:14px;border:1px solid #e6b94b;border-radius:12px;background:#fff6d9;color:#78520b}
.stage-norm-warning p{margin:5px 0 10px}
.trash-actions{display:flex;align-items:center;gap:8px;white-space:nowrap}.trash-actions .secondary-button{padding:7px 10px}
.login-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:#eef3f0}.login-screen.hidden{display:none}.login-card{width:min(420px,100%);display:grid;gap:18px;padding:34px;border:1px solid #d7e0db;border-radius:18px;background:#fff;box-shadow:0 22px 60px rgba(21,33,28,.16)}.login-card .brand-mark{width:48px;height:48px}.login-card h1{margin:4px 0 6px}.login-card p{margin:0;color:#68756f}.login-card label{display:grid;gap:7px;font-weight:700}.login-card input{width:100%;padding:12px 13px;border:1px solid #cbd6d0;border-radius:9px}.login-error{padding:10px 12px!important;border-radius:8px;background:#fff0ee;color:#a83428!important}.app-auth-hidden{visibility:hidden}
.backup-list{display:grid;gap:7px}.backup-row{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:14px;align-items:center;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:#f8faf9}.backup-row small{color:var(--muted)}.backup-ok{color:var(--primary)}.backup-failed{color:#b33a32}
.products-editor-section{display:grid;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#f7f8f8}
.products-editor-head,.product-editor-title{display:flex;align-items:center;justify-content:space-between;gap:14px}
.products-editor-head h3{margin:0 0 3px}.products-editor-head small{color:var(--muted)}
#products-editor{display:grid;gap:10px}
.product-editor-row{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(150px,1fr) 110px minmax(150px,1fr);gap:10px;padding:12px;border:1px solid #d5d9dc;border-radius:10px;background:#fff}
.product-editor-row{position:relative;border-left:4px solid var(--action-blue);box-shadow:0 1px 3px rgba(29,48,92,.06);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.product-editor-row:focus-within{border-color:#9db4f3;border-left-color:var(--action-blue);background:#fbfcff;box-shadow:0 0 0 3px rgba(40,84,215,.1)}
.product-editor-title{align-items:center}
.product-editor-title>strong{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:5px 9px;border-radius:7px;background:var(--action-blue-soft);color:#2149bc;font-size:13px;line-height:1}
.product-editor-title>strong:before{content:"▣";font-size:11px;color:var(--action-blue)}
.invoice-mode-field{display:flex;gap:24px;align-items:center;margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:10px}.invoice-mode-field legend{padding:0 6px;font-weight:700}.invoice-mode-field label{display:flex;align-items:center;gap:8px}
.shared-invoice-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.product-invoice-fields{display:none;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px;border:1px solid #d7dce7;border-radius:9px;background:#f7f9ff}
.product-specification-fields{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:10px;padding:11px 12px;border:1px solid #d7dce7;border-radius:9px;background:#f7f9ff}
.multi-products .product-specification-fields{display:grid}
.product-check{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;align-self:end;min-height:40px;font-weight:800}
.product-check input{width:18px;height:18px;margin:0}
.product-payment-zone{display:grid;grid-template-rows:auto 40px;gap:6px;min-width:0}
.product-payment-heading{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:8px}
.product-payment-heading span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#4f5560;white-space:nowrap}
.product-payment-heading input{width:16px;height:16px;margin:0}
.product-payment-zone>input{width:100%;min-width:0}
.separate-invoices .product-invoice-fields{display:grid}.separate-invoices #shared-invoice-fields{display:none}
.product-editor-title{grid-column:1/-1}
.product-row-remove{width:30px;height:30px;border:0;border-radius:8px;background:#eceeef;color:#4d4e52;font-size:20px;cursor:pointer}
.product-row-remove:hover{background:#ffe7e4;color:#a83329}
@media(max-width:900px){.product-editor-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.product-editor-row{grid-template-columns:1fr}.products-editor-head{align-items:flex-start;flex-direction:column}.invoice-mode-field{align-items:flex-start;flex-direction:column;gap:10px}.shared-invoice-fields,.product-invoice-fields,.product-specification-fields{grid-template-columns:1fr}}
.project-group-row{cursor:pointer}
.project-group-row td{border-top-width:2px}
.project-group-row td:first-child:before{content:"›";display:inline-block;margin-right:7px;color:#696b70;font-size:18px;transition:transform .16s}
.project-badge{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid #9da0a6;border-radius:5px;background:#eceef0;color:#44464b;font-size:10px;line-height:1.2;letter-spacing:.06em}
.multi-invoice-badge{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid #9da0a6;border-radius:5px;background:#eceef0;color:#44464b;font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.06em}
.project-product-row td{background:#f7f8f9}
.project-product-row td:first-child{padding-left:30px;border-left:3px solid #aeb1b6}
.product-child-name:before{content:"↳";margin-right:7px;color:#8a8d92}
.product-transfer-grid,.product-invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.product-transfer-grid .wide{grid-column:1/-1}
.product-transfer-grid button,.product-invoice-grid button{justify-self:start}
.product-transfer-grid #cancel-product-transfer{grid-column:2;grid-row:3}
.product-transfer-trigger{justify-self:start}
.product-transfer-confirmation{padding:12px;border:3px solid #25c43a;border-radius:9px;background:#fff}
.action-requires-attention{opacity:.72;cursor:not-allowed}
.field-needs-attention{outline:3px solid #d9a323;outline-offset:3px;transition:outline-color .2s}
.stage-requirement-note{padding:11px 13px;border:1px solid #e2b84f;border-radius:9px;background:#fff5d8;color:#765514;font-weight:700;line-height:1.35}
.product-invoice-list{display:grid;gap:8px}.product-invoice-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:#fff}.product-invoice-row span:first-child{display:grid;gap:3px}.product-invoice-row small{color:var(--muted)}
@media(max-width:620px){.product-invoice-row{grid-template-columns:1fr auto}.product-invoice-row button{grid-column:1/-1;justify-self:start}}
@media(max-width:620px){.product-transfer-grid,.product-invoice-grid{grid-template-columns:1fr}.product-transfer-grid #cancel-product-transfer{grid-column:1;grid-row:auto}}

/* Final safeguard: a row without an actual stage never inherits a workflow colour. */
.orders-custom-table tbody tr.stage-none td,
.orders-custom-table tbody tr.stage-none:nth-child(even) td,
.orders-custom-table tbody tr.stage-none.running-row td{
  background:#f3f4f5;
  color:#3f4248;
  border-bottom-color:#d8dadd;
}
.orders-custom-table tbody tr.stage-none td:first-child{
  box-shadow:inset 4px 0 #aeb3ba;
}
.orders-custom-table tbody tr.stage-none:hover td{background:#ebeef0}

/* Keep the project hierarchy readable: the neutral parent stays grey,
   while products without a stage remain white. */
.orders-custom-table tbody tr.project-product-row.stage-none td,
.orders-custom-table tbody tr.project-product-row.stage-none:nth-child(even) td,
.orders-custom-table tbody tr.project-product-row.stage-none.running-row td{
  background:#fff;
}
.orders-custom-table tbody tr.project-product-row.stage-none:hover td{
  background:#f7f9fc;
}
.project-product-list{display:grid;gap:10px}.project-product-summary{width:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:center;text-align:left;border:1px solid #d8dde5;border-left:4px solid #2f5be7;border-radius:10px;background:#fff;padding:12px 14px;color:inherit;cursor:pointer}.project-product-summary:hover{border-color:#2f5be7;background:#f5f8ff;box-shadow:0 4px 14px rgba(47,91,231,.12)}.project-product-summary span{display:flex;min-width:0;flex-direction:column;gap:4px}.project-product-summary small{color:#68707d;white-space:normal}.project-summary-card .order-folder{margin-top:12px}@media(max-width:720px){.project-product-summary{grid-template-columns:1fr}}
.planner-block.planner-reserve{background:#cfff9b;border-color:#73c73f;color:#285c12}.planner-block.planner-break{background:#fff1c7;border-color:#e6b94f;color:#72520a}.planner-block.planner-lunch{background:#ffe0a8;border-color:#df9f32;color:#70450a}

/* Unified Modern Modal & Drawer (Reference Design) */
.task-drawer{right:-840px;width:min(780px,96vw);background:#ffffff;box-shadow:-12px 0 40px rgba(15,23,42,0.14);border-left:1px solid #e2e8f0;border-top-left-radius:18px;border-bottom-left-radius:18px}
.task-drawer.open{right:0}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:13px 22px 11px;border-bottom:1px solid #f1f5f9;background:#fff;border-top-left-radius:18px}
.modal-title-group{display:grid;gap:2px}
#drawer-project{font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-0.015em;color:#0f172a;margin:0}
.order-subnum-row{display:flex;align-items:center;gap:8px;margin-top:2px}
.product-code-pill{font-size:12px;font-weight:700;color:#64748b;background:#f1f5f9;padding:2px 7px;border-radius:5px}
.product-name-heading,#drawer-title{font-size:13.5px;font-weight:500;color:#64748b;margin:0}
.modal-close-btn,.close-button{border:0;background:#f1f5f9;color:#64748b;border-radius:50%;width:32px;height:32px;font-size:18px;display:grid;place-items:center;cursor:pointer;transition:all 0.15s ease}
.modal-close-btn:hover,.close-button:hover{background:#fee2e2;color:#dc2626}
.drawer-body{padding:12px 20px;gap:10px;background:#ffffff;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;max-width:100%;width:100%;box-sizing:border-box}
.drawer-section{min-width:0;max-width:100%;width:100%;box-sizing:border-box}

/* Multi-Product Switcher Tabs */
.products-tabs-bar{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:0}
.prod-tab-chip{background:#f8fafc;border:1px solid #e2e8f0;border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:all 0.15s ease}
.prod-tab-chip:hover{background:#f1f5f9;color:#0f172a}
.prod-tab-chip.active{background:#eff6ff;border-color:#3b82f6;color:#1d4ed8;box-shadow:0 1px 3px rgba(37,99,235,0.12)}
.prod-tab-chip .pos-tag{background:#2563eb;color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px}
.prod-tab-chip:not(.active) .pos-tag{background:#cbd5e1;color:#475569}

/* Controls Bar */
.order-controls-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.controls-left-group{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.section-badge-clean{font-size:13px;font-weight:600;color:#475569;display:flex;align-items:center;gap:6px;letter-spacing:-0.01em}
.order-controls-bar .order-edit-button{background:#ffffff;border:1px solid #cbd5e1;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;color:#334155;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all 0.15s ease;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.order-controls-bar .order-edit-button:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}

/* Section 1: 3 Refined Info Cards */
.drawer-section.order-data{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.order-info-section{display:grid;gap:8px}
.section-title,.order-data>h3{font-size:13px;font-weight:600;color:#475569;margin:0;letter-spacing:-0.01em;display:flex;align-items:center;gap:6px}
.order-info-cards-grid,.order-info-groups{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px}
@media(max-width:680px){.order-info-cards-grid,.order-info-groups{grid-template-columns:1fr}}

.info-card,.order-info-groups article,.info-subcard{background:#ffffff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(15,23,42,0.03);transition:border-color 0.15s ease,box-shadow 0.15s ease;padding:0}
.info-card:hover,.order-info-groups article:hover,.info-subcard:hover{border-color:#cbd5e1;box-shadow:0 3px 8px rgba(15,23,42,0.05)}

.subcard-head,.info-card-header{background:#f8fafc;border-bottom:1px solid #f1f5f9;padding:6px 11px;display:flex;align-items:center;justify-content:space-between;margin:0}
.subcard-head-title,.info-card-header strong,.order-info-groups h4{font-size:12px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:5px;margin:0}
.subcard-head-icon,.info-card-icon{font-size:13px;display:inline-flex}

.subcard-body,.info-card-body{padding:7px 11px;display:flex;flex-direction:column;gap:4px}
.subcard-row,.info-field,.info-row{display:flex;flex-direction:column;gap:1px;padding:0;border:none}
.subcard-label,.info-field .label,.info-row span{font-size:10px;color:#64748b;font-weight:500;letter-spacing:0.01em}
.subcard-value,.info-field .val,.info-row strong{font-size:12.5px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:6px;line-height:1.25;overflow-wrap:anywhere}
.subcard-value.mono,.mono-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:#0f172a;white-space:nowrap;flex-shrink:0}
.subcard-row .subcard-value.mono{white-space:nowrap;flex-shrink:0}

.pill-chip,.status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;width:fit-content}
.pill-chip.ok,.status-badge.badge-paid{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.pill-chip.warn,.status-badge.badge-pending{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.pill-chip.neutral,.status-badge.badge-production{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}

.pill-chip.interactive{cursor:pointer;user-select:none;transition:all 0.15s ease}
.pill-chip.interactive:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(15,23,42,0.08);border-color:#64748b}
.pill-chip.interactive:active{transform:translateY(0)}
.pill-chip.interactive .edit-hint{font-size:10px;opacity:0.55;margin-left:2px;transition:opacity 0.15s ease}
.pill-chip.interactive:hover .edit-hint{opacity:1}

/* Payment & TZ Quick Modal Dialog */
.preview-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,0.45);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn 0.15s ease-out}
.preview-modal-dialog{background:#ffffff;border-radius:16px;width:100%;max-width:480px;box-shadow:0 20px 40px rgba(15,23,42,0.2);border:1px solid #e2e8f0;overflow:hidden;display:flex;flex-direction:column;animation:slideUp 0.2s cubic-bezier(0.16,1,0.3,1)}
@keyframes slideUp{from{transform:translateY(12px) scale(0.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.preview-modal-head{padding:18px 22px;border-bottom:1px solid #f1f5f9;display:flex;align-items:flex-start;justify-content:space-between;background:#f8fafc}
.btn-close-modal{border:0;background:#e2e8f0;color:#64748b;width:28px;height:28px;border-radius:50%;font-size:18px;display:grid;place-items:center;cursor:pointer;transition:all 0.15s ease}
.btn-close-modal:hover{background:#fee2e2;color:#dc2626}
.preview-modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:16px;max-height:70vh;overflow-y:auto}
.modal-form-section{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px}
.modal-section-title{font-size:12.5px;font-weight:700;color:#1e293b;margin:0;display:flex;align-items:center;gap:6px}
.modal-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-field{display:flex;flex-direction:column;gap:4px}
.modal-field label{font-size:11px;font-weight:600;color:#64748b}
.modal-input{background:#ffffff;border:1px solid #cbd5e1;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:500;color:#0f172a;outline:none;transition:border-color 0.15s ease}
.modal-input:focus{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.15)}
.modal-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.modal-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:600;color:#1e293b;user-select:none}
.modal-switch input{position:absolute;opacity:0;width:0;height:0}
.slider{position:relative;width:36px;height:20px;background:#cbd5e1;border-radius:20px;transition:all 0.2s ease;display:inline-block}
.slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;bottom:2px;background:#ffffff;border-radius:50%;transition:all 0.2s ease;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.modal-switch input:checked + .slider{background:#16a34a}
.modal-switch input:checked + .slider::before{transform:translateX(16px)}
.preview-modal-foot{padding:14px 22px;background:#f8fafc;border-top:1px solid #f1f5f9;display:flex;align-items:center;justify-content:flex-end;gap:10px}

/* Modern Order Edit Dialog (matches New Order layout) */
dialog.order-edit-dialog{width:min(740px,calc(100% - 28px));max-width:740px;border:1px solid #e2e8f0;border-radius:18px;padding:0;background:#ffffff;box-shadow:0 25px 60px rgba(15,23,42,0.22);color:#0f172a;overflow:hidden;animation:slideUp 0.2s cubic-bezier(0.16,1,0.3,1)}
dialog.order-edit-dialog::backdrop{background:rgba(15,23,42,0.48);backdrop-filter:blur(4px)}
.edit-dialog-header{padding:16px 22px;background:#f8fafc;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between}
.edit-dialog-icon{font-size:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb}
.edit-dialog-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:0.05em;color:#2563eb;text-transform:uppercase}
.edit-dialog-title{margin:1px 0 0;font-size:17px;font-weight:800;color:#0f172a}
.edit-dialog-body{padding:20px 22px;max-height:74vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px;background:#f8fafc}
.form-section-edit{background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(15,23,42,0.03);display:flex;flex-direction:column;gap:14px;transition:border-color 0.15s ease}
.form-section-edit:hover{border-color:#cbd5e1}
.section-head-edit{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #f1f5f9}
.section-step-num{width:24px;height:24px;border-radius:50%;background:#eff6ff;color:#2563eb;font-size:12px;font-weight:800;display:grid;place-items:center}
.section-title-text{font-size:13.5px;font-weight:750;color:#0f172a}
.grid-2-edit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3-edit{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}
.grid-4-edit{display:grid;grid-template-columns:2fr 1.3fr 1fr 1.3fr;gap:12px}
@media (max-width:680px){.grid-2-edit,.grid-3-edit,.grid-4-edit{grid-template-columns:1fr}}
.field-group-edit{display:flex;flex-direction:column;gap:5px}
.field-group-edit.span-full{grid-column:1 / -1}
.field-label-edit{font-size:11.5px;font-weight:700;color:#334155;display:flex;align-items:center;gap:4px}
.field-label-edit .req{color:#dc2626;font-weight:800}
.edit-dialog-footer{padding:14px 22px;background:#ffffff;border-top:1px solid #f1f5f9;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.btn-foot-outline{background:#ffffff;border:1px solid #cbd5e1;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:600;color:#475569;cursor:pointer;transition:all 0.15s ease}
.btn-foot-outline:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8}
.btn-foot-primary{background:#2563eb;border:1px solid #1d4ed8;border-radius:9px;padding:8px 18px;font-size:13px;font-weight:700;color:#ffffff;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 6px rgba(37,99,235,0.25);transition:all 0.15s ease}
.btn-foot-primary:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.35)}
.btn-foot-primary:active{transform:translateY(0)}

.info-card-footer{display:none}

/* Section 2: Photo Gallery */
.product-photo-section{display:flex;flex-direction:column;gap:8px;margin-top:2px;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.product-photo-gallery{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.product-photo-loading{display:flex;align-items:center;justify-content:center;height:120px;font-size:13px;font-weight:600;color:#64748b;background:#f8fafc;border-radius:12px;border:1px dashed #cbd5e1}
.product-photo-error{display:flex;align-items:center;justify-content:center;padding:16px;font-size:13px;font-weight:600;color:#dc2626;background:#fef2f2;border-radius:12px;border:1px solid #fecaca}
.photo-section-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;min-height:26px;min-width:0;max-width:100%;box-sizing:border-box}
.photo-header-left{display:flex;align-items:center;gap:8px;min-width:0}
.photo-counter-badge{font-size:11px;font-weight:600;color:#64748b;background:#f1f5f9;padding:1px 7px;border-radius:12px;border:1px solid #e2e8f0;flex-shrink:0}
.photo-main-container{position:relative;width:100%;max-width:100%;height:290px;border-radius:12px;overflow:hidden;background:#f8fafc;box-shadow:0 1px 4px rgba(15,23,42,0.04);border:1px solid #e2e8f0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.photo-main-img{max-width:100%;max-height:100%;object-fit:contain;display:block;transition:transform 0.2s ease}
.photo-main-container:hover .photo-main-img{transform:scale(1.02)}
.photo-primary-badge{position:absolute;top:10px;left:10px;background:rgba(15,23,42,0.78);backdrop-filter:blur(4px);color:#ffffff;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;box-shadow:0 2px 6px rgba(0,0,0,0.15);z-index:2}
.photo-fullscreen-btn{position:absolute;top:10px;right:10px;width:30px;height:30px;border:1px solid rgba(255,255,255,0.4);border-radius:7px;background:rgba(15,23,42,0.75);backdrop-filter:blur(4px);color:#ffffff;font-size:15px;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:all 0.15s ease;z-index:2}
.photo-fullscreen-btn:hover{background:#ffffff;color:#2563eb;border-color:#2563eb;transform:scale(1.08)}
.photo-floating-actions{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px;padding:4px 12px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px rgba(0,0,0,0.25);white-space:nowrap;z-index:5;border:1px solid rgba(255,255,255,0.18);transition:all 0.2s ease}
.photo-action-btn{border:0;background:transparent;color:#f1f5f9;font-size:11.5px;font-weight:600;padding:2px 7px;cursor:pointer;border-radius:4px;transition:all 0.15s ease;display:inline-flex;align-items:center;gap:4px}
.photo-action-btn:hover{color:#60a5fa;background:rgba(255,255,255,0.12)}
.photo-action-btn.delete-action{color:#fca5a5}
.photo-action-btn.delete-action:hover{background:rgba(239,68,68,0.25);color:#fee2e2}
.photo-action-btn.disabled{opacity:0.45;cursor:default;pointer-events:none}
.action-divider{color:#64748b;font-size:10px}

/* Thumbnails row - Horizontal scrolling isolated strictly to this row */
.photo-thumbnails-row{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;width:100%;max-width:100%;min-width:0;padding:4px 2px 8px;margin-top:2px;box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9}
.photo-thumbnails-row::-webkit-scrollbar{height:6px}
.photo-thumbnails-row::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}
.photo-thumbnails-row::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background 0.15s ease}
.photo-thumbnails-row::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.photo-thumb-box{position:relative;width:58px;height:58px;min-width:58px;max-width:58px;border-radius:8px;overflow:hidden;border:1.5px solid #e2e8f0;background:#f8fafc;cursor:pointer;transition:all 0.15s ease;flex-shrink:0;box-sizing:border-box}
.photo-thumb-box:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,0.08);border-color:#cbd5e1}
.photo-thumb-box.active-thumb{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.3)}
.photo-thumb-box img{width:100%;height:100%;object-fit:cover;display:block}
.photo-add-thumb-btn{border:1.5px dashed #94a3b8;border-radius:8px;width:58px;height:58px;min-width:58px;max-width:58px;background:#f8fafc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#2563eb;cursor:pointer;transition:all 0.15s ease;flex-shrink:0;box-sizing:border-box;padding:0;text-align:center}
.photo-add-thumb-btn:hover{border-color:#2563eb;background:#eff6ff;color:#1d4ed8;transform:translateY(-1px);box-shadow:0 2px 6px rgba(37,99,235,0.12)}
.add-plus-circle{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;transition:transform 0.15s ease}
.photo-add-thumb-btn:hover .add-plus-circle{transform:scale(1.1)}
.add-text{font-size:10px;font-weight:600;color:inherit;text-align:center;line-height:1;white-space:nowrap}
.photo-empty-box{height:220px;border-radius:14px;border:2px dashed #cbd5e1;background:#f8fafc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#64748b;cursor:pointer;transition:all 0.2s ease;width:100%;max-width:100%;box-sizing:border-box}
.photo-empty-box:hover{border-color:#2563eb;background:#eff6ff}
.photo-empty-box .add-plus-circle{width:40px;height:40px;font-size:24px}

/* Fullscreen Product Image Viewer Modal */
dialog.product-image-viewer{position:fixed;inset:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;border:0;padding:0;margin:0;background:rgba(15,23,42,0.95);backdrop-filter:blur(14px);z-index:99999;display:none;flex-direction:column;color:#ffffff;box-sizing:border-box;outline:none}
dialog.product-image-viewer[open]{display:flex}
dialog.product-image-viewer::backdrop{background:rgba(15,23,42,0.95);backdrop-filter:blur(14px)}
.viewer-header{height:60px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.1);flex-shrink:0;gap:12px}
.viewer-title-group{display:flex;align-items:center;gap:12px;min-width:0}
.viewer-counter-badge{background:rgba(255,255,255,0.15);padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:0.05em;white-space:nowrap}
.viewer-photo-title{font-size:14.5px;font-weight:700;color:#f8fafc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-zoom-toolbar{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:3px 6px;backdrop-filter:blur(8px)}
.viewer-zoom-btn{background:transparent;border:0;color:#ffffff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s ease,transform 0.15s ease}
.viewer-zoom-btn:hover{background:rgba(255,255,255,0.22);transform:scale(1.1)}
.viewer-zoom-btn:active{transform:scale(0.95)}
.viewer-zoom-badge{background:transparent;border:0;color:#ffffff;font-size:12.5px;font-weight:700;padding:3px 8px;border-radius:6px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:background 0.15s ease;min-width:48px;text-align:center}
.viewer-zoom-badge:hover{background:rgba(255,255,255,0.18)}
.viewer-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.viewer-action-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#ffffff;border-radius:8px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all 0.15s ease}
.viewer-action-btn:hover{background:rgba(255,255,255,0.22)}
.viewer-close-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.15);border:0;color:#ffffff;font-size:22px;font-weight:700;display:grid;place-items:center;cursor:pointer;transition:all 0.15s ease}
.viewer-close-btn:hover{background:#ef4444;transform:scale(1.08)}

.viewer-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:12px 20px;overflow:hidden;cursor:default}
.viewer-main-img{max-width:calc(100vw - 160px);max-height:calc(100vh - 180px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,0.6);user-select:none;transition:transform 0.15s ease-out;cursor:zoom-in}
.viewer-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(8px);color:#ffffff;display:flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer;transition:all 0.2s cubic-bezier(0.16,1,0.3,1);z-index:10;outline:none}
.viewer-nav-btn svg{width:26px;height:26px;display:block;pointer-events:none}
.viewer-nav-btn:hover{background:rgba(255,255,255,0.25);transform:translateY(-50%) scale(1.1)}
.viewer-nav-btn:active{transform:translateY(-50%) scale(0.96)}
.viewer-nav-btn.btn-prev{left:24px}
.viewer-nav-btn.btn-next{right:24px}

.viewer-bottom-bar{height:94px;padding:10px 24px;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(255,255,255,0.1);background:rgba(15,23,42,0.6);flex-shrink:0}
.viewer-thumbs-strip{display:flex;align-items:center;gap:10px;max-width:100%;overflow-x:auto;padding:4px 8px}
.viewer-thumb-item{width:64px;height:64px;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:0.55;cursor:pointer;flex-shrink:0;transition:all 0.15s ease;background:#1e293b}
.viewer-thumb-item:hover{opacity:0.9;transform:translateY(-2px)}
.viewer-thumb-item.active{opacity:1;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.4);transform:translateY(-2px) scale(1.04)}
.viewer-thumb-item img{width:100%;height:100%;object-fit:cover;display:block}

/* Section 3: Linear Stage Scale */
.stages-scale-section{display:grid;gap:14px;margin-top:4px}
.stages-scale-header-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.btn-open-in-planner{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:8px;color:#1d4ed8;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s ease;text-decoration:none}
.btn-open-in-planner:hover{background:#dbeafe;border-color:#2563eb;color:#1e40af;transform:translateY(-1px);box-shadow:0 2px 8px rgba(37,99,235,0.2)}
.linear-stages-scale{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:12px 6px 6px}
.stages-track-line{position:absolute;top:28px;left:32px;right:32px;height:2px;background:#e2e8f0;z-index:1}
.stage-node-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:70px;text-align:center;background:transparent;border:0;cursor:pointer;padding:0}
.stage-node-circle{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;background:#ffffff;border:2px solid #cbd5e1;color:#64748b;transition:all 0.15s ease}
.stage-node-item.done .stage-node-circle{background:#16a34a;border-color:#16a34a;color:#ffffff}
.stage-node-item.active .stage-node-circle{background:#2563eb;border-color:#2563eb;color:#ffffff;box-shadow:0 0 0 4px #dbeafe}
.stage-node-item.paused .stage-node-circle{background:#d97706;border-color:#d97706;color:#ffffff;box-shadow:0 0 0 4px #fef3c7}
.stage-node-name{font-size:11px;font-weight:700;color:#1e293b;line-height:1.2}
.stage-node-date{font-size:10px;color:#64748b;font-weight:500}
.stage-node-item.is-planned-stage{cursor:pointer}
.stage-node-item.is-planned-stage:hover .stage-node-circle{transform:scale(1.12);box-shadow:0 0 0 5px rgba(37,99,235,0.22);border-color:#2563eb}
.stage-node-item.is-planned-stage:hover .stage-node-name{color:#2563eb}
.stage-node-item.is-planned-stage .stage-node-date{display:inline-flex;align-items:center;gap:3px;color:#1d4ed8;font-weight:600;background:#eff6ff;padding:2px 6px;border-radius:5px;border:1px solid #dbeafe;margin-top:2px;transition:all .15s ease}
.stage-node-item.is-planned-stage:hover .stage-node-date{background:#dbeafe;border-color:#bfdbfe}

/* Current Stage Detail Box */
.current-stage-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.current-stage-head{display:flex;justify-content:space-between;align-items:center}
.current-stage-head small{font-size:11px;color:#64748b;font-weight:500;display:block}
.current-stage-title{font-size:13.5px;font-weight:700;color:#0f172a}
.status-chip-state{background:#f1f5f9;color:#475569;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
.status-chip-state.active{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.status-chip-state.paused{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.status-chip-state.done{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.stage-metrics-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stage-metric-box{background:#ffffff;border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px}
.stage-metric-box.interactive-metric{cursor:pointer;transition:all .15s ease}
.stage-metric-box.interactive-metric:hover{background:#eff6ff;border-color:#3b82f6}
.stage-metric-box small{display:block;font-size:10.5px;color:#64748b;font-weight:500}
.stage-metric-box strong{display:block;font-size:13.5px;font-weight:600;color:#0f172a;margin-top:2px}
@media(max-width:680px){.stage-metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.approval-status-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#64748b;padding-top:4px}
.approval-status-row span{font-weight:500}
.approval-status-row strong{color:#0f172a;font-weight:600}

/* Client Deadline Card & Slip Alert */
.client-deadline-card{margin-top:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;transition:all .2s ease}
.client-deadline-card.slip-alert{background:#fffbeb;border-color:#fcd34d;box-shadow:0 2px 8px rgba(245,158,11,0.08)}
.client-deadline-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.client-deadline-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
.client-deadline-badge.badge-on-time{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.client-deadline-badge.badge-delayed{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;animation:pulseSlip 2s infinite ease-in-out}
@keyframes pulseSlip{0%,100%{opacity:1}50%{opacity:.75}}
.btn-copy-client-date{background:#ffffff;border:1px solid #cbd5e1;border-radius:6px;font-size:11px;font-weight:600;color:#334155;padding:3px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s ease}
.btn-copy-client-date:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.client-deadline-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.client-date-label{font-size:12px;color:#64748b;font-weight:600}
.client-date-val{font-size:15px;font-weight:750;color:#0f172a}
.client-deadline-card.slip-alert .client-date-val{color:#b45309}
.client-date-sub{margin-top:3px;font-size:11px;color:#94a3b8}
.slip-warning-box{margin-top:10px;padding-top:8px;border-top:1px dashed #fde68a;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.slip-warning-text{font-size:11.5px;font-weight:600;color:#b45309;flex:1}
.btn-acknowledge-slip{background:#f59e0b;color:#ffffff;border:none;border-radius:6px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;transition:background .15s ease}
.btn-acknowledge-slip:hover{background:#d97706}
.deadline-badge.slip-alert{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;font-weight:700}


/* Folder & Link Bar */
.order-folder{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;border-radius:9px;background:#ffffff;border:1px solid #e2e8f0;margin-top:4px;flex-wrap:wrap}
.order-folder>div:first-child{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-folder span{color:#64748b;font-size:11.5px}
.order-folder strong{font-size:12px;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-folder-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.order-folder-actions .secondary-button{padding:4px 9px;font-size:11.5px;border-radius:6px;font-weight:600}
.order-folder-edit{background:#f8fafc!important;border-color:#cbd5e1!important;color:#334155!important}
.order-folder-edit:hover{background:#eff6ff!important;border-color:#93c5fd!important;color:#1d4ed8!important}
.order-folder-bind{background:#f0fdf4!important;border-color:#bbf7d0!important;color:#15803d!important}
.order-folder-bind:hover{background:#dcfce7!important;border-color:#86efac!important;color:#166534!important}

/* Footer Actions */
.drawer-foot{padding:16px 28px;background:#ffffff;border-top:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;gap:10px}
.unified-actions-left,.unified-actions-right{display:flex;align-items:center;gap:8px}
.unified-action{min-height:38px;border:1px solid transparent;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:750;cursor:pointer;white-space:nowrap;transition:all 0.15s ease}
.unified-action.primary{background:#2563eb;color:#fff;box-shadow:0 2px 8px rgba(37,99,235,0.25)}
.unified-action.primary:hover{background:#1d4ed8}
.unified-action.neutral{border-color:#e2e8f0;background:#f8fafc;color:#1e293b}
.unified-action.neutral:hover{background:#f1f5f9}
.unified-action.danger-outline{border-color:#fca5a5;background:#ffffff;color:#dc2626}
.unified-action.danger-outline:hover{background:#fee2e2}
.unified-action.danger-solid{background:#dc2626;color:#ffffff}
.unified-timer{display:inline-flex;align-items:center;gap:8px;min-height:38px;border-radius:10px;background:#dcfce7;padding:0 12px;color:#15803d;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.unified-timer i{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,0.2);animation:livePulse 1.8s ease-in-out infinite}

/* Clarification Resolution & Callout Styles */

.clarification-callout-banner {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 1.5px solid #c084fc;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(192, 132, 252, 0.14);
}
.clarification-callout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.clarification-callout-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b21a8;
}
.clarification-head-ico {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.25));
  flex-shrink: 0;
}
.clarification-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.clarification-title-heading {
  font-size: 13.5px;
  font-weight: 700;
  color: #6b21a8;
  letter-spacing: -0.01em;
}
.clarification-callout-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: #7e22ce;
  background: rgba(233, 213, 255, 0.55);
  border: 1px solid rgba(192, 132, 252, 0.45);
  padding: 1.5px 7px;
  border-radius: 4px;
  width: fit-content;
}
.clarification-callout-time svg {
  color: #7e22ce;
  flex-shrink: 0;
}
.btn-banner-resolve {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #7c3aed;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
  transition: all 0.15s ease;
}
.btn-banner-resolve:hover {
  background: #6d28d9;
  box-shadow: 0 3px 8px rgba(109, 40, 217, 0.4);
  transform: translateY(-1px);
}
.btn-banner-resolve:active {
  transform: translateY(0);
}
.clarification-callout-body {
  font-size: 13.5px;
  color: #3b0764;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  padding: 9px 13px;
  border-left: 3.5px solid #9333ea;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: inset 0 1px 2px rgba(147, 51, 234, 0.05);
}
.status-chip-state.clarification {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #d8b4fe;
}

/* Modal Dialog for Clarification Request */
.clarification-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: clarifModalFadeIn 0.18s ease-out;
}
.clarification-modal-overlay.closing {
  animation: clarifModalFadeOut 0.15s ease-in forwards;
}
.clarification-modal-card {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: clarifModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.clarification-modal-head {
  padding: 16px 20px;
  background: linear-gradient(135deg, #faf5ff 0%, #f5edff 100%);
  border-bottom: 1px solid #ede4f8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.clarification-modal-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.clarification-modal-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ede4f8;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid #d8b4fe;
}
.clarification-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #4c1d95;
  line-height: 1.25;
}
.clarification-modal-head p {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: #6b21a8;
  line-height: 1.35;
}
.clarification-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: #9333ea;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.clarification-modal-close:hover {
  background: #ede4f8;
  color: #6b21a8;
}
.clarification-modal-body {
  padding: 18px 20px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clarification-modal-label {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.clarification-modal-textarea {
  width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: #0f172a;
  resize: vertical;
  outline: none;
  background: #f8fafc;
  transition: all 0.15s ease;
}
.clarification-modal-textarea:focus {
  background: #ffffff;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.clarification-modal-textarea.has-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.clarification-modal-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #64748b;
  min-height: 18px;
}
.clarification-modal-error {
  color: #dc2626;
  font-weight: 600;
}
.clarification-modal-foot {
  padding: 12px 20px 16px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  background: #fafafa;
  border-top: 1px solid #f1f5f9;
}
.clarification-modal-submit {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
  transition: all 0.15s ease;
}
.clarification-modal-submit:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.35);
  transform: translateY(-1px);
}
.clarification-modal-submit:active {
  transform: translateY(0);
}
@keyframes clarifModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes clarifModalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes clarifModalPop {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Table Thumbnail in Orders List */
.order-product-thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;background:#f1f5f9;flex-shrink:0;border:1px solid #e2e8f0}
.order-title-cell{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.order-title-cell>div{min-width:0;flex:1;overflow:hidden}
.order-title-cell strong,.order-title-cell small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Kanban View Card Design */
.kanban-board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:4px 0}
.kanban-col{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:14px;display:grid;align-content:start;gap:12px}
.kanban-col-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:800;color:#1e293b}
.kanban-col-count{background:#e2e8f0;color:#475569;border-radius:20px;padding:2px 8px;font-size:11px}
.kanban-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(15,23,42,0.04);cursor:pointer;transition:transform 0.15s ease,box-shadow 0.15s ease}
.kanban-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,0.08);border-color:#cbd5e1}
.kanban-card-thumb{width:100%;height:115px;object-fit:cover;background:#f1f5f9;display:block}
.kanban-card-body{padding:12px;display:grid;gap:8px}
.kanban-card-top{display:flex;justify-content:space-between;align-items:center}
.kanban-card-num{font-size:12px;font-weight:800;color:#2563eb}
.kanban-card-title{font-size:14px;font-weight:750;color:#0f172a;margin:0}
.kanban-card-client{font-size:12px;color:#64748b}
.kanban-card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding-top:8px;border-top:1px solid #f1f5f9}

/* Work Schedule Proportional Grid */
.schedule-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:16px}
.schedule-day-card{border:1px solid #e2e8f0;border-radius:12px;padding:12px;background:#ffffff;display:grid;gap:8px;min-height:120px;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.schedule-day-card.workday{border-top:4px solid #16a34a}
.schedule-day-card.dayoff{border-top:4px solid #94a3b8;background:#f8fafc}
.schedule-day-card.vacation{border-top:4px solid #38bdf8;background:#f0f9ff}
.schedule-day-card.sick{border-top:4px solid #f97316;background:#fff7ed}
.schedule-day-card.holiday{border-top:4px solid #a855f7;background:#faf5ff}
.schedule-day-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:750}
.schedule-day-type{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px}
.schedule-hours{font-size:12px;font-weight:700;color:#0f172a;background:#f1f5f9;padding:4px 8px;border-radius:6px;text-align:center}

@media(max-width:850px){
  .order-info-cards-grid{grid-template-columns:1fr}
  .photo-main-container{height:240px}
  .photo-thumbnails-row{overflow-x:auto;max-width:100%}
  .linear-stages-scale{overflow-x:auto}
  .schedule-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   Modern Order Creation Form & Readiness Sidebar (Exact 1:1 Prototype Styles)
   ========================================================================== */
.route[data-panel="new-project"] {
  background: #f3f5f8;
  padding: 20px 24px 40px;
  border-radius: 20px;
  margin: -10px -10px 0 -10px;
}

.new-order-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (max-width: 1080px) {
  .new-order-layout {
    grid-template-columns: 1fr;
  }
}

.new-order-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  margin-bottom: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-section:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.section-title {
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
}
.section-title .step-pill {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
}
.section-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
}
.grid-4 {
  display: grid;
  grid-template-columns: 2.2fr 1.5fr 1fr 1.2fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 820px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field-group.span-full {
  grid-column: 1 / -1;
}
.field-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.new-order-layout input,
.new-order-layout select,
.new-order-layout textarea {
  font: inherit;
  width: 100%;
  height: 42px;
  padding: 8px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13.5px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.new-order-layout textarea {
  height: auto;
  min-height: 70px;
  resize: vertical;
}
.new-order-layout input:focus,
.new-order-layout select:focus,
.new-order-layout textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.15);
  background: #ffffff;
}
.new-order-layout input::placeholder,
.new-order-layout textarea::placeholder {
  color: #94a3b8;
}

.products-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-card {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  position: relative;
  transition: all 0.2s ease;
  overflow: hidden;
}
.product-card:hover {
  border-color: #94a3b8;
  border-left-color: #1d4ed8;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.09);
}
.product-card.is-collapsed {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  border-left-color: #64748b;
}
.product-card.is-collapsed .product-card-top {
  border-bottom: none;
  padding: 10px 16px;
}
.product-card.is-collapsed .product-card-body,
.product-card.is-collapsed .product-card-foot {
  display: none;
}

.collapsed-summary-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 8px;
}
.collapsed-summary-tag {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.collapsed-summary-tag.tag-name {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.collapsed-summary-tag.tag-ok {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #16a34a;
}
.collapsed-summary-tag.tag-warn {
  background: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}

.product-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.15s ease;
}
.product-card.is-collapsed .product-card-top:hover {
  background: #f1f5f9;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.product-badge .pos-tag {
  color: #1d4ed8;
  background: #dbeafe;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
}

.product-actions-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-icon-subtle {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn-icon-subtle:hover {
  background: #edf2f7;
  color: #0f172a;
  border-color: #94a3b8;
}
.btn-icon-subtle.btn-delete:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.product-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
}

.product-media-zone {
  padding: 12px 14px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.15s ease;
}
.product-media-zone.dragover {
  border-color: #2563eb;
  background: #eff6ff;
}

.media-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.media-zone-title {
  font-size: 12px;
  font-weight: 750;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}
.paste-hint {
  font-size: 11px;
  color: #64748b;
  background: #edf2f7;
  padding: 2px 7px;
  border-radius: 5px;
}

.photos-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.photo-thumb-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  overflow: hidden;
  background: #0f172a;
  cursor: grab;
  transition: all 0.18s ease;
}
.photo-thumb-wrapper:active {
  cursor: grabbing;
}
.photo-thumb-wrapper.is-dragging {
  opacity: 0.35;
  transform: scale(0.92);
}
.photo-thumb-wrapper.drag-target-over {
  border-color: #2563eb;
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
}
.photo-thumb-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: #94a3b8;
}
.photo-thumb-wrapper.is-primary {
  border-color: #2563eb;
  box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.45);
}
.photo-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-delete-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 3;
}
.photo-delete-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}
.photo-star-btn {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #e2e8f0;
  border: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 13px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 3;
}
.photo-star-btn:hover {
  background: #eab308;
  color: #0f172a;
  transform: scale(1.15);
}
.photo-star-btn.is-primary {
  background: #eab308;
  color: #0f172a;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.85);
}
.photo-main-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  padding: 2.5px 0;
  letter-spacing: 0.05em;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.25);
}
.photo-set-main-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  padding: 2px 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.photo-thumb-wrapper:not(.is-primary):hover .photo-set-main-hint {
  opacity: 1;
}

.photo-add-dropzone {
  width: 76px;
  height: 76px;
  border: 1.5px dashed #94a3b8;
  border-radius: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 11px;
  font-weight: 700;
}
.photo-add-dropzone:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.photo-add-dropzone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.product-card-foot {
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.tz-check-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tz-check-box input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #2563eb;
}

.btn-header-add {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.btn-header-add:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  transform: translateY(-1px);
}

.btn-add-product-bottom {
  width: 100%;
  padding: 14px;
  border: 2px dashed #94a3b8;
  background: #ffffff;
  border-radius: 14px;
  color: #2563eb;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 10px;
}
.btn-add-product-bottom:hover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-1px);
}

.invoicing-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.radio-pill-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.radio-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: all 0.15s ease;
}
.radio-card:hover {
  border-color: #cbd5e1;
}
.radio-card.active {
  border-color: #2563eb;
  background: #eff6ff;
}
.radio-card input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #2563eb;
}
.radio-card-content strong {
  display: block;
  font-size: 13px;
  font-weight: 750;
  color: #0f172a;
}
.radio-card-content small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.sidebar-summary {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.summary-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.order-number-preview {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f2fe 100%);
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}
.order-number-preview small {
  display: block;
  font-size: 11px;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 750;
  margin-bottom: 4px;
}
.order-number-preview strong {
  display: block;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #1d4ed8;
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', monospace, sans-serif;
}

.summary-title {
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0f172a;
}
.summary-status-pill {
  font-size: 11px;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.summary-status-pill.ready {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}

.completion-progress-box {
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 7px;
}
.progress-pct {
  color: #2563eb;
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.progress-track {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #16a34a);
  border-radius: 999px;
  transition: width 0.35s ease, background 0.35s ease;
}
.progress-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.35;
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
}
.check-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.18s ease;
}
.check-icon.ok {
  background: #ecfdf5;
  color: #16a34a;
  border: 1.5px solid #a7f3d0;
}
.check-icon.pending {
  background: #fffbeb;
  color: #d97706;
  border: 1.5px solid #fde68a;
}
.check-desc strong {
  display: block;
  font-size: 12.5px;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.3;
}
.check-desc small {
  display: block;
  font-size: 11px;
  color: #64748b;
  line-height: 1.25;
  margin-top: 1px;
}

.summary-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.kpi-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 10px;
  text-align: center;
}
.kpi-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 650;
}
.kpi-val {
  font-size: 16px;
  font-weight: 850;
  color: #0f172a;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

.btn-submit {
  width: 100%;
  height: 44px;
  background: #2563eb;
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
}
.btn-submit:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.btn-submit:active {
  transform: translateY(0);
}

.btn-save-draft,
#btn-save-draft {
  width: 100%;
  height: 38px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
  margin-top: 8px;
}
.btn-save-draft:hover,
#btn-save-draft:hover {
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.btn-save-draft:active,
#btn-save-draft:active {
  transform: translateY(0);
}

.lightbox-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox-modal.open {
  display: flex;
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
}
.lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Quick Edit Modal (Payment, TZ, VN) */
.preview-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeInModal 0.15s ease-out;
}
@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.preview-modal-dialog {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.preview-modal-head {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.btn-close-modal {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 20px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-close-modal:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.preview-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(85vh - 120px);
  overflow-y: auto;
}
.modal-form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.modal-form-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.modal-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}
.modal-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.modal-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
}
.modal-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.modal-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.modal-switch .slider {
  position: relative;
  width: 40px;
  height: 22px;
  background-color: #cbd5e1;
  border-radius: 22px;
  transition: 0.2s;
  flex-shrink: 0;
}
.modal-switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.modal-switch input:checked + .slider {
  background-color: #16a34a;
}
.modal-switch input:checked + .slider:before {
  transform: translateX(18px);
}
.preview-modal-foot {
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.btn-foot-outline {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-foot-outline:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.btn-foot-primary {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.btn-foot-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}



/* =========================================================================
   ПОГОДЖЕНІ СТИЛІ: КАРТКИ-ФІЛЬТРИ З ІКОНКАМИ, КОЛОНКА «ПОТОЧНИЙ ЕТАП» ТА ПІКТОГРАМИ
   ========================================================================= */

.route[data-panel="orders"] .metric.order-metric {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
}

.metric-icon-box {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

.metric-icon-box.is-rounded-square {
  border-radius: 10px !important;
}

.metric-icon-blue { background: #eff6ff; color: #2563eb; }
.metric-icon-purple { background: #faf5ff; color: #9333ea; }
.metric-icon-amber { background: #fffbeb; color: #d97706; }
.metric-icon-red { background: #fef2f2; color: #ef4444; }
.metric-icon-green { background: #f0fdf4; color: #16a34a; }
.metric-icon-slate { background: #f1f5f9; color: #64748b; }

.metric-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

/* 6-й стовпчик («Поточний етап») — вирівнювання по лівому краю та нейтральні рамки */
.orders-custom-table tbody tr td.order-col-stage,
.orders-custom-table tbody tr td[data-order-cell="stage"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: left !important;
  vertical-align: middle !important;
  padding: 8px 12px !important;
  background: inherit !important;
  border-right: 1px solid #e2e8f0 !important;
  border-left: none !important;
}

/* Кольорові семантичні стилі для іконок та тексту етапів (без кольорових рамок колонок) */
.stage-chip.stage-design {
  color: #087443 !important;
}
.stage-chip.stage-design svg {
  stroke: #087443 !important;
}

.stage-chip.stage-construction {
  color: #1d4ed8 !important;
}
.stage-chip.stage-construction svg {
  stroke: #1d4ed8 !important;
}

.stage-chip.stage-edit-1,
.stage-chip.stage-edit-2,
.stage-chip.stage-edit-3 {
  color: #b45309 !important;
}
.stage-chip.stage-edit-1 svg,
.stage-chip.stage-edit-2 svg,
.stage-chip.stage-edit-3 svg {
  stroke: #b45309 !important;
}

.stage-chip.stage-edit-paid {
  color: #b91c1c !important;
}
.stage-chip.stage-edit-paid svg {
  stroke: #b91c1c !important;
}

/* Етап не створено */
.orders-custom-table tbody tr td.order-col-stage:has(.stage-not-created),
.orders-custom-table tbody tr td.order-col-stage:has(.stage-none),
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-not-created),
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-none) {
  background: inherit !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* У шапці проєкту за замовчуванням: прочерк «—» по лівому краю */
.orders-custom-table tbody tr.project-group-row td.order-col-stage,
.orders-custom-table tbody tr.project-group-row td[data-order-cell="stage"] {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding-left: 12px !important;
}

/* Вирівнювання піктограми та тексту всередині клітинки етапу по лівому краю */
.orders-custom-table tbody tr td.order-col-stage .stage-chip,
.orders-custom-table tbody tr td[data-order-cell="stage"] .stage-chip,
.stage-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: inherit !important;
}


/* === COMPLETE APPROVED ORDERS SHELL STYLES === */
/* 1. Базовий чистий білий фон для одиночних замовлень та розгорнутих виробів */
    .orders-custom-table tbody tr td,
    .orders-custom-table tbody tr.stage-design td,
    .orders-custom-table tbody tr.stage-construction td,
    .orders-custom-table tbody tr.stage-correction td,
    .orders-custom-table tbody tr.stage-none td,
    .orders-custom-table tbody tr.project-product-row td,
    .v3-orders-table tbody tr td {
      background: #ffffff !important;
      border-bottom: 1px solid #e5e9ee !important;
      color: #17201b !important;
      box-shadow: none !important;
    }

    .orders-custom-table tbody tr:hover td {
      background: #f8fafc !important;
    }

    /* ============================================================ */
    /* ВАРІАНТ 1: Бічна дужка проєкту (Flat rows + Left Bracket)    */
    /* ============================================================ */
    .orders-custom-table tbody tr.project-product-row td {
      background: #ffffff !important;
      color: #17201b !important;
    }
    .orders-custom-table tbody tr.project-product-row td:first-child {
      box-shadow: inset 4.5px 0 #2563eb !important;
      background: #fafcff !important;
      position: relative;
    }
    .orders-custom-table tbody tr.project-product-row:hover td {
      background: #f8fafc !important;
    }
    .orders-custom-table tbody tr.project-product-row:hover td:first-child {
      background: #f0f7ff !important;
    }
    .orders-custom-table tbody tr.project-product-row.project-group-first td {
      border-top: 1.5px solid #94a3b8 !important;
    }
    .orders-custom-table tbody tr.project-product-row.project-group-mid td {
      border-bottom: 1px dashed #e2e8f0 !important;
    }
    .orders-custom-table tbody tr.project-product-row.is-last-child td {
      border-bottom: 1.5px solid #94a3b8 !important;
    }

    /* Бейдж позиції виробу (_1, _2, _3) */
    .v1-pos-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 4px;
      background: #eff6ff;
      color: #2563eb;
      font-size: 10.5px;
      font-weight: 750;
      border: 1px solid #bfdbfe;
      margin-right: 2px;
      flex-shrink: 0;
      line-height: 1;
      user-select: none;
    }

    /* Тег проєкту в назві виробу (Замовник · 2 вир.) */
    .v1-proj-tag {
      display: inline-block;
      font-size: 9.5px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #dbeafe;
      letter-spacing: 0.02em;
      margin-left: 5px;
      line-height: 1.3;
      vertical-align: middle;
      white-space: nowrap;
    }
/* 3. Прибираємо зайві псевдо-елементи зі styles.css */
    .project-group-row td:first-child::before,
    .project-product-row td:first-child::before,
    .product-child-name::before,
    .product-child-name:before {
      content: none !important;
      display: none !important;
    }

    /* 4. Однаковий відступ зліва для всіх рядків */
    .orders-custom-table th:first-child,
    .orders-custom-table td:first-child,
    .orders-custom-table tbody tr td:first-child,
    .orders-custom-table tbody tr.project-group-row td:first-child,
    .orders-custom-table tbody tr.project-product-row td:first-child {
      border-left: none !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    
    
    /* 5. Оригінальний ніжний бейдж з чіткими тонкими векторними іконками */
    .order-product-thumb {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      border-radius: 8px !important;
      background: #f0f4f9 !important; /* Оригінальний м'який пастельний фон */
      border: 1px solid #e2e8f0 !important;
      display: grid !important;
      place-items: center !important;
      flex-shrink: 0;
      padding: 0 !important;
      box-shadow: none !important;
    }

    .order-product-thumb-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
    }

    /* 5. Контейнер першої колонки */
    .row-num-cell {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      vertical-align: middle;
      height: 24px;
      margin: 0;
      padding: 0;
    }

    /* Кнопка-плюсик [+] для проєктів */
    .row-expand-plus {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      padding: 0;
      border: 1.5px solid #94a3b8;
      border-radius: 4px;
      background: #ffffff;
      color: #1e293b;
      font-size: 13px;
      font-weight: 800;
      line-height: 15px;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      user-select: none;
      box-sizing: border-box;
    }
    .row-expand-plus:hover {
      background: #f1f5f9;
      border-color: #475569;
      color: #0f172a;
    }
    .project-group-row[aria-expanded="true"] .row-expand-plus {
      background: #eff6ff;
      border-color: #2563eb;
      color: #2563eb;
    }

    /* Порожній слот для одиночних замовлень */
    .row-empty-slot {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      display: inline-block;
      flex-shrink: 0;
    }

    /* Номер замовлення */
    .order-number-text {
      font-weight: 700;
      color: #17201b !important;
      white-space: nowrap;
      margin: 0;
    }
    .child-code {
      font-weight: 700;
      color: #1e293b !important;
    }

    /* 6. Суцільна гілка дерева для виробів */
    .orders-custom-table tbody tr.project-product-row td:first-child {
      border-left: none !important;
      position: relative;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      height: 48px;
    }
    .orders-custom-table tbody tr.project-product-row .row-num-cell {
      height: 48px;
    }
    .row-branch-slot {
      width: 18px !important;
      height: 48px !important;
      min-width: 18px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
      user-select: none;
      margin: 0;
    }
    .branch-svg {
      position: absolute;
      left: 0;
      top: 0;
      width: 18px;
      height: 48px;
      pointer-events: none;
    }
    .branch-svg path {
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-linecap: square;
    }

    /* Лінія під мінусом [-] */
    .project-group-row td:first-child {
      position: relative;
    }
    .project-group-row .row-num-cell {
      position: relative;
    }
    .project-group-row[aria-expanded="true"] .row-num-cell::after {
      content: "";
      position: absolute;
      left: 8px;
      top: 18px;
      bottom: -12px;
      width: 2px;
      background: #94a3b8;
      pointer-events: none;
      z-index: 1;
    }

    
    
    
    
    
    
    
    
    


    /* Статусні чіпси в колонці «Стан етапу» (8-й стовпчик) */
    .status-chip.state-ready-to-plan {
      background: #ffffff !important;
      color: #334155 !important;
      border: 1px solid #e2e8f0 !important;
      font-weight: 600 !important;
    }
    .status-chip.state-ready-to-plan::before {
      content: "○";
      font-size: 13px;
      line-height: 1;
      color: #64748b;
    }
/* 2. Статусні чіпси для колонки «Стан етапу» (KB Flow Design) */
    .status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 3px 11px 3px 3px;
      border: 1px solid #e0e5ec;
      border-radius: 999px;
      background: #ffffff;
      font-size: 12px;
      font-weight: 600;
      color: #243247;
      white-space: nowrap;
      box-sizing: border-box;
      line-height: 1;
      transition: all 0.15s ease;
      vertical-align: middle;
    }
    .status::before {
      display: none !important;
    }
    .status .ico {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
    }
    .status .ico svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.25;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Кольорова палітра іконок */
    .status .danger { color: #D92D3A; }
    .status .bg-danger { background: #FFE6E8; }
    .status .gray { color: #6F7C8D; }
    .status .bg-gray { background: #E9EDF2; }
    .status .green { color: #17984F; }
    .status .bg-green { background: #DDF7E7; }
    .status .indigo { color: #5B5BD6; }
    .status .bg-indigo { background: #ECECFF; }
    .status .orange { color: #D96B00; }
    .status .bg-orange { background: #FFF0DF; }
    .status .amber { color: #B88500; }
    .status .bg-amber { background: #FFF4CC; }
    .status .purple { color: #8D43F8; }
    .status .bg-purple { background: #F1E7FF; }
    .status .blue { color: #2F72FF; }
    .status .bg-blue { background: #E2EDFF; }

    /* Акцентні фони для блокуючих статусів */
    .status.critical {
      border-color: #F3B4BA !important;
      background: #FFF0F2 !important;
      color: #b91c1c !important;
    }
    .status.warning {
      border-color: #F2D77A !important;
      background: #FFF8D8 !important;
      color: #92400e !important;
    }
    .status.clarification,
    .status.stage-status-clarification {
      border-color: #E2D4FD !important;
      background: #F8F3FE !important;
      color: #8235E8 !important;
    }
    .status.clarification .ico.bg-purple,
    .status.stage-status-clarification .ico.bg-purple {
      background: #EBDCFE !important;
    }
    .status.clarification .ico svg,
    .status.stage-status-clarification .ico svg {
      stroke: #8235E8 !important;
    }

    /* Варіант 2: Горизонтальні міні-чіпи для подвійного статусу (Оплата + ТЗ) */
    .status-row-duo {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-wrap: nowrap;
      vertical-align: middle;
      width: 149px;
      box-sizing: border-box;
    }
    .status-row-duo .status-mini {
      padding: 2.5px 8px 2.5px 3px;
      font-size: 11.5px;
      gap: 5px;
    }
    .status-row-duo .status-mini .ico {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
    }
    .status-row-duo .status-mini svg {
      width: 12px;
      height: 12px;
    }
    .status-row-duo .status-mini:first-child {
      flex-shrink: 0;
    }
    .status-row-duo .status-mini:last-child {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* Вирівнювання габаритів статус-чіпсів по ширині «Очікує виконання» (149px) */
    .status.stage-status-waiting,
    .status.stage-status-awaiting_payment,
    .status.stage-status-pending_approval {
      width: 149px;
      box-sizing: border-box;
    }

    /* Статус «У роботі» — напівпрозорий блакитний фон як кнопка таймеру у верхній частині застосунку */
    .status.stage-status-in_progress {
      background: #eff6ff !important;
      border-color: #bfdbfe !important;
      color: #1e40af !important;
    }
    .status.stage-status-in_progress .ico {
      background: #dbeafe !important;
      color: #1d4ed8 !important;
    }
    .status.stage-status-in_progress .ico svg {
      stroke: #1d4ed8 !important;
    }



    /* 1. Кнопка швидкого доступу до Google Drive / папки замовлення */
    .order-row-folder-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 4px;
      padding: 0;
      margin-left: 6px;
      transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
      vertical-align: middle;
      line-height: 1;
    }
    .order-folder-svg {
      width: 15px;
      height: 15px;
      display: block;
      flex-shrink: 0;
      transition: transform 0.15s ease, color 0.15s ease;
    }
    .order-row-folder-btn.has-folder {
      opacity: 0.95;
    }
    .order-row-folder-btn.has-folder .order-folder-svg {
      color: #eab308;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06));
    }
    .order-row-folder-btn.has-folder:hover {
      opacity: 1;
      transform: scale(1.15);
      background: rgba(234, 179, 8, 0.14);
    }
    .order-row-folder-btn.has-folder:hover .order-folder-svg {
      color: #ca8a04;
    }
    .order-row-folder-btn.no-folder {
      opacity: 0.35;
    }
    .order-row-folder-btn.no-folder .order-folder-svg {
      color: #94a3b8;
    }
    .order-row-folder-btn.no-folder:hover {
      opacity: 0.8;
      background: rgba(148, 163, 184, 0.15);
    }

    /* 2. Об'єднана колонка «Обсяг» (Вироби · Модулі) */
    .order-volume-cell {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      color: #475569;
      white-space: nowrap;
    }
    .order-volume-cell .vol-num {
      color: #0f172a;
      font-weight: 700;
    }

    /* 3. Інформативна клітинка «Час (Факт / План)» з напівпрозорою заливкою */
    .order-time-cell {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 132px;
      height: 28px;
      padding: 0 7px;
      box-sizing: border-box;
      border-radius: 7px;
      border: 1px solid #bfdbfe;
      background: #f8fafc;
      overflow: hidden;
      font-size: 11.5px;
      font-variant-numeric: tabular-nums;
      vertical-align: middle;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .order-time-cell .order-time-fill {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--cell-pct, 0%);
      background: rgba(59, 130, 246, 0.2);
      transition: width 0.3s ease;
      pointer-events: none;
      border-radius: 6px 0 0 6px;
    }
    .order-time-cell .order-time-labels {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      white-space: nowrap;
    }
    .order-time-cell .time-fact {
      color: #1e40af;
      font-weight: 700;
    }
    .order-time-cell .time-div {
      color: #94a3b8;
      font-weight: 500;
      margin: 0 1px;
    }
    .order-time-cell .time-est {
      color: #475569;
      font-weight: 600;
    }

    /* Коли задача/виріб АКТИВНИЙ В РОБОТІ: насичене акцентне підсвічування */
    .order-time-cell.is-running {
      background: #eff6ff !important;
      border: 1.5px solid #2563eb !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 2px 8px rgba(37, 99, 235, 0.12) !important;
    }
    .order-time-cell.is-running .order-time-fill {
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.38) 0%, rgba(37, 99, 235, 0.55) 100%) !important;
      border-right: 1.5px solid rgba(29, 78, 216, 0.7);
      box-shadow: inset 0 0 6px rgba(37, 99, 235, 0.25);
    }
    .order-time-cell.is-running .time-fact {
      color: #1d4ed8 !important;
      font-weight: 800 !important;
    }
    .order-time-cell.is-running .time-div {
      color: #3b82f6 !important;
      font-weight: 700 !important;
    }
    .order-time-cell.is-running .time-est {
      color: #0f172a !important;
      font-weight: 700 !important;
    }

    /* Жива пульсуюча точка всередині кнопки таймера */
    .order-time-cell .time-live-dot {
      display: inline-block;
      width: 6.5px;
      height: 6.5px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
      margin-right: 4px;
      flex-shrink: 0;
      animation: liveDotPulse 1.6s infinite;
    }

    /* Перевищення бюджету годин (actual > estimate) */
    .order-time-cell.overdue {
      border-color: #fca5a5;
      background: #fff5f5;
    }
    .order-time-cell.overdue .order-time-fill {
      width: 100%;
      background: rgba(239, 68, 68, 0.22);
    }
    .order-time-cell.overdue .time-fact {
      color: #dc2626 !important;
    }
    .order-time-cell.overdue .time-est {
      color: #991b1b !important;
    }
    .order-time-cell.is-running.overdue {
      border-color: #ef4444 !important;
      background: #fef2f2 !important;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 2px 8px rgba(220, 38, 38, 0.15) !important;
    }
    .order-time-cell.is-running.overdue .order-time-fill {
      background: linear-gradient(90deg, rgba(239, 68, 68, 0.38) 0%, rgba(220, 38, 38, 0.6) 100%) !important;
      border-right: 1.5px solid rgba(185, 28, 28, 0.8);
    }
    .order-time-cell.is-running.overdue .time-live-dot {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
    }

    /* 4. Колонка «Дедлайн» з бейджами стану */
    .order-deadline-cell {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    .order-deadline-cell .deadline-date {
      font-size: 12px;
      color: #1e293b;
      font-weight: 600;
    }
    .deadline-badge {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.3;
    }
    .deadline-badge.overdue {
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #fca5a5;
    }
    .deadline-badge.today {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fcd34d;
    }
    .deadline-badge.soon {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    /* =========================================================================
       ІКОНКИ ДЛЯ СТАРОГО ВАРІАНТУ КАРТОК (БЕЗ ЗМІНИ ШРИФТІВ)
       ========================================================================= */

    .route[data-panel="orders"] .metric.order-metric {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 12px !important;
      text-align: left !important;
    }

    .metric-icon-box {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      flex-shrink: 0 !important;
    }

    .metric-icon-box.is-rounded-square {
      border-radius: 10px !important;
    }

    .metric-icon-blue { background: #eff6ff; color: #2563eb; }
    .metric-icon-purple { background: #faf5ff; color: #9333ea; }
    .metric-icon-amber { background: #fffbeb; color: #d97706; }
    .metric-icon-red { background: #fef2f2; color: #ef4444; }
    .metric-icon-green { background: #f0fdf4; color: #16a34a; }
    .metric-icon-slate { background: #f1f5f9; color: #64748b; }

    .metric-text-wrap {
      display: flex !important;
      flex-direction: column !important;
      min-width: 0 !important;
    }

/* === KANBAN BOARD SYSTEM === */
.orders-kanban {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  padding: 4px 4px 24px !important;
  align-items: flex-start !important;
  min-height: 520px !important;
}

.kanban-col {
  flex: 0 0 310px !important;
  min-width: 290px !important;
  max-width: 320px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: calc(100vh - 240px) !important;
  overflow-y: auto !important;
}

.kanban-col-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  padding-bottom: 2px !important;
  position: sticky !important;
  top: 0 !important;
  background: #f8fafc !important;
  z-index: 2 !important;
}

.kanban-col-count {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  border-radius: 20px !important;
  padding: 2px 9px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
}

.order-kanban-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 80px !important;
}

.kanban-card {
  flex-shrink: 0 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.kanban-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.kanban-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

.kanban-card-num {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  letter-spacing: -0.2px !important;
}

.kanban-card-product {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.kanban-card-product .order-product-thumb {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

.kanban-card-product-info {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.kanban-card-title {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kanban-card-client {
  font-size: 11.5px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kanban-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

.kanban-tag {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
}

.kanban-card-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 11.5px !important;
}

.kanban-card-bottom-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

.kanban-card-bottom .order-timer-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 6px !important;
}

.kanban-card-bottom .order-action-button {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
}

.kanban-card-bottom .stage-chip {
  max-width: 100% !important;
  justify-content: center !important;
}

.kanban-empty {
  margin: 16px 0 !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* ==========================================================================
   VIYAR-STYLE INTER TYPOGRAPHY FOR ORDERS DESK (FILTERBAR, HEADERS, ROWS)
   ========================================================================== */
.order-filterbar,
.orders-custom-table {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 1. Фільтри етапів: єдина плашка-підкладка з кнопками та кольорами етапів */
.order-filterbar .order-stage-filters {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px !important;
  border-radius: 9px !important;
  background: #e8eeeb !important;
  white-space: nowrap !important;
}

.order-filterbar .stage-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 29px !important;
  padding: 0 9px 0 10px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #526159 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.order-filterbar .stage-filter:hover:not(.active) {
  background: rgba(255, 255, 255, 0.55) !important;
  color: #202022 !important;
}

.order-filterbar .stage-filter.active {
  box-shadow: 0 2px 7px rgba(23, 33, 29, 0.12) !important;
}

/* Кольорова логіка етапів: Усі етапи (білий з синім акцентом) */
.order-filterbar .stage-filter.all.active {
  background: #ffffff !important;
  border-color: #2563eb !important;
  color: #1d4ed8 !important;
}

.order-filterbar .stage-filter.all.active .stage-filter-count {
  background: #eff6ff !important;
  color: #2563eb !important;
}

/* Проєктування (зелений) */
.order-filterbar .stage-filter.design.active {
  background: #d9f1e2 !important;
  border-color: #69ac82 !important;
  color: #17683c !important;
}

.order-filterbar .stage-filter.design.active .stage-filter-count {
  background: rgba(23, 104, 60, 0.18) !important;
  color: #17683c !important;
}

/* Правки (жовтий / помаранчевий) */
.order-filterbar .stage-filter.correction.active {
  background: #ffe5bf !important;
  border-color: #dda354 !important;
  color: #8b520c !important;
}

.order-filterbar .stage-filter.correction.active .stage-filter-count {
  background: rgba(139, 82, 12, 0.18) !important;
  color: #8b520c !important;
}

/* Конструювання (синій) */
.order-filterbar .stage-filter.construction.active {
  background: #dbeaff !important;
  border-color: #72a3dc !important;
  color: #245f9f !important;
}

.order-filterbar .stage-filter.construction.active .stage-filter-count {
  background: rgba(36, 95, 159, 0.18) !important;
  color: #245f9f !important;
}

.order-filterbar .stage-filter-label {
  display: inline-block !important;
  white-space: nowrap !important;
}

.order-filterbar .stage-filter-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  color: #526159 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

.order-filterbar .stage-filter:hover:not(.active) .stage-filter-count {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
}



/* 2. Поле пошуку */
.order-filterbar .registry-search {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
}

.order-filterbar .registry-search::placeholder {
  font-family: 'Inter', sans-serif !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* 3. Кнопки вибору вигляду (Список / Канбан), Налаштування стовпчиків, Скинути фільтри */
.order-filterbar .orders-view-switch button,
.order-filterbar .column-settings-button,
.order-filterbar .reset-filters {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* 4. Шапка таблиці замовлень (thead) */
.orders-custom-table thead th {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #475569 !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
}

.orders-custom-table thead th:last-child {
  border-right: none !important;
}

.orders-custom-table thead th .sort-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #475569 !important;
}

.orders-custom-table thead th .sort-button span {
  font-weight: 500 !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
}

/* Вирівнювання заголовків етапу та стану по лівому краю */
.orders-custom-table thead th.order-th-stage,
.orders-custom-table thead th.order-th-status,
.orders-custom-table thead th[data-order-header="stage"],
.orders-custom-table thead th[data-order-header="status"] {
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 10px !important;
}

/* 5. Базовий гармонійний стиль таблиці (Inter, 12px) та єдина нейтральна сітка рамок */
.orders-custom-table tbody tr td {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  color: #334155 !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-left: none !important;
  border-top: none !important;
  background: #ffffff;
}

.orders-custom-table tbody tr td:last-child {
  border-right: none !important;
}

/* Проєктні рядки та підсумки */
.orders-custom-table tbody tr.project-group-row td {
  background: #f1f5f9 !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-right: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
.orders-custom-table tbody tr.project-group-row td:last-child {
  border-right: none !important;
}

.orders-custom-table tbody tr.project-product-row.project-group-first td {
  border-top: 1.5px solid #94a3b8 !important;
}
.orders-custom-table tbody tr.project-product-row.is-last-child td {
  border-bottom: 1.5px solid #94a3b8 !important;
}

/* Гарантоване збереження нейтральних рамок при будь-яких етапах та фільтрах */
.orders-custom-table tbody tr.stage-design td,
.orders-custom-table tbody tr.stage-construction td,
.orders-custom-table tbody tr.stage-correction td,
.orders-custom-table tbody tr.stage-none td,
.orders-custom-table tbody tr.readiness-awaiting_payment td,
.orders-custom-table tbody tr.readiness-missing_spec td,
.orders-custom-table tbody tr.readiness-ready_for_stage td,
.orders-custom-table tbody tr.readiness-blocked_both td,
.orders-custom-table tbody tr td.order-col-stage,
.orders-custom-table tbody tr td.order-col-status {
  border-bottom-color: #e2e8f0 !important;
  border-right-color: #e2e8f0 !important;
  border-left: none !important;
}

/* 6. Чітка, узгоджена типографіка Inter 12px по всіх колонках */

/* 1. Номер замовлення */
.orders-custom-table tbody td.order-col-number .order-number-text,
.orders-custom-table tbody td.sticky-number .order-number-text,
.orders-custom-table tbody td.order-col-number strong,
.orders-custom-table tbody td.sticky-number strong {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  color: #0f172a !important;
}
.orders-custom-table tbody td.order-col-number .order-number-text.child-code {
  font-weight: 600 !important;
  color: #334155 !important;
}

/* 2. Назва виробу */
.orders-custom-table tbody td.order-col-order strong,
.orders-custom-table tbody .order-title-cell strong,
.orders-custom-table tbody .product-child-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
}

.orders-custom-table tbody td.order-col-order small,
.orders-custom-table tbody .order-title-cell small {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin-top: 1px !important;
}

/* 3. Тип меблів */
.orders-custom-table tbody td.order-col-furniture_type {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  letter-spacing: -0.005em !important;
}

/* 4. Рахунок */
.orders-custom-table tbody td.order-col-invoice {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  color: #334155 !important;
  letter-spacing: -0.005em !important;
}
.orders-custom-table tbody .project-badge,
.orders-custom-table tbody .multi-invoice-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* 5. Обсяг (вироби, модулі) */
.orders-custom-table tbody td.order-col-volume,
.orders-custom-table tbody .order-volume-cell {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  letter-spacing: -0.005em !important;
}

.orders-custom-table tbody .order-volume-cell .vol-num {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: #0f172a !important;
}

/* 6. Поточний етап — вирівнювання по лівому краю та суцільна пастельна заливка клітинки */
.orders-custom-table tbody td.order-col-stage,
.orders-custom-table tbody td[data-order-cell="stage"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 10px !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-left: none !important;
  border-top: none !important;
}

/* Проєктування (М'ятно-зелена заливка клітинки) */
.orders-custom-table tbody tr.stage-design td.order-col-stage,
.orders-custom-table tbody tr td.order-col-stage:has(.stage-design),
.orders-custom-table tbody tr.stage-design td[data-order-cell="stage"],
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-design) {
  background: #ecfdf5 !important;
  color: #065f46 !important;
}
.orders-custom-table tbody tr.stage-design:hover td.order-col-stage,
.orders-custom-table tbody tr:hover td.order-col-stage:has(.stage-design),
.orders-custom-table tbody tr.stage-design:hover td[data-order-cell="stage"],
.orders-custom-table tbody tr:hover td[data-order-cell="stage"]:has(.stage-design) {
  background: #d1fae5 !important;
}

/* Конструювання (М'яка синя заливка клітинки) */
.orders-custom-table tbody tr.stage-construction td.order-col-stage,
.orders-custom-table tbody tr td.order-col-stage:has(.stage-construction),
.orders-custom-table tbody tr.stage-construction td[data-order-cell="stage"],
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-construction) {
  background: #eff6ff !important;
  color: #1e40af !important;
}
.orders-custom-table tbody tr.stage-construction:hover td.order-col-stage,
.orders-custom-table tbody tr:hover td.order-col-stage:has(.stage-construction),
.orders-custom-table tbody tr.stage-construction:hover td[data-order-cell="stage"],
.orders-custom-table tbody tr:hover td[data-order-cell="stage"]:has(.stage-construction) {
  background: #dbeafe !important;
}

/* Правки №1 / №2 (Тепла бурштинова заливка клітинки) */
.orders-custom-table tbody tr.stage-correction td.order-col-stage,
.orders-custom-table tbody tr td.order-col-stage:has(.stage-edit-1),
.orders-custom-table tbody tr td.order-col-stage:has(.stage-edit-2),
.orders-custom-table tbody tr.stage-correction td[data-order-cell="stage"],
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-edit-1),
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-edit-2) {
  background: #fffbeb !important;
  color: #92400e !important;
}
.orders-custom-table tbody tr.stage-correction:hover td.order-col-stage,
.orders-custom-table tbody tr:hover td.order-col-stage:has(.stage-edit-1),
.orders-custom-table tbody tr:hover td.order-col-stage:has(.stage-edit-2),
.orders-custom-table tbody tr.stage-correction:hover td[data-order-cell="stage"],
.orders-custom-table tbody tr:hover td[data-order-cell="stage"]:has(.stage-edit-1),
.orders-custom-table tbody tr:hover td[data-order-cell="stage"]:has(.stage-edit-2) {
  background: #fef3c7 !important;
}

/* Правки платні (Коралово-червона заливка клітинки) */
.orders-custom-table tbody tr td.order-col-stage:has(.stage-edit-paid),
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-edit-paid) {
  background: #fef2f2 !important;
  color: #991b1b !important;
}
.orders-custom-table tbody tr:hover td.order-col-stage:has(.stage-edit-paid),
.orders-custom-table tbody tr:hover td[data-order-cell="stage"]:has(.stage-edit-paid) {
  background: #fee2e2 !important;
}

/* Етап не створено */
.orders-custom-table tbody tr td.order-col-stage:has(.stage-not-created),
.orders-custom-table tbody tr td.order-col-stage:has(.stage-none),
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-not-created),
.orders-custom-table tbody tr td[data-order-cell="stage"]:has(.stage-none) {
  background: inherit !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* У шапці проєкту за замовчуванням: прочерк «—» по лівому краю */
.orders-custom-table tbody tr.project-group-row td.order-col-stage,
.orders-custom-table tbody tr.project-group-row td[data-order-cell="stage"] {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding-left: 12px !important;
}

/* Якщо у проєкті всі вироби на Конструюванні */
.orders-custom-table tbody tr.project-group-row td.order-col-stage:has(.stage-construction),
.orders-custom-table tbody tr.project-group-row.stage-construction td.order-col-stage,
.orders-custom-table tbody tr.project-group-row td[data-order-cell="stage"]:has(.stage-construction),
.orders-custom-table tbody tr.project-group-row.stage-construction td[data-order-cell="stage"] {
  background: #eff6ff !important;
  color: #1e40af !important;
}

.orders-custom-table tbody td.order-col-stage .stage-chip,
.orders-custom-table tbody td[data-order-cell="stage"] .stage-chip {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  gap: 6px !important;
}

/* 7. Стан етапу (вирівнювання по лівому краю, нейтральний стандартний фон клітинки) */
.orders-custom-table tbody td.order-col-status,
.orders-custom-table tbody td[data-order-cell="status"] {
  background: #ffffff !important;
  color: #17201b !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  padding-left: 12px !important;
  padding-right: 10px !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-left: none !important;
  border-top: none !important;
}

.orders-custom-table tbody tr:hover td.order-col-status,
.orders-custom-table tbody tr:hover td[data-order-cell="status"] {
  background: #f8fafc !important;
}

.orders-custom-table tbody tr.project-group-row td.order-col-status,
.orders-custom-table tbody tr.project-group-row td[data-order-cell="status"] {
  background: #f1f5f9 !important;
}

.orders-custom-table tbody tr.project-group-row:hover td.order-col-status,
.orders-custom-table tbody tr.project-group-row:hover td[data-order-cell="status"] {
  background: #e2e8f0 !important;
}

.orders-custom-table tbody td.order-col-status .status,
.orders-custom-table tbody td[data-order-cell="status"] .status {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
}

.orders-custom-table tbody td.order-col-status .status-row-duo,
.orders-custom-table tbody td[data-order-cell="status"] .status-row-duo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
}

.orders-custom-table tbody td.order-col-status .status-mini {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* 8. Дати: входу, факт, створення */
.orders-custom-table tbody td[data-order-cell="planned_start"],
.orders-custom-table tbody td[data-order-cell="planned_finish"],
.orders-custom-table tbody td[data-order-cell="actual_finish"],
.orders-custom-table tbody td[data-order-cell="created"],
.orders-custom-table tbody td.order-col-planned_start,
.orders-custom-table tbody td.order-col-planned_finish,
.orders-custom-table tbody td.order-col-actual_finish,
.orders-custom-table tbody td.order-col-created {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  color: #334155 !important;
  letter-spacing: -0.005em !important;
}

.orders-custom-table tbody .today-date {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #2563eb !important;
}

/* 9. Дедлайн */
.orders-custom-table tbody .order-deadline-cell .deadline-date {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: #0f172a !important;
  letter-spacing: -0.005em !important;
}

.orders-custom-table tbody .deadline-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.005em !important;
}

/* 10. Час (Факт / План) */
.orders-custom-table tbody .order-time-cell {
  font-family: 'Inter', sans-serif !important;
  font-variant-numeric: tabular-nums !important;
}

.orders-custom-table tbody .order-time-cell .time-fact {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
}

.orders-custom-table tbody .order-time-cell.is-running .time-fact {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

.orders-custom-table tbody .order-time-cell.overdue .time-fact {
  color: #dc2626 !important;
}

.orders-custom-table tbody .order-time-cell .time-est {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.005em !important;
  color: #475569 !important;
}

.orders-custom-table tbody .order-timer-actions,
.orders-custom-table tbody .order-action-note,
.orders-custom-table tbody .order-action-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* 12. Вибір конструктора: сайдбар, планувальник, реєстр замовлень */
.sidebar-foot {
  margin-top: auto;
  display: grid;
  gap: 10px;
}
.sidebar-foot .constructor-control {
  margin-top: 0;
}
.sidebar-foot .profile {
  margin-top: 6px;
}

.planner-constructor-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  background: var(--surface-2, #f1f5f9);
  padding: 3px 4px;
  border-radius: 9px;
  border: 1px solid var(--border, #e2e8f0);
}
.planner-constructor-btn {
  border: 0;
  background: transparent;
  color: var(--muted, #64748b);
  font-weight: 600;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.planner-constructor-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text, #0f172a);
}
.planner-constructor-btn.active {
  background: var(--surface, #ffffff);
  color: var(--primary-strong, #0369a1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

.constructor-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.constructor-filter-wrap select {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text, #0f172a);
  font-weight: 500;
  min-width: 140px;
}

/* Cloud Sync Button */
.cloud-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.cloud-sync-btn:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.38);
}
.cloud-sync-btn:active {
  transform: translateY(0);
}
.cloud-sync-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
.cloud-sync-spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}