/* File Path: /20/acc6/public_assets/css/acc6-shell.css */

:root {
    --acc6-shell-sidebar: 292px;
    --acc6-shell-sidebar-mini: 86px;
    --acc6-shell-topbar: 74px;

    --acc6-shell-bg: #eef6fb;
    --acc6-shell-surface: rgba(255, 255, 255, .94);
    --acc6-shell-line: rgba(125, 211, 252, .42);

    --acc6-shell-text: #102033;
    --acc6-shell-muted: #64748b;

    --acc6-navy-950: #06172f;
    --acc6-navy-900: #082246;
    --acc6-navy-850: #0b2d5c;
    --acc6-navy-800: #10396f;
    --acc6-navy-700: #15508f;

    --acc6-shell-primary: #38bdf8;
    --acc6-shell-teal: #22d3ee;
    --acc6-shell-green: #14b8a6;
    --acc6-shell-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.acc6-shell-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 6% 4%, rgba(14, 165, 233, .12), transparent 30%),
        radial-gradient(circle at 94% 8%, rgba(30, 64, 175, .10), transparent 30%),
        linear-gradient(180deg, #f8fcff 0%, #eef6fb 48%, #f7fcff 100%) !important;
}

.acc6-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--acc6-shell-sidebar) minmax(0, 1fr);
}

/* Sidebar: dark blue professional finance shell */
.acc6-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 18% 7%, rgba(56,189,248,.24), transparent 30%),
        radial-gradient(circle at 85% 28%, rgba(34,211,238,.13), transparent 30%),
        linear-gradient(180deg, var(--acc6-navy-950) 0%, var(--acc6-navy-900) 46%, var(--acc6-navy-850) 100%);
    color: #fff;
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: -18px 0 60px rgba(15, 23, 42, .18);
    z-index: 70000;
}

.acc6-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.acc6-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.22), transparent 35%),
        linear-gradient(135deg, rgba(56,189,248,.38), rgba(30,64,175,.30));
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 1000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 18px 34px rgba(0,0,0,.20);
}

.acc6-brand-text strong,
.acc6-brand-text span {
    display: block;
}

.acc6-brand-text strong {
    font-weight: 1000;
    font-size: 18px;
    color: #fff;
}

.acc6-brand-text span {
    margin-top: 3px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 800;
}

/* Reduce clutter: hide the old dense quick-chip cloud in the sidebar */
.acc6-sidebar-quick {
    display: none !important;
}

/* Navigation */
.acc6-sidebar-nav {
    overflow: auto;
    padding: 12px 12px 22px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}

.acc6-sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.acc6-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.24);
    border-radius: 999px;
}

.acc6-menu-group {
    margin-bottom: 8px;
    border-radius: 18px;
}

.acc6-menu-title {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 9px 12px;
    background: rgba(255,255,255,.065);
    color: rgba(255,255,255,.96);
    font-family: inherit;
    font-weight: 950;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: right;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.acc6-menu-title b {
    color: rgba(255,255,255,.78);
    transition: transform .18s ease;
}

.acc6-menu-group.is-open .acc6-menu-title b {
    transform: rotate(180deg);
}

.acc6-menu-group.is-active .acc6-menu-title,
.acc6-menu-title:hover {
    background: linear-gradient(135deg, rgba(56,189,248,.26), rgba(255,255,255,.08));
    border-color: rgba(125,211,252,.28);
    color: #fff;
}

.acc6-menu-links {
    display: none;
    padding: 7px 6px 2px;
}

.acc6-menu-group.is-open .acc6-menu-links {
    display: grid;
    gap: 5px;
}

.acc6-menu-links a {
    min-height: 36px;
    border-radius: 14px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-weight: 840;
    font-size: 13px;
    background: rgba(255,255,255,.035);
    border: 1px solid transparent;
}

.acc6-menu-links a:hover,
.acc6-menu-links a.is-active {
    background: rgba(255,255,255,.96);
    color: var(--acc6-navy-900);
    border-color: rgba(255,255,255,.32);
    transform: translateX(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.14);
}

/* Workspace */
.acc6-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.acc6-topbar {
    position: sticky;
    top: 0;
    z-index: 65000;
    min-height: var(--acc6-shell-topbar);
    padding: 12px 22px;
    background: rgba(255,255,255,.90);
    border-bottom: 1px solid rgba(148, 188, 207, .45);
    box-shadow: 0 18px 50px rgba(15,23,42,.075);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.acc6-topbar-start,
.acc6-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acc6-shell-toggle,
.acc6-collapse-toggle,
.acc6-topbar-actions a {
    border: 1px solid rgba(14, 165, 233, .22);
    border-radius: 16px;
    min-height: 40px;
    padding: 8px 13px;
    background: linear-gradient(135deg, #fff, #ecfeff);
    color: #075985;
    font-family: inherit;
    font-weight: 950;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acc6-shell-toggle {
    width: 44px;
    flex-direction: column;
    gap: 5px;
    display: none;
}

.acc6-shell-toggle span {
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #075985;
}

.acc6-topbar-title strong,
.acc6-topbar-title span {
    display: block;
}

.acc6-topbar-title strong {
    color: #102033;
    font-weight: 1000;
}

.acc6-topbar-title span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.acc6-logout {
    color: #b91c1c !important;
    background: linear-gradient(180deg, #fff7f7, #fff) !important;
    border-color: #fecaca !important;
}

.acc6-main {
    width: min(100%, 1540px) !important;
    margin: 0 auto !important;
    padding: 24px !important;
}

.acc6-shell-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 69000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

/* Dashboard shell visuals */
.acc6-dashboard-page {
    display: grid;
    gap: 20px;
}

.acc6-dashboard-hero {
    min-height: 238px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px;
    align-items: center;
    border: 1px solid rgba(125, 211, 252, .70);
    border-radius: 30px;
    padding: 28px;
    background:
        radial-gradient(circle at 14% 18%, rgba(14,165,233,.16), transparent 30%),
        radial-gradient(circle at 92% 10%, rgba(30,64,175,.10), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,249,255,.92));
    box-shadow: var(--acc6-shell-shadow);
}

.acc6-dashboard-overline {
    display: inline-flex;
    width: fit-content;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #eff6ff, #e6fffb);
    border: 1px solid rgba(14,165,233,.25);
    color: #075985;
    font-weight: 1000;
    margin-bottom: 14px;
}

.acc6-dashboard-hero h2 {
    margin: 0 0 14px;
    color: #0b1f3a;
    font-weight: 1000;
    font-size: clamp(32px, 4vw, 52px);
}

.acc6-dashboard-hero p {
    color: #64748b;
    font-weight: 820;
    line-height: 2;
}

.acc6-period-card {
    border-radius: 26px;
    border: 1px solid rgba(14,165,233,.26);
    background: rgba(255,255,255,.82);
    box-shadow: 0 16px 38px rgba(14,165,233,.08);
    padding: 24px;
}

.acc6-period-card span,
.acc6-period-card small {
    display: block;
    color: #64748b;
    font-weight: 850;
}

.acc6-period-card b {
    display: block;
    direction: ltr;
    color: #102033;
    font-size: 19px;
    margin: 12px 0;
}

.acc6-finance-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 16px;
}

.acc6-finance-kpi {
    position: relative;
    min-height: 148px;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(125,211,252,.42);
    background:
        radial-gradient(circle at 12% 86%, rgba(14,165,233,.15), transparent 25%),
        radial-gradient(circle at 88% 10%, rgba(30,64,175,.11), transparent 28%),
        rgba(255,255,255,.94);
    box-shadow: 0 16px 38px rgba(15,23,42,.065);
    padding: 22px;
    color: #102033;
    text-decoration: none;
}

.acc6-finance-kpi:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(14,165,233,.13);
}

.acc6-finance-kpi span {
    display: block;
    color: #64748b;
    font-weight: 950;
}

.acc6-finance-kpi b {
    display: block;
    direction: ltr;
    color: #075985;
    font-size: 28px;
    margin: 15px 0;
    font-weight: 1000;
}

.acc6-finance-kpi small {
    color: #64748b;
    font-weight: 850;
}

.acc6-dashboard-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
}

.acc6-dashboard-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.acc6-dashboard-card {
    border: 1px solid rgba(148,188,207,.44);
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: var(--acc6-shell-shadow);
    padding: 22px;
    overflow: hidden;
}

.acc6-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.acc6-card-title h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 1000;
    color: #102033;
}

.acc6-card-title span,
.acc6-card-title a {
    display: inline-flex;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #eff6ff, #e6fffb);
    border: 1px solid rgba(14,165,233,.25);
    color: #075985;
    font-weight: 950;
    text-decoration: none;
}

.acc6-alert-list,
.acc6-action-list {
    display: grid;
    gap: 10px;
}

.acc6-alert-item,
.acc6-action-item {
    display: block;
    border-radius: 18px;
    border: 1px solid rgba(125,211,252,.32);
    background: rgba(255,255,255,.78);
    padding: 14px 16px;
    color: #102033;
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.acc6-alert-item p {
    margin: 6px 0 0;
    color: #64748b;
    font-weight: 800;
}

.acc6-alert-danger {
    border-color: #fecaca;
    background: #fff1f2;
}

.acc6-alert-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.acc6-alert-success {
    border-color: #86efac;
    background: #ecfdf5;
}

.acc6-mini-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #dbeafe;
}

.acc6-mini-table th {
    background: linear-gradient(135deg, #0b2d5c, #15508f);
    color: #fff;
    padding: 11px 9px;
    font-weight: 950;
}

.acc6-mini-table td {
    border-bottom: 1px solid #e0f2fe;
    padding: 10px 9px;
    text-align: center;
    font-weight: 850;
}

.acc6-mini-table tr:last-child td {
    border-bottom: 0;
}

/* Collapsed mode */
body.acc6-sidebar-collapsed .acc6-shell {
    grid-template-columns: var(--acc6-shell-sidebar-mini) minmax(0, 1fr);
}

body.acc6-sidebar-collapsed .acc6-brand-text,
body.acc6-sidebar-collapsed .acc6-sidebar-quick,
body.acc6-sidebar-collapsed .acc6-menu-title span,
body.acc6-sidebar-collapsed .acc6-menu-title b,
body.acc6-sidebar-collapsed .acc6-menu-links {
    display: none !important;
}

body.acc6-sidebar-collapsed .acc6-sidebar-brand {
    justify-content: center;
    padding-inline: 10px;
}

body.acc6-sidebar-collapsed .acc6-menu-title {
    justify-content: center;
}

body.acc6-sidebar-collapsed .acc6-menu-title::before {
    content: "•";
    font-size: 26px;
    color: #fff;
}

@media (max-width: 1100px) {
    .acc6-finance-kpis,
    .acc6-dashboard-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acc6-dashboard-hero,
    .acc6-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .acc6-shell {
        display: block;
    }

    .acc6-sidebar {
        position: fixed;
        right: 0;
        top: 0;
        width: min(88vw, 330px);
        transform: translateX(110%);
        transition: transform .22s ease;
    }

    body.acc6-shell-open .acc6-sidebar {
        transform: translateX(0);
    }

    body.acc6-shell-open .acc6-shell-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .acc6-shell-toggle {
        display: inline-flex;
    }

    .acc6-collapse-toggle {
        display: none;
    }

    .acc6-topbar {
        padding: 11px 12px;
    }

    .acc6-topbar-actions a:not(.acc6-logout) {
        display: none;
    }

    .acc6-main {
        padding: 14px !important;
    }

    .acc6-finance-kpis,
    .acc6-dashboard-grid-3 {
        grid-template-columns: 1fr;
    }

    .acc6-dashboard-hero {
        padding: 18px;
        border-radius: 22px;
    }
}