/*!*================================================================================*/
/*	Item Name: Materialize - Material Design Admin Template*/
/*	Version: 5.0*/
/*	Author: PIXINVENT*/
/*	Author URL: https://themeforest.net/user/pixinvent/portfolio*/
/*================================================================================*/

/*NOTE:*/
/*------*/
/*PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.*/
/*WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  *!*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600);

/* ── Accessibility: Skip-to-content link ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--primary-color, #2E7D32);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: normal;
    line-height: 1.0;
    color: #6b6f82;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.0;
    color: #333;
}

p {
    font-family: 'Montserrat', sans-serif;
}


:root {
    /* Elfrique Brand Green */
    --primary-color: #2E7D32;

    /* Lighter Green */
    --secondary-color: #4CAF50;

    /* Accent Orange */
    --color-three: #E8912D;

    /* Warm Gold */
    --color-four: #FFCB39;

    /* Extended Prototype Tokens */
    --primary-hover: #1B5E20;
    --accent-hover: #D17A1E;
    --neutral-900: #111827;
    --neutral-700: #374151;
    --neutral-600: #4B5563;
    --neutral-400: #6B7280; /* Bumped from #9CA3AF for WCAG AA contrast (5.03:1 on white) */
    --neutral-300: #D1D5DB;
    --neutral-200: #E5E7EB;
    --neutral-100: #F3F4F6;
    --neutral-50: #F9FAFB;
    --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-3: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-4: 0 8px 32px rgba(0,0,0,0.12);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --white: #FFFFFF;
    --success: #2E7D32;
    --error: #EF4444;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.btn-inverted
{
    background-color: white !important;
    color: #000000 !important;
}

.ticket-details-button{
    font-size: 13px !important;
}

.cs-label-header{
    color: #9e9e9e;
    /*margin-left: -3px;*/
    font-size: .8rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form-check-input{
    margin-top: -1px !important;    
}

.modal .easy-autocomplete {
    width: 100% !important;
}

.login-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--primary-color) !important; /* theme color*/
}

.easy-autocomplete-container {
    z-index: 9999 !important;
}

.modal-dialog-centered {
    display: grid !important;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.main-header .col {
    margin-left: -15px;
}

.readonly-select {
    pointer-events: none;
    background-color: #eee;
}

#messageNotification .alert {
    margin-bottom: 5px;
    margin-right: 5px;
    border: 1px #e5e5e5 solid;
}

.divider {
    overflow: hidden !important;
    height: 1px !important;
    background-color: #e0e0e0 !important;
}

.col {
    flex: 1 0 0%;
    width: auto;
}

/*.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {*/
/*    padding-top: 64px !important;*/
/*}*/

.modal-header {
    font-weight: 600;
    font-size: 20px;
    color: #111827;
    border-bottom: 2px solid #2e7d32;
    padding-bottom: 10px !important;
}
.modal-header .modal-title {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-header .modal-title i {
    color: #2e7d32;
}

.card-header{
    font-size: 17px;
    color: #ffffff !important;
    border-bottom: 1px #e5e5e5 solid;
    padding-bottom: 20px !important;
    background-color: var(--primary-color);
    text-transform: uppercase !important;
}

.modal-footer {
    border-top: 1px #e5e5e5 solid;
    padding-top: 10px !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: #b3b6ff;
    background: transparent;
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    color: var(--secondary-color);
    background-color: #dadcff;
    border-color: #b3b6ff;
}

.btn-primary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
    background-color: var(--primary-color);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.card-header {
    padding-bottom: 0px;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-success {
    background-color: #2E7D32 !important;
}
/* WK-351: bg-warning badge — yellow bg needs dark text for WCAG AA contrast */
.bg-warning,
.badge.bg-warning {
    --bs-badge-color: #212529;
    color: #212529 !important;
}

.name-display {
    margin-left: -20px;
    font-weight: 500;
    font-size: 17px;
    color: var(--primary-color);
}

.sk-primary .sk-chase-dot:before {
    background-color: var(--secondary-color) !important;
}

.hide-data {
    background: #d5e2ea !important;
    /*color: transparent;*/
    position: relative;
    overflow: hidden;
}

.hide-data::before {
    content: "";
    position: absolute;
    left: 0%;
    top: 0;
    height: 100%;
    width: 50px;
    background: linear-gradient(to right, #d5e2ea 25%, #8ac0e6 50%, #d5e2ea 100%);
    animation-name: gradient-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    filter: blur(5px);
}

@keyframes gradient-animation {
    from {
        left: 0%;
    }
    to {
        left: 100%;
    }
}

.loader {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-four, #e9ecef);
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sk-primary.sk-plane, .sk-primary .sk-chase-dot:before, .sk-primary .sk-bounce-dot, .sk-primary .sk-wave-rect, .sk-primary.sk-pulse, .sk-primary .sk-swing-dot, .sk-primary .sk-circle-dot:before, .sk-primary .sk-circle-fade-dot:before, .sk-primary .sk-grid-cube, .sk-primary .sk-fold-cube:before {
    background-color: var(--primary-color);
}

.main-header .col-auto {
    margin-left: -15px;
}

.cs-close {
    font-size: 16px;
    float: right;
    margin-right: 5px;
    color: #983939;
    cursor: pointer;
}

.csharpcode pre{
    margin-bottom: 0 !important;
}

.table-responsive{
    overflow-x: auto;
}

.alert-outline-info {
    border-color: black;
    color: black;
    background-color: var(--color-three);
}
/*html {*/
/*    font-family: 'Montserrat', sans-serif !important;*/
/*    font-weight: normal;*/
/*    line-height: 1.0;*/
/*    color: #6b6f82;*/
/*}*/

/*h1,*/
/*h2,*/
/*h3,*/
/*h4,*/
/*h5,*/
/*h6 {*/
/*    font-family: 'Montserrat', sans-serif;*/
/*    font-weight: 400;*/
/*    line-height: 1.0;*/
/*    color: #333;*/
/*}*/

/*p {*/
/*    font-family: 'Montserrat', sans-serif;*/
/*}*/

/*.navbar .notification-badge {*/
/*    font-family: 'Montserrat', sans-serif;*/
/*    position: relative;*/
/*    top: -20px;*/
/*    right: 5px;*/
/*    margin: 0 -.8em;*/
/*    padding: 1px 3px;*/
/*    color: #fff;*/
/*    border-radius: 50%;*/
/*    background-color: #ff4081;*/
/*    box-shadow: 0 0 10px 0 #ff4081;*/
/*}*/

/*#breadcrumbs-wrapper.breadcrumbs-inline .breadcrumbs-title {*/
/*    padding-right: 20px;*/
/*    border-right: none;*/
/*}*/

/*.brand-sidebar .brand-logo {*/
/*    color: #333333 !important; !* theme color*!*/
/*}*/

/*.login-bg {*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-color: #eaeaea !important; !* theme color*!*/
/*}*/

/*.btn, .btn-large, .btn-small {*/
/*    cursor: pointer;*/
/*    -webkit-transition: background-color .2s ease-out;*/
/*    transition: background-color .2s ease-out;*/
/*    text-align: center;*/
/*    text-decoration: none;*/
/*    letter-spacing: 0.3px;*/
/*    color: #ffffff !important;*/
/*    background-color: #0474ac !important; !* theme color*!;*/
/*}*/

/*.btn-floating {*/
/*    background-color: #0474ac; !* theme color*!*/
/*}*/

/*.btn-floating:hover {*/
/*    background-color: #818181 !important; !* theme color*!*/
/*}*/

/*.btn:hover, .btn-large:hover, .btn-small:hover {*/
/*    background-color: #818181 !important; !* theme color*!*/
/*}*/

/*.fixed-action-btn .fab-backdrop {*/
/*    background-color: #818181 !important; !* theme color *!*/
/*}*/


/*.navbar-main {*/
/*    background-color: #0474ac !important; !* theme color*!*/
/*}*/

/*.pagination li.active {*/
/*    color: #fff;*/
/*    background-color: #0474ac !important; !* theme color*!*/
/*}*/

/*.sidenav-active-rounded .sidenav li > a.active {*/
/*    background: #000000; !* theme color*!*/
/*    background: -webkit-linear-gradient(45deg, #313131, #818181) !important; !* theme color*!*/
/*    background: linear-gradient(45deg, #313131, #818181) !important; !* theme color*!*/
/*    box-shadow: 3px 3px 20px 0 rgb(161, 161, 161); !* theme color*!*/
/*}*/

/*footer.page-footer {*/
/*    background-color: #0474ac !important; !* theme color*!*/
/*}*/

/*.dropdown-content li > a, .dropdown-content li > span {*/
/*    color: #0474ac; !* theme color*!*/
/*}*/

/*.datepicker-table td.is-selected {*/
/*    background-color: #0474ac; !* theme color*!*/
/*    color: white !important;*/
/*}*/

/*.datepicker-table td.is-today {*/
/*    color: #fd1919;*/
/*    font-weight: bold !important;*/
/*}*/

/*.datepicker-date-display {*/
/*    background-color: #0474ac; !* theme color*!*/
/*}*/

/*.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {*/
/*    color: #0474ac; !* theme color*!*/
/*}*/

/*button, input, optgroup, select, textarea {*/
/*    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;*/
/*}*/

/*.timepicker-close {*/
/*    color: #818181; !* theme color *!*/
/*}*/

/*.timepicker-digital-display {*/
/*    background-color: #818181; !* theme color *!*/
/*}*/

/*.timepicker-tick.active,*/
/*.timepicker-tick:hover {*/
/*    background-color: #818181; !* theme color *!*/
/*    color: #FFF;*/
/*}*/

/*.timepicker-canvas line {*/
/*    stroke: #818181; !* theme color *!*/
/*}*/

/*.timepicker-canvas-bearing {*/
/*    fill: #818181; !* theme color *!*/
/*}*/

/*.timepicker-canvas-bg {*/
/*    fill: #818181; !* theme color *!*/
/*}*/

/*#cs_loader {*/
/*    margin: auto;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    z-index: 9999;*/
/*    background-color: black; !* theme color*!*/
/*    position: fixed;*/
/*    opacity: 0.5;*/
/*    border-radius: 5px;*/
/*    -webkit-border-radius: 5px;*/
/*    display: none;*/
/*}*/

/*.cs_disabled {*/
/*    background-color: #DFDFDF !important;*/
/*    box-shadow: none !important;*/
/*    color: #9F9F9F !important;*/
/*    cursor: default !important;*/
/*}*/

/*.card-alert {*/
/*    margin-top: 0px;*/
/*    padding-top: 5px;*/
/*    padding-bottom: 5px;*/
/*}*/

/*.card-alert button {*/
/*    padding-top: 10px;*/
/*}*/

/*.cs-bold {*/
/*    font-weight: bold;*/
/*}*/

/*.cs-text-info {*/
/*    font-size: 14px;*/
/*    font-weight: bold;*/
/*}*/

/*.cs-text-info-curr {*/
/*    font-size: 14px;*/
/*    font-weight: bold;*/
/*}*/

/*.cs-tab {*/
/*    height: 35px;*/
/*    !*width: 200px;*!*/
/*    !*padding: 5px;*!*/
/*    !*margin: 5px;*!*/
/*    text-align: center;*/
/*    padding: 0;*/
/*    margin-left: 0;*/
/*    margin-right: 0;*/
/*    padding-top: 5px;*/
/*}*/

/*.cs-tab-disabled {*/
/*    background-color: grey;*/
/*    border: solid 1px silver;*/
/*    color: darkgray;*/
/*}*/

/*.cs-tab-enabled {*/
/*    background-color: white;*/
/*    border: solid 1px silver;*/
/*    color: black; !* theme color*!*/
/*}*/

/*.cs-mat-image {*/
/*    padding-left: 60px;*/
/*    padding-right: 60px;*/
/*    padding-bottom: 65px;*/
/*    background-color: transparent !important;*/
/*    min-width: 0 !important;*/
/*    !*width: 200px !important;*!*/
/*    height: 175px !important;*/
/*}*/

/*.cs-mat-image-container {*/
/*    border: solid 1px silver;*/
/*    height: 250px;*/
/*    background-color: #757575;*/
/*}*/

/*.cs-mat-image-container-selected {*/
/*    border: solid 4px #0d47a1;*/
/*    background-color: #2196f3;*/
/*}*/

/*.token.operator {*/
/*    background: none !important*/
/*}*/

/*.cs-panel-header {*/
/*    background-color: #0474ac !important; !* theme color*!*/
/*    padding: 15px;*/
/*    font-size: 20px;*/
/*    font-weight: 300;*/
/*    color: #ffffff;*/
/*    margin-bottom: -15px !important;*/
/*}*/

/*.time-range {*/
/*    font-weight: 600 !important;*/
/*    font-size: 12px !important;*/
/*    margin-left: -10px !important;*/
/*    margin-right: -10px !important;*/
/*    margin-top: 13px !important;*/
/*    border-radius: 2px;*/
/*    background-color: #FFF;*/
/*    line-height: 22px;*/
/*    float: right;*/
/*    box-sizing: border-box;*/
/*    min-width: 3rem;*/
/*    height: 22px;*/
/*    padding: 0 6px;*/
/*    text-align: center;*/
/*    cursor: pointer;*/
/*    color: #0474ac !important; !* theme color *!*/
/*}*/

/*.time-range .static {*/

/*}*/

/*.time-range-selected {*/
/*    color: #FFF !important;*/
/*    background-color: #0474ac; !* theme color *!*/
/*}*/

/*.input-disabled {*/
/*    background-color: #EBEBE4;*/
/*    border: 1px solid #ABADB3;*/
/*    padding: 2px 1px;*/
/*}*/

/*.card-panel .cs-header {*/
/*    margin-top: -15px;*/
/*    margin-bottom: 10px;*/
/*    margin-left: -10px;*/
/*}*/

/*.modal-content .card-title {*/
/*    font-size: 24px;*/
/*    font-weight: 300;*/
/*    margin-left: 10px;*/
/*    margin-bottom: 15px;*/
/*}*/

/*.cs-label-header {*/
/*    color: #9e9e9e;*/
/*    margin-left: -3px;*/
/*    font-size: .8rem;*/
/*}*/

/*.modal .easy-autocomplete {*/
/*    width: 100% !important;*/
/*}*/

/*.easy-autocomplete {*/
/*    width: auto !important;*/
/*}*/

/*.ticket-input {*/
/*    border-bottom: none !important;*/
/*    color: #6b6f82 !important;*/
/*    margin: 0 !important;*/
/*}*/

/*.modal-header {*/
/*    font-size: 24px;*/
/*    font-weight: 300;*/
/*    text-align: center;*/
/*    background-color: #0474ac !important; !* theme color*!*/
/*    padding: 8px;*/
/*    color: #ffffff;*/
/*    margin: -24px -24px 15px;*/
/*}*/

/*.num-aligned .currency {*/
/*    color: #6b6f82 !important;*/
/*    text-align: right !important;*/
/*}*/

/*.num-aligned tr {*/
/*    border: none !important;*/
/*    padding: 0 !important;*/
/*}*/

/*.num-aligned td {*/
/*    padding: 0 !important;*/
/*}*/

/*.btn-inverted {*/
/*    background-color: white !important;*/
/*    color: #000000 !important; !* theme color*!*/
/*}*/

/*.plain-table tr {*/
/*    !*border: none !important;*!*/
/*}*/

/*.plain-table td {*/
/*    padding: 5px;*/
/*}*/

/*[type='checkbox']:checked + span:not(.lever):before {*/
/*    top: -4px;*/
/*    left: -5px;*/

/*    width: 12px;*/
/*    height: 22px;*/

/*    -webkit-transform: rotate(40deg);*/
/*    -ms-transform: rotate(40deg);*/
/*    transform: rotate(40deg);*/
/*    -webkit-transform-origin: 100% 100%;*/
/*    -ms-transform-origin: 100% 100%;*/
/*    transform-origin: 100% 100%;*/

/*    border-top: 2px solid transparent;*/
/*    border-right: 2px solid #0474ac; !* theme color*!*/
/*    border-bottom: 2px solid #0474ac; !* theme color*!*/
/*    border-left: 2px solid transparent;*/

/*    -webkit-backface-visibility: hidden;*/
/*    backface-visibility: hidden;*/
/*}*/

/*.documentWindow {*/
/*    width: 80% !important;*/
/*    max-height: 80% !important;*/
/*    height: 100% !important;;*/
/*}*/

/*.pagination li {*/
/*    width: 40px !important;*/
/*    margin: 1px !important;*/
/*    text-align: center;*/
/*}*/

/*.pagination li.active.number {*/
/*    box-shadow: 0 0 8px 0 #444 !important;*/
/*    border-radius: 4px !important;*/
/*}*/

/*.pagination li.number:hover {*/
/*    box-shadow: 0 0 8px 0 #444 !important;*/
/*    background-color: #0474ac !important;*/
/*    border-radius: 4px !important;*/
/*}*/

/*.pagination li.number a:hover {*/
/*    color: white !important;*/
/*}*/

/*.collapsible-body .row.margin {*/
/*    margin-top: -15px !important;*/
/*}*/

/*.header div.header {*/
/*    margin-left: -20px;*/
/*}*/

/*.header nav {*/
/*    box-shadow: none !important;*/
/*    background-color: inherit;*/
/*/important;*/
/*    margin-left: -15px;*/
/*    margin-bottom: -30px !important;*/
/*    margin-top: 10px !important;*/
/*}*/

/*nav a {*/
/*    color: #6b6f82 !important;*/
/*    font-size: 24px !important;*/
/*    line-height: 1;*/
/*    font-weight: 300;*/
/*}*/

/*nav a.link {*/
/*    color: rgba(107, 111, 130, 0.55) !important;*/
/*}*/

/*.breadcrumb:before {*/
/*    color: black !important;*/
/*}*/


/*.collapsible-header.panel {*/
/*    background-color: #0474ac !important; !* theme color*!*/
/*    font-size: 17px;*/
/*    font-weight: 300;*/
/*    color: #ffffff;*/
/*    !**/
/*    margin-bottom: -15px !important;*/
/*    *!*/
/*}*/

/*.switch label input[type=checkbox]:checked + .lever {*/
/*    background-color: rgba(0, 128, 0, 0.25) !important;*/
/*}*/

/*.switch label input[type=checkbox]:checked + .lever:after {*/
/*    background-color: green !important;*/
/*}*/

/*.switch label input[type=checkbox] + .lever {*/
/*    background-color: rgba(255, 0, 0, 0.25) !important;*/
/*}*/

/*.switch label input[type=checkbox] + .lever:after {*/
/*    background-color: red !important;*/
/*}*/

/*.error {*/
/*    color: red !important;*/
/*    top: -20px !important;*/
/*}*/

/*@media only screen and (max-width: 600px) {*/
/*    .tran-switch {*/
/*        margin-top: 5px !important;*/
/*        margin-bottom: 5px !important;*/
/*    }*/

/*    .tran-lever {*/
/*        margin-top: -31px !important;*/
/*    }*/
/*}*/

/*.dd-label {*/
/*    top: -20px !important;*/
/*    font-size: 12px !important;*/
/*}*/

/* ============================================
   ELFRIQUE PUBLIC UI — from prototype/shared.css
   Variable mapping applied:
     --primary      → --primary-color
     --primary-light → --secondary-color
     --accent       → --color-three
     --accent-warm  → --color-four
   ============================================ */

/* Reset & Base (scoped to public pages via .has-bottom-tabs or layout) */
.has-bottom-tabs a { text-decoration: none; color: inherit; transition: color 150ms; }
.has-bottom-tabs ul { list-style: none; }
.has-bottom-tabs img { max-width: 100%; display: block; }
.has-bottom-tabs button { font-family: var(--font); cursor: pointer; border: none; }
.has-bottom-tabs input, .has-bottom-tabs select, .has-bottom-tabs textarea { font-family: var(--font); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) { .container { padding: 0 16px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 600; border-radius: var(--radius-sm);
  transition: all 200ms ease; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary-color); color: var(--white); padding: 12px 24px; font-size: 14px; }
.btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-2); }
.btn-accent { background: var(--color-three); color: var(--white); padding: 12px 24px; font-size: 14px; }
.btn-accent:hover { background: var(--accent-hover); box-shadow: var(--shadow-2); }
.btn-secondary { background: var(--white); color: var(--primary-color); border: 1.5px solid var(--primary-color); padding: 12px 24px; font-size: 14px; }
.btn-secondary:hover { background: var(--primary-color); color: var(--white); }
.btn-ghost { background: transparent; color: var(--primary-color); padding: 10px 20px; font-size: 14px; }
.btn-ghost:hover { background: var(--neutral-100); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600;
}
.badge-verified { background: #d1fae5; color: #065f46; }
.badge-live { background: #fee2e2; color: #991b1b; animation: pulse-badge 2s infinite; }
.badge-elfrique { background: #d1fae5; color: #065f46; }
.badge-partner { background: #dbeafe; color: #1e40af; }
.badge-free { background: #d1fae5; color: #065f46; }
.badge-paid { background: #fef3c7; color: #92400e; }
@keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.section-title { font-size: 30px; font-weight: 700; color: var(--neutral-900); text-align: center; margin-bottom: 12px; }
.section-subtitle { font-size: 17px; color: var(--neutral-600); text-align: center; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.7; }
@media (max-width: 768px) {
  .section-title { font-size: 24px; }
  .section-subtitle { font-size: 15px; margin-bottom: 32px; }
}

/* Forms */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--neutral-700); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-sm); font-size: 15px; outline: none;
  transition: border-color 200ms; background: var(--white);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(46,125,50,0.1); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================
   TOP BAR
   ============================================ */
.top-bar { background: var(--primary-color); color: rgba(255,255,255,0.75); font-size: 13px; padding: 6px 0; }
.top-bar .container { display: flex; align-items: center; justify-content: space-between; }
.top-bar-left { display: flex; align-items: center; gap: 16px; }
.top-bar-right { display: flex; align-items: center; gap: 16px; }
.top-bar a { color: rgba(255,255,255,0.85); transition: color 150ms; }
.top-bar a:hover { color: var(--white); }
.currency-auto {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,0.8);
}
@media (max-width: 768px) { .top-bar { display: none; } }

/* ============================================
   MAIN HEADER
   ============================================ */
.main-header { position: sticky; top: 0; z-index: 1000; background: var(--white); border-bottom: 1px solid var(--neutral-200); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.header-main { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.logo img { height: 36px; width: auto; }
.header-search { flex: 1; max-width: 520px; position: relative; }
.header-search input {
  width: 100%; height: 44px; padding: 0 44px 0 16px;
  border: 1.5px solid var(--neutral-200); border-radius: var(--radius-full);
  font-size: 14px; outline: none; transition: border-color 200ms;
}
.header-search input:focus { border-color: var(--secondary-color); }
.header-search input::placeholder { color: var(--neutral-400); }
.header-search-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-color); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.header-search-btn:hover { background: var(--primary-hover); }

/* Search dropdown */
.search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: var(--white); border: 1px solid var(--neutral-200); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1060;
  max-height: 420px; overflow-y: auto;
}
.search-dropdown-group { padding: 8px 16px 4px; }
.search-dropdown-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--neutral-400); margin-bottom: 4px;
}
.search-dropdown-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  text-decoration: none; color: var(--neutral-900); border-radius: 8px;
  transition: background 150ms;
}
.search-dropdown-item:hover { background: var(--neutral-50); }
.search-dropdown-item img {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--neutral-100);
}
.search-dropdown-item-text { min-width: 0; }
.search-dropdown-item-name {
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-dropdown-item-subtitle {
  font-size: 12px; color: var(--neutral-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-dropdown-empty {
  padding: 24px 16px; text-align: center; color: var(--neutral-400); font-size: 14px;
}
.search-dropdown-loading {
  padding: 24px 16px; text-align: center; color: var(--neutral-400); font-size: 13px;
}

/* Mobile search overlay */
.mobile-search-overlay {
  position: fixed; inset: 0; background: var(--white); z-index: 1070;
  display: none; flex-direction: column;
}
.mobile-search-overlay.active {
  display: flex;
}
.mobile-search-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
}
.mobile-search-header input {
  flex: 1; height: 44px; padding: 0 16px; border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-full); font-size: 15px; outline: none;
}
.mobile-search-header input:focus { border-color: var(--secondary-color); }
.mobile-search-close {
  width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: none; color: var(--neutral-600);
}
.mobile-search-close:hover { background: var(--neutral-100); }
.mobile-search-results { flex: 1; overflow-y: auto; padding: 8px 0; }

.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header-notif {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-50); transition: background 150ms;
}
.header-notif:hover { background: var(--neutral-200); }
.header-notif .notif-dot {
  position: absolute; top: 6px; right: 6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--error); border: 2px solid var(--white);
}
.header-notif-wrap { position: relative; }

/* Notification dropdown */
.notif-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0; width: 360px;
  background: var(--white); border: 1px solid var(--neutral-200);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1100; overflow: hidden;
}
.notif-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--neutral-100);
}
.notif-dropdown-title { font-size: 15px; font-weight: 700; color: var(--neutral-900); }
.notif-mark-all-read { font-size: 13px; color: var(--primary-color); font-weight: 600; }
.notif-mark-all-read:hover { text-decoration: underline; }
.notif-list { max-height: 400px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 12px; padding: 12px 16px;
  cursor: pointer; transition: background 150ms; border-left: 3px solid transparent;
}
.notif-item:hover { background: var(--neutral-50); }
.notif-item.notif-unread { background: var(--white); border-left-color: var(--primary-color); }
.notif-item.notif-read { background: var(--neutral-50); }
.notif-item-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-100); color: var(--neutral-600); font-size: 16px;
}
.notif-item.notif-unread .notif-item-icon { background: #E8F5E9; color: var(--primary-color); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 13px; font-weight: 600; color: var(--neutral-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-message {
  font-size: 12px; color: var(--neutral-600); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-time { font-size: 11px; color: var(--neutral-400); margin-top: 4px; }
.notif-empty {
  padding: 40px 16px; text-align: center; color: var(--neutral-400);
}
.notif-empty i { font-size: 36px; display: block; margin-bottom: 8px; }
.notif-empty p { font-size: 13px; margin: 0; }
.notif-dropdown-footer {
  padding: 10px 16px; text-align: center; border-top: 1px solid var(--neutral-100);
}
.notif-dropdown-footer a {
  font-size: 13px; font-weight: 600; color: var(--primary-color);
}
.notif-dropdown-footer a:hover { text-decoration: underline; }

.header-auth { display: flex; align-items: center; gap: 8px; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; padding: 8px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--neutral-900); border-radius: 2px; transition: all 200ms; }
@media (max-width: 768px) {
  .header-search { display: none; }
  .hamburger { display: flex; }
  .header-right .btn { display: none; }
  .header-notif-wrap { display: none; }
}
@media (min-width: 769px) and (max-width: 992px) {
  .notif-dropdown { width: 320px; }
}

/* Navigation */
.nav-bar { background: var(--white); border-bottom: 1px solid var(--neutral-100); position: relative; z-index: 999; }
.nav-bar .container { display: flex; align-items: center; gap: 0; overflow-x: visible; }
.nav-link {
  display: flex; align-items: center; gap: 4px; padding: 12px 24px;
  font-size: 13px; font-weight: 600; color: var(--neutral-700);
  white-space: nowrap; border-bottom: 2px solid transparent; transition: all 150ms;
}
.nav-link:hover, .nav-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.nav-link svg { width: 16px; height: 16px; }
.nav-item { position: relative; }
.mega-menu {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 560px; background: var(--white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-3); padding: 20px;
  z-index: 1001; border-top: 2px solid var(--primary-color);
}
.nav-item:hover .mega-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mega-menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--radius-md); transition: background 150ms; }
.mega-menu-item:hover { background: var(--neutral-50); }
.mega-menu-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--neutral-100); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.mega-menu-text h4 { font-size: 14px; font-weight: 600; color: var(--neutral-900); }
.mega-menu-text p { font-size: 12px; color: var(--neutral-600); margin-top: 2px; }
@media (max-width: 768px) { .nav-bar { display: none; } }

/* Mobile Nav */
.mobile-nav-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.5); }
.mobile-nav-overlay.active { display: block; }
.mobile-nav { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; background: var(--white); z-index: 2001; transition: left 300ms ease-out; overflow-y: auto; padding-bottom: 60px; }
.mobile-nav.active { left: 0; }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--neutral-200); }
.mobile-nav-close { background: none; font-size: 24px; color: var(--neutral-600); }
.mobile-nav-items { padding: 16px 0; }
.mobile-nav-item { display: block; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--neutral-700); border-bottom: 1px solid var(--neutral-100); }
.mobile-nav-item:hover { background: var(--neutral-50); color: var(--primary-color); }
.mobile-nav-sub { padding-left: 20px; display: none; }
.mobile-nav-sub a { display: block; padding: 10px 20px; font-size: 14px; color: var(--neutral-600); font-weight: 500; }
.mobile-nav-sub a:hover { color: var(--primary-color); }
.mobile-nav-auth { padding: 20px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--neutral-200); margin-top: 16px; }
.mobile-nav-auth .btn { width: 100%; justify-content: center; }

/* Bottom Tab Bar */
.bottom-tab-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 1px solid var(--neutral-200); z-index: 1000; padding-bottom: env(safe-area-inset-bottom); }
.bottom-tabs { display: flex; justify-content: space-around; align-items: center; height: 60px; }
.bottom-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--neutral-400); background: none; transition: color 150ms; padding: 4px 12px; }
.bottom-tab.active { color: var(--primary-color); }
.bottom-tab svg { width: 22px; height: 22px; }
.bottom-tab-create { width: 48px; height: 48px; border-radius: 50%; background: var(--color-three); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(232,145,45,0.4); margin-top: -20px; }
.bottom-tab-create svg { width: 24px; height: 24px; }
@media (max-width: 768px) { .bottom-tab-bar { display: block; } body.has-bottom-tabs { padding-bottom: 70px; } }

/* ============================================
   FOOTER
   ============================================ */
.footer { background: var(--neutral-900); color: rgba(255,255,255,0.7); padding: 80px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px; }
.footer-brand p { font-size: 14px; margin: 16px 0 24px; line-height: 1.7; }
.footer-socials { display: flex; gap: 12px; }
.footer-social-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: all 150ms; font-size: 16px; }
.footer-social-link:hover { background: var(--color-three); color: var(--white); transform: translateY(-2px); }
.footer-col h4 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-col a { display: block; font-size: 14px; padding: 5px 0; color: rgba(255,255,255,0.6); transition: color 150ms; }
.footer-col a:hover { color: var(--color-three); }
.footer-bottom { margin-top: 48px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
@media (max-width: 768px) {
  .footer { padding: 48px 0 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* Live Chat */
.live-chat-btn {
  position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px;
  border-radius: 50%; background: var(--primary-color); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: var(--shadow-2); z-index: 999; transition: all 200ms;
}
.live-chat-btn:hover { background: var(--secondary-color); transform: scale(1.1); }
@media (max-width: 768px) { .live-chat-btn { bottom: 80px; width: 48px; height: 48px; font-size: 18px; } }

/* Scroll Animations */
.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* ── Accessibility: Focus-visible styles ── */
/* Show focus ring only on keyboard navigation, not mouse clicks */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
*:focus:not(:focus-visible) {
    outline: none;
}
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible,
.sidebar-nav-item:focus-visible, .mobile-nav-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
    outline: none; /* Already has box-shadow focus indicator */
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.15);
}

/* ── Browse filter sidebar (shared between events + tours) ──────── */
.browse-results-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: start;
}
.filter-sidebar {
    position: sticky;
    top: 80px;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-1);
}
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.filter-header h3 { font-size: 16px; font-weight: 700; color: var(--neutral-900); margin: 0; }
.filter-clear {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    background: none;
    border: none;
}
.filter-clear:hover { color: var(--primary-hover); }
.filter-group {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--neutral-100);
}
.filter-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.filter-group-title { font-size: 14px; font-weight: 700; color: var(--neutral-900); margin-bottom: 12px; }
.filter-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--neutral-700);
    outline: none;
    background: var(--white);
    cursor: pointer;
    transition: border-color 200ms;
}
.filter-group select:focus { border-color: var(--secondary-color); }
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--neutral-700);
    transition: color 150ms;
}
.filter-checkbox:hover { color: var(--neutral-900); }
.filter-checkbox input[type="checkbox"],
.filter-checkbox input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer; flex-shrink: 0;
}
.filter-checkbox .count { margin-left: auto; font-size: 12px; color: var(--neutral-400); font-weight: 500; }
.filter-date-row { display: flex; gap: 8px; }
.filter-date-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--neutral-700);
    outline: none;
    transition: border-color 200ms;
}
.filter-date-input:focus { border-color: var(--secondary-color); }

/* Mobile filter drawer */
.mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--neutral-200);
    background: var(--white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.filter-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1200;
    display: none;
}
.filter-drawer-overlay.open { display: block; }
.filter-drawer {
    position: fixed; top: 0; left: -340px;
    width: 320px; height: 100vh;
    background: var(--white);
    z-index: 1201;
    overflow-y: auto;
    transition: left 300ms ease;
    padding: 24px;
}
.filter-drawer.open { left: 0; }
.filter-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.filter-drawer-close {
    background: none; border: none;
    font-size: 24px; cursor: pointer;
    color: var(--neutral-600);
}

@media (max-width: 900px) {
    .browse-results-layout { grid-template-columns: 1fr; }
    .filter-sidebar { display: none; }
    .mobile-filter-btn { display: inline-flex; }
}

/* ── User dropdown (UX-22) ──────────────────────────────────────── */
.header-avatar-wrap { position: relative; }
.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    z-index: 1100;
    overflow: hidden;
}
.user-dropdown.show { display: block; }
.user-dropdown-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}
.user-dropdown-header strong { display: block; font-size: 14px; color: var(--neutral-900); }
.user-dropdown-header span { display: block; font-size: 12px; color: var(--neutral-500); margin-top: 2px; }
.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--neutral-700);
    text-decoration: none;
    transition: background 150ms;
}
.user-dropdown a:hover { background: var(--neutral-50); }
.user-dropdown a i { font-size: 18px; color: var(--neutral-400); width: 20px; text-align: center; }
.user-dropdown-divider { height: 1px; background: var(--neutral-200); margin: 4px 0; }
.user-dropdown .logout { color: var(--color-error, #dc2626); }
.user-dropdown .logout i { color: var(--color-error, #dc2626); }

/* ── Header icon sizes (CSP-safe, replaces inline styles) ───────── */
.header-search-icon { font-size: 18px; }
.header-bell-icon { font-size: 20px; }
.contest-organizer-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: var(--radius-full); border: 1.5px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); transition: all 150ms; }
.contest-about-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); border: 1.5px solid rgba(255,255,255,0.3); background: transparent; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 150ms; }

/* ── Organizer bio toggle (CSP-safe) ────────────────────────────── */
.org-bio-text { font-size: 13px; color: #6B7280; line-height: 1.6; margin: 12px 0; }
.org-bio-hidden { display: none; }
.org-bio-toggle { background: none; border: none; color: var(--primary-color); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-left: 4px; }
.org-bio-toggle:hover { text-decoration: underline; }

/* ── Consistent hover states for cards ───────────────────────────── */
.service-card:hover, .earning-card:hover, .qr-card:hover,
.vendor-slide-card:hover, .campaign-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

/* ── Ad placeholders — hidden until ad system is live ────────────── */
.ad-placeholder { display: none !important; }

/* ── Dashboard Sidebar UX Overhaul ──────────────────────────────── */

/* UX-25: Sidebar card appearance */
.dashboard-sidebar {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* WK-384 / WK-201: Sticky sidebar — keeps sidebar in view while content scrolls.
   align-self: flex-start prevents the Bootstrap column from stretching to row height,
   which is required for position: sticky to engage on the aside inside it. */
@media (min-width: 992px) {
    .elfrique-dashboard-layout .row > .col-lg-3 {
        align-self: flex-start;
        position: sticky;
        top: 80px;
    }
}

/* UX-13: Sidebar profile card */
.sidebar-profile {
    padding: 16px;
    border-bottom: 1px solid var(--neutral-100);
}
/* WK-353: was h3 — now a div to avoid heading-hierarchy violation (sidebar before H1 in DOM) */
.sidebar-profile .sidebar-user-name {
    margin: 6px 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.sidebar-email {
    font-size: 12px;
    color: var(--neutral-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin-bottom: 8px;
    display: block;
}
.sidebar-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(46, 125, 50, 0.08);
    color: var(--primary-color);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* UX-19: Nav item styling with icons */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--neutral-700);
    text-decoration: none;
    font-size: 14px;
    transition: background 150ms ease, color 150ms ease;
    border-left: 3px solid transparent;
}
.sidebar-nav-item:hover {
    background: var(--neutral-50);
    color: var(--primary-color);
}
.sidebar-nav-item i {
    font-size: 20px;
    width: 24px;
    text-align: center;
    color: var(--neutral-400);
    flex-shrink: 0;
}
.sidebar-nav-item:hover i {
    color: var(--primary-color);
}

/* UX-24: Active page indicator */
.sidebar-nav-item.active {
    background: rgba(46, 125, 50, 0.06);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 600;
}
.sidebar-nav-item.active i {
    color: var(--primary-color);
}

/* UX-19: Section divider and label */
.sidebar-divider {
    height: 1px;
    background: var(--neutral-200);
    margin: 8px 16px;
}
.sidebar-section-label {
    padding: 12px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* UI-04/UX-39: Admin nav group (expandable parent + children) */
.sidebar-nav-group {
    display: flex;
    flex-direction: column;
}
.sidebar-nav-toggle {
    position: relative;
}
.sidebar-nav-caret {
    margin-left: auto;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.sidebar-nav-group.open .sidebar-nav-caret {
    transform: rotate(-180deg);
}
.sidebar-nav-children {
    display: none;
}
.sidebar-nav-group.open .sidebar-nav-children,
.sidebar-nav-group:hover .sidebar-nav-children {
    display: block;
}
.sidebar-nav-child {
    padding-left: 48px;
    font-size: 13px;
}

/* Breadcrumbs — CF-016 */
.elfrique-breadcrumb {
    background-color: #f8f9fa;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.elfrique-breadcrumb .breadcrumb {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.elfrique-breadcrumb .breadcrumb-item a {
    color: var(--primary-color, #6c757d);
    text-decoration: none;
}

.elfrique-breadcrumb .breadcrumb-item a:hover {
    color: var(--primary-hover, #495057);
    text-decoration: underline;
}

.elfrique-breadcrumb .breadcrumb-item.active {
    color: #495057;
    font-weight: 500;
}

/* ── Image Upload Component ─────────────────────────────────────────── */
.image-upload-container { margin-bottom: 1rem; }
.image-upload-preview { margin-top: 0.5rem; }
.image-upload-preview img { max-width: 200px; max-height: 200px; border-radius: 4px; border: 1px solid #e9ecef; display: none; }
.image-upload-preview img[src]:not([src=""]) { display: block; }
.image-upload-status { font-size: 0.875rem; margin-top: 0.25rem; }
.image-upload-status.uploading { color: #6c757d; }
.image-upload-status.success { color: #198754; }
.image-upload-status.error { color: #dc3545; }
.image-upload-input { margin-top: 0.25rem; }