*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --primary:var(--n-900); --primary-light:var(--n-900); --primary-dark:var(--n-900); --sidebar-bg:var(--n-900); --sidebar-hover:rgba(255,255,255,.04); --sidebar-active:var(--n-900); --bg:var(--n-50); --bg-secondary:var(--n-100); --input-bg:var(--n-0); --text-muted:var(--n-400); --card-bg:var(--n-0); --text:var(--n-900); --text-secondary:var(--n-500); --border:var(--n-200); --border-strong:var(--n-300); --soft:var(--n-100); --success:var(--success-fg); --warning:var(--warning-fg); --danger:var(--danger-fg); --info:var(--info-fg); --radius:6px; --radius-sm:4px; --radius-lg:8px; --shadow:none; --shadow-md:0 8px 24px -12px rgba(10,10,10,.12); --transition:background .12s ease, border-color .12s ease, color .12s ease; } html{font-size:var(--text-md);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;display:flex;min-height:100vh;overflow-x:hidden;width:100%} a{color:var(--primary);text-decoration:none} button{cursor:pointer;font-family:inherit} input,select{font-family:inherit;font-size:var(--text-base)} .tnum,.kpi-value,.vb-stat-value,thead th,.badge,table.data .num,table.data .id{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'} .mono{font-family:ui-monospace,Menlo,monospace;font-feature-settings:'tnum','zero'} .sidebar{ width:240px;min-width:240px;background:var(--sidebar-bg);color:var(--n-300); display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100; transition:transform .3s ease;border-right:1px solid var(--n-900); } .sidebar.collapsed{transform:translateX(-100%)} .sidebar-brand{padding:18px 22px var(--space-10);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:var(--space-6)} .sidebar.rail{width:64px;min-width:64px} .sidebar.rail .sidebar-brand{padding:18px 0;justify-content:center} .sidebar.rail .sidebar-brand .brand-text{display:none} .sidebar.rail .nav-search-wrap,.sidebar.rail .nav-search-no-results,.sidebar.rail .nav-favorites-empty,.sidebar.rail .nav-section{display:none} .sidebar.rail .nav-section-items{padding-top:2px} .sidebar.rail .nav-section-items.collapsed{display:flex} .sidebar.rail .nav-item{position:relative;justify-content:center;gap:0;padding:10px 0;font-size:0} .sidebar.rail .nav-item svg{opacity:.85} .sidebar.rail .nav-item .nav-item-pin{display:none} .sidebar.rail .nav-item .nav-item-badge{position:absolute;margin:0;top:6px;right:13px;min-width:0;width:8px;height:8px;padding:0;font-size:0;border-radius:50%} .sidebar.rail .sidebar-footer{padding:12px 0;font-size:0;text-align:center} .sidebar.rail .sidebar-feedback-btn,.sidebar.rail .sidebar-switch-app{justify-content:center;gap:0;padding:8px 0;font-size:0} .sidebar.rail .sidebar-collapse-pref{display:none} .rail-tooltip{position:fixed;z-index:300;transform:translateY(-50%);background:var(--n-900);color:var(--n-0);padding:5px 10px;border-radius:6px;font-size:.78rem;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;box-shadow:0 6px 18px rgba(0,0,0,.35)} .rail-tooltip.visible{opacity:1;visibility:visible} .sidebar-collapse-pref{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:.7rem;color:var(--n-400)} .sidebar-collapse-pref .scp-options{display:inline-flex;border:1px solid rgba(255,255,255,.14);border-radius:6px;overflow:hidden;flex-shrink:0} .sidebar-collapse-pref .scp-opt{background:transparent;border:0;color:var(--n-400);font-size:.7rem;font-weight:600;padding:4px 9px;cursor:pointer;font-family:inherit;transition:background .12s,color .12s} .sidebar-collapse-pref .scp-opt:hover{color:var(--n-0)} .sidebar-collapse-pref .scp-opt.active{background:rgba(255,255,255,.12);color:var(--n-0)} .sidebar-brand .logo{ width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center; flex-shrink:0;overflow:hidden; } .sidebar-brand .logo svg{width:34px;height:34px} .sidebar-brand .brand-text{display:flex;flex-direction:column} .sidebar-brand .brand-name{font-size:var(--text-lg);font-weight:700;color:var(--n-0);line-height:1.15;letter-spacing:-.01em} .sidebar-brand .brand-sub{font-size:var(--text-2xs);color:var(--n-500);letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding-top:var(--space-1)} .sidebar-nav{flex:1;padding:var(--space-6) 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent} .sidebar-nav::-webkit-scrollbar{width:4px} .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px} .sidebar-nav::-webkit-scrollbar-track{background:transparent} .nav-section{padding:0 22px;margin-bottom:var(--space-2);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--n-500);font-weight:600;margin-top:18px} .nav-section.nav-section-collapsible{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);cursor:pointer;user-select:none;padding-top:var(--space-3);padding-bottom:var(--space-3);-webkit-tap-highlight-color:transparent} .nav-section.nav-section-collapsible:hover{color:var(--n-300)} .nav-section.nav-section-collapsible:focus{outline:none} .nav-section.nav-section-collapsible:focus-visible{outline:1px solid rgba(255,255,255,.25);outline-offset:2px;border-radius:3px} .nav-section .nav-section-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-section .nav-section-chevron{width:12px;height:12px;flex-shrink:0;opacity:.55;transition:transform .2s ease} .nav-section.collapsed .nav-section-chevron{transform:rotate(-90deg)} .nav-section-items{display:flex;flex-direction:column;overflow:hidden} .nav-section-items.collapsed{display:none} .nav-item{ display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) 22px;color:var(--n-300);font-size:var(--text-sm);font-weight:500; transition:var(--transition);cursor:pointer;border-left:3px solid transparent; text-decoration:none; } .nav-item:hover{background:var(--sidebar-hover);color:var(--n-0)} .nav-item.active{background:transparent;color:var(--n-0);border-left-color:var(--n-0)} .nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.75} .nav-item.active svg{opacity:1} .sidebar-footer{padding:var(--space-7) 18px;border-top:1px solid rgba(255,255,255,.08);font-size:var(--text-xs);color:var(--n-400)} .sidebar-switch-app{display:none;align-items:center;justify-content:center;gap:var(--space-3);margin:0 0 var(--space-5);padding:var(--space-3) var(--space-5);border:1px solid rgba(255,255,255,.12);border-radius:6px;background:transparent;color:var(--n-300);font-size:var(--text-xs);font-weight:500;text-decoration:none;transition:background .15s,color .15s} .sidebar-switch-app.visible{display:inline-flex} .sidebar-switch-app:hover{background:rgba(255,255,255,.06);color:var(--n-0);text-decoration:none} .sidebar-switch-app svg{width:14px;height:14px;opacity:.8} .sidebar-feedback-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%;margin:0 0 var(--space-5);padding:var(--space-3) var(--space-5);border:1px solid rgba(255,255,255,.12);border-radius:6px;background:transparent;color:var(--n-300);font-size:var(--text-xs);font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s,color .15s} .sidebar-feedback-btn:hover{background:rgba(255,255,255,.06);color:var(--n-0)} .sidebar-feedback-btn svg{width:14px;height:14px;opacity:.85} .nav-search-wrap{position:relative;display:flex;align-items:center;padding:var(--space-4) var(--space-5) var(--space-2)} .nav-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:13px;height:13px;opacity:.35;pointer-events:none;flex-shrink:0} .nav-search{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--n-300);font-size:var(--text-sm);padding:var(--space-3) 28px var(--space-3) 30px;outline:none;transition:background .15s,border-color .15s} .nav-search::placeholder{color:var(--n-500)} .nav-search:focus{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)} .nav-search-clear{position:absolute;right:15px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--n-400);padding:var(--space-1);cursor:pointer;border-radius:3px;display:none;align-items:center} .nav-search-clear:hover{color:var(--n-0);background:rgba(255,255,255,.06)} .nav-search-clear.visible{display:flex} .nav-search-no-results{padding:var(--space-2) 18px var(--space-5);font-size:var(--text-xs);color:var(--n-400);font-style:italic} .nav-item-pin{margin-left:auto;flex-shrink:0;background:none;border:none;padding:var(--space-1) 0 var(--space-1) var(--space-3);color:var(--n-700);cursor:pointer;opacity:0;transition:opacity .1s,color .15s;display:flex;align-items:center} .nav-item:hover .nav-item-pin,.nav-item-pin.pinned{opacity:1} .nav-item-pin:hover,.nav-item-pin.pinned{color:var(--warning-solid)} .nav-item-pin svg{width:12px;height:12px} .nav-favorites-empty{padding:var(--space-2) 18px var(--space-4);font-size:var(--text-xs);color:var(--n-400);font-style:italic} .nav-item-badge{ margin-left:auto;flex-shrink:0; display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 var(--space-3);border-radius:9px; background:var(--danger-solid);color:var(--n-0);font-size:var(--text-2xs);font-weight:700;line-height:1; } .nav-item-badge + .nav-item-pin{margin-left:var(--space-3)} .main{margin-left:240px;flex:1;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;max-width:100vw;transition:margin-left .3s ease} .main.sidebar-collapsed{margin-left:0} .main.sidebar-rail{margin-left:64px} .topbar{ background:var(--bg);border-bottom:1px solid var(--border);padding:0 var(--space-16);height:56px; display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50; } .topbar-left{display:flex;align-items:center;gap:var(--space-10)} .topbar-left h1{font-size:var(--text-md);font-weight:600;color:var(--text);letter-spacing:-.01em} .facility-select{ padding:var(--space-3) var(--space-6);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--n-0); font-size:var(--text-sm);color:var(--text);min-width:200px; } .facility-select:hover{border-color:var(--border-strong)} .topbar-right{display:flex;align-items:center;gap:var(--space-5)} .topbar-right .refresh-btn{ padding:var(--space-3) var(--space-6);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--n-0); font-size:var(--text-sm);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-3);transition:var(--transition); cursor:pointer;font-family:inherit; } .topbar-right .refresh-btn:hover{background:var(--soft);border-color:var(--border-strong);color:var(--text)} .topbar-right .refresh-btn::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0; } .topbar-right .refresh-btn.up-to-date{background:var(--n-0);border-color:var(--border-strong);color:var(--text)} .topbar-right .refresh-btn.up-to-date::before{background:var(--success)} .topbar-right .refresh-btn.up-to-date:hover{background:var(--soft)} .topbar-right .refresh-btn.update-available{ background:var(--info-bg);border-color:var(--info-solid);color:var(--info-strong);font-weight:600; animation:updatePulse 2.4s ease-in-out infinite; } .topbar-right .refresh-btn.update-available::before{background:var(--info-solid)} .topbar-right .refresh-btn.update-available:hover{background:var(--info-solid);border-color:var(--info-solid);color:var(--n-0);animation:none} .topbar-right .refresh-btn.update-available:hover::before{background:var(--n-0)} @keyframes updatePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.4)} 50%{box-shadow:0 0 0 6px rgba(37,99,235,0)} } .topbar-right .last-refresh{font-size:var(--text-xs);color:var(--text-secondary)} .page{padding:28px var(--space-16) 56px;flex:1} .page-header{ margin-bottom:var(--space-12);display:flex;align-items:flex-end;justify-content:space-between; flex-wrap:wrap;gap:var(--space-8);padding-bottom:var(--space-7);border-bottom:1px solid var(--text); } .page-header h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--text)} .kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0;margin-bottom:var(--space-12);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);overflow:hidden} .kpi-card{ background:var(--card-bg);border-right:1px solid var(--border);padding:18px var(--space-10); border-radius:0;border-left:none;transition:var(--transition); display:flex;flex-direction:column;gap:var(--space-4); } .kpi-card:last-child{border-right:none} .kpi-card:hover{background:var(--soft)} .kpi-card.selected{background:var(--soft);box-shadow:inset 0 0 0 2px var(--n-900)} .kpi-label{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-weight:600} .kpi-value{font-size:var(--text-2xl);font-weight:700;color:var(--text);line-height:1;letter-spacing:-.03em} .kpi-card.green,.kpi-card.yellow,.kpi-card.blue,.kpi-card.red,.kpi-card.gray{position:relative} .kpi-card.green::after,.kpi-card.yellow::after,.kpi-card.blue::after,.kpi-card.red::after,.kpi-card.gray::after{ content:'';position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%; } .kpi-card.green::after{background:var(--success)} .kpi-card.yellow::after{background:var(--warning)} .kpi-card.blue::after{background:var(--info)} .kpi-card.red::after{background:var(--danger)} .kpi-card.gray::after{background:var(--text-muted)} .kpi-card.purple{position:relative}.kpi-card.purple::after{content:'';position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;background:#8b5cf6} .kpi-sub{font-size:var(--text-xs);color:var(--text-secondary)} .folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-10);margin:var(--space-4) 0 var(--space-12)} .folder-card{position:relative;display:block;text-decoration:none;color:inherit;background:var(--card-bg); border:1px solid var(--border);border-radius:2px 10px 10px 10px;padding:var(--space-8) var(--space-8) var(--space-7);margin-top:var(--space-8); transition:var(--transition);cursor:pointer} .folder-card::before{content:'';position:absolute;top:-13px;left:-1px;width:48%;height:15px; background:var(--card-bg);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0} .folder-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10);border-color:var(--info)} .folder-card.band-sales::before{background:color-mix(in srgb,var(--info) 16%,var(--card-bg));border-color:color-mix(in srgb,var(--info) 38%,var(--border))} .folder-card.band-execution::before{background:color-mix(in srgb,var(--warning) 18%,var(--card-bg));border-color:color-mix(in srgb,var(--warning) 38%,var(--border))} .folder-card.is-done{border-color:var(--success)} .folder-card.is-done::before{background:color-mix(in srgb,var(--success) 22%,var(--card-bg));border-color:color-mix(in srgb,var(--success) 45%,var(--border))} .folder-card.is-current{border-color:var(--info);box-shadow:0 0 0 2px color-mix(in srgb,var(--info) 30%,transparent)} .folder-card.is-future{opacity:.72} .folder-title{font-weight:700;font-size:var(--text-md);line-height:1.25;margin-bottom:var(--space-1)} .folder-meta{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.35} .folder-count{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.03em;line-height:1;margin:var(--space-4) 0 var(--space-1)} .folder-band-head{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);font-weight:700;margin:22px 0 var(--space-1);display:flex;align-items:center;gap:var(--space-4)} .folder-band-head::after{content:'';flex:1;height:1px;background:var(--border)} .lc-substep{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);padding:var(--space-1) 0;color:var(--text)} .lc-substep input{width:15px;height:15px;cursor:pointer} .lc-substep.derived label{color:var(--text-secondary)} .lc-chip{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);padding:var(--space-1) var(--space-4);border-radius:999px;border:1px solid var(--border);background:var(--soft);text-decoration:none;color:inherit} .lc-chip:hover{border-color:var(--info)} .lc-handoff{display:flex;align-items:center;gap:var(--space-5);margin:var(--space-10) 0 var(--space-2);color:var(--text-secondary);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em} .lc-handoff::before,.lc-handoff::after{content:'';flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 14px)} .lc-progress{height:7px;border-radius:999px;background:var(--soft);overflow:hidden} .lc-progress>span{display:block;height:100%;background:var(--info);border-radius:999px} .vb-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:var(--space-12);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card-bg)} @media (max-width:900px){.vb-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.vb-summary-grid{grid-template-columns:1fr}} .vb-stat{ position:relative;background:var(--card-bg);border-radius:0; padding:var(--space-8) 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border); cursor:pointer;transition:var(--transition); display:flex;flex-direction:column;gap:var(--space-3);min-height:96px; } .vb-stat:hover{background:var(--soft)} .vb-stat.is-active{background:var(--text);color:var(--n-0)} .vb-stat.is-active .vb-stat-label,.vb-stat.is-active .vb-stat-sub{color:var(--n-400)} .vb-stat.is-active .vb-stat-value{color:var(--n-0)} .vb-stat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)} .vb-stat-label{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-weight:600} .vb-stat-leg{ display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--text-2xs);font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--text);background:transparent; padding:var(--space-1) var(--space-4);border:1px solid var(--border-strong);border-radius:99px;white-space:nowrap; } .vb-stat-leg::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--vb-accent,var(--text-muted))} .vb-stat.is-active .vb-stat-leg{color:var(--n-0);border-color:rgba(255,255,255,.3)} .vb-stat-value{font-size:var(--text-2xl);font-weight:700;color:var(--text);line-height:1.05;letter-spacing:-.03em} .vb-stat-value.is-zero{color:var(--text-secondary);font-weight:600} .vb-stat-sub{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.3} .card{background:var(--card-bg);border-radius:var(--radius-lg);border:1px solid var(--border);margin-bottom:var(--space-10);overflow:hidden} .card-header{padding:var(--space-7) 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .card-header h3{font-size:var(--text-base);font-weight:600;letter-spacing:-.005em} .card-body{padding:18px} details.collapsible-card > summary{list-style:none} details.collapsible-card > summary::-webkit-details-marker{display:none} details.collapsible-card > summary{border-bottom:1px solid var(--border)} details.collapsible-card[open] > summary{border-bottom:1px solid var(--border)} details.collapsible-card:not([open]) > summary{border-bottom:none} details.collapsible-card .collapse-chevron{transition:transform .15s ease;font-size:var(--text-sm);color:var(--text-secondary);margin-left:var(--space-4)} details.collapsible-card[open] .collapse-chevron{transform:rotate(90deg)} details.home-company-stats > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-4);margin:0 0 var(--space-6)} details.home-company-stats > summary::-webkit-details-marker{display:none} details.home-company-stats .collapse-chevron{transition:transform .15s ease;font-size:var(--text-sm);color:var(--text-secondary)} details.home-company-stats[open] .collapse-chevron{transform:rotate(90deg)} .carrier-section-header{ font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em; color:var(--text-secondary);margin:var(--space-12) 0 var(--space-5);padding-bottom:var(--space-3); border-bottom:2px solid var(--border); } .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10)} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-10)} .table-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums} thead th{ text-align:left;padding:var(--space-5) var(--space-8);background:var(--bg);font-weight:600;font-size:var(--text-2xs); text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);border-bottom:1px solid var(--border); white-space:nowrap; } tbody td{padding:var(--space-6) var(--space-8);border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)} tbody tr{transition:background .08s ease} tbody tr:nth-child(even){background:rgba(15,23,42,.035)} tbody tr:hover{background:var(--soft)} tbody tr:last-child td{border-bottom:none} .ra-section-title{ font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;color:var(--n-500);font-weight:800; margin-bottom:var(--space-3); } .ra-credit-table thead th{ white-space:normal;line-height:1.15;overflow-wrap:anywhere;word-break:normal; padding:var(--space-4) var(--space-4);vertical-align:bottom; } .ra-credit-table tbody td{padding:var(--space-5) var(--space-4)} .ra-credit-table td,.ra-credit-table th{min-width:0} .badge{ display:inline-flex;align-items:center;gap:var(--space-3); padding:var(--space-1) var(--space-5) var(--space-1) var(--space-4);border-radius:99px; border:1px solid var(--border-strong);background:var(--n-0);color:var(--text); font-family:inherit; font-size:var(--text-2xs);font-weight:500;letter-spacing:.08em; text-transform:uppercase;white-space:nowrap;line-height:1.4; } .badge::before{ content:'';width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0; } .badge-available::before,.badge-completed::before,.badge-shipped::before,.badge-high::before, .badge-ready_for_pickup::before,.badge-active::before,.badge-picked_up::before, .badge-en_route::before,.badge-en-route::before,.badge-delivered::before, .badge-fully_received::before,.badge-quoted::before,.badge-awarded::before, .badge-approved::before,.badge-reviewed::before,.badge-paid::before, .badge-responded::before{background:var(--success)} .badge-allocated::before,.badge-picking::before,.badge-warning::before, .badge-rush::before,.badge-no_show::before,.badge-delayed::before, .badge-partially_received::before,.badge-auto::before,.badge-dispatched::before, .badge-quote::before,.badge-return_pending::before{background:var(--warning)} .badge-damaged::before,.badge-cancelled::before,.badge-danger::before, .badge-overdue::before,.badge-disputed::before,.badge-undelivered::before, .badge-exception::before,.badge-claims::before{background:var(--danger)} .badge-staged::before,.badge-receiving::before,.badge-checked_in::before, .badge-loading::before,.badge-info::before,.badge-in_progress::before, .badge-primary::before,.badge-at_door::before,.badge-shipping::before, .badge-scheduled::before,.badge-quoting::before,.badge-processing::before, .badge-dispatch::before,.badge-operations::before,.badge-sales::before, .badge-billing::before,.badge-office::before,.badge-ltl_pickup::before, .badge-arrived::before,.badge-return_initiated::before, .badge-transfer_in::before,.badge-transfer_out::before{background:var(--info)} .badge-in_transit::before,.badge-pending::before,.badge-standard::before, .badge-closed::before,.badge-inactive::before,.badge-draft::before, .badge-uploaded::before,.badge-driver_lead::before, .badge-one_off::before,.badge-planned::before,.badge-assigned::before{background:var(--text-muted)} .badge-delivery::before,.badge-sms::before,.badge-received::before, .badge-receive::before,.badge-fully_received::before{background:var(--success)} .badge-rejected::before,.badge-return_inspect::before{background:var(--danger)} .badge-pending_approval::before,.badge-return_receive::before, .badge-county::before{background:var(--warning)} .badge-scheduling::before,.badge-email::before,.badge-feedback::before, .badge-both::before,.badge-pick::before,.badge-putaway::before, .badge-zip_list::before,.badge-state::before,.badge-radius::before{background:var(--info)} .badge-success::before{background:var(--success)} .badge-muted::before{background:var(--text-muted)} .cond-card{border:1px solid var(--n-200);border-radius:var(--radius);padding:var(--space-4); background:var(--n-50);margin:var(--space-4) 0} .cond-head{display:flex;align-items:center;gap:var(--space-3);font-weight:600; font-size:var(--text-sm);margin-bottom:var(--space-3)} .cond-model{margin-left:auto;font-size:var(--text-xs);color:var(--text-muted);font-weight:400} .cond-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)} .cond-conf{font-size:var(--text-xs);color:var(--text-secondary)} .cond-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-3)} .cond-chip{font-size:var(--text-xs);padding:2px 9px;border-radius:999px; border:1px solid var(--n-200);background:var(--n-0);white-space:nowrap;text-transform:capitalize} .cond-chip.cond-ok{background:var(--success-bg);color:var(--success-strong);border-color:transparent} .cond-chip.cond-info{background:var(--info-bg);color:var(--info-strong);border-color:transparent} .cond-chip.cond-damage{background:var(--warning-bg);color:var(--warning-strong);border-color:transparent} .cond-chip.cond-critical{background:var(--danger-bg);color:var(--danger-strong);border-color:transparent} .cond-desc{width:100%;box-sizing:border-box;font-size:var(--text-sm);padding:8px 9px; border:1px solid var(--n-200);border-radius:6px;background:var(--n-0);color:var(--text-primary); resize:vertical;font-family:inherit} .cond-desc-ro{background:var(--n-0);white-space:pre-wrap;min-height:2.4em} .cond-empty{font-size:var(--text-sm);color:var(--text-muted);font-style:italic} .cond-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-3)} .densityrec-badge { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .densityrec-run { background: var(--success-bg); color: var(--success-strong); } .densityrec-combine { background: var(--warning-bg); color: var(--warning-strong); } .densityrec-grow { background: var(--info-bg); color: var(--info-strong); } .densityrec-monitor { background: var(--n-100); color: var(--n-600); } .densityrec-play { padding: var(--space-2) var(--space-6) var(--space-4); font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer; } .densityrec-play:hover { background: var(--n-50); } .densityrec-play .densityrec-headline { color: var(--text-primary); font-weight: 600; margin-left: var(--space-2); } .densityrec-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; } .densityrec-chip { font-size: var(--text-xs); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius); background: var(--n-100); color: var(--text-secondary); } .densityrec-chip b { color: var(--text-primary); } .toggle-sw{position:relative;display:inline-block;width:34px;height:20px;flex-shrink:0;vertical-align:middle} .toggle-sw input{opacity:0;width:0;height:0;position:absolute} .toggle-sw-track{position:absolute;inset:0;background:var(--border-strong);border-radius:20px;transition:background .15s;cursor:pointer} .toggle-sw input:checked+.toggle-sw-track{background:var(--text)} .toggle-sw-track:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--n-0);border-radius:50%;transition:left .15s} .toggle-sw input:checked+.toggle-sw-track:before{left:17px} .quoting-flow{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-5);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)} .quoting-flow-step{display:inline-block;padding:var(--space-1) var(--space-4);background:var(--n-0);border:1px solid var(--border-strong);border-radius:99px;font-size:var(--text-2xs);color:var(--text);white-space:nowrap;letter-spacing:.04em} .quoting-flow-arrow{color:var(--text-muted);font-size:var(--text-sm);line-height:1} .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--n-0);color:var(--text-secondary);cursor:pointer;padding:0;text-decoration:none;vertical-align:middle;transition:var(--transition)} .icon-btn:hover{background:var(--soft);color:var(--text);border-color:var(--border-strong)} .icon-btn svg{display:block} .dims-kanban{display:flex;gap:var(--space-6);overflow-x:auto;padding-bottom:var(--space-6);min-height:400px} .dims-kanban-col{flex:1;min-width:220px;background:var(--n-50);border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column} .dims-kanban-col-header{padding:var(--space-5) var(--space-7);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .dims-kanban-col-header .col-count{background:var(--n-200);color:var(--n-600);padding:var(--space-1) var(--space-4);border-radius:10px;font-size:var(--text-2xs)} .dims-kanban-col-body{flex:1;padding:var(--space-4);overflow-y:auto;max-height:500px;display:flex;flex-direction:column;gap:var(--space-3)} .dims-card{background:var(--n-0);border-radius:6px;border:1px solid var(--border);padding:var(--space-5) var(--space-6);cursor:pointer;transition:var(--transition);font-size:var(--text-sm)} .dims-card:hover{background:var(--soft);border-color:var(--border-strong)} .dims-card .dims-card-order{font-weight:700;margin-bottom:var(--space-2)} .dims-card .dims-card-customer{color:var(--text-secondary);font-size:var(--text-xs);margin-bottom:var(--space-2)} .dims-card .dims-card-addr{color:var(--text-secondary);font-size:var(--text-xs);margin-bottom:var(--space-3)} .dims-card .dims-card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)} .dims-card .dims-card-window{font-size:var(--text-xs);color:var(--text-secondary)} .dims-status-dot{width:8px;height:8px;border-radius:50%;display:inline-block} .dims-status-dot.green{background:var(--success-solid)} .dims-status-dot.yellow{background:var(--warning-solid)} .dims-status-dot.red{background:var(--danger-solid)} .comm-tpl-toolbar{display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-8);flex-wrap:wrap} .comm-tpl-toolbar input[type=search]{flex:1;min-width:220px;max-width:340px;padding:var(--space-3) var(--space-6);border:1px solid var(--border);border-radius:6px;font-size:var(--text-sm)} .comm-tpl-toolbar .filter-pill{padding:var(--space-2) var(--space-6);border:1px solid var(--border);background:var(--n-0);border-radius:14px;font-size:var(--text-xs);color:var(--n-600);cursor:pointer;transition:all .12s} .comm-tpl-toolbar .filter-pill:hover{border-color:var(--n-400)} .comm-tpl-toolbar .filter-pill.active{background:var(--info-strong);color:var(--n-0);border-color:var(--info-strong)} .comm-tpl-section{margin-bottom:22px} .comm-tpl-section-header{display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-1) var(--space-4);margin-bottom:var(--space-5);border-bottom:1px solid var(--border)} .comm-tpl-section-header h4{margin:0;font-size:var(--text-base);font-weight:700;color:var(--n-900);letter-spacing:.01em} .comm-tpl-section-header .sec-count{font-size:var(--text-xs);color:var(--text-secondary);font-weight:500;background:var(--n-100);padding:var(--space-1) var(--space-4);border-radius:10px} .comm-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6)} .comm-tpl-card{background:var(--n-0);border:1px solid var(--border);border-radius:8px;padding:var(--space-6) var(--space-7);cursor:pointer;transition:all .15s ease;display:flex;flex-direction:column;gap:var(--space-4);position:relative} .comm-tpl-card:hover{border-color:var(--text);background:var(--soft)} .comm-tpl-card.inactive{opacity:.6;background:var(--n-0)} .comm-tpl-card.inactive .comm-tpl-card-title{color:var(--n-500)} .comm-tpl-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)} .comm-tpl-card-title{font-weight:600;font-size:var(--text-base);color:var(--n-900);line-height:1.3} .comm-tpl-card-code{font-size:var(--text-2xs);color:var(--text-secondary);font-family:ui-monospace,Menlo,monospace;margin-top:var(--space-1)} .comm-tpl-card-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center} .comm-tpl-card-preview{font-size:var(--text-xs);color:var(--n-600);line-height:1.45;padding:var(--space-3) var(--space-5);background:var(--n-50);border-radius:5px;border-left:3px solid var(--n-300);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis} .comm-tpl-card-preview.empty{color:var(--n-400);font-style:italic;border-left-color:var(--n-200)} .comm-tpl-card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);font-size:var(--text-xs);color:var(--text-secondary)} .comm-tpl-card-trigger code{background:var(--n-100);padding:1px var(--space-3);border-radius:3px;font-size:var(--text-2xs);color:var(--n-700)} .comm-tpl-card-trigger .muted{color:var(--n-400);font-style:italic} .tpl-edit-section{margin-bottom:18px;padding-bottom:var(--space-8);border-bottom:1px solid var(--border)} .tpl-edit-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:var(--space-2)} .tpl-edit-section h5{margin:0 0 var(--space-5);font-size:var(--text-xs);font-weight:700;color:var(--n-600);text-transform:uppercase;letter-spacing:.06em} .tpl-edit-row{display:grid;gap:var(--space-5);margin-bottom:var(--space-5)} .tpl-edit-row.cols-2{grid-template-columns:1fr 1fr} .tpl-edit-row.cols-3{grid-template-columns:1fr 1fr 1fr} .tpl-edit-row label{font-size:var(--text-xs);font-weight:600;color:var(--n-700);display:block;margin-bottom:var(--space-2)} .tpl-edit-row input,.tpl-edit-row select,.tpl-edit-row textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:5px;font-size:var(--text-sm);font-family:inherit;box-sizing:border-box} .tpl-edit-row textarea{font-family:ui-monospace,Menlo,monospace;font-size:var(--text-sm);line-height:1.45;resize:vertical} .tpl-edit-row .field-hint{font-size:var(--text-2xs);color:var(--text-secondary);margin-top:var(--space-1)} .tpl-checkbox-row{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--n-700);padding:var(--space-3) 0} .tpl-checkbox-row input{width:auto;margin:0} .tpl-var-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 var(--space-4)} .tpl-var-chip{font-family:ui-monospace,Menlo,monospace;font-size:var(--text-2xs);padding:var(--space-1) var(--space-4);background:var(--bg);color:var(--text);border:1px solid var(--border-strong);border-radius:99px;cursor:pointer;transition:var(--transition);user-select:none} .tpl-var-chip:hover{background:var(--text);color:var(--n-0);border-color:var(--text)} .tpl-char-count{font-size:var(--text-2xs);color:var(--text-secondary);margin-top:var(--space-1);text-align:right;font-variant-numeric:tabular-nums} .tpl-char-count.warn{color:var(--warning-fg);font-weight:600} .tpl-char-count.over{color:var(--danger-fg);font-weight:700} .tpl-preview-card{background:var(--info-bg);border:1px solid #bae6fd;border-radius:6px;padding:var(--space-5) var(--space-6);margin-top:var(--space-4)} .tpl-preview-card-label{font-size:var(--text-2xs);font-weight:700;color:#0369a1;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)} .tpl-preview-card-label .preview-mode-toggle{display:inline-flex;gap:0;border:1px solid #bae6fd;border-radius:4px;overflow:hidden} .tpl-preview-card-label .preview-mode-toggle button{padding:var(--space-1) var(--space-4);font-size:var(--text-2xs);font-weight:600;border:0;background:var(--info-bg);color:#0369a1;cursor:pointer;text-transform:uppercase;letter-spacing:.04em} .tpl-preview-card-label .preview-mode-toggle button.active{background:#0369a1;color:var(--n-0)} .tpl-preview-card-body{font-size:var(--text-sm);line-height:1.5;color:#0c4a6e;white-space:pre-wrap;word-break:break-word} .tpl-preview-card-body.empty{color:var(--n-500);font-style:italic;font-size:var(--text-xs)} .tpl-email-iframe{width:100%;min-height:220px;border:1px solid #bae6fd;border-radius:5px;background:var(--n-0);display:block} .tpl-email-iframe.hidden{display:none} .tpl-email-source{font-family:ui-monospace,Menlo,monospace;font-size:var(--text-xs);color:var(--n-700);background:var(--n-0);border:1px solid #bae6fd;border-radius:5px;padding:var(--space-4) var(--space-5);max-height:240px;overflow:auto;white-space:pre-wrap;word-break:break-word} .tpl-email-source.hidden{display:none} .ct-card .form-control{width:100%;box-sizing:border-box;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:5px;font-size:var(--text-sm);font-family:inherit} .ct-card textarea.form-control{line-height:1.45;resize:vertical} .ct-card .form-label{display:block;color:var(--n-700);font-weight:600} .form-label{display:block;margin-bottom:var(--space-2);color:var(--n-500)} .form-input{width:100%;box-sizing:border-box} .opt-mode-toggle{display:flex;gap:0;border:2px solid var(--border);border-radius:8px;overflow:hidden} .opt-mode-toggle button{padding:var(--space-4) var(--space-8);border:none;background:var(--n-0);font-size:var(--text-sm);font-weight:600;cursor:pointer;border-right:1px solid var(--border);transition:all .15s} .opt-mode-toggle button:last-child{border-right:none} .opt-mode-toggle button.active{background:var(--primary);color:var(--n-0)} .score-badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;font-weight:800;font-size:var(--text-lg)} .score-badge.good{background:var(--success-bg);color:var(--success-fg)} .score-badge.ok{background:var(--warning-bg);color:var(--warning-fg)} .score-badge.poor{background:var(--danger-bg);color:var(--danger-strong)} .route-builder{display:flex;gap:var(--space-8);min-height:500px} .route-builder-left{flex:3;display:flex;flex-direction:column} .route-builder-right{flex:2;display:flex;flex-direction:column} .shipment-card-drag{cursor:grab;border:2px dashed transparent;transition:all .15s} .shipment-card-drag:hover{border-color:var(--info)} .shipment-card-drag.dragging{opacity:.5} .drop-zone{min-height:100px;border:2px dashed var(--border);border-radius:var(--radius);padding:var(--space-6);transition:all .15s} .drop-zone.drag-over{border-color:var(--info);background:var(--info-bg)} .docmatch-dropzone{min-height:90px;border:2px dashed var(--border);border-radius:var(--radius);padding:var(--space-6);text-align:center;cursor:pointer;transition:all .15s;color:var(--text-secondary);font-size:var(--text-sm)} .docmatch-dropzone.is-dragover{border-color:var(--info);background:var(--info-bg)} .docmatch-staging{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--space-4);margin-top:var(--space-5)} .docmatch-cell{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--n-0);aspect-ratio:1/1} .docmatch-cell img{width:100%;height:100%;object-fit:cover;display:block} .docmatch-cell-name{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-3);font-size:var(--text-2xs);color:var(--text-secondary);word-break:break-all;background:var(--bg)} .docmatch-cell-remove{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:var(--n-0);border:0;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1} .docmatch-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-5)} .progress{margin-top:var(--space-3)} .progress-track{height:8px;border-radius:99px;background:var(--border);overflow:hidden} .progress-bar{height:100%;width:0;background:var(--info);border-radius:99px;transition:width .2s ease} .progress-bar.is-indeterminate{width:40%!important;transition:none;animation:progress-indeterminate 1.1s ease-in-out infinite} .progress-label{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--text-secondary)} @keyframes progress-indeterminate{0%{margin-left:-40%}100%{margin-left:100%}} .docmatch-progress{margin-top:var(--space-5)} .docmatch-progress-track{height:8px;border-radius:99px;background:var(--border);overflow:hidden} .docmatch-progress-bar{height:100%;background:var(--info);border-radius:99px;transition:width .2s ease} .docmatch-progress-bar.is-indeterminate{width:40%!important;transition:none;animation:progress-indeterminate 1.1s ease-in-out infinite} .docmatch-progress-label{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--text-secondary)} .docmatch-rows{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5)} .docmatch-row{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius);border:1px solid var(--border);background:var(--n-0);font-size:var(--text-sm)} .docmatch-row.is-done{background:var(--success-bg);border-color:var(--success-bg)} .docmatch-row.is-duplicate{background:var(--info-bg);border-color:var(--info-bg)} .docmatch-row.is-error{background:var(--danger-bg);border-color:var(--danger-bg)} .docmatch-row.is-warn{background:var(--warning-bg);border-color:var(--warning-bg)} .docmatch-row.is-uploading,.docmatch-row.is-queued{background:var(--bg)} .docmatch-row-body{flex:1;min-width:0} .docmatch-row-name{font-weight:600;word-break:break-all} .docmatch-row-status{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-4);border-radius:99px;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-left:var(--space-3)} .docmatch-row.is-done .docmatch-row-status{background:var(--success-fg);color:var(--n-0)} .docmatch-row.is-duplicate .docmatch-row-status{background:var(--info-fg);color:var(--n-0)} .docmatch-row.is-error .docmatch-row-status{background:var(--danger-fg);color:var(--n-0)} .docmatch-row.is-warn .docmatch-row-status{background:var(--warning-fg);color:var(--n-0)} .docmatch-row.is-uploading .docmatch-row-status,.docmatch-row.is-queued .docmatch-row-status{background:var(--text-secondary);color:var(--n-0)} .docmatch-row-msg{margin-top:var(--space-2);color:var(--text-secondary)} .docmatch-row.is-error .docmatch-row-msg{color:var(--danger-fg)} .docmatch-row.is-warn .docmatch-row-msg{color:var(--warning-fg)} .docmatch-row-actions{display:flex;gap:var(--space-4);margin-top:var(--space-3)} .docmatch-row-actions a{color:inherit;text-decoration:underline;cursor:pointer;font-size:var(--text-xs)} .docshell-banner{display:flex;flex-direction:column;gap:var(--space-4); padding:var(--space-6) var(--space-7);margin-bottom:var(--space-6); border:1px solid var(--border);border-left:3px solid var(--info); border-radius:var(--radius);background:var(--info-bg)} .docshell-banner--neutral{border-left-color:var(--border-strong);background:var(--n-50)} .docshell-banner--success{border-left-color:var(--success);background:var(--success-bg)} .docshell-banner--warning{border-left-color:var(--warning);background:var(--warning-bg)} .docshell-banner--danger{border-left-color:var(--danger);background:var(--danger-bg)} .docshell-banner-title{font-size:var(--text-sm);font-weight:700;color:var(--text)} .docshell-banner-badges{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center} .docshell-banner-lines{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);font-size:var(--text-sm)} .docshell-banner-line{display:inline-flex;gap:var(--space-2);align-items:baseline;min-width:0} .docshell-banner-line-label{color:var(--text-secondary)} .docshell-banner-line-value{font-weight:600;color:var(--text)} .docshell-banner-line--success .docshell-banner-line-value{color:var(--success-fg)} .docshell-banner-line--warning .docshell-banner-line-value{color:var(--warning-fg)} .docshell-banner-line--danger .docshell-banner-line-value{color:var(--danger-fg)} .docshell-banner-extras{display:flex;flex-direction:column;gap:var(--space-3)} .docshell-fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) var(--space-6)} .docshell-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0} .docshell-field--full{grid-column:1 / -1} .docshell-field-label{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary)} .docshell-input{width:100%;box-sizing:border-box;padding:var(--space-4) var(--space-5); border:1px solid var(--border-strong);border-radius:var(--radius-sm); background:var(--n-0);color:var(--text);font-family:inherit;font-size:var(--text-sm)} .docshell-input:focus{outline:none;border-color:var(--info);box-shadow:0 0 0 3px var(--info-bg)} textarea.docshell-input{resize:vertical;min-height:64px} .docshell-value{display:none;box-sizing:border-box;padding:var(--space-4) var(--space-5); font-size:var(--text-sm);color:var(--text);white-space:pre-wrap;word-break:break-word;min-height:1.2em} @media (max-width:640px){.docshell-fieldgrid{grid-template-columns:1fr}} .docshell-detail-headtext{display:flex;flex-direction:column;gap:var(--space-1);min-width:0} .docshell-detail-subtitle{font-size:var(--text-sm);color:var(--text-secondary)} .pimatch-reasons{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs);color:var(--text-secondary)} .pimatch-via{display:inline-block;margin-left:var(--space-3);padding:1px var(--space-3);border-radius:8px;font-size:var(--text-2xs);font-weight:600;background:var(--info-bg);color:var(--info-fg);vertical-align:middle} .pimatch-via.pimatch-via-fuzzy{background:var(--warning-bg);color:var(--warning-fg)} .pimatch-chip-row{display:inline-flex;gap:var(--space-2);flex-wrap:wrap;align-items:center} .pimatch-chip{padding:2px var(--space-4);border-radius:999px;border:1px solid var(--border);background:var(--n-0);color:var(--text);font-size:var(--text-xs);cursor:pointer;line-height:1.6} .pimatch-chip:hover{background:var(--n-50)} .pimatch-chip-selected{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-fg)} .pimatch-hint{font-size:var(--text-2xs);color:var(--warning-fg);font-style:italic} .pimatch-po-picker{margin-top:var(--space-2);padding:var(--space-3);border:1px solid var(--border);border-radius:8px;background:var(--n-50)} .pimatch-po-results{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-1)} .pimatch-po-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-2) var(--space-3);border-radius:6px;background:var(--n-0);border:1px solid var(--border);cursor:pointer;font-size:var(--text-xs)} .pimatch-po-row:hover{background:var(--info-bg)} .pimatch-po-empty{font-size:var(--text-xs);color:var(--text-secondary);padding:var(--space-2)} .pimatch-po-badge-catadmin{display:inline-block;padding:1px var(--space-3);border-radius:8px;font-size:var(--text-2xs);font-weight:600;background:var(--info-bg);color:var(--info-fg)} .pimatch-fb{display:inline-flex;gap:var(--space-2);align-items:center;margin-top:var(--space-2)} .pimatch-fb-btn{padding:2px var(--space-3);border-radius:6px;border:1px solid var(--border);background:var(--n-0);color:var(--text);font-size:var(--text-2xs);font-weight:600;cursor:pointer;line-height:1.6} .pimatch-fb-confirm{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-fg)} .pimatch-fb-reject{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-fg)} .pimatch-fb-btn:hover{filter:brightness(.97)} .pimatch-line-fb{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-2);font-size:var(--text-2xs);color:var(--text-secondary)} .pimatch-line-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-1)} .pimatch-line-link{background:none;border:none;padding:0;color:var(--info-fg);font-size:var(--text-2xs);font-weight:600;cursor:pointer;text-decoration:underline;line-height:1.6} .pimatch-line-link:hover{filter:brightness(.9)} .pimatch-line-picker{position:fixed;z-index:60;width:360px;max-width:calc(100vw - var(--space-6));padding:var(--space-3);border:1px solid var(--border);border-radius:8px;background:var(--n-0);box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.18))} .pimatch-line-picker-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2);font-size:var(--text-xs);font-weight:600} .pimatch-line-picker-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:var(--text-base);line-height:1} .docmove-banner{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-4) var(--space-6);margin-bottom:var(--space-6);border-radius:8px;background:var(--info-bg);color:var(--info-fg);border:1px solid var(--info-fg);font-size:var(--text-sm)} .docmove-moved{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-4) var(--space-6);margin-bottom:var(--space-6);border-radius:8px;background:var(--warning-bg);color:var(--warning-fg);border:1px solid var(--warning-fg);font-size:var(--text-sm)} .docmove-text{flex:1;min-width:200px} .docmove-actions{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap} .docmove-btn{padding:4px var(--space-5);border-radius:6px;border:1px solid var(--info-fg);background:var(--info-fg);color:var(--n-0);font-size:var(--text-xs);font-weight:600;cursor:pointer;line-height:1.6} .docmove-btn:hover{filter:brightness(.97)} .docmove-btn-secondary{background:var(--n-0);color:var(--info-fg)} .docmove-moved .docmove-btn{border-color:var(--warning-fg);background:var(--n-0);color:var(--warning-fg)} .route-stop{display:flex;gap:var(--space-6);padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border);align-items:center} .route-stop .stop-num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:var(--n-0);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);flex-shrink:0} .route-timeline{border-left:3px solid var(--border);margin-left:var(--space-7);padding-left:var(--space-10)} .route-timeline-item{position:relative;padding-bottom:var(--space-10)} .route-timeline-item::before{content:'';position:absolute;left:-27px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--border)} .route-timeline-item.completed::before{background:var(--success)} .route-timeline-item.active::before{background:var(--info);box-shadow:0 0 0 4px rgba(2,132,199,.2)} .route-timeline-item.exception::before{background:var(--danger)} .route-summary-row{display:flex;gap:var(--space-6);overflow-x:auto;padding:var(--space-2) 0 var(--space-8);margin-bottom:var(--space-4)} .route-summary-card{background:var(--n-0);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5) var(--space-7);min-width:200px;font-size:var(--text-sm);cursor:pointer;transition:var(--transition)} .route-summary-card:hover{background:var(--soft);border-color:var(--border-strong)} .landing-page{ display:none;position:fixed;inset:0;z-index:200; background:linear-gradient(135deg,var(--n-900) 0%,var(--n-700) 50%,var(--n-900) 100%); flex-direction:column;align-items:center;justify-content:center; padding:var(--space-12); } .landing-page.active{display:flex} .landing-logo{width:80px;height:80px;border-radius:16px;margin-bottom:var(--space-10);object-fit:contain;background:var(--n-0);padding:var(--space-4)} .landing-title{font-size:var(--text-2xl);font-weight:800;color:var(--n-100);margin-bottom:var(--space-2);text-align:center} .landing-sub{font-size:var(--text-sm);color:var(--n-500);margin-bottom:var(--space-16);text-align:center} .landing-sub-lead{font-size:var(--text-md);color:var(--n-500);margin-bottom:var(--space-1);text-align:center} .landing-card{ background:var(--n-0);border-radius:12px;padding:28px var(--space-12);width:100%;max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,.3); } .landing-card h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-8);text-align:center;color:var(--text)} .landing-card .form-group{margin-bottom:var(--space-7)} .landing-card .form-group label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-2)} .landing-card .form-group input{ width:100%;padding:var(--space-5) var(--space-7);border:1px solid var(--border);border-radius:8px; font-size:var(--text-md);transition:border-color .15s; } .landing-card .form-group input:focus{outline:none;border-color:var(--primary)} .landing-card .btn-login{ width:100%;padding:var(--space-6);background:var(--primary);color:var(--n-0);border:none; border-radius:8px;font-size:var(--text-md);font-weight:600;cursor:pointer;transition:opacity .15s; } .landing-card .btn-login:hover{opacity:.9} .landing-card .btn-login:disabled{opacity:.4;cursor:not-allowed} .landing-error{display:none;background:var(--danger-bg);border:1px solid var(--danger-bg);border-radius:6px;padding:var(--space-5);margin-bottom:var(--space-7);font-size:var(--text-sm);color:var(--danger-strong)} .landing-footer{margin-top:var(--space-10);font-size:var(--text-xs);color:var(--n-600);text-align:center} .landing-footer a{color:var(--n-400);text-decoration:none} .landing-register{text-align:center;margin-top:var(--space-8);font-size:var(--text-sm);color:var(--text-secondary)} .landing-register a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none} input[type="text"],input[type="number"],input[type="email"],input[type="search"],input[type="date"],input[type="datetime-local"],input[type="tel"],input[type="url"],input[type="password"],input:not([type]),select,textarea{ padding:var(--space-3) var(--space-6);border:1px solid var(--border);border-radius:6px;background:var(--n-0);font-size:var(--text-sm); } .btn-filter{ padding:var(--space-3) var(--space-8);background:var(--primary);color:var(--n-0);border:none;border-radius:6px;font-size:var(--text-sm); font-weight:600;transition:var(--transition);cursor:pointer; } .btn-filter:hover{background:var(--primary-light)} .filters{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-8)} .filters input{min-width:200px} .filters input[type="checkbox"],.filters input[type="radio"]{min-width:auto;width:auto} .filters select{min-width:130px} .pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) 0;font-size:var(--text-sm);color:var(--text-secondary)} .pagination .page-btns{display:flex;gap:var(--space-3)} .pagination button{ padding:var(--space-2) var(--space-6);border:1px solid var(--border);border-radius:4px;background:var(--n-0); font-size:var(--text-sm);transition:var(--transition); } .pagination button:hover:not(:disabled){background:var(--bg)} .pagination button:disabled{opacity:.4;cursor:not-allowed} .util-bar-wrap{margin-bottom:var(--space-6)} .util-bar-label{display:flex;justify-content:space-between;margin-bottom:var(--space-2);font-size:var(--text-sm)} .util-bar-label span:first-child{font-weight:600} .util-bar{height:22px;background:var(--n-200);border-radius:4px;overflow:hidden} .util-bar-fill{height:100%;border-radius:4px;transition:width .6s ease;display:flex;align-items:center;padding:0 var(--space-4);font-size:var(--text-2xs);font-weight:700;color:var(--n-0)} .util-bar-fill.low{background:var(--success)} .util-bar-fill.mid{background:var(--warning)} .util-bar-fill.high{background:var(--danger)} .dock-card{ background:var(--n-0);border-radius:var(--radius);border:1px solid var(--border);padding:var(--space-7);margin-bottom:var(--space-5); display:flex;align-items:flex-start;gap:var(--space-7);transition:var(--transition); } .dock-card:hover{box-shadow:var(--shadow-md)} .dock-time{font-size:var(--text-sm);font-weight:700;color:var(--primary);min-width:90px;flex-shrink:0;line-height:1.4} .dock-details{flex:1} .dock-details .dock-name{font-weight:700;font-size:var(--text-base);margin-bottom:var(--space-1)} .dock-details .dock-meta{font-size:var(--text-xs);color:var(--text-secondary)} .dock-actions{display:flex;gap:var(--space-3);align-items:center;flex-shrink:0;margin-left:auto} .dock-actions .btn-sm{padding:var(--space-2) var(--space-5);font-size:var(--text-xs)} .dock-cal-toolbar{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap} .dock-cal-toolbar .view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .dock-cal-toolbar .view-toggle button{ background:var(--n-0);border:none;padding:var(--space-3) var(--space-6);font-size:var(--text-sm);cursor:pointer; border-right:1px solid var(--border);color:var(--text-secondary); } .dock-cal-toolbar .view-toggle button:last-child{border-right:none} .dock-cal-toolbar .view-toggle button.active{background:var(--primary);color:var(--n-0);font-weight:600} .dock-cal-nav{display:inline-flex;gap:var(--space-2)} .dock-cal-nav button{padding:var(--space-3) var(--space-5);font-size:var(--text-xs)} .dock-cal-range{font-size:var(--text-sm);font-weight:600;color:var(--text);margin-left:var(--space-2)} .dock-cal{ --hour-width:64px; --hour-height:48px; --row-height:48px; background:var(--n-0);border:1px solid var(--border);border-radius:var(--radius); overflow-x:auto;overflow-y:hidden;position:relative; } .dock-cal-grid{display:grid;min-width:800px} .dock-cal-corner{position:sticky;left:0;background:var(--n-50);border-right:1px solid var(--border);border-bottom:1px solid var(--border);z-index:3;font-size:var(--text-xs);font-weight:700;color:var(--text-secondary);padding:var(--space-4) var(--space-5);display:flex;align-items:center} .dock-cal-hour-header{ border-bottom:1px solid var(--border);background:var(--n-50);font-size:var(--text-2xs);color:var(--text-secondary); padding:var(--space-2) var(--space-3);text-align:left;font-weight:600; } .dock-cal-hour-header.day-col{font-weight:700;color:var(--text);text-align:center;font-size:var(--text-xs)} .dock-cal-row-label{ position:sticky;left:0;background:var(--n-0);border-right:1px solid var(--border);border-bottom:1px solid var(--border); padding:var(--space-4) var(--space-5);font-weight:700;font-size:var(--text-sm);z-index:2;display:flex;align-items:center; } .dock-cal-cell{ border-bottom:1px solid var(--border);border-right:1px solid var(--n-100); position:relative;height:var(--row-height); background:repeating-linear-gradient(to right, transparent 0, transparent calc(var(--hour-width) - 1px), var(--n-100) calc(var(--hour-width) - 1px), var(--n-100) var(--hour-width)); } .dock-cal-cell.weekly{background:var(--n-0);border-right:1px solid var(--border)} .dock-cal-event{ position:absolute;top:4px;bottom:4px; border-radius:5px;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);line-height:1.2; cursor:pointer;color:var(--n-0);overflow:hidden; box-shadow:var(--shadow-sm); border-left:4px solid rgba(0,0,0,.28); background:var(--n-600); } .dock-cal-event.scheduled{background:var(--info-solid)} .dock-cal-event.checked_in{background:var(--warning-solid)} .dock-cal-event.in_progress{background:#ea580c} .dock-cal-event.completed{background:var(--success-solid)} .dock-cal-event.completed.outcome-incomplete{background:#84cc16} .dock-cal-event.cancelled, .dock-cal-event.no_show{background:var(--n-400);opacity:.65;text-decoration:line-through} .dock-cal-event.delayed{background:var(--danger-solid)} .dock-cal-event.receiving,.dock-cal-event.transfer_in,.dock-cal-event.return{border-left-color:var(--info-fg)} .dock-cal-event.shipping,.dock-cal-event.transfer_out,.dock-cal-event.ltl_pickup{border-left-color:#047857} .dock-cal-event.daily_route{border-left-color:var(--warning-fg);background:linear-gradient(90deg,var(--warning-bg) 0%, var(--warning-bg) 100%)} .dock-cal-event-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dock-cal-event-sub{font-size:var(--text-2xs);opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dock-cal-legend{display:flex;gap:var(--space-7);flex-wrap:wrap;font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-4)} .dock-cal-legend .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:var(--space-2);vertical-align:middle} .dock-cal.door-view{padding:0} .door-grid{display:grid;min-width:480px} .door-corner{position:sticky;left:0;top:0;background:var(--n-50);border-right:1px solid var(--border);border-bottom:2px solid var(--border);z-index:5;font-size:var(--text-2xs);font-weight:700;color:var(--text-secondary);padding:var(--space-3) var(--space-2);display:flex;align-items:center;justify-content:center} .door-col-header{position:sticky;top:0;background:var(--n-50);border-bottom:2px solid var(--border);border-right:1px solid var(--border);padding:var(--space-2) var(--space-3);z-index:4;text-align:left;min-height:46px;overflow:hidden} .door-col-header .door-name{font-weight:700;font-size:var(--text-xs);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .door-col-header .door-name .door-code{font-weight:500;font-size:var(--text-2xs);color:var(--text-secondary);margin-left:var(--space-2)} .door-col-header .door-params{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1)} .door-col-header .door-param{display:inline-block;font-size:var(--text-2xs);line-height:1.2;padding:1px var(--space-2);border-radius:8px;background:var(--info-bg);color:var(--info-strong);font-weight:600;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap} .door-col-header .door-param.door-param-type{background:var(--info-bg);color:var(--info-strong)} .door-col-header .door-param.door-param-vt{background:var(--n-100);color:var(--n-600)} .door-col-header .door-param.door-param-warn{background:var(--warning-bg);color:var(--warning-fg)} .dock-label-desigs{display:inline-flex;flex-wrap:wrap;gap:var(--space-1);margin-left:var(--space-3);vertical-align:middle} .dock-label-desigs .door-param{display:inline-block;font-size:var(--text-2xs);line-height:1.2;padding:1px var(--space-2);border-radius:8px;background:var(--info-bg);color:var(--info-strong);font-weight:600;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap} .door-time-label{position:sticky;left:0;background:var(--n-50);border-right:1px solid var(--border);border-top:1px solid var(--n-100);font-size:var(--text-2xs);color:var(--text-secondary);padding:0 var(--space-3);display:flex;align-items:flex-start;justify-content:flex-end;height:36px;z-index:3} .door-time-label.hour-boundary{font-weight:700;color:var(--text);border-top:1px solid var(--n-400)} .door-slot-cell{height:36px;border-right:1px solid var(--n-100);border-top:1px solid var(--n-100);position:relative;cursor:pointer} .door-slot-cell.hour-boundary{border-top:1px solid var(--n-400)} .door-slot-cell:hover{background:var(--n-50)} .door-slot-cell .dock-cal-event{position:absolute;left:2px;right:2px;top:2px;bottom:auto;z-index:2} .dock-shift-pager{display:inline-flex;align-items:stretch;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--n-0)} .dock-shift-pager .dock-shift-btn{padding:var(--space-2) var(--space-6);font-size:var(--text-xs);border:none;border-right:1px solid var(--border);background:var(--n-0);color:var(--text-secondary);cursor:pointer;font-weight:500} .dock-shift-pager .dock-shift-btn:last-child{border-right:none} .dock-shift-pager .dock-shift-btn:hover{background:var(--n-100);color:var(--text)} .dock-shift-pager .dock-shift-btn.active{background:var(--primary);color:var(--n-0);font-weight:600} .dock-cal-dropzone{cursor:pointer} .dock-cal-dropzone.drop-target{background:var(--info-bg) !important;outline:2px dashed var(--info-solid);outline-offset:-2px} .dock-cal-event.dragging{opacity:.4} .door-slot-cell.blacked-out{ background:repeating-linear-gradient(45deg,var(--danger-bg),var(--danger-bg) 4px,var(--danger-bg) 4px,var(--danger-bg) 8px); cursor:not-allowed; } .door-slot-cell.blacked-out:hover{background:repeating-linear-gradient(45deg,var(--danger-bg),var(--danger-bg) 4px,var(--danger-bg) 4px,var(--danger-bg) 8px)} .dock-cal-blackout{ position:absolute;top:2px;bottom:2px; background:repeating-linear-gradient(45deg,rgba(220,38,38,.18),rgba(220,38,38,.18) 6px,rgba(220,38,38,.32) 6px,rgba(220,38,38,.32) 12px); border:1px solid var(--danger-solid);border-radius:4px;z-index:1;pointer-events:auto; display:flex;align-items:center;justify-content:center; color:var(--danger-strong);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em; overflow:hidden; } .dock-cal-blackout-label{ padding:0 var(--space-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .dock-cal-blackout-pill{ display:block;margin:var(--space-1) var(--space-2);padding:var(--space-2) var(--space-4);border-radius:4px; background:repeating-linear-gradient(45deg,var(--danger-bg),var(--danger-bg) 4px,var(--danger-bg) 4px,var(--danger-bg) 8px); border:1px solid var(--danger-solid);color:var(--danger-strong);font-size:var(--text-2xs); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .dock-cal-blackout-pill.bl-cont-left{ margin-left:0;padding-left:0; border-top-left-radius:0;border-bottom-left-radius:0;border-left:none; } .dock-cal-blackout-pill.bl-cont-right{ margin-right:-1px;padding-right:0; border-top-right-radius:0;border-bottom-right-radius:0;border-right:none; } .dock-cal-blackout-pill .bl-count{ display:inline-block;margin-left:var(--space-2);padding:0 var(--space-2);border-radius:8px; background:rgba(153,27,27,.12);color:var(--danger-strong);font-size:var(--text-2xs);font-weight:600; } .dock-cal-cell.weekly.bl-cell-cont-right{border-right-color:transparent} .dock-cal-cell.weekly.blacked-out{background:var(--danger-bg)} .dock-cal-legend .swatch.swatch-blackout{ background:repeating-linear-gradient(45deg,var(--danger-bg),var(--danger-bg) 3px,var(--danger-bg) 3px,var(--danger-bg) 6px); border:1px solid var(--danger-solid); } .door-col-header.door-inactive{ opacity:.55; background:repeating-linear-gradient(45deg,var(--n-50),var(--n-50) 6px,var(--n-200) 6px,var(--n-200) 12px); } .door-col-header.door-inactive .door-name{color:var(--n-400);text-decoration:line-through} .door-slot-cell.dock-inactive{ background:repeating-linear-gradient(45deg,var(--n-50),var(--n-50) 4px,var(--n-200) 4px,var(--n-200) 8px); cursor:not-allowed; pointer-events:none; } .door-slot-cell.dock-inactive .dock-cal-event{pointer-events:auto;opacity:.7} .dock-cal-row-label.dock-inactive{ opacity:.6;text-decoration:line-through; } .appt-status-pill{display:inline-block;padding:1px var(--space-3);font-size:var(--text-2xs);font-weight:700;border-radius:8px;background:var(--n-0);color:var(--n-700);margin-left:var(--space-2);vertical-align:middle;text-transform:uppercase;letter-spacing:.02em} .appt-status-pill.appt-status-scheduled{background:var(--info-bg);color:var(--info-strong)} .appt-status-pill.appt-status-checked_in{background:var(--warning-bg);color:var(--warning-strong)} .appt-status-pill.appt-status-in_progress{background:var(--warning-bg);color:var(--warning-fg)} .appt-status-pill.appt-status-completed{background:var(--success-bg);color:var(--success-strong)} .appt-status-pill.appt-status-cancelled{background:var(--danger-bg);color:var(--danger-strong)} .appt-status-pill.appt-status-no_show{background:var(--danger-bg);color:var(--danger-strong)} .appt-status-pill.appt-status-delayed{background:var(--danger-bg);color:var(--danger-strong)} .appt-status-pill.appt-status-recurring{background:var(--info-bg);color:#0c4a6e} .dock-cal-event.recurring{ background:var(--n-50) !important; color:var(--info-strong); border:1px dashed var(--info-solid); border-left:4px dashed var(--info-solid); box-shadow:none; opacity:.95; } .dock-cal-event.recurring:hover{background:var(--info-bg) !important} .dock-cal-event.recurring .dock-cal-event-title, .dock-cal-event.recurring .dock-cal-event-sub{color:var(--info-strong)} .vt-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4);border-radius:14px;border:1px solid var(--border);background:var(--n-0);color:var(--text-secondary);font-size:var(--text-xs);cursor:pointer;user-select:none} .vt-chip input[type=checkbox]{margin:0;width:11px;height:11px} .vt-chip.on{border-color:var(--info-solid);background:var(--info-bg);color:var(--info-strong)} .lookup-combo{position:relative} .lookup-combo .lookup-input{width:100%} .lookup-combo-results{ position:absolute;left:0;right:0;top:calc(100% + 2px); background:var(--n-0);border:1px solid var(--border);border-radius:var(--radius); max-height:220px;overflow-y:auto;z-index:20;box-shadow:var(--shadow-md); } .lookup-combo-item{padding:var(--space-4) var(--space-5);cursor:pointer;font-size:var(--text-sm);border-bottom:1px solid var(--n-100)} .lookup-combo-item:last-child{border-bottom:none} .lookup-combo-item:hover{background:var(--bg)} .lookup-combo-item .lookup-meta{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-1)} .lookup-combo-empty{padding:var(--space-4) var(--space-5);color:var(--text-secondary);font-size:var(--text-sm);font-style:italic} .lookup-pill{ display:inline-flex;align-items:center;gap:var(--space-2);background:var(--info-bg);color:var(--primary); border:1px solid var(--info-bg);border-radius:12px;padding:var(--space-1) var(--space-4);font-size:var(--text-xs);font-weight:600; } .lookup-pill .lookup-clear{cursor:pointer;color:var(--text-secondary);font-weight:700} .slot-list{max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);margin-top:var(--space-5)} .slot-group-header{padding:var(--space-4) var(--space-7);background:var(--n-50);border-bottom:1px solid var(--border);font-weight:700;font-size:var(--text-sm);position:sticky;top:0;z-index:1} .slot-row{ display:flex;align-items:center;gap:var(--space-6);padding:var(--space-5) var(--space-7);border-bottom:1px solid var(--n-100); cursor:pointer;transition:var(--transition);font-size:var(--text-sm); } .slot-row:last-child{border-bottom:none} .slot-row:hover{background:var(--bg)} .slot-row.selected{background:var(--n-100);border-left:3px solid var(--primary)} .slot-row .slot-time{font-weight:700;min-width:140px;color:var(--primary)} .slot-row .slot-shift{font-size:var(--text-xs);color:var(--text-secondary);min-width:80px} .slot-row .slot-balance{flex:1;display:flex;align-items:center;gap:var(--space-3)} .slot-balance-bar{height:6px;border-radius:3px;background:var(--n-200);width:60px;overflow:hidden} .slot-balance-fill{height:100%;border-radius:3px;background:var(--success)} .slot-row .slot-appts{font-size:var(--text-xs);color:var(--text-secondary)} .slot-suggested{border:2px solid var(--success);background:var(--success-bg)} .slot-suggested::after{content:'Recommended';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:var(--text-2xs);font-weight:700;color:var(--success);text-transform:uppercase;letter-spacing:.5px} .slot-row.slot-suggested{position:relative} .shift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-6);margin-top:var(--space-6)} .shift-card{background:var(--n-50);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-6) var(--space-7)} .shift-card .shift-name{font-weight:700;font-size:var(--text-base);margin-bottom:var(--space-2)} .shift-card .shift-time{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-4)} .shift-card .shift-stats{display:flex;justify-content:space-between;font-size:var(--text-sm)} .shift-card .shift-stats .shift-util{font-weight:700} .dock-util-summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) 18px;padding:var(--space-5) var(--space-7);background:var(--n-50);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-6)} .dock-util-summary .dus-stat{display:flex;align-items:baseline;gap:var(--space-3);font-size:var(--text-sm)} .dock-util-summary .dus-stat .dus-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;font-size:var(--text-2xs);font-weight:600} .dock-util-summary .dus-stat .dus-value{font-weight:700;font-size:var(--text-md);color:var(--text-primary)} .dock-util-summary .dus-divider{width:1px;align-self:stretch;background:var(--border)} .dock-util-summary .dus-types{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-left:auto} .dock-util-summary .dus-type{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4);background:var(--n-0);border:1px solid var(--border);border-radius:999px;font-size:var(--text-xs);color:var(--text-secondary)} .dock-util-summary .dus-type strong{color:var(--text-primary);font-weight:700} .dock-chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)} .dock-chip{background:var(--n-0);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5)} .dock-chip-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);font-size:var(--text-xs);margin-bottom:var(--space-3)} .dock-chip-name{font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dock-chip-pct{font-weight:700;font-size:var(--text-xs);color:var(--text-secondary)} .dock-chip-pct.low{color:var(--success)} .dock-chip-pct.mid{color:var(--warning)} .dock-chip-pct.high{color:var(--danger)} .dock-chip-bar{height:6px;background:var(--n-200);border-radius:3px;overflow:hidden} .dock-chip-fill{height:100%;border-radius:3px;transition:width .5s ease} .dock-chip-fill.low{background:var(--success)} .dock-chip-fill.mid{background:var(--warning)} .dock-chip-fill.high{background:var(--danger)} .dock-chip-meta{margin-top:var(--space-2);font-size:var(--text-2xs);color:var(--text-secondary)} .shift-strip{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6)} .shift-strip .shift-pill{flex:1 1 180px;background:var(--n-0);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5)} .shift-strip .shift-pill-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);font-size:var(--text-xs);margin-bottom:var(--space-3)} .shift-strip .shift-pill-name{font-weight:700} .shift-strip .shift-pill-time{color:var(--text-secondary);font-size:var(--text-2xs)} .shift-strip .shift-pill-stats{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-2)} .shift-strip .shift-pill-stats strong{color:var(--text-primary)} .zone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-8)} .zone-card{ background:var(--n-0);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden; transition:var(--transition);cursor:pointer; } .zone-card:hover{box-shadow:var(--shadow-md)} .zone-card-header{padding:var(--space-7);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)} .zone-card-header h4{font-size:var(--text-base);font-weight:700} .zone-card-body{padding:var(--space-7)} .zone-card .zone-type-badge{ font-size:var(--text-2xs);padding:var(--space-1) var(--space-4);border-radius:12px;background:var(--n-50);color:var(--n-700);font-weight:600; } .bay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:var(--space-2);margin-top:var(--space-5)} .bay-cell{ width:100%;aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center; font-size:var(--text-2xs);font-weight:700;color:var(--n-0);cursor:default;transition:var(--transition);position:relative; } .bay-cell.empty{background:var(--n-200);color:var(--n-500)} .bay-cell.occupied{background:var(--primary)} .bay-cell:hover{transform:scale(1.1);z-index:2} .bay-tooltip{ display:none;position:absolute;bottom:110%;left:50%;transform:translateX(-50%); background:var(--n-900);color:var(--n-0);padding:var(--space-3) var(--space-5);border-radius:4px;font-size:var(--text-2xs); white-space:nowrap;z-index:10;pointer-events:none; } .bay-cell:hover .bay-tooltip{display:block} .facility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-8)} .facility-card{ background:var(--n-0);border-radius:var(--radius);border:1px solid var(--border);padding:var(--space-8); transition:var(--transition); } .facility-card:hover{box-shadow:var(--shadow-md)} .facility-card h4{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-4)} .facility-stat{display:flex;justify-content:space-between;padding:var(--space-1) 0;font-size:var(--text-sm);border-bottom:1px solid var(--n-100)} .facility-stat:last-child{border-bottom:none} .facility-stat .fs-label{color:var(--text-secondary)} .facility-stat .fs-value{font-weight:700} .hw-card{background:var(--n-0);border-radius:var(--radius);border:1px solid var(--border);padding:var(--space-10);margin-bottom:var(--space-8)} .hw-card h4{font-size:var(--text-md);font-weight:700;margin-bottom:var(--space-3)} .hw-card .hw-model{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-6)} .hw-specs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .hw-spec{font-size:var(--text-sm)} .hw-spec .spec-label{color:var(--text-secondary);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.5px} .hw-spec .spec-value{font-weight:600} .chart-container{position:relative;width:100%;height:280px} .loading{display:flex;align-items:center;justify-content:center;padding:40px;gap:var(--space-6);color:var(--text-secondary);font-size:var(--text-base)} @keyframes spin{to{transform:rotate(360deg)}} .spinner-brand{position:relative;display:inline-block;width:36px;height:36px;flex:none} .spinner-brand::before{content:'';position:absolute;inset:0;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite} .spinner-brand::after{content:'';position:absolute;inset:8px;background:url('/static/logo-mark.png') center/contain no-repeat} .spinner-brand-sm{width:20px;height:20px} .spinner-brand-sm::before{border-width:2px} .spinner-brand-sm::after{inset:4px} .spinner-brand-lg{width:56px;height:56px} .spinner-brand-lg::before{border-width:5px} .spinner-brand-lg::after{inset:11px} .empty-state{text-align:center;padding:40px;color:var(--text-secondary)} .empty-state svg{width:48px;height:48px;margin-bottom:var(--space-6);opacity:.4} .error-state{text-align:center;padding:40px;color:var(--text-secondary)} .error-state .error-state-icon{width:40px;height:40px;margin:0 auto var(--space-6);border-radius:50%;background:var(--danger-bg);color:var(--danger-solid);display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:var(--font-weight-medium)} .error-state .error-state-msg{color:var(--danger-fg);margin-bottom:var(--space-8)} .error-state .btn{margin:0 auto} @keyframes skeleton-shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}} .skeleton-line{height:12px;border-radius:var(--radius-sm);background-color:var(--n-100);background-image:linear-gradient(90deg,var(--n-100) 0,var(--n-200) 40px,var(--n-100) 80px);background-size:200px 100%;background-repeat:no-repeat;animation:skeleton-shimmer 1.2s ease-in-out infinite} .skeleton-row{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-6) 0;border-bottom:1px solid var(--border)} .skeleton-row .skeleton-line{flex:1} .skeleton-row .skeleton-line.skeleton-line-sm{flex:.4} .sidebar-toggle{display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;padding:var(--space-3);color:var(--text);border-radius:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:var(--transition)} .sidebar-toggle:hover{background:var(--bg);border-color:var(--border)} .sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;transition:opacity .3s ease} .sidebar-overlay.active{display:block;opacity:1} @media(max-width:768px){ .sidebar{transform:translateX(-100%)} .sidebar.open{transform:translateX(0)} .main{margin-left:0} .sidebar-toggle{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .grid-2,.grid-3{grid-template-columns:1fr} .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .chart-container{height:220px} .topbar{padding:0 var(--space-7);gap:var(--space-4)} .topbar-right .last-refresh{display:none} .facility-select{min-width:140px;font-size:var(--text-sm)} .page{padding:var(--space-8) var(--space-7)} .page-header{flex-direction:column;align-items:flex-start;gap:var(--space-5)} .modal{width:95vw;max-height:95vh} .modal-lg{width:98vw} .form-row{grid-template-columns:1fr} .detail-meta{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .zone-grid{grid-template-columns:1fr} .facility-grid{grid-template-columns:1fr} .dock-card{flex-direction:column;gap:var(--space-4)} .dock-time{min-width:unset;display:flex;gap:var(--space-3)} .dock-time br{display:none} .dock-actions{margin-left:0;width:100%} .dock-actions .btn-sm{flex:1;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center} .site-banner{padding:var(--space-4) var(--space-7);font-size:var(--text-sm);flex-wrap:wrap} } @media(max-width:600px){ html{font-size:var(--text-md)} .topbar{height:52px;padding:0 var(--space-5)} .topbar-left h1{font-size:var(--text-base);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .facility-select{min-width:unset;max-width:140px;font-size:var(--text-xs);padding:var(--space-2) var(--space-3);overflow:hidden;text-overflow:ellipsis} .topbar-right .refresh-btn span{display:none} .topbar-right .refresh-btn{padding:var(--space-2) var(--space-4)} .topbar-right{gap:var(--space-2);flex-wrap:nowrap} .topbar-right #authLabel{display:none} .page{padding:var(--space-6) var(--space-5)} .page-header h2{font-size:var(--text-lg)} .kpi-grid{grid-template-columns:1fr !important;gap:var(--space-3)} .kpi-card{padding:var(--space-5) var(--space-7);display:flex;justify-content:space-between;align-items:center;flex-direction:row;overflow:hidden} .kpi-label{font-size:var(--text-xs);order:1;margin-bottom:0;flex-shrink:0} .kpi-value{font-size:var(--text-lg);order:2;margin:0;flex-shrink:0;text-align:right} .chart-container{height:200px;overflow-x:auto} .card-header{padding:var(--space-6) var(--space-7)} .card-header h3{font-size:var(--text-base)} .card-body{padding:var(--space-6) var(--space-7)} .filters{flex-direction:column;align-items:stretch;gap:var(--space-4)} .filters input,.filters select{min-width:unset;width:100%} .filters .btn-filter{width:100%;min-height:44px} .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;gap:0} .tab-bar::-webkit-scrollbar{display:none} .tab-btn{white-space:nowrap;flex-shrink:0;padding:var(--space-4) var(--space-7);min-height:44px} .table-wrap{overflow-x:visible} .table-wrap table thead{display:none} .table-wrap table, .table-wrap table tbody, .table-wrap table tr, .table-wrap table td{display:block;width:100%} .table-wrap table tr{padding:var(--space-6) var(--space-7);border-bottom:2px solid var(--border);position:relative;margin-bottom:0} .table-wrap table tr:last-child{border-bottom:none} .table-wrap table td{padding:var(--space-1) 0;border-bottom:none;font-size:var(--text-sm)} .table-wrap table td:empty{display:none} .table-wrap table td::before{ content:attr(data-label);font-size:var(--text-2xs);font-weight:600;color:var(--text-secondary); text-transform:uppercase;letter-spacing:.5px;display:inline;margin-right:var(--space-3); } .table-wrap table td:first-child{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-1)} .table-wrap table td:first-child::before{display:none} .table-wrap table td[data-mobile-hide]{display:none} .table-wrap table td{display:flex;align-items:baseline;gap:var(--space-2)} .table-wrap table td:first-child{display:block} .table-wrap table td .btn-sm{min-height:40px;min-width:70px;display:inline-flex;align-items:center;justify-content:center} .table-wrap table td[style*="white-space"]{white-space:normal !important;display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)} .text-right{text-align:left} .btn{min-height:44px;padding:var(--space-5) var(--space-8);font-size:var(--text-base)} .btn-sm{min-height:40px;padding:var(--space-3) var(--space-7);font-size:var(--text-sm)} .btn-filter{min-height:44px} .pagination button{min-height:40px;min-width:40px;padding:var(--space-3) var(--space-6)} .pagination{flex-direction:column;gap:var(--space-4);align-items:center} .pagination .page-btns{flex-wrap:wrap;justify-content:center} .modal-overlay{align-items:flex-end} .modal{width:100vw;max-width:100vw;max-height:90vh;border-radius:16px 16px 0 0;margin:0} .modal[style]{width:100vw !important;max-width:100vw !important} .modal input,.modal select,.modal textarea{font-size:var(--text-lg) !important} .modal-lg{width:100vw;max-width:100vw} .modal-fullscreen{width:100vw;max-width:100vw;height:auto;max-height:90vh} .modal-fullscreen .modal-body{flex-direction:column;padding:0;display:flex} .permedit-rail{flex:0 0 auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:var(--space-3) var(--space-4);gap:var(--space-3)} .permedit-tab{white-space:nowrap;border-left:none;border-bottom:2px solid transparent;border-radius:var(--radius-sm)} .permedit-tab.active{border-left:none;border-bottom-color:var(--primary)} .permedit-tab-count{display:none} .permedit-content{padding:var(--space-8)} .modal-header{padding:var(--space-7) var(--space-8);position:sticky;top:0;background:var(--n-0);z-index:2;border-bottom:1px solid var(--border)} .modal-body{padding:var(--space-8);overflow-y:auto;-webkit-overflow-scrolling:touch} .modal-footer{padding:var(--space-6) var(--space-8);position:sticky;bottom:0;background:var(--n-0);z-index:2;border-top:1px solid var(--border)} .modal-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center} .modal .btn-primary,.modal .auth-btn{display:flex !important;min-height:44px;align-items:center;justify-content:center} .drawer{width:100vw;max-width:100vw;height:100vh;height:100dvh} .drawer-lg{width:100vw;max-width:100vw} .drawer input,.drawer select,.drawer textarea{font-size:var(--text-lg) !important} .form-row{grid-template-columns:1fr} .form-group input:not([type="checkbox"]):not([type="radio"]),.form-group select,.form-group textarea{font-size:var(--text-lg);padding:var(--space-5) var(--space-6)} .form-group label{font-size:var(--text-sm);margin-bottom:var(--space-3)} .form-group label[style*="display:flex"],.form-group label[style*="display: flex"]{gap:var(--space-5) !important} .dock-card{padding:var(--space-6);flex-direction:column;gap:var(--space-4)} .dock-time{font-size:var(--text-sm);min-width:unset;display:flex;gap:var(--space-4)} .dock-time br{display:none} .dock-details .dock-name{font-size:var(--text-base)} .dock-details .dock-meta{font-size:var(--text-xs);line-height:1.6} .dock-actions{margin-left:0;width:100%} .dock-actions .btn-sm{flex:1;text-align:center;min-height:44px} .shift-grid{grid-template-columns:1fr} .workboard-grid{grid-template-columns:1fr !important;gap:var(--space-7)} .pending-queue .queue-item{flex-wrap:wrap;gap:var(--space-3);padding:var(--space-5) var(--space-6)} .pending-queue .queue-item span{flex:unset !important;min-width:unset !important} .pending-queue .queue-item .btn-sm{width:100%;margin-top:var(--space-3);justify-content:center} .worker-card{padding:var(--space-6)} .metrics-column .kpi-grid{grid-template-columns:repeat(2,1fr) !important} .page > .card > .card-body > div[style*="display:flex"][style*="flex-wrap"]{ flex-direction:column !important;gap:var(--space-6) !important; } .page > .card > .card-body > div[style*="display:flex"][style*="flex-wrap"] > div[style*="flex:0 0 200px"]{ flex:unset !important;width:100% !important; } .page > .card > .card-body > div[style*="display:flex"][style*="flex-wrap"] > div[style*="flex:1"]{ min-width:unset !important; } .page > .card > .card-body > div[style*="display:flex"][style*="flex-wrap"] > div[style*="padding-top:22px"]{ display:none !important; } .page > .card > .card-body > div[style*="display:flex"][style*="flex-wrap"] > div[style*="padding-top:18px"]{ padding-top:0 !important; } .svc-results-grid{grid-template-columns:1fr !important;gap:var(--space-6) !important} #svcResults > div[style*="grid-template-columns"]{grid-template-columns:1fr !important} #svcResults .card{overflow:hidden;margin-bottom:0} #svcResults .card-header{padding:var(--space-5) var(--space-6)} #svcResults .card-header h3{font-size:var(--text-base)} #svcResults .card-body{padding:var(--space-4) var(--space-6);overflow-x:auto;-webkit-overflow-scrolling:touch} #svcResults .table-wrap table thead{display:table-header-group} #svcResults .table-wrap table, #svcResults .table-wrap table tbody, #svcResults .table-wrap table tr, #svcResults .table-wrap table td{display:revert;width:auto} #svcResults .table-wrap table tr{padding:0;border-bottom:1px solid var(--border)} #svcResults .table-wrap table td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);border-bottom:none} #svcResults .table-wrap table td::before{display:none} #svcResults .table-wrap table th{padding:var(--space-2) var(--space-3);font-size:var(--text-2xs)} #svcResults div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:var(--space-1) !important} #svcResults div[style*="grid-template-columns:1fr 1fr"] div{font-size:var(--text-sm)} #svcResults div[style*="border-left:3px"]{padding:var(--space-3) var(--space-5) !important;font-size:var(--text-xs) !important;margin-bottom:var(--space-2) !important} #svcResults div[style*="border-bottom:1px solid var(--border)"][style*="padding:var(--space-4)"]{padding:var(--space-3) 0 !important;gap:var(--space-4) !important;font-size:var(--text-sm)} .detail-meta{grid-template-columns:1fr 1fr !important} .slot-row{flex-wrap:wrap;gap:var(--space-3);padding:var(--space-5) var(--space-6)} .slot-row .slot-time{min-width:unset;flex:1 1 100%} .step-dot{width:28px;height:28px;font-size:var(--text-xs)} .timeline{flex-wrap:wrap;gap:var(--space-4)} .timeline-step{flex:unset;min-width:60px} .timeline-connector{flex:unset;width:30px;min-width:unset} .count-bay-nav{gap:var(--space-3)} .cart-item{flex-wrap:wrap;gap:var(--space-3)} .rb-row{flex-direction:column;gap:var(--space-3);align-items:stretch} .rb-row select,.rb-row input{min-width:unset;width:100%} .truncate{max-width:140px} input[type="checkbox"],input[type="radio"]{width:22px;height:22px;flex-shrink:0} .radio-option{padding:var(--space-6) var(--space-7)} .site-banner{padding:var(--space-4) var(--space-6);font-size:var(--text-sm);flex-wrap:wrap;line-height:1.4} .site-banner .banner-icon{font-size:var(--text-md)} div[style*="display:flex"][style*="gap:var(--space-8)"]{flex-direction:column !important;gap:var(--space-5) !important} div[style*="display:flex"][style*="gap:var(--space-10)"]{flex-direction:column !important;gap:var(--space-5) !important} div[style*="display:grid"][style*="grid-template-columns: repeat"]{grid-template-columns:1fr !important} div[style*="display:grid"][style*="grid-template-columns:repeat"]{grid-template-columns:1fr !important} .page-header{flex-wrap:wrap} .page-header .btn{font-size:var(--text-sm);padding:var(--space-4) var(--space-6)} } @media(max-width:380px){ .kpi-grid{gap:var(--space-3)} .kpi-card{padding:var(--space-5) var(--space-6)} .kpi-value{font-size:var(--text-lg)} .page{padding:var(--space-5) var(--space-4)} .topbar-left h1{font-size:var(--text-sm);max-width:80px} .facility-select{max-width:120px;font-size:var(--text-xs)} .card-header{padding:var(--space-5) var(--space-6)} .card-body{padding:var(--space-5) var(--space-6)} .dock-card{padding:var(--space-5)} .btn{padding:var(--space-4) var(--space-6);font-size:var(--text-sm)} .table-wrap table td{font-size:var(--text-sm)} .table-wrap table td:first-child{font-size:var(--text-base)} } .text-right{text-align:right} .text-center{text-align:center} .mt-8{margin-top:var(--space-4)} .mt-16{margin-top:var(--space-8)} .mb-8{margin-bottom:var(--space-4)} .mb-16{margin-bottom:var(--space-8)} .fw-700{font-weight:700} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px} .hidden{display:none !important} .modal-overlay{ position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,.32);z-index:200; display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease; } html:has(.modal-overlay),body:has(.modal-overlay){overflow:hidden} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{ background:var(--n-0);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 24px 56px -24px rgba(10,10,10,.22);width:720px;max-width:95vw; max-height:90vh;display:flex;flex-direction:column;animation:slideUp .2s ease; } @keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}} .modal-lg{width:900px} .modal-fullscreen{width:min(1200px,96vw);max-width:96vw;height:min(92vh,940px);max-height:96vh} .modal-fullscreen .modal-body{padding:0;display:flex;flex-direction:row;overflow:hidden} .permedit-rail{flex:0 0 210px;border-right:1px solid var(--border);background:var(--bg);overflow-y:auto;padding:var(--space-5) 0;display:flex;flex-direction:column;gap:2px;min-height:0} .permedit-tab{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-7);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;border:none;background:none;text-align:left;width:100%;border-left:2px solid transparent;transition:var(--transition)} .permedit-tab:hover{background:var(--soft);color:var(--text)} .permedit-tab.active{color:var(--text);font-weight:600;border-left-color:var(--primary);background:var(--soft)} .permedit-tab-count{margin-left:auto;font-size:var(--text-2xs);color:var(--text-muted);background:var(--n-0);border:1px solid var(--border);border-radius:999px;padding:0 var(--space-4)} .permedit-content{flex:1;min-width:0;overflow-y:auto;padding:22px} .permedit-pane{display:none} .permedit-pane.active{display:block} .capbrowse-search{position:sticky;top:-22px;z-index:2;background:var(--n-0);padding:var(--space-3) 0 var(--space-5);margin-top:-2px} .capbrowse-group{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-5);background:var(--n-0);overflow:hidden} .capbrowse-group-head{display:flex;align-items:center;gap:var(--space-4);width:100%;padding:var(--space-5) var(--space-6);background:var(--bg);border:none;cursor:pointer;font-size:var(--text-sm);font-weight:600;color:var(--text);text-align:left} .capbrowse-group-head:hover{background:var(--soft)} .capbrowse-caret{display:inline-block;color:var(--text-muted);font-size:var(--text-2xs);width:10px;flex-shrink:0;transition:transform .12s ease} .capbrowse-group.open .capbrowse-caret{transform:rotate(90deg)} .capbrowse-group-count{margin-left:auto;font-size:var(--text-2xs);font-weight:500;color:var(--text-muted);background:var(--n-0);border:1px solid var(--border);border-radius:999px;padding:1px var(--space-4);white-space:nowrap} .capbrowse-group-count.has-on{color:var(--success-strong);border-color:var(--success-solid);background:var(--success-bg)} .capbrowse-rows{display:none;flex-direction:column} .capbrowse-group.open .capbrowse-rows{display:flex} .capbrowse-row{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-4) var(--space-6);border-top:1px solid var(--border)} .capbrowse-row[hidden],.capbrowse-group[hidden]{display:none} .capbrowse-row:hover{background:var(--soft)} .capbrowse-row-main{flex:1;min-width:0} .capbrowse-row-label{font-weight:500;font-size:var(--text-sm)} .capbrowse-row-desc{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1)} .capbrowse-row-key{font-size:var(--text-2xs);color:var(--text-muted)} .capbrowse-empty{padding:var(--space-9) var(--space-6);text-align:center;color:var(--text-muted);font-size:var(--text-sm)} .modal-header{ padding:var(--space-8) 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; } .modal-header h3{font-size:var(--text-lg);font-weight:600;letter-spacing:-.01em;color:var(--text)} .modal-close{ background:none;border:none;font-size:var(--text-lg);color:var(--text-secondary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm); line-height:1;transition:var(--transition); } .modal-close:hover{background:var(--soft);color:var(--text)} .modal-body{padding:22px;overflow-y:auto;flex:1;min-height:0} .modal-footer{ padding:var(--space-7) 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--space-5);flex-shrink:0;background:var(--bg); } .drawer-overlay{ position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,.28);z-index:200; display:flex;justify-content:flex-end;animation:fadeIn .15s ease; } html:has(.drawer-overlay),body:has(.drawer-overlay){overflow:hidden} .drawer{ background:var(--n-0);border-left:1px solid var(--border);box-shadow:-24px 0 48px -24px rgba(10,10,10,.18); width:560px;max-width:100vw;height:100vh; display:flex;flex-direction:column;animation:slideInRight .22s cubic-bezier(.2,.7,.2,1); } .drawer-lg{width:760px} .drawer-sm{width:420px} @keyframes slideInRight{from{transform:translateX(32px);opacity:0}to{transform:translateX(0);opacity:1}} .screen-overlay{ position:fixed;top:0;left:0;right:0;bottom:0;background:var(--n-0);z-index:200; display:flex;flex-direction:column;animation:fadeIn .15s ease; } html:has(.screen-overlay),body:has(.screen-overlay){overflow:hidden} .screen-overlay .modal-header,.screen-overlay .modal-footer{flex-shrink:0} .screen-overlay .modal-body{flex:1;min-height:0} .screen-overlay-body{max-width:1100px;margin:0 auto} .btn{ padding:var(--space-3) var(--space-7);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;border:1px solid var(--border-strong); background:var(--n-0);color:var(--text);transition:var(--transition);display:inline-flex;align-items:center;gap:var(--space-3);line-height:1.2; } .btn:hover{background:var(--soft);border-color:var(--text-muted)} .btn-primary{background:var(--primary);color:var(--n-0);border-color:var(--primary)} .btn-primary:hover{background:var(--n-900);border-color:var(--n-900)} .btn-success{background:var(--n-0);color:var(--success);border-color:var(--success)} .btn-success:hover{background:var(--success);color:var(--n-0)} .btn-warning{background:var(--n-0);color:var(--warning);border-color:var(--warning)} .btn-warning:hover{background:var(--warning);color:var(--n-0)} .btn-danger{background:var(--n-0);color:var(--danger);border-color:var(--danger)} .btn-danger:hover{background:var(--danger);color:var(--n-0)} .btn-sm{padding:var(--space-2) var(--space-5);font-size:var(--text-xs)} .btn:disabled{opacity:.5;cursor:not-allowed} .tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:18px} .tab-btn{ padding:var(--space-4) var(--space-8);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);background:none;border:none; border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--transition);cursor:pointer;font-family:inherit; } .tab-btn:hover{color:var(--text)} .tab-btn.active{color:var(--text);border-bottom-color:var(--text);font-weight:600} .tab-bar.tab-pills{border-bottom:none;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-6)} .tab-bar.tab-pills .tab-btn{ border:1px solid var(--border);border-radius:999px;margin-bottom:0; padding:var(--space-2) var(--space-6);color:var(--text-secondary); } .tab-bar.tab-pills .tab-btn:hover{border-color:var(--n-400);color:var(--text)} .tab-bar.tab-pills .tab-btn.active{ background:var(--info-strong);border-color:var(--info-strong);color:var(--n-0);font-weight:600; } .form-group{margin-bottom:var(--space-7)} .form-group label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2);color:var(--text)} .form-group input:not([type="checkbox"]):not([type="radio"]),.form-group select,.form-group textarea{ width:100%;padding:var(--space-4) var(--space-6);border:1px solid var(--border);border-radius:6px;font-size:var(--text-base); background:var(--n-0);color:var(--text);transition:var(--transition); } .form-group input:not([type="checkbox"]):not([type="radio"]):focus,.form-group select:focus,.form-group textarea:focus{ outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,0,0,.08); } .form-group textarea{resize:vertical;min-height:60px} input[type="checkbox"],input[type="radio"]{ width:16px;height:16px;margin:0;cursor:pointer;flex-shrink:0; accent-color:var(--primary);vertical-align:middle; } label.checkbox-label,.checkbox-label{ display:inline-flex !important;align-items:center;gap:var(--space-4);font-weight:normal; font-size:var(--text-sm);cursor:pointer;margin-bottom:0; } .filters label{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);cursor:pointer;white-space:nowrap} .checkbox-group{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-2)} .checkbox-group label{display:inline-flex !important;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:normal;cursor:pointer;margin-bottom:0} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7)} .field-tip{ display:inline-flex;align-items:center;justify-content:center; width:15px;height:15px;border-radius:50%;background:var(--n-200);color:var(--n-500); font-size:var(--text-2xs);font-weight:700;cursor:help;margin-left:var(--space-2); position:relative;vertical-align:middle;flex-shrink:0;font-style:normal; } .field-tip::after{ content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px); transform:translateX(-50%);background:var(--n-700);color:var(--n-50); padding:var(--space-3) var(--space-5);border-radius:6px;font-size:var(--text-xs);font-weight:400; line-height:1.45;white-space:normal;width:220px;z-index:300; pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s; box-shadow:0 4px 12px rgba(0,0,0,.2); } .field-tip:hover::after{opacity:1;visibility:visible} .hov-tip{position:relative;cursor:help} #hovTip{ display:none;position:fixed;z-index:2000; background:var(--n-700);color:var(--n-50); padding:var(--space-4) var(--space-6);border-radius:6px; font-size:var(--text-xs);font-weight:400;line-height:1.45; max-width:300px;white-space:normal; box-shadow:0 4px 14px rgba(0,0,0,.25); pointer-events:none; } .field-hint{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-1);line-height:1.45} .chip-box{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);min-height:38px; border:1px solid var(--border);border-radius:6px;background:var(--n-0);cursor:text} .chip-box:focus-within{border-color:var(--info);box-shadow:0 0 0 2px rgba(59,130,246,.15)} .chip-box .chip{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--info-bg);color:var(--info-strong); border-radius:12px;padding:var(--space-1) var(--space-3) var(--space-1) var(--space-5);font-size:var(--text-sm);line-height:1.4;max-width:100%} .chip-box .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chip-box .chip button{border:none;background:transparent;color:var(--info-solid);cursor:pointer; font-size:var(--text-md);line-height:1;padding:0;margin:0} .chip-box .chip button:hover{color:var(--danger)} .chip-box input.chip-input{border:none;outline:none;flex:1;min-width:120px;font-size:var(--text-sm);padding:var(--space-1) 0;background:transparent} .form-section-title{ font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--text-secondary);margin-bottom:var(--space-5);padding-bottom:var(--space-3); border-bottom:1px solid var(--border);margin-top:0; } .rule-builder-section{margin-bottom:var(--space-8);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .rule-builder-section .rb-header{padding:var(--space-5) var(--space-7);background:var(--n-50);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--text-base)} .rule-builder-section .rb-header .rb-label{display:flex;align-items:center;gap:var(--space-3)} .rule-builder-section .rb-body{padding:var(--space-7)} .rb-row{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap} .rb-row select,.rb-row input{padding:var(--space-3) var(--space-5);border:1px solid var(--border);border-radius:5px;font-size:var(--text-sm);background:var(--n-0)} .rb-row select{min-width:130px} .rb-row input{min-width:140px;flex:1} .rb-row .rb-remove{background:none;border:none;color:var(--danger);font-size:var(--text-lg);padding:var(--space-2) var(--space-4);border-radius:4px;cursor:pointer;flex-shrink:0} .rb-row .rb-remove:hover{background:var(--danger-bg)} .rb-logic-toggle{display:inline-flex;border:1px solid var(--border);border-radius:5px;overflow:hidden;margin:var(--space-2) 0 var(--space-4)} .rb-logic-toggle button{padding:var(--space-2) var(--space-7);font-size:var(--text-xs);font-weight:600;border:none;background:var(--n-0);cursor:pointer;color:var(--text-secondary)} .rb-logic-toggle button.active{background:var(--primary);color:var(--n-0)} .rb-add-btn{padding:var(--space-2) var(--space-6);font-size:var(--text-xs);border:1px dashed var(--border);border-radius:5px;background:var(--n-0);color:var(--primary);cursor:pointer;font-weight:600} .rb-add-btn:hover{background:var(--bg);border-color:var(--primary)} .rb-preview-toggle{font-size:var(--text-xs);color:var(--primary);cursor:pointer;background:none;border:none;font-weight:600} .rb-preview-toggle:hover{text-decoration:underline} .rb-preview{margin-top:var(--space-5);background:var(--n-50);border:1px solid var(--border);border-radius:6px;padding:var(--space-5);font-family:monospace;font-size:var(--text-xs);white-space:pre-wrap;max-height:160px;overflow-y:auto;display:none} .rb-preview.open{display:block} .rb-mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:5px;overflow:hidden;margin-bottom:var(--space-5)} .rb-mode-toggle button{padding:var(--space-2) var(--space-7);font-size:var(--text-xs);font-weight:600;border:none;background:var(--n-0);cursor:pointer;color:var(--text-secondary)} .rb-mode-toggle button.active{background:var(--primary);color:var(--n-0)} .step-indicator{display:flex;align-items:center;gap:0;margin-bottom:var(--space-10)} .step-dot{ width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:var(--text-xs);font-weight:700;border:2px solid var(--border);color:var(--text-secondary);background:var(--n-0); flex-shrink:0;transition:var(--transition); } .step-dot.active{border-color:var(--primary);background:var(--primary);color:var(--n-0)} .step-dot.done{border-color:var(--success);background:var(--success);color:var(--n-0)} .step-line{flex:1;height:2px;background:var(--border)} .step-line.done{background:var(--success)} .transfer-cart{border:1px solid var(--border);border-radius:var(--radius);margin-top:var(--space-7)} .transfer-cart-header{padding:var(--space-5) var(--space-7);background:var(--n-50);border-bottom:1px solid var(--border);font-weight:700;font-size:var(--text-sm);display:flex;justify-content:space-between} .transfer-cart-body{max-height:250px;overflow-y:auto} .cart-item{ display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) var(--space-7);border-bottom:1px solid var(--n-100);font-size:var(--text-sm); } .cart-item:last-child{border-bottom:none} .cart-item .cart-sku{font-weight:700;min-width:100px} .cart-item .cart-name{flex:1;color:var(--text-secondary)} .cart-item .cart-qty{font-weight:700;min-width:40px;text-align:right} .cart-item .cart-remove{ background:none;border:none;color:var(--danger);font-size:var(--text-base);padding:var(--space-1) var(--space-3);border-radius:4px;cursor:pointer; } .cart-item .cart-remove:hover{background:var(--danger-bg)} .timeline{display:flex;align-items:flex-start;gap:0;margin:var(--space-10) 0} .timeline-step{flex:1;text-align:center;position:relative} .timeline-step .tl-dot{ width:32px;height:32px;border-radius:50%;border:3px solid var(--border);background:var(--n-0); display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3);transition:var(--transition); } .timeline-step .tl-dot svg{width:14px;height:14px;stroke:var(--text-secondary)} .timeline-step.done .tl-dot{border-color:var(--success);background:var(--success)} .timeline-step.done .tl-dot svg{stroke:var(--n-0)} .timeline-step.current .tl-dot{border-color:var(--primary);background:var(--n-200)} .timeline-step.current .tl-dot svg{stroke:var(--primary)} .timeline-step .tl-label{font-size:var(--text-xs);font-weight:600;color:var(--text)} .timeline-step .tl-date{font-size:var(--text-xs);color:var(--text-secondary)} .timeline-connector{width:100%;height:3px;background:var(--border);flex:1;margin-top:var(--space-8)} .timeline-connector.done{background:var(--success)} .search-results-wrap{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);margin-top:var(--space-4)} .search-results-wrap table{margin:0} .search-results-wrap tbody td{padding:var(--space-3) var(--space-6);font-size:var(--text-sm)} .search-results-wrap thead th{position:sticky;top:0;z-index:1;background:var(--n-50)} .detail-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-10)} .detail-header h2{font-size:var(--text-lg);font-weight:700} .detail-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-6);margin-bottom:var(--space-10)} .detail-meta-item{font-size:var(--text-sm)} .detail-meta-item .dm-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-weight:600} .detail-meta-item .dm-value{font-weight:600;margin-top:var(--space-1)} .success-message{ background:var(--success-bg);border:1px solid var(--success-solid);border-radius:var(--radius);padding:var(--space-8) var(--space-10); color:var(--success-fg);font-weight:600;text-align:center;margin:var(--space-6) 0; } .qty-input{ width:70px;padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:4px;font-size:var(--text-sm);text-align:center; } .count-bay-nav{ display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-7);background:var(--n-50); border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-7);flex-wrap:wrap; } .count-entry-row{ display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-7);border-bottom:1px solid var(--n-100);font-size:var(--text-sm); } .count-entry-row:last-child{border-bottom:none} .disc-value.negative{color:var(--danger);font-weight:700} .disc-value.positive{color:var(--success);font-weight:700} .disc-value.zero{color:var(--text-secondary)} .progress-bar-container{ width:100%;height:20px;background:var(--n-200);border-radius:10px;overflow:hidden;margin:var(--space-3) 0; } .progress-bar-fill{ height:100%;background:var(--primary);border-radius:10px;transition:width .4s ease; display:flex;align-items:center;justify-content:center;font-size:var(--text-2xs);font-weight:700;color:var(--n-0); } .radio-group{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-4) 0} .radio-option{ display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-7);border:1px solid var(--border); border-radius:6px;cursor:pointer;transition:var(--transition); } .radio-option:hover{background:var(--n-50)} .radio-option.selected{border-color:var(--primary);background:var(--info-bg)} .radio-option input[type="radio"]{margin:0} .radio-option .ro-label{font-weight:600;font-size:var(--text-base)} .radio-option .ro-desc{font-size:var(--text-xs);color:var(--text-secondary)} .act-as-banner{ display:flex;align-items:center;gap:var(--space-5); padding:var(--space-4) var(--space-12);font-size:var(--text-sm);font-weight:600; background:var(--danger-bg);color:var(--danger-strong);border-bottom:1px solid var(--danger-bg); } .act-as-banner .pill{ background:var(--n-0);color:var(--danger-strong);border:1px solid var(--danger-bg); padding:var(--space-1) var(--space-5);border-radius:999px;font-size:var(--text-xs);font-weight:700; } .act-as-banner .stop-btn{ margin-left:auto;background:var(--danger-strong);color:var(--n-0);border:none; padding:var(--space-2) var(--space-6);border-radius:6px;font-size:var(--text-xs);font-weight:600;cursor:pointer; } .act-as-banner .stop-btn:hover{background:var(--danger-strong)} .act-as-select{ padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:6px; background:var(--n-0);font-size:var(--text-sm);color:var(--text);max-width:200px; } .site-banner-bar{padding:0} .site-banner{padding:var(--space-5) var(--space-12);font-size:var(--text-base);display:flex;align-items:center;gap:var(--space-5);border-bottom:1px solid rgba(0,0,0,.08)} .site-banner.announcement{background:var(--info-bg);color:var(--info-strong);border-left:4px solid var(--info-solid)} .site-banner.warning{background:var(--warning-bg);color:var(--warning-fg);border-left:4px solid var(--warning-solid)} .site-banner .banner-icon{font-size:var(--text-lg);flex-shrink:0} .site-banner .banner-title{font-weight:700} .site-banner .banner-msg{flex:1} body.readonly-mode .btn-primary:not(.auth-btn):not(.read-action), body.readonly-mode .btn-warning:not(.read-action), body.readonly-mode .btn-danger:not(.auth-btn):not(.read-action), body.readonly-mode .admin-only, body.readonly-mode .edit-action, body.readonly-mode [data-edit-action]{display:none!important} body.readonly-mode .readonly-show{display:block!important} .ro-field-label{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--n-400);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-2)} .ro-field-label::after{content:"Read only";font-size:var(--text-2xs);font-weight:700;letter-spacing:.04em;color:var(--n-300);border:1px solid var(--n-200);border-radius:8px;padding:1px var(--space-3);text-transform:uppercase} .ro-field{background:var(--n-100);border:0;border-left:3px solid var(--n-300);border-radius:0 6px 6px 0;padding:var(--space-4) var(--space-6);font-size:var(--text-base);color:var(--n-700);white-space:pre-wrap;line-height:1.5} .ro-field.ro-empty{color:var(--n-400);font-style:italic} .facility-chip{display:none;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);border-radius:14px;background:var(--info-bg);color:var(--info-fg);font-size:var(--text-xs);font-weight:600;border:1px solid var(--info-bg);white-space:nowrap} .facility-chip .chip-icon{font-size:var(--text-sm)} body.scoped-user .facility-chip{display:inline-flex} body.scoped-user #facilitySelect{opacity:.6;pointer-events:none;cursor:not-allowed} body[data-route="company-health"] #facilitySelect{display:none} body[data-route="my-dashboard"] #facilitySelect{display:none} .flag-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:10px;font-size:var(--text-2xs);font-weight:600;margin-right:var(--space-1)} .flag-badge.on{background:var(--success-bg);color:var(--success-fg)} .flag-badge.off{background:var(--n-100);color:var(--n-400)} .profile-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0} .profile-toggle input{opacity:0;width:0;height:0;margin:0} .profile-toggle .profile-toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--n-300);border-radius:24px;transition:background .15s} .profile-toggle input:checked + .profile-toggle-slider{background:var(--primary,#0369a1)} .profile-toggle .profile-toggle-knob{position:absolute;height:18px;width:18px;left:3px;top:3px;background:var(--n-0);border-radius:50%;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)} .profile-toggle input:checked + .profile-toggle-slider .profile-toggle-knob{left:21px} .profile-toggle input:disabled + .profile-toggle-slider{opacity:.5;cursor:not-allowed} .task-type-pick{border-left:4px solid #0284c7} .task-type-receive{border-left:4px solid var(--success-solid)} .task-type-putaway{border-left:4px solid #7c3aed} .task-type-return_receive{border-left:4px solid var(--warning-solid)} .task-type-return_inspect{border-left:4px solid var(--danger-solid)} .worker-card{ background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);padding:var(--space-7); margin-bottom:var(--space-5);transition:var(--transition); } .worker-card:hover{box-shadow:var(--shadow-md)} .worker-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--space-3);vertical-align:middle} .worker-status-active{background:var(--success)} .worker-status-idle{background:var(--warning)} .worker-status-offline{background:var(--n-400)} .workboard-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-10)} @media(max-width:1100px){.workboard-grid{grid-template-columns:1fr}} .pending-queue{min-height:200px} .pending-queue .queue-group{margin-bottom:var(--space-7)} .pending-queue .queue-group-header{ font-weight:700;font-size:var(--text-sm);padding:var(--space-4) var(--space-6);background:var(--n-50); border:1px solid var(--border);border-radius:6px 6px 0 0;display:flex;align-items:center;justify-content:space-between; } .pending-queue .queue-item{ display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);border:1px solid var(--border);border-top:none; font-size:var(--text-sm);transition:var(--transition); } .pending-queue .queue-item:last-child{border-radius:0 0 6px 6px} .pending-queue .queue-item:hover{background:var(--n-50)} .workers-column{min-height:200px} .metrics-column{min-height:200px} .rush-highlight{background:var(--danger-bg) !important;border-left:3px solid var(--danger)} .zone-card{background:var(--n-0);border:1px solid var(--border);border-radius:8px;padding:var(--space-7) var(--space-8);margin-bottom:var(--space-5);transition:var(--transition)} .zone-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)} .zone-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)} .zone-card-header .zone-name{font-weight:700;font-size:var(--text-base)} .zone-card-badges{display:flex;gap:var(--space-3);flex-wrap:wrap} .zone-card-summary{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-4)} .zone-card-actions{display:flex;gap:var(--space-3);margin-top:var(--space-5)} .sched-row{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);margin-bottom:var(--space-2)} .sched-row-label{font-weight:600;min-width:42px;color:var(--text-secondary);font-size:var(--text-2xs);text-transform:uppercase} .sched-day{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;border-radius:4px;font-size:var(--text-2xs);font-weight:600;background:var(--n-100);color:var(--n-400)} .sched-day.active{background:var(--primary);color:var(--n-0)} .sched-day.active-delivery{background:var(--success);color:var(--n-0)} .sched-day.active-install{background:var(--info);color:var(--n-0)} .sched-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 var(--space-4);border-radius:6px;border:1px solid var(--border);background:var(--n-100);color:var(--text-secondary);font-size:var(--text-xs);font-weight:600;cursor:pointer;transition:var(--transition);user-select:none} .sched-toggle.active{background:var(--primary);color:var(--n-0);border-color:var(--primary)} .sched-toggle:hover{border-color:var(--primary)} .state-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3)} .state-grid label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:4px;cursor:pointer} .state-grid label:hover{background:var(--n-50)} .county-row{display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-4);flex-wrap:wrap} .county-row input,.county-row select{font-size:var(--text-sm)} @media(max-width:768px){ .state-grid{grid-template-columns:repeat(3,1fr)} .county-row{flex-direction:column;align-items:stretch} } .location-map{width:100%;height:360px;border-radius:8px;border:1px solid var(--border);background:var(--n-200);overflow:hidden;isolation:isolate;position:relative;z-index:0} .location-map.location-map-sm{height:220px} .location-map.location-map-tall{height:640px} .location-map-empty{display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--text-sm);width:100%;height:220px;border:1px dashed var(--border);border-radius:8px;background:var(--bg-secondary)} .location-map .lm-popup{font:13px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--n-900);min-width:160px} .location-map .lm-popup strong{display:block;margin-bottom:var(--space-1);color:var(--n-900)} .location-map .lm-popup .lm-sub{color:var(--n-500);font-size:var(--text-xs)} .location-map.expanded{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;height:auto !important;border-radius:0;z-index:9000;border:0} html:has(.location-map.expanded),body:has(.location-map.expanded){overflow:hidden} .location-map .gm-expand-btn{background:var(--n-0);border-radius:2px;box-shadow:0 1px 4px -1px rgba(0,0,0,.3);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:700;color:var(--n-500);margin:var(--space-5);user-select:none} .location-map .gm-expand-btn:hover{color:var(--n-700);background:var(--n-50)} .ord-info{display:inline-block;vertical-align:middle;margin-left:var(--space-3);line-height:0;cursor:help} .ord-tip-anchor{cursor:help} .ord-info-dot{display:inline-block;width:14px;height:14px;line-height:14px;border-radius:50%;background:var(--n-200);color:var(--n-600);text-align:center;font-size:var(--text-2xs);font-weight:700;font-family:Georgia,serif} .ord-info:hover .ord-info-dot, .ord-info:focus .ord-info-dot{background:var(--n-300);color:var(--n-700)} #ordTip{position:fixed;z-index:2147483646;background:var(--n-0);color:var(--n-900);border:1px solid var(--n-200);border-radius:8px;box-shadow:0 10px 24px -8px rgba(15,23,42,.18),0 0 0 1px rgba(15,23,42,.04);padding:var(--space-4) var(--space-6);font-size:var(--text-sm);font-weight:400;line-height:1.5;white-space:nowrap;text-align:left;pointer-events:none;display:none;box-sizing:border-box;max-width:min(920px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:hidden} #ordTip.wide{white-space:normal;overflow:auto;max-width:calc(100vw - 16px);pointer-events:auto} #ordTip table.ord-tip-table{border-collapse:collapse;margin:var(--space-1) 0 0;font-size:var(--text-sm)} #ordTip table.ord-tip-table caption{caption-side:top;text-align:left;font-weight:600;color:var(--n-600);padding-bottom:var(--space-2)} #ordTip table.ord-tip-table th, #ordTip table.ord-tip-table td{padding:var(--space-2) var(--space-5);border-bottom:1px solid var(--n-100);text-align:left;white-space:nowrap} #ordTip table.ord-tip-table th{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--n-500);font-weight:600;background:var(--n-50)} #ordTip table.ord-tip-table td.num, #ordTip table.ord-tip-table th.num{text-align:right;font-variant-numeric:tabular-nums} #ordTip table.ord-tip-table tr:last-child td{border-bottom:0} .convint-filter-row{display:flex;gap:var(--space-5);flex-wrap:wrap;align-items:center} .convint-filter-row .form-input{width:auto} .convint-toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;white-space:nowrap} .convint-slice-tabs{margin-bottom:var(--space-6)} .convint-pivot .convint-num{text-align:right;font-variant-numeric:tabular-nums} .cs-app * { box-sizing: border-box; margin: 0; padding: 0; } .cs-app, .cs-app { height: 100%; } .cs-app { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--n-50); color: var(--n-700); font-size: var(--text-md); line-height: 1.5; } .cs-app.cs-page { box-sizing: border-box; width: 100%; flex: 1; padding: 28px var(--space-16) 56px; } .cs-app a { color: var(--info-solid); text-decoration: none; } .cs-app a:hover { text-decoration: underline; } .cs-app button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } .cs-app input, .cs-app textarea, .cs-app select { font: inherit; color: inherit; border: 1px solid var(--n-300); background: var(--n-0); border-radius: 6px; padding: var(--space-4) var(--space-5); width: 100%; } .cs-app input:focus, .cs-app textarea:focus, .cs-app select:focus { outline: none; border-color: var(--info-solid); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .cs-app textarea { resize: vertical; min-height: 80px; } .cs-app .btn { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-7); border-radius: 6px; font-weight: 500; background: var(--n-0); border: 1px solid var(--n-300); color: var(--n-900); transition: background 0.15s; } .cs-app .btn:hover { background: var(--n-100); } .cs-app .btn-primary { background: var(--info-solid); border-color: var(--info-solid); color: var(--n-0); } .cs-app .btn-primary:hover { background: var(--info-fg); } .cs-app .btn-danger { background: var(--n-0); border-color: var(--danger-bg); color: var(--danger-fg); } .cs-app .btn-danger:hover { background: var(--danger-bg); } .cs-app .btn-sm { padding: var(--space-2) var(--space-5); font-size: var(--text-base); } .cs-app #login-screen { display: none; min-height: 100vh; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--info-strong) 0%, var(--info-solid) 100%); } .cs-app #login-screen.active { display: flex; } .cs-app .login-card { background: var(--n-0); border-radius: 12px; padding: 36px var(--space-16); width: 380px; max-width: calc(100vw - 32px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); } .cs-app .login-card h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); color: var(--n-900); display: flex; align-items: center; gap: var(--space-5); } .cs-app .login-card h1 img { width: 32px; height: 32px; object-fit: contain; } .cs-app .login-card .subtitle { color: var(--n-500); font-size: var(--text-base); margin-bottom: var(--space-12); } .cs-app .login-card label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--n-700); margin: var(--space-7) 0 var(--space-3); text-transform: uppercase; letter-spacing: 0.04em; } .cs-app .login-card .btn-primary { width: 100%; margin-top: 22px; padding: var(--space-5); font-size: var(--text-lg); justify-content: center; } .cs-app .login-error { display: none; background: var(--danger-bg); color: var(--danger-fg); padding: var(--space-5) var(--space-6); border-radius: 6px; margin-top: var(--space-7); font-size: var(--text-base); border: 1px solid var(--danger-bg); } .cs-app .login-error.active { display: block; } .cs-app #app { display: none; min-height: 100vh; } .cs-app #app.active { display: flex; } .cs-app .sidebar { width: 240px; background: var(--n-900); color: var(--n-300); flex-shrink: 0; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; } .cs-app .sidebar-header { padding: 22px var(--space-10); border-bottom: 1px solid var(--n-700); } .cs-app .sidebar-header .brand { font-size: var(--text-xl); font-weight: 700; color: var(--n-0); display: flex; align-items: center; gap: var(--space-5); } .cs-app .sidebar-header .brand img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--n-0); padding: var(--space-1); } .cs-app .sidebar-header .tagline { font-size: var(--text-sm); color: var(--n-400); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.08em; } .cs-app .sidebar-nav { flex: 1; padding: var(--space-6) 0; overflow-y: auto; } .cs-app .nav-item { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-10); color: var(--n-300); cursor: pointer; transition: background 0.12s, color 0.12s; border-left: 3px solid transparent; } .cs-app .nav-item:hover { background: var(--n-700); color: var(--n-0); text-decoration: none; } .cs-app .nav-item.active { background: var(--n-700); color: var(--n-0); border-left-color: var(--info-solid); } .cs-app .nav-item .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; } .cs-app .nav-group-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-8); color: var(--n-400); cursor: pointer; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; user-select: none; transition: color 0.12s; } .cs-app .nav-group-header:hover { color: var(--n-0); } .cs-app .nav-group-header.has-active { color: var(--n-200); } .cs-app .nav-group-header .caret { width: 12px; font-size: var(--text-2xs); opacity: 0.8; } .cs-app .nav-group-items { display: block; } .cs-app .nav-group.collapsed .nav-group-items { display: none; } .cs-app .nav-group-items .nav-item { padding-left: 34px; } .cs-app .sidebar-footer { padding: var(--space-7) var(--space-10); border-top: 1px solid var(--n-700); font-size: var(--text-sm); } .cs-app .sidebar-footer .user-name { color: var(--n-0); font-weight: 600; } .cs-app .sidebar-footer .user-role { color: var(--n-400); margin-top: 1px; } .cs-app .sidebar-footer .logout { margin-top: var(--space-5); width: 100%; background: transparent; color: var(--n-300); border: 1px solid var(--n-700); padding: var(--space-3) var(--space-5); border-radius: 5px; font-size: var(--text-sm); } .cs-app .sidebar-footer .logout:hover { background: var(--n-700); color: var(--n-0); } .cs-app .sidebar-footer .switch-app { display: none; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); width: 100%; background: transparent; color: var(--n-300); border: 1px solid var(--n-700); padding: var(--space-3) var(--space-5); border-radius: 5px; font-size: var(--text-sm); text-decoration: none; } .cs-app .sidebar-footer .switch-app.visible { display: inline-flex; } .cs-app .sidebar-footer .switch-app:hover { background: var(--n-700); color: var(--n-0); text-decoration: none; } .cs-app .main { flex: 1; padding: 28px 36px; max-width: 100%; overflow-x: hidden; } .cs-app .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .cs-app .page-header h1 { font-size: var(--text-xl); color: var(--n-900); } .cs-app .page-header .subtitle { color: var(--n-500); margin-top: var(--space-1); font-size: var(--text-base); } .cs-app .page { display: none; } .cs-app .page.active { display: block; } .cs-app .card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: var(--space-10) 22px; margin-bottom: 18px; } .cs-app .card h2 { font-size: var(--text-lg); color: var(--n-900); margin-bottom: var(--space-7); } .cs-app .card-row { display: flex; gap: var(--space-7); flex-wrap: wrap; } .cs-app .card-row > * { flex: 1; min-width: 180px; } .cs-app table { width: 100%; border-collapse: collapse; background: var(--n-0); } .cs-app th, .cs-app td { padding: var(--space-5) var(--space-7); text-align: left; border-bottom: 1px solid var(--n-200); font-size: var(--text-base); } .cs-app th { background: var(--n-50); font-weight: 600; color: var(--n-700); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; } .cs-app tr.clickable { cursor: pointer; } .cs-app tr.clickable:hover { background: var(--n-50); } .cs-app .table-wrap { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; overflow: hidden; } .cs-app .badge { display: inline-block; padding: var(--space-1) var(--space-4); border-radius: 999px; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .cs-app .badge-ajm { background: var(--info-bg); color: var(--info-strong); } .cs-app .badge-catadmin { background: var(--info-bg); color: var(--info-strong); } .cs-app .badge-dims { background: var(--warning-bg); color: var(--warning-fg); } .cs-app .badge-manual { background: var(--n-200); color: var(--n-700); } .cs-app .badge-cat-region { background: var(--info-bg); color: var(--info-strong); } .cs-app .badge-cat-size { background: var(--warning-bg); color: var(--warning-fg); } .cs-app .badge-cat-reputation { background: var(--success-bg); color: var(--success-fg); } .cs-app .badge-cat-market { background: var(--info-bg); color: #6d28d9; } .cs-app .badge-cat-industry { background: var(--info-bg); color: #0e7490; } .cs-app .badge-cat-lifecycle { background: var(--danger-bg); color: #9f1239; } .cs-app .badge-cat-license { background: var(--info-bg); color: #075985; } .cs-app .badge-cat-commission { background: var(--info-bg); color: var(--info-strong); } .cs-app .badge-cat-compliance { background: var(--danger-bg); color: var(--danger-strong); } .cs-app .aff-glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); } .cs-app .aff-glossary-group { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 8px; padding: var(--space-5) var(--space-6); } .cs-app .aff-glossary-group-title { font-weight: 700; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.05em; color: var(--n-700); } .cs-app .aff-glossary-group-title.has-tip { cursor: help; border-bottom: 1px dotted var(--n-400); display: inline-block; outline: none; } .cs-app .aff-glossary-group ul { list-style: none; padding: var(--space-3) 0 0 0; margin: 0; } .cs-app .aff-glossary-group li { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-1) 0; } .cs-app .aff-glossary-group li .aff-glossary-count { color: var(--n-500); font-size: var(--text-sm); } .cs-app .aff-cats-grid { display: grid; gap: var(--space-7); } .cs-app .aff-cats-row { display: grid; gap: var(--space-6); } .cs-app .aff-cats-row.row-primary { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cs-app .aff-cats-row.row-other { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cs-app .aff-cats-row.row-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .cs-app .aff-cats-row.row-primary, .cs-app .aff-cats-row.row-other, .cs-app .aff-cats-row.row-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cs-app .aff-cat-cell { border: 1px solid var(--n-200); border-left: 4px solid var(--cat-accent, var(--n-300)); border-radius: 8px; padding: var(--space-5) var(--space-6); background: var(--n-0); min-height: 64px; display: flex; flex-direction: column; gap: var(--space-3); } .cs-app .aff-cat-cell .aff-cat-label { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--n-600); cursor: help; border-bottom: 1px dotted transparent; align-self: flex-start; } .cs-app .aff-cat-cell .aff-cat-label:hover { border-bottom-color: var(--n-400); } .cs-app .aff-cat-cell .aff-cat-values { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cs-app .aff-cat-cell .aff-cat-empty { color: var(--n-400); font-size: var(--text-base); } .cs-app .aff-cat-cell.cat-region { --cat-accent: var(--info-strong); } .cs-app .aff-cat-cell.cat-size { --cat-accent: var(--warning-fg); } .cs-app .aff-cat-cell.cat-reputation { --cat-accent: var(--success-fg); } .cs-app .aff-cat-cell.cat-market { --cat-accent: #6d28d9; } .cs-app .aff-cat-cell.cat-industry { --cat-accent: #0e7490; } .cs-app .aff-cat-cell.cat-lifecycle { --cat-accent: #9f1239; } .cs-app .aff-cat-cell.cat-license { --cat-accent: #075985; } .cs-app .aff-cat-cell.cat-commission { --cat-accent: var(--info-strong); } .cs-app .aff-cat-cell.cat-compliance { --cat-accent: var(--danger-strong); } .cs-app [data-tip] { position: relative; } .cs-app [data-tip]:hover::after, .cs-app [data-tip]:focus-visible::after, .cs-app [data-tip].tip-open::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 0; background: var(--n-700); color: var(--n-0); padding: var(--space-3) var(--space-4); border-radius: 4px; font-size: var(--text-sm); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4; white-space: normal; width: max-content; max-width: 280px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.18); pointer-events: none; } .cs-app [data-tip]:hover::before, .cs-app [data-tip]:focus-visible::before, .cs-app [data-tip].tip-open::before { content: ""; position: absolute; bottom: 100%; left: 10px; border: 5px solid transparent; border-top-color: var(--n-700); z-index: 1000; pointer-events: none; } .cs-app .empty { text-align: center; padding: 40px var(--space-10); color: var(--n-500); font-size: var(--text-md); } .cs-app .toast { position: fixed; top: 22px; right: 22px; background: var(--n-900); color: var(--n-0); padding: var(--space-5) var(--space-8); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); z-index: 1000; opacity: 0; transform: translateY(-10px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; font-size: var(--text-base); } .cs-app .toast.show { opacity: 1; transform: translateY(0); } .cs-app .toast.error { background: var(--danger-fg); } .cs-app .toast.success { background: #047857; } .cs-app .row-flex { display: flex; gap: var(--space-7); align-items: center; } .cs-app .grow { flex: 1; } .cs-app .muted { color: var(--n-500); } .cs-app .small { font-size: var(--text-sm); } .cs-app .mb-10 { margin-bottom: var(--space-5); } .cs-app .mb-16 { margin-bottom: var(--space-8); } .cs-app .mt-16 { margin-top: var(--space-8); } .cs-app .field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7) 18px; } .cs-app .field-grid label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--n-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); } .cs-app .field-grid .full { grid-column: 1 / -1; } .cs-app .note-item { border-bottom: 1px solid var(--n-200); padding: var(--space-6) 0; } .cs-app .note-item:last-child { border-bottom: 0; } .cs-app .note-meta { font-size: var(--text-sm); color: var(--n-500); margin-bottom: var(--space-2); } .cs-app .note-content { white-space: pre-wrap; color: var(--n-700); } .cs-app .aff-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: var(--space-5) var(--space-6); margin-bottom: 18px; } .cs-app .aff-filterbar-search { position: relative; flex: 0 1 280px; min-width: 200px; max-width: 320px; } .cs-app .aff-filterbar-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n-400); pointer-events: none; } .cs-app .aff-filterbar-search input { padding: var(--space-4) var(--space-6) var(--space-4) 36px; background: var(--n-50); border: 1px solid transparent; border-radius: 8px; } .cs-app .aff-filterbar-search input:focus { background: var(--n-0); border-color: var(--info-solid); } .cs-app .aff-filterbar-divider { align-self: stretch; width: 1px; background: var(--n-200); margin: var(--space-2) var(--space-1); } .cs-app .aff-filterbar-selects { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } .cs-app .aff-filterbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-left: auto; } .cs-app .aff-filterbar-actions label { white-space: nowrap; } .cs-app .aff-filterbar-top { display: flex; align-items: center; gap: var(--space-5); flex: 1 1 100%; } .cs-app .aff-filterbar-top .aff-filterbar-search { flex: 1 1 auto; min-width: 200px; max-width: none; } .cs-app .aff-filterbar-selects select { width: auto; min-width: 132px; padding: var(--space-3) 30px var(--space-3) var(--space-7); font-size: var(--text-base); border-radius: 999px; border: 1px solid var(--n-200); background-color: var(--n-50); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; transition: background-color 0.12s, color 0.12s, border-color 0.12s; } .cs-app .aff-filterbar-selects select:hover { background-color: var(--n-100); border-color: var(--n-300); } .cs-app .aff-filterbar-selects select.is-active { background-color: var(--info-bg); border-color: var(--info-bg); color: var(--info-fg); font-weight: 600; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); } .cs-app .aff-filterbar-selects select:focus { outline: none; border-color: var(--info-solid); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .cs-app .aff-filterbar-reset { margin-left: auto; padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: 600; color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-bg); border-radius: 999px; cursor: pointer; transition: background 0.12s; } .cs-app .aff-filterbar-reset:hover { background: var(--danger-bg); } .cs-app .aff-filterbar-reset[hidden] { display: none; } .cs-app .prod-search-wrap { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: var(--space-7) var(--space-8); margin-bottom: var(--space-8); display: flex; align-items: center; gap: var(--space-6); } .cs-app .prod-search-wrap .prod-search-icon { width: 18px; height: 18px; color: var(--n-500); flex-shrink: 0; } .cs-app .prod-search-wrap input { border: 0; padding: 0; font-size: var(--text-lg); flex: 1; } .cs-app .prod-search-wrap input:focus { box-shadow: none; } .cs-app .prod-search-wrap .prod-search-hint { font-size: var(--text-sm); color: var(--n-500); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .cs-app .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-7); } .cs-app .prod-card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: var(--space-7) var(--space-8); cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s; display: flex; flex-direction: column; gap: var(--space-3); } .cs-app .prod-card:hover { border-color: var(--info-solid); box-shadow: 0 6px 18px -8px rgba(37, 99, 235, 0.35); transform: translateY(-1px); } .cs-app .prod-card .pc-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: var(--text-base); color: var(--info-strong); letter-spacing: 0.02em; } .cs-app .prod-card .pc-name { font-size: var(--text-md); font-weight: 600; color: var(--n-900); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cs-app .prod-card .pc-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--n-500); } .cs-app .prod-card .pc-meta .pc-chip { background: var(--n-100); border: 1px solid var(--n-200); padding: var(--space-1) var(--space-4); border-radius: 999px; font-size: var(--text-sm); color: var(--n-700); } .cs-app .prod-card .pc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--n-200); font-size: var(--text-sm); color: var(--info-solid); font-weight: 600; } .cs-app .prod-card .pc-footer svg { width: 14px; height: 14px; } .cs-app .prod-empty { background: var(--n-0); border: 1px dashed var(--n-300); border-radius: 10px; padding: 36px var(--space-10); text-align: center; color: var(--n-500); } .cs-app .prod-empty .pe-icon { font-size: var(--text-2xl); margin-bottom: var(--space-3); opacity: 0.6; } .cs-app .inv-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; justify-content: flex-end; z-index: 1000; animation: invFade 0.15s ease; } @keyframes invFade { from { opacity: 0; } to { opacity: 1; } } .cs-app .inv-drawer { width: 560px; max-width: 100vw; height: 100vh; background: var(--n-50); display: flex; flex-direction: column; box-shadow: -16px 0 48px -16px rgba(15, 23, 42, 0.3); animation: invSlide 0.22s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes invSlide { from { transform: translateX(100%); } to { transform: translateX(0); } } .cs-app .inv-header { padding: 18px 22px var(--space-7); background: linear-gradient(135deg, var(--info-strong) 0%, var(--info-solid) 100%); color: var(--n-0); flex-shrink: 0; position: relative; } .cs-app .inv-header .inv-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); line-height: 1; transition: background 0.12s; } .cs-app .inv-header .inv-close:hover { background: rgba(255, 255, 255, 0.2); } .cs-app .inv-header .inv-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-base); letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; margin-right: 40px; } .cs-app .inv-header .inv-title { font-size: var(--text-xl); font-weight: 700; margin-top: var(--space-2); line-height: 1.3; margin-right: 40px; } .cs-app .inv-header .inv-sub { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-4); } .cs-app .inv-header .inv-sub .sub-chip { background: rgba(255, 255, 255, 0.15); padding: var(--space-1) var(--space-4); border-radius: 999px; font-size: var(--text-sm); } .cs-app .inv-header .inv-quickship { display: inline-block; margin-top: var(--space-4); background: #10b981; color: var(--n-0); padding: var(--space-1) var(--space-5); border-radius: 999px; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .cs-app .inv-body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; } .cs-app .inv-body .inv-section-title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--n-500); margin: 18px 0 var(--space-5); } .cs-app .inv-body .inv-section-title:first-child { margin-top: 0; } .cs-app .inv-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .cs-app .inv-kpi { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: var(--space-6) var(--space-7); position: relative; overflow: hidden; } .cs-app .inv-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--kpi-color, var(--n-300)); } .cs-app .inv-kpi .k-label { font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--n-500); } .cs-app .inv-kpi .k-value { font-size: var(--text-xl); font-weight: 700; color: var(--n-900); margin-top: var(--space-2); line-height: 1.1; } .cs-app .inv-kpi .k-sub { font-size: var(--text-sm); color: var(--n-500); margin-top: var(--space-1); } .cs-app .inv-kpi.k-total { --kpi-color: var(--info-solid); } .cs-app .inv-kpi.k-aj { --kpi-color: var(--success-solid); } .cs-app .inv-kpi.k-vendor { --kpi-color: var(--warning-solid); } .cs-app .inv-kpi.k-dmi { --kpi-color: #7c3aed; } .cs-app .inv-kpi.k-allocated { --kpi-color: #ea580c; } .cs-app .inv-kpi.k-transit { --kpi-color: #0891b2; } .cs-app .inv-wh-list { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; overflow: hidden; } .cs-app .inv-wh-row { display: grid; grid-template-columns: 1fr 90px; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--n-100); } .cs-app .inv-wh-row:last-child { border-bottom: 0; } .cs-app .inv-wh-row .wh-info { min-width: 0; } .cs-app .inv-wh-row .wh-name { font-size: var(--text-base); font-weight: 600; color: var(--n-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-app .inv-wh-row .wh-meta { font-size: var(--text-sm); color: var(--n-500); margin-top: var(--space-1); } .cs-app .inv-wh-row .wh-bar { height: 6px; background: var(--n-100); border-radius: 3px; margin-top: var(--space-3); overflow: hidden; } .cs-app .inv-wh-row .wh-bar > div { height: 100%; background: linear-gradient(90deg, var(--info-solid), var(--info-solid)); border-radius: 3px; } .cs-app .inv-wh-row.wh-vendor .wh-bar > div { background: linear-gradient(90deg, var(--warning-solid), var(--warning-solid)); } .cs-app .inv-wh-row.wh-dmi .wh-bar > div { background: linear-gradient(90deg, #7c3aed, #a78bfa); } .cs-app .inv-wh-row .wh-qty { text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: var(--text-lg); color: var(--n-900); } .cs-app .inv-wh-row .wh-qty.zero { color: var(--n-400); } .cs-app .inv-wh-row .wh-tag { display: inline-block; margin-top: var(--space-1); padding: 1px var(--space-3); border-radius: 999px; font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .cs-app .inv-wh-row .wh-tag.t-aj { background: var(--success-bg); color: var(--success-fg); } .cs-app .inv-wh-row .wh-tag.t-vendor { background: var(--warning-bg); color: var(--warning-fg); } .cs-app .inv-wh-row .wh-tag.t-dmi { background: var(--info-bg); color: #6d28d9; } .cs-app .inv-loading { background: var(--n-0); border: 1px solid var(--n-200); border-radius: 10px; padding: 28px 18px; text-align: center; color: var(--n-500); font-size: var(--text-base); } .cs-app .inv-loading::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--n-300); border-top-color: var(--info-solid); border-radius: 50%; margin-right: var(--space-4); vertical-align: middle; animation: invSpin 0.8s linear infinite; } @keyframes invSpin { to { transform: rotate(360deg); } } .cs-app .inv-error { background: var(--danger-bg); border: 1px solid var(--danger-bg); color: var(--danger-strong); border-radius: 10px; padding: var(--space-7) var(--space-8); font-size: var(--text-base); } .cs-app .inv-empty { background: var(--n-0); border: 1px dashed var(--n-300); border-radius: 10px; padding: 22px 18px; text-align: center; color: var(--n-500); font-size: var(--text-base); } @media (max-width: 640px) { .cs-app .inv-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-app .inv-drawer { width: 100vw; } } .orderbot{position:relative;z-index:1200;font-size:var(--text-md)} .orderbot-fab{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--primary);color:var(--n-0);border:none;box-shadow:0 2px 6px -2px rgba(10,10,10,.35);transition:transform .12s ease, box-shadow .12s ease} .orderbot-fab:hover{transform:translateY(-1px);box-shadow:0 4px 10px -3px rgba(10,10,10,.45)} .orderbot-panel{position:fixed;right:20px;top:64px;width:360px;max-width:calc(100vw - 32px);height:480px;max-height:calc(100vh - 96px);z-index:1300;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;overflow:hidden} .orderbot-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-6) var(--space-7);background:var(--primary);color:var(--n-0);flex-shrink:0} .orderbot-title{display:flex;align-items:center;gap:var(--space-4);font-weight:600;font-size:var(--text-base)} .orderbot-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(22,101,52,.25)} .orderbot-x{background:none;border:none;color:var(--n-0);font-size:var(--text-xl);line-height:1;opacity:.8} .orderbot-x:hover{opacity:1} .orderbot-log{flex:1;overflow-y:auto;padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-5);background:var(--bg)} .orderbot-msg{max-width:88%;padding:var(--space-4) var(--space-6);border-radius:12px;line-height:1.45;word-wrap:break-word} .orderbot-msg.user{align-self:flex-end;background:var(--primary);color:var(--n-0);border-bottom-right-radius:3px} .orderbot-msg.bot{align-self:flex-start;background:var(--card-bg);border:1px solid var(--border);border-bottom-left-radius:3px} .orderbot-msg.bot strong{font-weight:600} .orderbot-block{margin-top:var(--space-4)} .orderbot-block:first-child{margin-top:0} .orderbot-block-title{font-weight:600;font-size:var(--text-sm);margin-bottom:var(--space-1)} .orderbot-block-line{font-size:var(--text-sm);color:var(--text-secondary);margin-left:var(--space-1)} .orderbot-block-line strong{color:var(--text)} .orderbot-choices{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)} .orderbot-choice{text-align:left;padding:var(--space-3) var(--space-5);border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--card-bg);color:var(--text);font-size:var(--text-sm);cursor:pointer;transition:background .12s ease,border-color .12s ease} .orderbot-choice:hover{background:var(--soft);border-color:var(--primary)} .orderbot-choice:disabled{opacity:.5;cursor:default} .orderbot-choice-hint{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-2)} .orderbot-typing{align-self:flex-start;display:flex;align-items:center;gap:var(--space-4);color:var(--text-muted);font-size:var(--text-sm)} .orderbot-settings{position:absolute;left:0;right:0;top:44px;bottom:0;background:var(--card-bg);overflow-y:auto;padding:var(--space-7);z-index:6;display:flex;flex-direction:column;gap:var(--space-4)} .orderbot-settings .obs-title{font-weight:600;font-size:var(--text-base);margin-bottom:var(--space-1)} .orderbot-settings label{font-size:var(--text-sm);font-weight:600;display:block} .orderbot-settings .hint{font-size:var(--text-xs);color:var(--text-secondary)} .orderbot-settings input[type=text],.orderbot-settings input[type=number]{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--border-strong);border-radius:var(--radius);font-size:var(--text-sm);background:var(--input-bg);color:var(--text)} .orderbot-set-row{margin-bottom:var(--space-2)} .orderbot-set-btn{padding:var(--space-4) var(--space-7);border:none;border-radius:var(--radius);background:var(--primary);color:var(--n-0)} .orderbot-set-btn.secondary{background:var(--soft);color:var(--text);border:1px solid var(--border-strong)} .orderbot-input{display:flex;gap:var(--space-4);padding:var(--space-5);border-top:1px solid var(--border);background:var(--card-bg);flex-shrink:0} .orderbot-input input{flex:1;padding:var(--space-4) var(--space-5);border:1px solid var(--border-strong);border-radius:var(--radius);font-size:var(--text-base);background:var(--input-bg);color:var(--text)} .orderbot-input input:focus{outline:none;border-color:var(--primary)} .orderbot-send{display:flex;align-items:center;justify-content:center;width:38px;border:none;border-radius:var(--radius);background:var(--primary);color:var(--n-0);flex-shrink:0} .orderbot-send:disabled{opacity:.5} @media (max-width:560px){ .orderbot-panel{width:calc(100vw - 32px)} } .form-label{display:block;font-size:var(--text-xs);font-weight:var(--font-weight-medium); color:var(--color-fg-muted,var(--text-secondary));margin-bottom:var(--space-2);line-height:var(--leading-snug)} .btn:focus-visible,.btn-sm:focus-visible,.tab-btn:focus-visible, .form-input:focus-visible,.form-control:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--color-accent,var(--info));outline-offset:1px;border-radius:var(--radius-sm)} .btn:disabled,.btn[disabled],.btn.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none} .form-input:disabled,.form-control:disabled,input:disabled,select:disabled,textarea:disabled{ opacity:.6;cursor:not-allowed;background:var(--color-bg-subtle,var(--bg-secondary))} .btn.is-loading{position:relative;color:transparent!important;pointer-events:none} .btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px; margin:-7px 0 0 -7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%; animation:ds-spin .6s linear infinite} @keyframes ds-spin{to{transform:rotate(360deg)}}