/* ========================================================================= NOVA EcONOMI — Design tokens Concept: a digital ledger. Navy "ink", warm amber "stamp/seal" accent, ruled hairlines reminiscent of ledger paper, tabular numerals for every financial figure so digits always align like a real cash book. ========================================================================= */ :root { --ink-900: #0d1f33; --ink-800: #14293f; --ink-700: #1d3652; --ink-500: #3c5878; --ink-300: #8ba0b8; --ink-100: #dce4ec; --paper-0: #f6f7f9; --paper-50: #ffffff; --paper-100: #eef1f5; --amber-600: #b6821f; --amber-500: #c89b3c; --amber-100: #f3e6c8; --forest-600: #1f6d4f; --forest-100: #e0f0e8; --brick-600: #a63c33; --brick-100: #f6e3e0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 1px 2px rgba(13, 31, 51, 0.06), 0 6px 20px rgba(13, 31, 51, 0.06); --shadow-pop: 0 4px 8px rgba(13, 31, 51, 0.08), 0 16px 40px rgba(13, 31, 51, 0.14); --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ========================================================================= DARK THEME — same tokens, reversed ink/paper relationship. Toggled via [data-theme="dark"] on (see app.js applyTheme()). ========================================================================= */ html[data-theme="dark"] { --ink-900: #eef2f6; --ink-800: #dde4ec; --ink-700: #c3cedb; --ink-500: #93a3b8; --ink-300: #5b6b80; --ink-100: #2a3646; --paper-0: #0f1720; --paper-50: #16202c; --paper-100: #1c2836; --forest-100: #163c2c; --brick-100: #3c1f1a; --amber-100: #3a2f18; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.25); --shadow-pop: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .sidebar { background: #060c14; } html[data-theme="dark"] table.ledger tr.total td { background: var(--paper-100); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper-0); color: var(--ink-900); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); } /* ========================================================================= APP SHELL ========================================================================= */ .app-shell { display: grid; grid-template-columns: 248px 1fr; height: 100vh; } /* ---- SIDEBAR ---- */ .sidebar { background: var(--ink-900); color: var(--paper-50); display: flex; flex-direction: column; padding: 28px 0 20px; position: relative; height: 100vh; overflow-y: auto; overflow-x: hidden; } .sidebar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--amber-500), transparent 60%); opacity: 0.6; } /* Thin, unobtrusive scrollbar for the sidebar's own internal scroll - only visible if the nav is actually taller than the viewport. */ .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; } .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); } /* Full Bokta logo in the sidebar header - the logo's own design needs a light backdrop (its dark-green text was designed against a pale background), so it sits on a light card rather than directly on the dark sidebar, where "SMART BOKFÖRING" would lose all contrast. */ .brand { padding: 20px 16px 24px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); } .brand-full-logo { display: block; width: 100%; height: auto; background: var(--paper-0); border-radius: var(--radius-md, 12px); padding: 10px 14px; } .nav-group { margin-top: 18px; padding: 0 12px; } .nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-300); padding: 6px 12px 6px; margin-top: 14px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-100); text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; } .nav-link.active { background: rgba(200,155,60,0.16); color: var(--amber-500); } .nav-icon { width: 17px; text-align: center; font-size: 14px; opacity: 0.9; } .nav-section { margin-top: 2px; } .nav-section-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px; margin-top: 10px; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s ease; user-select: none; } .nav-section-header:hover { background: rgba(255,255,255,0.05); } .nav-section-header .nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-300); padding: 0; } .nav-section-header .nav-caret { font-size: 9px; color: var(--ink-300); transition: transform 0.18s ease; transform: rotate(90deg); } .nav-section.collapsed .nav-section-header .nav-caret { transform: rotate(0deg); } .nav-section-body { max-height: 600px; overflow: hidden; transition: max-height 0.22s ease; } .nav-section.collapsed .nav-section-body { max-height: 0; } .sidebar-footer { margin-top: auto; padding: 14px 24px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11.5px; color: var(--ink-300); } /* ---- MAIN ---- */ .main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow-y: auto; } .topbar { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: var(--paper-50); border-bottom: 1px solid var(--ink-100); position: sticky; top: 0; z-index: 5; } .topbar-title { font-family: var(--font-display); font-size: 20px; } .topbar-actions { display: flex; gap: 10px; align-items: center; } .content { padding: 28px 32px 60px; max-width: 1240px; width: 100%; } /* ========================================================================= COMPONENTS ========================================================================= */ .btn { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink-900); color: #fff; } .btn-primary:hover { background: var(--ink-800); } .btn-amber { background: var(--amber-500); color: var(--ink-900); } .btn-amber:hover { background: var(--amber-600); } .btn-ghost { background: transparent; color: var(--ink-700); border-color: var(--ink-100); } .btn-ghost:hover { background: var(--paper-100); } .btn-danger { background: var(--brick-100); color: var(--brick-600); } .btn-danger:hover { background: #f0d2cc; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .card { background: var(--paper-50); border-radius: var(--radius-lg); border: 1px solid var(--ink-100); box-shadow: var(--shadow-card); padding: 22px 24px; overflow-x: auto; } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .kpi-card { background: var(--paper-50); border-radius: var(--radius-lg); border: 1px solid var(--ink-100); box-shadow: var(--shadow-card); padding: 18px 20px 16px; position: relative; overflow: hidden; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ink-100); } .kpi-card.positive::before { background: var(--forest-600); } .kpi-card.negative::before { background: var(--brick-600); } .kpi-card.neutral::before { background: var(--amber-500); } .kpi-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-500); font-weight: 600; margin-bottom: 8px; } .kpi-value { font-family: var(--font-display); font-size: 27px; font-weight: 600; color: var(--ink-900); } .kpi-sub { font-size: 12px; color: var(--ink-500); margin-top: 4px; } .section-title { font-family: var(--font-display); font-size: 17px; margin: 0 0 4px; } .section-sub { color: var(--ink-500); font-size: 13px; margin-bottom: 16px; } .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } table.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.ledger th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); font-weight: 600; padding: 8px 10px; border-bottom: 1.5px solid var(--ink-900); } table.ledger td { padding: 9px 10px; border-bottom: 1px solid var(--paper-100); color: var(--ink-800); } table.ledger tr:hover td { background: var(--paper-0); } table.ledger td.num, table.ledger th.num { text-align: right; } table.ledger tr.total td { font-weight: 700; border-top: 1.5px solid var(--ink-900); border-bottom: none; background: var(--paper-0); } table.ledger tr.section-header td { font-weight: 700; color: var(--ink-900); padding-top: 16px; background: transparent; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: normal; max-width: 100%; } .badge-ok { background: var(--forest-100); color: var(--forest-600); } .badge-warn { background: var(--brick-100); color: var(--brick-600); } .badge-locked { background: var(--amber-100); color: var(--amber-600); } .badge-rounding { background: var(--amber-100); color: var(--amber-600); } .badge-neutral { background: var(--paper-100); color: var(--ink-500); } /* Longer, sentence-length status messages (e.g. payment balance checks) use this instead of .badge - a pill shape with a 999px radius only reads correctly for a short word or two; forcing a full sentence into that shape either clips content or leaves the rounded corners visually cutting into wrapped lines. This is a plain rounded box that grows properly with multi-line content. */ .status-box { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; line-height: 1.5; } .status-box-ok { background: var(--forest-100); color: var(--forest-600); } .status-box-warn { background: var(--brick-100); color: var(--brick-600); } .status-box-rounding { background: var(--amber-100); color: var(--amber-600); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 4px; } .form-field label { font-size: 12px; font-weight: 600; color: var(--ink-700); } .form-field input, .form-field select, .form-field textarea { font-family: var(--font-body); font-size: 13.5px; padding: 9px 11px; border: 1px solid var(--ink-100); border-radius: var(--radius-sm); background: var(--paper-50); color: var(--ink-900); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--amber-500); outline-offset: 1px; border-color: var(--amber-500); } .view { display: none; animation: fadeIn 0.2s ease; } .view.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } } .chart-wrap { position: relative; height: 220px; } .empty-state { text-align: center; padding: 40px 20px; color: var(--ink-500); } .empty-state .icon { font-size: 28px; margin-bottom: 8px; } .modal-backdrop { position: fixed; inset: 0; background: rgba(13,31,51,0.45); display: none; align-items: center; justify-content: center; z-index: 50; } .modal-backdrop.active { display: flex; } .modal { background: var(--paper-50); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); width: 560px; max-width: 92vw; max-height: 86vh; overflow-y: auto; padding: 26px 28px; } .modal.modal-wide { width: 760px; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .modal-close { cursor: pointer; color: var(--ink-500); font-size: 18px; background:none;border:none; } .toast-stack { position: fixed; bottom: 90px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--ink-900); color: #fff; padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 13.5px; display: flex; align-items: center; gap: 8px; animation: slideIn 0.2s ease; max-width: 420px; line-height: 1.5; } .toast.error { background: var(--brick-600); } .toast.success { background: var(--forest-600); } @keyframes slideIn { from { opacity:0; transform: translateX(16px);} to {opacity:1; transform:none;} } .tag-row { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .filter-bar { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; } ::selection { background: var(--amber-100); } .mobile-menu-btn { display: none; } .sidebar-backdrop { display: none; } @media (max-width: 980px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 200; transform: translateX(-100%); transition: transform 0.22s ease; height: 100vh; overflow-y: auto; } .sidebar.mobile-open { transform: translateX(0); display: flex; } .mobile-menu-btn { display: inline-flex; } .sidebar-backdrop.active { display: block; position: fixed; inset: 0; background: rgba(13, 31, 51, 0.45); z-index: 190; } .kpi-grid { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } } /* ========================================================================= PRINT ========================================================================= */ .print-only { display: none; } .print-header { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--ink-900); } .print-header img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); } .invoice-logo { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-sm); } .print-header-text .company-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink-900); } .print-header-text .company-meta { font-size: 11.5px; color: var(--ink-500); line-height: 1.5; } .print-header-date { margin-left: auto; font-size: 11px; color: var(--ink-500); text-align: right; } .print-footer { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--ink-100); font-size: 10.5px; color: var(--ink-500); text-align: center; } @media print { .sidebar, .topbar, .filter-bar, .no-print, .toast-stack, .modal-backdrop { display: none !important; } .app-shell { display: block; height: auto; } .main { height: auto; overflow: visible; } .content { padding: 0; max-width: none; } .card { box-shadow: none; border: none; overflow-x: visible; } body { background: #fff; } table.ledger { font-size: 11px; } .print-only { display: block; } .print-header { display: flex; } .je-detail-row { display: table-row !important; } .je-caret { display: none; } body.printing-single-entry .content > .view { display: none !important; } body.printing-single-entry #single-entry-print { display: block !important; } } /* ========================================================================= BAR CHART (partner statistics) — simple horizontal bars, no external charting library needed. ========================================================================= */ .bar-chart-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .bar-chart-label { width: 140px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-700); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-chart-track { flex: 1; background: var(--paper-100); border-radius: var(--radius-sm); overflow: hidden; height: 24px; position: relative; } .bar-chart-fill { height: 100%; background: linear-gradient(90deg, var(--amber-500), var(--amber-600)); border-radius: var(--radius-sm); display: flex; align-items: center; transition: width 0.3s ease; min-width: 2px; } .bar-chart-value { padding-left: 10px; font-size: 11.5px; font-weight: 700; color: var(--paper-50); white-space: nowrap; } @media (max-width: 640px) { .bar-chart-label { width: 90px; font-size: 11px; } } /* ========================================================================= DASHBOARD TREND CHART - the canvas sizes itself based on this container's clientWidth/clientHeight (see drawTrendChart in app.js), so this needs an explicit height independent of the canvas's own default size, or the two end up in a circular sizing dependency that can leave the chart badly distorted (bars for most months compressed to nearly nothing). ========================================================================= */ .chart-wrap { width: 100%; height: 220px; position: relative; } .chart-wrap canvas { display: block; width: 100%; height: 100%; } /* ========================================================================= HELP ACCORDION - collapsible sections on the Hjälp page, click a header to reveal its content instead of showing everything at once. ========================================================================= */ .help-accordion-item { border-bottom: 1px solid var(--ink-100); } .help-accordion-item:last-child { border-bottom: none; } .help-accordion-header { padding: 14px 4px; font-weight: 600; font-size: 14.5px; cursor: pointer; color: var(--ink-800); display: flex; align-items: center; gap: 8px; user-select: none; } .help-accordion-header:hover { color: var(--amber-600); } .help-caret { display: inline-block; transition: transform 0.15s ease; font-size: 11px; color: var(--ink-500); } .help-accordion-item.open .help-caret { transform: rotate(90deg); } .help-accordion-body { display: none; padding: 0 4px 18px 4px; } .help-accordion-item.open .help-accordion-body { display: block; } @media print { .help-accordion-body { display: block !important; } .help-caret { display: none; } } /* ========================================================================= FINANCIAL REPORTS (Balansrapport, Resultatrapport) - fixed table layout with a set column proportion (see inline colgroup) so numeric columns stay perfectly aligned regardless of description length, and long account names wrap instead of forcing horizontal overflow. ========================================================================= */ #bs-content table.ledger td:first-child, #is-content table.ledger td:first-child { white-space: normal; word-break: break-word; overflow-wrap: break-word; } #bs-content table.ledger td, #is-content table.ledger td, #bs-content table.ledger th, #is-content table.ledger th { overflow: hidden; text-overflow: ellipsis; } /* ========================================================================= OM BOKTA (About page) - a clean, standalone brand page with the full logo as a hero image and a subtle watermark behind the whole page, distinct from the accordion-style Help content. ========================================================================= */ #view-about.view { background-image: url('/static/icons/bokta-kod-watermark.png'); background-repeat: no-repeat; background-position: center 60px; background-size: min(600px, 80%) auto; } .about-page { max-width: 780px; margin: 0 auto; } .about-hero { text-align: center; padding: 32px 0 28px; } .about-logo { max-width: 320px; width: 100%; height: auto; margin-bottom: 4px; } .about-tagline { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.12em; color: var(--forest-600); font-weight: 600; margin-top: 4px; } .about-version { font-size: 12.5px; color: var(--ink-300); margin-top: 8px; } .about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 32px; } .about-feature { background: var(--paper-50); border: 1px solid var(--ink-100); border-radius: 14px; padding: 18px 20px; } .about-feature-icon { font-size: 22px; margin-bottom: 8px; } .about-feature-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; } .about-feature-text { font-size: 12.5px; line-height: 1.6; color: var(--ink-500); } .about-contact { background: var(--paper-50); border: 1px solid var(--ink-100); border-radius: 14px; padding: 28px 24px; } .about-contact a { color: var(--forest-600); text-decoration: none; } .about-contact a:hover { text-decoration: underline; } @media (max-width: 640px) { .about-features { grid-template-columns: 1fr; } #view-about.view { background-size: min(400px, 90%) auto; } }