@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
	--oc1: #00284c;
	--oc2: #53bbad;
	--oc2dark: #479f94;
	--oc2light: #afd4cf;
	--oc3: #29bdef;
	--oc3dark: #21a0ca;
	--oc3light: #b7e4f3;
	--green: #008800;
	--red: #CC0000;
	--lightGrey: #CCCCCC;
	--greyTint: #E5E5E5;
	--oc4: #1f99c2;

	/* Oceata admin design system v2 -- navy identity tokens. These are ADDITIVE:
	   the existing --oc-prefixed, --green and --red vars above stay untouched for screens not yet migrated. */
	--navy-900: #08192B;
	--navy-800: #0B2138;
	--navy-700: #0F3557;
	--navy-600: #164A76;
	--navy-500: #155C86;
	--ink: #12293D;
	--ink-700: #25405A;
	--ink-600: #3E5A72;
	--ink-500: #5C7488;
	--muted: #7A8FA3;
	--muted-light: #8A9CAC;
	--disabled: #A9BAC8;
	--accent-blue: #1E8FCF;
	--accent-blue-dark: #14618F;
	--accent-blue-light: #E7F1F9;
	--success: #1C7A5E;
	--success-text: #2F9E8F;
	--warning: #B5791F;
	--warning-text: #8C6318;
	--warning-bg: #FBF1E0;
	--warning-surface: #FEFAF2;
	--warning-border: #EFE1C6;
	--page-bg: #EEF2F6;
	--surface: #FFFFFF;
	--surface-subtle: #FBFCFE;
	--table-header-bg: #F7FAFC;
	--zebra-row: #FBFCFD;
	--hover-row: #F7FAFC;
	--hover-row-alt: #F2F7FB;
	--border: #E2E9F0;
	--border-light: #EDF2F6;
	--border-light-2: #F0F4F8;
	--field-border: #DDE5EC;
	--control-border: #D8E1E9;
	--toggle-off: #D3DDE5;

	--font-ui: 'Manrope', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--radius-hero: 14px;
	--radius-card: 12px;
	--radius-inset: 10px;
	--radius-btn: 7px;
	--radius-chip: 6px;
	--radius-pill: 20px;

	--hero-gradient: linear-gradient(104deg,#08192B 0%,#0E3355 52%,#155C86 100%);
	--hero-gradient-teal: linear-gradient(104deg,#08192B 0%,#0E3355 55%,#1B6E7E 100%);

	--sidebar-width: 236px;
	--topbar-height: 60px;
}
body { background-image:none !important; background-color:#FFF !important; font-family: 'Manrope', 'Urbanist', sans-serif !important; font-size:14px; font-weight:300; }
li, ol, h1, .xp, .xpnum, input, select, option, textarea {font-family: 'Manrope', 'Urbanist', sans-serif !important;}
h1, .h1actual { font-weight: 100 !important; font-size:26px; }
.h1 { font-weight: 600 !important; font-size:26px; }
th { top: 46px; } /* this is to cope with the 46px header that will HIDE these */
.noHeader th { top: 0px; }

a { color: var(--oc3dark); text-decoration: none; }
.hasDatepicker { width:95px !important; }

.back-oc1 { background-color: var(--oc1) !important; color:#FFF !important; }
.back-oc2 { background-color: var(--oc2) !important; }
.back-oc3 { background-color: var(--oc3) !important; }
.back-oc1light { background-color: var(--oc2light) !important; }
.back-oc2light { background-color: var(--lightGrey) !important; }
.back-oc3light { background-color: var(--oc3light) !important; }

.submitlg { background-color: var(--navy-700); }
.submitlg:hover { background-color: var(--navy-600); }
.submitlg1 { background-color: var(--navy-600); }
.submitlg1:hover { background-color: var(--navy-700); }
.submitlg2 { background-color: var(--success); }
.submitlg2:hover { background-color: var(--navy-700); }

.rroundIcon { width:17px; background-color:#000; border-radius:100%; padding:2px; }

.masHeader { position: fixed; z-index: 10000; width: 100%; top: 0px; left: 0px; border-bottom:6px solid var(--oc2);}
.masHeaderContent { line-height:30px; text-align:left; padding:3px 10px 3px 15px; background-color:#000; color:#FFF; }
.masHeaderContent a { color:#FFFFFF; text-decoration:none; }
.masHeaderContent a:hover { color:var(--greyTint); text-decoration:none; }
.manavbox { width:170px; padding:0px; background-color:var(--greyTint); height:100%; position:fixed; z-index:100000; top:46px; left:0px; }
.manavbox a { display:block; padding:5px; padding-left:15px; line-height:25px; font-size:16px; color:#000; border-bottom:1px solid #d5d5D5; text-decoration: none; }
.manavbox a:hover { background-color:#757575; color:#FFF; text-decoration:none; }
.mainContainer { min-height:450px; margin-left:180px; margin-top:46px; padding-right:10px; }
.mainContainer.pictureBack { margin-left: 170px; margin-top: 35px; padding-right:0px; }
.catchlineContainer { margin-top:40px; background-color:#FFFFFF; padding:30px; margin-left:280px; margin-right:100px; border-top:1px solid var(--greyTint); }
.catchlineContainer.pictureBack { margin-top:0px; }
.zero .manavbox { display:none; }
.zero .mainContainer { margin-left:15px; margin-right:15px; }
.zero .catchlineContainer { margin-left:100px; }

.ocChooser { background-color:var(--greyTint); padding:20px; margin:20px auto; width:600px; border-radius:15px; }
.ocChooser h1  { margin-top:0px; }
.chooserRow { background-color:#FFF; border-radius:5px; border:1px solid #999; padding:10px; margin-bottom:10px; font-size:12px; text-align:left; }
.chooserRow:hover { background-color: var(--oc3); cursor:pointer; }
.chooserDefault { width:50px; text-align:center; float:right; font-size:12px; z-index:100; }
.hvaFilterDetail { white-space:nowrap; margin-right: 15px; display: inline-block; }

.didyMeTable { border: 1px solid var(--lightGrey); border-bottom:0px none; }
.ddPositive { background-color:var(--green); color:#FFF; }
.ddNegative { background-color:var(--red); color:#FFF; }

#notifybox { background-color: var(--oc2); }
.ocbox { min-height: 80px; padding: 8px; border-radius: 5px; margin-bottom: 10px; margin-right: 10px; font-size: 16px;  }
.ocbox.centered { text-align: center; }
.ocbox .chooserRow { border:0px none; cursor: default; }
.clickable { cursor: pointer !important; }
.ocbox.clickable:hover { background-image:url(https://i.ibishi.co.uk/0021-pencil7.png); background-repeat: no-repeat; background-position: right 5px top 5px;  background-size: 23px; box-shadow:3px 3px 5px #666; }
.ocbox.back-oc2 .chooserRow { background-color:var(--oc2light); }
.ocbox.back-oc2 .chooserRow:hover { background-color:var(--oc3light); }
.ocbox.back-oc2light .chooserRow:hover { background-color:var(--oc3light); }
.back-oc3.clickable:hover { background-color: var(--oc2) !important; }
/* .back-oc2.clickable:hover { background-color: var(--oc3) !important; }
.back-oc2light.clickable:hover { background-color: var(--oc3light) !important; }
.back-oc3light.clickable:hover { background-color: var(--oc2light) !important; } */

.ocIcon { width:19px; }
.ocIcon.padR { margin-right:4px; }
.dataRow .ocIcon { cursor: pointer; }
.dataRow .ocIcon.padR { margin-right:7px; }
.dataRow td.highlightRow { background-color:var(--red); color:#FFF; }
.dataRow td.highlightRow.warning { background-image: url(https://i.ibishi.co.uk/w/1105-warning2.png); background-repeat: no-repeat; background-position: 3px center; background-size: 18px; padding-left:29px; }
.dataRow td.highlightRow a { color:#FFF !important; }
.smallNumbers { width:20px; height:20px; border: 0px none; background-color:#333; font-size:13px; color:#FFF; }

.selectableRow { cursor:pointer; }
.selectableRow:hover { background-color:var(--greyTint); }

.ocFlagSmall, .flagicon { height:21px; border:1px solid #333; }

.formrowlg .xp, .formrowlg option, .formrowlg input, .formrowlg td, .formrowlg th { font-size: 16px !important; }
.itemRow { margin-bottom:4px; }
.itemHead { display:inline-block; width:100px; text-align:left; vertical-align:top; font-weight:bold; }


.formrowlg.wideHeight td { padding-top: 20px; padding-bottom: 20px; }

/* ==========================================================================
   Oceata admin design system v2 -- global chrome (desktop only; mobile keeps
   the legacy .masHeader / .manavbox markup and rules above, untouched).
   Scoped under .oc-* classes so nothing here can bleed into shared
   cross-project components (common.css, prodnavAjax.asp, _global.asp).
   ========================================================================== */

body:not(.mobilecss) { background-color: var(--page-bg) !important; }

.oc-sidebar {
	position: fixed; z-index: 10000; top: 0; left: 0; width: var(--sidebar-width); height: 100%;
	background-color: var(--navy-900); border-right: 1px solid #05121F;
	display: flex; flex-direction: column; overflow-y: auto;
	font-family: var(--font-ui);
}
.oc-sidebar-brand { padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.oc-sidebar-brand a { display: flex; align-items: center; text-decoration: none; }
.oc-brand-logo { height: 25px; width: auto; }
.oc-sidebar-nav { flex: 1 1 auto; padding: 10px 0; }
.oc-nav-group { margin-bottom: 6px; }
.oc-nav-heading { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #527892; padding: 10px 10px 8px; }
.oc-nav-link { display: flex; align-items: center; gap: 8px; margin: 0 6px; padding: 9px 10px; border-radius: 7px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: #B4C6D4; text-decoration: none; transition: background 120ms ease; }
.oc-nav-link:hover { background-color: rgba(255,255,255,0.06); color: #FFFFFF; text-decoration: none; }
.oc-nav-link.active { background-color: rgba(30,143,207,0.16); color: #FFFFFF; }
.oc-nav-marker { display: inline-block; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 1px; background-color: rgba(255,255,255,0.14); }
.oc-nav-link.active .oc-nav-marker { background-color: #39A8E0; }
.oc-nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: #4E7A99; }
.oc-sidebar-footer { padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,0.07); font-family: var(--font-mono); font-size: 10.5px; color: #5B7E99; line-height: 1.7; }
.oc-sidebar-footer a { color: #5B7E99; text-decoration: none; }
.oc-sidebar-footer a:hover { color: #9FC4DC; }

.oc-topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-height); background-color: var(--surface); border-bottom: 1px solid #DFE7EE; font-family: var(--font-ui); }
.oc-topbar-inner { max-width: calc(1700px - var(--sidebar-width)); height: 100%; margin: 0; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
.oc-breadcrumb { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #C3CFDA; white-space: nowrap; }
.oc-breadcrumb .oc-breadcrumb-current { color: #12293D; }
.oc-breadcrumb-link { color: inherit; text-decoration: none; }
.oc-breadcrumb-link:hover { color: var(--ink-500); }
a.oc-breadcrumb-current:hover { text-decoration: underline; }
.oc-topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.oc-search-form { margin: 0; }
.oc-search-input { width: 280px; background-color: #F3F6F9; border: 1px solid #E1E8EF; border-radius: 7px; padding: 8px 12px; font-family: var(--font-ui); font-size: 12.5px; color: var(--ink); box-sizing: border-box; }
.oc-topbar-divider { width: 1px; align-self: stretch; margin: 14px 0; background-color: #E4EAF0; }
.oc-env-pill { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.oc-env-pill.dev { background-color: #FBEAEA; color: #C00; }
.oc-env-pill.live { background-color: #F1F5F9; color: #8A9CAC; }
.oc-env-pill.local { background-color: #FBEAEA; color: #C00; }
.oc-sql-toggle { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500); white-space: nowrap; }
.oc-user { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.oc-user-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background-color: var(--navy-700); color: #FFFFFF; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.oc-client-avatar { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background-color: var(--navy-600); color: #FFFFFF; font-family: var(--font-mono); font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: default; }
.oc-user-meta { line-height: 1.3; }
.oc-user-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.oc-user-role { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); }
.oc-logout { font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.oc-logout:hover { color: var(--ink-500); }
.oc-user-menu { position: relative; }
.oc-user-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 170px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 24px rgba(15,39,66,0.14); padding: 6px; z-index: 50; }
.oc-user-menu.open .oc-user-dropdown { display: block; }
.oc-user-dropdown a { display: block; padding: 8px 10px; border-radius: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.oc-user-dropdown a:hover { background-color: var(--hover-row); }
.oc-user-dropdown-logout { margin-top: 4px; border-top: 1px solid var(--border-light); padding-top: 10px !important; }

.zero .oc-sidebar { display: none; }
body:not(.mobilecss) .mainContainer { margin-left: var(--sidebar-width); margin-top: 0; padding-right: 0; }
body:not(.mobilecss) .mainContainer.pictureBack { margin-left: var(--sidebar-width); margin-top: 0; padding-right: 0; }
body:not(.mobilecss).zero .mainContainer { margin-left: 15px; margin-right: 15px; }
body:not(.mobilecss) .mainContentFrame { background-color: transparent !important; padding: 26px !important; box-sizing: border-box; }
body:not(.mobilecss) .catchlineContainer { margin-left: var(--sidebar-width); margin-right: 0; margin-top: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-light); border-top: 1px solid var(--border); padding: 18px 26px 26px; background-color: var(--surface); }
body:not(.mobilecss).zero .catchlineContainer { margin-left: 100px; }
body:not(.mobilecss) .catchlineContainer a { color: var(--ink-500); text-decoration: none; }
body:not(.mobilecss) .catchlineContainer a:hover { text-decoration: underline; }
body:not(.mobilecss) .oc-footer-inner { max-width: calc(1700px - var(--sidebar-width)); margin: 0; }

/* ==========================================================================
   Oceata admin design system v2 -- Voyages list + Voyage dashboard (Phase 1).
   ========================================================================== */

.oc-page-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.oc-page-header .oc-eyebrow { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.oc-page-header h1 { font-family: var(--font-ui); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.oc-page-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.oc-toolbar { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-hero .oc-toolbar { background-color: transparent; border: none; padding: 0; margin: 18px 0 0; }
.oc-toolbar .oc-search-input { width: 260px; }
.oc-toolbar select.xp { border: 1px solid var(--field-border) !important; border-radius: var(--radius-btn); font-family: var(--font-ui); font-size: 12.5px !important; color: var(--ink); background-color: var(--surface) !important; padding: 7px 10px; }
.oc-filter-pill { display: inline-flex !important; align-items: center; gap: 5px; padding: 7px 13px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-500); background-color: var(--surface); border: 1px solid var(--control-border); white-space: nowrap; cursor: pointer; }
.oc-filter-pill input { margin: 0; }
.ocVoyageTypeFilter + .ocVoyageTypeFilter { margin-left: -5px; }
.ocVoyageTypeFilter.oc-filter-pill { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: #FFFFFF; }

.oc-table-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
table.ocVoyageList tr:first-child th:first-child { border-top-left-radius: var(--radius-card); }
table.ocVoyageList tr:first-child th:last-child { border-top-right-radius: var(--radius-card); }
table.ocVoyageList tr:last-child td:first-child { border-bottom-left-radius: var(--radius-card); }
table.ocVoyageList tr:last-child td:last-child { border-bottom-right-radius: var(--radius-card); }
table.ocVoyageList { border-collapse: collapse; }
table.ocVoyageList th { background-color: var(--table-header-bg); border-bottom: 1px solid #E6EDF3; font-family: var(--font-mono); font-size: 9.5px !important; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 8px 5px; position: sticky; top: 60px; z-index: 2; }
table.ocVoyageList td { border-bottom: 1px solid #F0F4F8; padding: 9px 5px; font-family: var(--font-ui); font-size: 12.5px !important; color: var(--ink); vertical-align: middle; }
table.ocVoyageList tr.dataRow:nth-child(even) { background-color: var(--zebra-row); }
table.ocVoyageList tr.dataRow:hover { background-color: var(--hover-row); }
table.ocVoyageList td[align="right"] { font-family: var(--font-mono); }

.ocVoyageTypeTag.hva { background: var(--accent-blue-light); color: var(--accent-blue-dark); }
.ocVoyageTypeTag.ovr { background: var(--warning-bg); color: var(--warning-text); }

/* Voyage dashboard */
.oc-hero { background: var(--hero-gradient); border-radius: var(--radius-hero); padding: 26px 28px; color: #FFFFFF; margin-bottom: 20px; }
.oc-hero-eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #7FC4E8; }
.oc-hero-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; }
.oc-hero-title-group { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.oc-hero-title { font-family: var(--font-ui); font-size: 31px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; margin: 0; }
.oc-hero-title.compact { font-size: 26px; }
.oc-hero-title-row .oc-hero-btn-ghost { flex: 0 0 auto; white-space: nowrap; }
.oc-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.oc-hero-title-row .oc-hero-actions { flex: 0 0 auto; }
.oc-hero-pill-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #7FA8C6; margin-right: 5px; vertical-align: middle; }
.oc-hero-pill-dot.complete { background-color: var(--success-text); }
.oc-hero-meta { font-family: var(--font-mono); font-size: 11.5px; color: #A9CDE4; display: flex; flex-wrap: wrap; gap: 22px; }
.oc-pipeline { display: flex; gap: 4px; background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-inset); padding: 4px; margin-top: 18px; overflow-x: auto; }
.oc-pipeline-step { flex: 0 0 auto; min-width: 118px; border-radius: var(--radius-btn); padding: 10px 12px; }
.oc-pipeline-step .oc-pipeline-state { display: block; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.oc-pipeline-step .oc-pipeline-label { display: block; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.oc-pipeline-step.complete { background-color: rgba(255,255,255,0.08); }
.oc-pipeline-step.complete .oc-pipeline-label { color: #FFFFFF; }
.oc-pipeline-step.complete .oc-pipeline-state { color: #8FD3D8; }
.oc-pipeline-step.current { background-color: #FFFFFF; }
.oc-pipeline-step.current .oc-pipeline-label { color: var(--navy-800); }
.oc-pipeline-step.current .oc-pipeline-state { color: var(--success); }
.oc-pipeline-step.pending { background-color: transparent; }
.oc-pipeline-step.pending .oc-pipeline-label { color: #7FA8C6; }
.oc-pipeline-step.pending .oc-pipeline-state { color: #5D89A8; }
.oc-hero-pill { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; padding: 3px 8px; border-radius: var(--radius-pill); background-color: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2); vertical-align: middle; margin-left: 6px; }
.oc-hero-btn-ghost, .oc-hero-btn-solid { display: inline-block; padding: 9px 16px; border-radius: var(--radius-btn); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.oc-hero-btn-ghost { background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: #FFFFFF; }
.oc-hero-btn-ghost:hover { background-color: rgba(255,255,255,0.18); }
.oc-hero-btn-solid { background-color: #FFFFFF; border: 1px solid #FFFFFF; color: var(--navy-800); }
.oc-hero-btn-solid:hover { background-color: #EEF2F6; }
.oc-stat-col { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
.oc-stat-col:first-of-type { margin-right: 16px; }
@media (max-width: 1300px) { .oc-stat-col { display: block; width: auto; margin-right: 0 !important; } }

.oc-dash-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 20px; align-items: start; }
.oc-dash-col { min-width: 0; }
.oc-dash-col.oc-dash-col-right { position: sticky; top: 80px; }
@media (max-width: 1300px) { .oc-dash-grid { display: block; } .oc-dash-col.oc-dash-col-right { position: static; margin-top: 20px; } }
.oc-dash-grid .ocbox { border: 1px solid var(--border); border-radius: var(--radius-card); background-color: var(--surface) !important; color: var(--ink); margin: 0 0 20px 0; padding: 20px 22px; box-sizing: border-box; overflow: hidden; transition: background-color 120ms ease, border-color 120ms ease; }
.oc-dash-grid .ocbox:last-child { margin-bottom: 0; }
.oc-dash-grid .ocbox.clickable:hover { background-image: none !important; box-shadow: none !important; background-color: var(--surface-subtle) !important; border-color: var(--navy-600); }
.oc-dash-grid .ocbox .h1 { color: var(--ink); font-family: var(--font-ui); font-size: 15px !important; font-weight: 700 !important; letter-spacing: normal; }
.oc-dash-grid .ocbox.oc-processing-card { background-color: var(--navy-700) !important; color: #FFFFFF; }
.oc-dash-grid .ocbox.oc-processing-card .h1 { color: #FFFFFF; }
.oc-dash-grid .ocbox.oc-processing-card .chooserRow { background-color: rgba(255,255,255,0.06) !important; color: #FFFFFF; padding-top: 2px; }
.oc-dash-grid .ocbox.back-oc2light .chooserRow:hover, .oc-dash-grid .ocbox.back-oc2 .chooserRow:hover { background-color: var(--surface-subtle); }

/* Pagination (shared prodnavAjax.asp component) -- scoped to Oceata's own table
   card only, so this never touches other client sites reusing the same include.
   Closest achievable fidelity: the component renders comma-separated numbers,
   not discrete button elements, so true "28px square buttons" isn't reachable
   without editing shared markup -- flagged, not attempted. */
.oc-table-card .prodnav { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--border-light); }
.oc-table-card .prodnav1 { color: var(--muted); }
.oc-table-card .prodnav2 a, .oc-table-card .prodnav2 span.blk { display: inline-block; min-width: 20px; text-align: center; padding: 3px 6px; border-radius: 5px; }
.oc-table-card .prodnav2 span.blk { background-color: var(--navy-700); color: #FFFFFF; font-weight: 600; }
.oc-table-card .prodnav2 a { color: var(--ink-500); }
.oc-table-card .prodnav2 a:hover { background-color: var(--hover-row); }

/* ==========================================================================
   Oceata admin design system v2 -- Noon Reports (Phase 4).
   ========================================================================== */
.oc-noon-summary { display: flex; flex-wrap: wrap; }
.oc-noon-stat { flex: 1 1 160px; padding: 14px 18px; border-right: 1px solid var(--border-light); }
.oc-noon-stat:last-child { border-right: none; }
.oc-noon-stat span { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.oc-noon-stat strong { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.oc-noon-table-scroll { overflow: auto; max-height: 620px; border-top: 1px solid var(--border); }
table.oc-noon-table { border-collapse: collapse; width: 100%; }
table.oc-noon-table th { position: sticky; top: 0; z-index: 2; background-color: var(--table-header-bg); border-bottom: 1px solid #E6EDF3; font-family: var(--font-mono); font-size: 9px !important; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 9px 12px; }
table.oc-noon-table td { border-bottom: 1px solid var(--border-light); padding: 9px 12px; font-family: var(--font-mono); font-size: 11px !important; color: var(--ink); }
table.oc-noon-table td:first-child { font-weight: 600; font-size: 11.5px !important; }
table.oc-noon-table tr:nth-child(even) td { background-color: var(--zebra-row); }
table.oc-noon-table tr:hover td { background-color: var(--hover-row-alt); }

/* ==========================================================================
   Oceata admin design system v2 -- Overview / home (Phase 5).
   ========================================================================== */
.oc-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.oc-stat-tile { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; }
.oc-stat-tile.clickable { cursor: pointer; }
.oc-stat-tile.clickable:hover { border-color: var(--navy-600); }
.oc-stat-key { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.oc-stat-figure { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink); }
.oc-stat-note { display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }

/* ==========================================================================
   Oceata admin design system v2 -- Voyage dashboard review pass (Review 01).
   ========================================================================== */

/* Content max-width so the page doesn't float in whitespace at wide viewports */
body:not(.mobilecss) .mainContentFrame { max-width: calc(1700px - var(--sidebar-width)); margin-left: 0; margin-right: auto; box-sizing: border-box; }

/* Sticky footer: header/footer bars always stretch full width; footer sits at the
   viewport bottom on short pages and after the natural content end on long ones. */
body:not(.mobilecss) { min-height: 100vh; display: flex; flex-direction: column; }
body:not(.mobilecss) .mainContainer { flex: 1 0 auto; }
body:not(.mobilecss) .catchlineContainer { flex: 0 0 auto; }

/* Shared button system, scoped classes so the site-wide .submitlg* meaning is untouched */
.oc-btn-primary, .oc-btn-secondary { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 7px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; padding: 9px 16px; text-decoration: none; cursor: pointer; }
.oc-btn-primary { background-color: var(--navy-700); border: 1px solid var(--navy-700); color: #FFFFFF; }
.oc-btn-primary:hover { background-color: var(--navy-600); border-color: var(--navy-600); color: #FFFFFF; }
.oc-btn-secondary { background-color: #FFFFFF; border: 1px solid var(--control-border); color: var(--ink); }
.oc-btn-secondary:hover { background-color: #F1F5F9; }
.oc-btn-sm { padding: 6px 12px; font-size: 11.5px; font-weight: 600; border-radius: 6px; }

/* Hero chips: BC Job status + flag, inline in the meta row */
.oc-hero-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-pill); background-color: rgba(255,255,255,0.14); cursor: default; }
.oc-hero-chip.clickable { cursor: pointer; }
.oc-hero-chip-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: var(--success-text); flex: 0 0 auto; }
.oc-hero-chip img { height: 12px; width: auto; vertical-align: middle; }

/* Shared selected-voyage shell, modelled on the Ibishi profile sub-navigation. */
.oc-voyage-shell { padding-bottom: 0; overflow: visible; }
.oc-voyage-shell-fuels { margin-top: 6px; }
.oc-voyage-nav { display: flex; align-items: center; gap: 8px; margin: 20px -28px 0; padding: 0 28px; border-top: 1px solid rgba(255,255,255,0.12); }
.oc-voyage-nav-primary { display: flex; align-items: center; gap: 4px; min-width: 0; }
.oc-voyage-nav a, .oc-voyage-nav summary { display: inline-flex; align-items: center; min-height: 42px; box-sizing: border-box; padding: 0 12px; border-bottom: 4px solid transparent; color: #A9CDE4; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.oc-voyage-nav summary::-webkit-details-marker { display: none; }
.oc-voyage-nav a:hover, .oc-voyage-nav summary:hover { color: #FFFFFF; }
.oc-voyage-nav a.active, .oc-voyage-nav-more.active > summary { color: #FFFFFF; border-bottom-color: var(--success-text); }
.oc-voyage-nav-more { position: relative; margin-left: auto; }
.oc-voyage-nav-more > summary::after, .oc-voyage-nav-mobile > summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.oc-voyage-nav-more[open] > summary::after, .oc-voyage-nav-mobile[open] > summary::after { transform: rotate(225deg) translate(-2px,-1px); }
.oc-voyage-nav-menu { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); display: grid; min-width: 190px; padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: #FFFFFF; box-shadow: 0 14px 34px rgba(8,25,43,0.2); }
.oc-voyage-nav-menu a { min-height: 0; padding: 9px 11px; border: 0; border-radius: 6px; color: var(--ink-600); font-size: 12.5px; }
.oc-voyage-nav-menu a:hover, .oc-voyage-nav-menu a.active { background: var(--accent-blue-light); color: var(--navy-700); }
.oc-voyage-nav-mobile { display: none; position: relative; width: 100%; }
.oc-voyage-page-panel { margin-bottom: 20px; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 8px 24px rgba(15,39,66,0.05); }
.oc-voyage-page-panel h1, .oc-voyage-page-panel h2 { margin-top: 0; color: var(--ink); font-family: var(--font-ui); }

@media (max-width: 760px) {
	.oc-voyage-nav { margin-left: -28px; margin-right: -28px; }
	.oc-voyage-nav-primary, .oc-voyage-nav-more { display: none; }
	.oc-voyage-nav-mobile { display: block; }
	.oc-voyage-nav-mobile > summary { display: flex; justify-content: space-between; width: 100%; padding-left: 0; padding-right: 0; color: #FFFFFF; }
	.oc-voyage-nav-mobile .oc-voyage-nav-menu { left: 0; right: 0; min-width: 0; }
}

/* Empty-state note shared by Charterparty / Exclusion Periods / others */
.oc-empty-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }

/* Voyage Dates card */
.oc-datewindow-header { display: flex; align-items: baseline; justify-content: space-between; }
.oc-datewindow-duration { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--success-text); }
.oc-datewindow-row { display: flex; align-items: center; gap: 14px; }
.oc-datewindow-block { flex: 0 0 auto; }
.oc-datewindow-block.end { text-align: right; }
.oc-datewindow-label { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.oc-datewindow-date { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: 19px; font-weight: 700; color: var(--ink); }
.oc-datewindow-port { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.oc-datewindow-divider { flex: 1 1 auto; height: 1px; margin-top: 14px; background-image: repeating-linear-gradient(90deg, #C9D6E1 0 6px, transparent 6px 12px); }

/* Charterparty grid */
.oc-cp-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.oc-cp-cell { background-color: var(--surface-subtle); border: 1px solid var(--border-light); border-radius: 8px; padding: 11px 13px; }
.oc-cp-key { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); }
.oc-cp-value { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
@media (max-width: 1300px) { .oc-cp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Voyage Review summary card */
.oc-review-summary { display: flex; gap: 20px; margin: 4px 0 12px; }
.oc-review-stat { flex: 0 0 auto; }
.oc-review-key { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.oc-review-value { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.oc-review-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: var(--warning); flex: 0 0 auto; }

/* Exclusion Periods add button + HVA filter marker (chooseHVAList sub) */
.oc-default-marker { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--success-text); }
.oc-card-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; box-sizing: border-box; padding: 3px 8px; border-radius: 999px; background: var(--accent-blue-light); color: var(--accent-blue-dark); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.oc-hva-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.oc-hva-filter-card { min-width: 0; padding: 15px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.oc-hva-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oc-hva-filter-heading > strong { overflow: hidden; color: var(--ink); font-family: var(--font-ui); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.oc-hva-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.oc-hva-filter-actions .oc-btn-secondary { background: var(--page-bg); color: var(--ink); text-decoration: none; }
.oc-hva-filter-actions .oc-btn-secondary:hover { background: var(--accent-blue-light); color: var(--navy-700); text-decoration: none; }
.oc-hva-filter-delete img { display: block; width: 17px; height: 17px; }
@media (max-width: 760px) { .oc-hva-filter-grid { grid-template-columns: 1fr; } }

/* Compact exclusion periods within the voyage overview. */
.oc-exclusion-list { display: grid; gap: 8px; }
.oc-exclusion-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); cursor: pointer; }
.oc-exclusion-row:hover { border-color: var(--control-border); background: var(--hover-row-alt); }
.oc-exclusion-period { display: flex; align-items: center; gap: 12px; min-width: 0; }
.oc-exclusion-period > div { min-width: 0; }
.oc-exclusion-key { display: block; margin-bottom: 3px; color: var(--muted); font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.oc-exclusion-period strong { display: block; color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; white-space: nowrap; }
.oc-exclusion-arrow { flex: 0 0 auto; color: var(--muted-light); font-family: var(--font-mono); font-size: 16px; }
.oc-exclusion-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.oc-exclusion-reason { overflow: hidden; color: var(--ink-500); font-family: var(--font-ui); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.oc-exclusion-delete { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; }
.oc-exclusion-delete:hover { background: var(--warning-bg); }
.oc-exclusion-delete img { display: block; width: 16px !important; height: 16px !important; opacity: .7; }
@media (max-width: 760px) {
	.oc-exclusion-row { grid-template-columns: 1fr auto; gap: 10px; }
	.oc-exclusion-period { align-items: flex-start; flex-direction: column; gap: 7px; }
	.oc-exclusion-arrow { display: none; }
	.oc-exclusion-reason { display: none; }
}

/* Track card */
.oc-track-header { display: flex; align-items: flex-start; justify-content: space-between; }
.oc-track-eyebrow { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.oc-track-figure { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--ink); }
.oc-track-expand { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-blue); text-decoration: none; white-space: nowrap; }
.oc-track-expand:hover { text-decoration: underline; }
.oc-track-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin-top: 14px; border-top: 1px solid var(--border-light); background-color: var(--border-light); }
.oc-track-stat { background-color: var(--surface); padding: 12px 4px; }
.oc-track-stat span { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.oc-track-stat strong { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--ink); }

/* Voyage Processing panel */
.oc-dash-grid .ocbox.oc-processing-card { text-align: left; border-radius: 12px; padding: 18px 20px; }
.oc-proc-header { display: flex; align-items: baseline; justify-content: space-between; cursor: pointer; margin-bottom: 16px; }
.oc-proc-eyebrow { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #7FC4E8; }
.oc-proc-id { font-family: var(--font-mono); font-size: 10.5px; color: #9FC4DC; }
.oc-proc-status-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 12px; }
.oc-proc-status-copy { min-width: 0; }
.oc-proc-status-toggle { cursor: pointer; }
.oc-proc-status { font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: #FFFFFF; }
.oc-proc-context { margin-top: 3px; font-family: var(--font-ui); font-size: 12px; color: #9FC4DC; }
.oc-dash-grid .ocbox.oc-processing-card .switchLabels { display: inline-flex; align-items: center; font-size: 12px !important; white-space: nowrap; }
.oc-dash-grid .ocbox.oc-processing-card .switchLabel { margin: 0 !important; font-family: var(--font-ui); font-size: 12px !important; font-weight: 500; }
.oc-dash-grid .ocbox.oc-processing-card .switch.smallerSwitch { flex: 0 0 auto; }
.switch input:checked + .slider { background-color: var(--success-text); }
.oc-proc-steps { margin-top: 14px; }
.oc-proc-step-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.oc-proc-dot { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }
.oc-proc-dot.complete { background-color: var(--success-text); }
.oc-proc-dot.current { background-color: var(--warning); }
.oc-proc-dot.pending { background-color: rgba(255,255,255,0.18); }
.oc-dash-grid .ocbox.oc-processing-card .hoverRows tr:hover { background-color: rgba(255,255,255,0.08); }
.oc-dash-grid .ocbox.oc-processing-card .hoverRows th:hover { background-color: transparent; }
.oc-proc-step-name { flex: 1 1 auto; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: #7FA8C6; }
.oc-proc-step-name.is-white { color: #FFFFFF; }
.oc-proc-step-name.is-current { color: #FFFFFF; font-weight: 600; }
.oc-proc-step-slot { text-align: right; white-space: nowrap; }
.oc-proc-step-slot > * + * { margin-left: 12px; }
.oc-proc-count { font-family: var(--font-mono); font-size: 11px; color: #9FC4DC; }
.oc-proc-action { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7FC4E8; text-decoration: none; }
.oc-proc-action:hover { text-decoration: underline; }
.oc-proc-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.oc-proc-footer-item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #7FC4E8; text-decoration: none; }
.oc-proc-footer-item:hover { text-decoration: underline; }
.oc-proc-footer-item img { height: 14px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
.oc-proc-reset { margin-left: auto; }

/* Overview home -- restored background photo behind the greeting + stat tile */
.oc-overview-hero { background-image: url(/images/photos/still-water-med.jpg); background-repeat: no-repeat; background-size: cover; background-position: left top; border-radius: var(--radius-hero); padding: 26px 28px; min-height: 500px; }

/* Card header row (heading left, action button right) + key/value field grid, e.g. Invoice card */
.oc-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; line-height: 1.2; }
.oc-card-header .h1 { display: block; line-height: 1.2; }
.oc-card-content { margin-top: 4px; }
.oc-invoice-grid { display: flex; gap: 32px; flex-wrap: wrap; }
.oc-invoice-key { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.oc-invoice-value { display: block; margin-top: 4px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink); }
.oc-invoice-value.mono { font-family: var(--font-mono); }
.oc-invoice-vat { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--muted-light); }