:root{--bg:#08111d;--sidebar:#0b1624;--surface:#101e2c;--surface2:#132332;--surface3:#192b3c;--border:#243749;--border-light:#2c4051;--text:#e9f4fa;--muted:#8297aa;--dim:#5b7487;--teal:#3ee0c4;--teal-d:#123f43;--blue:#67acfa;--amber:#ffbd71;--red:#ff7e86;--radius:17px;--shadow:0 14px 50px #0002}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;font-size:13px;line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--teal)}.icon-defs{position:absolute;left:-9999px;width:0;height:0;overflow:hidden}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}::selection{background:#4ce2c67a;color:white}
.app-shell{min-height:100vh;display:flex}.sidebar{width:252px;flex:0 0 252px;background:linear-gradient(180deg,#0d1928 0%,#0a1422 100%);border-right:1px solid #233546;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:25px 14px 17px;z-index:30}.brand{display:flex;align-items:center;gap:11px;padding:0 11px 22px;border-bottom:1px solid #233648}.brand-icon{height:39px;width:39px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;background:linear-gradient(135deg,#193f46,#0d4646);border:1px solid #2f716f;border-radius:11px;color:var(--teal);font-weight:900;font-size:26px;letter-spacing:-4px}.brand-icon small{font-size:9px;letter-spacing:-1px;align-self:flex-end;margin:0 0 9px 0}.brand strong{font-size:16px;white-space:nowrap;letter-spacing:.15px}.brand em{font-style:normal;color:var(--teal)}.brand>div:last-child>small{display:block;font-size:8px;letter-spacing:2.1px;color:#738c9e;margin-top:2px;white-space:nowrap}.nav-hint{padding:23px 14px 12px;letter-spacing:1.7px;color:#627e90;font-size:9px;font-weight:800}.nav-link{width:100%;padding:12px 13px;border-radius:10px;border:1px solid transparent;color:#9ab0c2;background:transparent;display:flex;gap:12px;align-items:center;text-align:left;font-weight:600;margin-bottom:3px;transition:.15s}.nav-link svg{width:18px;height:18px}.nav-link:hover{background:#172837;color:#e5f4f8}.nav-link.active{background:#16444380;border-color:#24645f77;color:var(--teal);box-shadow:inset 3px 0 0 var(--teal)}.nav-counter{margin-left:auto;font-style:normal;padding:0px 7px;background:#213445;border-radius:6px;color:#93b0c1;font-size:11px}.nav-separator{height:1px;background:#25384a;margin:16px 10px}.side-spacer{flex:1}.sidebar-help{padding:17px 15px;background:linear-gradient(145deg,#152f3c,#102331);border:1px solid #294959;border-radius:13px;margin-bottom:14px}.sidebar-help-title{font-size:11px;font-weight:800;letter-spacing:.6px}.sidebar-help p{color:#93abbb;font-size:11px;line-height:1.6;margin:9px 0}.small-muted{font-size:10px;color:var(--dim)}.pulse{width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block;vertical-align:middle;margin-left:3px}.side-logout{color:#8aa6b8;background:transparent;border:0;display:flex;align-items:center;gap:12px;padding:10px 14px;text-align:left;width:100%;border-radius:9px}.side-logout:hover{background:#1a2938;color:#fff}
.main-wrap{flex:1;min-width:0}.topbar{height:70px;border-bottom:1px solid #203344;background:#0a1523ef;display:flex;align-items:center;justify-content:space-between;padding:0 38px;position:sticky;top:0;z-index:20;backdrop-filter:blur(15px)}.topbar-left,.topbar-right{display:flex;align-items:center;gap:16px}.topbar-left{color:#c2d1db;font-size:12px}.breadcrumb{color:#638095;font-size:10px;letter-spacing:1.4px;font-weight:800}.breadcrumb-divider{color:#476073}.topbar-right{gap:20px}.clock-label{font-size:11px;color:#95afc0}.status-badge{border:1px solid #42696b;background:#14383d;color:var(--teal);padding:5px 11px;border-radius:20px;font-size:9px;letter-spacing:.7px;font-weight:800;display:flex;align-items:center;gap:7px;white-space:nowrap}.status-badge i{background:currentColor;width:6px;height:6px;border-radius:50%}.status-badge.status-offline{color:#9baebc;background:#1d2b38;border-color:#334b5d}.status-badge.status-error{color:var(--red);background:#40242f;border-color:#6a3846}.status-badge.status-demo{color:var(--amber);background:#422e22;border-color:#755233}.user-avatar{height:31px;width:31px;border-radius:50%;background:#254e56;border:1px solid #427d81;display:grid;place-items:center;color:#c8fff1;font-weight:800;font-size:12px}.icon-btn{background:none;color:#c1d6e3;border:0;padding:6px;display:grid;place-items:center}.mobile-menu{display:none}
.main-content{padding:33px 38px 16px;max-width:1800px;margin:auto}.demo-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(90deg,#352816,#24301f);border:1px solid #685334;padding:11px 17px;border-radius:10px;color:#f6d8a6;margin-bottom:24px;font-size:12px}.demo-banner strong{background:#805827;color:#fff5dd;letter-spacing:.7px;font-size:9px;padding:5px 9px;border-radius:5px;white-space:nowrap}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:29px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--teal);font-weight:800;display:flex;align-items:center;gap:9px}.eyebrow-line{display:inline-block;background:var(--teal);height:1px;width:19px}.dot-sep{color:#3e6374}.page-heading h1{margin:9px 0 5px;font-size:clamp(23px,2vw,30px);font-weight:800;letter-spacing:-.9px}.title-accent{color:var(--teal)}.page-heading p{margin:0;color:var(--muted);font-size:12px}.heading-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.control-inline{background:#142535;border:1px solid var(--border-light);border-radius:9px;display:flex;align-items:center;padding:0 11px;gap:8px;height:38px;font-size:11px;color:#7794a7;white-space:nowrap}.control-inline input,.control-inline select{appearance:auto;border:0;outline:0;background:transparent;color:#e9f4f9;min-width:120px;font-size:11px}.control-inline input::-webkit-calendar-picker-indicator{filter:invert(.8)}.control-inline select option{background:#183041}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:9px;border:1px solid var(--border-light);background:#152739;color:#c5d6e3;font-weight:700;font-size:11px;white-space:nowrap;transition:.14s}.btn:hover:not(:disabled){filter:brightness(1.12)}.btn svg{width:15px;height:15px}.btn-ghost{background:#152537;border-color:#293f52}.btn-accent{background:var(--teal);color:#062824;border-color:var(--teal);box-shadow:0 5px 16px #1fd3b628}.btn-outline{background:transparent;border-color:#446071;color:#c9e0ea}.btn-danger{color:#ff9e9f;background:#4b252b;border-color:#713943}.btn-sm{height:30px;padding:0 10px;font-size:10px}.btn-full{width:100%;height:43px}.btn-group{display:flex;gap:8px;flex-wrap:wrap}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px;flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.toolbar .section-title{margin:0}.text-input,.select-input,.date-input{height:38px;padding:0 12px;border-radius:9px;border:1px solid #2c4557;background:#122333;color:#e4f3fa;min-width:130px;outline:none}.text-input:focus,.select-input:focus,.date-input:focus,textarea:focus{border-color:#3fd8bb}.text-input::placeholder{color:#688195}.search-box{position:relative}.search-box svg{position:absolute;width:15px;height:15px;top:12px;left:11px;color:#7693a7}.search-box input{padding-left:33px;min-width:235px}.section-title{font-size:15px;font-weight:800;letter-spacing:-.15px}.section-subtitle{font-size:11px;color:var(--muted);margin-top:4px}.card{border-radius:var(--radius);background:linear-gradient(155deg,#142434 0%,#101e2c 100%);border:1px solid #263b4c;box-shadow:var(--shadow);min-width:0}.panel{padding:21px 22px}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:13px;margin-bottom:21px}.panel-header h3{margin:0;font-size:15px;letter-spacing:-.1px}.panel-header p{margin:4px 0 0;color:var(--muted);font-size:11px}.panel-icon{padding:7px;background:#1e3646;color:#7db8cb;border-radius:8px}.panel-icon svg{width:17px;height:17px}.panel-hint{font-size:10px;color:#7e9cac}.link-button{padding:0;border:0;background:none;color:var(--teal);font-weight:800;font-size:10px;white-space:nowrap}.link-button:hover{text-decoration:underline}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:19px}.kpi-card{padding:19px 20px 15px;position:relative;overflow:hidden;min-height:143px}.kpi-card:before{content:"";position:absolute;right:-40px;top:-54px;width:155px;height:155px;background:radial-gradient(circle,#3de0c510,transparent 70%);pointer-events:none}.kpi-header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#91aabc;font-size:11px;font-weight:600}.kpi-symbol{height:29px;width:29px;border:1px solid #345463;background:#183646;color:var(--teal);border-radius:9px;display:grid;place-items:center}.kpi-symbol svg{width:16px;height:16px}.kpi-card strong{display:block;font-size:30px;letter-spacing:-1.1px;line-height:1.25;margin:12px 0 4px;font-weight:800}.kpi-unit{font-size:12px;color:#819aad;font-weight:600;letter-spacing:0}.kpi-foot{display:flex;align-items:center;gap:7px;font-size:10px;color:#87a1b3}.kpi-foot .positive{color:var(--teal)}.kpi-foot .attention{color:var(--amber)}.kpi-decoration{height:3px;width:45px;background:var(--teal);border-radius:5px;position:absolute;bottom:0;left:22px}.kpi-card.blue .kpi-symbol{color:var(--blue);background:#233753}.kpi-card.blue .kpi-decoration{background:var(--blue)}.kpi-card.amber .kpi-symbol{color:var(--amber);background:#433527}.kpi-card.amber .kpi-decoration{background:var(--amber)}.kpi-card.red .kpi-symbol{color:var(--red);background:#443040}.kpi-card.red .kpi-decoration{background:var(--red)}.kpi-card strong .smaller{font-size:22px}
.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:17px;margin-bottom:18px}.content-grid.equal{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-wrap{min-height:249px;position:relative;display:flex;align-items:center}.chart-wrap svg{width:100%;height:auto;min-height:215px;max-height:270px;overflow:visible}.chart-wrap svg text{font-family:inherit;stroke:none}.chart-legend{display:flex;gap:20px;align-items:center;font-size:10px;color:#91a8b8}.legend-dot{display:inline-block;height:7px;width:7px;border-radius:2px;margin-right:6px}.chart-legend .stock-line{background:var(--teal)}.chart-legend .out-bar{background:var(--blue)}.chart-legend .plan-bar{background:#415f77}.centered-note{color:#7992a3;padding:40px 12px;text-align:center;font-size:12px;width:100%}.vessel-row{padding:12px 0;border-bottom:1px solid #273c4c;display:flex;align-items:center;justify-content:space-between;gap:12px}.vessel-row:last-child{border-bottom:0;padding-bottom:0}.vessel-emblem{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#1d3a49;color:var(--teal);flex-shrink:0}.vessel-emblem svg{width:17px;height:17px}.vessel-info{min-width:0;flex:1}.vessel-info strong{display:block;font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vessel-info span{color:#819bad;font-size:10px}.vessel-extra{text-align:right;min-width:75px}.vessel-extra strong{display:block;font-size:11px}.vessel-extra small{color:#849cac;font-size:9px}.progress{width:100%;height:6px;overflow:hidden;border-radius:6px;background:#243b4b;margin-top:8px}.progress span{display:block;background:linear-gradient(90deg,#19b99d,#52e0bd);height:100%;border-radius:6px;max-width:100%;transition:width .2s}.progress.blue span{background:linear-gradient(90deg,#3d83d4,#7dbaff)}.progress.amber span{background:linear-gradient(90deg,#bd813f,#f1bb67)}.mini-label{font-size:10px;color:#88a0b0}.status-chip{display:inline-flex;align-items:center;gap:6px;background:#163d3c;color:#54dbbe;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;white-space:nowrap}.status-chip:before{content:"";height:5px;width:5px;border-radius:50%;background:currentColor}.status-chip.waiting{color:#f3c17c;background:#46392b}.status-chip.done{color:#98b6c8;background:#263d4d}.status-chip.maintenance,.status-chip.hold{color:#ff979e;background:#49303a}.stat-stack{display:flex;flex-direction:column;gap:15px}.stat-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.stat-row strong{font-size:12px}.stat-row span{font-size:11px;color:#90a7b9}.horizontal-bars{display:flex;flex-direction:column;gap:14px}.horizontal-bars .progress{margin-top:6px;height:7px}.fleet-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:20px}.fleet-stat{border:1px solid #284354;background:#152938;padding:11px;border-radius:9px}.fleet-stat strong{display:block;font-size:23px;line-height:1.2}.fleet-stat span{color:#8aa3b4;font-size:10px}.fleet-stat.teal strong{color:var(--teal)}.fleet-stat.amber strong{color:var(--amber)}.fleet-stat.red strong{color:var(--red)}.tag{font-size:10px;padding:3px 7px;background:#1e3645;border:1px solid #2d485a;border-radius:6px;color:#b0cddd;white-space:nowrap}.flag{border-radius:8px;background:#3c3222;color:var(--amber);font-size:10px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px}.muted{color:var(--muted)}.money-positive{color:var(--teal);font-weight:700}.money-negative{color:var(--red);font-weight:700}.tiny{font-size:10px}
.table-card{overflow:hidden}.table-outer{overflow:auto;max-width:100%}.data-table{border-collapse:collapse;width:100%;min-width:790px;font-size:11px}.data-table th{color:#8aa6b8;text-align:left;font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:800;padding:15px 13px;border-bottom:1px solid #304556;background:#162838;white-space:nowrap}.data-table td{padding:13px;border-bottom:1px solid #243748;color:#d7e6ef;vertical-align:middle}.data-table tbody tr:hover{background:#1a3040aa}.data-table tbody tr:last-child td{border-bottom:0}.data-table td strong{font-size:11px}.data-table .secondary{font-size:10px;color:#879cad;display:block;margin-top:3px}.td-actions{white-space:nowrap}.action-icon{border:1px solid #3b5363;color:#b9d3de;background:#1a2e3f;border-radius:6px;font-size:10px;padding:5px 8px;margin-left:4px}.action-icon:hover{color:white;border-color:#75b5c6}.action-icon.delete:hover{color:var(--red);border-color:var(--red)}.empty-state{padding:60px 24px;text-align:center;color:#839cab}.empty-state .empty-icon{font-size:27px;margin-bottom:9px}.empty-state strong{display:block;color:#d1e3ec;margin:8px 0}.empty-state p{max-width:390px;margin:5px auto 15px;font-size:11px}.summary-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 17px;border:1px solid #294354;background:#132736;border-radius:10px;margin-bottom:14px}.summary-strip strong{font-size:14px}.summary-strip .sep{width:1px;background:#405669;height:16px;margin:0 7px}.summary-strip .mini-label{font-size:11px}.table-footer{padding:12px 17px;border-top:1px solid #2c4051;color:#8da4b5;font-size:10px}.cards-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}.mini-card{padding:17px 18px}.mini-card .eyebrow{font-size:9px;letter-spacing:1.4px}.mini-card strong{display:block;font-size:24px;margin:7px 0 3px}.ship-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-bottom:18px}.ship-card{padding:18px 19px}.ship-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.ship-name{font-weight:800;font-size:14px;word-break:break-word}.ship-meta{font-size:11px;color:#8fa8bb;margin-top:5px}.ship-dates{border-top:1px solid #2b4353;margin-top:15px;padding-top:13px;display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.ship-dates span{font-size:10px;color:#7893a7}.ship-dates strong{display:block;color:#cfdeea;font-weight:700;font-size:11px;margin-top:2px}.ship-foot{margin-top:13px;display:flex;justify-content:space-between;align-items:center}.ship-foot .progress{width:70%;margin:0}.vehicle-matrix{display:flex;gap:8px;align-items:center;margin-bottom:13px}.vehicle-matrix .label{width:68px;color:#90aaba;font-size:11px}.vehicle-matrix .part{height:26px;border-radius:5px;display:grid;place-items:center;color:#061e20;font-weight:800;font-size:10px;min-width:2px}.vehicle-matrix .part.working{background:var(--teal)}.vehicle-matrix .part.waiting{background:var(--amber)}.vehicle-matrix .part.maintenance{background:var(--red)}.donut{height:142px;width:142px;border-radius:50%;position:relative;margin:8px auto 16px;display:grid;place-items:center}.donut:after{content:"";position:absolute;inset:19px;background:#122334;border-radius:50%}.donut>div{z-index:1;text-align:center}.donut strong{font-size:26px;display:block}.donut small{font-size:9px;color:#829aaa}.donut-legend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:#a4b8c8;font-size:10px}.donut-legend i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}.daily-table .data-table{min-width:400px}.daily-table th,.daily-table td{padding:10px 13px}.split-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;color:#8da7b8;font-size:10px}.notice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:#17313c;border:1px solid #2d5663;border-radius:11px;margin-bottom:18px;color:#bad7e2;font-size:11px}.notice strong{color:#dcf7f3}.notice.amber{background:#362c20;border-color:#6a4e32;color:#f4d4a7}.notice.red{background:#362229;border-color:#72434b;color:#f9c3cc}.notice svg{color:var(--teal)}
.import-box{display:grid;grid-template-columns:300px minmax(0,1fr);gap:17px;align-items:start}.import-box .panel{margin-bottom:0}.form-label{font-size:10px;color:#92adbe;font-weight:800;letter-spacing:.2px;display:block;margin-bottom:6px}.form-group{margin-bottom:15px}.form-group input,.form-group select,.form-group textarea{background:#112334;border:1px solid #314a5c;border-radius:8px;width:100%;padding:10px 12px;color:#f1f8fc;outline:none;font-size:12px}.form-group textarea{resize:vertical;min-height:150px;line-height:1.65}.form-group select option{background:#1d3344}.form-help{font-size:10px;color:#728fa2;margin-top:6px}.import-tip{background:#173543;border:1px solid #2c5667;border-radius:9px;color:#a7cbd9;padding:12px 13px;margin-bottom:15px;font-size:11px}.import-preview{max-height:520px;overflow:auto}.import-status{font-size:12px;color:#89a6b9;margin-top:12px}.import-status.error{color:var(--red)}.import-status.ok{color:var(--teal)}.preview-issues{color:var(--red);font-size:10px;max-width:220px;white-space:normal}.file-picker{position:relative;overflow:hidden}.file-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-value{font-size:12px;font-weight:700;color:#d5e8ef;word-break:break-all;padding:12px;background:#192c3d;border-radius:7px;margin:10px 0 15px}.settings-tip{font-size:11px;color:#87a3b6;line-height:1.7}.settings-step{padding:14px 0;border-bottom:1px solid #2b4050;display:flex;gap:12px}.settings-step:last-child{border-bottom:0}.settings-step b{width:25px;height:25px;border:1px solid #327267;background:#1c4948;border-radius:8px;display:grid;place-items:center;color:var(--teal);flex-shrink:0}.settings-step strong{display:block;font-size:12px}.settings-step p{margin:4px 0 0;color:#8da8ba;font-size:11px}.footer{display:flex;justify-content:space-between;gap:18px;color:#526f83;font-size:9px;letter-spacing:.7px;margin-top:25px;padding:16px 0 0;border-top:1px solid #1d3442}
.auth-overlay{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 25% 20%,#1e424c 0,#091523 45%,#06101d 100%);display:grid;place-items:center;padding:32px;overflow:auto}.auth-grid{width:min(1040px,100%);display:grid;grid-template-columns:1.15fr .85fr;gap:75px;align-items:center}.auth-copy .auth-mini{font-size:10px;letter-spacing:2px;color:var(--teal);font-weight:800;margin-bottom:25px}.auth-copy h2{font-size:clamp(30px,4vw,47px);line-height:1.16;letter-spacing:-1.5px;margin:0 0 21px;font-weight:900}.auth-copy h2 span{color:var(--teal)}.auth-copy p{font-size:14px;color:#9ab4c1;max-width:480px;line-height:1.8;margin-bottom:32px}.auth-feature{margin:15px 0;color:#bed2db;font-size:12px;display:flex;align-items:center;gap:16px}.auth-feature span{color:var(--teal);font-size:11px;font-weight:800;letter-spacing:2px}.auth-card{background:#132333ee;border:1px solid #3c5a69;border-radius:19px;padding:38px 34px;box-shadow:0 25px 80px #0005}.auth-card-logo{font-size:16px;font-weight:900;letter-spacing:2px;margin-bottom:26px}.auth-card-logo span{color:var(--teal)}.auth-card h3{font-size:22px;margin:0 0 6px}.auth-card>p{color:#849ead;font-size:11px;margin:0 0 24px}.auth-card form label{display:block;color:#adc3cf;font-size:11px;margin-bottom:18px;font-weight:700}.auth-card form input{display:block;margin-top:7px;width:100%;height:42px;background:#0b1b2a;border:1px solid #3b5364;border-radius:9px;padding:0 13px;color:#e4f5fa;outline:none}.auth-card form input:focus{border-color:var(--teal)}.auth-or{display:flex;justify-content:center;align-items:center;gap:12px;color:#5d7589;font-size:9px;letter-spacing:1px;margin:16px 0}.auth-or:before,.auth-or:after{content:"";height:1px;background:#304657;flex:1}.login-error{margin:-4px 0 12px;color:#ffb6bd;font-size:11px}.login-footnote{color:#607b90;font-size:10px;margin-top:14px;text-align:center}
.modal-backdrop{position:fixed;inset:0;background:#020a13c9;z-index:60;display:flex;justify-content:center;align-items:center;padding:18px;backdrop-filter:blur(4px)}.modal-card{width:min(710px,100%);max-height:min(93vh,900px);background:#142435;border:1px solid #3c5365;border-radius:16px;box-shadow:0 26px 90px #0008;display:flex;flex-direction:column}.modal-header{padding:21px 24px;border-bottom:1px solid #2c4354;display:flex;justify-content:space-between}.modal-header h2{font-size:20px;margin:6px 0 0}.modal-header .eyebrow{letter-spacing:1px}.modal-close{width:30px;height:30px;background:#263b4c;border:1px solid #3b5264;border-radius:7px;color:#bfd4dd;font-size:21px}.modal-body{padding:22px 24px 10px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:17px}.modal-body .wide{grid-column:1/-1}.modal-body label .required{color:var(--red)}.modal-actions{padding:15px 24px 20px;display:flex;justify-content:flex-end;gap:9px;border-top:1px solid #2c4354}.toast-holder{position:fixed;z-index:80;bottom:25px;right:25px;display:flex;gap:8px;flex-direction:column;max-width:min(360px,90vw)}.toast{background:#1a3d40;color:#d8fbf4;border:1px solid #3d756c;padding:12px 16px;border-radius:10px;box-shadow:0 8px 28px #0006;font-size:12px}.toast.error{background:#472b36;border-color:#884755;color:#ffd5dc}

.port-map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}.port-card{overflow:hidden}.berth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.berth-slot{border:1px solid #314a5c;background:linear-gradient(180deg,#132739,#102130);border-radius:14px;overflow:hidden}.berth-slot.occupied{border-color:#35605d;box-shadow:inset 0 0 0 1px #1f4d47}.berth-slot-top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #264252;font-size:11px;color:#94afbf}.berth-no{font-weight:800;color:#dff3f7}.berth-pct{font-weight:800;color:var(--teal)}.berth-scene{position:relative;height:96px;background:linear-gradient(180deg,#243748 0 38%,#0c2940 38% 100%);overflow:hidden}.berth-scene.empty{background:linear-gradient(180deg,#213544 0 38%,#123148 38% 100%)}.berth-quay{position:absolute;left:0;right:0;top:34px;height:10px;background:repeating-linear-gradient(90deg,#677d8d 0 18px,#738a99 18px 36px)}.berth-water{position:absolute;left:0;right:0;bottom:0;top:44px;background:linear-gradient(180deg,#0f3c60,#123755 48%,#0d2740 100%)}.ship-illustration{position:absolute;left:16px;right:16px;bottom:15px}.ship-title{display:inline-flex;max-width:100%;padding:3px 8px;border-radius:999px;background:#10202ef2;border:1px solid #2d5362;color:#cffbf1;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ship-body{position:relative;margin-top:8px;height:22px;background:linear-gradient(90deg,#42d3c0,#73b2ff);border-radius:6px 12px 12px 6px;box-shadow:0 6px 16px #08111d55}.ship-body:before{content:"";position:absolute;right:-18px;top:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid #73b2ff}.ship-cabin{position:absolute;left:12px;top:-11px;width:24px;height:12px;background:#dff8ff;border-radius:4px 4px 0 0}.ship-stack{position:absolute;left:42px;top:-9px;width:18px;height:10px;background:#24445b;border-radius:3px}.empty-ship{position:absolute;left:50%;bottom:23px;transform:translateX(-50%);padding:6px 10px;border:1px dashed #4d7084;border-radius:999px;color:#b0c7d6;background:#122639c9;font-size:10px}.berth-caption{padding:12px}.berth-caption strong{display:block;font-size:12px}.berth-caption span{display:block;color:#90aaba;font-size:11px;margin:3px 0 9px}.berth-caption small{display:block;color:#7390a4;font-size:10px;margin-top:9px;line-height:1.5}.port-queue{margin-top:13px;padding:12px;border:1px solid #2d4455;background:#112231;border-radius:12px}.port-queue.empty{color:#7f99ac;font-size:11px}.queue-title{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--amber);margin-bottom:8px}.queue-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px dashed #294052}.queue-row:first-of-type{border-top:0;padding-top:0}.queue-row strong{display:block;font-size:12px}.queue-row span{display:block;font-size:10px;color:#8ea8b9}.queue-row b{align-self:center;color:#e6f4f8;font-size:11px}.progress.idle{background:#182838}.progress.idle span{background:#304a5d}
@media(max-width:1300px){.main-content{padding:28px 26px 15px}.topbar{padding:0 26px}.sidebar{width:223px;flex-basis:223px}.brand>div:last-child>small{font-size:7px}.brand strong{font-size:14px}.kpi-card{padding:17px}.kpi-card strong{font-size:26px}.content-grid{grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr)}}
@media(max-width:1080px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading{align-items:flex-start;flex-direction:column}.heading-tools{justify-content:flex-start}.content-grid{grid-template-columns:1fr}.cards-row{grid-template-columns:repeat(3,minmax(0,1fr))}.sidebar{width:213px;flex-basis:213px}.import-box{grid-template-columns:1fr}}
@media(max-width:800px){.sidebar{position:fixed;transform:translateX(-100%);transition:transform .2s;box-shadow:5px 0 40px #0008}.sidebar.open{transform:translateX(0)}.mobile-menu{display:grid}.main-content{padding:23px 17px 14px}.topbar{height:62px;padding:0 18px}.topbar-right{gap:10px}.topbar-left{gap:8px}.clock-label{display:none}.kpi-grid{gap:10px}.kpi-card{min-height:120px}.kpi-card strong{font-size:24px}.content-grid.equal,.settings-grid{grid-template-columns:1fr}.auth-grid{gap:35px;grid-template-columns:1fr 1fr}.auth-copy h2{font-size:29px}}
@media(max-width:600px){.page-heading h1{font-size:24px}.page-heading p{font-size:11px}.topbar .breadcrumb{display:none}.topbar .breadcrumb-divider{display:none}.topbar-left{font-size:11px}.status-badge{font-size:8px;padding:5px 7px}.heading-tools{width:100%}.control-inline{flex:1}.control-inline input{min-width:93px;max-width:120px}.heading-tools .btn-accent{flex:1}.kpi-grid{grid-template-columns:1fr 1fr}.kpi-card{padding:14px 13px;min-height:117px}.kpi-card strong{font-size:22px}.kpi-card .kpi-header{font-size:10px}.kpi-foot{font-size:9px}.kpi-card .kpi-symbol{display:none}.panel{padding:17px 15px}.cards-row{grid-template-columns:1fr}.ship-groups{grid-template-columns:1fr}.auth-overlay{padding:17px}.auth-grid{grid-template-columns:1fr;gap:20px}.auth-copy{display:none}.auth-card{padding:28px 22px}.modal-body{grid-template-columns:1fr}.modal-body .wide{grid-column:auto}.footer{flex-direction:column;gap:5px}.search-box input{min-width:100%;width:100%}.search-box{width:100%}.toolbar{align-items:stretch}.toolbar-left{width:100%}.toolbar-right{width:100%}.toolbar-right .btn{flex:1}}
@media(max-width:600px){.port-map-grid,.berth-grid{grid-template-columns:1fr}.berth-scene{height:88px}.chart-wrap{overflow-x:auto;overscroll-behavior-x:contain}.chart-wrap svg{min-width:550px;max-width:none;height:216px}.chart-wrap::-webkit-scrollbar{height:5px}.chart-wrap::-webkit-scrollbar-thumb{background:#36596a;border-radius:5px}}

/* HRC COMMAND V2.2 - ảnh cảng thực tế + sơ đồ minh họa có tàu động */
.port-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.port-showcase{overflow:hidden;background:linear-gradient(150deg,#132736,#101c2b);border-color:#2d4759}
.port-showcase.featured{grid-column:1/-1}
.port-showcase-header{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 20px;border-bottom:1px solid #254356}
.port-showcase-header h3{font-size:16px;margin:0 0 4px;letter-spacing:-.3px}
.port-showcase-header p{margin:0;color:#799bad;font-size:10px}
.port-counters{display:flex;gap:7px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.port-counters span{font-size:10px;color:#d5dfe7;border:1px solid #345568;border-radius:999px;background:#1b3444;padding:5px 9px;white-space:nowrap}
.port-counters span.active{background:#124540;border-color:#2b7b71;color:#70f2d8}
.port-showcase-body{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;padding:15px}
.port-showcase.featured .port-showcase-body{grid-template-columns:minmax(0,1.16fr) minmax(285px,.84fr);gap:17px}
.port-hero{position:relative;overflow:hidden;border-radius:12px;border:1px solid #365368;background:radial-gradient(ellipse at 55% 35%,#234e66,#0c263a 60%,#091c2a);aspect-ratio:2.25;min-height:170px}
.port-hero.special{aspect-ratio:1.5;max-height:485px}
.port-hero.chulai{aspect-ratio:4.33;min-height:145px}
.port-hero img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.port-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#04162435,transparent 24%,transparent 72%,#071a2a44)}
.port-hero-tag{position:absolute;z-index:3;top:9px;left:9px;padding:5px 10px;font-size:10px;font-weight:800;background:#071b29c9;border:1px solid #689aac77;border-radius:7px;color:#e7f7ff;backdrop-filter:blur(7px)}
.port-image-zoom{position:absolute;z-index:5;right:10px;top:10px;padding:6px 10px;background:#062332d9;color:#b6f5e9;border:1px solid #2d7782;border-radius:7px;font-size:10px;font-weight:800}
.port-image-zoom:hover{background:#12525c}
.port-map-pins{position:absolute;inset:0;z-index:4;pointer-events:none}
.port-map-pin{position:absolute;display:flex;align-items:center;flex-direction:column;transform:translate(-50%,-50%);z-index:4;pointer-events:none;filter:drop-shadow(0 3px 6px #001b2ed9)}
.port-pin-dot{width:15px;height:15px;border-radius:50%;background:#37ead1;border:3px solid #f8fbfb;box-shadow:0 0 0 5px #00d5c355,0 0 16px #37ead1;display:inline-block}
.port-pin-text{padding:4px 6px;color:#e9fffb;background:#002b35eb;border:1px solid #6ce8d8;border-radius:5px;font-size:9px;line-height:1.2;font-weight:800;white-space:nowrap;margin-top:3px;max-width:140px;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #04111d}
.port-pin-text b{color:#61ffe1}
.port-photo-note{font-size:10px;color:#7292a8;line-height:1.6;margin-top:8px}
.port-photo-note strong{color:#a0bdc9}
.port-side-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:800;color:#95bbcd;padding:0 0 10px;border-bottom:1px solid #264353}
.port-active-list{display:grid;grid-template-columns:1fr;gap:9px;padding:12px 0}
.port-ship-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:8px;align-items:start;padding:12px;background:#182d3b;border:1px solid #2c5061;border-radius:11px}
.port-ship-info{min-width:0}.port-ship-name{display:block;font-size:12px;font-weight:800;color:#ebf9fd;word-break:break-word}
.port-ship-status{font-size:10px;color:#5bedd2;display:block;margin-top:3px}
.port-ship-numbers{text-align:right;white-space:nowrap}.port-ship-numbers strong{font-size:11px;display:block}.port-ship-numbers small{font-size:9px;color:#7895a6}
.port-entry-progress{grid-column:1/-1}.port-entry-progress .progress{margin:0;height:7px}
.port-no-ships,.port-no-berths{font-size:11px;color:#86a5b5;line-height:1.55;padding:14px 4px}
.port-data-warning{display:grid;gap:5px;color:#ffc281;background:#402b25;border:1px solid #80503b;font-size:11px;padding:10px 12px;border-radius:8px;margin-bottom:8px}
.port-showcase .port-queue{margin-top:0;padding:11px;border-color:#284557;background:#152735}
.port-showcase .port-queue.empty{padding:9px 0;border:0;background:transparent}
.port-berth-band{border-top:1px solid #2b4354;padding:12px 16px 16px}
.port-berth-band>strong{font-size:10px;letter-spacing:.7px;color:#8eacbf;text-transform:uppercase}
.port-berth-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.port-berth-chip{padding:5px 8px;background:#1c3040;border:1px solid #355365;border-radius:7px;font-size:10px;color:#a9bfc9}
.port-berth-chip b{margin-left:7px;font-weight:700;color:#6f8d9e}
.port-berth-chip.active{background:#103c3b;border-color:#349f88;color:#d6fff5}.port-berth-chip.active b{color:#69edcf}
.port-lightbox{position:fixed;z-index:95;inset:0;background:#020b12e8;display:grid;place-items:center;padding:28px 25px;backdrop-filter:blur(10px)}
.port-lightbox-card{position:relative;max-width:min(95vw,1350px);max-height:94vh;overflow:auto;border:1px solid #36687d;background:#091c2c;border-radius:15px;padding:18px;box-shadow:0 25px 90px #000a;width:100%}
.port-lightbox-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.port-lightbox-head strong{font-size:16px}.port-lightbox-head button{background:#213c4d;color:white;border:1px solid #52798b;padding:7px 11px;border-radius:8px}
.port-lightbox .port-hero{margin:auto;width:100%;max-width:1160px;max-height:none;min-height:unset}
.port-lightbox .port-hero.special{max-width:910px}.port-lightbox .port-hero.chulai{max-width:1160px}
.port-lightbox .port-image-zoom{display:none}
@media(max-width:1120px){.port-showcase-grid{grid-template-columns:1fr}.port-showcase.featured{grid-column:auto}.port-showcase.featured .port-showcase-body{grid-template-columns:minmax(0,1fr) minmax(245px,.72fr)} }
@media(max-width:800px){.port-showcase.featured .port-showcase-body{grid-template-columns:minmax(0,1fr)}.port-showcase.featured .port-hero.special{max-width:690px}.port-showcase-header{padding:15px}.port-showcase-body{padding:12px}}
@media(max-width:600px){.port-showcase-header{align-items:flex-start;flex-direction:column;gap:9px}.port-counters{justify-content:flex-start}.port-hero.special{min-height:unset}.port-hero.chulai{min-height:115px}.port-map-pin{transform:translate(-50%,-50%) scale(.8)}.port-pin-text{font-size:8px}.port-ship-numbers strong{font-size:10px}.port-lightbox{padding:8px}.port-lightbox-card{padding:8px}.port-lightbox .port-hero{min-height:unset}.port-lightbox-head strong{font-size:12px}}

/* V2.3: thư mục chọn cảng; sơ đồ chỉ hiển thị trong trang cảng được chọn. */
.port-directory-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 20px}.port-directory-intro h2,.port-detail-heading h2{font-size:22px;margin:8px 0 4px;letter-spacing:-.4px}.port-directory-intro p,.port-detail-heading p{max-width:720px;color:#95aebd;margin:3px 0;font-size:11px;line-height:1.6}.port-directory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:27px}.port-directory-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-height:234px;border:1px solid #305064;border-radius:16px;background:linear-gradient(160deg,#193449,#101f30 88%);padding:18px;box-shadow:0 9px 22px #0002;color:#effafa;transition:transform .15s,border-color .15s,box-shadow .15s}.port-directory-card:hover,.port-directory-card:focus-visible{transform:translateY(-3px);border-color:#43d9c3;box-shadow:0 13px 30px #0a262ddd;outline:none}.port-directory-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.port-directory-icon{width:39px;height:39px;display:grid;place-items:center;color:var(--teal);background:#173e49;border:1px solid #337675;border-radius:12px}.port-directory-icon svg{height:21px;width:21px}.port-directory-arrow{font-size:17px;color:#82abbe}.port-directory-name{font-size:17px;letter-spacing:-.2px}.port-directory-type{font-size:10px;color:#7da4b8;margin:3px 0 13px}.port-directory-stats{display:flex;gap:18px;border-top:1px solid #2b4859;padding-top:12px;font-size:11px;color:#a2b6c6}.port-directory-stats b{color:#65edcf;font-size:14px}.port-directory-stats span+span b{color:var(--amber)}.port-directory-progress{height:5px;border-radius:999px;background:#253b50;overflow:hidden;margin:12px 0}.port-directory-progress>span{display:block;height:100%;background:linear-gradient(90deg,#3de0c5,#61b4fc)}.port-directory-bottom{font-size:10px;color:#9cb9c7;display:flex;flex-direction:column;gap:7px;line-height:1.4;margin-top:auto;white-space:normal}.port-directory-bottom>span{font-size:11px;color:#50e7cf;font-weight:800}.port-directory-table-title{margin-top:12px}.port-inline-link{border:0;background:none;color:#6be4d2;font-size:11px;font-weight:800;padding:0;white-space:normal;text-align:left}.port-inline-link:hover{text-decoration:underline}.port-detail-nav{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:1px 0 20px}.port-detail-switch{display:flex;align-items:center;gap:10px;padding:6px 11px;border:1px solid #365565;background:#182d3b;border-radius:9px}.port-detail-switch label{font-size:11px;color:#8ca9ba}.port-detail-switch select{max-width:270px;min-width:164px;background:#182d3b;border:0;outline:none;color:#edf8fc;font-size:11px}.port-detail-nav>.btn:last-child{margin-left:auto}.port-detail-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.port-detail-live{color:#64e4c5;background:#14433e;border:1px solid #327667;padding:7px 12px;border-radius:99px;font-size:11px;font-weight:800;white-space:nowrap}.port-detail-throughput{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px 18px;background:#142d3d;border:1px solid #2d5063;border-radius:12px;padding:14px 18px;margin-bottom:18px}.port-detail-throughput>span{font-size:11px;color:#91b4c3}.port-detail-throughput strong{font-size:17px}.port-detail-throughput>.progress{grid-column:1/-1;margin:0}.port-detail-photo{margin-bottom:22px}.port-detail-photo>.port-showcase{width:100%}.port-empty-group{margin-bottom:18px}.port-detail-photo .port-hero{max-height:none}.port-detail-photo .port-showcase-body{grid-template-columns:minmax(0,1.5fr) minmax(290px,.7fr)}.port-detail-photo .port-hero.special{max-height:unset}.port-detail-photo .port-hero.chulai{min-height:unset}
@media(max-width:1080px){.port-detail-photo .port-showcase-body{grid-template-columns:1fr}.port-directory-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}@media(max-width:600px){.port-directory-intro,.port-detail-heading{align-items:flex-start;flex-direction:column}.port-directory-intro>.btn{width:100%}.port-directory-grid{grid-template-columns:1fr 1fr;gap:9px}.port-directory-card{padding:13px;min-height:223px}.port-directory-name{font-size:13px}.port-directory-stats{gap:8px;flex-wrap:wrap}.port-directory-type{font-size:9px}.port-detail-nav{display:grid;grid-template-columns:1fr}.port-detail-nav>.btn{width:100%;margin-left:0!important}.port-detail-switch{justify-content:space-between}.port-detail-throughput{grid-template-columns:1fr;gap:5px}.port-detail-throughput strong{font-size:17px}.port-detail-photo .port-showcase-body{grid-template-columns:1fr}}@media(max-width:385px){.port-directory-grid{grid-template-columns:1fr}}

.port-directory-table-title .search-box{min-width:235px}.port-directory-table-title .search-box input{width:100%;padding-left:31px}.port-search-icon{font-size:22px;line-height:20px;position:absolute;left:11px;top:8px;color:#8fa8b8;pointer-events:none}

.inventory-form-hint{grid-column:1/-1;margin:0 0 12px;padding:10px 13px;border:1px solid #29515b;border-radius:9px;background:#132c39;color:#b6d6e0;font-size:11px;line-height:1.65}

/* HRC v2.3.3 – biểu đồ mức độ lấp đầy theo sức chứa thực */
.occupancy-chart{display:flex;flex-direction:column;gap:13px;min-width:0}.occ-overview{display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:15px;padding:13px;border-radius:13px;border:1px solid #2b4658;background:radial-gradient(circle at 12% 50%,#20505566,transparent 62%),#102435}.occ-ring{width:105px;height:105px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from -90deg,var(--occ-tone) 0 var(--occ-pct),#2a3f51 var(--occ-pct) 100%);box-shadow:0 0 22px #3ee0c415;position:relative}.occ-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#142737;box-shadow:inset 0 0 15px #09111b}.occ-ring-core{position:relative;z-index:1;text-align:center}.occ-ring-core strong{font-size:20px;font-weight:900;letter-spacing:-.5px;line-height:1.1;color:#e8f5fb;display:block;font-variant-numeric:tabular-nums}.occ-ring-core small{font-size:9px;color:#9db4c4}.occ-kpis{display:grid;grid-template-columns:1fr;gap:9px}.occ-kpi{display:flex;justify-content:space-between;gap:8px;align-items:baseline;border-bottom:1px dashed #2b4a5c;padding-bottom:6px}.occ-kpi:last-child{border-bottom:0;padding-bottom:0}.occ-kpi span{font-size:10px;color:#a0b6c5;line-height:1.35}.occ-kpi strong{font-size:13px;color:#e0f3f9;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}.occ-kpi strong small{font-size:10px;font-weight:500;color:#a0b6c5}.occ-coverage{font-size:10px;line-height:1.55;color:#879faf}.occ-data-alert{display:block;color:#ffce92}.occ-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 1px}.occ-legend>span{display:flex;align-items:center;gap:5px;color:#96adbb;font-size:10px}.occ-dot{width:8px;height:8px;display:inline-block;border-radius:50%}.occ-dot.good{background:#3ee0c4}.occ-dot.warning{background:#ffbd71}.occ-dot.danger{background:#fa747e}.occ-list{display:flex;flex-direction:column;gap:10px}.occ-unit{position:relative;padding:9px 11px 8px;background:linear-gradient(135deg,#102738,#102132);border:1px solid #2b4558;border-radius:12px;transition:border-color .18s,transform .18s}.occ-unit:hover{border-color:#47819a;transform:translateY(-1px)}.occ-unit-heading{display:flex;gap:10px;justify-content:space-between;align-items:center}.occ-unit-heading>strong{font-size:11px;font-weight:800;color:#d7eef7;overflow-wrap:anywhere}.occ-percent{min-width:52px;text-align:right;font-size:13px;font-weight:900;letter-spacing:.1px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--teal)}.occ-unit.warning .occ-percent,.occ-unit.warning .occ-free{color:#ffbd71}.occ-unit.danger .occ-percent,.occ-unit.exceeded .occ-percent,.occ-unit.invalid .occ-percent,.occ-unit.exceeded .occ-free{color:#ff858c}.occ-unit.missing .occ-percent{color:#91a7ba}.occ-bar{position:relative;height:14px;border:1px solid #334e60;border-radius:999px;overflow:hidden;background:repeating-linear-gradient(90deg,#233d4d 0 8%,#1c3443 8% 10%);margin-top:8px;box-shadow:inset 0 2px 5px #0003}.occ-bar-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#128f99,#42e3c3);box-shadow:0 0 11px #30cdb866;transform-origin:left;animation:occ-grow .75s cubic-bezier(.19,1,.22,1) both}.occ-unit.warning .occ-bar-fill{background:linear-gradient(90deg,#c37a2c,#ffca6f);box-shadow:0 0 11px #ffad4d55}.occ-unit.danger .occ-bar-fill,.occ-unit.exceeded .occ-bar-fill{background:linear-gradient(90deg,#b54760,#fa747e);box-shadow:0 0 11px #ff707055}.occ-unit.exceeded .occ-bar-fill{background-image:repeating-linear-gradient(-45deg,#dc546a 0px,#dc546a 9px,#fc959a 9px,#fc959a 18px)}.occ-tick{position:absolute;top:0;bottom:0;width:1px;background:#e4f2f876;opacity:.75}.occ-tick.at70{left:70%}.occ-tick.at90{left:90%}.occ-unit-detail{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;margin-top:6px;color:#a2b9c7;font-size:10px;font-variant-numeric:tabular-nums}.occ-unit-detail b{font-weight:800;color:#d6eaf4}.occ-unit-detail .occ-free{text-align:right}.occ-status{font-size:9px;color:#6f91a4;margin-top:3px}.occ-unit.missing .occ-bar{background:repeating-linear-gradient(45deg,#334453,#334453 6px,#202f3d 6px,#202f3d 12px)}.occ-unit.invalid .occ-bar{border-color:#b4515b}.occ-more{font-size:10px;color:#7895a8;margin:0 0 3px;text-align:center}@keyframes occ-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){.occ-bar-fill{animation:none}.occ-unit{transition:none}}@media(max-width:1250px){.occ-overview{grid-template-columns:86px minmax(0,1fr);gap:10px;padding:10px}.occ-ring{width:86px;height:86px}.occ-ring-core strong{font-size:17px}.occ-kpi strong{font-size:12px}}@media(max-width:600px){.occ-overview{grid-template-columns:86px minmax(0,1fr)}.occ-kpi span{font-size:9px}.occ-kpi strong{font-size:11px}}