/* ==========================================================================
   Rainynight — nachtstijl voor de housekeeping.
   --------------------------------------------------------------------------
   Eén laag over het Bootstrap/SB-Admin-thema heen. Bewust géén 78 views
   aanpassen: de Bootstrap-klassen (.card, .table, .btn, .form-control) komen
   overal terug, dus dit pakt alle schermen tegelijk. Laadt ná de bestaande
   stylesheets in components/layout/app.blade.php.
   ========================================================================== */

:root {
    --rn-ink: #08071a;
    --rn-night: #100e2b;
    --rn-surface: #171436;
    --rn-surface-2: #1f1b45;
    --rn-line: rgba(255, 255, 255, .1);
    --rn-line-strong: rgba(255, 255, 255, .2);
    --rn-text: #f5f3ff;
    --rn-dim: #a9a3d6;
    --rn-amber: #ffc24b;
    --rn-amber-deep: #f0a81e;
    --rn-violet: #8b5cf6;
    --rn-mint: #34d399;
    --rn-red: #f87171;
}

/* -- Basis ---------------------------------------------------------------- */
body#page-top,
body {
    background: var(--rn-ink) !important;
    color: var(--rn-text);
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

#wrapper #content-wrapper,
#content-wrapper > #content,
.container-fluid { background: transparent !important; }

h1, h2, h3, h4, h5, h6 {
    color: var(--rn-text);
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-weight: 800;
    letter-spacing: -.01em;
}

a { color: var(--rn-amber); }
a:hover { color: var(--rn-amber-deep); }

hr, .sidebar-divider { border-color: var(--rn-line) !important; }

.text-muted, .text-gray-500, .text-gray-600, .text-gray-800, .text-dark { color: var(--rn-dim) !important; }
.text-white { color: var(--rn-text) !important; }

/* -- Zijbalk -------------------------------------------------------------- */
.sidebar,
.sidebar.bg-gradient-primary,
.navbar-dark.sidebar {
    background: linear-gradient(180deg, var(--rn-night), var(--rn-ink)) !important;
    border-right: 1px solid var(--rn-line);
}

.sidebar .sidebar-brand,
.sidebar .navbar-brand { padding: 1.25rem .5rem; }

/* Kopjes zoals HOTEL / CMS / CATALOG: het thema zet die als <strong>, niet
   als .sidebar-heading. */
.sidebar strong.text-uppercase {
    display: block;
    margin: 1.25rem 0 .35rem 1.25rem !important;
    color: var(--rn-amber) !important;
    font-size: .68rem !important;
    font-weight: 800;
    letter-spacing: .18em;
}

.sidebar .sidebar-heading {
    color: var(--rn-amber) !important;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .18em;
    opacity: .95;
}

/* .atom-nav-link krijgt padding uit een inline <style> in het component,
   vandaar !important en dezelfde selector-diepte. */
.sidebar .atom-nav-link {
    margin: 1px .55rem;
    padding: .5rem .7rem !important;
    border-radius: 10px;
    transition: background .15s ease;
}

.sidebar .atom-nav-link > a {
    align-items: center;
    color: var(--rn-dim) !important;
    font-weight: 700;
    line-height: 1.25;
}

.sidebar .atom-nav-link:hover { background: rgba(255, 255, 255, .06); }
.sidebar .atom-nav-link:hover > a { color: var(--rn-text) !important; }

.sidebar .atom-nav-link.active {
    background: rgba(255, 194, 75, .12);
    box-shadow: inset 3px 0 0 var(--rn-amber);
}

.sidebar .atom-nav-link.active > a { color: var(--rn-amber) !important; }
.sidebar .atom-nav-link > a > i { color: rgba(255, 255, 255, .35) !important; }
.sidebar .atom-nav-link:hover > a > i { color: var(--rn-amber) !important; }

.sidebar .nav-item svg,
.sidebar .nav-item i { opacity: .9; }

/* -- Bovenbalk ------------------------------------------------------------ */
.topbar,
.navbar.topbar,
#content .navbar {
    background: rgba(8, 7, 26, .82) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rn-line);
    box-shadow: none !important;
}

.topbar .nav-item .nav-link,
.topbar .navbar-text,
.topbar span { color: var(--rn-text) !important; }

.topbar img.rounded-circle,
.topbar .img-profile {
    border: 2px solid var(--rn-line-strong);
    background: var(--rn-surface-2);
}

/* -- Kaarten -------------------------------------------------------------- */
.card {
    border: 1px solid var(--rn-line) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(31, 27, 69, .85), rgba(23, 20, 54, .85)) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
    color: var(--rn-text);
}

.card-header {
    border-bottom: 1px solid var(--rn-line) !important;
    background: linear-gradient(180deg, var(--rn-surface-2), var(--rn-surface)) !important;
    color: var(--rn-text) !important;
    font-weight: 800;
}

.card-body { color: var(--rn-text); }
.card .text-primary { color: var(--rn-amber) !important; }

/* De statkaarten op het dashboard: gekleurde rand wordt een accentstreep. */
.border-left-primary { border-left: 4px solid var(--rn-amber) !important; }
.border-left-success { border-left: 4px solid var(--rn-mint) !important; }
.border-left-info    { border-left: 4px solid #38bdf8 !important; }
.border-left-warning { border-left: 4px solid var(--rn-amber-deep) !important; }
.border-left-danger  { border-left: 4px solid var(--rn-red) !important; }

.card .h5, .card .h4, .card .h3, .card .text-gray-800 {
    color: var(--rn-text) !important;
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-weight: 800;
}

/* -- Tabellen ------------------------------------------------------------- */
.table { color: var(--rn-text) !important; border-color: var(--rn-line) !important; }

.table thead th {
    border-bottom: 1px solid var(--rn-line-strong) !important;
    border-top: 0 !important;
    color: var(--rn-dim) !important;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.table td, .table th { border-top-color: var(--rn-line) !important; vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(255, 255, 255, .045) !important; color: var(--rn-text) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .025) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--rn-line) !important; }

/* -- Formulieren ---------------------------------------------------------- */
.form-control,
.custom-select,
textarea.form-control,
input[type="text"], input[type="search"], input[type="number"],
input[type="email"], input[type="password"] {
    border: 1px solid var(--rn-line-strong) !important;
    border-radius: 11px !important;
    background: rgba(0, 0, 0, .28) !important;
    color: var(--rn-text) !important;
}

.form-control::placeholder { color: rgba(169, 163, 214, .6) !important; }

.form-control:focus {
    border-color: var(--rn-amber) !important;
    box-shadow: 0 0 0 3px rgba(255, 194, 75, .18) !important;
    background: rgba(0, 0, 0, .35) !important;
}

label, .form-label { color: var(--rn-dim); font-weight: 700; }
.input-group-text { border-color: var(--rn-line-strong) !important; background: var(--rn-surface-2) !important; color: var(--rn-dim) !important; }

/* -- Knoppen -------------------------------------------------------------- */
.btn {
    border-radius: 11px !important;
    font-weight: 800;
    transition: transform .15s ease, filter .15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary,
.btn-info {
    border: 0 !important;
    background: linear-gradient(180deg, var(--rn-amber), var(--rn-amber-deep)) !important;
    color: #23180a !important;
}

.btn-secondary, .btn-light, .btn-default {
    border: 1px solid var(--rn-line-strong) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: var(--rn-text) !important;
}

.btn-success { border: 0 !important; background: #10b981 !important; color: #04231a !important; }
.btn-danger { border: 0 !important; background: var(--rn-red) !important; color: #2a0b0b !important; }
.btn-warning { border: 0 !important; background: var(--rn-amber-deep) !important; color: #23180a !important; }
.btn-dark { border: 1px solid var(--rn-line-strong) !important; background: var(--rn-surface-2) !important; color: var(--rn-text) !important; }

/* -- Badges, alerts, paginering ------------------------------------------- */
.badge { border-radius: 999px; font-weight: 800; padding: .35em .7em; }
.badge-primary { background: var(--rn-amber) !important; color: #23180a !important; }
.badge-secondary { background: var(--rn-surface-2) !important; color: var(--rn-dim) !important; }

.alert {
    border: 1px solid var(--rn-line) !important;
    border-radius: 14px !important;
    background: var(--rn-surface-2) !important;
    color: var(--rn-text) !important;
}

.alert-success { border-color: rgba(52, 211, 153, .4) !important; }
.alert-danger { border-color: rgba(248, 113, 113, .45) !important; }

.page-link {
    border-color: var(--rn-line) !important;
    background: var(--rn-surface) !important;
    color: var(--rn-dim) !important;
}

.page-item.active .page-link { border-color: var(--rn-amber) !important; background: var(--rn-amber) !important; color: #23180a !important; }

/* -- Dropdowns en modals -------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--rn-line) !important;
    border-radius: 12px !important;
    background: var(--rn-surface-2) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
}

.dropdown-item { color: var(--rn-text) !important; }
.dropdown-item:hover { background: rgba(255, 255, 255, .07) !important; color: var(--rn-amber) !important; }

.modal-content {
    border: 1px solid var(--rn-line) !important;
    border-radius: 16px !important;
    background: var(--rn-surface) !important;
    color: var(--rn-text) !important;
}

.modal-header, .modal-footer { border-color: var(--rn-line) !important; }
.close, .btn-close { color: var(--rn-text) !important; text-shadow: none; opacity: .7; }

/* -- Scrollknop en varia --------------------------------------------------- */
.scroll-to-top {
    border-radius: 12px !important;
    background: var(--rn-amber) !important;
    color: #23180a !important;
}

.bg-white, .bg-light { background: var(--rn-surface) !important; }
.shadow, .shadow-sm { box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important; }


/* -- Dashboardlogo -------------------------------------------------------- */
/* Het logo staat in de blade zonder maat en rekt daardoor tot de volle
   kaartbreedte. Hier begrensd i.p.v. in de view, omdat viewwijzigingen op deze
   server worden overschreven. */
.card-body img[src*="rainynight-logo"],
.card-body img[src*="hk_logo"] {
    display: block;
    max-height: 90px;
    width: auto;
    margin: 0 auto;
}

/* De zijbalk-brand mag ook niet te groot worden. */
.sidebar .sidebar-brand img { max-height: 64px; width: auto; }


/* -- Inklapbare secties ---------------------------------------------------- */
/* Gebruikt door assets/js/hk-rainynight.js. Zonder JS staan de secties open,
   dus de inhoud blijft altijd bereikbaar. */
.rn-acc {
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--rn-line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(31, 27, 69, .85), rgba(23, 20, 54, .85));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.rn-acc__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .9rem 1.1rem;
    border: 0;
    background: linear-gradient(180deg, var(--rn-surface-2), var(--rn-surface));
    color: var(--rn-text);
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease;
}

.rn-acc__head:hover { background: var(--rn-surface-2); }
.rn-acc:not(.is-closed) .rn-acc__head { border-bottom: 1px solid var(--rn-line); }

.rn-acc__meta {
    margin-left: auto;
    color: var(--rn-dim);
    font-family: "Nunito", sans-serif;
    font-size: .8125rem;
    font-weight: 700;
}

.rn-acc__chev {
    flex-shrink: 0;
    color: var(--rn-amber);
    font-size: .8rem;
    transition: transform .18s ease;
}

.rn-acc.is-closed .rn-acc__chev { transform: rotate(-90deg); }

/* Open is de standaard: zonder JS blijft alle inhoud bereikbaar. Het script
   klapt de secties bij het laden dicht. */
.rn-acc__body { padding: 1.1rem; }
.rn-acc.is-closed .rn-acc__body { display: none; }

/* Statistiekstrip bovenaan de Discord-pagina. */
.rn-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--rn-line);
    border-radius: 16px;
    background: var(--rn-night);
}

@media (min-width: 768px) {
    .rn-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.rn-stats__item {
    padding: .9rem 1rem;
    border-top: 1px solid var(--rn-line);
    border-left: 1px solid var(--rn-line);
}

.rn-stats__waarde {
    color: var(--rn-text);
    font-family: "Baloo 2", "Nunito", sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.rn-stats__label {
    margin-top: .15rem;
    color: var(--rn-dim);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.rn-stats__hint { color: var(--rn-dim); font-size: .7rem; }