/* ============================================================
   EBDAA ALKHUTAA | SHARED LAYOUT SYSTEM
   Used by _PublicLayout and _AdminLayout - no page-level copy.
   ============================================================ */
:root {
    --ak-sidebar-width: 284px;
    --ak-public-header-height: 78px;
    --ak-paper: #fffaf0;
    --ak-surface: #fffdf9;
    --ak-surface-2: #fff5e1;
    --ak-divider: #eadbbd;
    --ak-dark-ink: #302716;
    --ak-muted-ink: #76684d;
    --ak-gold-dark: #805a0d;
    --ak-gold-main: #aa7d24;
    --ak-elevation: 0 12px 34px rgba(74, 52, 10, .08);
}
html[data-bs-theme="dark"] {
    --ak-paper: #24231f;
    --ak-surface: #2d2a24;
    --ak-surface-2: #3a3120;
    --ak-divider: #514831;
    --ak-dark-ink: #f1e8d7;
    --ak-muted-ink: #c1b69c;
    --ak-gold-dark: #e3bd67;
    --ak-gold-main: #d6b05a;
    --ak-elevation: 0 12px 34px rgba(0, 0, 0, .22);
}
.ak-public, .ak-admin { overflow-x: clip; }
.ak-public a, .ak-admin a { text-decoration-thickness: 1px; }
.ak-public .min-w-0, .ak-admin .min-w-0 { min-width: 0 !important; }
.ak-public button:focus-visible, .ak-admin button:focus-visible,
.ak-public a:focus-visible, .ak-admin a:focus-visible {
    outline: 2px solid var(--ak-gold-main);
    outline-offset: 3px;
}
/* Site brand */
.ak-brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }
.ak-brand__logo { width: 55px; height: 50px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(136,96,17,.12)); }
.ak-brand__text { display: flex; flex-direction: column; gap: .08rem; min-width: 0; line-height: 1.15; }
.ak-brand__text strong { font-size: 1.34rem; font-weight: 800; color: var(--ak-gold-dark); white-space: nowrap; }
.ak-brand__text small { font-size: .80rem; font-weight: 650; color: var(--ak-muted-ink); white-space: nowrap; }
/* Interactive header elements */
.ak-icon-button {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; min-width: 44px; padding: 0;
    border: 1px solid var(--ak-divider); border-radius: 12px;
    background: var(--ak-surface); color: var(--ak-gold-dark);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.ak-icon-button:hover { background: var(--ak-surface-2); border-color: var(--ak-gold-main); transform: translateY(-1px); }
.ak-lang-switch {
    min-width: 52px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .65rem; font-size: .98rem; font-weight: 800; letter-spacing: .025em;
    border: 1px solid var(--ak-divider); border-radius: 12px; background: var(--ak-surface);
    color: var(--ak-gold-dark); text-decoration: none;
}
.ak-lang-switch:hover { color: var(--ak-gold-dark); background: var(--ak-surface-2); }
.ak-login-main { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .6rem 1.35rem; font-size: 1.04rem; font-weight: 800; border-radius: 12px; white-space: nowrap; }
.ak-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 41px; width: 41px; height: 41px; border-radius: 12px;
    color: var(--ak-gold-dark); background: var(--ak-surface-2);
    border: 1px solid var(--ak-divider); font-weight: 800; font-size: 1.15rem;
}
.ak-account-trigger {
    display: flex; align-items: center; gap: .7rem; max-width: 265px; min-height: 47px;
    padding: .3rem .7rem; border: 1px solid var(--ak-divider); border-radius: 13px;
    background: var(--ak-surface); color: var(--ak-dark-ink); text-align: start;
}
.ak-account-trigger::after { margin-inline-start: .3rem; }
.ak-account-trigger__text { min-width: 0; flex-direction: column; text-align: start; line-height: 1.25; }
.ak-account-trigger__text strong { font-size: .95rem; max-width: 155px; }
.ak-account-trigger__text small, .ak-dropdown-user small { font-size: .8rem; color: var(--ak-muted-ink); }
.ak-account-dropdown { min-width: min(290px, calc(100vw - 1.5rem)); border: 1px solid var(--ak-divider) !important; border-radius: 15px; background: var(--ak-surface); }
.ak-account-dropdown .dropdown-item { display: flex; align-items: center; min-height: 42px; border-radius: 9px; font-weight: 650; gap: .3rem; white-space: normal; }
.ak-dropdown-user { padding: .75rem .9rem .4rem; }
.ak-dropdown-user strong { max-width: 260px; font-size: 1rem; }
/* =================================== PUBLIC LAYOUT =================================== */
.ak-public { background: var(--bs-body-bg); }
.ak-public .ak-site-header {
    position: sticky; top: 0; width: 100%; z-index: 1020;
    height: var(--ak-public-header-height);
    background: var(--ak-paper) !important; /* opaque base, NOT transparent */
    border-bottom: 1px solid var(--ak-divider);
    box-shadow: 0 7px 25px rgba(62, 40, 8, .07);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ak-site-header__inner { height: 100%; padding-inline: clamp(1rem, 2.4vw, 2.2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ak-header-actions { display: flex; align-items: center; gap: .6rem; }
.ak-public-sidebar {
    position: fixed; z-index: 1015; top: var(--ak-public-header-height); bottom: 0;
    inset-inline-start: 0; width: var(--ak-sidebar-width); overflow-y: auto;
    display: flex; flex-direction: column; gap: 1.1rem;
    background: var(--ak-surface); border-inline-end: 1px solid var(--ak-divider);
    padding: 1.25rem .8rem 1.35rem; scrollbar-width: thin;
}
.ak-sidebar-intro { border: 1px solid var(--ak-divider); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: .35rem; background: linear-gradient(135deg, var(--ak-surface-2), var(--ak-surface)); }
.ak-sidebar-eyebrow { color: var(--ak-gold-main); font-size: .73rem; font-weight: 800; letter-spacing: .05em; }
.ak-sidebar-intro strong { color: var(--ak-dark-ink); font-size: 1.05rem; line-height: 1.25; }
.ak-sidebar-intro > span:last-child { color: var(--ak-muted-ink); font-size: .88rem; line-height: 1.35; }
.ak-nav-heading { padding: .65rem 1rem .35rem; font-size: .76rem; font-weight: 800; color: var(--ak-muted-ink); }
.ak-side-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.ak-side-nav a {
    display: flex; align-items: center; gap: .88rem; min-height: 48px; padding: .7rem .9rem;
    border-radius: 12px; font-size: 1.02rem; font-weight: 680;
    color: var(--ak-dark-ink); text-decoration: none; transition: .18s ease;
}
.ak-side-nav a i { font-size: 1.33rem; width: 25px; text-align: center; color: var(--ak-gold-main); }
.ak-side-nav a:hover { background: var(--ak-surface-2); color: var(--ak-gold-dark); }
.ak-side-nav a.active { color: var(--ak-gold-dark); background: var(--ak-surface-2); box-shadow: inset 3px 0 0 var(--ak-gold-main); }
[dir="rtl"] .ak-side-nav a.active { box-shadow: inset -3px 0 0 var(--ak-gold-main); }
.ak-sidebar-account { border-top: 1px solid var(--ak-divider); padding: 1rem .3rem 0; margin-top: auto; display: grid; gap: .65rem; }
.ak-side-login { min-height: 49px; display: flex; justify-content: center; align-items: center; gap: .6rem; font-weight: 800; font-size: .98rem; border-radius: 12px; }
.ak-side-login i { font-size: 1.25rem; }
.ak-sidebar-identity { display: flex; gap: .7rem; align-items: center; margin-bottom: .25rem; }
.ak-sidebar-identity small { color: var(--ak-muted-ink); }
.ak-sidebar-backdrop { display: none; }
.ak-public-page { margin-inline-start: var(--ak-sidebar-width); min-height: calc(100dvh - var(--ak-public-header-height)); display: flex; flex-direction: column; min-width: 0; }
.ak-public-main { flex: 1; width: 100%; min-width: 0; }
.ak-public-footer { padding: 2.25rem 0 1rem; margin-top: auto; color: var(--ak-dark-ink); border-top: 1px solid var(--ak-divider); background: var(--ak-paper); }
.ak-footer-description { color: var(--ak-muted-ink); line-height: 1.8; max-width: 480px; }
.ak-footer-heading { color: var(--ak-dark-ink); font-weight: 800; margin: .5rem 0 1rem; }
.ak-footer-links { display: flex; flex-direction: column; align-items: start; gap: .65rem; }
.ak-footer-links a { color: var(--ak-muted-ink); text-decoration: none; }
.ak-footer-links a:hover { color: var(--ak-gold-main); }
.ak-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--ak-divider); margin-top: 2.3rem; padding-top: 1rem; color: var(--ak-muted-ink); font-size: .88rem; }
/* =================================== ADMIN LAYOUT =================================== */
.ak-admin #layout-menu { background: var(--ak-surface) !important; border-inline-end: 1px solid var(--ak-divider); }
.ak-admin-brand { min-height: 91px; padding: 1.15rem 1rem; border-bottom: 1px solid var(--ak-divider); }
.ak-admin-brand .ak-brand__logo { width: 50px; height: 49px; }
.ak-admin-brand .ak-brand__text strong { font-size: 1.18rem; }
.ak-admin-brand .ak-brand__text small { font-size: .81rem; }
.ak-admin .menu-inner .menu-link { min-height: 47px; font-weight: 660; }
.ak-admin .menu-header-text { color: var(--ak-muted-ink); font-weight: 800; }
.ak-admin .menu-inner .menu-item.active > .menu-link { background: var(--ak-surface-2) !important; color: var(--ak-gold-dark) !important; }
.ak-admin .menu-inner .menu-item.active > .menu-link .menu-icon { color: var(--ak-gold-dark) !important; }
.ak-admin-sidebar-bottom { margin-top: auto; padding: 1.1rem 1.2rem; border-top: 1px solid var(--ak-divider); }
.ak-admin-sidebar-status { display: flex; align-items: center; gap: .5rem; color: var(--ak-muted-ink); font-weight: 650; font-size: .84rem; }
.ak-admin-sidebar-status i { color: var(--ak-gold-main); font-size: 1.2rem; }
.ak-admin .ak-admin-navbar {
    background: var(--ak-paper) !important; border: 1px solid var(--ak-divider);
    border-radius: 15px; min-height: 72px; padding-inline: 1.05rem; color: var(--ak-dark-ink);
    box-shadow: var(--ak-elevation); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ak-admin-page-heading strong { font-size: 1.16rem; color: var(--ak-dark-ink); font-weight: 800; }
.ak-admin-page-heading small { color: var(--ak-muted-ink); max-width: 42vw; }
.ak-admin-content { min-width: 0; }
.ak-admin-footer { background: transparent !important; border-top: 1px solid var(--ak-divider); color: var(--ak-muted-ink); font-size: .87rem; }
/* =================================== THEME DRAWER =================================== */
.ak-settings-panel { background: var(--ak-surface); color: var(--ak-dark-ink); width: min(390px, 93vw) !important; }
.ak-settings-panel .offcanvas-header { padding: 1.25rem; border-bottom: 1px solid var(--ak-divider); }
.ak-settings-panel .offcanvas-title { font-weight: 800; font-size: 1.22rem; }
.ak-settings-panel .offcanvas-body { padding: 1.4rem 1.25rem; }
.ak-setting-group { margin-bottom: 1.7rem; }
.ak-setting-group > strong { display: block; margin-bottom: .8rem; font-size: 1rem; font-weight: 800; }
.ak-setting-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ak-setting-options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-setting-choice { min-height: 80px; border: 1px solid var(--ak-divider); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .6rem .3rem; text-align: center; cursor: pointer; color: var(--ak-muted-ink); background: var(--ak-surface); }
.ak-setting-choice i { font-size: 1.55rem; }
.ak-setting-choice span { font-weight: 750; font-size: .89rem; }
.ak-setting-choice:has(input:checked) { border-color: var(--ak-gold-main); box-shadow: inset 0 0 0 1px var(--ak-gold-main); color: var(--ak-gold-dark); background: var(--ak-surface-2); }
.ak-setting-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ak-setting-choice:has(input:focus-visible) { outline: 2px solid var(--ak-gold-main); outline-offset: 3px; }
.ak-theme-note { border-radius: 12px; background: var(--ak-surface-2); border: 1px solid var(--ak-divider); padding: 1rem; color: var(--ak-muted-ink); font-size: .94rem; line-height: 1.6; }
/* =================================== RESPONSIVE =================================== */
@media (max-width: 1199.98px) {
    :root { --ak-public-header-height: 70px; }
    .ak-public-sidebar {
        z-index: 1035; width: min(330px, 88vw); top: var(--ak-public-header-height);
        transition: transform .24s ease; box-shadow: var(--ak-elevation);
    }
    [dir="rtl"] .ak-public-sidebar { transform: translateX(110%); }
    [dir="ltr"] .ak-public-sidebar { transform: translateX(-110%); }
    .ak-sidebar-open .ak-public-sidebar { transform: translateX(0); }
    .ak-public-page { margin-inline-start: 0; }
    .ak-sidebar-backdrop {
        position: fixed; z-index: 1030; inset: var(--ak-public-header-height) 0 0;
        border: 0; width: 100%; background: rgba(28, 24, 15, .53);
        opacity: 0; visibility: hidden; display: block; transition: .2s ease;
    }
    .ak-sidebar-open .ak-sidebar-backdrop { opacity: 1; visibility: visible; }
    .ak-sidebar-open { overflow: hidden; }
}
@media (max-width: 575.98px) {
    .ak-site-header__inner { padding-inline: .75rem; gap: .4rem; }
    .ak-header-actions { gap: .35rem; }
    .ak-brand { gap: .45rem; }
    .ak-brand__logo { width: 37px; height: 39px; }
    .ak-brand__text strong { font-size: 1.04rem; }
    .ak-brand__text small { font-size: .68rem; }
    .ak-icon-button { width: 39px; height: 39px; min-width: 39px; }
    .ak-lang-switch { height: 39px; min-width: 40px; padding-inline: .4rem; }
    .ak-account-trigger { padding: .25rem; border: 0; background: transparent; min-height: 39px; }
    .ak-account-trigger::after { display: none; }
    .ak-avatar { width: 39px; height: 39px; flex-basis: 39px; }
    .ak-admin .ak-admin-navbar { min-height: 65px; padding-inline: .75rem; }
    .ak-admin-page-heading strong { max-width: 43vw; font-size: 1rem; }
    .ak-admin-content { padding-inline: .9rem; }
    .ak-public-footer { padding-top: 1.5rem; }
    .ak-footer-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .ak-public-sidebar, .ak-sidebar-backdrop, .ak-icon-button { transition: none !important; }
}

/* =============================================================
   Desktop collapsible public sidebar and settings layering.
   Main content expands instead of leaving a blank sidebar gap.
   ============================================================= */
.ak-public .ak-site-header { z-index: 1040; }
.ak-site-header [data-ak-open-settings],
.ak-site-header [data-ak-sidebar-toggle] {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
}
.ak-settings-panel.offcanvas { z-index: 1600 !important; }
.offcanvas-backdrop.ak-settings-backdrop { z-index: 1590 !important; }
.ak-settings-panel .offcanvas-header .btn-close { position: relative; z-index: 2; }
@media (min-width: 1200px) {
    .ak-public-sidebar { transition: transform .24s ease, visibility .24s ease; }
    .ak-public-page { transition: margin-inline-start .24s ease; }
    .ak-public.ak-sidebar-collapsed .ak-public-sidebar {
        visibility: hidden;
        pointer-events: none;
    }
    html[dir="rtl"] .ak-public.ak-sidebar-collapsed .ak-public-sidebar {
        transform: translateX(110%);
    }
    html[dir="ltr"] .ak-public.ak-sidebar-collapsed .ak-public-sidebar {
        transform: translateX(-110%);
    }
    .ak-public.ak-sidebar-collapsed .ak-public-page { margin-inline-start: 0 !important; }
    .ak-public.ak-sidebar-collapsed [data-ak-sidebar-toggle] { color: var(--ak-gold-main); }
}
@media (max-width: 1199.98px) {
    .ak-public-page { margin-inline-start: 0 !important; }
    .ak-public .ak-public-sidebar { visibility: visible; }
    .ak-public.ak-sidebar-open .ak-public-sidebar { pointer-events: auto; }
    .ak-public .ak-site-header { z-index: 1040; }
    .ak-public .ak-sidebar-backdrop { z-index: 1030; }
    .ak-public .ak-public-sidebar { z-index: 1035; }
}
@media (prefers-reduced-motion: reduce) {
    .ak-public-sidebar, .ak-public-page { transition: none !important; }
}
/* Non-Bootstrap fallback for appearance drawer. */
body.ak-settings-fallback-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1590;
    background: rgba(0,0,0,.52);
}
body.ak-settings-fallback-open .ak-settings-panel { display: block !important; visibility: visible !important; }

/* Elevate the backdrop as well as the panel (not just the offcanvas). */
body.ak-settings-open > .offcanvas-backdrop { z-index: 1590 !important; }
body.ak-settings-fallback-open .ak-settings-panel {
    position: fixed !important;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    overflow-y: auto;
    background: var(--ak-surface);
    z-index: 1600 !important;
}