/*
 * Metronic integration layer
 * The uploaded demo contains the Metronic HTML shell but not its compiled
 * vendor bundle. This file keeps the exact demo1 component vocabulary while
 * providing the project shell, RTL behavior, and legacy-view compatibility.
 */
:root {
    --kt-bg: #f7f8fa;
    --kt-panel: #ffffff;
    --kt-border: #e5e7eb;
    --kt-text: #1f2937;
    --kt-muted: #6b7280;
    --kt-primary: #1b84ff;
    --kt-sidebar-width: 270px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--kt-bg); color: var(--kt-text); font-family: Inter, "Open Sans", Arial, sans-serif; }
html.rtl body, body.rtl { font-family: "Noto Kufi Arabic", Tahoma, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.relative { position: relative; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.start-0 { inset-inline-start: 0; }
.end-0 { inset-inline-end: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.w-full { width: 100%; }
.hidden { display: none; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-5 { gap: 20px; }
.border-e { border-inline-end: 1px solid; }
.border-e-border { border-inline-end-color: var(--kt-border); }
.bg-background { background: var(--kt-panel); }
.pt-5 { padding-top: 20px; }
.py-5 { padding-block: 20px; }
.px-3 { padding-inline: 12px; }
.ps-2 { padding-inline-start: 8px; }
.pe-2 { padding-inline-end: 8px; }
.m-0 { margin: 0; }
.grow { flex-grow: 1; }
.kt-sidebar { width: var(--kt-sidebar-width); background: var(--kt-panel); border-color: var(--kt-border); }
.kt-sidebar + .flex.grow { min-width: 0; margin-inline-start: var(--kt-sidebar-width); }
.kt-sidebar { position: fixed; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; z-index: 20; }
.kt-sidebar, .kt-sidebar + .flex.grow, .kt-header { transition: width .2s ease, margin .2s ease, inset-inline-start .2s ease; }
.kt-sidebar-header { min-height: 72px; border-bottom: 1px solid var(--kt-border); }
.brand-link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-link img { width: 34px; height: 34px; object-fit: contain; }
.brand-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.kt-sidebar-content { min-height: 0; overflow: hidden; }
.kt-scrollable-y-hover { overflow-y: auto; }
.kt-menu { padding: 0 8px; }
.kt-menu-section { padding: 14px 12px 8px; font-size: 11px; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .06em; }
.kt-menu-link { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--kt-text); transition: background .15s, color .15s; }
.kt-menu-link:hover, .kt-menu-item-active > .kt-menu-link { background: #eef6ff; color: var(--kt-primary); }
.kt-menu-icon { display: inline-flex; width: 20px; justify-content: center; color: currentColor; }
.kt-menu-title { flex: 1; font-size: 13px; font-weight: 500; }
.kt-menu-group-link { cursor: pointer; }
.kt-menu-arrow { color: var(--kt-muted); }
.kt-menu-accordion { display: none; padding-inline-start: 20px; border-inline-start: 1px solid var(--kt-border); margin-inline-start: 21px; }
.kt-menu-item:hover > .kt-menu-accordion, .kt-menu-item-active > .kt-menu-accordion { display: block; }
.kt-menu-accordion .kt-menu-link { min-height: 36px; padding-block: 6px; }
.kt-menu-bullet { width: 6px; height: 6px; border-radius: 999px; background: var(--kt-border); flex: 0 0 auto; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--kt-border); }
.sidebar-user img, .user-menu img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user strong { font-size: 12px; }
.sidebar-user small { color: #16a34a; font-size: 11px; margin-top: 2px; }
.legacy-admin-menu { width: 100%; padding: 0 6px 18px; }
.legacy-admin-menu .collapse { display: block !important; height: auto !important; }
.legacy-admin-menu .navbar-nav { float: none !important; display: block; margin: 0; padding: 0; }
.legacy-admin-menu ul { list-style: none; margin: 0; padding: 0; }
.legacy-admin-menu .navbar-nav > li,
.legacy-admin-menu .dropdown-menu > li { float: none !important; display: block; position: relative; }
.legacy-admin-menu .navbar-nav > li > a,
.legacy-admin-menu .dropdown-menu > li > a {
    display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px;
    border-radius: 7px; color: var(--kt-text); font-size: 12px; line-height: 1.45;
}
.legacy-admin-menu .navbar-nav > li > a:hover,
.legacy-admin-menu .navbar-nav > li.active > a,
.legacy-admin-menu .dropdown-menu > li > a:hover,
.legacy-admin-menu .dropdown-menu > li.active > a {
    background: #eef6ff; color: var(--kt-primary);
}
.legacy-admin-menu .navbar-nav > li > a.text-uppercase { font-weight: 700; font-size: 11px; }
.legacy-admin-menu .dropdown-menu {
    position: static; float: none; display: none !important; min-width: 0; margin: 0 0 4px 12px;
    padding: 3px 0 3px 9px; border: 0; border-left: 1px solid var(--kt-border);
    border-radius: 0; background: transparent; box-shadow: none;
}
.legacy-admin-menu li.dropdown.metronic-menu-open > .dropdown-menu { display: block !important; }
.legacy-admin-menu li.dropdown > .metronic-menu-toggle { position: relative; padding-inline-end: 28px; }
.legacy-admin-menu li.dropdown > .metronic-menu-toggle::after {
    position: absolute; inset-inline-end: 10px; color: var(--kt-muted);
    content: "+"; font-size: 15px; font-weight: 400; line-height: 1;
}
.legacy-admin-menu li.dropdown.metronic-menu-open > .metronic-menu-toggle::after { content: "−"; }
.legacy-admin-menu .nav.navbar-nav > li.dropdown > a {
    min-height: 42px; font-size: 12px; font-weight: 600;
}
.legacy-admin-menu .nav.navbar-nav > li.dropdown + li.dropdown { margin-top: 2px; }
.legacy-admin-menu .dropdown-menu > li > a { min-height: 34px; padding-block: 6px; }
.legacy-admin-menu .dropdown-menu .dropdown-menu { margin-left: 9px; }
.legacy-admin-menu .icon-plus { color: var(--kt-muted); font-size: 10px; }
.legacy-admin-menu .fa, .legacy-admin-menu [class^="icon-"] { width: 16px; text-align: center; color: currentColor; }
.legacy-admin-menu .nav-collapse { display: block !important; height: auto !important; overflow: visible !important; }
.rtl .legacy-admin-menu .dropdown-menu { margin-left: 0; margin-right: 12px; border-left: 0; border-right: 1px solid var(--kt-border); }
.rtl .legacy-admin-menu .dropdown-menu .dropdown-menu { margin-right: 9px; }
.kt-header { min-height: 72px; border-bottom: 1px solid var(--kt-border); position: fixed; top: 0; inset-inline-start: var(--kt-sidebar-width); inset-inline-end: 0; z-index: 10; }
.kt-container-fixed { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 28px; }
.header-start, .header-actions { min-height: 72px; }
.header-actions { flex-wrap: wrap; }
.demo1-header-nav { display: flex; align-items: center; gap: 24px; margin-inline-start: 10px; }
.demo1-header-nav a { color: var(--kt-text); font-size: 12px; font-weight: 500; white-space: nowrap; }
.demo1-header-nav a:hover { color: var(--kt-primary); }
.text-secondary-foreground { color: var(--kt-muted); }
.kt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--kt-border); border-radius: 7px; background: var(--kt-panel); color: var(--kt-text); cursor: pointer; font-size: 12px; }
.kt-btn:hover { border-color: #b8c2d1; background: #f9fafb; }
.kt-btn-icon { width: 36px; padding: 0; }
.header-icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--kt-muted); cursor: pointer; }
.header-icon-button:hover { background: #f3f6f9; color: var(--kt-primary); }
.mobile-menu-toggle { display: none; }
.user-menu { display: flex; align-items: center; gap: 8px; padding-inline-start: 8px; font-size: 12px; }
.user-menu-copy strong, .user-menu-copy small { display: block; white-space: nowrap; }
.user-menu-copy strong { font-size: 11px; }
.user-menu-copy small { margin-top: 2px; color: var(--kt-muted); font-size: 10px; }
.logout-link { color: var(--kt-muted); margin-inline-start: 4px; }
.logout-link:hover { color: var(--kt-primary); }
.notification-button { position: relative; }
.notification-count { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 17px; height: 17px; padding: 1px 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; line-height: 15px; }
#content { min-height: calc(100vh - 130px); padding-top: 92px; }
.content-container { padding-block: 28px; }
.content-container > * { max-width: 100%; }
.kt-footer { border-top: 1px solid var(--kt-border); background: var(--kt-panel); }
.kt-footer .kt-container-fixed { min-height: 58px; }
.rtl .kt-menu-accordion { margin-inline-start: 0; }
body.kt-sidebar-collapse .kt-sidebar,
html.kt-sidebar-collapse .kt-sidebar { width: 78px; }
body.kt-sidebar-collapse .kt-sidebar + .flex.grow,
html.kt-sidebar-collapse .kt-sidebar + .flex.grow { margin-inline-start: 78px; }
body.kt-sidebar-collapse .kt-header,
html.kt-sidebar-collapse .kt-header { inset-inline-start: 78px; }
body.kt-sidebar-collapse .brand-name,
html.kt-sidebar-collapse .brand-name,
body.kt-sidebar-collapse .sidebar-user > div,
html.kt-sidebar-collapse .sidebar-user > div { display: none; }
body.kt-sidebar-collapse .kt-sidebar-header,
html.kt-sidebar-collapse .kt-sidebar-header { justify-content: center; padding-inline: 8px; }
body.kt-sidebar-collapse .brand-link { justify-content: center; }
body.kt-sidebar-collapse .sidebar-toggle,
html.kt-sidebar-collapse .sidebar-toggle { transform: rotate(180deg); }
body.kt-sidebar-collapse .legacy-admin-menu .nav.navbar-nav > li > a,
html.kt-sidebar-collapse .legacy-admin-menu .nav.navbar-nav > li > a {
    justify-content: center; padding-inline: 8px; font-size: 0;
}
body.kt-sidebar-collapse .legacy-admin-menu .nav.navbar-nav > li > a > i,
html.kt-sidebar-collapse .legacy-admin-menu .nav.navbar-nav > li > a > i { font-size: 14px; }
body.kt-sidebar-collapse .legacy-admin-menu li.dropdown > .metronic-menu-toggle::after,
html.kt-sidebar-collapse .legacy-admin-menu li.dropdown > .metronic-menu-toggle::after { display: none; }
body.kt-sidebar-collapse .legacy-admin-menu .dropdown-menu,
html.kt-sidebar-collapse .legacy-admin-menu .dropdown-menu { display: none !important; }
body.kt-sidebar-collapse .legacy-admin-menu .nav-collapse,
html.kt-sidebar-collapse .legacy-admin-menu .nav-collapse { padding-inline: 0; }
@media (max-width: 1023px) {
    .lg\:flex { display: none; }
    .kt-sidebar + .flex.grow { margin-inline-start: 0; }
    .kt-header { inset-inline-start: 0; }
    .kt-sidebar { display: flex; transform: translateX(-100%); transition: transform .2s ease; }
    .rtl .kt-sidebar { transform: translateX(100%); }
    body.kt-sidebar-open .kt-sidebar { transform: translateX(0); }
    .legacy-admin-menu .navbar-nav > li > a { min-height: 40px; }
    .demo1-header-nav { display: none; }
    .mobile-menu-toggle { display: inline-flex; }
    .kt-container-fixed { padding-inline: 16px; }
    .user-menu span, .logout-link { display: none; }
}
@media (max-width: 640px) {
    .header-actions .language-switch { display: none; }
    .header-actions { gap: 4px; }
    .user-menu-copy { display: none; }
    .content-container { padding-block: 18px; }
}
@media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    /*
     * The legacy Bootstrap bundle declares .hidden { display:none!important }.
     * Demo1 uses "hidden lg:flex" on the desktop sidebar, so explicitly
     * restore the desktop state after Bootstrap has loaded.
     */
    .kt-sidebar.hidden.lg\:flex { display: flex !important; }
    .kt-sidebar-header.hidden.lg\:flex { display: flex !important; }
}