/*!
 * Digital Competitive Admin - standaardthema van het framework (Bootstrap 5.3)
 * Vormgeving geïnspireerd op het vroegere Magen-IOT-Admin template, volledig eigen code.
 *
 * Aanpassen per project: maak themes/<naam>/assets/css/theme.css (overschrijft dit bestand),
 * of voeg een extra stylesheet toe via config 'stylesheets' en overschrijf enkel de variabelen.
 */

/* ---------- Lettertypes (lokaal, geen externe requests) ---------- */
@font-face { font-family: 'Roboto'; font-weight: 300; font-display: swap; src: url('../fonts/roboto-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-display: swap; src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-display: swap; src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hind'; font-weight: 400; font-display: swap; src: url('../fonts/hind-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hind'; font-weight: 500; font-display: swap; src: url('../fonts/hind-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hind'; font-weight: 600; font-display: swap; src: url('../fonts/hind-latin-600-normal.woff2') format('woff2'); }

/* ---------- Ontwerpvariabelen ---------- */
:root, [data-bs-theme=light] {
    --app-primary: #1b84e7;
    --app-primary-rgb: 27, 132, 231;
    --app-sidebar-width: 250px;
    --app-topbar-height: 60px;
    --app-bg: #f4f5f8;
    --app-surface: #ffffff;
    --app-border: #e6e8ef;
    --app-text-muted: #868ba1;
    --app-nav-hover: #f0f4fb;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .06);

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-bg: var(--app-bg);
    --bs-border-color: var(--app-border);
    --bs-border-radius: .5rem;
}
[data-bs-theme=dark] {
    --app-bg: #13161c;
    --app-surface: #1c2028;
    --app-border: #2c313c;
    --app-text-muted: #9aa1b2;
    --app-nav-hover: #252a35;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --bs-body-bg: var(--app-bg);
    --bs-border-color: var(--app-border);
}

h1, h2, h3, h4, h5, h6, .app-page-title, .card-title { font-family: 'Hind', 'Roboto', sans-serif; font-weight: 600; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .app-nav-link:hover, .app-nav-sublink:hover, .dropdown-item:hover, .app-logo:hover, .nav-link:hover { text-decoration: none; }

.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: #1673cc; --bs-btn-hover-border-color: #1673cc; --bs-btn-active-bg: #1468b8; }
.btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); }
.text-primary { color: var(--app-primary) !important; }
.bg-primary { background-color: var(--app-primary) !important; }

/* ---------- Opbouw ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--app-sidebar-width); z-index: 1040;
    background: var(--app-surface); border-right: 1px solid var(--app-border);
    display: flex; flex-direction: column; transition: transform .2s ease;
}
.app-main { flex: 1; min-width: 0; margin-left: var(--app-sidebar-width); display: flex; flex-direction: column; transition: margin .2s ease; }
body.sidebar-hidden .app-sidebar { transform: translateX(-100%); }
body.sidebar-hidden .app-main { margin-left: 0; }

.app-sidebar-header { padding: 1rem 1.25rem .75rem; }
.app-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--bs-body-color); }
.app-logo-mark {
    width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--app-primary); color: #fff; font-weight: 700; font-size: 1.1rem; font-family: 'Hind', sans-serif;
}
.app-logo-text { font-family: 'Hind', sans-serif; font-weight: 600; font-size: 1.35rem; }
.app-clock {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .8rem; margin: .9rem 0 .75rem;
    color: var(--app-primary); text-shadow: 0 0 14px rgba(var(--app-primary-rgb), .45); letter-spacing: .5px;
}
.app-search { position: relative; }
.app-search .bi { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--app-text-muted); }
.app-search .form-control { padding-left: 2rem; }

.app-sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem 0 1rem; scrollbar-width: thin; }
.app-nav-label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--app-text-muted); padding: .5rem 1.25rem; }
.app-nav { list-style: none; margin: 0; padding: 0; }
.app-nav-link {
    display: flex; align-items: center; gap: .75rem; padding: .62rem 1.25rem; color: var(--bs-body-color);
    text-decoration: none; border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.app-nav-link .bi:first-child { font-size: 1.15rem; color: var(--app-text-muted); width: 1.2rem; text-align: center; }
.app-nav-link:hover { background: var(--app-nav-hover); color: var(--bs-body-color); }
.app-nav-link.active { background: var(--app-nav-hover); border-left-color: var(--app-primary); font-weight: 500; }
.app-nav-link.active .bi:first-child { color: var(--app-primary); }
.app-nav-caret { margin-left: auto; font-size: .75rem; transition: transform .2s; color: var(--app-text-muted); }
.app-nav-link.collapsed .app-nav-caret { transform: rotate(-90deg); }
.app-nav-sub { list-style: none; padding: .25rem 0; margin: 0; background: rgba(var(--app-primary-rgb), .03); }
.app-nav-sublink { display: block; padding: .45rem 1.25rem .45rem 3.2rem; color: var(--app-text-muted); text-decoration: none; }
.app-nav-sublink:hover { color: var(--bs-body-color); }
.app-nav-sublink.active { color: var(--app-primary); font-weight: 500; }

.app-topbar {
    height: var(--app-topbar-height); background: var(--app-surface); border-bottom: 1px solid var(--app-border);
    display: flex; align-items: center; gap: .5rem; padding: 0 1rem; position: sticky; top: 0; z-index: 1030;
}
.app-topbar-right { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.app-icon-btn { position: relative; font-size: 1.3rem; color: var(--app-text-muted); border: 0; padding: .35rem .55rem; line-height: 1; }
.app-icon-btn:hover, .app-icon-btn.is-active { color: var(--app-primary); }
.app-icon-btn .app-dot { position: absolute; top: .35rem; right: .4rem; width: 8px; height: 8px; border-radius: 50%; background: var(--bs-danger); border: 2px solid var(--app-surface); }
.app-user-btn { display: flex; align-items: center; gap: .5rem; border: 0; color: var(--bs-body-color); }
.app-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

.app-breadcrumbs { padding: .65rem 1.75rem; background: var(--app-surface); border-bottom: 1px solid var(--app-border); font-size: .8rem; }
.app-content { flex: 1; padding: 1.5rem 1.75rem 2rem; }
.app-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.app-page-title { font-size: 1.45rem; margin: 0; }
.app-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.app-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.75rem; color: var(--app-text-muted); font-size: .8rem; }

.app-backdrop { display: none; }

/* ---------- Componenten ---------- */
.card { --bs-card-bg: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow); }
.card-header { background: transparent; font-family: 'Hind', sans-serif; font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; padding: 1rem 1.25rem; }
.card-header .btn, .card-header .nav, .card-header .form-select, .card-header .form-control { text-transform: none; letter-spacing: normal; font-family: var(--bs-body-font-family); }
.card-header .btn-sm { font-size: .8rem; }
.card-body { padding: 1.25rem; }
.table { --bs-table-bg: transparent; }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--app-text-muted); font-weight: 600; border-bottom-width: 1px; }
.form-label { font-weight: 500; margin-bottom: .35rem; }
.dropdown-menu { --bs-dropdown-font-size: .875rem; border-color: var(--app-border); }

.stat-card .stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-text-muted); font-weight: 600; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 600; color: var(--app-primary); line-height: 1.2; margin: .3rem 0; font-family: 'Hind', sans-serif; }
.stat-card .stat-icon { font-size: 1.6rem; color: rgba(var(--app-primary-rgb), .25); }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--app-text-muted); }
.empty-state .bi { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .6; }

.badge-label { display: inline-block; padding: .2em .65em; border-radius: 999px; font-size: .72rem; font-weight: 500; }

/* ---------- Authenticatiepagina's ---------- */
.auth-body { background: linear-gradient(135deg, rgba(var(--app-primary-rgb), .08), transparent 55%), var(--app-bg); }
.auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 440px; }
.auth-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.auth-footer { margin-top: 1.25rem; }

/* ---------- Tabellen (simple-datatables) ---------- */
.datatable-wrapper .datatable-top, .datatable-wrapper .datatable-bottom { padding: .5rem 0; }
.datatable-wrapper .datatable-input, .datatable-wrapper .datatable-selector { border: 1px solid var(--app-border); border-radius: .375rem; padding: .3rem .6rem; background: var(--app-surface); color: var(--bs-body-color); }
.datatable-wrapper .datatable-pagination .datatable-active a { background: var(--app-primary); color: #fff; border-radius: .375rem; }
.datatable-wrapper .datatable-pagination a { color: var(--bs-body-color); }
.datatable-wrapper table thead th a { color: inherit; text-decoration: none; }

/* ---------- Mobiel ---------- */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: 0 0 24px rgba(0, 0, 0, .15); }
    .app-main { margin-left: 0; }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .app-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1035; }
    .app-content { padding: 1rem; }
    .app-breadcrumbs { padding: .6rem 1rem; }
}

/* ---------- Werkruimtekiezer (kernmodule workspaces) ---------- */
.ws-switcher-btn { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--app-border); font-weight: 500; max-width: 260px; }
.ws-switcher-btn .ws-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ws-color, #888); flex: 0 0 auto; }

/* ---------- App (kernmodule pwa): tabbalk onderaan op kleine schermen ---------- */
.app-tabbar { display: none; }
@media (max-width: 991.98px) {
    .app-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--app-surface); border-top: 1px solid var(--app-border);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .45rem 0 .35rem; font-size: .68rem; color: var(--app-text-muted);
        text-decoration: none !important; background: none; border: 0; }
    .app-tab .bi { font-size: 1.25rem; }
    .app-tab.is-active { color: var(--app-primary); }
    body.app-body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
}
/* Als geïnstalleerde app: ruimte voor de statusbalk van iOS */
.is-standalone .app-topbar { padding-top: env(safe-area-inset-top); height: calc(var(--app-topbar-height) + env(safe-area-inset-top)); }

/* ---------- Smalle schermen: de topbalk mag nooit breder worden dan het scherm ---------- */
@media (max-width: 575.98px) {
    .app-topbar { gap: .25rem; padding: 0 .5rem; min-width: 0; }
    .app-topbar-right { gap: 0; min-width: 0; }
    .app-topbar .app-icon-btn { padding: .35rem .4rem; font-size: 1.15rem; }
    .ws-switcher-btn { max-width: 38vw; padding-left: .5rem; padding-right: .5rem; }
    .app-user-btn { padding-left: .25rem; padding-right: .25rem; }
    .app-user-btn::after { display: none; }
    .app-page-title { font-size: 1.6rem; }
}