/* =========================================================
   BASE / APP SHELL
   - No top gap for topbar
   - Sidebar flush compatible
   - Content spacing handled inside content blocks
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background:
        radial-gradient(circle at top right, rgba(var(--color-brand-primary-rgb), 0.10), transparent 22%),
        radial-gradient(circle at bottom left, rgba(var(--color-brand-accent-rgb), 0.10), transparent 28%),
        var(--color-surface-soft);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

img,
svg,
picture,
video,
canvas {
    display: block;
    max-width: 100%;
}

/* =========================================================
   APP WRAPPER
========================================================= */

.app {
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* =========================================================
   MAIN AREA
   Important:
   - No padding here so topbar can sit flush at the top
   - Content spacing is handled by .section-block / .content / .page-content
========================================================= */

.main {
    flex: 1;
    min-width: 0;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

.main-inner {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* =========================================================
   CONTENT SPACING
   Use these for pages below the topbar
========================================================= */

.section-block,
.content,
.page-content,
.main-content,
.dashboard-content {
    flex: 1;
    min-height: 0;
    padding: var(--layout-container-padding);
    overflow-y: auto;
}

/* If a page uses multiple section-blocks, keep normal page flow */
.section-block {
    display: block;
}

/* Better scrolling behavior inside content area */
.section-block::-webkit-scrollbar,
.content::-webkit-scrollbar,
.page-content::-webkit-scrollbar,
.main-content::-webkit-scrollbar,
.dashboard-content::-webkit-scrollbar {
    width: 8px;
}

.section-block::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.page-content::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track,
.dashboard-content::-webkit-scrollbar-track {
    background: transparent;
}

.section-block::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.page-content::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb,
.dashboard-content::-webkit-scrollbar-thumb {
    background: rgba(var(--color-brand-primary-rgb), 0.24);
    border-radius: var(--radius-pill);
}

.section-block::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.page-content::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover,
.dashboard-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-brand-primary-rgb), 0.38);
}

/* =========================================================
   SURFACE PANEL
========================================================= */

.surface-panel {
    background: var(--color-surface-glass);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-soft);
    backdrop-filter: var(--backdrop-blur);
}

/* =========================================================
   TEXT HELPERS
========================================================= */

.text-muted {
    color: var(--color-text-muted);
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================================
   RESPONSIVE APP SHELL
========================================================= */

@media (max-width: 1199.98px) {
    .app {
        min-height: 100vh;
        overflow: hidden;
    }

    .main {
        width: 100%;
        height: 100vh;
        padding: 0;
    }

    .main-inner {
        min-height: 100vh;
        height: 100vh;
    }

    .section-block,
    .content,
    .page-content,
    .main-content,
    .dashboard-content {
        padding: var(--layout-container-padding);
    }
}

@media (max-width: 767.98px) {
    .main {
        padding: 0;
    }

    .section-block,
    .content,
    .page-content,
    .main-content,
    .dashboard-content {
        padding: var(--layout-container-padding);
    }
}

@media (max-width: 575.98px) {
    .section-block,
    .content,
    .page-content,
    .main-content,
    .dashboard-content {
        padding: var(--layout-container-padding);
    }
}