/* KIMOE Custom Styles */

:root {
    --bg-body: #f5f6fa;
    --bg-card: #fff;
    --bg-nav: #1b2a4a;
    --text-primary: #333;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --table-header-bg: #1b2a4a;
    --table-header-color: #fff;
    --table-stripe: rgba(0,0,0,0.02);
    --input-bg: #fff;
    --input-border: #ced4da;
}

[data-theme="dark"] {
    --bg-body: #1a1d23;
    --bg-card: #2d3139;
    --bg-nav: #0d1117;
    --text-primary: #e0e0e0;
    --text-muted: #9e9e9e;
    --border-color: #444;
    --table-header-bg: #0d1117;
    --table-header-color: #e0e0e0;
    --table-stripe: rgba(255,255,255,0.02);
    --input-bg: #2d3139;
    --input-border: #555;
}

[data-theme="dark"] body { background-color: var(--bg-body); color: var(--text-primary); }
[data-theme="dark"] .card, [data-theme="dark"] .card-dashboard { background-color: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .card-header { background-color: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .navbar { background-color: var(--bg-nav) !important; }
[data-theme="dark"] .table { color: var(--text-primary); }
[data-theme="dark"] .table-kimoe th { background-color: var(--table-header-bg); }
[data-theme="dark"] .table td { border-color: var(--border-color); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); }
[data-theme="dark"] .list-group-item { background-color: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); }
[data-theme="dark"] .breadcrumb-item a { color: #6ea8fe; }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .alert-info { background-color: #1a3a5c; border-color: #2a5a8c; color: #8ecaff; }
[data-theme="dark"] .dropdown-menu { background-color: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .dropdown-item { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover { background-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .mobile-bottom-nav { background: var(--bg-nav); }
[data-theme="dark"] footer { color: var(--text-muted) !important; }

body {
    background-color: var(--bg-body);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 1px;
}

/* Dashboard cards */
.card-dashboard {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

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

/* Status badges */
.badge-concept { background-color: #ffc107; color: #000; }
.badge-definitief { background-color: #0d6efd; }
.badge-gepubliceerd { background-color: #198754; }

/* Uren type indicators */
.uren-vast { color: #198754; font-weight: 600; }
.uren-norm { color: #0d6efd; font-weight: 600; }
.uren-vari { color: #6c757d; }

/* Druk percentage colors */
.druk-laag { color: #198754; }
.druk-normaal { color: #0d6efd; }
.druk-hoog { color: #dc3545; font-weight: 700; }

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Global loading spinner */
#global-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
.htmx-request #global-spinner {
    display: block;
}

/* Table styling */
.table-kimoe th {
    background-color: #1b2a4a;
    color: white;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.table-kimoe td {
    vertical-align: middle;
}

.table-kimoe .uren-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
}

/* Inline editing */
.editable:hover {
    background-color: #e8f0fe;
    cursor: pointer;
    border-radius: 4px;
}

/* Smooth HTMX transitions */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

/* ================================================================== */
/* Touch-friendly targets                                              */
/* ================================================================== */
.btn, .nav-link, .dropdown-item, .page-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
}

.navbar .nav-link {
    padding: 0.625rem 1rem;
}

/* ================================================================== */
/* Bottom navigation bar (mobile only)                                 */
/* ================================================================== */
.mobile-bottom-nav {
    display: none;
}

/* ================================================================== */
/* Mobile Responsive Styles (< 768px)                                  */
/* ================================================================== */
@media (max-width: 767.98px) {

    /* Bottom navigation bar */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050;
        background: #1b2a4a;
        border-top: 1px solid rgba(255,255,255,0.1);
        justify-content: space-around;
        align-items: center;
        padding: 0.25rem 0;
        padding-bottom: env(safe-area-inset-bottom, 0.25rem);
    }

    .mobile-bottom-nav a {
        color: rgba(255,255,255,0.65);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.375rem 0.5rem;
        font-size: 0.65rem;
        min-width: 56px;
        min-height: 48px;
        border-radius: 0.375rem;
        transition: color 0.15s;
    }

    .mobile-bottom-nav a i {
        font-size: 1.25rem;
        margin-bottom: 0.125rem;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav a:hover {
        color: #fff;
    }

    .mobile-bottom-nav a.active {
        background: rgba(255,255,255,0.1);
    }

    /* Extra padding at bottom so content isn't hidden behind bottom nav */
    body {
        padding-bottom: 4.5rem;
    }

    /* Footer needs padding above bottom nav */
    footer {
        margin-bottom: 3.5rem !important;
    }

    /* Cards: full width on mobile */
    .card, .card-dashboard {
        border-radius: 0;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Uren cells smaller font on mobile */
    .table-kimoe .uren-cell {
        font-size: 0.75rem;
        min-width: 45px;
        padding: 0.25rem 0.35rem;
    }

    .table-kimoe th {
        font-size: 0.7rem;
        padding: 0.35rem 0.35rem;
    }

    .table-kimoe td {
        font-size: 0.8rem;
        padding: 0.35rem 0.35rem;
    }

    /* Forms: stacked on mobile */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3,
    .row .col-lg-4,
    .row .col-lg-3 {
        margin-bottom: 0.5rem;
    }

    form .row {
        flex-direction: column;
    }

    /* Navbar: larger touch targets */
    .navbar .navbar-brand {
        padding: 0.75rem 0.5rem;
        font-size: 1.1rem;
    }

    .navbar .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem;
    }

    /* Accordion-style sections for programma detail on mobile */
    .card-header[data-bs-toggle="collapse"] {
        cursor: pointer;
        position: relative;
        padding-right: 2.5rem;
    }

    .card-header[data-bs-toggle="collapse"]::after {
        content: '\F282'; /* bi-chevron-down */
        font-family: 'bootstrap-icons';
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.2s;
    }

    .card-header[data-bs-toggle="collapse"].collapsed::after {
        transform: translateY(-50%) rotate(-90deg);
    }

    /* Smaller page title on mobile */
    h1, .h1 {
        font-size: 1.5rem;
    }

    h2, .h2 {
        font-size: 1.25rem;
    }
}

/* ================================================================== */
/* Hide bottom nav on desktop                                          */
/* ================================================================== */
@media (min-width: 768px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ================================================================== */
/* Print styles                                                        */
/* ================================================================== */
@media print {
    .navbar, .mobile-bottom-nav, .btn, .btn-group, .breadcrumb,
    form, .card-header form, #global-spinner, footer,
    .pagination, #theme-toggle, .dropdown-toggle { display: none !important; }

    body { background: white !important; color: black !important; padding: 0 !important; }
    .container-fluid { padding: 0 !important; }
    .card { border: 1px solid #ddd !important; break-inside: avoid; margin-bottom: 1rem !important; box-shadow: none !important; }
    .card-dashboard { border-radius: 0 !important; margin: 0 !important; }
    .table-responsive { overflow: visible !important; }
    .table { font-size: 9pt !important; }
    .table-kimoe th { background: #eee !important; color: black !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .badge { border: 1px solid #999 !important; }
    a { text-decoration: none !important; color: black !important; }
    h2 { font-size: 14pt !important; }

    @page { margin: 1.5cm; }
}