:root {
    --oc-bg: #f5f7fb;
    --oc-panel: rgba(255, 255, 255, .88);
    --oc-panel-strong: #ffffff;
    --oc-border: rgba(15, 23, 42, .08);
    --oc-border-strong: rgba(15, 23, 42, .12);
    --oc-text: #0f172a;
    --oc-muted: #64748b;
    --oc-accent: #0f6fff;
    --oc-accent-soft: rgba(15, 111, 255, .10);
    --oc-accent-strong: #082c7a;
    --oc-success: #0f9f74;
    --oc-shadow: 0 24px 60px rgba(15, 23, 42, .08);
    --oc-shadow-soft: 0 10px 30px rgba(15, 23, 42, .06);
    --oc-radius-xl: 1.75rem;
    --oc-radius-lg: 1.25rem;
    --oc-radius-md: 1rem;
}

html[data-bs-theme="dark"] {
    --oc-bg: #08101d;
    --oc-panel: rgba(12, 20, 34, .88);
    --oc-panel-strong: #101a2a;
    --oc-border: rgba(148, 163, 184, .16);
    --oc-border-strong: rgba(148, 163, 184, .24);
    --oc-text: #e5edf8;
    --oc-muted: #94a7c4;
    --oc-accent: #4f9bff;
    --oc-accent-soft: rgba(79, 155, 255, .16);
    --oc-accent-strong: #d9e8ff;
    --oc-success: #20c997;
    --oc-shadow: 0 28px 60px rgba(2, 6, 23, .42);
    --oc-shadow-soft: 0 14px 34px rgba(2, 6, 23, .34);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Manrope", sans-serif;
    color: var(--oc-text);
    background:
        radial-gradient(circle at top left, rgba(15, 111, 255, .12), transparent 24%),
        radial-gradient(circle at top right, rgba(34, 197, 94, .08), transparent 18%),
        linear-gradient(180deg, #f8fbff 0%, #f3f5fa 48%, #eef2f8 100%);
}

html[data-bs-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(79, 155, 255, .16), transparent 22%),
        radial-gradient(circle at top right, rgba(32, 201, 151, .10), transparent 18%),
        linear-gradient(180deg, #07101b 0%, #08101d 42%, #0c1727 100%);
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
}

h1 {
    font-size: clamp(1.18rem, 2vw, 1.5rem);
}

h2 {
    font-size: clamp(1rem, 1.55vw, 1.18rem);
}

h3 {
    font-size: .96rem;
}

h4,
h5,
h6 {
    font-size: .88rem;
}

.app-shell {
    min-height: 100vh;
    position: relative;
}

.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, 0) 35%),
        repeating-linear-gradient(90deg, rgba(148, 163, 184, .06) 0 1px, transparent 1px 120px);
    opacity: .45;
}

.shell-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(90vw, 21rem);
    z-index: 1055;
    padding: 1rem;
    transform: translateX(-100%);
    transition: transform .28s ease;
}

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

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 1050;
}

.sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .72rem;
    padding: .78rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: calc(var(--oc-radius-xl) + .25rem);
    color: #e2e8f0;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .18), transparent 26%),
        linear-gradient(180deg, #081120 0%, #0f1b31 46%, #14243f 100%);
    box-shadow: 0 30px 80px rgba(2, 6, 23, .46);
}

.sidebar-panel.is-collapsed {
    align-items: center;
    padding-inline: .55rem;
}

.sidebar-compact-tools {
    display: none;
}

.shell-sidebar.is-compact {
    width: 6.35rem;
}

.sidebar-header {
    width: 100%;
}

.brand-badge {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 1.1rem;
    font-weight: 800;
    color: #07203c;
    background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 30px rgba(15, 111, 255, .24);
}

.sidebar-panel small,
.sidebar-panel .section-kicker {
    color: rgba(191, 219, 254, .74);
}

.sidebar-groups {
    display: grid;
    gap: .48rem;
    overflow-y: auto;
    padding-right: .18rem;
    align-content: start;
}

.sidebar-groups::-webkit-scrollbar {
    width: .45rem;
}

.sidebar-groups::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .35);
    border-radius: 999px;
}

.menu-group {
    padding: .52rem .56rem;
    border-radius: .88rem;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .04);
}

.menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: 0;
    border: 0;
    color: #f8fafc;
    background: transparent;
    text-align: left;
}

.menu-button:hover {
    color: #fff;
}

.menu-button-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.menu-title {
    margin: 0 0 .45rem;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #cbd5e1;
}

.menu-list {
    display: grid;
    gap: .2rem;
    margin-top: .34rem;
}

.menu-group.is-closed .menu-list {
    display: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .56rem;
    padding: .38rem .48rem;
    border-radius: .74rem;
    text-decoration: none;
    color: #e2e8f0;
    border: 1px solid transparent;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
    line-height: 1.08;
    font-size: .78rem;
    font-weight: 700;
}

.nav-icon {
    width: 1.72rem;
    height: 1.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: .62rem;
    color: #dbeafe;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .04);
    font-size: .8rem;
}

.menu-button .nav-icon {
    width: 1.58rem;
    height: 1.58rem;
    background: rgba(255, 255, 255, .08);
}

.nav-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-link:hover,
.sidebar-link.active {
    color: #fff;
    border-color: rgba(125, 211, 252, .16);
    background: linear-gradient(135deg, rgba(15, 111, 255, .18) 0%, rgba(103, 214, 255, .14) 100%);
    transform: translateY(-1px);
}

.sidebar-link:hover .nav-icon,
.sidebar-link.active .nav-icon {
    color: #fff;
    background: rgba(15, 111, 255, .22);
    border-color: rgba(125, 211, 252, .18);
}

.sidebar-link small {
    display: inline;
    margin-top: 0;
    margin-left: .24rem;
    font-size: .58rem;
    color: rgba(191, 219, 254, .72);
}

.menu-chevron {
    color: rgba(191, 219, 254, .76);
    transition: transform .2s ease;
}

.menu-group.is-closed .menu-chevron {
    transform: rotate(-90deg);
}

.sidebar-toggle {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #dbeafe;
    background: rgba(255, 255, 255, .05);
}

.sidebar-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.sidebar-panel.is-collapsed .sidebar-header .fw-bold,
.sidebar-panel.is-collapsed .sidebar-header .section-kicker,
.sidebar-panel.is-collapsed .menu-button,
.sidebar-panel.is-collapsed .nav-copy,
.sidebar-panel.is-collapsed .menu-title {
    display: none;
}

.sidebar-panel.is-collapsed .sidebar-header {
    display: grid;
    justify-items: center;
    gap: .45rem;
    padding-bottom: .65rem !important;
}

.sidebar-panel.is-collapsed .sidebar-header .sidebar-toggle {
    display: none !important;
}

.sidebar-panel.is-collapsed .brand-badge {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .82rem;
}

.sidebar-panel.is-collapsed .sidebar-compact-tools {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: .15rem 0 .4rem;
}

.sidebar-panel.is-collapsed .sidebar-toggle-inline {
    width: 2.55rem;
    height: 2.55rem;
    margin-inline: auto;
}

.workspace-actions-grid {
    display: grid;
    gap: .85rem;
}

.workspace-action-card {
    padding: .9rem;
    border-radius: 1.08rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(246, 249, 252, .94) 100%);
}

.workspace-action-card .compact-panel-title {
    margin-bottom: .2rem;
}

.workspace-action-card .compact-panel-copy {
    margin-bottom: .55rem;
}

.customer-action-head {
    display: flex;
    align-items: flex-start;
    gap: .72rem;
    margin-bottom: .7rem;
}

.customer-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .75rem;
    background: rgba(15, 111, 255, .1);
    color: var(--oc-brand);
    flex: 0 0 auto;
}

.workspace-action-card .field textarea {
    min-height: 92px;
}

.workspace-action-card .field input[type="file"] {
    padding: .58rem;
}

.sidebar-panel.is-collapsed .sidebar-groups {
    width: 100%;
    gap: .34rem;
    padding-right: 0;
}

.sidebar-panel.is-collapsed .menu-group {
    padding: 0;
    border: 0;
    background: transparent;
}

.sidebar-panel.is-collapsed .menu-list {
    display: grid !important;
    gap: .34rem;
    margin-top: 0;
}

.sidebar-panel.is-collapsed .sidebar-link {
    justify-content: center;
    padding: .42rem;
}

.content-wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: .8rem;
    max-width: 1680px;
}

.content-wrap.is-sidebar-compact {
    max-width: 1760px;
}

.topbar-card,
.surface-card,
.hero-card,
.filter-card,
.stat-card,
.list-card,
.table-card,
.kanban-lane {
    border: 1px solid var(--oc-border);
    background: var(--oc-panel);
    backdrop-filter: blur(16px);
    box-shadow: var(--oc-shadow-soft);
}

.surface-card,
.stat-card,
.list-card,
.table-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.surface-card:hover,
.stat-card:hover,
.list-card:hover,
.table-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 111, 255, .12);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .08);
}

.topbar-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .38rem .52rem;
    border-radius: var(--oc-radius-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .72) 100%);
}

.hero-card {
    padding: .44rem .58rem;
    border-radius: var(--oc-radius-xl);
    background:
        radial-gradient(circle at top right, rgba(15, 111, 255, .10), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(248, 250, 252, .96) 100%);
}

.hero-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .08rem;
}

.surface-card,
.filter-card,
.table-card,
.kanban-lane {
    border-radius: var(--oc-radius-lg);
}

.surface-card,
.table-card,
.kanban-lane {
    padding: 1.1rem;
}

.filter-card {
    padding: 1rem;
}

.section-kicker {
    margin: 0 0 .35rem;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--oc-accent);
}

.page-title {
    margin: 0;
    font-size: clamp(1rem, 1.8vw, 1.28rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.02;
}

.page-subtitle,
.text-muted-soft {
    color: var(--oc-muted);
}

.page-subtitle {
    font-size: .72rem;
    line-height: 1.24;
}

.topbar-card .d-flex.gap-3.align-items-start {
    gap: .5rem !important;
    align-items: center !important;
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .38rem;
}

.quick-actions-topbar {
    justify-content: flex-end;
}

.action-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .44rem .64rem;
    border-radius: 999px;
    border: 1px solid var(--oc-border);
    background: rgba(255, 255, 255, .72);
    color: var(--oc-text);
    font-weight: 700;
    font-size: .76rem;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.action-chip-icon {
    min-width: 2.05rem;
    min-height: 2.05rem;
    justify-content: center;
    padding: 0;
    font-size: .92rem;
}

.action-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 111, 255, .18);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
}

.action-chip.is-primary {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0f6fff 0%, #16a3ff 100%);
    box-shadow: 0 18px 35px rgba(15, 111, 255, .25);
}

.toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: space-between;
    align-items: center;
}

.header-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .32rem;
    align-items: center;
    justify-content: flex-start;
}

.toolbar-user {
    display: flex;
    align-items: center;
    gap: .58rem;
    padding: .38rem .48rem;
    border-radius: .82rem;
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--oc-border);
    font-size: .78rem;
}

.toolbar-avatar {
    width: 1.72rem;
    height: 1.72rem;
    display: grid;
    place-items: center;
    border-radius: .75rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0f6fff 0%, #49b4ff 100%);
}

.section {
    margin-top: .66rem;
}

.stats-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.stat-card {
    padding: .82rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 250, 252, .92) 100%);
}

.stat-label {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--oc-muted);
}

.stat-value {
    margin-top: .65rem;
    font-size: clamp(1.12rem, 1.7vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
}

.stat-meta {
    margin-top: .55rem;
    color: var(--oc-muted);
    font-size: .76rem;
}

.chart-shell,
.dual-grid,
.split-grid {
    display: grid;
    gap: 1rem;
}

.list-card {
    padding: .68rem;
    border-radius: .92rem;
    background: rgba(255, 255, 255, .84);
}

html[data-bs-theme="dark"] .list-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .surface-card,
html[data-bs-theme="dark"] .table-card,
html[data-bs-theme="dark"] .hero-card,
html[data-bs-theme="dark"] .topbar-card,
html[data-bs-theme="dark"] .search-panel,
html[data-bs-theme="dark"] .search-group,
html[data-bs-theme="dark"] .toolbar-user,
html[data-bs-theme="dark"] .kanban-card,
html[data-bs-theme="dark"] .kanban-lane,
html[data-bs-theme="dark"] .filter-card {
    color: var(--oc-text);
    background-color: rgba(12, 20, 34, .94);
}

html[data-bs-theme="dark"] .topbar-card {
    background:
        linear-gradient(180deg, rgba(12, 20, 34, .96) 0%, rgba(16, 26, 42, .88) 100%);
}

html[data-bs-theme="dark"] .hero-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .kanban-lane {
    background:
        radial-gradient(circle at top right, rgba(79, 155, 255, .14), transparent 30%),
        linear-gradient(180deg, rgba(16, 26, 42, .96) 0%, rgba(12, 20, 34, .94) 100%);
}

html[data-bs-theme="dark"] .action-chip,
html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-light,
html[data-bs-theme="dark"] .btn-outline-danger,
html[data-bs-theme="dark"] .mobile-toggle {
    color: var(--oc-text);
    background: rgba(16, 26, 42, .92);
    border-color: rgba(148, 163, 184, .18);
}

html[data-bs-theme="dark"] .action-chip:hover {
    background: rgba(23, 37, 61, .98);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    color: var(--oc-text);
    background: rgba(8, 16, 29, .94);
    border-color: rgba(148, 163, 184, .2);
}

html[data-bs-theme="dark"] .empty-state {
    background: rgba(16, 26, 42, .72);
    border-color: rgba(148, 163, 184, .18);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .58rem;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oc-accent-strong);
    background: var(--oc-accent-soft);
    border: 1px solid rgba(15, 111, 255, .12);
    text-decoration: none;
}

.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    border: 1px dashed rgba(100, 116, 139, .28);
    border-radius: 1rem;
    color: var(--oc-muted);
    background: rgba(255, 255, 255, .56);
}

.table-wrap {
    overflow-x: auto;
}

.table-wrap::-webkit-scrollbar {
    height: .55rem;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .32);
    border-radius: 999px;
}

.table-wrap table {
    min-width: 100%;
}

.table-modern {
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(148, 163, 184, .14);
}

.table-modern thead th {
    padding: .7rem .72rem;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oc-muted);
    border-bottom-width: 1px;
}

.table-modern tbody td {
    padding: .68rem .72rem;
    vertical-align: middle;
}

.table-modern tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.table-modern tbody tr:last-child {
    border-bottom: none;
}

.module-toolbar {
    display: flex;
    flex-direction: column;
    gap: .62rem;
}

.billing-workspace .stats-grid {
    margin-bottom: .9rem;
}

.billing-line-card {
    padding: .82rem;
}

.billing-sidebar-stack {
    gap: .85rem !important;
}

.billing-sidebar-card,
.billing-history-card {
    padding: .95rem;
}

.billing-totals-card {
    display: grid;
    gap: .7rem;
}

.billing-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem .9rem;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: .9rem;
    background: rgba(248, 250, 255, .88);
}

.billing-total-row span {
    font-size: .78rem;
    color: var(--oc-muted);
    font-weight: 700;
    letter-spacing: .04em;
}

.billing-total-row strong {
    font-size: .96rem;
    color: var(--oc-text-strong);
    font-weight: 700;
}

.billing-total-row.is-grand {
    background: linear-gradient(135deg, rgba(91, 61, 245, .08) 0%, rgba(94, 211, 255, .08) 100%);
    border-color: rgba(91, 61, 245, .16);
}

.form-label-eyebrow {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oc-muted);
}

.form-control,
.form-select {
    min-height: 2.2rem;
    border-radius: .72rem;
    border-color: rgba(148, 163, 184, .22);
    background: rgba(255, 255, 255, .92);
    font-size: .82rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(15, 111, 255, .32);
    box-shadow: 0 0 0 .28rem rgba(15, 111, 255, .12);
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
    color: rgba(100, 116, 139, .78);
}

.btn {
    border-radius: .78rem;
    font-weight: 700;
    padding: .48rem .72rem;
    font-size: .8rem;
    line-height: 1.2;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-sm {
    padding: .4rem .62rem;
    font-size: .76rem;
    border-radius: .75rem;
}

.btn-primary {
    background: linear-gradient(135deg, #0f6fff 0%, #16a3ff 100%);
    border-color: transparent;
    box-shadow: 0 16px 30px rgba(15, 111, 255, .18);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-light,
.btn-outline-danger {
    background: rgba(255, 255, 255, .72);
}

.kanban-grid {
    display: grid;
    gap: 1rem;
}

.kanban-lane {
    min-height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 250, 252, .92) 100%);
}

.kanban-dropzone {
    display: grid;
    gap: .85rem;
    min-height: 14rem;
}

.kanban-card {
    padding: .72rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--oc-shadow-soft);
    cursor: grab;
    opacity: 1;
    transition: opacity .2s ease;
}

.kanban-card.is-dragging {
    opacity: .6;
}

.kanban-shell,
.calendar-shell {
    overflow: hidden;
}

.kanban-shell-head,
.calendar-shell-head {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin-bottom: 1rem;
}

.kanban-head-actions,
.calendar-head-actions {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.kanban-view-switch,
.calendar-mini-tabs {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.kanban-view-pill,
.calendar-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .46rem .72rem;
    border-radius: 999px;
    background: rgba(241, 245, 249, .9);
    color: var(--oc-muted-strong);
    font-size: .76rem;
    font-weight: 600;
}

.kanban-view-pill.is-active,
.calendar-tab.is-active {
    background: rgba(15, 111, 255, .12);
    color: var(--oc-brand);
}

.kanban-metrics,
.calendar-metrics {
    margin-bottom: 1rem;
}

.kanban-grid-premium {
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    align-items: start;
}

.kanban-lane-premium {
    padding: .9rem;
    border-radius: 1.2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(246, 249, 252, .96) 100%);
}

.kanban-lane-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .85rem;
}

.kanban-lane-title-wrap {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.kanban-stage-dot {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #9aa4b2, #d9e0e8);
    box-shadow: 0 0 0 5px rgba(148, 163, 184, .1);
}

.kanban-stage-dot.stage-new,
.kanban-card-accent.stage-new {
    background: linear-gradient(135deg, #b58af8, #7a5cff);
}

.kanban-stage-dot.stage-contacted,
.kanban-card-accent.stage-contacted {
    background: linear-gradient(135deg, #f59e0b, #fb7185);
}

.kanban-stage-dot.stage-qualified,
.kanban-card-accent.stage-qualified {
    background: linear-gradient(135deg, #22c55e, #06b6d4);
}

.kanban-stage-dot.stage-proposal,
.kanban-card-accent.stage-proposal {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.kanban-stage-dot.stage-won,
.kanban-card-accent.stage-won {
    background: linear-gradient(135deg, #14b8a6, #22c55e);
}

.kanban-stage-dot.stage-lost,
.kanban-card-accent.stage-lost {
    background: linear-gradient(135deg, #f97316, #ef4444);
}

.kanban-lane-title {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
}

.kanban-lane-meta {
    font-size: .7rem;
    color: var(--oc-muted);
    margin-top: .08rem;
}

.kanban-lane-tools {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.kanban-mini-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .8rem;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(148, 163, 184, .14);
    color: var(--oc-muted-strong);
    text-decoration: none;
}

.kanban-dropzone-premium {
    min-height: 20rem;
    padding: .1rem;
    border-radius: 1rem;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.kanban-dropzone-premium.is-active-dropzone {
    background: rgba(15, 111, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(15, 111, 255, .14);
}

.kanban-card-premium {
    position: relative;
    overflow: hidden;
    padding: .88rem;
    border-radius: 1.12rem;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.kanban-card-accent {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

.kanban-card-top {
    display: flex;
    justify-content: space-between;
    gap: .65rem;
    position: relative;
}

.kanban-card-title {
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.35;
}

.kanban-card-subtitle {
    margin-top: .22rem;
    font-size: .72rem;
    color: var(--oc-muted);
    line-height: 1.35;
}

.kanban-card-link {
    font-size: .7rem;
    font-weight: 700;
    color: var(--oc-brand);
    text-decoration: none;
}

.kanban-card-body {
    display: grid;
    gap: .45rem;
    margin-top: .7rem;
}

.kanban-card-tag,
.kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.kanban-card-tag {
    font-size: .72rem;
    color: var(--oc-muted-strong);
}

.kanban-card-chip {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .34rem .56rem;
    border-radius: 999px;
    background: rgba(241, 245, 249, .95);
    font-size: .68rem;
    color: var(--oc-muted-strong);
}

.kanban-card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(15, 111, 255, .16), rgba(168, 85, 247, .18));
    color: var(--oc-brand);
    font-size: .7rem;
    font-weight: 700;
}

.kanban-empty-state {
    display: grid;
    gap: .28rem;
    place-items: center;
    min-height: 9.5rem;
    padding: 1rem;
    border: 1px dashed rgba(148, 163, 184, .34);
    border-radius: 1rem;
    background: rgba(248, 250, 252, .7);
    text-align: center;
}

.kanban-empty-icon {
    font-size: 1.2rem;
    color: var(--oc-brand);
}

.calendar-toolbar {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-bottom: 1rem;
}

.calendar-toolbar-title,
.calendar-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.calendar-toolbar-title {
    font-size: .8rem;
    font-weight: 700;
}

.calendar-toolbar-chip {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .44rem .65rem;
    border-radius: .9rem;
    background: rgba(248, 250, 252, .96);
    border: 1px solid rgba(148, 163, 184, .14);
    font-size: .72rem;
    color: var(--oc-muted-strong);
}

.calendar-grid-shell {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, .16);
    background: linear-gradient(180deg, rgba(244, 248, 255, .95), rgba(255, 255, 255, .98));
}

.calendar-weekdays,
.calendar-grid-premium {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 860px;
}

.calendar-weekday {
    padding: .8rem .55rem;
    background: rgba(220, 232, 252, .9);
    border-right: 1px solid rgba(148, 163, 184, .16);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    color: var(--oc-muted-strong);
}

.calendar-weekday:last-child {
    border-right: 0;
}

.calendar-day-card {
    min-height: 12.6rem;
    padding: .68rem;
    border-right: 1px solid rgba(191, 207, 236, .72);
    border-top: 1px solid rgba(191, 207, 236, .72);
    background: rgba(255, 255, 255, .92);
}

.calendar-day-card.is-today {
    background: linear-gradient(180deg, rgba(239, 246, 255, .96), rgba(255, 255, 255, .98));
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .22);
}

.calendar-day-top {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .6rem;
}

.calendar-day-number {
    font-size: .9rem;
    font-weight: 700;
}

.calendar-day-month {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--oc-muted);
}

.calendar-day-events {
    display: grid;
    gap: .38rem;
}

.calendar-event-item {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    padding: .4rem .45rem;
    border-radius: .7rem;
    background: rgba(248, 250, 252, .95);
    font-size: .7rem;
}

.calendar-event-item.task {
    background: rgba(239, 246, 255, .98);
}

.calendar-event-item.milestone {
    background: rgba(255, 247, 237, .98);
}

.calendar-event-item.meeting {
    background: rgba(240, 253, 250, .98);
}

.calendar-event-dot {
    width: .55rem;
    height: .55rem;
    margin-top: .22rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.calendar-event-item.milestone .calendar-event-dot {
    background: linear-gradient(135deg, #f97316, #fbbf24);
}

.calendar-event-item.meeting .calendar-event-dot {
    background: linear-gradient(135deg, #14b8a6, #22c55e);
}

.calendar-event-title {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.35;
}

.calendar-event-copy,
.calendar-empty {
    font-size: .66rem;
    color: var(--oc-muted);
    line-height: 1.35;
}

.calendar-empty {
    margin-top: .35rem;
}

.branding-favicon-preview {
    max-width: 72px;
    max-height: 72px;
}

.customer-workspace-shell,
.report-shell {
    overflow: hidden;
}

.customer-hero,
.report-shell-head {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 1rem;
}

.customer-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.customer-mini-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .72rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, .96);
    border: 1px solid rgba(148, 163, 184, .14);
    font-size: .72rem;
    color: var(--oc-muted-strong);
}

.customer-metrics {
    margin-bottom: 1rem;
}

.customer-workspace-grid,
.customer-content-grid,
.report-surface-grid,
.report-table-grid {
    display: grid;
    gap: 1rem;
}

.customer-section-head,
.report-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.customer-section-head-tight {
    margin-bottom: .55rem;
}

.customer-overview-grid,
.customer-linked-grid,
.customer-quick-stats,
.report-card-grid,
.report-insight-grid {
    display: grid;
    gap: .85rem;
}

.customer-detail-tile,
.report-insight-card {
    padding: .78rem .82rem;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 1rem;
    background: rgba(248, 250, 252, .86);
}

.customer-detail-tile span,
.report-insight-card span,
.report-stat-label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--oc-muted);
}

.customer-detail-tile strong,
.report-insight-card strong,
.report-stat-value {
    display: block;
    margin-top: .22rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--oc-text);
}

.customer-timeline-list,
.customer-side-column,
.report-chart-stack,
.report-lead-stack {
    display: grid;
    gap: .85rem;
}

.customer-timeline-item {
    border-left: 3px solid rgba(15, 111, 255, .18);
}

.customer-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-quick-stats div {
    padding: .65rem .7rem;
    border-radius: .92rem;
    background: rgba(248, 250, 252, .86);
    border: 1px solid rgba(148, 163, 184, .14);
}

.customer-quick-stats span,
.report-stat-meta {
    display: block;
    font-size: .68rem;
    color: var(--oc-muted);
}

.customer-quick-stats strong,
.report-chart-head strong {
    display: block;
    margin-top: .16rem;
    font-size: .9rem;
    font-weight: 700;
}

.settings-shell .stats-grid {
    margin-bottom: 1rem;
}

.settings-card {
    height: 100%;
}

.settings-side-stack {
    align-content: start;
}

.report-filter-toolbar {
    display: grid;
    gap: .75rem;
    align-items: end;
}

.report-filter-item,
.report-filter-action {
    min-width: 0;
}

.report-summary-grid {
    margin-top: 1rem;
}

.report-block-card {
    padding: 1rem;
}

.report-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.report-stat-card {
    padding: .85rem;
    border-radius: 1rem;
}

.report-stat-meta {
    margin-top: .28rem;
    text-transform: none;
    letter-spacing: 0;
}

.report-chart-card,
.report-chart-row {
    padding: .8rem .86rem;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 1rem;
    background: rgba(248, 250, 252, .86);
}

.report-chart-group {
    display: grid;
    gap: .7rem;
}

.report-chart-title {
    font-size: .74rem;
    font-weight: 700;
    color: var(--oc-muted-strong);
}

.report-chart-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
    font-size: .74rem;
    font-weight: 600;
}

.report-bar-chart {
    width: 100%;
    height: .52rem;
    border-radius: 999px;
    background: rgba(226, 232, 240, .9);
    overflow: hidden;
}

.report-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.report-bar-fill.is-success {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.report-bar-fill.is-dark {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.report-stage-row {
    align-items: center;
}

.report-table-card {
    padding: 1rem;
}

html[data-bs-theme="dark"] .customer-mini-chip,
html[data-bs-theme="dark"] .customer-detail-tile,
html[data-bs-theme="dark"] .customer-quick-stats div,
html[data-bs-theme="dark"] .report-insight-card,
html[data-bs-theme="dark"] .report-chart-card,
html[data-bs-theme="dark"] .report-chart-row {
    background: rgba(12, 20, 34, .88);
    color: var(--oc-text);
}

@media (min-width: 768px) {
    .customer-hero,
    .report-shell-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .customer-overview-grid,
    .customer-linked-grid,
    .report-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-filter-toolbar {
        grid-template-columns: repeat(3, minmax(0, auto));
    }
}

@media (min-width: 1200px) {
    .customer-workspace-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
        align-items: start;
    }

    .customer-side-column {
        gap: .75rem;
    }

    .customer-content-grid,
    .report-surface-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-table-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kanban-grid-premium {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

html[data-bs-theme="dark"] .kanban-view-pill,
html[data-bs-theme="dark"] .calendar-tab,
html[data-bs-theme="dark"] .kanban-mini-action,
html[data-bs-theme="dark"] .kanban-card-chip,
html[data-bs-theme="dark"] .calendar-toolbar-chip,
html[data-bs-theme="dark"] .calendar-day-card,
html[data-bs-theme="dark"] .calendar-event-item,
html[data-bs-theme="dark"] .calendar-grid-shell {
    color: var(--oc-text);
}

html[data-bs-theme="dark"] .calendar-weekday {
    background: rgba(25, 39, 62, .94);
}

html[data-bs-theme="dark"] .calendar-day-card {
    background: rgba(12, 20, 34, .92);
    border-color: rgba(71, 85, 105, .55);
}

html[data-bs-theme="dark"] .calendar-event-item.task,
html[data-bs-theme="dark"] .calendar-event-item.milestone,
html[data-bs-theme="dark"] .calendar-event-item.meeting,
html[data-bs-theme="dark"] .calendar-event-item {
    background: rgba(15, 23, 42, .9);
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh 1rem;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(10px);
}

.search-modal.open {
    display: flex;
}

.search-panel {
    width: min(780px, 100%);
    padding: 1rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(148, 163, 184, .2);
    box-shadow: 0 26px 70px rgba(15, 23, 42, .18);
}

.search-panel::-webkit-scrollbar,
.search-results::-webkit-scrollbar {
    width: .55rem;
}

.search-panel::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .28);
    border-radius: 999px;
}

.search-results {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
    max-height: 60vh;
    overflow: auto;
}

.search-group {
    padding: .9rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, .18);
    background: rgba(248, 250, 252, .72);
}

.search-item {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: .62rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.search-item:last-child {
    border-bottom: none;
}

.mobile-toggle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-border);
    background: rgba(255, 255, 255, .82);
}

.compact-panel-title {
    margin: 0;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.compact-panel-copy {
    margin: 0;
    color: var(--oc-muted);
    font-size: .7rem;
    line-height: 1.28;
}

.compact-meta {
    font-size: .62rem;
    color: var(--oc-muted);
}

.status-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    background: var(--oc-success);
    box-shadow: 0 0 0 .25rem rgba(15, 159, 116, .12);
}

.breadcrumb {
    margin-bottom: 0;
}

.alert {
    border-radius: 1rem;
    border: none;
    box-shadow: var(--oc-shadow-soft);
}

.dashboard-chart {
    width: 100%;
    height: auto;
    margin-top: 1.1rem;
}

.dashboard-chart-label {
    font-size: 11px;
    font-weight: 600;
    fill: #64748b;
}

.crm-progress {
    width: 100%;
    height: .8rem;
    appearance: none;
    -webkit-appearance: none;
}

.crm-progress::-webkit-progress-bar {
    background: rgba(148, 163, 184, .14);
    border-radius: 999px;
}

.crm-progress::-webkit-progress-value {
    border-radius: 999px;
}

.crm-progress::-moz-progress-bar {
    border-radius: 999px;
}

.crm-progress.is-primary::-webkit-progress-value,
.crm-progress.is-primary::-moz-progress-bar {
    background: linear-gradient(90deg, #0f6fff 0%, #45c2ff 100%);
}

.crm-progress.is-secondary::-webkit-progress-value,
.crm-progress.is-secondary::-moz-progress-bar {
    background: linear-gradient(90deg, #4f8dff 0%, #76d4ff 100%);
}

.crm-progress.is-success::-webkit-progress-value,
.crm-progress.is-success::-moz-progress-bar {
    background: #198754;
}

.crm-progress.is-dark::-webkit-progress-value,
.crm-progress.is-dark::-moz-progress-bar {
    background: linear-gradient(90deg, #082c7a 0%, #0f6fff 60%, #45c2ff 100%);
}

.app-grid-2,
.app-grid-3,
.app-grid-4 {
    display: grid;
    gap: 1rem;
}

.app-grid-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.app-grid-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.app-grid-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.app-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
}

.app-inline-check {
    display: flex;
    gap: .65rem;
    align-items: center;
    text-transform: none;
    letter-spacing: 0;
}

.app-mt-12 { margin-top: .75rem; }
.app-mt-16 { margin-top: 1rem; }
.app-mt-18 { margin-top: 1.125rem; }
.app-mt-20 { margin-top: 1.25rem; }
.app-mb-12 { margin-bottom: .75rem; }
.app-card-tight { padding: 1rem; }
.app-actions-start { justify-content: flex-start !important; }
.app-text-strong { font-weight: 700; }
.app-text-md { font-size: 1.1rem; }
.app-grid-fit-200 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.app-grid-fit-240 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.app-stack-12 {
    display: grid;
    gap: .75rem;
}
.app-stack-16 {
    display: grid;
    gap: 1rem;
}
.app-note {
    margin-top: 1rem;
}
.app-empty {
    margin-top: .5rem;
}
.app-form-spacer {
    margin-top: 1.125rem;
}
.app-tile {
    padding: 1rem;
}
.app-heading-top {
    margin-top: 1.125rem;
}
.app-select-auto {
    width: auto;
    min-width: 110px;
}
.dashboard-chart {
    width: 100%;
    height: auto;
    margin-top: 1.1rem;
}
.dashboard-chart-label {
    font-size: 11px;
    font-weight: 600;
}
.crm-progress-track {
    height: .56rem;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, .14);
}
.crm-progress-track.is-compact {
    height: .5rem;
}
.crm-progress {
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
}
.crm-progress::-webkit-progress-bar {
    background: transparent;
}
.crm-progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, #0f6fff 0%, #45c2ff 100%);
}
.crm-progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #0f6fff 0%, #45c2ff 100%);
}
.crm-progress.is-secondary::-webkit-progress-value,
.crm-progress.is-secondary::-moz-progress-bar {
    background: linear-gradient(90deg, #4f8dff 0%, #76d4ff 100%);
}
.crm-progress.is-success::-webkit-progress-value,
.crm-progress.is-success::-moz-progress-bar {
    background: linear-gradient(90deg, #0f9f6e 0%, #4bd2a5 100%);
}
.crm-progress.is-dark::-webkit-progress-value,
.crm-progress.is-dark::-moz-progress-bar {
    background: linear-gradient(90deg, #082c7a 0%, #0f6fff 60%, #45c2ff 100%);
}
.kanban-card.is-dragging {
    opacity: .6;
}

.docs-card-grid {
    display: grid;
    gap: 1rem;
}

.stage-pill {
    color: #fff;
    border-color: transparent;
}

.stage-pill.stage-new,
.stage-pill.stage-qualification {
    background: #7c8aa0;
}

.stage-pill.stage-qualified,
.stage-pill.stage-discovery {
    background: #0076ff;
}

.stage-pill.stage-proposal {
    background: #7c3aed;
}

.stage-pill.stage-won {
    background: #0f9f6e;
}

.stage-pill.stage-lost {
    background: #d04d67;
}

.stage-pill.stage-negotiation {
    background: #f59e0b;
}

.admin-login-page {
    min-height: 100vh;
    margin: 0;
    font-family: "Manrope", sans-serif;
    color: var(--oc-text);
    background:
        radial-gradient(circle at top left, rgba(15, 111, 255, .16), transparent 26%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, .10), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #f1f5fb 100%);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.login-card {
    width: min(1120px, 100%);
    border-radius: 2rem;
    overflow: hidden;
    border: 1px solid var(--oc-border);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .12);
}

.login-hero {
    padding: 2rem;
    color: #F9FAFB;
    background:
        radial-gradient(circle at top right, rgba(125, 211, 252, .18), transparent 28%),
        linear-gradient(180deg, #081120 0%, #0f1b31 46%, #14243f 100%);
}

.login-brand-link {
    color: #F9FAFB;
    text-decoration: none;
}

.login-brand-link:hover,
.login-brand-link:focus {
    color: #FFFFFF;
}

.login-hero,
.login-hero .eyebrow,
.login-hero .text-white-50,
.login-hero p,
.login-hero h1,
.login-hero h2,
.login-hero .hero-panel {
    color: #F9FAFB !important;
}

.login-hero .text-white-50 {
    opacity: .78;
}

.hero-panel {
    padding: 1rem 1.1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
}

.login-form {
    padding: 2rem;
    background: rgba(255, 255, 255, .98);
}

.eyebrow {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #38bdf8;
}

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

@media (min-width: 768px) {
    .topbar-card {
        padding: .72rem .92rem;
    }

    .hero-card {
        padding: .7rem .86rem;
    }

    .module-toolbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }

    .sidebar-groups {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-shell,
    .split-grid,
    .dual-grid,
    .kanban-grid,
    .app-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .login-hero,
    .login-form {
        padding: 2.5rem;
    }

    .docs-card-grid,
    .app-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .shell-sidebar {
        transform: none;
        padding: .9rem 0 .9rem .9rem;
    }

    .shell-sidebar.is-compact {
        width: 6.75rem;
    }

    .sidebar-backdrop,
    .mobile-only {
        display: none !important;
    }

    .content-wrap {
        margin-left: 20.9rem;
        padding: .95rem;
    }

    .content-wrap.is-sidebar-compact {
        margin-left: 6.9rem;
    }

    .topbar-card {
        position: sticky;
        top: 1rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        z-index: 15;
    }

    .toolbar-meta {
        justify-content: flex-end;
    }

    .sidebar-groups {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .app-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .chart-shell {
        grid-template-columns: 1.35fr .95fr;
    }

    .split-grid,
    .dual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kanban-grid {
        grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    }
}

/* Premium SaaS theme refresh */
:root {
    --oc-bg: #f6f3ff;
    --oc-panel: rgba(255, 255, 255, .96);
    --oc-panel-strong: #ffffff;
    --oc-border: rgba(99, 102, 241, .08);
    --oc-border-strong: rgba(99, 102, 241, .14);
    --oc-text: #18181f;
    --oc-muted: #73738a;
    --oc-accent: #5b3df5;
    --oc-accent-soft: rgba(91, 61, 245, .10);
    --oc-accent-strong: #4338ca;
    --oc-success: #16a34a;
    --oc-shadow: 0 32px 80px rgba(90, 72, 163, .12);
    --oc-shadow-soft: 0 18px 40px rgba(76, 57, 140, .08);
    --oc-radius-xl: 1.65rem;
    --oc-radius-lg: 1.18rem;
    --oc-radius-md: .95rem;
}

body {
    color: var(--oc-text);
    background:
        radial-gradient(circle at top center, rgba(129, 140, 248, .18), transparent 28%),
        radial-gradient(circle at right top, rgba(244, 114, 182, .10), transparent 18%),
        linear-gradient(180deg, #f6f3ff 0%, #f8f7ff 40%, #f4f6fb 100%);
}

.app-shell::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 38%),
        repeating-linear-gradient(90deg, rgba(129, 140, 248, .05) 0 1px, transparent 1px 148px);
    opacity: .52;
}

.shell-sidebar {
    padding: 1rem;
}

.sidebar-panel {
    color: var(--oc-text);
    border: 1px solid rgba(255, 255, 255, .68);
    background:
        radial-gradient(circle at top left, rgba(129, 140, 248, .12), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 249, 255, .96) 100%);
    box-shadow: 0 26px 65px rgba(95, 76, 170, .12);
}

.sidebar-panel small,
.sidebar-panel .section-kicker {
    color: #8a8aa4;
}

.brand-badge {
    color: #fff;
    background: linear-gradient(135deg, #5b3df5 0%, #7c5cff 55%, #9f7aea 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 28px rgba(91, 61, 245, .22);
}

.menu-group {
    border: 1px solid rgba(91, 61, 245, .06);
    background: rgba(255, 255, 255, .62);
}

.menu-button,
.menu-button:hover,
.sidebar-link {
    color: var(--oc-text);
}

.menu-title,
.menu-chevron,
.nav-copy small {
    color: #8b8ba1;
}

.nav-icon {
    color: #5a5a72;
    background: rgba(239, 241, 255, .96);
}

.sidebar-link {
    padding: .58rem .68rem;
    border-radius: .92rem;
}

.sidebar-link:hover {
    background: rgba(243, 242, 255, .95);
    transform: translateX(2px);
}

.sidebar-link.active {
    color: #fff;
    background: linear-gradient(135deg, #5b3df5 0%, #6949ff 100%);
    box-shadow: 0 12px 24px rgba(91, 61, 245, .22);
}

.sidebar-link.active .nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.topbar-card {
    border: 1px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 20px 50px rgba(100, 88, 155, .09);
    backdrop-filter: blur(18px);
}

.hero-card,
.surface-card,
.stat-card,
.list-card,
.table-card,
.kanban-lane,
.filter-card {
    border: 1px solid rgba(91, 61, 245, .06);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(251, 251, 255, .96) 100%);
    box-shadow: 0 18px 42px rgba(97, 81, 160, .08);
}

.hero-card {
    background:
        radial-gradient(circle at top right, rgba(129, 140, 248, .10), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(250, 250, 255, .96) 100%);
}

.section-kicker {
    color: #8a74ff;
    letter-spacing: .18em;
}

.page-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Manrope", sans-serif;
    color: #16161d;
}

.page-title {
    font-size: clamp(1.1rem, 1.85vw, 1.42rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

.page-subtitle,
.text-muted-soft,
.compact-panel-copy,
.stat-meta {
    color: #7b7b92;
}

.action-chip,
.pill,
.btn.btn-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-primary {
    border-radius: .9rem;
}

.action-chip {
    border: 1px solid rgba(91, 61, 245, .08);
    background: rgba(255, 255, 255, .96);
    color: #3b3b52;
    box-shadow: 0 8px 20px rgba(95, 76, 170, .06);
}

.action-chip.is-primary,
.btn.btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #5b3df5 0%, #6e56ff 100%);
    box-shadow: 0 14px 24px rgba(91, 61, 245, .22);
}

.action-chip-search {
    justify-content: flex-start;
    min-width: 20rem;
    gap: .6rem;
    color: #8a8aa2;
}

.search-chip-copy {
    font-size: .74rem;
    font-weight: 600;
}

.toolbar-user {
    border: 1px solid rgba(91, 61, 245, .08);
    background: rgba(255, 255, 255, .92);
}

.toolbar-avatar {
    background: linear-gradient(135deg, #5b3df5 0%, #8b5cf6 100%);
}

.stat-card {
    min-height: 9rem;
}

.stat-label {
    color: #8f8fa7;
    font-weight: 700;
    letter-spacing: .12em;
}

.stat-value {
    font-size: clamp(1.12rem, 1.7vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    color: #171720;
}

.dashboard-chart {
    margin-top: 1rem;
    filter: drop-shadow(0 8px 12px rgba(91, 61, 245, .08));
}

.dashboard-chart-label {
    fill: #8a8aa2;
}

.crm-progress-track {
    background: rgba(221, 226, 245, .82);
}

.crm-progress::-webkit-progress-value,
.crm-progress::-moz-progress-bar {
    background: linear-gradient(90deg, #5b3df5 0%, #9a7bff 100%);
}

.chart-shell > .surface-card:first-child {
    background:
        radial-gradient(circle at top right, rgba(129, 140, 248, .12), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 247, 255, .96) 100%);
}

.table-modern thead th {
    color: #8a8aa2;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .66rem;
}

.table-modern tbody td {
    color: #2f2f42;
}

.search-panel {
    border: 1px solid rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 30px 80px rgba(91, 61, 245, .18);
}

html[data-bs-theme="dark"] .sidebar-panel {
    background:
        radial-gradient(circle at top left, rgba(79, 155, 255, .16), transparent 22%),
        linear-gradient(180deg, rgba(9, 16, 29, .98) 0%, rgba(15, 24, 42, .96) 100%);
    color: var(--oc-text);
}

html[data-bs-theme="dark"] .menu-group,
html[data-bs-theme="dark"] .action-chip,
html[data-bs-theme="dark"] .toolbar-user,
html[data-bs-theme="dark"] .hero-card,
html[data-bs-theme="dark"] .surface-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .list-card,
html[data-bs-theme="dark"] .table-card,
html[data-bs-theme="dark"] .kanban-lane,
html[data-bs-theme="dark"] .topbar-card {
    background: rgba(12, 20, 34, .92);
}

html[data-bs-theme="dark"] .sidebar-link.active {
    color: #fff;
}

@media (max-width: 767.98px) {
    .action-chip-search {
        min-width: 0;
    }

    .search-chip-copy {
        display: none;
    }
}

/* Deeper premium pass and dark-mode safety */
.customer-content-grid {
    grid-template-columns: 1fr !important;
}

.customer-side-column {
    align-content: start;
}

.customer-overview-card,
.workspace-action-card,
.report-block-card,
.report-table-card,
.settings-card,
.kanban-lane-premium,
.calendar-shell,
.report-shell {
    border: 1px solid rgba(91, 61, 245, .07);
    box-shadow: 0 20px 42px rgba(95, 76, 170, .08);
}

.workspace-action-card,
.report-block-card,
.report-table-card,
.settings-card {
    padding: 1rem;
}

.customer-overview-card,
.report-shell,
.calendar-shell {
    background:
        radial-gradient(circle at top right, rgba(129, 140, 248, .09), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(250, 250, 255, .96) 100%);
}

.workspace-action-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(248, 249, 255, .95) 100%);
}

.settings-shell .surface-card,
.report-shell .surface-card,
.calendar-shell .surface-card,
.kanban-shell .surface-card {
    border-color: rgba(91, 61, 245, .06);
}

.report-filter-toolbar .form-control,
.report-filter-toolbar .btn,
.settings-card .form-control,
.settings-card .form-select,
.workspace-action-card .form-control,
.workspace-action-card .form-select {
    min-height: 2.6rem;
}

.report-stat-card,
.report-chart-card,
.report-chart-row,
.report-insight-card {
    background: rgba(250, 250, 255, .92);
}

.report-chart-title,
.calendar-toolbar-title,
.kanban-lane-title,
.compact-panel-title {
    font-weight: 700;
}

.kanban-shell-head,
.calendar-shell-head,
.report-shell-head {
    margin-bottom: 1.15rem;
}

.kanban-lane-premium {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(246, 248, 255, .96) 100%);
}

.kanban-card-premium {
    border-color: rgba(91, 61, 245, .08);
    box-shadow: 0 16px 30px rgba(91, 61, 245, .08);
}

.calendar-grid-shell {
    border-color: rgba(91, 61, 245, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.calendar-weekday {
    background: rgba(232, 236, 255, .92);
    color: #615f82;
}

.calendar-day-card {
    background: rgba(255, 255, 255, .96);
}

.calendar-day-card.is-today {
    box-shadow: inset 0 0 0 2px rgba(91, 61, 245, .22);
}

html[data-bs-theme="dark"] .page-title,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] .compact-panel-title,
html[data-bs-theme="dark"] .stat-value,
html[data-bs-theme="dark"] .report-stat-value,
html[data-bs-theme="dark"] .report-insight-card strong,
html[data-bs-theme="dark"] .report-chart-head strong,
html[data-bs-theme="dark"] .kanban-lane-title,
html[data-bs-theme="dark"] .kanban-card-title,
html[data-bs-theme="dark"] .calendar-day-number,
html[data-bs-theme="dark"] .calendar-event-title,
html[data-bs-theme="dark"] .customer-detail-tile strong,
html[data-bs-theme="dark"] .customer-quick-stats strong,
html[data-bs-theme="dark"] .fw-semibold,
html[data-bs-theme="dark"] .fw-bold,
html[data-bs-theme="dark"] strong {
    color: var(--oc-text) !important;
}

html[data-bs-theme="dark"] .surface-card,
html[data-bs-theme="dark"] .table-card,
html[data-bs-theme="dark"] .list-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .hero-card,
html[data-bs-theme="dark"] .topbar-card,
html[data-bs-theme="dark"] .filter-card,
html[data-bs-theme="dark"] .workspace-action-card,
html[data-bs-theme="dark"] .report-block-card,
html[data-bs-theme="dark"] .report-table-card,
html[data-bs-theme="dark"] .settings-card,
html[data-bs-theme="dark"] .kanban-card-premium,
html[data-bs-theme="dark"] .kanban-lane-premium,
html[data-bs-theme="dark"] .calendar-shell,
html[data-bs-theme="dark"] .customer-overview-card,
html[data-bs-theme="dark"] .report-shell,
html[data-bs-theme="dark"] .search-panel {
    color: var(--oc-text) !important;
}

html[data-bs-theme="dark"] .surface-card .h1,
html[data-bs-theme="dark"] .surface-card .h2,
html[data-bs-theme="dark"] .surface-card .h3,
html[data-bs-theme="dark"] .surface-card .h4,
html[data-bs-theme="dark"] .surface-card .h5,
html[data-bs-theme="dark"] .surface-card .h6,
html[data-bs-theme="dark"] .table-card .h1,
html[data-bs-theme="dark"] .table-card .h2,
html[data-bs-theme="dark"] .table-card .h3,
html[data-bs-theme="dark"] .table-card .h4,
html[data-bs-theme="dark"] .table-card .h5,
html[data-bs-theme="dark"] .table-card .h6,
html[data-bs-theme="dark"] .list-card .h1,
html[data-bs-theme="dark"] .list-card .h2,
html[data-bs-theme="dark"] .list-card .h3,
html[data-bs-theme="dark"] .list-card .h4,
html[data-bs-theme="dark"] .list-card .h5,
html[data-bs-theme="dark"] .list-card .h6 {
    color: var(--oc-text) !important;
}

html[data-bs-theme="dark"] .surface-card a:not(.btn):not(.pill):not(.action-chip):not(.sidebar-link),
html[data-bs-theme="dark"] .table-card a:not(.btn):not(.pill):not(.action-chip):not(.sidebar-link),
html[data-bs-theme="dark"] .list-card a:not(.btn):not(.pill):not(.action-chip):not(.sidebar-link) {
    color: #b9c7ff;
}

html[data-bs-theme="dark"] .dashboard-chart-label,
html[data-bs-theme="dark"] .stat-label,
html[data-bs-theme="dark"] .section-kicker {
    color: #9da7bd !important;
    fill: #9da7bd !important;
}

html[data-bs-theme="dark"] .chart-shell > .surface-card:first-child {
    background:
        radial-gradient(circle at top right, rgba(79, 155, 255, .16), transparent 24%),
        linear-gradient(180deg, rgba(11, 18, 31, .98) 0%, rgba(14, 23, 40, .96) 100%);
}

html[data-bs-theme="dark"] .dashboard-chart rect {
    fill: rgba(79, 155, 255, .06);
}

html[data-bs-theme="dark"] .crm-progress-track {
    background: rgba(35, 48, 72, .9);
}

html[data-bs-theme="dark"] .chart-shell .pill,
html[data-bs-theme="dark"] .dual-grid .pill,
html[data-bs-theme="dark"] .split-grid .pill {
    color: #dbe8ff;
    background: rgba(23, 36, 59, .92);
    border-color: rgba(125, 157, 214, .18);
}

html[data-bs-theme="dark"] .login-hero .eyebrow,
html[data-bs-theme="dark"] .login-hero .text-white-50,
html[data-bs-theme="dark"] .login-hero p,
html[data-bs-theme="dark"] .login-hero h1,
html[data-bs-theme="dark"] .login-hero h2,
html[data-bs-theme="dark"] .hero-panel {
    color: #e5edf8 !important;
}

html[data-bs-theme="dark"] .login-card {
    background: rgba(10, 18, 32, .96);
    border-color: rgba(148, 163, 184, .18);
}

html[data-bs-theme="dark"] .login-form {
    background: rgba(12, 20, 34, .98);
}

html[data-bs-theme="dark"] .login-form .muted,
html[data-bs-theme="dark"] .login-form code,
html[data-bs-theme="dark"] .login-form .bg-light-subtle,
html[data-bs-theme="dark"] .login-form .border {
    color: var(--oc-text) !important;
}

html[data-bs-theme="dark"] .login-form .bg-light-subtle {
    background: rgba(18, 30, 48, .94) !important;
    border-color: rgba(148, 163, 184, .16) !important;
}

html[data-bs-theme="dark"] .login-form .form-control,
html[data-bs-theme="dark"] .login-form .form-select {
    color: #e8eefc;
    background: rgba(11, 19, 34, .88);
    border-color: rgba(122, 151, 207, .18);
}

html[data-bs-theme="dark"] .login-form .form-control::placeholder {
    color: #8ca0c8;
}

html[data-bs-theme="dark"] .page-subtitle,
html[data-bs-theme="dark"] .text-muted-soft,
html[data-bs-theme="dark"] .compact-panel-copy,
html[data-bs-theme="dark"] .stat-meta,
html[data-bs-theme="dark"] .report-stat-meta,
html[data-bs-theme="dark"] .report-chart-title,
html[data-bs-theme="dark"] .calendar-day-month,
html[data-bs-theme="dark"] .calendar-event-copy,
html[data-bs-theme="dark"] .calendar-empty,
html[data-bs-theme="dark"] .kanban-lane-meta,
html[data-bs-theme="dark"] .kanban-card-subtitle,
html[data-bs-theme="dark"] .customer-mini-chip,
html[data-bs-theme="dark"] .customer-detail-tile span,
html[data-bs-theme="dark"] .customer-quick-stats span,
html[data-bs-theme="dark"] .table-modern thead th {
    color: #9da7bd !important;
}

html[data-bs-theme="dark"] .nav-icon,
html[data-bs-theme="dark"] .kanban-mini-action,
html[data-bs-theme="dark"] .calendar-toolbar-chip,
html[data-bs-theme="dark"] .report-chart-card,
html[data-bs-theme="dark"] .report-chart-row,
html[data-bs-theme="dark"] .report-insight-card,
html[data-bs-theme="dark"] .customer-detail-tile,
html[data-bs-theme="dark"] .customer-quick-stats div,
html[data-bs-theme="dark"] .workspace-action-card,
html[data-bs-theme="dark"] .settings-card,
html[data-bs-theme="dark"] .report-block-card,
html[data-bs-theme="dark"] .report-table-card {
    background: rgba(12, 20, 34, .92);
    color: var(--oc-text);
}

html[data-bs-theme="dark"] .calendar-grid-shell,
html[data-bs-theme="dark"] .calendar-shell,
html[data-bs-theme="dark"] .report-shell,
html[data-bs-theme="dark"] .customer-overview-card,
html[data-bs-theme="dark"] .kanban-lane-premium {
    background:
        radial-gradient(circle at top right, rgba(79, 155, 255, .12), transparent 26%),
        linear-gradient(180deg, rgba(12, 20, 34, .96) 0%, rgba(14, 24, 40, .94) 100%);
}

html[data-bs-theme="dark"] .alert-success,
html[data-bs-theme="dark"] .alert-danger {
    color: #e9f1ff;
}

html[data-bs-theme="dark"] .billing-total-row {
    background: rgba(14, 23, 40, .92);
    border-color: rgba(125, 157, 214, .14);
}

html[data-bs-theme="dark"] .billing-total-row span {
    color: #9da7bd;
}

html[data-bs-theme="dark"] .billing-total-row strong {
    color: #f6f8ff;
}

html[data-bs-theme="dark"] .billing-total-row.is-grand {
    background: linear-gradient(135deg, rgba(79, 155, 255, .12) 0%, rgba(91, 61, 245, .16) 100%);
    border-color: rgba(112, 144, 202, .2);
}

@media (min-width: 1200px) {
    .settings-shell > .row {
        --bs-gutter-x: 1.35rem;
    }

    .settings-side-stack,
    .customer-side-column {
        position: sticky;
        top: 5.25rem;
    }
}

@media (max-width: 767.98px) {
    .content-wrap {
        padding: .7rem;
    }

    .topbar-card,
    .surface-card,
    .table-card,
    .kanban-lane {
        border-radius: 1.1rem;
    }

    .hero-card,
    .stat-card,
    .list-card {
        border-radius: 1rem;
    }

    .page-title {
        font-size: 1.38rem;
    }

    .page-subtitle {
        font-size: .92rem;
    }

    .toolbar-user {
        width: 100%;
        justify-content: flex-start;
    }

    .quick-actions,
    .header-tools {
        width: 100%;
    }

    .quick-actions > *,
    .header-tools > * {
        flex: 1 1 calc(50% - .5rem);
    }

    .quick-actions .action-chip,
    .header-tools .btn,
    .header-tools .form-select {
        justify-content: center;
        width: 100%;
    }
}

/* Settings sections, calmer headings, and final hover contrast pass */
.admin-card-title {
    margin: 0 0 .42rem;
    color: var(--oc-text);
    font-size: clamp(.94rem, 1.08vw, 1.08rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.012em;
}

.surface-card .admin-card-title,
.table-card .admin-card-title,
.list-card .admin-card-title {
    color: var(--oc-text);
}

.compact-panel-title {
    font-size: .9rem;
    line-height: 1.24;
    letter-spacing: -.012em;
}

.settings-page-shell {
    display: grid;
    gap: 1rem;
}

.settings-nav {
    padding: .86rem;
    align-self: start;
}

.settings-nav-head {
    padding: .15rem .18rem .72rem;
}

.settings-nav-list {
    display: grid;
    gap: .45rem;
}

.settings-nav-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .62rem;
    align-items: center;
    padding: .68rem;
    border-radius: .92rem;
    color: var(--oc-text);
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.settings-nav-item:hover {
    color: var(--oc-text);
    border-color: rgba(91, 61, 245, .10);
    background: rgba(246, 246, 255, .96);
    transform: translateX(1px);
}

.settings-nav-item.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #5b3df5 0%, #6949ff 100%);
    box-shadow: 0 12px 24px rgba(91, 61, 245, .20);
}

.settings-nav-item strong {
    display: block;
    font-size: .82rem;
    line-height: 1.1;
}

.settings-nav-item small {
    display: block;
    margin-top: .18rem;
    color: var(--oc-muted);
    font-size: .68rem;
    line-height: 1.25;
}

.settings-nav-item.active small,
.settings-nav-item.active .settings-nav-icon {
    color: rgba(255, 255, 255, .82);
}

.settings-nav-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .78rem;
    color: var(--oc-accent);
    background: var(--oc-accent-soft);
}

.settings-content {
    min-width: 0;
}

.settings-summary-strip {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: .75rem;
}

.settings-summary-strip article {
    padding: .74rem .82rem;
    border: 1px solid rgba(91, 61, 245, .07);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 26px rgba(95, 76, 170, .06);
}

.settings-summary-strip span,
.settings-update-panel span,
.settings-preview-panel span {
    display: block;
    color: var(--oc-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.settings-summary-strip strong,
.settings-update-panel strong,
.settings-preview-panel strong {
    display: block;
    margin-top: .25rem;
    color: var(--oc-text);
    font-size: .92rem;
    line-height: 1.2;
}

.settings-section-card {
    padding: 1rem;
}

.settings-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.settings-form-grid {
    display: grid;
    gap: .88rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.settings-form-grid.is-inner {
    gap: .75rem;
}

.settings-wide,
.settings-preview-panel,
.settings-update-panel,
.settings-subsection {
    grid-column: 1 / -1;
}

.settings-section-card .field label,
.settings-subsection h3 {
    display: block;
    margin-bottom: .42rem;
    color: var(--oc-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.settings-subsection {
    padding: .86rem;
    border: 1px solid rgba(91, 61, 245, .07);
    border-radius: 1rem;
    background: rgba(250, 250, 255, .68);
}

.settings-check-row,
.settings-option-grid {
    display: grid;
    gap: .62rem;
}

.settings-check,
.settings-inline-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--oc-text);
    font-size: .82rem;
    font-weight: 700;
}

.settings-inline-check {
    margin-top: .5rem;
    color: var(--oc-muted);
    font-size: .76rem;
}

.settings-preview-panel,
.settings-update-panel {
    display: grid;
    gap: .8rem;
    padding: .86rem;
    border: 1px solid rgba(91, 61, 245, .08);
    border-radius: 1rem;
    background: rgba(250, 250, 255, .84);
}

.settings-logo-preview {
    display: block;
    max-width: min(100%, 16rem);
    max-height: 5rem;
    margin-top: .45rem;
    object-fit: contain;
}

.settings-favicon-preview {
    width: 3rem;
    height: 3rem;
    margin-top: .45rem;
    object-fit: contain;
    border-radius: .75rem;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .2);
    padding: .4rem;
}

.settings-update-panel small {
    display: block;
    margin-top: .22rem;
    color: var(--oc-muted);
    font-size: .74rem;
}

.settings-update-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.settings-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(148, 163, 184, .14);
}

.surface-card,
.stat-card,
.list-card,
.table-card,
.kanban-card,
.settings-nav-item,
.search-item,
.btn,
.action-chip {
    transition-duration: .16s;
}

.surface-card:hover,
.stat-card:hover,
.list-card:hover,
.table-card:hover {
    color: var(--oc-text);
    transform: translateY(-1px);
    border-color: rgba(91, 61, 245, .10);
    box-shadow: 0 14px 30px rgba(76, 57, 140, .07);
}

.list-card:hover .text-muted-soft,
.surface-card:hover .text-muted-soft,
.table-card:hover .text-muted-soft {
    color: var(--oc-muted) !important;
}

.search-item {
    border-radius: .75rem;
    padding-inline: .55rem;
}

.search-item:hover {
    color: var(--oc-text);
    background: rgba(246, 246, 255, .92);
}

.table-modern tbody tr:hover {
    color: var(--oc-text);
    background: rgba(246, 246, 255, .72);
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-light,
.btn-outline-info,
.btn-outline-danger {
    color: var(--oc-text);
    background: rgba(255, 255, 255, .82);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-info:hover {
    color: var(--oc-text) !important;
    border-color: rgba(91, 61, 245, .18);
    background: rgba(246, 246, 255, .98);
}

.btn-outline-danger:hover {
    color: #8f1d1d !important;
    background: rgba(254, 242, 242, .96);
}

.sidebar-link:hover {
    color: var(--oc-text) !important;
    background: rgba(243, 242, 255, .95);
}

.sidebar-link:hover .nav-icon {
    color: var(--oc-accent);
    background: rgba(91, 61, 245, .10);
}

.sidebar-link:hover small,
.sidebar-link:hover .nav-copy small {
    color: #77778f !important;
}

.sidebar-link.active,
.sidebar-link.active:hover {
    color: #fff !important;
}

.sidebar-link.active small,
.sidebar-link.active:hover small,
.sidebar-link.active .nav-copy small {
    color: rgba(255, 255, 255, .74) !important;
}

.sidebar-link.active .nav-icon,
.sidebar-link.active:hover .nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

html[data-bs-theme="dark"] .admin-card-title,
html[data-bs-theme="dark"] .settings-summary-strip strong,
html[data-bs-theme="dark"] .settings-update-panel strong,
html[data-bs-theme="dark"] .settings-preview-panel strong {
    color: var(--oc-text) !important;
}

html[data-bs-theme="dark"] .settings-summary-strip article,
html[data-bs-theme="dark"] .settings-subsection,
html[data-bs-theme="dark"] .settings-preview-panel,
html[data-bs-theme="dark"] .settings-update-panel {
    color: var(--oc-text);
    background: rgba(12, 20, 34, .92);
    border-color: rgba(148, 163, 184, .16);
}

html[data-bs-theme="dark"] .settings-nav-item {
    color: var(--oc-text);
}

html[data-bs-theme="dark"] .settings-nav-item:hover,
html[data-bs-theme="dark"] .sidebar-link:hover,
html[data-bs-theme="dark"] .search-item:hover,
html[data-bs-theme="dark"] .table-modern tbody tr:hover {
    color: var(--oc-text) !important;
    background: rgba(23, 37, 61, .96);
}

html[data-bs-theme="dark"] .settings-nav-item small,
html[data-bs-theme="dark"] .settings-inline-check,
html[data-bs-theme="dark"] .settings-update-panel small,
html[data-bs-theme="dark"] .settings-summary-strip span,
html[data-bs-theme="dark"] .settings-update-panel span,
html[data-bs-theme="dark"] .settings-preview-panel span,
html[data-bs-theme="dark"] .settings-section-card .field label,
html[data-bs-theme="dark"] .settings-subsection h3 {
    color: #9da7bd !important;
}

html[data-bs-theme="dark"] .settings-nav-item.active,
html[data-bs-theme="dark"] .settings-nav-item.active:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #4f7cff 0%, #725dff 100%);
}

html[data-bs-theme="dark"] .settings-nav-item.active small,
html[data-bs-theme="dark"] .settings-nav-item.active .settings-nav-icon {
    color: rgba(255, 255, 255, .82) !important;
}

html[data-bs-theme="dark"] .surface-card:hover,
html[data-bs-theme="dark"] .stat-card:hover,
html[data-bs-theme="dark"] .list-card:hover,
html[data-bs-theme="dark"] .table-card:hover {
    color: var(--oc-text) !important;
    border-color: rgba(148, 163, 184, .22);
    box-shadow: 0 12px 28px rgba(2, 6, 23, .28);
}

html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-light,
html[data-bs-theme="dark"] .btn-outline-info,
html[data-bs-theme="dark"] .btn-outline-danger {
    color: var(--oc-text) !important;
    background: rgba(16, 26, 42, .92);
    border-color: rgba(148, 163, 184, .2);
}

html[data-bs-theme="dark"] .btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn-outline-primary:hover,
html[data-bs-theme="dark"] .btn-outline-light:hover,
html[data-bs-theme="dark"] .btn-outline-info:hover {
    color: var(--oc-text) !important;
    background: rgba(28, 43, 66, .98);
    border-color: rgba(148, 163, 184, .32);
}

html[data-bs-theme="dark"] .btn-outline-danger:hover {
    color: #ffd7d7 !important;
    background: rgba(91, 24, 24, .74);
    border-color: rgba(248, 113, 113, .35);
}

html[data-bs-theme="dark"] .sidebar-link:hover .nav-icon {
    color: #dbe8ff;
    background: rgba(79, 155, 255, .16);
}

html[data-bs-theme="dark"] .sidebar-link:hover small,
html[data-bs-theme="dark"] .sidebar-link:hover .nav-copy small {
    color: #b8c5dd !important;
}

@media (min-width: 768px) {
    .settings-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-summary-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .settings-option-grid,
    .settings-check-row,
    .settings-preview-panel,
    .settings-update-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .settings-page-shell {
        grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
        align-items: start;
    }

    .settings-nav {
        position: sticky;
        top: 5.25rem;
    }
}

/* Global dual-theme CRM palette and dashboard analytics refresh */
:root {
    --oc-bg: #F9FAFB;
    --oc-panel: #FFFFFF;
    --oc-panel-strong: #FFFFFF;
    --oc-surface: #FFFFFF;
    --oc-text: #111827;
    --oc-muted: #4B5563;
    --oc-border: rgba(17, 24, 39, .10);
    --oc-border-strong: rgba(17, 24, 39, .16);
    --oc-primary: #5B3DF5;
    --oc-accent: #5B3DF5;
    --oc-accent-soft: rgba(91, 61, 245, .10);
    --oc-accent-strong: #4338CA;
    --oc-success: #10B981;
    --oc-warning: #F59E0B;
    --oc-error: #EF4444;
    --oc-danger: #EF4444;
    --oc-on-primary: #FFFFFF;
    --oc-on-success: #111827;
    --oc-on-warning: #111827;
    --oc-on-error: #111827;
    --oc-success-text: #047857;
    --oc-warning-text: #B45309;
    --oc-error-text: #B91C1C;
    --oc-shadow: 0 24px 58px rgba(17, 24, 39, .08);
    --oc-shadow-soft: 0 14px 30px rgba(17, 24, 39, .06);
    --bs-body-bg: #F9FAFB;
    --bs-body-color: #111827;
    --bs-primary: #5B3DF5;
    --bs-success: #10B981;
    --bs-warning: #F59E0B;
    --bs-danger: #EF4444;
}

html[data-bs-theme="dark"] {
    --oc-bg: #0F172A;
    --oc-panel: #1E293B;
    --oc-panel-strong: #1E293B;
    --oc-surface: #1E293B;
    --oc-text: #F9FAFB;
    --oc-muted: #CBD5E1;
    --oc-border: rgba(249, 250, 251, .12);
    --oc-border-strong: rgba(249, 250, 251, .20);
    --oc-primary: #5B3DF5;
    --oc-accent: #5B3DF5;
    --oc-accent-soft: rgba(91, 61, 245, .22);
    --oc-accent-strong: #C4B5FD;
    --oc-success: #10B981;
    --oc-warning: #F59E0B;
    --oc-error: #EF4444;
    --oc-danger: #EF4444;
    --oc-on-primary: #FFFFFF;
    --oc-on-success: #111827;
    --oc-on-warning: #111827;
    --oc-on-error: #111827;
    --oc-success-text: #6EE7B7;
    --oc-warning-text: #FCD34D;
    --oc-error-text: #FCA5A5;
    --oc-shadow: 0 24px 58px rgba(0, 0, 0, .34);
    --oc-shadow-soft: 0 14px 30px rgba(0, 0, 0, .26);
    --bs-body-bg: #0F172A;
    --bs-body-color: #F9FAFB;
    --bs-primary: #5B3DF5;
    --bs-success: #10B981;
    --bs-warning: #F59E0B;
    --bs-danger: #EF4444;
}

body,
html[data-bs-theme="dark"] body {
    color: var(--oc-text);
    background: var(--oc-bg);
}

.app-shell,
.app-shell * {
    letter-spacing: 0 !important;
}

.topbar-card,
.hero-card,
.surface-card,
.stat-card,
.list-card,
.table-card,
.filter-card,
.kanban-lane,
.settings-summary-strip article,
.settings-subsection,
.settings-preview-panel,
.settings-update-panel,
.dashboard-chart-card,
.dashboard-list-card,
.dashboard-kpi-card,
.dashboard-window-card {
    color: var(--oc-text);
    background: var(--oc-panel);
    border-color: var(--oc-border);
}

.page-title,
.admin-card-title,
.compact-panel-title,
.dashboard-hero-title,
.stat-value,
.dashboard-kpi-value,
.dashboard-kpi-card strong,
.dashboard-stack-item strong,
.dashboard-progress-label strong {
    color: var(--oc-text) !important;
}

.section-kicker,
.dashboard-kpi-tone {
    color: var(--oc-primary) !important;
}

.page-subtitle,
.text-muted-soft,
.compact-panel-copy,
.stat-meta,
.dashboard-kpi-meta,
.dashboard-chart-label,
.dashboard-stack-item small,
.dashboard-progress-label span,
.dashboard-funnel-row span,
.dashboard-legend small {
    color: var(--oc-muted) !important;
}

.btn-primary,
.action-chip.is-primary,
.sidebar-link.active,
.settings-nav-item.active {
    color: var(--oc-on-primary) !important;
    background: var(--oc-primary) !important;
    border-color: var(--oc-primary) !important;
    box-shadow: 0 14px 26px rgba(91, 61, 245, .24);
}

.btn-success,
.badge.bg-success,
.text-bg-success {
    color: var(--oc-on-success) !important;
    background: var(--oc-success) !important;
    border-color: var(--oc-success) !important;
}

.btn-warning,
.badge.bg-warning,
.text-bg-warning {
    color: var(--oc-on-warning) !important;
    background: var(--oc-warning) !important;
    border-color: var(--oc-warning) !important;
}

.btn-danger,
.badge.bg-danger,
.text-bg-danger {
    color: var(--oc-on-error) !important;
    background: var(--oc-error) !important;
    border-color: var(--oc-error) !important;
}

.btn-outline-success {
    color: var(--oc-success-text) !important;
    border-color: var(--oc-success) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    color: var(--oc-on-success) !important;
    background: var(--oc-success) !important;
}

.btn-outline-warning {
    color: var(--oc-warning-text) !important;
    border-color: var(--oc-warning) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    color: var(--oc-on-warning) !important;
    background: var(--oc-warning) !important;
}

.btn-outline-danger {
    color: var(--oc-error-text) !important;
    border-color: var(--oc-error) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: var(--oc-on-error) !important;
    background: var(--oc-error) !important;
}

.text-success {
    color: var(--oc-success-text) !important;
}

.text-warning {
    color: var(--oc-warning-text) !important;
}

.text-danger {
    color: var(--oc-error-text) !important;
}

.alert-success {
    color: var(--oc-success-text);
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .28);
}

.alert-warning {
    color: var(--oc-warning-text);
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .30);
}

.alert-danger {
    color: var(--oc-error-text);
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .28);
}

.pill,
.dashboard-chip {
    color: var(--oc-accent-strong);
    background: var(--oc-accent-soft);
    border-color: rgba(91, 61, 245, .18);
}

.dashboard-chip.is-success,
.dashboard-kpi-card.is-success .dashboard-kpi-icon {
    color: #065F46;
    background: rgba(16, 185, 129, .14);
}

.dashboard-kpi-card.is-warning .dashboard-kpi-icon {
    color: #92400E;
    background: rgba(245, 158, 11, .18);
}

.dashboard-kpi-card.is-error .dashboard-kpi-icon {
    color: #991B1B;
    background: rgba(239, 68, 68, .16);
}

html[data-bs-theme="dark"] .dashboard-chip.is-success,
html[data-bs-theme="dark"] .dashboard-kpi-card.is-success .dashboard-kpi-icon {
    color: #A7F3D0;
    background: rgba(16, 185, 129, .18);
}

html[data-bs-theme="dark"] .dashboard-kpi-card.is-warning .dashboard-kpi-icon {
    color: #FCD34D;
    background: rgba(245, 158, 11, .20);
}

html[data-bs-theme="dark"] .dashboard-kpi-card.is-error .dashboard-kpi-icon {
    color: #FCA5A5;
    background: rgba(239, 68, 68, .20);
}

.dashboard-hero {
    display: grid;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(91, 61, 245, .10), transparent 38%),
        var(--oc-panel);
}

.dashboard-hero-title {
    max-width: 900px;
    margin: 0 0 .45rem;
    font-size: clamp(1.1rem, 2.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.dashboard-window-card {
    padding: .85rem;
    border: 1px solid var(--oc-border);
    border-radius: .5rem;
    box-shadow: var(--oc-shadow-soft);
}

.dashboard-window-controls {
    display: grid;
    gap: .55rem;
    grid-template-columns: 1fr auto;
}

.dashboard-kpi-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.dashboard-kpi-card,
.dashboard-chart-card,
.dashboard-list-card {
    border: 1px solid var(--oc-border);
    border-radius: .5rem;
    box-shadow: var(--oc-shadow-soft);
}

.dashboard-kpi-card {
    min-height: 10rem;
    padding: .92rem;
    display: grid;
    gap: .7rem;
}

.dashboard-kpi-top,
.dashboard-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.dashboard-kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    color: var(--oc-primary);
    background: var(--oc-accent-soft);
}

.dashboard-kpi-tone {
    align-self: center;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-kpi-value {
    font-size: clamp(1.22rem, 2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.035em;
}

.dashboard-kpi-meta {
    font-size: .76rem;
}

.dashboard-kpi-spark,
.dashboard-bar-row,
.dashboard-mini-bars {
    display: flex;
    align-items: end;
    gap: .42rem;
    min-height: 2.2rem;
}

.dashboard-kpi-spark span,
.dashboard-bar-track span,
.dashboard-mini-bars span {
    display: block;
    width: 100%;
    height: var(--bar-value);
    min-height: .35rem;
    border-radius: 999px 999px .35rem .35rem;
    background: var(--oc-primary);
}

.dashboard-main-grid,
.dashboard-lower-grid {
    display: grid;
    gap: 1rem;
}

.dashboard-chart-card,
.dashboard-list-card {
    padding: 1rem;
}

.dashboard-line-chart {
    width: 100%;
    min-height: 240px;
    margin-top: .7rem;
}

.dashboard-gridline {
    stroke: var(--oc-border);
    stroke-width: 1;
}

.dashboard-chart-label {
    fill: var(--oc-muted);
    font-size: 10px;
    font-weight: 700;
}

.dashboard-bar-row {
    min-height: 7rem;
    padding: .6rem .2rem 0;
}

.dashboard-bar-item {
    flex: 1;
    display: grid;
    gap: .35rem;
    justify-items: center;
    min-width: 0;
}

.dashboard-bar-track {
    width: 100%;
    height: 5.8rem;
    display: flex;
    align-items: end;
    padding: .25rem;
    border-radius: .75rem;
    background: rgba(91, 61, 245, .08);
}

.dashboard-bar-track span {
    background: linear-gradient(180deg, var(--oc-success), var(--oc-primary));
}

.dashboard-bar-item small {
    color: var(--oc-muted);
    font-size: .68rem;
    font-weight: 700;
}

.dashboard-donut {
    width: min(13rem, 70vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 1.1rem auto;
    border-radius: 50%;
    background: var(--donut);
    position: relative;
}

.dashboard-donut::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: var(--oc-panel);
    border: 1px solid var(--oc-border);
}

.dashboard-donut > div {
    position: relative;
    z-index: 1;
    text-align: center;
}

.dashboard-donut strong {
    display: block;
    color: var(--oc-text);
    font-size: 1.5rem;
    line-height: 1;
}

.dashboard-donut span {
    color: var(--oc-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dashboard-legend,
.dashboard-progress-list,
.dashboard-funnel,
.dashboard-stack-list {
    display: grid;
    gap: .68rem;
}

.dashboard-legend > div {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .48rem;
    align-items: center;
}

.dashboard-legend span {
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background: var(--legend-color);
}

.dashboard-legend strong,
.dashboard-progress-label,
.dashboard-funnel-row strong {
    color: var(--oc-text);
    font-size: .78rem;
}

.dashboard-funnel-row {
    display: grid;
    gap: .45rem;
}

.dashboard-funnel-row > div:first-child,
.dashboard-progress-label {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
}

.dashboard-funnel-track,
.dashboard-progress-track {
    height: .64rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(91, 61, 245, .10);
}

.dashboard-funnel-track span,
.dashboard-progress-track span {
    display: block;
    width: var(--bar-value);
    height: 100%;
    border-radius: inherit;
    background: var(--track-color, var(--oc-primary));
}

.dashboard-mini-bars {
    min-height: 11rem;
    align-items: stretch;
}

.dashboard-mini-bars > div {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: .35rem;
    align-items: end;
    text-align: center;
}

.dashboard-mini-bars span {
    align-self: end;
    background: var(--bar-color, var(--oc-primary));
}

.dashboard-mini-bars strong {
    color: var(--oc-text);
}

.dashboard-mini-bars small {
    color: var(--oc-muted);
    font-size: .68rem;
}

.dashboard-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2rem;
    padding: .38rem .62rem;
    border: 1px solid rgba(91, 61, 245, .18);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-stack-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .62rem;
    align-items: center;
    padding: .68rem;
    color: var(--oc-text);
    text-decoration: none;
    border: 1px solid var(--oc-border);
    border-radius: .5rem;
    background: rgba(91, 61, 245, .035);
}

.dashboard-stack-item:hover {
    color: var(--oc-text);
    background: rgba(91, 61, 245, .08);
}

.dashboard-stack-item small {
    display: block;
    margin-top: .14rem;
    font-size: .72rem;
}

.dashboard-stack-dot,
.dashboard-avatar {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--oc-primary);
    color: #fff;
    font-weight: 800;
}

.dashboard-stack-dot {
    width: .72rem;
    height: .72rem;
    border-radius: 999px;
}

.dashboard-stack-dot.is-high {
    background: var(--oc-error);
}

.dashboard-stack-dot.is-medium {
    background: var(--oc-warning);
}

.dashboard-stack-dot.is-low {
    background: var(--oc-success);
}

html[data-bs-theme="dark"] .dashboard-bar-track,
html[data-bs-theme="dark"] .dashboard-funnel-track,
html[data-bs-theme="dark"] .dashboard-progress-track {
    background: rgba(249, 250, 251, .10);
}

html[data-bs-theme="dark"] .dashboard-stack-item {
    background: rgba(249, 250, 251, .04);
}

html[data-bs-theme="dark"] .dashboard-stack-item:hover {
    background: rgba(249, 250, 251, .08);
}

@media (min-width: 768px) {
    .dashboard-hero {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-chart-card.is-wide {
        grid-column: span 2;
    }

    .dashboard-lower-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .dashboard-kpi-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .dashboard-main-grid {
        grid-template-columns: 1.35fr .9fr .9fr;
    }

    .dashboard-chart-card.is-wide {
        grid-column: span 2;
    }
}

/* Cleaner dashboard pass: fewer charts, stronger CRM signal */
.dashboard-kpi-card {
    min-height: auto;
}

.dashboard-focus-grid {
    display: grid;
    gap: 1rem;
}

.dashboard-focus-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    color: var(--oc-text);
    background: var(--oc-panel);
    border: 1px solid var(--oc-border);
    border-radius: .5rem;
    box-shadow: var(--oc-shadow-soft);
}

.dashboard-money-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-money-grid > div {
    padding: .8rem;
    background: var(--oc-bg);
    border: 1px solid var(--oc-border);
    border-radius: .5rem;
}

.dashboard-money-grid span,
.dashboard-invoice-strip span {
    display: block;
    color: var(--oc-muted);
    font-size: .76rem;
}

.dashboard-money-grid strong {
    display: block;
    margin-top: .28rem;
    color: var(--oc-text);
    font-size: clamp(1rem, 1.5vw, 1.38rem);
}

.dashboard-quiet-bars {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    min-height: 5.4rem;
}

.dashboard-quiet-bars > div {
    display: grid;
    gap: .35rem;
    align-items: end;
    min-width: 0;
}

.dashboard-quiet-bars span {
    display: block;
    height: var(--bar-value);
    min-height: .42rem;
    background: linear-gradient(180deg, var(--oc-primary), var(--oc-success));
    border-radius: .5rem .5rem .2rem .2rem;
}

.dashboard-quiet-bars small {
    color: var(--oc-muted);
    font-size: .68rem;
    text-align: center;
}

.dashboard-invoice-strip {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.dashboard-invoice-strip span {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .45rem .6rem;
    color: var(--oc-muted);
    background: var(--oc-bg);
    border: 1px solid var(--oc-border);
    border-radius: 999px;
}

.dashboard-invoice-strip strong {
    color: var(--oc-text);
}

@media (min-width: 900px) {
    .dashboard-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-focus-card.is-wide {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .dashboard-money-grid,
    .dashboard-quiet-bars {
        grid-template-columns: 1fr;
    }
}