/* ==========================================================================
   PhleXss Modern Orange Theme Layout (v5.3.3 / #e58125)
   ========================================================================== */

body {
    overflow-x: hidden;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
}

#wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

#sidebar-wrapper {
    width: 260px;
    min-height: 100vh;
    background-color: #2c2e30; /* Luxe antraciet voor prachtig contrast met oranje */
    transition: margin .25s ease-out;
    flex-shrink: 0;
}

#page-content-wrapper {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#mainviewport {
    flex-grow: 1;
    padding: 0.75rem;
    overflow-y: auto;
}

/* ==========================================================================
   Sidebar Menu Navigation
   ========================================================================== */

.sidebar-link {
    display: flex;
    align-items: center;
    color: #cdcfd1;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

    /* Subtiele hover met oranje accentstreep links */
    .sidebar-link:hover {
        background-color: #383b3e;
        color: #ffffff;
        border-left-color: #e58125;
    }

    /* Actieve / geselecteerde menu-optie */
    .sidebar-link.active {
        background-color: #e58125 !important;
        color: #ffffff !important;
        border-left: 4px solid #ffffff !important; /* Strakke witte scheidingslijn */
        font-weight: 600;
    }

        /* Zorg dat het menu-pijltje wit kleurt als het item actief is */
        .sidebar-link.active span {
            border-left-color: #ffffff !important;
        }

/* Actieve sub-items (binnen het gecollapste menu) */
.bg-dark .sidebar-link.active {
    background-color: rgba(229, 129, 37, 0.85) !important;
    padding-left: 3rem;
}

/* Mobile Hamburger Toggle Button */
#menu-toggle {
    border-color: #e58125;
    color: #e58125;
}

    #menu-toggle:hover {
        background-color: #e58125;
        color: #ffffff;
    }

/* Responsieve weergave voor mobiele apparaten (verberg menu standaard) */
@media (max-width: 768px) {
    #sidebar-wrapper {
        margin-left: -260px;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: 0;
    }
}

/* ==========================================================================
   Global Content Components (Cards, Buttons, Modals)
   ========================================================================== */

/* Oranje headers voor Bootstrap Cards */
.card-header-orange {
    background-color: #e58125 !important;
    color: #ffffff !important;
}

/* Algemene Oranje Knoppen voor je contentpagina's */
.btn-orange {
    background-color: #e58125 !important;
    color: #ffffff !important;
    border-color: #e58125 !important;
    transition: all 0.2s ease;
}

    .btn-orange:hover {
        background-color: #c96f1d !important;
        color: #ffffff !important;
    }

/* AjaxControlToolkit Modal Popups moderniseren */
.modal-custom-box {
    background-color: #ffffff;
    border: 2px solid #6c757d;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Login Page Specific Styles (Nieuw & gecentraliseerd)
   ========================================================================== */

.login-body-bg {
    background-color: #f4f6f9 !important;
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border: none;
    border-radius: 8px;
}

/* Override voor textboxen binnen het Login control template */
.form-control-custom {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .form-control-custom:focus {
        border-color: #e58125;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(229, 129, 37, 0.25);
    }

/* ==========================================================================
   Universele ASP.NET CheckBox & Radio Button Fix (Bootstrap 5)
   Geldt voor ALLE checkboxes in de hele applicatie
   ========================================================================== */

/* 1. Pak de buitenste span of wrapper die ASP.NET altijd genereert */
span.form-check,
.form-check span,
span[id*="chk"],
span[id*="RememberMe"],
label[for*="chk"] {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important; /* Dwingt tekst ALTIJD op 1 regel */
    padding-left: 0 !important; /* Overschrijf Bootstrap default */
    margin-bottom: 0 !important;
}

/* 2. Style de daadwerkelijke checkbox (het vierkantje zelf) */
input[type="checkbox"],
input[type="radio"],
.form-check-input {
    float: none !important;
    margin: 0 10px 0 0 !important; /* Altijd exact 10px ruimte aan de rechterkant */
    vertical-align: middle !important;
    cursor: pointer !important;
    flex-shrink: 0 !important; /* Vierkantje mag NOOIT in elkaar gedrukt worden */
    width: 1em;
    height: 1em;
}

    /* 3. Style de tekst (het label) dat erachter staat */
    input[type="checkbox"] + label,
    input[type="radio"] + label,
    .form-check label {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
        cursor: pointer !important;
        font-weight: 500 !important;
        color: #212529 !important; /* Nette donkere tekstkleur */
        white-space: nowrap !important; /* Dubbele veiligheid tegen afbreken */
    }

/* Styling voor de Passkey knop met je eigen PNG-icoon */
.passkey-btn-styled {
    background-image: url('../Images/passkey-icon.png') !important; /* Pas dit pad eventueel aan naar je exacte Images map */
    background-repeat: no-repeat !important;
    background-position: calc(50% - 80px) center !important; /* Plaatst het icoon netjes links van de tekst */
    background-size: 20px 20px !important; /* Schaalt je PNG naar een strak icoon-formaat */
    padding-left: 50px !important; /* Maakt ruimte aan de linkerkant zodat tekst niet over het icoon valt */
}

    /* Zorg dat bij een hover het icoon ook netjes blijft staan */
    .passkey-btn-styled:hover {
        background-image: url('../Images/passkey-icon.png') !important;
        background-color: #212529 !important;
        color: #fff !important;
    }

/* ==========================================================================
   Gecorrigeerde ASP.NET CheckBox Vinkvakje & Tekst Uitlijning Fix
   ========================================================================== */
/* Alleen toepassen op elementen met de expliciete .form-check klasse om andere pagina's te beschermen */
.form-check,
.form-check label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important; /* Comfortabele 8px tussenruimte voor vinkvakje en tekst */
    cursor: pointer !important;
}

    /* Zorg dat de browser de tekst binnen form-checks niet geforceerd afbreekt */
    .form-check label {
        white-space: nowrap !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important; /* Verwijdert de oude, dubbele WebForms padding */
    }

    /* Herstel de positie van het vinkvakje zelf binnen de flexbox container */
    .form-check input[type="checkbox"] {
        margin-top: 0 !important;
        margin-right: 0 !important;
    }

/* ==========================================================================
   Service Logging Layout & Scrollbar Fix (Gepast voor PanelServiceLogging)
   ========================================================================== */

/* 1. VERWIJDER DE WITTE RANDEN: Zet de opvulling van de tabelcel en card-body op 0 */
#ctl00_cpMain_panelLogging,
.card:has([id*="PanelServiceLogging"]),
td:has([id*="PanelServiceLogging"]),
.card:has([id*="PanelServiceLogging"]) .card-body {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    overflow: hidden !important;
    padding: 0 !important; /* Snijdt de witte randen links, rechts en onder volledig weg */
    margin: 0 !important;
}

/* 2. Fix voor het PANEEL zelf: Dit MOET exact even breed zijn als het datagrid en sluit nu naadloos aan */
#ctl00_cpMain_PanelServiceLogging,
[id*="PanelServiceLogging"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    /* FIX: Dwing het paneel om ALTIJD de volledige hoogte van de kaart te vullen */
    height: 500px !important; /* Zorgt dat het paneel exact 500px hoog blijft */
    min-height: 500px !important; /* Voorkomt dat het paneel inkrimpt bij korte logbestanden */

    overflow-x: scroll !important; /* Horizontale scrollbalk altijd actief */
    overflow-y: auto !important; /* Verticale scrollbalk voor lange logs */
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    contain: size layout !important;
    position: relative !important;
}

    /* 3. Fix voor de TEKST: Alleen de platte tekst loopt door naar rechts binnen het paneel */
    [id*="lblDaemonLog"],
    [id*="PanelServiceLogging"] pre {
        display: block !important;
        width: max-content !important;
        white-space: pre !important;
        word-break: normal !important;
        max-width: none !important;
        font-family: var(--bs-font-monospace), monospace !important;
        font-size: 0.85rem !important;
        color: #212529 !important;
        margin: 0 !important;
        /* Geeft de tekstregels zelf een kleine opvulling zodat ze niet tegen de harde buitenlijn plakken */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-right: 15px !important;
        padding-left: 10px !important;
    }

    /* 4. Reset eventuele verborgen spans die ASP.NET genereert */
    [id*="PanelServiceLogging"] span {
        display: inline !important;
        white-space: pre !important;
        max-width: none !important;
    }