/* ============================================================
   DashboardApp — gedeelde stijlen
   Geladen via _Layout.cshtml voor alle DashboardApp-pagina's
   ============================================================ */

/* ── Sidebar z-index boven navbar ── */
.navbar { position: relative; z-index: 1000; }
.left-sidebar { z-index: 1100 !important; }

/* ── Header-dropdown overlay ──────────────────────────────────────────────
   Als een header-"submenu" (bedrijfsbadge / userprofiel — de .overlay-trigger
   dropdowns) opent, dimmen we de pagina-content eronder. Header, de openstaande
   dropdown én de sidebar blijven helder. Laag-indeling:
     sidebar  = 1100 (blijft boven de overlay)
     header   = 1101 (tijdens open; boven de overlay)
     overlay  = 1098 (boven de pagina-content, onder header/sidebar)
   De page-wrapper/body-wrapper maken geen eigen stacking-context, dus de
   verhoogde .topbar wint netjes van de overlay. */
.om-header-backdrop{
    position:fixed; inset:0; z-index:1098;
    background:rgba(17,24,39,.38);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, visibility .18s ease;
}
body.om-header-open .om-header-backdrop{ opacity:1; visibility:visible; pointer-events:auto; }
body.om-header-open .topbar{ position:relative; z-index:1101; }


/* ── Pagina Header Balk ── */
.om-page-header {
    background: linear-gradient(135deg, #083eb2 0%, #0087f2 100%);
    border-radius: 18px; padding: 22px 28px; margin-bottom: 28px;
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.om-page-header::after {
    content: ''; position: absolute; bottom: -60px; right: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,.08); pointer-events: none;
}
.om-page-header-titles { flex: 1 1 180px; position: relative; z-index: 1; }
.om-page-header-title   { font-size: 1.1rem; font-weight: 800; color: #fff !important; margin: 0; line-height: 1.2; }
.om-page-header-sub     { color: rgba(255,255,255,.65); font-size: .82rem; margin-top: 3px; margin-bottom: 0; }
.om-page-header-search  { flex: 0 1 300px; position: relative; z-index: 1; }
.om-page-header-search .input-group { border-radius: 10px; overflow: hidden; }
.om-page-header-actions { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; flex-shrink: 0; }
.om-page-header-divider { width: 1px; height: 28px; background: rgba(255,255,255,.3); flex-shrink: 0; }
@media (max-width: 575.98px) {
    .om-page-header { padding: 16px; gap: 10px; }
    .om-page-header-search { flex: 1 1 100%; }
    .om-page-header-actions { flex-wrap: wrap; width: 100%; }
    .om-page-header-actions .btn { flex: 1 1 auto; justify-content: center; }
    .om-page-header-divider { display: none; }
}

/* ── Pagina Header Licht (Apple-chique variant) ── */
.om-page-header-light {
    background: #f5f5f7; border: 1px solid #e8e8ed; border-radius: 16px;
    margin-bottom: 1.5rem;
}
.om-page-header-light .om-page-header-title { color: var(--bs-primary) !important; }
.om-page-header-light .om-page-header-sub   { color: #6e6e73; }
.om-page-header-light .om-search-pill {
    display: flex; align-items: center; background: #fff;
    border: 1px solid #d2d2d7; border-radius: 999px;
    padding: 4px 4px 4px 14px; gap: 4px;
}
.om-page-header-light .om-search-pill input {
    flex: 1; min-width: 0; border: none; outline: none;
    background: transparent; font-size: .85rem; color: #1d1d1f; padding: 2px 0;
}
.om-page-header-light .om-search-pill button {
    background: rgba(0,113,227,.13); border: none; border-radius: 999px;
    padding: 5px 11px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; flex-shrink: 0; line-height: 1;
}
.om-search-divider { width: 1px; height: 24px; background: #d2d2d7; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .om-header-search-group { max-width: 100% !important; }
}
@media (min-width: 576px) {
    /* Vol-breedte: de flex-grow-1 zoekform vult de row, filters links,
       actie-knop (Toevoegen) schuift naar rechts i.p.v. te wrappen. */
    .om-header-search-group { min-width: 500px; max-width: 100%; }
}

/* ── Mobiel (<1200px): bij open sidebar het volledige logo tonen, icoon verbergen ──
   ALLEEN onder de desktop-breakpoint: op desktop deelt de INGEKLAPTE mini-sidebar
   dezelfde #main-wrapper.show-sidebar-state, en daar willen we juist alleen het ICOON
   (zie de mini-sidebar-regels verderop). Zonder deze media-scope forceerde de
   ID-specifieke regel het volledige logo óók op desktop → logo + icoon naast elkaar. */
@media (max-width: 1199.98px) {
    html[data-bs-theme="light"] #main-wrapper.show-sidebar .brand-logo .logo-full.light-logo,
    html:not([data-bs-theme])   #main-wrapper.show-sidebar .brand-logo .logo-full.light-logo {
        display: inline-block !important;
    }
    html[data-bs-theme="dark"] #main-wrapper.show-sidebar .brand-logo .logo-full.dark-logo {
        display: inline-block !important;
    }
    #main-wrapper.show-sidebar .brand-logo .logo-icon { display: none !important; }
}

/* ── Navbar mobiel logo (header, <992px) ──
   custom.css zet ALLE .dark-logo/.light-logo globaal op display:none.
   Onderstaande regels overschrijven dat voor de navbar-context. ── */
html[data-bs-theme="light"] nav .logo-img .light-logo,
html:not([data-bs-theme])   nav .logo-img .dark-logo  { display: inline-block !important; }
html[data-bs-theme="dark"]  nav .logo-img .dark-logo  { display: inline-block !important; }

/* ── Sidebar collapse chevron ── */
.sidebar-chevron { transition: transform .2s; }
.sidebar-chevron.open { transform: rotate(180deg); }
.sidebar-collapse-toggle:hover small { color: #083eb2 !important; }
body[data-sidebartype="mini-sidebar"] .sidebar-divider-item,
body.mini-sidebar .sidebar-divider-item { display: none !important; }

/* ── Sidebar-logo: uitgeklapt = volledig logo, ingeklapt (mini) = alleen het icoon ──
   De .logo-icon had geen verbergregel (stond altijd aan náást het volledige logo).
   Hier: icoon standaard verborgen, en in mini-sidebar juist het volledige logo verbergen. */
.brand-logo .logo-icon { display: none; }
body[data-sidebartype="mini-sidebar"] .brand-logo .logo-full,
body.mini-sidebar                     .brand-logo .logo-full { display: none !important; }
body[data-sidebartype="mini-sidebar"] .brand-logo .logo-icon,
body.mini-sidebar                     .brand-logo .logo-icon { display: inline-block !important; }

/* ── Uitschuiven: het volledige logo verschijnt via een display-swap (instant) terwijl de
   sidebar nog uitschuift. Met een korte reveal-animatie (delay + fade) wacht het logo een
   fractie en faded het zacht in, zodat het synchroon loopt met de sidebar-breedtetransitie. */
@keyframes omLogoReveal { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1200px) {
    body[data-sidebartype="full"] .brand-logo .logo-full {
        animation: omLogoReveal .22s ease .12s both;
    }
    /* Ingeklapt (mini) + hover-uitschuiven: toon weer het volledige logo en verberg het icoon.
       #main-wrapper.show-sidebar verbergt anders het volledige logo via ID-specificiteit — ook
       tijdens de hover-expand. Daarom hier expliciet terugzetten met hogere specificiteit. */
    html[data-bs-theme="light"] body[data-sidebartype="mini-sidebar"] #main-wrapper.show-sidebar .left-sidebar:hover .brand-logo .logo-full.light-logo,
    html:not([data-bs-theme])   body[data-sidebartype="mini-sidebar"] #main-wrapper.show-sidebar .left-sidebar:hover .brand-logo .logo-full.light-logo {
        display: inline-block !important;
        animation: omLogoReveal .22s ease .12s both;
    }
    html[data-bs-theme="dark"] body[data-sidebartype="mini-sidebar"] #main-wrapper.show-sidebar .left-sidebar:hover .brand-logo .logo-full.dark-logo {
        display: inline-block !important;
        animation: omLogoReveal .22s ease .12s both;
    }
    body[data-sidebartype="mini-sidebar"] #main-wrapper.show-sidebar .left-sidebar:hover .brand-logo .logo-icon {
        display: none !important;
    }
}

/* ── Modal z-index boven sidebar ── */
.modal-backdrop { z-index: 1100 !important; }
.modal { z-index: 1101 !important; }
.tooltip { z-index: 9999 !important; }

/* ── Nog-niet-gemigreerde nav-items ── */
.nav-soon,
.nav-soon > a,
.nav-soon .sidebar-link {
    opacity: 0.38 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ── om-data-table: compact Apple-chique tabel ── */
.om-data-table-wrap {
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.om-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    color: #1d1d1f;
}
.om-data-table thead tr {
    background: #f5f5f7;
    border-bottom: 1px solid #e5e5ea;
}
.om-data-table thead th {
    padding: 7px 10px;
    font-weight: 600;
    font-size: .73rem;
    color: #6e6e73;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.om-data-table tbody tr {
    border-bottom: 1px solid #f2f2f7;
    transition: background .1s;
}
.om-data-table tbody tr:last-child { border-bottom: none; }
.om-data-table tbody tr[data-clickable] { cursor: pointer; }
.om-data-table tbody tr[data-clickable]:hover { background: #dbeafe; }
.om-data-table td {
    padding: 5px 10px;
    vertical-align: middle;
}
.om-data-table .om-tbl-actions {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    white-space: nowrap;
}
.om-data-table .om-tbl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #6e6e73;
    font-size: .9rem;
    transition: background .12s, color .12s;
    padding: 0;
}
.om-data-table .om-tbl-btn:hover         { background: #e5e5ea; color: #1d1d1f; }
.om-data-table .om-tbl-btn.om-tbl-test:hover   { background: #dcfce7; color: #15803d; }
.om-data-table .om-tbl-btn.om-tbl-delete:hover { background: #fee2e2; color: #b91c1c; }

/* ── om-form-control: Apple-chique inputs & textareas ── */
.om-form-control {
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    background: #fff;
    font-size: 14px !important;
    color: #1d1d1f;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: border-color .15s, box-shadow .15s;
    padding: 6px 10px;
    width: 100%;
}
.om-form-control:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}
.om-form-control::placeholder { color: #aeaeb2; }
textarea.om-form-control { resize: vertical; }

/* ── Scrollbare modals: modal-body altijd scrollbaar ── */
.modal-dialog-scrollable {
    height: calc(100vh - 3.5rem);
}
.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* ── Editor modals: modal-body max-height zodat scroll werkt ── */
#modalEmailToevoegen .modal-body,
#modalEmailBewerken .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto !important;
}

/* ── Groene (success) knoppen: ALTIJD witte tekst ──
   In deze SPIKE-build hielden sommige <a class="btn btn-success"> de blauwe linkkleur,
   waardoor de tekst blauw bleef op een groene knop. Forceer wit (Bootstrap-standaard). */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success .ti,
.btn-success .bi,
.btn-success i {
    color: #fff !important;
}

/* ============================================================
   om-card-modal — Apple-chique info/uitleg-modal (CENTRAAL, herbruikbaar)
   Ontwerp: Claude Design "Externe scan — Beperkte inzage" (partnerviews).
   Alle kleuren staan als CSS-variabelen zodat we deze opmaak later op
   andere pagina's kunnen hergebruiken (pas de var aan → overal door).
   Bouwstenen: .om-eyebrow · .om-modal-close · .om-infocard · .om-check-list · .om-btn-pill
   ============================================================ */
:root {
    --om-brand-blue:      #083eb2;
    --om-ink:             #232323;
    --om-muted:           #696c77;
    --om-hairline:        #eef0f4;
    /* eyebrow "Externe scan" (oranje) */
    --om-eyebrow-ext-fg:  #e27843;
    --om-eyebrow-ext-bg:  #fde6dc;
    /* eyebrow "OMAI-scan" (merk-blauw) */
    --om-eyebrow-omai-fg: #083eb2;
    --om-eyebrow-omai-bg: #e7eefb;
    /* success-infocard "Wat kunt u zien?" (groen) */
    --om-success-bg:      #eef8ee;
    --om-success-border:  #d6eed6;
    --om-success-accent:  #2ea043;
    --om-success-title:   #1e7a3a;
    --om-success-item:    #2f3a45;
    /* ronde sluit-knop */
    --om-close-bg:        #f4f6fb;
    --om-close-fg:        #8a93a3;
    --om-close-bg-hover:  #e9edf6;
    --om-close-fg-hover:  #5b6472;
}

@keyframes omCardModalIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

/* Kaart-container — op .modal-content (in een Bootstrap-modal) of standalone */
.om-card-modal {
    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(8,62,178,.20), 0 4px 14px rgba(8,62,178,.08);
    padding: 34px 36px 30px;
    background: #fff;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    animation: omCardModalIn .35s cubic-bezier(.16,1,.3,1) both;
}
.om-card-modal-head     { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
/* Logo: begrens op hoogte + max-breedte en object-fit:contain zodat het NOOIT uitrekt
   (in deze omgeving resolvet img width:auto naar de containerbreedte → daarom max-width + contain). */
.om-card-modal-logo     { height:34px !important; width:auto; max-width:240px; object-fit:contain; object-position:left center; display:block; margin-bottom:20px; }
.om-card-modal-title    { margin:0 0 8px; font-size:23px; font-weight:700; color:var(--om-brand-blue); letter-spacing:-.01em; }
.om-card-modal-intro    { margin:0 0 22px; font-size:14.5px; line-height:1.6; color:var(--om-muted); }
.om-card-modal-section  { margin-top:22px; }
.om-card-modal-subtitle { margin:0 0 8px; font-size:16px; font-weight:700; color:var(--om-ink); }
.om-card-modal-text     { margin:0; font-size:13.5px; line-height:1.65; color:var(--om-muted); }
.om-card-modal-foot     { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:26px; padding-top:20px; border-top:1px solid var(--om-hairline); }

/* Eyebrow-pill */
.om-eyebrow       { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:6px 12px; border-radius:100px; }
.om-eyebrow i     { font-size:12px; }
.om-eyebrow--ext  { color:var(--om-eyebrow-ext-fg); background:var(--om-eyebrow-ext-bg); }
.om-eyebrow--omai { color:var(--om-eyebrow-omai-fg); background:var(--om-eyebrow-omai-bg); }

/* Scan-type-badge in de modal-kop — zelfde stijl als de knop in het Laatste-scans-overzicht
   (gevulde pill + slotje). Partner = badge-oranje, OMAI = pink-orange gradient. */
.om-scanbadge          { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:6px 15px; border-radius:100px; color:#fff; white-space:nowrap; }
.om-scanbadge i        { font-size:12px; }
.om-scanbadge--partner { background:#ef7e3e; }
.om-scanbadge--omai    { background:linear-gradient(90deg,#e25193,#fa9d5f); }
/* Outlined variant — zelfde look als de .lsopen.partner-badge in het Laatste-scans-overzicht */
.om-scanbadge--partner-out { background:transparent; color:#d9702f; border:1.4px solid #f2c6a0; }

/* Nieuwe zachte gradient-groene knop — vervangt de felle Bootstrap btn-success op de
   account-CTA's (dashboard, Proposals, Users). Zelfde look als .pbtn.green in om-dashboard.css. */
.om-btn-green,
.om-btn-green:focus,
.om-btn-green:focus-visible { background:linear-gradient(90deg,#12a150,#39b96b); border:none; color:#fff; border-radius:26px; }
.om-btn-green:hover,
.om-btn-green:active        { background:linear-gradient(90deg,#0e8f46,#2fa95f); color:#fff; }

/* Meekijk-balk (act-as) — 1:1 Claude Design ".imp" (Klantdashboard.dc.html). */
.om-imp            { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #f6c4b8; border-left:4px solid #ef7a5a; border-radius:10px; padding:9px 15px; margin-bottom:16px; font-size:13px; color:#7a4a3a; }
.om-imp-eye        { font-size:16px; color:#e8567e; }
.om-imp-who        { background:#fbdfe8; color:#c23768; font-weight:700; padding:2px 9px; border-radius:100px; }
.om-imp-who-init   { display:none; }
.om-imp-org        { display:inline-flex; align-items:center; gap:5px; }
.om-imp-orgname    { font-family:'Comfortaa',sans-serif; font-weight:700; letter-spacing:.1em; color:#334155; font-size:13px; }
.om-imp-stopform   { margin-left:auto; margin-bottom:0; }
.om-imp-stop       { display:inline-flex; align-items:center; gap:7px; background:linear-gradient(90deg,#f69963,#e25094); color:#fff; font-weight:700; font-size:12px; padding:6px 13px; border-radius:100px; cursor:pointer; border:none; }
.om-imp-stop:hover { filter:brightness(1.04); }
@media (max-width:640px){
  .om-imp{ gap:8px; padding:8px 12px; }
  .om-imp-lead, .om-imp-who-full, .om-imp-stop-txt{ display:none; }
  .om-imp-who-init{ display:inline; }
  .om-imp-stop{ padding:7px 9px; }
}

/* Ronde sluit-knop */
.om-modal-close        { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:none; background:var(--om-close-bg); color:var(--om-close-fg); border-radius:50%; cursor:pointer; font-size:16px; transition:all .2s ease; padding:0; }
.om-modal-close:hover  { background:var(--om-close-bg-hover); color:var(--om-close-fg-hover); }

/* Info-kaart (groen success) */
.om-infocard                              { border-radius:16px; padding:20px 22px; }
.om-infocard--success                     { background:var(--om-success-bg); border:1px solid var(--om-success-border); }
.om-infocard-title                        { display:flex; align-items:center; gap:8px; margin-bottom:14px; font-size:14.5px; font-weight:700; }
.om-infocard--success .om-infocard-title  { color:var(--om-success-title); }
.om-infocard--success .om-infocard-title i{ color:var(--om-success-accent); font-size:15px; }

/* Check-lijst */
.om-check-list       { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.om-check-list li    { display:flex; align-items:flex-start; gap:11px; font-size:14px; line-height:1.5; color:var(--om-success-item); }
.om-check-list li i  { color:var(--om-success-accent); font-size:16px; line-height:1.5; flex:none; }

/* Pill-knoppen */
.om-btn-pill                { display:inline-flex; align-items:center; gap:9px; border:1px solid transparent; font-size:14.5px; font-weight:600; padding:11px 24px; border-radius:100px; cursor:pointer; transition:all .2s ease; font-family:inherit; }
.om-btn-pill--primary       { border-color:var(--om-brand-blue); background:var(--om-brand-blue); color:#fff; }
.om-btn-pill--primary:hover { background:transparent; color:var(--om-brand-blue); }
.om-btn-pill--ghost         { background:transparent; color:var(--om-muted); padding:11px 18px; }
.om-btn-pill--ghost:hover   { background:var(--om-close-bg); color:var(--om-ink); }

/* Kaart-modal in Bootstrap: eigen padding i.p.v. modal-header/body/footer */
.modal-dialog.om-card-modal-dialog { max-width: 500px; }