:root {
        /* HarbourCommand dark maritime palette (defaults) */
        --hc-bg: #06131d;
        --hc-bg-2: #081b27;
        --hc-panel: #0b2230;
        --hc-panel-2: #0f2b3a;
        --hc-panel-3: #163746;
        --hc-border: #244553;

        --hc-text: #f4f7f9;
        --hc-text-soft: #d7e0e5;
        --hc-muted: #91a4af;

        --hc-cyan: #16c7e7;
        --hc-blue: #278cff;
        --hc-success: #18a66a;
        --hc-warning: #e3aa17;
        --hc-danger: #e24a55;
}

/* Global page background and base text */
body {
    background: var(--hc-bg);
    color: var(--hc-text);
}

/* Scoped default panel/card surface within the application container */
.hc-panel, .hc-card { background: var(--hc-panel); border: 1px solid var(--hc-border); border-radius: 8px; color: var(--hc-text); }
.hc-surface, .hc-section { background: var(--hc-panel-2); border-radius: 6px; color: var(--hc-text-soft); }

/* Ensure cards within main page container adopt the dark panel look */
.hc-page-container .card { background: var(--hc-panel); border: 1px solid var(--hc-border); color: var(--hc-text); }

/* Forms inside the app container */
.hc-page-container .form-control, .hc-page-container .form-select, .hc-page-container textarea { background-color: var(--hc-panel-2); border-color: var(--hc-border); color: var(--hc-text); }
.hc-page-container .form-control::placeholder { color: var(--hc-muted); }
.hc-page-container .form-control:focus, .hc-page-container .form-select:focus { box-shadow: 0 0 0 0.12rem rgba(22,55,70,0.45); border-color: var(--hc-cyan); }

/* Tables scoped inside page container */
.hc-page-container table.table { background: transparent; color: var(--hc-text); }
.hc-page-container table.table thead th { background: var(--hc-panel-3); color: var(--hc-text); border-bottom:1px solid var(--hc-border); }
.hc-page-container table.table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.01); }
.hc-page-container table.table tbody tr:hover { background: rgba(255,255,255,0.02); }

/* Footer */
.hc-footer { background: var(--hc-bg); color: var(--hc-muted); }
.hc-footer a { color: var(--hc-muted); }
.hc-footer a:hover { color: var(--hc-cyan); }

/* Top navigation adjustments for contrast */
.hc-topbar { background: linear-gradient(180deg,var(--hc-panel), var(--hc-panel-2)); }
.hc-topbar .nav-link { color: var(--hc-text-soft); }
.hc-topbar .nav-link.active { color: var(--hc-cyan); font-weight:600; }
.hc-topbar .nav-link:hover { color: var(--hc-text); }
.hc-topbar .hc-brand-strapline { color: var(--hc-text-soft); }

/* Status badges */
.hc-badge-success { background: var(--hc-success); color: #fff; }
.hc-badge-warning { background: var(--hc-warning); color: #111; }
.hc-badge-danger { background: var(--hc-danger); color: #fff; }

/* Utility: dark sticky panels */
.sticky-top.hc-booking-summary { background: var(--hc-panel-2); border:1px solid var(--hc-border); }

/* Command strip below navbar */
.hc-command-strip { background: rgba(255,255,255,0.02); border-bottom:1px solid var(--hc-border-soft); }
.hc-command-strip .text-muted { color: var(--hc-text-soft); }
.hc-command-strip div { padding: 4px 10px; }

/* Reusable panel/header classes */
.hc-panel { background: var(--hc-panel); border:1px solid var(--hc-border); border-radius:8px; color:var(--hc-text); }
.hc-panel-header { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.02); font-weight:600; color:var(--hc-text); }
.hc-panel-body { padding:12px 14px; color:var(--hc-text-soft); }
.hc-panel-title { font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--hc-text-soft); }

/* Form controls specifically scoped */
.hc-page-container .form-control, .hc-page-container .form-select { background: var(--hc-panel-2); border:1px solid var(--hc-border); color:var(--hc-text); }
.hc-page-container .form-control::placeholder { color:var(--hc-muted); }

/* Scoped table helper */
.hc-table { width:100%; border-collapse:collapse; color:var(--hc-text); }
.hc-table thead th { background:var(--hc-panel-3); color:var(--hc-text); padding:8px 10px; text-align:left; }
.hc-table tbody td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.02); }
.hc-table tbody tr:hover { background: rgba(255,255,255,0.02); }

/* Status badges */
.hc-status { padding:.25rem .5rem; border-radius:6px; font-size:0.8rem; }
.hc-status.atport { background:var(--hc-success); color:#fff; }
.hc-status.boarding { background:var(--hc-cyan); color:#052026; }
.hc-status.underway { background:var(--hc-blue); color:#fff; }
.hc-status.warning { background:var(--hc-warning); color:#111; }
.hc-status.danger { background:var(--hc-danger); color:#fff; }



    .body-theme {
        background: linear-gradient(180deg,var(--hc-bg),#02121a);
        color: var(--hc-text);
    }

    /* Header / Navigation */
    .hc-topbar {
        background: linear-gradient(180deg,var(--hc-panel-2), var(--hc-panel));
        border-bottom: 1px solid var(--hc-border);
        position: sticky;
        top: 0;
        z-index: 2000;
    }

    body > header.hc-topbar {
        position: sticky;
        top: 0;
        z-index: 2000;
    }

    .hc-topbar .navbar {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .hc-topbar .navbar-brand {
        color: var(--hc-text);
        text-decoration: none;
    }

    .hc-topbar .navbar-brand img {
        display: inline-block;
        vertical-align: middle;
    }

    .hc-topbar .brand-text {
        display: inline-block;
        vertical-align: middle;
        margin-left: .6rem;
    }

    .hc-topbar .brand-text strong {
        display: block;
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .hc-topbar .brand-text small {
        display: block;
        color: var(--hc-muted);
        font-size: .85rem;
    }

    .hc-topbar .operations-label {
        margin-left: 1rem;
        color: var(--hc-muted);
        border-left: 1px solid var(--hc-border);
        padding-left: 12px;
    }

    .hc-topbar .nav-link {
        color: var(--hc-text);
    }

    .hc-topbar .nav-link.active,
    .hc-topbar .nav-link:hover {
        color: var(--hc-accent);
    }

    .hc-topbar .navbar-toggler {
        border-color: rgba(255,255,255,0.06);
    }

    @media(max-width:767px) {
        .hc-topbar .brand-text small {
            display: none;
        }

        .hc-topbar .operations-label {
            display: none;
        }
    }

    .hc-footer {
        background: transparent;
    }

    .card.bg-dark {
        background: var(--hc-panel) !important;
        border: 1px solid var(--hc-border);
    }

    .hc-vessel-card .badge {
        padding: .4rem .6rem;
    }

    .timeline li {
        border-left: 2px solid var(--hc-border);
        padding-left: 10px;
        margin-left: 6px;
    }

    .hc-map-overlay {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2;
        opacity: 0.85;
    }

    .badge.bg-warning.text-dark {
        color: #212529 !important;
    }
    /* KPI cards */
    .card.text-white.bg-secondary {
        background: linear-gradient(180deg,#0b2233,#071726);
        border: 1px solid rgba(255,255,255,0.03);
    }
    /* Responsive tweaks */
    @media(min-width:1200px) {
        .container-fluid {
            max-width: 1400px;
        }
    }
    /* Print styles for tickets */
    @media print {
        body {
            background: #fff !important;
            color: #000 !important;
        }

        .hc-topbar, .hc-footer, .no-print, nav, .navbar {
            display: none !important;
        }
    }
    /* Seat map color coding */
    .hc-seat {
        background: rgba(255,255,255,0.03);
        color: #e6eef2;
    }

    .hc-seat-standard {
        border: 1px solid rgba(255,255,255,0.04);
        background: linear-gradient(180deg,#0b2a36,#07202a);
    }

    .hc-seat-premium {
        border: 1px solid rgba(255,215,0,0.15);
        background: linear-gradient(180deg,#6b4f18,#8c6a22);
        color: #fff;
    }

    .hc-seat-accessible {
        border: 1px solid rgba(102,51,153,0.15);
        background: linear-gradient(180deg,#3b1f4a,#4f2a5e);
        color: #fff;
    }

    .hc-seat-occupied {
        opacity: 0.95;
    }

    .hc-seat-available {
        background: linear-gradient(180deg,#072a2f,#053036);
    }

    .hc-seat-legend {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
    }

        .hc-seat-legend .item {
            display: flex;
            gap: 6px;
            align-items: center;
            font-size: 0.9rem;
        }

        .hc-seat-legend .sw {
            width: 18px;
            height: 18px;
            border-radius: 3px;
            display: inline-block;
        }
    /* Aisle cell appearance */
    .hc-cell[data-aisle='1'] {
        background: rgba(255,255,255,0.02);
        border: none;
        min-width: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .hc-cell[data-aisle='1']::after {
            content: 'AISLE';
            font-size: 0.75rem;
            color: rgba(255,255,255,0.35);
        }
    /* Dashboard KPI card styles */
    .hc-kpi {
        background: linear-gradient(180deg,var(--hc-panel-2), var(--hc-panel));
        border: 1px solid var(--hc-border);
        color: var(--hc-text);
    }

        .hc-kpi .icon {
            font-size: 28px;
            opacity: 0.9;
        }

        .hc-kpi .value {
            font-size: 28px;
            font-weight: 700;
        }

        .hc-kpi .muted {
            color: var(--hc-muted);
            font-size: 12px;
        }
    /* Map pulse */
    .hc-pulse {
        position: relative;
    }

        .hc-pulse::after {
            content: '';
            position: absolute;
            left: -8px;
            top: -8px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(13,202,240,0.18);
            animation: hc-pulse 2s infinite;
        }

    @keyframes hc-pulse {
        0% {
            transform: scale(0.6);
            opacity: 0.9
        }

        70% {
            transform: scale(1.6);
            opacity: 0
        }

        100% {
            opacity: 0
        }
    }
    /* Fleet card tweaks */
    .hc-fleet-card {
        background: linear-gradient(180deg,var(--hc-panel), #071a22);
        border: 1px solid var(--hc-border);
        color: var(--hc-text);
    }

        .hc-fleet-card .meta {
            color: var(--hc-muted);
            font-size: 13px;
        }
    /* Vessel detail compliance gauge */
    .hc-gauge-center {
        text-align: center;
    }

    .hc-gauge-value {
        font-size: 24px;
        font-weight: 700;
        color: var(--hc-green);
    }

    /* Dashboard specific refinements */
    .dashboard-header {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .hc-strapline {
        letter-spacing: 1px;
        color: var(--hc-muted);
    }

    .hc-dashboard-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--hc-text);
    }

    .hc-status-dot {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 50%;
        box-shadow: 0 0 6px rgba(0,0,0,0.4);
    }

    .hc-kpi-row {
        margin-top: 6px;
    }

    .kpi-card .card {
        background: linear-gradient(180deg,var(--hc-panel-3), var(--hc-panel));
        border: 1px solid var(--hc-border);
        color: var(--hc-text);
    }

    .kpi-icon {
        font-size: 28px;
        opacity: 0.95;
    }

    .kpi-label {
        color: var(--hc-muted);
        font-size: 12px;
    }

    .kpi-value {
        font-size: 26px;
        font-weight: 700;
    }

    .kpi-card .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(2,6,10,0.35);
    }

    .hc-map-panel .card-header {
        background: transparent;
        border-bottom: none;
        padding: 10px 16px;
    }

    .hc-map-panel .card-body {
        padding: 8px;
    }

    .hc-fleet-panel .card-header,
    .hc-compliance-panel .card-header,
    .hc-activity-panel .card-header {
        background: transparent;
        border-bottom: none;
        padding: 10px 16px;
    }

    .hc-vessel-row {
        padding: 12px 16px;
    }

    .hc-vessel-row .badge {
        display: block;
        margin-bottom: 6px;
    }

    .hc-timeline li {
        display: flex;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px dashed rgba(255,255,255,0.03);
    }

    .hc-timeline .time {
        width: 60px;
        color: var(--hc-muted);
        font-size: 12px;
    }

    .hc-timeline .event {
        flex: 1;
    }

    /* Responsive sizing */
    @media(min-width:1200px) {
        #hc-map {
            height: 540px;
        }
    }

    @media(max-width:1199px) {
        #hc-map {
            height: 460px;
        }
    }

    .hc-navbar {
        background: var(--hc-panel-2);
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .hc-logo {
        width: 44px;
        height: 44px;
    }

    .hc-brand-name {
        letter-spacing: 1px;
    }

    .hc-brand-strapline {
        font-size: .72rem;
        letter-spacing: .2px;
    }

    .hc-control-label {
        margin-left: 12px;
        padding-left: 12px;
        border-left: 1px solid var(--hc-border);
        font-size: .72rem;
        letter-spacing: 1.2px;
        color: var(--hc-muted);
    }

    .hc-page-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }