/* IHRB Universal Styles - Applied to All Pages */

:root {
    --ihrb-primary: #1A2E59;
    --ihrb-secondary: #006dbd;
    --ihrb-accent: #8bafff;
    --ihrb-light: #c6d3ef;
    --ihrb-dark: #162649;
    --ihrb-gray: #757575;
    --ihrb-light-gray: #f5f5f5;
}

/* ── Handler theme ────────────────────────────────────────────────────────────
   Scopes all IHRB primary/secondary colours to green for the Handler tab
   and Handler new-application wizard pages.
   Wrap the relevant content with class="handler-theme".
   ─────────────────────────────────────────────────────────────────────────── */
.handler-theme {
    --ihrb-primary: #223e22;
    --ihrb-secondary: #0e6b31;
    --ihrb-accent: #52b877;
    --ihrb-light: #c8e6c9;
}

    .handler-theme .bg-primary {
        background-color: #223e22 !important;
    }

    .handler-theme .text-primary {
        color: #223e22 !important;
    }

    .handler-theme .border-primary {
        border-color: #223e22 !important;
    }

/* Base Styles */
html {
    /* Fluid root size: min 14px, scales with viewport, capped at 16px.
       All rem-based sizing inherits from this, so the whole UI scales
       smoothly under browser zoom / Windows display scaling instead of
       jumping at a fixed 768px breakpoint. */
    font-size: clamp(14px, 0.875rem + 0.25vw, 16px);
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--ihrb-light-gray);
    color: #333;
}

/* Navigation Bar - Bootstrap Mobile Friendly */
.navbar-ihrb {
    background: linear-gradient(135deg, var(--ihrb-primary) 0%, var(--ihrb-secondary) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
}

    .navbar-ihrb .navbar-brand {
        color: white !important;
        font-weight: 600;
        font-size: 1.25rem;
        letter-spacing: 0.5px;
        transition: opacity 0.3s ease;
    }

        .navbar-ihrb .navbar-brand:hover {
            opacity: 0.9;
        }

    .navbar-ihrb .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500;
        padding: 0.5rem 1rem !important;
        transition: all 0.3s ease;
        border-radius: 6px;
        margin: 0 0.25rem;
    }

        .navbar-ihrb .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white !important;
        }

        .navbar-ihrb .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

    /* Navbar Toggler for Mobile */
    .navbar-ihrb .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.5);
        padding: 0.5rem 0.75rem;
    }

        .navbar-ihrb .navbar-toggler:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
        }

    .navbar-ihrb .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    /* Dropdown Menu */
    .navbar-ihrb .dropdown-menu {
        border: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 8px;
    }

    .navbar-ihrb .dropdown-item:hover {
        background-color: var(--ihrb-light);
        color: var(--ihrb-dark);
    }

    /* User Profile Menu */
    .navbar-ihrb .nav-user {
        display: flex;
        align-items: center;
    }

    .navbar-ihrb .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: var(--ihrb-accent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        margin-right: 0.5rem;
    }

.k-list-item-text::before, .k-list-header-text::before, .k-list-optionlabel::before{
    content: none !important;
}

/* Main Content Area */
.main-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Page Headers */
.page-header {
    border-bottom: 3px solid var(--ihrb-accent);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

    .page-header h1,
    .page-header h2 {
        color: var(--ihrb-primary);
        font-weight: 600;
        margin: 0;
    }

    .page-header .breadcrumb {
        background: none;
        padding: 0;
        margin-top: 0.5rem;
    }

/* Buttons - IHRB Style */
.btn-ihrb-primary {
    background: linear-gradient(135deg, var(--ihrb-primary) 0%, var(--ihrb-secondary) 100%);
    border: none;
    color: white !important;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

    .btn-ihrb-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 77, 64, 0.3);
        color: white;
    }

.btn-ihrb-secondary {
    background-color: white;
    border: 2px solid var(--ihrb-primary);
    color: var(--ihrb-primary);
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

    .btn-ihrb-secondary:hover {
        background-color: var(--ihrb-primary);
        color: white;
    }

/* Cards */
.card-ihrb {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .card-ihrb:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .card-ihrb .card-header {
        background-color: var(--ihrb-primary);
        color: white;
        font-weight: 600;
        padding: 1rem 1.5rem;
        border: none;
    }

    .card-ihrb .card-body {
        padding: 1.5rem;
    }

/* Tables */
.table-ihrb {
    overflow: hidden;
}

    .table-ihrb thead th {
        background-color: var(--ihrb-primary);
        color: white;
        font-weight: 600;
        border: none;
        padding: 1rem;
    }

    .table-ihrb tbody tr {
        transition: background-color 0.2s ease;
    }

        .table-ihrb tbody tr:hover {
            background-color: var(--ihrb-light);
        }

div.k-grid-norecords {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Detail View Tables - Used in Entity Information Cards */
.detail-label {
    width: 200px;
    white-space: nowrap;
}

/* Forms */
.form-ihrb .form-label {
    color: var(--ihrb-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-ihrb .form-control,
.form-ihrb .form-select {
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.625rem 1rem;
    transition: all 0.3s ease;
}

    .form-ihrb .form-control:focus,
    .form-ihrb .form-select:focus {
        border-color: var(--ihrb-accent);
        box-shadow: 0 0 0 0.2rem rgba(38, 166, 154, 0.25);
    }

/* Optional inspection rows (Handler type) — greyed out with cursor hint */
tr.inspection-row-optional > td {
    color: #6c757d !important;
    background-color: #acafb1 !important;
}

tr.inspection-row-optional > td .badge {
    opacity: 0.65;
}

tr.inspection-row-optional {
    cursor: help;
}

/* Readonly inputs — match the grey background that Bootstrap applies to disabled selects */
.form-control[readonly] {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

/* Alerts */
.alert-ihrb {
    border-radius: 8px;
    border: none;
    padding: 1rem 1.5rem;
}

.alert-ihrb-success {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.alert-ihrb-info {
    background-color: #e3f2fd;
    color: #1565c0;
}

.alert-ihrb-warning {
    background-color: #fff8e1;
    color: #f57c00;
}

.alert-ihrb-danger {
    background-color: #ffebee;
    color: #c62828;
}

/* Footer */
.footer {
    background-color: var(--ihrb-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 2rem 0;
    margin-top: auto;
}

    .footer a {
        color: var(--ihrb-accent);
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .footer a:hover {
            color: var(--ihrb-light);
            text-decoration: underline;
        }

/* Badges */
.badge-ihrb {
    background-color: var(--ihrb-accent);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
}

/* Loading Spinner */
.spinner-ihrb {
    border: 3px solid var(--ihrb-light);
    border-top-color: var(--ihrb-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Focus States for Accessibility */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 166, 154, 0.5);
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--ihrb-accent);
    outline-offset: 2px;
}

/* Utility: allow a flex child to shrink below its content size so long,
   unbroken text (emails, license numbers) wraps instead of pushing
   siblings (status badges) off the edge of the screen. */
.min-w-0 {
    min-width: 0 !important;
}

/* Entity link filter box: fixed width on desktop, full width on mobile
   (mobile override lives in the max-width:767px block below). */
.entity-link-filter {
    width: 180px;
}

/* Entity link card actions (details box + Unlink): inline at the end of the row on
   desktop, dropped onto their own line below a separator on mobile. */
.entity-link-actions {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .entity-link-actions {
        flex: 0 0 100%;
        margin-top: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--bs-border-color);
    }
}

/* License history card status badge. Relinquished licenses carry the relinquished
   date on a second line inside the badge, so it never widens the header row. */
.license-status-badge {
    max-width: 100%;
    line-height: 1.25;
}

.license-status-badge-date {
    display: block;
    font-weight: 400;
    font-size: 0.85em;
    opacity: 0.9;
}

/* Responsive Mobile Adjustments */
@media (max-width: 767px) {
    .main-content {
        padding: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .page-header h1,
    .page-header h2 {
        font-size: 1.5rem;
    }

    .navbar-ihrb .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
        margin-top: 0.5rem;
        padding: 0.5rem;
    }

    .table-responsive {
        border-radius: 8px;
        overflow-x: auto;
    }

    /* Tighter profile card chrome so text has more horizontal space. */
    .card-ihrb .card-header {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Action buttons in entity/profile card headers: give them their own
       full-width row that wraps with even spacing and shares the width,
       instead of squashing together / stacking under the title. */
    .card-ihrb .card-header > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    .card-ihrb .card-header > div:last-child > .btn {
        margin-left: 0 !important; /* neutralise ms-2 so the flex gap controls spacing */
        flex: 1 1 auto;
    }

    .card-ihrb .card-body {
        padding: 1rem;
    }

    /* Reduce padding inside the child/entity detail views. */
    .section-panel {
        padding: 0.75rem 0.85rem;
    }

    .license-history-card .card-body,
    .card-ihrb .card-body .card .card-body {
        padding: 0.85rem;
    }

    /* Full-width Show/Hide Historic toggle and Filter box on the entity link cards. */
    .show-historic-btn,
    .entity-link-filter {
        width: 100%;
    }

    /* Basic-information tables: don't force a wide, non-wrapping label
       column, and let long values (email, phone) wrap on-screen. */
    .card-body table.table-sm td {
        width: auto !important;
        white-space: normal;
        word-break: break-word;
    }

    .detail-label {
        width: auto !important;
        white-space: normal;
    }
}

/* Mid-width spacing trim — applies in the effective-viewport range produced by
   ~125–150% zoom / display scaling, so the layout breathes instead of feeling
   cramped and oversized. */
@media (max-width: 1199px) {
    .main-content {
        padding: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .welcome-section {
        padding: 2rem 1.5rem;
    }
}

/* Container Adjustments */
.container-fluid.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Trim the side gutters on mobile to give the main body more room.
   Declared after the base rule above so it wins (equal specificity,
   both !important — later source order decides). */
@media (max-width: 767px) {
    .container-fluid.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Reduce the default Bootstrap container gutter (normally
       var(--bs-gutter-x) * .5 = 0.75rem) so nested containers don't stack
       up excessive side padding on narrow screens. Overriding padding
       directly (not --bs-gutter-x) leaves row/column gutters untouched. */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

@media (min-width: 1200px) {
    .container-fluid.px-4 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

/* ── Client dashboard: full-width fluid layout ──────────────────────────────
   The dashboard uses the full-width container. On larger screens cap + centre
   the content so it isn't stretched edge-to-edge, with comfortable side spacing.
   The SAME cap is applied to both the navbar's inner container and the main
   content wrapper (both are container-fluid px-4 pt-4), so the header menu lines
   up with the main body. The full-width navbar gradient bar is unaffected — it's
   the <nav> background; only its inner content is bounded. The navbar's own
   horizontal padding is zeroed here so both share the same centring reference
   (otherwise the header would sit 1rem inward of the body below the cap width).
   Scoped via the body class so admin grid pages stay full width. */
@media (min-width: 992px) {
    body.client-dashboard-page .navbar-ihrb {
        padding-left: 0;
        padding-right: 0;
    }

    body.client-dashboard-page .container-fluid.px-4.pt-4 {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

@media (min-width: 1400px) {
    body.client-dashboard-page .container-fluid.px-4.pt-4 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
}

/* Welcome Section */
.welcome-section {
    background: linear-gradient(135deg, var(--ihrb-primary) 0%, var(--ihrb-secondary) 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    text-align: center;
}

    .welcome-section h1 {
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .welcome-section p {
        font-size: 1.1rem;
        opacity: 0.95;
    }

/* Smooth Transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

/* ========================================
   LOGIN PAGE SPECIFIC STYLES
   ======================================== */

body.login-page {
    background: linear-gradient(135deg, var(--ihrb-primary) 0%, var(--ihrb-secondary) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.login-container {
    max-width: 450px;
    width: 100%;
    margin: 2rem;
}

.login-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.login-header {
    background: var(--ihrb-primary);
    color: white;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}

    .login-header h2 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .login-header .subtitle {
        margin-top: 0.5rem;
        opacity: 0.9;
        font-size: 0.95rem;
    }

.login-body {
    padding: 2.5rem 2rem;
}

.login-page .form-floating {
    margin-bottom: 1.5rem;
}

    .login-page .form-floating > .form-control {
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        height: 58px;
        padding-top: 1.625rem;
        transition: all 0.3s ease;
    }

        .login-page .form-floating > .form-control:focus {
            border-color: var(--ihrb-accent);
            box-shadow: 0 0 0 0.2rem rgba(38, 166, 154, 0.25);
        }

    .login-page .form-floating > label {
        padding: 1rem 0.75rem;
        color: #757575;
    }

.login-page .form-check {
    margin-bottom: 1.5rem;
    padding-left: 1.75rem;
}

.login-page .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border: 2px solid #9e9e9e;
    cursor: pointer;
}

    .login-page .form-check-input:checked {
        background-color: var(--ihrb-accent);
        border-color: var(--ihrb-accent);
    }

.login-page .form-check-label {
    color: #424242;
    cursor: pointer;
    user-select: none;
}

.btn-login {
    background: linear-gradient(135deg, var(--ihrb-primary) 0%, var(--ihrb-secondary) 100%);
    border: none;
    color: white;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    width: 100%;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .btn-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 77, 64, 0.4);
        background: linear-gradient(135deg, var(--ihrb-secondary) 0%, var(--ihrb-primary) 100%);
        color: white;
    }

    .btn-login:active {
        transform: translateY(0);
    }

.login-links {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

    .login-links a {
        color: var(--ihrb-secondary);
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .login-links a:hover {
            color: var(--ihrb-primary);
            text-decoration: underline;
        }

/* ========================================
   CLIENT DASHBOARD TAB STYLES
   ======================================== */

/* Entity Association Tabs */
.nav-tabs-ihrb {
    border-bottom: 2px solid var(--ihrb-light);
}

.nav-tabs-ihrb .nav-item {
    margin-bottom: -2px;
    display: none; /* Hide all tabs by default - JavaScript will show only those that exist */
}

.nav-tabs-ihrb .nav-item.tab-visible {
    display: block; /* Show tabs that have associated entities */
}

.nav-tabs-ihrb .nav-link {
    border: none;
    color: var(--ihrb-gray);
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: transparent;
    border-bottom: 2px solid transparent;
}

.nav-tabs-ihrb .nav-link:hover {
    color: var(--ihrb-secondary);
    background-color: var(--ihrb-light-gray);
    border-color: var(--ihrb-light);
}

.nav-tabs-ihrb .nav-link.active {
    color: var(--ihrb-primary);
    background-color: white;
    border-color: var(--ihrb-primary);
    font-weight: 600;
}

.nav-tabs-ihrb .nav-link i {
    margin-right: 0.5rem;
}

/* Tab content styling */
.tab-pane {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* No entities message */
#noEntitiesMessage {
    margin: 2rem 0;
    text-align: center;
}

    .login-links a {
        color: var(--ihrb-secondary);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.3s ease;
        display: inline-block;
        margin: 0 0.5rem;
    }

        .login-links a:hover {
            color: var(--ihrb-accent);
            text-decoration: underline;
        }

.login-page .alert {
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: none;
}

.login-page .alert-danger {
    background-color: #ffebee;
    color: #c62828;
}

.login-page .text-danger {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

.login-footer {
    background: #f5f5f5;
    padding: 1.5rem 2rem;
    text-align: center;
    color: #757575;
    font-size: 0.85rem;
}

    .login-footer a {
        color: var(--ihrb-secondary);
        text-decoration: none;
    }

        .login-footer a:hover {
            text-decoration: underline;
        }

/* Logo styles for login page */
.login-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 1rem;
}

/* Loading spinner for login */
.login-page .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
}

/* Login page responsive adjustments */
@media (max-width: 576px) {
    .login-container {
        margin: 1rem;
    }

    .login-header {
        padding: 2rem 1.5rem 1.5rem;
    }

    .login-body {
        padding: 2rem 1.5rem;
    }

    .login-header h2 {
        font-size: 1.5rem;
    }
}

/* Animation for validation errors on login */
.login-page .field-validation-error {
    animation: shake 0.5s;
}

/* ── Entity Tab Section Panels ──────────────────────────────────────────────
   Subtle left-border + background tint to distinguish each functional section.
   Apply alongside mt-4 on the outermost wrapper div of each section partial.
   ───────────────────────────────────────────────────────────────────────── */
.section-panel {
    padding: 1rem 1.25rem;
    border: 3px solid transparent;
    border-radius: 8px;
    background-color: #fff;
}

/* License History — IHRB primary blue */
.section-panel--licenses {
    border-color: var(--ihrb-primary);
    background-color: #f0f4fb;
}

    .section-panel--licenses h5 > i:first-child,
    .section-panel--licenses h6 > i:first-child {
        color: var(--ihrb-primary);
    }

/* SEBS declarations — teal */
.section-panel--sebs {
    border-color: #0d9488;
    background-color: #f0fdf8;
}

    .section-panel--sebs h5 > i:first-child,
    .section-panel--sebs h6 > i:first-child {
        color: #0d9488;
    }

/* Sponsors — amber */
.section-panel--sponsors {
    border-color: #b45309;
    background-color: #fffbeb;
}

    .section-panel--sponsors h5 > i:first-child,
    .section-panel--sponsors h6 > i:first-child {
        color: #b45309;
    }

/* ============================================
   Form Validation Styles
   ============================================ */

/* Radio group validation highlighting */
.radio-group.is-invalid {
    border: 2px solid #dc3545;
    border-radius: 0.375rem;
    padding: 2px;
}

.radio-group.is-invalid label {
    opacity: 0.8;
}

/* Clear validation styling when user interacts */
.radio-group:focus-within.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
/* Entity Links — violet */
.section-panel--links {
    border-color: #7c3aed;
    background-color: #f5f3ff;
}

    .section-panel--links h5 > i:first-child,
    .section-panel--links h6 > i:first-child {
        color: #7c3aed;
    }

/* Disabled entity link sections: greyed out but unlink buttons remain interactive */
.link-section-disabled {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.link-section-disabled .unlink-btn,
.link-section-disabled .show-historic-btn {
    pointer-events: auto;
    cursor: pointer;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.k-column-title {
    color: #ffffff;
}

/* ========================================
   FORM VALIDATION FEEDBACK
   ======================================== */

/* Ensure file inputs and Kendo widgets show the red border */
input[type="file"].is-invalid,
.k-combobox.is-invalid .k-input {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* ========================================
   MOBILE RESPONSIVE MODAL STYLES
   ======================================== */

/* Kendo Window Mobile Optimization */
@media (max-width: 767px) {
    /* Full width modals on mobile */
    .k-window {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }

    /* Adjust window content padding on mobile */
    .k-window-content {
        padding: 10px !important;
    }

    /* Stack modal buttons vertically on mobile */
    .mt-4.d-flex.justify-content-between,
    .mt-3.d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 10px;
    }

    .mt-4.d-flex.justify-content-between > div,
    .mt-3.d-flex.justify-content-between > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mt-4.d-flex.justify-content-between > div > button,
    .mt-4.d-flex.justify-content-between > a,
    .mt-3.d-flex.justify-content-between > div > button,
    .mt-3.d-flex.justify-content-between > a {
        width: 100%;
        margin: 0 !important;
    }

    /* Make tables responsive in modals */
    .k-window-content .table {
        font-size: 0.85rem;
    }

    .k-window-content .table td,
    .k-window-content .table th {
        padding: 0.5rem 0.25rem;
    }

    /* Smaller text in alerts on mobile */
    .k-window-content .alert {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

/* Tablet optimization */
@media (min-width: 768px) and (max-width: 1023px) {
    .k-window {
        width: 95% !important;
        max-width: 95% !important;
    }

    /* Keep horizontal layout but with smaller gaps */
    .mt-4.d-flex.justify-content-between > div {
        gap: 5px;
    }

    .mt-4.d-flex.justify-content-between > div > button {
        margin-left: 5px !important;
    }
}

/* Desktop - ensure max width */
@media (min-width: 1024px) {
    .k-window {
        max-width: 1200px !important;
    }
}

/* Touch-friendly button sizing on mobile.
   Kept comfortably tappable but trimmed down so button rows stop
   forcing surrounding content (headers, cards) to overflow. */
@media (max-width: 767px) {
    .btn-sm {
        padding: 0.3rem 0.55rem;
        font-size: 0.8rem;
        min-height: 36px;
    }

    .btn {
        padding: 0.35rem 0.55rem;
        font-size: 0.9rem;
        min-height: 40px;
    }
}

/* Print styles (used on license application Completed pages) */
@media print {
    .no-print { display: none !important; }
    .card { break-inside: avoid; }
}

/* ── Full-page loader overlay (PageLoader.js) ─────────────────────────────── */
#ihrbPageLoader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
}

#ihrbPageLoader .page-loader-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    min-width: 200px;
}

#ihrbPageLoader .page-loader-spinner {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
    color: var(--ihrb-primary);
}

#ihrbPageLoader .page-loader-message {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ihrb-primary);
}

/* ============================================
   Kendo UI Validation Styles
   ============================================ */

/* Kendo ComboBox validation highlighting */
.k-combobox.is-invalid,
.k-input.is-invalid.k-combobox {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.k-combobox.is-invalid .k-input-inner,
.k-combobox.is-invalid .k-input-button {
    border-color: #dc3545 !important;
}

/* Kendo DropDownList validation highlighting */
.k-dropdownlist.is-invalid,
.k-input.is-invalid.k-dropdownlist {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.k-dropdownlist.is-invalid .k-input-inner,
.k-dropdownlist.is-invalid .k-input-button {
    border-color: #dc3545 !important;
}

/* ============================================
   THEME TOGGLE BUTTON (header)
   ======================================== */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0.5rem 0.9rem !important;
    border-radius: 6px;
    margin: 0 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .theme-toggle:hover {
        background-color: rgba(255, 255, 255, 0.12);
        color: #fff !important;
    }

/* Show the icon representing the theme you'll switch TO. */
.theme-icon--to-light {
    display: none;
}

[data-bs-theme="dark"] .theme-icon--to-dark {
    display: none;
}

[data-bs-theme="dark"] .theme-icon--to-light {
    display: inline-block;
}

/* ============================================
   DARK MODE
   Keeps the IHRB primary blue as the brand / action colour (navbar, buttons,
   card headers, gradients) while switching page surfaces, text and borders to a
   dark palette. Activated by data-bs-theme="dark" on <html> (Bootstrap 5.3
   colour modes), which is rendered server-side from the client's saved preference.
   ======================================== */
[data-bs-theme="dark"] {
    /* Brand blue retained; the "light" tints become dark-blue tints so components
       that lean on them (hover states, borders) still read correctly. */
    --ihrb-primary: #1A2E59;
    --ihrb-secondary: #2f7fca;
    --ihrb-accent: #8bafff;
    --ihrb-light: #24304d;
    --ihrb-dark: #0e1626;
    --ihrb-gray: #9aa4b8;
    --ihrb-light-gray: #121722;

    /* Dark surface tokens */
    --ihrb-surface: #1b2233;
    --ihrb-surface-2: #222b40;
    --ihrb-border: #2c3446;
    --ihrb-text: #e6e9ef;
    --ihrb-text-muted: #9aa4b8;
    --ihrb-primary-text: #9ab4ee; /* readable "primary" for text on dark surfaces */

    /* Remap Kendo UI theme variables so grids, windows, popups, inputs, etc.
       follow dark mode without a separate Kendo dark stylesheet. */
    --kendo-color-app-surface: #1b2233;
    --kendo-color-on-app-surface: #e6e9ef;
    --kendo-color-surface: #222b40;
    --kendo-color-surface-alt: #1b2233;
    --kendo-color-base: #222b40;
    --kendo-color-base-subtle: #2a3245;
    --kendo-color-base-emphasis: #3c4661;
    --kendo-color-base-hover: #333c52;
    --kendo-color-base-active: #3c4661;
    --kendo-color-on-base: #e6e9ef;
    --kendo-color-border: rgba(255, 255, 255, 0.14);
    --kendo-color-border-alt: rgba(255, 255, 255, 0.22);

    color-scheme: dark;
}

/* Base surface & text */
[data-bs-theme="dark"] body {
    background-color: var(--ihrb-light-gray);
    color: var(--ihrb-text);
}

/* Surfaces that were hard-coded white */
[data-bs-theme="dark"] .main-content,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-ihrb,
[data-bs-theme="dark"] .section-panel,
[data-bs-theme="dark"] .login-card,
[data-bs-theme="dark"] #ihrbPageLoader .page-loader-card {
    background-color: var(--ihrb-surface);
    color: var(--ihrb-text);
}

/* Card headers keep the brand blue — already light-on-dark and readable. */

/* Primary-blue text is too dark on a dark surface: lighten the key cases. */
[data-bs-theme="dark"] .page-header h1,
[data-bs-theme="dark"] .page-header h2 {
    color: var(--ihrb-primary-text);
}

[data-bs-theme="dark"] .page-loader-message,
[data-bs-theme="dark"] .page-loader-spinner {
    color: var(--ihrb-primary-text);
}

/* Forms */
[data-bs-theme="dark"] .form-ihrb .form-label {
    color: #cbd3e6;
}

[data-bs-theme="dark"] .form-ihrb .form-control,
[data-bs-theme="dark"] .form-ihrb .form-select {
    background-color: var(--ihrb-surface-2);
    border-color: var(--ihrb-border);
    color: var(--ihrb-text);
}

[data-bs-theme="dark"] .form-control[readonly] {
    background-color: #2a3040;
}

/* Secondary button (was white background) */
[data-bs-theme="dark"] .btn-ihrb-secondary {
    background-color: transparent;
    color: #cdd9ff;
    border-color: var(--ihrb-secondary);
}

    [data-bs-theme="dark"] .btn-ihrb-secondary:hover {
        background-color: var(--ihrb-secondary);
        color: #fff;
    }

/* Entity tabs (active tab was white) */
[data-bs-theme="dark"] .nav-tabs-ihrb .nav-link.active {
    background-color: var(--ihrb-surface);
    color: #dbe4ff;
    border-color: var(--ihrb-secondary);
}

[data-bs-theme="dark"] .nav-tabs-ihrb .nav-link:hover {
    background-color: var(--ihrb-surface-2);
}

/* Section panels: keep the coloured left borders, darken the tinted fills. */
[data-bs-theme="dark"] .section-panel--licenses {
    background-color: #16213b;
}

    [data-bs-theme="dark"] .section-panel--licenses h5 > i:first-child,
    [data-bs-theme="dark"] .section-panel--licenses h6 > i:first-child {
        color: var(--ihrb-accent);
    }

[data-bs-theme="dark"] .section-panel--sebs {
    background-color: #0f2723;
}

[data-bs-theme="dark"] .section-panel--sponsors {
    background-color: #2a2110;
}

[data-bs-theme="dark"] .section-panel--links {
    background-color: #201a3a;
}

/* IHRB pastel alerts — deepen for dark backgrounds. */
[data-bs-theme="dark"] .alert-ihrb-success {
    background-color: #12331c;
    color: #8ce0a3;
}

[data-bs-theme="dark"] .alert-ihrb-info {
    background-color: #102a3f;
    color: #8fc7f2;
}

[data-bs-theme="dark"] .alert-ihrb-warning {
    background-color: #332708;
    color: #f2c777;
}

[data-bs-theme="dark"] .alert-ihrb-danger {
    background-color: #3a1416;
    color: #f0a0a5;
}

/* Optional inspection rows (greyed state) */
[data-bs-theme="dark"] tr.inspection-row-optional > td {
    color: #c2c8d2 !important;
    background-color: #2b3242 !important;
}

/* Kendo surfaces that don't derive from the remapped variables. */
[data-bs-theme="dark"] .k-column-title {
    color: #ffffff;
}

/* Bootstrap background utilities are fixed light colours — remap for dark mode.
   (!important to match the utility classes' own specificity.) */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--ihrb-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--ihrb-surface-2) !important;
    color: var(--ihrb-text);
}

/* .text-dark sets its colour with !important, so pairing it with .bg-light
   (e.g. <span class="badge bg-light text-dark border">) leaves dark ink on the
   remapped dark surface. */
[data-bs-theme="dark"] .bg-light.text-dark {
    color: var(--ihrb-text) !important;
}

/* Primary-coloured text / icons read too dark on dark surfaces. */
[data-bs-theme="dark"] .text-primary {
    color: var(--ihrb-primary-text) !important;
}

/* Input groups (e.g. the search boxes) with a white addon + search icon. */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--ihrb-surface-2);
    border-color: var(--ihrb-border);
    color: var(--ihrb-text-muted);
}

/* Bootstrap 5.3 makes alerts, cards and plain tables colour-mode aware, but the
   contextual table variants and the outline buttons still hard-code their light
   palette. Those are remapped below. */

/* Contextual table rows (audit "Before"/"After" comparison, etc.). Bootstrap
   drives these entirely through --bs-table-*, so overriding the variables keeps
   striping and hover behaviour intact. */
[data-bs-theme="dark"] .table-success {
    --bs-table-color: #d7f5e1;
    --bs-table-bg: #163828;
    --bs-table-border-color: #2c5741;
    --bs-table-hover-color: #d7f5e1;
    --bs-table-hover-bg: #1c4531;
}

[data-bs-theme="dark"] .table-warning {
    --bs-table-color: #f7e2b5;
    --bs-table-bg: #3a2e10;
    --bs-table-border-color: #5b4a20;
    --bs-table-hover-color: #f7e2b5;
    --bs-table-hover-bg: #463818;
}

[data-bs-theme="dark"] .table-danger {
    --bs-table-color: #f6cdd0;
    --bs-table-bg: #3d1a1d;
    --bs-table-border-color: #612c31;
    --bs-table-hover-color: #f6cdd0;
    --bs-table-hover-bg: #4a2024;
}

[data-bs-theme="dark"] .table-info {
    --bs-table-color: #c9e6f7;
    --bs-table-bg: #12303f;
    --bs-table-border-color: #244a5e;
    --bs-table-hover-color: #c9e6f7;
    --bs-table-hover-bg: #173b4d;
}

/* Outline buttons: the fixed #6c757d/#0d6efd foregrounds are too dark to read on
   a dark surface (e.g. the "All" filter beside "Pending Only"). */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #b6bec9;
    --bs-btn-border-color: #55607a;
    --bs-btn-hover-bg: #55607a;
    --bs-btn-hover-border-color: #55607a;
    --bs-btn-active-bg: #55607a;
    --bs-btn-active-border-color: #55607a;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: #3a4258;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #9ab4ee;
    --bs-btn-border-color: #3f5a94;
    --bs-btn-hover-bg: #3f5a94;
    --bs-btn-hover-border-color: #3f5a94;
    --bs-btn-active-bg: #3f5a94;
    --bs-btn-active-border-color: #3f5a94;
}

/* Code blocks — <pre class="bg-light"> picks up the .bg-light override above,
   but bare <pre>/<code> keep Bootstrap's light-mode pink/dark ink. */
[data-bs-theme="dark"] code {
    color: #e685b5;
}

[data-bs-theme="dark"] pre,
[data-bs-theme="dark"] pre code {
    color: var(--ihrb-text);
}

/* ── Cookie consent banner ────────────────────────────────────────────────────
   EU cookie-consent notice, fixed to the bottom of the viewport until the user
   accepts. Hidden by default (server-rendered); CookieConsent.js reveals it via
   the .is-visible class when no prior consent is stored. Styled to match the
   IHRB navbar/footer palette. */
.cookie-consent {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: linear-gradient(135deg, var(--ihrb-primary) 0%, var(--ihrb-secondary) 100%);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
    padding: 1rem 0;
}

    .cookie-consent.is-visible {
        display: block;
    }

    .cookie-consent__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .cookie-consent__text {
        flex: 1 1 320px;
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .cookie-consent__text a {
        color: var(--ihrb-accent);
        text-decoration: underline;
    }

        .cookie-consent__text a:hover {
            color: var(--ihrb-light);
        }

    .cookie-consent__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .cookie-consent .btn-cookie-accept {
        background-color: #fff;
        color: var(--ihrb-primary);
        border: none;
        font-weight: 600;
        padding: 0.5rem 1.5rem;
        border-radius: 6px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .cookie-consent .btn-cookie-accept:hover {
            background-color: var(--ihrb-light);
            color: var(--ihrb-dark);
        }

    .cookie-consent .btn-cookie-decline {
        background-color: transparent;
        color: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.6);
        font-weight: 500;
        padding: 0.5rem 1.25rem;
        border-radius: 6px;
        transition: background-color 0.2s ease;
    }

        .cookie-consent .btn-cookie-decline:hover {
            background-color: rgba(255, 255, 255, 0.12);
            color: #fff;
        }