:root{
  --bg:#06111f;--bg2:#081725;--panel:#0b1b2d;--panel2:#0d2136;--panel3:#102a43;
  --line:#1d3550;--line2:#284763;--text:#eef7ff;--muted:#8fa9bf;--soft:#b8c9d8;
  --cyan:#57d6ff;--blue:#4a8dff;--teal:#3ce0c5;--green:#62e6a6;--yellow:#ffd166;--orange:#ff9f43;--red:#ff6b78;--purple:#b58cff;
  --shadow:0 18px 55px rgba(0,0,0,.26);--radius:18px;--radius-sm:12px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 85% 5%,rgba(40,127,255,.12),transparent 28%),radial-gradient(circle at 12% 85%,rgba(60,224,197,.08),transparent 30%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.danger-text{color:var(--red)!important}.good-text{color:var(--green)!important}.warn-text{color:var(--yellow)!important}
.bi{display:inline-flex;flex-direction:column;gap:1px;line-height:1.05}.bi b{font-size:inherit}.bi small{font-size:.68em;font-weight:650;color:var(--muted);letter-spacing:.01em}.bi.inline{display:inline}.bi.inline small{margin-left:5px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--cyan);font-weight:900}.subtle{font-size:12px;color:var(--muted)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);background:linear-gradient(125deg,#06111f 0%,#081a2b 56%,#082437 100%);position:relative;overflow:hidden}.login-shell:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to right,#000 10%,transparent 85%)}.login-hero{position:relative;z-index:1;padding:60px 6vw;display:flex;flex-direction:column;justify-content:space-between}.login-card-wrap{position:relative;z-index:2;display:grid;place-items:center;padding:40px}.login-card{width:min(470px,100%);background:rgba(7,20,34,.9);border:1px solid rgba(98,214,255,.18);border-radius:28px;padding:28px;box-shadow:0 35px 90px rgba(0,0,0,.42);backdrop-filter:blur(18px)}.hero-title{font-size:clamp(42px,6vw,82px);line-height:.93;margin:14px 0 18px;font-weight:950;letter-spacing:-.055em;max-width:820px}.hero-title span{display:block;background:linear-gradient(90deg,#fff 15%,#7ce8ff 52%,#76f0c8 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{max-width:660px;color:#acc4d5;font-size:16px;line-height:1.7}.hero-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:780px;margin-top:30px}.hero-kpi{border:1px solid rgba(255,255,255,.08);background:rgba(8,31,49,.56);border-radius:16px;padding:15px}.hero-kpi strong{font-size:22px}.hero-kpi span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--cyan),var(--teal));display:grid;place-items:center;color:#04131c;font-weight:950;box-shadow:0 10px 30px rgba(87,214,255,.2)}.brand h1{margin:0;font-size:14px;letter-spacing:.07em}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:2px;letter-spacing:.08em}.login-title{font-size:28px;margin:24px 0 6px}.login-sub{margin:0 0 20px;color:var(--muted);line-height:1.55;font-size:13px}.login-foot{display:flex;justify-content:space-between;gap:14px;margin-top:18px;font-size:11px;color:var(--muted)}
.field{display:grid;gap:6px;margin-bottom:11px}.field label{font-size:11px;color:#a8bdd0;font-weight:800}.field input,.field select,.field textarea,.input{width:100%;border:1px solid #24425e;background:#071725;color:var(--text);border-radius:12px;padding:11px 12px;outline:none;transition:.18s}.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(87,214,255,.11)}.field textarea{min-height:92px;resize:vertical}.checkbox{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:12px}.checkbox input{width:auto}.btn{border:1px solid #294862;background:#10263d;color:var(--text);border-radius:12px;padding:9px 13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s;white-space:nowrap}.btn:hover{transform:translateY(-1px);border-color:#3b6486;filter:brightness(1.05)}.btn.primary{background:linear-gradient(135deg,#59d6ff,#3ce0c5);color:#03141d;border:0;box-shadow:0 10px 26px rgba(64,214,218,.16)}.btn.success{background:#123a2e;border-color:#22674f;color:#baffdc}.btn.warning{background:#3a2d14;border-color:#705725;color:#ffe5a3}.btn.danger{background:#3a1820;border-color:#74313d;color:#ffd0d6}.btn.ghost{background:transparent}.btn.small{padding:6px 9px;font-size:11px;border-radius:9px}.btn.block{width:100%;padding:12px}.icon{width:16px;height:16px;display:inline-flex}.icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.error,.notice,.success-note{padding:11px 13px;border-radius:12px;margin:12px 0;font-size:12px;line-height:1.55}.error{background:#35161d;border:1px solid #72303d;color:#ffd2d8}.notice{background:#0d2639;border:1px solid #23506c;color:#ccecff}.success-note{background:#0f3025;border:1px solid #236148;color:#c8ffe5}
.app-shell{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#071523 0%,#07111d 100%);border-right:1px solid rgba(94,164,208,.15);padding:20px 14px;display:flex;flex-direction:column;gap:18px;z-index:30}.sidebar .brand{padding:2px 7px 13px}.nav{display:grid;gap:5px}.nav button{border:1px solid transparent;background:transparent;color:#a8bbca;text-align:left;padding:10px 11px;border-radius:13px;font-weight:720;display:flex;align-items:center;gap:10px;transition:.18s}.nav button:hover{background:#0c2135;color:#eef8ff}.nav button.active{background:linear-gradient(135deg,rgba(69,142,255,.18),rgba(60,224,197,.1));border-color:rgba(87,214,255,.2);color:#fff;box-shadow:inset 3px 0 0 var(--cyan)}.nav .nav-icon{width:20px;color:#73dffc;display:grid;place-items:center}.nav .nav-copy{display:flex;flex-direction:column;gap:1px}.nav .nav-copy b{font-size:12px}.nav .nav-copy small{font-size:9px;color:#7f98ac;font-weight:650}.side-live{margin-top:auto;border:1px solid #18324b;background:#091a2a;border-radius:14px;padding:12px}.side-live .shift{font-size:12px;font-weight:900}.side-live .shift small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.side-user{margin-top:8px;padding-top:10px;border-top:1px solid #173048;font-size:10px;color:var(--muted);line-height:1.6}.side-user b{color:#dfefff}.main{min-width:0}.topbar{height:72px;border-bottom:1px solid rgba(88,151,193,.15);background:rgba(5,15,26,.86);backdrop-filter:blur(18px);position:sticky;top:0;z-index:24;display:flex;align-items:center;justify-content:space-between;padding:0 22px}.topbar-left{display:flex;align-items:center;gap:18px}.topbar-title{font-weight:920;letter-spacing:.02em}.topbar-title small{display:block;color:var(--muted);font-size:9px;margin-top:2px;letter-spacing:.08em;text-transform:uppercase}.live-clock{display:flex;align-items:center;gap:7px;color:#a9c3d6;font-size:11px}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(98,230,166,.08),0 0 15px rgba(98,230,166,.55)}.user-box{display:flex;align-items:center;gap:8px}.role{font-size:9px;padding:5px 8px;border-radius:999px;background:#173654;color:#bfe7ff;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.email{font-size:11px;color:#a5bacb}.content{padding:22px;max-width:1900px;margin:0 auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.page-head h2{margin:0 0 4px;font-size:26px;letter-spacing:-.02em}.page-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:20px 0 10px}.section-title h3{margin:0;font-size:15px}.section-title p{margin:2px 0 0;color:var(--muted);font-size:11px}
.hero-board{position:relative;overflow:hidden;background:linear-gradient(135deg,#0d2940 0%,#0c2034 60%,#0a1b2c 100%);border:1px solid #21445f;border-radius:22px;padding:20px;box-shadow:var(--shadow);margin-bottom:15px}.hero-board:after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(87,214,255,.12);border-radius:50%;right:-130px;top:-190px;box-shadow:0 0 0 55px rgba(87,214,255,.025),0 0 0 110px rgba(87,214,255,.018)}.hero-board-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.hero-board h3{margin:6px 0 8px;font-size:25px}.hero-board p{margin:0;color:#a9c0d1;font-size:12px;max-width:720px;line-height:1.6}.hero-radar{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;align-content:center}.radar-stat{background:rgba(4,18,29,.48);border:1px solid rgba(109,202,246,.13);border-radius:14px;padding:12px}.radar-stat span{color:var(--muted);font-size:10px;display:block}.radar-stat strong{font-size:21px;display:block;margin-top:4px}.range-tabs,.tabs{display:flex;gap:6px;flex-wrap:wrap}.range-tabs button,.tabs button{border:1px solid #203a54;background:#091a2b;color:#9fb3c4;padding:7px 10px;border-radius:10px;font-size:11px;font-weight:800}.range-tabs button.active,.tabs button.active{background:linear-gradient(135deg,#174568,#143856);border-color:#2b6a94;color:#fff;box-shadow:inset 0 -2px 0 var(--cyan)}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0}.kpi{background:linear-gradient(160deg,#0d2034,#091827);border:1px solid #19334c;border-radius:16px;padding:13px;min-height:96px;position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;width:90px;height:90px;right:-42px;top:-45px;border-radius:50%;background:rgba(87,214,255,.04)}.kpi .label{font-size:10px;color:var(--muted);font-weight:800}.kpi .value{font-size:25px;font-weight:950;margin-top:7px;letter-spacing:-.03em}.kpi .sub{font-size:10px;color:#7892a8;margin-top:3px}.kpi.red .value{color:var(--red)}.kpi.green .value{color:var(--green)}.kpi.yellow .value{color:var(--yellow)}.kpi.blue .value{color:var(--cyan)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.panel{background:linear-gradient(155deg,#0b1b2d,#091724);border:1px solid #19344e;border-radius:var(--radius);box-shadow:0 10px 35px rgba(0,0,0,.13);overflow:hidden;margin-bottom:14px}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid #173149;gap:12px}.panel-head h3{margin:0;font-size:14px}.panel-head p{margin:2px 0 0;color:var(--muted);font-size:10px}.panel-body{padding:15px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:980px}.table th,.table td{padding:10px 10px;border-bottom:1px solid #173047;text-align:left;white-space:nowrap;font-size:12px}.table th{position:sticky;top:0;background:#0a1928;color:#88a1b5;font-size:9px;text-transform:uppercase;letter-spacing:.08em;z-index:2}.table tr.clickable:hover{background:#0e2439}.table td.wrap{white-space:normal;min-width:180px}.linkish{color:#91dcff;font-weight:900;cursor:pointer}.status,.pill{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900;border:1px solid #2b4964;background:#10253a;color:#c9d9e7;text-transform:uppercase;letter-spacing:.04em}.status.working{background:#103227;border-color:#23664c;color:#b8ffdc}.status.delayed,.status.paused{background:#3a2a14;border-color:#73531f;color:#ffe1a1}.status.completed,.status.departed{background:#12333e;border-color:#2b6674;color:#bdf3ff}.status.waiting,.status.arrived,.status.berthing{background:#1a2945;border-color:#3e5687;color:#cad9ff}.status.planned{background:#28213e;border-color:#55467a;color:#e0d4ff}.pill.final{background:#133528;border-color:#28664e;color:#c1ffe0}.pill.draft{background:#2d2915;border-color:#5c5428;color:#ffec9d}
.progress{height:7px;background:#142b40;border-radius:999px;overflow:hidden;margin-top:5px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:inherit}.forecast{font-weight:900}.forecast.despatch{color:var(--green)}.forecast.demurrage{color:var(--red)}.forecast.neutral{color:#8098aa}.money-pos{color:var(--green);font-weight:900}.money-neg{color:var(--red);font-weight:900}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:13px}.vessel-card{background:linear-gradient(150deg,#0e2338,#091825);border:1px solid #1b3953;border-radius:20px;padding:16px;box-shadow:0 14px 38px rgba(0,0,0,.18);position:relative;overflow:hidden}.vessel-card:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-55px;top:-55px;background:rgba(87,214,255,.045)}.vessel-top{display:flex;justify-content:space-between;gap:10px;position:relative;z-index:1}.vessel-card h3{margin:0;font-size:19px}.vessel-meta{color:var(--muted);font-size:11px;margin-top:4px}.vessel-progress-row{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;margin:14px 0}.donut{width:102px;height:102px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--teal) calc(var(--p)*1%),#173047 0);position:relative}.donut:after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:#0b1c2c;border:1px solid #17354e}.donut strong{position:relative;z-index:1;font-size:20px}.donut small{position:absolute;z-index:1;margin-top:34px;color:var(--muted);font-size:8px;text-transform:uppercase}.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.metric{background:#081724;border:1px solid #173249;border-radius:11px;padding:9px}.metric label{font-size:8px;text-transform:uppercase;color:var(--muted);font-weight:900;letter-spacing:.05em}.metric b{display:block;margin-top:4px;font-size:13px}.forecast-box{margin-top:10px;border-radius:13px;padding:11px;background:#091927;border:1px solid #203c56}.forecast-box.demurrage{border-color:#71303b;background:#2b151a}.forecast-box.despatch{border-color:#27644c;background:#0f2b21}.forecast-main{display:flex;justify-content:space-between;align-items:center;gap:10px}.forecast-main strong{font-size:16px}.quick-update{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;margin-top:10px}.quick-update input{min-width:0}.benchmark{margin-top:8px}.benchmark-head{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted)}.benchmark-track{height:6px;background:#142d42;border-radius:999px;margin-top:5px;position:relative}.benchmark-track i{position:absolute;inset:0 auto 0 0;width:var(--b);background:linear-gradient(90deg,var(--orange),var(--teal));border-radius:inherit}.benchmark-track:after{content:"";position:absolute;left:80%;top:-3px;width:1px;height:12px;background:#d8efff;opacity:.65}
.chart-bars{display:grid;gap:10px}.bar-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr 90px;gap:10px;align-items:center}.bar-label{font-size:10px;color:#b4c6d4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{height:13px;background:#132a3d;border-radius:999px;position:relative;overflow:hidden}.bar-plan,.bar-done{position:absolute;left:0;top:0;height:100%;border-radius:inherit}.bar-plan{background:#204d70;opacity:.85}.bar-done{background:linear-gradient(90deg,#4a8dff,#3ce0c5);height:55%;top:22%}.bar-value{text-align:right;font-size:10px;color:var(--muted)}
.risk-list{display:grid;gap:8px}.risk-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid #1b374f;background:#091925;border-radius:12px}.risk-item strong{font-size:12px}.risk-item small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.risk-amount{font-size:12px;font-weight:950}.risk-item.bad{border-color:#59303a;background:#201419}.risk-item.good{border-color:#245940;background:#0d241c}
.berth-board{display:grid;gap:8px}.berth-lane{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center}.berth-name{font-size:11px;font-weight:900}.berth-name small{display:block;color:var(--muted);font-size:8px;font-weight:600}.berth-track{position:relative;height:42px;background:#081724;border:1px solid #173149;border-radius:10px;overflow:hidden;background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:14.285% 100%}.berth-call{position:absolute;top:6px;height:28px;border-radius:7px;background:linear-gradient(135deg,#245f8f,#1d765f);border:1px solid rgba(151,228,255,.18);padding:5px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:850;min-width:34px}.berth-call.waiting{background:linear-gradient(135deg,#4f3b71,#3d4770)}.berth-call.completed{opacity:.45}.timeline-days{display:grid;grid-template-columns:110px repeat(7,1fr);gap:10px;margin-bottom:5px;color:#6f899f;font-size:8px;text-transform:uppercase}.timeline-days span{text-align:center}
.filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.filters .input{width:auto;min-width:145px}.split-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #24445f;background:#0b2032;border-radius:999px;padding:5px 8px;font-size:9px;color:#bcd1df}.empty{padding:30px;text-align:center;color:var(--muted)}.empty strong{display:block;color:#bdd0df;margin-bottom:5px}.info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.info-item{background:#081826;border:1px solid #17334c;border-radius:11px;padding:10px}.info-item span{display:block;color:var(--muted);font-size:9px}.info-item b{display:block;margin-top:4px;font-size:12px}.callout{border:1px solid #1f3d58;background:#0a1a29;border-radius:14px;padding:13px}.callout h4{margin:0 0 9px;font-size:13px}.big-result{font-size:22px;font-weight:950}.separator{height:1px;background:#19344c;margin:13px 0}.workflow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.workflow-step{border:1px solid #284b67;background:#0b2133;color:#a9bfd0;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:850}.workflow-arrow{color:#557187;font-size:11px}.workflow-step.active{background:#144660;border-color:#2c7694;color:#e1f7ff}.workflow-step.good{background:#123c2c;border-color:#2c6d50;color:#caffdf}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(780px,100%);max-height:93vh;overflow:auto;background:#0b1928;border:1px solid #294761;border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.58)}.modal.large{width:min(1240px,100%)}.modal-head{padding:15px 17px;border-bottom:1px solid #1a354e;display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:0;background:#0b1928;z-index:2}.modal-head h3{margin:0;font-size:16px}.modal-body{padding:16px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:13px 16px;border-top:1px solid #1a354e}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-grid .span-2{grid-column:1/-1}.preview{max-height:270px;overflow:auto;border:1px solid #1e3952;border-radius:11px;margin-top:10px}.detail-summary{display:grid;grid-template-columns:1.25fr .75fr;gap:13px}.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:220;display:grid;gap:8px}.toast{background:#122a41;border:1px solid #2d5879;color:#e7f5ff;padding:10px 13px;border-radius:11px;box-shadow:var(--shadow);max-width:390px;font-size:12px}.toast.bad{background:#35161d;border-color:#75303d}.spinner{width:22px;height:22px;border:3px solid #24415c;border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading{min-height:48vh;display:grid;place-items:center;color:var(--muted)}
.audit-row{display:grid;grid-template-columns:140px 90px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid #18324a;font-size:10px}.audit-row time{color:#7f9aae}.audit-row b{color:#cde6f5}.approval-card{border:1px solid #1c3a53;background:#091927;border-radius:13px;padding:11px}.approval-card + .approval-card{margin-top:8px}.approval-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px;margin-top:5px}
@media(max-width:1400px){.kpis{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1100px){.app-shell{grid-template-columns:88px 1fr}.sidebar{padding:15px 8px}.sidebar .brand h1,.sidebar .brand small,.nav .nav-copy,.side-live .shift small,.side-user{display:none}.sidebar .brand{justify-content:center}.nav button{justify-content:center;padding:11px 6px}.hero-board-inner{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.detail-summary{grid-template-columns:1fr}}
@media(max-width:760px){.login-shell{grid-template-columns:1fr}.login-hero{display:none}.login-card-wrap{padding:22px}.app-shell{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;z-index:50;border-right:0;border-top:1px solid #173149;padding:5px;background:#07131f}.sidebar .brand,.side-live{display:none}.nav{grid-template-columns:repeat(7,minmax(70px,1fr));overflow:auto}.nav button{display:grid;place-items:center;gap:2px;font-size:9px;padding:6px 4px}.nav .nav-copy{display:flex;text-align:center}.nav .nav-copy small{display:none}.content{padding:14px 11px 84px}.topbar{padding:0 11px;height:62px}.topbar-title small,.email,.live-clock{display:none}.page-head{display:block}.actions{margin-top:10px}.kpis,.grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}.vessel-progress-row{grid-template-columns:90px 1fr}.donut{width:84px;height:84px}.donut:after{width:60px;height:60px}.quick-update{grid-template-columns:1fr 1fr}.quick-update .btn{grid-column:1/-1}.info-list{grid-template-columns:1fr}.berth-lane{grid-template-columns:82px 1fr}.timeline-days{grid-template-columns:82px repeat(7,1fr)}.bar-row{grid-template-columns:100px 1fr 70px}.modal-backdrop{padding:8px}.modal{border-radius:14px}.form-grid .span-2{grid-column:auto}}
@media print{body{background:#fff;color:#000}.sidebar,.topbar,.actions,.filters,.btn,.range-tabs,.tabs,.no-print{display:none!important}.app-shell{display:block}.content{padding:0}.panel,.vessel-card,.kpi,.hero-board,.callout{box-shadow:none;border-color:#aaa;background:#fff;color:#000}.table th{background:#eee;color:#000}.table td{border-color:#ddd}.muted,.subtle{color:#555}.forecast.demurrage{color:#b00020}.forecast.despatch{color:#067333}}

/* ========================================================================== 
   VESSELPLAN V2.1 — BRIGHT MARITIME UI REFRESH
   Keeps the existing data/logic layer intact while replacing the visual system.
   ========================================================================== */
:root{
  --bg:#f4f9fd;--bg2:#eef7fc;--panel:#ffffff;--panel2:#f8fbfe;--panel3:#eef8fd;
  --line:#dbeaf3;--line2:#c9dfec;--text:#0c2b55;--muted:#6f87a2;--soft:#425f7c;
  --cyan:#13b9f2;--blue:#2788f7;--teal:#14c7b3;--green:#27c982;--yellow:#ffba52;--orange:#ff8a3d;--red:#f14c63;--purple:#8e6cf4;
  --shadow:0 12px 38px rgba(43,105,146,.10);--shadow-soft:0 7px 24px rgba(50,114,151,.08);--radius:18px;--radius-sm:12px;
}
html,body{background:linear-gradient(180deg,#f8fcff 0%,#f2f8fc 54%,#eef7fb 100%);color:var(--text)}
body{min-width:320px}.muted{color:var(--muted)}.danger-text{color:var(--red)!important}.good-text{color:#10a86d!important}.warn-text{color:#d98a13!important}.eyebrow{color:#058ec8;letter-spacing:.14em}.subtle{color:var(--muted)}

/* Login */
.login-shell{background:linear-gradient(135deg,#eaf8ff 0%,#f9fdff 52%,#e9fff9 100%)}
.login-shell:before{background-image:linear-gradient(rgba(19,125,179,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(19,125,179,.05) 1px,transparent 1px);mask-image:linear-gradient(to right,#000 15%,transparent 88%)}
.login-hero{background:radial-gradient(circle at 20% 20%,rgba(19,185,242,.20),transparent 28%),radial-gradient(circle at 65% 76%,rgba(20,199,179,.18),transparent 30%)}
.login-card{background:rgba(255,255,255,.94);border:1px solid rgba(98,165,201,.28);box-shadow:0 28px 75px rgba(31,109,153,.18)}
.hero-title{color:#0d3568}.hero-title span{background:linear-gradient(90deg,#0b65c7,#10a6d5 48%,#10b79e);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{color:#4f6c85}.hero-kpi{background:rgba(255,255,255,.70);border:1px solid rgba(67,147,189,.18);box-shadow:var(--shadow-soft)}.hero-kpi span{color:#6c859e}
.login-sub,.login-foot{color:#6c839a}.brand h1{color:#0d2c56}.brand small{color:#6f88a1}

/* Fields / buttons */
.field label{color:#536f88}.field input,.field select,.field textarea,.input{border-color:#cfe2ed;background:#fff;color:#12355f;box-shadow:inset 0 1px 0 rgba(14,68,99,.02)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:#46b9ee;box-shadow:0 0 0 4px rgba(19,185,242,.10)}
.checkbox{color:#4e6b84}.btn{border-color:#cfe1ec;background:#fff;color:#174a78;box-shadow:0 5px 16px rgba(70,127,160,.06)}.btn:hover{border-color:#9ccde4;box-shadow:0 8px 22px rgba(56,125,165,.12)}
.btn.primary{background:linear-gradient(135deg,#168df0,#0dc8b7);color:#fff;box-shadow:0 10px 22px rgba(28,147,196,.22)}
.btn.success{background:#ecfbf4;border-color:#bdebd5;color:#0b8a59}.btn.warning{background:#fff7e9;border-color:#f2d39d;color:#a9670a}.btn.danger{background:#fff0f2;border-color:#f4c0c8;color:#c7354b}.btn.ghost{background:#f7fbfe}.btn.icon-btn{width:34px;height:34px;padding:0}
.error{background:#fff1f3;border-color:#f6c4cb;color:#b93449}.notice{background:#eff9ff;border-color:#c9e9f8;color:#245b77}.success-note{background:#effbf5;border-color:#c5ead7;color:#18734e}

/* Layout / sidebar */
.app-shell{grid-template-columns:252px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 68%,#e8f7ff 100%);border-right:1px solid #e0edf5;padding:18px 12px;box-shadow:10px 0 36px rgba(64,124,158,.05)}
.sidebar .brand{padding:3px 7px 14px}.brand-mark{width:44px;height:44px;border-radius:15px;background:linear-gradient(145deg,#e6f9ff,#dffcf7);color:#078ec8;border:1px solid #c5eafa;box-shadow:0 9px 24px rgba(25,155,207,.12)}.brand-mark .icon{width:27px;height:27px}.brand h1{font-size:15px;letter-spacing:.02em}.version-badge{display:inline-flex;align-items:center;padding:2px 6px;margin-left:5px;border-radius:6px;background:#208df2;color:#fff;font-size:9px;vertical-align:2px}.brand small{letter-spacing:.04em;font-size:9px}
.nav{gap:4px}.nav button{color:#3f5f7c;padding:10px 10px;border-radius:12px}.nav button:hover{background:#edf7fd;color:#0d5c9e}.nav button.active{background:linear-gradient(90deg,#e3f5ff,#ecfbff);border-color:#c8e8f8;color:#0879c3;box-shadow:inset 3px 0 0 #1ba4f2,0 6px 16px rgba(43,130,179,.07)}.nav .nav-icon{color:#2c79bd}.nav .nav-copy b{font-size:11px}.nav .nav-copy b i{font-style:normal;color:#9cb1c3;font-weight:600}.nav .nav-copy small{color:#8198ad;font-size:8.5px}
.side-illustration{position:relative;margin-top:auto;min-height:150px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#eefaff,#dbf4ff 55%,#9ddcf0 56%,#54b6dc 100%);border:1px solid #d1eaf5;padding:16px 13px;color:#0b5f99}.side-illustration:after{content:"";position:absolute;left:-15%;right:-15%;bottom:-18px;height:60px;background:repeating-radial-gradient(ellipse at center,#fff0 0 14px,rgba(255,255,255,.24) 15px 17px);opacity:.6}.side-illustration b,.side-illustration strong{position:relative;z-index:2;display:block}.side-illustration b{font-size:12px}.side-illustration strong{font-size:13px;color:#0972b1}.side-ship{position:absolute;right:15px;bottom:18px;color:#0c6a9e;z-index:2;transform:scale(2.2)}.side-sun{position:absolute;right:18px;top:18px;width:34px;height:34px;border-radius:50%;background:#ffd36c;box-shadow:0 0 0 8px rgba(255,211,108,.16)}.side-water{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,rgba(11,137,194,.08),rgba(7,111,168,.18))}
.side-live{margin-top:10px;background:#fff;border-color:#d8e8f2;box-shadow:var(--shadow-soft)}.side-live .shift{color:#183e65}.side-live .shift small{color:#718aa1}.side-user{border-color:#e5eef4;color:#7a91a6}.side-user b{color:#234d72}

/* Top bar */
.topbar{height:68px;background:rgba(255,255,255,.92);border-color:#e2edf4;box-shadow:0 4px 22px rgba(55,112,145,.05);padding:0 18px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}.topbar-title{display:flex;align-items:center;gap:9px;color:#0e2d58;font-size:13px}.topbar-logo{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#078fc8;background:#e9f9ff;border:1px solid #ccecf8}.topbar-logo .icon{width:20px;height:20px}.topbar-title small{color:#6c849a;letter-spacing:.02em;text-transform:none}.date-chip,.period-chip{display:flex;align-items:center;gap:6px;border:1px solid #d9e9f2;background:#f9fcfe;color:#355d7d;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:800}.period-chip{border-color:#bfe9f8;color:#0b87bd;background:#ecfaff}
.global-search{display:flex;align-items:center;gap:6px;width:min(330px,28vw);background:#f8fbfd;border:1px solid #d9e7ef;border-radius:12px;padding:7px 10px;color:#7890a6}.global-search input{border:0;outline:0;background:transparent;min-width:0;width:100%;color:#173b61;font-size:10px}.bell{position:relative;width:34px;height:34px;border-radius:11px;border:1px solid #d8e7ef;background:#fff;display:grid;place-items:center;color:#396d91}.bell span{position:absolute;right:-4px;top:-5px;background:#ef4059;color:#fff;font-size:8px;font-weight:900;min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;border:2px solid #fff}.user-box{gap:7px}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#18bdd7,#12a1c0);color:#fff;font-weight:900;font-size:10px;display:grid;place-items:center}.user-copy{display:flex;flex-direction:column;line-height:1.15}.user-copy b{font-size:10px}.user-copy small{font-size:8px;color:#8298aa}.role,.email,.live-clock{display:none}
.content{padding:16px 18px 24px;max-width:1920px}

/* Page hero header */
.page-head{position:relative;overflow:hidden;min-height:124px;border:1px solid #d3eaf5;background:linear-gradient(105deg,#eaf8ff 0%,#f7fcff 46%,#dff7fb 100%);border-radius:20px;padding:20px 22px;box-shadow:var(--shadow-soft);margin-bottom:12px;align-items:center}.page-head:before{content:"";position:absolute;right:0;top:0;width:46%;height:100%;background:radial-gradient(circle at 68% 48%,rgba(30,151,211,.22),transparent 28%),linear-gradient(135deg,transparent 8%,rgba(24,155,211,.08) 8% 11%,transparent 11% 20%,rgba(10,119,183,.06) 20% 23%,transparent 23%);opacity:.9}.page-head-copy{position:relative;z-index:2;max-width:720px}.page-head h2{font-size:30px;color:#0c3060;margin:4px 0 5px;letter-spacing:-.03em}.page-head h2 .bi.inline small{color:#446c89;font-weight:650}.page-head p{color:#4e6e87;max-width:780px}.page-head-sep{color:#a0b6c7}.page-head-art{position:absolute;right:150px;bottom:0;width:360px;height:100%;pointer-events:none}.page-head-art .mini-ship{position:absolute;right:72px;bottom:33px;color:#0a7eaa;transform:scale(3.4);opacity:.76}.page-head-art .wave{position:absolute;right:-20px;bottom:20px;width:360px;height:45px;border-radius:50%;border-top:2px solid rgba(15,153,203,.32);transform:rotate(-3deg)}.page-head-art .wave-2{bottom:8px;right:20px;opacity:.55}.page-head .actions{position:relative;z-index:3;margin-left:auto;align-self:flex-start}.hero-action{min-width:160px}

/* Hero overview */
.hero-board{background:linear-gradient(120deg,#0b76aa 0%,#058dbb 48%,#19a9c3 100%);border:0;border-radius:20px;padding:20px 22px;box-shadow:0 14px 32px rgba(20,134,178,.20);color:#fff}.hero-board:before{content:"";position:absolute;right:0;top:0;width:52%;height:100%;background:radial-gradient(circle at 65% 36%,rgba(255,255,255,.18),transparent 24%),linear-gradient(160deg,rgba(255,255,255,.13) 0 13%,transparent 13% 21%,rgba(255,255,255,.08) 21% 24%,transparent 24%);opacity:.85}.hero-board:after{width:420px;height:130px;border:0;border-radius:50%;right:-80px;top:auto;bottom:-78px;box-shadow:none;background:repeating-radial-gradient(ellipse at center,rgba(255,255,255,.20) 0 3px,rgba(255,255,255,0) 4px 13px)}.hero-board h3{color:#fff}.hero-board p{color:#e8f8ff}.hero-board .eyebrow{color:#bdf1ff}.hero-radar{grid-template-columns:repeat(2,1fr)}.radar-stat{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.20);backdrop-filter:blur(7px)}.radar-stat span{color:#dcf4ff}.radar-stat strong{color:#fff}.hero-board .danger-text{color:#ffe5ea!important}.hero-board .good-text{color:#dcffef!important}
.range-tabs,.tabs{gap:6px}.range-tabs button,.tabs button{border-color:#d8e7ef;background:#fff;color:#5d7790;box-shadow:0 4px 12px rgba(60,117,149,.05)}.range-tabs button.active,.tabs button.active{background:linear-gradient(135deg,#e1f6ff,#e7fbf7);border-color:#9dddf2;color:#0879bb;box-shadow:inset 0 -2px 0 #17b8e9}.tabs{margin:12px 0}.planning-tabs,.operations-tabs{margin:12px 0 14px}

/* KPI cards */
.kpis{gap:10px}.compact-kpis{grid-template-columns:repeat(5,minmax(0,1fr));margin:10px 0 12px}.kpi{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;min-height:92px;background:#fff;border:1px solid #deebf2;border-radius:15px;padding:13px;box-shadow:var(--shadow-soft)}.kpi:before{content:"";position:absolute;right:-20px;top:-30px;width:90px;height:90px;border-radius:50%;background:rgba(39,136,247,.035)}.kpi-icon{width:38px;height:38px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;background:#e9f6ff;color:#1285d4}.kpi-icon .icon{width:20px;height:20px}.kpi-copy{min-width:0}.kpi .label .bi{gap:1px}.kpi .label b{font-size:10px;color:#254c71}.kpi .label small{color:#8298ac;font-size:8px}.kpi .value{font-size:22px;color:#0d2e59;margin-top:6px}.kpi .sub{color:#6f889d;font-size:8px}.kpi.green .kpi-icon{background:#e9fbf4;color:#13a86c}.kpi.red .kpi-icon{background:#fff0f2;color:#e7475d}.kpi.yellow .kpi-icon{background:#fff7e7;color:#dc8d19}.kpi.purple .kpi-icon{background:#f1edff;color:#7657df}.kpi.blue .kpi-icon{background:#eaf6ff;color:#147fd0}

/* Panels, grids */
.panel,.vessel-card,.callout{background:#fff;border-color:#dce9f1;box-shadow:var(--shadow-soft)}.panel{border-radius:16px}.panel-head{border-color:#e5eef4;padding:12px 14px}.panel-head h3{color:#173a62}.panel-head p{color:#7d93a6}.panel-body{padding:14px}.chip{border-color:#d2e5ef;background:#f6fbfe;color:#567590}.grid-2{gap:12px}.grid-3{gap:12px}.grid-4{gap:12px}.section-title h3{color:#123961}.section-title p{color:#6c8498}
.link-btn{border:0;background:transparent;color:#1587d1;font-size:9px;font-weight:900;padding:4px;cursor:pointer}.link-btn:hover{text-decoration:underline}
.filter-shell{background:#f3f9fd;border:1px solid #dcecf4;padding:10px;border-radius:15px;margin-bottom:12px}.filters{gap:8px}.filters .input{background:#fff;min-width:155px}.search-field{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #cfe1ec;border-radius:12px;padding-left:10px;min-width:240px;color:#7390a5}.search-field .input{border:0!important;box-shadow:none!important;padding-left:0;min-width:180px}
.planning-main-grid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(280px,.85fr);gap:12px;margin-bottom:12px}.planning-side{display:grid;gap:12px;align-content:start}.vessel-list-panel{margin-top:0}.monthly-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}.monthly-stats>div{background:#f6fbfe;border:1px solid #e0edf4;border-radius:11px;padding:10px}.monthly-stats span{display:block;color:#7b91a5;font-size:8px}.monthly-stats b{display:block;margin-top:4px;font-size:14px;color:#173a61}

/* Timeline */
.timeline-days{color:#6f8ca3;font-weight:800}.berth-name{color:#244b6e}.berth-name small{color:#8499ab}.berth-track{height:46px;background:#f8fbfd;border-color:#dfeaf1;background-image:linear-gradient(90deg,rgba(59,124,161,.08) 1px,transparent 1px)}.berth-call{top:7px;height:31px;background:linear-gradient(135deg,#84e5c3,#54cba7);border-color:#7ad8bc;color:#0e5d4a;box-shadow:0 5px 10px rgba(43,170,125,.12)}.berth-call.waiting{background:linear-gradient(135deg,#9bd5ff,#75bff3);border-color:#85c5f4;color:#125d91}.berth-call.delayed{background:linear-gradient(135deg,#ffd5a4,#ffb968);border-color:#f3bd78;color:#8a5411}.berth-call.completed{background:linear-gradient(135deg,#d9e4eb,#cbd9e2);color:#5d768a}.berth-call.planned{background:linear-gradient(135deg,#d9d0ff,#bfaef8);color:#5e45a9}.berth-call.berthing{background:linear-gradient(135deg,#c6f4f0,#87dfd6);color:#15746c}

/* Tables */
.table-wrap{border-radius:0 0 16px 16px}.table{color:#23425f;background:#fff}.table thead th{position:sticky;top:0;background:#f2f8fc;color:#607e96;border-color:#e1edf3;font-size:8px}.table td{border-color:#edf3f6;color:#2f506c;background:#fff}.table tr:hover td{background:#f7fbfe}.table .linkish,.linkish{color:#087fd1;font-weight:850}.status{border:1px solid #d6e5ee;background:#f5f9fb;color:#55738a}.status.working{background:#e7fbf2;border-color:#b9ecd4;color:#0a8d5a}.status.waiting,.status.arrived{background:#eaf6ff;border-color:#c7e4f8;color:#1174b6}.status.delayed,.status.paused{background:#fff4e6;border-color:#f5d19e;color:#a7650b}.status.completed,.status.departed{background:#eef7f2;border-color:#d2e6da;color:#508067}.status.planned{background:#f1edff;border-color:#ded5ff;color:#6a54b7}.progress{background:#e7eff4}.progress i{background:linear-gradient(90deg,#26c98b,#10bfb3)}.forecast.demurrage{color:#e23f58}.forecast.despatch{color:#0ba66b}.forecast.neutral{color:#768da2}.pill{background:#eaf8ff;border-color:#c9eaf8;color:#0d7db2}.pill.draft{background:#f2f5f7;border-color:#dbe3e8;color:#708493}.pill.yes{background:#fff0f2;border-color:#f6c0c9;color:#c03b4f}

/* Vessel cards */
.cards{gap:12px}.vessel-card{border-radius:16px;padding:14px;position:relative;overflow:hidden}.vessel-card:before{background:rgba(20,172,207,.05)}.vessel-card h3{color:#0c4083;font-size:17px}.vessel-meta{color:#6f89a0}.vessel-top .eyebrow{color:#2a77a9}.donut{background:conic-gradient(#16c1b4 calc(var(--p)*1%),#e8f0f4 0);box-shadow:inset 0 0 0 1px #e0ebf2}.donut:after{background:#fff;border-color:#e0ecf3}.donut strong{color:#103a63}.donut small{color:#7a92a7}.metric{background:#f8fbfd;border-color:#e3edf3}.metric label{color:#7b91a4}.metric b{color:#173c62}.forecast-box{background:#f6fbfe;border-color:#d9e8f1}.forecast-box.demurrage{border-color:#f5c0c8;background:#fff3f4}.forecast-box.despatch{border-color:#bde9d4;background:#effbf5}.benchmark-track{background:#e6eff4}.benchmark-track i{background:linear-gradient(90deg,#f4b54e,#16c4ad)}.benchmark-track:after{background:#356b8b}.quick-update .input{background:#fff}.operations-cards{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Operation screen extras */
.shift-strip{display:grid;grid-template-columns:auto minmax(180px,1fr) 1px minmax(150px,.7fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid #dae9f1;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow-soft);margin-bottom:10px}.shift-icon{width:46px;height:46px;border-radius:14px;background:#edf3ff;color:#576ed7;display:grid;place-items:center}.shift-icon .icon{width:24px;height:24px}.shift-strip span{display:block;color:#71899e;font-size:8px}.shift-strip b{display:block;color:#173d64;font-size:13px;margin-top:2px}.shift-strip small{color:#7e95a7;font-size:8px}.shift-sep{width:1px;height:42px;background:#e6eef3}.shift-actions{display:flex;gap:8px}.operations-bottom-grid{display:grid;grid-template-columns:1.05fr 1.15fr .8fr;gap:12px;margin-top:12px}.mini-delay-list{padding:4px 14px 12px}.mini-delay{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #edf3f6}.mini-delay:last-child{border-bottom:0}.mini-delay time{color:#6d8ba3;font-size:9px;font-weight:800}.mini-delay b{display:block;color:#244b6f;font-size:9px}.mini-delay small{display:block;color:#7790a4;font-size:8px;margin-top:2px}.sof-mini{padding:10px 14px 14px}.sof-row{display:grid;grid-template-columns:42px 1fr 120px;gap:8px;align-items:center;margin:8px 0}.sof-row>span{font-size:8px;color:#738ea3}.sof-row>b{font-size:8px;color:#476881;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sof-track{height:16px;background:#eef5f8;border-radius:999px;overflow:hidden}.sof-track i{display:block;height:100%;border-radius:999px}.sof-track i.counted{background:linear-gradient(90deg,#5fd5a8,#2cc58b)}.sof-track i.excluded{background:linear-gradient(90deg,#ffb7c1,#f46c7e)}

/* Charts / alerts */
.chart-bars{gap:9px}.bar-label{color:#54728b}.bar-track{background:#e8f0f5}.bar-plan{background:#b9d8ee}.bar-done{background:linear-gradient(90deg,#3b9ff2,#17c4b7)}.bar-value{color:#607f96}.risk-item{border-color:#e0eaf0;background:#f9fcfe}.risk-item strong{color:#254d72}.risk-item small{color:#7891a5}.risk-item.bad{border-color:#f3c9d0;background:#fff4f5}.risk-item.good{border-color:#c6ead8;background:#f1fbf6}.risk-amount{color:#355b77}

/* Info / workflow / modals */
.info-item{background:#f8fbfd;border-color:#e1ebf1}.info-item span{color:#718a9f}.info-item b{color:#294e70}.callout{border-color:#dce9f1}.separator{background:#e6eef3}.workflow-step{border-color:#d3e3ec;background:#f7fbfd;color:#68849a}.workflow-step.active{background:#e7f6ff;border-color:#bce2f5;color:#0a78b6}.workflow-step.good{background:#edf9f2;border-color:#c8e8d7;color:#18845b}.workflow-arrow{color:#8aa1b3}.approval-card{border-color:#dce8ef;background:#fff}.approval-meta{color:#8095a7}
.modal-backdrop{background:rgba(22,55,77,.38);backdrop-filter:blur(6px)}.modal{background:#fff;border-color:#d9e8f1;box-shadow:0 30px 90px rgba(28,85,120,.25)}.modal-head{background:rgba(255,255,255,.97);border-color:#e2ecf2}.modal-head h3{color:#163a60}.modal-foot{border-color:#e2ecf2}.preview{border-color:#dce8ef}.toast{background:#fff;border-color:#cfe4ef;color:#173d61;box-shadow:0 12px 32px rgba(42,105,142,.16)}.toast.bad{background:#fff0f2;border-color:#efbdc6;color:#b33348}.spinner{border-color:#d2e5ef;border-top-color:#169fd8}.loading{color:#6f889d}.audit-row{border-color:#e7eff4}.audit-row time{color:#7890a4}.audit-row b{color:#2c5274}

/* Responsive */
@media(max-width:1500px){.app-shell{grid-template-columns:226px 1fr}.compact-kpis{grid-template-columns:repeat(3,1fr)}.planning-main-grid{grid-template-columns:1.7fr .8fr}.operations-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-bottom-grid{grid-template-columns:1fr 1fr}.commercial-panel{grid-column:1/-1}.page-head-art{right:80px;opacity:.8}.global-search{width:240px}}
@media(max-width:1180px){.app-shell{grid-template-columns:82px 1fr}.sidebar{padding:12px 7px}.sidebar .brand h1,.sidebar .brand small,.nav .nav-copy,.side-live,.side-illustration{display:none}.sidebar .brand{justify-content:center}.nav button{justify-content:center;padding:10px 6px}.topbar-title>span:last-child small,.date-chip,.period-chip,.user-copy{display:none}.page-head-art{display:none}.planning-main-grid{grid-template-columns:1fr}.planning-side{grid-template-columns:1fr 1fr}.operations-bottom-grid{grid-template-columns:1fr}.commercial-panel{grid-column:auto}.kpis,.compact-kpis{grid-template-columns:repeat(2,1fr)}.operations-cards{grid-template-columns:1fr}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;z-index:50;border-right:0;border-top:1px solid #dbe8ef;padding:5px;background:#fff}.sidebar .brand,.side-live,.side-illustration{display:none}.nav{display:flex;overflow:auto}.nav button{min-width:70px;display:grid;place-items:center;gap:2px;padding:6px 4px}.nav .nav-copy{display:block!important;text-align:center}.nav .nav-copy b{font-size:8px}.nav .nav-copy b i,.nav .nav-copy small{display:none}.content{padding:10px 9px 82px}.topbar{padding:0 9px;height:58px}.topbar-title>span:last-child{display:none}.global-search{width:180px}.bell,.user-box .btn{display:none}.page-head{min-height:auto;padding:16px}.page-head h2{font-size:22px}.page-head .actions{width:100%;margin-top:10px}.page-head{display:block}.kpis,.compact-kpis{grid-template-columns:1fr 1fr}.kpi{min-height:80px;padding:10px}.kpi-icon{width:34px;height:34px}.kpi .value{font-size:18px}.grid-2,.grid-3,.grid-4,.planning-side,.operations-bottom-grid,.form-grid{grid-template-columns:1fr}.shift-strip{grid-template-columns:auto 1fr}.shift-sep,.shift-strip>div:nth-of-type(4){display:none}.shift-actions{grid-column:1/-1}.operations-cards,.cards{grid-template-columns:1fr}.filter-shell .filters{display:grid}.filters .input,.search-field{width:100%;min-width:0}.planning-main-grid{grid-template-columns:1fr}.sof-row{grid-template-columns:38px 1fr}.sof-row>b{display:none}.modal{border-radius:15px}.form-grid .span-2{grid-column:auto}}
@media print{body{background:#fff;color:#000}.panel,.vessel-card,.kpi,.hero-board,.callout,.page-head{background:#fff;color:#000;border-color:#aaa;box-shadow:none}.table th{background:#eee;color:#000}.table td{color:#000;background:#fff}}

/* VesselPlan V2.2 Smart Planning refinements */
.simple-login{display:grid!important;grid-template-columns:1fr!important;place-items:center;background:linear-gradient(135deg,#effaff 0%,#ffffff 48%,#effff9 100%)!important}
.simple-login:before{opacity:.75}.simple-login .login-card-wrap{width:100%;min-height:100vh;padding:28px}.simple-login .login-card{background:#fff;color:#102f57;border:1px solid #d7eaf5;box-shadow:0 28px 80px rgba(46,116,153,.15);padding:30px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.simple-login .login-sub{color:#68859b}.simple-login .login-foot{color:#7f98a9}.simple-login .field input{background:#f7fbff;color:#153858;border-color:#d7e7f1}
.compact-side{gap:12px}.compact-side .nav{margin-top:4px}.compact-side .nav button{padding-top:9px;padding-bottom:9px}.sidebar{overflow:auto}
.page-head{min-height:104px}.page-head-art{opacity:.45}.page-head p{max-width:920px}
.row-actions,.card-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.btn.tiny{padding:5px 7px;min-width:30px;border-radius:8px}.btn.tiny .icon{width:14px;height:14px}.btn.danger.ghost{color:#d33b55;border-color:#ffd0d8;background:#fff8fa}.btn.danger.ghost:hover{background:#fff0f3}
.latest-note{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;margin-top:8px;border:1px solid #dbeaf3;background:#f9fcfe;border-radius:10px;color:#486a82;font-size:11px}.latest-note .icon{color:#168bc3;flex:0 0 auto}.latest-note b{text-transform:uppercase;font-size:9px;color:#0b6da4}
.block-muted{display:block;color:#8198aa;font-size:10px;margin-top:2px}.dispatch-table{min-width:1450px}.dispatch-table td{vertical-align:top}.dispatch-table th{white-space:normal;line-height:1.25}
.smart-preview{margin:14px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px;background:linear-gradient(135deg,#f0fbff,#f3fffb);border:1px solid #d4edf6;border-radius:14px}.smart-preview>div{background:#fff;border:1px solid #dcebf4;border-radius:10px;padding:9px}.smart-preview span{display:block;color:#6c8799;font-size:10px}.smart-preview b{display:block;margin-top:4px;font-size:13px;color:#0c4774}
.master-grid .panel{min-height:420px}.master-grid .table{min-width:620px}.planning-summary+.tabs{margin-top:12px}
.notice strong{color:#0c5f92}
@media(max-width:1180px){.smart-preview{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.smart-preview{grid-template-columns:1fr}.dispatch-table{min-width:1200px}.page-head{min-height:auto}}

/* VesselPlan V2.3 Commercial & Performance Intelligence */
.berth-pro{display:grid;gap:8px}.berth-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:4px 2px 8px;color:#617d94;font-size:10px}.berth-legend span{display:inline-flex;align-items:center;gap:5px}.legend-box{width:16px;height:8px;border-radius:999px;display:inline-block}.legend-box.waiting{background:repeating-linear-gradient(135deg,#f7c75c 0 5px,#fff3cf 5px 9px);border:1px solid #e9b843}.legend-box.working{background:#31c7a5}.legend-box.planned{background:#77a9f7}.legend-box.delayed{background:#ef6b79}.legend-box.completed{background:#9aaec0}.timeline-days-pro{display:grid;grid-template-columns:130px repeat(7,1fr);border-bottom:1px solid #dbe9f1}.timeline-days-pro>span{padding:5px;text-align:center;font-size:9px;color:#55748d}.timeline-days-pro>span:first-child{text-align:left}.timeline-days-pro small{display:block;color:#9aabba;font-size:8px;margin-top:2px}.berth-board-pro{display:grid;gap:7px}.berth-lane-pro{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:stretch}.berth-name-pro{padding:9px 8px;display:flex;flex-direction:column;justify-content:center}.berth-name-pro b{color:#163f67;font-size:11px}.berth-name-pro small{color:#8aa0b2;font-size:8px;margin-top:2px}.berth-track-pro{position:relative;border:1px solid #d9e7ef;border-radius:12px;background:linear-gradient(90deg,rgba(100,157,193,.05) 1px,transparent 1px);background-size:calc(100% / 7) 100%;overflow:hidden}.berth-track-pro:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,121,175,.07) 1px,transparent 1px);background-size:calc(100% / 7) 100%;pointer-events:none}.berth-seg{position:absolute;height:25px;border-radius:8px;min-width:18px;display:flex;align-items:center;gap:5px;padding:0 7px;font-size:8px;overflow:hidden;white-space:nowrap;border:1px solid transparent;box-shadow:0 3px 8px rgba(50,98,128,.08);z-index:2}.berth-seg b{overflow:hidden;text-overflow:ellipsis}.berth-seg small{opacity:.7;overflow:hidden;text-overflow:ellipsis}.berth-seg .vessel-dot{width:6px;height:6px;border-radius:50%;background:var(--vessel);box-shadow:0 0 0 2px rgba(255,255,255,.65);flex:0 0 auto}.berth-seg.waiting{height:18px;margin-top:3px;background:repeating-linear-gradient(135deg,#fff1c6 0 6px,#ffe39a 6px 11px);border-color:#f2c65c;color:#7b5b13;z-index:1}.berth-seg.waiting em{font-style:normal;font-size:7px;font-weight:900}.berth-seg.working{background:linear-gradient(90deg,#aaf0dc,#4cd1ad);border-color:#5acdad;color:#075c4c}.berth-seg.planned{background:linear-gradient(90deg,#e5eeff,#9ebeff);border-color:#a4c1fb;color:#345b9c}.berth-seg.delayed{background:linear-gradient(90deg,#ffe0e5,#f58a98);border-color:#f199a5;color:#9b2639}.berth-seg.completed{background:linear-gradient(90deg,#eef3f6,#cbd8e1);border-color:#cedae3;color:#617687}
.monthly-toolbar{align-items:end}.mini-label{display:block;font-size:9px;color:#7891a5;font-weight:800;margin-bottom:4px}.monthly-kpi-panel{margin-top:10px}.monthly-kpi-table{min-width:1100px}.monthly-kpi-table td,.monthly-kpi-table th{vertical-align:middle}.warning-note{background:#fff9e7;border-color:#f2dc9b;color:#765814}.kpi-modal-hero{display:flex;justify-content:space-between;gap:16px;align-items:end;padding:14px;border:1px solid #dcebf3;border-radius:14px;background:linear-gradient(135deg,#f4fbff,#f4fffb);margin-bottom:12px}.kpi-modal-hero h4{font-size:20px;margin:3px 0}.kpi-modal-hero p{margin:0;color:#6f899c;font-size:11px}.kpi-add-row{display:flex;gap:8px;min-width:420px}.professional-kpi-editor{min-width:850px}.modal-action-bar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #e4edf2}
.commercial-board{margin-top:12px}.commercial-table{min-width:2100px;font-size:10px}.commercial-table th{white-space:normal;line-height:1.25;background:linear-gradient(180deg,#fff8c7,#ffec72);color:#153756;border-color:#e6d46e;text-align:center}.commercial-table td{text-align:center;vertical-align:middle}.commercial-table td:nth-child(3),.commercial-table td:nth-child(4),.commercial-table td:nth-child(16),.commercial-table td:nth-child(17){text-align:left}.commercial-section td{background:#fff5a7!important;color:#294563!important;font-weight:950;text-align:left!important;letter-spacing:.03em;border-top:2px solid #e6cb48}.commercial-row.risk-row td{background:#fff8f8}.priority-badge{min-width:26px;height:26px;border-radius:999px;background:#e9f5ff;color:#1677b8;display:inline-grid;place-items:center;font-weight:900}.commercial-row.risk-row .priority-badge{background:#ffe9ed;color:#c0334b}.commercial-summary{margin-top:0}
.delay-quick-head{display:flex;justify-content:space-between;align-items:end;gap:14px;padding:12px 14px;border:1px solid #dcebf3;background:linear-gradient(135deg,#f4fbff,#fff);border-radius:14px;margin-bottom:10px}.delay-quick-head h4{margin:3px 0;font-size:18px}.delay-quick-head p{margin:0;color:#728ca0;font-size:10px}.delay-presets{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}.preset-chip{border:1px solid #cfe0e9;background:#f7fbfd;color:#406b87;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:800}.preset-chip:hover{border-color:#5bb6df;background:#effaff}.batch-delay-table{min-width:1250px}.batch-delay-table input,.batch-delay-table select{min-width:135px}.batch-delay-table .d-reason{min-width:220px}.switch-mini{display:flex;justify-content:center}.switch-mini input{display:none}.switch-mini span{width:34px;height:18px;border-radius:999px;background:#d7e2e8;position:relative;transition:.2s}.switch-mini span:after{content:"";width:14px;height:14px;background:#fff;border-radius:50%;position:absolute;left:2px;top:2px;box-shadow:0 1px 4px rgba(0,0,0,.16);transition:.2s}.switch-mini input:checked+span{background:#1fc39f}.switch-mini input:checked+span:after{transform:translateX(16px)}
.report-toolbar{display:flex;justify-content:space-between;align-items:end;gap:12px;background:#fff;border:1px solid #dce9f1;border-radius:14px;padding:10px 12px;margin-bottom:10px}.report-range{display:flex;align-items:end;gap:8px}.report-range label{display:block;font-size:9px;color:#718ca1;font-weight:800;margin-bottom:4px}.report-range .input{min-width:160px}.quick-ranges{display:flex;gap:6px}.report-tabs{margin-bottom:12px}.report-delay-grid{margin-bottom:12px}.delay-bar{background:linear-gradient(90deg,#ffc14f,#f46e78)}
.intelligence-tabs{margin-bottom:12px}.history-table{min-width:1500px}.history-table td{vertical-align:middle}.history-hint{margin:10px 0;padding:9px 11px;border-radius:10px;background:#eef9ff;border:1px solid #cae8f6;color:#326783;font-size:10px}.compare-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}.compare-choice{border:1px solid #dce8ef;border-radius:11px;padding:9px;background:#fbfdfe;display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:start}.compare-choice input{margin-top:2px}.compare-choice span{font-weight:900;color:#1b537d;font-size:10px}.compare-choice small{grid-column:2;color:#7b92a4;font-size:8px}.compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}.compare-card{background:#fff;border:1px solid #dce9f1;border-radius:16px;padding:14px;box-shadow:var(--shadow-soft)}.compare-card h3{margin:4px 0 12px;color:#104b7d}.compare-stat{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #edf3f6;font-size:10px}.compare-stat span{color:#748da0}.compare-stat b{color:#244b6d;text-align:right}.compare-bar{height:7px;background:#e9f0f4;border-radius:999px;margin:8px 0}.compare-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2b9df0,#17c5ad)}
@media(max-width:1180px){.compare-picker,.compare-grid{grid-template-columns:repeat(2,1fr)}.kpi-add-row{min-width:0;flex:1}.commercial-table{min-width:1900px}}
@media(max-width:760px){.berth-lane-pro{grid-template-columns:90px minmax(520px,1fr)}.timeline-days-pro{grid-template-columns:90px repeat(7,minmax(72px,1fr));min-width:650px}.berth-pro{overflow:auto}.kpi-modal-hero,.report-toolbar{display:block}.kpi-add-row,.report-range,.quick-ranges{margin-top:10px;display:flex;flex-wrap:wrap}.compare-picker,.compare-grid{grid-template-columns:1fr}.modal-action-bar{align-items:stretch;flex-direction:column}}

/* ===== VesselPlan V2.4 Reliability + Data Intelligence ===== */
.operations-cards,.cards.operations-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.vessel-card-v24{padding:16px;border-top:3px solid #19b7b1}.vessel-card-v24.demurrage{border-top-color:#ef5b6c}.vessel-card-v24.despatch{border-top-color:#29bd83}
.v24-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.v24-card-head h3{margin:3px 0 5px;font-size:19px}.priority-chip{display:inline-flex;margin-left:6px;padding:3px 7px;border-radius:999px;background:#fff4d9;color:#98620b;font-size:8px;font-weight:900}
.v24-progress-line{margin:13px 0 11px}.v24-progress-line>div:first-child{display:flex;justify-content:space-between;color:#56758e;font-size:10px}.v24-progress-line>div:first-child b{color:#123f67;font-size:15px}.progress.xl{height:10px;margin:6px 0 5px}.v24-progress-line small{color:#7991a5;font-size:9px}
.v24-decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.decision-block{border:1px solid #dfeaf1;background:#f8fbfd;border-radius:12px;padding:10px}.decision-block.warn{background:#fff8ec;border-color:#f3d19a}.decision-block span{display:block;color:#718ba0;font-size:8px;text-transform:uppercase;font-weight:900}.decision-block b{display:block;color:#123f67;font-size:14px;margin:4px 0}.decision-block small{display:block;color:#8197a9;font-size:8px;line-height:1.35}.decision-block.warn b{color:#b86b09}
.v24-laytime-strip{display:grid;grid-template-columns:.7fr .7fr .8fr 1.8fr;gap:8px;margin-top:10px;align-items:stretch}.v24-laytime-strip>div{border:1px solid #dfeaf1;background:#fff;border-radius:12px;padding:9px}.v24-laytime-strip>div>span{display:block;color:#7890a3;font-size:8px;font-weight:900;text-transform:uppercase}.v24-laytime-strip>div>b{display:block;color:#173f65;font-size:13px;margin-top:4px}.smart-risk{height:100%;display:flex!important;flex-direction:column;justify-content:center}.smart-risk b{font-size:15px!important}.smart-risk small{font-size:8px;color:#7b92a4}.smart-risk.demurrage{background:#fff1f3;border-color:#f6bcc5}.smart-risk.demurrage b{color:#df4058}.smart-risk.despatch{background:#effbf5;border-color:#bce9d3}.smart-risk.despatch b{color:#0a9b63}.smart-risk.neutral{background:#f5f8fa}.history-hint.compact{margin-top:9px;padding:7px 9px;font-size:9px}
.v24-quick-update{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:10px;align-items:end}.v24-quick-update label span{display:block;color:#718ba0;font-size:8px;font-weight:900;margin:0 0 4px 3px}.compact-actions{margin-top:8px}.compact-actions .btn{min-height:30px}
.berth-conflict{outline:2px solid #ef476f!important;box-shadow:0 0 0 3px rgba(239,71,111,.14)!important}.conflict-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;background:#fff0f2;color:#d93e55;font-size:7px;font-weight:900;margin-top:3px}
.data-source-chip{font-size:8px;color:#6e879a;padding:3px 6px;border:1px solid #dce8ef;border-radius:999px;background:#f8fbfd}
@media(max-width:1500px){.operations-cards,.cards.operations-cards{grid-template-columns:1fr!important}}
@media(max-width:900px){.v24-decision-grid,.v24-laytime-strip{grid-template-columns:1fr 1fr}.smart-risk{grid-column:1/-1}.v24-quick-update{grid-template-columns:1fr}.v24-quick-update .btn{width:100%}}
.legend-box.conflict{background:#ef476f;box-shadow:0 0 0 2px rgba(239,71,111,.12)}