/* =========================================================
   Reflect Platform — Default Theme
   Approved palette (do not alter):
   Primary   #0C1B33
   Secondary #23324A
   Accent    #B98552
   Background#F6F2EC
   Surface   #FFFFFF
   ========================================================= */

/* ---------- Approved design tokens ---------- */
:root {
    --reflect-primary: #0C1B33 !important;
    --reflect-secondary: #23324A !important;
    --reflect-accent: #B98552 !important;
    --reflect-background: #F6F2EC !important;
    --reflect-surface: #FFFFFF !important;

    --app-bg: #F6F2EC !important;
    --app-surface: #FFFFFF !important;
    --app-text: #0C1B33 !important;
    --app-muted: #23324A !important;
    --app-border: rgba(35, 50, 74, 0.16) !important;
    --app-sidebar: #0C1B33 !important;
    --app-sidebar-hover: #23324A !important;
    --app-accent: #B98552 !important;
    --app-accent-soft: rgba(185, 133, 82, 0.18) !important;

    --dashboard-bg: #F6F2EC !important;
    --dashboard-surface: #FFFFFF !important;
    --dashboard-text: #0C1B33 !important;
    --dashboard-muted: #23324A !important;
    --dashboard-border: rgba(35, 50, 74, 0.14) !important;
    --dashboard-primary: #0C1B33 !important;
    --dashboard-primary-hover: #23324A !important;
    --dashboard-accent: #B98552 !important;

    --reflect-bg: #F6F2EC !important;
    --reflect-surface-strong: #FFFFFF !important;
    --reflect-text: #0C1B33 !important;
    --reflect-muted: #23324A !important;
    --reflect-border: rgba(35, 50, 74, 0.14) !important;
    --reflect-primary-hover: #23324A !important;

    --reflect-radius-sm: 10px;
    --reflect-radius-md: 14px;
    --reflect-radius-lg: 18px;
    --reflect-shadow-sm: 0 8px 22px rgba(12, 27, 51, 0.07);
    --reflect-shadow-md: 0 16px 40px rgba(12, 27, 51, 0.10);
    --reflect-transition: 180ms ease;
}

/* ---------- Base ---------- */
html {
    direction: rtl;
    background: #F6F2EC;
}

body.reflect-app {
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(185, 133, 82, 0.10),
            transparent 34%
        ),
        #F6F2EC !important;
    color: #0C1B33 !important;
}

/* ---------- Top bar ---------- */
.app-topbar {
    min-height: var(--app-topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(12, 27, 51, 0.98) !important;
    box-shadow: 0 10px 28px rgba(12, 27, 51, 0.14);
}

.app-brand {
    color: #FFFFFF !important;
}

.app-brand-mark {
    border: 1px solid rgba(185, 133, 82, 0.65) !important;
    background: #23324A !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.app-brand-name {
    color: #FFFFFF !important;
}

.topbar-user-name {
    color: rgba(255, 255, 255, 0.86) !important;
}

.topbar-link,
.topbar-logout,
.topbar-login,
.menu-toggle,
.mobile-back-button,
.notification-bell {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: #23324A !important;
    color: #FFFFFF !important;
    transition:
        background var(--reflect-transition),
        border-color var(--reflect-transition),
        transform var(--reflect-transition);
}

.topbar-link:hover,
.topbar-logout:hover,
.topbar-login:hover,
.menu-toggle:hover,
.mobile-back-button:hover,
.notification-bell:hover {
    border-color: rgba(185, 133, 82, 0.72) !important;
    background: #0C1B33 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.topbar-payments {
    border-color: rgba(185, 133, 82, 0.75) !important;
    background: #B98552 !important;
    color: #FFFFFF !important;
}

.notification-badge {
    border-color: #0C1B33 !important;
}

/* ---------- Main application shell ---------- */
.app-layout {
    background: transparent;
}

.app-sidebar {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    background:
        linear-gradient(
            180deg,
            #0C1B33 0%,
            #0C1B33 68%,
            #23324A 100%
        ) !important;
    box-shadow: -10px 0 30px rgba(12, 27, 51, 0.08);
}

.sidebar-head {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

.sidebar-title {
    color: #FFFFFF !important;
}

.sidebar-subtitle {
    color: rgba(255, 255, 255, 0.58) !important;
}

.sidebar-link,
.sidebar-logout-button {
    color: rgba(255, 255, 255, 0.82) !important;
}

.sidebar-link:hover,
.sidebar-logout-button:hover {
    background: #23324A !important;
    color: #FFFFFF !important;
}

.sidebar-link.is-active {
    background: rgba(185, 133, 82, 0.18) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(185, 133, 82, 0.18);
}

.sidebar-link.is-active::before {
    background: #B98552 !important;
}

.sidebar-icon,
.mobile-bottom-icon {
    color: #B98552 !important;
}

.sidebar-notification-count {
    background: rgba(185, 133, 82, 0.22) !important;
    color: #FFFFFF !important;
}

.sidebar-footer {
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

.app-content {
    background: transparent;
}

/* ---------- Messages ---------- */
.app-message {
    border-color: rgba(35, 50, 74, 0.14) !important;
    border-radius: var(--reflect-radius-md) !important;
    background: #FFFFFF !important;
    box-shadow: var(--reflect-shadow-sm);
}

/* ---------- Shared cards / panels ---------- */
.dashboard-panel,
.reflect-panel,
.dashboard-stat-card,
.reflect-stat-card,
.dashboard-action-card,
.limit-row,
.reflect-health-card,
.reflect-quick-link,
.public-card,
.form-card,
.card,
.panel {
    border-color: rgba(35, 50, 74, 0.14) !important;
    background: #FFFFFF !important;
    box-shadow: var(--reflect-shadow-sm) !important;
}

.dashboard-panel,
.reflect-panel,
.form-card,
.card,
.panel {
    border-radius: var(--reflect-radius-lg) !important;
}

.dashboard-stat-card,
.reflect-stat-card,
.dashboard-action-card,
.limit-row,
.reflect-health-card,
.reflect-quick-link {
    border-radius: var(--reflect-radius-md) !important;
}

.dashboard-stat-card::before,
.reflect-stat-card::before {
    background: #B98552 !important;
}

.dashboard-stat-card.is-active::before,
.dashboard-stat-card.is-participation::before,
.dashboard-stat-card.is-users::before,
.dashboard-stat-card.is-branches::before,
.reflect-stat-card.is-active::before,
.reflect-stat-card.is-plans::before,
.reflect-stat-card.is-users::before {
    background: #B98552 !important;
}

.dashboard-stat-label,
.dashboard-stat-note,
.reflect-stat-label,
.reflect-stat-note,
.panel-header p,
.reflect-panel-header p,
.limit-row-head span,
.limit-note,
.dashboard-action-card span,
.reflect-quick-link span,
.reflect-health-note {
    color: #23324A !important;
}

.dashboard-stat-value,
.reflect-stat-value,
.dashboard-title-wrap h1,
.reflect-dashboard-title h1,
.panel-header h2,
.reflect-panel-header h2,
.dashboard-action-card strong,
.reflect-quick-link strong {
    color: #0C1B33 !important;
}

/* ---------- Dashboard page backgrounds ---------- */
.cafe-dashboard-page,
.reflect-dashboard-page {
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(185, 133, 82, 0.12),
            transparent 36%
        ),
        #F6F2EC !important;
    color: #0C1B33 !important;
}

/* ---------- Buttons and links ---------- */
.dashboard-primary-link,
.reflect-button-primary,
.public-button,
button[type="submit"].primary,
.btn-primary,
.button-primary {
    border-color: #0C1B33 !important;
    background: #0C1B33 !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(12, 27, 51, 0.14);
}

.dashboard-primary-link:hover,
.reflect-button-primary:hover,
.public-button:hover,
button[type="submit"].primary:hover,
.btn-primary:hover,
.button-primary:hover {
    border-color: #23324A !important;
    background: #23324A !important;
    color: #FFFFFF !important;
}

.reflect-button,
.reflect-open-link,
.btn-secondary,
.button-secondary {
    border-color: rgba(35, 50, 74, 0.18) !important;
    background: #FFFFFF !important;
    color: #0C1B33 !important;
}

.reflect-button:hover,
.reflect-open-link:hover,
.btn-secondary:hover,
.button-secondary:hover {
    border-color: #B98552 !important;
    background: #F6F2EC !important;
}

.reflect-panel-link,
.action-arrow,
.reflect-arrow,
a:not(.sidebar-link):not(.app-brand):not(.topbar-link):not(.topbar-login) {
    text-decoration-color: rgba(185, 133, 82, 0.55);
}

.reflect-panel-link,
.action-arrow,
.reflect-arrow {
    color: #B98552 !important;
}

.plan-badge,
.reflect-plan-badge {
    border-color: rgba(185, 133, 82, 0.42) !important;
    background: rgba(185, 133, 82, 0.12) !important;
    color: #0C1B33 !important;
}

/* ---------- Tables ---------- */
.reflect-table thead,
table thead {
    background: #F6F2EC !important;
}

.reflect-table th,
.reflect-table td,
table th,
table td {
    border-bottom-color: rgba(35, 50, 74, 0.12) !important;
}

.reflect-table th,
table th {
    color: #23324A !important;
}

.reflect-table td,
table td {
    color: #0C1B33 !important;
}

.reflect-table tbody tr:hover,
table tbody tr:hover {
    background: rgba(185, 133, 82, 0.06) !important;
}

/* ---------- Forms ---------- */
input,
select,
textarea {
    border: 1px solid rgba(35, 50, 74, 0.20);
    border-radius: var(--reflect-radius-sm);
    background: #FFFFFF;
    color: #0C1B33;
    font: inherit;
    outline: none;
    transition:
        border-color var(--reflect-transition),
        box-shadow var(--reflect-transition),
        background var(--reflect-transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color: #B98552;
    box-shadow: 0 0 0 4px rgba(185, 133, 82, 0.14);
}

label {
    color: #0C1B33;
}

/* ---------- Onboarding / accent surfaces ---------- */
.onboarding-banner {
    border-color: rgba(185, 133, 82, 0.42) !important;
    background: rgba(185, 133, 82, 0.11) !important;
    color: #0C1B33 !important;
}

.onboarding-banner strong {
    color: #0C1B33 !important;
}

.onboarding-banner a {
    border-color: #0C1B33 !important;
    background: #0C1B33 !important;
    color: #FFFFFF !important;
}

/* ---------- Mobile navigation ---------- */
.mobile-bottom-nav {
    border-color: rgba(35, 50, 74, 0.16) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 16px 38px rgba(12, 27, 51, 0.16) !important;
}

.mobile-bottom-link,
.mobile-bottom-button {
    color: #0C1B33 !important;
}

.mobile-bottom-link:hover,
.mobile-bottom-button:hover,
.mobile-bottom-link:active,
.mobile-bottom-button:active {
    background: #F6F2EC !important;
}

/* ---------- RTL safety ---------- */
[dir="rtl"] .reflect-table th,
[dir="rtl"] .reflect-table td,
[dir="rtl"] table th,
[dir="rtl"] table td,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
}

@media (max-width: 900px) {
    .app-sidebar {
        box-shadow: -18px 0 45px rgba(12, 27, 51, 0.28) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   STEP 2 — Component refinement
   Uses only the approved Reflect palette:
   Primary   #0C1B33
   Secondary #23324A
   Accent    #B98552
   Background#F6F2EC
   Surface   #FFFFFF
   ========================================================= */

:root {
    --app-topbar-height: 76px !important;
    --app-sidebar-width: 272px !important;
}

/* ---------- Exact Reflect brand treatment ---------- */
.app-brand {
    min-width: 154px;
    min-height: 42px;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 0 !important;
}

.app-brand::before {
    content: "";
    width: 150px;
    height: 38px;
    display: block;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTM1MS4xNSAzMTkuNTYiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAzMC42LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuNCBCdWlsZCAxMDkpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIzODUuNDUiIHkxPSIxMTEuNTciIHgyPSIyMzEuNjUiIHkyPSIxMTEuNTciIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjM2E3ZGZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjE3IiBzdG9wLWNvbG9yPSIjMmM2MGM0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjQiIHN0b3AtY29sb3I9IiMxZDNlN2YiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuNiIgc3RvcC1jb2xvcj0iIzEwMjM0OCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii43OCIgc3RvcC1jb2xvcj0iIzA3MTAyMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii45MiIgc3RvcC1jb2xvcj0iIzAyMDQwOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxwb2x5Z29uIHBvaW50cz0iOTE5LjM2IDEyOS4xMyA4MjMuNjMgMTI5LjAzIDgyMy41OSAxODcuMDggOTM2LjQ3IDE4Ny4wOCA5MzYuNTUgMjI1LjE4IDc4MC4zMiAyMjUuMTYgNzgwLjMxIDIuNDkgOTM0Ljk0IDIuNDggOTM0Ljk3IDQwLjU5IDgyMy42MSA0MC41OCA4MjMuNjMgOTQuNzggOTE5LjMzIDk0Ljc3IDkxOS4zNiAxMjkuMTMiLz4KICA8cGF0aCBkPSJNMTA3MS45LDE4OC40MWMyMi41Ni41Myw0MC45OC0xMC41Nyw0OS4wOC0zMC42Mmw0My40OC0uMDVjLTIuNzYsMTkuMzgtMTMuMDIsMzUuNS0yNy42OCw0OC4wOS0yMC4xNCwxNy4yOS00NS4yMSwyMi4zOS03MS40LDIyLjk1LTQxLjgzLjg5LTc4LjY3LTE5LjgtOTcuMTItNTcuNjUtMTYuMjQtMzMuMzItMTUuODYtODQuMTksMS41Ny0xMTcuNDcsMTYuMzctMzEuMjYsNDUuNzgtNDkuNzMsODAuODUtNTIuODMsMjIuMzEtMS45Nyw0My40OS0uNzQsNjMuOTQsNy44OSwyNi4zMywxMS4xLDQ0LjI5LDMzLjA1LDQ2Ljk0LDYyLjE4bC00Mi42OS0uMDJjLTQuNTUtMTEuOTYtMTMuMDEtMjAuMjctMjMuOTctMjYuMzUtMTcuMS02LjM1LTM1Ljk3LTguMDgtNTMuNDctMS4zLTM3LjIxLDE0LjQxLTQ1LjAxLDY3LjIxLTMyLjY5LDEwMy40Nyw5LjI4LDI3LjMyLDMzLjcyLDQ0LjI0LDYzLjE2LDQxLjczWiIvPgogIDxwYXRoIGQ9Ik0xNDcuMSwyMjUuMjZsLTc0LjYzLTExMS4yMyw1NC44Ny0uNjZjMTEuODMtLjE0LDIyLjI4LTUuNjIsMzAuNDktMTMuNTEsMTAuNDktMTQuNiwxMC4wOS0zNS4yMy0yLjk2LTQ4LjQtNi41OS02LjY1LTE3LjQyLTEwLjY4LTI3LjE3LTEwLjdsLTEwNC4wOS0uMjNMMCwyLjQ5bDEzNi4yMy4wMmMzOS45MywzLjU0LDcwLjU5LDI0Ljg0LDc0LjM1LDY1LjI4LDMuNzMsNDAuMTItMTkuNTQsNzQuNi02MS4yNCw4MC4zbDUyLjksNzYuOTQtNTUuMTQuMjJaIi8+CiAgPHBvbHlnb24gcG9pbnRzPSI1NTkuODIgOTQuNzcgNTU5Ljk0IDEyOS4wNyA0NzIuMDIgMTI5LjAyIDQ3Mi4wMyAyMjUuMTggNDI4LjA4IDIyNS4xNiA0MjguMDcgMi40OCA1NzQuNjMgMi40OSA1NzQuNiA0MC41OSA0NzIuMDIgNDAuNTggNDcyLjAyIDk0Ljc4IDU1OS44MiA5NC43NyIvPgogIDxwb2x5Z29uIHBvaW50cz0iMTI4NS4xIDIyNS4xNiAxMjM5LjY2IDIyNS4xNSAxMjM5LjY4IDQwLjU4IDExNjkuMjcgNDAuNTkgMTE2OS4yOSAyLjQ4IDEzNTEuMDEgMi40OCAxMzUxLjE1IDQwLjU4IDEyODUuMDcgNDAuNTkgMTI4NS4xIDIyNS4xNiIvPgogIDxwb2x5Z29uIHBvaW50cz0iNzU0LjggMTg3LjA2IDc1NC45IDIyNS4xOSA2MDMuODYgMjI1LjE4IDYwMy44OCAyLjUxIDY0Ny44NCAyLjUgNjQ3LjggMTg3LjEgNzU0LjggMTg3LjA2Ii8+CiAgPHBvbHlnb24gcG9pbnRzPSIyNzQuMzcgNDAuNTggMjc0LjM2IDkzLjIzIDIzMC4zMiA5My4xMSAyMzAuMyAyLjQ4IDM5Mi40NyAyLjQ5IDM5Mi43NyA0MC41OSAyNzQuMzcgNDAuNTgiLz4KICA8cG9seWdvbiBwb2ludHM9IjM5MS40OSAxODcuMDYgMzkxLjc1IDIyNS4xNyAyMzAuNDMgMjI1LjE4IDIzMC4zNyAxMzQuNDUgMjc0LjMxIDEzNC4zMiAyNzQuMjEgMTg3LjA4IDM5MS40OSAxODcuMDYiLz4KICA8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjM3Ny4zMyAxMjguMzggMjMxLjY1IDEyOC4zNiAyNzYuMDEgOTQuNzcgMzg1LjQ1IDk0Ljc3IDM3Ny4zMyAxMjguMzgiLz4KICA8cG9seWdvbiBwb2ludHM9IjEzMDEuNzQgMzA0LjE1IDExNDEuNDkgMzA0LjI2IDExNDEuNDQgMzAxLjM3IDEzMDAuNTEgMzAxLjMyIDEzMDEuNzQgMzA0LjE1Ii8+CiAgPHBvbHlnb24gcG9pbnRzPSIxNzMuNjcgMzA0LjE0IDI5LjYgMzA0LjI2IDI5LjU0IDMwMS4zNyAxNzIuNDkgMzAxLjMyIDE3My42NyAzMDQuMTQiLz4KICA8cGF0aCBkPSJNOTEyLjU1LDMwMi4yNGMxLjUyLDIuMDgsNC4yNyw2LjAxLDQuMzQsOC40cy00LjIxLDcuMDQtNi44LDcuMDVsLTE1LjkxLjA3LS4yMy0yOS40NSwxNC41My4wNGMyLjI4LDAsNi41LDMuNTksNi43Niw1Ljc0cy0xLjQ4LDUuNzItMi42OCw4LjE1Wk05MDkuMjMsMzAwLjE3YzEuMDktLjE0LDIuOTItNC40OCwyLjE4LTUuMzJzLTMuMDQtMi41Mi00LjI4LTIuNjJsLTguOTUtLjc1LS4xNCwxMC4xMywxMS4yLTEuNDNaTTkwOS45MiwzMTMuNzdjMS4zNS0uMSwzLjYtNC40OCwyLjg4LTUuNjItLjU4LS45MS0yLjY2LTIuOS0zLjcyLTNsLTEwLjkyLTEuMDQuMDQsMTAuNTcsMTEuNzEtLjkxWiIvPgogIDxwYXRoIGQ9Ik01NzcuMTUsMjg5LjE2bC4xNiwyOC4zOWMtMi4xOC42Ni01LjI1LTEuMzMtNi42Ni0zLjIybC0xNC42Mi0xOS43MS0uOCwyMi45LTIuNTEtLjI3LS42NC0yNy43MmMtLjA0LTEuNjgsNC44LS45Miw1Ljc4LjQzbDE1LjA4LDIwLjY0LjMzLTIwLjQ5Yy4wMS0uODgsMy44Ny0xLjcsMy44OC0uOTZaIi8+CiAgPHBhdGggZD0iTTEwNTcuMjEsMzE5LjU2bC0yMC4yMi0yNS4wNi0uMSwyMi45MS0zLjgzLjIxLjE0LTI5LjQ2YzIuMzMtLjA3LDUuNCwxLjQ5LDYuNjYsMy4xMmwxNC4xNCwxOC40Mi42OS0yMS41NWgzLjIxcy0uNywzMS40MS0uNywzMS40MVoiLz4KICA8cGF0aCBkPSJNOTYzLjcyLDMxNy45N2MtOS4yOCwyLjAzLTcuODgtMTMuMjMtMTguNDYtMTIuNDJsLS40MSwxMi4yLTMuMzkuNi0uNzMtMzAuMjIsMTUuMDQuMjljMi44Ny4wNSw2LjksNS4wMyw3LjA2LDcuOTYuMjQsNC4yNS0yLjg2LDcuNzktNi43OCwxMC41N2w3LjY1LDExLjAzWk05NTUuMDUsMzAyLjI0YzEuNjEtLjEzLDMuOTQtNC4xOSwzLjQyLTUuNzctLjQ0LTEuMzItMi44LTQuMTQtNC4yNS00LjI1bC05LjUzLS43NC4yNywxMS41NiwxMC4wOS0uOFoiLz4KICA8cGF0aCBkPSJNNzMyLjcxLDMxOC4xNmMtNS45OS0xLjc5LTEwLjc3LTcuNTItMTEuMzMtMTEuOTYtLjc3LTYuMDcsMS4wOC0xMi45Miw2LTE1Ljc2LDYuNjgtMy44NSwxNC4zMS0zLjMxLDE5LjQsMS44LDQuMjksNC4zLDYuMTEsMTEuNywzLjEsMTcuOTgtMi42LDUuNDItOS4zOSwxMC4yNy0xNy4xNyw3Ljk0Wk03NDYuMjQsMzA5LjAxYzEuNzMtMi42NCwxLjA0LTkuMjMtLjczLTExLjg5LTEuNTctMi4zOC02LjI2LTUuNzktOS4yNi01LjY1LTYuNC4zMS0xMC4xOCw0Ljk1LTEwLjg0LDkuMzctLjgsNS4zOSwxLjgxLDEwLjc4LDYuMSwxMi44NCw0Ljg2LDIuMzMsMTAuODUsMS4yNSwxNC43My00LjY2WiIvPgogIDxwYXRoIGQ9Ik02MjQuNjEsMzA2LjUxbC0xMi4wMy0yLjI2LDE2LjIyLTEuODktLjYsMTIuNDljLTcuODMsNS4zMy0xNy4xNyw0Ljk2LTIyLjg2LTEuMTUtNS43Ni02LjE5LTUuMDQtMTUuOTguNjMtMjEuNTYsNS44OC01Ljc4LDE3LjU0LTUuOTYsMjEuNzcsMS41NC0zLjI4LDQuMTctMTIuNDMtOC4zNS0yMC4wMywyLjI1LTMuNzQsNS4yMi0yLjg0LDExLjMyLjQ3LDE1LjI0LDQsNC43NSwxMC44MSw0LjcxLDE1Ljg0LDEuNTNsLjYtNi4xOFoiLz4KICA8cGF0aCBkPSJNMTA5Mi41NywzMTguMTlsLTguODUtLjU2di0yOS4zOHM5LjQ3LS4xLDkuNDctLjFjOS4wNS0uMDksMTUuOTUsNi4wNywxNi4xNSwxNC4wNC4yMiw5LjE3LTYuMywxNi42Ni0xNi43NywxNlpNMTA4Ny41MywzMTQuNDljOS44Ni44MiwxMy4wOS0uNTIsMTYuMDQtNS4yMSwyLjM0LTMuNzEsMS44MS0xMC44MS0xLjE1LTEzLjYyLTMuNDgtMy4zMS04LjE1LTMuODctMTUuMDctMy43MmwuMTcsMjIuNTVaIi8+CiAgPHBhdGggZD0iTTIzMC42OSwzMTcuNjJjLTguOTIsMi42OS04LjI3LTExLjkxLTE5LjAyLTEyLjA1bC0uMzMsMTEuMTEtMy40NS40LS4xOC0yOC45MSwxMi4zNC4xMWM1LjQyLjA1LDkuMzEsMy40Miw5LjUxLDcuODcuMjMsNS4xLTIuNTksOC45Ni03Ljc2LDkuOWw4LjksMTEuNTdaTTIyMS4zMywzMDIuNTljMS4yMi0uMDQsMy41Ny0yLjc4LDMuOTgtNHMtLjc0LTQuNjQtMS45MS01LjEzYy0yLjU5LTEuMS04LjIyLTEuNy0xMi4wMi0yLjExbC4yLDExLjU3LDkuNzUtLjMzWiIvPgogIDxwYXRoIGQ9Ik04NDQuNTgsMzE4LjAyYy0xMC43MywxLjY0LTguODctMTMuMzMtMTguNjYtMTIuMzhsLTEuMjMsMTEuODMtMi41OC4wNC0uNjgtMjkuNTIsMTYuMjYuNzhjMy4xMy4xNSw2LjA4LDYuMjcsNS43OSw4LjkzLS4zOCwzLjUtMi44Myw2LjQ0LTcuMSw4LjgxbDguMTksMTEuNTFaTTgzNC4xMywzMDIuNzVjMS45LS4wMyw1LjA3LTMuMjUsNS4yOS01LjA5LjE5LTEuNTgtMi4yNC01LjI5LTMuODItNS4zOGwtMTAuMi0uNTUtLjAyLDExLjE2LDguNzUtLjE0WiIvPgogIDxwYXRoIGQ9Ik0yNzEuNDgsMzA0LjA2bC0xNC42NC40Mi4xLDkuODksMTUuOTIuMzYtLjA0LDIuNTgtMjAuNTEuNzYtLjAyLTI5LjkxYzcuNzEsMCwxMy45NC0uMjgsMjEuMzQsMS44MS01LjgxLDMuMi05LjIzLDIuMTktMTYuNjYsMS43NWwtLjYsOS4zLDE0LjQuMzUuNzIsMi43WiIvPgogIDxwYXRoIGQ9Ik0xMDAzLjk2LDMxMC45OWMtMi45NC0xLjQ0LTExLjc2LTEuNjgtMTQuODkuMjRsLTIuMDYsNS40NWMtLjQyLDEuMTEtMy4zNS45OC00LjkzLjdsMTEuODgtMjguOCw1LjIyLS4xLDExLjc5LDI5LjRjLTQuNjIuMDEtNS41LTIuMTgtNy4wMS02Ljg4Wk0xMDAyLjU1LDMwNy4wMWwtNS45MS0xNC41MS01Ljk1LDEzLjUxLDExLjg2LDFaIi8+CiAgPHBhdGggZD0iTTQ0Mi42NywyOTIuMjhjLTguMjYtMy4xNy0xMy45MSw1LjAyLTEzLjQzLDExLjI4LjYsNy43MSw3LjgxLDE0LjA0LDE1LjUzLDkuODcsMi41Ny0xLjM5LDQuNzMtMi4yOCw3LjgzLTIuNy0yLjc0LDUuOTktNy4xOSw3Ljc1LTEyLjIxLDguMTktMy43LjMzLTkuMTMtMi42OC0xMS45Ni02LjExLTUuNTctNi43Ny00LjY1LTE2LjU0LDEuODktMjEuNzIsNi4xMi00Ljg2LDE4LjI0LTUuNDMsMjAuOTEsNC40N2wtOC41NS0zLjI4WiIvPgogIDxwYXRoIGQ9Ik00MDEuNjQsMzAzLjE4bC0xNS40MywxLjk3LDEuMTcsOS4xOSwxNS44MS4zOC4wMiwyLjU2LTIwLjgxLjg0LS4wOC0zMC4wNywyMS40NC43NWMtNS43Niw2LjQxLTEwLjIsMi41OS0xNy4yNywyLjdsLS4yOSw5LjVjNi4yOS4yNCw4Ljg3LS4wNywxNS40MywyLjE3WiIvPgogIDxwYXRoIGQ9Ik03OTMuMDEsMjkwLjI2Yy4wMy0xLjE3LDMuMDctMi4yMiw0LjE4LTEuOGwtLjM4LDE5Ljg4Yy0uMTQsNy4zLTYsMTAuNTctMTIuMDQsMTAuMzlzLTExLjQ1LTQuNTktMTEuMjctMTEuNDdsLjUxLTE5LjExLDIuNDktLjAzLjQ5LDE3Ljg4Yy4wOSwzLjI5LDIuNzQsNy4zOSw1LjE4LDguMzQsMy42NiwxLjQzLDEwLjE1LjAyLDEwLjI4LTQuNjVsLjU1LTE5LjQzWiIvPgogIDxwYXRoIGQ9Ik0zMDEuODYsMzAxLjMxbDEwLjM3LjA4LDMuNDguNTFjLjcyLjEtLjMzLDMuNTMtMS4wNiwzLjVsLTEyLjQ1LS41Ny0uMzEsMTMuMDYtMy40My4yNi0uNDQtMjkuOTMsMTguMjcuMDRjLjU5LDAsMi40MSwxLjczLDIuMDIsMi4xLS41Ny41NS0yLjU2LDEuOTUtMy4zNiwxLjkzbC0xMi43LS4zLS4zOSw5LjMyWiIvPgogIDxwYXRoIGQ9Ik03MDQuNTQsMjg4Ljc3bC0xMC42MiwxNy4yM2MtMi4zMywzLjc4LjM1LDExLjY2LTEuMzksMTEuNjhsLTIuOTYuMDNjLTEuNzEuMDIuODktOC43MS0xLjYyLTEyLjhsLTkuOTEtMTYuMThjMS40Ni0uMjQsNC45OSwwLDUuNDcuODJsNy43LDEzLjI0LDcuOTgtMTIuODJjLjUxLS44MiwzLjQ2LTEuMzgsNS4zNy0xLjJaIi8+CiAgPHBhdGggZD0iTTQ4OC4xMSwzMTQuODZjLS4wMywxLjQ4LTMuMjEsMy4wNS0zLjM1LDIuNTUuNTgtOC43Ny4yMi0xNi45Ni0uOTEtMjUuNjQtNS4zOCwxLjU3LTguMjksMS43NC05LjUzLTMuNDJsMjYuMjUuNDRjLTMuMDEsNC45OC02LjM1LDMuNzctMTIuMDQsMy40NGwtLjQxLDIyLjYzWiIvPgogIDxwYXRoIGQ9Ik0zNDQuMzIsMzE0LjE3YzYuMDkuMjUsMTAuMTUuMTQsMTYuMzksMS45NS03LjkzLDEuODQtMTMuMjgsMS45Mi0yMC41NCwxLjk0bC4wMi0yOS43Niw0LjE5LjEzLS4wNiwyNS43NFoiLz4KICA8cG9seWdvbiBwb2ludHM9IjUyNi4yOCAzMTcuNCA1MjEuOTQgMzE3Ljc1IDUyMS44IDI4OC4zNiA1MjYuMTYgMjg4LjM3IDUyNi4yOCAzMTcuNCIvPgo8L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(0) invert(1);
}

.app-brand-mark,
.app-brand-name {
    display: none !important;
}

/* ---------- Refined top bar ---------- */
.app-topbar {
    min-height: 76px !important;
    padding: 0 24px !important;
    gap: 24px !important;
    background: #0C1B33 !important;
    border-bottom: 1px solid rgba(185, 133, 82, 0.24) !important;
    box-shadow: 0 8px 26px rgba(12, 27, 51, 0.17) !important;
}

.app-topbar > .topbar-actions {
    min-width: 0;
}

.app-topbar form {
    display: inline-flex;
    margin: 0;
}

.topbar-actions {
    gap: 7px !important;
}

.topbar-user-name {
    max-width: 180px !important;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.84) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.topbar-link,
.topbar-logout,
.topbar-login {
    min-height: 39px !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.90) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.topbar-link:hover,
.topbar-logout:hover,
.topbar-login:hover {
    border-color: rgba(185, 133, 82, 0.62) !important;
    background: #23324A !important;
    color: #FFFFFF !important;
}

.topbar-payments {
    border-color: #B98552 !important;
    background: #B98552 !important;
    color: #FFFFFF !important;
    box-shadow: 0 7px 18px rgba(12, 27, 51, 0.18) !important;
}

.topbar-payments:hover {
    border-color: #B98552 !important;
    background: #B98552 !important;
    filter: brightness(0.96);
}

.notification-bell,
.menu-toggle,
.mobile-back-button {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: #23324A !important;
    box-shadow: none !important;
}

.notification-bell:hover,
.menu-toggle:hover,
.mobile-back-button:hover {
    border-color: rgba(185, 133, 82, 0.70) !important;
    background: #23324A !important;
}

.notification-badge {
    border: 2px solid #0C1B33 !important;
    box-shadow: 0 4px 10px rgba(12, 27, 51, 0.20);
}

/* ---------- Refined app shell ---------- */
.app-layout {
    grid-template-columns: 272px minmax(0, 1fr) !important;
    background: #F6F2EC !important;
}

.app-sidebar {
    width: 272px !important;
    padding: 0 12px 14px !important;
    border-left: 1px solid rgba(185, 133, 82, 0.18) !important;
    background:
        linear-gradient(
            180deg,
            #0C1B33 0%,
            #0C1B33 72%,
            #23324A 100%
        ) !important;
    box-shadow: -9px 0 28px rgba(12, 27, 51, 0.08) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(185, 133, 82, 0.45) transparent;
}

.app-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(185, 133, 82, 0.42);
}

.sidebar-head {
    padding: 26px 14px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.sidebar-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.sidebar-subtitle {
    max-width: 215px;
    margin-top: 8px !important;
    color: rgba(255, 255, 255, 0.56) !important;
    font-size: 12px !important;
    line-height: 1.75 !important;
}

.sidebar-nav {
    display: grid !important;
    gap: 5px !important;
    padding: 12px 0 !important;
}

.sidebar-link,
.sidebar-logout-button {
    min-height: 47px !important;
    gap: 11px !important;
    padding: 9px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.79) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition:
        background 170ms ease,
        border-color 170ms ease,
        color 170ms ease,
        transform 170ms ease !important;
}

.sidebar-link:hover,
.sidebar-logout-button:hover {
    border-color: rgba(255, 255, 255, 0.07) !important;
    background: #23324A !important;
    color: #FFFFFF !important;
    transform: translateX(-2px);
}

.sidebar-link.is-active {
    border-color: rgba(185, 133, 82, 0.26) !important;
    background: rgba(185, 133, 82, 0.17) !important;
    color: #FFFFFF !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        0 8px 20px rgba(12, 27, 51, 0.15) !important;
}

.sidebar-link.is-active::before {
    top: 10px !important;
    right: -1px !important;
    width: 3px !important;
    height: calc(100% - 20px) !important;
    border-radius: 999px !important;
    background: #B98552 !important;
}

.sidebar-icon {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: rgba(185, 133, 82, 0.08) !important;
    color: #B98552 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.sidebar-link.is-active .sidebar-icon {
    background: rgba(185, 133, 82, 0.18) !important;
    color: #FFFFFF !important;
}

.sidebar-footer {
    margin-top: 10px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.sidebar-notification-count {
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 2px 6px !important;
    margin-right: auto !important;
    background: #B98552 !important;
    color: #FFFFFF !important;
}

.app-content {
    min-width: 0;
    padding: 28px 30px 40px !important;
    background: #F6F2EC !important;
}

/* ---------- Reflect admin dashboard ---------- */
.reflect-dashboard-page {
    margin: -28px -30px -40px !important;
    min-height: calc(100vh - 76px) !important;
    padding: 38px 30px 46px !important;
    background:
        radial-gradient(
            circle at 16% 0%,
            rgba(185, 133, 82, 0.13),
            transparent 34%
        ),
        #F6F2EC !important;
}

.reflect-dashboard-container {
    width: min(1320px, 100%) !important;
}

.reflect-dashboard-header {
    align-items: center !important;
    margin-bottom: 25px !important;
}

.reflect-dashboard-title h1 {
    margin: 0 0 7px !important;
    color: #0C1B33 !important;
    font-size: clamp(32px, 4vw, 45px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.35px;
}

.reflect-dashboard-title p {
    max-width: 690px;
    color: #23324A !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

.reflect-header-actions {
    gap: 10px !important;
}

.reflect-button {
    min-height: 45px !important;
    padding: 9px 17px !important;
    border: 1px solid rgba(35, 50, 74, 0.17) !important;
    border-radius: 11px !important;
    background: #FFFFFF !important;
    color: #0C1B33 !important;
    font-size: 13.5px !important;
    box-shadow: 0 7px 18px rgba(12, 27, 51, 0.06) !important;
}

.reflect-button:hover {
    border-color: rgba(185, 133, 82, 0.58) !important;
    background: #F6F2EC !important;
    transform: translateY(-1px);
}

.reflect-button-primary {
    border-color: #B98552 !important;
    background: #B98552 !important;
    color: #FFFFFF !important;
    box-shadow: 0 9px 22px rgba(185, 133, 82, 0.23) !important;
}

.reflect-button-primary:hover {
    border-color: #B98552 !important;
    background: #B98552 !important;
    color: #FFFFFF !important;
    filter: brightness(0.96);
}

.reflect-stats-grid {
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.reflect-stat-card {
    min-height: 145px !important;
    padding: 21px 21px 19px !important;
    border: 1px solid rgba(35, 50, 74, 0.12) !important;
    border-radius: 17px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 32px rgba(12, 27, 51, 0.065) !important;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease !important;
}

.reflect-stat-card:hover {
    border-color: rgba(185, 133, 82, 0.36) !important;
    box-shadow: 0 17px 38px rgba(12, 27, 51, 0.095) !important;
    transform: translateY(-2px);
}

.reflect-stat-card::before,
.reflect-stat-card.is-active::before,
.reflect-stat-card.is-plans::before,
.reflect-stat-card.is-users::before {
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: #B98552 !important;
}

.reflect-stat-card::after {
    content: "";
    position: absolute;
    left: -34px;
    bottom: -42px;
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background: rgba(185, 133, 82, 0.07);
    pointer-events: none;
}

.reflect-stat-label {
    position: relative;
    z-index: 1;
    color: #23324A !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

.reflect-stat-value {
    position: relative;
    z-index: 1;
    margin-top: 13px !important;
    color: #0C1B33 !important;
    font-size: clamp(34px, 4vw, 41px) !important;
    line-height: 1 !important;
}

.reflect-stat-note {
    position: relative;
    z-index: 1;
    margin-top: 12px !important;
    color: #23324A !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    opacity: 0.84;
}

.reflect-main-grid {
    grid-template-columns: minmax(0, 1.62fr) minmax(310px, 0.68fr) !important;
    gap: 20px !important;
}

.reflect-panel {
    border: 1px solid rgba(35, 50, 74, 0.12) !important;
    border-radius: 19px !important;
    background: #FFFFFF !important;
    box-shadow: 0 15px 38px rgba(12, 27, 51, 0.075) !important;
}

.reflect-panel-header {
    min-height: 88px;
    padding: 20px 22px !important;
    border-bottom: 1px solid rgba(35, 50, 74, 0.11) !important;
    background: #FFFFFF !important;
}

.reflect-panel-header h2 {
    color: #0C1B33 !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
}

.reflect-panel-header p {
    margin-top: 5px !important;
    color: #23324A !important;
    font-size: 13px !important;
    opacity: 0.84;
}

.reflect-panel-link {
    padding: 8px 11px;
    border-radius: 9px;
    color: #B98552 !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

.reflect-panel-link:hover {
    background: rgba(185, 133, 82, 0.09);
    text-decoration: none !important;
}

.reflect-table thead {
    background: #F6F2EC !important;
}

.reflect-table th,
.reflect-table td {
    padding: 14px 15px !important;
    border-bottom: 1px solid rgba(35, 50, 74, 0.10) !important;
}

.reflect-table th {
    color: #23324A !important;
    font-size: 12.5px !important;
}

.reflect-table td {
    color: #0C1B33 !important;
    font-size: 13.5px !important;
}

.reflect-table tbody tr:hover {
    background: rgba(185, 133, 82, 0.055) !important;
}

.reflect-cafe-name {
    color: #0C1B33 !important;
}

.reflect-plan-badge {
    border-color: rgba(185, 133, 82, 0.35) !important;
    background: rgba(185, 133, 82, 0.09) !important;
    color: #0C1B33 !important;
}

.reflect-open-link {
    min-height: 32px !important;
    padding: 5px 12px !important;
    border: 1px solid rgba(35, 50, 74, 0.16) !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    color: #0C1B33 !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

.reflect-open-link:hover {
    border-color: #B98552 !important;
    background: #F6F2EC !important;
}

.reflect-side-content {
    padding: 20px !important;
}

.reflect-health-card {
    padding: 18px !important;
    border: 1px solid rgba(35, 50, 74, 0.12) !important;
    border-radius: 15px !important;
    background: #F6F2EC !important;
    box-shadow: none !important;
}

.reflect-health-top strong,
.reflect-health-rate {
    color: #0C1B33 !important;
}

.reflect-progress {
    overflow: hidden !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: rgba(35, 50, 74, 0.12) !important;
}

.reflect-progress-bar {
    border-radius: 999px !important;
    background: #B98552 !important;
}

.reflect-health-note {
    color: #23324A !important;
    opacity: 0.82;
}

.reflect-quick-links {
    gap: 11px !important;
}

.reflect-quick-link {
    min-height: 86px;
    padding: 15px !important;
    border: 1px solid rgba(35, 50, 74, 0.11) !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

.reflect-quick-link:hover {
    border-color: rgba(185, 133, 82, 0.50) !important;
    background: #F6F2EC !important;
    box-shadow: 0 9px 22px rgba(12, 27, 51, 0.06) !important;
}

.reflect-quick-link strong {
    color: #0C1B33 !important;
}

.reflect-quick-link span {
    color: #23324A !important;
    opacity: 0.84;
}

.reflect-arrow {
    color: #B98552 !important;
}

/* ---------- Café/account dashboard ---------- */
.cafe-dashboard-page {
    margin: -28px -30px -40px !important;
    min-height: calc(100vh - 76px) !important;
    padding: 38px 30px 46px !important;
    background:
        radial-gradient(
            circle at 16% 0%,
            rgba(185, 133, 82, 0.12),
            transparent 34%
        ),
        #F6F2EC !important;
}

.dashboard-container {
    width: min(1320px, 100%) !important;
    margin: 0 auto !important;
}

.dashboard-header {
    align-items: center !important;
    margin-bottom: 24px !important;
}

.dashboard-title-wrap h1 {
    color: #0C1B33 !important;
    font-size: clamp(31px, 4vw, 43px) !important;
}

.dashboard-title-wrap p {
    color: #23324A !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

.plan-badge {
    border-color: rgba(185, 133, 82, 0.36) !important;
    background: rgba(185, 133, 82, 0.10) !important;
    color: #0C1B33 !important;
}

.stats-grid {
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.dashboard-stat-card {
    min-height: 140px !important;
    padding: 20px !important;
    border: 1px solid rgba(35, 50, 74, 0.12) !important;
    border-radius: 17px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(12, 27, 51, 0.065) !important;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease !important;
}

.dashboard-stat-card:hover {
    border-color: rgba(185, 133, 82, 0.35) !important;
    box-shadow: 0 17px 36px rgba(12, 27, 51, 0.09) !important;
    transform: translateY(-2px);
}

.dashboard-stat-card::before,
.dashboard-stat-card.is-active::before,
.dashboard-stat-card.is-participation::before,
.dashboard-stat-card.is-users::before,
.dashboard-stat-card.is-branches::before {
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: #B98552 !important;
}

.dashboard-stat-label,
.dashboard-stat-note {
    color: #23324A !important;
}

.dashboard-stat-value {
    color: #0C1B33 !important;
}

.dashboard-main-grid {
    gap: 20px !important;
}

.dashboard-panel {
    border: 1px solid rgba(35, 50, 74, 0.12) !important;
    border-radius: 19px !important;
    background: #FFFFFF !important;
    box-shadow: 0 15px 38px rgba(12, 27, 51, 0.075) !important;
}

.panel-header {
    min-height: 86px;
    padding: 20px 22px !important;
    border-bottom: 1px solid rgba(35, 50, 74, 0.11) !important;
}

.panel-header h2 {
    color: #0C1B33 !important;
    font-size: 21px !important;
}

.panel-header p {
    color: #23324A !important;
    opacity: 0.84;
}

.dashboard-action-card {
    border-color: rgba(35, 50, 74, 0.11) !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

.dashboard-action-card:hover {
    border-color: rgba(185, 133, 82, 0.48) !important;
    background: #F6F2EC !important;
    box-shadow: 0 10px 24px rgba(12, 27, 51, 0.06) !important;
}

.dashboard-primary-link {
    border-color: #B98552 !important;
    background: #B98552 !important;
    color: #FFFFFF !important;
    box-shadow: 0 9px 22px rgba(185, 133, 82, 0.23) !important;
}

.dashboard-primary-link:hover {
    border-color: #B98552 !important;
    background: #B98552 !important;
    filter: brightness(0.96);
}

/* ---------- Small finishing details ---------- */
button,
a {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: rgba(185, 133, 82, 0.26);
    color: #0C1B33;
}

:focus-visible {
    outline: 3px solid rgba(185, 133, 82, 0.48) !important;
    outline-offset: 2px;
}

/* ---------- Responsive refinement ---------- */
@media (max-width: 1100px) {
    .reflect-main-grid,
    .dashboard-main-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    :root {
        --app-topbar-height: 68px !important;
    }

    .app-topbar {
        min-height: 68px !important;
        padding: 0 14px !important;
    }

    .app-brand {
        min-width: 120px;
    }

    .app-brand::before {
        width: 118px;
        height: 31px;
    }

    .app-layout {
        display: block !important;
    }

    .app-sidebar {
        width: min(290px, 88vw) !important;
    }

    .app-content {
        padding: 18px 16px 92px !important;
    }

    .reflect-dashboard-page,
    .cafe-dashboard-page {
        margin: -18px -16px -92px !important;
        padding: 24px 15px 104px !important;
        min-height: calc(100vh - 68px) !important;
    }
}

@media (max-width: 760px) {
    .reflect-dashboard-header,
    .dashboard-header {
        align-items: stretch !important;
        gap: 16px !important;
    }

    .reflect-header-actions {
        width: 100%;
        grid-template-columns: 1fr 1fr !important;
    }

    .reflect-button {
        width: 100% !important;
    }

    .reflect-panel-header,
    .panel-header {
        align-items: flex-start !important;
        min-height: auto;
    }

    .topbar-user-name {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .reflect-header-actions {
        grid-template-columns: 1fr !important;
    }

    .reflect-dashboard-title h1,
    .dashboard-title-wrap h1 {
        font-size: 29px !important;
    }

    .reflect-stat-card,
    .dashboard-stat-card {
        min-height: 128px !important;
    }
}

/* =========================================================
   STEP 3 — Final structural refinement
   No colors, routes, permissions, functions, or menu items changed.
   Activity Log remains in both of its intended navigation sections.
   ========================================================= */

/* ---------- More compact top header ---------- */
:root {
    --app-topbar-height: 70px !important;
}

.app-topbar {
    min-height: 70px !important;
    padding-inline: 20px !important;
    gap: 18px !important;
}

.app-brand {
    min-width: 136px !important;
    min-height: 36px !important;
}

.app-brand::before {
    width: 132px !important;
    height: 31px !important;
}

.topbar-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.topbar-user-name {
    min-height: 36px !important;
    max-width: 155px !important;
    padding-inline: 8px !important;
    margin-inline: 2px !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px !important;
}

.topbar-link,
.topbar-logout,
.topbar-login {
    min-height: 36px !important;
    padding: 6px 11px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
}

.notification-bell,
.menu-toggle,
.mobile-back-button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}

/* ---------- Let the page handle desktop scrolling ---------- */
/* Removes the visually separate sidebar scrollbar without deleting links. */
@media (min-width: 901px) {
    .app-layout {
        align-items: stretch !important;
    }

    .app-sidebar {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: calc(100vh - 70px) !important;
        max-height: none !important;
        overflow: visible !important;
        align-self: stretch !important;
    }

    .app-content {
        overflow: visible !important;
    }
}

/* ---------- Sidebar rhythm and section separation ---------- */
.app-sidebar {
    width: 264px !important;
    padding-inline: 11px !important;
}

.app-layout {
    grid-template-columns: 264px minmax(0, 1fr) !important;
}

.sidebar-head {
    padding: 22px 13px 17px !important;
}

.sidebar-nav {
    gap: 4px !important;
    padding-block: 10px !important;
}

.sidebar-link,
.sidebar-logout-button {
    min-height: 44px !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
}

.sidebar-icon {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    font-size: 15px !important;
}

.sidebar-footer {
    position: relative;
    margin-top: 14px !important;
    padding-top: 17px !important;
}

.sidebar-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10px;
    left: 10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
}

/* ---------- Content spacing ---------- */
.app-content {
    padding: 24px 26px 36px !important;
}

.reflect-dashboard-page,
.cafe-dashboard-page {
    margin: -24px -26px -36px !important;
    min-height: calc(100vh - 70px) !important;
    padding: 31px 26px 40px !important;
}

/* ---------- Refined page title ---------- */
.reflect-dashboard-header,
.dashboard-header {
    margin-bottom: 20px !important;
}

.reflect-dashboard-title h1,
.dashboard-title-wrap h1 {
    margin-bottom: 5px !important;
    font-size: clamp(31px, 3.4vw, 39px) !important;
    line-height: 1.22 !important;
}

.reflect-dashboard-title p,
.dashboard-title-wrap p {
    max-width: 700px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.reflect-header-actions,
.dashboard-header-actions {
    gap: 9px !important;
}

.reflect-button,
.dashboard-primary-link {
    min-height: 42px !important;
    border-radius: 10px !important;
}

/* ---------- More compact KPI cards ---------- */
.reflect-stats-grid,
.stats-grid {
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.reflect-stat-card,
.dashboard-stat-card {
    min-height: 119px !important;
    padding: 17px 18px 16px !important;
    border-radius: 15px !important;
}

.reflect-stat-card::after {
    left: -43px !important;
    bottom: -53px !important;
    width: 112px !important;
    height: 112px !important;
}

.reflect-stat-label,
.dashboard-stat-label {
    font-size: 13px !important;
}

.reflect-stat-value,
.dashboard-stat-value {
    margin-top: 10px !important;
    font-size: clamp(31px, 3.5vw, 36px) !important;
}

.reflect-stat-note,
.dashboard-stat-note {
    margin-top: 9px !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
}

/* ---------- Better balance between table and operating summary ---------- */
.reflect-main-grid {
    grid-template-columns: minmax(0, 1.82fr) minmax(292px, 0.64fr) !important;
    gap: 18px !important;
}

.dashboard-main-grid {
    gap: 18px !important;
}

.reflect-panel,
.dashboard-panel {
    border-radius: 17px !important;
}

.reflect-panel-header,
.panel-header {
    min-height: 76px !important;
    padding: 17px 20px !important;
}

.reflect-panel-header h2,
.panel-header h2 {
    font-size: 20px !important;
}

.reflect-panel-header p,
.panel-header p {
    margin-top: 3px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

/* ---------- Compact data table ---------- */
.reflect-table th,
.reflect-table td {
    padding: 12px 14px !important;
}

.reflect-table th {
    font-size: 12px !important;
}

.reflect-table td {
    font-size: 13px !important;
}

.reflect-open-link {
    min-height: 30px !important;
    padding: 4px 11px !important;
}

/* ---------- Operating summary ---------- */
.reflect-side-content {
    padding: 17px !important;
}

.reflect-health-card {
    padding: 16px !important;
    border-radius: 14px !important;
}

.reflect-health-top {
    gap: 12px !important;
}

.reflect-progress {
    height: 9px !important;
}

.reflect-quick-links {
    gap: 9px !important;
}

.reflect-quick-link {
    min-height: 76px !important;
    padding: 13px 14px !important;
    border-radius: 13px !important;
}

/* ---------- Prevent accidental clipping ---------- */
.reflect-table-wrap,
.reflect-panel,
.dashboard-panel,
.app-content {
    min-width: 0;
}

.reflect-table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(185, 133, 82, 0.40) transparent;
}

/* ---------- Responsive preservation ---------- */
@media (max-width: 1100px) {
    .reflect-main-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    :root {
        --app-topbar-height: 68px !important;
    }

    .app-layout {
        display: block !important;
    }

    .app-sidebar {
        width: min(290px, 88vw) !important;
        height: calc(100vh - 68px) !important;
        max-height: calc(100vh - 68px) !important;
        overflow-y: auto !important;
    }

    .app-content {
        padding: 18px 16px 92px !important;
    }

    .reflect-dashboard-page,
    .cafe-dashboard-page {
        margin: -18px -16px -92px !important;
        padding: 24px 15px 104px !important;
        min-height: calc(100vh - 68px) !important;
    }
}

@media (max-width: 760px) {
    .topbar-actions {
        gap: 5px !important;
    }

    .reflect-stat-card,
    .dashboard-stat-card {
        min-height: 114px !important;
    }
}

/* =========================================================
   STEP 4 — Stable sidebar fix
   Fixes stretched navigation rows on long pages.
   ========================================================= */

@media (min-width: 901px) {
    .app-layout {
        align-items: start !important;
    }

    .app-sidebar {
        position: sticky !important;
        top: 70px !important;
        align-self: start !important;

        height: calc(100vh - 70px) !important;
        min-height: 0 !important;
        max-height: calc(100vh - 70px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    .sidebar-head,
    .sidebar-footer {
        flex: 0 0 auto !important;
    }

    .sidebar-nav {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: max-content !important;

        align-content: start !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .sidebar-link,
    .sidebar-logout-button {
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;

        flex: 0 0 auto !important;
        align-self: start !important;
    }

    .sidebar-link.is-active {
        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;
    }
}

/* Subtle, stable scrollbar */
.app-sidebar {
    scrollbar-width: thin !important;
    scrollbar-color:
        rgba(185, 133, 82, 0.48)
        rgba(255, 255, 255, 0.04) !important;
}

.app-sidebar::-webkit-scrollbar {
    width: 6px !important;
}

.app-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04) !important;
}

.app-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(185, 133, 82, 0.48) !important;
}

.app-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(185, 133, 82, 0.68) !important;
}