/* =======================================================================
 * FinioDesk — Modern UI (Glassmorphism / Soft-UI)
 * -----------------------------------------------------------------------
 * Scoped under .fd-modern wrapper so legacy views are untouched.
 * Activate by adding class="fd-modern" on a section/page.
 * Compatible with light & dark theme (uses --fd-* CSS vars from finio-ux.css).
 * =======================================================================*/

.fd-modern {
    --fdm-radius: 14px;
    --fdm-radius-lg: 18px;
    --fdm-blur: 12px;
    --fdm-border: 1px solid rgba(226, 232, 240, 0.9);
    --fdm-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                  0 4px 12px -6px rgba(15, 23, 42, 0.08);
    --fdm-shadow-hover: 0 4px 8px -2px rgba(15, 23, 42, 0.08),
                        0 12px 24px -8px rgba(15, 23, 42, 0.14);
    --fdm-bg-glass: rgba(255, 255, 255, 0.85);
    --fdm-bg-glass-strong: rgba(255, 255, 255, 0.95);
    /* Solid, business-grade accent colors (no rainbow gradients). */
    --fdm-accent-primary: #4f46e5;
    --fdm-accent-success: #059669;
    --fdm-accent-warning: #d97706;
    --fdm-accent-danger:  #dc2626;
    --fdm-accent-info:    #0891b2;
    --fdm-grad-primary: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --fdm-grad-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --fdm-grad-warning: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --fdm-grad-danger:  linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --fdm-grad-info:    linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    /* Very subtle neutral page wash — almost imperceptible. */
    --fdm-grad-bg: linear-gradient(180deg,
                       #f8fafc 0%,
                       #f1f5f9 100%);
    --fdm-text: #0f172a;
    --fdm-text-muted: #64748b;
}

html[data-theme="dark"] .fd-modern {
    --fdm-border: 1px solid rgba(51, 65, 85, 0.6);
    --fdm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
                  0 4px 12px -6px rgba(0, 0, 0, 0.4);
    --fdm-shadow-hover: 0 6px 12px -4px rgba(0, 0, 0, 0.5),
                        0 16px 28px -10px rgba(0, 0, 0, 0.55);
    --fdm-bg-glass: rgba(30, 41, 59, 0.75);
    --fdm-bg-glass-strong: rgba(30, 41, 59, 0.92);
    --fdm-grad-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --fdm-text: #e2e8f0;
    --fdm-text-muted: #94a3b8;
}

/* ---- Page-level mood: very subtle gradient wash ------------------------ */
.fd-modern {
    position: relative;
    background-image: var(--fdm-grad-bg);
    background-attachment: fixed;
}
.fd-modern > * {
    position: relative;
    z-index: 1;
}

/* ---- Card: glass surface ---------------------------------------------- */
.fd-modern .card,
.fd-modern .fd-card {
    background: var(--fdm-bg-glass) !important;
    backdrop-filter: blur(var(--fdm-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--fdm-blur)) saturate(140%);
    border: var(--fdm-border) !important;
    border-radius: var(--fdm-radius) !important;
    box-shadow: var(--fdm-shadow) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.fd-modern .card:hover,
.fd-modern .fd-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--fdm-shadow-hover) !important;
    border-color: rgba(203, 213, 225, 1) !important;
}

/* ---- Stat card: gradient-accent left border + glow icon --------------- */
.fd-modern .fd-stat-card {
    position: relative;
    overflow: hidden;
}
.fd-modern .fd-stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--fdm-accent-primary);
}
.fd-modern .fd-stat-card.fd-stat-success::before { background: var(--fdm-accent-success); }
.fd-modern .fd-stat-card.fd-stat-warning::before { background: var(--fdm-accent-warning); }
.fd-modern .fd-stat-card.fd-stat-danger::before  { background: var(--fdm-accent-danger);  }
.fd-modern .fd-stat-card.fd-stat-info::before    { background: var(--fdm-accent-info);    }

.fd-modern .fd-stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--fdm-accent-primary);
    font-size: 1.15rem;
    background: rgba(79, 70, 229, 0.10);
    border: 1px solid rgba(79, 70, 229, 0.18);
    box-shadow: none;
    flex-shrink: 0;
}
.fd-modern .fd-stat-card.fd-stat-success .fd-stat-icon {
    background: rgba(5, 150, 105, 0.10);
    border-color: rgba(5, 150, 105, 0.20);
    color: var(--fdm-accent-success);
}
.fd-modern .fd-stat-card.fd-stat-warning .fd-stat-icon {
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(217, 119, 6, 0.20);
    color: var(--fdm-accent-warning);
}
.fd-modern .fd-stat-card.fd-stat-danger .fd-stat-icon {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.20);
    color: var(--fdm-accent-danger);
}
.fd-modern .fd-stat-card.fd-stat-info .fd-stat-icon {
    background: rgba(8, 145, 178, 0.10);
    border-color: rgba(8, 145, 178, 0.20);
    color: var(--fdm-accent-info);
}
html[data-theme="dark"] .fd-modern .fd-stat-icon {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.30);
}

.fd-modern .fd-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--fdm-text-muted);
    margin-bottom: 0.35rem;
}
.fd-modern .fd-stat-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--fdm-text);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Decorative blob removed for cleaner business look. */

/* ---- Card header ------------------------------------------------------ */
.fd-modern .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 1rem 1.25rem;
}
html[data-theme="dark"] .fd-modern .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Buttons: clean, solid, business-grade ---------------------------- */
.fd-modern .btn {
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.45rem 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.fd-modern .btn:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}
.fd-modern .btn-primary {
    background: var(--fdm-accent-primary);
    border-color: var(--fdm-accent-primary);
}
.fd-modern .btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.fd-modern .btn-success {
    background: var(--fdm-accent-success);
    border-color: var(--fdm-accent-success);
}
.fd-modern .btn-success:hover { background: #047857; border-color: #047857; }
.fd-modern .btn-info {
    background: var(--fdm-accent-info);
    border-color: var(--fdm-accent-info);
    color: #fff;
}
.fd-modern .btn-info:hover { background: #0e7490; border-color: #0e7490; color: #fff; }
.fd-modern .btn-warning {
    background: var(--fdm-accent-warning);
    border-color: var(--fdm-accent-warning);
    color: #fff;
}
.fd-modern .btn-warning:hover { background: #b45309; border-color: #b45309; color: #fff; }
.fd-modern .btn-danger {
    background: var(--fdm-accent-danger);
    border-color: var(--fdm-accent-danger);
}
.fd-modern .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* ---- List groups inside glass cards ----------------------------------- */
.fd-modern .list-group-flush > .list-group-item {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.05);
    transition: background 0.15s ease;
}
html[data-theme="dark"] .fd-modern .list-group-flush > .list-group-item {
    border-color: rgba(255, 255, 255, 0.06);
}
.fd-modern .list-group-item-action:hover {
    background: rgba(99, 102, 241, 0.06);
}

/* ---- Page heading ----------------------------------------------------- */
.fd-modern h1.fd-page-title,
.fd-modern .fd-page-title {
    font-weight: 700;
    color: var(--fdm-text);
    letter-spacing: -0.02em;
    margin: 0;
}
.fd-modern .fd-page-subtitle {
    color: var(--fdm-text-muted);
    font-size: 0.875rem;
    margin: 0.15rem 0 0;
}

/* ---- Reduce motion preference ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fd-modern .card,
    .fd-modern .fd-card,
    .fd-modern .btn {
        transition: none !important;
    }
    .fd-modern .card:hover,
    .fd-modern .fd-card:hover,
    .fd-modern .btn:hover {
        transform: none !important;
    }
}

/* =======================================================================
 * Global view polish — applied because layout now wraps all pages.
 * Keep modal/dropdown/alert components opaque (readability over aesthetics).
 * =======================================================================*/

/* Tables on glass: transparent bg, soft row dividers */
.fd-modern .card > .table,
.fd-modern .card .table {
    background: transparent;
    margin-bottom: 0;
}
.fd-modern .table > :not(caption) > * > * {
    background-color: transparent !important;
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="dark"] .fd-modern .table > :not(caption) > * > * {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.fd-modern .table > thead {
    background: rgba(15, 23, 42, 0.025);
}
.fd-modern .table > thead th {
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--fdm-text-muted);
}
.fd-modern .table-hover > tbody > tr:hover > * {
    background-color: rgba(15, 23, 42, 0.025) !important;
}

/* Forms: clean, business-grade inputs */
.fd-modern .form-control,
.fd-modern .form-select {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
html[data-theme="dark"] .fd-modern .form-control,
html[data-theme="dark"] .fd-modern .form-select {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(71, 85, 105, 0.6);
    color: var(--fdm-text);
}
.fd-modern .form-control:focus,
.fd-modern .form-select:focus {
    border-color: var(--fdm-accent-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.fd-modern .input-group-text {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: var(--fdm-text-muted);
    font-size: 0.875rem;
}

/* Badges: pill + slight gradient when contextual */
.fd-modern .badge {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.4em 0.7em;
}

/* Alerts kept opaque for readability */
.fd-modern .alert {
    border: none;
    border-radius: var(--fdm-radius);
    backdrop-filter: blur(6px);
    box-shadow: var(--fdm-shadow);
}

/* Pagination */
.fd-modern .pagination .page-link {
    border: none;
    border-radius: 10px;
    margin: 0 2px;
    color: var(--fd-text);
    background: transparent;
}
.fd-modern .pagination .page-item.active .page-link {
    background: var(--fdm-accent-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.30);
}
.fd-modern .pagination .page-link:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* Modals + dropdowns stay solid (do NOT inherit glass) */
.fd-modern .modal-content,
.fd-modern .dropdown-menu,
.fd-modern .toast {
    background: var(--fd-surface, #ffffff) !important;
    backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: var(--fdm-shadow-hover);
}
html[data-theme="dark"] .fd-modern .modal-content,
html[data-theme="dark"] .fd-modern .dropdown-menu,
html[data-theme="dark"] .fd-modern .toast {
    background: var(--fd-surface, #1f2937) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Buttons-outline keep their look but pill-shaped */
.fd-modern .btn-outline-primary,
.fd-modern .btn-outline-secondary,
.fd-modern .btn-outline-success,
.fd-modern .btn-outline-danger,
.fd-modern .btn-outline-warning,
.fd-modern .btn-outline-info {
    border-width: 1.5px;
}

/* Card-header titles */
.fd-modern .card-title,
.fd-modern .card-header h5,
.fd-modern .card-header h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Secondary stat (small text under value) */
.fd-modern .fd-stat-trend {
    font-size: 0.78rem;
    font-weight: 500;
}
.fd-modern .fd-stat-trend.up { color: #10b981; }
.fd-modern .fd-stat-trend.down { color: #ef4444; }

/* Page-title fallback when not class-attributed: only the explicit opt-in
   class .fd-page-title gets the gradient text. Plain h1/h2 unchanged. */

/* Print: drop glass + gradients for legible printout */
@media print {
    .fd-modern,
    .fd-modern * {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        color: #000 !important;
    }
    .fd-modern .card,
    .fd-modern .fd-card {
        border: 1px solid #ddd !important;
    }
}

/* =======================================================================
 * Action buttons inside tables
 * Many views use <form class="d-inline"> wrapping a delete button next to
 * an edit <a>, breaking Bootstrap's btn-group cohesion. We sidestep the
 * group entirely and turn each action into a clean square icon button.
 * Works zero-edit on existing markup.
 * =======================================================================*/
.fd-modern .table .btn-group,
.fd-modern .table .btn-group-sm {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}
.fd-modern .table .btn-group > .btn,
.fd-modern .table .btn-group form,
.fd-modern .table .btn-group-sm > .btn,
.fd-modern .table .btn-group-sm form {
    margin: 0 !important;
}
.fd-modern .table .btn-group form .btn,
.fd-modern .table .btn-group-sm form .btn {
    margin: 0;
}

/* Icon-only buttons inside tables → square 32×32 ghost chips */
.fd-modern .table .btn.btn-sm,
.fd-modern .table .btn-group-sm > .btn,
.fd-modern .table td .btn-outline-primary,
.fd-modern .table td .btn-outline-secondary,
.fd-modern .table td .btn-outline-success,
.fd-modern .table td .btn-outline-danger,
.fd-modern .table td .btn-outline-warning,
.fd-modern .table td .btn-outline-info {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border-width: 1px !important;
    background: transparent;
    transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
}
.fd-modern .table td .btn-outline-primary { color: #4f46e5; border-color: rgba(79,70,229,0.25); }
.fd-modern .table td .btn-outline-primary:hover { background: rgba(79,70,229,0.10); color: #4338ca; border-color: rgba(79,70,229,0.45); transform: translateY(-1px); }
.fd-modern .table td .btn-outline-danger  { color: #ef4444; border-color: rgba(239,68,68,0.25); }
.fd-modern .table td .btn-outline-danger:hover  { background: rgba(239,68,68,0.10);  color: #dc2626; border-color: rgba(239,68,68,0.45);  transform: translateY(-1px); }
.fd-modern .table td .btn-outline-success { color: #10b981; border-color: rgba(16,185,129,0.25); }
.fd-modern .table td .btn-outline-success:hover { background: rgba(16,185,129,0.10); color: #059669; border-color: rgba(16,185,129,0.45); transform: translateY(-1px); }
.fd-modern .table td .btn-outline-warning { color: #d97706; border-color: rgba(217,119,6,0.30); }
.fd-modern .table td .btn-outline-warning:hover { background: rgba(217,119,6,0.10);  color: #b45309; border-color: rgba(217,119,6,0.50);  transform: translateY(-1px); }
.fd-modern .table td .btn-outline-info    { color: #0891b2; border-color: rgba(8,145,178,0.30); }
.fd-modern .table td .btn-outline-info:hover    { background: rgba(8,145,178,0.10);  color: #0e7490; border-color: rgba(8,145,178,0.50);  transform: translateY(-1px); }
.fd-modern .table td .btn-outline-secondary { color: var(--fd-muted, #6b7280); border-color: rgba(107,114,128,0.25); }
.fd-modern .table td .btn-outline-secondary:hover { background: rgba(107,114,128,0.10); color: var(--fd-text, #374151); border-color: rgba(107,114,128,0.45); transform: translateY(-1px); }

/* Icon size inside action buttons */
.fd-modern .table td .btn i.bi {
    font-size: 0.95rem;
    line-height: 1;
}

/* Dark theme tweak */
html[data-theme="dark"] .fd-modern .table td .btn-outline-primary { color: #818cf8; border-color: rgba(129,140,248,0.30); }
html[data-theme="dark"] .fd-modern .table td .btn-outline-primary:hover { background: rgba(129,140,248,0.15); }
html[data-theme="dark"] .fd-modern .table td .btn-outline-danger  { color: #f87171; border-color: rgba(248,113,113,0.30); }
html[data-theme="dark"] .fd-modern .table td .btn-outline-danger:hover  { background: rgba(248,113,113,0.15); }
html[data-theme="dark"] .fd-modern .table td .btn-outline-success { color: #34d399; border-color: rgba(52,211,153,0.30); }
html[data-theme="dark"] .fd-modern .table td .btn-outline-warning { color: #fbbf24; border-color: rgba(251,191,36,0.30); }
html[data-theme="dark"] .fd-modern .table td .btn-outline-info    { color: #38bdf8; border-color: rgba(56,189,248,0.30); }

/* Inline forms in btn-group should not break flex */
.fd-modern .table .btn-group .d-inline,
.fd-modern .table .btn-group form.d-inline {
    display: inline-flex !important;
}

/* =======================================================================
 * Refinements — overall polish
 * =======================================================================*/

/* Smoother global font rendering inside modern shell */
.fd-modern {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Card body breathing room */
.fd-modern .card-body {
    padding: 1.25rem;
}
.fd-modern .card-body.p-0 { padding: 0; }
@media (min-width: 992px) {
    .fd-modern .card-body { padding: 1.5rem; }
    .fd-modern .card-body.p-0 { padding: 0; }
}

/* List groups: more breathing space */
.fd-modern .list-group-item {
    padding: 0.85rem 1.25rem;
}

/* Tighten card-header line height when there is subtitle (.text-muted small) */
.fd-modern .card-header small.text-muted {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
}

/* Page-content has soft rounded inner corners for the wash */
.page-content.fd-modern {
    border-radius: 0;
}

/* Subtle entry animation for cards (one-shot, no jank on re-render) */
@keyframes fdmFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fd-modern .card,
.fd-modern .fd-card {
    animation: fdmFadeUp 0.35s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .fd-modern .card,
    .fd-modern .fd-card { animation: none; }
}

/* Section headers (small caps) for grouped lists */
.fd-modern .fd-section-title {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--fd-muted, #6b7280);
    margin: 1.5rem 0 0.75rem;
}

/* Empty state styling helper (unused class — opt-in for views) */
.fd-modern .fd-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--fd-muted, #6b7280);
}
.fd-modern .fd-empty i.bi {
    font-size: 3rem;
    opacity: 0.4;
    display: block;
    margin-bottom: 0.75rem;
}

/* Top-action button row spacing on detail pages */
.fd-modern .page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* =======================================================================
 * Form shell — constrain create/edit forms to a readable width.
 * Wide forms (>1100px) hurt scannability because the eye must travel
 * across the full screen for a single field. Centered shell mimics
 * what business apps (Xero, QuickBooks, Stripe Dashboard) do.
 * =======================================================================*/
.fd-modern .fd-form-shell {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.fd-modern .fd-form-shell.fd-form-narrow {
    max-width: 760px;
}
.fd-modern .fd-form-shell.fd-form-wide {
    max-width: 1320px;
}

/* =======================================================================
 * Avatar preview (settings/profile) + topbar avatar image variant
 * =======================================================================*/
.fd-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.6rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}
.fd-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Navbar avatar can host either initial text or <img> */
.navbar-user .avatar {
    overflow: hidden;
}
.navbar-user .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tabs — pill style */
.fd-modern .nav-tabs {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 0.25rem;
}
html[data-theme="dark"] .fd-modern .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.06);
}
.fd-modern .nav-tabs .nav-link {
    border: none;
    border-radius: 10px 10px 0 0;
    color: var(--fd-muted, #6b7280);
    font-weight: 500;
    padding: 0.6rem 1rem;
}
/* Outline-secondary as default neutral action button (used for secondary CTAs) */
.fd-modern .btn-outline-secondary {
    color: #475569;
    background: #ffffff;
    border-color: #e2e8f0;
}
.fd-modern .btn-outline-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}
html[data-theme="dark"] .fd-modern .btn-outline-secondary {
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(71, 85, 105, 0.6);
}
html[data-theme="dark"] .fd-modern .btn-outline-secondary:hover {
    background: rgba(51, 65, 85, 0.8);
    border-color: rgba(100, 116, 139, 0.7);
    color: #f1f5f9;
}

.fd-modern .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--fdm-accent-primary);
    border-bottom: 2px solid var(--fdm-accent-primary);
}
.fd-modern .nav-tabs .nav-link:hover {
    background: rgba(15, 23, 42, 0.03);
    color: var(--fdm-text);
}

/* Scrollbar style in glass area (Webkit only) */
.fd-modern *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.fd-modern *::-webkit-scrollbar-track {
    background: transparent;
}
.fd-modern *::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.25);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.fd-modern *::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.45);
    background-clip: padding-box;
}


/* FinioDesk invoice screens — modern layout polish */
.fd-modern .invoice-template { color: #111827; }
.fd-modern .invoice-page-preview-card { background: #f8fafc !important; border-radius: 24px !important; }
.fd-modern .invoice-page-preview-card > .card-body { padding: 1.25rem !important; }
.fd-modern .invoice-page-toolbar { padding: 1rem 1.15rem; border: 1px solid rgba(226, 232, 240, .9); border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .45); }
.fd-modern .invoice-page-toolbar .h3 { letter-spacing: -.03em; font-weight: 800; }
.fd-modern .invoice-form-card .card-header { background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.84)) !important; }
.fd-modern .invoice-form-card .card-title, .fd-modern .invoice-side-card .card-title { font-weight: 800; letter-spacing: -.015em; }
.fd-modern .invoice-side-card { position: sticky; top: 1rem; }
.fd-modern #itemsTable thead th { background: #111827 !important; color: #fff; border: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .85rem; padding-bottom: .85rem; }
.fd-modern #itemsTable tbody td { padding-top: .7rem; padding-bottom: .7rem; border-color: #eef2f7; }
.fd-modern #itemsTable .form-control-sm, .fd-modern #itemsTable .form-select-sm { min-height: 38px; border-radius: 10px; }
.fd-modern #grandTotal { color: #4f46e5; font-size: 1.35rem; letter-spacing: -.025em; }
.fd-modern .product-dropdown { border-radius: 14px !important; border-color: #cbd5e1 !important; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .7) !important; overflow: hidden; }
@media (max-width: 991px) { .fd-modern .invoice-side-card { position: static; } }


/* Sentinel global FinioDesk refresh 2026-07-21 — Lexoffice-like clean SaaS polish */
:root {
  --fdm-bg: #f5f7fb;
  --fdm-surface: rgba(255,255,255,.92);
  --fdm-surface-solid: #ffffff;
  --fdm-border: rgba(203,213,225,.72);
  --fdm-text: #0f172a;
  --fdm-muted: #64748b;
  --fdm-primary: #4f46e5;
  --fdm-primary-2: #06b6d4;
  --fdm-success: #059669;
  --fdm-warning: #d97706;
  --fdm-danger: #dc2626;
  --fdm-radius: 18px;
  --fdm-radius-sm: 12px;
  --fdm-shadow: 0 18px 45px -32px rgba(15,23,42,.55);
  --fdm-shadow-soft: 0 12px 30px -24px rgba(15,23,42,.42);
  --fdm-ring: 0 0 0 .22rem rgba(79,70,229,.14);
}
html[data-theme="dark"] {
  --fdm-bg: #0b1120;
  --fdm-surface: rgba(15,23,42,.82);
  --fdm-surface-solid: #111827;
  --fdm-border: rgba(71,85,105,.58);
  --fdm-text: #e5e7eb;
  --fdm-muted: #94a3b8;
  --fdm-shadow: 0 22px 55px -32px rgba(0,0,0,.82);
}
body {
  color: var(--fdm-text);
  background:
    radial-gradient(circle at 12% 0%, rgba(79,70,229,.10), transparent 28rem),
    radial-gradient(circle at 86% 10%, rgba(6,182,212,.10), transparent 26rem),
    linear-gradient(180deg, #f8fbff 0%, var(--fdm-bg) 46%, #eef2ff 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% 0%, rgba(99,102,241,.18), transparent 30rem),
    radial-gradient(circle at 92% 6%, rgba(20,184,166,.13), transparent 28rem),
    linear-gradient(180deg, #020617 0%, var(--fdm-bg) 100%) !important;
}
.sidebar {
  width: 270px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(129,140,248,.22), transparent 18rem),
    linear-gradient(180deg, #111827 0%, #172033 46%, #0f172a 100%) !important;
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 22px 0 50px -42px rgba(15,23,42,.95);
}
.sidebar-brand {
  min-height: 78px;
  padding: 1.15rem 1.25rem !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.sidebar-brand h5 { font-weight: 850 !important; letter-spacing: -.035em; }
.sidebar-nav { padding: 1rem .85rem 1.25rem !important; }
.sidebar-nav .nav-link {
  min-height: 42px;
  margin: .16rem 0;
  border-radius: 14px !important;
  color: rgba(226,232,240,.86) !important;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
  transform: translateX(2px);
}
.sidebar-nav .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(6,182,212,.74)) !important;
  box-shadow: 0 14px 30px -20px rgba(79,70,229,.9);
}
.sidebar-nav .nav-link i {
  width: 1.35rem;
  color: inherit !important;
  opacity: .95;
}
.main-content {
  margin-left: 270px !important;
  width: calc(100% - 270px) !important;
  max-width: calc(100% - 270px) !important;
}
.top-navbar {
  height: 68px !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226,232,240,.8) !important;
  box-shadow: 0 8px 28px -26px rgba(15,23,42,.45);
}
html[data-theme="dark"] .top-navbar { background: rgba(15,23,42,.74) !important; border-color: rgba(71,85,105,.55) !important; }
.page-content {
  padding: clamp(1rem, 2.2vw, 2rem) !important;
}
.fd-modern, .page-content.fd-modern, .admin-modern, .accountant-modern {
  max-width: 1520px;
  margin: 0 auto;
}
.fd-modern > .d-flex.justify-content-between.align-items-center.mb-4:first-child,
.page-content > .d-flex.justify-content-between.align-items-center.mb-4:first-child {
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem !important;
  border: 1px solid rgba(203,213,225,.66);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
    radial-gradient(circle at 100% 0%, rgba(79,70,229,.12), transparent 18rem);
  box-shadow: var(--fdm-shadow-soft);
  gap: 1rem;
  flex-wrap: wrap;
}
html[data-theme="dark"] .page-content > .d-flex.justify-content-between.align-items-center.mb-4:first-child,
html[data-theme="dark"] .fd-modern > .d-flex.justify-content-between.align-items-center.mb-4:first-child {
  background: linear-gradient(135deg, rgba(15,23,42,.90), rgba(30,41,59,.68));
  border-color: var(--fdm-border);
}
.h1,.h2,.h3,h1,h2,h3,.fd-page-title {
  color: var(--fdm-text);
  font-weight: 850 !important;
  letter-spacing: -.04em;
}
.text-muted { color: var(--fdm-muted) !important; }
.card {
  border: 1px solid var(--fdm-border) !important;
  border-radius: var(--fdm-radius) !important;
  background: var(--fdm-surface) !important;
  box-shadow: var(--fdm-shadow-soft) !important;
  overflow: hidden;
}
.card-header {
  min-height: 54px;
  background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.72)) !important;
  border-bottom: 1px solid rgba(226,232,240,.78) !important;
  padding: 1rem 1.15rem !important;
}
html[data-theme="dark"] .card-header { background: linear-gradient(180deg, rgba(30,41,59,.76), rgba(15,23,42,.60)) !important; border-color: var(--fdm-border) !important; }
.card-body { padding: 1.15rem !important; }
.fd-stat-card {
  position: relative;
  min-height: 126px;
  overflow: hidden;
}
.fd-stat-card::after {
  content:"";
  position:absolute;
  width: 132px;
  height: 132px;
  right: -44px;
  top: -46px;
  border-radius: 999px;
  background: rgba(79,70,229,.10);
}
.fd-stat-card .card-body { position:relative; z-index:1; }
.fd-stat-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 17px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(79,70,229,.16), rgba(6,182,212,.13)) !important;
  color: var(--fdm-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.13);
}
.fd-stat-label, .small.text-uppercase, .form-label {
  color: var(--fdm-muted) !important;
  font-weight: 720 !important;
  letter-spacing: .01em;
}
.fd-stat-value {
  color: var(--fdm-text) !important;
  font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.05em;
}
.table-responsive { border-radius: 0 0 var(--fdm-radius) var(--fdm-radius); }
.table { color: var(--fdm-text); vertical-align: middle; }
.table thead th,
.table .bg-light th,
thead.bg-light th {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .065em;
  font-weight: 800;
  padding: .92rem .9rem !important;
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] thead.bg-light th { background: rgba(30,41,59,.80) !important; color: #cbd5e1 !important; border-color: var(--fdm-border) !important; }
.table tbody td { padding: .88rem .9rem !important; border-color: rgba(226,232,240,.72) !important; }
.table-hover tbody tr { transition: background .14s ease, transform .14s ease; }
.table-hover tbody tr:hover { background: rgba(79,70,229,.035) !important; }
.badge {
  border-radius: 999px !important;
  padding: .42rem .68rem !important;
  font-weight: 750 !important;
  letter-spacing: -.005em;
}
.btn {
  border-radius: 12px !important;
  font-weight: 750 !important;
  letter-spacing: -.01em;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  box-shadow: none !important;
}
.btn-sm { min-height: 34px; border-radius: 10px !important; }
.btn-primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, #4f46e5, #06b6d4) !important;
  box-shadow: 0 14px 30px -22px rgba(79,70,229,.88) !important;
}
.btn-primary:hover { filter: brightness(.98); transform: translateY(-1px); }
.btn-secondary {
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  background: #fff !important;
}
html[data-theme="dark"] .btn-secondary { color:#e5e7eb !important; background: rgba(30,41,59,.75) !important; border-color: var(--fdm-border) !important; }
.form-control, .form-select {
  min-height: 42px;
  border-radius: 13px !important;
  border-color: #dbe3ef !important;
  background-color: rgba(255,255,255,.94) !important;
  color: var(--fdm-text) !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(79,70,229,.55) !important;
  box-shadow: var(--fdm-ring) !important;
}
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background-color: rgba(15,23,42,.74) !important;
  border-color: var(--fdm-border) !important;
}
.alert {
  border: 1px solid rgba(203,213,225,.72) !important;
  border-radius: 16px !important;
  box-shadow: var(--fdm-shadow-soft);
}
.dropdown-menu {
  border: 1px solid var(--fdm-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 48px -28px rgba(15,23,42,.55) !important;
}
.modal-content { border-radius: 22px !important; border: 1px solid var(--fdm-border) !important; box-shadow: var(--fdm-shadow) !important; }
.pagination .page-link { border-radius: 11px !important; margin: 0 .12rem; border-color: #e2e8f0; color: var(--fdm-primary); font-weight: 700; }
.breadcrumb { padding: .7rem 1rem; border-radius: 14px; background: rgba(255,255,255,.66); border: 1px solid rgba(226,232,240,.68); }
/* Auth/login/registration polish */
.auth-container { background: radial-gradient(circle at 15% 10%, rgba(79,70,229,.18), transparent 26rem), linear-gradient(135deg, #f8fafc, #eef2ff 58%, #ecfeff) !important; }
.auth-card, .login-card, .register-card, .forgot-card {
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 28px 75px -42px rgba(15,23,42,.72) !important;
  backdrop-filter: blur(18px);
}
.auth-left, .auth-hero, .auth-sidebar {
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 16rem), linear-gradient(135deg, #4338ca, #0891b2) !important;
}
/* Accountant/admin layouts */
.admin-modern .card, .accountant-modern .card { border-radius: 18px !important; }
/* Make cramped row actions cleaner without changing links/forms */
.btn-group.btn-group-sm { gap: .28rem; }
.btn-group.btn-group-sm > .btn { border-radius: 10px !important; }
@media (max-width: 991.98px) {
  .sidebar { width: 270px !important; }
  .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; }
  .page-content { padding: 1rem !important; }
  .top-navbar { height: 62px !important; }
  .fd-modern > .d-flex.justify-content-between.align-items-center.mb-4:first-child,
  .page-content > .d-flex.justify-content-between.align-items-center.mb-4:first-child { align-items: flex-start !important; }
}
@media print {
  body { background: #fff !important; }
  .card { box-shadow: none !important; }
}


/* Sentinel width correction 2026-07-21 — use the available workspace, no narrow centered dashboard */
.page-content.fd-modern,
.fd-modern,
.admin-modern,
.accountant-modern {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.page-content.fd-modern {
  padding-left: clamp(1rem, 1.5vw, 1.6rem) !important;
  padding-right: clamp(1rem, 1.5vw, 1.6rem) !important;
}
.page-content.fd-modern > .row,
.page-content.fd-modern > form,
.page-content.fd-modern > .card,
.page-content.fd-modern > .table-responsive,
.page-content.fd-modern > .d-flex,
.page-content.fd-modern > .fd-form-shell:not(.fd-form-narrow) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Dashboard specifically: spread widgets over the full content area instead of a compact middle column. */
.page-content.fd-modern > .row.g-4 {
  --bs-gutter-x: 1.15rem;
  --bs-gutter-y: 1.15rem;
}
@media (min-width: 1200px) {
  .page-content.fd-modern > .row.g-4 > .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .page-content.fd-modern > .row.g-4 > .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .page-content.fd-modern > .row.g-4 > .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
}
@media (min-width: 1600px) {
  .page-content.fd-modern { padding-left: 2rem !important; padding-right: 2rem !important; }
}