:root {
    --bg: #f3f6fb;
    --surface: rgba(255, 255, 255, 0.86);
    --surface-strong: #ffffff;
    --surface-soft: #f8fbff;
    --line: rgba(148, 163, 184, 0.18);
    --text: #172033;
    --muted: #667085;
    --primary: #0f766e;
    --primary-strong: #0b5f59;
    --shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    --hero-start: #0f172a;
    --hero-end: #172554;
    --sidebar-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.88) 100%);
}

html[data-theme="dark"] {
    --bg: #08111f;
    --surface: rgba(10, 18, 32, 0.82);
    --surface-strong: #0f172a;
    --surface-soft: #111c31;
    --line: rgba(148, 163, 184, 0.16);
    --text: #e5edf9;
    --muted: #94a3b8;
    --primary: #2dd4bf;
    --primary-strong: #14b8a6;
    --shadow: 0 24px 60px rgba(2, 8, 23, 0.35);
    --hero-start: #0b1220;
    --hero-end: #0f766e;
    --sidebar-bg: linear-gradient(180deg, rgba(2, 6, 23, 0.94) 0%, rgba(15, 23, 42, 0.94) 100%);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 28%),
        radial-gradient(circle at right, rgba(249, 115, 22, 0.16), transparent 22%),
        linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
    transition: background-color 0.25s ease, color 0.25s ease;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(45, 212, 191, 0.14), transparent 28%),
        radial-gradient(circle at right, rgba(249, 115, 22, 0.12), transparent 22%),
        linear-gradient(180deg, #07101c 0%, #0b1324 100%);
}

.app-backdrop {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 88%);
    pointer-events: none;
}

html[data-theme="dark"] .app-backdrop {
    opacity: 0.28;
}

.build-badge {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    backdrop-filter: blur(10px);
}

.page-flow-shell {
    margin: 0 0 1.25rem;
    padding: 1rem 1rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 255, 0.92));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(10px);
}

body[data-page-slug="index"] .page-flow-shell,
body[data-page-slug="accounting"] .page-flow-shell {
    position: sticky;
    top: 84px;
    z-index: 40;
}

html[data-theme="dark"] .page-flow-shell {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(17, 28, 49, 0.94));
    box-shadow: 0 18px 36px rgba(2, 6, 23, 0.24);
}

.page-flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.page-flow-head h5 {
    font-size: 1rem;
    line-height: 1.35;
}

.page-flow-toggle {
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: rgba(15, 118, 110, 0.08);
    color: var(--primary-strong);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    font-weight: 700;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.page-flow-toggle:hover {
    transform: translateY(-1px);
    background: rgba(15, 118, 110, 0.14);
}

.page-flow-toggle.is-active {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.22);
    color: #c2410c;
}

html[data-theme="dark"] .page-flow-toggle {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.18);
    color: #99f6e4;
}

html[data-theme="dark"] .page-flow-toggle.is-active {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.2);
    color: #fdba74;
}

.page-flow-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.page-flow-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0 0 0.95rem;
}

.page-flow-mode {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.78);
    color: var(--muted);
    border-radius: 16px;
    padding: 0.7rem 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.page-flow-mode:hover {
    transform: translateY(-1px);
    color: var(--primary-strong);
    border-color: rgba(15, 118, 110, 0.18);
}

.page-flow-mode.is-active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(59, 130, 246, 0.12));
    border-color: rgba(15, 118, 110, 0.24);
    color: var(--primary-strong);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.06);
}

body[data-page-slug="index"] .page-flow-mode.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(14, 165, 233, 0.12));
    border-color: rgba(37, 99, 235, 0.24);
    color: #1d4ed8;
}

body[data-page-slug="accounting"] .page-flow-mode.is-active {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.16), rgba(59, 130, 246, 0.12));
    border-color: rgba(5, 150, 105, 0.24);
    color: #047857;
}

html[data-theme="dark"] .page-flow-mode {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

html[data-theme="dark"] .page-flow-mode.is-active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(59, 130, 246, 0.16));
    border-color: rgba(45, 212, 191, 0.18);
    color: #ccfbf1;
}

.page-flow-btn {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-weight: 700;
    line-height: 1.1;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.page-flow-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.22);
    color: var(--primary-strong);
}

.page-flow-btn.is-active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.14), rgba(59, 130, 246, 0.12));
    border-color: rgba(15, 118, 110, 0.24);
    color: var(--primary-strong);
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.08);
}

body[data-page-slug="index"] .page-flow-btn.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(125, 211, 252, 0.12));
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}

body[data-page-slug="accounting"] .page-flow-btn.is-active {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.14), rgba(59, 130, 246, 0.1));
    border-color: rgba(5, 150, 105, 0.22);
    color: #047857;
}

html[data-theme="dark"] .page-flow-btn {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

html[data-theme="dark"] .page-flow-btn.is-active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(59, 130, 246, 0.16));
    border-color: rgba(45, 212, 191, 0.18);
    color: #ccfbf1;
}

.page-flow-section {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-flow-section.is-flow-hidden {
    display: none !important;
}

@media (max-width: 991.98px) {
    body[data-page-slug="index"] .page-flow-shell,
    body[data-page-slug="accounting"] .page-flow-shell {
        top: 72px;
    }
}

/* Kartlari daha belirginlestir */
.page-index .homepage-kpi-card,
.page-index .homepage-summary-card,
.page-index .homepage-start-center,
.page-index .homepage-ai-priority-card,
.page-index .homepage-today-strip-item,
.page-index .manager-box,
.page-index .module-overview-card,
.page-index .notification-panel,
.page-index .manager-panel,
.page-index .table-wrap,
.page-accounting .accounting-overview-card,
.page-accounting .accounting-overview-card-sm,
.page-accounting .accounting-panel,
.page-accounting .table-wrap,
.page-accounting .form-card {
    border-color: rgba(30, 41, 59, 0.24) !important;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14) !important;
}

.page-index .homepage-kpi-card:hover,
.page-index .homepage-summary-card:hover,
.page-index .homepage-start-center:hover,
.page-index .homepage-ai-priority-card:hover,
.page-index .homepage-today-strip-item:hover,
.page-index .manager-box:hover,
.page-index .module-overview-card:hover,
.page-accounting .accounting-overview-card:hover,
.page-accounting .accounting-overview-card-sm:hover,
.page-accounting .accounting-panel:hover,
.page-accounting .table-wrap:hover,
.page-accounting .form-card:hover {
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.16) !important;
    border-color: rgba(30, 41, 59, 0.28) !important;
}

.page-index .homepage-kpi-card,
.page-index .homepage-summary-card,
.page-index .homepage-start-center,
.page-index .homepage-ai-priority-card,
.page-index .homepage-today-strip-item,
.page-index .manager-box,
.page-index .module-overview-card,
.page-accounting .accounting-overview-card,
.page-accounting .accounting-overview-card-sm {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.page-index .homepage-kpi-card:nth-of-type(4n + 1),
.page-index .homepage-summary-card:nth-of-type(4n + 1),
.page-index .homepage-start-center:nth-of-type(4n + 1),
.page-index .homepage-ai-priority-card:nth-of-type(4n + 1),
.page-index .homepage-today-strip-item:nth-of-type(4n + 1),
.page-index .manager-box:nth-of-type(4n + 1),
.page-index .module-overview-card:nth-of-type(4n + 1),
.page-accounting .accounting-overview-card:nth-of-type(4n + 1),
.page-accounting .accounting-overview-card-sm:nth-of-type(4n + 1) {
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
}

.page-index .homepage-kpi-card:nth-of-type(4n + 2),
.page-index .homepage-summary-card:nth-of-type(4n + 2),
.page-index .homepage-start-center:nth-of-type(4n + 2),
.page-index .homepage-ai-priority-card:nth-of-type(4n + 2),
.page-index .homepage-today-strip-item:nth-of-type(4n + 2),
.page-index .manager-box:nth-of-type(4n + 2),
.page-index .module-overview-card:nth-of-type(4n + 2),
.page-accounting .accounting-overview-card:nth-of-type(4n + 2),
.page-accounting .accounting-overview-card-sm:nth-of-type(4n + 2) {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
}

.page-index .homepage-kpi-card:nth-of-type(4n + 3),
.page-index .homepage-summary-card:nth-of-type(4n + 3),
.page-index .homepage-start-center:nth-of-type(4n + 3),
.page-index .homepage-ai-priority-card:nth-of-type(4n + 3),
.page-index .homepage-today-strip-item:nth-of-type(4n + 3),
.page-index .manager-box:nth-of-type(4n + 3),
.page-index .module-overview-card:nth-of-type(4n + 3),
.page-accounting .accounting-overview-card:nth-of-type(4n + 3),
.page-accounting .accounting-overview-card-sm:nth-of-type(4n + 3) {
    background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
}

.page-index .homepage-kpi-card:nth-of-type(4n + 4),
.page-index .homepage-summary-card:nth-of-type(4n + 4),
.page-index .homepage-start-center:nth-of-type(4n + 4),
.page-index .homepage-ai-priority-card:nth-of-type(4n + 4),
.page-index .homepage-today-strip-item:nth-of-type(4n + 4),
.page-index .manager-box:nth-of-type(4n + 4),
.page-index .module-overview-card:nth-of-type(4n + 4),
.page-accounting .accounting-overview-card:nth-of-type(4n + 4),
.page-accounting .accounting-overview-card-sm:nth-of-type(4n + 4) {
    background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%) !important;
}

.page-index .homepage-kpi-card strong,
.page-index .homepage-summary-card strong,
.page-index .homepage-start-center strong,
.page-index .homepage-ai-priority-card strong,
.page-index .homepage-today-strip-item strong,
.page-index .manager-box strong,
.page-index .module-overview-card strong,
.page-accounting .accounting-overview-card strong,
.page-accounting .accounting-overview-card-sm strong,
.page-accounting .table-wrap h5,
.page-accounting .form-card h5,
.page-accounting .accounting-panel h5 {
    color: #0f172a !important;
}

.page-index .homepage-kpi-card span,
.page-index .homepage-summary-card span,
.page-index .homepage-start-center span,
.page-index .homepage-ai-priority-card small,
.page-index .homepage-today-strip-item small,
.page-index .manager-box span,
.page-index .module-overview-card span,
.page-accounting .accounting-overview-card span,
.page-accounting .accounting-overview-card-sm span {
    color: #475569 !important;
}

.page-index .homepage-kpi-card,
.page-index .homepage-summary-card,
.page-index .homepage-start-center,
.page-index .homepage-ai-priority-card,
.page-index .homepage-today-strip-item,
.page-index .manager-box,
.page-index .module-overview-card,
.page-accounting .accounting-overview-card,
.page-accounting .accounting-overview-card-sm {
    position: relative;
    overflow: hidden;
}

.page-index .homepage-kpi-card::after,
.page-index .homepage-summary-card::after,
.page-index .homepage-start-center::after,
.page-index .homepage-ai-priority-card::after,
.page-index .homepage-today-strip-item::after,
.page-index .manager-box::after,
.page-index .module-overview-card::after,
.page-accounting .accounting-overview-card::after,
.page-accounting .accounting-overview-card-sm::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.85), rgba(6, 182, 212, 0.65));
    opacity: 0.9;
}

.page-index .homepage-kpi-card:nth-of-type(4n + 2)::after,
.page-index .homepage-summary-card:nth-of-type(4n + 2)::after,
.page-index .homepage-start-center:nth-of-type(4n + 2)::after,
.page-index .homepage-ai-priority-card:nth-of-type(4n + 2)::after,
.page-index .homepage-today-strip-item:nth-of-type(4n + 2)::after,
.page-index .manager-box:nth-of-type(4n + 2)::after,
.page-index .module-overview-card:nth-of-type(4n + 2)::after,
.page-accounting .accounting-overview-card:nth-of-type(4n + 2)::after,
.page-accounting .accounting-overview-card-sm:nth-of-type(4n + 2)::after {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.95), rgba(16, 185, 129, 0.7));
}

.page-index .homepage-kpi-card:nth-of-type(4n + 3)::after,
.page-index .homepage-summary-card:nth-of-type(4n + 3)::after,
.page-index .homepage-start-center:nth-of-type(4n + 3)::after,
.page-index .homepage-ai-priority-card:nth-of-type(4n + 3)::after,
.page-index .homepage-today-strip-item:nth-of-type(4n + 3)::after,
.page-index .manager-box:nth-of-type(4n + 3)::after,
.page-index .module-overview-card:nth-of-type(4n + 3)::after,
.page-accounting .accounting-overview-card:nth-of-type(4n + 3)::after,
.page-accounting .accounting-overview-card-sm:nth-of-type(4n + 3)::after {
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.95), rgba(245, 158, 11, 0.72));
}

.page-index .homepage-kpi-card:nth-of-type(4n + 4)::after,
.page-index .homepage-summary-card:nth-of-type(4n + 4)::after,
.page-index .homepage-start-center:nth-of-type(4n + 4)::after,
.page-index .homepage-ai-priority-card:nth-of-type(4n + 4)::after,
.page-index .homepage-today-strip-item:nth-of-type(4n + 4)::after,
.page-index .manager-box:nth-of-type(4n + 4)::after,
.page-index .module-overview-card:nth-of-type(4n + 4)::after,
.page-accounting .accounting-overview-card:nth-of-type(4n + 4)::after,
.page-accounting .accounting-overview-card-sm:nth-of-type(4n + 4)::after {
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.95), rgba(139, 92, 246, 0.72));
}

.page-index .homepage-kpi-card .summary-card-icon,
.page-index .homepage-summary-card .summary-card-icon,
.page-index .homepage-start-center .summary-card-icon,
.page-index .manager-box .summary-card-icon,
.page-index .module-overview-card .summary-card-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(37, 99, 235, 0.12) !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.page-index .homepage-kpi-card:nth-of-type(4n + 2) .summary-card-icon,
.page-index .homepage-summary-card:nth-of-type(4n + 2) .summary-card-icon,
.page-index .homepage-start-center:nth-of-type(4n + 2) .summary-card-icon,
.page-index .manager-box:nth-of-type(4n + 2) .summary-card-icon,
.page-index .module-overview-card:nth-of-type(4n + 2) .summary-card-icon {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #15803d !important;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.page-index .homepage-kpi-card:nth-of-type(4n + 3) .summary-card-icon,
.page-index .homepage-summary-card:nth-of-type(4n + 3) .summary-card-icon,
.page-index .homepage-start-center:nth-of-type(4n + 3) .summary-card-icon,
.page-index .manager-box:nth-of-type(4n + 3) .summary-card-icon,
.page-index .module-overview-card:nth-of-type(4n + 3) .summary-card-icon {
    background: rgba(249, 115, 22, 0.12) !important;
    color: #c2410c !important;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.12);
}

.page-index .homepage-kpi-card:nth-of-type(4n + 4) .summary-card-icon,
.page-index .homepage-summary-card:nth-of-type(4n + 4) .summary-card-icon,
.page-index .homepage-start-center:nth-of-type(4n + 4) .summary-card-icon,
.page-index .manager-box:nth-of-type(4n + 4) .summary-card-icon,
.page-index .module-overview-card:nth-of-type(4n + 4) .summary-card-icon {
    background: rgba(168, 85, 247, 0.12) !important;
    color: #7c3aed !important;
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.12);
}

.page-index .notification-panel,
.page-index .manager-panel,
.page-index .table-wrap,
.page-accounting .accounting-panel,
.page-accounting .table-wrap,
.page-accounting .form-card {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%) !important;
}

.page-flow-section.is-flow-active {
    animation: pageFlowReveal 0.18s ease;
}

.summary-compact-target {
    position: relative;
}

.summary-compact-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.1rem 0 1rem;
    padding: 0.8rem 0.95rem;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.72);
}

html[data-theme="dark"] .summary-compact-bar {
    background: rgba(15, 23, 42, 0.56);
    border-color: rgba(148, 163, 184, 0.16);
}

.summary-compact-note {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
}

.summary-compact-toggle {
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: rgba(15, 118, 110, 0.08);
    color: var(--primary-strong);
    border-radius: 999px;
    padding: 0.6rem 0.95rem;
    font-weight: 700;
}

.summary-compact-target .summary-compact-extra {
    display: none !important;
}

.summary-compact-target.is-summary-expanded .summary-compact-extra {
    display: block !important;
}

.summary-compact-target.is-summary-expanded .summary-compact-extra.manager-box,
.summary-compact-target.is-summary-expanded .summary-compact-extra.homepage-kpi-card,
.summary-compact-target.is-summary-expanded .summary-compact-extra.mini-card {
    display: flex !important;
}

@keyframes pageFlowReveal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html[data-theme="dark"] .build-badge {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.32);
    color: #cbd5e1;
}

.app-layout {
    position: relative;
    z-index: 1;
    padding: 24px;
}

.sidebar-panel {
    position: sticky;
    top: 24px;
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    margin-right: 18px;
    padding: 24px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px;
    background: var(--sidebar-bg);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.22);
    color: #e2e8f0;
    display: flex !important;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    align-self: flex-start;
}

.sidebar-column {
    display: block !important;
    visibility: visible !important;
}

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

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #082f49;
    background: linear-gradient(135deg, #99f6e4, #fdba74);
}

.brand-logo-box,
.auth-brand-logo {
    background: #ffffff;
    object-fit: contain;
}

.brand-logo-box {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 8px;
}

.brand-logo-img,
.auth-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-subline {
    margin-top: 4px;
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.6);
}

.sidebar-highlight {
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(96, 165, 250, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-highlight-label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sidebar-highlight strong,
.sidebar-highlight small {
    display: block;
}

.sidebar-highlight small {
    margin-top: 6px;
    color: rgba(226, 232, 240, 0.74);
}

.sidebar-launchpad {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 14px 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.98));
    border: 1px solid rgba(96, 165, 250, 0.2);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

.sidebar-launchpad-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sidebar-launchpad-head small {
    color: #64748b;
    font-size: 0.72rem;
}

.sidebar-launchpad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sidebar-launchpad-link {
    display: grid;
    gap: 6px;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 16px;
    text-decoration: none;
    color: #243247;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.16);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar-launchpad-link i {
    font-size: 1rem;
    color: #2563eb;
}

.sidebar-launchpad-link span {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.sidebar-launchpad-link:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.98));
    border-color: rgba(37, 99, 235, 0.2);
}

.sidebar-launchpad-link.is-active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(96, 165, 250, 0.22));
    border-color: rgba(14, 165, 233, 0.24);
}

.sidebar-launchpad-compact {
    padding: 10px 12px;
    border-radius: 18px;
    box-shadow: none;
}

.sidebar-launchpad-grid-compact {
    grid-template-columns: 1fr;
    gap: 6px;
}

.sidebar-launchpad-compact .sidebar-launchpad-link {
    min-height: 52px;
    padding: 8px 10px;
    gap: 4px;
}

.sidebar-launchpad-compact .sidebar-launchpad-link span {
    font-size: 0.74rem;
}

.sidebar-favorites {
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.16);
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.sidebar-quick-access {
    padding: 14px 16px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(96, 165, 250, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-quick-access {
    display: none !important;
}

.sidebar-quick-access-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sidebar-quick-access-head small {
    color: rgba(226, 232, 240, 0.7);
    font-size: 0.72rem;
}

.sidebar-quick-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    visibility: visible !important;
}

.sidebar-quick-link {
    display: grid;
    gap: 6px;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 16px;
    text-decoration: none;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-quick-link i {
    font-size: 1rem;
}

.sidebar-quick-link span {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.sidebar-quick-link:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-quick-link.is-active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(96, 165, 250, 0.18));
    border-color: rgba(45, 212, 191, 0.16);
}

.sidebar-favorite-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    visibility: visible !important;
}

.sidebar-favorite-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-favorite-link:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.sidebar-kicker,
.page-kicker {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--muted);
}

.sidebar-kicker { color: rgba(226, 232, 240, 0.7); }

.sidebar-brand h1 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #f8fafc;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 320px;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 6px;
    margin-right: -6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.sidebar-brand,
.sidebar-highlight,
.sidebar-quick-access,
.sidebar-favorites,
.sidebar-footer {
    flex: 0 0 auto;
}

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

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

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

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.nav-item-link,
.logout-link,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.nav-item-link {
    color: #dbe4ee;
}

.nav-badge {
    margin-left: auto;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
    font-size: 0.78rem;
    font-weight: 700;
}

.nav-item-link:hover,
.logout-link:hover,
.nav-item-link.active,
.theme-toggle:hover {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(96, 165, 250, 0.18));
    transform: translateX(2px);
}

.sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #14b8a6, #f59e0b);
    color: #082f49;
    font-weight: 800;
}

.user-avatar-image {
    object-fit: cover;
    display: block;
    padding: 0;
}

.user-pill strong,
.user-pill span { display: block; }

.user-pill span {
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.72);
    text-transform: capitalize;
}

.mobile-hero {
    background:
        radial-gradient(circle at top right, rgba(253, 186, 116, 0.2), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(15, 118, 110, 0.88));
}

.mobile-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.mobile-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    text-decoration: none;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.mobile-link-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, 0.25);
}

.mobile-link-card i {
    font-size: 1.2rem;
    color: var(--primary);
}

.mobile-card {
    border-radius: 28px;
}

.mobile-person-grid {
    display: grid;
    gap: 12px;
}

.mobile-person-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.mobile-person-card strong,
.mobile-person-card span {
    display: block;
}

.mobile-person-card span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.9rem;
}

.mobile-action-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.mobile-action-row-wrap {
    flex-wrap: wrap;
}

.mobile-action-row form {
    flex: 1 1 0;
}

.mobile-action-row .btn {
    width: 100%;
}

.revision-box {
    height: 100%;
}

.revision-line {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.revision-line:first-child {
    border-top: 0;
    padding-top: 0;
}

.revision-field {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.revision-change-values {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.revision-old,
.revision-new,
.revision-single {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
}

.revision-old {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.85);
}

.revision-new {
    color: #047857;
    background: rgba(209, 250, 229, 0.85);
}

.revision-timeline {
    display: grid;
    gap: 10px;
}

.revision-timeline-item {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    background: rgba(255, 255, 255, 0.36);
    border: 1px solid transparent;
}

.revision-timeline-item.active {
    border-color: rgba(15, 118, 110, 0.35);
    background: rgba(204, 251, 241, 0.55);
}

.revision-timeline-item strong,
.revision-timeline-item span {
    display: block;
}

.revision-timeline-item span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.88rem;
}

.revision-snapshot-card {
    height: 100%;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.content-shell {
    min-height: calc(100vh - 48px);
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 34px;
    background: var(--surface);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
}

.content-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.page-heading {
    margin: 0;
    font-size: clamp(1.7rem, 2vw, 2.35rem);
    font-weight: 800;
    color: var(--text);
}

.topbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.topbar-chip,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    background: var(--surface-strong);
    border: 1px solid var(--line);
    color: var(--text);
}

.theme-toggle {
    cursor: pointer;
}

.topbar-chip.soft {
    background: rgba(15, 118, 110, 0.1);
    color: var(--primary-strong);
}

.hero-panel,
.stat-card,
.table-wrap,
.form-card,
.card,
.chart-card,
.mini-card {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface-strong);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.hero-panel {
    position: relative;
    overflow: hidden;
    padding: 28px;
    background:
        radial-gradient(circle at top right, rgba(45, 212, 191, 0.22), transparent 30%),
        linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%);
    color: #f8fafc;
}

.hero-panel h2,
.hero-panel h1 {
    line-height: 1.08;
}

.hero-panel p:last-child {
    margin-bottom: 0;
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: auto -40px -40px auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.stat-card { height: 100%; }
.stat-card .card-body { padding: 1.35rem; }
.stat-card .text-muted { color: var(--muted) !important; font-weight: 500; }
.stat-card h3 { margin: 0.35rem 0 0; font-size: 2rem; font-weight: 800; color: var(--text); }

.stat-card-danger {
    border-color: rgba(220, 38, 38, 0.28);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.96));
}

html[data-theme="dark"] .stat-card-danger {
    background: linear-gradient(180deg, rgba(69, 10, 10, 0.62), rgba(15, 23, 42, 0.96));
    border-color: rgba(248, 113, 113, 0.24);
}

.stat-card-danger h3,
.stat-card-danger .text-muted {
    color: #b91c1c !important;
}

html[data-theme="dark"] .stat-card-danger h3,
html[data-theme="dark"] .stat-card-danger .text-muted {
    color: #fca5a5 !important;
}

.table-wrap,
.form-card,
.chart-card,
.mini-card {
    padding: 22px;
}

.table-wrap h5,
.form-card h5,
.chart-card h5,
.mini-card h5 {
    margin-bottom: 14px;
    font-size: 1.08rem;
    font-weight: 700;
}

.table-wrap > .d-flex:first-child,
.form-card > .d-flex:first-child,
.chart-card > .d-flex:first-child,
.notification-panel > .d-flex:first-child,
.manager-panel > .d-flex:first-child {
    margin-bottom: 14px !important;
}

.page-kicker {
    letter-spacing: 0.14em;
}

.chart-card canvas {
    width: 100% !important;
    height: 280px !important;
}

.vehicle-fuel-chart {
    width: 100% !important;
    height: 240px !important;
}

.mini-card strong {
    display: block;
    font-size: 1.6rem;
    margin-top: 8px;
}

.mini-card span {
    color: var(--muted);
}

.accounting-overview-card {
    height: 100%;
    min-height: 160px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.accounting-overview-card h5 {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.25;
}

.accounting-overview-card strong {
    margin-top: 0;
    font-size: clamp(1.75rem, 2.3vw, 2.2rem);
    line-height: 1.05;
    word-break: break-word;
}

.accounting-overview-card span {
    display: block;
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.accounting-overview-card-sm {
    min-height: 142px;
}

.accounting-overview-card-sm strong {
    font-size: clamp(1.35rem, 1.8vw, 1.75rem);
}

#accountingSectionCanvas .accounting-row .mini-card {
    height: 100%;
    min-height: 146px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#accountingSectionCanvas .accounting-row .mini-card h5 {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.28;
}

#accountingSectionCanvas .accounting-row .mini-card strong {
    margin-top: 0;
    font-size: clamp(1.42rem, 1.95vw, 1.9rem);
    line-height: 1.08;
    word-break: break-word;
}

#accountingSectionCanvas .accounting-row .mini-card span {
    display: block;
    margin-top: 10px;
    font-size: 0.92rem;
    line-height: 1.35;
}

#accountingSectionCanvas .table-wrap,
#accountingSectionCanvas .form-card,
#accountingSectionCanvas .accounting-panel.table-wrap,
#accountingSectionCanvas .accounting-panel.form-card {
    padding: 18px 20px;
    border-radius: 20px;
}

#accountingSectionCanvas .table-wrap > .d-flex:first-child,
#accountingSectionCanvas .form-card > .d-flex:first-child,
#accountingSectionCanvas .accounting-panel > .d-flex:first-child {
    margin-bottom: 12px !important;
}

#accountingSectionCanvas .table-wrap h5,
#accountingSectionCanvas .form-card h5,
#accountingSectionCanvas .accounting-panel h5 {
    margin-bottom: 10px;
    font-size: 1.02rem;
    line-height: 1.25;
}

#accountingSectionCanvas .row.accounting-row {
    --bs-gutter-y: 1rem;
}

#accountingSectionCanvas .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.93rem;
}

#accountingSectionCanvas .form-control,
#accountingSectionCanvas .form-select {
    min-height: 44px;
    border-radius: 14px;
}

#accountingSectionCanvas textarea.form-control {
    min-height: 92px;
}

#accountingSectionCanvas .table-responsive {
    border-radius: 14px;
}

#accountingSectionCanvas table th,
#accountingSectionCanvas table td {
    vertical-align: middle;
}

@media (max-width: 768px) {
    .accounting-overview-card,
    .accounting-overview-card-sm {
        min-height: auto;
        padding: 16px 18px;
    }

    .accounting-overview-card strong,
    .accounting-overview-card-sm strong {
        font-size: 1.5rem;
    }

    #accountingSectionCanvas .accounting-row .mini-card {
        min-height: auto;
        padding: 16px 18px;
    }

    #accountingSectionCanvas .accounting-row .mini-card strong {
        font-size: 1.45rem;
    }

    #accountingSectionCanvas .table-wrap,
    #accountingSectionCanvas .form-card,
    #accountingSectionCanvas .accounting-panel.table-wrap,
    #accountingSectionCanvas .accounting-panel.form-card {
        padding: 16px 16px;
        border-radius: 18px;
    }
}

.mini-card-link,
.manager-box-link,
[data-href] {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-href] {
    cursor: pointer;
}

.mini-card-link:hover,
.manager-box-link:hover,
[data-href]:hover {
    color: inherit;
    transform: translateY(-2px);
}

.mini-card-link:active,
.manager-box-link:active,
[data-href]:active {
    transform: translateY(0) scale(0.985);
}

.mini-card-link:hover,
[data-href]:hover {
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.homepage-summary-card {
    min-height: 168px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

.summary-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    margin-bottom: 12px;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-size: 1rem;
}

#dashboardWidgetCanvas > section,
#dashboardWidgetCanvas > div {
    margin-bottom: 1rem !important;
}

#dashboardWidgetCanvas .notification-panel,
#dashboardWidgetCanvas .manager-panel,
#dashboardWidgetCanvas .stock-alarm-panel,
#dashboardWidgetCanvas .vehicle-alert-panel,
#dashboardWidgetCanvas .table-wrap {
    border-radius: 22px;
}

#dashboardWidgetCanvas .manager-grid,
#dashboardWidgetCanvas .module-overview-grid,
#dashboardWidgetCanvas .notification-grid,
#dashboardWidgetCanvas .vehicle-alert-grid {
    gap: 10px;
}

#dashboardWidgetCanvas .manager-box,
#dashboardWidgetCanvas .module-overview-card {
    min-height: 140px;
}

#dashboardWidgetCanvas .mini-card,
#dashboardWidgetCanvas .manager-box,
#dashboardWidgetCanvas .module-overview-card,
#dashboardWidgetCanvas .notification-box {
    word-break: break-word;
}

.stock-alarm-panel {
    padding: 22px 24px;
    border-radius: 26px;
    border: 1px solid rgba(248, 113, 113, 0.24);
    background:
        radial-gradient(circle at right top, rgba(248, 113, 113, 0.2), transparent 28%),
        linear-gradient(135deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: 0 18px 40px rgba(220, 38, 38, 0.08);
}

html[data-theme="dark"] .stock-alarm-panel {
    background:
        radial-gradient(circle at right top, rgba(248, 113, 113, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(69, 10, 10, 0.72), rgba(15, 23, 42, 0.98));
    border-color: rgba(248, 113, 113, 0.22);
}

.stock-alarm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.stock-alarm-head h5 {
    color: #991b1b;
    font-size: 1.15rem;
    font-weight: 800;
}

.stock-alarm-head p {
    color: #b45309;
}

html[data-theme="dark"] .stock-alarm-head h5 {
    color: #fecaca;
}

html[data-theme="dark"] .stock-alarm-head p {
    color: #fdba74;
}

.stock-alarm-count {
    min-width: 110px;
    text-align: center;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(220, 38, 38, 0.1);
}

.stock-alarm-count strong,
.stock-alarm-count span {
    display: block;
}

.stock-alarm-count strong {
    font-size: 2rem;
    line-height: 1;
    color: #b91c1c;
}

.stock-alarm-count span {
    margin-top: 6px;
    font-size: 0.84rem;
    color: #b45309;
}

html[data-theme="dark"] .stock-alarm-count {
    background: rgba(248, 113, 113, 0.12);
}

html[data-theme="dark"] .stock-alarm-count strong {
    color: #fecaca;
}

html[data-theme="dark"] .stock-alarm-count span {
    color: #fdba74;
}

.stock-alarm-list {
    display: grid;
    gap: 10px;
}

.stock-alarm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(248, 113, 113, 0.16);
}

.stock-alarm-item-link {
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stock-alarm-item-link:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: rgba(220, 38, 38, 0.22);
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.08);
}

.stock-alarm-item-link:active {
    transform: translateY(0) scale(0.985);
}

.stock-alarm-item strong,
.stock-alarm-item span {
    display: block;
}

.stock-alarm-item strong {
    color: #7f1d1d;
}

.stock-alarm-item span {
    color: #9a3412;
    font-size: 0.9rem;
}

html[data-theme="dark"] .stock-alarm-item {
    background: rgba(15, 23, 42, 0.42);
    border-color: rgba(248, 113, 113, 0.14);
}

html[data-theme="dark"] .stock-alarm-item strong {
    color: #fee2e2;
}

html[data-theme="dark"] .stock-alarm-item span {
    color: #fdba74;
}

.stock-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.92);
    border: 1px solid rgba(248, 113, 113, 0.28);
}

html[data-theme="dark"] .stock-alert-badge {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.32);
    border-color: rgba(248, 113, 113, 0.24);
}

.critical-row td {
    background: rgba(254, 226, 226, 0.72);
    color: #991b1b !important;
    font-weight: 600;
}

.warning-row td {
    background: rgba(254, 243, 199, 0.72);
    color: #92400e !important;
}

html[data-theme="dark"] .critical-row td {
    background: rgba(127, 29, 29, 0.28);
    color: #fecaca !important;
}

html[data-theme="dark"] .warning-row td {
    background: rgba(120, 53, 15, 0.28);
    color: #fde68a !important;
}

.stock-state {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.stock-state.danger {
    color: #ffffff;
    background: #dc2626;
}

.stock-state.warning {
    color: #111827;
    background: #fbbf24;
}

.stock-state.safe {
    color: #ffffff;
    background: #16a34a;
}

.product-stock-card {
    padding: 24px;
    border-radius: 28px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top right, rgba(45, 212, 191, 0.14), transparent 28%),
        linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.product-stock-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.product-stock-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-stock-meta span,
.product-inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    background: rgba(15, 118, 110, 0.08);
    color: var(--primary-strong);
}

.product-stock-badge {
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.accounting-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.accounting-tab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    background: #f8fafc;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.accounting-tab-link:hover {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.35);
    color: var(--primary-strong);
    transform: translateY(-1px);
}

.product-stock-badge.safe {
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
}

.product-stock-badge.danger {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.product-photo-panel {
    height: 100%;
    min-height: 260px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.product-photo-img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    display: block;
}

.product-photo-placeholder {
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
}

.product-photo-placeholder i {
    font-size: 2.2rem;
}

.mini-stock-box,
.detail-panel-box {
    height: 100%;
    padding: 18px;
    border-radius: 20px;
    background: var(--surface-strong);
    border: 1px solid var(--line);
}

.mini-stock-box span,
.warehouse-stock-item span {
    color: var(--muted);
}

.mini-stock-box strong {
    display: block;
    margin-top: 8px;
    font-size: 1.45rem;
}

.warehouse-stock-list {
    display: grid;
    gap: 10px;
}

.warehouse-stock-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-soft);
}

.warehouse-stock-item strong {
    color: var(--text);
}

.quick-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--primary-strong);
    background: rgba(15, 118, 110, 0.08);
}

.qr-label-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border-radius: 22px;
    border: 1px dashed rgba(15, 118, 110, 0.26);
    background: rgba(15, 118, 110, 0.04);
}

.qr-label-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qr-label-image {
    width: 108px;
    height: 108px;
    padding: 6px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--line);
}

.product-row {
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

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

.product-row.active td {
    background: rgba(15, 118, 110, 0.08);
}

.product-name-link {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.product-name-link:hover {
    color: var(--primary-strong);
}

.table-link {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.table-link:hover {
    color: var(--primary-strong);
    text-decoration: underline;
}

.product-row-actions {
    white-space: nowrap;
}

.product-table-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-table-thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-soft);
}

.product-table-thumb.placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
}

.empty-search-state {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface-soft);
    color: var(--muted);
    text-align: center;
}

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
    border-bottom-width: 1px;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.table > :not(caption) > * > * {
    padding: 0.95rem 0.8rem;
    border-bottom-color: rgba(148, 163, 184, 0.14);
    color: var(--text);
}
.table tbody tr:hover { background: rgba(15, 118, 110, 0.04); }

.form-label {
    margin-bottom: 0.45rem;
    color: color-mix(in srgb, var(--text) 78%, white 22%);
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 48px;
    border-radius: 16px;
    border-color: rgba(148, 163, 184, 0.26);
    padding: 0.72rem 0.95rem;
    background: var(--surface-soft);
    color: var(--text);
    box-shadow: none;
}

textarea.form-control { min-height: 110px; }

.form-control:focus,
.form-select:focus {
    border-color: rgba(15, 118, 110, 0.5);
    box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.12);
}

.btn {
    border-radius: 14px;
    font-weight: 600;
    padding: 0.72rem 1rem;
}
.btn-primary {
    background: linear-gradient(135deg, #0f766e, #0f9d8a);
    border: none;
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #0d5f59, #0f766e);
}
.btn-secondary {
    background: #e2e8f0;
    border-color: #e2e8f0;
    color: #0f172a;
}
.alert { border: none; border-radius: 18px; }

.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
.auth-shell { width: min(1080px, calc(100vw - 32px)); }
.auth-grid {
    overflow: hidden;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow);
}
.auth-visual {
    min-height: 100%;
    padding: 42px;
    color: #f8fafc;
    background:
        radial-gradient(circle at top, rgba(45, 212, 191, 0.25), transparent 30%),
        linear-gradient(145deg, #0f172a 0%, #172554 72%, #0f766e 100%);
}
.auth-panel {
    padding: 42px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
}
.auth-title {
    margin-bottom: 0.75rem;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    padding: 8px;
}
.auth-list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}
.auth-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(248, 250, 252, 0.88);
}
.auth-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 118, 110, 0.08);
    color: #115e59;
}

.logo-preview-wrap {
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
}

.brand-logo-preview {
    display: block;
    max-width: 180px;
    max-height: 72px;
    margin-top: 8px;
    object-fit: contain;
}

.vehicle-summary-card {
    padding: 24px;
    border-radius: 28px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 28%),
        linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.vehicle-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.vehicle-deadline-list {
    display: grid;
    gap: 10px;
}

.vehicle-deadline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-soft);
}

.vehicle-deadline-item strong,
.vehicle-deadline-item span {
    display: block;
}

.vehicle-deadline-item.danger {
    background: rgba(254, 226, 226, 0.72);
}

.vehicle-deadline-item.warning {
    background: rgba(254, 243, 199, 0.72);
}

.vehicle-deadline-item.safe {
    background: rgba(220, 252, 231, 0.72);
}

html[data-theme="dark"] .vehicle-deadline-item.danger {
    background: rgba(127, 29, 29, 0.28);
}

html[data-theme="dark"] .vehicle-deadline-item.warning {
    background: rgba(120, 53, 15, 0.28);
}

html[data-theme="dark"] .vehicle-deadline-item.safe {
    background: rgba(20, 83, 45, 0.30);
}

.vehicle-alert-panel {
    padding: 22px 24px;
    border-radius: 26px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 28%),
        linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.vehicle-alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.vehicle-alert-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.vehicle-alert-box {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.vehicle-alert-box strong {
    font-size: 1.05rem;
    color: var(--text);
}

.vehicle-alert-box span:last-child {
    justify-self: flex-start;
    margin-left: 0;
}

.vehicle-alert-box.danger {
    background: rgba(254, 226, 226, 0.72);
}

.vehicle-alert-box.warning {
    background: rgba(254, 243, 199, 0.72);
}

.vehicle-alert-link:hover .vehicle-alert-box {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.vehicle-alert-link:active .vehicle-alert-box {
    transform: translateY(0) scale(0.985);
}

.section-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.section-jump-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--primary-strong);
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(15, 118, 110, 0.12);
    transition: all 0.2s ease;
}

.section-jump-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #0f9d8a);
}

.vehicle-section-card {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.section-block-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.section-block-head h6 {
    margin-bottom: 4px;
    font-size: 1rem;
    font-weight: 700;
}

.vehicle-section-card .detail-panel-box {
    border-radius: 22px;
    border: 1px solid rgba(15, 118, 110, 0.1);
    background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
    box-shadow: none;
}

.vehicle-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin-bottom: 18px;
}

.vehicle-search-box {
    width: min(100%, 320px);
}

html[data-theme="dark"] .vehicle-alert-box.danger {
    background: rgba(127, 29, 29, 0.28);
}

html[data-theme="dark"] .vehicle-alert-box.warning {
    background: rgba(120, 53, 15, 0.28);
}

.notification-panel {
    padding: 22px 24px;
    border-radius: 26px;
    border: 1px solid rgba(15, 118, 110, 0.14);
    background:
        radial-gradient(circle at top left, rgba(45, 212, 191, 0.12), transparent 32%),
        linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.notification-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.notification-panel h5,
.manager-panel h5,
.vehicle-alert-panel h5,
.stock-alarm-panel h5 {
    line-height: 1.18;
}

.notification-box {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.notification-box strong {
    color: var(--text);
}

.notification-box span {
    color: var(--muted);
}

.worker-attendance-box {
    min-height: 168px;
    align-content: start;
}

.notification-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-pill {
    border: 1px solid rgba(15, 118, 110, 0.12);
    background: rgba(15, 118, 110, 0.08);
    color: var(--primary-strong);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
}

.filter-pill.active,
.filter-pill:hover {
    background: linear-gradient(135deg, #0f766e, #0f9d8a);
    color: #ffffff;
}

.notification-feed-grid {
    margin-bottom: 24px;
}

.notification-feed-card {
    color: inherit;
    text-decoration: none;
    display: block;
}

.notification-feed-card .notification-box {
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.notification-read-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: var(--primary-strong);
    font-size: 0.75rem;
    font-weight: 700;
}

.notification-feed-card.is-read .notification-box {
    opacity: 0.72;
}

.notification-feed-card.is-read .notification-read-badge {
    background: rgba(148, 163, 184, 0.18);
    color: var(--muted);
}

.notification-feed-card.is-resolved .notification-box {
    opacity: 0.62;
    border-style: dashed;
}

.notification-action-row {
    margin-top: 0.85rem;
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.notification-main-link {
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.notification-owner-line {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.notification-inline-form {
    margin: 0;
}

.notification-action-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f766e;
    text-decoration: underline;
    cursor: pointer;
    border: 0;
    background: transparent;
    font-family: inherit;
}

.notification-action-row a.notification-action-link {
    text-decoration: underline;
}

.notification-action-button {
    padding: 0;
    line-height: 1;
}

.notification-action-danger {
    color: #b42318;
}

.notification-feed-card:hover .notification-box {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.notification-feed-card:active .notification-box {
    transform: translateY(0) scale(0.985);
}

.manager-panel {
    padding: 22px 24px;
    border-radius: 26px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 30%),
        linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.page-index .hero-panel,
.page-reports .hero-panel,
.page-accounting .hero-panel,
.page-calendar .hero-panel,
.page-messages .hero-panel,
.page-notifications .hero-panel,
.page-approvals .hero-panel,
.page-service .hero-panel,
.page-tasks .hero-panel,
.page-vehicles .hero-panel,
.page-employees .hero-panel,
.page-purchase_orders .hero-panel,
.page-personal_hub .hero-panel {
    padding: 24px 26px;
    border-radius: 28px;
}

.page-index .hero-panel h2,
.page-reports .hero-panel h2,
.page-accounting .hero-panel h2,
.page-calendar .hero-panel h2,
.page-messages .hero-panel h2,
.page-notifications .hero-panel h2,
.page-approvals .hero-panel h2,
.page-service .hero-panel h2,
.page-tasks .hero-panel h2,
.page-vehicles .hero-panel h2,
.page-employees .hero-panel h2,
.page-purchase_orders .hero-panel h2,
.page-personal_hub .hero-panel h2 {
    font-size: clamp(1.6rem, 1.35rem + 0.95vw, 2.2rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    max-width: 14ch;
}

.page-index .hero-panel > p:last-of-type,
.page-reports .hero-panel > p:last-of-type,
.page-accounting .hero-panel > p:last-of-type,
.page-calendar .hero-panel > p:last-of-type,
.page-messages .hero-panel > p:last-of-type,
.page-notifications .hero-panel > p:last-of-type,
.page-approvals .hero-panel > p:last-of-type,
.page-service .hero-panel > p:last-of-type,
.page-tasks .hero-panel > p:last-of-type,
.page-vehicles .hero-panel > p:last-of-type,
.page-employees .hero-panel > p:last-of-type,
.page-purchase_orders .hero-panel > p:last-of-type,
.page-personal_hub .hero-panel > p:last-of-type {
    max-width: 68ch;
    line-height: 1.6;
}

.page-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-badges {
    gap: 0.6rem;
}

.hero-badge {
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.manager-box {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    min-height: 152px;
    align-content: start;
}

.manager-box strong {
    font-size: 1.14rem;
    line-height: 1.15;
    color: var(--text);
}

.manager-box-link:hover {
    border-color: rgba(15, 118, 110, 0.24);
}

.page-index .table-wrap,
.page-reports .table-wrap,
.page-accounting .table-wrap,
.page-calendar .table-wrap,
.page-messages .table-wrap,
.page-notifications .table-wrap,
.page-approvals .table-wrap,
.page-service .table-wrap,
.page-tasks .table-wrap,
.page-vehicles .table-wrap,
.page-employees .table-wrap,
.page-purchase_orders .table-wrap,
.page-assignments .table-wrap,
.page-assignment_returns .table-wrap,
.page-personal_hub .table-wrap {
    border-radius: 24px;
}

.page-index .table-wrap h5,
.page-reports .table-wrap h5,
.page-accounting .table-wrap h5,
.page-calendar .table-wrap h5,
.page-messages .table-wrap h5,
.page-notifications .table-wrap h5,
.page-approvals .table-wrap h5,
.page-service .table-wrap h5,
.page-tasks .table-wrap h5,
.page-vehicles .table-wrap h5,
.page-employees .table-wrap h5,
.page-purchase_orders .table-wrap h5,
.page-assignments .table-wrap h5,
.page-assignment_returns .table-wrap h5,
.page-personal_hub .table-wrap h5,
.page-index .detail-panel-box h5,
.page-calendar .detail-panel-box h5,
.page-vehicles .detail-panel-box h5,
.page-employees .detail-panel-box h5 {
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.page-index .table-wrap .text-muted,
.page-reports .table-wrap .text-muted,
.page-accounting .table-wrap .text-muted,
.page-calendar .table-wrap .text-muted,
.page-messages .table-wrap .text-muted,
.page-notifications .table-wrap .text-muted,
.page-approvals .table-wrap .text-muted,
.page-service .table-wrap .text-muted,
.page-tasks .table-wrap .text-muted,
.page-vehicles .table-wrap .text-muted,
.page-employees .table-wrap .text-muted,
.page-purchase_orders .table-wrap .text-muted,
.page-assignments .table-wrap .text-muted,
.page-assignment_returns .table-wrap .text-muted,
.page-personal_hub .table-wrap .text-muted,
.page-index .detail-panel-box .text-muted,
.page-calendar .detail-panel-box .text-muted,
.page-vehicles .detail-panel-box .text-muted,
.page-employees .detail-panel-box .text-muted {
    line-height: 1.55;
}

.page-index .btn,
.page-reports .btn,
.page-accounting .btn,
.page-calendar .btn,
.page-messages .btn,
.page-notifications .btn,
.page-approvals .btn,
.page-service .btn,
.page-tasks .btn,
.page-vehicles .btn,
.page-employees .btn,
.page-purchase_orders .btn,
.page-assignments .btn,
.page-assignment_returns .btn,
.page-personal_hub .btn {
    border-radius: 14px;
    font-weight: 600;
}

.message-list {
    display: grid;
    gap: 14px;
}

.page-messages .message-list {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: stretch;
}

.message-filter-bar {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.message-card {
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
}

.message-card.unread {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.06);
}

.message-card.read {
    opacity: 0.82;
}

.message-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.message-card-head strong {
    display: block;
    font-size: 1.02rem;
    line-height: 1.35;
    margin-bottom: 0.45rem;
}

.message-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.message-card-meta span {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}

.message-card-body {
    display: grid;
    gap: 0.85rem;
    min-height: 118px;
}

.message-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-messages .conversation-list {
    display: grid;
    gap: 1rem;
}

.page-messages .messages-live-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 1rem;
    align-items: start;
}

.page-messages .messages-page-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.page-messages .messages-compose-card {
    position: sticky;
    top: 96px;
}

.page-messages .conversation-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 196px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    cursor: pointer;
}

.page-messages .conversation-card.is-unread {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
}

.page-messages .conversation-card.is-selected {
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.12);
    background: rgba(240, 253, 250, 0.9);
}

.page-messages .conversation-card-head,
.page-messages .conversation-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.page-messages .conversation-card-head strong {
    display: block;
    font-size: 1.02rem;
    line-height: 1.4;
    margin-bottom: 0.45rem;
}

.page-messages .conversation-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.page-messages .conversation-card-meta span {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}

.page-messages .conversation-card-body {
    display: grid;
    gap: 0.85rem;
    min-height: 118px;
}

.page-messages .conversation-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-messages .conversation-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page-messages .conversation-inline-chip {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
    font-size: 0.79rem;
    font-weight: 700;
}

.page-messages .conversation-inline-chip.is-unread {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.page-messages .conversation-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-messages .conversation-preview-shell {
    position: sticky;
    top: 96px;
    padding: 1rem;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.page-messages .conversation-preview-shell.is-empty {
    display: grid;
    place-items: center;
    min-height: 240px;
}

.page-messages .conversation-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

.page-messages .conversation-preview-thread {
    display: grid;
    gap: 0.75rem;
    max-height: 460px;
    overflow: auto;
    padding-right: 0.15rem;
}

.page-messages .conversation-preview-item {
    padding: 0.85rem 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.92);
}

.page-messages .conversation-preview-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.page-messages .conversation-preview-item-head strong {
    color: var(--text);
    font-size: 0.9rem;
}

.page-messages .conversation-preview-item-body {
    font-size: 0.94rem;
    line-height: 1.62;
    color: var(--text);
}

.page-messages .conversation-preview-actions {
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .page-messages .messages-page-grid,
    .page-messages .messages-live-grid {
        grid-template-columns: 1fr;
    }

    .page-messages .messages-compose-card,
    .page-messages .conversation-preview-shell {
        position: static;
    }
}

.message-card-attachment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.message-card-attachment-type {
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
}

.message-card-attachment-link {
    font-size: 0.86rem;
    font-weight: 600;
}

.message-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.95rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.message-card-actions form {
    margin: 0;
}

.message-card-status-note {
    font-size: 0.84rem;
    color: var(--muted);
    font-weight: 600;
}

.page-messages .notification-read-badge.is-approval-pending {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.16);
}

.page-messages .notification-read-badge.is-approved {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.16);
}

.page-messages .notification-read-badge.is-rejected {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.16);
}

.record-message-thread-list {
    display: grid;
    gap: 0.9rem;
}

.record-message-thread-item {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.82);
}

.record-message-thread-item.is-own {
    border-color: rgba(37, 99, 235, 0.18);
    background: rgba(239, 246, 255, 0.88);
}

.record-message-thread-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.record-message-thread-head strong {
    font-size: 0.94rem;
    color: var(--text);
}

.record-message-thread-body {
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--text);
}

.page-messages .task-detail-tabs,
.page-notifications .task-detail-tabs {
    gap: 1rem;
}

.page-messages .task-detail-tablist,
.page-notifications .task-detail-tablist {
    padding: 0.35rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-messages .task-detail-tab,
.page-notifications .task-detail-tab {
    min-height: 40px;
    border-radius: 14px;
    font-weight: 600;
}

.page-messages .task-detail-pane,
.page-notifications .task-detail-pane {
    padding: 0;
}

.page-messages .message-card,
.page-notifications .notification-feed-card .notification-box {
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.page-messages .message-card.unread,
.page-notifications .notification-feed-card .notification-box.danger,
.page-notifications .notification-feed-card .notification-box.warning,
.page-notifications .notification-feed-card .notification-box.safe {
    border-color: rgba(37, 99, 235, 0.14);
}

.page-messages .message-list,
.page-notifications .notification-feed-grid,
.page-notifications #notificationArchiveGrid {
    display: grid;
    gap: 14px;
}

.page-messages .message-card {
    min-height: 240px;
    display: flex;
    flex-direction: column;
}

.page-messages .table-wrap > .product-inline-chip,
.page-notifications .table-wrap > .product-inline-chip {
    font-weight: 700;
}

.page-messages .task-empty-state,
.page-notifications .empty-search-state {
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px dashed rgba(148, 163, 184, 0.24);
}

html[data-theme="dark"] .page-messages .task-detail-tablist,
html[data-theme="dark"] .page-notifications .task-detail-tablist {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .page-messages .message-card,
html[data-theme="dark"] .page-notifications .notification-feed-card .notification-box {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.34);
}

.page-approvals .task-detail-tabs {
    gap: 1rem;
}

.page-tasks .task-detail-tabs,
.page-service .task-detail-tabs,
.page-employees .task-detail-tabs,
.page-vehicles .task-detail-tabs,
.page-assignment_returns .task-detail-tabs,
.page-purchase_orders .task-detail-tabs,
.page-reports .task-detail-tabs,
.page-calendar .task-detail-tabs,
.page-accounting .task-detail-tabs,
.page-approvals .task-detail-tablist {
    gap: 1rem;
}

.page-tasks .task-detail-tablist,
.page-service .task-detail-tablist,
.page-employees .task-detail-tablist,
.page-vehicles .task-detail-tablist,
.page-assignment_returns .task-detail-tablist,
.page-purchase_orders .task-detail-tablist,
.page-reports .task-detail-tablist,
.page-calendar .task-detail-tablist,
.page-accounting .task-detail-tablist,
.page-approvals .task-detail-tablist {
    padding: 0.35rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-tasks .task-detail-tab,
.page-service .task-detail-tab,
.page-employees .task-detail-tab,
.page-vehicles .task-detail-tab,
.page-assignment_returns .task-detail-tab,
.page-purchase_orders .task-detail-tab,
.page-reports .task-detail-tab,
.page-calendar .task-detail-tab,
.page-accounting .task-detail-tab,
.page-approvals .task-detail-tab {
    min-height: 40px;
    border-radius: 14px;
    font-weight: 600;
}

.page-tasks .task-detail-shell,
.page-service .task-detail-shell {
    border-radius: 26px;
    padding: 1.1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.9));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.page-tasks .task-detail-summary,
.page-service .task-detail-summary {
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
}

.page-employees #employee-detail-center,
.page-vehicles .vehicle-summary-card,
.page-vehicles .vehicle-section-card,
.page-assignments .table-wrap,
.page-assignment_returns .table-wrap,
.page-purchase_orders .table-wrap,
.page-reports .table-wrap,
.page-calendar .table-wrap,
.page-accounting .table-wrap,
.page-accounting .form-card,
.page-accounting .accounting-panel,
.page-accounting .accounting-overview-card,
.page-accounting .accounting-overview-card-sm {
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.page-employees #employee-detail-center,
.page-vehicles .vehicle-summary-card {
    padding: 1.15rem;
}

.page-assignments .table-wrap,
.page-assignment_returns .table-wrap,
.page-purchase_orders .table-wrap,
.page-reports .table-wrap,
.page-calendar .table-wrap,
.page-accounting .table-wrap,
.page-accounting .form-card,
.page-accounting .accounting-panel {
    padding: 1.15rem;
}

.page-tasks .task-detail-card,
.page-service .task-detail-card,
.page-employees .detail-panel-box,
.page-vehicles .detail-panel-box,
.page-assignment_returns .task-detail-card,
.page-purchase_orders .task-detail-card,
.page-calendar .detail-panel-box,
.page-approvals .task-detail-card,
.page-approvals .approval-attachment-card,
.page-approvals .approval-reason-box,
.page-approvals .approval-detail-row,
.page-approvals .approval-sla-note,
.page-approvals .mini-card,
.page-approvals .manager-box {
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.page-tasks .task-detail-card,
.page-service .task-detail-card {
    padding: 18px 20px;
}

.page-employees .detail-panel-box,
.page-vehicles .detail-panel-box {
    padding: 18px 20px;
}

.page-assignment_returns .task-detail-card,
.page-purchase_orders .task-detail-card,
.page-calendar .detail-panel-box {
    padding: 18px 20px;
}

.page-tasks .task-detail-card-head,
.page-service .task-detail-card-head,
.page-assignment_returns .task-detail-card-head,
.page-purchase_orders .task-detail-card-head {
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.page-employees .section-block-head,
.page-vehicles .section-block-head,
.page-vehicles .vehicle-summary-head {
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.page-reports .table-wrap > .d-flex:first-child,
.page-calendar .table-wrap > .d-flex:first-child,
.page-accounting .table-wrap > .d-flex:first-child,
.page-accounting .form-card > .d-flex:first-child,
.page-accounting .accounting-panel > .d-flex:first-child {
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.page-tasks .task-comment-card,
.page-service .service-log-card,
.page-service .service-summary-item {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(248, 250, 252, 0.82);
}

.page-employees .employee-highlight-box,
.page-employees .mini-stock-box,
.page-vehicles .mini-stock-box,
.page-vehicles .vehicle-deadline-item,
.page-vehicles .vehicle-alert-box,
.page-assignments .mini-stock-box,
.page-purchase_orders .mini-stock-box,
.page-reports .mini-card,
.page-reports .manager-box,
.page-calendar .mini-card,
.page-calendar .manager-box,
.page-accounting .mini-card,
.page-accounting .manager-box,
.page-accounting .accounting-effect-card {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(248, 250, 252, 0.82);
}

.page-tasks .task-score-tile,
.page-service .service-cost-tile,
.page-service .service-summary-item strong,
.page-purchase_orders .mini-stock-box strong {
    box-shadow: none;
}

.page-tasks .task-detail-form textarea,
.page-service .task-detail-form textarea,
.page-service .task-detail-form input,
.page-service .task-detail-form select {
    border-radius: 16px;
}

.page-tasks .clickable-row:hover > td,
.page-service .clickable-row:hover > td,
.page-employees .clickable-row:hover > td,
.page-vehicles .clickable-row:hover > td,
.page-assignments .clickable-row:hover > td,
.page-assignment_returns .clickable-row:hover > td,
.page-purchase_orders .clickable-row:hover > td,
.page-reports .clickable-row:hover > td,
.page-accounting .clickable-row:hover > td {
    background: rgba(37, 99, 235, 0.05);
}

.page-approvals .task-detail-card {
    padding: 18px 20px;
}

.page-approvals .approval-detail-row,
.page-approvals .approval-reason-box {
    padding: 0.9rem 1rem;
}

.page-approvals .approval-action-form textarea {
    border-radius: 16px;
}

.page-approvals .clickable-row:hover > td {
    background: rgba(37, 99, 235, 0.05);
}

html[data-theme="dark"] .page-approvals .task-detail-tablist {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .page-tasks .task-detail-shell,
html[data-theme="dark"] .page-service .task-detail-shell {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.88));
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.34);
}

html[data-theme="dark"] .page-tasks .task-detail-tablist,
html[data-theme="dark"] .page-service .task-detail-tablist,
html[data-theme="dark"] .page-employees .task-detail-tablist,
html[data-theme="dark"] .page-vehicles .task-detail-tablist,
html[data-theme="dark"] .page-assignment_returns .task-detail-tablist,
html[data-theme="dark"] .page-purchase_orders .task-detail-tablist,
html[data-theme="dark"] .page-reports .task-detail-tablist,
html[data-theme="dark"] .page-calendar .task-detail-tablist,
html[data-theme="dark"] .page-accounting .task-detail-tablist,
html[data-theme="dark"] .page-approvals .task-detail-tablist {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .page-employees #employee-detail-center,
html[data-theme="dark"] .page-vehicles .vehicle-summary-card,
html[data-theme="dark"] .page-vehicles .vehicle-section-card,
html[data-theme="dark"] .page-assignments .table-wrap,
html[data-theme="dark"] .page-assignment_returns .table-wrap,
html[data-theme="dark"] .page-purchase_orders .table-wrap,
html[data-theme="dark"] .page-reports .table-wrap,
html[data-theme="dark"] .page-calendar .table-wrap,
html[data-theme="dark"] .page-accounting .table-wrap,
html[data-theme="dark"] .page-accounting .form-card,
html[data-theme="dark"] .page-accounting .accounting-panel,
html[data-theme="dark"] .page-accounting .accounting-overview-card,
html[data-theme="dark"] .page-accounting .accounting-overview-card-sm,
html[data-theme="dark"] .page-tasks .task-detail-summary,
html[data-theme="dark"] .page-service .task-detail-summary,
html[data-theme="dark"] .page-tasks .task-detail-card,
html[data-theme="dark"] .page-service .task-detail-card,
html[data-theme="dark"] .page-employees .detail-panel-box,
html[data-theme="dark"] .page-vehicles .detail-panel-box,
html[data-theme="dark"] .page-assignment_returns .task-detail-card,
.page-accounting .accounting-panel,
html[data-theme="dark"] .page-purchase_orders .task-detail-card,
html[data-theme="dark"] .page-approvals .task-detail-card,
html[data-theme="dark"] .page-approvals .approval-attachment-card,
html[data-theme="dark"] .page-approvals .approval-reason-box,
html[data-theme="dark"] .page-approvals .approval-detail-row,
html[data-theme="dark"] .page-approvals .approval-sla-note,
html[data-theme="dark"] .page-approvals .mini-card,
html[data-theme="dark"] .page-approvals .manager-box {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.34);
}

html[data-theme="dark"] .page-tasks .task-comment-card,
html[data-theme="dark"] .page-service .service-log-card,
html[data-theme="dark"] .page-service .service-summary-item,
html[data-theme="dark"] .page-employees .employee-highlight-box,
html[data-theme="dark"] .page-employees .mini-stock-box,
html[data-theme="dark"] .page-vehicles .mini-stock-box,
html[data-theme="dark"] .page-vehicles .vehicle-deadline-item,
html[data-theme="dark"] .page-vehicles .vehicle-alert-box,
html[data-theme="dark"] .page-assignments .mini-stock-box,
html[data-theme="dark"] .page-purchase_orders .mini-stock-box,
html[data-theme="dark"] .page-reports .mini-card,
html[data-theme="dark"] .page-reports .manager-box,
html[data-theme="dark"] .page-calendar .mini-card,
html[data-theme="dark"] .page-calendar .manager-box,
html[data-theme="dark"] .page-accounting .mini-card,
html[data-theme="dark"] .page-accounting .manager-box,
html[data-theme="dark"] .page-accounting .accounting-effect-card {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.16);
}

.approval-action-form {
    min-width: 260px;
}

.approval-action-stack {
    display: grid;
    gap: 10px;
}

.approval-filter-bar {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface-soft);
}

.approval-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.approval-detail-list {
    display: grid;
    gap: 6px;
    min-width: 220px;
}

.approval-detail-row {
    padding: 0.68rem 0.8rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.9);
    font-size: 0.84rem;
}

.approval-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.approval-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 600;
}

.approval-reason-box {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: var(--text);
    font-size: 0.9rem;
}

.approval-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 12px;
    text-decoration: none;
    background: rgba(15, 118, 110, 0.1);
    color: var(--primary-strong);
    font-size: 0.84rem;
    font-weight: 600;
}

.approval-attachment-link:hover {
    background: rgba(15, 118, 110, 0.16);
    color: var(--primary-strong);
}

.approval-attachment-card {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.85);
}

.approval-attachment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.approval-attachment-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.approval-attachment-preview-link {
    display: inline-flex;
    margin-top: 10px;
    text-decoration: none;
}

.approval-attachment-preview {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.file-preview-card {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.85);
}

.file-preview-card.compact {
    min-width: 180px;
    padding: 8px;
}

.file-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.file-preview-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.file-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-strong);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
}

.file-preview-link:hover {
    color: var(--primary-strong);
    text-decoration: underline;
}

.file-preview-image-link {
    display: inline-flex;
    margin-top: 10px;
    text-decoration: none;
}

.file-preview-image {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.file-preview-image.compact {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}

.approval-sla-note {
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
}

.approval-sla-note.danger {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.approval-sla-note.warning {
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
}

.accounting-upload-hint {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.accounting-upload-preview {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px dashed rgba(15, 118, 110, 0.25);
    background: rgba(15, 118, 110, 0.06);
    color: var(--primary-strong);
    font-size: 0.84rem;
    font-weight: 600;
}

.accounting-file-input {
    min-height: 48px;
}

.accounting-upload-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.accounting-upload-card strong,
.accounting-upload-card span {
    display: block;
}

.accounting-upload-card span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.accounting-upload-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(15, 118, 110, 0.2);
    background: #ffffff;
}

.accounting-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.approval-summary-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notification-box.danger {
    background: rgba(254, 226, 226, 0.72);
}

.notification-box.warning {
    background: rgba(254, 243, 199, 0.72);
}

html[data-theme="dark"] .notification-box.danger {
    background: rgba(127, 29, 29, 0.28);
}

html[data-theme="dark"] .notification-box.warning {
    background: rgba(120, 53, 15, 0.28);
}

@media (max-width: 1199.98px) {
    .sidebar-panel {
        position: static;
        height: auto;
        max-height: none;
        min-height: auto;
        margin-right: 0;
        margin-bottom: 18px;
    }

    .sidebar-column {
        min-width: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .app-layout { padding: 14px; }
    .content-shell,
    .sidebar-panel,
    .table-wrap,
    .form-card,
    .hero-panel,
    .chart-card,
    .mini-card { border-radius: 24px; }
    .content-shell { padding: 18px; }
    .content-topbar { margin-bottom: 20px; }
    .auth-panel,
    .auth-visual { padding: 26px; }
    .stock-alarm-head,
    .stock-alarm-item,
    .product-stock-head,
    .warehouse-stock-item,
    .vehicle-summary-head,
    .vehicle-deadline-item,
    .section-block-head,
    .vehicle-list-head,
    .qr-label-card,
    .qr-label-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .vehicle-search-box {
        width: 100%;
    }
    .section-jump-nav {
        width: 100%;
    }
    .section-jump-link {
        width: 100%;
        justify-content: center;
    }
}
.sidebar-group-title {
    margin: 1rem 0 0.45rem;
    padding: 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
}

.sidebar-parent-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin: 0.45rem 0 0.1rem;
    padding: 0.76rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    width: 100%;
    border: 0;
    text-align: left;
    list-style: none;
    cursor: pointer;
}

.sidebar-parent-label::-webkit-details-marker {
    display: none;
}

.sidebar-parent-main {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.sidebar-accordion-item {
    margin-bottom: 0.05rem;
}

.sidebar-group-block {
    margin-bottom: 0.35rem;
}

.sidebar-group-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.45rem 0 0.15rem;
    padding: 0.76rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
}

.sidebar-accordion-icon {
    display: inline-flex;
    transition: transform 0.16s ease;
}

.nav-sub-item {
    margin-left: 0;
    width: 100%;
    min-height: 44px;
    padding: 0.68rem 0.9rem;
    border-left: 0;
    border-radius: 12px;
    font-size: 0.93rem;
    background: rgba(255, 255, 255, 0.02);
}

.sidebar-accordion-body {
    margin-top: 0.1rem;
    padding: 0;
    display: grid;
    gap: 0.12rem;
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-accordion-item[open] > .sidebar-parent-label {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(96, 165, 250, 0.14));
}

.sidebar-accordion-item .sidebar-parent-label {
    background: rgba(255, 255, 255, 0.72);
}

.sidebar-accordion-item[open] .sidebar-accordion-icon {
    transform: rotate(180deg);
}

.nav-sub-item.active {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(96, 165, 250, 0.18));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.nav-sub-item i {
    width: 18px;
    text-align: center;
}

.sidebar-accordion-body .nav-item-link {
    margin-left: 0 !important;
    padding-left: 0.9rem !important;
}

.sidebar-accordion-body .nav-item-link {
    transform: none !important;
}

.sidebar-accordion-body .nav-item-link:hover,
.sidebar-accordion-body .nav-item-link.active {
    transform: none !important;
}

.sidebar-accordion-item,
.sidebar-parent-label,
.sidebar-nav,
.sidebar-accordion-body,
.sidebar-nav .nav-item-link,
.sidebar-nav .nav-sub-item {
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-accordion-body {
    display: none;
}

.sidebar-accordion-item[open] .sidebar-accordion-body {
    display: grid !important;
}

.module-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.module-overview-card {
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-height: 190px;
}

a.module-overview-card:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: rgba(15, 118, 110, 0.2);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

a.module-overview-card:active {
    transform: translateY(0) scale(0.985);
}

.module-overview-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.02rem;
    color: #0f172a;
}

.module-overview-card span {
    display: block;
    color: #475569;
    line-height: 1.55;
}

.module-overview-card .product-inline-chip {
    margin-top: 12px;
}

.quick-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.quick-link-row .btn {
    border-radius: 999px;
}

.homepage-menu-card {
    padding: 22px;
}

.homepage-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.homepage-menu-head h5 {
    margin: 0;
}

.homepage-menu-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.homepage-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96));
    color: var(--text);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.homepage-menu-link:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.12);
    color: var(--text);
}

.homepage-menu-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    font-size: 1rem;
    flex-shrink: 0;
}

html[data-theme="dark"] .homepage-menu-link {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.92));
    border-color: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}

html[data-theme="dark"] .homepage-menu-link:hover {
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 12px 24px rgba(2, 132, 199, 0.18);
    color: #f8fafc;
}

html[data-theme="dark"] .homepage-menu-link-icon {
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}

.dashboard-widget-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.dashboard-widget-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}

.dashboard-widget-summary::-webkit-details-marker {
    display: none;
}

.dashboard-widget-summary h5,
.dashboard-widget-summary .page-kicker {
    margin-left: 0;
}

.dashboard-widget-body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}

#dashboardWidgetCanvas {
    display: flex;
    flex-direction: column;
}

.homepage-custom-shell {
    display: flex;
    flex-direction: column;
}

.homepage-custom-shell #dashboardWidgetCanvas {
    order: 2;
}

.homepage-custom-shell .homepage-static-overview {
    order: 2;
    display: none !important;
}

.homepage-custom-shell .homepage-static-layout {
    order: 1;
}

.homepage-custom-shell .homepage-static-layout > .col-xl-8 {
    display: none !important;
}

.homepage-custom-shell .homepage-static-layout > .col-xl-4 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.homepage-custom-shell .homepage-side-panel {
    width: 100%;
}

.dashboard-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dashboard-widget-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.dashboard-widget-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
    font-size: 1rem;
    cursor: grab;
    flex: 0 0 30px;
}

.dashboard-widget-option:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.24);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.vehicle-summary-card,
.product-stock-card,
.vehicle-section-card,
.table-wrap,
.form-card,
.chart-card,
.notification-panel,
.manager-panel,
.stock-alarm-panel,
.vehicle-alert-panel {
    overflow: hidden;
}

.table-responsive {
    border-radius: 16px;
}

.btn.btn-sm {
    padding: 0.58rem 0.85rem;
    border-radius: 12px;
}

@media (max-width: 1199.98px) {
    .homepage-summary-card,
    .module-overview-card,
    .manager-box {
        min-height: 132px;
    }

    #dashboardWidgetCanvas .manager-grid,
    #dashboardWidgetCanvas .module-overview-grid,
    #dashboardWidgetCanvas .notification-grid,
    #dashboardWidgetCanvas .vehicle-alert-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .homepage-summary-card,
    .module-overview-card,
    .manager-box {
        min-height: auto;
    }

    .summary-card-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    #dashboardWidgetCanvas .manager-grid,
    #dashboardWidgetCanvas .module-overview-grid,
    #dashboardWidgetCanvas .notification-grid,
    #dashboardWidgetCanvas .vehicle-alert-grid,
    .homepage-menu-links {
        grid-template-columns: 1fr;
    }

    #dashboardWidgetCanvas > section,
    #dashboardWidgetCanvas > div {
        margin-bottom: 0.85rem !important;
    }
}

.dashboard-widget-option.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
}

.dashboard-widget-option input {
    margin-top: 0;
}

.dashboard-widget-option span {
    color: #0f172a;
    font-weight: 600;
}

.dashboard-widget-option-label {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-widget-order-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.dashboard-widget-order-actions .btn {
    padding: 0.42rem 0.65rem;
    border-radius: 10px;
}

.homepage-widget-manager-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
}

.homepage-widget-manager-list .dashboard-widget-option {
    width: 100%;
    cursor: default;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-widget-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 30px;
}

.dashboard-widget-visibility {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.dashboard-widget-visibility.is-on {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.dashboard-widget-visibility.is-off {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.dashboard-widget-option.is-disabled {
    opacity: 0.72;
}

.dashboard-widget-position-select {
    width: 72px;
    min-width: 72px;
}

@media (max-width: 767.98px) {
    .homepage-widget-manager-list {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .dashboard-widget-option {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .dashboard-widget-option span {
    color: #e2e8f0;
}

.mini-calendar-table th,
.mini-calendar-table td {
    min-width: 110px;
}

.mini-calendar-cell {
    height: 116px;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.72);
}

.mini-calendar-cell.is-today {
    background: rgba(15, 118, 110, 0.08);
    box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.18);
}

.mini-calendar-day {
    font-weight: 700;
    margin-bottom: 10px;
}

.mini-calendar-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.mini-calendar-total,
.mini-calendar-empty {
    font-size: 12px;
}

.today-priority-list {
    display: grid;
    gap: 8px;
}

.today-priority-card {
    cursor: grab;
}

.today-priority-card.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
}

.calendar-link-card,
.calendar-link-row,
.mini-calendar-cell.is-actionable {
    cursor: pointer;
}

.calendar-link-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.calendar-link-row:hover > td {
    background: rgba(15, 118, 110, 0.04);
}

.mini-calendar-action {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    text-decoration: none;
    font-weight: 600;
}

.mini-calendar-cell.is-actionable:hover {
    background: rgba(15, 118, 110, 0.06);
}

.mini-calendar-cell.is-drop-target {
    background: rgba(15, 118, 110, 0.12);
    box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.28);
}

.calendar-draggable-card {
    cursor: grab;
}

.calendar-draggable-card.is-dragging {
    opacity: 0.6;
    transform: scale(0.98);
}

.calendar-owner-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.calendar-owner-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.calendar-owner-chip strong {
    display: inline-flex;
    min-width: 1.7rem;
    justify-content: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-size: 0.82rem;
}

.calendar-owner-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.28);
}

.calendar-owner-chip.is-active {
    background: rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.32);
}

.calendar-planning-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.calendar-planning-metrics div {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.calendar-planning-metrics span {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.calendar-planning-metrics strong {
    font-size: 1.15rem;
    color: #0f172a;
}

html[data-theme="dark"] .calendar-owner-chip {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .calendar-owner-chip strong {
    background: rgba(94, 234, 212, 0.15);
    color: #99f6e4;
}

.product-inline-chip.calendar-type-task {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.product-inline-chip.calendar-type-service {
    background: rgba(249, 115, 22, 0.14);
    color: #c2410c;
}

.product-inline-chip.calendar-type-vehicle {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
}

.product-inline-chip.calendar-type-finance {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.product-inline-chip.calendar-type-personal {
    background: rgba(168, 85, 247, 0.14);
    color: #7e22ce;
}

.product-inline-chip.calendar-type-recurring {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.product-inline-chip.calendar-type-default {
    background: rgba(71, 85, 105, 0.12);
    color: #334155;
}

html[data-theme="dark"] .product-inline-chip.calendar-type-task {
    background: rgba(96, 165, 250, 0.16);
    color: #bfdbfe;
}

html[data-theme="dark"] .product-inline-chip.calendar-type-service {
    background: rgba(251, 146, 60, 0.16);
    color: #fed7aa;
}

html[data-theme="dark"] .product-inline-chip.calendar-type-vehicle {
    background: rgba(45, 212, 191, 0.16);
    color: #99f6e4;
}

html[data-theme="dark"] .product-inline-chip.calendar-type-finance {
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
}

html[data-theme="dark"] .product-inline-chip.calendar-type-personal {
    background: rgba(192, 132, 252, 0.16);
    color: #e9d5ff;
}

html[data-theme="dark"] .product-inline-chip.calendar-type-recurring {
    background: rgba(251, 191, 36, 0.16);
    color: #fde68a;
}

html[data-theme="dark"] .product-inline-chip.calendar-type-default {
    background: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}

.finance-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.finance-trend-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.finance-trend-line {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #64748b;
}

.finance-trend-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.finance-trend-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.finance-trend-fill.income {
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

.finance-trend-fill.expense {
    background: linear-gradient(90deg, #ea580c 0%, #fb923c 100%);
}

.finance-trend-fill.balance-positive {
    background: linear-gradient(90deg, #0f766e 0%, #2dd4bf 100%);
}

.finance-trend-fill.balance-negative {
    background: linear-gradient(90deg, #b91c1c 0%, #f87171 100%);
}

html[data-theme="dark"] .finance-trend-card {
    border-color: rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.92) 100%);
}

html[data-theme="dark"] .finance-trend-line {
    color: #cbd5e1;
}

html[data-theme="dark"] .finance-trend-bar {
    background: rgba(148, 163, 184, 0.18);
}

/* Elegant refresh */
:root {
    --bg: #f4f7fb;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.98);
    --surface-soft: #f8fbff;
    --line: rgba(148, 163, 184, 0.14);
    --text: #1e293b;
    --muted: #64748b;
    --primary: #1d4ed8;
    --primary-strong: #1e40af;
    --shadow: 0 24px 48px rgba(15, 23, 42, 0.07);
    --hero-start: #eaf1fb;
    --hero-end: #dde8f8;
    --sidebar-bg: linear-gradient(180deg, rgba(247, 250, 253, 0.98) 0%, rgba(237, 243, 251, 0.98) 100%);
}

body {
    font-size: 14.5px;
    background:
        radial-gradient(circle at top left, rgba(29, 78, 216, 0.06), transparent 26%),
        radial-gradient(circle at right, rgba(56, 189, 248, 0.06), transparent 22%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.app-backdrop {
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
    background-size: 34px 34px;
}

.sidebar-panel {
    border-radius: 32px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.09);
    color: #475569;
}

.sidebar-highlight,
.sidebar-favorites,
.user-pill {
    backdrop-filter: blur(14px);
}

.sidebar-brand h1,
.sidebar-parent-label,
.sidebar-group-heading,
.nav-item-link,
.sidebar-favorite-link,
.logout-link,
.user-pill strong {
    color: #243247;
}

.sidebar-kicker,
.brand-subline,
.user-pill span,
.sidebar-highlight small {
    color: #6b7b90 !important;
}

.sidebar-parent-label,
.sidebar-group-heading {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sidebar-accordion-item[open] > .sidebar-parent-label {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.08), rgba(224, 236, 255, 0.92));
}

.nav-item-link,
.logout-link,
.theme-toggle,
.sidebar-favorite-link,
.nav-sub-item {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.nav-sub-item {
    border: 1px solid rgba(148, 163, 184, 0.08);
    background: rgba(255, 255, 255, 0.58);
}

.nav-sub-item.active {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.08), rgba(239, 246, 255, 0.96));
    border-color: rgba(29, 78, 216, 0.14);
    box-shadow: none;
}

.content-shell {
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.96));
    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.08);
}

.content-topbar {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.page-heading {
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.topbar-chip,
.theme-toggle,
.topbar-meta .form-control,
.topbar-meta .btn {
    min-height: 42px;
    border-radius: 14px;
}

.hero-panel,
.stat-card,
.table-wrap,
.form-card,
.card,
.chart-card,
.mini-card,
.module-overview-card,
.manager-box,
.notification-item,
.search-result-card {
    border-radius: 26px;
    border: 1px solid rgba(125, 102, 72, 0.1);
    box-shadow: 0 18px 42px rgba(74, 58, 38, 0.06);
}

.hero-panel {
    padding: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.38), transparent 28%),
        linear-gradient(135deg, #f4f8ff 0%, #e8f0fb 58%, #dde9f8 100%);
    color: #23344e;
}

.hero-panel::after {
    width: 180px;
    height: 180px;
    background: rgba(255, 255, 255, 0.36);
}

.table-wrap,
.form-card,
.chart-card,
.mini-card {
    padding: 20px;
}

.mini-card strong {
    font-size: 1.45rem;
    font-weight: 700;
}

.mini-card span,
.text-muted {
    color: var(--muted) !important;
}

.btn {
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none !important;
}

.btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.btn-outline-secondary,
.btn-outline-primary {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.76);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    border-color: rgba(29, 78, 216, 0.2);
    background: rgba(248, 251, 255, 0.96);
    color: var(--primary-strong);
}

.form-control,
.form-select,
.input-group-text {
    border-radius: 14px;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.86);
    min-height: 46px;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(29, 78, 216, 0.24);
    box-shadow: 0 0 0 0.18rem rgba(29, 78, 216, 0.08);
}

.table-responsive {
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(255, 255, 255, 0.76);
}

.table {
    margin-bottom: 0;
}

.table thead th {
    border-bottom-color: rgba(148, 163, 184, 0.12);
    color: #64748b;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.table tbody td {
    border-color: rgba(148, 163, 184, 0.08);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: rgba(243, 248, 255, 0.8);
}

.product-inline-chip {
    background: rgba(29, 78, 216, 0.08);
    color: var(--primary-strong);
    border: 1px solid rgba(29, 78, 216, 0.08);
}

.alert {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

@media (max-width: 1199.98px) {
    .sidebar-panel {
        position: static;
        min-height: auto;
        margin-right: 0;
    }

    .content-shell {
        margin-top: 18px;
    }
}

/* Corporate refinement */
.page-kicker,
.sidebar-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    font-weight: 700;
}

.summary-card-icon,
.homepage-menu-link-icon,
.dashboard-widget-handle,
.user-avatar,
.brand-mark {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(56, 189, 248, 0.14));
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.brand-mark,
.user-avatar {
    color: #1e3a8a;
}

.homepage-summary-card,
.module-overview-card,
.manager-box,
.notification-item,
.search-result-card,
.dashboard-widget-option {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.98));
}

.homepage-summary-card,
.module-overview-card,
.manager-box {
    min-height: 176px;
}

.homepage-summary-card strong,
.manager-box strong,
.module-overview-card strong {
    color: #1e293b;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.module-overview-card span,
.manager-box span,
.homepage-summary-card span {
    color: #64748b;
}

.mini-card-link:hover,
.manager-box-link:hover,
a.module-overview-card:hover,
.homepage-menu-link:hover,
.notification-item:hover,
.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.08);
}

.hero-badge,
.topbar-chip,
.product-inline-chip,
.sidebar-favorite-link {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: #33517a;
}

.hero-panel .page-kicker,
.hero-panel h1,
.hero-panel h2,
.hero-panel p,
.hero-panel .hero-badge {
    color: #23344e !important;
}

.hero-panel .hero-badge {
    background: rgba(255, 255, 255, 0.62);
}

.content-topbar .form-control {
    min-width: 240px;
}

.dashboard-widget-panel,
.homepage-menu-card,
.table-wrap,
.form-card,
.chart-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 251, 255, 0.98));
}

.dashboard-widget-summary h5,
.table-wrap h5,
.form-card h5,
.chart-card h5,
.mini-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #243247;
}

.table tbody tr:hover td {
    color: #1e293b;
}

.sidebar-parent-label:hover,
.nav-item-link:hover,
.sidebar-favorite-link:hover,
.logout-link:hover {
    color: #1e3a8a;
}

/* Executive corporate pass */
h1,
h2,
h3,
h4,
h5,
h6,
.page-heading,
.sidebar-brand h1,
.hero-panel h1,
.hero-panel h2 {
    font-family: inherit;
}

.app-layout {
    padding: 20px;
}

.sidebar-panel {
    padding: 20px 14px;
    border-radius: 28px;
}

.sidebar-parent-label,
.sidebar-group-heading {
    padding: 0.7rem 0.82rem;
}

.nav-item-link,
.logout-link,
.theme-toggle {
    padding: 10px 12px;
    border-radius: 14px;
}

.nav-sub-item {
    min-height: 40px;
    padding: 0.6rem 0.82rem;
    border-radius: 12px;
    font-size: 0.9rem;
}

.content-shell {
    padding: 24px;
}

.content-topbar {
    gap: 14px;
    margin-bottom: 24px;
}

.page-heading {
    font-size: clamp(1.48rem, 1.9vw, 1.95rem);
    letter-spacing: -0.03em;
}

.hero-panel,
.table-wrap,
.form-card,
.chart-card,
.mini-card,
.module-overview-card,
.manager-box,
.notification-item,
.search-result-card {
    border-radius: 22px;
}

.hero-panel {
    padding: 26px 28px;
}

.hero-panel h1,
.hero-panel h2 {
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    font-weight: 700;
}

.hero-panel p {
    max-width: 720px;
}

.table-wrap,
.form-card,
.chart-card,
.mini-card {
    padding: 18px;
}

.module-overview-grid,
.dashboard-widget-grid {
    gap: 14px;
}

.homepage-summary-card,
.module-overview-card,
.manager-box {
    min-height: 164px;
}

.summary-card-icon,
.homepage-menu-link-icon,
.dashboard-widget-handle {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.page-yonetici .hero-panel,
.page-reports .hero-panel,
.page-index .hero-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 26%),
        linear-gradient(135deg, #f5f8fd 0%, #e8eff9 55%, #dce7f6 100%);
    border-color: rgba(37, 99, 235, 0.1);
}

.page-yonetici .content-shell,
.page-reports .content-shell {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.98));
}

.page-yonetici .mini-card,
.page-yonetici .manager-box,
.page-reports .chart-card,
.page-reports .mini-card {
    border-color: rgba(37, 99, 235, 0.08);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.05);
}

.page-yonetici .page-kicker,
.page-reports .page-kicker,
.homepage-root-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
    margin-bottom: 1rem;
}

.homepage-root-aside {
    position: sticky;
    top: 152px;
}

.homepage-root-main .homepage-layout-row {
    margin-bottom: 0;
}

.homepage-start-centers,
.homepage-ai-priority,
.homepage-today-strip {
    padding: 1rem 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.homepage-start-centers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.homepage-start-centers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.homepage-start-center {
    display: grid;
    gap: 10px;
    min-height: 160px;
    padding: 1rem;
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.14);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.homepage-start-center strong {
    font-size: 1.04rem;
    color: #1e293b;
}

.homepage-start-center span:last-child {
    color: var(--muted);
    line-height: 1.45;
}

.homepage-start-center:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow: 0 16px 28px rgba(37, 99, 235, 0.08);
}

.homepage-today-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.homepage-ai-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.module-priority-strip {
    padding: 1rem 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.module-priority-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.homepage-today-strip-item {
    display: grid;
    gap: 8px;
    min-height: 118px;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: inherit;
}

.homepage-ai-priority-card {
    display: grid;
    gap: 8px;
    min-height: 126px;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: inherit;
}

.module-priority-card {
    display: grid;
    gap: 8px;
    min-height: 126px;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: inherit;
}

.homepage-ai-priority-card small {
    color: var(--muted);
    line-height: 1.45;
}

.module-priority-card small {
    color: var(--muted);
    line-height: 1.45;
}

.homepage-today-strip-item small {
    color: var(--muted);
    line-height: 1.45;
}

body[data-page-slug="index"] .homepage-today-strip-item {
    gap: 9px;
}

body[data-page-slug="index"] .homepage-today-strip-item .page-kicker,
body[data-page-slug="index"] .homepage-ai-priority-card .page-kicker,
body[data-page-slug="index"] .module-priority-card .page-kicker,
body[data-page-slug="index"] .table-wrap .page-kicker {
    font-size: 0.8rem;
}

body[data-page-slug="index"] .homepage-today-strip-item strong,
body[data-page-slug="index"] .homepage-ai-priority-card strong,
body[data-page-slug="index"] .module-priority-card strong {
    font-size: 1.13rem;
    line-height: 1.3;
}

body[data-page-slug="index"] .homepage-today-strip-item small,
body[data-page-slug="index"] .homepage-ai-priority-card small,
body[data-page-slug="index"] .module-priority-card small {
    font-size: 0.92rem;
    line-height: 1.5;
}

body[data-page-slug="index"] .homepage-today-strip-item span,
body[data-page-slug="index"] .homepage-ai-priority-card span,
body[data-page-slug="index"] .module-priority-card span {
    font-size: 0.94rem;
}

body[data-page-slug="index"] .table-wrap h5,
body[data-page-slug="index"] .homepage-start-center strong {
    font-size: 1.16rem;
    line-height: 1.32;
}

body[data-page-slug="index"] .homepage-start-center span:last-child,
body[data-page-slug="index"] .table-wrap p,
body[data-page-slug="index"] .table-wrap small {
    font-size: 0.94rem;
}

.accounting-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
    gap: 16px;
    padding: 1rem 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 118, 110, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 249, 255, 0.96));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.accounting-workbench-main h2 {
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    color: #16324f;
    letter-spacing: -0.02em;
}

.accounting-workbench-main p:last-child {
    max-width: 760px;
    color: var(--muted);
}

.accounting-workbench-actions {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

.accounting-workbench-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0.72rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.88);
    color: #29435f;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.accounting-workbench-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.2);
    background: rgba(240, 253, 250, 0.96);
    color: #0f766e;
}

.accounting-workbench-chip.is-active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.16), rgba(59, 130, 246, 0.1));
    border-color: rgba(15, 118, 110, 0.24);
    color: #0f766e;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.06);
}

.tasks-workbench,
.service-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
    gap: 16px;
    padding: 1rem 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(59, 130, 246, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.tasks-workbench-main h2,
.service-workbench-main h2 {
    font-size: clamp(1.28rem, 1.8vw, 1.72rem);
    color: #18324c;
    letter-spacing: -0.02em;
}

.tasks-workbench-main p:last-child,
.service-workbench-main p:last-child {
    color: var(--muted);
    max-width: 760px;
}

.tasks-workbench-actions,
.service-workbench-actions {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

.tasks-workbench-chip,
.service-workbench-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0.72rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.9);
    color: #29435f;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.tasks-workbench-chip:hover,
.service-workbench-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.2);
    background: rgba(239, 246, 255, 0.96);
    color: #1d4ed8;
}

.tasks-workbench-chip.is-active,
.service-workbench-chip.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(125, 211, 252, 0.12));
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.06);
}

.tasks-root-grid,
.service-root-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.tasks-root-aside,
.service-root-aside {
    position: sticky;
    top: 152px;
}

.tasks-root-main > .table-wrap:last-child,
.service-root-main > .table-wrap:last-child {
    margin-bottom: 0;
}

.messages-workbench,
.notifications-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
    gap: 16px;
    padding: 1rem 1.1rem;
    border-radius: 24px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.messages-workbench-main h2,
.notifications-workbench-main h2 {
    font-size: clamp(1.28rem, 1.8vw, 1.72rem);
    color: #18324c;
    letter-spacing: -0.02em;
}

.messages-workbench-main p:last-child,
.notifications-workbench-main p:last-child {
    color: var(--muted);
    max-width: 760px;
}

.messages-workbench-actions,
.notifications-workbench-actions {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

.messages-workbench-chip,
.notifications-workbench-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0.72rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.9);
    color: #29435f;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.messages-workbench-chip:hover,
.notifications-workbench-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.2);
    background: rgba(239, 246, 255, 0.96);
    color: #1d4ed8;
}

.messages-workbench-chip.is-active,
.notifications-workbench-chip.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(125, 211, 252, 0.12));
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.06);
}

.messages-root-grid,
.notifications-root-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.messages-root-aside,
.notifications-root-aside {
    position: sticky;
    top: 152px;
}

.messages-root-main > .table-wrap:last-child,
.notifications-root-main > .table-wrap:last-child {
    margin-bottom: 0;
}

html[data-theme="dark"] .accounting-workbench {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 28, 49, 0.96));
    border-color: rgba(45, 212, 191, 0.12);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.26);
}

html[data-theme="dark"] .accounting-workbench-main h2 {
    color: #eff6ff;
}

html[data-theme="dark"] .accounting-workbench-chip {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.12);
    color: #dbeafe;
}

html[data-theme="dark"] .accounting-workbench-chip:hover,
html[data-theme="dark"] .accounting-workbench-chip.is-active {
    color: #99f6e4;
}

html[data-theme="dark"] .homepage-start-centers,
html[data-theme="dark"] .homepage-ai-priority,
html[data-theme="dark"] .module-priority-strip,
html[data-theme="dark"] .homepage-today-strip {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 28, 49, 0.96));
    border-color: rgba(59, 130, 246, 0.12);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.26);
}

html[data-theme="dark"] .homepage-start-center,
html[data-theme="dark"] .homepage-ai-priority-card,
html[data-theme="dark"] .module-priority-card,
html[data-theme="dark"] .homepage-today-strip-item {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .homepage-start-center strong {
    color: #eff6ff;
}

html[data-theme="dark"] .tasks-workbench,
html[data-theme="dark"] .service-workbench {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 28, 49, 0.96));
    border-color: rgba(59, 130, 246, 0.12);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.26);
}

html[data-theme="dark"] .tasks-workbench-main h2,
html[data-theme="dark"] .service-workbench-main h2 {
    color: #eff6ff;
}

html[data-theme="dark"] .tasks-workbench-chip,
html[data-theme="dark"] .service-workbench-chip {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.12);
    color: #dbeafe;
}

html[data-theme="dark"] .tasks-workbench-chip:hover,
html[data-theme="dark"] .service-workbench-chip:hover,
html[data-theme="dark"] .tasks-workbench-chip.is-active,
html[data-theme="dark"] .service-workbench-chip.is-active {
    color: #bfdbfe;
}

html[data-theme="dark"] .messages-workbench,
html[data-theme="dark"] .notifications-workbench {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 28, 49, 0.96));
    border-color: rgba(59, 130, 246, 0.12);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.26);
}

html[data-theme="dark"] .messages-workbench-main h2,
html[data-theme="dark"] .notifications-workbench-main h2 {
    color: #eff6ff;
}

html[data-theme="dark"] .messages-workbench-chip,
html[data-theme="dark"] .notifications-workbench-chip {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.12);
    color: #dbeafe;
}

html[data-theme="dark"] .messages-workbench-chip:hover,
html[data-theme="dark"] .notifications-workbench-chip:hover,
html[data-theme="dark"] .messages-workbench-chip.is-active,
html[data-theme="dark"] .notifications-workbench-chip.is-active {
    color: #bfdbfe;
}

@media (max-width: 1199.98px) {
    .homepage-root-grid,
    .accounting-workbench,
    .homepage-start-centers-grid,
    .homepage-ai-priority-grid,
    .module-priority-grid,
    .homepage-today-strip-grid,
    .tasks-workbench,
    .service-workbench,
    .messages-workbench,
    .notifications-workbench,
    .tasks-root-grid,
    .service-root-grid,
    .messages-root-grid,
    .notifications-root-grid {
        grid-template-columns: 1fr;
    }

    .homepage-root-aside {
        position: static;
        top: auto;
    }

    .tasks-root-aside,
    .service-root-aside,
    .messages-root-aside,
    .notifications-root-aside {
        position: static;
        top: auto;
    }
}

@media (max-width: 767.98px) {
    .accounting-workbench-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.page-yonetici .page-kicker,
.page-reports .page-kicker,
.page-index .page-kicker {
    color: #5f7ca3;
}

@media (min-width: 1400px) {
    .col-12.col-xl-3.col-xxl-2 {
        width: 19%;
    }

    .col-12.col-xl-9.col-xxl-10 {
        width: 81%;
    }
}

/* Homepage, accounting and executive premium layer */
.page-index .content-shell,
.page-accounting .content-shell,
.page-yonetici .content-shell {
    border-radius: 30px;
}

.page-index .content-topbar,
.page-accounting .content-topbar,
.page-yonetici .content-topbar {
    align-items: flex-start;
}

.page-index .hero-panel,
.page-accounting .hero-panel,
.page-yonetici .hero-panel {
    border-radius: 28px;
    padding: 30px 32px;
}

.page-index .hero-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.45), transparent 26%),
        linear-gradient(135deg, #f6faff 0%, #e8f0fb 60%, #dde8f6 100%);
}

.page-accounting .hero-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.4), transparent 26%),
        linear-gradient(135deg, #f5f9ff 0%, #e9f1fd 50%, #dce8fa 100%);
}

.page-yonetici .hero-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.42), transparent 26%),
        linear-gradient(135deg, #f4f8fe 0%, #e6eefb 48%, #d7e4f6 100%);
}

.page-index #dashboardWidgetCanvas .mini-card,
.page-index #dashboardWidgetCanvas .manager-box,
.page-index #dashboardWidgetCanvas .module-overview-card,
.page-index #dashboardWidgetCanvas .notification-box,
.page-accounting #accountingSectionCanvas .mini-card,
.page-accounting #accountingSectionCanvas .table-wrap,
.page-accounting #accountingSectionCanvas .form-card,
.page-accounting #accountingSectionCanvas .accounting-panel,
.page-yonetici .mini-card,
.page-yonetici .table-wrap,
.page-yonetici .form-card {
    border-radius: 22px;
    border-color: rgba(37, 99, 235, 0.08);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.page-index #dashboardWidgetCanvas .mini-card strong,
.page-accounting #accountingSectionCanvas .mini-card strong,
.page-yonetici .mini-card strong {
    font-size: clamp(1.3rem, 1.8vw, 1.85rem);
    letter-spacing: -0.02em;
}

.page-index #dashboardWidgetCanvas .module-overview-card,
.page-index #dashboardWidgetCanvas .manager-box {
    min-height: 170px;
}

.page-index .homepage-menu-link,
.page-yonetici .btn-outline-secondary,
.page-accounting .btn-outline-secondary {
    border-radius: 16px;
}

.page-accounting .content-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.98));
}

.page-accounting .table-responsive,
.page-yonetici .table-responsive {
    border-radius: 18px;
}

.page-accounting .accounting-overview-card {
    min-height: 150px;
    padding: 18px 18px;
}

.page-accounting .accounting-overview-card h5 {
    font-size: 0.96rem;
    line-height: 1.3;
}

.page-accounting .accounting-overview-card strong {
    font-size: clamp(1.6rem, 2.1vw, 2.1rem);
}

.page-accounting .product-inline-chip,
.page-yonetici .product-inline-chip,
.page-index .product-inline-chip {
    padding: 0.42rem 0.72rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.page-yonetici .content-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 247, 255, 0.98));
}

.page-yonetici .mini-card,
.page-yonetici .table-wrap,
.page-yonetici .form-card {
    position: relative;
}

.page-yonetici .mini-card::before,
.page-yonetici .table-wrap::before,
.page-yonetici .form-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.55), rgba(14, 165, 233, 0.2));
    pointer-events: none;
}

.page-yonetici .mini-card,
.page-yonetici .table-wrap,
.page-yonetici .form-card {
    padding-top: 20px;
}

.page-yonetici .page-heading {
    font-size: clamp(1.6rem, 2vw, 2.1rem);
}

.page-index .summary-card-icon,
.page-index .homepage-menu-link-icon,
.page-yonetici .summary-card-icon,
.page-accounting .summary-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
}

.page-index .table-wrap h5,
.page-accounting .table-wrap h5,
.page-yonetici .table-wrap h5 {
    font-size: 1.02rem;
}

.page-index .homepage-command-center {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.08));
}

.page-index .homepage-command-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.95fr);
    gap: 20px;
    padding: 28px;
    border-radius: 29px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(243, 248, 255, 0.99));
}

.page-index .homepage-command-hero {
    padding: 12px 4px;
}

.page-index .homepage-command-hero h2 {
    font-size: clamp(1.9rem, 2.5vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}

.page-index .homepage-command-hero p:last-of-type {
    max-width: 700px;
    color: #5f7087;
    font-size: 0.98rem;
}

.page-index .homepage-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.page-index .homepage-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.page-index .homepage-kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 148px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(59, 130, 246, 0.14);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.96));
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.08);
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-index .homepage-kpi-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.9) 0%, rgba(14, 165, 233, 0.75) 100%);
}

.page-index .homepage-kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 22px 38px rgba(37, 99, 235, 0.12);
}

.page-index .homepage-kpi-card strong {
    font-size: clamp(1.5rem, 2vw, 2rem);
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.05;
}

.page-index .homepage-kpi-card span:last-child {
    color: #66778e;
    font-size: 0.88rem;
}

.page-index #dashboardWidgetCanvas details {
    display: block;
}

.page-index #dashboardWidgetCanvas details > summary {
    display: flex !important;
}

.page-index #dashboardWidgetCanvas details:not([open]) > :not(summary) {
    display: none !important;
}

.page-index #dashboardWidgetCanvas details[open] > :not(summary) {
    display: block !important;
}

.page-index #dashboardWidgetCanvas details.notification-panel,
.page-index #dashboardWidgetCanvas details.vehicle-alert-panel,
.page-index #dashboardWidgetCanvas details.stock-alarm-panel,
.page-index #dashboardWidgetCanvas details.manager-panel {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.page-index .homepage-redesign-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.82fr);
    gap: 20px;
    align-items: start;
}

.page-index .homepage-focus-panel,
.page-index .homepage-rail-panel {
    border-radius: 24px;
}

.page-index .homepage-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.page-index .homepage-action-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}

.page-index .homepage-rail-card-list,
.page-index .homepage-summary-rail {
    display: grid;
    gap: 12px;
}

.page-index .homepage-rail-card,
.page-index .homepage-summary-rail-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.95));
}

.page-index .homepage-rail-card {
    color: inherit;
}

.page-index .homepage-rail-card strong,
.page-index .homepage-summary-rail-item strong {
    display: block;
    margin-bottom: 3px;
    color: var(--text);
}

.page-index .homepage-rail-card span:last-child,
.page-index .homepage-summary-rail-item .small {
    color: #6c7b8f;
}

@media (max-width: 767.98px) {
    .page-index .hero-panel,
    .page-accounting .hero-panel,
    .page-yonetici .hero-panel {
        padding: 22px 20px;
    }

    .page-index .content-shell,
    .page-accounting .content-shell,
    .page-yonetici .content-shell {
        padding: 18px;
    }

    .page-index .homepage-command-shell,
    .page-index .homepage-redesign-grid {
        grid-template-columns: 1fr;
    }

    .page-index .homepage-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Login, sidebar and report-table refinement */
.auth-page {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.auth-shell {
    width: min(1120px, calc(100vw - 36px));
}

.auth-grid {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.auth-visual {
    padding: 34px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 30%),
        linear-gradient(135deg, #274466 0%, #325c7c 58%, #4b6f90 100%);
}

.auth-panel {
    padding: 38px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.98));
}

.auth-title {
    font-family: inherit;
    font-size: clamp(1.8rem, 2.4vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.auth-list div {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-hint {
    margin-top: 18px;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.08);
}

.auth-panel .form-control {
    min-height: 50px;
}

.sidebar-panel {
    padding: 18px 13px;
}

.sidebar-brand {
    gap: 12px;
}

.sidebar-highlight,
.sidebar-favorites,
.user-pill {
    border-radius: 18px;
}

.sidebar-accordion-body {
    gap: 0.2rem;
}

.nav-sub-item {
    font-size: 0.88rem;
}

.page-reports .table-wrap,
.page-reports .chart-card,
.page-reports .mini-card {
    border-radius: 24px;
}

.page-reports .table-responsive,
.page-yonetici .table-responsive,
.page-accounting .table-responsive {
    border: 1px solid rgba(37, 99, 235, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.98));
}

.page-reports .table thead th,
.page-yonetici .table thead th,
.page-accounting .table thead th {
    position: sticky;
    top: 0;
    background: #f6f9fe;
    z-index: 1;
}

.page-reports .table tbody tr:nth-child(even),
.page-yonetici .table tbody tr:nth-child(even),
.page-accounting .table tbody tr:nth-child(even) {
    background: rgba(248, 251, 255, 0.72);
}

.page-reports .table tbody tr:hover,
.page-yonetici .table tbody tr:hover,
.page-accounting .table tbody tr:hover {
    background: rgba(238, 245, 255, 0.95);
}

.page-reports .hero-panel {
    padding: 30px 32px;
}

@media (max-width: 991.98px) {
    .auth-visual,
    .auth-panel {
        padding: 26px;
    }
}

.accounting-horizontal-form .form-label {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #5b6b81;
    letter-spacing: 0.03em;
}

.accounting-horizontal-grid {
    align-items: start;
    row-gap: 16px;
}

.page-accounting .accounting-horizontal-form .form-control,
.page-accounting .accounting-horizontal-form .form-select {
    min-height: 48px;
    border-radius: 14px;
}

.page-accounting .accounting-horizontal-form .accounting-upload-preview {
    min-height: 110px;
    border-radius: 16px;
}

.page-accounting .accounting-horizontal-form .accounting-effect-card {
    min-height: 116px;
    border-radius: 18px;
    padding: 18px 20px;
}

.page-accounting .accounting-horizontal-form textarea.form-control {
    min-height: 110px;
    border-radius: 16px;
}

.page-accounting .accounting-horizontal-form .accounting-file-input {
    min-height: 48px;
}

.page-accounting .accounting-horizontal-form .btn {
    min-height: 50px;
    border-radius: 14px;
    font-weight: 700;
}

.page-accounting .accounting-horizontal-form .col-12.d-grid,
.page-accounting .accounting-horizontal-form .col-12.d-grid.gap-2 {
    margin-top: 4px;
}

.page-accounting .accounting-form-col .form-card > h5 {
    margin-bottom: 18px;
}

.page-accounting .accounting-primary-form-card .accounting-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-accounting .accounting-primary-form-card .accounting-form-header h5 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Final premium polish */
.sidebar-panel {
    gap: 18px;
}

.sidebar-brand {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.sidebar-highlight-label,
.sidebar-favorites .sidebar-highlight-label {
    font-weight: 700;
    letter-spacing: 0.12em;
}

.sidebar-favorite-links {
    gap: 7px;
}

.sidebar-favorite-link {
    padding: 7px 11px;
    font-size: 0.76rem;
}

.content-shell {
    position: relative;
}

.content-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%);
}

.content-topbar {
    position: relative;
}

.content-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 120px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.55), rgba(56, 189, 248, 0.14));
}

.table-wrap h5,
.form-card h5,
.chart-card h5,
.mini-card h5,
.homepage-menu-head h5 {
    letter-spacing: -0.02em;
}

.page-reports .table-wrap,
.page-accounting .table-wrap,
.page-yonetici .table-wrap {
    padding-top: 20px;
}

.page-reports .table thead th,
.page-accounting .table thead th,
.page-yonetici .table thead th {
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.12);
}

.page-reports .table tbody td,
.page-accounting .table tbody td,
.page-yonetici .table tbody td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.page-reports .table tbody tr,
.page-accounting .table tbody tr,
.page-yonetici .table tbody tr {
    transition: background-color 0.16s ease;
}

.page-index .hero-panel,
.page-accounting .hero-panel,
.page-yonetici .hero-panel,
.page-reports .hero-panel {
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.06);
}

.page-index .hero-panel .hero-badges,
.page-accounting .hero-panel .hero-badges,
.page-yonetici .hero-panel .hero-badges,
.page-reports .hero-panel .hero-badges {
    margin-top: 16px;
}

.homepage-summary-card,
.module-overview-card,
.manager-box {
    overflow: hidden;
}

.homepage-summary-card::before,
.module-overview-card::before,
.manager-box::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.5), rgba(56, 189, 248, 0.16));
    margin-bottom: 14px;
}

.auth-panel h3,
.auth-title {
    letter-spacing: -0.03em;
}

.auth-panel .page-kicker {
    color: #5f7ca3;
}

.auth-panel .btn-primary {
    min-height: 50px;
    font-size: 0.96rem;
}

.auth-brand {
    align-items: center;
}

.auth-list {
    gap: 10px;
}

.auth-list i {
    color: #bfdbfe;
}

/* Stability reset */
body,
.auth-page,
.app-shell {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.page-index .content-shell,
.page-accounting .content-shell,
.page-yonetici .content-shell,
.page-reports .content-shell {
    padding: 22px;
    border-radius: 22px;
    background: #ffffff;
}

.sidebar-panel {
    border-radius: 22px;
    padding: 20px 16px;
}

.content-topbar {
    margin-bottom: 22px;
}

.page-heading,
.hero-panel h1,
.hero-panel h2,
.table-wrap h5,
.form-card h5,
.chart-card h5,
.auth-title,
.auth-panel h3 {
    font-family: inherit;
    letter-spacing: normal;
}

.page-index .homepage-command-center {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.page-index .homepage-command-shell {
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.page-index .homepage-command-hero {
    padding: 0;
}

.page-index .homepage-kpi-grid {
    margin-top: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-index .homepage-kpi-card,
.page-index .homepage-summary-card,
.page-index .homepage-action-chip,
.page-index .homepage-rail-card,
.page-index .homepage-summary-rail-item,
.page-index .manager-box,
.page-index .module-overview-card {
    border-radius: 18px;
    box-shadow: none;
}

.page-index #dashboardWidgetCanvas details {
    display: block;
}

.page-index #dashboardWidgetCanvas details > summary {
    display: flex !important;
}

.page-index #dashboardWidgetCanvas details:not([open]) > :not(summary) {
    display: none !important;
}

.page-index #dashboardWidgetCanvas details[open] > :not(summary) {
    display: block !important;
}

.page-index #dashboardWidgetCanvas details.notification-panel,
.page-index #dashboardWidgetCanvas details.vehicle-alert-panel,
.page-index #dashboardWidgetCanvas details.stock-alarm-panel,
.page-index #dashboardWidgetCanvas details.manager-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 16px;
    background: #fff;
    box-shadow: none;
}

.page-index .homepage-layout-row > div,
.page-index .row.g-4 > div,
.page-accounting .row.g-4 > div,
.page-yonetici .row.g-4 > div {
    min-width: 0;
}

/* Hard layout fallback */
.content-shell::before,
.content-topbar::after,
.hero-panel::after,
.homepage-summary-card::before,
.module-overview-card::before,
.manager-box::before,
.page-yonetici .mini-card::before,
.page-yonetici .table-wrap::before,
.page-yonetici .form-card::before {
    display: none !important;
    content: none !important;
}

.page-index .hero-panel,
.page-accounting .hero-panel,
.page-yonetici .hero-panel,
.page-reports .hero-panel,
.page-index .table-wrap,
.page-index .form-card,
.page-index .mini-card,
.page-index .manager-box,
.page-index .module-overview-card,
.page-accounting .table-wrap,
.page-accounting .form-card,
.page-accounting .mini-card,
.page-yonetici .table-wrap,
.page-yonetici .form-card,
.page-yonetici .mini-card,
.page-reports .table-wrap,
.page-reports .chart-card,
.page-reports .mini-card {
    box-shadow: none !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.page-index .homepage-command-hero h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

.page-index .homepage-command-actions {
    margin-top: 16px !important;
}

.page-index .homepage-action-grid,
.page-index .homepage-kpi-grid,
.page-index .homepage-rail-card-list,
.page-index .homepage-summary-rail {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.page-index .homepage-kpi-card,
.page-index .homepage-action-chip,
.page-index .homepage-rail-card,
.page-index .homepage-summary-rail-item {
    flex: 1 1 220px;
}

.page-index .homepage-top-strip {
    border-radius: 24px !important;
    padding: 18px 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,252,0.96)) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.page-index .homepage-top-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.page-index .homepage-top-kpi {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--text);
}

.page-index .homepage-top-kpi strong {
    font-size: clamp(1.3rem, 1.8vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.page-index .homepage-top-kpi small {
    color: var(--text-soft);
}

.page-index .homepage-top-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-index .homepage-focus-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.page-index .homepage-focus-item {
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-index .homepage-focus-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.page-index .homepage-focus-item strong {
    font-size: 1rem;
    line-height: 1.3;
}

.page-index .homepage-focus-item small {
    color: var(--text-soft);
}

.page-index .homepage-focus-danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.92), #ffffff);
}

.page-index .homepage-focus-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.94), #ffffff);
}

.page-index .homepage-focus-safe {
    border-color: rgba(16, 185, 129, 0.22);
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.94), #ffffff);
}

.page-index .homepage-custom-shell {
    max-width: 1440px;
    margin: 0 auto;
    gap: 8px;
}

.page-index .homepage-custom-shell #dashboardWidgetCanvas {
    order: 1;
}

.page-index .homepage-side-panel {
    border-radius: 22px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.page-index .homepage-side-panel .dashboard-widget-summary {
    align-items: center;
    padding-bottom: 2px;
    gap: 12px;
}

.page-index .homepage-side-panel .dashboard-widget-body {
    margin-top: 8px;
    padding-top: 8px;
}

.page-index .homepage-manager-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}

.page-index .homepage-manager-summary strong {
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--text);
}

.page-index .homepage-manager-summary span {
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--text-soft);
}

.page-index .homepage-manager-toolbar {
    display: block;
    width: 100%;
    position: relative;
    z-index: 6;
}

.page-index .homepage-manager-drawer {
    width: 100%;
    margin-left: 0;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.page-index .homepage-manager-drawer .dashboard-widget-summary {
    justify-content: space-between;
    padding: 0;
    min-height: 0;
}

.page-index .homepage-manager-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.52rem 0.92rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.92) 0%, rgba(248, 250, 252, 0.98) 100%);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
    transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-index .homepage-manager-trigger-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(14, 165, 233, 0.22) 100%);
    color: #2563eb;
    font-size: 0.9rem;
}

.page-index .homepage-manager-trigger-main {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text);
}

.page-index .homepage-manager-trigger-meta {
    font-size: 0.75rem;
    color: var(--text-soft);
}

.page-index .homepage-manager-trigger-arrow {
    margin-left: 2px;
    color: var(--text-soft);
    font-size: 0.82rem;
    transition: transform 0.18s ease, color 0.18s ease;
}

.page-index .homepage-manager-drawer[open] .homepage-manager-trigger-arrow {
    transform: rotate(90deg);
    color: #2563eb;
}

.page-index .homepage-manager-drawer:hover .homepage-manager-trigger,
.page-index .homepage-manager-drawer[open] .homepage-manager-trigger {
    border-color: rgba(37, 99, 235, 0.24);
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.95) 0%, rgba(239, 246, 255, 0.98) 100%);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.page-index .homepage-manager-drawer[open] {
    border-color: rgba(37, 99, 235, 0.22) !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(1px);
}

.page-index .homepage-manager-drawer .dashboard-widget-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.page-index .homepage-manager-drawer-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.page-index .homepage-manager-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.page-index .homepage-manager-tabs .btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.page-index .homepage-manager-tab-panel {
    display: block;
    padding: 16px 18px;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    margin-bottom: 16px;
}

.page-index .homepage-manager-tab-panel.is-active {
    display: block;
}

.page-index .homepage-manager-section-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-index .homepage-manager-section-head h5 {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.page-index .homepage-inline-editor {
    display: block;
}

.page-index .homepage-inline-detail {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    margin-bottom: 12px;
    overflow: hidden;
}

.page-index .homepage-inline-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-index .homepage-inline-summary::-webkit-details-marker {
    display: none;
}

.page-index .homepage-inline-detail-body {
    padding: 0 16px 16px;
}

.page-index .homepage-widget-action-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.page-index .homepage-widget-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.page-index .homepage-widget-action-row.is-disabled {
    opacity: 0.78;
    background: rgba(248, 250, 252, 0.96);
}

.page-index .homepage-widget-action-row.is-draggable {
    cursor: grab;
}

.page-index .homepage-widget-action-row.is-dragging {
    opacity: 0.55;
    transform: scale(0.99);
}

.page-index .homepage-widget-action-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.page-index .homepage-widget-action-info strong {
    display: block;
    font-size: 0.98rem;
    color: #0f172a;
}

.page-index .homepage-widget-action-form {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .page-index .homepage-widget-action-list {
        grid-template-columns: 1fr;
    }
}

.page-index .homepage-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px dashed rgba(148, 163, 184, 0.5);
    color: #475569;
    font-size: 1.1rem;
    letter-spacing: 1px;
    background: rgba(248, 250, 252, 0.95);
}

.page-index .homepage-widget-rank-badge {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #1e3a8a;
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.95), rgba(191, 219, 254, 0.95));
    border: 1px solid rgba(59, 130, 246, 0.18);
}

.page-index .homepage-manager-toolbar {
    display: none !important;
}

.page-index .homepage-widget-manager-cards .dashboard-widget-handle,
.page-index .homepage-widget-manager-cards .dashboard-widget-rank {
    opacity: 0.55;
}

.page-index .homepage-widget-manager-order .form-check-input,
.page-index .homepage-widget-manager-order [data-toggle-widget-visibility="true"],
.page-index .homepage-widget-manager-order .dashboard-widget-handle {
    display: none !important;
}

.page-index .homepage-widget-manager-order .dashboard-widget-option {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
}

.page-index #dashboardWidgetCanvas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: start;
}

.page-index #dashboardWidgetCanvas > section,
.page-index #dashboardWidgetCanvas > div {
    margin-bottom: 0 !important;
}

.page-index #dashboardWidgetCanvas > [data-widget-key="top_strip"],
.page-index #dashboardWidgetCanvas > [data-widget-key="notifications"],
.page-index #dashboardWidgetCanvas > [data-widget-key="focus"],
.page-index #dashboardWidgetCanvas > [data-widget-key="finance_alerts"],
.page-index #dashboardWidgetCanvas > [data-widget-key="manager"],
.page-index #dashboardWidgetCanvas > [data-widget-key="charts"],
.page-index #dashboardWidgetCanvas > [data-widget-key="stock_table"] {
    grid-column: 1 / -1;
}

.page-index #dashboardWidgetCanvas > section > .d-flex:first-child,
.page-index #dashboardWidgetCanvas > div > .d-flex:first-child,
.page-index #dashboardWidgetCanvas > section .stock-alarm-head:first-child {
    margin-bottom: 10px !important;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.page-index #dashboardWidgetCanvas .notification-panel,
.page-index #dashboardWidgetCanvas .manager-panel,
.page-index #dashboardWidgetCanvas .stock-alarm-panel,
.page-index #dashboardWidgetCanvas .vehicle-alert-panel,
.page-index #dashboardWidgetCanvas .hero-panel,
.page-index #dashboardWidgetCanvas .table-wrap {
    border-radius: 22px !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}

.page-index #dashboardWidgetCanvas .manager-grid,
.page-index #dashboardWidgetCanvas .notification-grid,
.page-index #dashboardWidgetCanvas .vehicle-alert-grid,
.page-index #dashboardWidgetCanvas .module-overview-grid {
    gap: 9px;
}

.page-index #dashboardWidgetCanvas .mini-card,
.page-index #dashboardWidgetCanvas .manager-box,
.page-index #dashboardWidgetCanvas .module-overview-card,
.page-index #dashboardWidgetCanvas .notification-box {
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

.page-index .homepage-widget-manager-list {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 8px;
}

.page-index .dashboard-widget-option {
    min-height: 68px;
}

.page-index .homepage-static-layout {
    order: 2;
    margin-top: 0;
}

.page-index .homepage-static-layout > .col-xl-4 {
    display: flex;
    justify-content: center;
}

.page-index .homepage-side-panel {
    position: static;
    top: auto;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.page-index .homepage-top-strip {
    padding: 10px 12px !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}

.page-index .homepage-top-strip-grid {
    gap: 8px;
    margin-bottom: 6px;
}

.page-index .homepage-top-kpi {
    padding: 9px 10px;
    border-radius: 16px;
    background: #fff;
}

.page-index .homepage-top-kpi strong {
    font-size: clamp(1.15rem, 1.4vw, 1.6rem);
}

.page-index .homepage-focus-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px;
}

.page-index .homepage-focus-item {
    padding: 9px 10px;
    border-radius: 16px;
}

.page-index .homepage-top-kpi .page-kicker,
.page-index .homepage-focus-item .page-kicker {
    margin-bottom: 2px !important;
}

.page-index .homepage-top-kpi small,
.page-index .homepage-focus-item small {
    font-size: 0.76rem;
    line-height: 1.25;
}

.page-index .homepage-inline-card-summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    gap: 5px;
}

.page-index .homepage-inline-card-summary::-webkit-details-marker {
    display: none;
}

.page-index details.homepage-top-kpi,
.page-index details.manager-box,
.page-index details.homepage-focus-item,
.page-index details.notification-box {
    list-style: none;
}

.page-index details.homepage-top-kpi > summary,
.page-index details.manager-box > summary,
.page-index details.homepage-focus-item > summary,
.page-index details.notification-box > summary {
    list-style: none;
}

.page-index details.homepage-top-kpi > summary::-webkit-details-marker,
.page-index details.manager-box > summary::-webkit-details-marker,
.page-index details.homepage-focus-item > summary::-webkit-details-marker,
.page-index details.notification-box > summary::-webkit-details-marker {
    display: none;
}

.page-index .homepage-inline-card-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.page-index .homepage-inline-detail-list {
    display: grid;
    gap: 8px;
}

.page-index .homepage-inline-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.9);
}

.page-index .homepage-inline-detail-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.page-index .homepage-inline-detail-item strong {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text);
}

.page-index .homepage-inline-detail-copy small {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-soft);
}

.page-index .homepage-inline-detail-item span {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-soft);
    text-align: right;
    white-space: nowrap;
}

.page-index .homepage-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
}

.page-index .homepage-inline-actions .btn {
    min-width: 88px;
    border-radius: 999px;
}

.page-index .homepage-inline-action-card {
    margin: 0;
}

.page-index .homepage-inline-action-card summary {
    list-style: none;
    cursor: pointer;
}

.page-index .homepage-inline-action-card summary::-webkit-details-marker {
    display: none;
}

.page-index .homepage-inline-action-body {
    margin-top: 8px;
    padding: 10px 12px;
    min-width: 220px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.96);
}

.page-index .homepage-inline-action-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.82rem;
    color: var(--text);
}

.page-index .homepage-inline-detail-trigger,
.page-index .homepage-inline-detail-item[role="button"] {
    width: 100%;
    text-align: left;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.16);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    cursor: pointer;
}

.page-index .homepage-inline-detail-trigger:hover,
.page-index .homepage-inline-detail-item[role="button"]:hover,
.page-index .homepage-inline-detail-trigger:focus-visible,
.page-index .homepage-inline-detail-item[role="button"]:focus-visible {
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.page-index .homepage-inline-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.page-index .home-lite-shell {
    display: grid;
    gap: 12px;
    padding-bottom: 10px;
    min-width: 0;
    overflow-x: clip;
}

.page-index .home-lite-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
}

.page-index .home-lite-subtitle {
    margin-top: 6px;
    font-size: 0.94rem;
    max-width: 560px;
}

.page-index .home-lite-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.page-index .home-lite-head .page-kicker {
    margin-bottom: 2px !important;
    opacity: 0.66;
}

.page-index .home-lite-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.page-index .home-lite-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
}

.page-index .home-lite-summary-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 7px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    min-height: 32px;
}

.page-index .home-lite-summary-pill span {
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(71, 85, 105, 0.82);
}

.page-index .home-lite-summary-pill strong {
    font-size: 0.84rem;
    color: var(--text);
}

.page-index .home-lite-summary-pill:hover,
.page-index .home-lite-summary-pill:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
    outline: none;
}

.page-index .home-lite-main-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.page-index .home-lite-stack {
    display: grid;
    gap: 5px;
}

.page-index .home-lite-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.038);
    padding: 7px 8px;
    min-width: 0;
}

.page-index .home-lite-panel > .d-flex:first-child {
    margin-bottom: 4px !important;
}

.page-index .home-lite-panel h5 {
    color: var(--text);
    font-size: 0.88rem;
}

.page-index .home-lite-panel .page-kicker {
    margin-bottom: 2px !important;
    opacity: 0.66;
    letter-spacing: 0.08em;
}

.page-index .home-lite-panel .product-inline-chip {
    padding: 0.28rem 0.55rem;
    font-size: 0.72rem;
    opacity: 0.82;
}

.page-index .home-lite-card {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 4px solid rgba(59, 130, 246, 0.75);
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.96));
    border-radius: 12px;
    padding: 5px 7px 4px;
    min-height: 56px;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-index .home-lite-card .page-kicker {
    font-size: 0.6rem;
    opacity: 0.5;
    margin-bottom: 0 !important;
}

.page-index .home-lite-card:hover,
.page-index .home-lite-card:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.075);
    border-color: rgba(59, 130, 246, 0.28);
    outline: none;
}

.page-index .home-lite-card strong {
    display: block;
    margin: 1px 0 1px;
    font-size: 0.88rem;
    line-height: 1.14;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.2em * 1);
}

.page-index .home-lite-card-value {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0;
}

.page-index .home-lite-card-meta {
    display: block;
    color: var(--text-soft);
    font-size: 0.74rem;
    line-height: 1.08;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.2em * 1);
    white-space: nowrap;
}

.page-index .home-lite-notification-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.page-index .home-lite-panel-notifications {
    padding-top: 6px;
    padding-bottom: 6px;
}

.page-index .home-lite-panel-notifications > .d-flex:first-child {
    margin-bottom: 4px !important;
}

.page-index .home-lite-panel-notifications .home-lite-card {
    min-height: 52px;
    padding-top: 4px;
    padding-bottom: 3px;
}

.page-record_detail .record-detail-shell {
    display: grid;
    gap: 14px;
}

.page-record_detail .record-detail-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,249,252,0.96));
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.page-record_detail .record-detail-card-summary {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.96));
}

.page-record_detail .record-detail-page-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.page-record_detail .record-detail-page-summary h3 {
    font-size: 1.04rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.page-record_detail .record-detail-page-summary p {
    font-size: 0.86rem;
    max-width: 720px;
    line-height: 1.45;
}

.page-record_detail .record-detail-page-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.page-record_detail .record-detail-guide {
    margin-top: 14px;
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(241,245,249,0.92));
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-record_detail .record-detail-guide strong {
    font-size: 0.84rem;
    color: #0f172a;
}

.page-record_detail .record-detail-guide span {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #475569;
}

.page-record_detail .record-detail-guide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.page-record_detail .record-detail-guide-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.16);
    background: linear-gradient(180deg, rgba(239,246,255,0.95), rgba(219,234,254,0.8));
    color: #1d4ed8;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.page-record_detail .record-detail-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.5rem;
}

.page-record_detail .record-detail-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.95);
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.page-record_detail .record-detail-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.48fr);
    gap: 14px;
    align-items: start;
}

.page-record_detail .record-detail-card {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.995), rgba(248,250,252,0.98));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.page-record_detail .record-detail-card-head {
    padding: 13px 16px;
    color: var(--text);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.page-record_detail .record-detail-card-head-primary {
    background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(219,234,254,0.9));
}

.page-record_detail .record-detail-card-head-success {
    background: linear-gradient(180deg, rgba(240,253,244,0.98), rgba(220,252,231,0.9));
}

.page-record_detail .record-detail-card-head-danger {
    background: linear-gradient(180deg, rgba(254,242,242,0.98), rgba(254,226,226,0.9));
}

.page-record_detail .record-detail-card-body {
    padding: 16px;
}

.page-record_detail .record-detail-card-edit {
    margin-top: 4px;
}

.page-record_detail .record-detail-card-info {
    position: sticky;
    top: 86px;
}

.page-record_detail .record-detail-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.page-record_detail .record-detail-approval-grid {
    align-items: start;
}

.page-record_detail .record-detail-approval-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(240, 253, 244, 0.78);
    border: 1px solid rgba(134, 239, 172, 0.24);
    color: #166534;
}

.page-record_detail .record-detail-approval-intro strong {
    font-size: 0.86rem;
}

.page-record_detail .record-detail-approval-intro span {
    font-size: 0.82rem;
}

.page-record_detail .record-detail-approval-grid form {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.78);
}

.page-record_detail .record-detail-approval-card-title {
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #334155;
}

.page-record_detail .record-detail-approval-decision-panel {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.9));
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.page-record_detail .record-detail-approval-decision-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.page-record_detail .record-detail-approval-decision-head p {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 700;
}

.page-record_detail .record-detail-approval-decision-head > span {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fef3c7, #fff7ed);
    color: #92400e;
    font-size: 0.76rem;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.15);
}

.page-record_detail .record-detail-approval-fields {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
    gap: 12px;
}

.page-record_detail .record-detail-approval-fields label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.page-record_detail .record-detail-approval-fields label > span {
    color: #334155;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-record_detail .record-detail-approval-fields .form-select,
.page-record_detail .record-detail-approval-fields .form-control {
    border-color: rgba(20, 184, 166, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.page-record_detail .record-detail-approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-record_detail .record-detail-approval-actions .btn {
    min-height: 42px;
    border-radius: 14px;
    padding-inline: 18px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.page-record_detail .record-detail-approval-result {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.page-record_detail .record-detail-edit-section-title {
    margin-bottom: 10px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.page-record_detail .record-detail-form .form-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.page-record_detail .record-detail-form .form-control {
    min-height: 44px;
    border-radius: 12px;
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(255,255,255,0.96);
}

.page-record_detail .record-detail-form .form-select {
    min-height: 44px;
    border-radius: 12px;
    border-color: rgba(148, 163, 184, 0.22);
    background-color: rgba(255,255,255,0.96);
}

.page-record_detail .record-detail-form textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.page-record_detail .record-detail-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-record_detail .record-detail-drawer {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
}

.page-record_detail .record-detail-drawer.is-open {
    display: block;
}

.page-record_detail .record-detail-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(59, 130, 246, 0.18), transparent 30%),
        rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(8px);
}

.page-record_detail .record-detail-drawer-dialog {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(780px, calc(100vw - 20px));
    height: 100vh;
    padding: 14px 14px 14px 0;
    display: flex;
    justify-content: flex-end;
    transform: translateX(104%);
    transition: transform 220ms ease;
}

.page-record_detail .record-detail-drawer.is-open .record-detail-drawer-dialog {
    transform: translateX(0);
}

.page-record_detail .record-detail-drawer .record-detail-card {
    width: 100%;
    height: 100%;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
    border-color: rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.07), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.995), rgba(248,250,252,0.985));
    border-radius: 24px 0 0 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-record_detail .record-detail-drawer-span {
    grid-column: 1 / -1;
}

.page-record_detail .record-detail-drawer .record-detail-card-head-success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.96), rgba(34, 197, 94, 0.86));
    color: #fff;
}

.page-record_detail .record-detail-drawer .record-detail-card-head-success .btn {
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.page-record_detail .record-detail-drawer .record-detail-card-body {
    overflow: auto;
    padding: 18px;
}

.page-record_detail .record-detail-drawer .record-detail-guide {
    background: linear-gradient(180deg, rgba(240,253,244,0.96), rgba(220,252,231,0.86));
    border-color: rgba(34, 197, 94, 0.18);
}

.page-record_detail .record-detail-drawer .record-detail-form .form-control,
.page-record_detail .record-detail-drawer .record-detail-form .form-select {
    min-height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,0.98);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02);
}

.page-record_detail .record-detail-drawer .record-detail-form textarea.form-control {
    min-height: 132px;
}

.page-record_detail .record-detail-drawer .record-detail-form-actions .btn {
    min-width: 120px;
}

body.record-detail-modal-open {
    overflow: hidden;
}

.page-stock_in .stock-in-summary-trigger {
    border: 0;
}

.page-stock_in .hero-panel {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    margin-bottom: 0.9rem !important;
}

.page-stock_in .hero-panel h2 {
    font-size: 1.32rem;
    margin-bottom: 0.28rem !important;
    max-width: none;
}

.page-stock_in .hero-panel > p:last-of-type {
    font-size: 0.9rem;
    max-width: none;
}

.page-stock_in .mini-card.stock-in-summary-trigger {
    padding: 0.9rem 1rem;
    min-height: auto;
}

.page-stock_in .mini-card.stock-in-summary-trigger h5 {
    margin-bottom: 0.32rem;
    font-size: 0.92rem;
}

.page-stock_in .mini-card.stock-in-summary-trigger strong {
    font-size: 1.28rem;
}

.page-stock_in .form-card,
.page-stock_in .table-wrap {
    padding: 1rem 1.05rem;
}

.page-stock_in .stock-in-entry-form .form-label {
    margin-bottom: 0.38rem;
    font-size: 0.83rem;
    font-weight: 700;
    color: #475569;
}

.page-stock_in .stock-in-entry-form .form-control,
.page-stock_in .stock-in-entry-form .form-select {
    min-height: 46px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(100, 116, 139, 0.34);
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.page-stock_in .stock-in-entry-form input[name="quantity"] {
    min-width: 120px;
}

.page-stock_in .stock-in-entry-form input[name="document_no"] {
    min-width: 160px;
}

.page-stock_in .stock-in-entry-form textarea.form-control {
    min-height: 46px;
    resize: vertical;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
}

.page-stock_in .stock-in-entry-form .form-control::placeholder,
.page-stock_in .stock-in-entry-form .form-select,
.page-stock_in .stock-in-entry-form textarea.form-control::placeholder {
    color: #475569;
}

.page-stock_in .stock-in-entry-form .form-control:focus,
.page-stock_in .stock-in-entry-form .form-select:focus {
    background: #ffffff;
    border-color: rgba(14, 116, 144, 0.52);
    box-shadow: 0 0 0 0.22rem rgba(14, 165, 233, 0.14);
}

.page-stock_in .stock-in-entry-form {
    align-items: end;
}

.page-stock_in .stock-in-workbench {
    grid-template-columns: 1fr !important;
}

.page-stock_in .stock-in-entry-panel {
    border: 1px solid rgba(20, 184, 166, 0.28) !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(20, 184, 166, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.99) 44%, rgba(239, 246, 255, 0.96)) !important;
    box-shadow: 0 28px 66px rgba(15, 23, 42, 0.12) !important;
}

.page-stock_in .stock-in-entry-panel .stock-in-panel-head {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(59, 130, 246, 0.1), rgba(245, 158, 11, 0.08)) !important;
    border-bottom: 1px solid rgba(20, 184, 166, 0.2) !important;
}

.page-stock_in .stock-in-entry-panel .stock-in-panel-head h5 {
    font-size: 1.18rem;
}

.page-stock_in .stock-in-form-section {
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(20, 184, 166, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 28px rgba(15, 23, 42, 0.045);
}

.page-stock_in .stock-in-quick-entry {
    margin: 20px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(20, 184, 166, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.76)),
        #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
}

.page-stock_in .stock-in-modern-metric.is-blue {
    background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
}

.page-stock_in .stock-in-modern-metric.is-teal {
    background: linear-gradient(135deg, #0f766e, #2dd4bf) !important;
}

.page-stock_in .stock-in-modern-metric.is-amber {
    background: linear-gradient(135deg, #f59e0b, #fb7185) !important;
}

.page-stock_in .stock-in-modern-metric.is-violet {
    background: linear-gradient(135deg, #7c3aed, #60a5fa) !important;
}

.page-stock_in .stock-in-form-section-title {
    color: #0f766e !important;
    font-size: 0.95rem;
}

.page-stock_in .stock-in-field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    align-items: start;
}

.page-stock_in .stock-in-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.page-stock_in .stock-in-field-wide {
    grid-column: span 2;
}

.page-stock_in .stock-in-field-strong {
    border-color: rgba(20, 184, 166, 0.32);
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.64), rgba(255, 255, 255, 0.88));
}

.page-stock_in .stock-in-field > span {
    color: #334155;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.page-stock_in .stock-in-field small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.page-stock_in .stock-in-entry-form .form-control,
.page-stock_in .stock-in-entry-form .form-select {
    min-height: 52px;
    border: 1px solid rgba(15, 118, 110, 0.28) !important;
    background: #ffffff !important;
    font-weight: 800;
}

.page-stock_in .stock-in-entry-form textarea.form-control {
    min-height: 74px;
}

.page-stock_in .stock-in-product-shortcuts {
    margin-top: 14px;
    border: 1px dashed rgba(20, 184, 166, 0.32);
    border-radius: 16px;
    background: rgba(240, 253, 250, 0.58);
    overflow: hidden;
}

.page-stock_in .stock-in-product-shortcuts summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    color: #0f766e;
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.page-stock_in .stock-in-product-shortcuts summary::-webkit-details-marker {
    display: none;
}

.page-stock_in .stock-in-product-shortcuts[open] summary {
    border-bottom: 1px solid rgba(20, 184, 166, 0.18);
    background: rgba(204, 251, 241, 0.55);
}

.page-stock_in .stock-in-product-shortcuts .stock-in-product-fallback {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.76);
}

.page-stock_in .stock-in-form-actions {
    justify-content: flex-end;
    margin: 0 20px 20px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

@media (max-width: 1199.98px) {
    .page-stock_in .stock-in-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-stock_in .stock-in-quick-entry {
        margin: 14px;
        padding: 14px;
    }

    .page-stock_in .stock-in-field-grid {
        grid-template-columns: 1fr;
    }

    .page-stock_in .stock-in-field-wide {
        grid-column: auto;
    }
}

.page-stock_out .hero-panel {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    margin-bottom: 0.9rem !important;
}

.page-stock_out .hero-panel h2 {
    font-size: 1.32rem;
    margin-bottom: 0.28rem !important;
    max-width: none;
}

.page-stock_out .hero-panel > p:last-of-type {
    font-size: 0.9rem;
    max-width: none;
}

.page-stock_out .mini-card.stock-out-summary-trigger {
    border: 0;
    padding: 0.9rem 1rem;
    min-height: auto;
}

.page-stock_out .mini-card.stock-out-summary-trigger h5 {
    margin-bottom: 0.32rem;
    font-size: 0.92rem;
}

.page-stock_out .mini-card.stock-out-summary-trigger strong {
    font-size: 1.28rem;
}

.page-stock_out .form-card,
.page-stock_out .table-wrap {
    padding: 1rem 1.05rem;
}

.page-stock_out .stock-out-entry-form {
    align-items: end;
}

.page-stock_out .stock-out-entry-form .form-label {
    margin-bottom: 0.38rem;
    font-size: 0.83rem;
    font-weight: 700;
    color: #475569;
}

.page-stock_out .stock-out-entry-form .form-control,
.page-stock_out .stock-out-entry-form .form-select {
    min-height: 46px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(100, 116, 139, 0.34);
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.page-stock_out .stock-out-entry-form input[name="quantity"] {
    min-width: 120px;
}

.page-stock_out .stock-out-entry-form input[name="document_no"] {
    min-width: 180px;
}

.page-stock_out .stock-out-entry-form textarea.form-control {
    min-height: 46px;
    resize: vertical;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
}

.page-stock_out .stock-out-entry-form .form-control::placeholder,
.page-stock_out .stock-out-entry-form .form-select,
.page-stock_out .stock-out-entry-form textarea.form-control::placeholder {
    color: #475569;
}

.page-stock_out .stock-out-entry-form .form-control:focus,
.page-stock_out .stock-out-entry-form .form-select:focus {
    background: #ffffff;
    border-color: rgba(14, 116, 144, 0.52);
    box-shadow: 0 0 0 0.22rem rgba(14, 165, 233, 0.14);
}

.page-transfer .hero-panel {
    padding: 1rem 1.15rem;
    border-radius: 18px;
    margin-bottom: 0.95rem !important;
}

.page-transfer .hero-panel h2 {
    font-size: 1.34rem;
    margin-bottom: 0.32rem;
    max-width: none;
}

.page-transfer .hero-panel > p:last-of-type {
    font-size: 0.93rem;
    max-width: none;
}

.page-transfer .form-card {
    padding: 1rem 1.1rem;
}

.page-transfer .transfer-entry-form {
    align-items: end;
}

.page-transfer .transfer-entry-form .form-label {
    margin-bottom: 0.42rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.01em;
}

.page-transfer .transfer-entry-form .form-control,
.page-transfer .transfer-entry-form .form-select {
    min-height: 48px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(100, 116, 139, 0.38);
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.page-transfer .transfer-entry-form .form-control::placeholder,
.page-transfer .transfer-entry-form textarea.form-control::placeholder {
    color: #475569;
}

.page-transfer .transfer-entry-form input[name="quantity"] {
    min-width: 120px;
}

.page-transfer .transfer-entry-form .form-control:focus,
.page-transfer .transfer-entry-form .form-select:focus {
    background: #ffffff;
    border-color: rgba(14, 116, 144, 0.54);
    box-shadow: 0 0 0 0.22rem rgba(14, 165, 233, 0.14);
}

.page-movements .movement-summary-trigger {
    border: 0;
    width: 100%;
    text-align: left;
}

.page-movements .movement-summary-trigger strong {
    font-size: 1.24rem;
}

.page-reports .report-summary-trigger {
    border: 0;
    width: 100%;
    text-align: left;
}

.page-reports .report-summary-trigger strong {
    font-size: 1.24rem;
}

.page-reports .report-preview-modal .stock-in-preview-dialog {
    max-width: 1040px;
}

.page-reports .report-preview-modal .stock-in-preview-body {
    max-height: 62vh;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.page-reports .report-click-row {
    cursor: pointer;
}

.page-reports .report-click-row:hover td,
.page-reports .report-click-row:focus-visible td {
    background: rgba(239, 246, 255, 0.92);
}

.page-movements .movement-preview-modal .stock-in-preview-dialog {
    max-width: 980px;
}

.page-movements .movement-preview-modal .stock-in-preview-body {
    max-height: 62vh;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stock-out-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1070;
}

.stock-out-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(5px);
}

.stock-out-preview-dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100vw - 24px));
    margin: 3vh auto 0;
}

.stock-out-preview-dialog .table-wrap {
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stock-out-preview-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.stock-out-preview-summary-chip {
    min-width: 170px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.stock-out-preview-summary-chip span {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
}

.stock-out-preview-summary-chip strong {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
    color: #0f172a;
}

.stock-out-preview-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 78vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.stock-out-preview-item {
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
}

.stock-out-preview-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stock-out-preview-link:hover {
    transform: translateY(-1px);
    border-color: rgba(239, 68, 68, 0.28);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
    color: inherit;
}

.stock-out-preview-item-head,
.stock-out-preview-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stock-out-preview-item-head strong {
    font-size: 0.96rem;
    color: #0f172a;
}

.stock-out-preview-item-head span,
.stock-out-preview-item-meta span,
.stock-out-preview-type {
    font-size: 0.8rem;
    color: #64748b;
}

.stock-out-preview-item p {
    margin: 6px 0 0;
    color: #334155;
    font-size: 0.84rem;
}

body.stock-out-preview-open {
    overflow: hidden;
}

.stock-in-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1070;
}

.stock-in-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(8px);
}

.stock-in-preview-dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100vw - 24px));
    margin: 3vh auto 0;
    filter: drop-shadow(0 26px 60px rgba(2, 6, 23, 0.34));
}

.stock-in-preview-dialog .table-wrap {
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.stock-in-preview-dialog {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 22px;
}

.stock-in-preview-head {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.12), rgba(59, 130, 246, 0.1));
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.stock-in-preview-row {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    padding: 1rem 1rem 0.95rem;
    display: grid;
    gap: 0.8rem;
    cursor: pointer;
}

.stock-in-preview-row:hover,
.stock-in-preview-row:focus-visible {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,246,255,0.96));
    border-color: rgba(59, 130, 246, 0.26);
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.12);
}

.movement-preview-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.movement-preview-type {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(59, 130, 246, 0.14));
    color: #0f4c81;
    font-size: 0.75rem;
    font-weight: 800;
}

.movement-preview-date {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.stock-in-preview-row-main {
    display: grid;
    gap: 0.45rem;
}

.stock-in-preview-row-main strong {
    font-size: 1rem;
    line-height: 1.35;
    color: #0f172a;
}

.stock-in-preview-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.movement-preview-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.56rem;
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #334155;
    font-size: 0.74rem;
    font-weight: 700;
}

.movement-preview-chip-soft {
    background: rgba(248, 250, 252, 0.96);
    color: #64748b;
}

.stock-in-preview-row-main p {
    margin: 0;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.5;
}

.stock-in-preview-row-side {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 0.1rem;
}

.stock-in-preview-qty {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.72rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(52, 211, 153, 0.12));
    color: #047857;
    font-size: 1rem;
    font-weight: 900;
}

.stock-in-preview-row-side small {
    color: #2563eb;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .page-movements .movement-preview-modal .stock-in-preview-body {
        grid-template-columns: 1fr;
    }

    .page-reports .report-preview-modal .stock-in-preview-body {
        grid-template-columns: 1fr;
    }
}

.stock-in-preview-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 78vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.9) rgba(241, 245, 249, 0.9);
}

.stock-in-preview-list::-webkit-scrollbar {
    width: 10px;
}

.stock-in-preview-list::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.95);
    border-radius: 999px;
}

.stock-in-preview-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.95);
    border-radius: 999px;
}

.stock-in-preview-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.stock-in-preview-summary-chip {
    min-width: 170px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.stock-in-preview-summary-chip span {
    display: block;
    font-size: 0.78rem;
    color: #64748b;
}

.stock-in-preview-summary-chip strong {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
    color: #0f172a;
}

.stock-in-preview-item {
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
}

.stock-in-preview-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.stock-in-preview-link:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
    color: inherit;
}

.stock-in-preview-item-head,
.stock-in-preview-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stock-in-preview-item-head strong {
    font-size: 0.96rem;
    color: #0f172a;
}

.stock-in-preview-item-head span,
.stock-in-preview-item-meta span {
    font-size: 0.8rem;
    color: #64748b;
}

.stock-in-preview-item p {
    margin: 6px 0 0;
    color: #334155;
    font-size: 0.84rem;
}

@media (max-width: 768px) {
    .stock-in-preview-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.stock-in-preview-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .page-record_detail .record-detail-drawer-dialog {
        width: 100vw;
        padding: 0;
    }

    .page-record_detail .record-detail-drawer .record-detail-card {
        border-radius: 0;
    }
}

.page-record_detail .record-detail-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.page-record_detail .record-detail-fact {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.84);
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: start;
}

.page-record_detail .record-detail-fact span {
    font-size: 0.74rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-record_detail .record-detail-fact strong {
    font-size: 0.96rem;
    color: var(--text);
    grid-column: 2;
}

.page-record_detail .record-detail-fact-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(226, 232, 240, 0.9);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 800;
    grid-row: 1 / span 2;
}

.page-record_detail .record-detail-fact-date .record-detail-fact-marker {
    background: rgba(219, 234, 254, 0.92);
    color: #1d4ed8;
}

.page-record_detail .record-detail-fact-money .record-detail-fact-marker {
    background: rgba(220, 252, 231, 0.92);
    color: #166534;
}

.page-record_detail .record-detail-fact-status .record-detail-fact-marker {
    background: rgba(254, 243, 199, 0.92);
    color: #b45309;
}

.page-record_detail .record-detail-fact-id .record-detail-fact-marker {
    background: rgba(237, 233, 254, 0.92);
    color: #6d28d9;
}

.page-record_detail .record-detail-source-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(239, 246, 255, 0.78);
    border: 1px solid rgba(147, 197, 253, 0.24);
}

.page-record_detail .record-detail-source-line span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.page-record_detail .record-detail-source-line strong {
    font-size: 0.88rem;
    color: #0f172a;
}

.page-record_detail .record-detail-table th {
    background: rgba(241, 245, 249, 0.98);
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    border-bottom-width: 1px;
    padding: 0.8rem 0.9rem;
}

.page-record_detail .record-detail-table td {
    font-size: 0.88rem;
    line-height: 1.45;
    background: rgba(255,255,255,0.94);
    padding: 0.8rem 0.9rem;
    vertical-align: top;
}

.page-record_detail .record-detail-table tbody tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.78);
}

.page-record_detail .record-detail-table td:first-child {
    width: 32%;
    font-weight: 700;
    color: #334155;
}

.page-record_detail .record-detail-value-text {
    color: #0f172a;
}

.page-record_detail .record-detail-value-muted {
    color: #94a3b8;
    font-style: italic;
}

.page-record_detail .record-detail-value-amount {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(236, 253, 245, 0.92);
    color: #166534;
    font-weight: 700;
}

.page-record_detail .record-detail-value-date {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(239, 246, 255, 0.92);
    color: #1d4ed8;
    font-weight: 700;
}

.page-record_detail .record-detail-value-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #475569;
    font-weight: 700;
}

.page-record_detail .record-detail-status .stock-state {
    padding: 0.48rem 0.84rem;
    border-radius: 999px;
}

.page-record_detail .record-detail-toolbar .btn {
    border-radius: 999px;
    font-weight: 700;
    padding-inline: 0.85rem;
    min-height: 38px;
    box-shadow: none;
}

.page-record_detail .record-detail-page-summary-actions .btn {
    min-height: 34px;
    padding-inline: 0.8rem;
}

.page-record_detail .record-detail-toolbar .btn-outline-secondary::before {
    content: "•";
    margin-right: 0.4rem;
    opacity: 0.5;
}

.page-record_detail .record-detail-toolbar .btn-outline-primary::before,
.page-record_detail .record-detail-toolbar .btn-primary::before,
.page-record_detail .record-detail-toolbar .btn-success::before,
.page-record_detail .record-detail-toolbar .btn-outline-success::before,
.page-record_detail .record-detail-toolbar .btn-outline-danger::before {
    content: "•";
    margin-right: 0.4rem;
    opacity: 0.5;
}

.page-index .home-lite-modal-actions {
    display: none;
}

@media (max-width: 991.98px) {
    .page-record_detail .record-detail-layout {
        grid-template-columns: 1fr;
    }

    .page-record_detail .record-detail-card-info {
        position: static;
    }

    .page-record_detail .record-detail-page-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-record_detail .record-detail-page-summary-actions {
        justify-content: flex-start;
    }

    .page-record_detail .record-detail-form-grid {
        grid-template-columns: 1fr;
    }

    .page-record_detail .record-detail-approval-fields {
        grid-template-columns: 1fr;
    }

    .page-record_detail .record-detail-approval-decision-head,
    .page-record_detail .record-detail-approval-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-record_detail .record-detail-facts {
        grid-template-columns: 1fr;
    }
}

.page-index .home-lite-card-danger {
    border-left-color: rgba(239, 68, 68, 0.82);
}

.page-index .home-lite-card-warning {
    border-left-color: rgba(245, 158, 11, 0.82);
}

.page-index .home-lite-card-safe {
    border-left-color: rgba(16, 185, 129, 0.82);
}

.page-index .home-lite-detail-template {
    display: none !important;
}

.page-index .home-lite-modal-list {
    display: grid;
    gap: 8px;
}

.page-index .home-lite-modal-row {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    border-radius: 14px;
    padding: 10px 12px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.page-index .home-lite-row-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.4rem;
}

.page-index .home-lite-modal-row strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.35;
}

.page-index .home-lite-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.46rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.page-index .home-lite-row-badge-editable {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.18);
}

.page-index .home-lite-row-badge-summary {
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.page-index .home-lite-row-badge-task {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.page-index .home-lite-row-badge-product {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.page-index .home-lite-row-badge-approval_stock_out,
.page-index .home-lite-row-badge-approval_vehicle_expense {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.page-index .home-lite-row-badge-accounting_transaction,
.page-index .home-lite-row-badge-accounting_account,
.page-index .home-lite-row-badge-accounting_invoice {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.page-index .home-lite-row-badge-vehicle {
    background: rgba(168, 85, 247, 0.14);
    color: #7c3aed;
}

.page-index .home-lite-modal-row span {
    font-size: 0.76rem;
    color: var(--text-soft);
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
    flex: 0 1 52%;
    line-height: 1.35;
}

.page-index .home-lite-modal-row.is-selected {
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 14px 30px rgba(59, 130, 246, 0.09);
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.99), rgba(239, 246, 255, 0.98));
    transform: translateY(-1px);
}

.page-index .home-lite-modal-row.is-updated {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(240, 253, 247, 0.98);
}

.page-index .home-lite-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.page-index .home-lite-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.page-index .home-lite-fixed-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
    max-width: 100%;
    padding: 0.28rem 0.34rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.page-index .home-lite-fixed-toolbar .btn {
    --bs-btn-padding-y: 0.28rem;
    --bs-btn-padding-x: 0.56rem;
    --bs-btn-font-size: 0.71rem;
    --bs-btn-border-radius: 999px;
    box-shadow: none !important;
}

.page-index .home-lite-editor-toolbar {
    gap: 6px;
    margin-bottom: 12px;
}

.page-index .home-lite-editor-toolbar .btn {
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-padding-x: 0.64rem;
    --bs-btn-font-size: 0.72rem;
    --bs-btn-border-radius: 999px;
}

.page-index .home-lite-editor-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.55fr);
    gap: 14px;
    min-width: 0;
}

.page-index .home-lite-editor-panel {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.995), rgba(249,250,251,0.98));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.page-index .home-lite-editor-panel h5 {
    margin: 0;
    padding: 10px 13px;
    color: #fff;
    font-size: 0.88rem;
}

.page-index .home-lite-editor-panel-primary h5 {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.page-index .home-lite-editor-panel-success h5 {
    background: linear-gradient(135deg, #34d399, #10b981);
}

.page-index .home-lite-editor-facts,
.page-index .home-lite-editor-form,
.page-index .home-lite-editor-actions {
    padding: 12px 13px;
}

.page-index .home-lite-editor-facts {
    display: grid;
    gap: 10px;
    background: linear-gradient(180deg, rgba(249, 250, 251, 0.92), rgba(243, 244, 246, 0.92));
}

.page-index .home-lite-editor-fact {
    display: grid;
    gap: 4px;
}

.page-index .home-lite-editor-fact span {
    font-size: 0.78rem;
    color: var(--text-soft);
}

.page-index .home-lite-editor-fact strong {
    color: var(--text);
    font-size: 0.9rem;
}

.page-index .home-lite-editor-form {
    display: grid;
    gap: 8px;
}

.page-index .home-lite-editor-textarea {
    min-height: 200px;
    resize: vertical;
}

.page-index .home-lite-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    justify-content: space-between;
    align-items: center;
}

.page-index .btn-purple {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.page-index .btn-purple:hover,
.page-index .btn-purple:focus-visible {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
}

.page-index .homepage-legacy-shell {
    display: none !important;
}

.page-index .homepage-root-grid,
.page-index #dashboardWidgetCanvas,
.page-index .homepage-inline-editor,
.page-index .homepage-layout-row,
.page-index .homepage-static-layout,
.page-index .homepage-focus-panel,
.page-index .homepage-side-panel,
.page-index .homepage-manager-toolbar,
.page-index .homepage-manager-drawer,
.page-index .homepage-top-strip {
    display: none !important;
}

.page-index .homepage-info-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.page-index .homepage-info-modal-backdrop[hidden] {
    display: none !important;
}

.page-index .homepage-info-modal {
    width: min(560px, calc(100vw - 32px));
    max-width: 100%;
    max-height: 85vh;
    overflow: auto;
    background: linear-gradient(180deg, rgba(255,255,255,0.995), rgba(248,250,252,0.985));
    border-radius: 20px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.10);
    padding: 15px 15px 13px;
}

.page-index .homepage-info-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.page-index .home-lite-head h1 {
    font-size: clamp(1.42rem, 1.8vw, 1.78rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.page-index .homepage-info-modal-body .homepage-inline-card-body {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.page-index .homepage-info-modal-body .homepage-inline-actions {
    margin-top: 10px;
}

.page-index .notification-grid details.notification-box {
    cursor: default;
}

.page-index .homepage-focus-item .page-kicker {
    opacity: 0.8;
}

.page-index .homepage-manager-tab-panel .form-label {
    font-size: 0.85rem;
    color: var(--text-soft);
}

.page-index .homepage-manager-tab-panel .form-check-label {
    color: var(--text);
}

.page-index .homepage-manager-tab-panels {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    padding-top: 8px;
}

.page-index .homepage-static-layout .homepage-side-panel .dashboard-widget-summary {
    min-height: 0;
    padding: 0;
}

.page-index .homepage-manager-drawer .homepage-manager-summary {
    gap: 6px 10px;
}

.page-index .homepage-manager-drawer .homepage-manager-summary strong {
    font-size: 0.92rem;
}

.page-index .homepage-manager-drawer .homepage-manager-summary span {
    font-size: 0.74rem;
}

.page-index .homepage-static-layout .homepage-side-panel .homepage-manager-summary {
    gap: 6px 10px;
}

.page-index .homepage-static-layout .homepage-side-panel .homepage-manager-summary strong {
    font-size: 0.9rem;
}

.page-index .homepage-static-layout .homepage-side-panel .homepage-manager-summary span {
    font-size: 0.74rem;
}

.page-index .homepage-static-layout .homepage-side-panel .page-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--text-soft);
}

.page-index .homepage-static-layout .homepage-side-panel h5 {
    font-size: 1rem;
}

.page-index .homepage-static-layout .homepage-side-panel .product-inline-chip {
    font-size: 0.74rem;
    padding: 0.32rem 0.62rem;
}

.page-index .homepage-static-layout .homepage-side-panel .btn {
    border-radius: 999px;
}

.page-index .homepage-static-layout .homepage-side-panel details:not([open]) .dashboard-widget-summary {
    padding-bottom: 0;
}

.page-index .homepage-static-layout .homepage-side-panel .dashboard-widget-body {
    margin-top: 10px;
    padding-top: 10px;
}

.page-index .homepage-static-layout .homepage-side-panel {
    padding: 10px 12px !important;
    border-radius: 18px !important;
}

.page-index .homepage-static-layout .homepage-side-panel .dashboard-widget-summary h5 {
    font-size: 0.95rem;
    line-height: 1.2;
}

.page-index .homepage-static-layout .homepage-manager-tabs {
    gap: 6px;
    margin-bottom: 8px;
}

.page-index .homepage-static-layout .homepage-manager-tabs .btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem;
}

.page-index .homepage-static-layout .homepage-manager-tab-panel .row.g-3 {
    --bs-gutter-x: 0.8rem;
    --bs-gutter-y: 0.65rem;
}

.page-index .homepage-static-layout .homepage-manager-tab-panel .form-select,
.page-index .homepage-static-layout .homepage-manager-tab-panel .btn,
.page-index .homepage-static-layout .homepage-manager-tab-panel .form-check-label {
    font-size: 0.84rem;
}

.page-index .homepage-static-layout .homepage-widget-manager-list {
    grid-template-columns: 1fr;
    gap: 6px;
}

.page-index .homepage-static-layout .dashboard-widget-option {
    min-height: 48px;
    padding: 8px 10px;
}

.page-index .homepage-static-layout .dashboard-widget-option-label {
    font-size: 0.86rem;
}

.page-index .homepage-static-layout .dashboard-widget-order-actions .btn,
.page-index .homepage-static-layout .dashboard-widget-order-actions .form-select {
    min-height: 34px;
}

@media (max-width: 1199.98px) {
    .page-index .home-lite-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-index .home-lite-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-index .home-lite-main-grid {
        grid-template-columns: 1fr;
    }

    .page-index .home-lite-notification-grid {
        grid-template-columns: 1fr;
    }

    .page-index .home-lite-editor-grid {
        grid-template-columns: 1fr;
    }

    .page-index #dashboardWidgetCanvas {
        grid-template-columns: 1fr;
    }

    .page-index .homepage-side-panel {
        position: static;
        max-width: none;
    }

    .page-index .homepage-top-strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-index .home-lite-head {
        flex-direction: column;
    }

    .page-index .home-lite-kpi-grid {
        grid-template-columns: 1fr;
    }

    .page-index .home-lite-summary-bar {
        grid-template-columns: 1fr;
    }

    .page-index .homepage-top-strip-grid {
        grid-template-columns: 1fr;
    }
}

.homepage-custom-shell.homepage-density-compact .notification-panel,
.homepage-custom-shell.homepage-density-compact .table-wrap,
.homepage-custom-shell.homepage-density-compact .mini-card,
.homepage-custom-shell.homepage-density-compact .manager-box {
    padding: 14px;
}

.homepage-custom-shell.homepage-density-compact .homepage-kpi-grid,
.homepage-custom-shell.homepage-density-compact .homepage-action-grid,
.homepage-custom-shell.homepage-density-compact .row.g-4,
.homepage-custom-shell.homepage-density-compact .row.g-3 {
    --bs-gutter-y: 0.85rem;
}

.homepage-custom-shell.homepage-mode-minimal .homepage-kpi-grid a:nth-child(n+3),
.homepage-custom-shell.homepage-mode-minimal .homepage-action-grid a:nth-child(n+5) {
    display: none !important;
}

.homepage-custom-shell.homepage-mode-minimal .homepage-command-actions .btn-outline-secondary:nth-child(3) {
    display: none;
}

.homepage-custom-shell.homepage-mode-focus .homepage-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homepage-custom-shell.homepage-mode-focus .homepage-focus-panel:first-child {
    border-color: rgba(37, 99, 235, 0.22) !important;
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.08);
}

.homepage-custom-shell.homepage-mode-operations .homepage-command-hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.90));
    border-radius: 22px;
    padding: 28px;
}

.homepage-custom-shell.homepage-mode-operations .homepage-command-hero p,
.homepage-custom-shell.homepage-mode-operations .homepage-command-hero h2 {
    color: #f8fafc;
}

.homepage-custom-shell.homepage-mode-executive .homepage-kpi-card strong,
.homepage-custom-shell.homepage-mode-focus .homepage-kpi-card strong,
.homepage-custom-shell.homepage-mode-operations .homepage-kpi-card strong,
.homepage-custom-shell.homepage-mode-minimal .homepage-kpi-card strong {
    font-size: 1.65rem;
}

.homepage-custom-shell .dashboard-widget-body .form-check {
    margin-bottom: 0;
}

.homepage-custom-shell.homepage-card-size-large .homepage-kpi-card,
.homepage-custom-shell.homepage-card-size-large .homepage-summary-card,
.homepage-custom-shell.homepage-card-size-large .manager-box,
.homepage-custom-shell.homepage-card-size-large .mini-card {
    min-height: 172px;
}

.homepage-custom-shell.homepage-card-size-compact .homepage-kpi-card,
.homepage-custom-shell.homepage-card-size-compact .homepage-summary-card,
.homepage-custom-shell.homepage-card-size-compact .manager-box,
.homepage-custom-shell.homepage-card-size-compact .mini-card {
    min-height: 118px;
}

.homepage-custom-shell.homepage-accent-slate .homepage-command-hero,
.homepage-custom-shell.homepage-accent-slate .homepage-kpi-card strong {
    color: #334155;
}

.homepage-custom-shell.homepage-accent-sage .summary-card-icon,
.homepage-custom-shell.homepage-accent-sage .homepage-menu-link-icon,
.homepage-custom-shell.homepage-accent-sage .dashboard-widget-handle {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.homepage-custom-shell.homepage-accent-sage .homepage-kpi-card {
    border-color: rgba(22, 163, 74, 0.16);
}

.homepage-custom-shell.homepage-accent-sand .summary-card-icon,
.homepage-custom-shell.homepage-accent-sand .homepage-menu-link-icon,
.homepage-custom-shell.homepage-accent-sand .dashboard-widget-handle {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.homepage-custom-shell.homepage-accent-sand .homepage-kpi-card {
    border-color: rgba(217, 119, 6, 0.16);
}

.homepage-custom-shell.homepage-accent-slate .summary-card-icon,
.homepage-custom-shell.homepage-accent-slate .homepage-menu-link-icon,
.homepage-custom-shell.homepage-accent-slate .dashboard-widget-handle {
    background: rgba(51, 65, 85, 0.12);
    color: #334155;
}

details > summary {
    cursor: pointer;
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details:not([open]) > :not(summary) {
    display: none !important;
}

details[open] > :not(summary) {
    display: block;
}

.ai-assistant-shell {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    width: min(420px, calc(100vw - 28px));
    display: grid;
    gap: 10px;
}

.ai-center-main-shell {
    min-height: 780px;
}

.page-ai_center .task-detail-tablist {
    margin-bottom: 18px;
}

.ai-center-assistant-mount {
    min-height: 680px;
}

.ai-center-launch-card {
    padding: 1.1rem 1.2rem;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-operation-card {
    padding: 1rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(241, 245, 249, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.ai-center-bundle-card {
    padding: 1rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.ai-center-bundle-steps {
    display: grid;
    gap: 8px;
}

.ai-center-bundle-result {
    display: grid;
    gap: 6px;
    padding: 0.82rem 0.9rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-bundle-result-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-center-custom-builder {
    padding: 1rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(59, 130, 246, 0.14);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.ai-center-custom-helper {
    padding: 0.82rem 0.9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px dashed rgba(59, 130, 246, 0.22);
    color: var(--muted);
    font-size: 0.88rem;
}

.ai-center-custom-card .ai-center-bundle-result {
    min-height: 104px;
}

.ai-center-custom-empty {
    padding: 1rem;
    border-radius: 22px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px dashed rgba(148, 163, 184, 0.24);
    color: var(--muted);
}

.ai-center-bundle-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.62rem 0.72rem;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--text);
    font-size: 0.82rem;
}

.ai-center-bundle-step i {
    color: #2563eb;
}

.ai-center-operation-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.08);
}

.ai-center-operation-flows {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-center-operation-flow {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    border-radius: 14px;
    padding: 0.5rem 0.72rem;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ai-center-operation-flow:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.22);
    background: rgba(239, 246, 255, 0.96);
    color: #1d4ed8;
}

.ai-center-operation-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-center-operation-result {
    display: grid;
    gap: 6px;
    padding: 0.82rem 0.9rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-operation-result-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-center-operation-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.96);
    color: var(--muted);
}

.ai-center-operation-result-badge.is-pending {
    border-color: rgba(180, 83, 9, 0.18);
    background: rgba(255, 251, 235, 0.96);
    color: #b45309;
}

.ai-center-operation-result-badge.is-success {
    border-color: rgba(5, 150, 105, 0.18);
    background: rgba(236, 253, 245, 0.96);
    color: #047857;
}

.ai-center-operation-result-badge.is-error {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 242, 242, 0.96);
    color: #dc2626;
}

.ai-center-operation-result-text {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.ai-center-operation-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.ai-center-operation-input {
    min-height: 44px;
}

.ai-center-operation-builder {
    padding: 0.9rem;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-operation-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 575.98px) {
    .ai-center-operation-builder-grid,
    .ai-center-operation-actions {
        grid-template-columns: 1fr;
    }
}

.ai-center-operation-history {
    display: grid;
    gap: 8px;
}

.ai-center-operation-history-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.ai-center-operation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.5rem 0.82rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ai-center-operation-link:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.26);
    background: rgba(239, 246, 255, 0.96);
    color: #1d4ed8;
}

.ai-center-list-card {
    height: 100%;
    padding: 1rem;
    border-radius: 24px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ai-center-chip {
    border: 1px solid rgba(37, 99, 235, 0.14);
    background: rgba(239, 246, 255, 0.9);
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.ai-center-list {
    display: grid;
    gap: 10px;
}

.ai-center-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.82rem 0.9rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: var(--text);
}

.ai-center-list-item i {
    color: #2563eb;
    margin-top: 2px;
}

.ai-center-list-item.is-warning i {
    color: #b45309;
}

.ai-center-form-stack {
    display: grid;
    gap: 10px;
}

.ai-center-train-btn {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(37, 99, 235, 0.14);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    border-radius: 18px;
    padding: 0.82rem 0.95rem;
    font-weight: 700;
}

.ai-center-train-btn.is-warning {
    border-color: rgba(180, 83, 9, 0.16);
    background: rgba(255, 251, 235, 0.96);
}

.ai-center-form-stack .form-control {
    border-radius: 18px;
    min-height: 52px;
}

.ai-center-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ai-center-history-list {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
}

.ai-center-history-item {
    display: grid;
    gap: 8px;
    padding: 0.82rem 0.9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-debug-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ai-center-debug-item {
    display: grid;
    gap: 4px;
    padding: 0.82rem 0.9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-debug-item span,
.ai-center-debug-block span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.ai-center-debug-item strong {
    color: var(--text);
    font-size: 0.95rem;
}

.ai-center-debug-note {
    margin-top: 12px;
    padding: 0.82rem 0.9rem;
    border-radius: 18px;
    background: rgba(239, 246, 255, 0.9);
    border: 1px solid rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    line-height: 1.5;
}

.ai-center-debug-log {
    display: grid;
    gap: 12px;
}

.ai-center-debug-block {
    display: grid;
    gap: 6px;
    padding: 0.9rem 1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
    line-height: 1.55;
}

.ai-center-scenario-card {
    height: 100%;
    padding: 1rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.ai-center-scenario-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.ai-center-scenario-summary-card {
    display: grid;
    gap: 6px;
    padding: 0.95rem 1rem;
    border-radius: 20px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-scenario-summary-card.is-wide {
    grid-column: span 1;
}

.ai-center-scenario-summary-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.ai-center-scenario-summary-value {
    font-size: 1.05rem;
    color: var(--text);
}

.ai-center-scenario-meta {
    display: grid;
    gap: 8px;
    padding: 0.88rem 0.92rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-center-scenario-line {
    display: grid;
    gap: 4px;
}

.ai-center-scenario-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.ai-center-scenario-value {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.45;
}

.ai-center-scenario-value.is-error {
    color: #b91c1c;
}

.ai-center-scenario-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ai-center-scenario-actions .ai-center-train-btn {
    min-height: 42px;
}

.ai-center-scenario-detail[hidden] {
    display: none !important;
}

@media (max-width: 991.98px) {
    .ai-center-scenario-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .ai-center-scenario-summary {
        grid-template-columns: 1fr;
    }
}

.ai-center-scenario-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 0.32rem 0.68rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.95);
    color: var(--muted);
}

.ai-center-scenario-badge.is-pending {
    border-color: rgba(180, 83, 9, 0.18);
    background: rgba(255, 251, 235, 0.96);
    color: #b45309;
}

.ai-center-scenario-badge.is-success {
    border-color: rgba(5, 150, 105, 0.18);
    background: rgba(236, 253, 245, 0.96);
    color: #047857;
}

.ai-center-scenario-badge.is-error {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 242, 242, 0.96);
    color: #dc2626;
}

.ai-center-chip-static {
    cursor: default;
}

body[data-ai-center-embedded="1"] .ai-assistant-shell {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    z-index: 1;
}

body[data-ai-center-embedded="1"] .ai-assistant-toggle,
body[data-ai-center-embedded="1"] .ai-assistant-close {
    display: none !important;
}

body[data-ai-center-embedded="1"] .ai-assistant-panel {
    display: block !important;
    min-height: 680px;
    border-radius: 30px;
    padding: 20px;
}

body[data-ai-center-embedded="1"] .ai-assistant-panel-header,
body[data-ai-center-embedded="1"] .ai-assistant-mode-row {
    position: sticky;
}

body[data-ai-center-embedded="1"] .ai-assistant-messages {
    min-height: 320px;
    max-height: 48vh;
}

.ai-assistant-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 20px;
    padding: 13px 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ai-assistant-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.14);
}

.ai-assistant-toggle-icon,
.ai-assistant-toggle-arrow {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.96), rgba(239, 246, 255, 0.96));
    color: #1d4ed8;
    flex: 0 0 auto;
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.ai-assistant-toggle-copy {
    display: grid;
    gap: 2px;
    text-align: left;
    flex: 1 1 auto;
}

.ai-assistant-toggle-copy strong {
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.ai-assistant-toggle-copy small {
    color: var(--muted);
    font-size: 0.78rem;
}

.ai-assistant-shell.is-open .ai-assistant-toggle-arrow {
    transform: rotate(180deg);
}

.ai-assistant-panel {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(16px);
    padding: 18px;
}

.ai-assistant-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    position: sticky;
    top: 0;
    z-index: 6;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(10px);
}

.ai-assistant-panel-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-assistant-mode-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    position: sticky;
    top: 74px;
    z-index: 5;
    padding: 8px;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.ai-assistant-mode-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 12px;
    padding: 0.46rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.96);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ai-assistant-mode-badge.is-chat {
    border-color: rgba(37, 99, 235, 0.2);
    background: rgba(239, 246, 255, 0.95);
    color: #1d4ed8;
}

.ai-assistant-mode-badge.is-action {
    border-color: rgba(15, 118, 110, 0.2);
    background: rgba(236, 253, 245, 0.95);
    color: #0f766e;
}

.ai-assistant-mode-badge.is-rewrite {
    border-color: rgba(124, 58, 237, 0.2);
    background: rgba(245, 243, 255, 0.95);
    color: #7c3aed;
}

.ai-assistant-mode-badge.is-summary {
    border-color: rgba(180, 83, 9, 0.2);
    background: rgba(255, 251, 235, 0.95);
    color: #b45309;
}

.ai-assistant-mode-example {
    margin-bottom: 12px;
    padding: 0.7rem 0.85rem;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px dashed rgba(148, 163, 184, 0.22);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.ai-assistant-status-card {
    margin-bottom: 12px;
    padding: 0.85rem 0.95rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.ai-assistant-status-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.45rem;
}

.ai-assistant-status-top strong {
    font-size: 0.84rem;
    letter-spacing: -0.01em;
    color: var(--text);
}

.ai-assistant-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.96);
    color: var(--muted);
}

.ai-assistant-status-badge.is-idle {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.96);
    color: #64748b;
}

.ai-assistant-status-badge.is-active {
    border-color: rgba(37, 99, 235, 0.2);
    background: rgba(239, 246, 255, 0.96);
    color: #1d4ed8;
}

.ai-assistant-status-badge.is-confirm {
    border-color: rgba(217, 119, 6, 0.22);
    background: rgba(255, 251, 235, 0.96);
    color: #b45309;
}

.ai-assistant-status-step {
    margin: 0;
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.45;
}

.ai-assistant-status-meta {
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.ai-assistant-mini-set {
    margin-bottom: 12px;
    padding: 0.75rem 0.85rem;
    border-radius: 18px;
    background: rgba(239, 246, 255, 0.78);
    border: 1px solid rgba(37, 99, 235, 0.14);
}

.ai-assistant-mini-set-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-assistant-mini-set-reason {
    margin-top: 0.65rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.ai-assistant-mini-chip {
    border: 1px solid rgba(37, 99, 235, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    border-radius: 999px;
    padding: 0.48rem 0.82rem;
    font-size: 0.78rem;
    line-height: 1.3;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.ai-assistant-mini-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(219, 234, 254, 0.96);
    color: #1d4ed8;
}

.ai-assistant-history {
    margin-bottom: 12px;
    padding: 0.75rem 0.85rem;
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-assistant-favorites {
    margin-bottom: 12px;
    padding: 0.75rem 0.85rem;
    border-radius: 18px;
    background: rgba(255, 251, 235, 0.92);
    border: 1px solid rgba(180, 83, 9, 0.14);
}

.ai-assistant-preferences {
    margin-bottom: 12px;
    padding: 0.75rem 0.85rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.9));
    border: 1px solid rgba(37, 99, 235, 0.14);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.06);
}

.ai-assistant-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-assistant-preferences-note {
    margin-bottom: 0.7rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.ai-assistant-preferences-list {
    display: grid;
    gap: 10px;
}

.ai-assistant-preference-group {
    padding: 0.7rem 0.75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.ai-assistant-preference-title {
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ai-assistant-preference-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-assistant-preference-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ai-assistant-preference-chip {
    border: 1px solid rgba(37, 99, 235, 0.14);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    border-radius: 999px;
    padding: 0.42rem 0.76rem;
    font-size: 0.76rem;
    line-height: 1.3;
}

.ai-assistant-preference-remove {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: #94a3b8;
}

.ai-assistant-preference-empty {
    color: var(--muted);
    font-size: 0.76rem;
}

.ai-assistant-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ai-assistant-history-clear {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 700;
}

.ai-assistant-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-assistant-favorite-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: grab;
}

.ai-assistant-favorite-row.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
}

.ai-assistant-history-item {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text);
    border-radius: 999px;
    padding: 0.46rem 0.8rem;
    font-size: 0.78rem;
    line-height: 1.3;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ai-assistant-history-item:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.2);
    background: rgba(239, 246, 255, 0.96);
}

.ai-assistant-favorite-toggle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: #94a3b8;
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.ai-assistant-favorite-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(180, 83, 9, 0.24);
    color: #b45309;
}

.ai-assistant-favorite-toggle.is-active {
    border-color: rgba(180, 83, 9, 0.24);
    background: rgba(255, 251, 235, 0.98);
    color: #b45309;
}

.ai-assistant-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.96);
    color: var(--muted);
    font-size: 0.79rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.ai-assistant-mode i {
    font-size: 0.86rem;
}

.ai-assistant-mode span {
    display: inline-block;
}

.ai-assistant-mode:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.18);
    color: var(--text);
}

.ai-assistant-mode.is-active {
    border-color: rgba(37, 99, 235, 0.22);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.94));
    color: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1);
}

.ai-assistant-mode[data-ai-mode="chat"].is-active {
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}

.ai-assistant-mode[data-ai-mode="action"].is-active {
    border-color: rgba(15, 118, 110, 0.22);
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(209, 250, 229, 0.94));
    color: #0f766e;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.1);
}

.ai-assistant-mode[data-ai-mode="rewrite"].is-active {
    border-color: rgba(124, 58, 237, 0.22);
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(233, 213, 255, 0.94));
    color: #7c3aed;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.1);
}

.ai-assistant-mode[data-ai-mode="summary"].is-active {
    border-color: rgba(180, 83, 9, 0.22);
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.94));
    color: #b45309;
    box-shadow: 0 10px 22px rgba(180, 83, 9, 0.1);
}

.ai-assistant-header-btn {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.96);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 700;
}

.ai-assistant-panel-header h5 {
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.ai-assistant-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text);
}

.ai-assistant-prompt-row,
.ai-assistant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-assistant-prompt-row {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ai-assistant-prompt,
.ai-assistant-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 18px;
    padding: 11px 14px;
    font-size: 0.82rem;
    line-height: 1.35;
    text-decoration: none;
}

.ai-assistant-prompt {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.94));
    color: #1d4ed8;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.ai-assistant-prompt:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.28);
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.98), rgba(191, 219, 254, 0.95));
}

.ai-assistant-action-link {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.95);
    color: var(--text);
    font-weight: 600;
}

.ai-assistant-messages {
    max-height: 340px;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    padding: 6px 4px 4px 0;
}

.ai-assistant-message {
    display: flex;
}

.ai-assistant-message.is-user {
    justify-content: flex-end;
}

.ai-assistant-bubble {
    max-width: 90%;
    border-radius: 20px;
    padding: 13px 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.ai-assistant-message.is-user .ai-assistant-bubble {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.94), rgba(59, 130, 246, 0.92));
    color: #eff6ff;
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
}

.ai-assistant-bubble p,
.ai-assistant-bubble span,
.ai-assistant-bubble strong {
    display: block;
    margin: 0;
}

.ai-assistant-bubble p + p {
    margin-top: 8px;
}

.ai-assistant-draft-box {
    margin-top: 8px;
    margin-left: auto;
    width: min(90%, 320px);
    border: 1px dashed rgba(37, 99, 235, 0.28);
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(239, 246, 255, 0.92);
}

.ai-assistant-draft-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1d4ed8;
    margin-bottom: 6px;
}

.ai-assistant-draft-text {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 10px;
}

.ai-assistant-draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-assistant-feedback-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ai-assistant-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 12px;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.ai-assistant-shell.is-processing .ai-assistant-form .form-control,
.ai-assistant-shell.is-processing .ai-assistant-form .btn {
    opacity: 0.72;
}

.ai-assistant-meta {
    margin-top: 6px;
    font-size: 0.74rem;
    color: var(--muted);
}

.ai-inline-tip {
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.08);
}

.ai-daily-summary-card {
    border-color: rgba(37, 99, 235, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.96));
}

.ai-assistant-hint {
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.45;
    padding: 0.7rem 0.85rem;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px dashed rgba(148, 163, 184, 0.2);
}

.ai-quality-dialog {
    border-radius: 26px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    box-shadow: 0 30px 64px rgba(15, 23, 42, 0.22);
}

.ai-quality-header {
    padding-bottom: 0.9rem;
    margin-bottom: 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-quality-body {
    line-height: 1.6;
}

.ai-quality-actions .btn {
    border-radius: 14px;
    font-weight: 600;
}

html[data-theme="dark"] .ai-assistant-toggle {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.42);
}

html[data-theme="dark"] .ai-assistant-toggle-icon,
html[data-theme="dark"] .ai-assistant-toggle-arrow {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.96));
    border-color: rgba(96, 165, 250, 0.16);
    color: #93c5fd;
}

html[data-theme="dark"] .ai-assistant-panel,
html[data-theme="dark"] .ai-quality-dialog {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 30px 64px rgba(2, 6, 23, 0.42);
}

html[data-theme="dark"] .ai-assistant-header-btn,
html[data-theme="dark"] .ai-assistant-action-link,
html[data-theme="dark"] .ai-assistant-hint {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}

html[data-theme="dark"] .ai-assistant-mode {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-assistant-panel-header {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92));
}

html[data-theme="dark"] .ai-assistant-mode-row {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] .ai-assistant-mode-badge {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}

html[data-theme="dark"] .ai-assistant-mode-example {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-assistant-status-card {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .ai-assistant-status-top strong {
    color: #e2e8f0;
}

html[data-theme="dark"] .ai-assistant-status-step,
html[data-theme="dark"] .ai-assistant-status-meta {
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-assistant-status-badge.is-idle {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-assistant-mini-set {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(96, 165, 250, 0.16);
}

html[data-theme="dark"] .ai-assistant-mini-chip {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(96, 165, 250, 0.16);
    color: #e2e8f0;
}

html[data-theme="dark"] .ai-assistant-mini-chip:hover {
    background: rgba(30, 64, 175, 0.22);
    border-color: rgba(96, 165, 250, 0.26);
    color: #bfdbfe;
}

html[data-theme="dark"] .ai-assistant-mini-set-reason {
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-assistant-history {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .ai-assistant-favorites {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(251, 191, 36, 0.16);
}

html[data-theme="dark"] .ai-assistant-preferences {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .ai-assistant-preferences-note,
html[data-theme="dark"] .ai-assistant-preference-title,
html[data-theme="dark"] .ai-assistant-preference-empty {
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-assistant-preference-group {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .ai-assistant-preference-chip,
html[data-theme="dark"] .ai-assistant-preference-remove {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}

html[data-theme="dark"] .ai-assistant-history-head {
    color: #cbd5e1;
}

html[data-theme="dark"] .ai-assistant-history-item {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
    color: #e2e8f0;
}

html[data-theme="dark"] .ai-assistant-favorite-toggle {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(148, 163, 184, 0.16);
    color: #94a3b8;
}

html[data-theme="dark"] .ai-assistant-favorite-toggle.is-active {
    border-color: rgba(251, 191, 36, 0.24);
    color: #fde68a;
}

html[data-theme="dark"] .ai-assistant-mode.is-active {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.92));
    border-color: rgba(96, 165, 250, 0.24);
    color: #93c5fd;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] .ai-assistant-mode[data-ai-mode="action"].is-active {
    border-color: rgba(45, 212, 191, 0.22);
    color: #99f6e4;
}

html[data-theme="dark"] .ai-assistant-mode[data-ai-mode="rewrite"].is-active {
    border-color: rgba(192, 132, 252, 0.24);
    color: #e9d5ff;
}

html[data-theme="dark"] .ai-assistant-mode[data-ai-mode="summary"].is-active {
    border-color: rgba(251, 191, 36, 0.24);
    color: #fde68a;
}

html[data-theme="dark"] .ai-assistant-bubble {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] .ai-assistant-draft-box {
    background: rgba(30, 41, 59, 0.82);
    border-color: rgba(96, 165, 250, 0.24);
}

.clickable-row {
    transition: background-color 0.18s ease;
}

.clickable-row:hover {
    background: rgba(37, 99, 235, 0.06);
}

tr[id]:target > td {
    background: rgba(255, 243, 205, 0.88);
    transition: background-color 0.25s ease;
}

.task-detail-cell {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92));
    padding: 0.9rem 1rem !important;
}

.task-detail-shell {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.task-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.65rem;
}

.task-detail-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.task-detail-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.4rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(255,255,255,0.98));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.task-detail-tab {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: #334155;
    padding: 0.5rem 0.82rem;
    min-height: 40px;
    font-size: 0.78rem;
    font-weight: 700;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.task-detail-tab:hover {
    background: rgba(239, 246, 255, 0.96);
    border-color: rgba(37, 99, 235, 0.28);
    color: #1d4ed8;
    transform: translateY(-1px);
}

.task-detail-tab.is-active {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
    border-color: rgba(37, 99, 235, 0.3);
    color: #1d4ed8;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.task-detail-meta-item {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.task-detail-meta-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.task-detail-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    padding: 0.95rem;
}

.task-detail-pane {
    display: none;
}

.task-detail-pane.is-active {
    display: block;
}

.task-detail-stack {
    display: grid;
    gap: 0.85rem;
}

.task-detail-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.task-detail-card-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #0f172a;
}

.task-detail-card-subtitle {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.45;
}

.task-detail-count {
    flex-shrink: 0;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 600;
}

.task-comment-stream {
    display: grid;
    gap: 0.65rem;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.task-comment-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    padding: 0.75rem 0.8rem;
    background: #fff;
}

.task-subtask-list {
    display: grid;
    gap: 0.45rem;
}

.task-subtask-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
    font-size: 0.84rem;
}

.task-subtask-row:last-child {
    border-bottom: 0;
}

.task-score-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.task-score-panel strong {
    font-size: 1.05rem;
    color: #0f172a;
}

.task-empty-state {
    padding: 0.8rem 0.9rem;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.82);
    color: var(--muted);
    font-size: 0.82rem;
}

.detail-return-group {
    position: fixed;
    right: 22px;
    top: 84px;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    max-width: min(420px, calc(100vw - 28px));
}

.detail-return-button {
    border-radius: 999px;
    padding-inline: 0.9rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.detail-return-clear {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.detail-return-meta {
    width: 100%;
    padding-left: 0.2rem;
    color: var(--muted);
    font-size: 0.74rem;
}

@media (max-width: 991.98px) {
    .task-detail-cell {
        padding: 0.8rem !important;
    }

    .task-comment-stream {
        max-height: 360px;
    }

    .detail-return-group {
        top: auto;
        bottom: 84px;
        right: 14px;
    }
}

.card-link-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.card-link-card:hover {
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.ai-quality-modal {
    position: fixed;
    inset: 0;
    z-index: 1085;
}

.ai-quality-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
}

.ai-quality-dialog {
    position: relative;
    width: min(560px, calc(100vw - 2rem));
    margin: 8vh auto 0;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 24px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
    padding: 1.15rem;
}

.ai-quality-header,
.ai-quality-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ai-quality-close {
    border: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
    color: var(--text-main);
}

.ai-quality-body {
    margin-top: 0.95rem;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.98));
    border: 1px solid rgba(203, 213, 225, 0.8);
    color: var(--text-main);
    max-height: 42vh;
    overflow: auto;
}

.ai-quality-body p {
    margin: 0;
    line-height: 1.65;
}

.ai-quality-body p + p {
    margin-top: 0.55rem;
}

.ai-quality-summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}

.ai-quality-headline {
    margin-bottom: 0.9rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.ai-quality-headline.is-ok {
    background: rgba(22, 163, 74, 0.11);
    color: #166534;
}

.ai-quality-headline.is-risk {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.ai-quality-headline.is-missing {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.ai-quality-badge,
.ai-quality-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ai-quality-badge {
    min-width: 72px;
    padding: 0.38rem 0.72rem;
}

.ai-quality-dot {
    min-width: 54px;
    padding: 0.25rem 0.55rem;
    flex-shrink: 0;
}

.ai-quality-badge.is-ok,
.ai-quality-dot.is-ok {
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}

.ai-quality-badge.is-risk,
.ai-quality-dot.is-risk {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.ai-quality-badge.is-missing,
.ai-quality-dot.is-missing {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.ai-quality-list {
    display: grid;
    gap: 0.7rem;
}

.ai-quality-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(203, 213, 225, 0.9);
}

.ai-quality-item p {
    margin: 0;
}

.ai-autofixed-highlight {
    animation: aiAutofixedPulse 2.2s ease;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.22);
    border-color: rgba(234, 179, 8, 0.75) !important;
    background: rgba(254, 249, 195, 0.55) !important;
}

@keyframes aiAutofixedPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.36);
        background: rgba(254, 249, 195, 0.75);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(250, 204, 21, 0);
        background: rgba(254, 249, 195, 0.12);
    }
}

.ai-quality-meta {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.ai-quality-actions {
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .ai-assistant-shell {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
    }

    .ai-assistant-panel {
        padding: 14px;
        border-radius: 20px;
    }

    .ai-assistant-form {
        grid-template-columns: 1fr;
    }

    .ai-assistant-prompt-row {
        grid-template-columns: 1fr;
    }

    .ai-quality-dialog {
        margin-top: 5vh;
        width: calc(100vw - 1.25rem);
        padding: 1rem;
    }

    .ai-quality-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

.workspace-fold {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.workspace-fold summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
}

.workspace-fold summary::-webkit-details-marker {
    display: none;
}

.workspace-fold-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workspace-fold-head strong {
    font-size: 0.98rem;
    color: #0f172a;
}

.workspace-fold-head span {
    font-size: 0.82rem;
    color: #64748b;
}

.workspace-fold-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: #0369a1;
    font-size: 0.78rem;
    font-weight: 700;
}

.workspace-fold-badge i {
    transition: transform 0.2s ease;
}

.workspace-fold[open] .workspace-fold-badge i {
    transform: rotate(180deg);
}

.workspace-fold-body {
    padding: 0 18px 18px;
}

html[data-theme="dark"] .workspace-fold {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.34);
}

html[data-theme="dark"] .workspace-fold-head strong {
    color: #e2e8f0;
}

html[data-theme="dark"] .workspace-fold-head span {
    color: #94a3b8;
}

html[data-theme="dark"] .workspace-fold-badge {
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
}

body.page-messages .messages-workbench {
    display: none !important;
}

body.page-messages .messages-root-grid {
    display: block !important;
}

body.page-messages .messages-root-aside {
    display: none !important;
}

body.page-messages .messages-root-main {
    width: 100%;
}

.page-messages .hero-panel h2 {
    max-width: 820px;
    font-size: clamp(1.7rem, 1.45rem + 0.7vw, 2.05rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em;
}

.page-messages .hero-panel > p:last-of-type {
    max-width: 760px;
}

.page-messages .manager-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.page-messages .manager-box {
    min-height: 168px;
    border-radius: 18px;
    justify-content: space-between;
}

.page-messages .manager-box strong {
    font-size: 1.25rem;
}

.page-messages .hero-badge {
    cursor: pointer;
}

.page-messages [data-task-pane="messages-compose-pane"] .form-card {
    border: 1px solid rgba(124, 58, 237, 0.16);
    box-shadow: 0 16px 34px rgba(124, 58, 237, 0.08);
}

.page-messages [data-task-pane="messages-compose-pane"] .form-card h5 {
    font-size: 1.02rem;
}

.page-messages [data-task-pane="messages-compose-pane"] .form-control,
.page-messages [data-task-pane="messages-compose-pane"] .form-select {
    min-height: 42px;
}

.page-messages [data-task-pane="messages-compose-pane"] textarea.form-control {
    min-height: 180px;
}

/* 2026-04 global sade tasarim katmani */
:root {
    --bg: #eef2f6;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --surface-soft: #f7f9fc;
    --line: rgba(148, 163, 184, 0.22);
    --text: #182230;
    --muted: #667085;
    --primary: #2563eb;
    --primary-strong: #1d4ed8;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    --sidebar-bg: #0f172a;
}

html[data-theme="dark"] {
    --bg: #0b1120;
    --surface: #111827;
    --surface-strong: #0f172a;
    --surface-soft: #162033;
    --line: rgba(148, 163, 184, 0.18);
    --text: #e5edf9;
    --muted: #97a3b6;
    --primary: #60a5fa;
    --primary-strong: #93c5fd;
    --shadow: 0 12px 34px rgba(2, 6, 23, 0.28);
    --sidebar-bg: #020817;
}

body {
    background: var(--bg) !important;
    color: var(--text);
}

.app-backdrop {
    display: none !important;
}

.app-layout {
    padding: 16px !important;
}

.build-badge {
    top: 12px;
    right: 14px;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: none;
}

html[data-theme="dark"] .build-badge {
    background: rgba(15, 23, 42, 0.94);
}

.sidebar-column {
    min-width: 286px !important;
}

.sidebar-panel {
    top: 16px !important;
    height: calc(100vh - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    padding: 20px 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: var(--sidebar-bg) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.sidebar-brand {
    gap: 12px !important;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.brand-mark,
.brand-logo-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.sidebar-kicker {
    color: rgba(226, 232, 240, 0.58) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
}

.sidebar-brand h1 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

.brand-subline {
    color: rgba(226, 232, 240, 0.68) !important;
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
}

.sidebar-highlight,
.sidebar-launchpad,
.sidebar-favorites {
    padding: 12px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}

.sidebar-highlight strong,
.sidebar-highlight small,
.sidebar-highlight-label {
    color: #e2e8f0 !important;
}

.sidebar-highlight small {
    display: block;
    margin-top: 6px;
    color: rgba(226, 232, 240, 0.72) !important;
}

.sidebar-launchpad-grid {
    grid-template-columns: 1fr !important;
}

.sidebar-launchpad-link,
.sidebar-favorite-link {
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
    color: #dbe7f5 !important;
    box-shadow: none !important;
}

.sidebar-launchpad-link.is-active,
.sidebar-favorite-link.is-active {
    background: rgba(37, 99, 235, 0.22) !important;
    border-color: rgba(96, 165, 250, 0.28) !important;
    color: #ffffff !important;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

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

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

.sidebar-group-block {
    margin-bottom: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    overflow: hidden;
}

.sidebar-parent-label {
    padding: 12px 12px !important;
    color: #f8fafc !important;
    font-weight: 700 !important;
}

.sidebar-parent-main {
    gap: 10px !important;
}

.sidebar-parent-label i,
.sidebar-accordion-icon {
    color: rgba(226, 232, 240, 0.86) !important;
}

.sidebar-accordion-body {
    padding: 0 8px 8px !important;
}

.nav-item-link.nav-sub-item {
    min-height: 40px;
    margin-top: 4px;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: rgba(226, 232, 240, 0.8) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.nav-item-link.nav-sub-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.nav-item-link.nav-sub-item.active {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(96, 165, 250, 0.2) !important;
}

.sidebar-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.user-pill,
.logout-link {
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

.content-shell {
    min-height: calc(100vh - 32px) !important;
    padding: 20px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .content-shell {
    background: var(--surface-strong) !important;
    border-color: rgba(148, 163, 184, 0.14) !important;
}

.content-shell::before,
.hero-panel::after,
.homepage-summary-card::before,
.module-overview-card::before,
.manager-box::before {
    display: none !important;
    content: none !important;
}

.content-topbar {
    margin-bottom: 18px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 16px !important;
    background: var(--surface-soft) !important;
    box-shadow: none !important;
}

.page-kicker {
    color: var(--muted) !important;
    letter-spacing: 0.12em !important;
    font-size: 0.7rem !important;
}

.page-heading {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

.topbar-meta {
    gap: 10px !important;
}

.topbar-chip,
.theme-toggle {
    border-radius: 999px !important;
    box-shadow: none !important;
}

.page-flow-shell,
.workspace-nav-shell,
.workspace-fold,
.hero-panel,
.table-wrap,
.form-card,
.chart-card,
.mini-card,
.manager-box,
.card,
.notification-panel,
.manager-panel,
.homepage-kpi-card,
.homepage-summary-card,
.homepage-rail-card,
.homepage-summary-rail-item,
.module-overview-card,
.accounting-panel,
.notification-box,
.task-detail-card,
.task-comment-card,
.vehicle-section-card,
.ai-center-launch-card,
.ai-center-operation-card,
.ai-center-bundle-card,
.ai-center-list-card,
.ai-center-scenario-card,
.ai-assistant-status-card {
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .page-flow-shell,
html[data-theme="dark"] .workspace-nav-shell,
html[data-theme="dark"] .workspace-fold,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .manager-box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .manager-panel,
html[data-theme="dark"] .homepage-kpi-card,
html[data-theme="dark"] .homepage-summary-card,
html[data-theme="dark"] .homepage-rail-card,
html[data-theme="dark"] .homepage-summary-rail-item,
html[data-theme="dark"] .module-overview-card,
html[data-theme="dark"] .accounting-panel,
html[data-theme="dark"] .notification-box,
html[data-theme="dark"] .task-detail-card,
html[data-theme="dark"] .task-comment-card,
html[data-theme="dark"] .vehicle-section-card,
html[data-theme="dark"] .ai-center-launch-card,
html[data-theme="dark"] .ai-center-operation-card,
html[data-theme="dark"] .ai-center-bundle-card,
html[data-theme="dark"] .ai-center-list-card,
html[data-theme="dark"] .ai-center-scenario-card,
html[data-theme="dark"] .ai-assistant-status-card {
    background: var(--surface-strong) !important;
}

.table-wrap,
.form-card,
.chart-card,
.mini-card,
.manager-box,
.accounting-panel {
    padding: 18px !important;
}

.table-wrap h5,
.form-card h5,
.chart-card h5,
.mini-card h5,
.manager-box h5,
.workspace-fold-head strong {
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.workspace-fold summary,
.workspace-nav-shell,
.page-flow-head {
    background: var(--surface-soft) !important;
}

.page-flow-mode,
.page-flow-btn,
.workspace-nav-link,
.btn,
.badge,
.summary-compact-toggle,
.workspace-fold-badge {
    box-shadow: none !important;
}

.btn,
.page-flow-mode,
.page-flow-btn,
.workspace-fold-badge,
.summary-compact-toggle {
    border-radius: 12px !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: #f2f6fb;
}

html[data-theme="dark"] .table {
    --bs-table-striped-bg: rgba(148, 163, 184, 0.06);
    --bs-table-hover-bg: rgba(148, 163, 184, 0.08);
}

.table thead th {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted) !important;
    border-bottom-width: 1px !important;
}

.table tbody td {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    vertical-align: middle !important;
}

.homepage-command-hero,
.homepage-kpi-card,
.homepage-summary-card,
.homepage-rail-card,
.homepage-summary-rail-item {
    min-height: auto !important;
}

@media (max-width: 991.98px) {
    .app-layout {
        padding: 10px !important;
    }

    .sidebar-column {
        min-width: 100% !important;
    }

    .sidebar-panel,
    .content-shell {
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* Ornek dashboard kabugu */
.sidebar-highlight {
    display: none !important;
}

.sidebar-favorites {
    display: none !important;
}

.sidebar-launchpad.sidebar-launchpad-compact {
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.sidebar-launchpad-head {
    margin-bottom: 8px;
}

.sidebar-launchpad-grid.sidebar-launchpad-grid-compact {
    gap: 8px !important;
}

.sidebar-launchpad-link {
    min-height: 52px !important;
    padding: 10px 10px !important;
    grid-template-columns: 18px 1fr;
    align-items: center;
    gap: 10px !important;
}

.sidebar-launchpad-link i {
    font-size: 0.9rem !important;
}

.sidebar-launchpad-link span {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

.sidebar-nav {
    margin-top: 6px;
}

.sidebar-group-block {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 2px !important;
}

.sidebar-parent-label {
    padding: 10px 8px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.sidebar-accordion-item[open] > .sidebar-parent-label,
.sidebar-parent-label:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.sidebar-accordion-body {
    padding: 0 0 6px 0 !important;
}

.nav-item-link.nav-sub-item {
    min-height: 36px !important;
    margin-top: 2px !important;
    padding: 8px 10px 8px 36px !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
}

.nav-item-link.nav-sub-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: transparent !important;
}

.content-topbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(340px, 640px);
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

.content-topbar > div:first-child {
    min-width: 0;
}

.topbar-meta {
    justify-content: flex-end;
    align-items: center;
    gap: 10px !important;
}

.topbar-meta > form.d-flex.align-items-center.gap-2 {
    flex: 1 1 420px;
    max-width: 520px;
    min-width: 280px;
    margin-left: auto;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: #f8fafc;
    gap: 8px !important;
}

.topbar-meta > form.d-flex.align-items-center.gap-2 .form-control {
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 4px !important;
}

.topbar-meta > form.d-flex.align-items-center.gap-2 .btn {
    min-height: 34px !important;
    padding: 0.45rem 0.8rem !important;
    border-radius: 999px !important;
}

.topbar-meta > a.btn,
.topbar-meta > .theme-toggle,
.topbar-meta > .topbar-chip {
    min-height: 38px !important;
}

.page-kicker {
    margin-bottom: 4px !important;
}

.page-heading {
    font-size: 1.75rem !important;
}

.hero-panel {
    padding: 22px 24px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: var(--text) !important;
}

.hero-panel .hero-badge {
    background: #eef2ff !important;
    color: #3730a3 !important;
}

.homepage-kpi-card,
.homepage-summary-card,
.module-overview-card,
.manager-box,
.mini-card,
.table-wrap,
.form-card,
.chart-card {
    border-radius: 16px !important;
}

.homepage-kpi-card,
.homepage-summary-card,
.module-overview-card {
    border-top-width: 3px !important;
}

.page-index .homepage-kpi-card:nth-of-type(6n + 1),
.page-index .homepage-summary-card:nth-of-type(6n + 1),
.page-index .module-overview-card:nth-of-type(6n + 1) {
    border-top-color: #22c55e !important;
}

.page-index .homepage-kpi-card:nth-of-type(6n + 2),
.page-index .homepage-summary-card:nth-of-type(6n + 2),
.page-index .module-overview-card:nth-of-type(6n + 2) {
    border-top-color: #ef4444 !important;
}

.page-index .homepage-kpi-card:nth-of-type(6n + 3),
.page-index .homepage-summary-card:nth-of-type(6n + 3),
.page-index .module-overview-card:nth-of-type(6n + 3) {
    border-top-color: #84cc16 !important;
}

.page-index .homepage-kpi-card:nth-of-type(6n + 4),
.page-index .homepage-summary-card:nth-of-type(6n + 4),
.page-index .module-overview-card:nth-of-type(6n + 4) {
    border-top-color: #3b82f6 !important;
}

.page-index .homepage-kpi-card:nth-of-type(6n + 5),
.page-index .homepage-summary-card:nth-of-type(6n + 5),
.page-index .module-overview-card:nth-of-type(6n + 5) {
    border-top-color: #a855f7 !important;
}

.page-index .homepage-kpi-card:nth-of-type(6n + 6),
.page-index .homepage-summary-card:nth-of-type(6n + 6),
.page-index .module-overview-card:nth-of-type(6n + 6) {
    border-top-color: #06b6d4 !important;
}

.page-flow-shell,
.workspace-nav-shell {
    padding: 12px 14px !important;
    border-radius: 14px !important;
}

.workspace-fold summary {
    padding: 12px 14px !important;
}

.table-wrap .table,
.chart-card canvas {
    margin-top: 6px;
}

@media (max-width: 1200px) {
    .content-topbar {
        grid-template-columns: 1fr !important;
    }

    .topbar-meta {
        justify-content: stretch;
    }

    .topbar-meta > form.d-flex.align-items-center.gap-2 {
        max-width: none;
        width: 100%;
        margin-left: 0;
    }
}

/* Gercek yerlesim sadeleştirme */
.page-index .homepage-root-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 18px !important;
}

.page-index .homepage-custom-shell {
    display: flex;
    flex-direction: column;
}

.page-index .homepage-layout-editor-bar {
    display: none !important;
}

.page-index .homepage-manager-toolbar {
    order: -29;
}

.page-index .homepage-inline-editor {
    order: -29;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
    padding: 8px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(255,255,255,0.98));
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.page-index .homepage-today-strip {
    order: 10;
}

.page-index .homepage-inline-detail {
    margin-bottom: 0;
    min-height: 0;
    border-radius: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.page-index .homepage-inline-detail[open] {
    grid-column: 1 / -1;
}

.page-index .homepage-inline-summary {
    padding: 8px 10px;
    min-height: 42px;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    box-shadow: inset 0 -1px 0 rgba(226, 232, 240, 0.75);
    text-align: center;
}

.page-index .homepage-inline-summary strong {
    font-size: 0.82rem;
    line-height: 1.2;
}

.page-index .homepage-inline-detail-body {
    margin-top: 8px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(191, 219, 254, 0.75);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.98));
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.06);
}

.page-index .homepage-inline-detail[open] .homepage-inline-summary {
    border-color: rgba(59, 130, 246, 0.34);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.10);
}

.page-index .homepage-inline-editor::after {
    display: none;
}

.page-index .homepage-inline-detail[open] .homepage-inline-summary {
    position: relative;
    z-index: 2;
}

.page-index .homepage-inline-detail[open] .homepage-inline-summary::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -7px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.page-index .homepage-inline-detail-body .form-label {
    font-size: 0.74rem;
    margin-bottom: 4px;
}

.page-index .homepage-inline-detail-body .btn {
    min-height: 34px;
}

.page-index .homepage-widget-action-row {
    padding: 10px 12px;
    border-radius: 14px;
}

.page-index .homepage-widget-action-info strong {
    font-size: 0.9rem;
}

.page-index .homepage-widget-action-info .text-muted,
.page-index .homepage-widget-action-info .dashboard-widget-visibility {
    font-size: 0.72rem !important;
}

.page-index #dashboardWidgetCanvas > [data-widget-key] {
    position: relative;
}

.page-index .dashboard-live-widget {
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.page-index .dashboard-live-widget.is-dragging {
    opacity: 0.72;
    transform: scale(0.992);
}

.page-index .dashboard-live-drag-handle {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #475569;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}

.page-index .dashboard-live-drag-handle:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.layout-edit-toggle {
    position: fixed;
    right: 24px;
    bottom: 148px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    color: #0f172a;
    padding: 8px 11px;
    min-height: 38px;
    font-size: 0.78rem;
    font-weight: 700;
}

.layout-edit-toggle.is-active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border-color: rgba(37, 99, 235, 0.92);
}

.layout-edit-toggle i {
    font-size: 0.82rem;
}

.dashboard-live-drag-handle,
.live-section-drag-handle {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

body.layout-edit-mode .dashboard-live-drag-handle,
body.layout-edit-mode .live-section-drag-handle {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

body.layout-edit-mode .dashboard-live-widget,
body.layout-edit-mode .live-section-draggable {
    outline: 1px dashed rgba(37, 99, 235, 0.28);
    outline-offset: 3px;
}

#taskSectionCanvas > [data-section-key],
#serviceSectionCanvas > [data-section-key],
#messagesSectionCanvas > [data-section-key],
#notificationSectionCanvas > [data-section-key] {
    position: relative;
}

.live-section-draggable {
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.live-section-draggable.is-dragging {
    opacity: 0.72;
    transform: scale(0.992);
}

.live-section-drag-handle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 8;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #475569;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}

.live-section-drag-handle:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

@media (max-width: 991px) {
    .page-index .homepage-inline-editor {
        grid-template-columns: 1fr;
    }

    .page-index .homepage-inline-detail[open] {
        grid-column: auto;
    }
}

.page-index .homepage-root-aside {
    display: none !important;
}

.page-index .homepage-root-main {
    min-width: 0;
}

.page-index .homepage-command-hero {
    padding: 20px 22px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.page-index .homepage-command-actions {
    gap: 10px !important;
    margin-top: 14px !important;
}

.page-index .homepage-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.page-index .homepage-kpi-card {
    min-height: 118px !important;
    padding: 16px 16px 14px !important;
}

.page-index .homepage-start-centers,
.page-index .homepage-ai-priority,
.page-index .homepage-today-strip {
    padding: 14px 16px !important;
    border-radius: 16px !important;
}

.page-index .homepage-start-centers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.page-index .homepage-start-center,
.page-index .homepage-ai-priority-card,
.page-index .homepage-today-strip-item {
    min-height: 110px !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
}

.page-index #dashboardWidgetCanvas {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.page-index #dashboardWidgetCanvas > [data-widget-key] {
    margin: 0 !important;
}

.page-index #widget-top_strip,
.page-index #widget-manager,
.page-index #widget-record_safety {
    grid-column: 1 / -1;
}

.page-index #widget-notifications,
.page-index #widget-finance_alerts,
.page-index #widget-stock_alarm,
.page-index #widget-vehicle_alerts,
.page-index #widget-instruments {
    grid-column: 2;
}

.page-index #widget-stats,
.page-index #widget-modules,
.page-index #widget-charts,
.page-index #widget-tasks,
.page-index #widget-approvals,
.page-index #widget-personnel_performance {
    grid-column: 1;
}

.page-index .dashboard-widget-panel,
.page-index .homepage-side-panel {
    display: none !important;
}

.page-index .homepage-top-strip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.page-index .homepage-top-kpi {
    min-height: 96px;
    border-radius: 14px !important;
    padding: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    background: #ffffff !important;
}

.page-accounting .hero-panel.section-overview {
    padding: 18px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px !important;
    align-items: start !important;
}

.page-accounting .hero-panel.section-overview .hero-badges {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 10px !important;
    align-content: start;
}

.page-accounting .hero-panel.section-overview .hero-badge {
    justify-content: flex-start !important;
    min-height: 42px;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    color: var(--text) !important;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-accounting .accounting-row[data-section-key="summary_primary"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
}

.page-accounting .accounting-row[data-section-key="summary_primary"] > div {
    width: auto !important;
}

.page-accounting .accounting-row[data-section-key="summary_secondary"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
}

.page-accounting .accounting-row[data-section-key="summary_secondary"] > div {
    width: auto !important;
}

.page-accounting .accounting-overview-card,
.page-accounting .accounting-overview-card-sm {
    min-height: 112px !important;
    padding: 16px !important;
    border-radius: 14px !important;
}

.page-accounting .accounting-overview-card strong,
.page-accounting .accounting-overview-card-sm strong {
    font-size: 1.5rem !important;
}

.page-accounting .accounting-tab-link {
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

.page-accounting .accounting-row[data-section-key="daily_document_alerts"] {
    align-items: stretch;
}

@media (max-width: 1399px) {
    .page-index .homepage-kpi-grid,
    .page-index .homepage-start-centers-grid,
    .page-index .homepage-top-strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-index #dashboardWidgetCanvas {
        grid-template-columns: 1fr !important;
    }

    .page-index #widget-notifications,
    .page-index #widget-finance_alerts,
    .page-index #widget-stock_alarm,
    .page-index #widget-vehicle_alerts,
    .page-index #widget-instruments,
    .page-index #widget-stats,
    .page-index #widget-modules,
    .page-index #widget-charts,
    .page-index #widget-tasks,
    .page-index #widget-approvals,
    .page-index #widget-personnel_performance {
        grid-column: auto;
    }

    .page-accounting .hero-panel.section-overview,
    .page-accounting .accounting-row[data-section-key="summary_primary"],
    .page-accounting .accounting-row[data-section-key="summary_secondary"] {
        grid-template-columns: 1fr !important;
    }

    .page-accounting .hero-panel.section-overview .hero-badges {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Sert ilk görünüm sadeleştirmesi */
.page-index #widget-hero,
.page-index #widget-personal_workspace,
.page-index #widget-manager,
.page-index #widget-record_safety,
.page-index #widget-stock_alarm,
.page-index #widget-vehicle_alerts,
.page-index #widget-instruments,
.page-index #widget-personnel_performance,
.page-index #widget-approvals,
.page-index #widget-charts {
    display: none !important;
}

.page-index #widget-focus,
.page-index #widget-notifications,
.page-index #widget-finance_alerts,
.page-index #widget-tasks,
.page-index #widget-modules,
.page-index #widget-stats,
.page-index #widget-stock_table {
    grid-column: auto !important;
}

.page-accounting [data-section-key="summary_secondary"],
.page-accounting [data-section-key="daily_document_alerts"],
.page-accounting [data-section-key="quality_ai_tip"],
.page-accounting [data-section-key="quality_score"],
.page-accounting [data-section-key="quality_risks"],
.page-accounting [data-section-key="quality_lists"],
.page-accounting [data-section-key="cash_view_tabs"],
.page-accounting [data-section-key="cash_day_end_summary"],
.page-accounting [data-section-key="cash_daily_flow"],
.page-accounting [data-section-key="cash_transfer_reports"],
.page-accounting [data-section-key="cash_transfer_statement"],
.page-accounting [data-section-key="cash_statement"],
.page-accounting [data-section-key="cash_transfer_history"],
.page-accounting [data-section-key="cash_movements"],
.page-accounting [data-section-key="cash_count_summary"],
.page-accounting [data-section-key="contract_deductions"],
.page-accounting [data-section-key="contract_advances"],
.page-accounting [data-section-key="fixed_forms"],
.page-accounting [data-section-key="partner_lists"] {
    display: none !important;
}

.page-accounting [data-section-key="transaction_workspace"],
.page-accounting [data-section-key="transaction_list"],
.page-accounting [data-section-key="cash_workspace"],
.page-accounting [data-section-key="cash_accounts"],
.page-accounting [data-section-key="cash_transfers"],
.page-accounting [data-section-key="invoice_open"],
.page-accounting [data-section-key="invoice_summary"],
.page-accounting [data-section-key="contract_summary"],
.page-accounting [data-section-key="contract_lists"],
.page-accounting [data-section-key="fixed_summary"],
.page-accounting [data-section-key="fixed_lists"] {
    display: block !important;
}

/* Sidebar stabilizasyon */
.sidebar-highlight,
.sidebar-launchpad,
.sidebar-favorites {
    display: none !important;
}

.sidebar-panel {
    gap: 10px !important;
}

.sidebar-nav {
    display: block !important;
    overflow-y: auto !important;
    padding-top: 4px !important;
}

.sidebar-accordion-item {
    display: block !important;
}

.sidebar-parent-label,
.sidebar-accordion-body,
.sidebar-nav .nav-item-link,
.sidebar-nav .nav-sub-item {
    visibility: visible !important;
    opacity: 1 !important;
}

.sidebar-parent-label {
    padding: 10px 10px !important;
}

.sidebar-accordion-item[open] > .sidebar-accordion-body {
    display: block !important;
}

.sidebar-footer {
    margin-top: auto !important;
}

/* Sidebar sabit, icerik sade */
.page-index .homepage-static-overview .row.g-4.align-items-stretch {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
    gap: 14px !important;
    align-items: stretch !important;
}

.page-index .homepage-static-overview .col-xl-8,
.page-index .homepage-static-overview .col-xl-4 {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

.page-index .homepage-focus-panel {
    padding: 14px 16px !important;
    border-radius: 16px !important;
}

.page-index .homepage-focus-panel .row.g-3 {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
}

.page-index .homepage-summary-card {
    min-height: 104px !important;
    padding: 14px !important;
}

.page-index .homepage-summary-card .summary-card-icon {
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 8px !important;
}

.page-index .homepage-summary-card strong {
    font-size: 1rem !important;
    line-height: 1.25 !important;
}

.page-index .homepage-summary-card span:last-child {
    font-size: 0.82rem !important;
}

.page-index .ai-daily-summary-card {
    min-height: auto !important;
}

.page-index .homepage-action-grid {
    gap: 10px !important;
}

.page-index .homepage-action-chip {
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
}

.page-index .homepage-top-alerts {
    display: none !important;
}

.page-index #widget-focus .manager-grid,
.page-index #widget-notifications .manager-grid,
.page-index #widget-finance_alerts .manager-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.page-index #widget-focus .manager-box,
.page-index #widget-notifications .manager-box,
.page-index #widget-finance_alerts .manager-box {
    min-height: 110px !important;
    padding: 14px !important;
}

.page-index #widget-modules .row.g-4,
.page-index #widget-stock_table .row.g-4,
.page-index #widget-stats.row.g-3 {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
}

.page-index #widget-stats .stat-card,
.page-index #widget-modules .module-overview-card,
.page-index #widget-stock_table .table-wrap,
.page-index #widget-tasks .table-wrap {
    min-height: auto !important;
}

.page-accounting #accountingSectionCanvas {
    display: grid;
    gap: 14px;
}

.page-accounting .section-overview,
.page-accounting .section-gelir-gider,
.page-accounting .section-kasa-banka,
.page-accounting .section-faturalar,
.page-accounting .section-harici-eleman,
.page-accounting .section-sabit-eleman {
    margin-bottom: 0 !important;
}

.page-accounting .accounting-row,
.page-accounting .accounting-panel,
.page-accounting .table-wrap,
.page-accounting .form-card {
    margin-bottom: 0 !important;
}

.page-accounting .accounting-tab-link {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    color: var(--muted) !important;
}

.page-accounting .accounting-tab-link.active {
    background: #eff6ff !important;
    border-color: rgba(59, 130, 246, 0.24) !important;
    color: #1d4ed8 !important;
}

.page-accounting [data-section-key="compact_finance_focus"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
}

.page-accounting [data-section-key="compact_finance_focus"] > div {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

.page-accounting [data-section-key="cash_accounts"],
.page-accounting [data-section-key="invoice_summary"],
.page-accounting [data-section-key="contract_summary"],
.page-accounting [data-section-key="fixed_summary"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
}

.page-accounting [data-section-key="cash_accounts"] > div,
.page-accounting [data-section-key="invoice_summary"] > div,
.page-accounting [data-section-key="contract_summary"] > div,
.page-accounting [data-section-key="fixed_summary"] > div {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

.page-accounting [data-section-key="transaction_workspace"],
.page-accounting [data-section-key="cash_workspace"],
.page-accounting [data-section-key="invoice_open"] {
    padding: 16px !important;
}

.page-accounting [data-section-key="transaction_list"],
.page-accounting [data-section-key="contract_lists"],
.page-accounting [data-section-key="fixed_lists"] {
    padding: 16px !important;
}

@media (max-width: 1199px) {
    .page-index .homepage-static-overview .row.g-4.align-items-stretch,
    .page-accounting [data-section-key="compact_finance_focus"],
    .page-accounting [data-section-key="cash_accounts"],
    .page-accounting [data-section-key="invoice_summary"],
    .page-accounting [data-section-key="contract_summary"],
    .page-accounting [data-section-key="fixed_summary"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .page-index .homepage-static-overview .row.g-4.align-items-stretch,
    .page-index #widget-focus .manager-grid,
    .page-index #widget-notifications .manager-grid,
    .page-index #widget-finance_alerts .manager-grid,
    .page-accounting [data-section-key="compact_finance_focus"],
    .page-accounting [data-section-key="cash_accounts"],
    .page-accounting [data-section-key="invoice_summary"],
    .page-accounting [data-section-key="contract_summary"],
    .page-accounting [data-section-key="fixed_summary"] {
        grid-template-columns: 1fr !important;
    }
}

/* Dikey kart akisi */
.page-index .homepage-kpi-grid,
.page-index .homepage-start-centers-grid,
.page-index .homepage-ai-priority-grid,
.page-index .homepage-today-strip-grid,
.page-index #widget-focus .manager-grid,
.page-index #widget-notifications .manager-grid,
.page-index #widget-finance_alerts .manager-grid,
.page-index #widget-modules .module-overview-grid,
.page-index #dashboardWidgetCanvas .manager-grid,
.page-index #dashboardWidgetCanvas .notification-grid,
.page-index #dashboardWidgetCanvas .vehicle-alert-grid,
.page-index #dashboardWidgetCanvas .module-overview-grid,
.page-accounting [data-section-key="summary_primary"],
.page-accounting [data-section-key="summary_secondary"],
.page-accounting [data-section-key="compact_finance_focus"],
.page-accounting [data-section-key="cash_accounts"],
.page-accounting [data-section-key="invoice_summary"],
.page-accounting [data-section-key="contract_summary"],
.page-accounting [data-section-key="fixed_summary"] {
    grid-template-columns: 1fr !important;
}

.page-index .homepage-static-overview .row.g-4.align-items-stretch,
.page-index #dashboardWidgetCanvas {
    grid-template-columns: 1fr !important;
}

.page-index .homepage-summary-card,
.page-index .homepage-kpi-card,
.page-index .homepage-start-center,
.page-index .homepage-ai-priority-card,
.page-index .homepage-today-strip-item,
.page-index .manager-box,
.page-index .module-overview-card,
.page-accounting .accounting-overview-card,
.page-accounting .accounting-overview-card-sm {
    width: 100% !important;
    min-height: auto !important;
}

.page-index .homepage-root-main,
.page-accounting #accountingSectionCanvas {
    display: grid;
    gap: 14px;
}

/* Dengeleme: tek kolon yerine kontrollu iki kolon */
.page-index .homepage-kpi-grid,
.page-index .homepage-start-centers-grid,
.page-index .homepage-ai-priority-grid,
.page-index .homepage-today-strip-grid,
.page-index #widget-focus .manager-grid,
.page-index #widget-notifications .manager-grid,
.page-index #widget-finance_alerts .manager-grid,
.page-index #widget-modules .module-overview-grid,
.page-index #dashboardWidgetCanvas .manager-grid,
.page-index #dashboardWidgetCanvas .notification-grid,
.page-index #dashboardWidgetCanvas .vehicle-alert-grid,
.page-index #dashboardWidgetCanvas .module-overview-grid,
.page-accounting [data-section-key="summary_primary"],
.page-accounting [data-section-key="summary_secondary"],
.page-accounting [data-section-key="compact_finance_focus"],
.page-accounting [data-section-key="cash_accounts"],
.page-accounting [data-section-key="invoice_summary"],
.page-accounting [data-section-key="contract_summary"],
.page-accounting [data-section-key="fixed_summary"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-index .homepage-static-overview .row.g-4.align-items-stretch {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-index #dashboardWidgetCanvas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.page-index #widget-top_strip,
.page-index #widget-focus,
.page-index #widget-notifications,
.page-index #widget-finance_alerts,
.page-index #widget-tasks,
.page-index #widget-modules,
.page-index #widget-stats,
.page-index #widget-stock_table,
.page-accounting [data-section-key="transaction_workspace"],
.page-accounting [data-section-key="transaction_list"],
.page-accounting [data-section-key="cash_workspace"],
.page-accounting [data-section-key="invoice_open"],
.page-accounting [data-section-key="contract_lists"],
.page-accounting [data-section-key="fixed_lists"] {
    grid-column: span 2 !important;
}

@media (max-width: 991.98px) {
    .page-index .homepage-kpi-grid,
    .page-index .homepage-start-centers-grid,
    .page-index .homepage-ai-priority-grid,
    .page-index .homepage-today-strip-grid,
    .page-index #widget-focus .manager-grid,
    .page-index #widget-notifications .manager-grid,
    .page-index #widget-finance_alerts .manager-grid,
    .page-index #widget-modules .module-overview-grid,
    .page-index #dashboardWidgetCanvas,
    .page-index #dashboardWidgetCanvas .manager-grid,
    .page-index #dashboardWidgetCanvas .notification-grid,
    .page-index #dashboardWidgetCanvas .vehicle-alert-grid,
    .page-index #dashboardWidgetCanvas .module-overview-grid,
    .page-accounting [data-section-key="summary_primary"],
    .page-accounting [data-section-key="summary_secondary"],
    .page-accounting [data-section-key="compact_finance_focus"],
    .page-accounting [data-section-key="cash_accounts"],
    .page-accounting [data-section-key="invoice_summary"],
    .page-accounting [data-section-key="contract_summary"],
    .page-accounting [data-section-key="fixed_summary"],
    .page-index .homepage-static-overview .row.g-4.align-items-stretch {
        grid-template-columns: 1fr !important;
    }

    .page-index #widget-top_strip,
    .page-index #widget-focus,
    .page-index #widget-notifications,
    .page-index #widget-finance_alerts,
    .page-index #widget-tasks,
    .page-index #widget-modules,
    .page-index #widget-stats,
    .page-index #widget-stock_table,
    .page-accounting [data-section-key="transaction_workspace"],
    .page-accounting [data-section-key="transaction_list"],
    .page-accounting [data-section-key="cash_workspace"],
    .page-accounting [data-section-key="invoice_open"],
    .page-accounting [data-section-key="contract_lists"],
    .page-accounting [data-section-key="fixed_lists"] {
        grid-column: auto !important;
    }
}

/* Yatay kayit ve bilgilendirme akisi */
.notification-panel .manager-grid,
.manager-panel .manager-grid,
.vehicle-alert-panel .vehicle-alert-grid,
.stock-alarm-panel .manager-grid,
#dashboardWidgetCanvas .notification-grid,
#dashboardWidgetCanvas .manager-grid,
#dashboardWidgetCanvas .vehicle-alert-grid,
#dashboardWidgetCanvas .module-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.form-card form,
.accounting-panel form,
.table-wrap form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: end;
}

.form-card form > .mb-2,
.form-card form > .mb-3,
.form-card form > .mb-4,
.accounting-panel form > .mb-2,
.accounting-panel form > .mb-3,
.accounting-panel form > .mb-4,
.table-wrap form > .mb-2,
.table-wrap form > .mb-3,
.table-wrap form > .mb-4,
.form-card form > .row,
.accounting-panel form > .row,
.table-wrap form > .row,
.form-card form > .mini-card,
.accounting-panel form > .mini-card,
.table-wrap form > .mini-card,
.form-card form > .alert,
.accounting-panel form > .alert,
.table-wrap form > .alert,
.form-card form > .d-flex,
.accounting-panel form > .d-flex,
.table-wrap form > .d-flex {
    margin-bottom: 0 !important;
}

.form-card form > .row,
.accounting-panel form > .row,
.table-wrap form > .row,
.form-card form > .mini-card,
.accounting-panel form > .mini-card,
.table-wrap form > .mini-card,
.form-card form > .alert,
.accounting-panel form > .alert,
.table-wrap form > .alert,
.form-card form > .d-flex.justify-content-end,
.accounting-panel form > .d-flex.justify-content-end,
.table-wrap form > .d-flex.justify-content-end,
.form-card form > button,
.accounting-panel form > button,
.table-wrap form > button {
    grid-column: 1 / -1;
}

.form-card .form-label,
.accounting-panel .form-label,
.table-wrap .form-label {
    display: block;
    font-size: 0.82rem !important;
    margin-bottom: 0.3rem !important;
}

.form-card .form-control,
.form-card .form-select,
.accounting-panel .form-control,
.accounting-panel .form-select,
.table-wrap .form-control,
.table-wrap .form-select {
    min-height: 42px;
}

.page-accounting .accounting-primary-form-card form,
.page-accounting .section-faturalar .form-card form,
.page-accounting .section-kasa-banka .form-card form,
.page-accounting .section-harici-eleman .form-card form,
.page-accounting .section-sabit-eleman .form-card form,
.page-accounting .section-ortak-cekisleri .form-card form,
.page-accounting .section-kategori-yonetimi .form-card form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-accounting .accounting-form-col {
    align-self: stretch;
}

.page-accounting .accounting-form-col .form-card,
.page-accounting .accounting-form-col .accounting-panel {
    height: 100%;
}

.page-index .homepage-summary-card,
.page-index .homepage-ai-priority-card,
.page-index .homepage-today-strip-item,
.page-index .manager-box,
.page-index .module-overview-card {
    display: grid !important;
    align-content: start;
    gap: 6px;
}

.page-index .homepage-start-centers-head,
.page-index .homepage-manager-toolbar,
.page-index .homepage-focus-panel > .d-flex:first-child,
.page-index .notification-panel > .d-flex:first-child,
.page-index .manager-panel > .d-flex:first-child {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.page-accounting .table-wrap > .d-flex:first-child,
.page-accounting .accounting-panel > .d-flex:first-child,
.page-index .table-wrap > .d-flex:first-child,
.page-index .notification-panel > .d-flex:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center !important;
}

@media (max-width: 1199px) {
    .notification-panel .manager-grid,
    .manager-panel .manager-grid,
    .vehicle-alert-panel .vehicle-alert-grid,
    .stock-alarm-panel .manager-grid,
    #dashboardWidgetCanvas .notification-grid,
    #dashboardWidgetCanvas .manager-grid,
    #dashboardWidgetCanvas .vehicle-alert-grid,
    #dashboardWidgetCanvas .module-overview-grid,
    .page-accounting .accounting-primary-form-card form,
    .page-accounting .section-faturalar .form-card form,
    .page-accounting .section-kasa-banka .form-card form,
    .page-accounting .section-harici-eleman .form-card form,
    .page-accounting .section-sabit-eleman .form-card form,
    .page-accounting .section-ortak-cekisleri .form-card form,
    .page-accounting .section-kategori-yonetimi .form-card form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .notification-panel .manager-grid,
    .manager-panel .manager-grid,
    .vehicle-alert-panel .vehicle-alert-grid,
    .stock-alarm-panel .manager-grid,
    #dashboardWidgetCanvas .notification-grid,
    #dashboardWidgetCanvas .manager-grid,
    #dashboardWidgetCanvas .vehicle-alert-grid,
    #dashboardWidgetCanvas .module-overview-grid,
    .form-card form,
    .accounting-panel form,
    .table-wrap form,
    .page-accounting .accounting-primary-form-card form,
    .page-accounting .section-faturalar .form-card form,
    .page-accounting .section-kasa-banka .form-card form,
    .page-accounting .section-harici-eleman .form-card form,
    .page-accounting .section-sabit-eleman .form-card form,
    .page-accounting .section-ortak-cekisleri .form-card form,
    .page-accounting .section-kategori-yonetimi .form-card form {
        grid-template-columns: 1fr !important;
    }

    .page-accounting .table-wrap > .d-flex:first-child,
    .page-accounting .accounting-panel > .d-flex:first-child,
    .page-index .table-wrap > .d-flex:first-child,
    .page-index .notification-panel > .d-flex:first-child {
        grid-template-columns: 1fr !important;
    }
}

/* AI yardimciyi kucult ve kapanabilir davranisi daha rahat hissettir */
.ai-assistant-shell {
    right: 16px;
    bottom: 16px;
    width: min(350px, calc(100vw - 24px));
    gap: 8px;
}

.ai-assistant-toggle {
    padding: 10px 12px;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.ai-assistant-toggle-icon,
.ai-assistant-toggle-arrow {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.ai-assistant-toggle-copy strong {
    font-size: 0.92rem;
}

.ai-assistant-toggle-copy small {
    font-size: 0.72rem;
}

.ai-assistant-panel {
    border-radius: 22px;
    padding: 14px;
    max-height: min(72vh, 680px);
    overflow: auto;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16);
}

.ai-assistant-panel-header {
    margin-bottom: 10px;
    padding-bottom: 0.7rem;
}

.ai-assistant-panel-header h5 {
    font-size: 1rem;
}

.ai-assistant-header-btn,
.ai-assistant-close {
    min-height: 34px;
}

.ai-assistant-mode-row {
    top: 58px;
    margin-bottom: 10px;
    padding: 6px;
    border-radius: 16px;
}

.ai-assistant-mode {
    min-height: 40px;
    padding: 0.48rem 0.5rem;
}

.ai-assistant-messages {
    max-height: 240px;
    min-height: 180px;
}

/* Anasayfa kartlari icin gec gelen net override */
.page-index .homepage-kpi-card,
.page-index .homepage-summary-card,
.page-index .homepage-start-center,
.page-index .homepage-ai-priority-card,
.page-index .homepage-today-strip-item,
.page-index .manager-box,
.page-index .module-overview-card {
    position: relative;
    border: 1px solid rgba(30, 41, 59, 0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.11) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
    overflow: hidden;
}

.page-index .homepage-kpi-card::before,
.page-index .homepage-summary-card::before,
.page-index .homepage-start-center::before,
.page-index .homepage-ai-priority-card::before,
.page-index .homepage-today-strip-item::before,
.page-index .manager-box::before,
.page-index .module-overview-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #2563eb, #38bdf8);
}

.page-index .homepage-kpi-card:nth-of-type(4n + 2)::before,
.page-index .homepage-summary-card:nth-of-type(4n + 2)::before,
.page-index .homepage-start-center:nth-of-type(4n + 2)::before,
.page-index .homepage-ai-priority-card:nth-of-type(4n + 2)::before,
.page-index .homepage-today-strip-item:nth-of-type(4n + 2)::before,
.page-index .manager-box:nth-of-type(4n + 2)::before,
.page-index .module-overview-card:nth-of-type(4n + 2)::before {
    background: linear-gradient(180deg, #16a34a, #4ade80);
}

.page-index .homepage-kpi-card:nth-of-type(4n + 3)::before,
.page-index .homepage-summary-card:nth-of-type(4n + 3)::before,
.page-index .homepage-start-center:nth-of-type(4n + 3)::before,
.page-index .homepage-ai-priority-card:nth-of-type(4n + 3)::before,
.page-index .homepage-today-strip-item:nth-of-type(4n + 3)::before,
.page-index .manager-box:nth-of-type(4n + 3)::before,
.page-index .module-overview-card:nth-of-type(4n + 3)::before {
    background: linear-gradient(180deg, #ea580c, #fb923c);
}

.page-index .homepage-kpi-card:nth-of-type(4n + 4)::before,
.page-index .homepage-summary-card:nth-of-type(4n + 4)::before,
.page-index .homepage-start-center:nth-of-type(4n + 4)::before,
.page-index .homepage-ai-priority-card:nth-of-type(4n + 4)::before,
.page-index .homepage-today-strip-item:nth-of-type(4n + 4)::before,
.page-index .manager-box:nth-of-type(4n + 4)::before,
.page-index .module-overview-card:nth-of-type(4n + 4)::before {
    background: linear-gradient(180deg, #7c3aed, #c084fc);
}

.page-index .homepage-kpi-card:hover,
.page-index .homepage-summary-card:hover,
.page-index .homepage-start-center:hover,
.page-index .homepage-ai-priority-card:hover,
.page-index .homepage-today-strip-item:hover,
.page-index .manager-box:hover,
.page-index .module-overview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.14) !important;
}

/* Tum modullerde ortak kart ve panel dili */
.workspace-nav-shell,
.table-wrap,
.form-card,
.mini-card,
.manager-box,
.module-overview-card,
.notification-panel,
.manager-panel,
.vehicle-alert-panel,
.accounting-panel,
.task-detail-shell,
.service-detail-shell,
.task-detail-card,
.service-detail-card {
    position: relative;
    border: 1px solid rgba(30, 41, 59, 0.18) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09) !important;
    overflow: hidden;
}

.workspace-nav-shell::before,
.table-wrap::before,
.form-card::before,
.mini-card::before,
.manager-box::before,
.module-overview-card::before,
.notification-panel::before,
.manager-panel::before,
.vehicle-alert-panel::before,
.accounting-panel::before,
.task-detail-shell::before,
.service-detail-shell::before,
.task-detail-card::before,
.service-detail-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #2563eb, #38bdf8);
}

.page-accounting .mini-card:nth-of-type(4n + 2)::before,
.page-accounting .table-wrap:nth-of-type(4n + 2)::before,
.page-accounting .form-card:nth-of-type(4n + 2)::before,
.page-accounting .accounting-panel:nth-of-type(4n + 2)::before,
.page-tasks .table-wrap:nth-of-type(4n + 2)::before,
.page-service .table-wrap:nth-of-type(4n + 2)::before,
.page-messages .table-wrap:nth-of-type(4n + 2)::before,
.page-notifications .table-wrap:nth-of-type(4n + 2)::before,
.page-reports .table-wrap:nth-of-type(4n + 2)::before,
.page-vehicles .table-wrap:nth-of-type(4n + 2)::before,
.page-employees .table-wrap:nth-of-type(4n + 2)::before,
.page-purchase_orders .table-wrap:nth-of-type(4n + 2)::before,
.page-assignments .table-wrap:nth-of-type(4n + 2)::before,
.page-assignment_returns .table-wrap:nth-of-type(4n + 2)::before {
    background: linear-gradient(180deg, #16a34a, #4ade80);
}

.page-accounting .mini-card:nth-of-type(4n + 3)::before,
.page-accounting .table-wrap:nth-of-type(4n + 3)::before,
.page-accounting .form-card:nth-of-type(4n + 3)::before,
.page-accounting .accounting-panel:nth-of-type(4n + 3)::before,
.page-tasks .table-wrap:nth-of-type(4n + 3)::before,
.page-service .table-wrap:nth-of-type(4n + 3)::before,
.page-messages .table-wrap:nth-of-type(4n + 3)::before,
.page-notifications .table-wrap:nth-of-type(4n + 3)::before,
.page-reports .table-wrap:nth-of-type(4n + 3)::before,
.page-vehicles .table-wrap:nth-of-type(4n + 3)::before,
.page-employees .table-wrap:nth-of-type(4n + 3)::before,
.page-purchase_orders .table-wrap:nth-of-type(4n + 3)::before,
.page-assignments .table-wrap:nth-of-type(4n + 3)::before,
.page-assignment_returns .table-wrap:nth-of-type(4n + 3)::before {
    background: linear-gradient(180deg, #ea580c, #fb923c);
}

.page-accounting .mini-card:nth-of-type(4n + 4)::before,
.page-accounting .table-wrap:nth-of-type(4n + 4)::before,
.page-accounting .form-card:nth-of-type(4n + 4)::before,
.page-accounting .accounting-panel:nth-of-type(4n + 4)::before,
.page-tasks .table-wrap:nth-of-type(4n + 4)::before,
.page-service .table-wrap:nth-of-type(4n + 4)::before,
.page-messages .table-wrap:nth-of-type(4n + 4)::before,
.page-notifications .table-wrap:nth-of-type(4n + 4)::before,
.page-reports .table-wrap:nth-of-type(4n + 4)::before,
.page-vehicles .table-wrap:nth-of-type(4n + 4)::before,
.page-employees .table-wrap:nth-of-type(4n + 4)::before,
.page-purchase_orders .table-wrap:nth-of-type(4n + 4)::before,
.page-assignments .table-wrap:nth-of-type(4n + 4)::before,
.page-assignment_returns .table-wrap:nth-of-type(4n + 4)::before {
    background: linear-gradient(180deg, #7c3aed, #c084fc);
}

.workspace-nav-shell:hover,
.table-wrap:hover,
.form-card:hover,
.mini-card:hover,
.manager-box:hover,
.module-overview-card:hover,
.notification-panel:hover,
.manager-panel:hover,
.vehicle-alert-panel:hover,
.accounting-panel:hover,
.task-detail-shell:hover,
.service-detail-shell:hover,
.task-detail-card:hover,
.service-detail-card:hover {
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12) !important;
}

.table-wrap h5,
.form-card h5,
.mini-card h5,
.manager-box h5,
.accounting-panel h5,
.notification-panel h5,
.manager-panel h5,
.vehicle-alert-panel h5,
.task-detail-shell h5,
.service-detail-shell h5 {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

.table-wrap strong,
.form-card strong,
.mini-card strong,
.manager-box strong,
.module-overview-card strong,
.accounting-panel strong,
.notification-panel strong,
.manager-panel strong,
.vehicle-alert-panel strong,
.task-detail-shell strong,
.service-detail-shell strong {
    color: #111827 !important;
}

.table-wrap .text-muted,
.form-card .text-muted,
.mini-card .text-muted,
.manager-box span,
.module-overview-card span,
.accounting-panel .text-muted,
.notification-panel .text-muted,
.manager-panel .text-muted,
.vehicle-alert-panel .text-muted,
.task-detail-shell .text-muted,
.service-detail-shell .text-muted {
    color: #64748b !important;
}

.summary-card-icon {
    border: 1px solid rgba(37, 99, 235, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Ortak profesyonel baslik, buton ve tablo dili */
.page-kicker,
.workspace-nav-shell .page-kicker,
.table-wrap .page-kicker,
.form-card .page-kicker,
.accounting-panel .page-kicker {
    color: #475569 !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    font-size: 0.7rem !important;
}

.workspace-nav-shell h4,
.workspace-nav-shell h5,
.table-wrap h4,
.table-wrap h5,
.form-card h4,
.form-card h5,
.accounting-panel h4,
.accounting-panel h5,
.notification-panel h4,
.notification-panel h5,
.manager-panel h4,
.manager-panel h5,
.vehicle-alert-panel h4,
.vehicle-alert-panel h5 {
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
}

.btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    box-shadow: none !important;
}

.btn-primary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-light {
    min-height: 40px;
    padding: 0.62rem 0.9rem !important;
}

.btn-primary {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    border-color: #1d4ed8 !important;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #1d4ed8, #1e40af) !important;
    border-color: #1e40af !important;
}

.btn-outline-primary {
    border-color: rgba(37, 99, 235, 0.24) !important;
    color: #1d4ed8 !important;
    background: rgba(239, 246, 255, 0.72) !important;
}

.btn-outline-primary:hover {
    background: rgba(219, 234, 254, 0.92) !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    color: #1e40af !important;
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-light {
    border-color: rgba(148, 163, 184, 0.24) !important;
    color: #334155 !important;
    background: rgba(248, 250, 252, 0.94) !important;
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-light:hover {
    background: rgba(241, 245, 249, 0.98) !important;
    border-color: rgba(100, 116, 139, 0.32) !important;
    color: #0f172a !important;
}

.table-wrap .table,
.accounting-panel .table,
.notification-panel .table,
.manager-panel .table {
    margin-bottom: 0;
}

.table-wrap .table thead th,
.accounting-panel .table thead th,
.notification-panel .table thead th,
.manager-panel .table thead th {
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

.table-wrap .table tbody td,
.accounting-panel .table tbody td,
.notification-panel .table tbody td,
.manager-panel .table tbody td {
    color: #0f172a;
    border-color: rgba(226, 232, 240, 0.8) !important;
    vertical-align: middle;
    padding-top: 0.88rem !important;
    padding-bottom: 0.88rem !important;
}

.table-wrap .table tbody tr:hover td,
.accounting-panel .table tbody tr:hover td,
.notification-panel .table tbody tr:hover td,
.manager-panel .table tbody tr:hover td {
    background: rgba(248, 250, 252, 0.92);
}

/* Modul bazli renk karakteri */
.page-accounting,
.page-accounting .workspace-nav-shell,
.page-accounting .table-wrap,
.page-accounting .form-card,
.page-accounting .mini-card,
.page-accounting .accounting-panel,
.page-accounting .manager-box {
    --module-accent: #2563eb;
    --module-accent-soft: #eff6ff;
}

.page-tasks,
.page-tasks .workspace-nav-shell,
.page-tasks .table-wrap,
.page-tasks .form-card,
.page-tasks .mini-card,
.page-tasks .manager-box,
.page-tasks .task-detail-shell {
    --module-accent: #d97706;
    --module-accent-soft: #fffbeb;
}

.page-service,
.page-service .workspace-nav-shell,
.page-service .table-wrap,
.page-service .form-card,
.page-service .mini-card,
.page-service .manager-box,
.page-service .task-detail-shell {
    --module-accent: #0f766e;
    --module-accent-soft: #ecfeff;
}

.page-messages,
.page-messages .workspace-nav-shell,
.page-messages .table-wrap,
.page-messages .form-card,
.page-messages .mini-card,
.page-messages .manager-box {
    --module-accent: #7c3aed;
    --module-accent-soft: #faf5ff;
}

.page-notifications,
.page-notifications .workspace-nav-shell,
.page-notifications .table-wrap,
.page-notifications .form-card,
.page-notifications .mini-card,
.page-notifications .manager-box,
.page-notifications .notification-panel {
    --module-accent: #dc2626;
    --module-accent-soft: #fef2f2;
}

.messages-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1150;
}

.messages-preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px);
}

.messages-preview-modal-dialog {
    position: relative;
    width: min(920px, calc(100vw - 2rem));
    margin: 4vh auto;
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
    padding: 1.1rem;
}

.messages-preview-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.messages-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
}

.messages-preview-card {
    display: block;
    text-decoration: none;
}


.page-vehicles,
.page-vehicles .workspace-nav-shell,
.page-vehicles .table-wrap,
.page-vehicles .form-card,
.page-vehicles .mini-card,
.page-vehicles .manager-box {
    --module-accent: #0891b2;
    --module-accent-soft: #ecfeff;
}

.page-employees,
.page-employees .workspace-nav-shell,
.page-employees .table-wrap,
.page-employees .form-card,
.page-employees .mini-card,
.page-employees .manager-box {
    --module-accent: #16a34a;
    --module-accent-soft: #f0fdf4;
}

.page-reports,
.page-reports .workspace-nav-shell,
.page-reports .table-wrap,
.page-reports .form-card,
.page-reports .mini-card,
.page-reports .manager-box {
    --module-accent: #4f46e5;
    --module-accent-soft: #eef2ff;
}

.page-calendar,
.page-calendar .workspace-nav-shell,
.page-calendar .table-wrap,
.page-calendar .form-card,
.page-calendar .mini-card,
.page-calendar .manager-box {
    --module-accent: #0284c7;
    --module-accent-soft: #f0f9ff;
}

.page-purchase_orders,
.page-purchase_orders .workspace-nav-shell,
.page-purchase_orders .table-wrap,
.page-purchase_orders .form-card,
.page-purchase_orders .mini-card,
.page-purchase_orders .manager-box,
.page-assignments,
.page-assignments .workspace-nav-shell,
.page-assignments .table-wrap,
.page-assignments .form-card,
.page-assignments .mini-card,
.page-assignments .manager-box,
.page-assignment_returns,
.page-assignment_returns .workspace-nav-shell,
.page-assignment_returns .table-wrap,
.page-assignment_returns .form-card,
.page-assignment_returns .mini-card,
.page-assignment_returns .manager-box {
    --module-accent: #059669;
    --module-accent-soft: #ecfdf5;
}

.workspace-nav-shell::before,
.table-wrap::before,
.form-card::before,
.mini-card::before,
.manager-box::before,
.module-overview-card::before,
.notification-panel::before,
.manager-panel::before,
.vehicle-alert-panel::before,
.accounting-panel::before,
.task-detail-shell::before,
.service-detail-shell::before,
.task-detail-card::before,
.service-detail-card::before {
    background: linear-gradient(180deg, var(--module-accent, #2563eb), color-mix(in srgb, var(--module-accent, #2563eb) 62%, white)) !important;
}

.workspace-nav-shell,
.table-wrap,
.form-card,
.mini-card,
.manager-box,
.module-overview-card,
.notification-panel,
.manager-panel,
.vehicle-alert-panel,
.accounting-panel,
.task-detail-shell,
.service-detail-shell,
.task-detail-card,
.service-detail-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)),
        linear-gradient(90deg, var(--module-accent-soft, #eff6ff), transparent 16%) !important;
}

.workspace-nav-link.is-active,
.task-detail-tab.is-active,
.ai-assistant-mode.is-active {
    border-color: color-mix(in srgb, var(--module-accent, #2563eb) 34%, white) !important;
    color: var(--module-accent, #2563eb) !important;
    background: color-mix(in srgb, var(--module-accent-soft, #eff6ff) 88%, white) !important;
}

.summary-card-icon {
    background: color-mix(in srgb, var(--module-accent-soft, #eff6ff) 88%, white) !important;
    color: var(--module-accent, #2563eb) !important;
    border-color: color-mix(in srgb, var(--module-accent, #2563eb) 22%, white) !important;
}

.btn-outline-primary {
    border-color: color-mix(in srgb, var(--module-accent, #2563eb) 28%, white) !important;
    color: var(--module-accent, #2563eb) !important;
    background: color-mix(in srgb, var(--module-accent-soft, #eff6ff) 82%, white) !important;
}

.btn-outline-primary:hover {
    background: color-mix(in srgb, var(--module-accent-soft, #eff6ff) 94%, white) !important;
    border-color: color-mix(in srgb, var(--module-accent, #2563eb) 40%, white) !important;
    color: color-mix(in srgb, var(--module-accent, #2563eb) 84%, black) !important;
}

/* Modul tonu baslik bandi ve aktif filtrelere de yansisin */
.workspace-nav-shell,
.homepage-command-shell,
.tasks-workspace-shell,
.service-workspace-shell,
.messages-workspace-shell,
.notifications-workspace-shell,
.accounting-workspace-shell,
.reports-workspace-shell,
.calendar-workspace-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)),
        linear-gradient(90deg, color-mix(in srgb, var(--module-accent-soft, #eff6ff) 92%, white), transparent 38%) !important;
    border-color: color-mix(in srgb, var(--module-accent, #2563eb) 18%, rgba(30, 41, 59, 0.18)) !important;
}

.workspace-nav-shell h4,
.workspace-nav-shell h5,
.homepage-command-shell h4,
.homepage-command-shell h5,
.tasks-workspace-shell h4,
.tasks-workspace-shell h5,
.service-workspace-shell h4,
.service-workspace-shell h5,
.messages-workspace-shell h4,
.messages-workspace-shell h5,
.notifications-workspace-shell h4,
.notifications-workspace-shell h5,
.accounting-workspace-shell h4,
.accounting-workspace-shell h5,
.reports-workspace-shell h4,
.reports-workspace-shell h5,
.calendar-workspace-shell h4,
.calendar-workspace-shell h5 {
    color: color-mix(in srgb, var(--module-accent, #2563eb) 28%, #0f172a) !important;
}

.workspace-nav-link,
.task-detail-tab,
.task-detail-tablink,
.homepage-manager-trigger,
.product-inline-chip,
.mini-chip,
.badge-soft {
    border-color: rgba(148, 163, 184, 0.2) !important;
    border-radius: 10px !important;
    min-height: 40px;
    padding: 0.5rem 0.82rem !important;
    font-size: 0.78rem !important;
    font-weight: 700;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.workspace-nav-link:hover,
.task-detail-tab:hover,
.task-detail-tablink:hover,
.homepage-manager-trigger:hover,
.product-inline-chip:hover,
.mini-chip:hover {
    border-color: color-mix(in srgb, var(--module-accent, #2563eb) 26%, white) !important;
    color: var(--module-accent, #2563eb) !important;
    background: color-mix(in srgb, var(--module-accent-soft, #eff6ff) 72%, white) !important;
}

.workspace-nav-link.is-active,
.task-detail-tab.is-active,
.task-detail-tablink.is-active,
.product-inline-chip.is-active,
.mini-chip.is-active,
.badge-soft.is-active {
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08), inset 0 0 0 1px color-mix(in srgb, var(--module-accent, #2563eb) 28%, white);
}

.table-wrap .table thead th.is-active,
.accounting-panel .table thead th.is-active,
.notification-panel .table thead th.is-active,
.manager-panel .table thead th.is-active,
.table-wrap .table .is-active > th,
.table-wrap .table .is-active > td,
.accounting-panel .table .is-active > th,
.accounting-panel .table .is-active > td {
    background: color-mix(in srgb, var(--module-accent-soft, #eff6ff) 84%, white) !important;
    color: color-mix(in srgb, var(--module-accent, #2563eb) 72%, #0f172a) !important;
}

.table-wrap .table tbody tr.is-selected td,
.accounting-panel .table tbody tr.is-selected td,
.notification-panel .table tbody tr.is-selected td,
.manager-panel .table tbody tr.is-selected td {
    background: color-mix(in srgb, var(--module-accent-soft, #eff6ff) 88%, white) !important;
    box-shadow: inset 3px 0 0 var(--module-accent, #2563eb);
}

/* Ortak ritim: baslik yuksekligi, ic bosluk ve aralik standardi */
.workspace-nav-shell,
.homepage-command-shell,
.tasks-workspace-shell,
.service-workspace-shell,
.messages-workspace-shell,
.notifications-workspace-shell,
.accounting-workspace-shell,
.reports-workspace-shell,
.calendar-workspace-shell {
    min-height: 132px;
    padding: 22px 24px !important;
}

.workspace-nav-shell > .d-flex:first-child,
.homepage-command-shell > .d-flex:first-child,
.tasks-workspace-shell > .d-flex:first-child,
.service-workspace-shell > .d-flex:first-child,
.messages-workspace-shell > .d-flex:first-child,
.notifications-workspace-shell > .d-flex:first-child,
.accounting-workspace-shell > .d-flex:first-child,
.reports-workspace-shell > .d-flex:first-child,
.calendar-workspace-shell > .d-flex:first-child {
    gap: 16px !important;
    align-items: flex-start !important;
}

.workspace-nav-shell p:last-child,
.homepage-command-shell p:last-child,
.tasks-workspace-shell p:last-child,
.service-workspace-shell p:last-child,
.messages-workspace-shell p:last-child,
.notifications-workspace-shell p:last-child,
.accounting-workspace-shell p:last-child,
.reports-workspace-shell p:last-child,
.calendar-workspace-shell p:last-child {
    margin-bottom: 0;
}

.table-wrap,
.form-card,
.mini-card,
.manager-box,
.module-overview-card,
.notification-panel,
.manager-panel,
.vehicle-alert-panel,
.accounting-panel,
.task-detail-shell,
.service-detail-shell,
.task-detail-card,
.service-detail-card {
    padding: 18px 20px !important;
}

.table-wrap > .d-flex:first-child,
.form-card > .d-flex:first-child,
.mini-card > .d-flex:first-child,
.notification-panel > .d-flex:first-child,
.manager-panel > .d-flex:first-child,
.vehicle-alert-panel > .d-flex:first-child,
.accounting-panel > .d-flex:first-child {
    margin-bottom: 14px !important;
    gap: 14px !important;
}

.table-wrap h4,
.table-wrap h5,
.form-card h4,
.form-card h5,
.mini-card h4,
.mini-card h5,
.manager-box h4,
.manager-box h5,
.module-overview-card h4,
.module-overview-card h5,
.notification-panel h4,
.notification-panel h5,
.manager-panel h4,
.manager-panel h5,
.vehicle-alert-panel h4,
.vehicle-alert-panel h5,
.accounting-panel h4,
.accounting-panel h5 {
    margin-bottom: 0.3rem !important;
}

.table-wrap .table,
.accounting-panel .table,
.notification-panel .table,
.manager-panel .table {
    margin-top: 4px;
}

.table-wrap .table thead th,
.accounting-panel .table thead th,
.notification-panel .table thead th,
.manager-panel .table thead th {
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
}

.table-wrap .table tbody td,
.accounting-panel .table tbody td,
.notification-panel .table tbody td,
.manager-panel .table tbody td {
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
}

.form-card form,
.accounting-panel form,
.table-wrap form {
    gap: 14px !important;
}

.form-card form > .mb-2,
.form-card form > .mb-3,
.form-card form > .mb-4,
.accounting-panel form > .mb-2,
.accounting-panel form > .mb-3,
.accounting-panel form > .mb-4,
.table-wrap form > .mb-2,
.table-wrap form > .mb-3,
.table-wrap form > .mb-4 {
    margin-bottom: 0 !important;
}

.form-card .form-control,
.form-card .form-select,
.accounting-panel .form-control,
.accounting-panel .form-select,
.table-wrap .form-control,
.table-wrap .form-select {
    border-radius: 12px !important;
    padding: 0.72rem 0.88rem !important;
}

.workspace-nav-link,
.task-detail-tab,
.task-detail-tablink,
.homepage-manager-trigger,
.product-inline-chip,
.mini-chip,
.badge-soft {
    min-height: 38px;
    padding: 0.55rem 0.82rem !important;
    border-radius: 12px !important;
}

@media (max-width: 991px) {
    .layout-edit-toggle {
        right: 16px;
        bottom: 132px;
        padding: 7px 10px;
        min-height: 36px;
        font-size: 0.76rem;
    }

    .workspace-nav-shell,
    .homepage-command-shell,
    .tasks-workspace-shell,
    .service-workspace-shell,
    .messages-workspace-shell,
    .notifications-workspace-shell,
    .accounting-workspace-shell,
    .reports-workspace-shell,
    .calendar-workspace-shell {
        min-height: auto;
        padding: 18px !important;
    }

    .table-wrap,
    .form-card,
    .mini-card,
    .manager-box,
    .module-overview-card,
    .notification-panel,
    .manager-panel,
    .vehicle-alert-panel,
    .accounting-panel,
    .task-detail-shell,
    .service-detail-shell,
    .task-detail-card,
    .service-detail-card {
        padding: 16px !important;
    }
}

/* Son gorsel cila */
.workspace-nav-shell,
.homepage-command-shell,
.tasks-workspace-shell,
.service-workspace-shell,
.messages-workspace-shell,
.notifications-workspace-shell,
.accounting-workspace-shell,
.reports-workspace-shell,
.calendar-workspace-shell,
.table-wrap,
.form-card,
.mini-card,
.manager-box,
.module-overview-card,
.notification-panel,
.manager-panel,
.vehicle-alert-panel,
.accounting-panel,
.task-detail-shell,
.service-detail-shell,
.task-detail-card,
.service-detail-card {
    border-radius: 22px !important;
}

.page-index .homepage-root-main > section,
.page-index #dashboardWidgetCanvas > section,
.page-index .homepage-focus-panel,
.page-index .manager-panel,
.page-index .notification-panel {
    margin-bottom: 18px !important;
}

.page-index .homepage-root-grid > .homepage-root-main:only-child {
    grid-column: 1 / -1;
    width: 100%;
}

.page-index .homepage-layout-editor-bar {
    border-style: dashed !important;
}

.page-index .homepage-layout-editor-bar .btn {
    min-width: 170px;
}

.tasks-root-grid > .tasks-root-main:only-child,
.service-root-grid > .service-root-main:only-child,
.messages-root-grid > .messages-root-main:only-child,
.notifications-root-grid > .notifications-root-main:only-child {
    grid-column: 1 / -1;
    width: 100%;
}

.page-index .homepage-start-centers,
.page-index .homepage-ai-priority,
.page-index .homepage-today-strip,
.page-index .homepage-command-shell {
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid rgba(30, 41, 59, 0.12) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98)) !important;
}

.page-index .homepage-start-centers-head,
.page-index .homepage-command-shell .d-flex:first-child {
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.82);
}

.table-wrap .table tbody td,
.accounting-panel .table tbody td,
.notification-panel .table tbody td,
.manager-panel .table tbody td {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    line-height: 1.45;
}

.table-wrap .table tbody tr + tr td,
.accounting-panel .table tbody tr + tr td,
.notification-panel .table tbody tr + tr td,
.manager-panel .table tbody tr + tr td {
    border-top: 1px solid rgba(241, 245, 249, 0.95) !important;
}

.table-wrap .table tbody tr:hover td,
.accounting-panel .table tbody tr:hover td,
.notification-panel .table tbody tr:hover td,
.manager-panel .table tbody tr:hover td {
    background: rgba(248, 250, 252, 0.96);
}

.btn,
.workspace-nav-link,
.task-detail-tab,
.task-detail-tablink,
.homepage-manager-trigger,
.product-inline-chip,
.mini-chip,
.badge-soft {
    border-radius: 14px !important;
}

.summary-card-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
}

.page-index .homepage-kpi-card strong,
.page-index .homepage-summary-card strong,
.page-index .homepage-start-center strong,
.page-index .homepage-ai-priority-card strong,
.page-index .homepage-today-strip-item strong,
.page-index .manager-box strong,
.page-index .module-overview-card strong,
.page-accounting .mini-card strong,
.page-accounting .manager-box strong {
    font-size: 1.02rem !important;
    line-height: 1.3;
}

.page-search .search-intent-card {
    padding: 16px 18px !important;
    border-style: solid !important;
}

.page-search .search-intent-card small {
    display: block;
    margin-top: 4px;
    line-height: 1.45;
}

.page-search .search-date-col .form-control {
    min-width: 172px;
}

.page-search .form-card form .form-label {
    white-space: nowrap;
}

.page-calendar .calendar-summary-shell,
.page-calendar .calendar-focus-shell,
.page-calendar .calendar-board-shell,
.page-calendar .calendar-tools-shell,
.page-calendar .calendar-timeline-shell {
    border-radius: 20px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05) !important;
}

.page-calendar .calendar-summary-shell .manager-grid,
.page-calendar .calendar-focus-shell .row.g-3,
.page-calendar .calendar-board-shell .task-detail-pane > .row,
.page-calendar .calendar-tools-shell .task-detail-pane > .row {
    align-items: stretch;
}

.page-calendar .calendar-summary-shell,
.page-calendar .calendar-focus-shell,
.page-calendar .calendar-board-shell,
.page-calendar .calendar-tools-shell,
.page-calendar .calendar-timeline-shell,
.page-calendar .workspace-shell {
    padding: 18px !important;
}

.page-calendar .accounting-panel {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    border-radius: 18px !important;
}

.page-calendar .accounting-panel > .d-flex:first-child {
    margin-bottom: 8px !important;
    min-height: auto !important;
}

.page-calendar .accounting-panel .page-kicker {
    margin-bottom: 0 !important;
    font-size: 0.68rem !important;
}

.page-calendar .accounting-panel h5 {
    display: none;
}

.page-calendar .accounting-panel .task-detail-tablist {
    padding: 0.28rem !important;
    gap: 0.38rem !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
}

.page-calendar .accounting-panel .task-detail-tab {
    min-height: 34px !important;
    padding: 0.42rem 0.7rem !important;
    font-size: 0.74rem !important;
    border-radius: 10px !important;
}

.page-calendar .dashboard-widget-panel {
    padding: 12px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
}

.page-calendar .dashboard-widget-panel > .d-flex:first-child {
    gap: 10px !important;
    align-items: center !important;
}

.page-calendar .dashboard-widget-panel .page-kicker {
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
}

.page-calendar .dashboard-widget-panel h5 {
    font-size: 0.96rem !important;
    line-height: 1.2 !important;
}

.page-calendar .dashboard-widget-panel .btn-outline-primary {
    min-height: 32px;
    padding: 0.38rem 0.72rem;
    font-size: 0.72rem;
    border-radius: 10px;
}

.page-calendar .dashboard-widget-body {
    margin-top: 10px !important;
}

.page-calendar .dashboard-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.page-calendar .dashboard-widget-option {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    min-height: 0 !important;
}

.page-calendar .dashboard-widget-handle {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: 0.9rem !important;
    flex: 0 0 28px !important;
}

.page-calendar .dashboard-widget-option-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}

.page-calendar .dashboard-widget-order-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
}

.page-calendar .dashboard-widget-order-actions .btn {
    min-height: 28px;
    padding: 0.24rem 0.45rem;
    font-size: 0.66rem;
    border-radius: 9px;
}

@media (max-width: 767.98px) {
    .page-calendar .dashboard-widget-grid {
        grid-template-columns: 1fr !important;
    }
}

.page-calendar .calendar-focus-shell > .d-flex,
.page-calendar .calendar-board-shell > .d-flex,
.page-calendar .calendar-tools-shell > .d-flex,
.page-calendar .calendar-timeline-shell > .d-flex {
    margin-bottom: 14px !important;
}

.page-calendar .calendar-focus-shell h5,
.page-calendar .calendar-board-shell h5,
.page-calendar .calendar-tools-shell h5,
.page-calendar .calendar-timeline-shell h5 {
    font-size: 1.02rem;
    line-height: 1.3;
}

.page-calendar .calendar-focus-shell .product-inline-chip,
.page-calendar .calendar-board-shell .product-inline-chip {
    padding: 5px 10px;
    font-size: 0.72rem;
}

.page-calendar .calendar-summary-shell .manager-box,
.page-calendar .calendar-focus-shell .manager-box,
.page-calendar .calendar-board-shell .manager-box {
    min-height: 118px;
    border: 1px solid rgba(191, 219, 254, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
    padding: 14px 15px !important;
}

.page-calendar .calendar-focus-shell .bg-light-subtle,
.page-calendar .calendar-board-shell .bg-light-subtle,
.page-calendar .calendar-tools-shell .task-detail-pane > .row > [class*="col-"] > div:first-child {
    height: 100%;
    border: 1px solid rgba(203, 213, 225, 0.82) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.page-calendar .calendar-planning-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.page-calendar .calendar-planning-metrics div {
    min-height: 66px;
    border-radius: 14px;
    border: 1px solid rgba(191, 219, 254, 0.78);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(219, 234, 254, 0.72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    padding: 10px 8px;
}

.page-calendar .calendar-focus-shell .manager-box .page-kicker,
.page-calendar .calendar-summary-shell .manager-box .page-kicker {
    color: #64748b !important;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
}

.page-calendar .calendar-focus-shell .manager-box strong,
.page-calendar .calendar-summary-shell .manager-box strong {
    color: #0f172a !important;
    font-size: 1.28rem !important;
    line-height: 1.1;
    font-weight: 800;
}

.page-calendar .calendar-focus-shell .manager-box > span:last-child,
.page-calendar .calendar-summary-shell .manager-box > span:last-child {
    color: #475569 !important;
    font-size: 0.84rem;
}

.page-calendar .calendar-focus-shell .stock-state,
.page-calendar .calendar-summary-shell .stock-state {
    margin-left: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: none;
    font-weight: 700;
}

.page-calendar .calendar-focus-shell .stock-state.danger,
.page-calendar .calendar-summary-shell .stock-state.danger {
    color: #991b1b;
    background: #fee2e2;
}

.page-calendar .calendar-focus-shell .stock-state.warning,
.page-calendar .calendar-summary-shell .stock-state.warning {
    color: #92400e;
    background: #fef3c7;
}

.page-calendar .calendar-focus-shell .stock-state.safe,
.page-calendar .calendar-summary-shell .stock-state.safe {
    color: #166534;
    background: #dcfce7;
}

.page-calendar .calendar-focus-shell .bg-light-subtle > .d-flex strong {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.page-calendar .calendar-planning-metrics div span {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.page-calendar .calendar-planning-metrics div strong {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.page-calendar .calendar-link-card,
.page-calendar .calendar-draggable-card,
.page-calendar .today-priority-card {
    border: 1px solid rgba(203, 213, 225, 0.88) !important;
    border-radius: 18px !important;
    padding: 13px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
    min-height: 124px;
}

.page-calendar .calendar-link-card:hover,
.page-calendar .today-priority-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.page-calendar .task-detail-pane > .row > [class*="col-"] {
    display: flex;
}

.page-calendar .task-detail-pane > .row > [class*="col-"] > div:first-child {
    width: 100%;
}

.page-calendar [data-task-pane="calendar-daily-board"] > .row > .col-xl-4 {
    display: flex;
}

.page-calendar [data-task-pane="calendar-daily-board"] > .row > .col-xl-4 > .bg-light-subtle {
    width: 100%;
}

.page-calendar [data-task-pane="calendar-daily-board"] .bg-light-subtle,
.page-calendar [data-task-pane="calendar-weekly-board"] .bg-light-subtle,
.page-calendar [data-task-pane="calendar-person-day"] .bg-light-subtle,
.page-calendar [data-task-pane="calendar-person-week"] .bg-light-subtle {
    min-height: 100%;
}

.page-calendar [data-task-pane="calendar-daily-board"] .calendar-link-card,
.page-calendar [data-task-pane="calendar-weekly-board"] .calendar-link-card,
.page-calendar [data-task-pane="calendar-person-day"] .calendar-draggable-card,
.page-calendar [data-task-pane="calendar-person-week"] .calendar-draggable-card {
    min-height: 116px;
}

.page-calendar [data-task-pane="calendar-daily-board"] .d-inline-flex.gap-2.flex-wrap,
.page-calendar [data-task-pane="calendar-weekly-board"] .d-inline-flex.gap-2.flex-wrap,
.page-calendar [data-task-pane="calendar-person-day"] .d-inline-flex.gap-2.flex-wrap,
.page-calendar [data-task-pane="calendar-person-week"] .d-inline-flex.gap-2.flex-wrap {
    width: 100%;
    justify-content: flex-end;
}

.page-calendar .calendar-tools-shell .task-detail-pane form {
    height: 100%;
}

.page-calendar .calendar-tools-shell .task-detail-pane .row.g-2 > [class*="col-"] {
    align-self: end;
}

.page-calendar .calendar-quick-actions-grid {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 0.9rem;
}

.page-calendar .calendar-quick-card-col {
    display: flex;
}

.page-calendar .calendar-quick-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 12px;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.page-calendar .calendar-quick-card .page-kicker {
    margin-bottom: 3px !important;
    font-size: 0.58rem;
}

.page-calendar .calendar-quick-card h5 {
    font-size: 0.9rem !important;
    line-height: 1.25;
}

.page-calendar .calendar-quick-card form.row.g-2 {
    --bs-gutter-x: 0.6rem;
    --bs-gutter-y: 0.6rem;
}

.page-calendar .calendar-quick-card .form-label {
    font-size: 0.68rem;
    margin-bottom: 3px;
    font-weight: 700;
    color: #475569;
}

.page-calendar .calendar-quick-card .form-control,
.page-calendar .calendar-quick-card .form-select {
    min-height: 36px;
    border-radius: 10px;
    font-size: 0.78rem;
}

.page-calendar .calendar-quick-note-col .form-control {
    min-height: 42px;
    font-size: 0.82rem;
}

.page-calendar .calendar-quick-card .btn {
    min-height: 34px;
    border-radius: 10px;
    padding-inline: 0.8rem;
}

.page-calendar .calendar-quick-card .d-flex.justify-content-between.align-items-center.flex-wrap.gap-2.mb-3 {
    margin-bottom: 0 !important;
}

.page-calendar .calendar-quick-form .col-12.d-flex.justify-content-end {
    padding-top: 2px;
}

@media (max-width: 1399px) {
    .page-calendar .calendar-quick-card form .col-lg-6,
    .page-calendar .calendar-quick-card form .col-lg-5,
    .page-calendar .calendar-quick-card form .col-lg-4,
    .page-calendar .calendar-quick-card form .col-lg-3,
    .page-calendar .calendar-quick-card form .col-lg-2 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.page-calendar .calendar-owner-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.page-calendar .calendar-owner-chip {
    min-height: 82px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(203, 213, 225, 0.86);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

.page-calendar .mini-calendar-table {
    table-layout: fixed;
}

.page-calendar .mini-calendar-table th,
.page-calendar .mini-calendar-table td {
    min-width: 88px;
}

.page-calendar .mini-calendar-cell {
    height: 94px;
    border-radius: 14px;
    border: 1px solid rgba(203, 213, 225, 0.72);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    padding: 8px !important;
}

.page-calendar .mini-calendar-day {
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.page-calendar .mini-calendar-badges {
    gap: 0.25rem;
    margin-bottom: 4px;
}

.page-calendar .mini-calendar-badges .stock-state {
    min-height: 22px;
    padding: 0.18rem 0.4rem !important;
    font-size: 0.66rem !important;
}

.page-calendar .mini-calendar-total,
.page-calendar .mini-calendar-empty {
    font-size: 0.68rem !important;
    line-height: 1.2;
}

.page-calendar .mini-calendar-action {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    min-height: 24px;
    padding: 0 !important;
}

.page-calendar .calendar-timeline-grid {
    align-items: stretch;
    --bs-gutter-x: 0.6rem;
    --bs-gutter-y: 0.6rem;
}

.page-calendar .calendar-timeline-grid > [class*="col-"] {
    display: flex;
}

.page-calendar .calendar-timeline-card {
    min-height: 150px;
    border: 1px solid rgba(203, 213, 225, 0.88) !important;
    border-radius: 14px !important;
    padding: 9px !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
    display: flex;
    flex-direction: column;
}

.page-calendar .calendar-timeline-shell > .d-flex {
    margin-bottom: 8px !important;
}

.page-calendar .calendar-timeline-shell #calendarBulkForm {
    margin-bottom: 10px !important;
}

.page-calendar .calendar-timeline-card.is-overdue {
    border-color: rgba(239, 68, 68, 0.42) !important;
    box-shadow: 0 12px 26px rgba(239, 68, 68, 0.10);
    background: linear-gradient(180deg, rgba(255, 250, 250, 0.99), rgba(254, 242, 242, 0.98)) !important;
}

.page-calendar .calendar-timeline-card.is-overdue::before {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.page-calendar .calendar-timeline-card.is-today {
    border-color: rgba(59, 130, 246, 0.42) !important;
    box-shadow: 0 12px 26px rgba(59, 130, 246, 0.10);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.99), rgba(239, 246, 255, 0.98)) !important;
}

.page-calendar .calendar-timeline-card.is-today::before {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

.page-calendar .calendar-timeline-card.is-upcoming {
    border-color: rgba(34, 197, 94, 0.34) !important;
    box-shadow: 0 12px 26px rgba(34, 197, 94, 0.08);
    background: linear-gradient(180deg, rgba(249, 255, 251, 0.99), rgba(240, 253, 244, 0.98)) !important;
}

.page-calendar .calendar-timeline-card.is-upcoming::before {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.page-calendar [data-task-pane="calendar-daily-board"] .calendar-link-card.is-overdue,
.page-calendar [data-task-pane="calendar-weekly-board"] .calendar-link-card.is-overdue {
    border-color: rgba(239, 68, 68, 0.36) !important;
    background: linear-gradient(180deg, rgba(255, 250, 250, 0.99), rgba(254, 242, 242, 0.98)) !important;
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.08);
}

.page-calendar [data-task-pane="calendar-daily-board"] .calendar-link-card.is-today,
.page-calendar [data-task-pane="calendar-weekly-board"] .calendar-link-card.is-today {
    border-color: rgba(59, 130, 246, 0.34) !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.99), rgba(239, 246, 255, 0.98)) !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.08);
}

.page-calendar [data-task-pane="calendar-daily-board"] .calendar-link-card.is-upcoming,
.page-calendar [data-task-pane="calendar-weekly-board"] .calendar-link-card.is-upcoming {
    border-color: rgba(34, 197, 94, 0.3) !important;
    background: linear-gradient(180deg, rgba(249, 255, 251, 0.99), rgba(240, 253, 244, 0.98)) !important;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.06);
}

.page-calendar .calendar-timeline-date {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0f172a;
}

.page-calendar .calendar-timeline-diff {
    font-size: 0.66rem !important;
}

.page-calendar .calendar-timeline-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.28;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-calendar .calendar-timeline-owner {
    color: #1e293b;
    font-size: 0.72rem;
    margin-bottom: 1px;
}

.page-calendar .calendar-timeline-detail {
    font-size: 0.7rem;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-calendar .calendar-timeline-card .product-inline-chip,
.page-calendar .calendar-timeline-card .stock-state {
    font-size: 0.62rem;
    padding: 2px 6px;
}

.page-calendar .calendar-timeline-card .btn {
    min-height: 24px;
    padding: 0.14rem 0.42rem;
    font-size: 0.62rem;
    border-radius: 8px;
}

.page-calendar .calendar-timeline-shell #calendarBulkForm {
    margin-bottom: 8px !important;
}

.page-calendar .calendar-timeline-shell .form-label {
    font-size: 0.76rem;
    margin-bottom: 4px;
}

.page-calendar .calendar-timeline-shell #calendarBulkForm .form-select,
.page-calendar .calendar-timeline-shell #calendarBulkForm .btn {
    min-height: 36px;
}

.page-calendar .calendar-timeline-shell #calendarBulkForm .text-muted.small {
    font-size: 0.72rem !important;
    max-width: 280px;
}

.page-calendar .calendar-inline-preview-shell {
    margin-top: 0.15rem;
}

.page-calendar .calendar-inline-preview-card {
    min-height: 172px;
    border: 1px solid rgba(203, 213, 225, 0.88) !important;
    border-radius: 14px !important;
    padding: 0.85rem !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
    display: flex;
    flex-direction: column;
}

.page-calendar .calendar-inline-preview-card.danger,
.page-calendar .calendar-inline-preview-card.is-overdue {
    border-color: rgba(239, 68, 68, 0.42) !important;
    background: linear-gradient(180deg, rgba(255, 250, 250, 0.99), rgba(254, 242, 242, 0.98)) !important;
}

.page-calendar .calendar-inline-preview-card.warning,
.page-calendar .calendar-inline-preview-card.is-today {
    border-color: rgba(59, 130, 246, 0.42) !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.99), rgba(239, 246, 255, 0.98)) !important;
}

.page-calendar .calendar-inline-preview-card.safe,
.page-calendar .calendar-inline-preview-card.is-upcoming {
    border-color: rgba(34, 197, 94, 0.34) !important;
    background: linear-gradient(180deg, rgba(249, 255, 251, 0.99), rgba(240, 253, 244, 0.98)) !important;
}

.page-calendar .calendar-inline-preview-card .product-inline-chip,
.page-calendar .calendar-inline-preview-card .stock-state {
    font-size: 0.62rem;
    padding: 2px 6px;
}

.page-calendar .calendar-inline-preview-owner {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.page-calendar .calendar-inline-preview-title {
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.34;
    color: #0f172a;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-calendar .calendar-inline-preview-detail {
    font-size: 0.72rem;
    line-height: 1.38;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-calendar .calendar-inline-preview-empty {
    border: 1px dashed rgba(148, 163, 184, 0.4);
    border-radius: 14px;
    background: #f8fafc;
    padding: 1rem;
    color: #64748b;
    font-size: 0.84rem;
}

.module-inline-preview-shell {
    margin-top: 0.35rem;
}

.homepage-inline-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.module-inline-preview-card {
    min-height: 154px;
    padding: 0.9rem !important;
    border-radius: 16px !important;
}

.module-inline-preview-card strong {
    font-size: 0.94rem;
    line-height: 1.35;
    color: #122033;
}

.module-inline-preview-card small {
    font-size: 0.76rem;
    line-height: 1.45;
}

.module-inline-preview-empty {
    border: 1px dashed rgba(148, 163, 184, 0.38);
    border-radius: 16px;
    background: #f8fafc;
    padding: 1rem 1.1rem;
    color: #64748b;
    font-size: 0.85rem;
}

.homepage-record-inspector {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    padding: 16px 18px;
}

.homepage-record-side h6 {
    font-size: 1.05rem;
    margin: 6px 0 14px;
    color: #122033;
}

.homepage-record-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.homepage-record-fact {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.homepage-record-fact.full {
    grid-column: 1 / -1;
}

.homepage-record-fact span {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.homepage-record-fact strong {
    font-size: 0.9rem;
    line-height: 1.45;
    color: #122033;
}

.homepage-record-actions,
.homepage-preview-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

@media (max-width: 1199px) {
    .page-calendar .calendar-owner-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .page-calendar .calendar-owner-chips {
        grid-template-columns: 1fr;
    }

    .page-calendar .mini-calendar-cell {
        height: 86px;
    }
}

.service-row-focus,
.service-detail-focus {
    position: relative;
}

.service-row-focus {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0.03));
    box-shadow: inset 3px 0 0 #3b82f6;
}

.service-row-focus td,
.service-row-focus strong,
.service-row-focus .text-muted {
    color: inherit;
}

.service-detail-focus {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
    border-radius: 18px;
    box-shadow: 0 18px 40px -26px rgba(59, 130, 246, 0.45);
}

#product-list tr.product-row.active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.03));
    box-shadow: inset 3px 0 0 #10b981;
}

.product-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.product-grid-card {
    display: grid;
    gap: 14px;
    min-height: 238px;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.product-grid-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.08);
}

.product-grid-card.active {
    border-color: rgba(16, 185, 129, 0.24);
    box-shadow: 0 18px 34px rgba(16, 185, 129, 0.12);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(248, 250, 252, 0.98));
}

.product-grid-card-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.product-grid-card-thumb {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: #f8fafc;
}

.product-grid-card-thumb.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.2rem;
}

.product-grid-card-title {
    display: grid;
    gap: 3px;
}

.product-grid-card-title strong {
    font-size: 1.03rem;
    line-height: 1.3;
    color: #172033;
}

.product-grid-card-title span {
    font-size: 0.84rem;
    color: #667085;
}

.product-grid-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.product-grid-card-status.safe {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.product-grid-card-status.danger {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.product-grid-card-status.muted {
    background: rgba(148, 163, 184, 0.14);
    color: #475467;
}

.product-grid-card-body {
    display: grid;
    gap: 12px;
}

.product-grid-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-grid-card-meta span {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 0.78rem;
    color: #667085;
}

.product-grid-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-grid-card-stats > div {
    padding: 0.8rem 0.85rem;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.product-grid-card-stats small {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    color: #667085;
}

.product-grid-card-stats strong {
    font-size: 0.96rem;
    color: #172033;
}

.product-grid-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.product-grid-card-actions form {
    margin: 0;
}

html[data-theme="dark"] .product-grid-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.94));
    border-color: rgba(148, 163, 184, 0.12);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
}

html[data-theme="dark"] .product-grid-card.active {
    background: linear-gradient(180deg, rgba(6, 78, 59, 0.38), rgba(15, 23, 42, 0.96));
}

html[data-theme="dark"] .product-grid-card-title strong,
html[data-theme="dark"] .product-grid-card-stats strong {
    color: #e5edf9;
}

html[data-theme="dark"] .product-grid-card-title span,
html[data-theme="dark"] .product-grid-card-meta span,
html[data-theme="dark"] .product-grid-card-stats small {
    color: #94a3b8;
}

html[data-theme="dark"] .product-grid-card-meta span,
html[data-theme="dark"] .product-grid-card-stats > div {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.12);
}

.page-personal_hub .hero-panel {
    padding: 0.9rem 1rem;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.page-personal_hub .hero-panel h2 {
    font-size: 1.3rem;
    margin-bottom: 0.22rem !important;
    letter-spacing: -0.03em;
}

.page-personal_hub .hero-panel p:last-child {
    max-width: 700px;
    font-size: 0.84rem;
    margin-bottom: 0.08rem !important;
}

.page-personal_hub .hero-badges {
    gap: 6px;
}

.page-personal_hub .personal-hub-hero-badge {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    padding: 0.36rem 0.68rem;
    font-size: 0.76rem;
    border-radius: 999px;
}

.page-personal_hub .personal-hub-hero-badge:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.2);
}

.page-personal_hub .personal-hub-hero-badge:focus-visible {
    outline: 2px solid rgba(255,255,255,0.32);
    outline-offset: 2px;
}

.page-personal_hub .personal-hub-quickbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: -6px;
}

.page-personal_hub .personal-hub-quickcard {
    position: relative;
    padding: 0.62rem 0.72rem;
    border-radius: 13px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    display: grid;
    gap: 0.12rem;
    width: 100%;
    text-align: left;
    appearance: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-personal_hub .personal-hub-quickcard::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg, rgba(20,184,166,0.95), rgba(59,130,246,0.8));
}

.page-personal_hub .personal-hub-quickcard-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.page-personal_hub .personal-hub-quickcard strong {
    font-size: 1.14rem;
    line-height: 1;
    color: #0f172a;
}

.page-personal_hub .personal-hub-quickcard strong,
.page-personal_hub .personal-hub-quickcard-label,
.page-personal_hub .personal-hub-quickcard small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-personal_hub .personal-hub-quickcard small {
    color: #64748b;
    font-size: 0.74rem;
    line-height: 1.24;
}

.page-personal_hub .personal-hub-quickcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    border-color: rgba(59, 130, 246, 0.18);
}

.page-personal_hub .personal-hub-quickcard:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.32);
    outline-offset: 2px;
}

.page-personal_hub .dashboard-widget-panel,
.page-personal_hub .personal-hub-workspace,
.page-personal_hub .personal-hub-lists {
    border-radius: 15px;
    margin-bottom: 0.85rem !important;
}

.page-personal_hub .dashboard-widget-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.9));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.022);
    opacity: 0.92;
    max-width: 760px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
}

.page-personal_hub .dashboard-widget-panel .page-kicker {
    font-size: 0.62rem !important;
    letter-spacing: 0.12em;
    color: #94a3b8 !important;
}

.page-personal_hub .dashboard-widget-panel .btn-outline-primary {
    color: #475569;
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(255,255,255,0.72);
}

.page-personal_hub .dashboard-widget-panel .btn-outline-primary:hover {
    color: #0f172a;
    border-color: rgba(59, 130, 246, 0.18);
    background: rgba(248,250,252,0.96);
}

.page-personal_hub .dashboard-widget-panel > .d-flex:first-child,
.page-personal_hub .personal-hub-workspace > .d-flex:first-child,
.page-personal_hub .personal-hub-lists > .d-flex:first-child {
    margin-bottom: 0.58rem !important;
}

.page-personal_hub .dashboard-widget-panel h5 {
    font-size: 0.86rem;
}

.page-personal_hub .personal-hub-helper {
    padding: 0.54rem 0.68rem;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(241,245,249,0.9));
    color: #475569;
    font-size: 0.76rem;
    line-height: 1.34;
    margin-bottom: 0.58rem !important;
}

.page-personal_hub .task-detail-tablist {
    gap: 6px;
    padding: 5px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(241,245,249,0.92));
    border: 1px solid rgba(148,163,184,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}

.page-personal_hub .task-detail-tab {
    min-height: 36px;
    padding: 0.48rem 0.82rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.84);
    color: #475569;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03);
    transition: all 0.18s ease;
}

.page-personal_hub .task-detail-tab:hover {
    color: #0f172a;
    border-color: rgba(59, 130, 246, 0.14);
    background: rgba(255,255,255,0.98);
}

.page-personal_hub .task-detail-tab.active,
.page-personal_hub .task-detail-tab[aria-selected="true"] {
    color: #0f172a;
    border-color: rgba(59, 130, 246, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(239,246,255,0.96));
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.08);
}

.page-personal_hub .task-detail-pane {
    padding-top: 0.6rem;
}

.page-personal_hub .personal-hub-workspace,
.page-personal_hub .personal-hub-lists {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.page-personal_hub .personal-hub-workspace {
    max-width: 1080px;
}

.page-personal_hub .personal-hub-lists {
    max-width: 1080px;
}

.page-personal_hub .form-card,
.page-personal_hub .table-wrap,
.page-personal_hub .mini-card {
    border-radius: 14px;
}

.page-personal_hub .form-card,
.page-personal_hub .table-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,252,0.96));
}

.page-personal_hub [data-task-pane="personal-note-pane"] .form-card {
    border: 1px solid rgba(59, 130, 246, 0.14);
    box-shadow: 0 18px 34px rgba(59, 130, 246, 0.08);
}

.page-personal_hub [data-task-pane="personal-reminder-pane"] .form-card {
    border: 1px solid rgba(245, 158, 11, 0.14);
    box-shadow: 0 18px 34px rgba(245, 158, 11, 0.08);
}

.page-personal_hub [data-task-pane="personal-task-pane"] .form-card {
    border: 1px solid rgba(16, 185, 129, 0.14);
    box-shadow: 0 18px 34px rgba(16, 185, 129, 0.08);
}

.page-personal_hub [data-task-pane="personal-profile-pane"] .form-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
}

.page-personal_hub [data-task-pane="personal-note-pane"] .form-card h5 {
    font-size: 0.98rem;
}

.page-personal_hub [data-task-pane="personal-reminder-pane"] .form-card h5,
.page-personal_hub [data-task-pane="personal-task-pane"] .form-card h5,
.page-personal_hub [data-task-pane="personal-profile-pane"] .form-card h5 {
    font-size: 0.95rem;
}

.page-personal_hub [data-task-pane="personal-note-pane"] .personal-hub-card-note {
    font-size: 0.78rem !important;
    color: #334155 !important;
}

.page-personal_hub [data-task-pane="personal-reminder-pane"] .personal-hub-card-note,
.page-personal_hub [data-task-pane="personal-task-pane"] .personal-hub-card-note,
.page-personal_hub [data-task-pane="personal-profile-pane"] .personal-hub-card-note {
    font-size: 0.76rem !important;
    color: #475569 !important;
}

.page-personal_hub [data-task-pane="personal-note-pane"] textarea.form-control {
    min-height: 148px;
    resize: vertical;
}

.page-personal_hub [data-task-pane="personal-reminder-pane"] textarea.form-control,
.page-personal_hub [data-task-pane="personal-task-pane"] textarea.form-control {
    min-height: 124px;
    resize: vertical;
}

.page-personal_hub [data-task-pane="personal-note-pane"] .btn-primary {
    min-height: 38px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.16);
}

.page-personal_hub [data-task-pane="personal-reminder-pane"] .btn-primary,
.page-personal_hub [data-task-pane="personal-task-pane"] .btn-primary {
    min-height: 36px;
    font-size: 0.8rem;
    font-weight: 700;
}

.page-personal_hub [data-task-pane="personal-reminder-pane"] .btn-primary {
    box-shadow: 0 12px 22px rgba(245, 158, 11, 0.14);
}

.page-personal_hub [data-task-pane="personal-task-pane"] .btn-primary {
    box-shadow: 0 12px 22px rgba(16, 185, 129, 0.14);
}

.page-personal_hub .table-wrap {
    padding: 0.72rem 0.76rem;
}

.page-personal_hub .personal-hub-lists > .d-flex:first-child,
.page-personal_hub .personal-hub-workspace > .d-flex:first-child {
    align-items: center !important;
}

.page-personal_hub .table-wrap > .d-flex:first-child {
    margin-bottom: 0.46rem !important;
}

.page-personal_hub .form-card {
    padding: 0.72rem 0.76rem;
}

.page-personal_hub .form-card h5,
.page-personal_hub .table-wrap h5 {
    font-size: 0.92rem;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.page-personal_hub .personal-hub-card-note {
    margin: -0.04rem 0 0.5rem;
    font-size: 0.74rem !important;
    line-height: 1.3;
}

.page-personal_hub .personal-hub-workspace .task-detail-pane .row {
    align-items: stretch;
}

.page-personal_hub .form-card form {
    gap: 0.7rem;
}

.page-personal_hub .form-card .form-label {
    font-size: 0.76rem;
}

.page-personal_hub .form-card .form-control,
.page-personal_hub .form-card .form-select {
    min-height: 38px;
    font-size: 0.9rem;
}

.page-personal_hub .btn {
    min-height: 32px;
    border-radius: 8px;
}

.page-personal_hub .btn.btn-sm {
    min-height: 28px;
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;
    font-size: 0.74rem;
}

.page-personal_hub .mini-card {
    padding: 0.64rem 0.7rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.028);
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.page-personal_hub .personal-record-card {
    padding: 0.62rem 0.68rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-personal_hub .personal-record-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.045);
    border-color: rgba(59, 130, 246, 0.12);
}

.page-personal_hub #personal-notes .d-grid,
.page-personal_hub #personal-reminders .d-grid,
.page-personal_hub #personal-tasks .d-grid {
    gap: 0.56rem !important;
}

.page-personal_hub .mini-card strong {
    font-size: 0.88rem;
}

.page-personal_hub .mini-card .text-muted.small {
    font-size: 0.75rem !important;
    line-height: 1.3;
}

.page-personal_hub .personal-hub-record-head {
    min-height: 100%;
    align-items: center !important;
}

.page-personal_hub .personal-hub-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 0.18rem;
}

.page-personal_hub .personal-hub-record-meta .stock-state,
.page-personal_hub .personal-hub-record-meta .text-muted.small {
    align-self: center;
}

.page-personal_hub .personal-hub-record-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-personal_hub .personal-hub-record-actions {
    flex-shrink: 0;
    min-width: 76px;
    align-self: stretch;
}

.page-personal_hub .dashboard-widget-grid {
    gap: 0.5rem;
}

.page-personal_hub .dashboard-widget-option {
    min-height: 40px;
    padding: 0.56rem 0.66rem;
    border-radius: 12px;
    font-size: 0.76rem;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.page-personal_hub .dashboard-widget-body {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    margin-top: 0.7rem;
    padding-top: 0.7rem;
}

.page-personal_hub .user-avatar,
.page-personal_hub .user-avatar-image {
    width: 54px;
    height: 54px;
    border-radius: 16px;
}

.page-personal_hub .personal-hub-record-actions .d-grid {
    gap: 8px;
}

.page-personal_hub .personal-hub-record-actions .btn {
    width: 100%;
    justify-content: center;
}

.page-personal_hub .personal-hub-record-actions form {
    margin: 0;
}

.page-personal_hub .personal-hub-empty-state {
    padding: 0.62rem 0.72rem;
    border-radius: 11px;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(241,245,249,0.9));
    color: #64748b;
    font-size: 0.71rem;
    line-height: 1.28;
}

.page-personal_hub .product-inline-chip {
    font-size: 0.72rem;
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-personal_hub #personal-notes .table-wrap,
.page-personal_hub #personal-reminders .table-wrap,
.page-personal_hub #personal-tasks .table-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(248,250,252,0.96));
}

.page-personal_hub #personal-reminders .mini-card,
.page-personal_hub #personal-tasks .mini-card,
.page-personal_hub #personal-notes .mini-card {
    position: relative;
    overflow: hidden;
}

.page-personal_hub #personal-reminders .mini-card::before,
.page-personal_hub #personal-tasks .mini-card::before,
.page-personal_hub #personal-notes .mini-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(59,130,246,0.85), rgba(14,165,233,0.7));
}

.page-personal_hub #personal-reminders .btn,
.page-personal_hub #personal-tasks .btn,
.page-personal_hub #personal-notes .btn {
    min-width: 84px;
}

@media (min-width: 768px) {
    .page-personal_hub .personal-hub-record-actions {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
    }

    .page-personal_hub #personal-notes .d-grid,
    .page-personal_hub #personal-reminders .d-grid,
    .page-personal_hub #personal-tasks .d-grid {
        grid-template-columns: 1fr;
    }
}

.page-personal_hub .product-inline-chip {
    font-size: 0.68rem;
    padding: 0.28rem 0.54rem;
}

.page-personal_hub .page-kicker {
    margin-bottom: 0.22rem !important;
}

.page-personal_hub .stock-state {
    font-size: 0.66rem;
    padding: 0.24rem 0.48rem;
    border-radius: 999px;
}

.page-personal_hub .personal-hub-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(8px);
}

.page-personal_hub .personal-hub-modal-backdrop[hidden] {
    display: none !important;
}

.page-personal_hub .personal-hub-modal {
    width: min(700px, 100%);
    max-height: min(80vh, 760px);
    overflow: auto;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.2);
}

.page-personal_hub .personal-hub-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 14px;
    padding: 0.9rem 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.page-personal_hub .personal-hub-modal-head strong {
    display: block;
    font-size: 1rem;
    color: #0f172a;
}

.page-personal_hub .personal-hub-modal-body {
    padding: 0.9rem 0.95rem 1rem;
    display: grid;
    gap: 0.62rem;
}

.page-personal_hub .personal-hub-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    padding: 0.78rem 0.84rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
}

.page-personal_hub .personal-hub-modal-row:hover {
    border-color: rgba(59, 130, 246, 0.16);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.page-personal_hub .personal-hub-modal-row .btn {
    min-width: 94px;
}

.page-personal_hub .personal-hub-modal-copy {
    display: grid;
    gap: 4px;
}

.page-personal_hub .personal-hub-modal-copy strong {
    font-size: 0.92rem;
    color: #0f172a;
}

.page-personal_hub .personal-hub-modal-copy span {
    font-size: 0.76rem;
    color: #2563eb;
    font-weight: 700;
}

.page-personal_hub .personal-hub-modal-copy small {
    font-size: 0.78rem;
    line-height: 1.35;
    color: #64748b;
}

.page-personal_hub .personal-hub-modal #personalHubModalClose {
    min-width: 86px;
}

.page-notifications .notifications-hero-badge {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    border-radius: 999px;
    padding: 0.42rem 0.8rem;
    font-size: 0.82rem;
}

.page-notifications .notifications-hero-badge:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
}

.page-notifications .notifications-mini-trigger {
    width: 100%;
    text-align: left;
    appearance: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-notifications .notifications-mini-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    border-color: rgba(59, 130, 246, 0.16);
}

.page-notifications .hero-panel {
    padding: 0.96rem 1.06rem;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.page-notifications .hero-panel h2 {
    font-size: 1.4rem;
    margin-bottom: 0.28rem !important;
    max-width: 980px;
}

.page-notifications .hero-panel > p:last-of-type {
    font-size: 0.88rem;
    max-width: 980px;
    margin-bottom: 0.12rem !important;
}

.page-notifications .hero-badges {
    gap: 6px;
}

.page-notifications .notifications-workbench {
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.62fr);
    gap: 14px;
    padding: 0.9rem 1rem;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.page-notifications .notifications-workbench-main h2 {
    font-size: 1.22rem;
    margin-bottom: 0.16rem;
    max-width: 920px;
}

.page-notifications .notifications-workbench-main p:last-child {
    font-size: 0.84rem;
    line-height: 1.36;
    max-width: 920px;
}

.page-notifications .notifications-workbench-actions {
    gap: 8px;
}

.page-notifications .notifications-workbench-chip {
    min-height: 38px;
    padding: 0.58rem 0.78rem;
    border-radius: 13px;
    font-size: 0.82rem;
}

.page-notifications .notifications-root-grid {
    gap: 14px;
}

.page-notifications .notifications-root-main > .table-wrap,
.page-notifications .notifications-root-aside .table-wrap,
.page-notifications .notifications-root-aside .workspace-fold-shell {
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}

.page-notifications .task-detail-tablist {
    gap: 6px;
    padding: 4px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(241,245,249,0.92));
    border: 1px solid rgba(148,163,184,0.16);
}

.page-notifications .task-detail-tab {
    min-height: 34px;
    padding: 0.42rem 0.72rem;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(255,255,255,0.86);
    border: 1px solid transparent;
    transition: all 0.18s ease;
}

.page-notifications .task-detail-tab:hover {
    border-color: rgba(59, 130, 246, 0.14);
    background: rgba(255,255,255,0.98);
    color: #0f172a;
}

.page-notifications .task-detail-tab.active,
.page-notifications .task-detail-tab[aria-selected="true"] {
    border-color: rgba(59, 130, 246, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(239,246,255,0.96));
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.08);
    color: #0f172a;
}

.page-notifications .table-wrap {
    padding: 0.82rem 0.88rem;
}

.page-notifications .table-wrap > .d-flex:first-child {
    margin-bottom: 0.6rem !important;
}

.page-notifications .table-wrap h5,
.page-notifications .mini-card h5 {
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.page-notifications .mini-card {
    border-radius: 16px;
    padding: 0.78rem 0.82rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.028);
}

.page-notifications .mini-card strong {
    font-size: 1.16rem;
    color: #0f172a;
}

.page-notifications .mini-card span {
    font-size: 0.82rem;
    line-height: 1.28;
    color: #64748b;
}

.page-notifications .notification-feed-card .notification-box {
    border-radius: 16px;
    padding: 0.82rem 0.86rem;
}

.page-notifications .notification-feed-card strong {
    font-size: 0.98rem;
}

.page-notifications .notification-box span,
.page-notifications .notification-owner-line strong,
.page-notifications .notification-main-link,
.page-notifications .notification-action-link {
    font-size: 0.82rem;
}

.page-notifications .notification-feed-card .notification-main-link,
.page-notifications .notification-action-link {
    border-radius: 999px;
}

.page-notifications .product-inline-chip {
    font-size: 0.78rem;
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-notifications #notificationSectionManager,
.page-notifications .dashboard-widget-grid {
    gap: 0.54rem;
}

.page-notifications .dashboard-widget-option {
    min-height: 42px;
    padding: 0.58rem 0.7rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.82rem;
}

.page-notifications .dashboard-widget-panel,
.page-notifications .notification-panel[data-section-key] {
    border-radius: 16px;
}

.page-notifications .dashboard-widget-panel .page-kicker {
    font-size: 0.62rem !important;
    letter-spacing: 0.12em;
    color: #94a3b8 !important;
}

.page-notifications .notifications-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(8px);
}

.page-notifications .notifications-modal-backdrop[hidden] {
    display: none !important;
}

.page-notifications .notifications-modal {
    width: min(760px, 100%);
    max-height: min(82vh, 820px);
    overflow: auto;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
}

.page-notifications .notifications-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 14px;
    padding: 1rem 1.05rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.page-notifications .notifications-modal-head strong {
    display: block;
    font-size: 1.06rem;
    color: #0f172a;
}

.page-notifications .notifications-modal-body {
    padding: 1rem 1.05rem 1.1rem;
    display: grid;
    gap: 0.8rem;
}

.page-notifications .notifications-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.page-notifications .notifications-modal-row:hover {
    border-color: rgba(59, 130, 246, 0.16);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.page-notifications .notifications-modal-copy {
    display: grid;
    gap: 4px;
}

.page-notifications .notifications-modal-copy strong {
    font-size: 0.98rem;
    color: #0f172a;
}

.page-notifications .notifications-modal-copy span {
    font-size: 0.82rem;
    color: #2563eb;
    font-weight: 700;
}

.page-notifications .notifications-modal-copy small {
    font-size: 0.84rem;
    line-height: 1.42;
    color: #64748b;
}

@media (max-width: 767px) {
    .page-notifications .notifications-modal {
        border-radius: 18px;
    }

    .page-notifications .notifications-modal-row {
        flex-direction: column;
    }
}

@media (min-width: 1200px) {
    .page-personal_hub .hero-panel,
    .page-personal_hub .personal-hub-quickbar,
    .page-personal_hub .personal-hub-lists,
    .page-personal_hub .personal-hub-workspace {
        max-width: 1080px;
    }

    .page-personal_hub #personal-notes,
    .page-personal_hub #personal-reminders,
    .page-personal_hub #personal-tasks {
        max-width: 860px;
    }
}

@media (max-width: 1199px) {
    .page-personal_hub .personal-hub-quickbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .page-personal_hub .personal-hub-quickbar {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .hero-panel {
        padding: 1rem;
    }

    .page-personal_hub .personal-hub-modal {
        border-radius: 18px;
    }

    .page-personal_hub .personal-hub-modal-row {
        flex-direction: column;
    }
}
.page-approvals .mini-card.approval-summary-trigger,
.page-approvals .approval-hero-trigger {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.page-approvals .mini-card.approval-summary-trigger {
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.page-approvals .mini-card.approval-summary-trigger strong {
    font-size: 2rem;
}

.page-approvals .approval-hero-trigger {
    appearance: none;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    padding: 0.72rem 1rem;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.page-approvals .approval-hero-trigger:hover,
.page-approvals .mini-card.approval-summary-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.14);
}

.page-approvals .approval-hero-trigger:hover {
    background: rgba(255, 255, 255, 0.22);
}

.page-approvals .approval-preview-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1400 !important;
}

.page-approvals .approval-preview-modal .stock-in-preview-dialog {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1120px, calc(100vw - 28px));
    margin: 0;
    max-height: calc(100vh - 48px);
    border-radius: 28px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 255, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

.page-approvals .approval-preview-modal .stock-in-preview-backdrop {
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(14px);
}

.page-approvals .approval-preview-modal .stock-in-preview-head {
    position: relative;
    padding: 1.15rem 1.25rem !important;
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.page-approvals .approval-preview-modal .stock-in-preview-head::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.45), transparent);
}

.page-approvals .approval-preview-modal .stock-in-preview-head .page-kicker {
    color: rgba(226, 232, 240, 0.76);
    letter-spacing: 0.08em;
}

.page-approvals .approval-preview-modal .stock-in-preview-head h5 {
    color: #f8fafc;
    font-size: 1.15rem;
}

.page-approvals .approval-preview-modal .stock-in-preview-head .btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
}

.page-approvals .approval-preview-modal .stock-in-preview-head .btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.page-approvals .approval-preview-modal .table-wrap {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.page-approvals .approval-preview-modal .table-wrap > .p-3 {
    padding: 1.2rem !important;
}

.page-approvals .approval-preview-modal .stock-in-preview-summary-bar {
    margin-bottom: 1rem;
}

.page-approvals .approval-preview-modal .stock-in-preview-summary-chip {
    min-width: 190px;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 248, 235, 0.96), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(251, 191, 36, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.page-approvals .approval-preview-modal .stock-in-preview-summary-chip span {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #92400e;
}

.page-approvals .approval-preview-modal .stock-in-preview-summary-chip strong {
    margin-top: 0.4rem;
    font-size: 1.06rem;
    color: #111827;
}

.page-approvals .approval-preview-row {
    min-height: 186px;
    padding: 1rem 1rem 0.95rem;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    text-decoration: none;
}

.page-approvals .approval-preview-row .movement-preview-type {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(249, 115, 22, 0.14));
    color: #9a3412;
}

.page-approvals .approval-preview-row .stock-in-preview-row-side small {
    color: #b45309;
}

.page-approvals .approval-preview-row .movement-preview-date {
    font-weight: 700;
    color: #64748b;
}

.page-approvals .approval-preview-row .stock-in-preview-row-main strong {
    font-size: 1rem;
    line-height: 1.45;
    color: #0f172a;
}

.page-approvals .approval-preview-row .stock-in-preview-row-main p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
}

.page-approvals .approval-preview-row .movement-preview-chip {
    background: rgba(241, 245, 249, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #334155;
}

.page-approvals .approval-preview-row .stock-in-preview-row-meta {
    gap: 0.55rem;
}

.page-approvals .approval-preview-row .stock-in-preview-row-side {
    padding-top: 0.35rem;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.page-approvals .approval-preview-row:hover,
.page-approvals .approval-preview-row:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 251, 235, 0.97));
}

.page-approvals .approval-preview-modal .task-empty-state {
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    background: rgba(248, 250, 252, 0.92);
    color: #64748b;
    padding: 1rem 1.1rem;
}

.page-approvals .approval-preview-modal .btn.btn-outline-secondary {
    border-radius: 12px;
    padding-inline: 0.95rem;
    font-weight: 700;
}

.page-approvals .table-wrap > .d-flex h5 {
    font-size: 1.16rem;
}

.page-approvals .product-inline-chip.approval-summary-trigger {
    cursor: pointer;
    width: auto;
}

html[data-theme="dark"] .page-approvals .approval-hero-trigger {
    background: rgba(15, 23, 42, 0.52);
    color: #e2e8f0;
}

html[data-theme="dark"] .page-approvals .approval-preview-row .movement-preview-type {
    background: rgba(120, 53, 15, 0.4);
    color: #fed7aa;
}

html[data-theme="dark"] .page-approvals .approval-preview-modal .stock-in-preview-dialog {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98));
    border-color: rgba(71, 85, 105, 0.44);
}

html[data-theme="dark"] .page-approvals .approval-preview-modal .table-wrap {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98));
}

html[data-theme="dark"] .page-approvals .approval-preview-modal .stock-in-preview-summary-chip {
    background: linear-gradient(135deg, rgba(69, 26, 3, 0.42), rgba(30, 41, 59, 0.82));
    border-color: rgba(217, 119, 6, 0.3);
}

html[data-theme="dark"] .page-approvals .approval-preview-modal .stock-in-preview-summary-chip span {
    color: #fdba74;
}

html[data-theme="dark"] .page-approvals .approval-preview-modal .stock-in-preview-summary-chip strong,
html[data-theme="dark"] .page-approvals .approval-preview-row .stock-in-preview-row-main strong {
    color: #f8fafc;
}

html[data-theme="dark"] .page-approvals .approval-preview-row {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
    border-color: rgba(71, 85, 105, 0.36);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] .page-approvals .approval-preview-row .stock-in-preview-row-main p,
html[data-theme="dark"] .page-approvals .approval-preview-row .movement-preview-date,
html[data-theme="dark"] .page-approvals .approval-preview-row .movement-preview-chip {
    color: #cbd5e1;
}

/* Global cleanup layer */
.build-badge,
.layout-edit-toggle,
.page-flow-shell,
.ai-assistant-shell,
.ai-quality-modal {
    display: none !important;
}

.app-layout {
    padding: 18px 18px 24px;
}

.sidebar-column {
    max-width: 292px;
}

.sidebar-panel {
    border-radius: 26px !important;
    padding: 18px 16px !important;
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12) !important;
}

.sidebar-highlight,
.sidebar-launchpad,
.sidebar-favorites {
    border-radius: 18px !important;
}

.sidebar-brand h1 {
    font-size: 1.08rem;
}

.hero-panel,
.table-wrap,
.notification-panel,
.manager-box,
.workspace-fold-shell,
.task-detail-card,
.record-detail-card,
.form-card,
.accounting-panel {
    border-radius: 22px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06) !important;
}

.hero-panel {
    padding: 1rem 1.08rem !important;
}

.hero-panel h1,
.hero-panel h2 {
    font-size: 1.44rem !important;
    line-height: 1.18 !important;
}

.hero-panel > p:last-of-type {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    max-width: 920px;
}

.hero-badges {
    gap: 0.45rem !important;
}

.hero-badge {
    padding: 0.48rem 0.82rem !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
}

.mini-card,
.manager-box {
    border-radius: 18px !important;
    padding: 0.9rem 0.92rem !important;
}

.mini-card h5,
.table-wrap h5,
.notification-panel h5,
.manager-box h5 {
    font-size: 1rem !important;
    letter-spacing: -0.02em;
}

.mini-card strong {
    font-size: 1.45rem !important;
}

.table-wrap,
.notification-panel,
.manager-box {
    padding: 0.95rem 1rem !important;
}

.table-wrap .table thead th {
    font-size: 0.76rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table-wrap .table tbody td {
    font-size: 0.86rem !important;
    vertical-align: top;
}

.table-wrap .table tbody tr:hover td {
    background: rgba(239, 246, 255, 0.7) !important;
}

.form-control,
.form-select {
    min-height: 44px;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: rgba(248, 250, 252, 0.96) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

textarea.form-control {
    min-height: 110px;
}

.btn {
    border-radius: 14px !important;
    font-weight: 700 !important;
}

.product-inline-chip,
.approval-chip,
.movement-preview-chip {
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.stock-in-preview-dialog,
.stock-out-preview-dialog,
.ai-quality-dialog,
.record-detail-drawer-panel {
    border-radius: 24px !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2) !important;
}

.stock-in-preview-row,
.stock-out-preview-item,
.approval-preview-row {
    border-radius: 18px !important;
}

html[data-theme="dark"] .sidebar-panel,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .manager-box,
html[data-theme="dark"] .workspace-fold-shell,
html[data-theme="dark"] .task-detail-card,
html[data-theme="dark"] .record-detail-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .accounting-panel {
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.28) !important;
}

.page-approvals .hero-panel {
    padding: 1rem 1.08rem;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.page-approvals .hero-panel h2 {
    font-size: 1.42rem;
    margin-bottom: 0.28rem !important;
    max-width: 920px;
}

.page-approvals .hero-panel > p:last-of-type {
    font-size: 0.88rem;
    max-width: 920px;
    margin-bottom: 0.16rem !important;
}

.page-approvals .hero-badges {
    gap: 0.42rem;
}

.page-approvals #approval-summary {
    margin-bottom: 1rem !important;
}

.page-approvals #approval-summary > [class*="col-"] {
    display: flex;
}

.page-approvals .mini-card.approval-summary-trigger {
    min-height: 148px;
    border-radius: 18px;
    padding: 0.9rem 0.92rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.page-approvals .mini-card.approval-summary-trigger h5 {
    font-size: 0.98rem;
    margin-bottom: 0.18rem;
}

.page-approvals .mini-card.approval-summary-trigger strong {
    font-size: 1.7rem;
}

.page-approvals .table-wrap {
    padding: 0.9rem 0.95rem;
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.045);
}

.page-approvals .table-wrap > .d-flex:first-child {
    margin-bottom: 0.7rem !important;
}

.page-approvals .approval-filter-bar {
    padding: 0.88rem;
    border-radius: 16px;
}

.page-approvals .approval-filter-chips {
    margin-bottom: 0.7rem !important;
}

.page-approvals .approval-chip-list {
    justify-content: flex-start;
}

.page-approvals .table-wrap .table thead th {
    font-size: 0.76rem;
}

.page-approvals .table-wrap .table tbody td {
    font-size: 0.84rem;
    vertical-align: top;
}

.page-approvals .task-detail-shell {
    padding-top: 0.3rem;
}

/* Global redesign pass */
.app-layout {
    gap: 18px;
    padding: 18px;
}

.sidebar-column {
    max-width: 286px;
}

.sidebar-panel {
    gap: 16px;
    min-height: calc(100vh - 36px);
    padding: 18px 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.sidebar-brand {
    padding: 6px 4px 2px;
}

.sidebar-kicker {
    font-size: 0.68rem !important;
    letter-spacing: 0.12em;
}

.sidebar-brand h1 {
    font-size: 1rem !important;
    margin-bottom: 0.2rem;
}

.brand-subline {
    font-size: 0.78rem;
    line-height: 1.45;
}

.sidebar-launchpad,
.sidebar-nav,
.sidebar-footer {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-launchpad {
    padding: 12px 12px 10px !important;
}

.sidebar-launchpad-head {
    align-items: center;
    margin-bottom: 10px;
}

.sidebar-launchpad-head small {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.72rem;
}

.sidebar-launchpad-grid {
    gap: 8px;
}

.sidebar-launchpad-link {
    min-height: 66px;
    padding: 10px 12px;
}

.sidebar-launchpad-link span {
    font-size: 0.76rem;
    line-height: 1.3;
}

.sidebar-nav {
    padding: 8px;
    border-radius: 20px;
}

.sidebar-group-block {
    margin-bottom: 8px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.28);
}

.sidebar-parent-label {
    min-height: 48px;
    padding: 12px 13px;
}

.sidebar-parent-main span {
    font-size: 0.84rem;
    font-weight: 800;
}

.sidebar-accordion-body {
    padding: 4px 6px 8px;
}

.sidebar-accordion-body .nav-item-link {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 12px;
}

.sidebar-accordion-body .nav-item-link span {
    font-size: 0.8rem;
}

.sidebar-footer {
    padding: 12px;
    border-radius: 18px;
}

.content-shell {
    gap: 18px;
}

.content-topbar {
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05);
}

.page-kicker {
    font-size: 0.68rem !important;
    letter-spacing: 0.13em !important;
}

.page-heading {
    font-size: 1.35rem !important;
    line-height: 1.16;
    margin-bottom: 0;
}

.topbar-meta {
    gap: 10px !important;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar-meta .form-control {
    min-height: 40px;
    font-size: 0.84rem;
}

.topbar-chip {
    min-height: 38px;
    padding: 0.52rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
}

.hero-panel {
    position: relative;
    overflow: hidden;
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.04));
    pointer-events: none;
}

.hero-panel > * {
    position: relative;
}

.mini-card,
.table-wrap,
.notification-panel,
.manager-box,
.record-detail-card,
.task-detail-card,
.form-card,
.accounting-panel {
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.mini-card {
    min-height: 132px;
}

.mini-card h5 {
    line-height: 1.3;
}

.table-wrap > .d-flex:first-child,
.notification-panel > .d-flex:first-child,
.manager-box > .d-flex:first-child {
    margin-bottom: 0.85rem !important;
}

.table-wrap .table tbody td {
    padding-top: 0.82rem !important;
    padding-bottom: 0.82rem !important;
}

.stock-in-preview-dialog,
.stock-out-preview-dialog,
.approval-preview-dialog {
    border: 1px solid rgba(148, 163, 184, 0.14);
}

/* Keep one visible structure per page */
.page-index .homepage-static-overview,
.page-index .homepage-inline-editor,
.page-index .homepage-manager-drawer,
.page-index .homepage-focus-panel,
.page-index details.homepage-top-kpi,
.page-index .dashboard-widget-panel,
.page-index .manager-panel,
.page-index .stock-alarm-panel,
.page-index .vehicle-alert-panel,
.page-index .approval-summary-inline,
.page-index [data-widget-key],
.page-index #homepage-inline-preview-wrap,
.page-index #manager-decision-center,
.page-index .home-lite-summary-bar + .row.g-4.mb-4 > .col-xl-8:last-child,
.page-index .home-lite-summary-bar + .row.g-4.mb-4 + .row.g-4.mb-4,
.page-index .content-shell > section:not(.home-lite-shell) {
    display: none !important;
}

.page-index .home-lite-shell {
    display: block !important;
    margin-top: 0 !important;
}

.page-index .home-lite-head {
    margin-bottom: 18px !important;
}

.page-index .home-lite-head-meta {
    display: none !important;
}

.page-index .home-lite-summary-bar {
    margin-bottom: 18px !important;
}

.page-messages #messages-summary-panel,
.page-messages .manager-panel[data-section-key="summary"],
.page-messages .table-wrap[data-section-key="summary"],
.page-messages section.hero-panel[data-section-key="hero"],
.page-messages .manager-box[data-message-preview-key="approval"],
.page-messages .hero-badges,
.page-messages section.hero-panel.mb-4,
.page-messages #messages-workspace-panel,
.page-messages [data-section-key="compose"],
.page-messages [data-section-key="list"],
.page-messages .messages-preview-card,
.page-messages [data-task-tabs="messages-center-tabs"],
.page-messages [data-task-tabs="messages-workspace-tabs"] {
    display: none !important;
}

.page-messages .messages-stable-shell,
.page-messages .messages-live-dock {
    display: block !important;
}

.page-messages .messages-stable-grid {
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
    gap: 18px !important;
}

.page-messages .messages-stable-thread {
    grid-template-columns: minmax(0, 1fr) 360px !important;
}

.page-messages .messages-stable-item,
.page-messages .messages-stable-preview-item,
.page-messages .messages-live-bubble {
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.page-notifications .notifications-workbench-chip,
.page-notifications #notification-focus-panel,
.page-notifications .hero-badges,
.page-notifications .notifications-workbench,
.page-notifications [data-task-tab="notification-modules"],
.page-notifications [data-task-tab="notification-filters-pane"],
.page-notifications [data-task-pane="notification-modules"],
.page-notifications [data-task-pane="notification-filters-pane"],
.page-notifications .task-detail-tablist,
.page-notifications .notification-filter-bar + .notification-filter-bar {
    display: none !important;
}

.page-notifications #notification-summary-panel .task-detail-pane[data-task-pane="notification-overview"],
.page-notifications #notification-feed-panel .task-detail-pane[data-task-pane="notification-active-feed"] {
    display: block !important;
}

.page-notifications #notification-summary-panel,
.page-notifications #notification-feed-panel {
    padding: 1rem 1.05rem !important;
}

.page-notifications .notification-feed-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px !important;
}

.page-notifications .notification-box {
    min-height: 220px;
    border-radius: 18px !important;
}

.page-notifications .notification-action-row {
    margin-top: auto;
}

.page-personal_hub .hero-badges,
.page-personal_hub .notification-panel.dashboard-widget-panel,
.page-personal_hub .mini-card.personal-record-card small,
.page-personal_hub .table-wrap[data-section-key="notes_list"] .d-flex.justify-content-between.align-items-center,
.page-personal_hub .task-detail-tablist {
    display: none !important;
}

.page-personal_hub .personal-hub-quickbar {
    margin-bottom: 14px !important;
}

.page-personal_hub .personal-hub-workspace,
.page-personal_hub .personal-hub-lists {
    padding: 1rem 1.05rem !important;
}

.page-personal_hub .task-detail-pane {
    display: block !important;
}

.page-personal_hub [data-task-pane="personal-reminder-pane"],
.page-personal_hub [data-task-pane="personal-task-pane"],
.page-personal_hub [data-task-pane="personal-reminders-list-pane"],
.page-personal_hub [data-task-pane="personal-tasks-list-pane"] {
    display: none !important;
}

.page-approvals .hero-badges,
.page-approvals .approval-filter-chips,
.page-approvals .table-wrap .d-flex.justify-content-between.align-items-center.flex-wrap.gap-2.mb-3 .product-inline-chip {
    display: none !important;
}

.page-approvals .table-wrap + .table-wrap {
    display: none !important;
}

.page-stock_in .hero-panel,
.page-stock_out .hero-panel {
    margin-bottom: 16px !important;
}

.page-stock_in .form-card,
.page-stock_out .form-card {
    padding: 1rem 1.05rem !important;
}

.page-stock_in .table-wrap,
.page-stock_out .table-wrap {
    padding: 1rem 1.05rem !important;
}

.page-accounting .accounting-workbench,
.page-accounting .module-priority-strip,
.page-accounting #accountingSectionToggle,
.page-accounting #accountingSectionBody,
.page-accounting #accountingSectionManager,
.page-accounting #accountingLiveSectionOrderForm,
.page-accounting .live-section-drag-handle,
.page-accounting .accounting-fold {
    display: none !important;
}

.page-accounting .hero-panel.accounting-panel,
.page-accounting .accounting-row,
.page-accounting .accounting-panel,
.page-accounting .table-wrap.accounting-panel {
    margin-bottom: 16px !important;
}

.page-accounting .task-detail-tablist {
    gap: 8px !important;
    overflow-x: auto;
    padding-bottom: 4px;
}

.page-accounting .task-detail-tab {
    white-space: nowrap;
}

.page-index .home-lite-summary-pill,
.page-notifications .notifications-mini-trigger,
.page-approvals .approval-summary-trigger,
.page-messages .module-inline-preview-card,
.page-personal_hub .personal-record-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-index .home-lite-summary-pill:hover,
.page-notifications .notifications-mini-trigger:hover,
.page-approvals .approval-summary-trigger:hover,
.page-messages .module-inline-preview-card:hover,
.page-personal_hub .personal-record-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.26) !important;
}

html[data-theme="dark"] .content-topbar {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(71, 85, 105, 0.36);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.32);
}

html[data-theme="dark"] .sidebar-launchpad,
html[data-theme="dark"] .sidebar-nav,
html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .manager-box,
html[data-theme="dark"] .record-detail-card,
html[data-theme="dark"] .task-detail-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .accounting-panel {
    border-color: rgba(71, 85, 105, 0.32);
}
.depot-shell {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.depot-shell-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 26%),
        linear-gradient(135deg, #0f3b52 0%, #116d74 48%, #1ec8bb 100%);
    color: #fff;
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.14);
}

.depot-shell-kicker {
    margin: 0 0 8px;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    font-weight: 700;
}

.depot-shell-hero h1 {
    margin: 0 0 6px;
    font-size: 1.55rem;
    line-height: 1.08;
    color: #fff;
}

.depot-shell-hero p {
    margin: 0;
    max-width: 760px;
    color: rgba(255,255,255,.82);
    font-size: .92rem;
    line-height: 1.45;
}

.depot-shell-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    gap: 10px;
    min-width: min(420px, 45%);
}

.depot-shell-stat {
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
}

.depot-shell-stat span {
    display: block;
    margin-bottom: 4px;
    font-size: .72rem;
    color: rgba(255,255,255,.72);
}

.depot-shell-stat strong {
    display: block;
    font-size: .96rem;
    line-height: 1.16;
    color: #fff;
    overflow-wrap: anywhere;
}

.depot-shell-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.depot-shell-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(194, 225, 233, 0.95);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,248,251,.98));
    color: #36536b;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.depot-shell-link:hover,
.depot-shell-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(32, 196, 183, 0.35);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    color: #0f766e;
}

.depot-shell-link.is-active {
    background: linear-gradient(135deg, #0ea5a0, #24c3b7);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(14, 165, 160, 0.18);
}

@media (max-width: 1199px) {
    .depot-shell-hero {
        flex-direction: column;
    }

    .depot-shell-stats {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .depot-shell-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .depot-shell-hero h1 {
        font-size: 1.32rem;
    }
}

/* Refreshed detail workspace */
.page-record_detail .record-detail-shell {
    gap: 16px;
}

.page-record_detail .record-detail-toolbar {
    position: sticky;
    top: 12px;
    z-index: 20;
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
}

.page-record_detail .record-detail-toolbar::before {
    content: "Detay";
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.7rem;
    border-radius: 7px;
    background: linear-gradient(135deg, #0f172a, #334155);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
}

.page-record_detail .record-detail-toolbar .btn,
.page-record_detail .record-detail-page-summary-actions .btn,
.page-record_detail .record-detail-form-actions .btn {
    border-radius: 7px;
    font-weight: 800;
}

.page-record_detail .record-detail-card {
    border-radius: 8px;
    border-color: rgba(99, 116, 139, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.page-record_detail .record-detail-card:hover {
    border-color: rgba(20, 184, 166, 0.22);
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.1);
}

.page-record_detail .record-detail-card-summary {
    position: relative;
    overflow: hidden;
    border: 0;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.96), rgba(20, 184, 166, 0.9) 52%, rgba(37, 99, 235, 0.88));
    color: #fff;
}

.page-record_detail .record-detail-card-summary::after {
    content: "";
    position: absolute;
    inset: auto -8% -55% 42%;
    height: 220px;
    background: rgba(255, 255, 255, 0.16);
    transform: rotate(-8deg);
    pointer-events: none;
}

.page-record_detail .record-detail-card-summary .record-detail-card-body {
    position: relative;
    z-index: 1;
    padding: 14px 16px;
}

.page-record_detail .record-detail-page-summary h3 {
    color: #fff;
    font-size: 1.08rem;
    letter-spacing: 0;
}

.page-record_detail .record-detail-page-summary p,
.page-record_detail .record-detail-card-summary .text-muted {
    color: rgba(255, 255, 255, 0.82) !important;
}

.page-record_detail .record-detail-meta-chip {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.page-record_detail .record-detail-card-summary .record-detail-page-summary-actions .btn {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.page-record_detail .record-detail-card-summary .record-detail-page-summary-actions .btn:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

.page-record_detail .record-detail-card-summary .record-detail-guide {
    display: none;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 8px;
}

.page-record_detail .record-detail-card-summary .record-detail-guide strong,
.page-record_detail .record-detail-card-summary .record-detail-guide span {
    color: #fff;
}

.page-record_detail .record-detail-card-summary .record-detail-guide-chip {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.page-record_detail .record-detail-layout {
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.55fr);
    gap: 14px;
}

.page-record_detail .record-detail-card-head {
    padding: 10px 14px;
}

.page-record_detail .record-detail-card-head h4 {
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0;
}

.page-record_detail .record-detail-card-head h4::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14);
    vertical-align: middle;
}

.page-record_detail .record-detail-card-head-primary {
    background: linear-gradient(135deg, #e0f2fe, #f0fdfa);
    color: #0f172a;
}

.page-record_detail .record-detail-card-head-success {
    background: linear-gradient(135deg, #dcfce7, #f0fdfa);
    color: #064e3b;
}

.page-record_detail .record-detail-card-head-warning {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    color: #78350f;
}

.page-record_detail .record-detail-card-head-info {
    background: linear-gradient(135deg, #cffafe, #e0f2fe);
    color: #155e75;
}

.page-record_detail .record-detail-facts {
    gap: 10px;
}

.page-record_detail .record-detail-fact {
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    min-height: 86px;
}

.page-record_detail .record-detail-fact:nth-child(2n) {
    background: linear-gradient(180deg, #f0fdfa, #ffffff);
}

.page-record_detail .record-detail-fact:nth-child(3n) {
    background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.page-record_detail .record-detail-fact strong {
    font-size: 1rem;
}

.page-record_detail .record-detail-source-line {
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(51, 65, 85, 0.9));
    color: #fff;
    border: 0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.page-record_detail .record-detail-source-line span,
.page-record_detail .record-detail-source-line strong {
    color: #fff;
}

.page-record_detail .record-detail-table {
    margin: 0;
}

.page-record_detail .record-detail-table th {
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    color: #334155;
    font-size: 0.72rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.page-record_detail .record-detail-table td {
    border-color: rgba(226, 232, 240, 0.9);
    padding: 0.82rem 0.9rem;
}

.page-record_detail .record-detail-table tbody tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.72);
}

.page-record_detail .record-detail-table tbody tr:hover td {
    background: rgba(20, 184, 166, 0.055);
}

.page-record_detail #record-product-stock-actions {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96) 58%, rgba(236, 254, 255, 0.94));
}

.page-record_detail #record-product-stock-actions .record-detail-form-actions {
    justify-content: flex-start;
}

.page-record_detail #record-edit-form {
    border-color: rgba(14, 165, 233, 0.24);
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,249,255,0.82));
}

.page-record_detail #record-edit-form .record-detail-card-body,
.page-record_detail #record-product-stock-actions .record-detail-card-body {
    padding: 14px;
}

.page-record_detail .record-detail-card-body {
    padding: 14px;
}

.page-record_detail .record-detail-page-summary {
    align-items: center;
}

.page-record_detail .record-detail-page-summary .record-detail-meta-chips,
.page-record_detail .record-detail-page-summary p {
    display: none;
}

.page-record_detail .record-detail-page-summary-actions {
    align-items: center;
}

.page-record_detail .record-detail-page-summary-actions .btn {
    padding: 0.42rem 0.68rem;
}

.page-record_detail .record-detail-form .form-control,
.page-record_detail .record-detail-form .form-select {
    border-radius: 7px;
    border-color: rgba(100, 116, 139, 0.32);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    min-height: 46px;
}

.page-record_detail .record-detail-form .form-control:focus,
.page-record_detail .record-detail-form .form-select:focus {
    border-color: rgba(20, 184, 166, 0.6);
    box-shadow: 0 0 0 0.22rem rgba(20, 184, 166, 0.14);
}

.page-record_detail .record-detail-guide {
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(236, 254, 255, 0.9), rgba(248, 250, 252, 0.98));
    border-color: rgba(14, 165, 233, 0.18);
    box-shadow: inset 3px 0 0 rgba(20, 184, 166, 0.55);
}

.page-record_detail .record-detail-guide-chip {
    border-radius: 6px;
    background: #ffffff;
    border-color: rgba(20, 184, 166, 0.22);
    color: #0f766e;
}

.page-record_detail .record-detail-drawer-dialog {
    width: min(900px, calc(100vw - 18px));
}

.page-record_detail .record-detail-drawer .record-detail-card {
    border-radius: 8px 0 0 8px;
}

.page-record_detail .record-detail-drawer .record-detail-card-head-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #fff;
}

.page-record_detail .record-detail-drawer .record-detail-card-head-info {
    background: linear-gradient(135deg, #0891b2, #2563eb);
    color: #fff;
}

.page-record_detail .record-detail-drawer .record-detail-card-head-info .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

.page-record_detail .record-detail-drawer .record-detail-card-head-warning .btn,
.page-record_detail .record-detail-drawer .record-detail-card-head-info .btn {
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.page-record_detail #recordProductHistoryModal .record-message-thread-list {
    display: grid;
    gap: 10px;
}

.page-record_detail #recordProductHistoryModal .record-message-thread-item {
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    padding: 12px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.page-record_detail #recordProductHistoryModal .record-message-thread-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}

.page-record_detail #recordProductHistoryModal .record-message-thread-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.page-record_detail #recordProductHistoryModal .record-message-thread-head strong {
    color: #0f172a;
}

.page-record_detail #recordProductHistoryModal .record-message-thread-head span {
    color: #64748b;
    font-size: 0.82rem;
}

.page-record_detail #recordProductHistoryModal .record-message-thread-body {
    color: #334155;
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .page-record_detail .record-detail-toolbar {
        position: static;
    }

    .page-record_detail .record-detail-layout {
        grid-template-columns: 1fr;
    }

    .page-record_detail .record-detail-card-info {
        position: static;
    }
}

/* Personal hub 2026 refresh */
.page-personal_hub .personal-command-shell {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    background:
        radial-gradient(circle at 10% 10%, rgba(45, 212, 191, 0.28), transparent 32%),
        radial-gradient(circle at 92% 20%, rgba(56, 189, 248, 0.22), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 253, 245, 0.94));
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.08);
}

.page-personal_hub .personal-command-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: stretch;
}

.page-personal_hub .personal-command-copy {
    min-height: 180px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(14px);
}

.page-personal_hub .personal-command-copy h2 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.05em;
}

.page-personal_hub .personal-command-copy p:not(.page-kicker) {
    max-width: 780px;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 16px;
}

.page-personal_hub .personal-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-personal_hub .personal-command-actions .btn {
    min-height: 42px;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.page-personal_hub .personal-command-profile {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(20, 184, 166, 0.82));
    color: #fff;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.18);
}

.page-personal_hub .personal-command-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    overflow: hidden;
}

.page-personal_hub .personal-command-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-personal_hub .personal-command-avatar span {
    font-size: 2rem;
    font-weight: 900;
}

.page-personal_hub .personal-command-profile span,
.page-personal_hub .personal-command-profile small {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.78rem;
}

.page-personal_hub .personal-command-profile strong {
    display: block;
    color: #fff;
    font-size: 1.08rem;
    margin: 2px 0 4px;
}

.page-personal_hub .personal-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.page-personal_hub .personal-metric-card {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    border: 0;
    border-radius: 18px;
    padding: 16px;
    text-align: left;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-personal_hub .personal-metric-card::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -35px;
    width: 105px;
    height: 105px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
}

.page-personal_hub .personal-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
}

.page-personal_hub .personal-metric-card span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.86;
}

.page-personal_hub .personal-metric-card strong {
    display: block;
    margin: 10px 0 4px;
    font-size: 2rem;
    line-height: 1;
    color: inherit;
}

.page-personal_hub .personal-metric-card small {
    color: inherit;
    opacity: 0.72;
    font-weight: 700;
}

.page-personal_hub .personal-metric-card.is-blue {
    background: linear-gradient(135deg, #dbeafe, #ffffff);
    color: #1d4ed8;
}

.page-personal_hub .personal-metric-card.is-amber {
    background: linear-gradient(135deg, #fef3c7, #ffffff);
    color: #b45309;
}

.page-personal_hub .personal-metric-card.is-red {
    background: linear-gradient(135deg, #fee2e2, #ffffff);
    color: #b91c1c;
}

.page-personal_hub .personal-metric-card.is-green {
    background: linear-gradient(135deg, #dcfce7, #ffffff);
    color: #047857;
}

.page-personal_hub .personal-flow-board {
    border-radius: 22px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.065);
}

.page-personal_hub .personal-flow-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.page-personal_hub .personal-flow-head h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
}

.page-personal_hub .personal-flow-list {
    display: grid;
    gap: 9px;
}

.page-personal_hub .personal-flow-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.page-personal_hub .personal-flow-row.is-danger {
    background: linear-gradient(90deg, rgba(254, 226, 226, 0.9), rgba(255, 255, 255, 0.94));
}

.page-personal_hub .personal-flow-row.is-warning {
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.9), rgba(255, 255, 255, 0.94));
}

.page-personal_hub .personal-flow-row.is-safe {
    background: linear-gradient(90deg, rgba(220, 252, 231, 0.82), rgba(255, 255, 255, 0.94));
}

.page-personal_hub .personal-flow-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
}

.page-personal_hub .personal-flow-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-personal_hub .personal-flow-copy span {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.page-personal_hub .personal-flow-copy strong {
    color: #0f172a;
    font-size: 0.94rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-personal_hub .personal-flow-copy small {
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-personal_hub .personal-flow-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-personal_hub .personal-hub-workspace,
.page-personal_hub .personal-hub-lists {
    max-width: none !important;
    border-radius: 22px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06) !important;
}

.page-personal_hub .task-detail-tablist {
    display: flex !important;
    flex-wrap: wrap;
}

.page-personal_hub .task-detail-pane {
    display: none !important;
}

.page-personal_hub .task-detail-pane.active,
.page-personal_hub .task-detail-pane.is-active {
    display: block !important;
}

.page-personal_hub .task-detail-pane[hidden] {
    display: none !important;
}

.page-personal_hub .form-card {
    border-radius: 18px !important;
    padding: 16px !important;
}

.page-personal_hub .form-card .form-control,
.page-personal_hub .form-card .form-select {
    min-height: 44px;
    border-radius: 13px;
    background: #f8fafc;
    border-color: rgba(100, 116, 139, 0.22);
    font-weight: 700;
}

.page-personal_hub .form-card textarea.form-control {
    min-height: 118px;
}

.page-personal_hub .personal-record-card {
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.13) !important;
}

.page-personal_hub .personal-hub-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1080 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    background: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(8px);
}

.page-personal_hub .personal-hub-modal-backdrop[hidden] {
    display: none !important;
}

.page-personal_hub .personal-hub-modal {
    width: min(780px, calc(100vw - 28px)) !important;
    max-height: min(720px, calc(100vh - 44px)) !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    box-shadow: 0 34px 78px rgba(15, 23, 42, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
}

.page-personal_hub .personal-hub-modal-head {
    padding: 18px 20px !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(45, 212, 191, 0.28), transparent 34%),
        linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(240, 253, 250, 0.94));
    border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.page-personal_hub .personal-hub-modal-body {
    padding: 16px !important;
    overflow: auto !important;
    max-height: calc(min(720px, 100vh - 44px) - 94px) !important;
}

.page-personal_hub .personal-hub-modal-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 13px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.page-personal_hub .personal-hub-modal-row + .personal-hub-modal-row {
    margin-top: 10px;
}

.page-personal_hub .personal-hub-modal-row.is-danger {
    background: linear-gradient(90deg, rgba(254, 226, 226, 0.86), #fff) !important;
}

.page-personal_hub .personal-hub-modal-row.is-warning {
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.86), #fff) !important;
}

.page-personal_hub .personal-hub-modal-row.is-safe {
    background: linear-gradient(90deg, rgba(220, 252, 231, 0.8), #fff) !important;
}

.page-personal_hub .personal-hub-modal-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
}

.page-personal_hub .personal-hub-modal-action {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.page-personal_hub .personal-hub-modal-action em {
    font-style: normal;
}

@media (max-width: 991.98px) {
    .page-personal_hub .personal-command-hero,
    .page-personal_hub .personal-metric-grid {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-flow-row,
    .page-personal_hub .personal-hub-modal-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .page-personal_hub .personal-flow-status,
    .page-personal_hub .personal-hub-modal-action {
        grid-column: 2;
        justify-content: flex-start;
        justify-items: start;
    }
}

/* Personal private workspace reset */
.page-personal_hub .personal-private-shell {
    border-radius: 24px;
    padding: 18px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    background:
        radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.28), transparent 34%),
        radial-gradient(circle at 92% 20%, rgba(251, 191, 36, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.09);
}

.page-personal_hub .personal-private-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: stretch;
}

.page-personal_hub .personal-private-hero > div:first-child {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(14px);
}

.page-personal_hub .personal-private-hero h2 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -0.055em;
}

.page-personal_hub .personal-private-hero p:not(.page-kicker) {
    max-width: 880px;
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.58;
    margin-bottom: 16px;
}

.page-personal_hub .personal-private-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-personal_hub .personal-private-actions .btn {
    min-height: 42px;
    border-radius: 14px;
    font-weight: 850;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.page-personal_hub .personal-private-status {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 20px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(145deg, #0f172a, #0f766e);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.22);
}

.page-personal_hub .personal-private-status span,
.page-personal_hub .personal-private-status small {
    color: rgba(255, 255, 255, 0.76);
    font-weight: 750;
}

.page-personal_hub .personal-private-status strong {
    color: #fff;
    font-size: 3.2rem;
    line-height: 1;
}

.page-personal_hub .personal-private-status em {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 800;
}

.page-personal_hub .personal-private-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.page-personal_hub .personal-private-metric {
    border: 0;
    border-radius: 18px;
    min-height: 112px;
    padding: 15px;
    text-align: left;
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-personal_hub .personal-private-metric:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 46px rgba(15, 23, 42, 0.13);
}

.page-personal_hub .personal-private-metric span {
    display: block;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-personal_hub .personal-private-metric strong {
    display: block;
    margin: 8px 0 4px;
    font-size: 2rem;
    line-height: 1;
}

.page-personal_hub .personal-private-metric small {
    color: inherit;
    opacity: 0.72;
    font-weight: 750;
}

.page-personal_hub .personal-private-metric.is-amber {
    background: linear-gradient(135deg, #fef3c7, #fff);
    color: #b45309;
}

.page-personal_hub .personal-private-metric.is-blue {
    background: linear-gradient(135deg, #dbeafe, #fff);
    color: #1d4ed8;
}

.page-personal_hub .personal-private-metric.is-green {
    background: linear-gradient(135deg, #dcfce7, #fff);
    color: #047857;
}

.page-personal_hub .personal-private-metric.is-red {
    background: linear-gradient(135deg, #fee2e2, #fff);
    color: #b91c1c;
}

.page-personal_hub .personal-private-board,
.page-personal_hub .personal-workbench,
.page-personal_hub .personal-list-card {
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.065);
}

.page-personal_hub .personal-private-board,
.page-personal_hub .personal-workbench {
    padding: 16px;
}

.page-personal_hub .personal-focus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 14px;
}

.page-personal_hub .personal-critical-band {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 14px;
    align-items: center;
    padding: 15px;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 96% 0%, rgba(251, 191, 36, 0.28), transparent 28%),
        linear-gradient(135deg, #7f1d1d, #dc2626);
    box-shadow: 0 24px 48px rgba(220, 38, 38, 0.18);
}

.page-personal_hub .personal-critical-band span,
.page-personal_hub .personal-critical-band strong,
.page-personal_hub .personal-critical-band small {
    display: block;
}

.page-personal_hub .personal-critical-band span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-personal_hub .personal-critical-band strong {
    margin-top: 4px;
    font-size: 1.18rem;
    font-weight: 950;
}

.page-personal_hub .personal-critical-band small {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 750;
}

.page-personal_hub .personal-critical-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.page-personal_hub .personal-critical-actions button {
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    text-align: left;
    font-weight: 900;
}

.page-personal_hub .personal-critical-actions button:hover {
    background: rgba(255, 255, 255, 0.22);
}

.page-personal_hub .personal-critical-actions button em {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    font-style: normal;
}

.page-personal_hub .personal-critical-actions button.is-all {
    min-width: auto;
    place-items: center;
    text-align: center;
}

.page-personal_hub .personal-focus-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 13px;
    min-height: 252px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.07);
}

.page-personal_hub .personal-focus-card::after {
    content: "";
    position: absolute;
    right: -52px;
    top: -58px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.page-personal_hub .personal-focus-card.is-today {
    background:
        radial-gradient(circle at 6% 4%, rgba(20, 184, 166, 0.28), transparent 26%),
        linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(255, 255, 255, 0.98));
}

.page-personal_hub .personal-focus-card.is-late {
    background:
        radial-gradient(circle at 8% 0%, rgba(248, 113, 113, 0.24), transparent 25%),
        linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.page-personal_hub .personal-focus-card.is-calendar {
    background:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.22), transparent 24%),
        linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.page-personal_hub .personal-focus-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.page-personal_hub .personal-focus-head h5 {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-focus-head > strong {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.24);
}

.page-personal_hub .personal-focus-card.is-late .personal-focus-head > strong {
    background: linear-gradient(135deg, #dc2626, #fb7185);
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.2);
}

.page-personal_hub .personal-focus-card.is-calendar .personal-focus-head > strong {
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2);
}

.page-personal_hub .personal-focus-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
}

.page-personal_hub .personal-focus-list button {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-personal_hub .personal-focus-list button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.09);
}

.page-personal_hub .personal-focus-list strong {
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-focus-list small {
    color: #64748b;
    font-weight: 750;
}

.page-personal_hub .personal-mini-calendar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.page-personal_hub .personal-calendar-month-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(240, 253, 250, 0.86);
    border: 1px solid rgba(20, 184, 166, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.page-personal_hub .personal-calendar-month-controls a,
.page-personal_hub .personal-calendar-month-controls strong {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 950;
}

.page-personal_hub .personal-calendar-month-controls a {
    color: #0f766e;
    background: #fff;
    border: 1px solid rgba(20, 184, 166, 0.18);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.page-personal_hub .personal-calendar-month-controls a:hover {
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.page-personal_hub .personal-calendar-month-controls strong {
    min-width: 34px;
    color: #0f172a;
    background: linear-gradient(135deg, #ccfbf1, #e0f2fe);
}

.page-personal_hub .personal-mini-calendar span {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 900;
    text-align: center;
}

.page-personal_hub .personal-mini-calendar em {
    min-height: 42px;
}

.page-personal_hub .personal-mini-calendar button {
    position: relative;
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    color: #334155;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.page-personal_hub .personal-mini-calendar button[data-personal-calendar-day] {
    color: #334155;
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(135deg, #fff, rgba(248, 250, 252, 0.94));
}

.page-personal_hub .personal-mini-calendar button.is-today {
    color: #78350f;
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.page-personal_hub .personal-mini-calendar button.is-late {
    color: #7f1d1d;
    border-color: rgba(239, 68, 68, 0.42);
    background: linear-gradient(135deg, #fee2e2, #fff1f2);
}

.page-personal_hub .personal-mini-calendar button.is-upcoming {
    color: #065f46;
    border-color: rgba(16, 185, 129, 0.42);
    background: linear-gradient(135deg, #dcfce7, #ecfdf5);
}

.page-personal_hub .personal-mini-calendar button small {
    position: absolute;
    right: 5px;
    top: 4px;
    min-width: 17px;
    min-height: 17px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #f97316;
    font-size: 0.62rem;
}

.page-personal_hub .personal-calendar-dots {
    position: absolute;
    left: 7px;
    bottom: 6px;
    display: inline-flex;
    gap: 3px;
    align-items: center;
}

.page-personal_hub .personal-calendar-dots i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.page-personal_hub .personal-calendar-dots i.is-reminder {
    background: #f97316;
}

.page-personal_hub .personal-calendar-dots i.is-routine {
    background: #2563eb;
}

.page-personal_hub .personal-calendar-dots i.is-note {
    background: #14b8a6;
}

.page-personal_hub .personal-priority-board {
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(251, 146, 60, 0.16), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.07);
}

.page-personal_hub .personal-priority-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.page-personal_hub .personal-priority-column {
    padding: 12px;
    border-radius: 21px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.page-personal_hub .personal-priority-column.is-urgent {
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.82), rgba(255, 255, 255, 0.88));
}

.page-personal_hub .personal-priority-column.is-high {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(255, 255, 255, 0.88));
}

.page-personal_hub .personal-priority-column.is-normal {
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.82), rgba(255, 255, 255, 0.88));
}

.page-personal_hub .personal-priority-column.is-low {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.78), rgba(255, 255, 255, 0.88));
}

.page-personal_hub .personal-priority-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.page-personal_hub .personal-priority-column-head strong {
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-priority-column-head span {
    min-width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    font-weight: 950;
}

.page-personal_hub .personal-priority-column-list {
    display: grid;
    gap: 8px;
}

.page-personal_hub .personal-priority-column-list button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    text-align: left;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-personal_hub .personal-priority-column-list button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.085);
}

.page-personal_hub .personal-priority-column-list i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.page-personal_hub .personal-priority-column-list strong {
    display: block;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-personal_hub .personal-priority-column-list small {
    display: block;
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-personal_hub .personal-template-strip,
.page-personal_hub .personal-task-board {
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 0 0, rgba(20, 184, 166, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94));
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.075);
}

.page-personal_hub .personal-template-head,
.page-personal_hub .personal-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.page-personal_hub .personal-template-head h5,
.page-personal_hub .personal-board-head h5 {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-template-head span,
.page-personal_hub .personal-board-head > span {
    padding: 7px 11px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.1);
    font-size: 0.76rem;
    font-weight: 900;
}

.page-personal_hub .personal-template-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.page-personal_hub .personal-template-grid button {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 8px;
    min-height: 104px;
    padding: 14px;
    border: 1px solid rgba(20, 184, 166, 0.13);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(240, 253, 250, 0.94), rgba(255, 255, 255, 0.98));
    color: #0f172a;
    text-align: left;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.045);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-personal_hub .personal-template-grid button:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.34);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.09);
}

.page-personal_hub .personal-template-grid i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 12px 22px rgba(20, 184, 166, 0.22);
}

.page-personal_hub .personal-template-grid strong {
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-template-grid small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.page-personal_hub .personal-task-board-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.page-personal_hub .personal-task-column {
    min-height: 214px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.page-personal_hub .personal-task-column.is-today {
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.72), rgba(255, 255, 255, 0.86));
}

.page-personal_hub .personal-task-column.is-upcoming {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.72), rgba(255, 255, 255, 0.86));
}

.page-personal_hub .personal-task-column.is-late {
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.76), rgba(255, 255, 255, 0.86));
}

.page-personal_hub .personal-task-column.is-done {
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.72), rgba(255, 255, 255, 0.86));
}

.page-personal_hub .personal-task-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.page-personal_hub .personal-task-column-head strong {
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-task-column-head span {
    min-width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.2);
}

.page-personal_hub .personal-task-column-list {
    display: grid;
    gap: 8px;
}

.page-personal_hub .personal-task-column-list button {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    text-align: left;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-personal_hub .personal-task-column-list button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.085);
}

.page-personal_hub .personal-task-column-list strong {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 950;
}

.page-personal_hub .personal-task-column-list small {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.page-personal_hub .personal-task-column-list .personal-empty-mini,
.page-personal_hub .personal-priority-column-list .personal-empty-mini {
    display: grid;
    min-height: 96px;
    place-items: center;
    border: 1px dashed rgba(148, 163, 184, 0.32);
    border-radius: 17px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.54);
    font-size: 0.78rem;
    font-weight: 850;
    text-align: center;
}

.page-personal_hub .personal-visual-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.page-personal_hub .personal-visual-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 116px;
    padding: 16px;
    border: 0;
    border-radius: 22px;
    text-align: left;
    color: #0f172a;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-personal_hub .personal-visual-card::after {
    content: "";
    position: absolute;
    right: -36px;
    top: -44px;
    width: 128px;
    height: 128px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
}

.page-personal_hub .personal-visual-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 54px rgba(15, 23, 42, 0.13);
}

.page-personal_hub .personal-visual-card.is-focus {
    background: linear-gradient(135deg, #0f766e, #38bdf8);
    color: #fff;
}

.page-personal_hub .personal-visual-card.is-channel {
    background: linear-gradient(135deg, #dbeafe, #ffffff);
    color: #1d4ed8;
}

.page-personal_hub .personal-visual-card.is-log {
    background: linear-gradient(135deg, #fef3c7, #ffffff);
    color: #b45309;
}

.page-personal_hub .personal-visual-card.is-history {
    background: linear-gradient(135deg, #ede9fe, #ffffff);
    color: #6d28d9;
}

.page-personal_hub .personal-visual-card.is-queue {
    background: linear-gradient(135deg, #ecfeff, #ffffff);
    color: #0e7490;
}

.page-personal_hub .personal-visual-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.28);
    color: inherit;
    font-size: 1.25rem;
}

.page-personal_hub .personal-visual-card div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.page-personal_hub .personal-visual-card small {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.76;
}

.page-personal_hub .personal-visual-card strong {
    color: inherit;
    font-size: 1.02rem;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-personal_hub .personal-visual-card em {
    color: inherit;
    opacity: 0.74;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 750;
}

.page-personal_hub .personal-board-head,
.page-personal_hub .personal-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.page-personal_hub .personal-board-head h5,
.page-personal_hub .personal-list-head h5 {
    margin: 0;
    color: #0f172a;
    font-weight: 900;
}

.page-personal_hub .personal-list-head span {
    padding: 7px 10px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.1);
    font-size: 0.78rem;
    font-weight: 850;
}

.page-personal_hub .personal-private-timeline,
.page-personal_hub .personal-mini-list {
    display: grid;
    gap: 9px;
}

.page-personal_hub .personal-private-row,
.page-personal_hub .personal-private-modal-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 17px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.page-personal_hub .personal-private-row.is-danger,
.page-personal_hub .personal-private-modal-row.is-danger {
    background: linear-gradient(90deg, rgba(254, 226, 226, 0.9), rgba(255, 255, 255, 0.96));
}

.page-personal_hub .personal-private-row.is-warning,
.page-personal_hub .personal-private-modal-row.is-warning {
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.9), rgba(255, 255, 255, 0.96));
}

.page-personal_hub .personal-private-row.is-safe,
.page-personal_hub .personal-private-modal-row.is-safe {
    background: linear-gradient(90deg, rgba(220, 252, 231, 0.84), rgba(255, 255, 255, 0.96));
}

.page-personal_hub .personal-private-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
}

.page-personal_hub .personal-row-leading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-personal_hub .personal-bulk-check {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
}

.page-personal_hub .personal-bulk-check input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.page-personal_hub .personal-bulk-check span {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(15, 118, 110, 0.22);
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 0 0 3px #fff;
}

.page-personal_hub .personal-bulk-check input:checked + span {
    background: #0f766e;
    border-color: #0f766e;
}

.page-personal_hub .personal-priority-pill {
    width: max-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    color: #475569;
    background: rgba(148, 163, 184, 0.12);
    font-size: 0.68rem !important;
    font-weight: 950 !important;
}

.page-personal_hub .personal-priority-pill.is-low {
    color: #0369a1;
    background: rgba(186, 230, 253, 0.8);
}

.page-personal_hub .personal-priority-pill.is-normal {
    color: #0f766e;
    background: rgba(204, 251, 241, 0.9);
}

.page-personal_hub .personal-priority-pill.is-high {
    color: #b45309;
    background: rgba(254, 243, 199, 0.95);
}

.page-personal_hub .personal-priority-pill.is-urgent {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.95);
}

.page-personal_hub .personal-private-copy,
.page-personal_hub .personal-private-modal-row > div:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-personal_hub .personal-private-copy span,
.page-personal_hub .personal-private-modal-row span {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 850;
}

.page-personal_hub .personal-private-copy strong,
.page-personal_hub .personal-private-modal-row strong,
.page-personal_hub .personal-mini-list strong {
    color: #0f172a;
    font-weight: 900;
}

.page-personal_hub .personal-private-copy small,
.page-personal_hub .personal-private-modal-row small {
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-personal_hub .personal-channel-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.page-personal_hub .personal-channel-line em {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 850;
}

.page-personal_hub .personal-private-controls,
.page-personal_hub .personal-private-modal-actions,
.page-personal_hub .personal-inline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.page-personal_hub .personal-workbench-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px;
    border-radius: 17px;
    background: rgba(241, 245, 249, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-personal_hub .personal-workbench-tabs button {
    border: 0;
    border-radius: 13px;
    min-height: 40px;
    padding: 0 16px;
    color: #475569;
    background: rgba(255, 255, 255, 0.78);
    font-weight: 900;
}

.page-personal_hub .personal-workbench-tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.16);
}

.page-personal_hub .personal-pane {
    display: none;
}

.page-personal_hub .personal-pane.active {
    display: block;
}

.page-personal_hub .personal-form-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border-radius: 19px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    background:
        radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 24%),
        #fff;
}

.page-personal_hub .personal-form-card h5 {
    color: #0f172a;
    font-weight: 900;
}

.page-personal_hub .personal-grid-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.page-personal_hub .personal-grid-form label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 850;
}

.page-personal_hub .personal-grid-form .form-control,
.page-personal_hub .personal-grid-form .form-select {
    min-height: 44px;
    border-radius: 13px;
    border-color: rgba(100, 116, 139, 0.24);
    background: #f8fafc;
    font-weight: 750;
}

.page-personal_hub .personal-grid-form select[multiple].form-select {
    min-height: 92px;
    padding: 9px;
}

.page-personal_hub .personal-grid-form label small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
}

.page-personal_hub .personal-grid-form textarea.form-control {
    min-height: 118px;
}

.page-personal_hub .personal-span-2,
.page-personal_hub .personal-channel-picker,
.page-personal_hub .personal-quick-intervals {
    grid-column: 1 / -1;
}

.page-personal_hub .personal-channel-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(240, 253, 250, 0.8);
    border: 1px solid rgba(20, 184, 166, 0.16);
}

.page-personal_hub .personal-quick-intervals {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(239, 246, 255, 0.86));
    border: 1px solid rgba(20, 184, 166, 0.16);
}

.page-personal_hub .personal-quick-intervals span {
    margin-right: auto;
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 950;
}

.page-personal_hub .personal-quick-intervals button {
    min-height: 34px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 999px;
    padding: 0 12px;
    color: #0f766e;
    background: #fff;
    font-size: 0.76rem;
    font-weight: 900;
}

.page-personal_hub .personal-quick-intervals button:hover {
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.page-personal_hub .personal-channel-picker label,
.page-personal_hub .personal-repeat-check {
    display: inline-flex !important;
    align-items: center;
    gap: 7px !important;
    margin: 0;
}

.page-personal_hub .personal-lists-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.page-personal_hub .personal-list-card {
    padding: 15px;
}

.page-personal_hub .personal-mini-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.88);
}

.page-personal_hub .personal-mini-list article > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-personal_hub .personal-mini-list span {
    color: #64748b;
    font-size: 0.76rem;
}

.page-personal_hub .personal-private-empty {
    padding: 18px;
    border-radius: 17px;
    color: #64748b;
    background: rgba(241, 245, 249, 0.72);
    border: 1px dashed rgba(148, 163, 184, 0.28);
    font-weight: 750;
}

.page-personal_hub .personal-private-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 22px !important;
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(8px);
}

.page-personal_hub .personal-private-modal-backdrop[hidden] {
    display: none !important;
}

.page-personal_hub .personal-private-modal {
    position: relative !important;
    width: min(820px, calc(100vw - 28px)) !important;
    max-height: min(740px, calc(100vh - 44px)) !important;
    overflow: hidden !important;
    margin: auto !important;
    transform: none !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.34) !important;
}

.page-personal_hub .personal-private-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(240, 253, 250, 0.96));
}

.page-personal_hub .personal-private-modal-head strong {
    display: block;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.page-personal_hub .personal-private-modal-head span {
    color: #64748b;
    font-size: 0.82rem;
}

.page-personal_hub .personal-private-modal-body {
    display: grid;
    gap: 10px;
    max-height: calc(min(740px, 100vh - 44px) - 86px);
    overflow: auto;
    padding: 16px;
}

.page-personal_hub .personal-private-modal-actions b {
    color: #0f766e;
    font-size: 0.78rem;
}

.page-personal_hub .personal-detail-pop {
    display: grid;
    gap: 14px;
}

.page-personal_hub .personal-detail-pop-hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #0f172a, #0f766e);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.18);
}

.page-personal_hub .personal-detail-pop.is-warning .personal-detail-pop-hero {
    background: linear-gradient(135deg, #92400e, #f59e0b);
}

.page-personal_hub .personal-detail-pop.is-danger .personal-detail-pop-hero {
    background: linear-gradient(135deg, #7f1d1d, #ef4444);
}

.page-personal_hub .personal-detail-pop-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.45rem;
}

.page-personal_hub .personal-detail-pop-hero span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-personal_hub .personal-detail-pop-hero h3 {
    margin: 2px 0 8px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 950;
}

.page-personal_hub .personal-detail-pop-hero b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.78rem;
}

.page-personal_hub .personal-detail-pop-note {
    padding: 16px;
    border-radius: 18px;
    color: #334155;
    background: linear-gradient(180deg, #fff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.15);
    line-height: 1.55;
    font-weight: 650;
}

.page-personal_hub .personal-detail-pop-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.page-personal_hub .personal-detail-pop-grid div {
    min-height: 82px;
    padding: 13px;
    border-radius: 17px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.13);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.page-personal_hub .personal-detail-pop-grid span {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-personal_hub .personal-detail-pop-grid strong {
    display: block;
    margin-top: 8px;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 950;
}

.page-personal_hub .personal-detail-pop-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px;
    border-radius: 18px 18px 0 0;
    background: rgba(248, 250, 252, 0.94);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(10px);
    box-shadow: 0 -18px 28px rgba(15, 23, 42, 0.08);
}

.page-personal_hub .personal-pop-form {
    margin: 0;
}

.page-personal_hub .personal-ack-note-form {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto;
    gap: 8px;
    align-items: center;
    flex: 1 1 420px;
}

.page-personal_hub .personal-ack-note-form .form-control {
    min-height: 38px;
    border-radius: 14px;
    border-color: rgba(20, 184, 166, 0.22);
    background: #fff;
    font-weight: 750;
}

.page-personal_hub .personal-ack-note-view {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: 17px;
    color: #334155;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(20, 184, 166, 0.16);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}

.page-personal_hub .personal-ack-note-view strong {
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-personal_hub .personal-ack-note-view span {
    color: #0f172a;
    font-weight: 800;
}

.page-personal_hub .personal-create-pop {
    display: grid;
    gap: 16px;
}

.page-personal_hub .personal-create-pop-hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 0%, rgba(251, 191, 36, 0.28), transparent 28%),
        linear-gradient(135deg, #0f766e, #2563eb);
    box-shadow: 0 22px 46px rgba(37, 99, 235, 0.18);
}

.page-personal_hub .personal-note-create-hero {
    background:
        radial-gradient(circle at 92% 0%, rgba(52, 211, 153, 0.28), transparent 28%),
        linear-gradient(135deg, #047857, #22c55e);
}

.page-personal_hub .personal-routine-create-hero {
    background:
        radial-gradient(circle at 92% 0%, rgba(251, 191, 36, 0.3), transparent 28%),
        linear-gradient(135deg, #92400e, #f59e0b);
}

.page-personal_hub .personal-channel-create-hero {
    background:
        radial-gradient(circle at 92% 0%, rgba(96, 165, 250, 0.32), transparent 28%),
        linear-gradient(135deg, #1d4ed8, #0f766e);
}

.page-personal_hub .personal-archive-hero {
    background:
        radial-gradient(circle at 92% 0%, rgba(251, 191, 36, 0.26), transparent 28%),
        linear-gradient(135deg, #7c3aed, #0891b2);
}

.page-personal_hub .personal-channel-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.page-personal_hub .personal-channel-health-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.055);
}

.page-personal_hub .personal-channel-health-card div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.page-personal_hub .personal-channel-health-card i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.page-personal_hub .personal-channel-health-card strong {
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-channel-health-card > span {
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.12);
    font-size: 0.76rem;
    font-weight: 900;
}

.page-personal_hub .personal-channel-health-card.is-missing > span {
    color: #b45309;
    background: rgba(254, 243, 199, 0.95);
}

.page-personal_hub .personal-channel-health-card small,
.page-personal_hub .personal-channel-health-card em {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1.4;
}

.page-personal_hub .personal-channel-health-card em {
    font-style: normal;
    word-break: break-word;
}

.page-personal_hub .personal-create-pop-hero span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-personal_hub .personal-create-pop-hero h3 {
    margin: 2px 0 6px;
    color: #fff;
    font-size: 1.28rem;
    font-weight: 950;
}

.page-personal_hub .personal-create-pop-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.86rem;
    line-height: 1.45;
}

.page-personal_hub .personal-create-form {
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-personal_hub .personal-create-pop-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    margin: 4px -14px -14px;
    border-radius: 18px 18px 0 0;
    background: rgba(248, 250, 252, 0.94);
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    backdrop-filter: blur(10px);
    box-shadow: 0 -18px 28px rgba(15, 23, 42, 0.08);
}

.page-personal_hub .personal-attachment-list {
    display: grid;
    gap: 8px;
    padding: 13px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(20, 184, 166, 0.16);
}

.page-personal_hub .personal-attachment-list > strong {
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-personal_hub .personal-attachment-list a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 14px;
    color: #0f172a;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    text-decoration: none;
    font-weight: 850;
}

.page-personal_hub .personal-attachment-list a:hover {
    color: #0f766e;
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.1);
}

.page-personal_hub .personal-attachment-list i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.page-personal_hub .personal-attachment-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-personal_hub .personal-attachment-list em {
    color: #64748b;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 800;
}

.page-personal_hub .personal-channel-info {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 15px;
    background: rgba(239, 246, 255, 0.88);
    border: 1px solid rgba(37, 99, 235, 0.14);
}

.page-personal_hub .personal-channel-info strong {
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-personal_hub .personal-channel-info span {
    color: #475569;
    font-size: 0.84rem;
    line-height: 1.45;
    font-weight: 650;
}

.page-personal_hub .personal-telegram-link-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(240, 249, 255, 0.96), rgba(236, 253, 245, 0.94));
    border: 1px solid rgba(14, 165, 233, 0.18);
    box-shadow: 0 16px 32px rgba(14, 116, 144, 0.08);
}

.page-personal_hub .personal-telegram-link-box.is-connected {
    background:
        radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.2), transparent 34%),
        linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.94));
    border-color: rgba(20, 184, 166, 0.22);
}

.page-personal_hub .personal-telegram-link-box > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.page-personal_hub .personal-telegram-link-box > div:first-child {
    display: grid;
    gap: 4px;
}

.page-personal_hub .personal-telegram-link-box strong {
    color: #075985;
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-personal_hub .personal-telegram-link-box span {
    color: #334155;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.45;
}

.page-personal_hub .personal-muted-pill {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #92400e;
    background: rgba(254, 243, 199, 0.96);
    font-size: 0.76rem;
    font-weight: 900;
}

.page-personal_hub .personal-telegram-command {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 11px;
    color: #075985;
    background: rgba(255, 255, 255, 0.82);
    border: 1px dashed rgba(14, 165, 233, 0.34);
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.page-personal_hub .personal-history-pop {
    display: grid;
    gap: 14px;
}

.page-personal_hub .personal-calendar-action-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 96% 10%, rgba(251, 191, 36, 0.22), transparent 24%),
        linear-gradient(135deg, rgba(240, 253, 250, 0.95), rgba(239, 246, 255, 0.96));
    border: 1px solid rgba(20, 184, 166, 0.18);
}

.page-personal_hub .personal-calendar-action-bar strong,
.page-personal_hub .personal-calendar-action-bar span {
    display: block;
}

.page-personal_hub .personal-calendar-action-bar strong {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
}

.page-personal_hub .personal-calendar-action-bar span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.page-personal_hub .personal-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.page-personal_hub .personal-history-summary div {
    min-height: 86px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ede9fe, #ffffff);
    border: 1px solid rgba(109, 40, 217, 0.12);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.page-personal_hub .personal-history-summary span {
    display: block;
    color: #7c3aed;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-personal_hub .personal-history-summary strong {
    display: block;
    margin-top: 8px;
    color: #4c1d95;
    font-size: 1.65rem;
    font-weight: 950;
}

.page-personal_hub .personal-history-list {
    display: grid;
    gap: 10px;
}

.page-personal_hub .personal-pop-filters {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(130px, 0.8fr));
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(240, 253, 250, 0.88));
    border: 1px solid rgba(20, 184, 166, 0.13);
}

.page-personal_hub .personal-pop-filters .personal-filter-search {
    grid-column: span 2;
}

.page-personal_hub .personal-pop-filters label {
    display: grid;
    gap: 5px;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 900;
}

.page-personal_hub .personal-pop-filters .form-control,
.page-personal_hub .personal-pop-filters .form-select {
    min-height: 40px;
    border-radius: 12px;
    border-color: rgba(100, 116, 139, 0.2);
    background-color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
}

.page-personal_hub .personal-bulk-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(15, 118, 110, 0.06);
    border: 1px dashed rgba(15, 118, 110, 0.2);
}

.page-personal_hub .personal-bulk-actions div {
    margin-right: auto;
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 950;
}

.page-personal_hub .personal-bulk-actions button {
    min-height: 34px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 999px;
    padding: 0 11px;
    color: #0f766e;
    background: #fff;
    font-size: 0.74rem;
    font-weight: 900;
}

.page-personal_hub .personal-bulk-actions button:hover {
    color: #fff;
    background: #0f766e;
}

.page-personal_hub .personal-bulk-actions button.is-danger {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.16);
}

.page-personal_hub .personal-bulk-actions button.is-danger:hover {
    color: #fff;
    background: #dc2626;
}

.page-personal_hub .personal-pop-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.95));
    border: 1px solid rgba(20, 184, 166, 0.14);
}

.page-personal_hub .personal-pop-pager span {
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 900;
}

.page-personal_hub .personal-pop-pager div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.page-personal_hub .personal-pop-pager button {
    min-width: 34px;
    min-height: 34px;
    border: 1px solid rgba(15, 118, 110, 0.16);
    border-radius: 12px;
    background: #fff;
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.page-personal_hub .personal-pop-pager button.active,
.page-personal_hub .personal-pop-pager button:hover:not(:disabled) {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    border-color: transparent;
}

.page-personal_hub .personal-pop-pager button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-personal_hub .personal-pop-pager.is-single {
    justify-content: flex-end;
}

.page-personal_hub .personal-history-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), rgba(236, 253, 245, 0.78));
    border: 1px solid rgba(15, 118, 110, 0.12);
}

.page-personal_hub .personal-history-filter-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(240, 253, 250, 0.9));
    border: 1px solid rgba(37, 99, 235, 0.14);
}

.page-personal_hub .personal-history-filter-callout strong,
.page-personal_hub .personal-history-filter-callout span {
    display: block;
}

.page-personal_hub .personal-history-filter-callout strong {
    color: #1d4ed8;
    font-weight: 950;
}

.page-personal_hub .personal-history-filter-callout span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 750;
}

.page-personal_hub .personal-history-tabs button {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.82);
    color: #475569;
    font-weight: 900;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-personal_hub .personal-history-tabs button:hover,
.page-personal_hub .personal-history-tabs button.active {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.45);
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    box-shadow: 0 18px 36px rgba(20, 184, 166, 0.22);
}

.page-personal_hub .personal-history-tabs span,
.page-personal_hub .personal-history-tabs strong {
    display: block;
}

.page-personal_hub .personal-history-tabs span {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-personal_hub .personal-history-tabs strong {
    margin-top: 6px;
    font-size: 1.45rem;
}

.page-personal_hub .personal-history-panel {
    display: none;
    gap: 12px;
}

.page-personal_hub .personal-history-panel.active {
    display: grid;
}

.page-personal_hub .personal-history-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.82));
    border: 1px solid rgba(20, 184, 166, 0.12);
}

.page-personal_hub .personal-history-panel-head strong {
    color: #0f172a;
    font-weight: 950;
}

.page-personal_hub .personal-history-panel-head span {
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .page-personal_hub .personal-private-hero,
    .page-personal_hub .personal-private-metrics,
    .page-personal_hub .personal-form-card,
    .page-personal_hub .personal-lists-grid,
    .page-personal_hub .personal-focus-grid,
    .page-personal_hub .personal-critical-band,
    .page-personal_hub .personal-priority-grid,
    .page-personal_hub .personal-template-grid,
    .page-personal_hub .personal-task-board-grid,
    .page-personal_hub .personal-channel-health-grid,
    .page-personal_hub .personal-visual-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .page-personal_hub .personal-private-modal-backdrop {
        align-items: flex-start !important;
        padding: 8px !important;
    }

    .page-personal_hub .personal-private-modal {
        width: calc(100vw - 12px) !important;
        max-height: calc(100vh - 16px) !important;
        margin-top: 6px !important;
        border-radius: 18px !important;
    }

    .page-personal_hub .personal-private-modal-head {
        padding: 12px 14px;
    }

    .page-personal_hub .personal-private-modal-body {
        gap: 8px;
        max-height: calc(100vh - 84px);
        padding: 10px;
    }

    .page-personal_hub .personal-private-row,
    .page-personal_hub .personal-private-modal-row,
    .page-personal_hub .personal-mini-list article,
    .page-personal_hub .personal-detail-pop-hero,
    .page-personal_hub .personal-create-pop-hero {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-detail-pop-hero,
    .page-personal_hub .personal-create-pop-hero {
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
    }

    .page-personal_hub .personal-detail-pop-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 1.1rem;
    }

    .page-personal_hub .personal-detail-pop-hero h3,
    .page-personal_hub .personal-create-pop-hero h3 {
        font-size: 1.05rem;
    }

    .page-personal_hub .personal-private-icon {
        display: none;
    }

    .page-personal_hub .personal-grid-form {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-grid-form .form-control,
    .page-personal_hub .personal-grid-form .form-select {
        min-height: 38px;
    }

    .page-personal_hub .personal-grid-form textarea.form-control {
        min-height: 82px;
    }

    .page-personal_hub .personal-create-form {
        padding: 10px;
        border-radius: 16px;
    }

    .page-personal_hub .personal-pop-filters {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-bulk-actions div {
        width: 100%;
        margin-right: 0;
    }

    .page-personal_hub .personal-private-controls,
    .page-personal_hub .personal-private-modal-actions,
    .page-personal_hub .personal-inline-actions {
        justify-content: flex-start;
    }

    .page-personal_hub .personal-detail-pop-grid {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-history-summary {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-history-tabs {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-history-filter-callout,
    .page-personal_hub .personal-pop-filters {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-pop-filters .personal-filter-search {
        grid-column: auto;
    }

    .page-personal_hub .personal-calendar-action-bar {
        grid-template-columns: 1fr;
    }

    .page-personal_hub .personal-pop-pager {
        align-items: stretch;
        flex-direction: column;
    }

.page-personal_hub .personal-pop-pager div {
        justify-content: flex-start;
    }

    .page-personal_hub .personal-detail-pop-actions,
    .page-personal_hub .personal-create-pop-actions {
        justify-content: stretch;
        padding: 10px;
        margin-right: -10px;
        margin-left: -10px;
        border-radius: 16px 16px 0 0;
    }

    .page-personal_hub .personal-detail-pop-actions .btn,
    .page-personal_hub .personal-create-pop-actions .btn {
        flex: 1 1 auto;
    }

    .page-personal_hub .personal-ack-note-form {
        grid-template-columns: 1fr;
        width: 100%;
        flex-basis: 100%;
    }
}

.settings-whatsapp-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(20, 184, 166, 0.18) !important;
    background:
        radial-gradient(circle at 100% 0, rgba(34, 197, 94, 0.16), transparent 28%),
        radial-gradient(circle at 0 100%, rgba(14, 165, 233, 0.13), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.9)) !important;
}

.settings-whatsapp-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.settings-whatsapp-status-grid > div {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(20, 184, 166, 0.16);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.055);
}

.settings-whatsapp-status-grid i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #14b8a6);
    font-size: 1.05rem;
}

.settings-whatsapp-status-grid span {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.settings-whatsapp-status-grid strong {
    color: #0f172a;
    font-weight: 950;
}

.settings-whatsapp-payload {
    display: grid;
    gap: 7px;
    padding: 13px;
    border-radius: 17px;
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
}

.settings-whatsapp-payload strong {
    color: #99f6e4;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.settings-whatsapp-payload code {
    display: block;
    white-space: normal;
    word-break: break-word;
    color: #fff;
}

@media (max-width: 767px) {
    .settings-whatsapp-status-grid {
        grid-template-columns: 1fr;
    }
}

.page-notifications .notification-center-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    gap: 18px;
    padding: 22px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 96% 0, rgba(251, 146, 60, 0.42), transparent 26%),
        radial-gradient(circle at 0 100%, rgba(20, 184, 166, 0.36), transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #164e63 52%, #0f766e 100%);
    box-shadow: 0 26px 58px rgba(15, 23, 42, 0.18);
}

.page-notifications .notification-center-hero h2 {
    max-width: 920px;
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    font-weight: 950;
    line-height: 1.05;
}

.page-notifications .notification-center-hero p {
    max-width: 880px;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-weight: 650;
}

.page-notifications .notification-center-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.page-notifications .notification-center-metric {
    appearance: none;
    display: grid;
    gap: 6px;
    min-height: 104px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    color: #fff;
    text-align: left;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.page-notifications .notification-center-metric span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-notifications .notification-center-metric strong {
    color: #fff;
    font-size: 2rem;
    font-weight: 950;
}

.page-notifications .notification-center-metric.is-pending {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.82), rgba(245, 158, 11, 0.42));
}

.page-notifications .notification-center-metric.is-read {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.82), rgba(14, 165, 233, 0.4));
}

.page-notifications .notification-center-metric.is-archive {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.82), rgba(148, 163, 184, 0.32));
}

.page-notifications .notification-center-metric.is-danger {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.88), rgba(251, 113, 133, 0.38));
}

.page-notifications .notification-center-archive-hero {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 0.9fr);
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(45, 212, 191, 0.24), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #155e75 54%, #0f766e 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.page-notifications .notification-center-archive-hero h2 {
    max-width: 760px;
    font-size: clamp(1.25rem, 2.1vw, 1.85rem);
    line-height: 1.12;
}

.page-notifications .notification-center-archive-hero p {
    max-width: 760px;
    font-size: 0.92rem;
}

.page-notifications .notification-center-archive-hero .notification-center-hero-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.page-notifications .notification-center-archive-hero .notification-center-metric {
    min-height: 76px;
    padding: 11px;
    border-radius: 16px;
}

.page-notifications .notification-center-archive-hero .notification-center-metric span {
    font-size: 0.68rem;
}

.page-notifications .notification-center-archive-hero .notification-center-metric strong {
    font-size: 1.45rem;
}

.page-notifications .notification-center-groups {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.page-notifications .notification-center-group-chip {
    appearance: none;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(20, 184, 166, 0.14);
    border-radius: 18px;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.88));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
    cursor: pointer;
}

.page-notifications .notification-center-group-chip i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.page-notifications .notification-center-group-chip span {
    color: #334155;
    font-weight: 900;
}

.page-notifications .notification-center-group-chip strong {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 950;
}

.page-notifications .notification-center-shell {
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(45, 212, 191, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.075);
}

.page-notifications .notification-center-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.page-notifications .notification-center-head h5 {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
}

.page-notifications .notification-center-bulk-form,
.page-notifications .notification-center-card-actions,
.page-notifications .notification-center-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.page-notifications .notification-center-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 6px;
    margin-bottom: 12px;
    border-radius: 18px;
    background: rgba(241, 245, 249, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-notifications .notification-center-tabs button {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    color: #475569;
    background: rgba(255, 255, 255, 0.78);
    font-weight: 950;
}

.page-notifications .notification-center-tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 12px 22px rgba(20, 184, 166, 0.18);
}

.page-notifications .notification-center-tabs span {
    margin-left: 6px;
    opacity: 0.78;
}

.page-notifications .notification-center-toolbar {
    display: grid;
    grid-template-columns: 160px minmax(260px, 1fr) 190px 180px;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.page-notifications .notification-center-select-all {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    color: #334155;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-weight: 850;
}

.page-notifications .notification-center-pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(20, 184, 166, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.page-notifications .notification-center-pagination-info {
    color: #334155;
    font-weight: 950;
}

.page-notifications .notification-center-page-size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 900;
}

.page-notifications .notification-center-page-size .form-select {
    width: 94px;
    border-radius: 12px;
    font-weight: 900;
}

.page-notifications .notification-center-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.page-notifications .notification-center-pagination button,
.page-notifications .notification-center-pagination span {
    min-width: 38px;
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #334155;
    background: rgba(255, 255, 255, 0.92);
    font-weight: 950;
}

.page-notifications .notification-center-pagination button.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 10px 20px rgba(20, 184, 166, 0.18);
}

.page-notifications .notification-center-pagination button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-notifications .notification-center-pagination button:not(:disabled):hover {
    color: #0f766e;
    border-color: rgba(20, 184, 166, 0.28);
    transform: translateY(-1px);
}

.page-notifications .notification-center-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 12px;
}

.page-notifications .notification-center-card {
    display: grid;
    grid-template-rows: auto 1fr auto auto auto;
    gap: 9px;
    min-height: 208px;
    padding: 13px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.055);
}

.page-notifications .notification-center-card.is-danger {
    border-color: rgba(239, 68, 68, 0.22);
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.78), rgba(255, 255, 255, 0.96));
}

.page-notifications .notification-center-card.is-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.82), rgba(255, 255, 255, 0.96));
}

.page-notifications .notification-center-card.state-read {
    opacity: 0.84;
}

.page-notifications .notification-center-card.state-archived {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), rgba(255, 255, 255, 0.95));
}

.page-notifications .notification-center-card-top {
    display: grid;
    grid-template-columns: 24px 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.page-notifications .notification-center-check {
    display: grid;
    place-items: center;
}

.page-notifications .notification-center-icon,
.page-notifications .notification-center-modal-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.14);
}

.page-notifications .notification-center-card-top span {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-notifications .notification-center-card-top strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
}

.page-notifications .notification-center-detail-btn {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(20, 184, 166, 0.22);
    color: #0f766e;
    background: #fff;
    font-weight: 950;
}

.page-notifications .notification-center-card p {
    margin: 0;
    color: #475569;
    line-height: 1.42;
    font-weight: 700;
    font-size: 0.92rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.page-notifications .notification-center-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.page-notifications .notification-center-badges span {
    padding: 6px 9px;
    border-radius: 999px;
    color: #334155;
    background: rgba(241, 245, 249, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 0.74rem;
    font-weight: 900;
}

.page-notifications .notification-center-badges .is-priority {
    color: #92400e;
    background: #fef3c7;
}

.page-notifications .notification-center-badges .is-state {
    color: #0f766e;
    background: #ccfbf1;
}

.page-notifications .notification-center-badges .is-snoozed {
    color: #1d4ed8;
    background: #dbeafe;
}

.page-notifications .notification-center-badges .is-repeat {
    color: #9a3412;
    background: #ffedd5;
}

.page-notifications .notification-center-owner {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(148, 163, 184, 0.22);
}

.page-notifications .notification-center-owner span {
    color: #64748b;
    font-weight: 850;
}

.page-notifications .notification-center-owner strong {
    color: #0f172a;
    font-weight: 950;
}

.page-notifications .notification-center-empty {
    grid-column: 1 / -1;
}

.page-notifications .notification-center-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(8px);
}

.page-notifications .notification-center-modal-backdrop[hidden] {
    display: none !important;
}

.page-notifications .notification-center-modal {
    width: min(920px, calc(100vw - 28px));
    max-height: min(780px, calc(100vh - 44px));
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 34px 80px rgba(15, 23, 42, 0.34);
}

.page-notifications .notification-center-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    color: #fff;
    background:
        radial-gradient(circle at 96% 0, rgba(251, 191, 36, 0.28), transparent 26%),
        linear-gradient(135deg, #0f172a, #0f766e);
}

.page-notifications .notification-center-modal-head h5 {
    margin: 0;
    color: #fff;
    font-weight: 950;
}

.page-notifications .notification-center-modal-head span {
    color: rgba(255, 255, 255, 0.72);
}

.page-notifications .notification-center-modal-body {
    display: grid;
    gap: 12px;
    max-height: calc(min(780px, 100vh - 44px) - 178px);
    overflow: auto;
    padding: 16px;
}

.page-notifications .notification-center-modal-summary {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(239, 246, 255, 0.9));
    border: 1px solid rgba(20, 184, 166, 0.16);
}

.page-notifications .notification-center-modal-summary strong,
.page-notifications .notification-center-modal-summary span {
    display: block;
}

.page-notifications .notification-center-modal-summary strong {
    color: #0f172a;
    font-weight: 950;
}

.page-notifications .notification-center-modal-summary span {
    color: #0f766e;
    font-weight: 850;
}

.page-notifications .notification-center-modal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.page-notifications .notification-center-modal-grid div {
    padding: 12px;
    border-radius: 17px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

.page-notifications .notification-center-modal-grid span {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-notifications .notification-center-modal-grid strong {
    display: block;
    margin-top: 6px;
    color: #0f172a;
    font-weight: 950;
}

.page-notifications .notification-center-history {
    padding: 14px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.page-notifications #notificationCenterHistoryList {
    display: grid;
    gap: 8px;
}

.page-notifications #notificationCenterHistoryList div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
}

.page-notifications #notificationCenterHistoryList strong {
    color: #0f172a;
    font-weight: 950;
}

.page-notifications #notificationCenterHistoryList span,
.page-notifications #notificationCenterHistoryList small {
    color: #64748b;
    font-weight: 750;
}

.page-notifications .notification-center-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 12px 16px;
    background: rgba(248, 250, 252, 0.96);
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 -18px 30px rgba(15, 23, 42, 0.08);
}

.page-notifications .notification-center-modal-form,
.page-notifications .notification-center-assign-form {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.page-notifications .notification-center-assign-form .form-select {
    min-width: 180px;
}

@media (max-width: 1200px) {
    .page-notifications .notification-center-hero,
    .page-notifications .notification-center-toolbar {
        grid-template-columns: 1fr;
    }

    .page-notifications .notification-center-archive-hero .notification-center-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-notifications .notification-center-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-notifications .notification-center-pagination-row {
        flex-wrap: wrap;
    }

    .page-notifications .notification-center-pagination {
        width: 100%;
        justify-content: flex-start;
    }

    .page-notifications .notification-center-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    }

    .page-notifications .notification-center-head {
        display: grid;
    }
}

@media (max-width: 767px) {
    .page-notifications .notification-center-hero,
    .page-notifications .notification-center-shell {
        padding: 14px;
        border-radius: 20px;
    }

    .page-notifications .notification-center-archive-hero {
        gap: 12px;
    }

    .page-notifications .notification-center-hero-metrics,
    .page-notifications .notification-center-groups,
    .page-notifications .notification-center-tabs,
    .page-notifications .notification-center-card-grid,
    .page-notifications .notification-center-modal-grid {
        grid-template-columns: 1fr;
    }

    .page-notifications .notification-center-archive-hero .notification-center-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-notifications .notification-center-card-top {
        grid-template-columns: 24px 40px minmax(0, 1fr);
    }

    .page-notifications .notification-center-detail-btn {
        grid-column: 1 / -1;
    }

    .page-notifications .notification-center-pagination-row,
    .page-notifications .notification-center-page-size {
        align-items: stretch;
        flex-direction: column;
    }

    .page-notifications .notification-center-page-size .form-select {
        width: 100%;
    }

    .page-notifications .notification-center-pagination {
        justify-content: center;
    }

    .page-notifications .notification-center-modal-backdrop {
        align-items: flex-start;
        padding: 8px;
    }

    .page-notifications .notification-center-modal {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 16px);
        border-radius: 18px;
    }

    .page-notifications .notification-center-modal-head,
    .page-notifications .notification-center-modal-body,
    .page-notifications .notification-center-modal-actions {
        padding: 12px;
    }

    .page-notifications .notification-center-modal-actions .btn,
    .page-notifications .notification-center-modal-form,
    .page-notifications .notification-center-assign-form,
    .page-notifications .notification-center-assign-form .form-select {
        width: 100%;
    }

    .page-notifications .notification-center-modal-form,
    .page-notifications .notification-center-assign-form {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Global typography polish: canlı ortamda kaba görünen yazı ağırlıklarını yumuşatır. */
:root {
    --app-font-main: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --app-font-number: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --app-weight-regular: 400;
    --app-weight-medium: 510;
    --app-weight-strong: 590;
    --app-weight-heading: 660;
    --app-tracking-tight: -0.022em;
    --app-tracking-soft: -0.01em;
}

body {
    font-family: var(--app-font-main);
    font-size: 13.75px;
    font-weight: var(--app-weight-regular);
    line-height: 1.52;
    letter-spacing: var(--app-tracking-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.hero-title,
.auth-title,
.card-title,
.modal-title,
.section-title {
    font-family: var(--app-font-main);
    font-weight: var(--app-weight-heading) !important;
    letter-spacing: var(--app-tracking-tight) !important;
    line-height: 1.14;
}

strong,
b,
.fw-bold,
.fw-semibold,
.table strong,
.card strong,
.modal strong {
    font-weight: var(--app-weight-strong) !important;
}

small,
.text-muted,
.muted,
.card small,
.modal small {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.page-kicker,
.sidebar-kicker,
.sidebar-group-title,
.section-kicker,
.form-label,
label,
.table thead th,
table thead th,
[class*="kicker"],
[class*="eyebrow"] {
    font-weight: 580 !important;
    letter-spacing: 0.035em !important;
}

.sidebar-brand h1,
.sidebar-parent-label,
.sidebar-group-heading,
.sidebar-nav .nav-item-link,
.sidebar-nav .nav-sub-item,
.sidebar-favorite-link,
.homepage-menu-link {
    font-weight: 540 !important;
    letter-spacing: -0.006em !important;
}

.btn,
button,
.badge,
.status-pill,
.summary-chip,
.filter-chip,
.dropdown-item {
    font-weight: 540 !important;
    letter-spacing: -0.006em !important;
}

.form-control,
.form-select,
input,
select,
textarea {
    font-family: var(--app-font-main);
    font-size: 0.9rem;
    font-weight: 420;
    letter-spacing: 0;
}

.table,
table,
.data-table,
.list-table {
    font-size: 0.86rem;
    letter-spacing: 0;
}

.table thead th,
table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #526174;
}

.table tbody td,
table tbody td {
    font-weight: 400;
    color: #273449;
}

.stat-card h3,
.mini-card strong,
.summary-card strong,
.homepage-kpi-card strong,
.homepage-summary-card strong,
.vehicle-stat-card strong,
.warehouse-stat-card strong,
.approval-mini-stat strong,
.notification-center-hero-metric strong {
    font-family: var(--app-font-number);
    font-weight: 620 !important;
    letter-spacing: -0.03em !important;
}

.content-shell,
.page-flow-shell,
.table-wrap,
.form-card,
.card,
.modal-content,
.personal-private-modal,
.notification-center-modal {
    font-weight: var(--app-weight-regular);
}

.card,
.table-wrap,
.form-card,
.content-shell,
.page-flow-shell,
.personal-private-modal,
.notification-center-modal,
.homepage-kpi-card,
.homepage-summary-card,
.module-overview-card {
    color: #243247;
}

.card p,
.card span,
.card small,
.table-wrap small,
.form-card small,
.content-shell small,
.page-flow-shell small {
    color: #64748b;
}

.sidebar-panel {
    font-size: 0.94rem;
}

.sidebar-panel,
.sidebar-panel small,
.sidebar-panel span {
    text-shadow: none !important;
}

.sidebar-parent-label,
.sidebar-group-heading {
    min-height: 42px;
}

.nav-sub-item {
    min-height: 39px;
}

.btn {
    min-height: 38px;
    padding-inline: 0.95rem;
}

.btn-sm {
    min-height: 31px;
}

.badge,
.status-pill,
.summary-chip,
.filter-chip {
    font-size: 0.75rem;
}

@media (min-width: 1440px) {
    body {
        font-size: 14px;
    }
}

/* Popup / modal polish: daha net, kararlı ve okunaklı pop görünümü. */
.modal-content,
.personal-private-modal,
.personal-hub-modal,
.notification-center-modal,
.notifications-modal,
.stock-in-preview-dialog,
.stock-out-preview-dialog,
.approval-preview-dialog,
.ai-quality-dialog,
.record-detail-drawer-dialog {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98)) !important;
    box-shadow:
        0 28px 72px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset !important;
    color: #1f2a3d;
    font-size: 0.94rem;
    letter-spacing: -0.006em;
}

.modal-header,
.personal-private-modal-head,
.personal-hub-modal-head,
.notification-center-modal-head,
.notifications-modal-head,
.stock-in-preview-head {
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.14), transparent 30%),
        linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96));
}

.modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.personal-private-modal-head strong,
.personal-hub-modal-head strong,
.notification-center-modal-head h5,
.notifications-modal-head strong,
.stock-in-preview-head h5 {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: -0.024em !important;
}

.modal-body,
.personal-private-modal-body,
.personal-hub-modal-body,
.notification-center-modal-body,
.notifications-modal-body {
    color: #273449;
    line-height: 1.52;
}

.modal-body label,
.modal-body .form-label,
.personal-private-modal label,
.personal-hub-modal label,
.notification-center-modal label,
.notifications-modal label {
    color: #243247;
    font-weight: 620 !important;
    letter-spacing: 0.012em !important;
}

.modal-body .form-control,
.modal-body .form-select,
.personal-private-modal .form-control,
.personal-private-modal .form-select,
.personal-hub-modal .form-control,
.personal-hub-modal .form-select,
.notification-center-modal .form-control,
.notification-center-modal .form-select,
.notifications-modal .form-control,
.notifications-modal .form-select {
    min-height: 42px;
    border-color: rgba(71, 85, 105, 0.22);
    background: rgba(255, 255, 255, 0.96);
    color: #172033;
    font-weight: 460;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.modal-body .form-control:focus,
.modal-body .form-select:focus,
.personal-private-modal .form-control:focus,
.personal-private-modal .form-select:focus,
.personal-hub-modal .form-control:focus,
.personal-hub-modal .form-select:focus,
.notification-center-modal .form-control:focus,
.notification-center-modal .form-select:focus,
.notifications-modal .form-control:focus,
.notifications-modal .form-select:focus {
    border-color: rgba(20, 184, 166, 0.65);
    box-shadow:
        0 0 0 3px rgba(20, 184, 166, 0.14),
        0 10px 22px rgba(15, 23, 42, 0.06);
}

.modal-footer,
.personal-private-modal-actions,
.personal-detail-pop-actions,
.personal-create-pop-actions,
.notification-center-modal-actions {
    border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
    background: rgba(248, 250, 252, 0.98) !important;
}

.modal-footer .btn,
.personal-private-modal-actions .btn,
.personal-detail-pop-actions .btn,
.personal-create-pop-actions .btn,
.notification-center-modal-actions .btn {
    font-weight: 630 !important;
    min-height: 39px;
}

.modal-backdrop.show,
.personal-private-modal-backdrop,
.personal-hub-modal-backdrop,
.notification-center-modal-backdrop,
.notifications-modal-backdrop {
    background: rgba(15, 23, 42, 0.54) !important;
}

/* Elegant compact typography pass: daha kibar, okunabilir ve zarif yazı ölçeği. */
:root {
    --app-font-main: "Aptos", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --app-weight-regular: 390;
    --app-weight-medium: 480;
    --app-weight-strong: 550;
    --app-weight-heading: 610;
}

body {
    font-size: 13.15px;
    line-height: 1.56;
    font-weight: var(--app-weight-regular);
    letter-spacing: -0.012em;
}

h1,
.page-title,
.hero-title {
    font-size: clamp(1.42rem, 1.05rem + 1vw, 1.9rem) !important;
    font-weight: 620 !important;
    line-height: 1.12;
}

h2 {
    font-size: clamp(1.22rem, 1rem + 0.58vw, 1.56rem) !important;
}

h3 {
    font-size: clamp(1.08rem, 0.98rem + 0.42vw, 1.32rem) !important;
}

h4,
h5,
h6,
.card-title,
.section-title,
.modal-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.018em !important;
}

p,
li,
.card,
.table-wrap,
.form-card,
.content-shell,
.page-flow-shell {
    font-size: 0.92rem;
}

strong,
b,
.fw-bold,
.fw-semibold,
.table strong,
.card strong,
.modal strong {
    font-weight: 560 !important;
}

small,
.text-muted,
.muted,
.card small,
.modal small {
    font-size: 0.8rem;
    font-weight: 430 !important;
    line-height: 1.42;
}

.page-kicker,
.sidebar-kicker,
.sidebar-group-title,
.section-kicker,
.form-label,
label,
.table thead th,
table thead th,
[class*="kicker"],
[class*="eyebrow"] {
    font-size: 0.72rem !important;
    font-weight: 560 !important;
    letter-spacing: 0.025em !important;
}

.sidebar-panel {
    font-size: 0.86rem;
}

.sidebar-brand h1 {
    font-size: 0.98rem !important;
}

.sidebar-parent-label,
.sidebar-group-heading,
.sidebar-nav .nav-item-link,
.sidebar-nav .nav-sub-item,
.sidebar-favorite-link,
.homepage-menu-link {
    font-size: 0.86rem !important;
    font-weight: 500 !important;
}

.sidebar-parent-label,
.sidebar-group-heading {
    min-height: 39px;
    padding-block: 0.62rem;
}

.nav-sub-item {
    min-height: 36px;
    padding-block: 0.54rem;
}

.btn,
button,
.dropdown-item {
    font-size: 0.84rem !important;
    font-weight: 540 !important;
    min-height: 34px;
    letter-spacing: -0.008em !important;
}

.btn-sm {
    min-height: 29px;
    font-size: 0.78rem !important;
}

.badge,
.status-pill,
.summary-chip,
.filter-chip {
    font-size: 0.7rem !important;
    font-weight: 540 !important;
}

.form-control,
.form-select,
input,
select,
textarea {
    font-size: 0.86rem;
    font-weight: 400;
    min-height: 38px;
}

.table,
table,
.data-table,
.list-table {
    font-size: 0.82rem;
}

.table thead th,
table thead th {
    font-size: 0.68rem !important;
    font-weight: 560 !important;
    letter-spacing: 0.025em !important;
}

.table tbody td,
table tbody td {
    font-size: 0.82rem;
    font-weight: 390;
}

.modal-content,
.personal-private-modal,
.personal-hub-modal,
.notification-center-modal,
.notifications-modal,
.stock-in-preview-dialog,
.stock-out-preview-dialog,
.approval-preview-dialog,
.ai-quality-dialog,
.record-detail-drawer-dialog {
    font-size: 0.88rem;
    border-radius: 22px !important;
}

.modal-header,
.personal-private-modal-head,
.personal-hub-modal-head,
.notification-center-modal-head,
.notifications-modal-head,
.stock-in-preview-head {
    padding-block: 12px !important;
}

.modal-body,
.personal-private-modal-body,
.personal-hub-modal-body,
.notification-center-modal-body,
.notifications-modal-body {
    font-size: 0.88rem;
}

.modal-body .form-control,
.modal-body .form-select,
.personal-private-modal .form-control,
.personal-private-modal .form-select,
.personal-hub-modal .form-control,
.personal-hub-modal .form-select,
.notification-center-modal .form-control,
.notification-center-modal .form-select,
.notifications-modal .form-control,
.notifications-modal .form-select {
    min-height: 38px;
    font-size: 0.84rem;
}

.modal-footer .btn,
.personal-private-modal-actions .btn,
.personal-detail-pop-actions .btn,
.personal-create-pop-actions .btn,
.notification-center-modal-actions .btn {
    min-height: 34px;
    font-size: 0.82rem !important;
    font-weight: 560 !important;
}

.stat-card h3,
.mini-card strong,
.summary-card strong,
.homepage-kpi-card strong,
.homepage-summary-card strong,
.vehicle-stat-card strong,
.warehouse-stat-card strong,
.approval-mini-stat strong,
.notification-center-hero-metric strong {
    font-weight: 570 !important;
}

@media (min-width: 1440px) {
    body {
        font-size: 13.5px;
    }
}

/* Compact info cards: kare bilgilendirme kutularındaki boşluk ve kaba oranları azaltır. */
.mini-card,
.stat-card,
.summary-card,
.homepage-kpi-card,
.homepage-summary-card,
.module-overview-card,
.manager-box,
.warehouse-stat-card,
.vehicle-stat-card,
.approval-mini-stat,
.notification-center-metric,
.personal-metric-card,
.personal-private-metric,
.personal-visual-card,
.calendar-planning-metrics div,
.calendar-summary-shell .manager-box {
    min-height: auto !important;
    padding: 12px 13px !important;
    border-radius: 17px !important;
}

.homepage-kpi-grid,
.manager-grid,
.module-overview-grid,
.personal-metric-grid,
.personal-private-metrics,
.notification-center-hero-metrics,
.calendar-planning-metrics,
.calendar-summary-shell .manager-grid {
    gap: 10px !important;
}

.mini-card > .d-flex:first-child,
.homepage-kpi-card > .d-flex:first-child,
.homepage-summary-card > .d-flex:first-child,
.module-overview-card > .d-flex:first-child,
.manager-box > .d-flex:first-child,
.warehouse-stat-card > .d-flex:first-child,
.vehicle-stat-card > .d-flex:first-child {
    gap: 9px !important;
    align-items: flex-start !important;
}

.summary-card-icon,
.mini-card .summary-card-icon,
.homepage-kpi-card .summary-card-icon,
.homepage-summary-card .summary-card-icon,
.module-overview-card .summary-card-icon,
.manager-box .summary-card-icon,
.personal-visual-icon,
.personal-detail-pop-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
}

.mini-card h4,
.mini-card h5,
.module-overview-card h4,
.module-overview-card h5,
.manager-box h4,
.manager-box h5,
.homepage-kpi-card h4,
.homepage-kpi-card h5,
.homepage-summary-card h4,
.homepage-summary-card h5 {
    margin-bottom: 4px !important;
    font-size: 0.92rem !important;
    font-weight: 590 !important;
}

.mini-card strong,
.stat-card h3,
.summary-card strong,
.homepage-kpi-card strong,
.homepage-summary-card strong,
.module-overview-card strong,
.manager-box strong,
.warehouse-stat-card strong,
.vehicle-stat-card strong,
.approval-mini-stat strong,
.notification-center-metric strong,
.personal-metric-card strong,
.personal-private-metric strong,
.calendar-planning-metrics div strong,
.calendar-summary-shell .manager-box strong {
    display: block;
    margin: 2px 0 0 !important;
    font-size: clamp(1rem, 0.86rem + 0.42vw, 1.28rem) !important;
    line-height: 1.08 !important;
    font-weight: 580 !important;
    letter-spacing: -0.03em !important;
}

.mini-card span,
.mini-card small,
.homepage-kpi-card span,
.homepage-kpi-card small,
.homepage-summary-card span,
.homepage-summary-card small,
.module-overview-card span,
.module-overview-card small,
.manager-box span,
.manager-box small,
.warehouse-stat-card span,
.warehouse-stat-card small,
.vehicle-stat-card span,
.vehicle-stat-card small,
.approval-mini-stat span,
.approval-mini-stat small,
.notification-center-metric span,
.personal-metric-card span,
.personal-metric-card small,
.personal-private-metric span,
.personal-private-metric small {
    font-size: 0.74rem !important;
    line-height: 1.32 !important;
}

.personal-visual-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
}

.personal-visual-card div {
    gap: 2px !important;
}

.personal-visual-card strong {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
}

.personal-visual-card em {
    font-size: 0.72rem !important;
}
.destan-modal-lock {
    overflow: hidden !important;
}

.destan-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 16% 12%, rgba(20, 184, 166, .22), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(45, 140, 255, .20), transparent 32%),
        rgba(15, 23, 42, .68);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.destan-modal.is-open {
    display: flex !important;
}

.destan-modal__dialog {
    position: relative;
    z-index: 2147483001;
    width: min(940px, 96vw);
    max-height: min(88vh, 900px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    color: #14213d;
    border: 1px solid rgba(226, 232, 240, .98);
    box-shadow: 0 34px 90px rgba(2, 8, 23, .38);
}

.destan-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    background:
        linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(239, 246, 255, .98));
    border-bottom: 1px solid rgba(20, 33, 61, .08);
}

.destan-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.destan-modal__title {
    margin: 0;
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 950;
    letter-spacing: -.035em;
    color: #14213d;
}

.destan-modal__subtitle {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 750;
}

.destan-modal__close {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 16px;
    background: #ffffff;
    color: #14213d;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
    font-size: 26px;
    line-height: 1;
}

.destan-modal__body {
    min-height: 240px;
    overflow: auto;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, .92), #ffffff 44%);
}

.destan-modal__footer {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid rgba(226, 232, 240, .96);
    box-shadow: 0 -14px 30px rgba(15, 23, 42, .06);
}

.destan-modal-intro,
.destan-modal-empty,
.destan-modal-row {
    border: 1px solid rgba(226, 232, 240, .96);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.destan-modal-intro {
    padding: 16px;
    margin-bottom: 14px;
    background:
        radial-gradient(circle at 92% 0%, rgba(20, 184, 166, .14), transparent 36%),
        #ffffff;
}

.destan-modal-intro strong,
.destan-modal-empty strong,
.destan-modal-row strong {
    color: #14213d;
    font-weight: 950;
}

.destan-modal-intro p,
.destan-modal-empty p,
.destan-modal-row p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 720;
}

.destan-modal-list {
    display: grid;
    gap: 10px;
}

.destan-modal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.destan-modal-row:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, .34);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .09);
}

.destan-modal-row.is-open,
.destan-modal-row.is-pending,
.destan-modal-row.is-waiting {
    border-color: rgba(245, 158, 11, .28);
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.destan-modal-row.is-error,
.destan-modal-row.is-critical,
.destan-modal-row.is-danger {
    border-color: rgba(239, 68, 68, .26);
    background: linear-gradient(135deg, #fff1f2, #ffffff);
}

.destan-modal-row.is-resolved,
.destan-modal-row.is-success,
.destan-modal-row.is-ok {
    border-color: rgba(34, 197, 94, .26);
    background: linear-gradient(135deg, #ecfdf5, #ffffff);
}

.destan-modal-row small {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-weight: 800;
}

.destan-modal-row__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.destan-modal-row__details span {
    min-width: 0;
    display: block;
    padding: 9px 10px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 14px;
    background: rgba(248, 250, 252, .84);
}

.destan-modal-row__details small {
    margin: 0 0 4px;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.destan-modal-row__details strong {
    display: block;
    overflow: hidden;
    color: #14213d;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.destan-modal-row__actions,
.destan-modal-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.destan-modal-row__actions {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(226, 232, 240, .9);
}

.destan-modal-inline-form {
    margin: 0;
}

.destan-modal-inline-input {
    min-height: 38px;
    width: min(260px, 100%);
    border: 1px solid rgba(203, 213, 225, .96);
    border-radius: 13px;
    padding: 8px 10px;
    color: #14213d;
    font-weight: 750;
}

.destan-modal-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(20, 184, 166, .12);
    color: #0f766e;
    font-size: 12px;
    font-weight: 950;
}

.destan-modal-empty {
    padding: 18px;
    text-align: center;
}

.destan-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #14b8a6, #2d8cff);
    color: #ffffff;
    text-decoration: none;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(20, 184, 166, .18);
}

.destan-modal-btn.is-light {
    background: #f8fafc;
    color: #14213d;
    border: 1px solid rgba(226, 232, 240, .96);
    box-shadow: none;
}

.destan-modal-btn.is-success {
    background: linear-gradient(135deg, #10b981, #14b8a6);
    color: #fff;
}

.destan-modal-btn.is-warning {
    background: linear-gradient(135deg, #f59e0b, #fb7185);
    color: #fff;
}

.destan-modal-state,
.destan-modal-error {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 180px;
    padding: 28px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .96);
    text-align: center;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.destan-modal-error {
    background: linear-gradient(135deg, #fff7ed, #fef2f2);
    border-color: rgba(239, 68, 68, .24);
    color: #991b1b;
}

.destan-modal-error p {
    margin: 0;
    color: #b45309;
    font-weight: 750;
}

.destan-modal-spinner {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 4px solid rgba(20, 184, 166, .18);
    border-top-color: #14b8a6;
    animation: destanModalSpin .8s linear infinite;
}

.destan-modal-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483002;
    max-width: min(420px, calc(100vw - 32px));
    padding: 13px 16px;
    border-radius: 16px;
    background: #14213d;
    color: #ffffff;
    font-weight: 850;
    box-shadow: 0 20px 48px rgba(2, 8, 23, .28);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.destan-modal-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.destan-modal-toast.is-warning {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.destan-modal-toast.is-success {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.destannet-flow-resume {
    position: sticky;
    top: 10px;
    z-index: 1095;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, #ecfeff, #f8fafc);
    color: #134e4a;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
}

.destannet-flow-resume span {
    display: block;
    color: #0f766e;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.destannet-flow-resume strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.25;
}

.destannet-flow-resume nav {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.destannet-flow-resume a,
.destannet-flow-resume button {
    border: 1px solid rgba(20, 184, 166, .2);
    border-radius: 999px;
    background: #ffffff;
    color: #0f766e;
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
    padding: 7px 10px;
}

@keyframes destanModalSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
    .destan-modal {
        padding: 12px;
        align-items: center;
    }

    .destan-modal__dialog {
        width: 100%;
        max-height: 94vh;
        border-radius: 22px;
    }

    .destan-modal-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .destan-modal-row__details {
        grid-template-columns: 1fr;
    }

    .destan-modal-row__actions,
    .destan-modal-inline-form,
    .destan-modal-inline-input {
        width: 100%;
    }

    .destan-modal-row__actions .destan-modal-btn,
    .destan-modal-inline-form .destan-modal-btn {
        flex: 1 1 140px;
    }
}

/* Shared popup polish for legacy module modals. */
.page-approvals .approval-preview-modal,
.page-notifications .notification-center-modal-backdrop,
.page-notifications .notifications-modal-backdrop,
.page-personal_hub .personal-private-modal-backdrop,
.page-messages .messages-chat-modal,
.page-messages .messages-preview-modal {
    z-index: 2147483000 !important;
}

.page-approvals .approval-preview-modal,
.page-notifications .notification-center-modal-backdrop,
.page-notifications .notifications-modal-backdrop,
.page-personal_hub .personal-private-modal-backdrop {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, .66) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
}

.page-messages .messages-chat-modal-backdrop,
.page-messages .messages-preview-modal {
    background: rgba(15, 23, 42, .66) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
}

.page-approvals .approval-preview-dialog,
.page-notifications .notification-center-modal,
.page-notifications .notifications-modal,
.page-personal_hub .personal-private-modal,
.page-messages .messages-chat-modal-dialog,
.page-messages .messages-preview-panel {
    border: 1px solid rgba(20, 184, 166, .22) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at top left, rgba(45, 212, 191, .18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .96)) !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, .26), 0 0 0 1px rgba(255, 255, 255, .76) inset !important;
    overflow: hidden !important;
}

.page-notifications .notification-center-modal-body,
.page-notifications .notifications-modal-body,
.page-personal_hub .personal-private-modal-body,
.page-messages .messages-chat-modal-body,
.page-messages .messages-preview-body {
    max-height: min(68vh, 680px);
    overflow: auto;
    scrollbar-width: thin;
}

.page-notifications .notification-center-modal-actions,
.page-notifications .notifications-modal-actions,
.page-personal_hub .personal-create-pop-actions,
.page-messages .messages-chat-modal-foot {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .98)) !important;
    border-top: 1px solid rgba(148, 163, 184, .2) !important;
    box-shadow: 0 -16px 34px rgba(15, 23, 42, .08) !important;
}

.page-notifications .notification-center-detail-grid,
.page-messages .messages-chat-modal-body,
.page-personal_hub .personal-private-modal-body {
    color: #172033;
}

/* Global modal centering guard: poplar altta/yukarıda değil, ekranda ortalı açılsın. */
body.ui-renaissance :where(
    .destan-modal,
    .stock-in-preview-modal,
    .stock-out-preview-modal,
    .approval-preview-modal,
    .notification-center-modal-backdrop,
    .notifications-modal-backdrop,
    .investment-modal,
    .product-preview-modal,
    .record-detail-drawer,
    .vehicle-detail-modal,
    .vehicle-modal,
    .personal-modal,
    .personal-private-modal-backdrop,
    .personal-hub-modal-backdrop,
    .message-detail-modal,
    .messages-chat-modal,
    .messages-preview-modal,
    .task-modern-modal
) {
    align-items: center !important;
    justify-content: center !important;
}

body.ui-renaissance :where(
    .destan-modal__dialog,
    .stock-in-preview-dialog,
    .stock-out-preview-dialog,
    .approval-preview-dialog,
    .notification-center-modal,
    .notifications-modal,
    .investment-modal__box,
    .product-preview-dialog,
    .record-detail-drawer-dialog,
    .vehicle-modal__box,
    .personal-modal__box,
    .personal-private-modal,
    .personal-hub-modal,
    .message-detail-modal__box,
    .messages-chat-modal-dialog,
    .messages-preview-panel,
    .task-modern-dialog
) {
    max-height: min(92vh, 900px) !important;
}

.page-settings .settings-command-center {
    margin-bottom: 22px;
    border: 1px solid rgba(20, 184, 166, .2);
    border-radius: 30px;
    padding: 18px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .2), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 253, 250, .9) 46%, rgba(239, 246, 255, .9));
    box-shadow: 0 22px 60px rgba(15, 23, 42, .1);
    overflow: hidden;
}

.page-settings .settings-command-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 16px;
}

.page-settings .settings-command-copy {
    border-radius: 24px;
    padding: 22px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(226, 232, 240, .9);
}

.page-settings .settings-command-kicker,
.page-settings .settings-control-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0f766e;
    font-weight: 900;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-settings .settings-command-copy h3 {
    margin: 8px 0 6px;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.page-settings .settings-command-copy p {
    max-width: 820px;
    margin: 0;
    color: #64748b;
    font-weight: 700;
    line-height: 1.65;
}

.page-settings .settings-command-score {
    display: flex;
    min-height: 150px;
    flex-direction: column;
    justify-content: center;
    border-radius: 26px;
    padding: 20px;
    color: #fff;
    background: linear-gradient(145deg, #0f766e, #2563eb);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .22);
}

.page-settings .settings-command-score span,
.page-settings .settings-command-score small {
    font-weight: 800;
    opacity: .88;
}

.page-settings .settings-command-score strong {
    font-size: 3rem;
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.08em;
}

.page-settings .settings-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.page-settings .settings-control-card {
    position: relative;
    display: grid;
    min-height: 205px;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 8px;
    padding: 18px;
    border-radius: 24px;
    color: #172033;
    text-decoration: none;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(226, 232, 240, .95);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-settings .settings-control-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: var(--settings-card-accent, #14b8a6);
}

.page-settings .settings-control-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--settings-card-accent, #14b8a6) 52%, #e2e8f0);
    box-shadow: 0 22px 54px rgba(15, 23, 42, .13);
}

.page-settings .settings-control-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    background: var(--settings-card-accent, #14b8a6);
    box-shadow: 0 14px 26px color-mix(in srgb, var(--settings-card-accent, #14b8a6) 32%, transparent);
}

.page-settings .settings-control-card strong {
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.page-settings .settings-control-card small {
    color: #64748b;
    font-weight: 700;
    line-height: 1.55;
}

.page-settings .settings-control-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(226, 232, 240, .88);
}

.page-settings .settings-control-foot b {
    color: var(--settings-card-accent, #14b8a6);
    font-size: .95rem;
    font-weight: 950;
}

.page-settings .settings-control-foot em {
    grid-column: 1;
    color: #94a3b8;
    font-size: .74rem;
    font-style: normal;
    font-weight: 800;
}

.page-settings .settings-control-foot > i {
    grid-row: 1 / span 2;
    grid-column: 2;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--settings-card-accent, #14b8a6);
    background: color-mix(in srgb, var(--settings-card-accent, #14b8a6) 12%, #fff);
}

.page-settings .settings-control-card.tone-teal,
.page-settings .settings-control-card.tone-green { --settings-card-accent: #10b981; }
.page-settings .settings-control-card.tone-blue { --settings-card-accent: #2563eb; }
.page-settings .settings-control-card.tone-amber { --settings-card-accent: #f59e0b; }
.page-settings .settings-control-card.tone-danger { --settings-card-accent: #ef4444; }
.page-settings .settings-control-card.tone-purple { --settings-card-accent: #7c3aed; }
.page-settings .settings-control-card.tone-orange { --settings-card-accent: #f97316; }
.page-settings .settings-control-card.tone-slate { --settings-card-accent: #475569; }

.page-settings .settings-ops-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: -4px 0 20px;
}

.page-settings .settings-ops-card {
    min-width: 0;
    text-align: left;
    border: 1px solid rgba(226, 232, 240, .94);
    border-radius: 22px;
    padding: 15px;
    color: #172033;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--settings-ops-accent, #14b8a6) 16%, transparent), transparent 42%),
        rgba(255, 255, 255, .9);
    box-shadow: 0 15px 34px rgba(15, 23, 42, .07);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-settings .settings-ops-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--settings-ops-accent, #14b8a6) 44%, #e2e8f0);
    box-shadow: 0 20px 44px rgba(15, 23, 42, .12);
}

.page-settings .settings-ops-card span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--settings-ops-accent, #14b8a6);
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.page-settings .settings-ops-card strong {
    display: block;
    margin-top: 9px;
    color: #0f172a;
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -.05em;
}

.page-settings .settings-ops-card small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-weight: 750;
    line-height: 1.45;
}

.page-settings .settings-ops-card.is-danger { --settings-ops-accent: #ef4444; }
.page-settings .settings-ops-card.is-warning { --settings-ops-accent: #f59e0b; }
.page-settings .settings-ops-card.is-ok { --settings-ops-accent: #10b981; }
.page-settings .settings-ops-card.is-info { --settings-ops-accent: #2563eb; }
.page-settings .settings-ops-card.is-audit { --settings-ops-accent: #7c3aed; }

.destan-modal.is-settings-control .destan-modal__dialog {
    width: min(900px, calc(100vw - 28px));
}

.destan-modal.is-settings-control .destan-modal-row__details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-settings .settings-control-shell {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.page-settings .settings-control-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 14px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid rgba(20, 184, 166, .2);
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, .13), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(240, 253, 250, .92));
    box-shadow: 0 24px 58px rgba(15, 23, 42, .1);
}

.page-settings .settings-control-hero-copy {
    min-width: 0;
    padding: 12px 4px;
}

.page-settings .settings-control-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f766e;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-settings .settings-control-hero-copy h2 {
    max-width: 860px;
    margin: 8px 0 7px;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.4vw, 2.25rem);
    font-weight: 950;
    letter-spacing: -.045em;
}

.page-settings .settings-control-hero-copy p {
    max-width: 840px;
    margin: 0;
    color: #64748b;
    font-size: .95rem;
    font-weight: 750;
    line-height: 1.6;
}

.page-settings .settings-control-scorecard {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    justify-content: center;
    border-radius: 24px;
    padding: 18px;
    color: #fff;
    background: linear-gradient(145deg, #0f766e, #2563eb);
    box-shadow: 0 18px 38px rgba(37, 99, 235, .22);
}

.page-settings .settings-control-scorecard span,
.page-settings .settings-control-scorecard small {
    font-weight: 850;
    opacity: .9;
}

.page-settings .settings-control-scorecard strong {
    font-size: 3rem;
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.08em;
}

.page-settings .settings-control-hero-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(226, 232, 240, .76);
}

.page-settings .settings-control-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.page-settings .settings-strip-item {
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, .94);
    border-radius: 20px;
    padding: 13px 14px;
    text-align: left;
    color: #172033;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--settings-strip-accent, #14b8a6) 18%, transparent), transparent 42%),
        rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-settings .settings-strip-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--settings-strip-accent, #14b8a6) 46%, #e2e8f0);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
}

.page-settings .settings-strip-item span,
.page-settings .settings-strip-item small {
    display: block;
    color: #64748b;
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.page-settings .settings-strip-item strong {
    display: block;
    margin: 5px 0 2px;
    color: var(--settings-strip-accent, #14b8a6);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
}

.page-settings .settings-strip-item.is-danger { --settings-strip-accent: #ef4444; }
.page-settings .settings-strip-item.is-warning { --settings-strip-accent: #f59e0b; }
.page-settings .settings-strip-item.is-ok { --settings-strip-accent: #10b981; }
.page-settings .settings-strip-item.is-info { --settings-strip-accent: #2563eb; }
.page-settings .settings-strip-item.is-audit { --settings-strip-accent: #7c3aed; }

.page-settings .settings-page-tabs {
    position: sticky;
    top: 10px;
    z-index: 8;
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(226, 232, 240, .88);
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
    backdrop-filter: blur(14px);
    overflow-x: auto;
}

.page-settings .settings-page-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #475569;
    background: transparent;
    font-size: .84rem;
    font-weight: 900;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.page-settings .settings-page-tab:hover,
.page-settings .settings-page-tab.is-active {
    color: #0f766e;
    background: linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(37, 99, 235, .08));
    border-color: rgba(20, 184, 166, .2);
}

.page-settings .settings-page-tab.is-active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}

.page-settings .settings-page-panels {
    min-height: 420px;
}

.page-settings .settings-page-panel {
    display: none;
    animation: settingsPanelEnter .2s ease both;
}

.page-settings .settings-page-panel.is-active {
    display: block;
}

@keyframes settingsPanelEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-settings .settings-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(226, 232, 240, .88);
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.page-settings .settings-panel-heading span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-settings .settings-panel-heading h3 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: 1.12rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.page-settings .settings-overview-grid,
.page-settings .settings-role-grid,
.page-settings .settings-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.page-settings .settings-overview-card,
.page-settings .settings-role-card,
.page-settings .settings-check-card,
.page-settings .settings-preview-row,
.page-settings .settings-empty-state {
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
}

.page-settings .settings-overview-card {
    min-height: 210px;
    padding: 18px;
    text-align: left;
    color: #172033;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--settings-overview-accent, #14b8a6) 18%, transparent), transparent 42%),
        rgba(255, 255, 255, .92);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.page-settings .settings-overview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(15, 23, 42, .12);
}

.page-settings .settings-overview-card i {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #fff;
    background: var(--settings-overview-accent, #14b8a6);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--settings-overview-accent, #14b8a6) 28%, transparent);
}

.page-settings .settings-overview-card span {
    display: block;
    margin-top: 12px;
    color: var(--settings-overview-accent, #14b8a6);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page-settings .settings-overview-card strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.page-settings .settings-overview-card small {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-weight: 750;
    line-height: 1.5;
}

.page-settings .settings-overview-card.tone-teal { --settings-overview-accent: #0f766e; }
.page-settings .settings-overview-card.tone-blue { --settings-overview-accent: #2563eb; }
.page-settings .settings-overview-card.tone-purple { --settings-overview-accent: #7c3aed; }
.page-settings .settings-overview-card.tone-orange { --settings-overview-accent: #f97316; }

.page-settings .settings-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.page-settings .settings-check-card {
    padding: 14px 16px;
    border-left: 5px solid var(--settings-check-accent, #10b981);
}

.page-settings .settings-check-card span,
.page-settings .settings-check-card strong {
    display: block;
}

.page-settings .settings-check-card span {
    color: #64748b;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-settings .settings-check-card strong {
    margin-top: 4px;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 850;
}

.page-settings .settings-check-card.is-danger { --settings-check-accent: #ef4444; }
.page-settings .settings-check-card.is-warning { --settings-check-accent: #f59e0b; }
.page-settings .settings-check-card.is-ok { --settings-check-accent: #10b981; }

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

.page-settings .settings-role-card {
    padding: 16px;
}

.page-settings .settings-role-card span,
.page-settings .settings-role-card small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-settings .settings-role-card h4 {
    margin: 4px 0 10px;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.page-settings .settings-role-card p {
    min-height: 46px;
    margin: 10px 0;
    color: #64748b;
    font-size: .86rem;
    font-weight: 750;
    line-height: 1.45;
}

.page-settings .settings-role-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.page-settings .settings-role-stats b,
.page-settings .settings-soft-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, .12);
    font-size: .78rem;
    font-weight: 900;
}

.page-settings .settings-preview-list {
    display: grid;
    gap: 9px;
}

.page-settings .settings-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border-left: 5px solid var(--settings-row-accent, #2563eb);
}

.page-settings .settings-preview-row strong,
.page-settings .settings-preview-row small,
.page-settings .settings-preview-row span {
    display: block;
}

.page-settings .settings-preview-row strong {
    color: #0f172a;
    font-weight: 950;
}

.page-settings .settings-preview-row small {
    color: #64748b;
    font-size: .8rem;
    font-weight: 750;
}

.page-settings .settings-preview-row > span {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--settings-row-accent, #2563eb);
    background: color-mix(in srgb, var(--settings-row-accent, #2563eb) 12%, #fff);
    font-size: .78rem;
    font-weight: 950;
    white-space: nowrap;
}

.page-settings .settings-preview-row.is-ok { --settings-row-accent: #10b981; }
.page-settings .settings-preview-row.is-warning { --settings-row-accent: #f59e0b; }
.page-settings .settings-preview-row.is-info { --settings-row-accent: #2563eb; }

.page-settings .settings-empty-state {
    padding: 18px;
    color: #64748b;
    font-weight: 800;
}

.page-settings .settings-forms-shell {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.page-settings .settings-form-nav {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 10px;
    max-height: calc(100vh - 110px);
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .12), transparent 38%),
        rgba(255, 255, 255, .92);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
    overflow: auto;
}

.page-settings .settings-form-nav-head {
    padding: 4px 4px 8px;
}

.page-settings .settings-form-nav-head span,
.page-settings .settings-form-stage-head > div > span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-settings .settings-form-nav-head strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.page-settings .settings-form-nav-head small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-weight: 750;
}

.page-settings .settings-form-nav-list {
    display: grid;
    gap: 8px;
}

.page-settings .settings-form-tab {
    --settings-form-accent: #0f766e;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 18px;
    color: #172033;
    text-align: left;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--settings-form-accent) 12%, transparent), transparent 40%),
        rgba(255, 255, 255, .88);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.page-settings .settings-form-tab:hover,
.page-settings .settings-form-tab.is-active {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--settings-form-accent) 42%, #e2e8f0);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--settings-form-accent) 18%, transparent), transparent 42%),
        #fff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

.page-settings .settings-form-tab i {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: var(--settings-form-accent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--settings-form-accent) 24%, transparent);
}

.page-settings .settings-form-tab strong,
.page-settings .settings-form-tab small {
    display: block;
}

.page-settings .settings-form-tab strong {
    color: #0f172a;
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.18;
}

.page-settings .settings-form-tab small {
    margin-top: 3px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.35;
}

.page-settings .settings-form-tab.tone-teal { --settings-form-accent: #0f766e; }
.page-settings .settings-form-tab.tone-blue { --settings-form-accent: #2563eb; }
.page-settings .settings-form-tab.tone-green { --settings-form-accent: #10b981; }
.page-settings .settings-form-tab.tone-orange { --settings-form-accent: #f97316; }
.page-settings .settings-form-tab.tone-purple { --settings-form-accent: #7c3aed; }
.page-settings .settings-form-tab.tone-slate { --settings-form-accent: #475569; }

.page-settings .settings-form-stage {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.page-settings .settings-form-stage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .09), transparent 38%),
        rgba(255, 255, 255, .93);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.page-settings .settings-form-stage-head h4 {
    margin: 4px 0 4px;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.page-settings .settings-form-stage-head p {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-weight: 750;
    line-height: 1.45;
}

.page-settings .settings-form-order-details {
    position: relative;
    flex: 0 0 auto;
}

.page-settings .settings-form-order-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, .1);
    font-size: .82rem;
    font-weight: 900;
    list-style: none;
    cursor: pointer;
}

.page-settings .settings-form-order-details > summary::-webkit-details-marker {
    display: none;
}

.page-settings .settings-form-order-details .dashboard-widget-panel {
    width: min(680px, calc(100vw - 40px));
    margin: 10px 0 0;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 46px rgba(15, 23, 42, .14);
}

.page-settings .settings-section-canvas {
    min-width: 0;
}

.page-settings .settings-section-canvas .settings-form-page {
    max-width: none !important;
    margin-top: 0 !important;
}

.page-settings .settings-section-canvas.is-tabbed .settings-form-page {
    display: none;
}

.page-settings .settings-section-canvas.is-tabbed .settings-form-page.is-active {
    display: block;
    animation: settingsPanelEnter .2s ease both;
}

.page-settings .settings-section-canvas .form-card {
    border-radius: 24px;
    border-color: rgba(226, 232, 240, .92);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.page-settings .settings-section-canvas .form-card h5 {
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -.025em;
}

html[data-theme="dark"] .page-settings .settings-command-center {
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .18), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(15, 23, 42, .86));
    border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .page-settings .settings-command-copy,
html[data-theme="dark"] .page-settings .settings-control-card {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .2);
}

html[data-theme="dark"] .page-settings .settings-command-copy h3,
html[data-theme="dark"] .page-settings .settings-control-card strong {
    color: #f8fafc;
}

html[data-theme="dark"] .page-settings .settings-command-copy p,
html[data-theme="dark"] .page-settings .settings-control-card small {
    color: #cbd5e1;
}

html[data-theme="dark"] .page-settings .settings-control-hero,
html[data-theme="dark"] .page-settings .settings-page-tabs,
html[data-theme="dark"] .page-settings .settings-panel-heading,
html[data-theme="dark"] .page-settings .settings-overview-card,
html[data-theme="dark"] .page-settings .settings-role-card,
html[data-theme="dark"] .page-settings .settings-check-card,
html[data-theme="dark"] .page-settings .settings-preview-row,
html[data-theme="dark"] .page-settings .settings-empty-state,
html[data-theme="dark"] .page-settings .settings-form-nav,
html[data-theme="dark"] .page-settings .settings-form-stage-head,
html[data-theme="dark"] .page-settings .settings-form-tab,
html[data-theme="dark"] .page-settings .settings-form-order-details .dashboard-widget-panel {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(148, 163, 184, .22);
}

html[data-theme="dark"] .page-settings .settings-control-hero-copy h2,
html[data-theme="dark"] .page-settings .settings-panel-heading h3,
html[data-theme="dark"] .page-settings .settings-overview-card strong,
html[data-theme="dark"] .page-settings .settings-role-card h4,
html[data-theme="dark"] .page-settings .settings-check-card strong,
html[data-theme="dark"] .page-settings .settings-preview-row strong,
html[data-theme="dark"] .page-settings .settings-form-nav-head strong,
html[data-theme="dark"] .page-settings .settings-form-stage-head h4,
html[data-theme="dark"] .page-settings .settings-form-tab strong,
html[data-theme="dark"] .page-settings .settings-section-canvas .form-card h5 {
    color: #f8fafc;
}

html[data-theme="dark"] .page-settings .settings-control-hero-copy p,
html[data-theme="dark"] .page-settings .settings-overview-card small,
html[data-theme="dark"] .page-settings .settings-role-card p,
html[data-theme="dark"] .page-settings .settings-preview-row small,
html[data-theme="dark"] .page-settings .settings-form-nav-head small,
html[data-theme="dark"] .page-settings .settings-form-stage-head p,
html[data-theme="dark"] .page-settings .settings-form-tab small {
    color: #cbd5e1;
}

@media (max-width: 1199.98px) {
    .page-settings .settings-control-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-settings .settings-ops-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-settings .settings-control-strip,
    .page-settings .settings-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .page-settings .settings-forms-shell {
        grid-template-columns: 1fr;
    }

    .page-settings .settings-form-nav {
        position: static;
        max-height: none;
    }

    .page-settings .settings-form-nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-settings .settings-command-center {
        border-radius: 24px;
        padding: 12px;
    }

    .page-settings .settings-command-hero,
    .page-settings .settings-control-grid {
        grid-template-columns: 1fr;
    }

    .page-settings .settings-command-copy,
    .page-settings .settings-command-score,
    .page-settings .settings-control-card {
        border-radius: 20px;
    }

    .page-settings .settings-control-card {
        min-height: 0;
    }

    .page-settings .settings-ops-board,
    .destan-modal.is-settings-control .destan-modal-row__details {
        grid-template-columns: 1fr;
    }

    .page-settings .settings-control-hero,
    .page-settings .settings-control-strip,
    .page-settings .settings-overview-grid,
    .page-settings .settings-role-grid,
    .page-settings .settings-check-grid {
        grid-template-columns: 1fr;
    }

    .page-settings .settings-control-hero {
        border-radius: 24px;
        padding: 13px;
    }

    .page-settings .settings-control-scorecard {
        min-height: 112px;
    }

    .page-settings .settings-page-tabs {
        top: 6px;
        border-radius: 18px;
    }

    .page-settings .settings-panel-heading {
        align-items: flex-start;
        flex-direction: column;
        border-radius: 20px;
    }

    .page-settings .settings-overview-card {
        min-height: 0;
    }

    .page-settings .settings-preview-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-settings .settings-form-nav-list,
    .page-settings .settings-forms-shell {
        grid-template-columns: 1fr;
    }

    .page-settings .settings-form-stage-head {
        flex-direction: column;
        border-radius: 20px;
    }

    .page-settings .settings-form-order-details,
    .page-settings .settings-form-order-details > summary {
        width: 100%;
    }

    .page-settings .settings-form-order-details > summary {
        justify-content: center;
    }
}

.page-users .users-control-shell {
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}

.page-users .users-control-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 14px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, .13), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(240, 253, 250, .94));
    box-shadow: 0 24px 58px rgba(15, 23, 42, .1);
}

.page-users .users-control-copy {
    min-width: 0;
    padding: 10px 4px;
}

.page-users .users-control-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f766e;
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-users .users-control-copy h2 {
    max-width: 880px;
    margin: 8px 0 7px;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.2vw, 2.18rem);
    font-weight: 950;
    letter-spacing: -.045em;
}

.page-users .users-control-copy p {
    max-width: 840px;
    margin: 0;
    color: #64748b;
    font-size: .94rem;
    font-weight: 750;
    line-height: 1.58;
}

.page-users .users-control-score {
    display: flex;
    min-height: 126px;
    flex-direction: column;
    justify-content: center;
    border-radius: 24px;
    padding: 18px;
    color: #fff;
    background: linear-gradient(145deg, #0f766e, #2563eb);
    box-shadow: 0 18px 38px rgba(37, 99, 235, .22);
}

.page-users .users-control-score span,
.page-users .users-control-score small {
    font-weight: 850;
    opacity: .9;
}

.page-users .users-control-score strong {
    font-size: 3rem;
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.08em;
}

.page-users .users-control-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(226, 232, 240, .76);
}

.page-users .users-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(20, 184, 166, .24);
    border-radius: 999px;
    color: #0f766e;
    background: rgba(255, 255, 255, .76);
    font-size: .83rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.page-users .users-action-pill:hover,
.page-users .users-action-pill.is-active {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, .1);
}

.page-users .users-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.page-users .users-stat-card {
    --users-accent: #0f766e;
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, .94);
    border-radius: 20px;
    padding: 13px 14px;
    text-align: left;
    color: #172033;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--users-accent) 18%, transparent), transparent 42%),
        rgba(255, 255, 255, .94);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-users .users-stat-card:hover,
.page-users .users-stat-card.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--users-accent) 46%, #e2e8f0);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
}

.page-users .users-stat-card span,
.page-users .users-stat-card small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.page-users .users-stat-card strong {
    display: block;
    margin: 5px 0 2px;
    color: var(--users-accent);
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.05em;
}

.page-users .tone-teal { --users-accent: #0f766e; }
.page-users .tone-blue { --users-accent: #2563eb; }
.page-users .tone-green { --users-accent: #10b981; }
.page-users .tone-orange { --users-accent: #f97316; }
.page-users .tone-purple { --users-accent: #7c3aed; }
.page-users .tone-slate { --users-accent: #475569; }

.page-users .users-role-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.page-users .users-role-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #334155;
    background: rgba(241, 245, 249, .9);
    font-size: .78rem;
    font-weight: 900;
}

.page-users .users-role-strip b {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, .13);
    font-size: .74rem;
}

.page-users .users-workspace {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.page-users .users-page-nav {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 10px;
    max-height: calc(100vh - 110px);
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .12), transparent 38%),
        rgba(255, 255, 255, .92);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
    overflow: auto;
}

.page-users .users-page-nav-head {
    padding: 4px 4px 8px;
}

.page-users .users-page-nav-head span,
.page-users .users-page-stage-head > div > span {
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-users .users-page-nav-head strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.page-users .users-page-nav-head small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-weight: 750;
}

.page-users .users-page-nav-list {
    display: grid;
    gap: 8px;
}

.page-users .users-page-tab {
    --users-accent: #0f766e;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 18px;
    color: #172033;
    text-align: left;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--users-accent) 12%, transparent), transparent 40%),
        rgba(255, 255, 255, .88);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.page-users .users-page-tab:hover,
.page-users .users-page-tab.is-active {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--users-accent) 42%, #e2e8f0);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--users-accent) 18%, transparent), transparent 42%),
        #fff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .09);
}

.page-users .users-page-tab i {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: var(--users-accent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--users-accent) 24%, transparent);
}

.page-users .users-page-tab strong,
.page-users .users-page-tab small {
    display: block;
}

.page-users .users-page-tab strong {
    color: #0f172a;
    font-size: .92rem;
    font-weight: 950;
    line-height: 1.18;
}

.page-users .users-page-tab small {
    margin-top: 3px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.35;
}

.page-users .users-page-stage {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.page-users .users-page-stage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .09), transparent 38%),
        rgba(255, 255, 255, .93);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.page-users .users-page-stage-head h3 {
    margin: 4px 0 4px;
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.page-users .users-page-stage-head p {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-weight: 750;
    line-height: 1.45;
}

.page-users .users-order-details {
    position: relative;
    flex: 0 0 auto;
}

.page-users .users-order-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, .1);
    font-size: .82rem;
    font-weight: 900;
    list-style: none;
    cursor: pointer;
}

.page-users .users-order-details > summary::-webkit-details-marker {
    display: none;
}

.page-users .users-order-details .dashboard-widget-panel {
    width: min(680px, calc(100vw - 40px));
    margin: 10px 0 0;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 46px rgba(15, 23, 42, .14);
}

.page-users .users-section-canvas {
    min-width: 0;
}

.page-users .users-section-canvas .users-section-page {
    max-width: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.page-users .users-section-canvas.is-tabbed .users-section-page {
    display: none;
}

.page-users .users-section-canvas.is-tabbed .users-section-page.is-active {
    display: block;
    animation: settingsPanelEnter .2s ease both;
}

.page-users .users-section-page > .table-wrap,
.page-users .users-section-page > .form-card {
    border-radius: 24px;
    border-color: rgba(226, 232, 240, .92);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.page-users .users-section-page > .table-wrap h5,
.page-users .users-section-page > .form-card h5 {
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -.025em;
}

.page-users .user-access-designer {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(20, 184, 166, .2);
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, .13), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .94));
}

.page-users .user-access-designer-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.page-users .user-access-designer-head span {
    display: block;
    color: #0f766e;
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-users .user-access-designer-head h6 {
    margin: 4px 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.page-users .user-access-designer-head p {
    max-width: 720px;
    margin: 0;
    color: #64748b;
    font-size: .84rem;
    font-weight: 750;
}

.page-users .user-access-actions,
.page-users .role-template-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-users .users-access-compact {
    padding: 10px 12px 10px 44px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
}

.page-users .role-template-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 999px;
    color: #0f766e;
    background: rgba(240, 253, 250, .82);
    font-size: .78rem;
    font-weight: 950;
    cursor: pointer;
}

.page-users .users-profile-box {
    background: rgba(255, 255, 255, .86);
}

.page-users .user-access-designer > .users-access-summary-panel,
.page-users .user-access-designer > .users-access-compact,
.page-users .user-access-designer > .role-template-strip,
.page-users .user-access-designer > .users-profile-box,
.page-users .user-access-designer > .row.g-2.align-items-end.mt-1,
.page-users .user-access-designer > .mt-3,
.page-users .user-access-designer > .users-permission-modal {
    display: none !important;
}

.page-users .users-permission-open {
    min-height: 42px;
    padding-inline: 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 950;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .2);
}

.page-users .access-level-shell {
    display: grid;
    gap: 8px;
}

.page-users .access-level-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.page-users .access-level-guide-item {
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--level-accent, #64748b) 13%, transparent), transparent 44%),
        rgba(255, 255, 255, .88);
}

.page-users .access-level-guide-item strong,
.page-users .access-level-guide-item span {
    display: block;
}

.page-users .access-level-guide-item strong {
    color: #0f172a;
    font-size: .86rem;
    font-weight: 950;
}

.page-users .access-level-guide-item span {
    margin-top: 3px;
    color: #64748b;
    font-size: .72rem;
    font-weight: 750;
}

.page-users .access-level-guide-item.is-hidden {
    --level-accent: #ef4444;
}

.page-users .access-level-guide-item.is-view {
    --level-accent: #0ea5e9;
}

.page-users .access-level-guide-item.is-action {
    --level-accent: #0f766e;
}

.page-users .access-level-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.page-users .access-level-card {
    --active-level: #94a3b8;
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(260px, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: none;
}

.page-users .access-level-card[data-level="hidden"] {
    --active-level: #ef4444;
}

.page-users .access-level-card[data-level="view"] {
    --active-level: #0ea5e9;
}

.page-users .access-level-card[data-level="action"] {
    --active-level: #0f766e;
}

.page-users .access-level-card-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.page-users .access-level-card-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    background: var(--active-level);
    box-shadow: none;
}

.page-users .access-level-card h6 {
    margin: 0;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 950;
}

.page-users .access-critical-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #b45309;
    background: rgba(251, 191, 36, .16);
    font-size: .62rem;
    font-weight: 950;
    vertical-align: middle;
}

.page-users .access-level-card p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.35;
}

.page-users .access-level-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.page-users .access-level-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 7px;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 10px;
    color: #475569;
    background: rgba(248, 250, 252, .95);
    font-size: .68rem;
    font-weight: 950;
    text-align: center;
    cursor: pointer;
}

.page-users .access-level-option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.page-users .access-level-option:has(input:checked) {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
}

.page-users .access-level-option.is-hidden:has(input:checked) {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.page-users .access-level-option.is-view:has(input:checked) {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.page-users .access-level-option.is-action:has(input:checked) {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.page-users .access-level-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.page-users .access-level-meta span {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    color: #475569;
    background: rgba(241, 245, 249, .94);
    font-size: .68rem;
    font-weight: 900;
}

.page-users .access-expiry-line {
    display: grid;
    grid-template-columns: minmax(110px, .8fr) minmax(130px, 1fr);
    gap: 8px 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(240, 253, 250, .92), rgba(239, 246, 255, .82));
}

.page-users .access-expiry-line label {
    margin: 0;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.page-users .access-expiry-line input {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, .42);
    border-radius: 12px;
    color: #0f172a;
    background: rgba(255, 255, 255, .92);
    font-size: .78rem;
    font-weight: 850;
}

.page-users .access-expiry-line small {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: .68rem;
    font-weight: 750;
}

.page-users .access-risk-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid rgba(245, 158, 11, .28);
    border-radius: 16px;
    color: #92400e;
    background: linear-gradient(135deg, rgba(255, 251, 235, .96), rgba(254, 243, 199, .72));
    font-size: .78rem;
    font-weight: 900;
}

.page-users .access-risk-hint[hidden] {
    display: none !important;
}

.page-users .access-sub-toggle-panel {
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 12px;
    background: rgba(248, 250, 252, .82);
}

.page-users .access-sub-toggle-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    color: #0f172a;
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
    list-style: none;
}

.page-users .access-sub-toggle-panel > summary::-webkit-details-marker {
    display: none;
}

.page-users .access-sub-toggle-panel > summary b {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, .12);
    font-size: .68rem;
    font-weight: 950;
}

.page-users .access-sub-toggle-list {
    display: grid;
    gap: 6px;
    padding: 0 8px 8px;
}

.page-users .access-sub-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px auto;
    gap: 9px;
    align-items: center;
    padding: 7px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 10px;
    background: rgba(255, 255, 255, .86);
}

.page-users .access-sub-toggle-row strong,
.page-users .access-sub-toggle-row small {
    display: block;
}

.page-users .access-sub-toggle-row strong {
    color: #0f172a;
    font-size: .72rem;
    font-weight: 950;
}

.page-users .access-sub-toggle-row small {
    color: #64748b;
    font-size: .62rem;
    font-weight: 750;
}

.page-users .access-sub-toggle-row input {
    width: 38px;
    height: 20px;
    accent-color: #ef4444;
    cursor: pointer;
}

.page-users .access-sub-toggle-row input:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.page-users .access-sub-toggle-row em {
    color: #ef4444;
    font-size: .62rem;
    font-style: normal;
    font-weight: 950;
}

.page-users .access-sub-empty {
    padding: 10px;
    color: #64748b;
    font-size: .75rem;
    font-weight: 750;
}

.page-users .access-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    justify-content: flex-end;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(7px);
}

.page-users .access-drawer-backdrop.is-open {
    display: flex;
}

.page-users .access-drawer-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(520px, 100vw);
    height: 100%;
    padding: 18px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .15), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: -28px 0 70px rgba(15, 23, 42, .26);
    animation: accessDrawerIn .18s ease-out;
}

@keyframes accessDrawerIn {
    from { transform: translateX(30px); opacity: .75; }
    to { transform: translateX(0); opacity: 1; }
}

.page-users .access-drawer-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
}

.page-users .access-drawer-head span {
    color: #0f766e;
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-users .access-drawer-head h5 {
    margin: 4px 0;
    color: #0f172a;
    font-weight: 950;
}

.page-users .access-drawer-head p {
    margin: 0;
    color: #64748b;
    font-size: .78rem;
    font-weight: 750;
}

.page-users .access-drawer-close {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 14px;
    color: #0f172a;
    background: rgba(255, 255, 255, .88);
}

.page-users .access-drawer-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.page-users .access-drawer-summary div {
    padding: 10px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 16px;
    background: rgba(255, 255, 255, .86);
}

.page-users .access-drawer-summary span,
.page-users .access-drawer-summary strong {
    display: block;
}

.page-users .access-drawer-summary span {
    color: #64748b;
    font-size: .67rem;
    font-weight: 900;
}

.page-users .access-drawer-summary strong {
    margin-top: 3px;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 950;
}

.page-users .access-drawer-list {
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.page-users .access-drawer-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
}

.page-users .access-drawer-row strong,
.page-users .access-drawer-row small {
    display: block;
}

.page-users .access-drawer-row strong {
    color: #0f172a;
    font-size: .84rem;
    font-weight: 950;
}

.page-users .access-drawer-row small {
    color: #64748b;
    font-size: .7rem;
    font-weight: 750;
}

.page-users .access-drawer-badge {
    align-self: flex-start;
    min-width: 92px;
    padding: 6px 8px;
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-weight: 950;
    text-align: center;
}

.page-users .access-drawer-badge[data-level="hidden"] {
    background: #ef4444;
}

.page-users .access-drawer-badge[data-level="view"] {
    background: #0ea5e9;
}

.page-users .access-drawer-badge[data-level="action"] {
    background: #0f766e;
}

.page-users .access-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
}

/* Ultra sade yetki ekranı: kullanıcı seç, kart seviyesini ver, alt kartı kapat. */
.page-users .permission-live-side,
.page-users .permission-studio-audit,
.page-users .permission-advanced-box,
.page-users .access-level-guide,
.page-users .access-level-meta,
.page-users .access-expiry-line,
.page-users .access-risk-hint,
.page-users .access-level-card p,
.page-users .access-critical-badge,
.page-users .user-access-designer-head,
.page-users .users-permission-open {
    display: none !important;
}

.page-users .users-copy-permission-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(240, 253, 250, .94), rgba(239, 246, 255, .9));
}

.page-users .users-copy-permission-form select {
    min-width: 150px;
}

.page-users .users-copy-permission-form i {
    color: #0f766e;
    font-weight: 950;
}

.page-users .users-control-hero {
    display: none !important;
}

.page-users .users-stat-strip,
.page-users .users-role-strip,
.page-users .users-page-nav,
.page-users .users-page-stage-head {
    display: none !important;
}

.page-users .users-control-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px;
    border-radius: 28px;
}

.page-users .users-control-copy h2 {
    max-width: 760px;
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.page-users .users-control-score {
    min-width: 170px;
}

.page-users .users-control-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.page-users .users-workspace {
    display: block;
    margin-top: 0;
}

.page-users .users-page-stage {
    min-width: 0;
}

.page-users .users-section-canvas {
    margin: 0;
}

.page-users .permission-studio-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    max-width: 980px;
    margin-inline: auto;
}

.page-users .permission-studio-form > :not(.permission-studio-top):not(.permission-live-side) {
    grid-column: 1;
}

.page-users .permission-studio-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 16px;
    background: #fff;
}

.page-users .permission-studio-top span,
.page-users .permission-studio-picker label,
.page-users .permission-live-head span {
    display: block;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-users .permission-studio-top h4 {
    margin: 3px 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
}

.page-users .permission-studio-top p,
.page-users .permission-live-head p {
    display: none;
}

.page-users .permission-studio-picker .form-select {
    min-height: 38px;
    border-radius: 12px;
    font-weight: 850;
}

.page-users .permission-studio-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.page-users .permission-studio-actions .btn {
    white-space: nowrap;
    border-radius: 12px;
    font-weight: 900;
}

.page-users .permission-live-side {
    grid-column: 2;
    grid-row: 2 / span 10;
    position: sticky;
    top: 88px;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, .16), transparent 36%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 22px 44px rgba(15, 23, 42, .08);
}

.page-users .permission-live-head h6 {
    margin: 4px 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.page-users .permission-live-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.page-users .permission-live-summary div {
    padding: 10px;
    border-radius: 16px;
    background: rgba(241, 245, 249, .9);
}

.page-users .permission-live-summary span,
.page-users .permission-live-summary strong {
    display: block;
}

.page-users .permission-live-summary span {
    color: #64748b;
    font-size: .68rem;
    font-weight: 850;
}

.page-users .permission-live-summary strong {
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
}

.page-users .permission-live-list {
    display: grid;
    gap: 8px;
    max-height: 390px;
    overflow: auto;
    padding-right: 2px;
}

.page-users .permission-live-list .access-drawer-row {
    padding: 10px;
    border-radius: 16px;
    box-shadow: none;
}

.page-users .permission-live-note {
    padding: 10px 12px;
    border-radius: 16px;
    color: #075985;
    background: #e0f2fe;
    font-size: .74rem;
    font-weight: 850;
}

.page-users .permission-studio-form > .mb-2,
.page-users .permission-studio-form > .mb-3 {
    margin-bottom: 0 !important;
}

.page-users .permission-studio-form > .mb-2,
.page-users .permission-studio-form > .mb-3:not(:has(.user-access-designer)) {
    padding: 9px 10px;
    border: 1px solid rgba(226, 232, 240, .86);
    border-radius: 12px;
    background: rgba(255, 255, 255, .9);
}

.page-users .permission-advanced-box {
    grid-column: 1;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 18px;
    background: rgba(248, 250, 252, .82);
    overflow: hidden;
}

.page-users .permission-advanced-box > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.page-users .permission-advanced-box > summary::-webkit-details-marker {
    display: none;
}

.page-users .permission-advanced-box > summary span {
    color: #0f172a;
    font-size: .85rem;
    font-weight: 950;
}

.page-users .permission-advanced-box > summary small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 750;
    text-align: right;
}

.page-users .permission-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
}

.page-users .permission-advanced-grid > .mb-3 {
    margin: 0 !important;
    padding: 10px;
    border: 1px solid rgba(226, 232, 240, .78);
    border-radius: 14px;
    background: #fff;
}

.page-users .permission-studio-form .form-label {
    color: #334155;
    font-size: .76rem;
    font-weight: 900;
}

.page-users .permission-studio-form .form-control,
.page-users .permission-studio-form .form-select {
    border-radius: 14px;
}

.page-users .permission-studio-audit {
    margin-top: 16px !important;
}

.page-users .users-audit-stream {
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9));
}

.page-users .users-audit-list {
    display: grid;
    gap: 8px;
}

.page-users .users-audit-row {
    display: grid;
    grid-template-columns: 132px minmax(130px, .45fr) minmax(150px, .45fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 16px;
    background: #fff;
}

.page-users .users-audit-row span,
.page-users .users-audit-row small,
.page-users .users-audit-row em {
    color: #64748b;
    font-size: .72rem;
    font-style: normal;
    font-weight: 750;
}

.page-users .users-audit-row strong {
    color: #0f172a;
    font-size: .82rem;
    font-weight: 950;
}

.page-users .users-audit-row.is-empty {
    grid-template-columns: 1fr;
}

.page-users .users-access-summary-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.page-users .users-access-summary-card {
    position: relative;
    min-height: 98px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 22px;
    text-align: left;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
    cursor: pointer;
}

.page-users .users-access-summary-card::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -34px;
    width: 105px;
    height: 105px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--summary-accent, #2563eb) 17%, transparent);
}

.page-users .users-access-summary-card span,
.page-users .users-access-summary-card small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
}

.page-users .users-access-summary-card strong {
    display: block;
    margin: 7px 0 4px;
    color: #0f172a;
    font-size: 1.38rem;
    font-weight: 950;
    letter-spacing: -.04em;
}

.page-users .users-access-summary-card.tone-blue {
    --summary-accent: #2563eb;
}

.page-users .users-access-summary-card.tone-teal {
    --summary-accent: #0f766e;
}

.page-users .users-access-summary-card.tone-amber {
    --summary-accent: #f59e0b;
}

.page-users .users-permission-modal .modal-dialog {
    max-width: min(1180px, calc(100vw - 32px));
}

.page-users .users-permission-modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(20, 184, 166, .32);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .14), transparent 34%),
        linear-gradient(135deg, rgba(240, 253, 250, .98), rgba(255, 255, 255, .98) 44%, rgba(239, 246, 255, .98));
    box-shadow: 0 32px 82px rgba(15, 23, 42, .28);
}

.page-users .users-permission-modal-head {
    align-items: flex-start;
    padding: 18px 20px;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #0f766e, #2563eb);
}

.page-users .users-permission-modal-head span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .78);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-users .users-permission-modal-head h5,
.page-users .users-permission-modal-head p {
    margin: 0;
}

.page-users .users-permission-modal-head h5 {
    font-size: 1.15rem;
    font-weight: 950;
}

.page-users .users-permission-modal-head p {
    max-width: 720px;
    color: rgba(255, 255, 255, .84);
    font-size: .82rem;
    font-weight: 750;
}

.page-users .users-permission-modal-head .btn-close {
    opacity: .95;
    filter: invert(1);
}

.page-users .users-permission-modal-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.page-users .users-permission-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 20px;
    background: rgba(255, 255, 255, .84);
}

.page-users .users-permission-modal-toolbar strong,
.page-users .users-permission-modal-toolbar small {
    display: block;
}

.page-users .users-permission-modal-toolbar strong {
    color: #0f172a;
    font-weight: 950;
}

.page-users .users-permission-modal-toolbar small {
    color: #64748b;
    font-weight: 750;
}

.page-users .users-permission-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top-color: rgba(226, 232, 240, .86);
    background: rgba(255, 255, 255, .8);
}

.page-users .users-permission-modal-footnote {
    max-width: 560px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 750;
}

.page-users .access-card-page-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(226, 232, 240, .86);
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
}

.page-users .access-card-page-tab {
    --access-tab-accent: #0f766e;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 8px 9px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 16px;
    color: #172033;
    text-align: left;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--access-tab-accent) 12%, transparent), transparent 42%),
        rgba(248, 250, 252, .92);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.page-users .access-card-page-tab:hover,
.page-users .access-card-page-tab.is-active {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, .42);
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, .18), transparent 45%),
        #fff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

.page-users .access-card-page-tab.is-hidden {
    --access-tab-accent: #ef4444;
    opacity: .82;
}

.page-users .access-card-page-tab.is-partial {
    --access-tab-accent: #f59e0b;
}

.page-users .access-card-page-tab i {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: var(--access-tab-accent);
}

.page-users .access-card-page-tab span {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: .78rem;
    font-weight: 950;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page-users .access-card-page-tab b {
    display: inline-flex;
    min-width: 38px;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--access-tab-accent);
    background: color-mix(in srgb, var(--access-tab-accent) 12%, #fff);
    font-size: .68rem;
    font-weight: 950;
}

.page-users .access-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.page-users .access-card-grid.is-paged {
    grid-template-columns: 1fr;
}

.page-users .access-card-grid.is-paged .access-module-card {
    display: none;
}

.page-users .access-card-grid.is-paged .access-module-card.is-access-active {
    display: block;
}

.page-users .access-module-card {
    min-width: 0;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 22px;
    padding: 13px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .08), transparent 38%),
        rgba(255, 255, 255, .94);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.page-users .access-module-card.is-hidden {
    border-color: rgba(239, 68, 68, .28);
    background:
        radial-gradient(circle at top right, rgba(239, 68, 68, .1), transparent 40%),
        rgba(255, 247, 247, .94);
}

.page-users .access-module-card.is-partial {
    border-color: rgba(245, 158, 11, .28);
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, .11), transparent 40%),
        rgba(255, 251, 235, .92);
}

.page-users .access-module-card-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.page-users .access-module-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

.page-users .access-module-card h6 {
    margin: 0;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 950;
}

.page-users .access-module-card p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.35;
}

.page-users .access-module-count {
    display: inline-flex;
    min-width: 44px;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, .12);
    font-size: .72rem;
    font-weight: 950;
}

.page-users .access-module-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin: 12px 0;
}

.page-users .access-hide-toggle,
.page-users .access-route-hide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(241, 245, 249, .9);
    color: #475569;
    font-size: .73rem;
    font-weight: 900;
}

.page-users .access-subcard-list {
    display: grid;
    gap: 8px;
}

.page-users .access-subcard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 16px;
    background: rgba(248, 250, 252, .92);
}

.page-users .access-permission-line {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.page-users .access-permission-line strong,
.page-users .access-permission-line small {
    display: block;
}

.page-users .access-permission-line strong {
    color: #172033;
    font-size: .8rem;
    font-weight: 950;
}

.page-users .access-permission-line small {
    color: #64748b;
    font-size: .68rem;
    font-weight: 750;
}

.page-users .users-raw-permission-details > summary {
    cursor: pointer;
    color: #0f766e;
    font-weight: 900;
}

html[data-theme="dark"] .page-users .users-control-hero,
html[data-theme="dark"] .page-users .users-stat-card,
html[data-theme="dark"] .page-users .users-role-strip,
html[data-theme="dark"] .page-users .users-page-nav,
html[data-theme="dark"] .page-users .users-page-stage-head,
html[data-theme="dark"] .page-users .users-page-tab,
html[data-theme="dark"] .page-users .users-order-details .dashboard-widget-panel {
    background: rgba(15, 23, 42, .78);
    border-color: rgba(148, 163, 184, .22);
}

html[data-theme="dark"] .page-users .users-control-copy h2,
html[data-theme="dark"] .page-users .users-page-nav-head strong,
html[data-theme="dark"] .page-users .users-page-tab strong,
html[data-theme="dark"] .page-users .users-page-stage-head h3,
html[data-theme="dark"] .page-users .users-section-page > .table-wrap h5,
html[data-theme="dark"] .page-users .users-section-page > .form-card h5 {
    color: #f8fafc;
}

html[data-theme="dark"] .page-users .users-control-copy p,
html[data-theme="dark"] .page-users .users-stat-card small,
html[data-theme="dark"] .page-users .users-page-nav-head small,
html[data-theme="dark"] .page-users .users-page-tab small,
html[data-theme="dark"] .page-users .users-page-stage-head p {
    color: #cbd5e1;
}

@media (max-width: 1199.98px) {
    .page-users .access-level-card {
        grid-template-columns: 1fr;
    }

    .page-users .permission-studio-form,
    .page-users .permission-studio-top {
        grid-template-columns: 1fr;
    }

    .page-users .permission-live-side {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }

    .page-users .users-workspace,
    .page-users .users-control-hero {
        grid-template-columns: 1fr;
    }

    .page-users .users-page-nav {
        position: static;
        max-height: none;
    }

    .page-users .users-page-nav-list,
    .page-users .users-stat-strip,
    .page-users .users-access-summary-panel,
    .page-users .access-level-grid,
    .page-users .access-level-guide,
    .page-users .access-card-page-nav,
    .page-users .access-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .page-users .users-control-hero,
    .page-users .users-page-stage-head {
        border-radius: 22px;
        padding: 13px;
    }

    .page-users .users-stat-strip,
    .page-users .users-access-summary-panel,
    .page-users .access-level-grid,
    .page-users .access-level-guide,
    .page-users .access-level-options,
    .page-users .users-page-nav-list,
    .page-users .access-card-page-nav,
    .page-users .access-card-grid,
    .page-users .access-subcard,
    .page-users .access-expiry-line,
    .page-users .users-audit-row {
        grid-template-columns: 1fr;
    }

    .page-users .users-page-stage-head,
    .page-users .user-access-designer-head,
    .page-users .users-copy-permission-form {
        flex-direction: column;
    }

    .page-users .users-copy-permission-form,
    .page-users .users-copy-permission-form select,
    .page-users .users-copy-permission-form button {
        width: 100%;
    }

    .page-users .users-order-details,
    .page-users .users-order-details > summary {
        width: 100%;
    }

    .page-users .users-order-details > summary {
        justify-content: center;
    }

    .page-users .permission-studio-actions {
        flex-direction: column;
    }

    .page-users .permission-studio-actions .btn {
        width: 100%;
    }

    .page-users .users-permission-modal .modal-dialog {
        max-width: calc(100vw - 14px);
        margin-inline: 7px;
    }

    .page-users .users-permission-modal-body {
        padding: 10px;
    }

    .page-users .users-permission-modal-toolbar,
    .page-users .users-permission-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .page-users .access-drawer-panel {
        width: 100vw;
        padding: 14px;
    }

    .page-users .access-drawer-summary {
        grid-template-columns: 1fr;
    }
}

.rena-nav-group[data-rena-nav-group="ayar-ve-kontrol"] {
    border-color: rgba(20, 184, 166, .28);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, .14), transparent 42%),
        linear-gradient(145deg, rgba(240, 253, 250, .95), rgba(255, 255, 255, .9));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 14px 34px rgba(15, 23, 42, .06);
}

.rena-nav-group[data-rena-nav-group="ayar-ve-kontrol"] .rena-nav-title {
    color: #0f766e;
}

.rena-nav-group[data-rena-nav-group="ayar-ve-kontrol"] .rena-nav-title-main i {
    color: #0f766e;
}

.rena-nav-group[data-rena-nav-group="ayar-ve-kontrol"] .rena-nav-link {
    border-radius: 15px;
}

.rena-nav-group[data-rena-nav-group="ayar-ve-kontrol"] .rena-nav-link.active,
.rena-nav-group[data-rena-nav-group="ayar-ve-kontrol"] .rena-nav-link:hover {
    color: #0f766e;
    background: linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(59, 130, 246, .1));
}

.mobile-flat-nav-group:has(.mobile-flat-nav-title span) {
    min-width: 0;
}

html[data-theme="dark"] .rena-nav-group[data-rena-nav-group="ayar-ve-kontrol"] {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, .16), transparent 42%),
        linear-gradient(145deg, rgba(15, 23, 42, .92), rgba(15, 23, 42, .78));
    border-color: rgba(20, 184, 166, .2);
}

/* Yetki ve Roller final sade mod: tek ekran, ince satir, net karar. */
.page-users .users-section-page:not([data-section-key="user_form"]) {
    display: none !important;
}

.page-users .users-section-page[data-section-key="user_form"] > .form-card {
    max-width: 980px;
    margin-inline: auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-users .users-section-page[data-section-key="user_form"] > .form-card > h5,
.page-users #applyRoleTemplate,
.page-users #userForm > button.btn-primary.w-100,
.page-users #userForm .permission-studio-actions .btn-outline-primary {
    display: none !important;
}

.page-users #userForm.permission-studio-form {
    max-width: 980px !important;
    gap: 8px !important;
}

.page-users #userForm .permission-studio-top {
    position: sticky;
    top: 74px;
    z-index: 20;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end;
    padding: 10px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
}

.page-users #userForm .permission-studio-top > div:first-child {
    display: none !important;
}

.page-users #userForm .permission-studio-picker label {
    margin-bottom: 4px;
}

.page-users #userForm .permission-studio-picker label::before {
    content: "1. ";
}

.page-users #userForm .permission-studio-actions .btn-primary::before {
    content: "2. ";
}

.page-users #userForm > .mb-2,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

.page-users #userForm > .mb-2 .form-label,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) .form-label {
    margin: 0;
}

.page-users #userForm .user-access-designer {
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-users #userForm .access-level-grid {
    overflow: hidden;
    gap: 0 !important;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 16px;
    background: #fff;
}

.page-users #userForm .access-level-card {
    grid-template-columns: minmax(185px, .76fr) minmax(255px, 1fr) minmax(118px, auto) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 0 !important;
    background: #fff !important;
}

.page-users #userForm .access-level-card:last-child {
    border-bottom: 0 !important;
}

.page-users #userForm .access-level-card-head {
    grid-template-columns: 28px minmax(0, 1fr) !important;
}

.page-users #userForm .access-level-card-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: .78rem;
}

.page-users #userForm .access-level-card h6 {
    font-size: .8rem !important;
}

.page-users #userForm .access-level-options {
    gap: 5px !important;
}

.page-users #userForm .access-level-option {
    min-height: 30px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    font-size: .64rem !important;
}

.page-users #userForm .access-sub-toggle-panel {
    justify-self: end;
    width: 118px;
    min-width: 118px;
    border-radius: 10px !important;
}

.page-users #userForm .access-sub-toggle-panel[open] {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
}

.page-users #userForm .access-sub-toggle-panel > summary {
    min-height: 30px;
    padding: 6px 8px !important;
}

.page-users #userForm .access-sub-toggle-panel > summary span {
    font-size: 0;
}

.page-users #userForm .access-sub-toggle-panel > summary span::after {
    content: "Alt Kartlar";
    font-size: .68rem;
}

.page-users #userForm .access-sub-toggle-row {
    grid-template-columns: minmax(0, 1fr) 34px 82px !important;
    padding: 6px !important;
}

.page-users #userForm .access-sub-toggle-row small {
    display: none !important;
}

@media (max-width: 900px) {
    .page-users #userForm .permission-studio-top,
    .page-users #userForm > .mb-2,
    .page-users #userForm > .mb-3:not(:has(.user-access-designer)),
    .page-users #userForm .access-level-card {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm .permission-studio-top {
        position: static;
    }

    .page-users #userForm .permission-studio-actions .btn-primary,
    .page-users #userForm .access-sub-toggle-panel {
        width: 100%;
    }
}

/* Netcad benzeri yetkilendirme agaci: sol grup/kullanici, sag yetki dallari. */
.page-users #userForm.permission-studio-form {
    grid-template-columns: 286px minmax(0, 1fr) !important;
    max-width: 1220px !important;
    gap: 10px !important;
    align-items: start;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .34);
    border-radius: 12px;
    background-color: #f4f6f8;
    background-image: radial-gradient(rgba(100, 116, 139, .28) 1px, transparent 1px);
    background-size: 16px 16px;
    box-shadow: inset 0 1px 0 #fff, 0 18px 42px rgba(15, 23, 42, .08);
}

.page-users #userForm .permission-studio-top {
    position: sticky;
    top: 72px;
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch;
    padding: 12px !important;
    border: 1px solid #d5dde7;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ffffff, #eef3f8);
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(15, 23, 42, .08);
}

.page-users #userForm .permission-studio-top > div:first-child {
    display: block !important;
    padding-bottom: 8px;
    border-bottom: 1px solid #dce3ec;
}

.page-users #userForm .permission-studio-top > div:first-child span {
    display: inline-flex;
    color: #64748b;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-users #userForm .permission-studio-top h4 {
    margin: 4px 0 0;
    color: #dc2626;
    font-size: 1rem;
    font-weight: 950;
}

.page-users #userForm .permission-studio-picker label {
    color: #475569;
}

.page-users #userForm .permission-studio-picker label::before,
.page-users #userForm .permission-studio-actions .btn-primary::before {
    content: "" !important;
}

.page-users #userForm .permission-tree-side {
    display: grid;
    gap: 12px;
}

.page-users #userForm .permission-tree-block {
    display: grid;
    gap: 4px;
}

.page-users #userForm .permission-tree-block > span {
    color: #475569;
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.page-users #userForm .permission-tree-node {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    min-height: 28px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #334155;
    text-align: left;
    text-decoration: none;
    background: transparent;
    font-size: .78rem;
    font-weight: 800;
}

.page-users #userForm .permission-tree-node:hover,
.page-users #userForm .permission-tree-node.is-active {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1e40af;
}

.page-users #userForm .permission-tree-node i {
    color: #2563eb;
    font-size: .86rem;
}

.page-users #userForm .permission-tree-node strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page-users #userForm .permission-tree-node em {
    color: #64748b;
    font-size: .68rem;
    font-style: normal;
    font-weight: 900;
}

.page-users #userForm .permission-studio-actions {
    justify-content: stretch !important;
}

.page-users #userForm .permission-studio-actions .btn-primary {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #dc2626, #2563eb);
}

.page-users #userForm > .mb-2,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) {
    grid-column: 1 !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    min-height: 42px !important;
    padding: 7px 9px !important;
    border-color: #d5dde7 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .84) !important;
}

.page-users #userForm > .mb-2 .form-label,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) .form-label {
    color: #475569;
    font-size: .68rem;
}

.page-users #userForm > .mb-2 .form-control,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) .form-select,
.page-users #userForm .permission-studio-picker .form-select {
    min-height: 34px;
    border-color: #cbd5e1;
    border-radius: 7px;
    background: #fff;
    font-size: .78rem;
}

.page-users #userForm > .mb-3:has(.user-access-designer) {
    grid-column: 2 !important;
    grid-row: 1 / span 8;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(15, 23, 42, .07);
    overflow: hidden;
}

.page-users #userForm .user-access-designer {
    border-radius: 0 !important;
    background: #fff !important;
}

.page-users #userForm .user-access-designer-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-bottom: 1px solid #93c5fd;
    background: linear-gradient(90deg, #bfdbfe, #dbeafe 42%, #eff6ff);
}

.page-users #userForm .user-access-designer-head span {
    color: #dc2626;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-users #userForm .user-access-designer-head h6 {
    margin: 1px 0 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 950;
}

.page-users #userForm .user-access-designer-head p {
    display: none;
}

.page-users #userForm .access-level-shell {
    padding: 10px 12px 12px;
    background: #fff;
}

.page-users #userForm .access-level-grid {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.page-users #userForm .access-level-card {
    grid-template-columns: minmax(230px, .92fr) minmax(250px, .78fr) minmax(130px, auto) !important;
    min-height: 38px;
    padding: 5px 4px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: transparent !important;
}

.page-users #userForm .access-level-card:hover {
    background: #f8fbff !important;
}

.page-users #userForm .access-level-card-head {
    grid-template-columns: 18px 20px minmax(0, 1fr) !important;
    gap: 5px !important;
}

.page-users #userForm .access-level-card-head::before {
    content: "+";
    display: inline-flex;
    width: 13px;
    height: 13px;
    align-items: center;
    justify-content: center;
    align-self: center;
    border: 1px solid #93c5fd;
    border-radius: 2px;
    color: #2563eb;
    background: #eff6ff;
    font-size: .68rem;
    font-weight: 950;
    line-height: 1;
}

.page-users #userForm .access-level-card-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #2563eb !important;
    font-size: .8rem;
}

.page-users #userForm .access-level-card h6 {
    color: #1e293b;
    font-size: .82rem !important;
    font-weight: 900;
}

.page-users #userForm .access-level-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.page-users #userForm .access-level-option {
    justify-content: flex-start;
    min-height: 26px !important;
    padding: 4px 6px 4px 22px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #334155 !important;
    box-shadow: none !important;
    font-size: .7rem !important;
}

.page-users #userForm .access-level-option::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    border: 1px solid #94a3b8;
    border-radius: 3px;
    background: #f8fafc;
}

.page-users #userForm .access-level-option:has(input:checked)::before {
    border-color: #2563eb;
    background: #2563eb;
    box-shadow: inset 0 0 0 2px #fff;
}

.page-users #userForm .access-level-option:has(input:checked) {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

.page-users #userForm .access-sub-toggle-panel {
    width: 130px;
    min-width: 130px;
    border: 0 !important;
    background: transparent !important;
}

.page-users #userForm .access-sub-toggle-panel > summary {
    justify-content: center;
    min-height: 26px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1d4ed8;
    background: #eff6ff;
}

.page-users #userForm .access-sub-toggle-panel > summary b {
    display: none;
}

.page-users #userForm .access-sub-toggle-panel[open] {
    grid-column: 1 / -1;
    margin: 2px 0 8px 28px;
    padding: 7px 8px 7px 20px;
    border-left: 2px solid #93c5fd !important;
    background: #f8fbff !important;
}

.page-users #userForm .access-sub-toggle-list {
    gap: 2px;
    padding: 0;
}

.page-users #userForm .access-sub-toggle-row {
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    min-height: 27px;
    padding: 3px 4px !important;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

.page-users #userForm .access-sub-toggle-row::before {
    content: "";
    width: 10px;
    height: 1px;
    align-self: center;
    background: #cbd5e1;
}

.page-users #userForm .access-sub-toggle-row span {
    order: 2;
}

.page-users #userForm .access-sub-toggle-row input {
    order: 1;
    width: 13px;
    height: 13px;
}

.page-users #userForm .access-sub-toggle-row em {
    order: 3;
    color: #dc2626;
}

@media (max-width: 900px) {
    .page-users #userForm.permission-studio-form {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm .permission-studio-top,
    .page-users #userForm > .mb-3:has(.user-access-designer),
    .page-users #userForm > .mb-2,
    .page-users #userForm > .mb-3:not(:has(.user-access-designer)) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

/* Yetki ekrani tasarim v2: ayni agac mantigi, daha temiz ve modern gorunum. */
.page-users #userForm.permission-studio-form {
    grid-template-columns: 310px minmax(0, 1fr) !important;
    max-width: 1280px !important;
    gap: 14px !important;
    padding: 16px !important;
    border: 1px solid rgba(203, 213, 225, .9) !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(20, 184, 166, .16), transparent 32%),
        radial-gradient(circle at 100% 12%, rgba(37, 99, 235, .12), transparent 34%),
        linear-gradient(135deg, #f8fafc, #eef7f7) !important;
    background-size: auto !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .12) !important;
}

.page-users #userForm .permission-studio-top {
    top: 82px;
    gap: 12px !important;
    padding: 16px !important;
    border: 1px solid rgba(20, 184, 166, .2) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .14), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .95)) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .08) !important;
}

.page-users #userForm .permission-studio-top > div:first-child {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(20, 184, 166, .18);
}

.page-users #userForm .permission-studio-top > div:first-child span {
    color: #0f766e !important;
    font-size: .72rem !important;
}

.page-users #userForm .permission-studio-top h4 {
    color: #0f172a !important;
    font-size: 1.22rem !important;
    letter-spacing: -.035em;
}

.page-users #userForm .permission-studio-top p {
    display: block !important;
    margin: 5px 0 0 !important;
    color: #64748b !important;
    font-size: .78rem !important;
    font-weight: 760 !important;
    line-height: 1.45;
}

.page-users #userForm .permission-studio-picker label,
.page-users #userForm .permission-tree-block > span {
    color: #0f766e !important;
    font-size: .7rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em;
}

.page-users #userForm .permission-studio-picker .form-select {
    min-height: 42px !important;
    border: 1px solid rgba(148, 163, 184, .36) !important;
    border-radius: 14px !important;
    color: #0f172a;
    background: rgba(255, 255, 255, .96);
    font-size: .84rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.page-users #userForm .permission-tree-side {
    gap: 14px !important;
}

.page-users #userForm .permission-tree-block {
    gap: 7px !important;
}

.page-users #userForm .permission-tree-node {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    min-height: 40px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.page-users #userForm .permission-tree-node:hover,
.page-users #userForm .permission-tree-node.is-active {
    transform: translateX(2px);
    border-color: rgba(20, 184, 166, .36) !important;
    background: #ffffff !important;
    color: #0f766e !important;
    box-shadow: 0 13px 25px rgba(15, 23, 42, .08);
}

.page-users #userForm .permission-tree-node i {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    box-shadow: 0 10px 18px rgba(37, 99, 235, .18);
}

.page-users #userForm .permission-tree-node strong {
    color: #172033;
    font-size: .82rem;
}

.page-users #userForm .permission-tree-node em {
    padding: 3px 7px;
    border-radius: 999px;
    color: #0f766e !important;
    background: rgba(20, 184, 166, .12);
    font-size: .68rem !important;
}

.page-users #userForm .permission-studio-actions .btn-primary {
    min-height: 42px;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0f766e, #2563eb) !important;
    box-shadow: 0 16px 30px rgba(37, 99, 235, .18);
}

.page-users #userForm > .mb-2,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) {
    grid-column: 1 !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    min-height: 46px !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 9px 20px rgba(15, 23, 42, .045);
}

.page-users #userForm > .mb-2 .form-label,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) .form-label {
    color: #475569 !important;
    font-size: .72rem !important;
}

.page-users #userForm > .mb-2 .form-control,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) .form-select {
    border-radius: 12px !important;
}

.page-users #userForm > .mb-3:has(.user-access-designer) {
    border: 1px solid rgba(203, 213, 225, .88) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .1) !important;
}

.page-users #userForm .user-access-designer-head {
    padding: 18px 20px !important;
    border: 0 !important;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .2), transparent 34%),
        linear-gradient(135deg, #0f766e, #2563eb) !important;
}

.page-users #userForm .user-access-designer-head span {
    color: rgba(255, 255, 255, .82) !important;
}

.page-users #userForm .user-access-designer-head h6 {
    color: #fff !important;
    font-size: 1.12rem !important;
}

.page-users #userForm .access-level-shell {
    padding: 14px 16px 16px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

.page-users #userForm .access-level-card {
    grid-template-columns: minmax(245px, .92fr) minmax(270px, .8fr) minmax(132px, auto) !important;
    min-height: 48px !important;
    padding: 8px 7px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
}

.page-users #userForm .access-level-card:hover {
    background: linear-gradient(90deg, rgba(240, 253, 250, .62), rgba(239, 246, 255, .74)) !important;
}

.page-users #userForm .access-level-card-head {
    grid-template-columns: 18px 30px minmax(0, 1fr) !important;
    gap: 8px !important;
}

.page-users #userForm .access-level-card-head::before {
    width: 15px;
    height: 15px;
    border-color: rgba(37, 99, 235, .45);
    border-radius: 4px;
    color: #2563eb;
    background: #eff6ff;
}

.page-users #userForm .access-level-card-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    color: #0f766e !important;
    background: rgba(20, 184, 166, .12) !important;
}

.page-users #userForm .access-level-card h6 {
    font-size: .88rem !important;
    font-weight: 950 !important;
}

.page-users #userForm .access-level-option {
    min-height: 32px !important;
    padding-left: 26px !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
}

.page-users #userForm .access-level-option::before {
    left: 8px;
    width: 13px;
    height: 13px;
    border-radius: 4px;
}

.page-users #userForm .access-level-option:has(input:checked) {
    color: #0f766e !important;
    background: rgba(20, 184, 166, .12) !important;
}

.page-users #userForm .access-level-option.is-hidden:has(input:checked) {
    color: #dc2626 !important;
    background: rgba(239, 68, 68, .1) !important;
}

.page-users #userForm .access-level-option.is-view:has(input:checked) {
    color: #2563eb !important;
    background: rgba(37, 99, 235, .1) !important;
}

.page-users #userForm .access-sub-toggle-panel > summary {
    border-color: rgba(20, 184, 166, .26) !important;
    color: #0f766e !important;
    background: rgba(240, 253, 250, .92) !important;
}

.page-users #userForm .access-sub-toggle-panel[open] {
    margin-left: 34px !important;
    border-left-color: #0f766e !important;
    border-radius: 0 0 14px 14px !important;
    background: linear-gradient(90deg, rgba(240, 253, 250, .82), rgba(239, 246, 255, .74)) !important;
}

.page-users #userForm .access-sub-toggle-row {
    min-height: 31px;
    border-radius: 8px;
}

.page-users #userForm .access-sub-toggle-row:hover {
    background: rgba(255, 255, 255, .78);
}

@media (max-width: 1100px) {
    .page-users #userForm.permission-studio-form {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm .permission-studio-top,
    .page-users #userForm > .mb-2,
    .page-users #userForm > .mb-3:not(:has(.user-access-designer)),
    .page-users #userForm > .mb-3:has(.user-access-designer) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .page-users #userForm .permission-studio-top {
        position: static;
    }
}

@media (max-width: 720px) {
    .page-users #userForm.permission-studio-form {
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .page-users #userForm .access-level-card,
    .page-users #userForm > .mb-2,
    .page-users #userForm > .mb-3:not(:has(.user-access-designer)) {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm .access-level-options {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm .access-sub-toggle-panel {
        justify-self: stretch;
        width: 100%;
    }
}

/* Yetki ekrani tasarim v3: ferah iki panel, sıkışmayan yazilar. */
.page-users #userForm,
.page-users #userForm * {
    box-sizing: border-box;
    min-width: 0;
}

.page-users #userForm.permission-studio-form {
    grid-template-columns: 330px minmax(0, 1fr) !important;
    gap: 18px !important;
    max-width: 1320px !important;
    padding: 18px !important;
    border: 1px solid rgba(203, 213, 225, .76) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(20, 184, 166, .15), transparent 34%),
        radial-gradient(circle at 100% 6%, rgba(37, 99, 235, .13), transparent 36%),
        linear-gradient(135deg, #f8fbfc, #eef7f4 48%, #eef5ff) !important;
    box-shadow: 0 28px 76px rgba(15, 23, 42, .12) !important;
}

.page-users #userForm .permission-studio-top {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky;
    top: 82px;
    display: flex !important;
    max-height: calc(100vh - 105px);
    flex-direction: column;
    gap: 14px !important;
    overflow: auto;
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .93) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .09) !important;
}

.page-users #userForm .permission-studio-top > div:first-child {
    display: block !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
}

.page-users #userForm .permission-studio-top > div:first-child span {
    color: #0f766e !important;
}

.page-users #userForm .permission-studio-top h4 {
    margin: 5px 0 0 !important;
    color: #102033 !important;
    font-size: 1.28rem !important;
    line-height: 1.18 !important;
}

.page-users #userForm .permission-studio-top p {
    display: block !important;
    max-width: 100%;
    margin: 8px 0 0 !important;
    color: #64748b !important;
    font-size: .83rem !important;
    line-height: 1.5 !important;
}

.page-users #userForm .permission-studio-picker .form-select {
    width: 100%;
    min-height: 44px !important;
    border-radius: 15px !important;
}

.page-users #userForm .permission-tree-side {
    display: grid !important;
    gap: 16px !important;
}

.page-users #userForm .permission-tree-block {
    display: grid !important;
    gap: 8px !important;
}

.page-users #userForm .permission-tree-block > span {
    margin-bottom: 1px;
    color: #64748b !important;
}

.page-users #userForm .permission-tree-node {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
}

.page-users #userForm .permission-tree-node strong {
    overflow: hidden;
    color: #172033 !important;
    font-size: .86rem !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-users #userForm .permission-tree-node em {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-users #userForm .permission-studio-actions {
    display: grid !important;
    gap: 8px !important;
}

.page-users #userForm .permission-studio-actions .btn-primary {
    width: 100%;
    min-height: 44px;
}

.page-users #userForm > .mb-2,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .88) !important;
}

.page-users #userForm > .mb-2 .form-label,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) .form-label {
    margin: 0 !important;
    line-height: 1.2;
}

.page-users #userForm > .mb-2 .form-control,
.page-users #userForm > .mb-3:not(:has(.user-access-designer)) .form-select {
    min-height: 40px;
}

.page-users #userForm > .mb-3:has(.user-access-designer) {
    grid-column: 2 !important;
    grid-row: 1 / span 9 !important;
    align-self: start;
    border-radius: 26px !important;
    overflow: hidden;
}

.page-users #userForm .user-access-designer-head {
    display: block !important;
    padding: 20px 22px !important;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, .18), transparent 34%),
        linear-gradient(135deg, #0f766e, #2563eb) !important;
}

.page-users #userForm .user-access-designer-head h6 {
    margin: 4px 0 0 !important;
    line-height: 1.2 !important;
}

.page-users #userForm .user-access-designer-head p {
    display: block !important;
    max-width: 760px;
    margin: 7px 0 0 !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: .83rem !important;
    line-height: 1.45 !important;
}

.page-users #userForm .access-level-shell {
    padding: 16px !important;
}

.page-users #userForm .access-level-grid {
    display: grid !important;
    gap: 12px !important;
}

.page-users #userForm .access-level-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .055);
    overflow: hidden;
}

.page-users #userForm .access-level-card:hover {
    background: #fff !important;
    border-color: rgba(20, 184, 166, .3) !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .08);
}

.page-users #userForm .access-level-card-head {
    display: grid !important;
    grid-template-columns: 20px 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center;
    padding: 13px 15px 10px !important;
}

.page-users #userForm .access-level-card-head::before {
    width: 16px !important;
    height: 16px !important;
    margin-top: 0;
}

.page-users #userForm .access-level-card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
}

.page-users #userForm .access-level-card h6 {
    overflow: visible;
    color: #0f172a;
    font-size: .98rem !important;
    line-height: 1.28;
    white-space: normal;
}

.page-users #userForm .access-level-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 15px 13px !important;
}

.page-users #userForm .access-level-option {
    min-height: 38px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 10px 8px 30px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 13px !important;
    color: #475569 !important;
    background: #f8fafc !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    white-space: normal;
}

.page-users #userForm .access-level-option::before {
    left: 10px !important;
}

.page-users #userForm .access-sub-toggle-panel {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 15px 15px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 15px !important;
    background: #f8fafc !important;
}

.page-users #userForm .access-sub-toggle-panel > summary {
    justify-content: space-between !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 15px !important;
    color: #0f766e !important;
    background: transparent !important;
}

.page-users #userForm .access-sub-toggle-panel > summary span {
    font-size: 0 !important;
}

.page-users #userForm .access-sub-toggle-panel > summary span::after {
    content: "Alt kart yetkileri";
    font-size: .78rem !important;
}

.page-users #userForm .access-sub-toggle-panel > summary b {
    display: inline-flex !important;
    padding: 4px 8px;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(37, 99, 235, .1);
    font-size: .7rem;
}

.page-users #userForm .access-sub-toggle-panel[open] {
    grid-column: auto !important;
    width: auto !important;
    margin: 0 15px 15px !important;
    padding: 0 !important;
    border-left: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 15px !important;
    background: #f8fafc !important;
}

.page-users #userForm .access-sub-toggle-list {
    display: grid !important;
    gap: 7px !important;
    padding: 0 10px 10px !important;
}

.page-users #userForm .access-sub-toggle-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px 54px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.page-users #userForm .access-sub-toggle-row::before {
    display: none !important;
}

.page-users #userForm .access-sub-toggle-row span,
.page-users #userForm .access-sub-toggle-row input,
.page-users #userForm .access-sub-toggle-row em {
    order: initial !important;
}

.page-users #userForm .access-sub-toggle-row strong {
    overflow: visible;
    color: #1e293b;
    font-size: .8rem !important;
    line-height: 1.25;
    white-space: normal;
}

.page-users #userForm .access-sub-toggle-row small {
    display: block !important;
    overflow: hidden;
    margin-top: 2px;
    color: #64748b;
    font-size: .68rem !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-users #userForm .access-sub-toggle-row input {
    width: 16px !important;
    height: 16px !important;
}

.page-users #userForm .access-sub-toggle-row em {
    display: inline-flex;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 999px;
    color: #dc2626 !important;
    background: rgba(239, 68, 68, .09);
    font-size: .68rem !important;
    font-weight: 950;
}

@media (max-width: 1160px) {
    .page-users #userForm.permission-studio-form {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm .permission-studio-top,
    .page-users #userForm > .mb-2,
    .page-users #userForm > .mb-3:not(:has(.user-access-designer)),
    .page-users #userForm > .mb-3:has(.user-access-designer) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .page-users #userForm .permission-studio-top {
        position: static;
        max-height: none;
    }
}

@media (max-width: 680px) {
    .page-users #userForm.permission-studio-form {
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .page-users #userForm .access-level-options,
    .page-users #userForm .access-sub-toggle-row {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm .access-level-card-head {
        grid-template-columns: 28px minmax(0, 1fr) !important;
    }

    .page-users #userForm .access-level-card-head::before {
        display: none !important;
    }
}

/* Yetki ve roller - temiz matris tasarimi */
.page-users .permission-clean-card {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-users #userForm.permission-clean-matrix {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-users #userForm.permission-clean-matrix::before,
.page-users #userForm.permission-clean-matrix::after {
    display: none !important;
}

.page-users .permission-clean-sidebar,
.page-users .permission-clean-workspace {
    min-width: 0 !important;
    border: 1px solid rgba(207, 228, 232, .95) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 18px 45px rgba(29, 78, 216, .08) !important;
}

.page-users .permission-clean-sidebar {
    position: sticky !important;
    top: 96px !important;
    display: grid !important;
    gap: 14px !important;
    padding: 16px !important;
}

.page-users .permission-clean-brand {
    padding: 18px !important;
    border-radius: 20px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .24), transparent 32%),
        linear-gradient(135deg, #0f766e 0%, #1677ff 100%) !important;
}

.page-users .permission-clean-brand span,
.page-users .permission-clean-toolbar span {
    display: block !important;
    margin-bottom: 5px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
}

.page-users .permission-clean-brand h4,
.page-users .permission-clean-toolbar h5 {
    margin: 0 !important;
    font-size: 1.26rem !important;
    line-height: 1.16 !important;
    font-weight: 950 !important;
}

.page-users .permission-clean-brand p,
.page-users .permission-clean-toolbar p {
    margin: 8px 0 0 !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
}

.page-users .permission-clean-brand p {
    color: rgba(255, 255, 255, .82) !important;
}

.page-users .permission-clean-box {
    display: grid !important;
    gap: 9px !important;
    padding: 13px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 18px !important;
    background: #fff !important;
}

.page-users .permission-clean-box > label,
.page-users .permission-clean-box > summary {
    margin: 0 !important;
    color: #334155 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
}

.page-users .permission-clean-box .form-control,
.page-users .permission-clean-box .form-select {
    min-height: 40px !important;
    border-radius: 13px !important;
    border-color: rgba(203, 213, 225, .95) !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
}

.page-users .permission-clean-role-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.page-users .permission-clean-role {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(20, 184, 166, .22) !important;
    border-radius: 14px !important;
    color: #0f766e !important;
    background: linear-gradient(135deg, rgba(240, 253, 250, .96), #fff) !important;
    font-size: .8rem !important;
    font-weight: 950 !important;
}

.page-users .permission-clean-role b {
    display: inline-flex !important;
    min-width: 24px !important;
    height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: #1d4ed8 !important;
    background: rgba(37, 99, 235, .1) !important;
    font-size: .72rem !important;
}

.page-users .permission-clean-switch {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: auto !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #475569 !important;
    font-size: .8rem !important;
}

.page-users .permission-clean-switch input {
    width: 17px !important;
    height: 17px !important;
}

.page-users .permission-clean-save {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
}

.page-users .permission-clean-save .btn {
    min-height: 42px !important;
    border-radius: 14px !important;
    font-weight: 950 !important;
}

.page-users .permission-clean-workspace {
    overflow: hidden !important;
}

.page-users .permission-clean-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 20px 22px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .9) !important;
    background:
        radial-gradient(circle at 80% 10%, rgba(20, 184, 166, .14), transparent 32%),
        linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(240, 253, 250, .92)) !important;
}

.page-users .permission-clean-toolbar span,
.page-users .permission-clean-toolbar p {
    color: #64748b !important;
}

.page-users .permission-clean-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 82px) !important;
    gap: 8px !important;
}

.page-users .permission-clean-stats div {
    padding: 10px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 16px !important;
    background: #fff !important;
    text-align: center !important;
}

.page-users .permission-clean-stats span {
    margin: 0 !important;
    color: #64748b !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: .7rem !important;
}

.page-users .permission-clean-stats strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 1.14rem !important;
    line-height: 1.1 !important;
}

.page-users .permission-clean-legend {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    background: #fff !important;
}

.page-users .permission-clean-legend span {
    padding: 9px 12px !important;
    border-radius: 999px !important;
    font-size: .77rem !important;
    font-weight: 950 !important;
    text-align: center !important;
}

.page-users .permission-clean-legend .tone-hidden {
    color: #dc2626 !important;
    background: rgba(254, 226, 226, .75) !important;
}

.page-users .permission-clean-legend .tone-view {
    color: #1d4ed8 !important;
    background: rgba(219, 234, 254, .85) !important;
}

.page-users .permission-clean-legend .tone-action {
    color: #047857 !important;
    background: rgba(209, 250, 229, .88) !important;
}

.page-users .permission-clean-list {
    display: grid !important;
    gap: 12px !important;
    padding: 16px 18px 20px !important;
    background: #f8fafc !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row.access-level-card {
    display: grid !important;
    grid-template-columns: minmax(260px, 1.2fr) minmax(360px, 1fr) minmax(260px, .85fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(207, 228, 232, .95) !important;
    border-left: 6px solid #14b8a6 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .055) !important;
    overflow: visible !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row[data-level="hidden"] {
    border-left-color: #ef4444 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row[data-level="view"] {
    border-left-color: #2563eb !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row[data-level="action"] {
    border-left-color: #10b981 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-head {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 0 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-head::before {
    display: none !important;
}

.page-users #userForm.permission-clean-matrix .access-level-card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #2563eb) !important;
    font-size: 1.08rem !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row h6 {
    display: block !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #0f172a !important;
    font-size: .98rem !important;
    line-height: 1.28 !important;
    white-space: normal !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row p {
    display: block !important;
    margin: 4px 0 0 !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: .75rem !important;
    line-height: 1.32 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-count {
    min-width: 58px !important;
    padding: 7px 9px !important;
    border-radius: 14px !important;
    background: rgba(20, 184, 166, .1) !important;
    text-align: center !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-count strong {
    display: block !important;
    color: #0f766e !important;
    line-height: 1 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-count span {
    color: #64748b !important;
    font-size: .66rem !important;
    font-weight: 900 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
}

.page-users #userForm.permission-clean-matrix .access-level-option {
    position: relative !important;
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
}

.page-users #userForm.permission-clean-matrix .access-level-option input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.page-users #userForm.permission-clean-matrix .access-level-option:has(input:checked).is-hidden {
    border-color: rgba(239, 68, 68, .38) !important;
    color: #b91c1c !important;
    background: #fff1f2 !important;
}

.page-users #userForm.permission-clean-matrix .access-level-option:has(input:checked).is-view {
    border-color: rgba(37, 99, 235, .38) !important;
    color: #1d4ed8 !important;
    background: #eff6ff !important;
}

.page-users #userForm.permission-clean-matrix .access-level-option:has(input:checked).is-action {
    border-color: rgba(16, 185, 129, .42) !important;
    color: #047857 !important;
    background: #ecfdf5 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: center !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-meta > span,
.page-users #userForm.permission-clean-matrix .permission-clean-row-meta .access-expiry-line {
    min-height: 38px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-meta .access-expiry-line {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-meta small {
    color: #64748b !important;
    font-size: .68rem !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-row-meta input[type="date"] {
    width: 100% !important;
    min-height: 28px !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-subcards {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid rgba(207, 228, 232, .95) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-subcards > summary {
    display: flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border: 0 !important;
    color: #0f766e !important;
    background: linear-gradient(135deg, rgba(240, 253, 250, .95), rgba(239, 246, 255, .92)) !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-clean-matrix .permission-clean-subcards > summary b {
    padding: 4px 9px !important;
    border-radius: 999px !important;
    color: #1d4ed8 !important;
    background: rgba(37, 99, 235, .1) !important;
    font-size: .7rem !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px 54px !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-row::before {
    display: none !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-row span,
.page-users #userForm.permission-clean-matrix .access-sub-toggle-row input,
.page-users #userForm.permission-clean-matrix .access-sub-toggle-row em {
    order: initial !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-row strong {
    display: block !important;
    overflow: visible !important;
    color: #1e293b !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-row small {
    display: block !important;
    overflow: hidden !important;
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: .68rem !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-row input {
    width: 17px !important;
    height: 17px !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-toggle-row em {
    display: inline-flex !important;
    justify-content: center !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
    color: #dc2626 !important;
    background: rgba(239, 68, 68, .09) !important;
    font-size: .68rem !important;
    font-style: normal !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-clean-matrix .access-sub-empty {
    grid-column: 1 / -1 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #64748b !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
}

.page-users #userForm.permission-clean-matrix .access-risk-hint {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 18px 18px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(245, 158, 11, .35) !important;
    border-radius: 16px !important;
    color: #92400e !important;
    background: #fffbeb !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
}

.page-users .permission-studio-audit {
    margin-top: 18px !important;
}

.page-users .users-compare-panel {
    display: grid !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 15px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(45, 212, 191, .14), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
}

.page-users .users-compare-panel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.page-users .users-compare-panel__head span {
    display: block !important;
    color: #0f766e !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page-users .users-compare-panel__head strong {
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
}

.page-users .users-compare-panel__controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.page-users .users-compare-panel__controls .form-select {
    min-height: 42px !important;
    border: 1px solid #cbdce8 !important;
    border-radius: 14px !important;
    background-color: #fff !important;
    font-weight: 850 !important;
}

.page-users .users-compare-result {
    display: grid !important;
    gap: 8px !important;
}

.page-users .users-compare-result > span,
.page-users .users-compare-empty {
    padding: 12px 13px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    color: #64748b !important;
    background: #fff !important;
    font-size: .84rem !important;
    font-weight: 900 !important;
}

.page-users .users-compare-summary {
    padding: 10px 12px !important;
    border: 1px solid rgba(20, 184, 166, .2) !important;
    border-radius: 14px !important;
    color: #0f766e !important;
    background: #f0fdfa !important;
    font-size: .85rem !important;
    font-weight: 900 !important;
}

.page-users .users-compare-row {
    display: grid !important;
    grid-template-columns: minmax(150px, .8fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 15px !important;
    background: #fff !important;
}

.page-users .users-compare-row strong {
    align-self: center !important;
    color: #0f172a !important;
    font-size: .9rem !important;
    font-weight: 950 !important;
}

.page-users .users-compare-row span,
.page-users .users-compare-row em {
    display: block !important;
    color: #475569 !important;
    font-size: .8rem !important;
    font-style: normal !important;
    font-weight: 850 !important;
}

.page-users .users-compare-row b {
    color: #2563eb !important;
}

.page-users .users-compare-row em {
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: .75rem !important;
}

.page-users .users-list-grid {
    display: grid !important;
    gap: 12px !important;
}

.page-users .users-list-card {
    display: grid !important;
    grid-template-columns: 72px minmax(240px, .9fr) minmax(300px, 1.25fr) minmax(220px, .75fr) minmax(260px, .9fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 15px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(20, 184, 166, .12), transparent 30%),
        #fff !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .07) !important;
}

.page-users .users-list-card.has-warning {
    border-color: rgba(239, 68, 68, .26) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(239, 68, 68, .11), transparent 30%),
        #fff !important;
}

.page-users .users-bulk-row-check {
    display: grid !important;
    justify-items: center !important;
    gap: 6px !important;
    color: #475569 !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.page-users .users-bulk-row-check input {
    width: 22px !important;
    height: 22px !important;
    accent-color: #0f766e !important;
}

.page-users .users-list-card.has-critical {
    border-color: rgba(245, 158, 11, .34) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 158, 11, .16), transparent 32%),
        #fff !important;
}

.page-users .users-list-main {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.page-users .users-avatar {
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #2563eb) !important;
    font-weight: 950 !important;
    font-size: 1.18rem !important;
}

.page-users .users-list-main h6 {
    margin: 0 0 3px !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
}

.page-users .users-list-main span,
.page-users .users-list-main small {
    display: block !important;
    color: #64748b !important;
    font-size: .8rem !important;
    font-weight: 820 !important;
}

.page-users .users-list-main small {
    margin-top: 4px !important;
    color: #0f766e !important;
}

.page-users .users-list-permissions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.page-users .users-access-chip {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
}

.page-users .users-access-chip.is-view {
    color: #075985 !important;
    background: #e0f2fe !important;
}

.page-users .users-access-chip.is-action {
    color: #047857 !important;
    background: #d1fae5 !important;
}

.page-users .users-access-chip.is-hidden {
    color: #991b1b !important;
    background: #fee2e2 !important;
}

.page-users .users-access-chip.is-more {
    color: #6d28d9 !important;
    background: #ede9fe !important;
}

.page-users .users-list-meta {
    display: grid !important;
    gap: 4px !important;
    color: #64748b !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
}

.page-users .users-list-meta strong {
    color: #b45309 !important;
    font-size: .8rem !important;
}

.page-users .users-list-meta .users-warning-line {
    color: #dc2626 !important;
}

.page-users .users-list-meta em {
    color: #0f766e !important;
    font-style: normal !important;
}

.page-users .users-list-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.page-users .users-inline-copy-form {
    display: inline-flex !important;
    gap: 7px !important;
    align-items: center !important;
}

.page-users .users-inline-copy-form .form-select {
    width: 180px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
}

.page-users .users-list-more {
    position: relative !important;
}

.page-users .users-list-more > summary {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 31px !important;
    padding: 5px 10px !important;
    border: 1px solid #cbdce8 !important;
    border-radius: 11px !important;
    color: #334155 !important;
    background: #fff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.page-users .users-list-more > summary::-webkit-details-marker {
    display: none !important;
}

.page-users .users-list-more[open] {
    z-index: 4 !important;
}

.page-users .users-list-more[open] > summary {
    border-color: rgba(20, 184, 166, .4) !important;
    color: #0f766e !important;
}

.page-users .users-list-more form {
    display: grid !important;
    gap: 8px !important;
    min-width: 210px !important;
    margin-top: 8px !important;
    padding: 10px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .14) !important;
}

.page-users .users-list-empty {
    padding: 18px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 18px !important;
    color: #64748b !important;
    background: #fff !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.page-users .users-export-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-users .users-bulk-panel {
    display: grid !important;
    grid-template-columns: minmax(260px, 1.2fr) minmax(180px, .65fr) minmax(190px, .75fr) auto auto !important;
    gap: 10px !important;
    align-items: end !important;
    margin-bottom: 14px !important;
    padding: 14px !important;
    border: 1px solid #cce8e3 !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 98% 0%, rgba(20, 184, 166, .16), transparent 28%),
        linear-gradient(135deg, #f8fffd, #f5f9ff) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .055) !important;
}

.page-users .users-bulk-panel > div {
    display: grid !important;
    gap: 2px !important;
}

.page-users .users-bulk-panel span {
    color: #0f766e !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.page-users .users-bulk-panel strong {
    color: #0f172a !important;
    font-size: .98rem !important;
    font-weight: 950 !important;
}

.page-users .users-bulk-panel small {
    color: #64748b !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
}

.page-users .users-bulk-panel .form-select {
    min-height: 42px !important;
    border-radius: 13px !important;
    font-weight: 850 !important;
}

.page-users .users-bulk-check-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #cbdce8 !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #334155 !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
}

.page-users .users-template-library {
    display: grid !important;
    gap: 14px !important;
    margin: 12px 0 18px !important;
    padding: 16px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 96% 0%, rgba(23, 110, 234, .13), transparent 30%),
        linear-gradient(135deg, #ffffff, #f4fbff) !important;
}

.page-users .users-template-library-head {
    display: grid !important;
    gap: 3px !important;
}

.page-users .users-template-library-head span {
    color: #176eea !important;
    font-size: .75rem !important;
    font-weight: 950 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.page-users .users-template-library-head strong {
    color: #0f172a !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

.page-users .users-template-library-head small {
    color: #64748b !important;
    font-weight: 800 !important;
}

.page-users .users-template-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
}

.page-users .users-template-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    align-items: center !important;
    min-height: 78px !important;
    padding: 12px !important;
    border: 1px solid #d8e7ef !important;
    border-radius: 17px !important;
    background: #fff !important;
    text-align: left !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045) !important;
}

.page-users .users-template-card i {
    grid-row: span 3 !important;
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #176eea) !important;
}

.page-users .users-template-card span,
.page-users .users-template-card strong,
.page-users .users-template-card small {
    min-width: 0 !important;
}

.page-users .users-template-card span {
    color: #0f172a !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
}

.page-users .users-template-card strong,
.page-users .users-template-card small {
    color: #64748b !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
}

.page-users .user-history-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3070 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(16px, 4vw, 38px) !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(10px) !important;
}

.page-users .user-history-modal.is-open {
    display: flex !important;
}

.page-users .user-history-modal__dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: min(780px, 96vw) !important;
    max-height: min(720px, 92vh) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 28px 82px rgba(15, 23, 42, .38) !important;
}

.page-users .user-history-modal__head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 22px 24px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
}

.page-users .user-history-modal__head span {
    display: block !important;
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page-users .user-history-modal__head h5 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 950 !important;
}

.page-users .user-history-modal__head p {
    margin: 7px 0 0 !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: .9rem !important;
}

.page-users .user-history-modal__body {
    display: grid !important;
    gap: 10px !important;
    overflow: auto !important;
    padding: 18px !important;
    background: #f8fbfd !important;
}

.page-users .user-history-row {
    display: grid !important;
    gap: 9px !important;
    padding: 13px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #fff !important;
}

.page-users .user-history-row > div:first-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-users .user-history-row span,
.page-users .user-history-row small {
    color: #64748b !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
}

.page-users .user-history-row strong {
    color: #0f172a !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
}

.page-users .user-history-row p {
    margin: 0 !important;
    color: #334155 !important;
    font-size: .84rem !important;
    font-weight: 850 !important;
}

.page-users .user-history-diff {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.page-users .user-history-diff em {
    padding: 9px 10px !important;
    border-radius: 12px !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    font-size: .78rem !important;
    font-style: normal !important;
    font-weight: 850 !important;
}

.page-users .user-history-empty {
    padding: 18px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 18px !important;
    color: #64748b !important;
    background: #fff !important;
    text-align: center !important;
    font-weight: 900 !important;
}

.page-users .user-history-modal__foot {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 15px 18px !important;
    border-top: 1px solid #e5eef5 !important;
    background: #fff !important;
}

@media (max-width: 1380px) {
    .page-users #userForm.permission-clean-matrix .permission-clean-row.access-level-card {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm.permission-clean-matrix .permission-clean-row-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .page-users #userForm.permission-clean-matrix .permission-clean-row-meta .access-expiry-line {
        grid-column: auto !important;
    }
}

@media (max-width: 1060px) {
    .page-users #userForm.permission-clean-matrix {
        grid-template-columns: 1fr !important;
    }

    .page-users .permission-clean-sidebar {
        position: static !important;
    }

    .page-users .permission-clean-toolbar {
        grid-template-columns: 1fr !important;
    }

    .page-users .permission-clean-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .page-users .users-compare-panel__head,
    .page-users .access-review-modal__foot {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .page-users .users-compare-panel__controls,
    .page-users .users-compare-row,
    .page-users .users-list-card,
    .page-users .user-history-diff,
    .page-users .access-sub-modal__tools {
        grid-template-columns: 1fr !important;
    }

    .page-users .users-list-card {
        padding: 12px !important;
        gap: 10px !important;
        border-radius: 17px !important;
    }

    .page-users .users-list-actions {
        justify-content: stretch !important;
    }

    .page-users .users-list-actions .btn,
    .page-users .users-inline-copy-form,
    .page-users .users-inline-copy-form .form-select,
    .page-users .users-list-more,
    .page-users .users-list-more > summary {
        width: 100% !important;
    }

    .page-users .users-inline-copy-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .page-users .user-history-modal,
    .page-users .access-review-modal,
    .page-users .access-sub-modal {
        padding: 10px !important;
        align-items: stretch !important;
    }

    .page-users .user-history-modal__dialog,
    .page-users .access-review-modal__dialog,
    .page-users .access-sub-modal__dialog {
        width: 100% !important;
        max-height: calc(100vh - 20px) !important;
        border-radius: 20px !important;
    }

    .page-users .permission-clean-role-list,
    .page-users .permission-clean-legend,
    .page-users #userForm.permission-clean-matrix .permission-clean-row-options,
    .page-users #userForm.permission-clean-matrix .permission-clean-row-meta,
    .page-users #userForm.permission-clean-matrix .access-sub-toggle-list {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm.permission-clean-matrix .permission-clean-row-head {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    .page-users #userForm.permission-clean-matrix .permission-clean-row-count {
        grid-column: 1 / -1 !important;
        width: max-content !important;
    }
}

/* Yetki ve roller - konsol v2: tek modul odakli profesyonel ekran */
.page-users #userForm.permission-console-v2 {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-sidebar,
.page-users #userForm.permission-console-v2 .permission-clean-workspace {
    border: 1px solid #dbe7ef !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-sidebar {
    gap: 10px !important;
    padding: 12px !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-brand {
    padding: 14px !important;
    border: 1px solid #dbeafe !important;
    border-left: 5px solid #2563eb !important;
    border-radius: 14px !important;
    color: #0f172a !important;
    background: #f8fbff !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-brand span {
    color: #2563eb !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-brand h4 {
    color: #0f172a !important;
    font-size: 1.08rem !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-brand p {
    color: #64748b !important;
    font-size: .78rem !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-box {
    gap: 8px !important;
    padding: 11px !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-role-list {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    max-height: 238px !important;
    overflow: auto !important;
    padding-right: 3px !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-role {
    min-height: 36px !important;
    border-color: #e2e8f0 !important;
    border-radius: 11px !important;
    color: #1e293b !important;
    background: #f8fafc !important;
    font-size: .76rem !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-save {
    grid-template-columns: 1fr 96px !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-workspace {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-toolbar {
    padding: 14px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #fff !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-toolbar h5 {
    color: #0f172a !important;
    font-size: 1.08rem !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-toolbar p {
    max-width: 760px !important;
    color: #64748b !important;
    font-size: .78rem !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-stats {
    grid-template-columns: repeat(3, 74px) !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-stats div {
    padding: 8px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-legend {
    grid-template-columns: repeat(3, max-content) !important;
    justify-content: start !important;
    gap: 7px !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-legend span {
    padding: 6px 10px !important;
    font-size: .72rem !important;
}

.page-users #userForm.permission-console-v2 .permission-console-body {
    display: grid !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
    gap: 0 !important;
    min-height: 620px !important;
    background: #f8fafc !important;
}

.page-users #userForm.permission-console-v2 .permission-module-list {
    display: grid !important;
    align-content: start !important;
    gap: 7px !important;
    padding: 14px !important;
    border-right: 1px solid #e2e8f0 !important;
    background: #fbfdff !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: #334155 !important;
    background: #fff !important;
    text-align: left !important;
    transition: .16s ease !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab i {
    display: grid !important;
    width: 34px !important;
    height: 34px !important;
    place-items: center !important;
    border-radius: 10px !important;
    color: #2563eb !important;
    background: #eff6ff !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab span {
    overflow: hidden !important;
    color: #1e293b !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab small {
    padding: 4px 7px !important;
    border-radius: 999px !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    font-size: .65rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab:hover,
.page-users #userForm.permission-console-v2 .permission-module-tab.is-active {
    border-color: rgba(37, 99, 235, .42) !important;
    background: #eff6ff !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, .08) !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab.is-active i {
    color: #fff !important;
    background: #2563eb !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab[data-level="hidden"] i {
    color: #dc2626 !important;
    background: #fee2e2 !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab[data-level="view"] i {
    color: #2563eb !important;
    background: #dbeafe !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab[data-level="action"] i {
    color: #047857 !important;
    background: #d1fae5 !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab.is-active[data-level] i {
    color: #fff !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab.is-active[data-level="hidden"] i {
    background: #ef4444 !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab.is-active[data-level="view"] i {
    background: #2563eb !important;
}

.page-users #userForm.permission-console-v2 .permission-module-tab.is-active[data-level="action"] i {
    background: #10b981 !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-list {
    display: block !important;
    padding: 16px !important;
    background: #f8fafc !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row.access-level-card {
    display: none !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row.access-level-card.is-active {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 16px !important;
    border: 1px solid #dbe7ef !important;
    border-top: 5px solid #2563eb !important;
    border-left: 1px solid #dbe7ef !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row[data-level="hidden"].is-active {
    border-top-color: #ef4444 !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row[data-level="view"].is-active {
    border-top-color: #2563eb !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row[data-level="action"].is-active {
    border-top-color: #10b981 !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row-head {
    grid-template-columns: 48px minmax(0, 1fr) 72px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row h6 {
    font-size: 1.12rem !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row p {
    overflow: visible !important;
    max-width: 860px !important;
    font-size: .82rem !important;
    white-space: normal !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row-options {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
}

.page-users #userForm.permission-console-v2 .access-level-option {
    min-height: 54px !important;
    border-radius: 13px !important;
    font-size: .86rem !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-row-meta .access-expiry-line {
    grid-column: auto !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-subcards {
    margin-top: 2px !important;
}

.page-users #userForm.permission-console-v2 .permission-clean-subcards[open] {
    background: #fbfdff !important;
}

.page-users #userForm.permission-console-v2 .access-sub-toggle-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 1280px) {
    .page-users #userForm.permission-console-v2 {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm.permission-console-v2 .permission-clean-sidebar {
        position: static !important;
    }
}

@media (max-width: 980px) {
    .page-users #userForm.permission-console-v2 .permission-console-body {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm.permission-console-v2 .permission-module-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-right: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
}

@media (max-width: 680px) {
    .page-users #userForm.permission-console-v2 .permission-module-list,
    .page-users #userForm.permission-console-v2 .permission-clean-row-options,
    .page-users #userForm.permission-console-v2 .permission-clean-row-meta,
    .page-users #userForm.permission-console-v2 .access-sub-toggle-list,
    .page-users #userForm.permission-console-v2 .permission-clean-legend {
        grid-template-columns: 1fr !important;
    }
}

/* Yetki ve roller - Director v3: buyuk okunabilir yonetim ekrani */
.page-users #userForm.permission-director-v3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-users #userForm.permission-director-v3::before,
.page-users #userForm.permission-director-v3::after {
    display: none !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(260px, .95fr) minmax(260px, .9fr) minmax(360px, 1.35fr) minmax(210px, .75fr) !important;
    grid-template-areas:
        "brand picker roles save"
        "brand user   roles settings" !important;
    gap: 14px !important;
    padding: 16px !important;
    border: 1px solid #d8e7ef !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .98)) !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .075) !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-brand {
    grid-area: brand !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 202px !important;
    padding: 24px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .28), transparent 30%),
        linear-gradient(135deg, #0f766e 0%, #176eea 100%) !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-brand span {
    color: rgba(255, 255, 255, .78) !important;
    font-size: .78rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-brand h4 {
    color: #fff !important;
    font-size: 1.75rem !important;
    line-height: 1.08 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-brand p {
    max-width: 300px !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
}

.page-users #userForm.permission-director-v3 .permission-user-scope-note {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    max-width: 320px !important;
    margin-top: 14px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .14) !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: .83rem !important;
    line-height: 1.35 !important;
}

.page-users #userForm.permission-director-v3 .permission-user-scope-note i {
    margin-top: 2px !important;
    color: #bbf7d0 !important;
    font-size: 1rem !important;
}

.page-users .users-quick-user-card {
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .28) !important;
}

.page-users .users-quick-user-head {
    align-items: flex-start !important;
    border: 0 !important;
    padding: 22px 24px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .26), transparent 32%),
        linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
}

.page-users .users-quick-user-head span {
    display: block !important;
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page-users .users-quick-user-head h5 {
    color: #fff !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
}

.page-users .users-quick-user-head p {
    max-width: 420px !important;
    margin: 6px 0 0 !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: .92rem !important;
}

.page-users .users-quick-user-head .btn-close {
    filter: invert(1) grayscale(1) !important;
    opacity: .9 !important;
}

.page-users .users-quick-user-body {
    display: grid !important;
    gap: 14px !important;
    padding: 22px 24px !important;
    background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%) !important;
}

.page-users .users-quick-user-body label {
    display: grid !important;
    gap: 7px !important;
}

.page-users .users-quick-user-body label > span {
    color: #334155 !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
}

.page-users .users-quick-user-body .form-control,
.page-users .users-quick-user-body .form-select {
    min-height: 48px !important;
    border: 1px solid #cbdce8 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

.page-users .users-quick-user-note {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 13px !important;
    border: 1px solid #bfeee6 !important;
    border-radius: 15px !important;
    background: #ecfdf8 !important;
    color: #0f766e !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
}

.page-users .users-quick-user-footer {
    border-top: 1px solid #e5eef5 !important;
    padding: 16px 24px !important;
    background: #fff !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-box {
    gap: 11px !important;
    padding: 16px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045) !important;
}

.page-users #userForm.permission-director-v3 .permission-director-picker {
    grid-area: picker !important;
}

.page-users #userForm.permission-director-v3 .permission-director-roles {
    grid-area: roles !important;
}

.page-users #userForm.permission-director-v3 .permission-director-user {
    grid-area: user !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-settings {
    grid-area: settings !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-save {
    grid-area: save !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-box > label,
.page-users #userForm.permission-director-v3 .permission-clean-box > summary {
    color: #0f766e !important;
    font-size: .82rem !important;
    letter-spacing: .055em !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-box .form-control,
.page-users #userForm.permission-director-v3 .permission-clean-box .form-select {
    min-height: 50px !important;
    border: 1px solid #cbdce8 !important;
    border-radius: 14px !important;
    background: #f8fbfd !important;
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-box .btn {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: .95rem !important;
    font-weight: 950 !important;
}

.page-users .permission-template-status {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(20, 184, 166, .22) !important;
    border-radius: 14px !important;
    color: #0f766e !important;
    background: linear-gradient(135deg, rgba(240, 253, 250, .96), rgba(239, 246, 255, .96)) !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

.page-users .permission-template-status i {
    margin-top: 1px !important;
    color: #0ea5e9 !important;
    font-size: 1rem !important;
}

.page-users .permission-template-status.is-updated {
    border-color: rgba(37, 99, 235, .28) !important;
    color: #1d4ed8 !important;
    background: linear-gradient(135deg, #eff6ff, #ecfeff) !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-role-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-role {
    min-height: 50px !important;
    padding: 11px 13px !important;
    border: 1px solid #d8e7ef !important;
    border-radius: 14px !important;
    color: #1e293b !important;
    background: linear-gradient(135deg, #f8fbfd, #fff) !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-role b {
    min-width: 30px !important;
    height: 30px !important;
    color: #176eea !important;
    background: #eff6ff !important;
    font-size: .82rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-save {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
    gap: 10px !important;
    padding: 16px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 17px !important;
    background: #fff !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-save .btn {
    min-height: 56px !important;
    border-radius: 15px !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-workspace {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    border: 1px solid #d8e7ef !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08) !important;
    overflow: hidden !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-toolbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 24px !important;
    padding: 26px 30px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background:
        radial-gradient(circle at 88% 4%, rgba(20, 184, 166, .13), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f1f9ff 100%) !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-toolbar span {
    color: #0f766e !important;
    font-size: .84rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-toolbar h5 {
    color: #0f172a !important;
    font-size: 1.65rem !important;
    line-height: 1.1 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-toolbar p {
    max-width: 920px !important;
    color: #475569 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-stats {
    grid-template-columns: repeat(3, 110px) !important;
    gap: 12px !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-stats div {
    padding: 14px !important;
    border: 1px solid #dbe7ef !important;
    border-radius: 16px !important;
    background: #fff !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-stats span {
    color: #64748b !important;
    font-size: .82rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-stats strong {
    color: #0f172a !important;
    font-size: 1.55rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-legend {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(180px, max-content)) !important;
    justify-content: start !important;
    gap: 12px !important;
    padding: 16px 30px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #fff !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-legend span {
    padding: 11px 18px !important;
    border-radius: 999px !important;
    font-size: .95rem !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-director-v3 .permission-console-body {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    min-height: 680px !important;
    background: #f4f8fb !important;
}

.page-users #userForm.permission-director-v3 .permission-module-list {
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    padding: 22px !important;
    border-right: 1px solid #dbe7ef !important;
    background: #fbfdff !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    min-height: 68px !important;
    padding: 12px 14px !important;
    border: 1px solid #d8e7ef !important;
    border-radius: 17px !important;
    color: #0f172a !important;
    background: #fff !important;
    text-align: left !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045) !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab i {
    display: grid !important;
    width: 52px !important;
    height: 52px !important;
    place-items: center !important;
    border-radius: 16px !important;
    color: #176eea !important;
    background: #eff6ff !important;
    font-size: 1.3rem !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab span {
    overflow: hidden !important;
    color: #0f172a !important;
    font-size: 1.02rem !important;
    font-weight: 950 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab small {
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab:hover,
.page-users #userForm.permission-director-v3 .permission-module-tab.is-active {
    border-color: rgba(23, 110, 234, .42) !important;
    background: #eef6ff !important;
    box-shadow: 0 16px 30px rgba(23, 110, 234, .12) !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab.is-active i {
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #176eea) !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab[data-level="hidden"] i {
    color: #dc2626 !important;
    background: #fee2e2 !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab[data-level="view"] i {
    color: #176eea !important;
    background: #dbeafe !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab[data-level="action"] i {
    color: #047857 !important;
    background: #d1fae5 !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab.is-active[data-level] i {
    color: #fff !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab.is-active[data-level="hidden"] i {
    background: #ef4444 !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab.is-active[data-level="view"] i {
    background: #176eea !important;
}

.page-users #userForm.permission-director-v3 .permission-module-tab.is-active[data-level="action"] i {
    background: #10b981 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-list {
    display: block !important;
    padding: 24px !important;
    background: #f4f8fb !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row.access-level-card {
    display: none !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row.access-level-card.is-active {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 24px !important;
    border: 1px solid #d8e7ef !important;
    border-top: 8px solid #176eea !important;
    border-left: 1px solid #d8e7ef !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .075) !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row[data-level="hidden"].is-active {
    border-top-color: #ef4444 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row[data-level="view"].is-active {
    border-top-color: #176eea !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row[data-level="action"].is-active {
    border-top-color: #10b981 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-head {
    grid-template-columns: 64px minmax(0, 1fr) 94px !important;
    gap: 18px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid #edf2f7 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-head::before {
    display: none !important;
}

.page-users #userForm.permission-director-v3 .access-level-card-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0f766e, #176eea) !important;
    font-size: 1.55rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row h6 {
    color: #0f172a !important;
    font-size: 1.55rem !important;
    line-height: 1.12 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row p {
    overflow: visible !important;
    max-width: 940px !important;
    color: #475569 !important;
    font-size: 1.02rem !important;
    line-height: 1.48 !important;
    white-space: normal !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-count {
    min-width: 94px !important;
    padding: 12px !important;
    border-radius: 17px !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-count strong {
    font-size: 1.35rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-count span {
    font-size: .78rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-options {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    gap: 14px !important;
}

.page-users #userForm.permission-director-v3 .access-level-option {
    min-height: 74px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 18px !important;
    color: #334155 !important;
    background: #f8fbfd !important;
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-meta > span,
.page-users #userForm.permission-director-v3 .permission-clean-row-meta .access-expiry-line {
    min-height: 58px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    font-size: .95rem !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-meta .access-expiry-line {
    grid-column: auto !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-subcards {
    border: 1px solid #dbeafe !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f8fbff, #eefdf8) !important;
}

.page-users #userForm.permission-director-v3 .access-sub-panel-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 76px !important;
    padding: 16px 18px !important;
}

.page-users #userForm.permission-director-v3 .access-sub-panel-summary > div {
    display: grid !important;
    gap: 3px !important;
}

.page-users #userForm.permission-director-v3 .access-sub-panel-summary span {
    color: #0f766e !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.page-users #userForm.permission-director-v3 .access-sub-panel-summary strong {
    color: #0f172a !important;
    font-size: 1.06rem !important;
    font-weight: 950 !important;
}

.page-users #userForm.permission-director-v3 .access-sub-panel-summary small {
    color: #64748b !important;
    font-size: .84rem !important;
    font-weight: 800 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-subcards > .access-sub-toggle-list {
    display: none !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-subcards > summary b {
    padding: 6px 12px !important;
    font-size: .86rem !important;
}

.page-users .access-sub-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3065 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(16px, 4vw, 38px) !important;
    background: rgba(15, 23, 42, .54) !important;
    backdrop-filter: blur(10px) !important;
}

.page-users .access-sub-modal.is-open {
    display: flex !important;
}

.page-users .access-sub-modal__dialog {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    width: min(920px, 96vw) !important;
    max-height: min(760px, 92vh) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .38) !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 28px 82px rgba(15, 23, 42, .36) !important;
}

.page-users .access-sub-modal__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 22px 24px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .26), transparent 30%),
        linear-gradient(135deg, #0f766e 0%, #176eea 100%) !important;
}

.page-users .access-sub-modal__head span {
    display: block !important;
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page-users .access-sub-modal__head h5 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
}

.page-users .access-sub-modal__head p {
    max-width: 640px !important;
    margin: 7px 0 0 !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: .92rem !important;
}

.page-users .access-sub-modal__body {
    overflow: auto !important;
    padding: 18px !important;
    background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%) !important;
}

.page-users .access-sub-modal__tools {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #e5eef5 !important;
    background: #f8fbfd !important;
}

.page-users .access-sub-modal__tools button {
    min-height: 42px !important;
    border: 1px solid #cbdce8 !important;
    border-radius: 13px !important;
    color: #0f172a !important;
    background: #fff !important;
    font-size: .84rem !important;
    font-weight: 950 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06) !important;
}

.page-users .access-sub-modal__tools button:hover {
    border-color: rgba(20, 184, 166, .45) !important;
    color: #0f766e !important;
    background: #f0fdfa !important;
}

.page-users .access-sub-modal__body .access-sub-toggle-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
}

.page-users .access-sub-modal__foot {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 15px 18px !important;
    border-top: 1px solid #e5eef5 !important;
    background: #fff !important;
}

.page-users .access-review-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 3075 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(16px, 4vw, 38px) !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(10px) !important;
}

.page-users .access-review-modal.is-open {
    display: flex !important;
}

.page-users .access-review-modal__dialog {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: min(760px, 96vw) !important;
    max-height: min(720px, 92vh) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 28px 82px rgba(15, 23, 42, .38) !important;
}

.page-users .access-review-modal__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 22px 24px !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 90% 18%, rgba(255, 255, 255, .24), transparent 28%),
        linear-gradient(135deg, #0f766e 0%, #2563eb 100%) !important;
}

.page-users .access-review-modal__head span {
    display: block !important;
    margin-bottom: 6px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page-users .access-review-modal__head h5 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.28rem !important;
    font-weight: 950 !important;
}

.page-users .access-review-modal__head p {
    margin: 7px 0 0 !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: .9rem !important;
}

.page-users .access-review-modal__body {
    display: grid !important;
    gap: 10px !important;
    overflow: auto !important;
    padding: 18px !important;
    background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%) !important;
}

.page-users .access-review-row {
    display: grid !important;
    gap: 4px !important;
    padding: 13px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #fff !important;
}

.page-users .access-review-row strong {
    color: #0f172a !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
}

.page-users .access-review-row span {
    color: #475569 !important;
    font-size: .84rem !important;
    font-weight: 800 !important;
}

.page-users .access-review-row.is-danger {
    border-color: rgba(239, 68, 68, .22) !important;
    background: #fff1f2 !important;
}

.page-users .access-review-row.is-warning {
    border-color: rgba(245, 158, 11, .25) !important;
    background: #fffbeb !important;
}

.page-users .access-review-row.is-success {
    border-color: rgba(16, 185, 129, .22) !important;
    background: #ecfdf5 !important;
}

.page-users .access-review-empty {
    padding: 18px !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 18px !important;
    color: #64748b !important;
    background: #fff !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.page-users .access-review-modal__foot {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 15px 18px !important;
    border-top: 1px solid #e5eef5 !important;
    background: #fff !important;
}

.page-users #userForm.permission-director-v3 .access-sub-toggle-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 14px !important;
}

.page-users #userForm.permission-director-v3 .access-sub-toggle-row {
    min-height: 62px !important;
    grid-template-columns: minmax(0, 1fr) 22px 70px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
}

.page-users #userForm.permission-director-v3 .access-sub-toggle-row strong {
    font-size: .98rem !important;
}

.page-users #userForm.permission-director-v3 .access-sub-toggle-row small {
    font-size: .78rem !important;
}

.page-users #userForm.permission-director-v3 .access-sub-toggle-row input {
    width: 20px !important;
    height: 20px !important;
}

.page-users #userForm.permission-director-v3 .access-sub-toggle-row em {
    padding: 6px 10px !important;
    font-size: .78rem !important;
}

@media (max-width: 1500px) {
    .page-users #userForm.permission-director-v3 .permission-clean-sidebar {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "brand picker"
            "roles user"
            "roles settings"
            "save save" !important;
    }
}

@media (max-width: 1180px) {
    .page-users #userForm.permission-director-v3 .permission-console-body {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm.permission-director-v3 .permission-module-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-right: 0 !important;
        border-bottom: 1px solid #dbe7ef !important;
    }
}

@media (max-width: 860px) {
    .page-users #userForm.permission-director-v3 .permission-clean-sidebar,
    .page-users #userForm.permission-director-v3 .permission-module-list,
    .page-users #userForm.permission-director-v3 .permission-clean-legend,
    .page-users #userForm.permission-director-v3 .permission-clean-row-options,
    .page-users #userForm.permission-director-v3 .permission-clean-row-meta,
    .page-users #userForm.permission-director-v3 .access-sub-toggle-list {
        grid-template-columns: 1fr !important;
    }

    .page-users #userForm.permission-director-v3 .permission-clean-sidebar {
        grid-template-areas:
            "brand"
            "picker"
            "user"
            "roles"
            "settings"
            "save" !important;
    }

    .page-users #userForm.permission-director-v3 .permission-clean-toolbar {
        grid-template-columns: 1fr !important;
        padding: 20px !important;
    }

    .page-users #userForm.permission-director-v3 .permission-clean-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .page-users .users-bulk-panel {
        grid-template-columns: 1fr !important;
    }

    .page-users .users-list-card {
        grid-template-columns: 1fr !important;
    }

    .page-users .users-bulk-row-check {
        justify-items: start !important;
        grid-template-columns: 24px auto !important;
    }
}

/* Yetki ve roller - tam genislik duzeltmesi */
.page-users .users-control-shell,
.page-users .users-workspace,
.page-users .users-page-stage,
.page-users .users-section-canvas,
.page-users .users-section-page[data-section-key="user_form"],
.page-users .users-section-page[data-section-key="user_form"] > .form-card.permission-clean-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.page-users .users-section-page[data-section-key="user_form"] > .form-card.permission-clean-card {
    padding: 0 !important;
}

.page-users #userForm.permission-director-v3 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-sidebar {
    grid-template-columns: minmax(280px, 1.05fr) minmax(300px, 1fr) minmax(480px, 1.7fr) minmax(260px, .9fr) !important;
}

.page-users #userForm.permission-director-v3 .permission-console-body {
    grid-template-columns: minmax(380px, 24%) minmax(0, 1fr) !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-list {
    padding: 28px !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row.access-level-card.is-active {
    width: 100% !important;
    max-width: none !important;
}

.page-users #userForm.permission-director-v3 .permission-clean-row-options,
.page-users #userForm.permission-director-v3 .permission-clean-row-meta,
.page-users #userForm.permission-director-v3 .access-sub-toggle-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.page-users #userForm.permission-director-v3 .access-sub-toggle-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1500px) {
    .page-users #userForm.permission-director-v3 .permission-clean-sidebar {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 1180px) {
    .page-users #userForm.permission-director-v3 .permission-console-body,
    .page-users #userForm.permission-director-v3 .permission-clean-row-options,
    .page-users #userForm.permission-director-v3 .permission-clean-row-meta,
    .page-users #userForm.permission-director-v3 .access-sub-toggle-list {
        grid-template-columns: 1fr !important;
    }
}

/* Islem gecmisi - renkli denetim ekrani */
.activity-redesign {
    --activity-ink: #102033;
    --activity-muted: #64748b;
    --activity-border: rgba(15, 23, 42, .09);
    --activity-shadow: 0 20px 55px rgba(25, 77, 112, .12);
    --activity-cyan: #11b8c9;
    --activity-blue: #276ef1;
    --activity-green: #11a875;
    --activity-amber: #f59e0b;
    --activity-red: #ef4444;
    --activity-purple: #7c3aed;
    --activity-orange: #f97316;
    --activity-slate: #475569;
    display: grid;
    gap: 18px;
    color: var(--activity-ink);
}

.activity-redesign * {
    min-width: 0;
}

.activity-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0f9c9a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.activity-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 18px;
    padding: 26px;
    border: 1px solid rgba(45, 212, 191, .32);
    border-radius: 28px;
    background:
        radial-gradient(circle at 10% 10%, rgba(20, 184, 166, .22), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(37, 99, 235, .16), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #eefdfa 52%, #edf5ff 100%);
    box-shadow: var(--activity-shadow);
    overflow: hidden;
    position: relative;
}

.activity-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -95px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(45, 212, 191, .25);
    filter: blur(12px);
}

.activity-hero-copy,
.activity-hero-stats {
    position: relative;
    z-index: 1;
}

.activity-hero h1 {
    margin: 8px 0 8px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 950;
    letter-spacing: -.04em;
}

.activity-hero p {
    max-width: 820px;
    margin: 0;
    color: var(--activity-muted);
    font-size: 15px;
    line-height: 1.6;
}

.activity-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.activity-hero-pills span,
.activity-row-tags span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(15, 23, 42, .08);
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.activity-hero-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-self: stretch;
}

.activity-hero-stat {
    display: flex;
    min-height: 124px;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.activity-hero-stat:hover,
.activity-hero-stat.active {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, .45);
    box-shadow: 0 22px 42px rgba(15, 23, 42, .12);
    color: inherit;
}

.activity-hero-stat small {
    color: var(--activity-muted);
    font-size: 12px;
    font-weight: 850;
}

.activity-hero-stat strong {
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em;
}

.activity-hero-stat.cyan strong { color: var(--activity-cyan); }
.activity-hero-stat.green strong { color: var(--activity-green); }
.activity-hero-stat.amber strong { color: var(--activity-amber); }
.activity-hero-stat.red strong { color: var(--activity-red); }
.activity-hero-stat.purple strong { color: var(--activity-purple); }

.activity-filter-panel,
.activity-list-panel,
.activity-side-panel > div {
    border: 1px solid var(--activity-border);
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .07);
}

.activity-filter-panel {
    padding: 18px;
}

.activity-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 12px;
    align-items: end;
}

.activity-field {
    display: grid;
    gap: 6px;
}

.activity-field.wide {
    grid-column: span 2;
}

.activity-field.compact {
    grid-column: span 1;
}

.activity-field label {
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.activity-field input,
.activity-field select {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 15px;
    background: #f8fbff;
    color: #0f172a;
    font-weight: 750;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.activity-field input:focus,
.activity-field select:focus {
    border-color: rgba(20, 184, 166, .6);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .13);
}

.activity-field-hint {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.activity-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    grid-column: span 2;
}

.activity-mini-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(115px, 1fr));
    gap: 10px;
}

.activity-mini-card {
    display: grid;
    gap: 7px;
    padding: 13px;
    min-height: 116px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(240, 253, 250, .82));
    color: var(--activity-ink);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.activity-mini-card:hover,
.activity-mini-card.active {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, .45);
    box-shadow: 0 18px 35px rgba(20, 184, 166, .15);
}

.activity-mini-card strong {
    font-size: 13px;
    line-height: 1.25;
}

.activity-mini-card small {
    color: var(--activity-muted);
    font-weight: 800;
}

.activity-risk-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.activity-risk-tabs a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 70px;
    padding: 13px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(240, 253, 250, .82));
    color: var(--activity-ink);
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.activity-risk-tabs a:hover,
.activity-risk-tabs a.active {
    border-color: rgba(239, 68, 68, .22);
    background: linear-gradient(135deg, #fff7ed, #fff);
    color: var(--activity-ink);
}

.activity-risk-tabs i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: #fee2e2;
    color: #b91c1c;
}

.activity-risk-tabs span {
    font-weight: 950;
}

.activity-risk-tabs strong {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .06);
}

.activity-alert-strip,
.activity-module-export {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 8% 0%, rgba(20, 184, 166, .16), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,250,.82));
    box-shadow: 0 14px 36px rgba(15, 23, 42, .07);
}

.activity-alert-strip {
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    border-color: rgba(239, 68, 68, .2);
    background:
        radial-gradient(circle at 0% 0%, rgba(239,68,68,.12), transparent 34%),
        linear-gradient(135deg, #fff, #fff7ed);
}

.activity-alert-strip h3,
.activity-module-export h3 {
    margin: 5px 0 4px;
    font-size: 18px;
    font-weight: 950;
}

.activity-alert-strip p {
    margin: 0;
    color: var(--activity-muted);
}

.activity-alert-list,
.activity-module-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.activity-alert-list a,
.activity-module-export-grid article {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.9);
    color: var(--activity-ink);
    text-decoration: none;
}

.activity-alert-list a span {
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 950;
}

.activity-alert-list a small,
.activity-module-export-grid article span {
    color: var(--activity-muted);
    font-weight: 800;
}

.activity-module-export {
    grid-template-columns: minmax(170px, .24fr) minmax(0, 1fr);
}

.activity-module-export-grid article i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e, #2dd4bf);
    color: #fff;
}

.activity-module-export-grid article div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.activity-module-export-grid article a {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.activity-mini-icon,
.activity-row-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: #fff;
    box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .12);
}

.tone-green { background: linear-gradient(135deg, #10b981, #22c55e); }
.tone-blue { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.tone-red { background: linear-gradient(135deg, #dc2626, #fb7185); }
.tone-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.tone-purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.tone-teal { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.tone-cyan { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.tone-orange { background: linear-gradient(135deg, #ea580c, #fb923c); }
.tone-slate { background: linear-gradient(135deg, #334155, #64748b); }

.activity-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.activity-side-panel {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 18px;
}

.activity-side-panel > div {
    padding: 18px;
}

.activity-selected-user h3,
.activity-list-head h2 {
    margin: 5px 0 6px;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -.03em;
}

.activity-selected-user p {
    color: var(--activity-muted);
    font-size: 13px;
    line-height: 1.5;
}

.activity-user-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(59, 130, 246, .12));
}

.activity-user-meter span {
    color: var(--activity-muted);
    font-size: 12px;
    font-weight: 850;
}

.activity-user-meter strong {
    font-size: 25px;
}

.activity-audit-score {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.activity-audit-score div,
.activity-last-user-action {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 15px;
    background: #f8fafc;
    padding: 10px;
}

.activity-audit-score small,
.activity-last-user-action span {
    display: block;
    color: var(--activity-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.activity-audit-score strong {
    display: block;
    margin-top: 4px;
    font-size: 20px;
}

.activity-last-user-action {
    margin-top: 10px;
}

.activity-last-user-action strong,
.activity-last-user-action small {
    display: block;
}

.activity-last-user-action strong {
    margin-top: 4px;
    font-size: 13px;
}

.activity-last-user-action small {
    color: var(--activity-muted);
    font-size: 11px;
    font-weight: 800;
}

.activity-side-title {
    display: grid;
    gap: 4px;
    margin-bottom: 12px;
}

.activity-side-title strong {
    font-size: 16px;
}

.activity-entity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid rgba(15, 23, 42, .07);
    color: var(--activity-ink);
    text-decoration: none;
}

.activity-entity-row span {
    font-weight: 800;
}

.activity-entity-row strong {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(20, 184, 166, .12);
    color: #0f766e;
}

.activity-permission-list {
    display: grid;
    gap: 8px;
}

.activity-permission-row {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(124, 58, 237, .12);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(245, 243, 255, .85), #fff);
    color: var(--activity-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.activity-permission-row:hover {
    border-color: rgba(124, 58, 237, .32);
    color: var(--activity-ink);
}

.activity-permission-row span,
.activity-permission-row small {
    color: var(--activity-muted);
    font-size: 11px;
    font-weight: 850;
}

.activity-permission-row strong {
    font-size: 12px;
    font-weight: 950;
}

.activity-list-panel {
    padding: 18px;
}

.activity-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.activity-page-info {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 850;
}

.activity-timeline {
    display: grid;
    gap: 11px;
}

.activity-row-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-left: 5px solid rgba(20, 184, 166, .5);
    border-radius: 20px;
    background: linear-gradient(135deg, #fff, #f8fbff);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
}

.activity-row-card.tone-green { border-left-color: var(--activity-green); }
.activity-row-card.tone-blue { border-left-color: var(--activity-blue); }
.activity-row-card.tone-red { border-left-color: var(--activity-red); }
.activity-row-card.tone-amber { border-left-color: var(--activity-amber); }
.activity-row-card.tone-purple { border-left-color: var(--activity-purple); }
.activity-row-card.tone-teal { border-left-color: #0f766e; }
.activity-row-card.tone-cyan { border-left-color: var(--activity-cyan); }
.activity-row-card.tone-orange { border-left-color: var(--activity-orange); }
.activity-row-card.tone-slate { border-left-color: var(--activity-slate); }

.activity-row-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.activity-row-top strong {
    display: block;
    font-size: 15px;
    font-weight: 950;
}

.activity-row-top span,
.activity-row-top time {
    color: var(--activity-muted);
    font-size: 12px;
    font-weight: 750;
}

.activity-row-main p {
    margin: 7px 0 10px;
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
}

.activity-row-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.activity-row-tags span {
    padding: 6px 9px;
    background: #f8fafc;
    font-size: 11px;
}

.activity-tag-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(239, 246, 255, .96));
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.activity-tag-button:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, .45);
    box-shadow: 0 10px 22px rgba(20, 184, 166, .16);
}

.activity-row-tags span.warn {
    background: rgba(245, 158, 11, .12);
    color: #92400e;
}

.activity-row-tags span.safe {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}

.activity-row-tags span.risk-critical,
.activity-row-tags span.error {
    background: rgba(220, 38, 38, .12);
    color: #991b1b;
}

.activity-row-tags span.risk-high {
    background: rgba(249, 115, 22, .13);
    color: #9a3412;
}

.activity-row-tags span.risk-medium {
    background: rgba(245, 158, 11, .13);
    color: #92400e;
}

.activity-row-tags span.risk-low {
    background: rgba(20, 184, 166, .12);
    color: #0f766e;
}

.activity-day-timeline {
    display: grid;
    gap: 10px;
}

.activity-day-timeline.compact {
    gap: 8px;
}

.activity-day-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 40px;
    gap: 9px;
    align-items: center;
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}

.activity-day-row i {
    display: block;
    height: 10px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--activity-cyan) var(--w, 0%), rgba(226, 232, 240, .95) var(--w, 0%));
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
}

.activity-day-row em {
    font-style: normal;
    color: #dc2626;
}

.activity-row-actions {
    display: flex;
    justify-content: flex-end;
}

.activity-empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 56px 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(241, 245, 249, .85), rgba(236, 253, 245, .85));
    text-align: center;
}

.activity-empty-state i {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 22px;
    background: #fff;
    color: var(--activity-cyan);
    font-size: 26px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

.activity-empty-state h3 {
    margin: 0;
    font-weight: 950;
}

.activity-empty-state p {
    max-width: 480px;
    margin: 0;
    color: var(--activity-muted);
}

.activity-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}

.activity-pagination a,
.activity-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 23, 42, .09);
    border-radius: 12px;
    background: #fff;
    color: #334155;
    text-decoration: none;
    font-weight: 850;
}

.activity-pagination a.active {
    background: linear-gradient(135deg, var(--activity-cyan), var(--activity-blue));
    color: #fff;
    border-color: transparent;
}

.activity-pagination a.disabled {
    pointer-events: none;
    opacity: .45;
}

.activity-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(10px);
}

.activity-modal-overlay.is-open {
    display: grid;
}

.activity-modal-card {
    width: min(980px, 96vw);
    max-height: min(88vh, 880px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 34px 90px rgba(15, 23, 42, .35);
}

.activity-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px;
    color: #fff;
}

.activity-modal-header span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: .82;
    text-transform: uppercase;
}

.activity-modal-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -.03em;
}

.activity-modal-close {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 15px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.activity-modal-body {
    display: grid;
    gap: 14px;
    padding: 18px 22px;
    overflow: auto;
}

.activity-modal-summary,
.activity-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.activity-modal-summary > div,
.activity-snapshot-grid > div,
.activity-modal-section,
.activity-modal-alert {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.activity-modal-summary > div {
    padding: 13px;
}

.activity-modal-summary small {
    display: block;
    margin-bottom: 5px;
    color: var(--activity-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.activity-modal-summary strong {
    font-size: 14px;
}

.activity-modal-alert {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(254, 243, 199, .92), rgba(255, 255, 255, .96));
}

.activity-error-alert {
    background: linear-gradient(135deg, rgba(254, 226, 226, .96), rgba(255, 255, 255, .98));
}

.activity-error-alert i {
    background: #dc2626;
}

.activity-risk-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.activity-risk-text.risk-critical,
.activity-risk-text.risk-high {
    color: #b91c1c;
}

.activity-risk-text.risk-medium {
    color: #b45309;
}

.activity-risk-text.risk-low {
    color: #047857;
}

.activity-modal-alert i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #f59e0b;
    color: #fff;
}

.activity-error-alert i {
    background: #dc2626;
}

.activity-modal-alert p,
.activity-modal-section p {
    margin: 5px 0 0;
    color: #475569;
    line-height: 1.55;
}

.activity-modal-section {
    padding: 16px;
}

.activity-modal-section h4 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 950;
}

.activity-movement-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    max-height: 260px;
    overflow: auto;
}

.activity-movement-map a {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    color: var(--activity-ink);
    text-decoration: none;
}

.activity-movement-map a:hover {
    border-color: rgba(20,184,166,.35);
    background: #f0fdfa;
}

.activity-movement-map span,
.activity-movement-map small {
    color: var(--activity-muted);
    font-size: 12px;
    font-weight: 800;
}

.activity-diff-list {
    display: grid;
    gap: 8px;
}

.activity-diff-row,
.activity-snapshot-line {
    display: grid;
    grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border-radius: 13px;
    background: #f8fafc;
}

.activity-diff-row > span,
.activity-snapshot-line span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.activity-diff-values {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.activity-diff-values em,
.activity-snapshot-line em {
    color: #64748b;
    font-style: normal;
    word-break: break-word;
}

.activity-diff-values em {
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(254, 226, 226, .72);
    color: #991b1b;
}

.activity-diff-values strong {
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(220, 252, 231, .85);
    color: #047857;
    word-break: break-word;
}

.activity-change-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.activity-change-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 15px;
    background: linear-gradient(135deg, #fff, #f8fbff);
}

.activity-change-card > span {
    color: #334155;
    font-size: 12px;
    font-weight: 950;
}

.activity-change-card div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

.activity-change-card em,
.activity-change-card strong {
    padding: 8px 9px;
    border-radius: 12px;
    word-break: break-word;
    font-size: 12px;
}

.activity-change-card em {
    background: rgba(254, 226, 226, .8);
    color: #991b1b;
    font-style: normal;
}

.activity-change-card strong {
    background: rgba(220, 252, 231, .9);
    color: #047857;
}

.activity-change-card i {
    color: #64748b;
    text-align: center;
}

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

.activity-snapshot-grid > div {
    display: grid;
    gap: 8px;
    max-height: 310px;
    overflow: auto;
    padding: 13px;
}

.activity-snapshot-grid > div:first-child .activity-snapshot-line em {
    color: #991b1b;
}

.activity-snapshot-grid > div:last-child .activity-snapshot-line em {
    color: #047857;
}

.activity-user-modal-card {
    width: min(1080px, 96vw);
}

.activity-user-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.activity-user-stat-grid > div {
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .82));
}

.activity-user-stat-grid small {
    display: block;
    margin-bottom: 6px;
    color: var(--activity-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.activity-user-stat-grid strong {
    font-size: 21px;
    font-weight: 950;
}

.activity-user-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 14px;
}

.activity-user-group-list {
    display: grid;
    gap: 8px;
}

.activity-user-group-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fafc;
}

.activity-user-group-list span {
    color: #334155;
    font-size: 12px;
    font-weight: 850;
}

.activity-user-group-list strong {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(20, 184, 166, .13);
    color: #0f766e;
}

.activity-user-recent-list {
    display: grid;
    gap: 10px;
}

.activity-user-recent-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 17px;
    background: linear-gradient(135deg, #fff, #f8fbff);
}

.activity-user-recent-row strong {
    display: block;
    font-size: 13px;
    font-weight: 950;
}

.activity-user-recent-row small {
    display: block;
    margin-top: 2px;
    color: var(--activity-muted);
    font-size: 11px;
    font-weight: 800;
}

.activity-user-recent-row p {
    margin: 5px 0 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}

.activity-user-recent-row em {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.activity-user-recent-row em.risk-critical,
.activity-user-recent-row em.risk-high {
    background: rgba(220, 38, 38, .12);
    color: #991b1b;
}

.activity-user-recent-row em.risk-medium {
    background: rgba(245, 158, 11, .13);
    color: #92400e;
}

.activity-user-recent-row em.risk-low {
    background: rgba(16, 185, 129, .12);
    color: #047857;
}

.activity-modal-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: #f8fafc;
}

.activity-revert-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.activity-revert-form textarea,
.activity-revert-form input[type="file"] {
    min-height: 42px;
    max-width: 260px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 12px;
    background: #fff;
    padding: 9px 11px;
}

.activity-footer-note {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 1400px) {
    .activity-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .activity-alert-strip,
    .activity-module-export {
        grid-template-columns: 1fr;
    }

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

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

@media (max-width: 1100px) {
    .activity-hero,
    .activity-layout {
        grid-template-columns: 1fr;
    }

    .activity-side-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    .activity-redesign {
        gap: 12px;
    }

    .activity-hero,
    .activity-filter-panel,
    .activity-list-panel,
    .activity-side-panel > div {
        border-radius: 20px;
        padding: 15px;
    }

    .activity-hero-stats,
    .activity-filter-grid,
    .activity-mini-grid,
    .activity-risk-tabs,
    .activity-alert-list,
    .activity-module-export-grid,
    .activity-modal-summary,
    .activity-snapshot-grid,
    .activity-user-stat-grid,
    .activity-user-modal-grid,
    .activity-change-cards {
        grid-template-columns: 1fr;
    }

    .activity-field.wide,
    .activity-field.compact,
    .activity-filter-actions {
        grid-column: auto;
    }

    .activity-filter-actions {
        justify-content: stretch;
    }

    .activity-filter-actions .btn {
        flex: 1;
    }

    .activity-row-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .activity-row-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .activity-row-actions .btn {
        width: 100%;
    }

    .activity-row-top,
    .activity-list-head,
    .activity-modal-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .activity-modal-overlay {
        padding: 10px;
    }

    .activity-modal-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px;
    }

    .activity-diff-row,
    .activity-snapshot-line,
    .activity-diff-values,
    .activity-change-card div,
    .activity-user-recent-row,
    .activity-day-row {
        grid-template-columns: 1fr;
    }

    .activity-revert-form,
    .activity-revert-form textarea,
    .activity-revert-form input[type="file"] {
        width: 100%;
        max-width: none;
    }
}
.page-backups .backup-redesign {
    --backup-ink: #142033;
    --backup-muted: #66748a;
    --backup-line: rgba(20, 32, 51, .10);
    --backup-teal: #16b7a4;
    --backup-blue: #2d7df0;
    --backup-orange: #ff9f1c;
    --backup-red: #ef476f;
    --backup-purple: #7b61ff;
    display: grid;
    gap: 18px;
    color: var(--backup-ink);
}

.page-backups .backup-alert {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 18px 46px rgba(16, 24, 40, .08);
}

.page-backups .backup-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(45, 125, 240, .14);
    border-radius: 30px;
    background:
        radial-gradient(circle at 12% 20%, rgba(22, 183, 164, .22), transparent 32%),
        radial-gradient(circle at 82% 15%, rgba(45, 125, 240, .18), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(238, 250, 255, .92));
    box-shadow: 0 24px 70px rgba(31, 72, 111, .12);
}

.page-backups .backup-kicker,
.page-backups .backup-panel-head span,
.page-backups .backup-metric-card span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #128879;
}

.page-backups .backup-hero-copy h1 {
    margin: 8px 0 8px;
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.page-backups .backup-hero-copy p {
    max-width: 780px;
    color: var(--backup-muted);
    font-size: .98rem;
    line-height: 1.65;
}

.page-backups .backup-hero-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.page-backups .backup-hero-pills span,
.page-backups .backup-badge,
.page-backups .backup-file-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(20, 32, 51, .08);
    color: #26354d;
    font-weight: 800;
    font-size: .82rem;
}

.page-backups .backup-score-card {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 190px;
    padding: 22px;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(135deg, #11a38f, #2674e8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 48px rgba(38, 116, 232, .20);
}

.page-backups .backup-score-card.is-warning {
    background: linear-gradient(135deg, #ff8a00, #ef476f);
}

.page-backups .backup-score-card span {
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    opacity: .8;
}

.page-backups .backup-score-card strong {
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.page-backups .backup-score-card p {
    margin: 0;
    opacity: .9;
}

.page-backups .backup-soft-btn,
.page-backups .backup-card-open,
.page-backups .backup-filter-form button {
    border: 0;
    border-radius: 16px;
    padding: 10px 14px;
    font-weight: 900;
    background: rgba(255, 255, 255, .92);
    color: #0f766e;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}

.page-backups .backup-quick-actions,
.page-backups .backup-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.page-backups .backup-action-card,
.page-backups .backup-metric-card {
    position: relative;
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--backup-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 42px rgba(31, 72, 111, .10);
    color: var(--backup-ink);
    text-decoration: none;
    text-align: left;
    overflow: hidden;
}

.page-backups .backup-action-card {
    display: grid;
    gap: 8px;
}

.page-backups .backup-action-card::after,
.page-backups .backup-metric-card::after {
    content: "";
    position: absolute;
    inset: auto -30px -45px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(22, 183, 164, .16);
}

.page-backups .backup-action-card i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: rgba(22, 183, 164, .13);
    color: var(--backup-teal);
    font-size: 1.25rem;
}

.page-backups .backup-action-card.danger i,
.page-backups .backup-action-card.danger::after {
    color: var(--backup-red);
    background: rgba(239, 71, 111, .12);
}

.page-backups .backup-action-card.info i,
.page-backups .backup-action-card.info::after {
    color: var(--backup-blue);
    background: rgba(45, 125, 240, .12);
}

.page-backups .backup-action-card.neutral i,
.page-backups .backup-action-card.neutral::after {
    color: var(--backup-purple);
    background: rgba(123, 97, 255, .12);
}

.page-backups .backup-action-card span,
.page-backups .backup-metric-card strong {
    position: relative;
    z-index: 1;
    font-size: 1.08rem;
    font-weight: 950;
}

.page-backups .backup-action-card small,
.page-backups .backup-metric-card small {
    position: relative;
    z-index: 1;
    color: var(--backup-muted);
    font-weight: 700;
}

.page-backups .backup-board {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.page-backups .backup-side {
    display: grid;
    gap: 14px;
}

.page-backups .backup-panel,
.page-backups .backup-main-list {
    border: 1px solid var(--backup-line);
    border-radius: 26px;
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 20px 52px rgba(31, 72, 111, .10);
}

.page-backups .backup-panel {
    padding: 16px;
}

.page-backups .backup-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.page-backups .backup-panel-head strong {
    font-weight: 950;
}

.page-backups .backup-check-list,
.page-backups .backup-day-bars {
    display: grid;
    gap: 9px;
}

.page-backups .backup-check-list button {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 2px 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(20, 32, 51, .08);
    border-radius: 18px;
    background: #fff;
    text-align: left;
}

.page-backups .backup-check-list i {
    grid-row: span 2;
    font-size: 1.25rem;
    color: var(--backup-teal);
}

.page-backups .backup-check-list .is-risk i {
    color: var(--backup-red);
}

.page-backups .backup-check-list span {
    font-weight: 900;
}

.page-backups .backup-check-list small {
    color: var(--backup-muted);
}

.page-backups .backup-day-bars > div {
    display: grid;
    grid-template-columns: 48px 1fr 28px;
    gap: 10px;
    align-items: center;
    font-size: .82rem;
    font-weight: 800;
    color: var(--backup-muted);
}

.page-backups .backup-day-bars i {
    height: 9px;
    border-radius: 999px;
    background: rgba(20, 32, 51, .07);
    overflow: hidden;
}

.page-backups .backup-day-bars i::before {
    content: "";
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--backup-teal), var(--backup-blue));
}

.page-backups .backup-main-list {
    padding: 16px;
}

.page-backups .backup-list-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.page-backups .backup-list-toolbar h2 {
    margin: 4px 0 0;
    font-size: 1.35rem;
    font-weight: 950;
}

.page-backups .backup-filter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-backups .backup-filter-form select,
.page-backups .backup-filter-form input[type="search"],
.page-backups .backup-filter-form label {
    min-height: 42px;
    border: 1px solid rgba(20, 32, 51, .11);
    border-radius: 14px;
    background: #fff;
    color: var(--backup-ink);
    font-weight: 800;
}

.page-backups .backup-filter-form select,
.page-backups .backup-filter-form input[type="search"] {
    padding: 0 12px;
}

.page-backups .backup-filter-form label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
}

.page-backups .backup-filter-form button {
    background: linear-gradient(135deg, var(--backup-teal), var(--backup-blue));
    color: #fff;
}

.page-backups .backup-tab-row,
.page-backups .backup-section-title {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 14px 0;
}

.page-backups .backup-tab-row a,
.page-backups .backup-section-title strong {
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid rgba(20, 32, 51, .10);
    color: var(--backup-muted);
    text-decoration: none;
    font-weight: 900;
}

.page-backups .backup-tab-row a.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--backup-teal), var(--backup-blue));
}

.page-backups .backup-section-title {
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed rgba(20, 32, 51, .12);
}

.page-backups .backup-section-title span {
    font-weight: 950;
}

.page-backups .backup-card-list {
    display: grid;
    gap: 10px;
}

.page-backups .backup-file-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(20, 32, 51, .10);
    border-radius: 22px;
    background: linear-gradient(135deg, #fff, rgba(241, 249, 255, .92));
}

.page-backups .backup-file-card.is-pinned {
    border-color: rgba(255, 159, 28, .38);
    box-shadow: inset 4px 0 0 var(--backup-orange);
}

.page-backups .backup-file-card.is-archive {
    background: linear-gradient(135deg, #fff, rgba(245, 247, 250, .96));
}

.page-backups .backup-file-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(22, 183, 164, .13);
    color: var(--backup-teal);
    font-size: 1.4rem;
}

.page-backups .backup-file-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.page-backups .backup-file-top strong {
    display: block;
    font-weight: 950;
}

.page-backups .backup-file-top small,
.page-backups .backup-file-card p {
    color: var(--backup-muted);
}

.page-backups .backup-file-card p {
    margin: 6px 0 8px;
}

.page-backups .backup-file-meta {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.page-backups .backup-badge.danger { color: #b91c1c; background: #fff1f2; }
.page-backups .backup-badge.warning { color: #9a5b00; background: #fff7ed; }
.page-backups .backup-badge.info { color: #1d4ed8; background: #eff6ff; }
.page-backups .backup-badge.safe { color: #047857; background: #ecfdf5; }
.page-backups .backup-badge.slate { color: #475569; background: #f1f5f9; }

.page-backups .backup-card-open {
    min-width: 92px;
    background: #eefbf9;
}

.page-backups .backup-empty {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 170px;
    border: 1px dashed rgba(20, 32, 51, .16);
    border-radius: 22px;
    color: var(--backup-muted);
    text-align: center;
}

.page-backups .backup-empty i {
    font-size: 2rem;
    color: var(--backup-teal);
}

.page-backups .backup-empty strong {
    color: var(--backup-ink);
}

.page-backups .backup-modal[hidden] {
    display: none !important;
}

.page-backups .backup-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
}

.page-backups .backup-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(9px);
}

.page-backups .backup-modal-card {
    position: relative;
    z-index: 1;
    width: min(620px, calc(100vw - 28px));
    max-height: min(86vh, 820px);
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 32px 100px rgba(15, 23, 42, .28);
}

.page-backups .backup-modal-card.wide {
    width: min(940px, calc(100vw - 28px));
}

.page-backups .backup-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--backup-teal), var(--backup-blue));
}

.page-backups .backup-modal-head.red {
    background: linear-gradient(135deg, #ef476f, #f97316);
}

.page-backups .backup-modal-head.blue {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.page-backups .backup-modal-head.purple {
    background: linear-gradient(135deg, #7b61ff, #2563eb);
}

.page-backups .backup-modal-head.slate {
    background: linear-gradient(135deg, #475569, #0f172a);
}

.page-backups .backup-modal-head span {
    display: block;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .82;
}

.page-backups .backup-modal-head h3 {
    margin: 3px 0 0;
    font-size: 1.25rem;
    font-weight: 950;
}

.page-backups .backup-modal-head button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    color: var(--backup-ink);
}

.page-backups .backup-modal-body {
    overflow: auto;
    padding: 20px 22px;
}

.page-backups .backup-modal-body label {
    display: grid;
    gap: 7px;
    margin-bottom: 13px;
    font-weight: 900;
}

.page-backups .backup-modal-body input,
.page-backups .backup-modal-body select,
.page-backups .backup-modal-body textarea,
.page-backups .backup-action-box input[type="text"] {
    width: 100%;
    border: 1px solid rgba(20, 32, 51, .14);
    border-radius: 16px;
    padding: 11px 13px;
    background: #f8fbff;
    font-weight: 800;
    color: var(--backup-ink);
}

.page-backups .backup-modal-info,
.page-backups .backup-danger-note {
    padding: 13px 14px;
    border-radius: 18px;
    background: #ecfeff;
    color: #155e75;
    font-weight: 800;
}

.page-backups .backup-danger-note {
    margin-bottom: 12px;
    background: #fff1f2;
    color: #9f1239;
}

.page-backups .backup-check {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 9px !important;
    margin: 10px 0 !important;
    font-weight: 850 !important;
}

.page-backups .backup-check input {
    width: auto;
}

.page-backups .backup-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.page-backups .backup-health-grid,
.page-backups .backup-file-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.page-backups .backup-health-grid > div,
.page-backups .backup-file-detail-grid > div,
.page-backups .backup-action-box {
    padding: 14px;
    border: 1px solid rgba(20, 32, 51, .10);
    border-radius: 20px;
    background: #f8fbff;
}

.page-backups .backup-health-grid i {
    font-size: 1.35rem;
    color: var(--backup-teal);
}

.page-backups .backup-health-grid .risk i {
    color: var(--backup-red);
}

.page-backups .backup-health-grid strong,
.page-backups .backup-file-detail-grid strong,
.page-backups .backup-action-box strong {
    display: block;
    font-weight: 950;
}

.page-backups .backup-health-grid span,
.page-backups .backup-file-detail-grid span,
.page-backups .backup-action-box small {
    color: var(--backup-muted);
}

.page-backups .backup-mini-table {
    display: grid;
    gap: 10px;
}

.page-backups .backup-mini-table > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 12px;
    border: 1px solid rgba(20, 32, 51, .10);
    border-radius: 18px;
    background: #f8fbff;
}

.page-backups .backup-mini-table small {
    grid-column: 2;
    color: var(--backup-muted);
}

.page-backups .backup-action-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.page-backups .backup-action-box {
    display: grid;
    gap: 9px;
    align-content: start;
}

.page-backups .backup-action-box.danger {
    background: #fff7f8;
    border-color: rgba(239, 71, 111, .18);
}

body.backup-modal-open {
    overflow: hidden;
}

@media (max-width: 1180px) {
    .page-backups .backup-hero-panel,
    .page-backups .backup-board {
        grid-template-columns: 1fr;
    }
    .page-backups .backup-quick-actions,
    .page-backups .backup-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .page-backups .backup-redesign {
        gap: 12px;
    }
    .page-backups .backup-hero-panel,
    .page-backups .backup-main-list,
    .page-backups .backup-panel {
        border-radius: 20px;
        padding: 14px;
    }
    .page-backups .backup-quick-actions,
    .page-backups .backup-metric-grid,
    .page-backups .backup-health-grid,
    .page-backups .backup-file-detail-grid,
    .page-backups .backup-action-split {
        grid-template-columns: 1fr;
    }
    .page-backups .backup-list-toolbar,
    .page-backups .backup-file-card {
        grid-template-columns: 1fr;
    }
    .page-backups .backup-filter-form {
        justify-content: stretch;
    }
    .page-backups .backup-filter-form select,
    .page-backups .backup-filter-form input[type="search"],
    .page-backups .backup-filter-form button,
    .page-backups .backup-filter-form label {
        width: 100%;
    }
    .page-backups .backup-card-open {
        width: 100%;
    }
    .page-backups .backup-modal {
        padding: 10px;
    }
    .page-backups .backup-modal-card,
    .page-backups .backup-modal-card.wide {
        width: calc(100vw - 20px);
        max-height: 90vh;
        border-radius: 22px;
    }
    .page-backups .backup-mini-table > div {
        grid-template-columns: 1fr;
    }
.page-backups .backup-mini-table small {
        grid-column: auto;
    }
}

/* Finans kontrol paneli */
.page-accounting .finance-command-shell {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 100%;
}

.page-accounting [data-section-key="summary_primary"],
.page-accounting [data-section-key="summary_secondary"] {
    display: none !important;
}

.page-accounting .finance-command-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 12%, rgba(20, 184, 166, 0.20), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(37, 99, 235, 0.16), transparent 30%),
        linear-gradient(135deg, #f8fffc 0%, #eef8ff 56%, #ffffff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.10);
}

.page-accounting .finance-command-copy {
    min-width: 0;
}

.page-accounting .finance-command-kicker,
.page-accounting .finance-command-metric small,
.page-accounting .finance-command-modal-card header small {
    display: block;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .finance-command-copy h2 {
    margin: 6px 0 8px;
    color: #0f172a;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 950;
    letter-spacing: -0.045em;
}

.page-accounting .finance-command-copy p {
    max-width: 660px;
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
}

.page-accounting .finance-command-actions,
.page-accounting .finance-command-modal-card footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.page-accounting .finance-command-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid rgba(15, 23, 42, 0.11);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.page-accounting .finance-command-btn.primary {
    border-color: rgba(20, 184, 166, 0.30);
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    color: #ffffff;
}

.page-accounting .finance-command-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .finance-command-pane.is-active {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .finance-command-metric,
.page-accounting .finance-command-tile,
.page-accounting .finance-command-list-card,
.page-accounting .finance-command-action,
.page-accounting .finance-command-row,
.page-accounting .finance-command-control {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: #0f172a;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.page-accounting .finance-command-metric:hover,
.page-accounting .finance-command-tile:hover,
.page-accounting .finance-command-list-card:hover,
.page-accounting .finance-command-action:hover,
.page-accounting .finance-command-row:hover,
.page-accounting .finance-command-control:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.page-accounting .finance-command-metric {
    display: grid;
    align-content: center;
    min-height: 112px;
    padding: 13px;
    border-radius: 18px;
}

.page-accounting .finance-command-metric strong {
    display: block;
    margin: 7px 0 4px;
    color: #0f172a;
    font-size: clamp(0.98rem, 1.35vw, 1.25rem);
    font-weight: 950;
    line-height: 1.14;
}

.page-accounting .finance-command-metric span,
.page-accounting .finance-command-tile small,
.page-accounting .finance-command-list-card small,
.page-accounting .finance-command-action small,
.page-accounting .finance-command-row small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 750;
}

.page-accounting .finance-command-metric.income,
.page-accounting .finance-command-tile.income {
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.18), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-command-metric.expense,
.page-accounting .finance-command-tile.expense {
    background: linear-gradient(160deg, rgba(244, 63, 94, 0.14), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-command-metric.balance,
.page-accounting .finance-command-tile.info {
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.14), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-command-metric.bank {
    background: linear-gradient(160deg, rgba(14, 165, 233, 0.16), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-command-metric.warning,
.page-accounting .finance-command-tile.warning {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.18), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-command-tabbar {
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    overflow-x: auto;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.page-accounting .finance-command-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 900;
}

.page-accounting .finance-command-tab.is-active {
    border-color: rgba(20, 184, 166, 0.22);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(37, 99, 235, 0.10));
    color: #0f766e;
}

.page-accounting .finance-command-panes {
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.page-accounting .finance-command-pane {
    display: none;
}

.page-accounting .finance-command-tile {
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 14px;
    border-radius: 18px;
}

.page-accounting .finance-command-tile span,
.page-accounting .finance-command-list-card strong,
.page-accounting .finance-command-action span,
.page-accounting .finance-command-row strong {
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .finance-command-tile strong {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 950;
}

.page-accounting .finance-command-list-card,
.page-accounting .finance-command-action,
.page-accounting .finance-command-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px;
    border-radius: 17px;
}

.page-accounting .finance-command-list-card i,
.page-accounting .finance-command-action i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    font-size: 1.05rem;
}

.page-accounting .finance-command-list-card span,
.page-accounting .finance-command-action span,
.page-accounting .finance-command-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-accounting .finance-command-action.income i {
    background: rgba(16, 185, 129, 0.13);
    color: #047857;
}

.page-accounting .finance-command-action.expense i {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
}

.page-accounting .finance-command-action.info i {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.page-accounting .finance-command-action.warning i {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.page-accounting .finance-command-action.info i {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.page-accounting .finance-command-row em {
    flex: 0 0 auto;
    color: #0f766e;
    font-style: normal;
    font-weight: 950;
}

.page-accounting .finance-command-chart-card {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 250px;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at 10% 12%, rgba(20, 184, 166, 0.16), transparent 30%),
        radial-gradient(circle at 90% 16%, rgba(37, 99, 235, 0.13), transparent 32%),
        #ffffff;
    color: #0f172a;
    text-align: left;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.page-accounting .finance-command-chart-title {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 950;
}

.page-accounting .finance-command-chart-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    min-height: 152px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    background:
        linear-gradient(to top, rgba(15, 23, 42, 0.05) 1px, transparent 1px) 0 0 / 100% 25%,
        rgba(248, 250, 252, 0.74);
}

.page-accounting .finance-command-chart-month {
    display: grid;
    gap: 8px;
    align-items: end;
    min-width: 0;
    height: 100%;
}

.page-accounting .finance-command-chart-bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 4px;
    height: 116px;
}

.page-accounting .finance-command-chart-bars i,
.page-accounting .finance-command-chart-legend i {
    display: inline-block;
    width: 9px;
    min-height: 6px;
    border-radius: 999px 999px 4px 4px;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.12);
}

.page-accounting .finance-command-chart-bars i.income,
.page-accounting .finance-command-chart-legend i.income {
    background: linear-gradient(180deg, #22c55e, #0f766e);
}

.page-accounting .finance-command-chart-bars i.expense,
.page-accounting .finance-command-chart-legend i.expense {
    background: linear-gradient(180deg, #fb7185, #be123c);
}

.page-accounting .finance-command-chart-bars i.net,
.page-accounting .finance-command-chart-legend i.net {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.page-accounting .finance-command-chart-month small,
.page-accounting .finance-command-chart-legend {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
}

.page-accounting .finance-command-chart-month small {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-accounting .finance-command-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.page-accounting .finance-command-control {
    display: grid;
    gap: 6px;
    min-height: 88px;
    padding: 14px;
    border-radius: 18px;
}

.page-accounting .finance-command-control span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 900;
}

.page-accounting .finance-command-control strong {
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 950;
}

.page-accounting .finance-command-control.good {
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.12), #ffffff);
}

.page-accounting .finance-command-control.warning {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.15), #ffffff);
}

.page-accounting .finance-command-modal {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: grid;
    place-items: center;
    padding: 18px;
}

.page-accounting .finance-command-modal[hidden] {
    display: none !important;
}

.page-accounting .finance-command-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(10px);
}

.page-accounting .finance-command-modal-card {
    position: relative;
    width: min(620px, calc(100vw - 28px));
    max-height: min(78vh, 720px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(20, 184, 166, 0.20);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fffc 100%);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.32);
}

.page-accounting .finance-command-modal-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at 8% 12%, rgba(20, 184, 166, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(37, 99, 235, 0.08));
}

.page-accounting .finance-command-modal-card h3 {
    margin: 4px 0 4px;
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.page-accounting .finance-command-modal-card p {
    margin: 0;
    color: #475569;
    font-size: 0.84rem;
}

.page-accounting .finance-command-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
}

.page-accounting .finance-command-modal-list {
    display: grid;
    gap: 8px;
    padding: 14px 18px;
    overflow: auto;
}

.page-accounting .finance-command-modal-row,
.page-accounting .finance-command-modal-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 11px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
}

.page-accounting .finance-command-modal-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-accounting .finance-command-modal-row strong {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
}

.page-accounting .finance-command-modal-row small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 750;
}

.page-accounting .finance-command-modal-row .finance-command-modal-detail {
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 820;
    line-height: 1.35;
}

.page-accounting .finance-command-modal-row em {
    flex: 0 0 auto;
    font-style: normal;
    font-weight: 950;
}

.page-accounting .finance-command-modal-row.is-income {
    border-color: rgba(16, 185, 129, 0.22);
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.10), #ffffff);
}

.page-accounting .finance-command-modal-row.is-expense {
    border-color: rgba(244, 63, 94, 0.20);
    background: linear-gradient(160deg, rgba(244, 63, 94, 0.09), #ffffff);
}

.page-accounting .finance-command-modal-row.is-warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.12), #ffffff);
}

.page-accounting .finance-command-modal-row.is-info {
    border-color: rgba(37, 99, 235, 0.18);
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.09), #ffffff);
}

.page-accounting .finance-command-modal-card footer {
    justify-content: flex-end;
    margin: 0;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

body.finance-command-modal-open {
    overflow: hidden;
}

@media (max-width: 1200px) {
    .page-accounting .finance-command-hero {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-command-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-accounting .finance-command-pane.is-active {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-accounting .finance-command-hero,
    .page-accounting .finance-command-panes {
        padding: 12px;
        border-radius: 18px;
    }

    .page-accounting .finance-command-actions,
    .page-accounting .finance-command-modal-card footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-command-btn {
        width: 100%;
    }

    .page-accounting .finance-command-metrics,
    .page-accounting .finance-command-pane.is-active {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-command-tab {
        flex: 0 0 auto;
    }

    .page-accounting .finance-command-chart-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-accounting .finance-command-chart-card {
        min-height: 220px;
    }

    .page-accounting .finance-command-modal {
        padding: 10px;
    }

    .page-accounting .finance-command-modal-card {
        width: calc(100vw - 20px);
        max-height: 86vh;
        border-radius: 20px;
    }
}

/* Finans merkezi yeni sade panel */
.page-accounting .finance-redesign-shell {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 100%;
}

.page-accounting .finance-redesign-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 15%, rgba(45, 212, 191, 0.24), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.20), transparent 34%),
        linear-gradient(135deg, #f8fffc 0%, #eef9ff 48%, #ffffff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

.page-accounting .finance-redesign-copy {
    min-width: 0;
}

.page-accounting .finance-redesign-kicker,
.page-accounting .finance-redesign-card-main small,
.page-accounting .finance-redesign-kpi small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .finance-redesign-copy h2 {
    margin: 6px 0 8px;
    color: #0f172a;
    font-size: clamp(1.45rem, 2.2vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -0.045em;
}

.page-accounting .finance-redesign-copy p {
    max-width: 760px;
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.55;
}

.page-accounting .finance-redesign-actions,
.page-accounting .finance-redesign-card-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.page-accounting .finance-redesign-button,
.page-accounting .finance-redesign-card-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.page-accounting .finance-redesign-button.primary {
    border-color: rgba(20, 184, 166, 0.35);
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    color: #ffffff;
}

.page-accounting .finance-redesign-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.page-accounting .finance-redesign-kpi {
    display: grid;
    align-content: center;
    min-height: 118px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.90);
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.07);
}

.page-accounting .finance-redesign-kpi strong {
    display: block;
    margin: 8px 0 4px;
    color: #0f172a;
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-weight: 950;
    line-height: 1.12;
}

.page-accounting .finance-redesign-kpi span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 750;
}

.page-accounting .finance-redesign-kpi.income {
    background: linear-gradient(160deg, rgba(16, 185, 129, 0.14), rgba(255, 255, 255, 0.94));
}

.page-accounting .finance-redesign-kpi.expense {
    background: linear-gradient(160deg, rgba(244, 63, 94, 0.13), rgba(255, 255, 255, 0.94));
}

.page-accounting .finance-redesign-kpi.balance {
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.13), rgba(255, 255, 255, 0.94));
}

.page-accounting .finance-redesign-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .finance-redesign-card {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.page-accounting .finance-redesign-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #14b8a6, #2563eb);
}

.page-accounting .finance-redesign-card-main {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 94px;
    padding: 14px 14px 10px 18px;
    color: #0f172a;
    text-decoration: none;
}

.page-accounting .finance-redesign-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    font-size: 1.15rem;
}

.page-accounting .finance-redesign-card-main strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.98rem;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.page-accounting .finance-redesign-card-main em {
    grid-column: 2;
    color: #0f766e;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 900;
}

.page-accounting .finance-redesign-card.is-active {
    border-color: rgba(20, 184, 166, 0.40);
    box-shadow: 0 18px 34px rgba(20, 184, 166, 0.18);
}

.page-accounting .finance-redesign-card-links {
    margin: 0;
    padding: 0 14px 14px 18px;
}

.page-accounting .finance-redesign-card-links a {
    min-height: 30px;
    padding: 6px 10px;
    color: #334155;
    font-size: 0.76rem;
    box-shadow: none;
}

.page-accounting .finance-redesign-card.tone-green::before {
    background: linear-gradient(180deg, #10b981, #22c55e);
}

.page-accounting .finance-redesign-card.tone-green .finance-redesign-card-icon {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.page-accounting .finance-redesign-card.tone-blue::before {
    background: linear-gradient(180deg, #2563eb, #38bdf8);
}

.page-accounting .finance-redesign-card.tone-blue .finance-redesign-card-icon {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.11);
}

.page-accounting .finance-redesign-card.tone-amber::before {
    background: linear-gradient(180deg, #f59e0b, #f97316);
}

.page-accounting .finance-redesign-card.tone-amber .finance-redesign-card-icon {
    color: #b45309;
    background: rgba(245, 158, 11, 0.13);
}

.page-accounting .finance-redesign-card.tone-violet::before {
    background: linear-gradient(180deg, #7c3aed, #a855f7);
}

.page-accounting .finance-redesign-card.tone-violet .finance-redesign-card-icon {
    color: #6d28d9;
    background: rgba(124, 58, 237, 0.12);
}

.page-accounting .finance-redesign-card.tone-rose::before {
    background: linear-gradient(180deg, #e11d48, #fb7185);
}

.page-accounting .finance-redesign-card.tone-rose .finance-redesign-card-icon {
    color: #be123c;
    background: rgba(225, 29, 72, 0.11);
}

.page-accounting .finance-redesign-card.tone-indigo::before {
    background: linear-gradient(180deg, #4f46e5, #818cf8);
}

.page-accounting .finance-redesign-card.tone-indigo .finance-redesign-card-icon {
    color: #4338ca;
    background: rgba(79, 70, 229, 0.11);
}

.page-accounting .finance-redesign-card.tone-cyan::before {
    background: linear-gradient(180deg, #0891b2, #22d3ee);
}

.page-accounting .finance-redesign-card.tone-cyan .finance-redesign-card-icon {
    color: #0e7490;
    background: rgba(8, 145, 178, 0.11);
}

.page-accounting .finance-redesign-card.tone-slate::before {
    background: linear-gradient(180deg, #334155, #64748b);
}

.page-accounting .finance-redesign-card.tone-slate .finance-redesign-card-icon {
    color: #334155;
    background: rgba(51, 65, 85, 0.10);
}

.page-accounting .finance-legacy-hero {
    display: none !important;
}

@media (max-width: 1500px) {
    .page-accounting .finance-redesign-hero {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-redesign-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-accounting .finance-redesign-hero {
        padding: 14px;
        border-radius: 18px;
    }

    .page-accounting .finance-redesign-status,
    .page-accounting .finance-redesign-nav {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-redesign-kpi {
        min-height: 96px;
    }
}

html[data-theme="dark"] .page-accounting .finance-redesign-hero {
    border-color: rgba(45, 212, 191, 0.20);
    background:
        radial-gradient(circle at 12% 15%, rgba(45, 212, 191, 0.16), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
}

html[data-theme="dark"] .page-accounting .finance-redesign-copy h2,
html[data-theme="dark"] .page-accounting .finance-redesign-card-main,
html[data-theme="dark"] .page-accounting .finance-redesign-kpi strong {
    color: #f8fafc;
}

html[data-theme="dark"] .page-accounting .finance-redesign-copy p,
html[data-theme="dark"] .page-accounting .finance-redesign-kicker,
html[data-theme="dark"] .page-accounting .finance-redesign-card-main small,
html[data-theme="dark"] .page-accounting .finance-redesign-kpi small,
html[data-theme="dark"] .page-accounting .finance-redesign-kpi span {
    color: #cbd5e1;
}

html[data-theme="dark"] .page-accounting .finance-redesign-card,
html[data-theme="dark"] .page-accounting .finance-redesign-kpi,
html[data-theme="dark"] .page-accounting .finance-redesign-button,
html[data-theme="dark"] .page-accounting .finance-redesign-card-links a {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.86);
    color: #f8fafc;
}

.page-accounting .finance-transaction-workspace {
    border: 1px solid rgba(20, 184, 166, 0.20);
    background:
        radial-gradient(circle at 10% 10%, rgba(20, 184, 166, 0.12), transparent 30%),
        radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
}

.page-accounting .finance-transaction-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.page-accounting .finance-transaction-head h5 {
    color: #0f172a;
    font-size: 1.18rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.page-accounting .finance-transaction-head span {
    display: block;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 700;
}

.page-accounting .finance-transaction-mode-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
}

.page-accounting .finance-transaction-mode-links a {
    min-width: 72px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 950;
    text-align: center;
    text-decoration: none;
}

.page-accounting .finance-transaction-mode-links a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.page-accounting .finance-transaction-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .finance-transaction-kpi {
    display: flex;
    min-height: 128px;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.page-accounting .finance-transaction-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.11);
}

.page-accounting .finance-transaction-kpi small {
    color: #475569;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .finance-transaction-kpi strong {
    color: #0f172a;
    font-size: clamp(1.15rem, 1.6vw, 1.8rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.page-accounting .finance-transaction-kpi span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
}

.page-accounting .finance-transaction-kpi.income {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.18), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-transaction-kpi.expense {
    background: linear-gradient(145deg, rgba(244, 63, 94, 0.16), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-transaction-kpi.balance {
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.16), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-transaction-kpi.warning {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.18), rgba(255, 255, 255, 0.96));
}

.page-accounting .finance-transaction-compact-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .finance-transaction-compact-flow > div {
    padding: 14px;
    border: 1px solid rgba(20, 184, 166, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.page-accounting .finance-transaction-compact-flow small,
.page-accounting .finance-transaction-compact-flow span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.page-accounting .finance-transaction-compact-flow strong {
    display: block;
    margin: 3px 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
}

.page-accounting .finance-transaction-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.page-accounting .finance-transaction-pagination a,
.page-accounting .finance-transaction-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 12px;
    background: #ffffff;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 950;
    text-decoration: none;
}

.page-accounting .finance-transaction-pagination a.active {
    border-color: rgba(20, 184, 166, 0.55);
    color: #ffffff;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
}

.page-accounting .finance-transaction-pagination a.disabled {
    pointer-events: none;
    opacity: 0.45;
}

@media (max-width: 1200px) {
    .page-accounting .finance-transaction-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-accounting .finance-transaction-head,
    .page-accounting .finance-transaction-mode-links {
        width: 100%;
    }

    .page-accounting .finance-transaction-head {
        flex-direction: column;
    }

    .page-accounting .finance-transaction-mode-links a {
        flex: 1 1 0;
        min-width: 0;
    }

    .page-accounting .finance-transaction-kpi-grid,
    .page-accounting .finance-transaction-compact-flow {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .page-accounting .finance-transaction-workspace,
html[data-theme="dark"] .page-accounting .finance-transaction-mode-links,
html[data-theme="dark"] .page-accounting .finance-transaction-compact-flow > div,
html[data-theme="dark"] .page-accounting .finance-transaction-pagination a,
html[data-theme="dark"] .page-accounting .finance-transaction-pagination span {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.86);
}

html[data-theme="dark"] .page-accounting .finance-transaction-head h5,
html[data-theme="dark"] .page-accounting .finance-transaction-kpi strong,
html[data-theme="dark"] .page-accounting .finance-transaction-compact-flow strong {
    color: #f8fafc;
}

html[data-theme="dark"] .page-accounting .finance-transaction-head span,
html[data-theme="dark"] .page-accounting .finance-transaction-kpi small,
html[data-theme="dark"] .page-accounting .finance-transaction-kpi span,
html[data-theme="dark"] .page-accounting .finance-transaction-compact-flow small,
html[data-theme="dark"] .page-accounting .finance-transaction-compact-flow span {
    color: #cbd5e1;
}

.page-accounting .finance-transaction-workspace {
    padding: 18px;
    border-color: rgba(15, 118, 110, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.page-accounting .finance-transaction-head {
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
}

.page-accounting .finance-transaction-head h5 {
    font-size: 1.05rem;
}

.page-accounting .finance-transaction-kpi-grid {
    gap: 10px;
}

.page-accounting .finance-transaction-kpi {
    min-height: 92px;
    padding: 13px 14px;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
}

.page-accounting .finance-transaction-kpi strong {
    font-size: clamp(1rem, 1.25vw, 1.32rem);
}

.page-accounting .finance-transaction-compact-flow > div {
    padding: 11px 12px;
    border-radius: 14px;
}

.page-accounting .finance-transaction-filter-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
}

.page-accounting .finance-transaction-filter-panel .form-label {
    color: #334155;
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-accounting .finance-transaction-category-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}

.page-accounting .finance-transaction-category-strip span {
    margin-right: 4px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .finance-transaction-category-strip a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.page-accounting .finance-transaction-category-strip a.active {
    border-color: rgba(20, 184, 166, 0.48);
    color: #0f766e;
    background: rgba(20, 184, 166, 0.11);
}

.page-accounting .finance-transaction-list-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.05);
}

.page-accounting .finance-transaction-table {
    min-width: 1120px;
}

.page-accounting .finance-transaction-table thead th {
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    background: #f1f5f9;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.page-accounting .finance-transaction-table tbody tr {
    transition: background 0.16s ease;
}

.page-accounting .finance-transaction-table tbody tr:hover {
    background: rgba(20, 184, 166, 0.055);
}

.page-accounting .finance-transaction-table td {
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 700;
    vertical-align: middle;
}

html[data-theme="dark"] .page-accounting .finance-transaction-workspace,
html[data-theme="dark"] .page-accounting .finance-transaction-head,
html[data-theme="dark"] .page-accounting .finance-transaction-filter-panel,
html[data-theme="dark"] .page-accounting .finance-transaction-list-panel {
    background: rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .page-accounting .finance-transaction-category-strip a,
html[data-theme="dark"] .page-accounting .finance-transaction-table thead th {
    background: rgba(30, 41, 59, 0.95);
    color: #e2e8f0;
}

html[data-theme="dark"] .page-accounting .finance-transaction-table td {
    color: #f8fafc;
}

.page-accounting .finance-ledger-v3 {
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
        radial-gradient(circle at 0 0, rgba(20, 184, 166, 0.12), transparent 35%);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.page-accounting .finance-ledger-v3-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0f172a, #0f766e 58%, #2563eb);
    color: #ffffff;
}

.page-accounting .finance-ledger-v3-hero h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: clamp(1.3rem, 2vw, 2rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.page-accounting .finance-ledger-v3-hero span {
    display: block;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    font-weight: 700;
}

.page-accounting .finance-ledger-v3-hero-tools {
    display: grid;
    justify-items: end;
    gap: 10px;
    flex: 0 0 auto;
}

.page-accounting .finance-ledger-v3-switch {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
}

.page-accounting .finance-ledger-v3-switch a {
    min-width: 74px;
    padding: 8px 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 950;
    text-align: center;
    text-decoration: none;
}

.page-accounting .finance-ledger-v3-switch a.active {
    color: #0f172a;
    background: #ffffff;
}

.page-accounting .finance-ledger-v3-entry-shortcuts {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.page-accounting .finance-ledger-v3-entry-shortcuts a,
.page-accounting .finance-ledger-v3-entry-shortcuts button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.page-accounting .finance-ledger-v3-entry-shortcuts [data-ledger-new-type="income"] {
    background: linear-gradient(135deg, #10b981, #0f766e);
}

.page-accounting .finance-ledger-v3-entry-shortcuts [data-ledger-new-type="expense"] {
    background: linear-gradient(135deg, #fb7185, #be123c);
}

.page-accounting .finance-ledger-v3-entry-shortcuts .manage {
    color: #0f172a;
    border-color: rgba(14, 165, 233, 0.28);
    background: linear-gradient(135deg, #e0f2fe, #ccfbf1);
    box-shadow: 0 14px 28px rgba(14, 165, 233, 0.14);
}

.page-accounting .finance-ledger-v3-entry-shortcuts .manage:hover {
    color: #0f172a;
}

.page-accounting .finance-ledger-v3-entry-shortcuts a:hover,
.page-accounting .finance-ledger-v3-entry-shortcuts button:hover {
    color: #ffffff;
    transform: translateY(-1px);
    filter: saturate(1.08);
}

.page-accounting .finance-ledger-v3-dashboard {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.page-accounting .finance-ledger-v3-dashboard-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-accounting .finance-ledger-v3-dashboard-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    text-align: left;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.76));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.page-accounting .finance-ledger-v3-dashboard-card span,
.page-accounting .finance-ledger-v3-dashboard-card small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
}

.page-accounting .finance-ledger-v3-dashboard-card strong {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-dashboard-control {
    position: relative;
    overflow: hidden;
}

.page-accounting .finance-ledger-v3-dashboard-control::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -28px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.16);
}

.page-accounting .finance-ledger-v3-dashboard-card.income {
    border-color: rgba(20, 184, 166, 0.22);
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.13), rgba(255, 255, 255, 0.92));
}

.page-accounting .finance-ledger-v3-dashboard-card.expense {
    border-color: rgba(244, 63, 94, 0.18);
    background: linear-gradient(145deg, rgba(244, 63, 94, 0.12), rgba(255, 255, 255, 0.92));
}

.page-accounting .finance-ledger-v3-dashboard-card.warning {
    border-color: rgba(245, 158, 11, 0.24);
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.14), rgba(255, 255, 255, 0.92));
}

.page-accounting .finance-ledger-v3-dashboard-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.page-accounting .finance-ledger-v3-filter {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #ffffff;
}

.page-accounting .finance-ledger-v3-filter label {
    display: grid;
    grid-column: span 2;
    gap: 6px;
    min-width: 0;
}

.page-accounting .finance-ledger-v3-filter .finance-ledger-v3-search {
    grid-column: span 3;
}

.page-accounting .finance-ledger-v3-filter span,
.page-accounting .finance-ledger-v3-entry-form label > span {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-accounting .finance-ledger-v3-filter .form-control,
.page-accounting .finance-ledger-v3-filter .form-select,
.page-accounting .finance-ledger-v3-entry-form .form-control,
.page-accounting .finance-ledger-v3-entry-form .form-select {
    min-height: 42px;
    border-color: rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background-color: #f8fafc;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-actions {
    display: flex;
    grid-column: span 3;
    align-items: end;
    gap: 8px;
}

.page-accounting .finance-ledger-v3-actions .btn {
    min-height: 42px;
    white-space: nowrap;
}

.page-accounting .finance-ledger-v3-chart {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 253, 245, 0.86)),
        radial-gradient(circle at 90% 0, rgba(37, 99, 235, 0.12), transparent 34%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.page-accounting .finance-ledger-v3-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.page-accounting .finance-ledger-v3-chart-head h5 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-chart-head span,
.page-accounting .finance-ledger-v3-legend {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-range {
    display: inline-flex;
    gap: 8px;
    padding: 5px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
}

.page-accounting .finance-ledger-v3-range a {
    min-width: 82px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 950;
    text-align: center;
    text-decoration: none;
}

.page-accounting .finance-ledger-v3-range a.active,
.page-accounting .finance-ledger-v3-range a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
}

.page-accounting .finance-ledger-v3-chart-canvas {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.86), #ffffff);
}

.page-accounting .finance-ledger-v3-chart-canvas svg {
    display: block;
    width: 100%;
    height: 260px;
}

.page-accounting .finance-ledger-v3-grid {
    stroke: rgba(148, 163, 184, 0.24);
    stroke-width: 1;
}

.page-accounting .finance-ledger-v3-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.page-accounting .finance-ledger-v3-line-shadow {
    fill: none;
    stroke: rgba(15, 23, 42, 0.08);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 8;
}

.page-accounting .finance-ledger-v3-line.income {
    stroke: #14b8a6;
}

.page-accounting .finance-ledger-v3-line.expense {
    stroke: #f43f5e;
}

.page-accounting .finance-ledger-v3-dot {
    stroke: #ffffff;
    stroke-width: 2;
}

.page-accounting .finance-ledger-v3-dot.income {
    fill: #14b8a6;
}

.page-accounting .finance-ledger-v3-dot.expense {
    fill: #f43f5e;
}

.page-accounting .finance-ledger-v3-axis-label {
    fill: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
}

.page-accounting .finance-ledger-v3-legend span,
.page-accounting .finance-ledger-v3-legend strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.page-accounting .finance-ledger-v3-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.page-accounting .finance-ledger-v3-legend i.income {
    background: #14b8a6;
}

.page-accounting .finance-ledger-v3-legend i.expense {
    background: #f43f5e;
}

.page-accounting .finance-ledger-v3-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 14px;
}

.page-accounting .finance-ledger-v3-side,
.page-accounting .finance-ledger-v3-list,
.page-accounting .finance-ledger-v3-entry {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: #ffffff;
}

.page-accounting .finance-ledger-v3-side {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
}

.page-accounting .finance-ledger-v3-metric,
.page-accounting .finance-ledger-v3-mini {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: 16px;
    background: #f8fafc;
}

.page-accounting button.finance-ledger-v3-metric {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.page-accounting button.finance-ledger-v3-metric:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
}

.page-accounting .finance-ledger-v3-metric span,
.page-accounting .finance-ledger-v3-mini span,
.page-accounting .finance-ledger-v3-categories > span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .finance-ledger-v3-metric strong,
.page-accounting .finance-ledger-v3-mini strong {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.page-accounting .finance-ledger-v3-metric.income {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), #ffffff);
}

.page-accounting .finance-ledger-v3-metric.expense {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.14), #ffffff);
}

.page-accounting .finance-ledger-v3-metric.balance {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.13), #ffffff);
}

.page-accounting .finance-ledger-v3-category-drawer {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(240, 253, 250, 0.78));
}

.page-accounting .finance-ledger-v3-category-drawer summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    cursor: pointer;
    list-style: none;
}

.page-accounting .finance-ledger-v3-category-drawer summary::-webkit-details-marker {
    display: none;
}

.page-accounting .finance-ledger-v3-category-drawer summary span {
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-category-drawer summary strong {
    padding: 6px 9px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.10);
    font-size: 0.68rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-category-drawer[open] summary {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.page-accounting .finance-ledger-v3-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 11px;
}

.page-accounting .finance-ledger-v3-categories > span {
    flex-basis: 100%;
}

.page-accounting .finance-ledger-v3-categories a,
.page-accounting .finance-ledger-v3-categories button {
    padding: 6px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 900;
    text-decoration: none;
}

.page-accounting .finance-ledger-v3-categories button {
    cursor: pointer;
}

.page-accounting .finance-ledger-v3-categories a.active {
    border-color: rgba(20, 184, 166, 0.44);
    color: #0f766e;
    background: rgba(20, 184, 166, 0.11);
}

.page-accounting .finance-ledger-v3-categories a.income,
.page-accounting .finance-ledger-v3-categories button.income {
    border-color: rgba(16, 185, 129, 0.20);
    color: #047857;
    background: rgba(16, 185, 129, 0.08);
}

.page-accounting .finance-ledger-v3-categories a.expense,
.page-accounting .finance-ledger-v3-categories button.expense {
    border-color: rgba(244, 63, 94, 0.18);
    color: #be123c;
    background: rgba(244, 63, 94, 0.075);
}

.page-accounting .finance-ledger-v3-categories a.income.active,
.page-accounting .finance-ledger-v3-categories a.income:hover,
.page-accounting .finance-ledger-v3-categories button.income:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #10b981, #0f766e);
}

.page-accounting .finance-ledger-v3-categories a.expense.active,
.page-accounting .finance-ledger-v3-categories a.expense:hover,
.page-accounting .finance-ledger-v3-categories button.expense:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #fb7185, #be123c);
}

.page-accounting .finance-ledger-v3-list {
    min-width: 0;
    padding: 14px;
}

.page-accounting .finance-ledger-v3-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.page-accounting .finance-ledger-v3-list-head h5 {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-list-head > span {
    padding: 7px 11px;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.10);
    font-size: 0.78rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-table {
    min-width: 980px;
}

.page-accounting .finance-ledger-v3-table thead th {
    border: 0;
    background: #eef6f7;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .finance-ledger-v3-table td {
    border-color: rgba(15, 23, 42, 0.07);
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 760;
}

.page-accounting .finance-ledger-v3-table td small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-table tr:hover {
    background: rgba(20, 184, 166, 0.055);
}

.page-accounting .finance-ledger-v3-table tbody tr.is-income {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.09), #ffffff 22%);
}

.page-accounting .finance-ledger-v3-table tbody tr.is-expense {
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.075), #ffffff 22%);
}

.page-accounting .finance-ledger-v3-table tbody tr.has-pending-approval {
    box-shadow: inset 4px 0 0 #f59e0b;
}

.page-accounting .finance-ledger-v3-table tbody tr.has-missing-document {
    box-shadow: inset 4px 0 0 #ef4444;
}

.page-accounting .finance-ledger-v3-table tbody tr[data-ledger-transaction] {
    cursor: pointer;
}

.page-accounting .finance-ledger-v3-table tr.is-cancelled {
    opacity: 0.62;
}

.page-accounting .finance-ledger-v3-state,
.page-accounting .finance-ledger-v3-doc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 950;
    text-decoration: none;
}

.page-accounting .finance-ledger-v3-state.income {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.page-accounting .finance-ledger-v3-state.expense {
    color: #be123c;
    background: rgba(244, 63, 94, 0.12);
}

.page-accounting .finance-ledger-v3-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.page-accounting .finance-ledger-v3-badge.pending {
    color: #92400e;
    background: rgba(245, 158, 11, 0.16);
}

.page-accounting .finance-ledger-v3-badge.warning {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
}

.page-accounting .finance-ledger-v3-doc {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.10);
}

.page-accounting .finance-ledger-v3-amount {
    font-weight: 950 !important;
    white-space: nowrap;
}

.page-accounting .finance-ledger-v3-entry {
    margin-top: 14px;
    overflow: hidden;
}

.page-accounting .finance-ledger-v3-entry summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.10), rgba(37, 99, 235, 0.08));
}

.page-accounting .finance-ledger-v3-entry summary::-webkit-details-marker {
    display: none;
}

.page-accounting .finance-ledger-v3-entry summary span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 900;
}

.page-accounting .finance-ledger-v3-entry summary strong {
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-entry-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.page-accounting .finance-ledger-v3-entry-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.page-accounting .finance-ledger-v3-wide,
.page-accounting .finance-ledger-v3-entry-actions {
    grid-column: span 2;
}

.page-accounting .finance-ledger-v3-entry-actions {
    display: flex;
    align-items: end;
    gap: 8px;
}

.page-accounting .finance-ledger-v3-entry-actions .btn {
    min-height: 42px;
}

.page-accounting .finance-ledger-v3-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 24px;
}

.page-accounting .finance-ledger-v3-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(10px);
}

.page-accounting .finance-ledger-v3-modal-card {
    position: relative;
    z-index: 1;
    width: min(1040px, calc(100vw - 38px));
    max-height: min(88vh, 820px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 28px;
    background: linear-gradient(145deg, #ffffff, #effaf8);
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.34);
}

.page-accounting .finance-ledger-v3-report-modal.is-compact .finance-ledger-v3-modal-card {
    width: min(760px, calc(100vw - 38px));
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-modal-card {
    width: min(540px, calc(100vw - 28px));
    border-radius: 22px;
}

.page-accounting .finance-ledger-v3-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #ffffff;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-modal-head {
    align-items: center;
    padding: 13px 15px;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-modal-head .page-kicker,
.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-modal-head span {
    display: none;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-modal-head h5 {
    font-size: 1rem;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    font-size: 1.25rem;
}

.page-accounting .finance-ledger-v3-modal-head h5 {
    margin: 0;
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-modal-head span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-modal-close {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1.5rem;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-modal-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px 0;
}

.page-accounting .finance-ledger-v3-modal-summary div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
}

.page-accounting .finance-ledger-v3-modal-summary span,
.page-accounting .finance-ledger-v3-modal-form label > span,
.page-accounting .finance-ledger-v3-modal-delete label > span,
.page-accounting .finance-ledger-v3-recurring-form label > span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .finance-ledger-v3-modal-summary strong {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-modal-effect {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 10px;
    margin: 12px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.13), rgba(59, 130, 246, 0.08), #ffffff);
}

.page-accounting .finance-ledger-v3-modal-effect.expense {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(245, 158, 11, 0.08), #ffffff);
}

.page-accounting .finance-ledger-v3-modal-effect div:first-child {
    display: grid;
    gap: 4px;
}

.page-accounting .finance-ledger-v3-modal-effect span:first-child,
.page-accounting .finance-ledger-v3-modal-templates > span {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .finance-ledger-v3-modal-effect strong {
    color: #0f172a;
    font-size: 1rem;
}

.page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-content: center;
}

.page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #475569;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(15, 23, 42, 0.07);
    font-size: 0.78rem;
    font-weight: 850;
}

.page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] .positive {
    color: #047857;
    background: rgba(16, 185, 129, 0.13);
}

.page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] .negative {
    color: #be123c;
    background: rgba(244, 63, 94, 0.12);
}

.page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] .warning {
    color: #92400e;
    background: rgba(245, 158, 11, 0.16);
}

.page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] .danger {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.14);
}

.page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] .success {
    color: #047857;
    background: rgba(16, 185, 129, 0.13);
}

.page-accounting .finance-ledger-v3-modal-preview,
.page-accounting .finance-ledger-v3-report-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 12px 12px;
}

.page-accounting .finance-ledger-v3-modal-preview div,
.page-accounting .finance-ledger-v3-report-summary div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
}

.page-accounting .finance-ledger-v3-modal-preview span,
.page-accounting .finance-ledger-v3-report-summary span {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .finance-ledger-v3-modal-preview strong,
.page-accounting .finance-ledger-v3-report-summary strong {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-modal-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 12px 12px;
}

.page-accounting .finance-ledger-v3-modal-insights div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(20, 184, 166, 0.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0.9));
}

.page-accounting .finance-ledger-v3-modal-insights span,
.page-accounting .finance-ledger-v3-modal-insights small {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 900;
}

.page-accounting .finance-ledger-v3-modal-insights strong {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-record-history {
    display: grid;
    gap: 8px;
    margin: 0 18px 12px;
    padding: 12px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 8%, rgba(20, 184, 166, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(239, 246, 255, 0.86));
}

.page-accounting .finance-ledger-v3-record-history[hidden] {
    display: none !important;
}

.page-accounting .finance-ledger-v3-record-history-head,
.page-accounting .finance-ledger-v3-record-history-row {
    display: grid;
    grid-template-columns: 110px minmax(110px, 0.7fr) minmax(0, 1.5fr);
    gap: 9px;
    align-items: center;
}

.page-accounting .finance-ledger-v3-record-history-head span,
.page-accounting .finance-ledger-v3-record-history-row span,
.page-accounting .finance-ledger-v3-record-history-row small {
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-record-history-head strong,
.page-accounting .finance-ledger-v3-record-history-row strong {
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-record-history-row {
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.86);
}

.page-accounting .finance-ledger-v3-report-list {
    display: grid;
    gap: 9px;
    padding: 0 16px 16px;
}

.page-accounting .finance-ledger-v3-report-modal.is-compact .finance-ledger-v3-report-summary {
    display: none;
}

.page-accounting .finance-ledger-v3-report-modal.is-compact .finance-ledger-v3-report-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 14px;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-report-list {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 12px;
}

.page-accounting .finance-ledger-v3-report-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
}

.page-accounting .finance-ledger-v3-report-modal.is-compact .finance-ledger-v3-report-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    min-height: 102px;
    padding: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.72));
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-report-row {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 13px;
    background: #ffffff;
    box-shadow: none;
}

.page-accounting .finance-ledger-v3-report-modal.is-compact .finance-ledger-v3-report-row button {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 6px 11px;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-report-row button {
    display: none;
}

.page-accounting .finance-ledger-v3-report-row div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-accounting .finance-ledger-v3-report-row strong {
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-report-row strong {
    font-size: 0.86rem;
}

.page-accounting .finance-ledger-v3-report-row span,
.page-accounting .finance-ledger-v3-report-row small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 820;
}

.page-accounting .finance-ledger-v3-report-row b {
    flex: 0 0 auto;
    color: #0f766e;
    font-weight: 950;
    white-space: nowrap;
}

.page-accounting .finance-ledger-v3-report-modal.is-minimal .finance-ledger-v3-report-row b {
    font-size: 0.86rem;
}

.page-accounting .finance-ledger-v3-report-row.is-actionable {
    cursor: pointer;
    border-color: rgba(20, 184, 166, 0.22);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(255, 255, 255, 0.9));
}

.page-accounting .finance-ledger-v3-report-row.is-actionable:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}

.page-accounting .finance-ledger-v3-report-row button {
    flex: 0 0 auto;
    border: 1px solid rgba(20, 184, 166, 0.24);
    border-radius: 999px;
    padding: 7px 12px;
    color: #0f766e;
    background: #ffffff;
    font-size: 0.76rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-report-modal.expense .finance-ledger-v3-report-row b {
    color: #be123c;
}

.page-accounting .finance-ledger-v3-category-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 14px;
    padding: 16px;
}

.page-accounting .finance-ledger-v3-category-form,
.page-accounting .finance-ledger-v3-category-list {
    display: grid;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
}

.page-accounting .finance-ledger-v3-category-form label {
    display: grid;
    gap: 6px;
}

.page-accounting .finance-ledger-v3-category-form label > span,
.page-accounting .finance-ledger-v3-category-list-head span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .finance-ledger-v3-category-check {
    display: flex !important;
    align-items: center;
    grid-template-columns: none;
    gap: 8px !important;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(20, 184, 166, 0.08);
}

.page-accounting .finance-ledger-v3-category-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    align-items: center;
    gap: 10px;
}

.page-accounting .finance-ledger-v3-category-list-head div {
    display: grid;
    gap: 3px;
}

.page-accounting .finance-ledger-v3-category-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    max-height: 430px;
    overflow: auto;
    padding-right: 4px;
}

.page-accounting .finance-ledger-v3-category-item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    text-align: left;
    background: #ffffff;
    cursor: pointer;
}

.page-accounting .finance-ledger-v3-category-item.income {
    border-color: rgba(16, 185, 129, 0.20);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.11), #ffffff);
}

.page-accounting .finance-ledger-v3-category-item.expense {
    border-color: rgba(244, 63, 94, 0.18);
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.09), #ffffff);
}

.page-accounting .finance-ledger-v3-category-item span,
.page-accounting .finance-ledger-v3-category-item small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
}

.page-accounting .finance-ledger-v3-category-item strong {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-recurring-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 14px;
    padding: 14px 16px 16px;
}

.page-accounting .finance-ledger-v3-recurring-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
}

.page-accounting .finance-ledger-v3-recurring-form label,
.page-accounting .finance-ledger-v3-recurring-list {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.page-accounting .finance-ledger-v3-recurring-form .form-control,
.page-accounting .finance-ledger-v3-recurring-form .form-select {
    min-height: 42px;
    border-color: rgba(15, 23, 42, 0.12);
    border-radius: 13px;
}

.page-accounting .finance-ledger-v3-recurring-form .finance-ledger-v3-modal-wide,
.page-accounting .finance-ledger-v3-recurring-form .finance-ledger-v3-modal-actions {
    grid-column: 1 / -1;
}

.page-accounting .finance-ledger-v3-recurring-list {
    align-content: start;
    padding: 14px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.10), rgba(59, 130, 246, 0.06), #ffffff);
}

.page-accounting .finance-ledger-v3-recurring-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
}

.page-accounting .finance-ledger-v3-recurring-item div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.page-accounting .finance-ledger-v3-recurring-item strong {
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-recurring-item span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 820;
}

.page-accounting .finance-ledger-v3-recurring-item b {
    flex: 0 0 auto;
    color: #be123c;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-empty {
    padding: 16px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    border-radius: 16px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.72);
    font-weight: 850;
}

.page-accounting .finance-ledger-v3-modal-warning {
    display: grid;
    gap: 4px;
    margin: 0 12px 12px;
    padding: 11px 12px;
    border-radius: 16px;
    color: #92400e;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(255, 255, 255, 0.92));
    border: 1px solid rgba(245, 158, 11, 0.28);
    font-size: 0.82rem;
}

.page-accounting .finance-ledger-v3-modal-warning[hidden] {
    display: none;
}

.page-accounting .finance-ledger-v3-modal-templates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 12px 12px;
}

.page-accounting .finance-ledger-v3-modal-templates button {
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 999px;
    padding: 7px 11px;
    color: #0f766e;
    background: rgba(20, 184, 166, 0.08);
    font-size: 0.78rem;
    font-weight: 900;
}

.page-accounting .finance-ledger-v3-modal-templates button:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
}

.page-accounting .finance-ledger-v3-modal-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.page-accounting .finance-ledger-v3-modal-form label,
.page-accounting .finance-ledger-v3-modal-delete label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.page-accounting .finance-ledger-v3-modal-form .form-control,
.page-accounting .finance-ledger-v3-modal-form .form-select,
.page-accounting .finance-ledger-v3-modal-delete .form-control {
    min-height: 42px;
    border-color: rgba(15, 23, 42, 0.12);
    border-radius: 13px;
    background-color: #ffffff;
    font-weight: 800;
}

.page-accounting .finance-ledger-v3-kalem-field {
    padding: 10px;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(59, 130, 246, 0.06), #ffffff);
}

.page-accounting .finance-ledger-v3-kalem-field > span {
    color: #0f766e !important;
    font-size: 0.74rem !important;
}

.page-accounting .finance-ledger-v3-kalem-field .form-select {
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 10px 24px rgba(20, 184, 166, 0.08);
}

.page-accounting .finance-ledger-v3-smart-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    grid-column: span 3;
    padding: 10px 12px;
    border: 1px solid rgba(14, 165, 233, 0.22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(20, 184, 166, 0.08), #ffffff);
}

.page-accounting .finance-ledger-v3-smart-suggestion[hidden] {
    display: none;
}

.page-accounting .finance-ledger-v3-smart-suggestion span {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 850;
}

.page-accounting .finance-ledger-v3-smart-suggestion strong {
    color: #0f766e;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-smart-suggestion button {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    font-size: 0.76rem;
    font-weight: 950;
}

.page-accounting .finance-ledger-v3-modal-wide,
.page-accounting .finance-ledger-v3-modal-actions {
    grid-column: span 3;
}

.page-accounting .finance-ledger-v3-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.page-accounting .finance-ledger-v3-modal-delete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin: 0 16px 16px;
    padding: 14px;
    border: 1px solid rgba(244, 63, 94, 0.16);
    border-radius: 18px;
    background: rgba(255, 241, 242, 0.86);
}

@media (max-width: 1400px) {
    .page-accounting .finance-ledger-v3-dashboard {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .page-accounting .finance-ledger-v3-filter label,
    .page-accounting .finance-ledger-v3-filter .finance-ledger-v3-search {
        grid-column: span 3;
    }

    .page-accounting .finance-ledger-v3-actions {
        grid-column: span 6;
    }
}

@media (max-width: 1100px) {
    .page-accounting .finance-ledger-v3-dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-accounting .finance-ledger-v3-body {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-ledger-v3-modal-summary,
    .page-accounting .finance-ledger-v3-modal-preview,
    .page-accounting .finance-ledger-v3-modal-insights,
    .page-accounting .finance-ledger-v3-record-history-head,
    .page-accounting .finance-ledger-v3-record-history-row,
    .page-accounting .finance-ledger-v3-report-summary,
    .page-accounting .finance-ledger-v3-modal-effect,
    .page-accounting .finance-ledger-v3-modal-form,
    .page-accounting .finance-ledger-v3-recurring-form,
    .page-accounting .finance-ledger-v3-recurring-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-accounting .finance-ledger-v3-category-layout {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-ledger-v3-modal-wide,
    .page-accounting .finance-ledger-v3-modal-actions {
        grid-column: span 2;
    }

    .page-accounting .finance-ledger-v3-entry-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-accounting .finance-ledger-v3 {
        padding: 12px;
        border-radius: 18px;
    }

    .page-accounting .finance-ledger-v3-dashboard,
    .page-accounting .finance-ledger-v3-dashboard-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-accounting .finance-ledger-v3-hero,
    .page-accounting .finance-ledger-v3-list-head,
    .page-accounting .finance-ledger-v3-chart-head {
        flex-direction: column;
    }

    .page-accounting .finance-ledger-v3-hero-tools,
    .page-accounting .finance-ledger-v3-switch,
    .page-accounting .finance-ledger-v3-entry-shortcuts,
    .page-accounting .finance-ledger-v3-actions {
        width: 100%;
        justify-content: stretch;
        justify-items: stretch;
    }

    .page-accounting .finance-ledger-v3-switch a,
    .page-accounting .finance-ledger-v3-entry-shortcuts a,
    .page-accounting .finance-ledger-v3-entry-shortcuts button,
    .page-accounting .finance-ledger-v3-actions .btn {
        flex: 1 1 0;
    }

    .page-accounting .finance-ledger-v3-range {
        width: 100%;
        overflow-x: auto;
    }

    .page-accounting .finance-ledger-v3-filter label,
    .page-accounting .finance-ledger-v3-filter .finance-ledger-v3-search,
    .page-accounting .finance-ledger-v3-actions,
    .page-accounting .finance-ledger-v3-wide,
    .page-accounting .finance-ledger-v3-entry-actions {
        grid-column: 1 / -1;
    }

    .page-accounting .finance-ledger-v3-entry-form {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-ledger-v3-modal {
        align-items: end;
        padding: 12px;
    }

    .page-accounting .finance-ledger-v3-modal-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
    }

    .page-accounting .finance-ledger-v3-modal-summary,
    .page-accounting .finance-ledger-v3-modal-preview,
    .page-accounting .finance-ledger-v3-modal-insights,
    .page-accounting .finance-ledger-v3-record-history-head,
    .page-accounting .finance-ledger-v3-record-history-row,
    .page-accounting .finance-ledger-v3-report-summary,
    .page-accounting .finance-ledger-v3-modal-effect,
    .page-accounting .finance-ledger-v3-modal-form,
    .page-accounting .finance-ledger-v3-modal-delete,
    .page-accounting .finance-ledger-v3-recurring-form,
    .page-accounting .finance-ledger-v3-recurring-layout {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-ledger-v3-category-list-head,
    .page-accounting .finance-ledger-v3-category-items {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-ledger-v3-modal-wide,
    .page-accounting .finance-ledger-v3-modal-actions,
    .page-accounting .finance-ledger-v3-smart-suggestion {
        grid-column: 1 / -1;
    }

    .page-accounting .finance-ledger-v3-modal-delete {
        margin: 0 12px 12px;
    }

    .page-accounting .finance-ledger-v3-report-modal.is-compact .finance-ledger-v3-report-list {
        grid-template-columns: 1fr;
    }
}

html[data-theme="dark"] .page-accounting .finance-ledger-v3,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-filter,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-side,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-list,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-entry,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-chart {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .page-accounting .finance-ledger-v3-list-head h5,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-chart-head h5,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-metric strong,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-mini strong,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-entry summary strong,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-table td,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-summary strong,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-effect strong,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-recurring-item strong {
    color: #f8fafc;
}

html[data-theme="dark"] .page-accounting .finance-ledger-v3-chart-canvas,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-card,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-summary div,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-effect,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-delete,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-recurring-form,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-recurring-list,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-recurring-item {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.94);
}

html[data-theme="dark"] .page-accounting .finance-ledger-v3-table tbody tr.is-income {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.16), rgba(15, 23, 42, 0.94) 24%);
}

html[data-theme="dark"] .page-accounting .finance-ledger-v3-table tbody tr.is-expense {
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.14), rgba(15, 23, 42, 0.94) 24%);
}

html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-effect [data-ledger-effect-lines] span,
html[data-theme="dark"] .page-accounting .finance-ledger-v3-modal-templates button {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(30, 41, 59, 0.72);
}

.page-accounting #transaction-workspace-legacy[hidden] {
    display: none !important;
}

.page-accounting [hidden] {
    display: none !important;
}
    .page-accounting .finance-ledger-v3-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

/* Kasa / Banka v2: tek ekran, poplu ve taşmasız yeni çalışma alanı. */
.page-accounting .cash-bank-v2 {
    --cb-teal: #14b8a6;
    --cb-blue: #2563eb;
    --cb-green: #16a34a;
    --cb-orange: #f59e0b;
    --cb-red: #ef4444;
    --cb-ink: #122033;
    --cb-muted: #66758a;
    --cb-line: rgba(20, 184, 166, 0.18);
    display: grid;
    gap: 18px;
    max-width: 100%;
    overflow-x: hidden;
}

.page-accounting .cash-bank-v2,
.page-accounting .cash-bank-v2 * {
    box-sizing: border-box;
}

.page-accounting .cash-bank-v2-hero,
.page-accounting .cash-bank-v2-panel {
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%),
        radial-gradient(circle at bottom left, rgba(20, 184, 166, 0.18), transparent 36%),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.page-accounting .cash-bank-v2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px;
}

.page-accounting .cash-bank-v2-hero h2 {
    margin: 0;
    color: var(--cb-ink);
    font-size: clamp(1.55rem, 2vw, 2.15rem);
    letter-spacing: -0.045em;
}

.page-accounting .cash-bank-v2-hero p:not(.page-kicker) {
    max-width: 740px;
    margin: 8px 0 0;
    color: var(--cb-muted);
    font-weight: 700;
}

.page-accounting .cash-bank-v2-mode-tabs,
.page-accounting .cash-bank-v2-actions,
.page-accounting .cash-bank-v2-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.page-accounting .cash-bank-v2-mode-tabs {
    margin-top: 16px;
}

.page-accounting .cash-bank-v2-mode-tabs a,
.page-accounting .cash-bank-v2-btn,
.page-accounting .cash-bank-v2-chip-btn,
.page-accounting .cash-bank-v2-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(20, 184, 166, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #1f344d;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.page-accounting .cash-bank-v2-mode-tabs a {
    padding: 9px 14px;
    font-size: 0.84rem;
}

.page-accounting .cash-bank-v2-mode-tabs a.is-active {
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    color: #fff;
    box-shadow: 0 12px 28px rgba(20, 184, 166, 0.26);
}

.page-accounting .cash-bank-v2-actions {
    justify-content: flex-end;
    max-width: 560px;
}

.page-accounting .cash-bank-v2-btn {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}

.page-accounting .cash-bank-v2-btn:hover,
.page-accounting .cash-bank-v2-chip-btn:hover,
.page-accounting .cash-bank-v2-mini-btn:hover,
.page-accounting .cash-bank-v2-mode-tabs a:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.page-accounting .cash-bank-v2-btn.primary,
.page-accounting .cash-bank-v2-btn.success {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
}

.page-accounting .cash-bank-v2-btn.warning {
    background: linear-gradient(135deg, #f97316, #f59e0b);
    color: #fff;
}

.page-accounting .cash-bank-v2-btn.danger {
    background: linear-gradient(135deg, #e11d48, #f97316);
    color: #fff;
}

.page-accounting .cash-bank-v2-btn.info {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: #fff;
}

.page-accounting .cash-bank-v2-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .cash-bank-v2-metric {
    position: relative;
    min-width: 0;
    min-height: 126px;
    padding: 18px;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    color: #fff;
    text-align: left;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.11);
    cursor: pointer;
}

.page-accounting .cash-bank-v2-metric::after {
    content: "";
    position: absolute;
    inset: auto -28px -42px auto;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.page-accounting .cash-bank-v2-metric.teal { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.page-accounting .cash-bank-v2-metric.blue { background: linear-gradient(135deg, #1d4ed8, #38bdf8); }
.page-accounting .cash-bank-v2-metric.green { background: linear-gradient(135deg, #15803d, #22c55e); }
.page-accounting .cash-bank-v2-metric.orange { background: linear-gradient(135deg, #ea580c, #facc15); }
.page-accounting .cash-bank-v2-metric.red { background: linear-gradient(135deg, #dc2626, #fb7185); }

.page-accounting .cash-bank-v2-metric span,
.page-accounting .cash-bank-v2-metric small {
    display: block;
    position: relative;
    z-index: 1;
}

.page-accounting .cash-bank-v2-metric span {
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
}

.page-accounting .cash-bank-v2-metric strong {
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: #fff;
    font-size: clamp(1.15rem, 1.5vw, 1.55rem);
    letter-spacing: -0.045em;
}

.page-accounting .cash-bank-v2-metric small {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 800;
}

.page-accounting .cash-bank-v2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: start;
}

.page-accounting .cash-bank-v2-main,
.page-accounting .cash-bank-v2-side {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.page-accounting .cash-bank-v2-panel {
    min-width: 0;
    padding: 18px;
}

.page-accounting .cash-bank-v2-panel-head,
.page-accounting .cash-bank-v2-table-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.page-accounting .cash-bank-v2-panel-head h5,
.page-accounting .cash-bank-v2-table-head strong {
    display: block;
    margin: 0;
    color: var(--cb-ink);
    font-size: 1.02rem;
    font-weight: 950;
    letter-spacing: -0.025em;
}

.page-accounting .cash-bank-v2-panel-head span,
.page-accounting .cash-bank-v2-table-head small {
    color: var(--cb-muted);
    font-weight: 800;
}

.page-accounting .cash-bank-v2-account-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.page-accounting .cash-bank-v2-account-filter label {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
    margin: 0;
}

.page-accounting .cash-bank-v2-account-filter label i {
    position: absolute;
    left: 14px;
    top: 50%;
    color: #0f766e;
    transform: translateY(-50%);
}

.page-accounting .cash-bank-v2-account-filter input {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
    padding: 0 14px 0 40px;
    color: var(--cb-ink);
    font-weight: 850;
    outline: none;
}

.page-accounting .cash-bank-v2-account-filter button {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    padding: 10px 14px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 920;
}

.page-accounting .cash-bank-v2-account-filter button.is-active {
    border-color: rgba(20, 184, 166, 0.38);
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    color: #fff;
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.2);
}

.page-accounting .cash-bank-v2-account-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.page-accounting .cash-bank-v2-account-card {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.84);
    padding: 16px;
}

.page-accounting .cash-bank-v2-account-card.bank {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(255, 255, 255, 0.9));
}

.page-accounting .cash-bank-v2-account-card.cash {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(255, 255, 255, 0.9));
}

.page-accounting .cash-bank-v2-account-card.is-alert {
    border-color: rgba(239, 68, 68, 0.34);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(255, 255, 255, 0.92));
}

.page-accounting .cash-bank-v2-account-card span,
.page-accounting .cash-bank-v2-account-card small {
    display: block;
    color: var(--cb-muted);
    font-weight: 850;
}

.page-accounting .cash-bank-v2-account-card strong {
    display: block;
    margin-top: 6px;
    color: var(--cb-ink);
    font-size: 1rem;
}

.page-accounting .cash-bank-v2-account-card b {
    display: block;
    margin-top: 12px;
    color: #0f766e;
    font-size: 1.18rem;
}

.page-accounting .cash-bank-v2-account-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.page-accounting .cash-bank-v2-account-card button,
.page-accounting .cash-bank-v2-account-card a {
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 999px;
    background: #fff;
    padding: 7px 10px;
    color: #1f344d;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.page-accounting .cash-bank-v2-flow {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 170px;
}

.page-accounting .cash-bank-v2-flow-day {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.78);
    padding: 10px 8px;
    cursor: pointer;
}

.page-accounting .cash-bank-v2-flow-day div {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 5px;
    height: 86px;
}

.page-accounting .cash-bank-v2-flow-day i {
    width: 15px;
    min-height: 8px;
    border-radius: 999px 999px 5px 5px;
}

.page-accounting .cash-bank-v2-flow-day i.income { background: linear-gradient(180deg, #22c55e, #14b8a6); }
.page-accounting .cash-bank-v2-flow-day i.expense { background: linear-gradient(180deg, #fb7185, #ef4444); }

.page-accounting .cash-bank-v2-flow-day span,
.page-accounting .cash-bank-v2-flow-day small {
    color: var(--cb-muted);
    font-size: 0.73rem;
    font-weight: 900;
    text-align: center;
}

.page-accounting .cash-bank-v2-flow-summary,
.page-accounting .cash-bank-v2-statement-summary,
.page-accounting .cash-bank-v2-control-grid,
.page-accounting .cash-bank-v2-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.page-accounting .cash-bank-v2-statement-summary,
.page-accounting .cash-bank-v2-control-grid,
.page-accounting .cash-bank-v2-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-accounting .cash-bank-v2-flow-summary span,
.page-accounting .cash-bank-v2-statement-summary div,
.page-accounting .cash-bank-v2-control-grid article,
.page-accounting .cash-bank-v2-detail-grid div,
.page-accounting .cash-bank-v2-import-preview {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    color: var(--cb-muted);
    font-weight: 850;
}

.page-accounting .cash-bank-v2-flow-summary strong,
.page-accounting .cash-bank-v2-statement-summary strong,
.page-accounting .cash-bank-v2-control-grid strong,
.page-accounting .cash-bank-v2-detail-grid strong,
.page-accounting .cash-bank-v2-import-preview strong {
    display: block;
    margin-top: 4px;
    color: var(--cb-ink);
}

.page-accounting .cash-bank-v2-account-flow-card {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(239, 246, 255, 0.8)),
        #fff;
    padding: 14px;
}

.page-accounting .cash-bank-v2-account-flow-card > div:first-child span {
    display: block;
    color: var(--cb-muted);
    font-size: 0.72rem;
    font-weight: 920;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-account-flow-card > div:first-child strong {
    display: block;
    color: var(--cb-ink);
    font-size: 1rem;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-account-flow-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.page-accounting .cash-bank-v2-account-flow-bars article {
    display: grid;
    gap: 7px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    padding: 8px 6px;
}

.page-accounting .cash-bank-v2-account-flow-bars article div {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 4px;
    height: 66px;
}

.page-accounting .cash-bank-v2-account-flow-bars article i {
    width: 12px;
    min-height: 8px;
    border-radius: 999px 999px 5px 5px;
}

.page-accounting .cash-bank-v2-account-flow-bars article i.income { background: linear-gradient(180deg, #22c55e, #14b8a6); }
.page-accounting .cash-bank-v2-account-flow-bars article i.expense { background: linear-gradient(180deg, #fb7185, #ef4444); }

.page-accounting .cash-bank-v2-account-flow-bars article span,
.page-accounting .cash-bank-v2-account-flow-bars article small {
    color: var(--cb-muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-align: center;
}

.page-accounting .cash-bank-v2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.page-accounting .cash-bank-v2-tabs button {
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    padding: 10px 14px;
    color: #244059;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-tabs button.is-active {
    background: linear-gradient(135deg, #14b8a6, #2563eb);
    color: #fff;
    box-shadow: 0 12px 28px rgba(20, 184, 166, 0.24);
}

.page-accounting .cash-bank-v2-pane {
    display: none;
}

.page-accounting .cash-bank-v2-pane.is-active {
    display: block;
}

.page-accounting .cash-bank-v2-table {
    min-width: 760px;
    margin: 0;
}

.page-accounting .cash-bank-v2-table thead th {
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    color: #52647b;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-table tbody td {
    padding: 12px 8px;
    color: #172338;
    font-weight: 760;
    vertical-align: middle;
}

.page-accounting .cash-bank-v2-table tbody td small {
    display: block;
    color: var(--cb-muted);
    font-weight: 760;
}

.page-accounting .cash-bank-v2-state {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-state.success { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.page-accounting .cash-bank-v2-state.danger { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

.page-accounting .cash-bank-v2-chip-btn,
.page-accounting .cash-bank-v2-mini-btn {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 0.78rem;
}

.page-accounting .cash-bank-v2-transfer-list {
    display: grid;
    gap: 10px;
}

.page-accounting .cash-bank-v2-transfer-list article {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(110px, auto) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
}

.page-accounting .cash-bank-v2-transfer-list.compact article {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
}

.page-accounting .cash-bank-v2-transfer-list span,
.page-accounting .cash-bank-v2-transfer-list small {
    color: var(--cb-muted);
    font-weight: 850;
}

.page-accounting .cash-bank-v2-transfer-list strong,
.page-accounting .cash-bank-v2-transfer-list b {
    color: var(--cb-ink);
}

.page-accounting .cash-bank-v2-transfer-list button {
    border: 0;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    padding: 8px 12px;
    color: #0f766e;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-side-stack,
.page-accounting .cash-bank-v2-mini-feed {
    display: grid;
    gap: 10px;
}

.page-accounting .cash-bank-v2-side-stack button,
.page-accounting .cash-bank-v2-side-stack a,
.page-accounting .cash-bank-v2-mini-feed button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    color: var(--cb-muted);
    font-weight: 880;
    text-align: left;
}

.page-accounting .cash-bank-v2-side-stack strong,
.page-accounting .cash-bank-v2-mini-feed strong {
    color: var(--cb-ink);
}

.page-accounting .cash-bank-v2-donut-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    padding: 14px;
    text-align: left;
}

.page-accounting .cash-bank-v2-donut {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 999px;
    background: conic-gradient(#14b8a6 0 var(--cash-bank-v2-cash), #2563eb var(--cash-bank-v2-cash) 100%);
}

.page-accounting .cash-bank-v2-donut b {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 999px;
    background: #fff;
    color: #0f766e;
    font-size: 1rem;
}

.page-accounting .cash-bank-v2-donut-copy strong,
.page-accounting .cash-bank-v2-donut-copy small {
    display: block;
}

.page-accounting .cash-bank-v2-donut-copy strong {
    color: var(--cb-ink);
    font-size: 0.96rem;
}

.page-accounting .cash-bank-v2-donut-copy small {
    margin-top: 6px;
    color: var(--cb-muted);
    font-weight: 840;
}

.page-accounting .cash-bank-v2-import-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.page-accounting .cash-bank-v2-import-strip button {
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(255, 255, 255, 0.84));
    padding: 12px;
    text-align: left;
}

.page-accounting .cash-bank-v2-import-strip span,
.page-accounting .cash-bank-v2-import-strip strong {
    display: block;
}

.page-accounting .cash-bank-v2-import-strip span {
    color: var(--cb-muted);
    font-size: 0.74rem;
    font-weight: 920;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-import-strip strong {
    margin-top: 5px;
    color: var(--cb-ink);
}

.page-accounting .cash-bank-v2-modal-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.page-accounting .cash-bank-v2-modal-split h4 {
    margin: 0 0 8px;
    color: var(--cb-ink);
    font-size: 0.96rem;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-modal-list,
.page-accounting .cash-bank-v2-import-match-list,
.page-accounting .cash-bank-v2-risk-actions {
    display: grid;
    gap: 10px;
}

.page-accounting .cash-bank-v2-modal-list article,
.page-accounting .cash-bank-v2-import-match-list article {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.86);
    padding: 10px;
}

.page-accounting .cash-bank-v2-import-match-list article {
    grid-template-columns: 82px minmax(0, 1fr) minmax(130px, auto) auto;
}

.page-accounting .cash-bank-v2-import-match-list article.is-matched {
    border-color: rgba(22, 163, 74, 0.22);
    background: rgba(240, 253, 244, 0.86);
}

.page-accounting .cash-bank-v2-import-match-list article.is-suggested {
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(239, 246, 255, 0.9);
}

.page-accounting .cash-bank-v2-import-match-list article.is-unmatched {
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(255, 251, 235, 0.9);
}

.page-accounting .cash-bank-v2-modal-list article[role="button"],
.page-accounting .cash-bank-v2-import-match-list article[role="button"] {
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.page-accounting .cash-bank-v2-modal-list article[role="button"]:hover,
.page-accounting .cash-bank-v2-import-match-list article[role="button"]:hover {
    transform: translateY(-1px);
    border-color: rgba(20, 184, 166, 0.32);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.page-accounting .cash-bank-v2-modal-list span,
.page-accounting .cash-bank-v2-modal-list small,
.page-accounting .cash-bank-v2-import-match-list span,
.page-accounting .cash-bank-v2-import-match-list small {
    color: var(--cb-muted);
    font-size: 0.74rem;
    font-weight: 840;
}

.page-accounting .cash-bank-v2-modal-list strong,
.page-accounting .cash-bank-v2-modal-list b,
.page-accounting .cash-bank-v2-import-match-list strong,
.page-accounting .cash-bank-v2-import-match-list b {
    color: var(--cb-ink);
    font-size: 0.85rem;
}

.page-accounting .cash-bank-v2-risk-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.page-accounting .cash-bank-v2-step-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.page-accounting .cash-bank-v2-step-strip span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 16px;
    background: rgba(240, 253, 250, 0.78);
    padding: 10px;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 900;
}

.page-accounting .cash-bank-v2-step-strip b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    font-size: 0.72rem;
}

.page-accounting .cash-bank-v2-risk-summary {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    border: 1px solid rgba(245, 158, 11, 0.26);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(255, 255, 255, 0.86));
    padding: 13px;
}

.page-accounting .cash-bank-v2-risk-summary.safe {
    border-color: rgba(22, 163, 74, 0.24);
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(255, 255, 255, 0.86));
}

.page-accounting .cash-bank-v2-risk-summary.warning {
    border-color: rgba(245, 158, 11, 0.28);
}

.page-accounting .cash-bank-v2-risk-summary span {
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-risk-summary strong {
    color: var(--cb-ink);
    font-size: 1rem;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-risk-summary small {
    color: var(--cb-muted);
    font-weight: 800;
}

.page-accounting .cash-bank-v2-report-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .cash-bank-v2-report-grid a,
.page-accounting .cash-bank-v2-report-grid button {
    display: grid;
    gap: 6px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 34%),
        rgba(255, 255, 255, 0.88);
    padding: 14px;
    color: var(--cb-ink);
    text-align: left;
    text-decoration: none;
}

.page-accounting .cash-bank-v2-report-grid span {
    color: var(--cb-muted);
    font-size: 0.72rem;
    font-weight: 940;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-report-grid strong {
    color: var(--cb-ink);
    font-size: 1rem;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-report-grid small {
    color: var(--cb-muted);
    font-weight: 800;
}

.page-accounting .cash-bank-v2-wizard-grid,
.page-accounting .cash-bank-v2-checklist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .cash-bank-v2-wizard-grid button,
.page-accounting .cash-bank-v2-checklist-grid button {
    display: grid;
    gap: 7px;
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    color: var(--cb-ink);
    text-align: left;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.page-accounting .cash-bank-v2-wizard-grid button i {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #fff;
    font-size: 1.05rem;
}

.page-accounting .cash-bank-v2-wizard-grid button.income i,
.page-accounting .cash-bank-v2-checklist-grid button.safe {
    background: linear-gradient(135deg, #0f766e, #22c55e);
}

.page-accounting .cash-bank-v2-wizard-grid button.expense i,
.page-accounting .cash-bank-v2-checklist-grid button.danger {
    background: linear-gradient(135deg, #e11d48, #f97316);
}

.page-accounting .cash-bank-v2-wizard-grid button.transfer i,
.page-accounting .cash-bank-v2-wizard-grid button.statement i {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

.page-accounting .cash-bank-v2-wizard-grid button.count i,
.page-accounting .cash-bank-v2-wizard-grid button.check i,
.page-accounting .cash-bank-v2-checklist-grid button.warning {
    background: linear-gradient(135deg, #f97316, #facc15);
}

.page-accounting .cash-bank-v2-checklist-grid button.safe,
.page-accounting .cash-bank-v2-checklist-grid button.warning,
.page-accounting .cash-bank-v2-checklist-grid button.danger {
    color: #fff;
}

.page-accounting .cash-bank-v2-checklist-grid button.safe span,
.page-accounting .cash-bank-v2-checklist-grid button.safe strong,
.page-accounting .cash-bank-v2-checklist-grid button.safe small,
.page-accounting .cash-bank-v2-checklist-grid button.warning span,
.page-accounting .cash-bank-v2-checklist-grid button.warning strong,
.page-accounting .cash-bank-v2-checklist-grid button.warning small,
.page-accounting .cash-bank-v2-checklist-grid button.danger span,
.page-accounting .cash-bank-v2-checklist-grid button.danger strong,
.page-accounting .cash-bank-v2-checklist-grid button.danger small {
    color: rgba(255, 255, 255, 0.9);
}

.page-accounting .cash-bank-v2-wizard-grid span,
.page-accounting .cash-bank-v2-checklist-grid span {
    color: var(--cb-muted);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-wizard-grid strong,
.page-accounting .cash-bank-v2-checklist-grid strong {
    color: var(--cb-ink);
    font-size: 1rem;
    font-weight: 950;
}

.page-accounting .cash-bank-v2-wizard-grid small,
.page-accounting .cash-bank-v2-checklist-grid small {
    color: var(--cb-muted);
    font-weight: 800;
}

.page-accounting .cash-bank-v2-checklist-grid button.safe span,
.page-accounting .cash-bank-v2-checklist-grid button.safe strong,
.page-accounting .cash-bank-v2-checklist-grid button.safe small,
.page-accounting .cash-bank-v2-checklist-grid button.warning span,
.page-accounting .cash-bank-v2-checklist-grid button.warning strong,
.page-accounting .cash-bank-v2-checklist-grid button.warning small,
.page-accounting .cash-bank-v2-checklist-grid button.danger span,
.page-accounting .cash-bank-v2-checklist-grid button.danger strong,
.page-accounting .cash-bank-v2-checklist-grid button.danger small {
    color: rgba(255, 255, 255, 0.9);
}

.page-accounting .cash-bank-v2-match-board {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.page-accounting .cash-bank-v2-match-board article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.82), rgba(255, 255, 255, 0.9));
    padding: 12px;
}

.page-accounting .cash-bank-v2-match-side,
.page-accounting .cash-bank-v2-match-score {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    padding: 11px;
}

.page-accounting .cash-bank-v2-match-side span,
.page-accounting .cash-bank-v2-match-side small,
.page-accounting .cash-bank-v2-match-score span {
    color: var(--cb-muted);
    font-size: 0.72rem;
    font-weight: 850;
}

.page-accounting .cash-bank-v2-match-side strong,
.page-accounting .cash-bank-v2-match-side b,
.page-accounting .cash-bank-v2-match-score strong {
    color: var(--cb-ink);
    font-weight: 950;
}

.page-accounting .cash-bank-v2-match-score {
    place-items: center;
    text-align: center;
}

.page-accounting .cash-bank-v2-match-score.safe { background: rgba(240, 253, 244, 0.92); }
.page-accounting .cash-bank-v2-match-score.warning { background: rgba(255, 251, 235, 0.94); }
.page-accounting .cash-bank-v2-match-score.danger { background: rgba(254, 242, 242, 0.94); }

.page-accounting .cash-bank-v2-risk-actions form {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 18px;
    background: rgba(255, 251, 235, 0.68);
    padding: 12px;
}

.page-accounting .cash-bank-v2-risk-actions label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.page-accounting .cash-bank-v2-risk-actions label span {
    color: #7c5b12;
    font-size: 0.72rem;
    font-weight: 940;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-control-grid article[role="button"],
.page-accounting .cash-bank-v2-side-stack a {
    cursor: pointer;
    text-decoration: none;
}

.page-accounting .cash-bank-v2-alert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.page-accounting .cash-bank-v2-alert-grid button {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    text-align: left;
}

.page-accounting .cash-bank-v2-alert-grid button.danger {
    border-color: rgba(239, 68, 68, 0.24);
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.94), rgba(255, 255, 255, 0.82));
}

.page-accounting .cash-bank-v2-alert-grid button.warning {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.84));
}

.page-accounting .cash-bank-v2-alert-grid button.info {
    border-color: rgba(37, 99, 235, 0.22);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.84));
}

.page-accounting .cash-bank-v2-alert-grid span,
.page-accounting .cash-bank-v2-alert-grid strong,
.page-accounting .cash-bank-v2-alert-grid small {
    display: block;
}

.page-accounting .cash-bank-v2-alert-grid span {
    color: var(--cb-muted);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-alert-grid strong {
    margin-top: 5px;
    color: var(--cb-ink);
    font-size: 0.9rem;
}

.page-accounting .cash-bank-v2-alert-grid small {
    margin-top: 4px;
    color: var(--cb-muted);
    font-weight: 820;
}

.page-accounting .cash-bank-v2-permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .cash-bank-v2-permission-card {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 16px;
    background: rgba(240, 253, 250, 0.7);
    padding: 11px 12px;
}

.page-accounting .cash-bank-v2-permission-card > div:first-child {
    display: grid;
    gap: 3px;
}

.page-accounting .cash-bank-v2-permission-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.page-accounting .cash-bank-v2-permission-choice label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    padding: 7px 8px;
    font-size: 0.72rem;
    font-weight: 900;
}

.page-accounting .cash-bank-v2-permission-choice input {
    width: 18px;
    height: 18px;
    accent-color: #14b8a6;
}

.page-accounting .cash-bank-v2-permission-card span,
.page-accounting .cash-bank-v2-permission-card strong,
.page-accounting .cash-bank-v2-permission-card small {
    display: block;
}

.page-accounting .cash-bank-v2-permission-card strong {
    color: var(--cb-ink);
}

.page-accounting .cash-bank-v2-permission-card small {
    color: var(--cb-muted);
    font-weight: 820;
}

.homepage-cash-flow-mini {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    min-height: 112px;
    padding: 12px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.82), rgba(239, 246, 255, 0.72));
}

.homepage-cash-flow-mini button,
.homepage-cash-flow-mini-day {
    display: grid;
    align-content: end;
    justify-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 88px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 900;
}

.homepage-cash-flow-mini i {
    display: block;
    width: 100%;
    max-width: 22px;
    min-height: 10px;
    border-radius: 999px 999px 7px 7px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.homepage-cash-flow-mini i.income {
    background: linear-gradient(180deg, #14b8a6, #22c55e);
}

.homepage-cash-flow-mini i.expense {
    background: linear-gradient(180deg, #f97316, #ef4444);
}

.page-index .rena-home-cash-bank-card {
    text-decoration: none;
}

.page-index .rena-home-cash-bank-card .homepage-cash-flow-mini {
    min-height: 86px;
    margin: 8px 0 5px;
    padding: 9px;
}

.page-index .rena-home-cash-bank-card .homepage-cash-flow-mini-day {
    min-height: 62px;
}

.page-accounting .cash-bank-v2-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
}

.page-accounting .cash-bank-v2-inline-form .form-control {
    min-height: 34px;
    border-radius: 12px;
    font-size: 0.78rem;
}

.page-accounting .cash-bank-v2-inline-cancel {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.82));
    padding: 12px;
}

.page-accounting .cash-bank-v2-inline-cancel label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.page-accounting .cash-bank-v2-inline-cancel label span {
    color: #991b1b;
    font-size: 0.72rem;
    font-weight: 940;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-empty,
.page-accounting .cash-bank-v2-note {
    border: 1px dashed rgba(20, 184, 166, 0.28);
    border-radius: 18px;
    background: rgba(240, 253, 250, 0.7);
    padding: 16px;
    color: var(--cb-muted);
    font-weight: 820;
}

.page-accounting .cash-bank-v2-modal[hidden] {
    display: none !important;
}

.page-accounting .cash-bank-v2-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 22px;
}

.page-accounting .cash-bank-v2-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(10px);
}

.page-accounting .cash-bank-v2-modal-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(820px, calc(100vw - 32px));
    max-height: min(86vh, 820px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.44);
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 36%),
        #fff;
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.34);
}

.page-accounting .cash-bank-v2-modal-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
}

.page-accounting .cash-bank-v2-modal-card header span {
    display: block;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-modal-card header h3 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 1.28rem;
    letter-spacing: -0.035em;
}

.page-accounting .cash-bank-v2-modal-card header button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.page-accounting .cash-bank-v2-modal-body {
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.page-accounting .cash-bank-v2-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .cash-bank-v2-form label {
    display: grid;
    gap: 7px;
    margin: 0;
    color: #31445f;
    font-weight: 900;
}

.page-accounting .cash-bank-v2-form label.wide,
.page-accounting .cash-bank-v2-modal-actions,
.page-accounting .cash-bank-v2-import-preview.wide {
    grid-column: 1 / -1;
}

.page-accounting .cash-bank-v2-form label > span {
    color: #52647b;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-accounting .cash-bank-v2-form .form-control,
.page-accounting .cash-bank-v2-form .form-select {
    min-height: 44px;
    border-color: rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.86);
    font-weight: 820;
}

.page-accounting .cash-bank-v2-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

body.cash-bank-v2-modal-open {
    overflow: hidden;
}

@media (max-width: 1180px) {
    .page-accounting .cash-bank-v2-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-accounting .cash-bank-v2-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .page-accounting .cash-bank-v2-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .page-accounting .cash-bank-v2-actions {
        justify-content: flex-start;
    }

    .page-accounting .cash-bank-v2-metrics,
    .page-accounting .cash-bank-v2-flow,
    .page-accounting .cash-bank-v2-flow-summary,
    .page-accounting .cash-bank-v2-statement-summary,
    .page-accounting .cash-bank-v2-control-grid,
    .page-accounting .cash-bank-v2-detail-grid,
    .page-accounting .cash-bank-v2-import-strip,
    .page-accounting .cash-bank-v2-modal-split,
    .page-accounting .cash-bank-v2-alert-grid,
    .page-accounting .cash-bank-v2-permission-grid,
    .page-accounting .cash-bank-v2-risk-actions,
    .page-accounting .cash-bank-v2-account-flow-bars,
    .page-accounting .cash-bank-v2-step-strip,
    .page-accounting .cash-bank-v2-report-grid,
    .page-accounting .cash-bank-v2-wizard-grid,
    .page-accounting .cash-bank-v2-checklist-grid,
    .page-accounting .cash-bank-v2-form {
        grid-template-columns: 1fr;
    }

    .page-accounting .cash-bank-v2-donut-card,
    .page-accounting .cash-bank-v2-modal-list article,
    .page-accounting .cash-bank-v2-import-match-list article,
    .page-accounting .cash-bank-v2-match-board article {
        grid-template-columns: 1fr;
    }

    .page-accounting .cash-bank-v2-transfer-list article,
    .page-accounting .cash-bank-v2-transfer-list.compact article {
        grid-template-columns: 1fr;
    }

    .page-accounting .cash-bank-v2-inline-form {
        grid-template-columns: 1fr;
    }

    .page-accounting .cash-bank-v2-modal {
        padding: 10px;
        align-items: center;
    }

    .page-accounting .cash-bank-v2-modal-card {
        width: 100%;
        max-height: 90vh;
        border-radius: 24px;
    }
}

html[data-theme="dark"] .page-accounting .cash-bank-v2-hero,
html[data-theme="dark"] .page-accounting .cash-bank-v2-panel,
html[data-theme="dark"] .page-accounting .cash-bank-v2-account-card,
html[data-theme="dark"] .page-accounting .cash-bank-v2-account-filter input,
html[data-theme="dark"] .page-accounting .cash-bank-v2-account-filter button,
html[data-theme="dark"] .page-accounting .cash-bank-v2-account-flow-card,
html[data-theme="dark"] .page-accounting .cash-bank-v2-account-flow-bars article,
html[data-theme="dark"] .page-accounting .cash-bank-v2-flow-day,
html[data-theme="dark"] .page-accounting .cash-bank-v2-flow-summary span,
html[data-theme="dark"] .page-accounting .cash-bank-v2-statement-summary div,
html[data-theme="dark"] .page-accounting .cash-bank-v2-control-grid article,
html[data-theme="dark"] .page-accounting .cash-bank-v2-detail-grid div,
html[data-theme="dark"] .page-accounting .cash-bank-v2-side-stack button,
html[data-theme="dark"] .page-accounting .cash-bank-v2-side-stack a,
html[data-theme="dark"] .page-accounting .cash-bank-v2-mini-feed button,
html[data-theme="dark"] .page-accounting .cash-bank-v2-transfer-list article,
html[data-theme="dark"] .page-accounting .cash-bank-v2-alert-grid button,
html[data-theme="dark"] .page-accounting .cash-bank-v2-risk-summary,
html[data-theme="dark"] .page-accounting .cash-bank-v2-step-strip span,
html[data-theme="dark"] .page-accounting .cash-bank-v2-report-grid a,
html[data-theme="dark"] .page-accounting .cash-bank-v2-report-grid button,
html[data-theme="dark"] .page-accounting .cash-bank-v2-wizard-grid button,
html[data-theme="dark"] .page-accounting .cash-bank-v2-checklist-grid button,
html[data-theme="dark"] .page-accounting .cash-bank-v2-match-board article,
html[data-theme="dark"] .page-accounting .cash-bank-v2-match-side,
html[data-theme="dark"] .page-accounting .cash-bank-v2-inline-cancel,
html[data-theme="dark"] .page-accounting .cash-bank-v2-permission-grid label {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.9);
}

html[data-theme="dark"] .page-accounting .cash-bank-v2-account-filter input {
    color: #f8fafc;
}

html[data-theme="dark"] .page-accounting .cash-bank-v2-account-filter button.is-active {
    border-color: rgba(45, 212, 191, 0.42);
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
}

html[data-theme="dark"] .page-accounting .cash-bank-v2 h2,
html[data-theme="dark"] .page-accounting .cash-bank-v2 h5,
html[data-theme="dark"] .page-accounting .cash-bank-v2 strong,
html[data-theme="dark"] .page-accounting .cash-bank-v2 b,
html[data-theme="dark"] .page-accounting .cash-bank-v2-table tbody td {
    color: #f8fafc;
}

/* Fatura Merkezi v2 */
.page-accounting .invoice-v2-shell {
    position: relative;
    overflow: hidden;
    display: grid !important;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(45, 212, 191, 0.22), transparent 28%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.page-accounting .invoice-v2-hero,
.page-accounting .invoice-v2-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.page-accounting .invoice-v2-hero h3 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: clamp(1.25rem, 1.6vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.page-accounting .invoice-v2-hero span,
.page-accounting .invoice-v2-card-head p,
.page-accounting .invoice-v2-card-head span,
.page-accounting .invoice-v2-row small,
.page-accounting .invoice-v2-row-meta span,
.page-accounting .invoice-v2-empty {
    color: #64748b;
}

.page-accounting .invoice-v2-actions,
.page-accounting .invoice-v2-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.page-accounting .invoice-v2-action,
.page-accounting .invoice-v2-head-actions button,
.page-accounting .invoice-v2-card-head.compact button,
.page-accounting .invoice-v2-detail-actions a,
.page-accounting .invoice-v2-detail-actions button {
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 14px;
    background: #fff;
    color: #0f172a;
    font-weight: 800;
    padding: 10px 13px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    text-decoration: none;
}

.page-accounting .invoice-v2-action.primary,
.page-accounting .invoice-v2-form-footer button,
.page-accounting .invoice-v2-inline-payment button {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
}

.page-accounting .invoice-v2-action.success {
    border-color: transparent;
    background: linear-gradient(135deg, #10b981, #14b8a6);
    color: #fff;
}

.page-accounting .invoice-v2-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .invoice-v2-metric {
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.07);
}

.page-accounting .invoice-v2-metric small {
    display: block;
    color: #64748b;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.page-accounting .invoice-v2-metric strong {
    display: block;
    margin: 5px 0;
    color: #0f172a;
    font-size: 1.25rem;
    letter-spacing: -0.04em;
}

.page-accounting .invoice-v2-metric span {
    color: #64748b;
    font-size: 0.86rem;
}

.page-accounting .invoice-v2-metric.income { box-shadow: inset 4px 0 0 #10b981, 0 18px 38px rgba(15, 23, 42, 0.07); }
.page-accounting .invoice-v2-metric.expense { box-shadow: inset 4px 0 0 #f97316, 0 18px 38px rgba(15, 23, 42, 0.07); }
.page-accounting .invoice-v2-metric.warning { box-shadow: inset 4px 0 0 #ef4444, 0 18px 38px rgba(15, 23, 42, 0.07); }
.page-accounting .invoice-v2-metric.blue { box-shadow: inset 4px 0 0 #2563eb, 0 18px 38px rgba(15, 23, 42, 0.07); }

.page-accounting .invoice-v2-status-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 9px;
}

.page-accounting .invoice-v2-status-tile {
    min-height: 84px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    text-align: left;
    padding: 12px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
}

.page-accounting .invoice-v2-status-tile span,
.page-accounting .invoice-v2-status-tile small {
    display: block;
    color: #64748b;
    font-weight: 850;
    font-size: 0.72rem;
}

.page-accounting .invoice-v2-status-tile strong {
    display: block;
    margin: 4px 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.page-accounting .invoice-v2-status-tile.green { box-shadow: inset 0 4px 0 #10b981, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.orange { box-shadow: inset 0 4px 0 #f97316, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.red { box-shadow: inset 0 4px 0 #ef4444, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.blue { box-shadow: inset 0 4px 0 #2563eb, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.purple { box-shadow: inset 0 4px 0 #8b5cf6, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.amber { box-shadow: inset 0 4px 0 #f59e0b, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.slate { box-shadow: inset 0 4px 0 #64748b, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.teal { box-shadow: inset 0 4px 0 #14b8a6, 0 14px 30px rgba(15, 23, 42, 0.055); }
.page-accounting .invoice-v2-status-tile.cyan { box-shadow: inset 0 4px 0 #06b6d4, 0 14px 30px rgba(15, 23, 42, 0.055); }

.page-accounting .invoice-v2-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.85fr);
    gap: 14px;
    align-items: start;
}

.page-accounting .invoice-v2-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.07);
    padding: 14px;
}

.page-accounting .invoice-v2-card-head h5 {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.page-accounting .invoice-v2-toolbar form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.page-accounting .invoice-v2-filter-strip {
    display: grid;
    grid-template-columns: repeat(6, auto) minmax(180px, 1fr);
    gap: 8px;
    align-items: center;
    margin: 0 0 12px;
}

.page-accounting .invoice-v2-filter-strip button,
.page-accounting .invoice-v2-filter-strip input {
    min-height: 38px;
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #0f172a;
    font-weight: 900;
    padding: 8px 12px;
}

.page-accounting .invoice-v2-filter-strip button.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
}

.page-accounting .invoice-v2-toolbar input,
.page-accounting .invoice-v2-toolbar select,
.page-accounting .invoice-v2-form input,
.page-accounting .invoice-v2-form select,
.page-accounting .invoice-v2-form textarea,
.page-accounting .invoice-v2-inline-payment input,
.page-accounting .invoice-v2-inline-payment select,
.page-accounting .invoice-v2-inline-payment textarea,
.page-accounting .invoice-v2-plan-form input,
.page-accounting .invoice-v2-plan-form select,
.page-accounting .invoice-v2-plan-form textarea,
.page-accounting .invoice-v2-doc-form input,
.page-accounting .invoice-v2-doc-form select,
.page-accounting .invoice-v2-doc-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
    color: #0f172a;
    padding: 9px 11px;
    font-weight: 700;
}

.page-accounting .invoice-v2-toolbar button {
    border: 0;
    border-radius: 14px;
    background: #0f766e;
    color: #fff;
    font-weight: 900;
}

.page-accounting .invoice-v2-list,
.page-accounting .invoice-v2-mini-flow,
.page-accounting .invoice-v2-payment-flow {
    display: grid;
    gap: 9px;
}

.page-accounting .invoice-v2-row {
    display: grid;
    grid-template-columns: 28px minmax(220px, 1.1fr) minmax(170px, 0.8fr) minmax(120px, 0.55fr) auto minmax(170px, auto);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff, rgba(248, 250, 252, 0.9));
    padding: 12px;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.page-accounting .invoice-v2-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}

.page-accounting .invoice-v2-select input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.page-accounting .invoice-v2-select span {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(20, 184, 166, 0.38);
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 4px #fff;
}

.page-accounting .invoice-v2-select input:checked + span {
    border-color: #0f766e;
    background: linear-gradient(135deg, #14b8a6, #2563eb);
}

.page-accounting .invoice-v2-row:hover,
.page-accounting .invoice-v2-row:focus {
    border-color: rgba(20, 184, 166, 0.38);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.page-accounting .invoice-v2-row[hidden] {
    display: none !important;
}

.page-accounting .invoice-v2-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.page-accounting .invoice-v2-type,
.page-accounting .invoice-v2-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
}

.page-accounting .invoice-v2-type.income,
.page-accounting .invoice-v2-status.paid {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.page-accounting .invoice-v2-type.expense,
.page-accounting .invoice-v2-status.due {
    background: rgba(249, 115, 22, 0.12);
    color: #c2410c;
}

.page-accounting .invoice-v2-status.overdue {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.page-accounting .invoice-v2-status.open {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.page-accounting .invoice-v2-row-main strong,
.page-accounting .invoice-v2-row-meta strong {
    display: block;
    color: #0f172a;
}

.page-accounting .invoice-v2-row-main small {
    display: block;
    overflow: hidden;
    max-width: 260px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-accounting .invoice-v2-row-progress div {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.page-accounting .invoice-v2-row-progress div span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #2563eb);
}

.page-accounting .invoice-v2-row-progress small {
    display: block;
    margin-top: 5px;
}

.page-accounting .invoice-v2-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.page-accounting .invoice-v2-row-actions button,
.page-accounting .invoice-v2-row-actions a {
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 950;
    padding: 7px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.page-accounting .invoice-v2-mini-flow button,
.page-accounting .invoice-v2-payment-flow button,
.page-accounting .invoice-v2-modal-list button,
.page-accounting .invoice-v2-modal-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.92);
    padding: 10px;
    text-align: left;
    text-decoration: none;
}

.page-accounting .invoice-v2-mini-flow button span,
.page-accounting .invoice-v2-payment-flow button span,
.page-accounting .invoice-v2-modal-list button span,
.page-accounting .invoice-v2-modal-list a span {
    color: #0f172a;
    font-weight: 900;
}

.page-accounting .invoice-v2-mini-flow button small,
.page-accounting .invoice-v2-payment-flow button small,
.page-accounting .invoice-v2-modal-list button small,
.page-accounting .invoice-v2-modal-list a small {
    display: block;
    color: #64748b;
    font-weight: 700;
}

.page-accounting .invoice-v2-mini-flow button strong,
.page-accounting .invoice-v2-payment-flow button strong,
.page-accounting .invoice-v2-modal-list button strong,
.page-accounting .invoice-v2-modal-list a strong {
    color: #0f766e;
}

.page-accounting .invoice-v2-mini-flow button em,
.page-accounting .invoice-v2-payment-flow button em,
.page-accounting .invoice-v2-modal-list button em,
.page-accounting .invoice-v2-modal-list a em {
    color: #64748b;
    font-style: normal;
    font-weight: 900;
}

.page-accounting .invoice-v2-empty {
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.72);
    padding: 14px;
}

.page-accounting .invoice-v2-empty.small {
    padding: 10px;
    font-size: 0.86rem;
}

.page-accounting .invoice-v2-modal[hidden] {
    display: none !important;
}

.page-accounting .invoice-v2-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.page-accounting .invoice-v2-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.54);
    backdrop-filter: blur(8px);
}

.page-accounting .invoice-v2-modal-panel {
    position: relative;
    z-index: 1;
    width: min(980px, calc(100vw - 28px));
    max-height: min(86vh, 820px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.32);
}

.page-accounting .invoice-v2-modal-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-accounting .invoice-v2-modal-head span {
    color: #0f766e;
    font-weight: 900;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-accounting .invoice-v2-modal-head h3 {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 950;
}

.page-accounting .invoice-v2-back,
.page-accounting .invoice-v2-close {
    border: 0;
    border-radius: 14px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
    font-weight: 900;
    min-height: 40px;
    padding: 0 12px;
}

.page-accounting .invoice-v2-close {
    width: 40px;
    padding: 0;
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
}

.page-accounting .invoice-v2-modal-body {
    overflow: auto;
    padding: 16px;
}

.page-accounting .invoice-v2-form,
.page-accounting .invoice-v2-inline-payment,
.page-accounting .invoice-v2-plan-form,
.page-accounting .invoice-v2-doc-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.page-accounting .invoice-v2-form label,
.page-accounting .invoice-v2-inline-payment label,
.page-accounting .invoice-v2-plan-form label,
.page-accounting .invoice-v2-doc-form label {
    color: #334155;
    font-weight: 900;
    font-size: 0.82rem;
}

.page-accounting .invoice-v2-form label small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 750;
}

.page-accounting .invoice-v2-form .wide,
.page-accounting .invoice-v2-inline-payment .wide,
.page-accounting .invoice-v2-plan-form .wide,
.page-accounting .invoice-v2-doc-form .wide,
.page-accounting .invoice-v2-form-footer,
.page-accounting .invoice-v2-inline-payment button,
.page-accounting .invoice-v2-plan-form button,
.page-accounting .invoice-v2-doc-form button {
    grid-column: 1 / -1;
}

.page-accounting .invoice-v2-form-footer button,
.page-accounting .invoice-v2-inline-payment button,
.page-accounting .invoice-v2-plan-form button,
.page-accounting .invoice-v2-doc-form button {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    font-weight: 950;
}

.page-accounting .invoice-v2-detail {
    display: grid;
    gap: 14px;
}

.page-accounting .invoice-v2-detail-summary,
.page-accounting .invoice-v2-detail-grid,
.page-accounting .invoice-v2-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .invoice-v2-detail-summary div,
.page-accounting .invoice-v2-detail-grid div,
.page-accounting .invoice-v2-plan-grid div,
.page-accounting .invoice-v2-history,
.page-accounting .invoice-v2-docs {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.88);
    padding: 12px;
}

.page-accounting .invoice-v2-detail-summary span,
.page-accounting .invoice-v2-detail-grid span,
.page-accounting .invoice-v2-plan-grid span,
.page-accounting .invoice-v2-history span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.page-accounting .invoice-v2-detail-summary strong,
.page-accounting .invoice-v2-detail-grid strong,
.page-accounting .invoice-v2-plan-grid strong,
.page-accounting .invoice-v2-history strong {
    color: #0f172a;
}

.page-accounting .invoice-v2-history {
    display: grid;
    gap: 8px;
}

.page-accounting .invoice-v2-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-accounting .invoice-v2-plan-grid small {
    display: block;
    color: #64748b;
    font-weight: 750;
    margin-top: 4px;
}

.page-accounting .invoice-v2-flow-line {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.page-accounting .invoice-v2-flow-line div {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
    padding: 11px;
}

.page-accounting .invoice-v2-flow-line i {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    margin-right: 7px;
    background: #94a3b8;
}

.page-accounting .invoice-v2-flow-line span,
.page-accounting .invoice-v2-plan-head span,
.page-accounting .invoice-v2-plan-list span {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 850;
}

.page-accounting .invoice-v2-flow-line strong,
.page-accounting .invoice-v2-plan-head strong,
.page-accounting .invoice-v2-plan-list strong {
    display: block;
    margin-top: 4px;
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .invoice-v2-flow-line .is-done { background: rgba(240, 253, 250, 0.86); }
.page-accounting .invoice-v2-flow-line .is-done i { background: #14b8a6; box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.12); }
.page-accounting .invoice-v2-flow-line .is-current { background: rgba(239, 246, 255, 0.9); }
.page-accounting .invoice-v2-flow-line .is-current i { background: #2563eb; box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.12); }
.page-accounting .invoice-v2-flow-line .is-risk { background: rgba(254, 242, 242, 0.9); }
.page-accounting .invoice-v2-flow-line .is-risk i { background: #ef4444; box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.12); }

.page-accounting .invoice-v2-plan-panel {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(240,253,250,0.76));
    padding: 12px;
}

.page-accounting .invoice-v2-plan-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.page-accounting .invoice-v2-plan-head small {
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.12);
    color: #0f766e;
    font-weight: 950;
    padding: 6px 10px;
}

.page-accounting .invoice-v2-plan-list {
    display: grid;
    gap: 8px;
}

.page-accounting .invoice-v2-plan-list > div:not(.invoice-v2-empty) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.82);
    padding: 10px;
}

.page-accounting .invoice-v2-plan-list small {
    display: block;
    color: #64748b;
    font-weight: 750;
}

.page-accounting .invoice-v2-plan-list em {
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-style: normal;
    font-weight: 950;
    padding: 6px 9px;
}

.page-accounting .invoice-v2-plan-form {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 12px;
}

.page-accounting .invoice-v2-item-editor,
.page-accounting .invoice-v2-items-panel {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239,246,255,0.84), rgba(240,253,250,0.72));
    padding: 12px;
}

.page-accounting .invoice-v2-item-editor-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.page-accounting .invoice-v2-item-editor-head strong {
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .invoice-v2-item-editor-head span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.page-accounting .invoice-v2-item-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) repeat(5, minmax(74px, 0.7fr));
    gap: 7px;
}

.page-accounting .invoice-v2-item-row input {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    background: rgba(255,255,255,0.86);
    padding: 8px 9px;
    color: #0f172a;
    font-weight: 800;
}

.page-accounting .invoice-v2-items-table {
    display: grid;
    gap: 8px;
}

.page-accounting .invoice-v2-items-table > div:not(.invoice-v2-empty),
.page-accounting .invoice-v2-match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.84);
    padding: 10px;
}

.page-accounting .invoice-v2-items-table span,
.page-accounting .invoice-v2-items-table small {
    display: block;
}

.page-accounting .invoice-v2-items-table span {
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .invoice-v2-items-table small {
    color: #64748b;
    font-weight: 750;
}

.page-accounting .invoice-v2-items-table strong {
    color: #0f766e;
    font-weight: 950;
}

.page-accounting .invoice-v2-items-table em {
    justify-self: end;
    grid-column: 1 / -1;
    color: #64748b;
    font-style: normal;
    font-weight: 850;
}

.page-accounting .invoice-v2-aging-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .invoice-v2-aging-board div {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    padding: 12px;
}

.page-accounting .invoice-v2-aging-board span,
.page-accounting .invoice-v2-aging-board small {
    display: block;
    color: #64748b;
    font-weight: 850;
    font-size: 0.78rem;
}

.page-accounting .invoice-v2-aging-board strong {
    display: block;
    margin: 5px 0;
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .invoice-v2-aging-board .is-risk {
    box-shadow: inset 0 4px 0 #ef4444;
}

.page-accounting .invoice-v2-aging-board .is-watch {
    box-shadow: inset 0 4px 0 #f59e0b;
}

.page-accounting .invoice-v2-aging-board .is-safe {
    box-shadow: inset 0 4px 0 #14b8a6;
}

.page-accounting .invoice-v2-match-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.page-accounting .invoice-v2-match-form button {
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    font-weight: 950;
    padding: 0 16px;
}

.page-accounting .invoice-v2-docs {
    display: grid;
    gap: 12px;
}

.page-accounting .invoice-v2-docs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-accounting .invoice-v2-docs-head span,
.page-accounting .invoice-v2-docs-head small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 850;
}

.page-accounting .invoice-v2-doc-list {
    display: grid;
    gap: 8px;
}

.page-accounting .invoice-v2-doc-list a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 14px;
    background: rgba(240, 253, 250, 0.72);
    padding: 10px;
    color: #0f172a;
    text-decoration: none;
}

.page-accounting .invoice-v2-doc-list a span,
.page-accounting .invoice-v2-doc-list a small {
    display: block;
}

.page-accounting .invoice-v2-doc-list a small {
    color: #64748b;
    font-weight: 750;
}

.page-accounting .invoice-v2-doc-list a em {
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-style: normal;
    font-weight: 900;
    padding: 6px 9px;
}

.page-accounting .invoice-v2-bulk-panel {
    display: grid;
    gap: 12px;
}

.page-accounting .invoice-v2-bulk-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .invoice-v2-bulk-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.page-accounting .invoice-v2-bulk-actions a,
.page-accounting .invoice-v2-bulk-actions button,
.page-accounting .invoice-v2-bulk-form button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #fff;
    font-weight: 950;
    text-decoration: none;
}

.page-accounting .invoice-v2-bulk-actions .is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.page-accounting .invoice-v2-bulk-help {
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 16px;
    background: rgba(239, 246, 255, 0.74);
    padding: 12px;
}

.page-accounting .invoice-v2-history h6 {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .invoice-v2-timeline {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(20, 184, 166, 0.16);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.88), rgba(239, 246, 255, 0.88));
    padding: 12px;
}

.page-accounting .invoice-v2-timeline h6 {
    margin: 0 0 2px;
    color: #0f172a;
    font-weight: 950;
}

.page-accounting .invoice-v2-timeline div {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.page-accounting .invoice-v2-timeline i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #14b8a6;
    box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.12);
}

.page-accounting .invoice-v2-timeline span {
    color: #334155;
    font-weight: 850;
}

.page-accounting .invoice-v2-timeline strong {
    color: #0f172a;
    font-size: 0.88rem;
}

.page-accounting .invoice-v2-risk-note {
    border: 1px solid rgba(239, 68, 68, 0.18);
    border-radius: 18px;
    background: rgba(254, 242, 242, 0.82);
    padding: 12px;
}

.page-accounting .invoice-v2-risk-note strong,
.page-accounting .invoice-v2-risk-note span {
    display: block;
}

.page-accounting .invoice-v2-risk-note span {
    color: #7f1d1d;
    margin-top: 4px;
}

.page-accounting .invoice-v2-history > div:not(.invoice-v2-empty) {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.page-accounting .invoice-v2-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

html[data-theme="dark"] .page-accounting .invoice-v2-shell,
html[data-theme="dark"] .page-accounting .invoice-v2-card,
html[data-theme="dark"] .page-accounting .invoice-v2-modal-panel {
    border-color: rgba(148, 163, 184, 0.14);
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.14), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
}

html[data-theme="dark"] .page-accounting .invoice-v2-hero h3,
html[data-theme="dark"] .page-accounting .invoice-v2-card-head h5,
html[data-theme="dark"] .page-accounting .invoice-v2-row-main strong,
html[data-theme="dark"] .page-accounting .invoice-v2-row-meta strong,
html[data-theme="dark"] .page-accounting .invoice-v2-modal-head h3,
html[data-theme="dark"] .page-accounting .invoice-v2-detail-summary strong,
html[data-theme="dark"] .page-accounting .invoice-v2-detail-grid strong,
html[data-theme="dark"] .page-accounting .invoice-v2-history strong,
html[data-theme="dark"] .page-accounting .invoice-v2-history h6 {
    color: #f8fafc;
}

html[data-theme="dark"] .page-accounting .invoice-v2-metric,
html[data-theme="dark"] .page-accounting .invoice-v2-status-tile,
html[data-theme="dark"] .page-accounting .invoice-v2-row,
html[data-theme="dark"] .page-accounting .invoice-v2-mini-flow button,
html[data-theme="dark"] .page-accounting .invoice-v2-payment-flow button,
html[data-theme="dark"] .page-accounting .invoice-v2-modal-list button,
html[data-theme="dark"] .page-accounting .invoice-v2-modal-list a,
html[data-theme="dark"] .page-accounting .invoice-v2-detail-summary div,
html[data-theme="dark"] .page-accounting .invoice-v2-detail-grid div,
html[data-theme="dark"] .page-accounting .invoice-v2-plan-grid div,
html[data-theme="dark"] .page-accounting .invoice-v2-history,
html[data-theme="dark"] .page-accounting .invoice-v2-docs,
html[data-theme="dark"] .page-accounting .invoice-v2-empty {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.72);
}

html[data-theme="dark"] .page-accounting .invoice-v2-toolbar input,
html[data-theme="dark"] .page-accounting .invoice-v2-toolbar select,
html[data-theme="dark"] .page-accounting .invoice-v2-filter-strip input,
html[data-theme="dark"] .page-accounting .invoice-v2-filter-strip button,
html[data-theme="dark"] .page-accounting .invoice-v2-form input,
html[data-theme="dark"] .page-accounting .invoice-v2-form select,
html[data-theme="dark"] .page-accounting .invoice-v2-form textarea,
html[data-theme="dark"] .page-accounting .invoice-v2-inline-payment input,
html[data-theme="dark"] .page-accounting .invoice-v2-inline-payment select,
html[data-theme="dark"] .page-accounting .invoice-v2-inline-payment textarea,
html[data-theme="dark"] .page-accounting .invoice-v2-plan-form input,
html[data-theme="dark"] .page-accounting .invoice-v2-plan-form select,
html[data-theme="dark"] .page-accounting .invoice-v2-plan-form textarea,
html[data-theme="dark"] .page-accounting .invoice-v2-doc-form input,
html[data-theme="dark"] .page-accounting .invoice-v2-doc-form select,
html[data-theme="dark"] .page-accounting .invoice-v2-doc-form textarea {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.88);
    color: #f8fafc;
}

@media (max-width: 1180px) {
    .page-accounting .invoice-v2-metrics,
    .page-accounting .invoice-v2-status-board,
    .page-accounting .invoice-v2-detail-summary,
    .page-accounting .invoice-v2-detail-grid,
    .page-accounting .invoice-v2-plan-grid,
    .page-accounting .invoice-v2-flow-line,
    .page-accounting .invoice-v2-aging-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-accounting .invoice-v2-item-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-accounting .invoice-v2-main-grid {
        grid-template-columns: 1fr;
    }

    .page-accounting .invoice-v2-row {
        grid-template-columns: 28px minmax(0, 1fr) minmax(150px, 0.7fr);
    }

    .page-accounting .invoice-v2-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .page-accounting .invoice-v2-filter-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .page-accounting .invoice-v2-shell {
        padding: 12px;
        border-radius: 18px;
    }

    .page-accounting .invoice-v2-hero,
    .page-accounting .invoice-v2-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    .page-accounting .invoice-v2-actions,
    .page-accounting .invoice-v2-head-actions {
        justify-content: stretch;
    }

    .page-accounting .invoice-v2-action,
    .page-accounting .invoice-v2-head-actions button {
        flex: 1 1 46%;
    }

    .page-accounting .invoice-v2-metrics,
    .page-accounting .invoice-v2-status-board,
    .page-accounting .invoice-v2-toolbar form,
    .page-accounting .invoice-v2-filter-strip,
    .page-accounting .invoice-v2-form,
    .page-accounting .invoice-v2-inline-payment,
    .page-accounting .invoice-v2-plan-form,
    .page-accounting .invoice-v2-doc-form,
    .page-accounting .invoice-v2-detail-summary,
    .page-accounting .invoice-v2-detail-grid,
    .page-accounting .invoice-v2-flow-line,
    .page-accounting .invoice-v2-aging-board,
    .page-accounting .invoice-v2-plan-grid,
    .page-accounting .invoice-v2-bulk-form,
    .page-accounting .invoice-v2-bulk-actions {
        grid-template-columns: 1fr;
    }

    .page-accounting .invoice-v2-item-row,
    .page-accounting .invoice-v2-match-row {
        grid-template-columns: 1fr;
    }

    .page-accounting .invoice-v2-row,
    .page-accounting .invoice-v2-mini-flow button,
    .page-accounting .invoice-v2-payment-flow button,
    .page-accounting .invoice-v2-modal-list button,
    .page-accounting .invoice-v2-modal-list a {
        grid-template-columns: 1fr;
    }

    .page-accounting .invoice-v2-modal {
        padding: 10px;
    }

    .page-accounting .invoice-v2-modal-panel {
        width: calc(100vw - 18px);
        max-height: 88vh;
        border-radius: 20px;
    }

    .page-accounting .invoice-v2-modal-head {
        grid-template-columns: 1fr auto;
    }

    .page-accounting .invoice-v2-back {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.page-accounting .finance-ledger-v3-linked-card {
    display: inline-flex;
    margin-top: 2px;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 950;
    text-decoration: none;
}

.page-accounting .finance-ledger-v3-linked-card:hover {
    text-decoration: underline;
}

.page-accounting .finance-ledger-v3-linked-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.page-accounting .finance-ledger-v3-linked-actions[hidden] {
    display: none !important;
}

.page-accounting .finance-ledger-v3-linked-actions a {
    border: 1px solid rgba(14, 116, 144, .22);
    border-radius: 8px;
    background: #ecfeff;
    color: #0e7490;
    text-decoration: none;
    font-size: .74rem;
    font-weight: 950;
    padding: 6px 9px;
}

.page-accounting .finance-ledger-v3-linked-actions a:hover {
    background: #cffafe;
}

.page-accounting .finance-ledger-v3-modal-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-accounting .finance-ledger-v3-modal-form label {
    min-width: 0;
}

.page-accounting .finance-ledger-v3-modal-wide {
    grid-column: span 2;
}

@media (max-width: 980px) {
    .page-accounting .finance-ledger-v3-modal-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .page-accounting .finance-ledger-v3-modal-form {
        grid-template-columns: 1fr;
    }

    .page-accounting .finance-ledger-v3-modal-wide {
        grid-column: 1 / -1;
    }
}