/* Business All-in-One — design tokens + components on top of Bootstrap 5 */ :root { --navy-900: #0c1c38; --navy-800: #12284c; --navy-700: #1b3866; --navy-600: #274a82; --accent: #2563eb; --bg: #f5f7fa; --surface: #fff; --border: #e3e8ef; --text: #1e293b; --muted: #5b6678; /* 5.9:1 on white */ --income: #15803d; /* text green, 5.0:1 */ --income-soft: #dcfce7; --expense: #b91c1c; /* text red, 6.5:1 */ --expense-soft: #fee2e2; --warn-soft: #fef3c7; --warn-text: #854d0e; --radius: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .04); --sidebar-w: 256px; /* semantic tokens (redefined for dark mode below) */ --heading: var(--navy-900); --heading-2: var(--navy-800); --accent-soft: var(--navy-600); --soft: #eef2f7; --soft-2: #e8eef8; --hover: #f3f6fb; --row-border: #eef1f6; --th-bg: #f8fafc; --field-bg: #fff; --field-border: #cbd5e1; --label: #3b4759; --btn-border: #b9c4d6; --btn-active: #e2e8f0; --skel: #e9eef5; --shimmer: rgba(255, 255, 255, .7); --topbar-bg: rgba(255, 255, 255, .92); --cta-border: #c7d7f5; --cta-1: #eef4ff; --cta-2: #f8faff; --warn-border: #f5d98b; --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --bs-body-font-family: var(--font); --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-primary: var(--navy-800); --bs-primary-rgb: 18, 40, 76; --bs-link-color: #1d4ed8; --bs-link-color-rgb: 29, 78, 216; --bs-link-hover-color: var(--navy-800); --bs-border-color: var(--border); --bs-border-radius: 8px; --bs-success: var(--income); --bs-success-rgb: 21, 128, 61; --bs-danger: var(--expense); --bs-danger-rgb: 185, 28, 28; --bs-focus-ring-color: rgba(37, 99, 235, .3); } /* ---------- Dark mode (data-bs-theme="dark" on ; set by head.php + app.js) ---------- */ [data-bs-theme="dark"] { color-scheme: dark; --bg: #0d1726; --surface: #152238; --border: #263651; --text: #e2e8f3; --muted: #a3b0c4; /* 7.0:1 on --surface */ --income: #4cc38a; --income-soft: rgba(76, 195, 138, .16); --expense: #f28b8b; --expense-soft: rgba(242, 139, 139, .16); --warn-soft: rgba(242, 184, 75, .14); --warn-text: #f5cf7d; --accent: #6f9be0; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --heading: #f1f5fb; --heading-2: #c9d8f2; --accent-soft: #8fb0ea; --soft: #1e2f4a; --soft-2: #1b2c47; --hover: #1a2b45; --row-border: #22324c; --th-bg: #1a2a44; --field-bg: #0f1b2e; --field-border: #34476a; --label: #c5d0e0; --btn-border: #3a4d6b; --btn-active: #263a5a; --skel: #22334f; --shimmer: rgba(255, 255, 255, .08); --topbar-bg: rgba(13, 23, 38, .92); --cta-border: #2b4a80; --cta-1: #152a4a; --cta-2: #132238; --warn-border: rgba(242, 184, 75, .4); --bs-primary: #3d6fd8; --bs-primary-rgb: 61, 111, 216; --bs-link-color: #8fb4f5; --bs-link-color-rgb: 143, 180, 245; --bs-link-hover-color: #b7cffa; --bs-link-hover-color-rgb: 183, 207, 250; --bs-success-rgb: 76, 195, 138; --bs-danger-rgb: 242, 139, 139; --bs-focus-ring-color: rgba(111, 155, 224, .4); --bs-emphasis-color: #f1f5fb; --bs-secondary-bg: #1e2f4a; --bs-tertiary-bg: #1a2b45; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: .9375rem; -webkit-font-smoothing: antialiased; } .text-muted, .form-text { color: var(--muted) !important; } .text-success { color: var(--income) !important; } .text-danger { color: var(--expense) !important; } a { text-underline-offset: 2px; } :focus-visible { outline: 3px solid rgba(37, 99, 235, .55); outline-offset: 2px; } .skip-link { position: absolute; z-index: 2000; left: 8px; top: 8px; background: var(--surface); color: var(--text); padding: .5rem .75rem; border-radius: 6px; } .min-w-0 { min-width: 0; } /* ---------- Buttons ---------- */ .btn { font-weight: 500; border-radius: 8px; } .btn-primary { --bs-btn-bg: var(--navy-800); --bs-btn-border-color: var(--navy-800); --bs-btn-hover-bg: var(--navy-700); --bs-btn-hover-border-color: var(--navy-700); --bs-btn-active-bg: var(--navy-900); --bs-btn-active-border-color: var(--navy-900); --bs-btn-disabled-bg: var(--navy-800); --bs-btn-disabled-border-color: var(--navy-800); } .btn-outline-primary { --bs-btn-color: var(--heading-2); --bs-btn-border-color: var(--btn-border); --bs-btn-hover-bg: var(--navy-800); --bs-btn-hover-border-color: var(--navy-800); --bs-btn-active-bg: var(--navy-800); --bs-btn-active-border-color: var(--navy-800); } .btn-outline-secondary { --bs-btn-color: var(--label); --bs-btn-border-color: var(--field-border); --bs-btn-hover-bg: var(--soft); --bs-btn-hover-color: var(--heading-2); --bs-btn-hover-border-color: var(--btn-border); --bs-btn-active-bg: var(--btn-active); --bs-btn-active-color: var(--heading-2); --bs-btn-active-border-color: var(--btn-border); } .btn-outline-secondary.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } .btn-outline-success { --bs-btn-color: var(--income); --bs-btn-border-color: #86c9a0; --bs-btn-hover-bg: var(--income); --bs-btn-hover-border-color: var(--income); } .btn-outline-danger { --bs-btn-color: var(--expense); --bs-btn-border-color: #f0a3a3; --bs-btn-hover-bg: var(--expense); --bs-btn-hover-border-color: var(--expense); } .btn-icon { border: 0; background: transparent; padding: .25rem .5rem; color: var(--heading-2); } /* ---------- Forms ---------- */ .form-label { font-size: .8125rem; font-weight: 500; color: var(--label); margin-bottom: .25rem; } .form-control, .form-select { border-color: var(--field-border); background-color: var(--field-bg); color: var(--text); } .form-check-input:not(:checked) { background-color: var(--field-bg); } .dropdown-menu, .table, .list-group-item, .accordion-button, .accordion-item { --bs-body-bg: var(--surface); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .2); } .form-check-input:checked { background-color: var(--navy-800); border-color: var(--navy-800); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); --bs-card-cap-bg: transparent; } .card.shadow-sm { box-shadow: var(--shadow) !important; } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .9375rem; padding: .85rem 1.1rem; } .card-header .sub { font-weight: 400; color: var(--muted); font-size: .8125rem; } .card-body { padding: 1.1rem; } .label-muted { color: var(--muted); font-size: .8125rem; font-weight: 500; } /* ---------- App shell ---------- */ .app-sidebar { --bs-offcanvas-width: var(--sidebar-w); --bs-offcanvas-bg: var(--navy-800); --bs-offcanvas-color: #cbd5e6; background-color: var(--navy-800) !important; color: #cbd5e6; border: 0 !important; } .app-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .08); } .sidebar-brand { padding: 1.15rem 1.25rem 1rem; } .brand-logo { display: inline-flex; align-items: center; gap: .6rem; } .brand-text { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: #fff; line-height: 1.1; } .brand-text span { font-weight: 500; color: #9fb3d1; display: block; font-size: .75rem; letter-spacing: .02em; } .brand-logo-dark .brand-text { color: var(--heading-2); } .brand-logo-dark .brand-text span { color: var(--muted); } .sidebar-nav { padding: .25rem .75rem 1rem; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .side-group-label { text-transform: uppercase; font-size: .6875rem; letter-spacing: .08em; color: #8ea2c2; padding: 1rem .75rem .35rem; font-weight: 600; } .side-link { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 8px; color: #d5deec; text-decoration: none; font-weight: 500; font-size: .9rem; } .side-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; opacity: .9; } .side-link:hover { background: rgba(255, 255, 255, .07); color: #fff; } .side-link.active { background: rgba(255, 255, 255, .13); color: #fff; box-shadow: inset 3px 0 0 #5eead4; } .side-link:focus-visible { outline-color: #5eead4; } /* Sidebar groups (collapsible) + search */ .side-search { position: relative; padding: .25rem .75rem .35rem; } .side-search i { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); color: #8ea2c2; font-size: .8rem; pointer-events: none; } .side-search .form-control { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #fff; padding-left: 2rem; font-size: .8125rem; border-radius: 8px; } .side-search .form-control::placeholder { color: #8ea2c2; } .side-search .form-control:focus { background: rgba(255, 255, 255, .11); border-color: #5eead4; box-shadow: none; color: #fff; } .side-group { display: flex; flex-direction: column; gap: 2px; } .side-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; text-transform: uppercase; font-size: .6875rem; letter-spacing: .08em; color: #8ea2c2; padding: .8rem .75rem .3rem; font-weight: 600; text-align: left; } .side-group-toggle:hover { color: #d5deec; } .side-group-toggle:focus-visible { outline: 2px solid #5eead4; outline-offset: -2px; border-radius: 6px; } .side-group-toggle i { font-size: .7rem; transition: transform .15s; } .side-group:not(.open) .side-group-toggle i { transform: rotate(-90deg); } .side-group-items { display: flex; flex-direction: column; gap: 2px; } .side-group:not(.open) .side-group-items { display: none; } .side-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .side-badge { margin-left: auto; font-size: .625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 999px; background: rgba(94, 234, 212, .16); color: #5eead4; white-space: nowrap; } .side-badge + .side-lock { margin-left: .4rem; } .side-empty { color: #8ea2c2; font-size: .8125rem; padding: .75rem; } .side-link.side-hide, .side-group.side-hide { display: none; } .sidebar-foot { padding: .9rem 1.25rem; font-size: .75rem; color: #8ea2c2; border-top: 1px solid rgba(255, 255, 255, .08); } .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); } .topbar { position: sticky; top: 0; z-index: 1020; height: 60px; display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .company-switch, .user-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .35rem .7rem; color: var(--text); font-weight: 500; font-size: .875rem; max-width: 60vw; } .company-switch:hover, .user-btn:hover { background: var(--hover); } .company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .company-vat { color: var(--muted); font-weight: 400; font-size: .8125rem; } .user-btn { border-color: transparent; background: transparent; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-800); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; } .period-chip { align-items: center; gap: .4rem; font-size: .8125rem; color: var(--muted); background: var(--soft); border-radius: 999px; padding: .25rem .7rem; } .dropdown-menu { border-color: var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); font-size: .9rem; } .dropdown-menu form { margin: 0; } .dropdown-item { cursor: pointer; } .dropdown-item.active, .dropdown-item:active { background: var(--navy-800); } .dropdown-item i { margin-right: .35rem; } .page { padding: 1.5rem 1.25rem 3rem; max-width: 1400px; margin: 0 auto; } @media (min-width: 992px) { .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 1030; visibility: visible !important; transform: none; } .app-sidebar .offcanvas-body { display: flex; height: 100%; } .app-main { margin-left: var(--sidebar-w); } .topbar { padding: 0 2rem; } .page { padding: 2rem 2rem 3rem; } } @media (max-width: 575.98px) { .page { padding: 1rem .875rem 2.5rem; } .topbar { padding: 0 .75rem; } } /* ---------- Page header ---------- */ .page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; } .page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--heading); } .page-title i { color: var(--accent-soft); font-size: 1.25rem; } .page-sub { color: var(--muted); margin: .2rem 0 0; font-size: .9rem; } .page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* ---------- KPI cards ---------- */ .kpi { display: flex; gap: .9rem; align-items: flex-start; } .kpi-icon { flex: none; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--soft-2); color: var(--accent-soft); } .kpi-icon.income { background: var(--income-soft); color: var(--income); } .kpi-icon.expense { background: var(--expense-soft); color: var(--expense); } .kpi-icon.vat { background: var(--warn-soft); color: var(--warn-text); } .kpi-body { min-width: 0; flex: 1; } .kpi-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; color: var(--heading); word-break: break-word; } .kpi-value.text-danger { color: var(--expense) !important; } .kpi-note { font-size: .78rem; color: var(--muted); margin-top: .35rem; } .pill { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .pill.up-good, .pill.down-good { background: var(--income-soft); color: #166534; } .pill.up-bad, .pill.down-bad { background: var(--expense-soft); color: #991b1b; } .pill.flat { background: var(--soft); color: var(--muted); } .delta-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: .35rem; min-height: 1.4rem; } /* skeleton */ .skeleton { position: relative; overflow: hidden; color: transparent !important; background: var(--skel); border-radius: 6px; user-select: none; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--shimmer), transparent); animation: shimmer 1.3s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } .kpi-value.skeleton { display: inline-block; min-width: 9rem; } .chart-wrap { position: relative; } .chart-wrap.loading::before { content: ""; position: absolute; inset: 0; background: var(--soft); border-radius: 8px; z-index: 1; animation: pulse 1.2s infinite alternate; } @keyframes pulse { to { opacity: .45; } } /* callouts */ .cta-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--cta-border); background: linear-gradient(135deg, var(--cta-1), var(--cta-2)); margin-bottom: 1rem; } .cta-card .cta-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--navy-800); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: none; } .cta-card .cta-text { flex: 1 1 260px; } .cta-card .cta-text strong { display: block; color: var(--heading); } .cta-card .cta-text span { color: var(--muted); font-size: .875rem; } .warn-card { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .8rem 1.1rem; border-radius: var(--radius); background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--warn-text); margin-bottom: 1rem; } .warn-card i { font-size: 1.25rem; } .warn-card a { color: var(--warn-text); font-weight: 600; } .status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--muted); margin-bottom: 1rem; } .status-strip.error { color: var(--expense); } .empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--muted); } .empty-state .empty-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--soft-2); color: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1rem; } .empty-state h2 { font-size: 1.1rem; color: var(--heading); font-weight: 600; } /* ---------- Tables ---------- */ .table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--hover); font-size: .875rem; margin-bottom: 0; } .table > thead > tr > th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--th-bg); border-bottom: 1px solid var(--border); white-space: nowrap; padding: .6rem .85rem; } .table > tbody > tr > td { padding: .6rem .85rem; border-color: var(--row-border); vertical-align: middle; } .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--hover); } .table td.num, .table th.num, .text-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .num { font-variant-numeric: tabular-nums; } .table-responsive { -webkit-overflow-scrolling: touch; } .rank { color: var(--muted); width: 2rem; } .card > .table-responsive > .table > :last-child > tr:last-child > td, .card > .table > :last-child > tr:last-child > td { border-bottom: 0; } /* DataTables tweaks */ div.dt-container, .dataTables_wrapper { font-size: .875rem; } div.dt-container .dt-layout-row, .dataTables_wrapper .row { margin: 0; } div.dt-container .dt-layout-row:first-child, div.dt-container .dt-layout-row:last-child { padding: .75rem 1rem; } div.dt-container .dt-search { display: none; } .dataTables_wrapper .dataTables_filter { display: none; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: .75rem 1rem; color: var(--muted); } div.dt-container .dt-info, div.dt-container .dt-length { color: var(--muted); } div.dt-container .dt-length select, .dataTables_length select { width: auto; display: inline-block; } table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { border-bottom: 1px solid var(--border) !important; } table.dataTable.table > tbody > tr > * { box-shadow: none !important; } .page-link { color: var(--heading-2); border-color: var(--border); font-size: .8125rem; } .page-item.active .page-link { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .dt-processing, .dataTables_processing { background: var(--topbar-bg) !important; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); } /* ---------- Badges ---------- */ .badge { font-weight: 600; letter-spacing: .01em; } .badge.bg-danger { background: var(--expense-soft) !important; color: #991b1b; } .badge.bg-success { background: var(--income-soft) !important; color: #166534; } .badge.bg-warning { background: var(--warn-soft) !important; color: var(--warn-text) !important; } .badge.bg-info { background: #dbeafe !important; color: #1e40af !important; } .badge.text-bg-secondary { background: #e8ecf2 !important; color: var(--label) !important; } .badge.text-bg-success { background: var(--income-soft) !important; color: #166534 !important; } .badge.text-bg-danger { background: var(--expense-soft) !important; color: #991b1b !important; } .badge.text-bg-info { background: #dbeafe !important; color: #1e40af !important; } /* ---------- Alerts ---------- */ .alert { border-radius: var(--radius); border-width: 1px; font-size: .9rem; } .alert-info { background: #eaf2ff; border-color: #c7d9fa; color: #1e3a8a; } .alert-warning { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-text); } .alert-danger { background: #fef2f2; border-color: #f5c2c2; color: #991b1b; } .alert-success { background: #ecfdf3; border-color: #b6e6c8; color: #166534; } /* ---------- Filter bar ---------- */ .filter-card .card-body { padding: .9rem 1.1rem; } .filter-card .form-label { color: var(--muted); } /* ---------- Detail summary ---------- */ .summary-list { margin: 0; display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: .55rem 1rem; font-size: .875rem; } .summary-list dt { color: var(--muted); font-weight: 500; } .summary-list dd { margin: 0; word-break: break-word; } .totals-panel { background: linear-gradient(180deg, var(--surface), var(--th-bg)); } .totals-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .9rem; font-variant-numeric: tabular-nums; } .totals-row span:first-child { color: var(--muted); } .totals-row.grand { border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .75rem; font-size: 1.15rem; font-weight: 700; color: var(--heading); } .totals-row.grand span:first-child { color: var(--heading); } .raw-xml { background: #0f172a; color: #dbe4f3; border-radius: 8px; padding: 1rem; font-size: .78rem; max-height: 420px; overflow: auto; margin: 0; } .accordion-item { border-color: var(--border); border-radius: var(--radius) !important; overflow: hidden; } .accordion-button:not(.collapsed) { background: var(--soft-2); color: var(--heading-2); box-shadow: none; } .breadcrumb { font-size: .8125rem; margin-bottom: .75rem; } /* ---------- Provider cards ---------- */ .provider-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--soft-2); color: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .75rem; } .provider-card.disabled { opacity: .7; } /* ---------- Help steps ---------- */ .steps { list-style: none; counter-reset: s; padding: 0; margin: 0; } .steps li { counter-increment: s; position: relative; padding: 0 0 1.1rem 2.6rem; } .steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--navy-800); color: #fff; font-weight: 600; font-size: .8125rem; display: flex; align-items: center; justify-content: center; } .steps li:last-child { padding-bottom: 0; } /* ---------- Obligations ---------- */ .ob-item { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: .8rem 1.1rem; border-bottom: 1px solid var(--row-border); } .ob-item:last-child { border-bottom: 0; } .ob-title { font-weight: 600; font-size: .9rem; } .ob-done td { color: var(--muted); } .ob-done .ob-t { text-decoration: line-through; } /* ---------- Auth / guest ---------- */ .guest-body { background: radial-gradient(1200px 600px at 10% -10%, #dbe7ff 0, transparent 60%), radial-gradient(900px 500px at 100% 0, #d5f5ee 0, transparent 55%), var(--bg); min-height: 100vh; } .guest-wrap { max-width: 440px; margin: 0 auto; padding: 3rem 1rem 2rem; } .guest-wrap.guest-wide { max-width: 860px; } .guest-body .card { box-shadow: 0 10px 30px rgba(16, 24, 40, .08); border-radius: 14px; } .guest-body .card h1 { font-weight: 700; letter-spacing: -.01em; color: var(--heading); } /* ---------- Errors ---------- */ .error-page { text-align: center; padding: 4rem 1rem; } .error-code { font-size: 5rem; font-weight: 800; letter-spacing: -.04em; color: var(--heading-2); line-height: 1; } .app-sidebar .brand-mark rect { fill: #2a4d86; } /* Portfolio */ #pfTable th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } #pfTable th.sortable:hover { color: var(--heading); } #pfTable td { font-variant-numeric: tabular-nums; } /* ---------- Admin panel & system banners ---------- */ .imp-banner { position: sticky; top: 0; z-index: 1030; display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; min-height: 42px; padding: .4rem 1.25rem; background: #facc15; color: #422006; font-size: .875rem; border-bottom: 1px solid #ca8a04; } .app-main:has(.imp-banner) .topbar { top: 42px; } .announce-banner { padding: .5rem 1.25rem; background: #dbeafe; color: #1e3a8a; font-size: .875rem; border-bottom: 1px solid #bfdbfe; } .topbar-admin { background: #fee2e2 !important; border-bottom: 2px solid #b91c1c; } .topbar-admin .admin-title { font-weight: 700; color: #7f1d1d; display: inline-flex; align-items: center; gap: .5rem; } .admin-sidebar { background-color: #3b0d12 !important; } .admin-sidebar .side-group-label { color: #e5a3a3; } .admin-sidebar .side-link.active { box-shadow: inset 3px 0 0 #fca5a5; } .admin-stat { font-size: 1.6rem; font-weight: 700; line-height: 1.1; } .admin-log { background: #0f172a; color: var(--btn-active); font-size: .78rem; padding: .75rem 1rem; border-radius: 8px; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* Billing: lock icon on gated sidebar items */ .side-link .side-lock { margin-left: auto; width: auto; font-size: .8rem; opacity: .65; } /* ---------- Contextual help («?» popovers) and help drawer ---------- */ .help-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline; border: 0; background: transparent; padding: 0 .15rem; margin-left: .1rem; color: var(--muted); font-size: .95em; line-height: 1; border-radius: 50%; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; } .help-btn:hover { color: var(--accent); } .help-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .55); outline-offset: 1px; } .help-popover { --bs-popover-max-width: 320px; --bs-popover-font-size: .85rem; --bs-popover-header-font-size: .875rem; } .help-popover .popover-header { font-weight: 600; } .help-popover .popover-body ul { padding-left: 1.1rem; margin-bottom: 0; } .help-drawer { --bs-offcanvas-width: 380px; } .help-h { color: var(--muted); font-size: .72rem; letter-spacing: .06em; margin: 1.25rem 0 .5rem; } .help-list dt { font-size: .9rem; margin-top: .75rem; } .help-list dd { font-size: .85rem; color: var(--muted); margin: .15rem 0 0; } .help-links li { padding: .3rem 0; } .help-links i { color: var(--navy-600); margin-right: .35rem; } .help-card { transition: box-shadow .15s, border-color .15s; color: var(--text); } .help-card:hover, .help-card:focus-visible { border-color: var(--accent); box-shadow: 0 4px 14px rgba(16, 24, 40, .08); } .help-toggle { display: inline-flex; align-items: center; gap: .35rem; } .theme-switch { padding: .35rem 1rem .5rem; min-width: 250px; } .theme-switch-label { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .3rem; font-weight: 500; } .theme-switch .btn { font-size: .78rem; padding: .25rem .4rem; white-space: nowrap; } .theme-switch .btn i { margin: 0 .15rem 0 0; } .theme-switch .btn.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; } .provider-icon.flex-none { flex: none; margin-bottom: 0; } /* ---------- Walkthrough (tour.js) ---------- */ .tour-overlay { position: fixed; inset: 0; z-index: 2000; display: none; background: transparent; } .tour-overlay.tour-dim { background: rgba(8, 15, 30, .65); } .tour-spot { position: fixed; z-index: 2001; display: none; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(8, 15, 30, .65), 0 0 0 2px #5eead4; transition: top .25s, left .25s, width .25s, height .25s; } .tour-spot.tour-spot-none { box-shadow: none; width: 0 !important; height: 0 !important; } .tour-card { position: fixed; z-index: 2002; display: none; width: 340px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem .9rem; box-shadow: 0 16px 48px rgba(0, 0, 0, .35); transition: top .25s, left .25s; } .tour-card:focus { outline: none; } .tour-card.tour-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .tour-card.tour-mobile { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-width: none; transition: none; } .tour-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .tour-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 .4rem; color: var(--heading); } .tour-x { border: 0; background: transparent; color: var(--muted); padding: .1rem .25rem; margin: -.15rem -.3rem 0 0; border-radius: 6px; } .tour-x:hover { color: var(--text); } .tour-text { font-size: .9rem; color: var(--text); margin: 0 0 .85rem; } .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .tour-count { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .tour-actions { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; } .tour-skip { color: var(--muted); text-decoration: none; } .tour-skip:hover { color: var(--text); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } } /* Dark mode: components whose light colours are hard-coded */ [data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #3d6fd8; --bs-btn-border-color: #3d6fd8; --bs-btn-hover-bg: #5081e6; --bs-btn-hover-border-color: #5081e6; --bs-btn-active-bg: #2f5fc4; --bs-btn-active-border-color: #2f5fc4; --bs-btn-disabled-bg: #3d6fd8; --bs-btn-disabled-border-color: #3d6fd8; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-bg: #3d6fd8; --bs-btn-hover-border-color: #3d6fd8; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #3d6fd8; --bs-btn-active-border-color: #3d6fd8; --bs-btn-active-color: #fff; } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-hover-bg: #1e2f4a; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } [data-bs-theme="dark"] .btn-outline-secondary.active, [data-bs-theme="dark"] .theme-switch .btn.active { background: #3d6fd8; border-color: #3d6fd8; color: #fff; } [data-bs-theme="dark"] .btn-outline-success { --bs-btn-border-color: rgba(76, 195, 138, .5); --bs-btn-hover-color: #0d1726; --bs-btn-active-color: #0d1726; } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-border-color: rgba(242, 139, 139, .5); --bs-btn-hover-color: #0d1726; --bs-btn-active-color: #0d1726; } [data-bs-theme="dark"] .btn-success { --bs-btn-bg: #2f9e6c; --bs-btn-border-color: #2f9e6c; --bs-btn-hover-bg: #3aae7a; --bs-btn-hover-border-color: #3aae7a; --bs-btn-color: #fff; } [data-bs-theme="dark"] .form-check-input:checked { background-color: #3d6fd8; border-color: #3d6fd8; } [data-bs-theme="dark"] .form-control::placeholder { color: #7f8ea6; } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: #131f33; color: var(--muted); } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .08); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-divider-bg: var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } [data-bs-theme="dark"] .dropdown-item.active, [data-bs-theme="dark"] .dropdown-item:active { background: #3d6fd8; color: #fff; } [data-bs-theme="dark"] .app-sidebar { --bs-offcanvas-bg: #0a1424; background-color: #0a1424 !important; border-right: 1px solid #16233a !important; } [data-bs-theme="dark"] .app-sidebar .offcanvas-header, [data-bs-theme="dark"] .sidebar-foot { border-color: rgba(255, 255, 255, .06); } [data-bs-theme="dark"] .app-sidebar .brand-mark rect { fill: #1f3a66; } [data-bs-theme="dark"] .admin-sidebar { --bs-offcanvas-bg: #2a080c; background-color: #2a080c !important; } [data-bs-theme="dark"] .avatar { background: #3d6fd8; } [data-bs-theme="dark"] .steps li::before, [data-bs-theme="dark"] .cta-card .cta-icon { background: #3d6fd8; } [data-bs-theme="dark"] .page-item.active .page-link { background: #3d6fd8; border-color: #3d6fd8; } [data-bs-theme="dark"] .page-link { background: var(--surface); } [data-bs-theme="dark"] .page-item.disabled .page-link { background: var(--surface); color: #6b7a92; } [data-bs-theme="dark"] .pill.up-good, [data-bs-theme="dark"] .pill.down-good { color: #86e3b3; } [data-bs-theme="dark"] .pill.up-bad, [data-bs-theme="dark"] .pill.down-bad { color: #f7a8a8; } [data-bs-theme="dark"] .kpi-icon { color: #9db8e8; } [data-bs-theme="dark"] .kpi-icon.income { color: var(--income); } [data-bs-theme="dark"] .kpi-icon.expense { color: var(--expense); } [data-bs-theme="dark"] .kpi-icon.vat { color: var(--warn-text); } [data-bs-theme="dark"] .chart-wrap.loading::before { background: var(--soft); } [data-bs-theme="dark"] .badge.bg-danger, [data-bs-theme="dark"] .badge.text-bg-danger { color: #f7a8a8 !important; } [data-bs-theme="dark"] .badge.bg-success, [data-bs-theme="dark"] .badge.text-bg-success { color: #86e3b3 !important; } [data-bs-theme="dark"] .badge.bg-info, [data-bs-theme="dark"] .badge.text-bg-info { background: rgba(90, 169, 230, .18) !important; color: #9ccdf5 !important; } [data-bs-theme="dark"] .badge.text-bg-warning { background: var(--warn-soft) !important; color: var(--warn-text) !important; } [data-bs-theme="dark"] .badge.text-bg-secondary { background: #24354f !important; color: #c5d0e0 !important; } [data-bs-theme="dark"] .badge.text-bg-primary { background: rgba(111, 155, 224, .2) !important; color: #b7cffa !important; } [data-bs-theme="dark"] .badge.bg-light { background: var(--soft) !important; color: var(--text) !important; border-color: var(--border) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--soft) !important; } [data-bs-theme="dark"] .table-light { --bs-table-bg: var(--th-bg); --bs-table-color: var(--text); --bs-table-border-color: var(--border); } [data-bs-theme="dark"] .alert-info { background: rgba(90, 169, 230, .12); border-color: rgba(90, 169, 230, .35); color: #b5d8f7; } [data-bs-theme="dark"] .alert-warning { color: var(--warn-text); } [data-bs-theme="dark"] .alert-danger { background: var(--expense-soft); border-color: rgba(242, 139, 139, .4); color: #f7b4b4; } [data-bs-theme="dark"] .alert-success { background: var(--income-soft); border-color: rgba(76, 195, 138, .4); color: #9be6c0; } [data-bs-theme="dark"] .alert a { color: inherit; } [data-bs-theme="dark"] .totals-row.grand span:first-child { color: var(--heading); } [data-bs-theme="dark"] .raw-xml, [data-bs-theme="dark"] .admin-log { background: #0a1220; border: 1px solid var(--border); } [data-bs-theme="dark"] .guest-body { background: radial-gradient(1200px 600px at 10% -10%, #14294d 0, transparent 60%), radial-gradient(900px 500px at 100% 0, #0f3a3a 0, transparent 55%), var(--bg); } [data-bs-theme="dark"] .guest-body .card { box-shadow: 0 10px 30px rgba(0, 0, 0, .4); } [data-bs-theme="dark"] .brand-logo-dark .brand-text { color: var(--heading); } [data-bs-theme="dark"] .error-code { color: var(--heading-2); } [data-bs-theme="dark"] .announce-banner { background: #14294d; color: #bcd3f5; border-color: #22406e; } [data-bs-theme="dark"] .topbar-admin { background: #3b0d12 !important; border-bottom-color: #ef4444; } [data-bs-theme="dark"] .topbar-admin .admin-title { color: #fecaca; } [data-bs-theme="dark"] .accordion-button { background: var(--surface); color: var(--text); } [data-bs-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); } [data-bs-theme="dark"] .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); } [data-bs-theme="dark"] .progress { background: var(--soft); } [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .popover { --bs-modal-bg: var(--surface); --bs-popover-bg: var(--surface); --bs-popover-header-bg: var(--th-bg); } [data-bs-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--muted); --bs-breadcrumb-item-active-color: var(--muted); } [data-bs-theme="dark"] .invalid-feedback, [data-bs-theme="dark"] .text-danger { color: var(--expense) !important; } [data-bs-theme="dark"] .form-control.is-invalid, [data-bs-theme="dark"] .form-select.is-invalid { border-color: var(--expense); } [data-bs-theme="dark"] .dt-container .dt-paging .page-link { background: var(--surface); } [data-bs-theme="dark"] table.dataTable > thead > tr > th, [data-bs-theme="dark"] table.dataTable > thead > tr > td { color: var(--muted); } [data-bs-theme="dark"] .help-btn:hover { color: var(--accent); } [data-bs-theme="dark"] .help-popover, [data-bs-theme="dark"] .help-drawer { --bs-popover-bg: var(--surface); --bs-offcanvas-bg: var(--surface); } [data-bs-theme="dark"] .tour-card { box-shadow: 0 16px 48px rgba(0, 0, 0, .7); } [data-bs-theme="dark"] .tour-spot { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72), 0 0 0 2px #5eead4; } [data-bs-theme="dark"] .tour-overlay.tour-dim { background: rgba(0, 0, 0, .72); } [data-bs-theme="dark"] .help-card:hover, [data-bs-theme="dark"] .help-card:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .4); } .help-popover, .help-drawer { --bs-popover-bg: var(--surface); --bs-offcanvas-bg: var(--surface); } /* Notifications bell */ .notif-badge { position: absolute; top: -6px; right: -6px; font-size: .625rem; padding: .25em .45em; } .notif-menu { width: 340px; max-width: 92vw; } .notif-list { max-height: 380px; overflow-y: auto; } .notif-item { white-space: normal; padding: .55rem .9rem; } .notif-unread { background: var(--soft); }