/**
 * Elsker Danmark Admin — Material Design 3 Inspired
 * Bootstrap 5 overrides via CSS custom properties
 */

/* ═══════════════════════════════════════
   Design Tokens
   ═══════════════════════════════════════ */

:root {
    /* Primary */
    --ed-primary: #006b62;
    --ed-primary-hover: #005a53;
    --ed-primary-container: #89f5e7;
    --ed-primary-container-light: #e2fff9;
    --ed-on-primary: #ffffff;

    /* Secondary */
    --ed-secondary: #4b6460;
    --ed-secondary-container: #cce8e3;

    /* Tertiary */
    --ed-tertiary: #346578;
    --ed-tertiary-container: #b6e7fe;
    --ed-tertiary-container-light: #e1f0f7;

    /* Surfaces */
    --ed-surface: #f8f9ff;
    --ed-surface-container: #e5eeff;
    --ed-surface-container-low: #eff4ff;
    --ed-surface-white: #ffffff;

    /* Text */
    --ed-on-surface: #05345c;
    --ed-on-surface-variant: #3d618c;

    /* Outline */
    --ed-outline: #5a7da9;
    --ed-outline-variant: #91b4e4;

    /* Status */
    --ed-error: #a83836;
    --ed-error-container: #fce8e8;
    --ed-success: #1a7d5a;
    --ed-success-container: #e3f5ee;
    --ed-warning: #8a6d00;
    --ed-warning-container: #fff3d0;

    /* Geometry */
    --ed-radius-sm: 0.5rem;
    --ed-radius-md: 0.75rem;
    --ed-radius-lg: 1rem;
    --ed-radius-pill: 50rem;

    /* Shadows */
    --ed-shadow-sm: 0 1px 3px rgba(5, 52, 92, 0.06);
    --ed-shadow-md: 0 2px 8px rgba(5, 52, 92, 0.08);
    --ed-shadow-lg: 0 4px 16px rgba(5, 52, 92, 0.1);

    /* Layout */
    --ed-sidebar-width: 256px;
    --ed-sidebar-bg: #f1f5f9;
    --ed-navbar-height: 64px;

    /* Fonts */
    --ed-font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ed-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ═══════════════════════════════════════
   Base Typography & Body
   ═══════════════════════════════════════ */

body {
    font-family: var(--ed-font-body);
    background-color: var(--ed-surface);
    color: var(--ed-on-surface);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ed-font-headline);
    color: var(--ed-on-surface);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

a { color: var(--ed-primary); }
a:hover { color: var(--ed-primary-hover); }

code {
    color: var(--ed-tertiary);
    background: var(--ed-tertiary-container-light);
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

/* ═══════════════════════════════════════
   Navbar
   ═══════════════════════════════════════ */

.ed-navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--ed-surface-container);
    height: var(--ed-navbar-height);
    padding: 0 1.5rem !important;
    box-shadow: 0 1px 3px rgba(5, 52, 92, 0.04);
    position: relative;
    z-index: 9999;
}

.ed-navbar .navbar-brand {
    color: var(--ed-on-surface) !important;
    font-family: var(--ed-font-headline);
    font-weight: 700;
    font-size: 1.1rem;
}

.ed-navbar .text-muted {
    color: var(--ed-on-surface-variant) !important;
}

.ed-search-pill {
    border-radius: var(--ed-radius-pill) !important;
    background-color: var(--ed-surface-container-low) !important;
    border: 1px solid transparent !important;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.ed-search-pill:focus {
    background-color: var(--ed-surface-white) !important;
    border-color: var(--ed-outline-variant) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 107, 98, 0.1) !important;
}

.ed-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 1.5rem;
    right: 1.5rem;
    background: var(--ed-surface-white);
    border-radius: var(--ed-radius-md);
    box-shadow: var(--ed-shadow-lg);
    z-index: 9999;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.ed-search-results.show {
    display: block;
}

.ed-search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 1rem;
    text-decoration: none;
    color: var(--ed-on-surface);
    border-bottom: 1px solid var(--ed-surface-container-low);
    transition: background 0.15s ease;
}

.ed-search-item:last-child {
    border-bottom: none;
}

.ed-search-item:hover {
    background-color: var(--ed-surface-container-low);
    color: var(--ed-primary);
}

.ed-search-item .ed-search-title {
    font-weight: 500;
    font-size: 0.875rem;
}

.ed-search-item .ed-search-sub {
    font-size: 0.75rem;
    color: var(--ed-on-surface-variant);
}

.ed-search-empty {
    padding: 1rem;
    text-align: center;
    color: var(--ed-on-surface-variant);
    font-size: 0.875rem;
}

/* Dashboard cards */
.dash-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ed-shadow-lg);
}

/* ═══════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════ */

#sidebar {
    background-color: var(--ed-sidebar-bg) !important;
    border-right: none !important;
    min-width: var(--ed-sidebar-width) !important;
    min-height: calc(100vh - var(--ed-navbar-height)) !important;
    padding: 1rem 0.75rem !important;
    transition: all 0.3s ease;
}

#sidebar .nav-link {
    padding: 0.625rem 1rem;
    border-radius: var(--ed-radius-md);
    margin-bottom: 2px;
    color: var(--ed-on-surface-variant);
    font-weight: 500;
    font-size: 0.875rem;
    font-family: var(--ed-font-headline);
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
}

#sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--ed-on-surface);
}

#sidebar .nav-link.active {
    background-color: var(--ed-surface-white);
    color: var(--ed-primary) !important;
    font-weight: 600;
    box-shadow: var(--ed-shadow-sm);
    transform: scale(1.02);
}

#sidebar .nav-link i {
    width: 1.25rem;
    text-align: center;
}

/* Submenu */
#sidebar .ms-3 .nav-link {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 1px;
}

.ed-chevron {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
}

.ed-chevron-open {
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════
   Cards
   ═══════════════════════════════════════ */

.card {
    border: none;
    border-radius: var(--ed-radius-md);
    box-shadow: var(--ed-shadow-sm);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--ed-shadow-md);
}

.card-header {
    background-color: var(--ed-surface-white);
    border-bottom: 1px solid var(--ed-surface-container);
    padding: 1rem 1.25rem;
    font-family: var(--ed-font-headline);
}

.card-body {
    padding: 1.25rem;
}

.card-img-top {
    border-radius: 0;
}

/* ═══════════════════════════════════════
   Tables
   ═══════════════════════════════════════ */

.table {
    margin-bottom: 0;
}

.table th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-on-surface-variant);
    border-bottom: 2px solid var(--ed-surface-container) !important;
    padding: 0.75rem;
    white-space: nowrap;
}

.table td {
    padding: 0.75rem;
    vertical-align: middle;
    color: var(--ed-on-surface);
    border-color: var(--ed-surface-container-low);
}

.table-hover tbody tr:hover {
    background-color: var(--ed-surface-container-low);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(5, 52, 92, 0.015);
}

/* ═══════════════════════════════════════
   Badges
   ═══════════════════════════════════════ */

.badge {
    border-radius: var(--ed-radius-pill);
    font-weight: 600;
    padding: 0.35em 0.75em;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.badge.bg-primary {
    background-color: var(--ed-primary-container-light) !important;
    color: var(--ed-primary) !important;
}

.badge.bg-success {
    background-color: var(--ed-success-container) !important;
    color: var(--ed-success) !important;
}

.badge.bg-danger {
    background-color: var(--ed-error-container) !important;
    color: var(--ed-error) !important;
}

.badge.bg-info {
    background-color: var(--ed-tertiary-container-light) !important;
    color: var(--ed-tertiary) !important;
}

.badge.bg-secondary {
    background-color: var(--ed-surface-container) !important;
    color: var(--ed-on-surface-variant) !important;
}

.badge.bg-warning {
    background-color: var(--ed-warning-container) !important;
    color: var(--ed-warning) !important;
}

/* Filter pills — solid Bootstrap colors */
.badge-solid.bg-primary   { background-color: #0d6efd !important; color: #fff !important; }
.badge-solid.bg-success   { background-color: #198754 !important; color: #fff !important; }
.badge-solid.bg-danger    { background-color: #dc3545 !important; color: #fff !important; }
.badge-solid.bg-info      { background-color: #0dcaf0 !important; color: #000 !important; }
.badge-solid.bg-warning   { background-color: #ffc107 !important; color: #000 !important; }
.badge-solid.bg-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge-solid.bg-dark      { background-color: #212529 !important; color: #fff !important; }

/* ═══════════════════════════════════════
   Buttons
   ═══════════════════════════════════════ */

.btn {
    border-radius: var(--ed-radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--ed-primary);
    border-color: var(--ed-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ed-primary-hover);
    border-color: var(--ed-primary-hover);
}

.btn-success {
    background-color: var(--ed-success);
    border-color: var(--ed-success);
}

.btn-danger {
    background-color: var(--ed-error);
    border-color: var(--ed-error);
}

.btn-warning {
    background-color: var(--ed-warning);
    border-color: var(--ed-warning);
    color: white;
}

.btn-outline-primary {
    color: var(--ed-primary);
    border-color: var(--ed-primary);
}
.btn-outline-primary:hover {
    background-color: var(--ed-primary);
    border-color: var(--ed-primary);
}

.btn-outline-secondary {
    color: var(--ed-on-surface-variant);
    border-color: var(--ed-outline-variant);
}
.btn-outline-secondary:hover {
    background-color: var(--ed-surface-container-low);
    border-color: var(--ed-outline-variant);
    color: var(--ed-on-surface);
}

.btn-outline-danger {
    color: var(--ed-error);
    border-color: var(--ed-error);
}
.btn-outline-danger:hover {
    background-color: var(--ed-error);
    border-color: var(--ed-error);
}

/* ═══════════════════════════════════════
   Forms
   ═══════════════════════════════════════ */

.form-label {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--ed-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-control, .form-select {
    border-radius: var(--ed-radius-sm);
    border-color: var(--ed-outline-variant);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: var(--ed-on-surface);
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ed-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 107, 98, 0.15);
}

/* ═══════════════════════════════════════
   Modals
   ═══════════════════════════════════════ */

.modal-content {
    border: none;
    border-radius: var(--ed-radius-lg);
    box-shadow: var(--ed-shadow-lg);
    overflow: hidden;
}

/* ═══════════════════════════════════════
   Toasts
   ═══════════════════════════════════════ */

.toast {
    border-radius: var(--ed-radius-md);
    border: none;
    box-shadow: var(--ed-shadow-md);
}

.toast-container {
    z-index: 1090;
}

/* ═══════════════════════════════════════
   Alerts
   ═══════════════════════════════════════ */

.alert-info {
    background-color: var(--ed-tertiary-container-light);
    color: var(--ed-tertiary);
    border: none;
    border-radius: var(--ed-radius-md);
}

.alert-success {
    background-color: var(--ed-success-container);
    color: var(--ed-success);
    border: none;
    border-radius: var(--ed-radius-md);
}

.alert-danger {
    background-color: var(--ed-error-container);
    color: var(--ed-error);
    border: none;
    border-radius: var(--ed-radius-md);
}

/* ═══════════════════════════════════════
   Clickable Rows
   ═══════════════════════════════════════ */

.clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.clickable-row:hover {
    background-color: var(--ed-surface-container-low) !important;
}

/* ═══════════════════════════════════════
   Backgrounds (override Bootstrap)
   ═══════════════════════════════════════ */

.bg-light {
    background-color: var(--ed-surface) !important;
}

/* ═══════════════════════════════════════
   Scrollbar
   ═══════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ed-outline-variant); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ed-outline); }

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
    #sidebar {
        min-width: 0 !important;
        width: 0;
        overflow: hidden;
        padding: 0 !important;
    }
}