*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,sans-serif;background:#f4f7fb;font-size:13px}

.screen{display:none;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1e4e96,#2e6ab6)}
.screen.active{display:flex}
.card{background:white;border-radius:10px;padding:36px 32px;width:400px;box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.card-logo{text-align:center;margin-bottom:20px}
.card-logo .icon{font-size:36px}
.card-logo-img{height:56px;max-width:200px;width:auto;display:block;margin:0 auto 12px;object-fit:contain}
.brand-logos{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-logos--card{justify-content:center;margin:0 auto 14px}
.hdr-logo-wrap.brand-logos{padding:5px 10px}
.brand-logo-sail{height:36px;max-width:76px;width:auto;object-fit:contain;display:block}
.brand-logo-pravartanam{height:40px;max-width:132px;width:auto;object-fit:contain;display:block}
.brand-logos-divider{width:1px;height:34px;background:#d0d7e2;flex-shrink:0}
.card-logo .brand-logo-sail{height:42px;max-width:88px}
.card-logo .brand-logo-pravartanam{height:50px;max-width:168px}
.card-logo .brand-logos-divider{height:40px}
.card-logo h1{font-size:17px;color:#1a2e4a;margin-top:8px;letter-spacing:.4px}
.card-logo p{font-size:12px;color:#999;margin-top:3px}
.card label{display:block;font-size:12px;font-weight:bold;color:#555;margin:13px 0 4px}
.card input{width:100%;padding:9px 11px;border:1px solid #ccd;border-radius:5px;font-size:13px}
.card input:focus{outline:none;border-color:#1e56a0;box-shadow:0 0 0 3px rgba(30,86,160,.12)}
.btn-primary{width:100%;margin-top:20px;padding:11px;background:#1e56a0;color:white;border:none;border-radius:5px;font-size:14px;font-weight:bold;cursor:pointer}
.btn-primary:hover{background:#1e4e96}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.card-err{margin-top:10px;padding:8px 11px;background:#fde8e8;border-left:3px solid #c0392b;border-radius:4px;font-size:12px;color:#c0392b;display:none}

.branch-card{border:2px solid #dde;border-radius:8px;padding:18px 12px;text-align:center;cursor:pointer;transition:all .15s;font-size:13px}
.branch-card:hover{border-color:#1e56a0;background:#eef3fa;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.branch-card.selected{border-color:#1e56a0;background:#eef3fa;box-shadow:0 4px 12px rgba(30,86,160,.2)}

#loading{position:fixed;inset:0;background:rgba(26,46,74,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;color:white}
#loading.hidden{display:none}
.spinner{width:42px;height:42px;border:4px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{font-size:14px;opacity:.9}

#main-app{display:none}
.app-header{background:linear-gradient(135deg,#1e4e96,#2d6ab6);color:white;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.hdr-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.hdr-logo-wrap{flex-shrink:0;background:#fff;border-radius:6px;padding:4px 8px;line-height:0}
.hdr-logo{height:44px;max-width:160px;width:auto;display:block;object-fit:contain}
.hdr-titles{min-width:0}
.app-header h1{font-size:15px;font-weight:bold;letter-spacing:.4px}
.app-header p{font-size:11px;opacity:.7;margin-top:2px}
.hdr-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hdr-right label{font-size:12px;white-space:nowrap}
.hdr-right input[type=date]{padding:5px 8px;border:none;border-radius:4px;font-size:13px}
.user-badge{background:rgba(255,255,255,.18);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:bold;white-space:nowrap}
.save-st{font-size:12px;min-width:90px;text-align:right;opacity:.9;font-weight:bold;padding:3px 8px;border-radius:4px;transition:all .3s}
.save-st.saving{color:#fff;background:rgba(249,202,36,.35)}
.save-st.saved{color:#6ab04c;background:rgba(106,176,76,.15)}
.save-st.err{color:#fff;background:rgba(235,77,75,.7);animation:blink .6s step-end 3}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

.btn{padding:5px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:bold;transition:opacity .15s}
.btn:hover{opacity:.8}
.btn-red{background:#c0392b;color:white}.btn-blue{background:#1e56a0;color:white}
.btn-grey{background:#5a6a7a;color:white}.btn-purple{background:#6a3aaa;color:white}
.btn-green{background:#1e7a46;color:white}.btn-orange{background:#e07b20;color:white}
.btn-sm{padding:3px 9px;font-size:11px}

.tabs{display:flex;background:#f0f4f9;border-bottom:3px solid #1e56a0;flex-wrap:wrap}
.tab{padding:9px 16px;color:#3a5878;cursor:pointer;font-size:12px;font-weight:bold;border-right:1px solid #dce6f0;transition:all .15s;user-select:none;white-space:nowrap;background:transparent}
.tab:hover{background:#e2ecf8;color:#1e4e96}
.tab.active{background:#ffffff;color:#1e4e96;border-bottom:3px solid #1e4e96;margin-bottom:-3px;font-weight:bold;box-shadow:0 -1px 0 #fff inset}
.tab.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

.tab-content{display:none;padding:12px 14px}
.tab-content.active{display:block}
/* Optimiser sub-tabs (mirrors existing tab look, slightly smaller) */
.opt-sub{padding:7px 12px;color:#3a5878;cursor:pointer;font-size:11px;font-weight:bold;border-radius:4px 4px 0 0;border:1px solid transparent;border-bottom:none;background:transparent;user-select:none;white-space:nowrap}
.opt-sub:hover{background:#eef2f7}
.opt-sub.active{background:white;color:#1e56a0;border-color:#dce6f0}
.note-bar{background:#eef3fa;border-left:4px solid #2d6cb8;padding:7px 12px;margin-bottom:10px;font-size:12px;border-radius:0 4px 4px 0}
.note-bar.green{background:#eef7f0;border-left-color:#2e7d4f}
.note-bar.blue{background:#eef3fa;border-left-color:#1e56a0}

.stock-table{width:100%;border-collapse:collapse;background:white;box-shadow:0 1px 5px rgba(0,0,0,.1);font-size:12.5px}
.stock-table th{background:#1e56a0;color:white;padding:6px 5px;text-align:center;border:1px solid #1a4e96;white-space:nowrap;font-size:12px}
.stock-table th.hs{background:#2d6cb8}
.stock-table td{border:1px solid #dde;padding:3px 5px;text-align:center;vertical-align:middle}
.stock-table td.cn{width:32px;color:#999;background:#f8f9fa}
.stock-table td.cc{font-weight:bold;text-align:left;background:#f4f7fb;white-space:nowrap;min-width:82px;padding-left:7px}
.stock-table td.cd{text-align:left;color:#555;background:#f9fafc;min-width:150px}
.stock-table td.ct{font-weight:bold;background:#ddeeff;color:#1a2e4a}
.stock-table tr:hover td.dc{background:#fffbee}
.stock-table input[type=number]{width:68px;border:1px solid #ccc;padding:3px 4px;text-align:right;font-size:12px;border-radius:3px;background:#fffef8}
.stock-table input:focus{outline:none;border-color:#1e56a0;background:#eaf4ff}
.stock-table input.hv{background:#f0fff4;border-color:#1e7a46}
.stock-table input:disabled{background:#f0f0f0;color:#aaa;cursor:not-allowed}
.rs td{background:#fdf6e8!important;color:#7a5020;font-weight:bold;font-size:12.5px;padding:5px 10px;border-top:2px solid #e8c878}
.rt td{background:#eef7ee!important;font-weight:bold;border-top:2px solid #7abf7a}
.rg td{background:#e8f0f8!important;font-weight:bold;border-top:2px solid #5a8abf;font-size:13px}
.thV{background:#1e56a0!important}.thH{background:#1a7a5c!important}.thP{background:#5a3a90!important}.thD{background:#2a6e2a!important}.thGP{background:#8a4a00!important}.thG{background:#a02020!important}
.tdG{background:#fde8d8!important;font-weight:bold;color:#5c2800}
.con-cat-hard td{background:#deeef8!important;color:#1e3a6e;font-weight:bold;font-style:italic;font-size:12px;padding:5px 8px;border-top:2px solid #1e56a0}
.con-cat-soft td{background:#d8f0e0!important;color:#0e4020;font-weight:bold;font-style:italic;font-size:12px;padding:5px 8px;border-top:2px solid #2a7a50}
.con-cat-pci  td{background:#f8e8d4!important;color:#5c3000;font-weight:bold;font-style:italic;font-size:12px;padding:5px 8px;border-top:2px solid #c07030}
.con-cat-lime td{background:#d4f0ec!important;color:#0a3830;font-weight:bold;font-style:italic;font-size:12px;padding:5px 8px;border-top:2px solid #1aa090}
.con-tot-hard td{background:#c8dff5!important;color:#0e2e5c;font-weight:bold;font-style:italic;border-top:2px solid #1e56a0}
.con-tot-soft td{background:#c4e8d4!important;color:#0a3020;font-weight:bold;font-style:italic;border-top:2px solid #2a7a50}
.con-tot-pci  td{background:#f5e0c8!important;color:#5c2800;font-weight:bold;font-style:italic;border-top:2px solid #c07030}
.con-coal-tot td{background:#1e56a0!important;color:white;font-weight:bold;font-size:13px;border-top:3px solid #e07b20}
.con-tot-lime td{background:#c4eee8!important;color:#083830;font-weight:bold;font-style:italic;border-top:2px solid #1aa090}
.con-grade td{background:white!important;color:#333}
.con-grade td.cv{color:#1e3a6e;background:#eef4fc!important}
.con-grade td.cg{color:#0e4e3a;background:#e4f5ec!important}
.con-grade td.cp{color:#3a1a6a;background:#f0eaf8!important}
.con-grade td.cgp{font-weight:bold;color:#7d3c00;background:#fef9e7!important}
.con-grade td.cd2{font-weight:bold;color:#1a4a1a;background:#eafaf1!important}
.con-grade td.ch{font-weight:bold;color:#1a7a5c;background:#e8f8f5!important}
.con-grade td.ctot{font-weight:bold;color:#5c2800;background:#fde8d8!important}
.actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end;align-items:center}
.actions .note{flex:1;font-size:11px;color:#888}

/* Form panel styles */
.form-panel{background:white;border-radius:6px;box-shadow:0 1px 4px rgba(30,86,160,.1);padding:16px 18px;margin-bottom:14px;border:1px solid #e0e8f4}
.form-panel h3{font-size:13px;color:#1a2e4a;margin-bottom:12px;font-weight:bold}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.form-grid.wide{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fg{display:flex;flex-direction:column;gap:3px}
.fg label{font-size:11px;font-weight:bold;color:#555}
.fg input,.fg select{padding:6px 8px;border:1px solid #ccd;border-radius:4px;font-size:12px}
.fg input:focus,.fg select:focus{outline:none;border-color:#1e56a0}
.grade-rows{border:1px solid #dde;border-radius:4px;overflow:hidden;margin-bottom:10px}
.grade-row{display:grid;grid-template-columns:1.2fr 1fr 80px 80px 28px;gap:6px;padding:6px 8px;align-items:center;border-bottom:1px solid #f0f0f0;background:white}
.grade-row:last-child{border-bottom:none}
.grade-row:nth-child(even){background:#f9fafc}
.grade-row select,.grade-row input{padding:4px 6px;border:1px solid #ccd;border-radius:3px;font-size:12px;width:100%}
.grade-row .rm-btn{background:#c0392b;color:white;border:none;border-radius:3px;cursor:pointer;font-size:13px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0}
.grade-row-hdr{display:grid;grid-template-columns:1.2fr 1fr 80px 80px 28px;gap:6px;padding:5px 8px;background:#f4f7fb;font-size:11px;font-weight:bold;color:#555;border-bottom:1px solid #dde}

/* Data table */
.data-table{width:100%;border-collapse:collapse;font-size:12px;background:white}
.data-table th{background:#1e56a0;color:white;padding:6px 8px;text-align:left;font-size:11px;white-space:nowrap}
.data-table td{border-bottom:1px solid #eee;padding:6px 8px;vertical-align:top}
.data-table tr:hover td{background:#f0f5fc}
.data-table .rake-group-hdr td{background:#f0f7ff;font-weight:bold;color:#1a2e4a;border-top:2px solid #1e56a0}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold;color:white}
.badge-IR{background:#1e56a0}.badge-GPWIS{background:#6a3aaa}
.badge-BSP{background:#1a5276}.badge-RSP{background:#1a7a5c}
.badge-DSP{background:#5a3a90}.badge-ISP{background:#a02020}.badge-BSL{background:#784212}
.badge-vizag{background:#1a5276}.badge-haldia{background:#1a7a5c}.badge-paradip{background:#5a3a90}
.badge-gangavaram{background:#0d4d70}.badge-kictppl{background:#5a3a90}.badge-dhamra{background:#1a4a1a}.badge-gopalpur{background:#7d3c00}
/* Commodity Loan Transfer counterparties */
.badge-RINL-VSPS{background:#0d4d70}.badge-NSL-NMAG{background:#7a1a4a}.badge-CLT{background:#b35900}

/* Reports */
.report-card{background:white;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.1);padding:14px 16px;cursor:pointer;border:2px solid transparent;transition:all .15s}
.report-card:hover{border-color:#1e56a0;transform:translateY(-1px)}
/* Monthly Plan modal sits above everything */
#mp-override-modal{display:none}
#mp-override-modal.open{display:flex !important}
/* Modal dialog styling */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.modal-close {
  font-size: 20px;
  cursor: pointer;
  color: #888;
}
.modal-close:hover {
  color: #333;
}
/* Plant Stock — minimal additions; reuse form-panel, data-table, db-kpi from elsewhere */
.psSubTab{background:transparent;border:none;padding:7px 12px;font-size:12px;cursor:pointer;color:#666;border-bottom:2px solid transparent;font-weight:bold}
.psSubTab.psSubActive{color:#1e56a0;border-bottom-color:#1e56a0}

/* Sub-tab ribbons (Insights Dashboard/Reports/…, MGT, Plant Stock, etc.)
   On mobile these scroll horizontally so the page itself stays fixed width. */
.mob-subtab-strip .psSubTab,
.mob-subtab-strip .opt-sub{flex-shrink:0}
.psPrevTab{background:#f4f7fb;border:1px solid #dde;padding:4px 9px;font-size:11px;cursor:pointer;color:#555;border-radius:4px;font-weight:bold}
.psPrevTab.psPrevActive{background:#1e56a0;color:white;border-color:#1e56a0}
.ps-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-weight:bold;font-size:11px}
.ps-plant-band{background:#eef3fa;border-left:3px solid #1e56a0;padding:6px 12px;margin-top:10px;font-size:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;border-radius:0 4px 0 0}
.ps-plant-band strong{color:#0d2444;font-size:13px}
.ps-plant-band .meta{color:#555;font-weight:normal;font-size:11px}
.ps-plant-band .badge-low{background:#c0392b;color:white;padding:1px 7px;border-radius:8px;font-size:10px;margin-left:4px}
.report-card.active{border-color:#e07b20;background:#fff8f0}
.report-card .rc-icon{font-size:26px;margin-bottom:6px}
.report-card .rc-title{font-size:13px;font-weight:bold;color:#1a2e4a}
.report-card .rc-desc{font-size:11px;color:#888;margin-top:3px}
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.report-filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px;background:white;padding:10px 14px;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.report-filters .fg{min-width:130px}
#report-output{background:white;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.1);padding:14px;overflow-x:auto}

#toast{position:fixed;bottom:20px;right:20px;background:#2d3436;color:white;padding:10px 16px;border-radius:6px;font-size:13px;font-weight:bold;box-shadow:0 3px 10px rgba(0,0,0,.25);display:none;z-index:9999}

@media print{
  .tabs,.actions,.app-header,.note-bar,#toast,.screen,#loading,.form-panel,.report-filters,.report-grid{display:none!important}
  .tab-content{display:block!important;padding:0!important}
  .tab-content:not(.active){display:none!important}
  body{background:white}
  .stock-table input{border:none;background:transparent;width:60px}
}

/* ── Analytics Tab ── */
.an-section{background:white;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.1);padding:16px 18px;margin-bottom:16px}
.an-section h3{font-size:13px;font-weight:bold;color:#1a2e4a;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #eef}
.an-chart-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.an-chart-box{background:#f0f5fc;border-radius:6px;padding:12px;flex:1;min-width:280px;max-width:580px}
.an-chart-box h4{font-size:11px;font-weight:bold;color:#555;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.an-chart-box canvas{max-height:220px}
.an-alert{background:#fff3cd;border-left:4px solid #e07b20;border-radius:0 4px 4px 0;padding:10px 14px;font-size:12px;margin-bottom:12px}
.an-alert.red{background:#fde8e8;border-left-color:#c0392b}
.an-controls{background:white;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.1);padding:12px 16px;margin-bottom:14px;display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.an-controls label{font-size:11px;font-weight:bold;color:#555;display:block;margin-bottom:3px}
.an-controls input,.an-controls select{padding:5px 8px;border:1px solid #ccd;border-radius:4px;font-size:12px}
.an-kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.an-kpi{background:#f0f5fc;border-radius:6px;padding:12px 16px;flex:1;min-width:130px;border-left:4px solid #1e56a0}
.an-kpi .kv{font-size:20px;font-weight:bold;color:#1a2e4a}
.an-kpi .kl{font-size:11px;color:#777;margin-top:3px}
.an-kpi.red{border-left-color:#c0392b} .an-kpi.green{border-left-color:#1e7a46} .an-kpi.amber{border-left-color:#e07b20}
.req-star{color:#c0392b;font-size:13px;margin-left:2px}
/* ── MGT Tracker ─────────────────────────────────────────── */
.mgt-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:#f4f6f9;border:1px solid #dde;border-radius:6px;margin-bottom:12px}
.mgt-port-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:16px}
.mgt-port-card{background:#fff;border-radius:8px;border:1px solid #dde;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.mgt-port-card .mgt-pc-hdr{font-size:12px;font-weight:bold;color:#1a2e4a;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mgt-port-card .mgt-pc-port{font-size:13px;font-weight:800;letter-spacing:.5px}
.mgt-bar-wrap{background:#e8edf3;border-radius:4px;height:8px;overflow:hidden;margin:4px 0}
.mgt-bar{height:8px;border-radius:4px;transition:width .4s}
.mgt-bar.green{background:#1e7a46} .mgt-bar.amber{background:#e07b20} .mgt-bar.red{background:#c0392b} .mgt-bar.grey{background:#aab}
.mgt-pc-row{font-size:11px;color:#444;margin-top:5px;display:flex;justify-content:space-between}
.mgt-pc-badge{font-size:10px;font-weight:bold;padding:2px 7px;border-radius:10px;color:white}
.mgt-pc-badge.green{background:#1e7a46} .mgt-pc-badge.amber{background:#e07b20} .mgt-pc-badge.red{background:#c0392b} .mgt-pc-badge.grey{background:#888}
.mgt-tbl{width:100%;border-collapse:collapse;font-size:12px}
.mgt-tbl th{background:#1a2e4a;color:white;padding:6px 9px;text-align:left;white-space:nowrap;font-weight:600;font-size:11px}
.mgt-tbl td{padding:6px 9px;border-bottom:1px solid #eef;vertical-align:middle}
.mgt-tbl tr:hover td{background:#f7f9ff}
.mgt-tbl tr.completed td{color:#999}
.mgt-prog-wrap{background:#e8edf3;border-radius:3px;height:6px;width:80px;overflow:hidden;display:inline-block;vertical-align:middle;margin-left:6px}
.mgt-prog{height:6px;border-radius:3px}
.mgt-form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
/* Dashboard MGT mini-card */
.db-mgt-row{display:flex;flex-wrap:wrap;gap:8px}
.db-mgt-chip{background:#fff;border:1px solid #dde;border-radius:6px;padding:8px 12px;flex:1;min-width:140px;border-left:4px solid #888}
.db-mgt-chip.green{border-left-color:#1e7a46} .db-mgt-chip.amber{border-left-color:#e07b20} .db-mgt-chip.red{border-left-color:#c0392b}
.db-mgt-chip .mc-port{font-size:10px;font-weight:bold;color:#777;text-transform:uppercase;letter-spacing:.5px}
.db-mgt-chip .mc-val{font-size:14px;font-weight:bold;margin-top:2px}
.db-mgt-chip .mc-sub{font-size:10px;color:#888;margin-top:2px}
.vp-badge-arriving{background:#1e56a0;color:white;display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold}
.vp-badge-waiting{background:#e07b20;color:white;display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold}
.vp-badge-berthed{background:#1e7a46;color:white;display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold}
.vp-badge-completed{background:#4d2e7a;color:white;display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold}
.vp-badge-sailed{background:#555;color:white;display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold}
.vp-7day-card{background:#f5f2e8;border:1px solid #c4a03a;border-radius:8px;padding:10px 14px;margin-bottom:12px}
.vp-7day-card h4{color:#b7770d;font-size:12px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.vp-7day-row{display:flex;flex-wrap:wrap;gap:8px}
/* ETA Ageing Panel */
.age-bucket{border-radius:6px;margin-bottom:10px;overflow:hidden}
.age-bucket-hdr{padding:7px 12px;font-size:11px;font-weight:bold;display:flex;justify-content:space-between;align-items:center}
.age-bucket-hdr .age-count{background:rgba(255,255,255,.25);border-radius:10px;padding:2px 8px;font-size:11px}
.age-1-7 .age-bucket-hdr{background:#e07b20;color:white}
.age-8-14 .age-bucket-hdr{background:#1e56a0;color:white}
.age-15p .age-bucket-hdr{background:#1e7a46;color:white}
.age-1-7{border:1px solid #e07b20}
.age-8-14{border:1px solid #1e56a0}
.age-15p{border:1px solid #1e7a46}
.age-vessel-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.5fr 1fr;gap:0;background:white;border-bottom:1px solid #eee;font-size:11px;align-items:center}
.age-vessel-row:last-child{border-bottom:none}
.age-vessel-row>div{padding:7px 10px}
.age-vessel-row .ave-name{font-weight:bold;color:#1a2e4a}
.age-vessel-row .ave-loc{color:#1e7a46;font-size:10.5px}
.age-vessel-row .ave-eta{font-weight:bold}
.age-vessel-row .ave-days{font-weight:bold;text-align:center;border-radius:12px;padding:3px 8px;font-size:11px;display:inline-block}
.age-days-1-7{background:#fdebd0;color:#e07b20}
.age-days-8-14{background:#d6eaf8;color:#1e56a0}
.age-days-15p{background:#d5f5e3;color:#1e7a46}
.age-tbl-hdr{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.5fr 1fr;background:#f0f2f5;font-size:10px;font-weight:bold;color:#888;text-transform:uppercase;border-bottom:1px solid #dde}
.age-tbl-hdr>div{padding:5px 10px}
.age-empty{padding:12px;text-align:center;color:#aaa;font-size:12px;background:white}
.badge-BCME{background:#1e7a46}.badge-IISD{background:#5a3a90}
/* ── DASHBOARD ── */
.db-wrap{padding:2px 0}
.db-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.db-title{font-size:15px;font-weight:bold;color:#1e4e96;display:flex;align-items:center;gap:8px}
.db-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:#888}
.db-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin-bottom:14px}
.db-kpi{background:white;border-radius:8px;padding:11px 13px;box-shadow:0 1px 5px rgba(0,0,0,.09);border-left:4px solid #ccc;cursor:default;min-width:0}
.db-kpi-val{font-size:19px;font-weight:bold;line-height:1.15;letter-spacing:-.4px}
.db-kpi-lbl{font-size:10px;color:#555;font-weight:bold;text-transform:uppercase;margin-top:3px;letter-spacing:.3px;line-height:1.25}
.db-kpi-sub{font-size:9px;color:#888;margin-top:3px;line-height:1.35;word-break:break-word}
.db-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.db-grid-3{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:860px){.db-grid-2,.db-grid-3{grid-template-columns:1fr}}
.db-card{background:white;border-radius:8px;padding:14px 16px;box-shadow:0 1px 5px rgba(0,0,0,.09);margin-bottom:0}
.db-chdr{font-size:12px;font-weight:bold;color:#1e4e96;border-bottom:2px solid #e8eef7;padding-bottom:7px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.db-chdr-sub{font-size:10px;color:#999;font-weight:normal}
.db-vessel-row{display:grid;grid-template-columns:10px 1fr 75px 62px 52px 72px;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid #f0f4f9;font-size:11px}
.db-vessel-row:last-child{border-bottom:none}
.db-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.db-dot-berthed{background:#1e7a46}.db-dot-arriving{background:#e07b20}
.db-dot-waiting{background:#2e86c1}.db-dot-loading{background:#9b59b6}.db-dot-discharging{background:#16a085}
.db-stock-bar{height:7px;background:#e8eef7;border-radius:4px;margin:3px 0 2px;overflow:hidden}
.db-stock-fill{height:100%;border-radius:4px;transition:width .5s ease}
.db-pln-row{display:grid;grid-template-columns:40px 1fr 36px 58px;align-items:center;gap:6px;margin-bottom:7px;font-size:11px}
.db-pln-wrap{height:11px;background:#e8eef7;border-radius:5px;overflow:hidden}
.db-pln-bar{height:100%;border-radius:5px;transition:width .5s ease}
.db-alert{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #f5f5f5;font-size:11px}
.db-alert:last-child{border-bottom:none}
.db-act{display:grid;grid-template-columns:14px 1fr 65px 55px 70px;align-items:center;gap:5px;padding:5px 0;border-bottom:1px solid #f5f5f5;font-size:11px}
.db-act:last-child{border-bottom:none}
.db-empty{color:#bbb;font-size:11px;padding:8px 0;text-align:center}
/* Novel cockpit panels */
.db-novel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.db-novel-panel{background:#fff;border:1px solid #eaeef3;border-radius:10px;padding:14px 16px;min-height:120px}
.db-novel-wide{grid-column:1/-1}
.db-novel-empty{color:#888;font-size:12px;padding:12px 4px;line-height:1.5}
.db-novel-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.db-novel-title{font-size:13px;font-weight:600;color:#1a2e4a}
.db-novel-sub{font-size:10px;color:#888;margin-top:2px}
.db-novel-legend{display:flex;gap:12px;font-size:10px;color:#666;align-items:center}
.db-novel-legend .c{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.db-novel-legend .c.crit{background:#A32D2D}
.db-novel-legend .c.watch{background:#BA7517}
.db-novel-legend .c.heal{background:#0F6E56}
.db-novel-total{text-align:right}
.db-novel-total .l{font-size:9px;color:#888;letter-spacing:.4px}
.db-novel-total .v{font-size:22px;font-weight:600;color:#A32D2D}
.db-novel-total .u{font-size:12px;color:#888}
.db-novel-row-hdr{display:grid;gap:8px;font-size:9px;color:#888;letter-spacing:.4px;padding:6px 8px;border-bottom:1px solid #eef0f3}
.db-novel-row-hdr.stockout,.db-novel-row.stockout{grid-template-columns:1.5fr 0.8fr 0.8fr 0.7fr 0.9fr}
.db-novel-row-hdr.mgt,.db-novel-row.mgt{grid-template-columns:80px 1fr 55px 85px 95px}
.db-novel-row{display:grid;gap:8px;font-size:12px;padding:8px;border-radius:6px;margin-top:4px;align-items:center;transition:background 150ms,transform 150ms}
.db-novel-row:hover{background:#f4f7fc;transform:translateX(2px)}
.db-novel-row.crit{background:#fcebeb;color:#501313}
.db-novel-row.watch{background:#faeeda;color:#412402}
.db-novel-row .r{text-align:right}
.db-novel-row .days.crit{color:#A32D2D;font-weight:600}
.db-novel-row .days.watch{color:#BA7517;font-weight:600}
.db-novel-row .days.heal{color:#0F6E56;font-weight:600}
.db-novel-mini{display:block;font-size:10px;opacity:.75;margin-top:2px}
.db-novel-bar{height:8px;background:rgba(0,0,0,.07);border-radius:4px;overflow:hidden}
.db-novel-bar>div{height:100%;border-radius:4px}
.db-novel-footer-warn{margin-top:10px;padding:10px 12px;background:#fcebeb;border-left:3px solid #A32D2D;border-radius:4px;font-size:11px;color:#501313}
.db-novel-footer-note{margin-top:10px;padding:10px 12px;background:#f0f2f5;border-radius:6px;font-size:11px;color:#444}
.db-novel-berth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.db-novel-port-block h4{font-size:10px;font-weight:600;color:#666;letter-spacing:.4px;margin-bottom:8px}
.db-novel-berth-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.db-novel-berth{padding:8px 10px;border-radius:6px;font-size:11px;cursor:pointer;transition:transform 150ms}
.db-novel-berth:hover{transform:translateY(-1px)}
.db-novel-berth.free{background:#eaf3de}
.db-novel-berth.watch{background:#faeeda}
.db-novel-berth.occ{background:#fcebeb}
.db-novel-berth .bn{font-weight:600}
.db-novel-berth .bs{font-size:9px;opacity:.85;margin-top:2px}
.db-novel-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.db-novel-kpi{background:#f4f6f9;border-radius:6px;padding:10px 12px;cursor:pointer}
.db-novel-kpi.crit{background:#fcebeb}
.db-novel-kpi .l{font-size:9px;color:#888}
.db-novel-kpi .v{font-size:16px;font-weight:600;display:block;margin-top:2px}
.db-novel-kpi .u{font-size:10px;color:#888}
.db-novel-stack{display:flex;height:22px;border-radius:6px;overflow:hidden;margin-bottom:6px}
.db-novel-stack-seg{color:#fff;font-size:9px;display:flex;align-items:center;padding:0 6px;cursor:pointer}
.db-novel-stack-leg{display:flex;gap:12px;font-size:9px;color:#666;flex-wrap:wrap}
.db-novel-stack-leg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px}
.db-novel-link-btn{background:transparent;border:1px solid #ccd;border-radius:6px;padding:5px 12px;font-size:11px;cursor:pointer;color:#1e56a0}
@media(max-width:860px){
  .db-novel-grid{grid-template-columns:1fr}
  .db-novel-berth-grid{grid-template-columns:1fr}
  .db-novel-kpis{grid-template-columns:1fr 1fr}
  .db-novel-row-hdr.stockout,.db-novel-row.stockout{grid-template-columns:1.2fr 0.7fr 0.7fr 0.6fr;font-size:11px}
  .db-novel-row-hdr.stockout span:nth-child(5),.db-novel-row.stockout span:nth-child(5){display:none}
}
/* Monthly Plan grid */
.mp-plant-hdr{background:#1e56a0!important;color:white;text-align:center;font-size:12px;padding:6px 5px;border:1px solid #1a4e96}
.mp-tot-col{background:#1a4e96!important;color:white;font-weight:bold;text-align:center}

/* ── Berth Board — port×berth matrix ── */
.bmt{width:100%;border-collapse:collapse;background:white;font-size:12px;box-shadow:0 1px 5px rgba(0,0,0,.08)}
.bmt th{background:#1e56a0;color:white;padding:8px 10px;text-align:center;border:1px solid #1a4e96;white-space:nowrap}
.bmt th.bmt-rn{width:36px;background:#1a4e96}
.bmt td{border:1px solid #e4e8ec;vertical-align:top;padding:0}
.bmt td.bmt-empty{background:#f7f8fa}
.bmt-cell{padding:8px 10px;height:100%}
.bmt-free{background:#f0f6f2}
.bmt-occ{background:#f8f0ef}
.bmt-clr{background:#f8f5ee}
.bmt-bname{font-weight:bold;color:#1a2e4a;font-size:12px}
.bmt-pill{display:inline-block;padding:1px 7px;border-radius:8px;font-size:10.5px;font-weight:bold;margin-top:3px}
.bmt-pill-free{background:#d5f5e3;color:#1e7a46}
.bmt-pill-occ{background:#fde8d8;color:#a02020}
.bmt-pill-clr{background:#fef9e7;color:#8a4a00}
.bmt-vessel{font-size:10.5px;color:#444;margin-top:3px;line-height:1.4}
.bmt-time{font-size:10px;color:#888;margin-top:2px}
.bmt-by{font-size:9.5px;color:#bbb;font-style:italic}
.bc-section-hdr{background:#1e56a0;color:white;padding:7px 14px;border-radius:6px 6px 0 0;font-size:12px;font-weight:bold;display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.bc-section-hdr:first-child{margin-top:0}
/* Readiness matrix */
.rdns-table{width:100%;border-collapse:collapse;background:white;font-size:12px}
.rdns-table th{background:#1e56a0;color:white;padding:6px 8px;text-align:center;font-size:11px;white-space:nowrap;border:1px solid #1a4e96}
.rdns-table td{border:1px solid #dde;padding:7px 10px;text-align:center;vertical-align:middle}
.rdns-table td.rdns-vessel{text-align:left;font-weight:bold;color:#1a2e4a;white-space:nowrap;padding-left:10px}
.rdns-table td.rdns-eta{color:#555;font-size:11px;white-space:nowrap}
.rdns-cell-free{background:#d5f5e3;color:#1e7a46;font-weight:bold;font-size:15px}
.rdns-cell-occ{background:#fde8d8;color:#c0392b;font-weight:bold;font-size:15px}
.rdns-cell-unk{background:#f8f9fa;color:#bbb;font-size:13px}
/* Mark occupied form */
.bth-form{background:#fffaf0;border:1.5px solid #e8c870;border-radius:8px;padding:14px 16px;margin-bottom:12px}
.bth-form h4{font-size:12px;font-weight:bold;color:#1a2e4a;margin-bottom:10px}



/* ── Model Insights card styles ─────────────────────────── */
.mi-card {
  background:#fff;
  border:1px solid #e4e8ef;
  border-radius:8px;
  padding:18px 20px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.mi-card-header {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.mi-card-icon { font-size:18px; margin-top:1px; }
.mi-card-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:#888;
  text-transform:uppercase;
  margin-bottom:2px;
}
.mi-card-title {
  font-size:13px;
  font-weight:700;
  color:#1a2e4a;
  letter-spacing:.02em;
}
.mi-card-subtitle {
  font-size:13px;
  color:#444;
  line-height:1.6;
  margin-bottom:14px;
}
.mi-kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:8px;
  margin-bottom:14px;
}
.mi-kpi {
  background:#f5f6f8;
  border-radius:8px;
  padding:10px 13px;
}
.mi-kpi-label { font-size:11px; color:#777; margin-bottom:3px; }
.mi-kpi-value { font-size:18px; font-weight:700; color:#1a2e4a; }
.mi-kpi-sub   { font-size:11px; color:#999; margin-top:2px; }
.mi-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.mi-table thead tr {
  border-bottom:2px solid #e4e8ef;
}
.mi-table thead th {
  padding:7px 10px;
  text-align:left;
  font-size:11px;
  font-weight:600;
  color:#666;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.mi-table thead th.r { text-align:right; }
.mi-table tbody tr {
  border-bottom:1px solid #f0f0f0;
}
.mi-table tbody tr:last-child { border-bottom:none; }
.mi-table tbody td {
  padding:8px 10px;
  color:#333;
  vertical-align:middle;
}
.mi-table tbody td.r { text-align:right; }
.mi-table tbody td.bold { font-weight:600; }
.mi-table tbody tr.mi-total td {
  border-top:2px solid #e4e8ef;
  font-weight:700;
  background:#f9fafb;
}
.mi-red   { color:#c62828 !important; font-weight:600; }
.mi-amber { color:#e65100 !important; }
.mi-green { color:#2e7d32 !important; }
.mi-note {
  margin-top:12px;
  font-size:11.5px;
  color:#555;
  line-height:1.65;
  padding:9px 12px;
  background:#f9fafb;
  border-radius:6px;
  border-left:3px solid #dce3ed;
}
/* Alert cards */
.mi-alert {
  display:flex;
  gap:12px;
  padding:12px 16px;
  border-radius:8px;
  border:1px solid #e4e8ef;
  background:#fff;
  margin-bottom:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.mi-alert-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
  margin-top:5px;
}
.mi-alert-dot.err  { background:#c62828; }
.mi-alert-dot.warn { background:#e65100; }
.mi-alert-dot.info { background:#1565c0; }
.mi-alert-title {
  font-size:12px;
  font-weight:700;
  color:#1a2e4a;
  margin-bottom:3px;
}
.mi-alert-body {
  font-size:12px;
  color:#555;
  line-height:1.6;
}
.mi-ig-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.mi-ig-sc{border-radius:10px;padding:14px 16px;border:1px solid}
.mi-ig-sc.sc-mgt{background:#fff0f0;border-color:#f5c6c6}
.mi-ig-sc.sc-sup{background:#fffbeb;border-color:#fde68a}
.mi-ig-sc.sc-inv{background:#fff7ed;border-color:#fed7aa}
.mi-ig-sc.sc-cst{background:#eff6ff;border-color:#bfdbfe}
.mi-ig-sc-cat{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#999;margin-bottom:5px}
.mi-ig-sc-val{font-size:19px;font-weight:700;line-height:1.2;margin-bottom:3px}
.mi-ig-sc-sub{font-size:11px;color:#888}
.mi-ig-group{margin-bottom:16px}
.mi-ig-ghdr{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#bbb;padding-bottom:8px;border-bottom:1px solid #edf0f5;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mi-ig-row{display:flex;flex-wrap:wrap;gap:9px}
.mi-ig-card{background:#fff;border:1px solid #e8ecf2;border-radius:9px;padding:11px 13px;flex:1;min-width:180px;border-left-width:3px}
.mi-ig-card.lc-red{border-left-color:#c62828}
.mi-ig-card.lc-amber{border-left-color:#d84315}
.mi-ig-card.lc-blue{border-left-color:#1565c0}
.mi-ig-card-name{font-size:11px;font-weight:700;color:#1a2e4a;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-ig-card-num{font-size:15px;font-weight:700;margin-bottom:4px;line-height:1.2}
.mi-ig-card-body{font-size:11px;color:#777;line-height:1.5}
.mi-cov-pending{font-size:10px;color:#aaa;margin-top:6px;font-style:italic}
.mi-cov-ok{font-size:10px;color:#2e7d32;margin-top:6px;font-weight:600;display:flex;align-items:flex-start;gap:4px}
.mi-cov-miss{font-size:10px;color:#c62828;margin-top:6px;font-weight:600;display:flex;align-items:flex-start;gap:4px}
.mi-recourse{font-size:10.5px;color:#555;margin-top:7px;padding-top:7px;border-top:1px solid #edf0f5;line-height:1.55}
.mi-recourse strong{color:#1a2e4a}
/* ── History & Trends panel ────────────────────────── */
.mi-hist-panel{margin-top:20px;padding-top:16px;border-top:2px solid #edf0f5}
.mi-hist-hdr{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.mi-hist-chart-wrap{height:130px;position:relative;margin-bottom:14px}
.mi-hist-tbl{width:100%;border-collapse:collapse;font-size:11px}
.mi-hist-tbl th{background:#f4f6fa;padding:6px 8px;text-align:left;font-weight:700;color:#555;border-bottom:1px solid #e0e4ef;white-space:nowrap}
.mi-hist-tbl th.r,.mi-hist-tbl td.r{text-align:right}
.mi-hist-tbl td{padding:5px 8px;border-bottom:1px solid #f0f2f7;color:#333;vertical-align:middle}
.mi-hist-tbl tr:last-child td{border-bottom:none}
.mi-hist-tbl tr.hi-current td{background:#fffbeb;font-weight:600}
.mi-delta-up{font-size:9px;font-weight:700;color:#c62828;padding:1px 4px;border-radius:3px;background:#fff0f0;margin-left:4px;vertical-align:middle}
.mi-delta-dn{font-size:9px;font-weight:700;color:#2e7d32;padding:1px 4px;border-radius:3px;background:#e8f5e9;margin-left:4px;vertical-align:middle}
.mi-delta-neu{font-size:9px;color:#aaa;margin-left:4px;vertical-align:middle}
.mi-hist-insight{font-size:11.5px;color:#444;background:#f8f9fc;border:1px solid #e8ecf2;border-left:3px solid #1565c0;border-radius:6px;padding:8px 12px;margin-bottom:10px;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════════
   EXECUTIVE DASHBOARD (db2-*) — 2026-06-06 redesign
   Matches L&I Port Intelligence executive infographic style
   ═══════════════════════════════════════════════════════════════════ */
.db2-wrap{max-width:1440px;margin:0 auto}
.db2-hdr{background:#1f2c4a;color:#fff;border-radius:10px;padding:16px 22px;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.db2-hdr-left{display:flex;gap:14px;align-items:flex-start}
.db2-hdr-chip{background:#e07b20;width:12px;height:44px;border-radius:3px;flex-shrink:0;margin-top:2px}
.db2-hdr-title{font-size:22px;font-weight:700;letter-spacing:.5px;line-height:1.1}
.db2-hdr-sub{font-size:12px;color:#b8c4d8;margin-top:4px}
.db2-hdr-right{text-align:right;font-size:11px}
.db2-hdr-asof{color:#b8c4d8;letter-spacing:.5px}
.db2-hdr-asof strong{color:#fff;font-weight:700;letter-spacing:0}
.db2-hdr-org{color:#8898b6;margin-top:4px}

.db2-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
.db2-kpi{background:#fff;border-radius:8px;padding:13px 15px;border-left:4px solid #1e56a0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.db2-kpi-lbl{font-size:10px;color:#8a93a6;font-weight:700;letter-spacing:1px;margin-bottom:6px}
.db2-kpi-val{font-size:26px;font-weight:700;color:#1a2540;line-height:1}
.db2-kpi-unit{font-size:13px;color:#7a839a;font-weight:500;margin-left:4px}
.db2-kpi-sub{font-size:11px;color:#7a839a;margin-top:6px}
.db2-kpi-stock{border-left-color:#1e56a0}
.db2-kpi-vessels{border-left-color:#b8c4d8}
.db2-kpi-receipts{border-left-color:#1e7a46}
.db2-kpi-receipts .db2-kpi-val{color:#1e7a46}
.db2-kpi-plan{border-left-color:#e07b20}
.db2-kpi-plan .db2-kpi-val{color:#e07b20}
.db2-kpi-cover{border-left-color:#c0392b}
.db2-kpi-cover .db2-kpi-val{color:#c0392b}

.db2-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.db2-card{background:#fff;border-radius:10px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.db2-card-stack{display:flex;flex-direction:column;gap:12px}
.db2-card-hdr{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.5px;color:#1a2540;margin-bottom:12px}
.db2-chip{width:11px;height:11px;background:#1e56a0;flex-shrink:0;border-radius:2px}
.db2-chip-or{background:#e07b20}
.db2-card-hdr-sub{font-size:11px;font-weight:500;color:#7a839a;font-style:italic;margin-left:6px;letter-spacing:0}
.db2-empty{color:#aaa;font-size:12px;padding:8px 0}

/* horizontal location bars */
.db2-bar-row{display:grid;grid-template-columns:90px 1fr 130px;gap:14px;align-items:center;margin-bottom:12px}
.db2-bar-lbl{font-size:13px;font-weight:600;color:#1a2540}
.db2-bar-track{background:#eaeef4;border-radius:5px;height:13px;overflow:hidden}
.db2-bar-fill{height:100%;border-radius:5px;background:#1e56a0;transition:width .6s}
.db2-bar-val{font-size:13px;font-weight:600;color:#1a2540;text-align:right}

/* commodity mix */
.db2-mix-sect{margin-top:14px;padding-top:12px;border-top:1px solid #eef1f6}
.db2-mix-lbl{font-size:10px;color:#8a93a6;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.db2-mix-bar{display:flex;height:22px;border-radius:5px;overflow:hidden;margin-bottom:10px}
.db2-mix-bar > div{display:flex;align-items:center;padding:0 12px;color:#fff;font-size:11px;font-weight:600}
.db2-mix-coal{background:#1f2c4a}
.db2-mix-lime{background:#e07b20;justify-content:flex-end}
.db2-mix-legend{display:flex;gap:18px;font-size:11px;color:#5a637a}
.db2-mix-legend .db2-dot{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:middle;border-radius:0}

/* plant cover bars */
.db2-plant-row{margin-bottom:14px}
.db2-plant-line{display:grid;grid-template-columns:48px 1fr 60px;gap:12px;align-items:center}
.db2-plant-name{font-size:13px;font-weight:700;color:#1a2540}
.db2-plant-bar-track{background:#eaeef4;border-radius:5px;height:11px;overflow:hidden}
.db2-plant-bar-fill{height:100%;background:#1e56a0;border-radius:5px}
.db2-plant-days{font-size:13px;font-weight:600;color:#1a2540;text-align:right}
.db2-min-grade{display:inline-flex;align-items:center;padding:3px 10px;border-radius:14px;font-size:11px;font-weight:700;color:#fff;margin-top:6px;margin-left:60px}
.db2-mg-crit{background:#c0392b}
.db2-mg-watch{background:#e07b20}
.db2-mg-heal{background:#27a35e}
.db2-legend-row{display:flex;gap:18px;font-size:11px;color:#5a637a;margin-top:8px;justify-content:flex-end}
.db2-legend-row .db2-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.db2-dot-crit{background:#c0392b}
.db2-dot-watch{background:#e07b20}
.db2-dot-heal{background:#27a35e}

/* vessel list */
.db2-vessel-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #eef1f6}
.db2-vessel-row:last-child{border-bottom:none}
.db2-v-left{display:flex;gap:10px;align-items:flex-start}
.db2-v-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}
.db2-v-dot-arr{background:#e07b20}
.db2-v-dot-wait{background:#1e56a0}
.db2-v-dot-berth{background:#27a35e}
.db2-v-name{font-size:13px;font-weight:700;color:#1a2540}
.db2-v-meta{font-size:11px;color:#7a839a;margin-top:2px}
.db2-v-status{padding:4px 12px;border-radius:14px;font-size:10px;font-weight:700;letter-spacing:.5px;color:#fff}
.db2-v-st-arr{background:#e07b20}
.db2-v-st-wait{background:#1e56a0}
.db2-v-st-berth{background:#27a35e}

/* MGT bars */
.db2-mgt-row{display:grid;grid-template-columns:80px 1fr 130px;gap:12px;align-items:center;margin-bottom:13px}
.db2-mgt-name{font-size:13px;font-weight:700;color:#1a2540}
.db2-mgt-bar-track{background:#eaeef4;border-radius:5px;height:13px;position:relative;overflow:hidden}
.db2-mgt-bar-fill{height:100%;border-radius:5px}
.db2-mgt-marker{position:absolute;top:-2px;bottom:-2px;width:2px;background:#1a2540}
.db2-mgt-val{font-size:11px;font-weight:600;color:#1a2540;text-align:right}
.db2-mgt-note{font-size:10px;color:#7a839a;font-style:italic;margin-top:4px}
.db2-mg-fill-heal{background:#27a35e}
.db2-mg-fill-watch{background:#e07b20}
.db2-mg-fill-crit{background:#c0392b}
.db2-mg-fill-none{background:#b8c4d8}

/* despatch list */
.db2-desp-overall{font-size:12px;font-weight:600;color:#5a637a;margin-bottom:12px}
.db2-desp-overall .pct{color:#e07b20;font-size:18px;font-weight:700;margin:0 4px}
.db2-desp-row{display:grid;grid-template-columns:60px 1fr 110px;gap:12px;align-items:center;margin-bottom:10px}
.db2-desp-name{font-size:12px;font-weight:700;color:#1a2540}
.db2-desp-bar-track{background:#eaeef4;border-radius:5px;height:11px;overflow:hidden}
.db2-desp-bar-fill{height:100%;background:#e07b20;border-radius:5px}
.db2-desp-val{font-size:11px;font-weight:600;color:#1a2540;text-align:right}

/* executive read banner */
.db2-exec-read{background:#fff5e0;border-left:5px solid #e07b20;border-radius:6px;padding:12px 16px;font-size:12px;line-height:1.55;color:#1a2540;margin-bottom:12px}
.db2-exec-read strong{font-weight:700}

@media (max-width:1100px){
  .db2-kpi-row{grid-template-columns:repeat(3,1fr)}
  .db2-row-2col{grid-template-columns:1fr}
}

/* ═════════════════════════════════════════════════════════════════════ */
/* MOBILE PATH A — tablet (≤768px) + phone (≤480px) breakpoints           */
/* Added 2026-06-11.  No changes to desktop layout — these blocks only    */
/* activate at narrow viewports.                                          */
/* ═════════════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop, shown ≤768px */
.mobile-menu-btn{display:none;background:rgba(255,255,255,.18);color:white;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:8px 12px;font-size:18px;cursor:pointer;line-height:1;font-weight:bold}
.mobile-menu-btn:hover{background:rgba(255,255,255,.28)}

@media (max-width:768px){
  /* App-header: stack title above controls; smaller title */
  .app-header{flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px}
  .hdr-brand{gap:8px}
  .brand-logo-sail{height:28px;max-width:60px}
  .brand-logo-pravartanam{height:32px;max-width:108px}
  .brand-logos-divider{height:26px}
  .hdr-logo-wrap.brand-logos{padding:4px 7px;gap:7px}
  .app-header h1{font-size:13px}
  .app-header p{font-size:10px}
  .hdr-right{justify-content:flex-end;gap:6px}
  .hdr-right .btn{padding:7px 10px;font-size:11px}
  .user-badge{font-size:10px;padding:3px 8px;max-width:140px;overflow:hidden;text-overflow:ellipsis}

  /* Date navigator: tighter */
  .hdr-right > div:first-child{flex:1;justify-content:center}

  /* Hamburger menu */
  .mobile-menu-btn{display:inline-block;align-self:flex-start;margin:0}

  /* Tabs: collapsed by default, expanded when .tabs-open is set */
  .tabs{display:none;flex-direction:column;border-bottom:none;background:#f0f4f9;box-shadow:0 2px 4px rgba(0,0,0,.08)}
  .tabs.tabs-open{display:flex}
  .tab{padding:14px 18px;font-size:14px;border-right:none;border-bottom:1px solid #dce6f0;text-align:left;white-space:normal}
  .tab.active{border-bottom:1px solid #dce6f0;margin-bottom:0;background:#e2ecf8;border-left:4px solid #1e4e96;padding-left:14px}

  /* Insights / Optimiser sub-tab rows — keep horizontal-scrollable */
  [id^="ins-tab-"], [id^="opt-tab-"], .opt-sub{font-size:12px;padding:8px 10px}

  /* Tab content padding */
  .tab-content{padding:8px 6px}

  /* Form grid: single column on mobile */
  .form-grid,.form-grid.wide{grid-template-columns:1fr;gap:12px}
  .form-panel{padding:12px 12px}
  .form-panel h3{font-size:13px}

  /* Bigger tap targets for all buttons */
  .btn{padding:9px 14px;font-size:13px;min-height:36px}
  .btn-sm{padding:6px 11px;font-size:12px;min-height:32px}

  /* Inputs: 16px font prevents iOS zoom-on-focus */
  input,select,textarea{font-size:16px!important}
  input[type=date],input[type=number],input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea{padding:8px 10px}

  /* Stock tables: sticky first column + smaller font + horizontal scroll wrapper */
  .stock-table{font-size:11px}
  .stock-table th,.stock-table td{padding:5px 4px}
  .stock-table td.cc{position:sticky;left:0;z-index:2;min-width:64px;font-size:11px;box-shadow:1px 0 0 #dde}
  .stock-table td.cn{position:sticky;left:0;z-index:2;background:#f8f9fa;box-shadow:1px 0 0 #dde}
  .stock-table td.cd{min-width:90px}
  .stock-table input[type=number]{width:54px;font-size:13px}

  /* Modals: viewport-relative width */
  .form-panel[id$="-modal"],
  #mp-override-modal .form-panel{max-width:min(460px,92vw)!important;width:92vw!important}
  #mp-override-modal{padding:8px}

  /* Dashboard cockpit — KPI row + cockpit 4-col grids */
  .db-kpi-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .db-kpi{padding:9px 11px}
  .db-kpi-val{font-size:17px;letter-spacing:-.3px}
  .db-kpi-lbl{font-size:9.5px;line-height:1.2}
  .db-kpi-sub{font-size:9px;line-height:1.3}
  .db-grid-2,.db-grid-3{grid-template-columns:1fr!important;gap:10px}
  .db-card{padding:10px 12px}

  /* Hide low-value columns in stock tables at narrow width — keeps essentials */
  /* (We hide the description column; grade + value remain visible) */
  .stock-table td.cd,.stock-table th.cd{display:none}

  /* Note bar — wrap nicely */
  .note-bar{font-size:11px;padding:8px 10px}

  /* Daily report panel (Reports sub-tab) — stack date + buttons */
  #ins-pane-reports .form-panel > div[style*="flex"]{flex-direction:column!important;align-items:stretch!important}
  #ins-pane-reports .form-panel > div[style*="flex"] .btn{width:100%}
}

@media (max-width:480px){
  /* Phone-specific: even tighter */
  .app-header{padding:6px 8px}
  .app-header h1{font-size:12px;letter-spacing:.2px}
  .app-header h1 span{display:none}     /* hide Hindi sub-title on phone */
  .hdr-right{gap:4px}
  .hdr-right .btn{padding:6px 8px;font-size:10px}

  /* Sticky header on phone — saves scrolling */
  .app-header{position:sticky;top:0;z-index:50}
  .tabs{position:sticky;top:0;z-index:49}
  .tabs.tabs-open{max-height:calc(100vh - 80px);overflow-y:auto}

  /* Sub-tab buttons: enlarge for thumb tap */
  .psSubTab,.opt-sub{padding:10px 12px;font-size:12px;min-height:38px}

  /* Berth-board / receipts: convert grid rows to stacked cards if any */
  /* (Berth-board panel already uses cards; this just enlarges them) */
  .stock-table{font-size:10px}
  .stock-table th,.stock-table td{padding:4px 3px}

  /* All forms: bottom action bar pattern — Save/Cancel pinned within view */
  .form-panel{padding:10px 10px}
  .form-grid{gap:10px}

  /* Stock action buttons — full width */
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
  .actions .note{order:-1;text-align:center;margin-bottom:6px}
}

/* ═════════════════════════════════════════════════════════════════════ */
/* PROPER MOBILE SHELL — 2026-06-11                                       */
/* Replaces the Path A retrofit with a real mobile app pattern:           */
/*   · Compact native-style header (top)                                  */
/*   · Hidden top tabs                                                    */
/*   · Bottom nav bar with role-aware icons                               */
/*   · Full-screen content area between top and bottom                    */
/* ═════════════════════════════════════════════════════════════════════ */

/* Mobile header — hidden on desktop, shown only on mobile */
.mobile-header{
  display:none;
  position:fixed;top:0;left:0;right:0;height:48px;z-index:200;
  background:linear-gradient(135deg,#1e4e96,#2d6ab6);color:white;
  align-items:center;padding:0 8px;gap:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  padding-top:env(safe-area-inset-top);
  height:calc(48px + env(safe-area-inset-top));
}
.mob-hdr-logo{
  font-size:20px;line-height:1;flex:0 0 auto;
  background:rgba(255,255,255,.12);color:white;border:none;border-radius:8px;
  min-width:36px;min-height:34px;cursor:pointer;font-family:inherit;
}
.mob-hdr-logo:active{background:rgba(255,255,255,.3)}
.mob-hdr-action{
  background:rgba(255,255,255,.15);color:white;
  border:1px solid rgba(255,255,255,.3);border-radius:6px;
  padding:5px 9px;font-size:15px;cursor:pointer;line-height:1;
  flex:0 0 auto;min-width:38px;min-height:34px;
  font-family:inherit;
}
.mob-hdr-action:active{background:rgba(255,255,255,.32)}

/* Date navigator — centred, never stretches wider than its content */
.mob-date-nav{
  flex:1;display:flex;align-items:center;justify-content:center;gap:2px;
  background:rgba(255,255,255,.12);border-radius:8px;padding:2px 4px;min-width:0;
  max-width:230px;margin:0 auto;
}
.mob-date-arrow{
  background:none;border:none;color:white;font-size:14px;cursor:pointer;
  padding:6px 7px;line-height:1;font-family:inherit;border-radius:6px;
}
.mob-date-arrow:active{background:rgba(255,255,255,.25)}
.mob-date-display{
  background:none;border:none;color:white;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;padding:6px 4px;white-space:nowrap;
  letter-spacing:.2px;
}
.mob-date-today{
  background:rgba(249,202,36,.4);border:none;color:white;font-size:9px;
  font-weight:bold;cursor:pointer;padding:4px 6px;border-radius:5px;
  font-family:inherit;letter-spacing:.3px;
}

/* Save-error banner — shown when the (hidden) desktop pill turns red */
#mob-save-err{
  display:none;position:fixed;left:8px;right:8px;z-index:400;
  top:calc(52px + env(safe-area-inset-top));
  background:#c0392b;color:white;font-size:12.5px;font-weight:600;
  padding:10px 14px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.3);
  line-height:1.45;
}

/* Bottom nav — horizontal-scroll ticker.  Hidden on desktop. */
/* Hardened against iOS Safari's address-bar/keyboard quirks:           */
/*   · transform:translateZ(0) forces a separate compositor layer so    */
/*     the browser doesn't reflow/hide it during URL-bar transitions.   */
/*   · will-change:transform hints the same.                            */
/*   · padding-bottom uses max() so safe-area-inset doesn't push the    */
/*     nav off-screen when iOS reports a stale value.                   */
.mobile-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:white;border-top:1px solid #dde;
  padding:6px 4px max(8px,calc(6px + env(safe-area-inset-bottom))) 4px;
  box-shadow:0 -2px 10px rgba(0,0,0,.12);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
  -webkit-backface-visibility:hidden;
  /* Right-edge gradient hint that more items are off-screen */
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%);
}
.mobile-bottom-nav::-webkit-scrollbar{display:none}  /* Webkit (Safari/Chrome) */
.mob-nav-btn{
  flex:0 0 auto;               /* natural width — don't compress */
  min-width:64px;
  background:transparent;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:6px 10px;border-radius:6px;color:#7a90a8;
  font-family:inherit;font-size:10px;font-weight:600;
  min-height:52px;
  scroll-snap-align:center;
}
.mob-nav-btn:active{background:#eef3fa}
.mob-nav-btn.active{color:#1e56a0;background:rgba(30,86,160,.08)}
.mob-nav-btn.active .mob-nav-icon{transform:scale(1.15)}
.mob-nav-icon{font-size:22px;line-height:1;transition:transform .15s}
.mob-nav-label{font-size:10px;line-height:1.1;white-space:nowrap}

/* ── Generic bottom sheet (More / Profile / Grade-entry) ─────────────── */
.mob-sheet{display:none;position:fixed;inset:0;z-index:500;pointer-events:none}
.mob-sheet.open{display:block;pointer-events:auto}
.mob-sheet-backdrop{position:absolute;inset:0;background:rgba(10,30,50,.45)}
.mob-sheet-panel{
  position:absolute;left:0;right:0;bottom:0;
  background:white;border-radius:16px 16px 0 0;
  max-height:78vh;display:flex;flex-direction:column;
  padding:6px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 30px rgba(0,0,0,.25);
  animation:mobSheetUp .22s cubic-bezier(.3,.7,.4,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mob-sheet-tall{max-height:88vh}
@keyframes mobSheetUp{from{transform:translateY(60%)}to{transform:translateY(0)}}
.mob-sheet-grip{width:38px;height:4px;border-radius:2px;background:#d5dbe3;margin:6px auto 10px;flex:0 0 auto}
.mob-sheet-title{font-size:14px;font-weight:700;color:#1a2e4a;padding:2px 4px 10px}
.mob-sheet-item{
  display:block;width:100%;text-align:left;
  background:#f6f8fb;border:none;cursor:pointer;
  padding:15px 16px;font-size:14px;color:#1a2e4a;font-weight:600;
  border-radius:10px;font-family:inherit;margin-bottom:8px;min-height:48px;
}
.mob-sheet-item:active{background:#e6edf6}
.mob-sheet-danger{color:#c0392b;background:#fdf1f0}
.mob-sheet-danger:active{background:#f8dcd9}
.mob-sheet-cancel,.mob-sheet-done{
  display:block;width:100%;margin-top:4px;
  background:#1e56a0;color:white;border:none;border-radius:10px;cursor:pointer;
  padding:14px;font-size:15px;font-weight:700;font-family:inherit;min-height:48px;
}
.mob-sheet-cancel{background:#eef0f3;color:#3a5878}

/* Profile sheet */
.mob-profile-info{display:flex;align-items:center;gap:12px;padding:4px 4px 16px}
.mob-profile-avatar{
  width:46px;height:46px;border-radius:50%;background:#eef3fa;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto;
}
.mob-profile-name{font-size:15px;font-weight:700;color:#1a2e4a}
.mob-profile-role{font-size:12px;color:#7a90a8;font-weight:600;margin-top:2px}

/* More sheet — grid of screen tiles */
.mob-more-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:10px;
}
.mob-more-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:#f6f8fb;border:none;border-radius:12px;cursor:pointer;
  padding:14px 6px;font-size:12px;color:#1a2e4a;font-weight:600;font-family:inherit;
  min-height:72px;
}
.mob-more-tile:active{background:#e6edf6}
.mob-more-tile-icon{font-size:24px;line-height:1}

/* ── Card views (mobile transform of list tables) ────────────────────── */
.mob-cards{display:none}
.mob-cards-empty{padding:18px;color:#888;text-align:center;font-size:13px}
.mob-card{
  background:white;border:1px solid #e3e9f0;border-radius:12px;
  padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 4px rgba(20,40,70,.07);
}
.mob-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.mob-card-title{font-size:14.5px;font-weight:700;color:#0d2444;flex:1;min-width:55%}
.mob-card-badges{display:flex;flex-wrap:wrap;gap:4px}
.mob-card-chip{
  display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
  background:#eef3fa;color:#1e56a0;border-radius:10px;padding:3px 8px;white-space:nowrap;
}
.mob-card-chip .badge{padding:0;background:transparent!important;color:inherit!important}
.mob-card-fields{display:flex;flex-direction:column;gap:5px}
.mob-card-field{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px}
.mob-card-lbl{color:#7a90a8;font-weight:600;font-size:11px;white-space:nowrap}
.mob-card-val{color:#1a2540;font-weight:600;text-align:right;word-break:break-word}
.mob-card-more{margin-top:8px;border-top:1px dashed #e3e9f0;padding-top:6px}
.mob-card-more summary{
  font-size:11.5px;color:#1e56a0;font-weight:700;cursor:pointer;
  padding:4px 0;list-style:none;
}
.mob-card-more summary::before{content:'▸ '}
.mob-card-more[open] summary::before{content:'▾ '}
.mob-card-actions{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
  border-top:1px solid #eef0f3;padding-top:10px;
}
.mob-card-actions .btn{flex:1;min-width:30%;min-height:40px}

/* Grade-entry sheet fields */
.mob-grade-fields{display:flex;flex-direction:column;gap:12px;padding-bottom:14px}
.mob-grade-field label{font-size:12px;font-weight:700;color:#3a5878;display:block;margin-bottom:5px}
.mob-grade-field input{
  width:100%;padding:13px 14px;font-size:18px!important;font-weight:600;
  border:1.5px solid #c9d4e2;border-radius:10px;text-align:right;background:#fbfcfe;
}
.mob-grade-field input:focus{outline:none;border-color:#1e56a0;box-shadow:0 0 0 3px rgba(30,86,160,.12)}

/* ═════════════════════════════════════════════════════════════════════ */
/* MOBILE MEDIA QUERIES — activate everything above + reshape content     */
/* ═════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* ── Viewport lockdown ─────────────────────────────────────────────
     Wide unwrapped content (dashboard rows, vessel panels…) used to
     force mobile browsers to EXPAND the layout viewport — the whole
     app rendered zoomed-out with the fixed header/nav stretched and
     the bottom nav pushed below the fold. Clamp the page to the
     device width; wide content scrolls inside its own panel instead
     (every .tab-content gets overflow-x:auto below). */
  html,body{overflow-x:hidden;max-width:100vw}
  /* Page stays fixed-width; only inner panels (tables, dashboard cards)
     scroll sideways — NOT the whole tab pane. */
  .tab-content{overflow-x:hidden;max-width:100vw}

  /* Hide the desktop header + tab strip entirely */
  .app-header{display:none!important}
  .tabs{display:none!important}

  /* Show the mobile shell */
  .mobile-header{display:flex}
  .mobile-bottom-nav{display:flex}

  /* Reserve space at top + bottom for the fixed shell elements.
     Use max() to guard against iOS reporting a stale safe-area value
     during URL-bar transitions (otherwise content can slide under nav). */
  body{
    padding-top:calc(48px + env(safe-area-inset-top));
    padding-bottom:max(80px, calc(72px + env(safe-area-inset-bottom)));
  }
  #main-app{margin:0}

  /* Hide the retrofitted hamburger from Path A (now superseded) */
  #mobile-menu-btn,.mobile-menu-btn{display:none!important}

  /* Tab content — full width, no horizontal padding */
  .tab-content{padding:8px 8px 24px}

  /* Sub-tab ribbons — horizontal scroll, page stays put */
  .mob-subtab-strip,
  #tab-optimiser > div[style*="border-bottom"]:first-child{
    overflow-x:auto;overflow-y:hidden;
    flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:100%;
    padding-bottom:4px;
    /* subtle fade hint that more tabs sit off-screen */
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
  }
  .mob-subtab-strip::-webkit-scrollbar,
  #tab-optimiser > div[style*="border-bottom"]:first-child::-webkit-scrollbar{display:none}
  .psSubTab,.opt-sub{flex-shrink:0;padding:9px 13px;font-size:12px;min-height:38px;white-space:nowrap}

  /* Form panels — minimal padding so content has room */
  .form-panel{padding:12px 12px;border-radius:8px;margin-bottom:10px}
  .form-panel h3{font-size:13px;margin-bottom:10px}
  .form-grid,.form-grid.wide{grid-template-columns:1fr;gap:14px}
  .fg label{font-size:12px;font-weight:600;color:#34495e;margin-bottom:4px}

  /* All inputs — touch-friendly */
  input,select,textarea{font-size:16px!important}
  .form-grid input[type=date],
  .form-grid input[type=number],
  .form-grid input[type=text],
  .form-grid input[type=email],
  .form-grid input[type=tel],
  .form-grid select,
  .form-grid textarea{
    padding:11px 12px!important;border-radius:8px!important;
    border:1px solid #d0d7e2!important;width:100%!important;
  }

  /* Buttons — bigger taps */
  .btn{padding:11px 16px;font-size:14px;min-height:44px;border-radius:8px}
  .btn-sm{padding:8px 13px;font-size:12px;min-height:36px}
  .btn-primary{padding:13px 16px;font-size:15px;min-height:48px}

  /* Stock tables — sticky first col + horizontal scroll wrapper */
  [id^="tbl-"]:not([id*="lv"]):not([id*="mr"]){overflow-x:auto;-webkit-overflow-scrolling:touch}
  [id^="tbl-mr-"],[id^="tbl-lv-"]{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stock-table{font-size:11px}
  .stock-table th,.stock-table td{padding:5px 4px}
  .stock-table td.cc{position:sticky;left:0;z-index:2;background:#f4f7fb;
    min-width:60px;font-size:11px;box-shadow:1px 0 0 #dde}
  .stock-table td.cn{position:sticky;left:0;z-index:2;background:#f8f9fa;box-shadow:1px 0 0 #dde}
  .stock-table td.cd{display:none}
  .stock-table th.cd{display:none}
  .stock-table input[type=number]{width:52px;font-size:13px;padding:5px 4px}

  /* Dashboard cockpit — vertical stack */
  .db-kpi-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .db-kpi{padding:9px;border-radius:8px}
  .db-kpi-val{font-size:16px;letter-spacing:-.3px}
  .db-kpi-lbl{font-size:9px;line-height:1.2}
  .db-kpi-sub{font-size:8.5px;line-height:1.3}
  .db-grid-2,.db-grid-3{grid-template-columns:1fr!important;gap:10px}
  .db-card{padding:12px;border-radius:8px}
  .db-chdr{font-size:13px;flex-wrap:wrap}

  /* ─── Dashboard panels — universal horizontal-scroll pattern ──────
     Every dashboard card / panel allows horizontal scroll when its
     content (a flex or grid row) is wider than the viewport.
     The inner row is forced to max-content width so the parent's
     overflow-x:auto actually triggers (instead of children compressing).
  */
  #db-cockpit-supply-chain,
  #db-cockpit-port-row,
  #db-live-totals-panel,
  #db-rail-pipeline-panel,
  #db-plant-stock-panel,
  #db-vessels-panel,
  #db-cockpit-pulse,
  #db-plan-panel,
  #db-mgt-panel,
  #db-dispatches-panel,
  #db-receipts-panel,
  .db-card{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Force inline-flex rows in any dashboard panel to natural width.
     Targets the common pattern used across dashboard.js where a child
     div has inline style="display:flex" or "display:grid". */
  #db-cockpit-supply-chain > div[style*="display:flex"],
  #db-cockpit-port-row    > div[style*="display:flex"],
  #db-live-totals-panel   > div[style*="display:flex"],
  #db-rail-pipeline-panel > div[style*="display:flex"],
  #db-plant-stock-panel   > div[style*="display:flex"],
  .db-card                > div[style*="display:flex"]:not([style*="flex-direction:column"]){
    min-width:max-content;
  }
  /* Same for grid-based dashboard rows */
  #db-cockpit-supply-chain > div[style*="display:grid"],
  #db-cockpit-port-row    > div[style*="display:grid"],
  #db-live-totals-panel   > div[style*="display:grid"],
  #db-rail-pipeline-panel > div[style*="display:grid"],
  #db-plant-stock-panel   > div[style*="display:grid"],
  .db-card                > div[style*="display:grid"]{
    min-width:max-content;
  }
  /* Tighten panel padding so titles + content fit comfortably */
  #db-cockpit-supply-chain,#db-cockpit-port-row{padding:10px!important}
  .db-card{padding:10px 12px}

  /* Action button rows — full-width, stacked, sticky-ish */
  .actions{flex-direction:column;align-items:stretch;gap:8px;
    background:white;padding:10px 12px;margin:14px -8px 0;
    border-top:1px solid #eef0f3;border-radius:0}
  .actions .btn{width:100%}
  .actions .note{order:-1;text-align:center;font-size:11px}

  /* Note bars — readable line height */
  .note-bar{font-size:12px;padding:9px 12px;line-height:1.45;border-radius:6px}

  /* Modals — full-screen sheets */
  #mp-override-modal{padding:0}
  #mp-override-modal > .form-panel{
    width:100%!important;max-width:100%!important;height:100%;
    border-radius:0;margin:0!important;
    padding:48px 16px 80px;overflow-y:auto;
  }

  /* Berth board — make panels stack nicely */
  #tab-berth-board > div{padding:8px 0;margin:0}
  #bb-readiness-panel{overflow-x:auto}

  /* Vessels list — break out of fixed table layout */
  #tab-vessels table{font-size:11px}
  #tab-vessels table td,#tab-vessels table th{padding:5px 4px}

  /* Daily report panel — stack date + buttons */
  #ins-pane-reports .form-panel > div[style*="flex"]{
    flex-direction:column!important;align-items:stretch!important;gap:10px!important
  }
  #ins-pane-reports .form-panel > div[style*="flex"] .btn{width:100%}

  /* Save status pill — hide on mobile (mirrored by #mob-save-err banner) */
  .save-st{display:none}

  /* ── Card views: hide the source table, show the generated cards ── */
  .mob-cardified table{display:none}
  .mob-cards{display:block}

  /* ── Modals as bottom sheets ── */
  .modal{align-items:flex-end!important;padding:0!important}
  .modal-content{
    width:100%!important;max-width:100%!important;margin:0!important;
    border-radius:16px 16px 0 0!important;
    max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .modal-close{width:40px;height:40px;font-size:22px;display:flex;align-items:center;justify-content:center}
  #mp-override-modal{align-items:flex-end!important;padding:0!important}
  #mp-override-modal > .form-panel{
    width:100%!important;max-width:100%!important;height:auto;max-height:92vh;
    border-radius:16px 16px 0 0;margin:0!important;
    padding:18px 16px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;
  }

}

@media (max-width:480px){
  /* Phone-specific tightening */
  .mob-hdr-title{font-size:13px}
  .mob-nav-label{font-size:9px}
  .mob-nav-icon{font-size:20px}
  .tab-content{padding:6px 6px 20px}
  .form-panel{padding:10px}
  .form-grid{gap:12px}
}