/* ==========================================================================
   1. CORE APPLICATION VARIABLES & GLOBAL VARIABLES
   ========================================================================== */
:root {
    /* De RGB cijfers van jouw oranje basiskleur */
    --main-colorstyle-rgb: 229, 129, 37;
    /* Behoud de normale hex-codes voor de standaard componenten */
    --main-colorstyle: #e58125;
    --main-colorstyle-hover: #ca6f1e;
}

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 de hoofdkleur */
    transition: margin-left .25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    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;
}

/* ==========================================================================
   2. SIDEBAR MENU NAVIGATION & HOVER EFFECTS
   ========================================================================== */
.sidebar-link {
    display: flex !important;
    align-items: center !important;
    color: #cdcfd1;
    text-decoration: none;
    /* Compacte tussenruimte voor menu-opties */
    padding: 0.45rem 1.25rem !important;
    border-left: 4px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease !important;
}

    /* Subtiele hover met dynamische accentstreep links */
    .sidebar-link:hover {
        background-color: #383b3e !important;
        color: #ffffff !important;
        border-left-color: var(--main-colorstyle);
    }

    /* Actieve / geselecteerde menu-optie */
    .sidebar-link.active {
        background-color: var(--main-colorstyle) !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: var(--main-colorstyle) !important;
    opacity: 0.85;
    padding-left: 3rem;
}

/* ==========================================================================
   3. INTERACTIVE SIDEBAR ICONS & TRANSITIONS
   ========================================================================== */

/* Basisstijl voor alle menu-iconen (altijd zichtbaar, maar gedimd) */
.sidebar-link .sidebar-icon,
.sidebar-link .bi-arrow-return-right {
    font-size: 1.1rem;
    opacity: 0.4 !important; /* Standaard gedimd voor rustige uitstraling */
    color: #cdcfd1 !important;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

/* Icoon licht op en krijgt je oranje hoofdkleur bij hover */
.sidebar-link:hover .sidebar-icon {
    opacity: 1 !important;
    color: var(--main-colorstyle) !important;
    transform: scale(1.08); /* Subtiel zoom-effect voor moderne touch */
}

/* Het submenu-pijltje licht op in het wit bij hover */
.sidebar-link:hover .bi-arrow-return-right {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Icoon op het actieve oranje vlak wordt volledig wit en helder */
.sidebar-link.active .sidebar-icon,
.sidebar-link.active .bi-arrow-return-right {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* Smooth transitie voor de uitklapbare chevron-pijl rechts */
.toggle-arrow {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mobile Hamburger Toggle Button */
#menu-toggle {
    border-color: var(--main-colorstyle);
    color: var(--main-colorstyle);
    transition: all 0.2s ease;
}

    #menu-toggle:hover {
        background-color: var(--main-colorstyle);
        color: #ffffff;
    }
/* ==========================================================================
   4. RESPONSIVE SIDEBAR (COLLAPSIBLE MEDIA QUERIES)
   ========================================================================== */

/* De desktop-schermen aansturen (vanaf 769px breedte) */
@media (min-width: 769px) {
    #wrapper.toggled #sidebar-wrapper {
        margin-left: -260px !important;
    }
}

/* Mobiele weergave (tot 768px): Verberg sidebar standaard en toon bij toggle */
@media (max-width: 768px) {
    #sidebar-wrapper {
        margin-left: -260px !important;
    }

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

/* ==========================================================================
   5. GLOBAL BOOTSTRAP COMPONENTS (CARDS, BUTTONS, MODALS)
   ========================================================================== */

/* Hierdoor blijft de 'Admin' balk aan de bovenkant altijd netjes de oranje basiskleur houden */
.card-header-orange {
    background-color: var(--main-colorstyle) !important;
    color: #ffffff !important;
}

/* Hierdoor krijgen ALLEEN de headers van de popup vensters de antracietkleur */
/* Hierdoor krijgen ALLEEN de headers van de popup vensters de basiskleur met 70% transparantie */
.modal-custom-box .card-header-orange {
    background-color: rgba(var(--main-colorstyle-rgb), 0.75) !important;
    color: #ffffff !important;
    /* Optioneel: voegt een lichte blur toe aan wat erachter ligt voor een modern 'frosted glass' effect */
    backdrop-filter: blur(4px);
}
.modal-custom-box .card-header-orange,
[id*="Drag"],
[id*="drag"] {
    cursor: default !important;
}

/* De rest van de knoppen-styling hieronder ongewijzigd laten staan... */
.btn-orange {
    background-color: var(--main-colorstyle) !important;
    color: #ffffff !important;
    border-color: var(--main-colorstyle) !important;
    transition: all 0.2s ease;
}

    .btn-orange:hover {
        background-color: var(--main-colorstyle-hover) !important;
        color: #ffffff !important;
        border-color: var(--main-colorstyle-hover) !important;
    }

.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);
}

/* Styling voor de Passkey knop met je eigen PNG-icoon */
.passkey-btn-styled {
    background-image: url('../Images/passkey-icon.png') !important;
    background-repeat: no-repeat !important;
    background-position: calc(50% - 80px) center !important;
    background-size: 20px 20px !important;
    padding-left: 50px !important;
}

    .passkey-btn-styled:hover {
        background-image: url('../Images/passkey-icon.png') !important;
        background-color: #212529 !important;
        color: #fff !important;
    }

/* ==========================================================================
   6. LOGIN PAGE SPECIFIC STYLES
   ========================================================================== */
.login-body-bg {
    background-color: #f4f6f9 !important;
}

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

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

.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: var(--main-colorstyle);
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(229, 129, 37, 0.25);
    }

/* ==========================================================================
   7. UNIVERSELE ASP.NET CHECKBOX & RADIO BUTTON FIX (BOOTSTRAP 5)
   ========================================================================== */
span.form-check,
.form-check span,
span[id*="chk"],
span[id*="RememberMe"],
.form-check,
.form-check label {
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    white-space: nowrap !important; /* Dwingt tekst ALTIJD op 1 regel */
    margin-bottom: 0 !important;
}

    span.form-check,
    .form-check span,
    span[id*="chk"],
    span[id*="RememberMe"] {
        padding-left: 0 !important;
    }

input[type="checkbox"],
input[type="radio"],
.form-check-input {
    float: none !important;
    margin: 0 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    flex-shrink: 0 !important; /* Vierkantje mag NOOIT in elkaar gedrukt worden */
    width: 1em;
    height: 1em;
}

    input[type="checkbox"] + label,
    input[type="radio"] + label,
    .form-check label,
    td label {
        display: inline-block !important;
        margin: 0 0 0 10px !important; /* Forceert exact 10px ademruimte links van de tekst */
        padding-left: 0 !important;
        vertical-align: middle !important;
        cursor: pointer !important;
        font-weight: 500 !important;
        color: #212529 !important;
    }
/* ==========================================================================
   8. SERVICE LOGGING LAYOUT & SCROLLBAR FIX
   ========================================================================== */
#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;
    margin: 0 !important;
}

#ctl00_cpMain_PanelServiceLogging,
[id*="PanelServiceLogging"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    overflow-x: scroll !important;
    overflow-y: auto !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    contain: size layout !important;
    position: relative !important;
}

    [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;
        padding: 5px 15px 5px 10px !important;
    }

    [id*="PanelServiceLogging"] span {
        display: inline !important;
        white-space: pre !important;
        max-width: none !important;
    }

/* ==========================================================================
   9. AJAX CONTROL TOOLKIT: CALENDAR EXTENDER MODERN THEME
   ========================================================================== */
.bootstrap-calendar table,
.bootstrap-calendar tr,
.bootstrap-calendar td {
    display: table-cell !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

.bootstrap-calendar tr {
    display: table-row !important;
}

.bootstrap-calendar table {
    display: table !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    width: 100% !important;
}

.bootstrap-calendar .ajax__calendar_container {
    background-color: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    padding: 12px !important;
    width: 260px !important;
    height: auto !important;
    z-index: 1060 !important;
}

.bootstrap-calendar .ajax__calendar_header {
    background-color: #ffffff !important;
    margin-bottom: 10px !important;
    height: 34px !important;
    position: relative !important;
}

.bootstrap-calendar .ajax__calendar_title {
    color: #212529 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 34px !important;
    width: 100% !important;
}

.bootstrap-calendar .ajax__calendar_prev,
.bootstrap-calendar .ajax__calendar_next {
    width: 28px !important;
    height: 28px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.25rem !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bootstrap-calendar .ajax__calendar_prev {
    left: 0 !important;
}

.bootstrap-calendar .ajax__calendar_next {
    right: 0 !important;
}

    .bootstrap-calendar .ajax__calendar_prev:hover,
    .bootstrap-calendar .ajax__calendar_next:hover {
        background-color: #e9ecef !important;
    }

.bootstrap-calendar .ajax__calendar_body {
    background-color: #ffffff !important;
    border: none !important;
    width: 100% !important;
    height: 180px !important;
    position: relative !important;
}

.bootstrap-calendar .ajax__calendar_dayname {
    color: #6c757d !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-align: center !important;
    width: 32px !important;
    height: 24px !important;
    vertical-align: middle !important;
}

.bootstrap-calendar .ajax__calendar_day,
.bootstrap-calendar .ajax__calendar_month,
.bootstrap-calendar .ajax__calendar_year {
    color: #212529 !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    border-radius: 0.25rem !important;
    width: 32px !important;
    height: 28px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

.bootstrap-calendar .ajax__calendar_hover .ajax__calendar_day,
.bootstrap-calendar .ajax__calendar_hover .ajax__calendar_month,
.bootstrap-calendar .ajax__calendar_hover .ajax__calendar_year {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

.bootstrap-calendar .ajax__calendar_today .ajax__calendar_day {
    color: var(--main-colorstyle) !important;
    font-weight: 700 !important;
    border: 1px solid var(--main-colorstyle) !important;
}

.bootstrap-calendar .ajax__calendar_active .ajax__calendar_day,
.bootstrap-calendar .ajax__calendar_active .ajax__calendar_month,
.bootstrap-calendar .ajax__calendar_active .ajax__calendar_year {
    background-color: var(--main-colorstyle) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.bootstrap-calendar .ajax__calendar_other .ajax__calendar_day {
    color: #adb5bd !important;
}

.bootstrap-calendar .ajax__calendar_footer {
    border-top: 1px solid #dee2e6 !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
    text-align: center !important;
    font-size: 0.8.rem !important;
    height: 24px !important;
    line-height: 24px !important;
}
/* ==========================================================================
   10. AJAX CONTROL TOOLKIT: VALIDATORCALLOUTEXTENDER FIXES
   ========================================================================== */
.ajax__validatorcallout_popup_table_container {
    background-color: #f8d7da !important;
    border: 1px solid #f5c2c7 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    padding: 0 !important;
    z-index: 99999 !important;
}

    .ajax__validatorcallout_popup_table_container table,
    .ajax__validatorcallout_popup_table_container tr,
    .ajax__validatorcallout_popup_table_container td {
        border: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
        border-collapse: collapse !important;
    }

.ajax__validatorcallout_error_message_cell {
    color: #842029 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.ajax__validatorcallout_icon_cell,
.ajax__validatorcallout_arrow_cell {
    display: none !important;
}

.ajax__validatorcallout_close_button_cell {
    padding-right: 10px !important;
    vertical-align: middle !important;
}

    .ajax__validatorcallout_close_button_cell input {
        background: transparent !important;
        border: none !important;
        color: #842029 !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        cursor: pointer !important;
        opacity: 0.5 !important;
        transition: opacity 0.15s ease !important;
        line-height: 1 !important;
    }

        .ajax__validatorcallout_close_button_cell input:hover {
            opacity: 1 !important;
        }

.ajax__validatorcallout_popup_table_container::before,
.ajax__validatorcallout_popup_table_container::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0;
    height: 0;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
}

.ajax__validatorcallout_popup_table_container::before {
    left: -6px !important;
    border-right: 6px solid #f5c2c7 !important;
}

.ajax__validatorcallout_popup_table_container::after {
    left: -5px !important;
    border-right: 6px solid #f8d7da !important;
}

/* ==========================================================================
   11. AUTOMATISCHE HOOGTE SCALING & SCROLLBAR VOOR ADMIN CONTENT
   ========================================================================== */
#Splitter1,
#myContent {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: calc(100vh - 75px) !important;
    min-height: calc(100vh - 75px) !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
}

[id*="panelMainAdmin"] {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #ffffff !important;
}

.MultiPage,
[id*="MultiPageMain"],
.ComponentArt_TabStrip + div,
[id*="ChangeAdminPassword"],
[id*="AdminPassKeys"],
[id*="AccountManagement"],
[id*="TicketManagement"],
[id*="ProcesMonitorManagement"],
[id*="LoggingManagement"] {
    height: auto !important;
    min-height: auto !important;
    flex-grow: 1 !important;
}

[id*="panel19"],
[id*="panel24"],
[id*="panel6"],
[id*="panel17"],
[id*="panel18"],
[id*="paneltabAccountProperties"],
[id*="paneltabManager"],
[id*="panel1tabTracking"],
[id*="paneltabTickets"],
[id*="paneltabMonitor"],
[id*="paneltabProcesMonitor"],
[id*="panel16"],
[id*="paneltabFileManager"],
[id*="paneltabLinks"],
[id*="paneltabWebPosts"],
[id*="paneltabPA"] {
    height: auto !important;
    min-height: auto !important;
}