/* =========================
   Marine Interior Systems – App Overrides
   ========================= */
:root {
    /* Colors (tokens) */
    --brand-primary: #cc0000;
    --brand-deep-marine: #154E79;
    --brand-charcoal: #2B2C29;
    --brand-muted-olive: #74786C;
    --brand-paper: #F7F7F7;
    --brand-white: #FFFFFF;
    /* Fonts */
    --font-sans: "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-display: "Georgia", "Times New Roman", serif;
    /* Spacing & Radius */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --radius-card: 12px;
    --radius-control: 8px;
    /* Map to Bootstrap vars (prefer variables over hard rules) */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 30,106,168;
    --bs-body-bg: var(--brand-paper);
    --bs-body-color: var(--brand-charcoal);
    --bs-secondary-color: var(--brand-muted-olive);
    --bs-heading-color: var(--brand-charcoal);
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-deep-marine);
    --bs-tertiary-bg: var(--brand-white);
    --bs-border-color: #DFE3E8;
    /* Buttons via vars (Bootstrap will use these) */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-deep-marine);
    --bs-btn-hover-border-color: var(--brand-deep-marine);
    --bs-btn-active-bg: var(--brand-deep-marine);
    --bs-btn-active-border-color: var(--brand-deep-marine);
    /* Typography vars */
    --bs-font-sans-serif: var(--font-sans);
    --bs-body-font-family: var(--font-sans);
    --bs-headings-font-family: var(--font-display);
    --bs-body-font-weight: 400;
    --bs-headings-font-weight: 700;
    --bs-body-line-height: 1.5;
    /* Radii → components */
    --bs-card-border-radius: var(--radius-card);
    --bs-btn-border-radius: var(--radius-control);
    --bs-border-radius: var(--radius-control);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] {
    --bs-body-bg: #121314;
    --bs-tertiary-bg: #191B1D;
    --bs-body-color: #F7F7F7;
    --bs-secondary-color: #B3B6AE;
    --bs-border-color: #2A2D30;
    --bs-link-color: #4B93CF;
    --bs-link-hover-color: #5AA0DA;
}

.hpanel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    overflow: hidden;
    margin-inline: var(--space-3);
    margin-bottom: var(--space-3);
}

    .hpanel.hblue { 
        --hdr-bg: var(--bs-primary);
    }

.k-expander {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    overflow: hidden;
}

    .hpanel > .panel-heading,
    .k-expander > .k-expander-header {
        position: relative;
        background: var(--bs-primary);
        color: var(--bs-tertiary-bg);
        padding-block: var(--space-3);
        padding-inline: var(--space-3);
        border-bottom: 1px solid var(--bs-border-color);
        border-top-left-radius: var(--radius-card);
        border-top-right-radius: var(--radius-card);
        cursor: pointer;
        transition: background-color .2s, color .2s, border-color .2s;
    }

    .hpanel > .panel-heading .card-header,
    .k-expander > .k-expander-header .k-link,
    .k-expander > .k-expander-header .k-expander-title {
        color: white;
        height: 36px;
        text-decoration: none;
    }

    .hpanel > .panel-body,
    .k-expander .k-expander-content-wrapper {
        background: var(--bs-tertiary-bg);
    }

    .hpanel > .panel-body,
    .k-expander .k-expander-content {
        padding-block: var(--space-3);
        padding-inline: var(--space-3);
    }

/* =========================
   Typography
   ========================= */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--bs-headings-font-family);
    font-weight: var(--bs-headings-font-weight);
    animation: rise-fade .6s ease-out both;
}

h1, .h1 {
    font-size: clamp(32px, 2.5vw + 1rem, 48px);
}

h2, .h2 {
    font-size: clamp(24px, 1.2vw + 1rem, 32px);
}

/* Body & Kendo inherit Bootstrap vars */
body {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    font-size: 1rem; /* 16px base via rem */
}

.k-body, .k-widget, .k-grid, .k-button, .k-input {
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-size: inherit;
}

.k-menu svg,
.k-menu svg * {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Optional kinetic heading */
@keyframes rise-fade {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.heading-kinetic {
    animation: rise-fade .6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .heading-kinetic {
        animation: none;
    }
}

/* Links inside card headers should inherit header color */
a.card-header {
    color: inherit;
    text-decoration: none;
    display: block; 
}

a.secondary-card-header {
    background-color: var(--bs-secondary-color);
    color: white;
    text-decoration: none;
}

/* =========================
   Buttons
   ========================= */
.btn {
    font-weight: 600;
}

/* Outline */
.btn-outline-primary,
.btn-outline-primary:focus {
    background-color: var(--brand-white);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

    .btn-outline-primary:hover {
        background-color: color-mix(in srgb, var(--brand-white) 85%, var(--bs-primary) 15%);
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }

/* Ghost  */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

    .btn-ghost:hover,
    .btn-ghost:focus {
        background: rgba(var(--bs-primary-rgb), .06);
        border-color: color-mix(in srgb, var(--bs-border-color) 60%, var(--bs-primary) 40%);
        color: var(--bs-body-color);
    }

    .btn-ghost:disabled {
        opacity: .6;
        pointer-events: none;
    }


/* Kendo buttons */
.k-button {
    font-weight: 600;
    border-radius: var(--bs-border-radius);
}

    .k-button.k-primary {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        color: #fff !important;
    }

        .k-button.k-primary:hover,
        .k-button.k-primary.k-hover,
        .k-button.k-primary:focus,
        .k-button.k-primary.k-focus {
            background-color: var(--bs-btn-hover-bg) !important;
            border-color: var(--bs-btn-hover-border-color) !important;
        }

    .k-button.k-outline {
        background-color: var(--brand-white) !important;
        border: 1px solid var(--bs-primary) !important;
        color: var(--bs-primary) !important;
    }

        .k-button.k-outline:hover,
        .k-button.k-outline.k-hover,
        .k-button.k-outline:focus {
            background-color: color-mix(in srgb, var(--brand-white) 85%, var(--bs-primary) 15%) !important;
        }

    .k-button.k-ghost {
        background: transparent !important;
        border: 1px solid var(--bs-border-color) !important;
        color: var(--bs-body-color) !important;
    }

        .k-button.k-ghost:hover,
        .k-button.k-ghost.k-hover,
        .k-button.k-ghost:focus {
            background: rgba(var(--bs-primary-rgb), .06) !important;
            border-color: color-mix(in srgb, var(--bs-border-color) 60%, var(--bs-primary) 40%) !important;
        }

.kbtn-add-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    padding: .375rem .75rem;
    border-radius: var(--radius-control);
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    margin-bottom: .25rem;
}
    .kbtn-add-new:hover,
    .kbtn-add-new:focus {
        background: rgba(var(--bs-primary-rgb), .06);
        border-color: color-mix(in srgb, var(--bs-border-color) 60%, var(--bs-primary) 40%);
        outline: 0;
    }

.k-input, .k-picker, .k-dropdown, .k-textbox, .k-combobox, .k-numerictextbox {
    border-radius: var(--radius-control);
}

.k-card, .k-window, .k-dialog {
    border-radius: var(--radius-card);
}

/* --- Make Kendo Form spacing to match Bootstrap forms --- */

.k-form .k-form-layout {
    gap: var(--space-3) !important;
}
.k-form .k-form-field {
    margin-bottom: 0;
}
.k-form .k-label {
    font-weight: 700;
    margin-bottom: .35rem;
}
.k-form .k-input,
.k-form .k-picker,
.k-form .k-dropdown,
.k-form .k-textbox,
.k-form .k-combobox,
.k-form .k-numerictextbox {
    width: 100%;
    border-radius: var(--radius-control);
}
.k-form .k-actions,
.k-form .k-form-buttons {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3); 
    padding: 0; 
}
.k-form.k-form-horizontal .k-form-field {
    align-items: center;
}


/* Radii */
.card, .hpanel, .k-card,
img.card-img, .card-img-top, .card-img-bottom {
    border-radius: var(--radius-card);
}
/* Kendo & form controls */
.k-button,
.form-control, .k-input, .k-picker, .k-dropdown,
.k-textbox, .k-combobox, .k-numerictextbox {
    border-radius: var(--radius-control);
}
:root {
    --navbar-logo-h: 64px;
    --navbar-logo-w: 145px;
}

.navbar-brand img#logo-image {
    width: var(--navbar-logo-w);
    height: var(--navbar-logo-h);
}