/*
 * Main layout chrome aligned with the landing: floating glass header, wider body
 * (same side padding as the landing), soft green-tinted background, rounder cards.
 * Glass blur lives on ::before layers — backdrop-filter on the containers themselves
 * would trap position:fixed dropdowns / offcanvas inside them.
 */
:root {
    --farab-shell-pad: clamp(16px, 2.2vw, 40px);
    --farab-shell-max: 1800px;
    --farab-shell-r: 20px;
    --farab-shell-glass: rgba(255, 255, 255, .72);
    --farab-shell-line: rgba(255, 255, 255, .8);
    --farab-shell-shadow: 0 18px 40px -24px rgba(16, 40, 28, .35);
    --farab-shell-edge: inset 0 1px 0 rgba(255, 255, 255, .75);
    --farab-shell-veil: rgba(242, 247, 243, .78);
    --farab-card-shadow: 0 12px 32px -20px rgba(16, 40, 28, .28);
}

[data-bs-theme="dark"] {
    --farab-shell-glass: rgba(18, 28, 22, .62);
    --farab-shell-line: rgba(255, 255, 255, .09);
    --farab-shell-shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
    --farab-shell-edge: inset 0 1px 0 rgba(255, 255, 255, .05);
    --farab-shell-veil: rgba(12, 18, 15, .78);
    --farab-card-shadow: 0 12px 32px -20px rgba(0, 0, 0, .65);
}

/* ── background: tint on a fixed layer (background-attachment: fixed repaints the whole page on every scroll) ── */
body.app-default:has(#kt_app_root) { background-color: #f2f7f3; }
[data-bs-theme="dark"] body.app-default:has(#kt_app_root) { background-color: #0c120f; }

body.app-default:has(#kt_app_root)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 88% -12%, rgba(80, 205, 137, .16), transparent 62%),
        radial-gradient(900px 520px at -6% 8%, rgba(0, 158, 247, .07), transparent 60%),
        radial-gradient(1000px 600px at 50% 110%, rgba(80, 205, 137, .08), transparent 60%);
}

[data-bs-theme="dark"] body.app-default:has(#kt_app_root)::before {
    background:
        radial-gradient(1100px 620px at 88% -12%, rgba(80, 205, 137, .12), transparent 62%),
        radial-gradient(900px 520px at -6% 8%, rgba(0, 158, 247, .05), transparent 60%),
        radial-gradient(1000px 600px at 50% 110%, rgba(80, 205, 137, .06), transparent 60%);
}

/* ── width: landing side padding, capped ────────────────────────────────── */
#kt_app_root .app-container.container-xxl {
    max-width: var(--farab-shell-max);
    padding-inline: var(--farab-shell-pad) !important;
}

/* ── header: floating glass bar ─────────────────────────────────────────── */
#kt_app_header.app-header {
    height: auto !important;
    padding: 14px var(--farab-shell-pad) 0;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

#kt_app_header #kt_app_header_container {
    position: relative;
    z-index: 0;
    max-width: calc(var(--farab-shell-max) - 2 * var(--farab-shell-pad));
    height: 64px;
    padding-inline: 18px !important;
    border-radius: var(--farab-shell-r);
}

#kt_app_header #kt_app_header_container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    border: 1px solid var(--farab-shell-line);
    background: var(--farab-shell-glass);
    box-shadow: var(--farab-shell-shadow), var(--farab-shell-edge);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    pointer-events: none;
}

@media (max-width: 991.98px) {
    #kt_app_header.app-header { padding: 8px 12px 0; }
    #kt_app_header #kt_app_header_container { height: 56px; padding-inline: 14px !important; border-radius: 16px; }
}

/* phones / touch: opaque chrome instead of live blur over scrolling content */
@media (max-width: 991.98px), (hover: none) {
    :root { --farab-shell-glass: rgba(255, 255, 255, .94); --farab-shell-veil: rgba(242, 247, 243, .96); }
    [data-bs-theme="dark"] { --farab-shell-glass: rgba(18, 28, 22, .94); --farab-shell-veil: rgba(12, 18, 15, .96); }
    #kt_app_header #kt_app_header_container::before,
    #kt_app_toolbar.app-toolbar::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── page navigator: frosted strip on the tinted background ─────────────── */
#kt_app_toolbar.app-toolbar {
    background: transparent !important;
    box-shadow: none;
}

#kt_app_toolbar.app-toolbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--farab-shell-veil);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    pointer-events: none;
}

/* ── cards ──────────────────────────────────────────────────────────────── */
#kt_app_content .card {
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
    --bs-card-box-shadow: var(--farab-card-shadow);
}