/* =============================================
   MARITIM TEMA — loader efter RadzenTheme
   ============================================= */

:root {
    --rz-primary:           #1565C0;
    --rz-primary-dark:      #0D47A1;
    --rz-primary-darker:    #0A2F6E;
    --rz-primary-light:     #1E88E5;
    --rz-primary-lighter:   #90CAF9;
    --rz-secondary:         #00838F;
    --rz-secondary-dark:    #006064;
    --rz-secondary-light:   #00ACC1;
    --rz-body-background-color: #E3EAF2;
    --rz-base-50:   #F0F4F8;
    --rz-base-100:  #E3EAF2;
    --rz-base-200:  #C8D6E8;
    --rz-base-300:  #A8BFDB;
    --rz-base-400:  #7A9BBD;
    --rz-base-500:  #4F7A9E;
    --rz-base-600:  #355F82;
    --rz-base-700:  #1F4566;
    --rz-base-800:  #0F2E4A;
    --rz-base-900:  #071E31;
    --rz-base-1000: #020D18;

    /* ── Semantic status colors ───────────── */
    --color-success-bg:      #dcfce7;
    --color-success-bg-soft: #f0fdf4;
    --color-success-border:  #bbf7d0;
    --color-success-text:    #166534;
    --color-success-icon:    #198754;
    --color-success-bright:  #22c55e;

    --color-warning-bg:      #fef3c7;
    --color-warning-bg-soft: #fffbeb;
    --color-warning-border:  #fde68a;
    --color-warning-text:    #92400e;
    --color-warning-icon:    #f59e0b;
    --color-warning-alt:     #d97706;

    --color-info-bg:         #dbeafe;
    --color-info-bg-soft:    #eff6ff;
    --color-info-border:     #bfdbfe;
    --color-info-text:       #1e40af;

    --color-muted-bg:        #f8f9fa;
    --color-muted-bg-alt:    #e9ecef;
    --color-muted-text:      #6c757d;
    --color-muted-text-alt:  #495057;
    --color-muted-icon:      #adb5bd;
    --color-body-text:       #1a1a2e;
}

/* ── Sidebar ──────────────────────────────── */
.rz-sidebar,
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-panel-menu-item,
.rz-sidebar .rz-panel-menu ul,
.rz-sidebar > div,
.rz-sidebar > div > div {
    background-color: #0C2340 !important;
    border-right: none !important;
}

.rz-sidebar {
    border-right: 1px solid #163358 !important;
}

/* Menu items */
.rz-sidebar .rz-navigation-item-link,
.rz-sidebar .rz-navigation-item-link:link,
.rz-sidebar .rz-navigation-item-link:visited,
.rz-sidebar .rz-panel-menu-item-link,
.rz-sidebar ul li a {
    color: #CBD5E1 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    margin: 2px 8px !important;
}

.rz-sidebar .rz-navigation-item-text,
.rz-sidebar .rz-navigation-item-link span,
.rz-sidebar .rz-navigation-item-link:link span,
.rz-sidebar .rz-navigation-item-link:visited span,
.rz-sidebar ul li a span {
    color: #CBD5E1 !important;
    font-size: 1rem !important;
}

.rz-sidebar .rz-navigation-item-link:hover {
    background-color: rgba(255,255,255,0.08) !important;
    color: #FFFFFF !important;
}

.rz-sidebar .rz-navigation-item-link:hover span,
.rz-sidebar .rz-navigation-item-link:hover .rz-navigation-item-text {
    color: #FFFFFF !important;
}

/* Aktiv */
.rz-sidebar .rz-state-active > a,
.rz-sidebar .rz-navigation-item-link.rz-state-active,
.rz-sidebar li.rz-state-active > .rz-navigation-item-link {
    background-color: #1565C0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(21,101,192,0.35) !important;
}

.rz-sidebar .rz-state-active .rz-navigation-item-text,
.rz-sidebar li.rz-state-active span,
.rz-sidebar .rz-navigation-item-link.rz-state-active span {
    color: #FFFFFF !important;
}

/* Ikoner */
.rz-sidebar i,
.rz-sidebar .rzi {
    color: #64B5F6 !important;
}

.rz-sidebar .rz-state-active i,
.rz-sidebar .rz-state-active .rzi,
.rz-sidebar li.rz-state-active i {
    color: #FFFFFF !important;
}

/* ── Primær-knapper ───────────────────────── */
.rz-button.rz-variant-filled.rz-primary {
    background: #1565C0 !important;
    border-color: #1565C0 !important;
    color: #fff !important;
}
.rz-button.rz-variant-filled.rz-primary:hover {
    background: #0D47A1 !important;
    border-color: #0D47A1 !important;
}

/* ── Side-baggrund ────────────────────────── */
body, .rz-body {
    background-color: #E3EAF2 !important;
}

/* ── Cards ────────────────────────────────── */
.rz-card {
    border: 1px solid #C8D6E8 !important;
    box-shadow: 0 2px 8px rgba(12,35,64,0.09) !important;
}

/* ── Card borders — light mode ───────────── */
.cl-card,
.diary-card,
.trip-card,
.mcard,
.cld-content-card,
.cld-history-card {
    border-color: #C8D6E8 !important;
    box-shadow: 0 2px 8px rgba(12,35,64,0.08) !important;
}

/* ── Klikbare kort med hover-effekt ──────── */
.task-card,
.maintenance-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer;
}

.task-card:hover,
.maintenance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(12, 35, 64, 0.14) !important;
}

/* ── "Tilføj ny" dashed-kort hover ───────── */
.add-new-card {
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    border: 2px dashed #dee2e6 !important;
    background: #f8f9fa !important;
}

.add-new-card:hover {
    background-color: #EBF2FB !important;
    border-color: #1565C0 !important;
}

.add-new-card:hover .add-new-icon,
.add-new-card:hover span {
    color: #1565C0 !important;
}

/* ── Tjekliste-kort hover ─────────────────── */
.checklist-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.checklist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(12, 35, 64, 0.12) !important;
}

/* ── Sektion-toggle (Fuldført) ────────────── */
.section-toggle {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    cursor: pointer;
    user-select: none;
}

.section-toggle:hover {
    background-color: #E3EAF2;
}

/* ── BoatPicker pill forbedringer ─────────── */
.boat-picker-pill {
    transition: all 0.15s ease !important;
}

/* ── Radzen Dialog forbedringer ───────────── */
.rz-dialog {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.rz-dialog-title-text {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* ── Progress bar circular farve ─────────── */
.rz-progressbar-circular .rz-progressbar-value {
    stroke: #1565C0 !important;
}

/* ── Scrollbar styling ────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F0F4F8;
}
::-webkit-scrollbar-thumb {
    background: #A8BFDB;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #7A9BBD;
}

/* ══════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════ */
html[data-theme="dark"] {
    --rz-body-background-color: #071E31;
    --rz-base-background-color: #071E31;
    --rz-card-background-color: #0F2E4A;
    --rz-base-50:   #071E31;
    --rz-base-100:  #0F2E4A;
    --rz-base-200:  #1F4566;
    --rz-base-300:  #355F82;
    --rz-base-400:  #4F7A9E;
    --rz-base-500:  #7A9BBD;
    --rz-base-600:  #A8BFDB;
    --rz-base-700:  #C8D6E8;
    --rz-base-800:  #E3EAF2;
    --rz-base-900:  #F0F4F8;
    --rz-base-1000: #FFFFFF;
    --rz-text-color: #CBD5E1;
    --rz-text-secondary-color: #90A4B9;

    /* ── Semantic status colors (dark overrides) ── */
    --color-success-bg:      #0F3020;
    --color-success-bg-soft: #071a0f;
    --color-success-border:  #166534;
    --color-success-text:    #4ade80;
    --color-success-icon:    #22c55e;
    --color-success-bright:  #4ade80;

    --color-warning-bg:      #2a1900;
    --color-warning-bg-soft: #1C1200;
    --color-warning-border:  #92400e;
    --color-warning-text:    #fbbf24;
    --color-warning-icon:    #fbbf24;
    --color-warning-alt:     #f59e0b;

    --color-info-bg:         #0a1e3d;
    --color-info-bg-soft:    #071428;
    --color-info-border:     #1e40af;
    --color-info-text:       #93c5fd;

    --color-muted-bg:        #0A1E33;
    --color-muted-bg-alt:    #1F4566;
    --color-muted-text:      #90A4B9;
    --color-muted-text-alt:  #7A9BBD;
    --color-muted-icon:      #4F7A9E;
    --color-body-text:       #CBD5E1;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .rz-body {
    background-color: #071E31 !important;
    color: #CBD5E1 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #E2EAF4 !important;
}

/* Force text light on all common elements — beats inline color: #1a1a2e */
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] div {
    color: #CBD5E1 !important;
}

/* Re-allow intentionally colored elements to keep their color */
html[data-theme="dark"] .rz-badge,
html[data-theme="dark"] [class*="rz-color-"],
html[data-theme="dark"] .rz-progressbar-value,
html[data-theme="dark"] .rz-chart *,
html[data-theme="dark"] svg * {
    color: inherit !important;
}

html[data-theme="dark"] .rz-body > div {
    background-color: #071E31 !important;
}

html[data-theme="dark"] .rz-card {
    background-color: #0F2E4A !important;
    border-color: #1F4566 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    color: #CBD5E1 !important;
}

html[data-theme="dark"] .rz-card * {
    color: #CBD5E1;
}

html[data-theme="dark"] .rz-text-color-secondary,
html[data-theme="dark"] .rz-color-secondary {
    color: #90A4B9 !important;
}

/* Inputs */
html[data-theme="dark"] .rz-textbox,
html[data-theme="dark"] .rz-textarea,
html[data-theme="dark"] .rz-numeric,
html[data-theme="dark"] .rz-dropdown,
html[data-theme="dark"] .rz-password,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #0F2E4A !important;
    border-color: #1F4566 !important;
    color: #CBD5E1 !important;
}

html[data-theme="dark"] .rz-dropdown-panel,
html[data-theme="dark"] .rz-dropdown-items-wrapper {
    background-color: #0F2E4A !important;
    border-color: #1F4566 !important;
}

html[data-theme="dark"] .rz-dropdown-item:hover,
html[data-theme="dark"] .rz-dropdown-item.rz-state-highlight {
    background-color: #1F4566 !important;
}

html[data-theme="dark"] .rz-dropdown-item {
    color: #CBD5E1 !important;
}

/* DataGrid / tables */
html[data-theme="dark"] .rz-datatable,
html[data-theme="dark"] .rz-grid-table {
    background-color: #0F2E4A !important;
    color: #CBD5E1 !important;
}

html[data-theme="dark"] .rz-datatable thead th,
html[data-theme="dark"] .rz-grid-table th {
    background-color: #071E31 !important;
    color: #90A4B9 !important;
    border-color: #1F4566 !important;
}

html[data-theme="dark"] .rz-datatable tbody tr,
html[data-theme="dark"] .rz-grid-table tbody tr {
    border-color: #1F4566 !important;
}

html[data-theme="dark"] .rz-datatable tbody tr:hover,
html[data-theme="dark"] .rz-grid-table tbody tr:hover {
    background-color: #1F4566 !important;
}

/* Dialogs */
html[data-theme="dark"] .rz-dialog-wrapper {
    background: rgba(0,0,0,0.6) !important;
}

html[data-theme="dark"] .rz-dialog {
    background-color: #0F2E4A !important;
    color: #CBD5E1 !important;
}

html[data-theme="dark"] .rz-dialog-title {
    color: #CBD5E1 !important;
    border-bottom-color: #1F4566 !important;
}

/* Light / secondary buttons in dark mode — broad attribute-based targeting */
html[data-theme="dark"] [class*="rz-button"][class*="rz-light"],
html[data-theme="dark"] [class*="rz-button"][class*="rz-secondary"],
html[data-theme="dark"] .rz-button.rz-light,
html[data-theme="dark"] .rz-button.rz-variant-filled.rz-light,
html[data-theme="dark"] .rz-button.rz-variant-filled.rz-light.rz-shade-default,
html[data-theme="dark"] .rz-button.rz-secondary,
html[data-theme="dark"] .rz-button.rz-variant-outlined,
html[data-theme="dark"] .rz-variant-outlined {
    background-color: #1F4566 !important;
    border-color: #355F82 !important;
    color: #CBD5E1 !important;
}

html[data-theme="dark"] [class*="rz-button"][class*="rz-light"] span,
html[data-theme="dark"] [class*="rz-button"][class*="rz-secondary"] span,
html[data-theme="dark"] .rz-button.rz-light span,
html[data-theme="dark"] .rz-button.rz-variant-filled.rz-light span {
    color: #CBD5E1 !important;
}

html[data-theme="dark"] [class*="rz-button"][class*="rz-light"]:hover,
html[data-theme="dark"] [class*="rz-button"][class*="rz-secondary"]:hover,
html[data-theme="dark"] .rz-button.rz-light:hover,
html[data-theme="dark"] .rz-button.rz-variant-filled.rz-light:hover,
html[data-theme="dark"] .rz-button.rz-variant-filled.rz-light.rz-shade-default:hover,
html[data-theme="dark"] .rz-variant-outlined:hover {
    background-color: #2A5E8A !important;
    color: #FFFFFF !important;
}

html[data-theme="dark"] [class*="rz-button"][class*="rz-light"]:hover span,
html[data-theme="dark"] .rz-button.rz-light:hover span {
    color: #FFFFFF !important;
}

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #071E31;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #355F82;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4F7A9E;
}

/* Section toggles and misc UI */
html[data-theme="dark"] .section-toggle:hover {
    background-color: #1F4566 !important;
}

html[data-theme="dark"] .add-new-card {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
}

html[data-theme="dark"] .add-new-card:hover {
    background-color: #1F4566 !important;
    border-color: #4F7A9E !important;
}

/* ── Page card classes ─────────────────────────── */
html[data-theme="dark"] .trip-card,
html[data-theme="dark"] .diary-card,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .maintenance-card,
html[data-theme="dark"] .checklist-card,
html[data-theme="dark"] .document-card {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
}

/* Empty state dashed boxes used across all pages */
html[data-theme="dark"] [style*="background: #fafbfc"],
html[data-theme="dark"] [style*="background:#fafbfc"] {
    background: #0A1E33 !important;
    border-color: #1F4566 !important;
}

/* White inline backgrounds */
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"] {
    background: #0F2E4A !important;
}

/* Light card backgrounds */
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background: #f4f8fc"],
html[data-theme="dark"] [style*="background: #f0f6ff"],
html[data-theme="dark"] [style*="background: #f8f9fa"] {
    background: #0A1E33 !important;
}

/* Neutral pill/badge backgrounds still using hardcoded hex in some inline styles */
html[data-theme="dark"] [style*="background: #f0f4f8"],
html[data-theme="dark"] [style*="background:#f0f4f8"],
html[data-theme="dark"] [style*="background: #e8f1fb"],
html[data-theme="dark"] [style*="background:#e8f1fb"],
html[data-theme="dark"] [style*="background: #e9ecef"],
html[data-theme="dark"] [style*="background:#e9ecef"],
html[data-theme="dark"] [style*="background: #f1f3f5"],
html[data-theme="dark"] [style*="background:#f1f3f5"],
html[data-theme="dark"] [style*="background: #f5f7fb"],
html[data-theme="dark"] [style*="background:#f5f7fb"],
html[data-theme="dark"] [style*="background: #d6e8f7"],
html[data-theme="dark"] [style*="background:#d6e8f7"] {
    background: #1F4566 !important;
    color: #CBD5E1 !important;
}

/* Error message boxes */
html[data-theme="dark"] [style*="background: #fff0f0"],
html[data-theme="dark"] [style*="background:#fff0f0"] {
    background: #2D0A0A !important;
    border-color: #7f1d1d !important;
    color: #fca5a5 !important;
}

/* ── Tasks page ────────────────────────────────── */
html[data-theme="dark"] .tasks-add-card {
    background: #0A1E33 !important;
    border-color: #1F4566 !important;
}
html[data-theme="dark"] .tasks-add-card:hover {
    background: #1F4566 !important;
    border-color: #4F7A9E !important;
}

/* ── Checklist detail page ─────────────────────── */
html[data-theme="dark"] .cld-back-btn,
html[data-theme="dark"] .cld-btn-secondary,
html[data-theme="dark"] .cld-btn-danger {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
    color: #CBD5E1 !important;
}
html[data-theme="dark"] .cld-btn-secondary.active {
    background: #0F3020 !important;
    border-color: #166534 !important;
    color: #86efac !important;
}
html[data-theme="dark"] .cld-item-row {
    background: transparent !important;
    border-bottom-color: #1F4566 !important;
}
html[data-theme="dark"] .cld-item-row:hover {
    background: #0F2E4A !important;
}
html[data-theme="dark"] .cld-item-row.checked {
    background: #0A1E2A !important;
}
html[data-theme="dark"] .cld-item-row.edit-mode:hover {
    background: #0F2E4A !important;
}

/* Maintenance dialog components */
html[data-theme="dark"] .md-section {
    background: #0A1E33 !important;
    border-color: #1F4566 !important;
}

html[data-theme="dark"] .md-section-title {
    color: #90A4B9 !important;
}

html[data-theme="dark"] .md-label {
    color: #90A4B9 !important;
}

html[data-theme="dark"] .md-dropzone {
    background: #0A1E33 !important;
    border-color: #1F4566 !important;
}

html[data-theme="dark"] .md-btn-cancel {
    background: #0F2E4A !important;
    color: #CBD5E1 !important;
    border-color: #1F4566 !important;
}

html[data-theme="dark"] .md-btn-cancel:hover {
    border-color: #4F7A9E !important;
}

/* ── Checklists page ─────────────────────────────── */
html[data-theme="dark"] .cl-card {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
}
html[data-theme="dark"] .cl-card:hover {
    border-color: #4F7A9E !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .cl-modal-input {
    background: #0A1E33 !important;
    color: #CBD5E1 !important;
    border-color: #1F4566 !important;
}
html[data-theme="dark"] .cl-modal-input:focus {
    border-color: #4F7A9E !important;
    box-shadow: 0 0 0 3px rgba(79,122,158,0.20) !important;
}

/* ── Checklist detail — missing cards ───────────── */
html[data-theme="dark"] .cld-content-card {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
}
html[data-theme="dark"] .cld-history-card {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
}
html[data-theme="dark"] .cld-btn-reset {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
    color: #CBD5E1 !important;
}
html[data-theme="dark"] .cld-btn-reset:hover {
    border-color: #4F7A9E !important;
    color: #E2EBF4 !important;
}
html[data-theme="dark"] .cld-name-input {
    background: #0A1E33 !important;
    color: #E2EBF4 !important;
    border-color: #4F7A9E !important;
}

/* ── Maintenance page ────────────────────────────── */
html[data-theme="dark"] .maint-add-card {
    background: #0A1E33 !important;
    border-color: #1F4566 !important;
}
html[data-theme="dark"] .maint-add-card:hover {
    background: #1F4566 !important;
    border-color: #4F7A9E !important;
}

/* ── MaintenanceCard component ───────────────────── */
html[data-theme="dark"] .mcard {
    background: #0F2E4A !important;
    border-color: #1F4566 !important;
}
html[data-theme="dark"] .mcard:hover {
    border-color: #4F7A9E !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}