/* Global Styles */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Match the Chain.Identity auth pages — Inter loaded via Google Fonts in _Layout.cshtml. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Tahoma, Geneva, Verdana, sans-serif;
}

/* Bootstrap success palette → emerald (matches btn-glossy-success).
   Overrides --bs-success so .bg-success, .text-success, .border-success,
   .alert-success, badge bg-success, etc. all use the same green. */
:root {
    --bs-success: #059669;
    --bs-success-rgb: 5, 150, 105;
}

.bg-success {
    background-color: #059669 !important;
}
.text-success {
    color: #059669 !important;
}
.border-success {
    border-color: #059669 !important;
}

/* Sticky grid pager, toolbar, and headers */
.k-grid .k-grid-pager {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.k-grid .k-grid-toolbar {
    position: sticky;
    top: 46px;
    z-index: 1001;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
}

/* Collapse the margin seam between the top pager and the toolbar below it.
   Keep Kendo's 1px border-bottom on the pager so the visual separator line
   between pager controls and toolbar buttons is preserved. */
.k-grid .k-grid-pager {
    margin-bottom: 0;
}
.k-grid .k-grid-pager + .k-grid-toolbar,
.k-grid .k-pager-wrap + .k-grid-toolbar {
    margin-top: 0;
}

/* Toolbar button base — compact, subtle defaults */
.k-grid-toolbar .k-button {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
    border-radius: 5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    box-shadow: none;
    transition: all 0.15s ease;
}

/* Primary action stays green but toned down */
.k-grid-toolbar .k-button-solid-primary {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.k-grid-toolbar .k-button-solid-primary:hover {
    background: #15803d;
    border-color: #15803d;
}

/* Info (blue) — solid filled */
.k-grid-toolbar .k-button-solid-info {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.k-grid-toolbar .k-button-solid-info:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

/* Success (green, deeper than primary) — solid filled */
.k-grid-toolbar .k-button-solid-success,
.k-grid-toolbar .k-button[style*="background-color:#28a745"] {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #fff !important;
}
.k-grid-toolbar .k-button-solid-success:hover,
.k-grid-toolbar .k-button[style*="background-color:#28a745"]:hover {
    background: #14532d !important;
    border-color: #14532d !important;
    color: #fff !important;
}

/* Base (gray) — solid filled */
.k-grid-toolbar .k-button-solid-base {
    background: #64748b;
    border-color: #64748b;
    color: #fff;
}
.k-grid-toolbar .k-button-solid-base:hover {
    background: #475569;
    border-color: #475569;
    color: #fff;
}

.k-grid .k-grid-header {
    position: sticky;
    top: 90px;
    z-index: 1000;
}

.k-grid-norecords {
    display: contents !important;
}

.grid-compact .k-grid-header th.k-header {
    font-size: 11px;
    padding: 4px 8px;
}
.grid-compact td {
    font-size: 12px;
    padding: 3px 8px !important;
}
.grid-compact .k-grid-toolbar {
    padding: 4px 8px;
    min-height: unset;
}

/* Compact collapsible filter bar — matches Kendo grid toolbar look */
.filter-bar {
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background: #f1f5f9;
}

.filter-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.6rem;
}

.filter-toggle-btn {
    background: none;
    border: none;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--kendo-color-on-base, #272727);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}
.filter-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.filter-count {
    background: #16a34a;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.4rem;
}

.filter-clear-btn {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.72rem;
    color: var(--kendo-color-on-base, #272727);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
}
.filter-clear-btn:hover {
    color: #ef4444;
    background: #fef2f2;
    border-color: #fecaca;
}

.filter-bar-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease;
    padding: 0 0.6rem;
}

.filter-bar.open .filter-bar-body {
    max-height: none;
    overflow: visible;
    padding: 0.3rem 0.6rem 0.5rem;
    border-top: 1px solid rgb(204, 205, 204);
}

.filter-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.35rem;
    align-items: flex-end;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem 0.35rem;
    align-items: end;
}

.filter-input,
.filter-fields .form-select,
.filter-fields .form-control,
.filter-fields .k-dropdown,
.filter-fields .k-widget,
.filter-grid .form-select,
.filter-grid .form-control,
.filter-grid .k-dropdown,
.filter-grid .k-widget {
    font-size: 13px !important;
    padding: 0.25rem 0.5rem;
    height: 32px;
    min-width: 0;
    max-width: none;
    border: 1px solid rgb(204, 205, 204);
    border-radius: 5px;
    background: #fff;
    color: #272727;
    width: 100%;
}

/* Preserve original sizing for flex-based filter-fields */
.filter-fields .filter-input,
.filter-fields .form-select,
.filter-fields .form-control,
.filter-fields .k-dropdown,
.filter-fields .k-widget {
    min-width: 140px;
    max-width: 200px;
    width: auto;
    flex: 0 1 auto;
}

/* Date filter with visible label */
.filter-field-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    flex: 0 1 auto;
}

.filter-field-wrap label {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 2px;
    line-height: 1;
    padding-left: 2px;
}

.filter-fields .filter-field-wrap .filter-input {
    min-width: 140px;
}

.filter-grid .filter-field-wrap {
    min-width: 0;
}

.filter-grid .filter-field-wrap .filter-input,
.filter-grid .filter-field-wrap .form-select,
.filter-grid .filter-field-wrap .k-dropdown,
.filter-grid .filter-field-wrap .k-widget {
    min-width: 0;
    max-width: none;
    width: 100%;
}

.filter-input:focus,
.filter-fields .form-select:focus,
.filter-fields .form-control:focus,
.filter-grid .form-select:focus,
.filter-grid .form-control:focus {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
    outline: none;
}

/* Kendo dropdowns inside filter bar */
.filter-fields .k-widget,
.filter-fields .k-dropdown,
.filter-fields .k-dropdownlist,
.filter-fields span[class*="k-dropdown"] {
    width: 200px !important;
    max-width: 200px !important;
    min-width: 140px !important;
}

.filter-grid .k-widget,
.filter-grid .k-dropdown,
.filter-grid .k-dropdownlist,
.filter-grid span[class*="k-dropdown"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.filter-fields .k-dropdown .k-dropdown-wrap,
.filter-fields .k-widget .k-input-inner,
.filter-fields .k-dropdownlist .k-input-inner,
.filter-grid .k-dropdown .k-dropdown-wrap,
.filter-grid .k-widget .k-input-inner,
.filter-grid .k-dropdownlist .k-input-inner {
    font-size: 13px !important;
    height: 30px !important;
    min-height: 30px !important;
}

/* Header & Footer */
.navbar-brand {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Nordic enterprise: footer retreats to match the navbar — light surface,
   slate text, thin neutral top border. Contact links use the brand blue so
   they're still tappable without flooding the bar with color. */
footer.footer {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    color: #4b5563;
    font-weight: 500;
    position: relative;
}

footer.footer a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.15s ease;
}

footer.footer a:hover {
    color: #1d4ed8;
    text-decoration: none;
}

footer.footer .footer-divider {
    color: #d1d5db;
}

footer.footer .footer-muted {
    color: #6b7280;
}

footer.footer .footer-muted strong {
    color: #111827;
}

.bg-primary {
    background-color: #4a69bd !important;
}

/* Cards */
.card {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

.card-header {
    border-bottom: none;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Forms */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: .8;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* Tables */
.table {
    margin-bottom: 0;
}

    .table th {
        border-top: none;
    }

/* Code */
code {
    color: #e83e8c;
    font-size: 0.875em;
    word-wrap: break-word;
}

pre {
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Custom Styles */
.bg-dark {
    background-color: #212529 !important;
}

/* ========================================
   BOOTSTRAP BUTTON OVERRIDES
   Aligned with Kendo Classic Green theme
   ======================================== */

/* --- Shared button base --- */
.btn {
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.15s ease;
    font-size: 0.875rem;
    padding: 6px 12px;
    box-shadow: none;
}

.btn:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.btn:active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 4px 0px rgba(16, 185, 129, 0.5);
}

/* --- Primary: Kendo primary green --- */
.btn-primary {
    background-color: #059669;
    border-color: #059669;
    color: #fff;
}

.btn-primary:hover {
    background-color: #047857;
    border-color: #047857;
    color: #fff;
}

.btn-primary:active, .btn-primary.active {
    background-color: #065f46;
    border-color: #065f46;
    color: #fff;
}

.btn-primary:focus, .btn-primary:focus-visible {
    box-shadow: 0 0 4px 0px rgba(16, 185, 129, 0.75);
}

.btn-primary:disabled {
    background-color: #059669;
    border-color: #059669;
    opacity: 0.65;
}

/* --- Secondary: Kendo secondary gray --- */
.btn-secondary {
    background-color: #f3f4f3;
    border-color: #cccdcc;
    color: #272727;
}

.btn-secondary:hover {
    background-color: #e0e0e0;
    border-color: #b5b5b5;
    color: #272727;
}

.btn-secondary:active, .btn-secondary.active {
    background-color: #cccdcc;
    border-color: #a0a0a0;
    color: #272727;
}

/* --- Success: same as primary in this theme --- */
.btn-success {
    background-color: #059669;
    border-color: #059669;
    color: #fff;
}

.btn-success:hover {
    background-color: #047857;
    border-color: #047857;
    color: #fff;
}

.btn-success:active, .btn-success.active {
    background-color: #065f46;
    border-color: #065f46;
    color: #fff;
}

/* --- Danger: Kendo error red --- */
.btn-danger {
    background-color: #d92800;
    border-color: #d92800;
    color: #fff;
}

.btn-danger:hover {
    background-color: #c82500;
    border-color: #c82500;
    color: #fff;
}

.btn-danger:active, .btn-danger.active {
    background-color: #b62200;
    border-color: #b62200;
    color: #fff;
}

.btn-danger:focus, .btn-danger:focus-visible {
    box-shadow: 0 0 4px 0px rgba(217, 40, 0, 0.75);
}

/* --- Warning: Kendo warning orange --- */
.btn-warning {
    background-color: #ff9800;
    border-color: #ff9800;
    color: #fff;
}

.btn-warning:hover {
    background-color: #eb8c00;
    border-color: #eb8c00;
    color: #fff;
}

.btn-warning:active, .btn-warning.active {
    background-color: #d68000;
    border-color: #d68000;
    color: #fff;
}

.btn-warning:focus, .btn-warning:focus-visible {
    box-shadow: 0 0 4px 0px rgba(255, 152, 0, 0.75);
}

/* --- Info: Kendo info blue --- */
.btn-info {
    background-color: #007bc3;
    border-color: #007bc3;
    color: #fff;
}

.btn-info:hover {
    background-color: #0071b3;
    border-color: #0071b3;
    color: #fff;
}

.btn-info:active, .btn-info.active {
    background-color: #0067a4;
    border-color: #0067a4;
    color: #fff;
}

.btn-info:focus, .btn-info:focus-visible {
    box-shadow: 0 0 4px 0px rgba(0, 123, 195, 0.75);
}

/* --- Light: Kendo light --- */
.btn-light {
    background-color: #ebebeb;
    border-color: #d6d6d6;
    color: #272727;
}

.btn-light:hover {
    background-color: #dddddd;
    border-color: #c8c8c8;
    color: #272727;
}

.btn-light:active, .btn-light.active {
    background-color: #d6d6d6;
    border-color: #bfbfbf;
    color: #272727;
}

/* --- Dark: Kendo dark --- */
.btn-dark {
    background-color: #404040;
    border-color: #404040;
    color: #fff;
}

.btn-dark:hover {
    background-color: #333333;
    border-color: #333333;
    color: #fff;
}

.btn-dark:active, .btn-dark.active {
    background-color: #272727;
    border-color: #272727;
    color: #fff;
}

/* --- Outline variants --- */
.btn-outline-primary {
    color: #065f46;
    border-color: #059669;
}

.btn-outline-primary:hover {
    background-color: #059669;
    border-color: #059669;
    color: #fff;
}

.btn-outline-secondary {
    color: #555555;
    border-color: #cccdcc;
}

.btn-outline-secondary:hover {
    background-color: #f3f4f3;
    border-color: #cccdcc;
    color: #272727;
}

.btn-outline-success {
    color: #065f46;
    border-color: #059669;
}

.btn-outline-success:hover {
    background-color: #059669;
    border-color: #059669;
    color: #fff;
}

.btn-outline-danger {
    color: #d92800;
    border-color: #d92800;
}

.btn-outline-danger:hover {
    background-color: #d92800;
    border-color: #d92800;
    color: #fff;
}

.btn-outline-warning {
    color: #bf7200;
    border-color: #ff9800;
}

.btn-outline-warning:hover {
    background-color: #ff9800;
    border-color: #ff9800;
    color: #fff;
}

.btn-outline-info {
    color: #005c92;
    border-color: #007bc3;
}

.btn-outline-info:hover {
    background-color: #007bc3;
    border-color: #007bc3;
    color: #fff;
}

.btn-outline-dark {
    color: #404040;
    border-color: #404040;
}

.btn-outline-dark:hover {
    background-color: #404040;
    border-color: #404040;
    color: #fff;
}

/* --- Custom system classes (mapped to theme) --- */
.btn-filter {
    background-color: #059669;
    border-color: #059669;
    color: #fff;
}

.btn-filter:hover {
    background-color: #047857;
    border-color: #047857;
    color: #fff;
}

.btn-toolbar-style {
    background-color: #f3f4f3;
    border-color: #cccdcc;
    color: #272727;
}

.btn-toolbar-style:hover {
    background-color: #e0e0e0;
    border-color: #b5b5b5;
    color: #272727;
}

.btn-driver-rest {
    background-color: #ff9800;
    border-color: #ff9800;
    color: #fff;
}

.btn-driver-rest:hover {
    background-color: #eb8c00;
    border-color: #eb8c00;
    color: #fff;
}

.custom-sort-btn:hover {
    background-color: #e0e0e0;
}

.custom-sort-btn.active-sort {
    background-color: #059669;
    color: #fff;
    border-color: #059669;
}

/* Animation */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

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

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* API Response Formatting */
.response-container {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.1rem;
    }

    .card-header h3 {
        font-size: 1.5rem;
    }
}

/* Custom Modal Backdrop */
#customModalBackdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

/* Custom Tenant Popup */
#customTenantPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    overflow: hidden;
}

    /* Popup Header */
    #customTenantPopup .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

        #customTenantPopup .popup-header h5 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }

    #customTenantPopup .close-btn {
        background: none;
        border: none;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        margin: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

        #customTenantPopup .close-btn:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

    /* Popup Body */
    #customTenantPopup .popup-body {
        padding: 15px;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Tenant List Styling */
    #customTenantPopup ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #customTenantPopup .tenant-item {
        margin-bottom: 8px;
    }

        #customTenantPopup .tenant-item:last-child {
            margin-bottom: 0;
        }

        #customTenantPopup .tenant-item button {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 10px 12px;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            background-color: white;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
        }

            #customTenantPopup .tenant-item button:hover {
                background-color: #f8f9fa;
                transform: translateY(-1px);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

        #customTenantPopup .tenant-item.active button {
            background-color: rgba(34, 197, 94, 0.1);
            border-color: rgb(34, 197, 94);
        }

        #customTenantPopup .tenant-item .active-indicator {
            margin-left: auto;
            color: rgb(34, 197, 94);
        }

        #customTenantPopup .tenant-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        #customTenantPopup .tenant-name {
            font-weight: 500;
            color: #1f2937;
        }

        #customTenantPopup .tenant-plan {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 2px;
        }

/* Animation */
#customTenantPopup, #customModalBackdrop {
    transition: opacity 0.2s ease;
}

.k-edit-form-container {
    width: 100% !important;
}

.k-edit-form-container .card {
    overflow: visible;
    box-shadow: none;
}

.k-edit-form-container label.required::after {
    content: " *";
    color: #dc3545;
    font-weight: 600;
}

/* Equipment edit popup — height is constrained via JS on edit (Kendo sets
   an inline height that overrides plain max-height), but we still pin the
   Save/Cancel bar to the bottom of the scrollable content area. */
.equipment-edit-window .k-edit-buttons {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 10px 12px !important;
    margin: 0 -16px -16px !important;
    z-index: 2;
}

.equipment-compact-form .section-h {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.equipment-compact-form .col-12:first-child .section-h {
    margin-top: 0.25rem;
}

.equipment-compact-form label {
    font-size: 0.75rem;
    margin-bottom: 2px;
    color: #374151;
    font-weight: 500;
}

.equipment-compact-form .form-control,
.equipment-compact-form .form-control-sm,
.equipment-compact-form select.form-control {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    height: calc(1.5em + 0.5rem + 2px);
}

.equipment-compact-form textarea.form-control {
    height: auto;
    min-height: 50px;
}

.equipment-compact-form .form-check-label {
    font-size: 0.78rem;
}

.k-grid .k-header, .k-grid td {
    padding: 5px; /* Reduce padding */
    font-size: 13px; /* Smaller text */
    vertical-align: middle;
}

.k-grid td {
    max-width: 300px;
    overflow: hidden;
}

.k-grid td span:not(.text-muted):not(.badge):not(.k-icon):not([class*="status"]) {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.k-grid .k-grid-content {
    line-height: 1.2; /* Compact row height */
}


.card,
.custom-breadcrumb {
    background-color: #ffffff;
    border: 1px solid #E2E8F0;
}

.breadcrumb-link {
    color: #64748B;
}

.breadcrumb-link:hover {
    color: rgb(34, 197, 94);
}

.alertify, .alertify-show, .alertify-log {
    z-index: 12000 !important;
}

/* Alertify notifications - larger and more visible */
.alertify-notifier .ajs-message {
    padding: 14px 20px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    min-height: auto !important;
    max-width: 400px !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    line-height: 1.5 !important;
}

.alertify-notifier .ajs-message .alertify-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.alertify-notifier .ajs-message .alertify-content {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.95;
}

/* Default (info / alertify.message) — must come before typed rules so
   .ajs-success / .ajs-error / .ajs-warning (higher specificity) win. */
.alertify-notifier .ajs-message {
    background-color: #2563eb !important;
    color: white !important;
    text-shadow: none !important;
}

.alertify-notifier .ajs-message.ajs-success {
    background-color: #059669 !important;
}

.alertify-notifier .ajs-message.ajs-error {
    background-color: #dc2626 !important;
}

.alertify-notifier .ajs-message.ajs-warning {
    background-color: #f59e0b !important;
}

.row {
    margin-top: 20px;
}

.zero-margin-top {
    margin-top: 0 !important;
}

.pac-container {
    z-index: 999999999 !important; /* Higher than Kendo popups */
}

.initial-circle {
    align-items: center;
    background-color: #003f59;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: white;
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    margin: auto;
    text-transform: uppercase;
    width: 32px;
}

.form-control.is-valid, .form-select.is-valid {
    border-color: #dee2e6 !important;
}
.form-control.is-invalid, .form-select.is-invalid {
    border-color: #dee2e6 !important;
}

.text-danger {
    display: block;
}

.k-add-new-item {
    padding: 12px;
    border-top: 1px solid #e6e6e6;
    text-align: center;
}

.k-add-new-item a {
    color: rgb(34, 197, 94);
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.k-add-new-item a span {
    font-weight: bold;
    font-size: 16px;
}

.filter {
    margin-bottom: 20px !important;
}

.title {
    text-decoration: underline !important;
}

.k-window {
    border: none !important;
}

.close-btn{
    display: none !important;
}

/* Popup window — matches Organization/Equipment add popup styling.
   Apply via JS: kendoWindow.wrapper.addClass('inspection-popup') */
.inspection-popup.k-window {
    border: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.inspection-popup .k-window-titlebar {
    padding: 0.55rem 1rem !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.inspection-popup .k-window-title {
    font-weight: 600;
    font-size: 14px;
}
.inspection-popup .k-window-content {
    padding: 14px 18px !important;
}

/* Active Filter Highlighting */
.filter-active {
    border: 2px solid #ffc107 !important;
    background-color: #fff9e6 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.15) !important;
}

/* For Kendo DropDownList active filters */
.filter-active .k-dropdown-wrap,
.filter-active .k-input-inner {
    border-color: #ffc107 !important;
    background-color: #fff9e6 !important;
}

/* Highlight the container of active filters */
.has-active-filter {
    position: relative;
}

.has-active-filter::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg, #ffc107 0%, #ff9800 100%);
    border-radius: 2px;
    z-index: 1;
}

/* Active filter label styling */
.has-active-filter label {
    color: #ff9800;
    font-weight: 600;
}

/* Kendo DropDownList specific styling */
.k-dropdown.filter-active {
    border-color: #ffc107 !important;
}

.k-dropdown.filter-active .k-dropdown-wrap {
    background-color: #fff9e6 !important;
    border-color: #ffc107 !important;
}

/* Input field specific styling */
input.filter-active,
select.filter-active {
    border-color: #ffc107 !important;
    background-color: #fff9e6 !important;
}

/* DatePicker specific styling */
.k-datepicker.filter-active .k-input-inner {
    background-color: #fff9e6 !important;
}

.k-datepicker.filter-active {
    border-color: #ffc107 !important;
}

/* ComboBox specific styling */
.k-combobox.filter-active {
    border-color: #ffc107 !important;
}

.k-combobox.filter-active .k-input-inner {
    background-color: #fff9e6 !important;
}

/* Checkbox active filter styling */
input[type="checkbox"].filter-active {
    outline: 2px solid #ffc107 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.15) !important;
}

/* ===== Kendo Grid Loading Indicator - Centered on Screen ===== */
/* Reusable for all grids - loading spinner appears in center of viewport */
.k-grid .k-loading-mask {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 30px 40px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 10000 !important;
}

.k-grid .k-loading-mask .k-loading-image,
.k-grid .k-loading-mask .k-loading-color {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
}

/* Favourite toggle spin animation */
.spin-animation {
    animation: spin 0.8s linear infinite;
}

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

/* Grid action buttons - single row (default) */
.k-grid td.k-command-cell {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    padding: 4px !important;
}

.k-grid td.k-command-cell .k-button {
    margin: 0 1px !important;
}

/* Neutralize Kendo built-in edit command button (green primary → base style like other buttons) */
.k-grid td.k-command-cell .k-grid-edit-command.k-button-solid-primary {
    background-color: var(--kendo-color-base, #f5f5f5) !important;
    border-color: var(--kendo-color-border, rgba(0,0,0,0.08)) !important;
    color: var(--kendo-color-on-base, #272727) !important;
}
.k-grid td.k-command-cell .k-grid-edit-command.k-button-solid-primary:hover {
    background-color: var(--kendo-color-base-hover, #ebebeb) !important;
    border-color: var(--kendo-color-border, rgba(0,0,0,0.08)) !important;
}

/* Grid action buttons - 2x2 layout */
#BookingGrid td.k-command-cell,
#RunGrid td.k-command-cell,
#OrganizationGrid td.k-command-cell,
#DriverRestAreaGrid td.k-command-cell {
    vertical-align: middle !important;
    text-align: center !important;
    padding: 1px 6px !important;
    column-count: 2 !important;
    column-gap: 0 !important;
    column-fill: balance !important;
}

#BookingGrid td.k-command-cell .k-button,
#RunGrid td.k-command-cell .k-button,
#OrganizationGrid td.k-command-cell .k-button,
#DriverRestAreaGrid td.k-command-cell .k-button {
    display: block !important;
    margin: 1px auto !important;
    padding: 2px 3px !important;
    min-width: unset !important;
    break-inside: avoid !important;
}

/* Favourite star icon — match Kendo icon size */
td.k-command-cell .favourite-cmd {
    font-size: 16px !important;
    width: 28px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== Leaflet / OpenStreetMap overrides ===== */
.leaflet-marker-custom { background: none !important; border: none !important; }
.leaflet-control-attribution { font-size: 9px !important; opacity: 0.5; padding: 2px 5px !important; }
.leaflet-control-attribution a { color: #555 !important; }
.leaflet-control-attribution svg { display: none !important; }
.nominatim-autocomplete-dropdown {
    position: absolute; z-index: 10000; background: #fff; border: 1px solid #ccc;
    border-top: none; max-height: 200px; overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 0 0 4px 4px; display: none;
}
.nominatim-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px; }
.nominatim-item:hover { background-color: #f0f0f0; }
.leaflet-popup-content-wrapper { background: #222 !important; color: #fff !important; border-radius: 8px !important; }
.leaflet-popup-tip { background: #222 !important; }
.leaflet-popup-content { margin: 8px 12px !important; }
.leaflet-popup-close-button { color: #fff !important; }
@keyframes leaflet-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
.leaflet-marker-bounce { animation: leaflet-bounce 0.5s ease 2; }

/* Passage attach popup — highlight dropzone while a file is being dragged over it. */
.passage-attach-dropzone.drag-over {
    background: #e7f1ff !important;
    border-color: #0d6efd !important;
}

/* Unplanned bookings grid — kill the global page-level sticky offsets that
   make the header float in the middle of the scroll container. */
#unplannedBookingsGrid .k-grid-header { position: sticky !important; top: 0 !important; }
#unplannedBookingsGrid .k-grid-pager { position: static !important; }
#unplannedBookingsGrid .k-grid-toolbar { position: static !important; }

/* HERE InfoBubble — defaults are ~200px wide which wraps short labels vertically.
   Force the bubble to size to its content and apply the same dark theme we use
   for Leaflet so marker details are readable across providers. */
.H_ib, .H_ib_body, .H_ib_content { background: #222 !important; border: none !important; }
.H_ib { padding: 0 !important; }
.H_ib_body { min-width: 280px !important; max-width: 360px !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0,0,0,.4) !important; padding: 0 !important; }
.H_ib_body .H_ib_content { color: #f3f4f3 !important; border-radius: 8px !important; padding: 0 !important; margin: 0 !important; overflow: hidden; }
.H_ib_body .H_ib_tail { color: #222 !important; }
.H_ib_body .H_ib_tail svg polygon,
.H_ib_body .H_ib_tail svg path { fill: #222 !important; stroke: #222 !important; }
.H_ib_body .H_ib_close { background: #222 !important; border-radius: 50% !important; }
.H_ib_body .H_ib_close svg { fill: #fff !important; }
.H_ib_body .H_ib_close svg rect,
.H_ib_body .H_ib_close svg path { fill: #fff !important; }


/* Google InfoWindow — default is white/light. Match the Leaflet + HERE dark theme. */
.gm-style-iw.gm-style-iw-c { background: #222 !important; box-shadow: 0 4px 12px rgba(0,0,0,.4) !important; padding: 0 !important; }
.gm-style-iw-d { background: #222 !important; overflow: hidden !important; }
.gm-style-iw-tc::after { background: #222 !important; }
.gm-style-iw button.gm-ui-hover-effect > span { background: #fff !important; }

/* Field-level help icon (`?`) — emitted by FieldHelp() Razor helper and
   buildGridColHeader (app.js). Bootstrap popover wired by initFieldHelpPopovers.
   onclick=event.stopPropagation() on the span keeps clicks from toggling
   sibling checkboxes when the icon sits inside a <label>. */
.field-help {
    color: #adb5bd;
    font-size: 11px;
    margin-left: 4px;
    cursor: help;
    line-height: 1;
    transition: color 0.15s ease;
    display: inline-block;
    vertical-align: baseline;
    outline: none;
}
.field-help:hover,
.field-help:focus {
    color: #6c757d;
}
.popover .popover-body {
    font-size: 0.8rem;
    line-height: 1.4;
}