:root{
  --navy:#265fac; --blue:#4a8dcb; --ink:#22272e; --muted:#6b7280;
  --line:#e3e7ee; --bg:#f2f6fc; --card:#fff; --accent:#eef2f8;
  --ok:#1d7a46; --warn:#a6600a; --bad:#a62a2a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;
}
header{
  position:sticky; top:0; z-index:20; background:linear-gradient(90deg,#1f4e92,#265fac 55%,#2f6cbb); color:#fff;
  display:flex; align-items:center; gap:20px; padding:0 20px; height:58px;
}
.brand{font-weight:700; font-size:16px}
.brand span{font-weight:400; font-size:10px; opacity:.6; margin-left:8px; letter-spacing:1px}
nav{display:flex; gap:4px}
nav button{background:transparent; color:#c9d4e6; border:0; padding:8px 13px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit}
nav button:hover{background:rgba(255,255,255,.08); color:#fff}
nav button.on{background:rgba(255,255,255,.16); color:#fff; font-weight:600}
header .right{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px}
header .right button{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); padding:6px 10px; border-radius:6px; cursor:pointer; font-size:12px; font-family:inherit}
header .right button:hover{background:rgba(255,255,255,.22)}
.user-chip{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:5px 10px; border-radius:999px; color:#e8eef9}

main{padding:20px; max-width:1500px; margin:0 auto}
h2{font-size:15px; color:var(--navy); margin:0 0 12px}
h3{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:18px 0 8px}
.section{margin-bottom:26px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:22px}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.card .k{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}
.card .v{font-size:26px; font-weight:700; color:var(--navy); margin-top:4px}
.card .s{font-size:11px; color:var(--muted)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}
.panel{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px}
.bars{display:flex; flex-direction:column; gap:8px}
.bar{display:grid; grid-template-columns:150px 1fr 44px; align-items:center; gap:10px; font-size:13px}
.bar .track{background:var(--accent); height:16px; border-radius:4px; overflow:hidden}
.bar .fill{height:100%; background:var(--blue)}
.bar .n{text-align:right; color:var(--muted); font-size:12px}

.toolbar{display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
input,select,textarea{
  border:1px solid var(--line); background:#fff; border-radius:7px; padding:8px 10px;
  font-size:13px; font-family:inherit; color:var(--ink); outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,84,150,.12)}
input[type=search]{min-width:320px}
.btn{border:1px solid var(--line); background:#fff; border-radius:7px; padding:8px 12px; font-size:13px; cursor:pointer; font-family:inherit; color:var(--ink)}
.btn:hover{border-color:var(--blue); color:var(--blue)}
.btn.primary{background:linear-gradient(90deg,#1f4e92,#265fac 55%,#2f6cbb); color:#fff; border-color:var(--navy)}
.btn.primary:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.btn.small{padding:4px 10px; font-size:12px}
.btn.wide{width:100%; padding:11px}
.spacer{flex:1}

table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; white-space:nowrap}
th{background:var(--accent); color:var(--navy); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f7f9fc}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
.mono{font-family:Consolas,"SF Mono",monospace; font-size:12.5px}
.muted{color:var(--muted)}
.empty{padding:36px; text-align:center; color:var(--muted); background:#fff; border:1px dashed var(--line); border-radius:10px}

.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600}
.b-booked{background:#e8eef9; color:#2e5496}
.b-sailed{background:#e6f4ec; color:var(--ok)}
.b-arrived{background:#e6f4ec; color:var(--ok)}
.b-cancelled{background:#fbeaea; color:var(--bad)}
.b-empty{background:#f1f2f4; color:var(--muted)}
.pager{display:flex; gap:8px; align-items:center; margin-top:12px; font-size:12px; color:var(--muted)}

#overlay{position:fixed; inset:0; background:rgba(20,28,45,.35); opacity:0; pointer-events:none; transition:opacity .18s; z-index:30}
#overlay.on{opacity:1; pointer-events:auto}
#drawer{position:fixed; top:0; right:0; height:100%; width:640px; max-width:94vw; background:#fff; border-left:1px solid var(--line); z-index:31; transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column}
#drawer.on{transform:translateX(0)}
.drawer-head{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px}
.drawer-head .fn{font-size:17px; font-weight:700; color:var(--navy)}
.drawer-head .sub{font-size:12px; color:var(--muted); margin-top:2px}
.drawer-body{padding:16px 20px; overflow:auto}
.close{margin-left:auto; border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--muted)}
.close:hover{color:var(--bad)}
.kv{display:grid; grid-template-columns:120px 1fr 120px 1fr; gap:8px 12px; font-size:13px; margin-bottom:14px}
.kv .k{color:var(--muted); font-size:12px}
.kv .v{font-weight:500; overflow:hidden; text-overflow:ellipsis}
.mini{width:100%; border:1px solid var(--line); border-radius:8px; margin-bottom:12px}
.mini th,.mini td{padding:7px 10px; font-size:12px}
.note{background:#fbf7ec; border:1px solid #eadfc2; color:#6b5a2a; border-radius:8px; padding:9px 11px; font-size:12px; margin-bottom:12px}
.row-between{display:flex; align-items:center; gap:10px}
.row-between h3{margin:16px 0 8px}
.inline-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.history{font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px}

/* modal */
.modal-back{position:fixed; inset:0; background:rgba(20,28,45,.45); z-index:40; display:flex; align-items:flex-start; justify-content:center; padding:60px 16px}
.modal-back[hidden]{display:none}
.modal{background:#fff; border-radius:12px; width:680px; max-width:96vw; box-shadow:0 20px 60px rgba(0,0,0,.25); display:flex; flex-direction:column; max-height:82vh}
.modal-head{display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); font-weight:700; color:var(--navy)}
.modal-body{padding:18px 20px; overflow:auto}
.modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid var(--line)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid.one{grid-template-columns:1fr}
.form-grid label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted)}
.form-grid input,.form-grid select{width:100%}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#1f3864; color:#fff; padding:10px 18px; border-radius:999px; font-size:13px; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.bad{background:#a62a2a}

/* login */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(160deg,#1f3864 0%,#2e5496 60%,#3a6bb5 100%)}
.login-card{background:#fff; width:380px; max-width:92vw; border-radius:14px; padding:30px 28px; box-shadow:0 24px 60px rgba(0,0,0,.28)}
.login-brand{font-size:22px; font-weight:700; color:var(--navy)}
.login-sub{font-size:12px; color:var(--muted); margin:4px 0 22px}
.field{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); margin-bottom:14px}
.field input{width:100%}
.login-msg{color:var(--bad); font-size:12.5px; min-height:18px; margin-top:10px}
.login-foot{font-size:11px; color:var(--muted); margin-top:14px; text-align:center}
footer{padding:18px 20px 30px; color:var(--muted); font-size:11px; max-width:1500px; margin:0 auto}

/* master data tabs */
.tabs{display:flex; gap:4px; background:#e9edf4; padding:3px; border-radius:8px}
.tabs button{border:0; background:transparent; padding:7px 14px; border-radius:6px; font-size:13px; cursor:pointer; font-family:inherit; color:#41506b}
.tabs button.on{background:#fff; color:#1f3864; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chips{display:flex; gap:4px; flex-wrap:wrap}
.chip{background:#eef2f8; color:#2e5496; border-radius:999px; padding:2px 9px; font-size:11px}
.chip.warn{background:#fdf1e4; color:#a6600a}
.checkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 12px; max-height:220px; overflow:auto; border:1px solid #e3e7ee; border-radius:8px; padding:10px}
.checkgrid label{display:flex; align-items:center; gap:6px; font-size:12.5px; color:#22272e}

/* charge totals */
.margin-bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#eef2f8; border:1px solid #dbe3f0; border-radius:8px; padding:10px 14px; margin:14px 0 4px;
  font-size:12.5px; color:#1f3864; font-weight:600}
.margin-bar b{font-family:Consolas,monospace; font-size:14px}
.mini tfoot th{background:#eef2f8; color:#1f3864; font-size:12px; text-transform:none; letter-spacing:0}

/* service scope checkboxes */
.svc-box{border:1px solid #e3e7ee; border-radius:8px; padding:8px 10px 10px; grid-column:span 2}
.svc-box legend{font-size:11.5px; color:#6b7280; padding:0 4px}
.svc-box label{display:inline-flex; align-items:center; gap:5px; margin-right:16px; font-size:12.5px; color:#22272e; vertical-align:middle}
.svc-box input[type=checkbox]{margin:0}

/* brand */
.brand{display:flex; align-items:center; gap:8px}
.brand img.logo{height:30px; width:30px; border-radius:7px; background:#fff; padding:2px}
.login-logo{width:118px; display:block; margin:0 auto 12px}