/* ASRON Station360 stylesheet — THE single source of truth. Edit this file directly; it's served as-is with no build step, since shared hosting for this project doesn't run npm/Vite. Do not reintroduce a resources/css/app.css that this gets generated from — two copies is how they drift out of sync. */ :root { --bg: #0a0a0a; --surface: #161616; --surface-2: #1e1e1e; --surface-3: #242424; --border: #282828; --accent: #c6f73f; --accent-dim: rgba(198, 247, 63, 0.12); --text: #ffffff; --muted: #8b8b8b; --muted-2: #6a6a6a; --green: #7be04f; --yellow: #f2c94c; --red: #ff5c5c; --radius: 16px; --radius-sm: 10px; } /* Light theme — activated via [data-theme="light"] on , toggled and persisted by resources/js/app.js. Dark above stays the default so a JS-disabled load still renders correctly. */ html[data-theme="light"] { --bg: #f4f4f2; --surface: #ffffff; --surface-2: #f2f2ef; --surface-3: #e8e8e4; --border: #e0e0dc; --accent: #8fc71f; --accent-dim: rgba(143, 199, 31, 0.12); --text: #16160f; --muted: #6b6b62; --muted-2: #96968b; --green: #2e9c1c; --yellow: #a6790a; --red: #d93636; } html[data-theme="light"] .btn-accent, html[data-theme="light"] .nav-item.active { color: #ffffff; } html[data-theme="light"] .nav-item.active .badge { background: rgba(255, 255, 255, 0.25); color: #ffffff; } /* ---------- Component styles ported from /prototypes ---------- */ *{box-sizing:border-box;margin:0;padding:0} body{ background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:13px; -webkit-font-smoothing:antialiased; } .shell{display:flex;flex-direction:column;min-height:100vh;padding:16px;gap:14px} /* ---------- Top nav ---------- */ .topnav{ background:var(--surface);border-radius:var(--radius); padding:11px 16px;display:flex;align-items:center;gap:20px; } .logo{display:flex;align-items:center;gap:9px;flex-shrink:0} .logo-mark{ width:26px;height:26px;border-radius:7px;background:var(--accent); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .logo-mark svg{width:15px;height:15px} .logo-text{font-size:14px;font-weight:700;letter-spacing:-.2px;white-space:nowrap} .logo-text span{color:var(--accent)} .nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto} .nav-item{ display:flex;align-items:center;gap:7px;padding:8px 12px; border-radius:var(--radius-sm);color:var(--muted); text-decoration:none;font-size:12.5px;font-weight:500;white-space:nowrap; transition:background .15s,color .15s; } .nav-item:hover{background:var(--surface-2);color:var(--text)} .nav-item.active{background:var(--accent);color:#0A0A0A;font-weight:600} .nav-item svg{width:15px;height:15px;flex-shrink:0} .nav-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 4px} .badge{ background:var(--surface-3);color:var(--muted); font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px; } .nav-item.active .badge{background:rgba(0,0,0,.18);color:#0A0A0A} .badge.alert{background:rgba(255,92,92,.16);color:var(--red)} .profile{display:flex;align-items:center;gap:9px;flex-shrink:0} .avatar{ width:30px;height:30px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,#3A4A2A,#556B34); display:flex;align-items:center;justify-content:center; font-size:10.5px;font-weight:600;color:var(--accent); } .profile-name{font-size:11.5px;font-weight:600;line-height:1.25;text-align:left} .profile-role{font-size:10px;color:var(--muted);line-height:1.25;text-align:left} /* ---------- Main ---------- */ .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px} .topbar{display:flex;align-items:center;gap:14px;justify-content:space-between} .page-title{font-size:16px;font-weight:600;letter-spacing:-.2px;white-space:nowrap} .topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto} /* ---------- Nav "More" dropdown ---------- */ [x-cloak]{display:none!important} .nav-dropdown{position:relative} .nav-dropdown>.nav-item{background:none;border:none;font:inherit;cursor:pointer} .nav-dropdown>.nav-item svg:last-child{width:10px;height:10px;margin-left:1px} .dropdown-panel{ position:absolute;top:calc(100% + 6px);left:0;min-width:200px; background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm); padding:8px;box-shadow:0 12px 28px rgba(0,0,0,.35);z-index:40; max-height:calc(100vh - 90px);overflow-y:auto; } .dropdown-group-label{ font-size:9.5px;text-transform:uppercase;letter-spacing:.6px; color:var(--muted-2);font-weight:600;padding:7px 9px 4px; } .dropdown-item{ display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px; color:var(--text);text-decoration:none;font-size:12.5px;font-weight:500; } .dropdown-item:hover{background:var(--surface-3)} .dropdown-item svg{width:14px;height:14px;color:var(--muted);flex-shrink:0} /* Prototype-only role switcher — deliberately distinct from real nav */ .preview-switch{ display:flex;align-items:center;gap:8px;background:var(--surface-2); border:1px dashed var(--yellow);border-radius:20px;padding:6px 12px 6px 6px; color:var(--yellow);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer; white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.35); } .preview-switch svg{width:10px;height:10px;color:var(--yellow)} .preview-badge{ background:var(--yellow);color:#1a1400;font-size:9px;font-weight:800; letter-spacing:.4px;padding:2px 6px;border-radius:12px; } .role-switcher-wrap .dropdown-panel, .profile-dropdown-wrap .dropdown-panel, .station-actions-dropdown .dropdown-panel{left:auto;right:0} /* Theme toggle — sliding pill switch */ .theme-switch-row{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;background:none;border:none;cursor:pointer;font-family:inherit; padding:8px 9px;border-radius:8px; } .theme-switch-row:hover{background:var(--surface-3)} .theme-switch-label{font-size:11px;font-weight:600;color:var(--muted-2);transition:color .15s} .theme-switch-row .theme-switch-label-dark{color:var(--text)} .theme-switch-row.is-light .theme-switch-label-light{color:var(--text)} .theme-switch-row.is-light .theme-switch-label-dark{color:var(--muted-2)} .theme-switch-track{ position:relative;flex-shrink:0;width:40px;height:21px;border-radius:999px; background:#1E2761;transition:background-color .2s; } .theme-switch-row.is-light .theme-switch-track{background:#8FC7FF} .theme-switch-thumb{ position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%; background:#0A0A0A;display:flex;align-items:center;justify-content:center; transition:left .2s,background-color .2s;box-shadow:0 1px 3px rgba(0,0,0,.4); } .theme-switch-row.is-light .theme-switch-thumb{left:21px;background:#FFFFFF} /* Floating "Preview as" button — fixed to the viewport, out of the nav's flex flow entirely so it never competes with real nav items for width. */ .role-switcher-float{position:fixed;right:118px;bottom:14px;z-index:60} .role-switcher-panel{ position:absolute;bottom:calc(100% + 8px);top:auto;right:0;left:auto; max-height:calc(100vh - 90px);overflow-y:auto; } .btn-accent{ background:var(--accent);color:#0A0A0A;border:none;border-radius:var(--radius-sm); padding:9px 16px;font-size:12px;font-weight:600;cursor:pointer; display:flex;align-items:center;gap:7px;font-family:inherit;white-space:nowrap; } .btn-accent svg{width:14px;height:14px} .icon-btn{ width:34px;height:34px;border-radius:50%;background:var(--surface); border:1px solid var(--border);display:flex;align-items:center; justify-content:center;cursor:pointer;color:var(--muted);position:relative; } .icon-btn svg{width:15px;height:15px} .icon-btn .dot{ position:absolute;top:7px;right:8px;width:6px;height:6px; border-radius:50%;background:var(--red);border:1.5px solid var(--surface); } /* ---------- Grid & cards ---------- */ .grid{display:grid;gap:14px} .g4{grid-template-columns:repeat(4,1fr)} .g-main{grid-template-columns:1.55fr 1fr} .g-bottom{grid-template-columns:1.35fr .95fr .9fr} @media(max-width:1400px){.g-bottom{grid-template-columns:1fr 1fr}.g-bottom>:last-child{grid-column:span 2}} @media(max-width:1400px){.g-bottom-2{grid-template-columns:1fr}.g-bottom-2>*{grid-column:span 1}} @media(max-width:1150px){.g4{grid-template-columns:repeat(2,1fr)}.g-main{grid-template-columns:1fr}} .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:16px;min-width:0; } .card-head{display:flex;align-items:center;gap:8px;margin-bottom:14px} .card-title{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px} .card-title svg{width:14px;height:14px;color:var(--muted)} .selector{ margin-left:auto;background:var(--surface-2);border:1px solid var(--border); color:var(--muted);font-size:10.5px;padding:4px 9px;border-radius:14px; display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap; } .selector svg{width:9px;height:9px} /* KPI card */ .kpi-value{font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1.1} .kpi-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .delta{font-size:11px;font-weight:600;display:flex;align-items:center;gap:3px} .delta.up{color:var(--green)} .delta.down{color:var(--red)} .kpi-sub{font-size:10.5px;color:var(--muted);margin-top:5px} .kpi-sub b{color:var(--accent);font-weight:600} .spark{margin-top:12px;height:38px;width:100%} .pill{ display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600; padding:3px 9px;border-radius:20px; } .pill.ok{background:rgba(123,224,79,.13);color:var(--green)} .pill.warn{background:rgba(242,201,76,.13);color:var(--yellow)} .pill.bad{background:rgba(255,92,92,.13);color:var(--red)} .pill-row{display:flex;align-items:center;gap:8px;margin-top:11px} /* progress bar */ .bar{height:5px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:10px} .bar i{display:block;height:100%;border-radius:4px;background:var(--accent)} /* sub-tiles inside chart card */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px} .tile{background:var(--surface-2);border-radius:var(--radius-sm);padding:11px} .tile-label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:6px} .tile-label svg{width:11px;height:11px} .tile-value{font-size:15px;font-weight:700;letter-spacing:-.3px} .tile-delta{font-size:9.5px;margin-top:3px} /* table */ table{width:100%;border-collapse:collapse} th{ text-align:left;font-size:10px;color:var(--muted-2);font-weight:600; padding:0 0 9px;text-transform:none; } td{padding:9px 0;font-size:11.5px;border-top:1px solid var(--border)} tbody tr:hover{background:var(--surface-2)} tbody tr.hl{background:var(--accent-dim)} tbody tr.hl td:first-child{border-left:2px solid var(--accent);padding-left:8px} .status{display:flex;align-items:center;gap:6px;font-size:11px} .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .dot.g{background:var(--green)} .dot.y{background:var(--yellow)} .dot.r{background:var(--red)} .num{font-variant-numeric:tabular-nums} .mut{color:var(--muted)} tfoot td{border-top:2px solid var(--border);font-weight:700;padding:10px 0} tfoot tr:hover{background:transparent} /* rank list */ .rank{ width:17px;height:17px;border-radius:5px;background:var(--surface-3); display:inline-flex;align-items:center;justify-content:center; font-size:9.5px;font-weight:700;color:var(--muted); } tr.hl .rank{background:var(--accent);color:#0A0A0A} .minibar{height:5px;border-radius:3px;background:var(--surface-3);width:100%;min-width:52px;overflow:hidden} .minibar i{display:block;height:100%;border-radius:3px;background:var(--accent)} /* donut */ .donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .donut{position:relative;width:132px;height:132px;flex-shrink:0} .donut-center{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center; } .donut-pct{font-size:22px;font-weight:700;letter-spacing:-.5px} .donut-label{font-size:9.5px;color:var(--muted);margin-top:1px} .legend{display:flex;flex-direction:column;gap:9px;font-size:11px;flex:1;min-width:110px} .legend-row{display:flex;align-items:center;gap:8px} .legend-key{width:9px;height:9px;border-radius:3px;flex-shrink:0} .legend-val{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums} /* alerts */ .alert-item{ display:flex;gap:10px;padding:10px;border-radius:var(--radius-sm); background:var(--surface-2);margin-bottom:8px;align-items:flex-start; } .alert-ico{ width:26px;height:26px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .alert-ico svg{width:13px;height:13px} .alert-ico.r{background:rgba(255,92,92,.14);color:var(--red)} .alert-ico.y{background:rgba(242,201,76,.14);color:var(--yellow)} .alert-txt{font-size:11.5px;font-weight:500;line-height:1.4} .alert-meta{font-size:10px;color:var(--muted);margin-top:3px} .foot-row{ display:flex;gap:16px;padding-top:12px;margin-top:12px; border-top:1px solid var(--border);font-size:10.5px;color:var(--muted);flex-wrap:wrap; } .foot-row b{color:var(--text);font-weight:600} .legend-inline{display:flex;gap:14px;font-size:10.5px;color:var(--muted);margin-top:10px} .legend-inline span{display:flex;align-items:center;gap:6px} .demo-tag{ position:fixed;bottom:14px;right:14px;background:var(--surface-2); border:1px solid var(--border);color:var(--muted);font-size:10px; padding:6px 12px;border-radius:20px;z-index:50; } /* ---------- Forms, tables, upload (from prototypes/assets/forms.css) ---------- */ /* ---------- Filter bar ---------- */ .filterbar{ display:flex;align-items:center;gap:9px;flex-wrap:wrap; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:12px 14px; } .filter-label{font-size:10px;color:var(--muted-2);font-weight:600;margin-right:2px} .select{ background:var(--surface-2);border:1px solid var(--border);color:var(--text); font-size:12px;padding:7px 11px;border-radius:9px;font-family:inherit; display:flex;align-items:center;gap:8px;cursor:pointer; } .select svg{width:10px;height:10px;color:var(--muted);flex-shrink:0} .select.active{border-color:var(--accent);color:var(--accent)} .chip{ background:var(--accent-dim);color:var(--accent);border:1px solid rgba(198,247,63,.3); font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:16px; display:inline-flex;align-items:center;gap:6px; } .chip svg{width:9px;height:9px;cursor:pointer} .btn-ghost{ background:var(--surface-2);border:1px solid var(--border);color:var(--muted); font-size:11.5px;padding:7px 13px;border-radius:9px;cursor:pointer; font-family:inherit;display:inline-flex;align-items:center;gap:7px; } .btn-ghost:hover{color:var(--text);border-color:#3A3A3A} .btn-ghost svg{width:13px;height:13px} /* ---------- Form ---------- */ .form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} @media(max-width:1000px){.form-grid{grid-template-columns:repeat(2,1fr)}} .field{display:flex;flex-direction:column;gap:6px} .field.span2{grid-column:span 2} .field label{font-size:11px;color:var(--muted);font-weight:500} .field label .req{color:var(--accent)} select.input{ appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:11px; padding-right:34px; } .input{ background:var(--surface-2);border:1px solid var(--border);color:var(--text); font-size:13px;padding:9px 12px;border-radius:9px;font-family:inherit; outline:none;width:100%;transition:border-color .15s; } .input:focus{border-color:var(--accent)} .input::placeholder{color:var(--muted-2)} .input.readonly{background:var(--surface-3);color:var(--muted);cursor:not-allowed} .input.err{border-color:var(--red)} .input-group{display:flex;align-items:center;gap:0} .input-group .input{border-radius:9px 0 0 9px} .suffix{ background:var(--surface-3);border:1px solid var(--border);border-left:none; border-radius:0 9px 9px 0;padding:9px 11px;font-size:11.5px;color:var(--muted); white-space:nowrap; } .hint{font-size:10px;color:var(--muted-2)} .hint.err{color:var(--red)} .hint.ok{color:var(--green)} .hint.warn{color:var(--yellow)} /* ---------- Editable table ---------- */ .tbl-form td{padding:7px 8px;vertical-align:middle} .tbl-form th{padding:0 8px 9px} .tbl-form td:first-child,.tbl-form th:first-child{padding-left:0} .tbl-form .input{padding:7px 10px;font-size:12.5px} .tbl-form tbody tr:hover{background:transparent} .grp-row td{ background:var(--surface-2);font-size:10.5px;font-weight:600; color:var(--muted);padding:7px 8px;border-top:1px solid var(--border); } .calc{ font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px; } .calc.pos{color:var(--accent)} .calc.neg{color:var(--red)} /* ---------- Upload ---------- */ .drop{ border:1.5px dashed #333;border-radius:var(--radius-sm); padding:26px 18px;text-align:center;background:var(--surface-2); transition:border-color .15s; } .drop:hover{border-color:var(--accent)} .drop-ico{ width:38px;height:38px;border-radius:11px;background:var(--surface-3); display:flex;align-items:center;justify-content:center;margin:0 auto 11px; color:var(--accent); } .drop-ico svg{width:18px;height:18px} .drop-title{font-size:12.5px;font-weight:600;margin-bottom:4px} .drop-sub{font-size:10.5px;color:var(--muted)} .file-row{ display:flex;align-items:center;gap:11px;background:var(--surface-2); border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px; } .file-ico{ width:30px;height:30px;border-radius:8px;background:rgba(198,247,63,.13); color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0; } .file-ico svg{width:15px;height:15px} .file-name{font-size:12px;font-weight:600} .file-meta{font-size:10px;color:var(--muted);margin-top:2px} /* validation summary */ .valid-box{ border-radius:var(--radius-sm);padding:12px 14px;font-size:11.5px; display:flex;gap:10px;align-items:flex-start; } .valid-box.ok{background:rgba(123,224,79,.09);border:1px solid rgba(123,224,79,.25)} .valid-box.err{background:rgba(255,92,92,.08);border:1px solid rgba(255,92,92,.25)} .valid-box svg{width:15px;height:15px;flex-shrink:0;margin-top:1px} .valid-title{font-weight:600;margin-bottom:3px} .err-list{margin:7px 0 0;padding-left:16px;color:var(--muted);line-height:1.7} .err-list b{color:var(--red);font-weight:600} .err-list code{ background:var(--surface-3);padding:1px 5px;border-radius:4px; font-size:10.5px;color:var(--text); } /* stepper */ .steps{display:flex;align-items:center;gap:0;margin-bottom:18px;flex-wrap:wrap} .step{ display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted-2); background:none;border:none;padding:4px 2px;font-family:inherit;cursor:pointer; border-radius:8px; } .step:hover{color:var(--text)} .step:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .step-num{ width:22px;height:22px;border-radius:50%;background:var(--surface-3); display:flex;align-items:center;justify-content:center; font-size:10.5px;font-weight:700;flex-shrink:0; } .step.done{color:var(--muted)} .step.done .step-num{background:rgba(123,224,79,.16);color:var(--green)} .step.now{color:var(--text);font-weight:600} .step.now .step-num{background:var(--accent);color:#0A0A0A} .step-line{width:34px;height:1px;background:var(--border);margin:0 11px} .actions{ display:flex;gap:9px;justify-content:flex-end;padding-top:15px; margin-top:16px;border-top:1px solid var(--border);flex-wrap:wrap; } .section-head{ font-size:11px;font-weight:600;color:var(--muted); text-transform:uppercase;letter-spacing:.5px; margin:20px 0 11px;padding-bottom:8px;border-bottom:1px solid var(--border); } .section-head:first-child{margin-top:0} .banner{ display:flex;align-items:center;gap:11px;padding:11px 14px; border-radius:var(--radius-sm);font-size:11.5px; background:rgba(242,201,76,.09);border:1px solid rgba(242,201,76,.25); } .banner svg{width:15px;height:15px;color:var(--yellow);flex-shrink:0} .banner b{color:var(--yellow)} /* ---------- Global loading indicator ---------- */ /* Indeterminate sweep bar, shown via wire:loading.delay so it only appears once a request has actually taken a moment (avoids flashing on fast round-trips) — addresses clicks otherwise feeling "frozen" with zero feedback while Livewire processes the request. */ .loading-bar{ position:fixed;top:0;left:0;right:0;height:3px;z-index:300; overflow:hidden;opacity:0;pointer-events:none;transition:opacity .15s; } .loading-bar.active{opacity:1} .loading-bar.active::before{ content:'';position:absolute;top:0;left:-30%;width:30%;height:100%; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:loading-sweep 1s ease-in-out infinite; } @keyframes loading-sweep{ 0%{left:-30%} 100%{left:100%} } /* ---------- Modal ---------- */ .modal-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100; display:flex;align-items:center;justify-content:center;padding:20px; } .modal{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); width:100%;max-width:480px;max-height:90vh;overflow-y:auto; padding:20px; } .modal-head{ display:flex;align-items:center;justify-content:space-between; margin-bottom:16px; } .modal-title{font-size:14px;font-weight:600} .modal-close{ background:none;border:none;color:var(--muted);cursor:pointer; width:28px;height:28px;border-radius:var(--radius-sm); display:flex;align-items:center;justify-content:center; } .modal-close:hover{color:var(--text);background:var(--surface-2)} .modal-close svg{width:16px;height:16px} .modal .form-grid{grid-template-columns:1fr 1fr} /* ---------- Row actions (edit/delete icon buttons) ---------- */ .row-actions{display:flex;gap:6px;justify-content:flex-end} .icon-action{ width:28px;height:28px;border-radius:var(--radius-sm);background:var(--surface-2); border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center; color:var(--muted);cursor:pointer;flex-shrink:0; } .icon-action svg{width:13px;height:13px} .icon-action:hover{color:var(--text);border-color:#3A3A3A} .icon-action.danger:hover{color:var(--red);border-color:rgba(255,92,92,.4)} /* ---------- Table search/filter bar ---------- */ .table-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap} .search-input{position:relative;flex:1;min-width:180px;max-width:280px} .search-input svg{ position:absolute;left:11px;top:50%;transform:translateY(-50%); width:13px;height:13px;color:var(--muted);pointer-events:none; } .search-input input{padding-left:32px} /* ---------- Roster grid ---------- */ .roster-table th, .roster-table td{text-align:center} .roster-table th:first-child, .roster-table td:first-child{text-align:left} .shift-toggle{display:flex;gap:3px;justify-content:center} .shift-toggle button{ width:20px;height:20px;border-radius:5px;font-size:9px;font-weight:700; border:1px solid var(--border);background:var(--surface-3);color:var(--muted-2); cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center; } .shift-toggle button.active{background:var(--accent);color:#0A0A0A;border-color:var(--accent)} .shift-toggle.double button.active{background:var(--yellow);border-color:var(--yellow)}