.app-skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    padding: .65rem 1rem;
    color: var(--color-white);
    background: var(--color-primary-900);
    border-radius: var(--radius-md);
    transform: translateY(-180%);
    transition: transform var(--transition-fast);
}
.app-skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    color: rgba(255, 255, 255, .82);
    background: linear-gradient(180deg, var(--color-primary-900), #08182d 100%);
    box-shadow: 8px 0 28px rgba(4, 15, 29, .13);
    transition: width var(--transition-normal), transform var(--transition-normal);
}
.sidebar-header {
    min-height: var(--topbar-height);
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .8rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .72rem;
    color: var(--color-white);
    text-decoration: none;
}
.sidebar-logo {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    object-fit: contain;
    background: var(--color-white);
    border-radius: 10px;
}
.sidebar-brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; transition: opacity var(--transition-fast), width var(--transition-normal); }
.sidebar-brand-copy strong { font-size: 1.04rem; letter-spacing: .01em; }
.sidebar-brand-copy small { margin-top: .25rem; color: rgba(255,255,255,.55); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-mobile-close { display: none; width: 40px; height: 40px; padding: 0; color: var(--color-white); background: transparent; border: 0; border-radius: var(--radius-md); }
.sidebar-mobile-close:hover { background: rgba(255,255,255,.1); }

.sidebar-nav { min-height: 0; flex: 1 1 auto; padding: .75rem .65rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(255,255,255,.22) transparent; scrollbar-width: thin; }
.sidebar-group + .sidebar-group { margin-top: .72rem; padding-top: .72rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-group-title { height: 24px; padding: 0 .7rem; overflow: hidden; color: rgba(255,255,255,.42); font-size: .66rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; transition: opacity var(--transition-fast), height var(--transition-normal); }
.sidebar-link {
    position: relative;
    width: 100%;
    min-height: 45px;
    display: flex;
    align-items: center;
    gap: .82rem;
    margin: 2px 0;
    padding: .62rem .78rem;
    color: rgba(255,255,255,.75);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.sidebar-link > i:first-child { width: 24px; flex: 0 0 24px; font-size: 1.15rem; text-align: center; }
.sidebar-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--transition-fast), width var(--transition-normal); }
.sidebar-link:hover, .sidebar-link:focus-visible { color: var(--color-white); background: rgba(255,255,255,.09); }
.sidebar-link.is-active { color: var(--color-white); background: var(--color-primary-600); box-shadow: 0 7px 16px rgba(3, 15, 29, .2); }
.sidebar-link.is-active::before { position: absolute; top: 9px; bottom: 9px; left: -10px; width: 3px; content: ""; background: #8dc3ef; border-radius: 0 4px 4px 0; }
.sidebar-submenu-toggle { cursor: pointer; }
.sidebar-chevron { margin-left: auto; font-size: .75rem; transition: transform var(--transition-fast); }
.sidebar-item-has-children.is-open .sidebar-chevron { transform: rotate(180deg); }
.sidebar-submenu { max-height: 0; margin-left: 1.95rem; overflow: hidden; border-left: 1px solid rgba(255,255,255,.15); transition: max-height var(--transition-normal); }
.sidebar-item-has-children.is-open .sidebar-submenu { max-height: 290px; }
.sidebar-submenu a { position: relative; min-height: 36px; display: flex; align-items: center; margin: 2px 0 2px .45rem; padding: .42rem .7rem; color: rgba(255,255,255,.62); border-radius: var(--radius-sm); font-size: .78rem; text-decoration: none; }
.sidebar-submenu a:hover, .sidebar-submenu a:focus-visible, .sidebar-submenu a.is-active { color: var(--color-white); background: rgba(255,255,255,.08); }
.sidebar-submenu a.is-active::before { position: absolute; left: -.69rem; width: 5px; height: 5px; content: ""; background: #8dc3ef; border-radius: 50%; }

.sidebar-footer { flex: 0 0 auto; padding: .68rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-collapse-button { width: 100%; min-height: 45px; display: flex; align-items: center; gap: .82rem; padding: .62rem .78rem; color: rgba(255,255,255,.72); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); font-size: .82rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.sidebar-collapse-button:hover, .sidebar-collapse-button:focus-visible { color: var(--color-white); background: rgba(255,255,255,.1); }
.sidebar-collapse-icon { width: 24px; flex: 0 0 24px; text-align: center; transition: transform var(--transition-normal); }
.sidebar-toggle-text { overflow: hidden; transition: opacity var(--transition-fast), width var(--transition-normal); }

.app-main { min-height: 100vh; display: flex; flex-direction: column; margin-left: var(--sidebar-width); transition: margin-left var(--transition-normal); }
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 1.5rem;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
}
.topbar-leading, .topbar-actions { min-width: 0; display: flex; align-items: center; gap: .8rem; }
.topbar-mobile-toggle { display: none; width: 42px; height: 42px; padding: 0; color: var(--color-primary-900); background: var(--color-primary-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1.35rem; }
.topbar-heading { min-width: 0; }
.topbar-page-title { margin: .05rem 0 0; overflow: hidden; color: var(--color-primary-900); font-size: 1.12rem; font-weight: 740; letter-spacing: -.018em; text-overflow: ellipsis; white-space: nowrap; }
.app-breadcrumb { display: flex; gap: .42rem; align-items: center; margin: 0; padding: 0; color: var(--color-muted); font-size: .7rem; list-style: none; }
.app-breadcrumb li + li::before { margin-right: .42rem; content: "/"; color: #a9b4c0; }
.app-breadcrumb a { color: var(--color-primary-600); text-decoration: none; }
.topbar-icon-button { width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-primary-800); background: var(--color-primary-50); border: 1px solid var(--color-border); border-radius: 50%; text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); }
.topbar-icon-button:hover { color: var(--color-white); background: var(--color-primary-700); }
.topbar-user { max-width: 250px; min-height: 48px; display: flex; align-items: center; gap: .65rem; padding: .25rem .45rem; color: var(--color-text); background: transparent; border: 0; border-radius: var(--radius-md); text-align: left; }
.topbar-user:hover { background: var(--color-primary-50); }
.topbar-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--color-white); background: var(--color-primary-700); border-radius: 50%; font-size: .88rem; font-weight: 750; }
.topbar-user-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.topbar-user-copy strong, .topbar-user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user-copy strong { font-size: .82rem; }
.topbar-user-copy small { margin-top: .18rem; color: var(--color-muted); font-size: .68rem; }
.topbar-user > .bi-chevron-down { color: var(--color-muted); font-size: .68rem; }
.topbar-user-menu { min-width: 245px; }

.app-content { min-width: 0; flex: 1 0 auto; }
.app-content > section > .container,
.app-content > section.container { max-width: 1440px; }
.app-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; color: var(--color-muted); background: var(--color-white); border-top: 1px solid var(--color-border); font-size: .75rem; }

.sidebar-collapsed .app-sidebar, html.sidebar-precollapsed .app-sidebar { width: var(--sidebar-collapsed-width); }
html.sidebar-precollapsed .app-sidebar { overflow: hidden; }
.sidebar-collapsed .app-main, html.sidebar-precollapsed .app-main { margin-left: var(--sidebar-collapsed-width); }
.sidebar-collapsed .sidebar-header { padding-inline: .72rem; justify-content: center; }
.sidebar-collapsed .sidebar-logo { width: 47px; }
.sidebar-collapsed .sidebar-brand-copy, .sidebar-collapsed .sidebar-group-title, .sidebar-collapsed .sidebar-link > span, .sidebar-collapsed .sidebar-toggle-text, .sidebar-collapsed .sidebar-chevron { width: 0; height: 0; opacity: 0; pointer-events: none; }
.sidebar-collapsed .sidebar-group-title { display: block; }
.sidebar-collapsed .sidebar-group + .sidebar-group { margin-top: .4rem; padding-top: .4rem; }
.sidebar-collapsed .sidebar-link, .sidebar-collapsed .sidebar-collapse-button { justify-content: center; gap: 0; padding-inline: .62rem; }
.sidebar-collapsed .sidebar-link.is-active::before { left: -.65rem; }
.sidebar-collapsed .sidebar-submenu { max-height: 0; margin: 0; border: 0; }
.sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
.sidebar-collapsed .sidebar-brand { justify-content: center; }

.sidebar-overlay { position: fixed; inset: 0; z-index: 1030; width: 100%; height: 100%; padding: 0; background: rgba(4,15,29,.58); border: 0; backdrop-filter: blur(2px); }
.sidebar-tooltip { position: fixed; z-index: 1300; max-width: 240px; padding: .42rem .68rem; color: var(--color-white); background: #07172b; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: .75rem; pointer-events: none; }

.guest-layout { min-height: 100vh; display: flex; flex-direction: column; }
.guest-topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: .7rem clamp(1rem, 4vw, 3rem); background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.guest-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--color-primary-900); font-weight: 750; text-decoration: none; }
.guest-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--color-white); background: var(--color-primary-800); border-radius: var(--radius-md); }
.guest-content { flex: 1 0 auto; }
.guest-layout .app-footer { flex: 0 0 auto; }

@media (max-width: 1199.98px) {
    .app-topbar { padding-inline: 1rem; }
    .app-footer { padding-inline: 1rem; }
}

@media (max-width: 991.98px) {
    html.sidebar-precollapsed .app-sidebar { width: var(--sidebar-width); }
    html.sidebar-precollapsed .app-main { margin-left: 0; }
    .app-sidebar, .sidebar-collapsed .app-sidebar { width: min(var(--sidebar-width), calc(100vw - 48px)); transform: translateX(-105%); }
    .app-main, .sidebar-collapsed .app-main { margin-left: 0; }
    .sidebar-mobile-open { overflow: hidden; }
    .sidebar-mobile-open .app-sidebar { transform: translateX(0); }
    .sidebar-mobile-close, .topbar-mobile-toggle { display: grid; place-items: center; }
    .sidebar-collapsed .sidebar-header { padding: .65rem .8rem; justify-content: space-between; }
    .sidebar-collapsed .sidebar-brand-copy, .sidebar-collapsed .sidebar-group-title, .sidebar-collapsed .sidebar-link > span, .sidebar-collapsed .sidebar-toggle-text, .sidebar-collapsed .sidebar-chevron { width: auto; height: auto; opacity: 1; pointer-events: auto; }
    .sidebar-collapsed .sidebar-link, .sidebar-collapsed .sidebar-collapse-button { justify-content: flex-start; gap: .82rem; padding-inline: .78rem; }
    .sidebar-collapsed .sidebar-collapse-icon { transform: none; }
    .sidebar-collapsed .sidebar-submenu { margin-left: 1.95rem; border-left: 1px solid rgba(255,255,255,.15); }
    .sidebar-collapsed .sidebar-item-has-children.is-open .sidebar-submenu { max-height: 290px; }
    .sidebar-footer { display: none; }
    .app-topbar { min-height: 66px; }
}

@media (max-width: 575.98px) {
    .app-topbar { padding: .5rem .7rem; }
    .app-breadcrumb { display: none; }
    .topbar-page-title { font-size: 1rem; }
    .topbar-user-copy, .topbar-user > .bi-chevron-down { display: none; }
    .topbar-user { padding: 0; }
    .topbar-actions { gap: .35rem; }
    .app-footer { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .guest-topbar { padding-inline: 1rem; }
}

@media print {
    .app-sidebar, .app-topbar, .app-footer, .sidebar-overlay, .sidebar-tooltip, .guest-topbar, .no-print { display: none !important; }
    .app-main, .sidebar-collapsed .app-main { min-height: 0; margin: 0 !important; }
    .app-content { margin: 0; padding: 0; }
    body, .app-layout, .guest-layout { color: #000; background: #fff !important; }
    .card, .table-responsive { box-shadow: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar, .app-main, .sidebar-submenu, .sidebar-brand-copy, .sidebar-group-title, .sidebar-link > span, .sidebar-toggle-text, .sidebar-chevron { transition: none; }
}