/* Shared maritime shell; scoped to authenticated pages. */
.header-account-menu { width:min(300px,calc(100vw - 24px)); max-height:75vh; overflow-y:auto; box-shadow:0 12px 40px #102c4326; border-radius:12px; }
.header-account .shell-user { display:flex !important; cursor:pointer; }
@media(max-width:575.98px) { .header-account .shell-user { padding:.4rem; gap:.2rem; } .header-account .shell-user-name,.header-account .shell-user-role { display:none !important; } .header-account .shell-avatar { width:30px; height:30px; } }
.app-authenticated .site-nav { background:linear-gradient(165deg,#102c43,#0b2037); padding-top:1rem; }
.app-authenticated .site-nav .navbar-nav .nav-link { border-radius:7px; min-height:42px; font-size:.88rem; }
.app-authenticated .site-nav .navbar-nav .nav-link.active,
.app-authenticated .site-nav .navbar-nav .nav-item.has-active-child > .nav-link,
.app-authenticated .site-nav .dropdown-toggle[aria-expanded="true"] { background:#214f7d; box-shadow:none; }
.app-authenticated .site-nav .brand-logo-wide { object-fit:cover; background:#fff; border-radius:10px; }
.app-authenticated .app-topbar { min-height:132px; align-items:flex-start; padding-top:1rem; padding-bottom:1rem; background-image:linear-gradient(90deg,#f8fbff 0%,rgba(245,250,254,.97) 34%,rgba(235,245,252,.54) 65%,rgba(13,46,70,.18) 100%),url('../img/tonasa-office-banner.png'); background-size:cover; background-position:center,right center; border-bottom:1px solid #dce7ef; box-shadow:0 3px 16px #16364c08; }
.shell-brand { color:#142f49; font-size:1.12rem; font-weight:700; letter-spacing:-.025em; }
.shell-subtitle { color:#586f82; font-size:.8rem; margin-top:3px; }
.shell-date { color:#425f77; font-size:.75rem; margin-top:16px; font-variant-numeric:tabular-nums; }
.shell-user { display:flex; gap:.55rem; align-items:center; color:#133049; padding:.45rem .65rem; border-radius:12px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.65); max-width:220px; }
.shell-avatar { display:grid; place-items:center; width:34px; height:34px; background:#dceaf5; color:#285b83; border-radius:50%; font-weight:700; flex-shrink:0; }
.shell-user-name { font-size:.8rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px; }
.shell-user-role { font-size:.68rem; color:#62798e; }
.shell-tools { display:flex; align-items:center; gap:.8rem; }
.shell-tools .btn { background:rgba(255,255,255,.95); }
html[data-bs-theme="dark"] .app-authenticated .app-topbar { background-image:linear-gradient(90deg,#15253a 0%,rgba(21,37,58,.96) 35%,rgba(21,37,58,.55) 80%),url('../img/tonasa-office-banner.png'); border-color:#2a4058; }
html[data-bs-theme="dark"] .shell-brand { color:#e4eff8; }
html[data-bs-theme="dark"] .shell-subtitle,html[data-bs-theme="dark"] .shell-date { color:#b1c4d6; }
@media(max-width:991.98px) { .app-authenticated .app-topbar { min-height:90px; padding:.8rem 1rem; position:sticky; } .shell-date { margin-top:6px; } .shell-user { display:none; } .shell-brand { font-size:.95rem; } .shell-subtitle { font-size:.7rem; } }
@media(max-width:575.98px) { .app-authenticated .app-topbar { background-image:linear-gradient(90deg,#f8fbff,rgba(239,246,252,.93)),url('../img/tonasa-office-banner.png'); gap:.4rem; } .shell-subtitle { max-width:180px; } .shell-tools { gap:.25rem; } .shell-date { font-size:.67rem; } }
@media(prefers-reduced-motion:reduce) { .app-authenticated .site-nav,.app-authenticated .site-nav .nav-link { transition:none; } }

/* Reusable admin-panel primitives; piloted on the main dashboard. */
.ui-page-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.35rem; }
.ui-page-head__eyebrow { color:#637992; font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.25rem; }
.ui-page-head h3 { color:#162d48; font-weight:750; letter-spacing:-.025em; }
.ui-page-head__description { color:#657b92; margin:0; }
.ui-filter-panel { border:1px solid #dce6f1; border-radius:16px; padding:1rem 1.15rem; background:var(--bs-body-bg); box-shadow:0 4px 18px #102c430a; }
.ui-field-label { display:block; color:#526882; font-size:.73rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; margin-bottom:.4rem; }
.ui-filter-panel .form-select { border-color:#d9e3ef; border-radius:10px; min-height:42px; }
.ui-filter-panel .btn { border-radius:10px; min-height:42px; font-weight:650; }
.ui-tabs { display:inline-flex; flex-wrap:wrap; max-width:100%; gap:.25rem; padding:.3rem; border:1px solid #dce6f1; border-radius:12px; background:#edf3f9; }
.ui-tab { border:0; border-radius:9px; background:transparent; color:#405b79; padding:.6rem .95rem; font-weight:650; line-height:1.15; }
.ui-tab:hover { background:#fff; color:#193958; }
.ui-tab.is-active { background:#173b60; color:#fff; box-shadow:0 3px 9px #102c4325; }
.ui-tab:focus-visible { outline:3px solid #81b5f5; outline-offset:2px; }
.ui-section-label { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.35rem 1rem; margin-bottom:.65rem; }
.ui-section-label h4 { margin:0; color:#1a344f; font-size:1rem; font-weight:750; }
.ui-section-label small { color:#74869b; }
.ui-metric-card { --ui-accent:#285f91; --ui-soft:#eaf3fa; min-height:124px; height:100%; padding:1rem 1.1rem; background:var(--bs-body-bg); border:1px solid #dce6f1; border-radius:14px; box-shadow:0 4px 16px #102c4308; }
.ui-metric-card--blue { --ui-accent:#2563eb; --ui-soft:#eaf1ff; }
.ui-metric-card--green { --ui-accent:#12805a; --ui-soft:#e7f6ef; }
.ui-metric-card--red { --ui-accent:#cc4250; --ui-soft:#fff0f1; }
.ui-metric-card--amber { --ui-accent:#a86d08; --ui-soft:#fff5dd; }
.ui-metric-card__top { display:flex; align-items:center; gap:.65rem; min-height:31px; }
.ui-metric-card__icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:9px; color:var(--ui-accent); background:var(--ui-soft); }
.ui-metric-card__icon svg { width:18px; height:18px; }
.ui-summary-icon { float:right; display:grid; place-items:center; width:34px; height:34px; margin:0 0 8px 10px; border-radius:10px; color:#2563eb; background:#eff6ff; }
.ui-summary-icon svg { width:19px; height:19px; }
.ui-summary-icon.is-success { color:#15803d; background:#f0fdf4; }
.ui-summary-icon.is-danger { color:#dc2626; background:#fef2f2; }
html[data-bs-theme="dark"] .ui-summary-icon { background:#243b53; color:#93c5fd; }
html[data-bs-theme="dark"] .ui-summary-icon.is-success { background:#17392c; color:#86efac; }
html[data-bs-theme="dark"] .ui-summary-icon.is-danger { background:#472b32; color:#fca5a5; }
.ui-metric-card__label { color:#536780; font-size:.85rem; font-weight:650; line-height:1.25; }
.ui-metric-card__value { margin-top:.55rem; color:#172d49; font-size:1.65rem; font-weight:760; line-height:1.1; font-variant-numeric:tabular-nums; }
.ui-metric-card__note { margin-top:.45rem; color:#74869b; font-size:.76rem; line-height:1.4; }
#dashboard-pane-operational > .card, #dashboard-pane-operational > .row > [class*="col-"] > .card { border-color:#dce6f1; border-radius:14px; box-shadow:0 4px 16px #102c4308; overflow:hidden; }
#dashboard-pane-operational .card-header { background:var(--bs-body-bg); font-weight:650; border-bottom-color:#e6ecf3; padding:.85rem 1rem; }
html[data-bs-theme="dark"] .ui-page-head h3,html[data-bs-theme="dark"] .ui-section-label h4,html[data-bs-theme="dark"] .ui-metric-card__value { color:#e6f0fa; }
html[data-bs-theme="dark"] .ui-page-head__description,html[data-bs-theme="dark"] .ui-page-head__eyebrow,html[data-bs-theme="dark"] .ui-section-label small,html[data-bs-theme="dark"] .ui-metric-card__label,html[data-bs-theme="dark"] .ui-metric-card__note,html[data-bs-theme="dark"] .ui-field-label { color:#aec3d8; }
html[data-bs-theme="dark"] .ui-tabs { background:#1a2e43; border-color:#36506a; }
html[data-bs-theme="dark"] .ui-tab { color:#c8d8e8; }
html[data-bs-theme="dark"] .ui-tab:hover { background:#294863; color:#fff; }
html[data-bs-theme="dark"] .ui-tab.is-active { background:#2a69a3; }
html[data-bs-theme="dark"] .ui-filter-panel,html[data-bs-theme="dark"] .ui-metric-card { border-color:#36506a; }
html[data-bs-theme="dark"] .ui-metric-card__icon { background:#28445b; }
@media(max-width:575.98px) { .ui-page-head { align-items:flex-start; } .ui-page-head__actions { width:100%; } .ui-page-head__actions .btn { flex:1 1 auto; } .ui-tabs { display:flex; border-radius:12px; } .ui-tab { flex:1 1 auto; } .ui-metric-card { min-height:118px; padding:.85rem; } .ui-metric-card__value { font-size:1.45rem; } }

/* Shared module finish: apply the same visual language to existing screens. */
.app-authenticated .app-content > .card,.app-authenticated .app-content > .row .card { border-color:#dce6f1; border-radius:14px; box-shadow:0 4px 16px #102c4308; }
.app-authenticated .card-header { color:#1a344f; font-weight:650; }
.app-authenticated .table-responsive { scrollbar-color:#b7c8db transparent; }
.app-authenticated .table tbody tr:hover > * { background-color:#f4f8fc; }
.app-authenticated .form-label { color:#526882; font-size:.82rem; font-weight:650; }
.app-authenticated .form-control,.app-authenticated .form-select { transition:border-color .15s,box-shadow .15s; }
.app-authenticated .page-link { border-color:#dce6f1; color:#205c91; }
.app-authenticated .page-item.active .page-link { background:#173b60; border-color:#173b60; }
.app-authenticated .breadcrumb { color:#657b92; font-size:.85rem; }
.app-authenticated .modal-content { border:1px solid #dce6f1; box-shadow:0 18px 45px #102c4326; }
.app-authenticated .modal-header { border-bottom-color:#e6ecf3; }
.app-authenticated .accordion-button:not(.collapsed) { background:#edf4fb; color:#173b60; }
.fleet-live-map { height:min(62vh,560px); min-height:380px; border:1px solid #dce6f1; border-radius:12px; overflow:hidden; }
html[data-bs-theme="dark"] .app-authenticated .app-content > .card,html[data-bs-theme="dark"] .app-authenticated .app-content > .row .card,html[data-bs-theme="dark"] .app-authenticated .modal-content { border-color:#36506a; }
html[data-bs-theme="dark"] .app-authenticated .card-header { color:#e6f0fa; }
html[data-bs-theme="dark"] .app-authenticated .table tbody tr:hover > * { background-color:#1c344b; }
html[data-bs-theme="dark"] .app-authenticated .form-label { color:#b6c9da; }
@media(max-width:575.98px) { .fleet-live-map { height:390px; min-height:0; } }