/**
 * Layout shell — sidebar, header, content
 * Preserves .side-bar, .side-bar-collapse, .small-view-button, sidebar-collapse
 */

body:not(.lockscreen).ds-app-shell {
    background-color: var(--background) !important;
    color: var(--text-primary);
}

body:not(.lockscreen).ds-app-shell > .thetop {
    min-height: 100vh;
    background-color: var(--background);
}

/* Sidebar */
body:not(.lockscreen) aside.side-bar {
    width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: var(--surface) !important;
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: width var(--transition), max-width var(--transition);
}

body:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link,
body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-hover {
    border-radius: 12px;
    margin-inline: 0.15rem;
}

body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active svg,
body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active i {
    color: var(--primary) !important;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    min-height: var(--header-height);
    padding: 0.65rem 0.85rem;
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-active));
    color: var(--text-on-primary);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    transition: filter var(--transition-fast), box-shadow var(--transition-fast);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand:hover {
    filter: brightness(1.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.95);
    padding: 3px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand__text,
body:not(.lockscreen) aside.side-bar .ds-sidebar-brand .side-bar-heading {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-on-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-brand__status {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
    flex-shrink: 0;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search-wrap {
    padding: 0.75rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search:focus-within {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-search input::placeholder {
    color: var(--text-muted);
}

/* Quick + Recent */
body:not(.lockscreen) aside.side-bar .ds-sidebar-quick,
body:not(.lockscreen) aside.side-bar .ds-sidebar-recent {
    padding: 0.55rem 0.75rem 0.35rem;
    border-bottom: 1px solid var(--border);
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    padding-inline: 0.15rem;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn,
body:not(.lockscreen) aside.side-bar .ds-sidebar-recent__list a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--surface-secondary);
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    min-width: 0;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn span,
body:not(.lockscreen) aside.side-bar .ds-sidebar-recent__list a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn i,
body:not(.lockscreen) aside.side-bar .ds-sidebar-recent__list a i {
    color: var(--primary);
    font-size: 0.75rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-quick__btn:hover,
body:not(.lockscreen) aside.side-bar .ds-sidebar-recent__list a:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    transform: translateY(-1px);
    text-decoration: none;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-recent__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body:not(.lockscreen) aside.side-bar .ds-sidebar-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 1rem 0.85rem;
}

/* Section headers */
body:not(.lockscreen) aside.side-bar .ds-nav-section {
    padding: 0.85rem 0.75rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link,
body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-hover {
    border-radius: 12px;
    margin-inline: 0.15rem;
    position: relative;
}

body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important;
    color: var(--primary) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary);
}

body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active svg,
body:not(.lockscreen) aside.side-bar #side-bar a.theme-sidebar-active i {
    color: var(--primary) !important;
}

body:not(.lockscreen) aside.side-bar .ds-nav-group.is-open > .ds-nav-parent {
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}

body:not(.lockscreen) aside.side-bar .ds-nav-chevron {
    transition: transform 0.2s ease;
}

body:not(.lockscreen) aside.side-bar .ds-nav-group.is-open > .ds-nav-parent .ds-nav-chevron {
    transform: rotate(0deg);
}

body:not(.lockscreen) aside.side-bar .ds-nav-child.theme-sidebar-child-active {
    color: var(--primary) !important;
    font-weight: 600;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

body:not(.lockscreen) aside.side-bar .ds-nav-link.is-search-hit,
body:not(.lockscreen) aside.side-bar .ds-nav-child.is-search-hit {
    outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 0;
}

body:not(.lockscreen) aside.side-bar mark.ds-search-mark {
    background: color-mix(in srgb, #fbbf24 55%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

/* Collapsed sidebar (desktop) */
body.sidebar-collapse:not(.lockscreen) aside.side-bar {
    width: var(--sidebar-collapsed-width);
    max-width: var(--sidebar-collapsed-width);
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-search-wrap,
body.sidebar-collapse:not(.lockscreen) aside.side-bar #sidebar-no-results,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .side-bar-heading,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-brand__text,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-quick,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-recent,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-nav-section,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-nav-label,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-nav-chevron,
body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-nav-children {
    display: none !important;
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar .ds-sidebar-brand {
    justify-content: center;
    padding: 0.65rem 0.4rem;
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link {
    justify-content: center;
    padding-inline: 0.55rem;
}

body.sidebar-collapse:not(.lockscreen) aside.side-bar #side-bar a.ds-nav-link[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #111827;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 80;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
    pointer-events: none;
}

/* Header */
.ds-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    min-height: var(--header-height);
}

.ds-header .theme-header-bg {
    background-image: none !important;
    background-color: var(--surface) !important;
}

.ds-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1.25rem;
}

.ds-header-page-title {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

html[data-theme="light"] [data-ds-theme-icon="sun"],
html:not([data-theme="dark"]) [data-ds-theme-icon="sun"] {
    display: none;
}

html[data-theme="dark"] [data-ds-theme-icon="moon"] {
    display: none;
}

html[data-theme="dark"] [data-ds-theme-icon="sun"] {
    display: inline-block;
}

.ds-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.ds-header-btn:hover,
.ds-header-btn:focus-visible {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    color: var(--primary);
    text-decoration: none;
    outline: none;
    box-shadow: var(--focus-ring);
}

.ds-header-btn.ds-header-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}

.ds-header-btn.ds-header-btn-primary:hover,
.ds-header-btn.ds-header-btn-primary:focus-visible {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-on-primary);
}

/* Soften legacy theme-btn-bg inside new header */
.ds-header .theme-btn-bg {
    background-color: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border);
}

.ds-header .theme-btn-bg:hover,
.ds-header .theme-btn-bg:focus {
    background-color: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
    color: var(--primary) !important;
}

.ds-header a.theme-btn-bg {
    color: var(--text-on-primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary);
}

.ds-header a.theme-btn-bg:hover {
    background-color: var(--primary-hover) !important;
    color: var(--text-on-primary) !important;
}

/* Content area */
body:not(.lockscreen) #scrollable-container {
    background: var(--background);
}

body:not(.lockscreen) .content-header h1,
body:not(.lockscreen) section.content-header h1 {
    color: var(--text-primary);
}

/* Mobile drawer overlay already exists; ensure z-index */
body:not(.lockscreen) .overlay {
    background: rgba(15, 23, 42, 0.55);
}

@media (max-width: 991px) {
    body:not(.lockscreen) aside.side-bar.small-view-side-active {
        width: min(var(--sidebar-width), 85vw);
        max-width: min(var(--sidebar-width), 85vw);
        box-shadow: var(--shadow-md);
    }
}