/* * Bogføring & Finans — skoleret stylesheet. * GENERERET af tools/skoler-css.js ud fra assets/app-raw.css. Ret ikke her. * Alle selektorer er skolet til #ziggo-regn, så appen ikke påvirker resten af siden. */ #ziggo-regn { /* Baggrunden bag en fuldskaermsflade. Findes i BEGGE temaer — en variabel, der kun findes i det ene, arver det andets vaerdi. */ --overlay-bag: rgba(15, 23, 42, 0.72); --primary: #0e7490; --primary-hover: #0b5b71; --primary-light: #ecfeff; --background: #f4f6f5; --surface: #ffffff; --border: #dde4e2; --text: #12201d; --text-secondary: #5b6d68; --success: #16a34a; --danger: #dc2626; --sticky-bg: #ecfeff; --sticky-border: #a5f3fc; --moms-color: #7c3aed; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(18, 32, 29, 0.05); --shadow-md: 0 4px 14px rgba(18, 32, 29, 0.07); --shadow-lg: 0 16px 36px rgba(18, 32, 29, 0.12); --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --moms-hover: #6d28d9; /* ---- Migreret fra hardkodede farver (se tools/migrer-farver.js) ---- HVER af disse SKAL også findes i det mørke tema nedenfor. En variabel, der kun findes i det ene tema, arver den anden temas værdi og bliver usynlig (erfaringsregel 6b.3). */ /* Tekst PÅ en farvet flade. */ --paa-farve: #ffffff; /* Neutrale flader og tekst */ --felt-bg: #ffffff; --flade-svag: #f8fafc; --flade-deaktiveret: #f1f5f9; --raekke-hover: #fafbfd; --flade-hover: #e2e8f0; --kant-svag: #cbd5e1; --tekst-daempet: #64748b; --tekst-kraftig: #334155; --skifer: #475569; /* Grøn — moms og SKAT */ --groen-flade: #f0fdf4; --groen-flade-2: #dcfce7; --groen-flade-3: #d1fae5; --groen-flade-4: #ecfdf5; --groen-kant: #bbf7d0; --groen-kant-2: #a7f3d0; --groen-lys: #86efac; --groen-tekst: #15803d; --groen-tekst-2: #14532d; --groen-dyb: #166534; --groen-dyb-2: #065f46; /* Ravgul — debitorer og likviditet */ --rav-flade: #fffbeb; --rav-flade-2: #fef3c7; --rav-kant: #fde68a; --rav-lys: #fcd34d; --rav-lys-2: #fbbf24; --rav: #f59e0b; --rav-dyb: #d97706; --rav-tekst: #b45309; --rav-tekst-2: #92400e; /* Rød — udgifter og farlige handlinger */ --roed-flade: #fee2e2; --roed-flade-2: #fef2f2; --roed-lys: #fca5a5; --roed: #ef4444; --roed-dyb: #b91c1c; --roed-tekst: #991b1b; /* Indigo — betalingsregistreringer */ --indigo-flade: #e0e7ff; --indigo-lys: #a5b4fc; --indigo-tekst: #3730a3; --cyan-flade: #cffafe; /* Flader, der kun bruges af det mørke tema. De skal alligevel have en lys værdi, se reglen ovenfor. */ --moerk-flade: #1d2a2e; --moerk-flade-2: #1a2529; --moerk-flade-3: #24343a; /* Systemlog-ikonet. ENS I BEGGE TEMAER med vilje: det er et driftssignal, ikke en del af udseendet, og det skal kunne ses lige tydeligt, uanset hvilket tema brugeren har valgt. Reglen om, at farver kun må stå i variabler, gælder stadig — derfor står de her og ikke i selve reglen. */ --syslog-ikon-flade: #1f2430; --syslog-ikon-kant: #3c4454; --syslog-ikon-tekst: #f7f8fa; --syslog-ikon-daempet: #9aa1ae; --syslog-ikon-prik: #ff6b6b; --moerk-daempet: #7c8b8f; } #ziggo-regn[data-theme="dark"] { --overlay-bag: rgba(2, 6, 23, 0.8); --primary: #2dd4bf; --primary-hover: #14b8a6; --primary-light: #1b3b3b; --background: #10171a; --surface: #182226; --border: #2b3a3f; --text: #fafcfc; --text-secondary: #c3d0d3; --success: #4ade80; --danger: #f87171; --sticky-bg: #1b3738; --sticky-border: #1f605c; --moms-color: #c4b5fd; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55); --moms-hover: #a78bfa; /* ---- Migreret, mørke værdier ---- Værdierne er valgt hver for sig, ikke vendt om. Et mørkt tema er ikke "det samme, bare omvendt" (erfaringsregel 6b.4). */ /* VIGTIGT: i lyst tema er --primary en mørk teal, og hvid tekst ovenpå er rigtig. I mørkt tema er --primary en LYS teal, og hvid tekst på den er ulæselig. Derfor mørk tekst her. */ --paa-farve: #04211f; --felt-bg: #131c20; --flade-svag: #141e22; --flade-deaktiveret: #1a2429; --raekke-hover: #1a2529; --flade-hover: #24343a; --kant-svag: #2b3a3f; /* Dæmpet tekst må IKKE ende som samme værdi som den almindelige — så forsvinder hierarkiet. Men den skal stadig kunne læses på næsten sort. */ --tekst-daempet: #9fb0b4; --tekst-kraftig: #e6eef0; --skifer: #3b4a52; --groen-flade: #1d352f; --groen-flade-2: #204034; --groen-flade-3: #204034; --groen-flade-4: #1e3931; --groen-kant: #2a6446; --groen-kant-2: #2c6d4a; --groen-lys: #86efac; --groen-tekst: #86efac; --groen-tekst-2: #a7f3d0; --groen-dyb: #166534; --groen-dyb-2: #4ade80; --rav-flade: #2f3226; --rav-flade-2: #3c3b26; --rav-kant: #675925; --rav-lys: #fcd34d; --rav-lys-2: #fbbf24; --rav: #f59e0b; --rav-dyb: #d97706; --rav-tekst: #fcd34d; --rav-tekst-2: #fbbf24; --roed-flade: #332b2f; --roed-flade-2: #2e2a2e; --roed-lys: #fca5a5; --roed: #ef4444; --roed-dyb: #b91c1c; --roed-tekst: #fca5a5; --indigo-flade: #2c3644; --indigo-lys: #a5b4fc; --indigo-tekst: #a5b4fc; --cyan-flade: #1b3e3e; --moerk-flade: #1d2a2e; --moerk-flade-2: #1a2529; --moerk-flade-3: #24343a; /* Systemlog-ikonet. ENS I BEGGE TEMAER med vilje: det er et driftssignal, ikke en del af udseendet, og det skal kunne ses lige tydeligt, uanset hvilket tema brugeren har valgt. Reglen om, at farver kun må stå i variabler, gælder stadig — derfor står de her og ikke i selve reglen. */ --syslog-ikon-flade: #1f2430; --syslog-ikon-kant: #3c4454; --syslog-ikon-tekst: #f7f8fa; --syslog-ikon-daempet: #9aa1ae; --syslog-ikon-prik: #ff6b6b; --moerk-daempet: #7c8b8f; } #ziggo-regn[data-theme="dark"] { background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.08), transparent 45%), radial-gradient(circle at 100% 12%, rgba(196, 181, 253, 0.07), transparent 40%); } #ziggo-regn[data-theme="dark"] input::placeholder, #ziggo-regn[data-theme="dark"] textarea::placeholder { color: var(--moerk-daempet); opacity: 1; } #ziggo-regn[data-theme="dark"] input, #ziggo-regn[data-theme="dark"] select, #ziggo-regn[data-theme="dark"] .stamdata-group input, #ziggo-regn[data-theme="dark"] .stamdata-group select, #ziggo-regn[data-theme="dark"] .radio-btn label, #ziggo-regn[data-theme="dark"] .periode-bar select, #ziggo-regn[data-theme="dark"] .skat-periode-vaelger select, #ziggo-regn[data-theme="dark"] .tabel-stoerrelse-bar select, #ziggo-regn[data-theme="dark"] .konto-soegefelt, #ziggo-regn[data-theme="dark"] .konto-vaelger-knap { background-color: var(--surface); color: var(--text); border-color: var(--border); } #ziggo-regn[data-theme="dark"] .konto-soegefelt:focus { background-color: var(--surface); } #ziggo-regn[data-theme="dark"] .radio-btn input:checked + label.type-indtaegt { background-color: rgba(74, 222, 128, 0.14); } #ziggo-regn[data-theme="dark"] .radio-btn input:checked + label.type-udgift { background-color: rgba(248, 113, 113, 0.14); } #ziggo-regn[data-theme="dark"] .moms-checkbox-container, #ziggo-regn[data-theme="dark"] .filter-bar, #ziggo-regn[data-theme="dark"] .tabel-stoerrelse-bar, #ziggo-regn[data-theme="dark"] th, #ziggo-regn[data-theme="dark"] .skat-row, #ziggo-regn[data-theme="dark"] .rapport-table tr.rubrik-subtotal td, #ziggo-regn[data-theme="dark"] .rapport-threshold-badge.under, #ziggo-regn[data-theme="dark"] .skat-periode-note, #ziggo-regn[data-theme="dark"] .rapport-note, #ziggo-regn[data-theme="dark"] .btn-secondary, #ziggo-regn[data-theme="dark"] .konto-nr-tag { background-color: var(--moerk-flade); } #ziggo-regn[data-theme="dark"] tr:hover td { background-color: var(--moerk-flade-2); } #ziggo-regn[data-theme="dark"] .btn-secondary:hover { background-color: var(--moerk-flade-3); color: var(--text); } #ziggo-regn[data-theme="dark"] .skat-box-panel { background: var(--surface); } #ziggo-regn[data-theme="dark"] .skat-header h3 { color: var(--groen-lys); } #ziggo-regn[data-theme="dark"] .skat-period-badge { background-color: rgba(74, 222, 128, 0.16); color: var(--groen-lys); } #ziggo-regn[data-theme="dark"] .skat-row.skat-total-row { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.3); } #ziggo-regn[data-theme="dark"] .badge.indtaegt { background-color: rgba(74, 222, 128, 0.16); color: var(--groen-lys); } #ziggo-regn[data-theme="dark"] .badge.udgift { background-color: rgba(248, 113, 113, 0.16); color: var(--roed-lys); } #ziggo-regn[data-theme="dark"] .badge.betaling { background-color: rgba(129, 140, 248, 0.18); color: var(--indigo-lys); } #ziggo-regn[data-theme="dark"] tr.betaling-row td { background: rgba(255, 255, 255, 0.02); } #ziggo-regn[data-theme="dark"] .btn-delete:hover { background-color: rgba(248, 113, 113, 0.16); } #ziggo-regn[data-theme="dark"] .btn-success-outline { border-color: rgba(74, 222, 128, 0.4); } #ziggo-regn[data-theme="dark"] .btn-success-outline:hover { background: rgba(74, 222, 128, 0.12); } #ziggo-regn[data-theme="dark"] .btn-danger-outline:hover { background: var(--roed); } #ziggo-regn[data-theme="dark"] .rapport-table tr.rubrik-final.negative td { background: rgba(248, 113, 113, 0.14); } #ziggo-regn[data-theme="dark"] .skat-periode-vaelger select, #ziggo-regn[data-theme="dark"] .skat-periode-nav { border-color: rgba(74, 222, 128, 0.35); color: var(--groen-lys); } #ziggo-regn[data-theme="dark"] .skat-periode-nav { background: rgba(74, 222, 128, 0.1); } #ziggo-regn[data-theme="dark"] .skat-periode-nav:hover { background: rgba(74, 222, 128, 0.2); } #ziggo-regn[data-theme="dark"] .empty-state, #ziggo-regn[data-theme="dark"] .stamdata-group input, #ziggo-regn[data-theme="dark"] .stamdata-group select { color: var(--text); } #ziggo-regn, #ziggo-regn * { box-sizing: border-box; margin: 0; padding: 0; } #ziggo-regn { -webkit-text-size-adjust: 100%; } #ziggo-regn { font-family: var(--font-body); background-color: var(--background); background-image: radial-gradient(circle at 12% 0%, rgba(14, 116, 144, 0.06), transparent 45%), radial-gradient(circle at 100% 12%, rgba(124, 58, 237, 0.05), transparent 40%); background-attachment: fixed; color: var(--text); line-height: 1.5; padding: 28px 20px 60px; font-feature-settings: "tnum" 1, "cv05" 1; } #ziggo-regn::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--moms-color)); z-index: 100; } /* Bredden er 90 % af vinduet, ikke et fast loft. Se app-tilpasning.css for mobil og for venstrenavigationens plads. */ #ziggo-regn .container { width: 90%; max-width: none; margin: 0 auto; } /* ---- Stamoplysningernes infolinje ---- Én linje, der bryder pænt på en telefon. Den er tekst og ikke felter: kan man klikke i den, kan man også komme til at ændre regnskabsåret med en fejlramt tast. */ #ziggo-regn .stamdata-linje { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 10px; padding: 9px 14px; background: var(--flade-svag); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .stamdata-linje-firma { color: var(--text); font-weight: 700; font-size: calc(15px * var(--skrift-faktor, 1)); } #ziggo-regn .stamdata-linje-punkt { white-space: nowrap; } #ziggo-regn .stamdata-linje-punkt[hidden] { display: none; } #ziggo-regn .stamdata-linje-punkt::before { content: "·"; margin-right: 12px; color: var(--kant-svag); } #ziggo-regn .stamdata-advarsel { margin: 0 0 14px; padding: 10px 12px; background: var(--rav-flade); border: 1px solid var(--rav-kant); border-radius: var(--radius-sm); font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .stamdata-note { margin-top: 12px; color: var(--tekst-daempet); font-size: calc(12px * var(--skrift-faktor, 1)); } /* Kreditnota-vinduet (1.01). Linjevalget skal kunne læses som en regning: beskrivelse til venstre, beløb højrestillet, og en allerede krediteret linje tydeligt ude af spil. */ #ziggo-regn .kreditnota-linje { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--felt-bg); } #ziggo-regn .kreditnota-linje input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; } #ziggo-regn .kreditnota-linje .kn-tekst { flex: 1 1 auto; font-size: calc(13px * var(--skrift-faktor, 1)); line-height: 1.5; } #ziggo-regn .kreditnota-linje .kn-detalje { color: var(--tekst-daempet); font-size: calc(12px * var(--skrift-faktor, 1)); } #ziggo-regn .kreditnota-linje .kn-beloeb { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .kreditnota-linje.kn-brugt { background: var(--flade-deaktiveret); border-style: dashed; } #ziggo-regn .kreditnota-linje.kn-brugt .kn-tekst, #ziggo-regn .kreditnota-linje.kn-brugt .kn-beloeb { color: var(--tekst-daempet); } #ziggo-regn .kreditnota-total { margin-top: 12px; padding: 11px 12px; background: var(--flade-svag); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: calc(14px * var(--skrift-faktor, 1)); } #ziggo-regn .kreditnota-total strong { font-size: calc(16px * var(--skrift-faktor, 1)); } #ziggo-regn .kreditnota-total .kn-tom { color: var(--tekst-daempet); } #ziggo-regn h1, #ziggo-regn h2, #ziggo-regn h3, #ziggo-regn .actions-panel-title, #ziggo-regn .dashboard-section-title, #ziggo-regn .card-value, #ziggo-regn .card-title, #ziggo-regn .skat-header h3, #ziggo-regn .form-panel h2, #ziggo-regn .table-header h2, #ziggo-regn .skat-box-number, #ziggo-regn .skat-box-value, #ziggo-regn button, #ziggo-regn .badge, #ziggo-regn .bilag-type-badge, #ziggo-regn .rapport-threshold-badge, #ziggo-regn .skat-period-badge { font-family: var(--font-display); } #ziggo-regn header { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; border-bottom: 1px solid var(--border); padding-bottom: 20px; } #ziggo-regn .header-top { display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; gap: 15px; } #ziggo-regn .header-title h1 { font-size: calc(26px * var(--skrift-faktor, 1)); font-weight: 800; letter-spacing: -0.02em; color: var(--text); display: flex; align-items: center; gap: 10px; } #ziggo-regn .header-title h1 span { color: var(--primary); } #ziggo-regn .header-title p { font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); margin-top: 4px; } #ziggo-regn .theme-toggle-btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: calc(13px * var(--skrift-faktor, 1)); cursor: pointer; transition: all 0.15s ease; box-shadow: var(--shadow-sm); } #ziggo-regn .theme-toggle-btn:hover { border-color: var(--primary); color: var(--primary); } #ziggo-regn .theme-toggle-btn span:first-child { font-size: calc(15px * var(--skrift-faktor, 1)); } /* * Navigationen er FASTGJORT til vinduet og ligger derfor uden for * appens egen baggrund — den svæver over temaets. Hvad der er bagved, * kan vi ikke vide: på et mørkt Divi-tema forsvandt den helt. * * Derfor har den sin egen kasse med baggrund, kant og skygge, så den * har en synlig afgrænsning uanset hvad der ligger under. Kanten er * primærfarven og ikke --border: primærfarven har kulør i begge temaer * og skiller sig ud fra både lyst og mørkt, hvor en grå kant ville * forsvinde i det ene. */ #ziggo-regn .side-nav { position: fixed; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 90; padding: 8px; border-radius: 999px; background: var(--surface); border: 2px solid var(--primary); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); } #ziggo-regn .side-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); font-size: calc(18px * var(--skrift-faktor, 1)); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; padding: 0; } #ziggo-regn .side-nav button:hover { border-color: var(--primary); background: var(--primary-light); transform: scale(1.08); } #ziggo-regn .side-nav button:active { transform: scale(0.96); } /* Genvejen til ⚙ System står øverst i hver ikonbjælke, med lidt ekstra luft ned til resten — den hører ikke til sidens eget indhold, ligesom resten af ikonerne gør. */ #ziggo-regn .nav-aabn-system { margin-bottom: 6px; } /* Venstrenavigationen er FASTGJORT i siden og ligger altså uden for containeren. Med en container på 90 % er margenen 5 % af vinduet — knapperne fylder ca. 80 px, så der skal være mindst 1600 px, før der er plads. Ved 1420 px ville de lægge sig hen over indholdet. Grænsen er MÅLT, ikke skønnet: se prøve 24 i tools/test-browser.js. */ @media (max-width: 1600px) { #ziggo-regn .side-nav { display: none; } } #ziggo-regn .stamdata-panel { display: flex; flex-direction: column; gap: 12px; background: var(--surface); padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-sm); width: 100%; } #ziggo-regn .stamdata-group-full input { font-size: calc(15px * var(--skrift-faktor, 1)); font-weight: 600; } #ziggo-regn .stamdata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } #ziggo-regn .stamdata-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #ziggo-regn .stamdata-group label { font-size: calc(11px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } #ziggo-regn .stamdata-group input, #ziggo-regn .stamdata-group select { padding: 8px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); border-radius: var(--radius-sm); border: 1px solid var(--border); width: 100%; background-color: var(--felt-bg); } #ziggo-regn .dashboard-section-title { font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; letter-spacing: 0.06em; } #ziggo-regn .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; } #ziggo-regn .card { background: var(--surface); padding: 16px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); position: relative; overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; } @media (hover: hover) { #ziggo-regn .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } } #ziggo-regn .card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; } #ziggo-regn .card.income::before { background-color: var(--success); } #ziggo-regn .card.expense::before { background-color: var(--danger); } #ziggo-regn .card.balance::before { background: linear-gradient(180deg, var(--primary), var(--moms-color)); } #ziggo-regn .card.moms-card::before { background-color: var(--moms-color); } #ziggo-regn .card.liquidity::before { background-color: var(--rav); } #ziggo-regn .card-title { font-size: calc(11px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } #ziggo-regn .card-title-hint { text-transform: none; font-weight: 500; letter-spacing: 0; opacity: 0.75; } #ziggo-regn .card-value.liquidity-val { color: var(--rav-tekst); } #ziggo-regn[data-theme="dark"] .card-value.liquidity-val { color: var(--rav-lys-2); } #ziggo-regn .card-value { font-size: calc(21px * var(--skrift-faktor, 1)); font-weight: 800; letter-spacing: -0.01em; } #ziggo-regn .card-value.income-val { color: var(--success); } #ziggo-regn .card-value.expense-val { color: var(--danger); } #ziggo-regn .card-value.moms-val { color: var(--moms-color); } #ziggo-regn .skat-box-panel { background: var(--felt-bg); border: 2px solid var(--success); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 28px; box-shadow: var(--shadow-md); } #ziggo-regn .skat-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--groen-flade); padding-bottom: 12px; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; } /* * !! GENVEJENE TIL "NY LEVERANDØR"/"NY KUNDE" SKAL SES (udv-2.13) !! * Stod først med .skat-header + font-size:14px — en lille, grå * tekstlinje, der druknede mellem de store, farvede panel- * overskrifter. Brugeren kunne ikke finde den. Nu et tydeligt, * knap-agtigt bånd med egen baggrund og kant — noget, øjet * standser ved, ikke noget, det glider forbi. */ #ziggo-regn .hurtig-modpart-toggle { display: flex; align-items: center; justify-content: space-between; background: var(--primary-light); border: 1px solid var(--primary); border-radius: var(--radius-md); padding: 12px 16px; margin: 16px 0; cursor: pointer; gap: 10px; } #ziggo-regn .hurtig-modpart-toggle h3 { font-size: calc(15px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--primary); margin: 0; } /* * !! .hurtig-modpart-toggle.collapsible-toggle:hover, IKKE HVER * KLASSE FOR SIG (udv-2.14) !! * Elementet bærer BEGGE klasser. En generel .collapsible-toggle: * hover-regel findes længere nede i filen (samme specificitet, * men erklæret senere) og vandt derfor over den ELLERS tiltænkte * mørke baggrund — resultatet var hvid tekst på den generelle * regels lyse baggrund. Et sammensat vælgernavn med begge klasser * har højere specificitet og vinder uanset rækkefølge i filen. */ #ziggo-regn .hurtig-modpart-toggle.collapsible-toggle:hover { background: var(--primary); } #ziggo-regn .hurtig-modpart-toggle.collapsible-toggle:hover h3 { color: var(--paa-farve); } #ziggo-regn .hurtig-modpart-toggle.collapsible-toggle:hover .collapse-chevron { color: var(--paa-farve); background: transparent; } /* * !! TYDELIG SKILLELINJE MELLEM "OPRET" OG "LISTE" (udv-2.17) !! * Finans har to helt separate paneler (.form-panel / .table-panel) * med hver sin ramme — derfor tydeligt, hvor man er. Kreditor og * Fakturering bygger begge dele ind i ÉT panel, uden noget, der * markerer overgangen. Denne overskrift er den letteste rettelse, * der løser det uden at bygge panelerne om: en tydelig, farvet * linje med et ikon og et ord, der siger, hvad man kigger på. * * To varianter: "-opret" (over selve formularen) bruger en * anden farve end listen nedenunder, så de to ikke bare ligner * to ens overskrifter i træk. */ #ziggo-regn .liste-sektion-overskrift { display: flex; align-items: center; gap: 8px; font-size: calc(15px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 8px; margin: 22px 0 14px; } #ziggo-regn .liste-sektion-overskrift-opret { color: var(--groen-tekst-2); border-bottom-color: var(--groen-flade); margin-top: 4px; } #ziggo-regn .liste-sektion-ikon { font-size: calc(16px * var(--skrift-faktor, 1)); } #ziggo-regn .skat-header h3 { font-size: calc(16px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--groen-tekst-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ziggo-regn .skat-period-badge { background-color: var(--groen-flade-2); color: var(--groen-tekst); padding: 4px 10px; border-radius: 20px; font-size: calc(11px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; white-space: nowrap; } /* Når SKAT- eller rapport-panelet er lukket, skal det se ud som en almindelig tekstlinje - ligesom "Finansielt Overblik" og de andre sektioner - i stedet for en stor farvet boks. */ #ziggo-regn .skat-box-panel.panel-collapsed { background: transparent; border: none; box-shadow: none; padding: 0; margin-bottom: 10px; } #ziggo-regn .skat-box-panel.panel-collapsed .skat-header { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } #ziggo-regn .skat-box-panel.panel-collapsed .skat-header h3 { font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } #ziggo-regn .skat-box-panel.panel-collapsed .skat-period-badge, #ziggo-regn .skat-box-panel.panel-collapsed .rapport-threshold-badge, #ziggo-regn .skat-box-panel.panel-collapsed .rapport-icon { display: none; } #ziggo-regn .skat-grid { display: flex; flex-direction: column; gap: 12px; } #ziggo-regn .skat-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--flade-svag); border-radius: var(--radius-sm); border: 1px solid var(--border); transition: all 0.15s ease; flex-wrap: wrap; gap: 8px; } #ziggo-regn .skat-row.skat-total-row { background: var(--groen-flade); border-color: var(--groen-kant); } #ziggo-regn .skat-field-info { display: flex; flex-direction: column; } #ziggo-regn .skat-box-number { font-weight: 700; font-size: calc(14px * var(--skrift-faktor, 1)); color: var(--text); } #ziggo-regn .skat-box-desc { font-size: calc(11px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .skat-box-value { font-size: calc(16px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text); } #ziggo-regn .main-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; } @media (max-width: 1024px) { #ziggo-regn .main-grid { grid-template-columns: 1fr; } } #ziggo-regn .form-panel { background: var(--surface); padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } #ziggo-regn .form-panel h2 { font-size: calc(17px * var(--skrift-faktor, 1)); font-weight: 700; margin-bottom: 18px; color: var(--text); } #ziggo-regn .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } #ziggo-regn .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; position: relative; } #ziggo-regn .form-group.no-margin { margin-bottom: 0; } #ziggo-regn label { font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; color: var(--text-secondary); } #ziggo-regn input, #ziggo-regn select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: calc(14px * var(--skrift-faktor, 1)); outline: none; transition: all 0.15s ease; background-color: var(--felt-bg); color: var(--text); font-family: var(--font-body); } #ziggo-regn input:focus, #ziggo-regn select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12); } #ziggo-regn input.is-sticky { background-color: var(--sticky-bg) !important; border-color: var(--sticky-border) !important; font-weight: 500; } #ziggo-regn .sticky-helper { font-size: calc(11px * var(--skrift-faktor, 1)); color: var(--primary); margin-top: 2px; display: none; } #ziggo-regn input.is-sticky + .sticky-helper { display: block; } #ziggo-regn .radio-group { display: flex; gap: 10px; margin-bottom: 16px; } #ziggo-regn .radio-btn { flex: 1; text-align: center; } #ziggo-regn .radio-btn input { display: none; } #ziggo-regn .radio-btn label { display: block; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; font-size: calc(14px * var(--skrift-faktor, 1)); transition: all 0.15s ease; background: var(--felt-bg); font-family: var(--font-display); } #ziggo-regn .radio-btn input:checked + label.type-indtaegt { background-color: var(--groen-flade-4); border-color: var(--success); color: var(--success); } #ziggo-regn .radio-btn input:checked + label.type-udgift { background-color: var(--roed-flade-2); border-color: var(--danger); color: var(--danger); } #ziggo-regn .moms-checkbox-container { display: flex; align-items: center; gap: 8px; background-color: var(--flade-svag); padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; user-select: none; min-height: 42px; } #ziggo-regn .moms-checkbox-container input { width: auto; cursor: pointer; } #ziggo-regn .moms-checkbox-container span { font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; color: var(--text); } #ziggo-regn button.btn-submit { width: 100%; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: white; border: none; padding: 13px; border-radius: var(--radius-sm); font-weight: 700; font-size: calc(14px * var(--skrift-faktor, 1)); cursor: pointer; transition: filter 0.15s, transform 0.1s; margin-top: 10px; min-height: 44px; } #ziggo-regn button.btn-submit:hover { filter: brightness(1.08); } #ziggo-regn button.btn-submit:active { transform: translateY(1px); } #ziggo-regn .table-panel { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; } #ziggo-regn .table-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } #ziggo-regn .table-header h2 { font-size: calc(17px * var(--skrift-faktor, 1)); font-weight: 700; } #ziggo-regn .table-actions { display: flex; gap: 8px; flex-wrap: wrap; } #ziggo-regn .actions-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 28px; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* * Striben med åbn/luk alle. Den ligger uden for panelerne, så den ikke * kan lukkes væk af det, den styrer. */ /* * !! space-between, IKKE flex-end (udv-2.10) !! * ⚙ System (den nye [data-system-toggle], indsat som første barn) * og fold alle skal stå på SAMME linje, hver i sin ende — ikke * stables under hinanden, som de gjorde, da System stod for sig * selv i en helt egen række ovenover. */ #ziggo-regn .sektionsstyring { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } /* * Handlingspanelet er nu foldbart som de øvrige sektioner. Panelet var * før én flex-række med titel og knapper side om side; nu ligger hovedet * øverst og indholdet under, så der er noget at folde sammen. */ #ziggo-regn .actions-panel { flex-direction: column; align-items: stretch; } #ziggo-regn .actions-panel-hoved { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; } #ziggo-regn .actions-panel-hoved .collapse-chevron { flex: none; } #ziggo-regn .actions-panel-title { font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.06em; } #ziggo-regn .filter-bar { background-color: var(--flade-svag); border-bottom: 1px solid var(--border); padding: 12px 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } #ziggo-regn .periode-bar { background-color: var(--primary-light); border-bottom: 1px solid var(--sticky-border); padding: 12px 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } #ziggo-regn .periode-bar select { padding: 7px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--sticky-border); width: auto; background-color: var(--felt-bg); color: var(--primary); } #ziggo-regn .periode-bar select:disabled { color: var(--text-secondary); background-color: var(--flade-deaktiveret); cursor: not-allowed; } #ziggo-regn .filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #ziggo-regn .filter-group label { font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text-secondary); white-space: nowrap; } #ziggo-regn .filter-group input { padding: 7px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); border-radius: var(--radius-sm); border: 1px solid var(--border); width: auto; } #ziggo-regn .filter-group input[type="text"] { width: 180px; } #ziggo-regn .btn-secondary, #ziggo-regn .btn-success-outline, #ziggo-regn .btn-danger-outline, #ziggo-regn .btn-print, #ziggo-regn .btn-pdf, #ziggo-regn .btn-import, #ziggo-regn .btn-export, #ziggo-regn .btn-toggle-view { font-family: var(--font-display); font-weight: 700; font-size: calc(13px * var(--skrift-faktor, 1)); padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; min-height: 38px; border: none; } #ziggo-regn .btn-secondary { background: var(--flade-deaktiveret); color: var(--text-secondary); border: 1px solid var(--border); } #ziggo-regn .btn-secondary:hover { background: var(--flade-hover); color: var(--text); } #ziggo-regn .btn-success-outline { background: transparent; color: var(--success); border: 1px solid var(--groen-kant-2); } #ziggo-regn .btn-success-outline:hover { background: var(--groen-flade-4); border-color: var(--success); } /* Handlinger & Eksport - massive baggrundsfarver, så hver funktionstype er tydelig at skelne */ /* Udskriv (print) - primær farve */ #ziggo-regn .btn-print { background: var(--primary); color: var(--paa-farve); } #ziggo-regn .btn-print:hover { background: var(--primary-hover); } /* Gem som PDF - violet, adskilt fra print */ #ziggo-regn .btn-pdf { background: var(--moms-color); color: var(--paa-farve); } #ziggo-regn .btn-pdf:hover { background: var(--moms-hover); } /* CSV/Backup - neutral skifer, "almindelig" dataeksport */ #ziggo-regn .btn-export { background: var(--skifer); color: var(--paa-farve); } #ziggo-regn .btn-export:hover { background: var(--tekst-kraftig); } /* Importer - ravgul/orange, bevidst IKKE rød, så den ikke forveksles med Nulstil */ #ziggo-regn .btn-import { background: var(--rav-dyb); color: var(--paa-farve); } #ziggo-regn .btn-import:hover { background: var(--rav-tekst); } /* Nulstil alt - rød, tydeligt markeret som en destruktiv handling */ #ziggo-regn .btn-danger-outline { background: var(--danger); color: var(--paa-farve); } #ziggo-regn .btn-danger-outline:hover { background: var(--roed-dyb); } /* Fold alle sektioner ud/sammen - egen, neutral stil så den ikke forveksles med eksport-handlingerne */ #ziggo-regn .btn-toggle-view { background: var(--felt-bg); color: var(--primary); border: 1px solid var(--sticky-border) !important; } #ziggo-regn .btn-toggle-view:hover { background: var(--primary-light); } #ziggo-regn[data-theme="dark"] .btn-toggle-view { background: var(--surface); } #ziggo-regn .table-wrapper { overflow: auto; -webkit-overflow-scrolling: touch; resize: vertical; min-height: 160px; height: 500px; border-bottom: 1px solid var(--border); } #ziggo-regn .table-wrapper.stoerrelse-alle { resize: none; height: auto !important; max-height: none; overflow: visible; } #ziggo-regn .table-wrapper thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--border); } #ziggo-regn .tabel-stoerrelse-bar { display: flex; align-items: center; gap: 10px; padding: 10px 22px; background: var(--flade-svag); border-bottom: 1px solid var(--border); flex-wrap: wrap; } #ziggo-regn .tabel-stoerrelse-bar label { font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text-secondary); white-space: nowrap; } #ziggo-regn .tabel-stoerrelse-bar select { padding: 6px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--border); width: auto; background: var(--felt-bg); } #ziggo-regn .tabel-stoerrelse-hint { font-size: calc(11px * var(--skrift-faktor, 1)); color: var(--text-secondary); font-style: italic; } #ziggo-regn .kassekladde-moms-hint { font-size: calc(11.5px * var(--skrift-faktor, 1)); color: var(--text-secondary); background: var(--flade-svag); border-bottom: 1px solid var(--border); padding: 8px 22px; line-height: 1.5; } #ziggo-regn .kassekladde-moms-hint strong { color: var(--text); } #ziggo-regn[data-theme="dark"] .kassekladde-moms-hint { background: var(--moerk-flade); } #ziggo-regn table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--skrift-faktor, 1)); } #ziggo-regn th, #ziggo-regn td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--border); } #ziggo-regn th { background-color: var(--flade-svag); font-weight: 700; color: var(--text-secondary); font-size: calc(11.5px * var(--skrift-faktor, 1)); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-display); } #ziggo-regn tr:last-child td { border-bottom: none; } #ziggo-regn tr:hover td { background-color: var(--raekke-hover); } #ziggo-regn .badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: calc(11px * var(--skrift-faktor, 1)); font-weight: 700; } #ziggo-regn .badge.indtaegt { background-color: var(--groen-flade-3); color: var(--groen-dyb-2); } #ziggo-regn .badge.udgift { background-color: var(--roed-flade); color: var(--roed-tekst); } #ziggo-regn .badge.betaling { background-color: var(--indigo-flade); color: var(--indigo-tekst); } #ziggo-regn tr.betaling-row td { color: var(--text-secondary); font-style: italic; background: rgba(0, 0, 0, 0.015); } #ziggo-regn tr.betaling-row:hover td { background: rgba(0, 0, 0, 0.03); } #ziggo-regn .amount-cell { font-weight: 700; text-align: right; } #ziggo-regn .amount-cell.positive { color: var(--success); } #ziggo-regn .amount-cell.negative { color: var(--danger); } #ziggo-regn .btn-delete { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); transition: all 0.15s; min-width: 32px; min-height: 32px; } /* Modposteringsknappen. Neutral og ikke rod: en modpostering er ikke en destruktiv handling — der fjernes intet, der TILFOEJES en postering, som ophaever den foerste. En rod knap ville faa brugeren til at tro, at noget forsvinder. */ #ziggo-regn .btn-modpost { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); transition: all 0.15s; min-width: 32px; min-height: 32px; font-size: calc(15px * var(--skrift-faktor, 1)); } #ziggo-regn .btn-modpost:hover { color: var(--primary); background-color: var(--flade-svag); } #ziggo-regn .actions-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; white-space: nowrap; } #ziggo-regn .status-tag { font-family: var(--font-display); font-size: calc(11px * var(--skrift-faktor, 1)); font-weight: 700; padding: 5px 10px; border-radius: 20px; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; white-space: nowrap; } #ziggo-regn .status-tag.status-paid { background: var(--groen-flade-2); color: var(--groen-tekst); border-color: var(--groen-kant); } #ziggo-regn .status-tag.status-paid:hover { background: var(--groen-kant); } #ziggo-regn .status-tag.status-unpaid { background: var(--rav-flade-2); color: var(--rav-tekst-2); border-color: var(--rav-kant); } #ziggo-regn .status-tag.status-unpaid:hover { background: var(--rav-kant); } /* * tr. STÅR HER MED VILJE. * * `.rapport-table td { padding: 8px 6px }` står længere nede i filen og * har PRÆCIS samme vægt som `.betaling-formular-row td`. Ved lige vægt * vinder den sidste — så i fakturaoversigten, der bruger * .rapport-table, fik betalingsformularen tabelcellens smalle * polstring, mens den i kassekladden fik sin egen. Samme klasse, to * udseender, afhængigt af hvilken tabel den stod i. * * tr. gør reglen ét trin tungere, og rækken ER altid et tr. */ #ziggo-regn tr.betaling-formular-row td { background: var(--rav-flade); padding: 12px 20px; } #ziggo-regn .betaling-inline-formular { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .bulk-betaling-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--rav-tekst-2); background: var(--rav-flade-2); border: 1px solid var(--rav-kant); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; } #ziggo-regn .bulk-betaling-bar input, #ziggo-regn .bulk-betaling-bar select { width: auto; padding: 6px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .bulk-betaling-bar #bulkBetalingAntal { font-weight: 700; } #ziggo-regn .debitor-table td.debitor-checkbox, #ziggo-regn .debitor-table th.debitor-checkbox { width: 28px; text-align: center; } #ziggo-regn .debitor-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } #ziggo-regn[data-theme="dark"] .bulk-betaling-bar { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: var(--rav-lys); } #ziggo-regn .moms-afregning-formular { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--groen-kant); } #ziggo-regn .moms-afregning-formular input, #ziggo-regn .moms-afregning-formular select { width: auto; padding: 6px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .moms-afregning-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 10px 14px; background: var(--groen-flade); border: 1px solid var(--groen-kant); border-radius: var(--radius-sm); font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--groen-tekst); } #ziggo-regn[data-theme="dark"] .moms-afregning-formular { border-top-color: rgba(74, 222, 128, 0.3); } #ziggo-regn[data-theme="dark"] .moms-afregning-status { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.3); color: var(--groen-lys); } #ziggo-regn .betaling-inline-formular input, #ziggo-regn .betaling-inline-formular select { width: auto; padding: 6px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn[data-theme="dark"] .status-tag.status-paid { background: var(--groen-tekst); color: var(--paa-farve); border-color: var(--groen-tekst); } #ziggo-regn[data-theme="dark"] .status-tag.status-paid:hover { background: var(--groen-dyb); } #ziggo-regn[data-theme="dark"] .status-tag.status-unpaid { background: var(--rav-tekst); color: var(--paa-farve); border-color: var(--rav-tekst); } #ziggo-regn[data-theme="dark"] .status-tag.status-unpaid:hover { background: var(--rav-tekst-2); } #ziggo-regn[data-theme="dark"] .betaling-formular-row td { background: rgba(251, 191, 36, 0.08); } #ziggo-regn .btn-delete:hover { color: var(--danger); background-color: var(--roed-flade); } #ziggo-regn .empty-state { padding: 40px 20px; text-align: center; color: var(--text-secondary); font-style: italic; } #ziggo-regn #importFile { display: none; } #ziggo-regn[data-theme="dark"] .skat-box-panel.rapport-panel, #ziggo-regn[data-theme="dark"] .skat-box-panel.debitor-panel, #ziggo-regn[data-theme="dark"] .skat-box-panel.kontoplan-panel { background: var(--surface); } #ziggo-regn .skat-box-panel.rapport-panel { border-color: var(--primary); background: var(--felt-bg); } #ziggo-regn .skat-box-panel.debitor-panel { border-color: var(--rav); background: var(--felt-bg); } #ziggo-regn .skat-box-panel.debitor-panel.panel-collapsed { background: transparent; } #ziggo-regn .skat-box-panel.kontoplan-panel { border-color: var(--tekst-daempet); background: var(--felt-bg); } #ziggo-regn .skat-box-panel.kontoplan-panel.panel-collapsed { background: transparent; margin-bottom: 26px; } #ziggo-regn .kontoplan-panel .skat-header { border-bottom-color: var(--flade-deaktiveret); } #ziggo-regn .kontoplan-panel .skat-header h3 { color: var(--tekst-kraftig); } #ziggo-regn .kontoplan-panel .skat-period-badge { background-color: var(--flade-deaktiveret); color: var(--tekst-kraftig); } #ziggo-regn .kontoplan-table tr.kontoplan-gruppe td { background: var(--flade-svag); font-weight: 700; font-size: calc(11px * var(--skrift-faktor, 1)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding-top: 14px; } #ziggo-regn .kontoplan-table tr.kontoplan-subtotal td { background: var(--flade-deaktiveret); font-weight: 700; border-top: 1px solid var(--border); } #ziggo-regn[data-theme="dark"] .kontoplan-panel .skat-header h3 { color: var(--kant-svag); } #ziggo-regn[data-theme="dark"] .kontoplan-panel .skat-period-badge { background-color: var(--moerk-flade); color: var(--kant-svag); } #ziggo-regn[data-theme="dark"] .kontoplan-table tr.kontoplan-gruppe td, #ziggo-regn[data-theme="dark"] .kontoplan-table tr.kontoplan-subtotal td { background: var(--moerk-flade); } #ziggo-regn .debitor-panel .skat-header { border-bottom-color: var(--rav-flade); } #ziggo-regn .debitor-panel .skat-header h3 { color: var(--rav-tekst-2); } #ziggo-regn .debitor-panel .skat-period-badge { background-color: var(--rav-flade-2); color: var(--rav-tekst-2); } #ziggo-regn .debitor-panel .skat-row.skat-total-row { background: var(--rav-flade); border-color: var(--rav-kant); } #ziggo-regn .debitor-table td.debitor-alder.overdue { color: var(--danger); font-weight: 700; } #ziggo-regn .debitor-table td.debitor-actions { text-align: right; } #ziggo-regn[data-theme="dark"] .debitor-panel .skat-header h3 { color: var(--rav-lys); } #ziggo-regn[data-theme="dark"] .debitor-panel .skat-period-badge { background-color: rgba(251, 191, 36, 0.16); color: var(--rav-lys); } #ziggo-regn[data-theme="dark"] .debitor-panel .skat-row.skat-total-row { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); } #ziggo-regn .skat-box-panel.rapport-panel.panel-collapsed { background: transparent; } #ziggo-regn .rapport-panel .skat-header { border-bottom-color: var(--primary-light); } #ziggo-regn .rapport-panel .skat-header h3 { color: var(--primary); } #ziggo-regn .rapport-intro { font-size: calc(12.5px * var(--skrift-faktor, 1)); color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6; } #ziggo-regn .rapport-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } #ziggo-regn .rapport-table { width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--skrift-faktor, 1)); margin-bottom: 10px; } #ziggo-regn .scrollable-report-table { max-height: 420px; min-height: 120px; overflow-y: auto; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; -webkit-overflow-scrolling: touch; } #ziggo-regn .scrollable-report-table .rapport-table { margin-bottom: 0; } #ziggo-regn .scrollable-report-table thead th { position: sticky; top: 0; z-index: 2; background: var(--flade-svag); box-shadow: 0 1px 0 var(--border); } #ziggo-regn[data-theme="dark"] .scrollable-report-table thead th { background: var(--moerk-flade); } #ziggo-regn .rapport-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); } #ziggo-regn .rapport-table td.rubrik-nr { color: var(--primary); font-weight: 700; width: 90px; white-space: nowrap; } #ziggo-regn .rapport-table td.rubrik-desc { color: var(--text); } #ziggo-regn .rapport-table td.rubrik-sub { color: var(--text-secondary); font-size: calc(11.5px * var(--skrift-faktor, 1)); display: block; margin-top: 2px; } #ziggo-regn .rapport-table td.rubrik-val { text-align: right; font-weight: 700; white-space: nowrap; width: 130px; } #ziggo-regn .rapport-table tr.rubrik-subtotal td { background: var(--flade-svag); font-weight: 700; } #ziggo-regn .rapport-table tr.rubrik-final td { background: var(--primary-light); font-weight: 800; font-size: calc(14.5px * var(--skrift-faktor, 1)); border-top: 2px solid var(--primary); } #ziggo-regn .rapport-table tr.rubrik-final.negative td { background: var(--roed-flade-2); } #ziggo-regn .rapport-note { font-size: calc(11.5px * var(--skrift-faktor, 1)); color: var(--text-secondary); background: var(--flade-svag); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 6px; line-height: 1.6; } #ziggo-regn .rapport-threshold-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: calc(11px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; margin-left: 8px; } #ziggo-regn .rapport-threshold-badge.under { background: var(--flade-deaktiveret); color: var(--text-secondary); } #ziggo-regn .rapport-threshold-badge.over { background: var(--primary-light); color: var(--primary); } #ziggo-regn .skat-periode-vaelger { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } #ziggo-regn .skat-periode-vaelger select { padding: 7px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--groen-kant); background-color: var(--felt-bg); color: var(--groen-tekst-2); } #ziggo-regn .skat-periode-nav { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--groen-kant); background: var(--groen-flade); color: var(--groen-tekst-2); font-size: calc(16px * var(--skrift-faktor, 1)); font-weight: 700; cursor: pointer; flex-shrink: 0; } #ziggo-regn .skat-periode-nav:hover { background: var(--groen-flade-2); } #ziggo-regn .skat-periode-nav:disabled { opacity: 0.4; cursor: not-allowed; } #ziggo-regn .skat-periode-datorange { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); margin-left: 4px; } #ziggo-regn .skat-periode-note { font-size: calc(11.5px * var(--skrift-faktor, 1)); color: var(--text-secondary); background: var(--flade-svag); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 16px; line-height: 1.5; } #ziggo-regn .konto-nr-tag { display: inline-block; font-size: calc(10px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text-secondary); background: var(--flade-deaktiveret); border-radius: 4px; padding: 1px 5px; margin-right: 5px; } #ziggo-regn .betalt-via-tag { margin-right: 0; margin-left: 6px; } #ziggo-regn .konto-soegefelt { padding: 7px 10px; font-size: calc(12.5px * var(--skrift-faktor, 1)); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--flade-svag); width: 100%; } /* ---------- Kontovælgeren i filterbjælken ---------- */ /* Listen ligger absolut over indholdet. Den må IKKE presse filterbjælken ned, når den åbner — så flytter alt under den sig, og man mister det sted, man kiggede. */ #ziggo-regn .konto-vaelger { position: relative; } /* I formularen står vælgeren, hvor et fuldbredt felt stod før. Er den smallere end feltet over den, ser rækken ujævn ud. */ #ziggo-regn .konto-vaelger-bred, #ziggo-regn .konto-vaelger-bred .konto-vaelger-knap { width: 100%; } #ziggo-regn .konto-vaelger-bred .konto-vaelger-knap { padding: 9px 12px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .konto-vaelger-bred .konto-vaelger-liste { width: 100%; } #ziggo-regn .konto-vaelger-knap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 220px; padding: 5px 10px; font-size: calc(12px * var(--skrift-faktor, 1)); font-family: inherit; color: var(--text); background: var(--felt-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; text-align: left; } #ziggo-regn .konto-vaelger-knap:hover { border-color: var(--primary); } #ziggo-regn .konto-vaelger-knap:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } #ziggo-regn .konto-vaelger-pil { color: var(--text-secondary); font-size: calc(10px * var(--skrift-faktor, 1)); } #ziggo-regn .konto-vaelger-liste { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 300px; max-width: 80vw; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } #ziggo-regn .konto-vaelger-resultater { max-height: 280px; overflow-y: auto; margin-top: 8px; } #ziggo-regn .konto-vaelger-gruppe { padding: 8px 8px 4px; font-size: calc(10.5px * var(--skrift-faktor, 1)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tekst-daempet); } #ziggo-regn .konto-vaelger-punkt { padding: 6px 8px; font-size: calc(12.5px * var(--skrift-faktor, 1)); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; } #ziggo-regn .konto-vaelger-punkt:hover { background: var(--flade-hover); } /* Markeringen fra piletasterne skal se anderledes ud end det VALGTE: den ene er, hvor man er henne, den anden er, hvad filteret bruger. */ #ziggo-regn .konto-vaelger-punkt.markeret { background: var(--primary-light); box-shadow: inset 0 0 0 1px var(--primary); } #ziggo-regn .konto-vaelger-punkt.er-valgt { font-weight: 700; color: var(--primary); } #ziggo-regn .konto-vaelger-tom { padding: 10px 8px; font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); } /* Select'en bærer værdien og vises ikke. */ #ziggo-regn .konto-vaelger-vaerdi { display: none; } #ziggo-regn .konto-soegefelt:focus { outline: none; border-color: var(--primary); background: var(--felt-bg); box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12); } #ziggo-regn .bilag-type-badge { font-size: calc(10px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: none; color: var(--primary); background: var(--primary-light); border: 1px solid var(--sticky-border); border-radius: 12px; padding: 2px 8px; white-space: nowrap; display: inline-block; align-self: flex-start; margin-top: 2px; } #ziggo-regn .collapsible-toggle { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } #ziggo-regn .dashboard-section-title.collapsible-toggle { display: flex; align-items: center; justify-content: space-between; } #ziggo-regn .skat-header.collapsible-toggle { cursor: pointer; } #ziggo-regn .table-header.collapsible-toggle { cursor: pointer; } #ziggo-regn .collapse-chevron { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: calc(20px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--primary); background: var(--primary-light); border-radius: var(--radius-sm); transition: transform 0.2s ease, background 0.15s ease; flex-shrink: 0; } #ziggo-regn .collapsible-toggle.collapsed .collapse-chevron { transform: rotate(-90deg); } /* Hover på HELE overskriftsbjælken, ikke kun på foldeikonet. Effekten skal svare til det, der kan klikkes — og det er hele bjælken. En effekt på ét lille ikon ville antyde, at kun det var knappen. */ #ziggo-regn .collapsible-toggle:hover { background: var(--flade-svag); } #ziggo-regn .collapsible-toggle:hover .collapse-chevron { background: var(--cyan-flade); } #ziggo-regn .collapsible-content { overflow: hidden; } #ziggo-regn .collapsible-content.collapsed { display: none; } /* ==================== RESPONSIVT / MOBILVENLIGT ==================== */ @media (max-width: 860px) { #ziggo-regn .header-title h1 { font-size: calc(22px * var(--skrift-faktor, 1)); } } @media (max-width: 768px) { #ziggo-regn { padding: 0 0 40px; } #ziggo-regn .container { padding: 16px 14px 0; } #ziggo-regn header { margin-bottom: 20px; padding-bottom: 16px; } #ziggo-regn .tabel-stoerrelse-bar { padding: 10px 16px; } #ziggo-regn .kassekladde-moms-hint { padding: 8px 16px; } #ziggo-regn .tabel-stoerrelse-hint { display: none; } #ziggo-regn .table-wrapper { height: 360px; resize: none; } #ziggo-regn .scrollable-report-table { max-height: 340px; resize: none; } #ziggo-regn .header-top { gap: 10px; } #ziggo-regn .actions-panel, #ziggo-regn .form-panel, #ziggo-regn .skat-box-panel { padding: 16px; border-radius: var(--radius-md); } #ziggo-regn .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; } #ziggo-regn .card { padding: 13px 14px; } #ziggo-regn .card-value { font-size: calc(18px * var(--skrift-faktor, 1)); } #ziggo-regn .main-grid { gap: 16px; } #ziggo-regn .table-header, #ziggo-regn .filter-bar, #ziggo-regn .periode-bar { padding: 14px 16px; } #ziggo-regn .table-actions { width: 100%; } #ziggo-regn .table-actions button { flex: 1 1 auto; } #ziggo-regn .actions-panel { flex-direction: column; align-items: stretch; } #ziggo-regn .actions-panel .table-actions { justify-content: stretch; } #ziggo-regn .actions-panel .table-actions button { flex: 1 1 calc(50% - 8px); } #ziggo-regn .form-row { grid-template-columns: 1fr; gap: 12px; } #ziggo-regn .filter-group { width: 100%; } #ziggo-regn .filter-group input[type="text"], #ziggo-regn .filter-group input[type="date"], #ziggo-regn .filter-group select { flex: 1; width: auto; min-width: 0; } /* Pilen skal altid sidde stabilt øverst til højre på mobil, uanset hvor meget overskriftsteksten/badges fylder eller ombrydes - ellers "hopper" den rundt afhængigt af indhold. */ #ziggo-regn .skat-header.collapsible-toggle, #ziggo-regn .table-header.collapsible-toggle, #ziggo-regn .dashboard-section-title.collapsible-toggle { position: relative; padding-right: 42px; align-items: flex-start; } #ziggo-regn .skat-header.collapsible-toggle .collapse-chevron, #ziggo-regn .table-header.collapsible-toggle .collapse-chevron, #ziggo-regn .dashboard-section-title.collapsible-toggle .collapse-chevron { position: absolute; top: 0; right: 0; } #ziggo-regn .skat-row { padding: 12px; } #ziggo-regn .collapse-chevron { width: 30px; height: 30px; font-size: calc(17px * var(--skrift-faktor, 1)); } /* Kassekladde: kortvisning i stedet for en bred tabel, så ingen kolonner (fx Beløb) bliver skåret væk eller kræver vandret scroll for at se */ #ziggo-regn #regnskabsTabel thead { display: none; } #ziggo-regn #regnskabsTabel, #ziggo-regn #regnskabsTabel tbody, #ziggo-regn #regnskabsTabel tr, #ziggo-regn #regnskabsTabel td { display: block; width: 100%; } #ziggo-regn #regnskabsTabel { table-layout: auto; } #ziggo-regn #regnskabsTabel tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin: 10px; padding: 10px 12px; background: var(--surface); box-shadow: var(--shadow-sm); } #ziggo-regn #regnskabsTabel tr:hover td { background: transparent; } #ziggo-regn #regnskabsTabel td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border: none; text-align: right; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn #regnskabsTabel td[data-label]:not([data-label=""])::before { content: attr(data-label); font-size: calc(10px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); text-align: left; flex-shrink: 0; } #ziggo-regn #regnskabsTabel td[data-label="Beskrivelse"], #ziggo-regn #regnskabsTabel td[data-label="Kategori"] { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; } #ziggo-regn #regnskabsTabel td.actions-cell { justify-content: flex-end; padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--border); } #ziggo-regn #regnskabsTabel tr.betaling-row { background: rgba(0, 0, 0, 0.02); } /* Debitorer: samme kortvisning som Kassekladde på mobil */ #ziggo-regn #debitorTable thead { display: none; } #ziggo-regn #debitorTable, #ziggo-regn #debitorTable tbody, #ziggo-regn #debitorTable tr, #ziggo-regn #debitorTable td { display: block; width: 100%; } #ziggo-regn #debitorTable tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; padding: 10px 12px; background: var(--surface); } #ziggo-regn #debitorTable td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border: none; text-align: right; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn #debitorTable td[data-label]:not([data-label=""])::before { content: attr(data-label); font-size: calc(10px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); text-align: left; flex-shrink: 0; } #ziggo-regn #debitorTable td.rubrik-desc { flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; } #ziggo-regn #debitorTable td.rubrik-desc .rubrik-sub { margin-top: 0; } #ziggo-regn #debitorTable td.debitor-checkbox { justify-content: flex-start; padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 6px; } #ziggo-regn #debitorTable td.debitor-actions { justify-content: flex-end; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--border); } #ziggo-regn #debitorTable td[colspan] { display: block; } #ziggo-regn th, #ziggo-regn td { padding: 11px 14px; font-size: calc(13px * var(--skrift-faktor, 1)); } /* Undgår automatisk zoom på iOS, når man trykker i felter */ #ziggo-regn input, #ziggo-regn select, #ziggo-regn textarea { font-size: calc(16px * var(--skrift-faktor, 1)); } #ziggo-regn .konto-soegefelt, #ziggo-regn .filter-group input, #ziggo-regn .filter-group select, #ziggo-regn .periode-bar select { font-size: calc(15px * var(--skrift-faktor, 1)); } } @media (max-width: 480px) { #ziggo-regn .header-title h1 { font-size: calc(19px * var(--skrift-faktor, 1)); } #ziggo-regn .header-title p { font-size: calc(12px * var(--skrift-faktor, 1)); } #ziggo-regn .stamdata-panel { padding: 12px; } #ziggo-regn .stamdata-grid { grid-template-columns: 1fr 1fr; } #ziggo-regn .dashboard-grid { grid-template-columns: 1fr 1fr; } #ziggo-regn .table-actions button, #ziggo-regn .actions-panel .table-actions button { flex: 1 1 100%; } #ziggo-regn .skat-header h3 { font-size: calc(14.5px * var(--skrift-faktor, 1)); } #ziggo-regn .rapport-table td.rubrik-nr { width: 62px; font-size: calc(12px * var(--skrift-faktor, 1)); } #ziggo-regn .rapport-table td.rubrik-val { width: 96px; } #ziggo-regn .form-panel h2, #ziggo-regn .table-header h2 { font-size: calc(16px * var(--skrift-faktor, 1)); } #ziggo-regn .skat-periode-vaelger select { width: 100%; } #ziggo-regn .konto-nr-tag { display: none; } } /* Synligt tastaturfokus for tilgængelighed */ #ziggo-regn a:focus-visible, #ziggo-regn button:focus-visible, #ziggo-regn input:focus-visible, #ziggo-regn select:focus-visible, #ziggo-regn .collapsible-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ============================================================ SYSTEMMENU Tilføjet i udv-1.01. Bygget UDELUKKENDE af farvevariabler, så det mørke tema virker af sig selv - der er med vilje ingen [data-theme="dark"]-regler her (erfaringsregel 6b.2). ============================================================ */ #ziggo-regn .system-menu-holder { position: relative; display: inline-block; } #ziggo-regn .btn-system { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 16px; font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 700; font-family: var(--font-display); cursor: pointer; min-height: 40px; transition: border-color 0.15s, background-color 0.15s; } #ziggo-regn .btn-system:hover { border-color: var(--primary); } #ziggo-regn .btn-system[aria-expanded="true"] { border-color: var(--primary); background: var(--primary-light); } /* * MENUEN ÅBNER I MIDTEN AF SKÆRMEN, IKKE UNDER KNAPPEN. * * Den hang før fast under systemknappen med right: 0. Ved de * opløsninger, hvor knappen ender i venstre side, blev de 300 px lagt ud * mod venstre — og halvdelen af menuen havnede uden for skærmkanten, * hvor den hverken kunne læses eller rulles til. * * En fast midterplacering kan ikke havne uden for skærmen, uanset hvor * knappen står. max-height med rulning holder den inde, også på en lav * skærm i landskab. * * !! STORT VINDUE, IKKE EN SMAL LISTE (udv-2.07) !! * Stod før på 340px — hele indholdet var én lang, rullende liste af * knapper, uden nogen reel adskillelse mellem emnerne. Bredden er nu * skåret til, så et grid af tydeligt afgrænsede sektioner (nedenfor) * kan stå ved siden af hinanden i stedet for under hinanden — man * kan se det hele på én gang på en almindelig skærm, i stedet for at * rulle forbi det, man leder efter. */ #ziggo-regn .system-menu { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; width: min(980px, calc(100vw - 32px)); max-height: min(88vh, 800px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 20px 24px 24px; text-align: left; } #ziggo-regn .system-menu[hidden] { display: none; } #ziggo-regn .system-menu-titel { font-family: var(--font-display); font-size: calc(18px * var(--skrift-faktor, 1)); margin: 0 0 16px; padding-right: 60px; /* plads til luk-knappen i samme hjørne */ } #ziggo-regn .system-menu-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; } #ziggo-regn .system-menu-sektion { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--background); } #ziggo-regn .system-menu-sektion-fare { border-color: var(--danger); } #ziggo-regn .system-menu-luk { position: absolute; top: 8px; right: 8px; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; font-family: var(--font-display); padding: 4px 6px; border-radius: 5px; } #ziggo-regn .system-menu-luk:hover { background: var(--primary-light); color: var(--text); } #ziggo-regn .system-menu-overskrift { font-family: var(--font-display); font-size: calc(10.5px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0; } #ziggo-regn .system-menu-overskrift-fare { color: var(--danger); } /* * !! FOLDBARE SEKTIONER I SYSTEMMENUEN (udv-2.30) !! * Samme ide, brugeren allerede kender fra resten af appen (Debitor, * Kreditor, Lager …): en klikbar overskrift-række med en chevron, * og indholdet foldet ind/ud af den fælles collapsible-mekanisme. * margin-bottom flyttet HERTIL fra .system-menu-overskrift selv, * så den ikke dobbelt-mellemrummer, når overskriften sidder inde i * denne række. */ #ziggo-regn .system-menu-overskrift-rad { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin: 0 0 8px; padding: 2px 0; } #ziggo-regn .system-menu-overskrift-rad .collapse-chevron { width: 22px; height: 22px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .system-menu-punkt { display: block; width: 100%; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; min-height: 42px; font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; font-family: var(--font-body); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; } #ziggo-regn .system-menu-punkt:hover { border-color: var(--primary); background: var(--primary-light); } /* Farlige punkter skal SE anderledes ud, ikke bare stå længere nede. */ #ziggo-regn .system-menu-punkt.punkt-fare { border-color: var(--danger); color: var(--danger); } #ziggo-regn .system-menu-punkt.punkt-fare:hover { background: var(--danger); color: var(--paa-farve); } #ziggo-regn .system-menu-note { font-size: calc(11px * var(--skrift-faktor, 1)); line-height: 1.45; color: var(--text-secondary); margin: -2px 0 10px; padding: 0 2px; } #ziggo-regn .system-menu-skille { height: 1px; background: var(--border); margin: 12px 0; } /* Skjules af app.js for ikke-administratorer. Skjul overskriften og adskilleren MED, ellers står der en tom sektion tilbage (erfaringsregel 9b.12). */ #ziggo-regn .kun-admin[hidden] { display: none; } /* * ============================================================ * KONTAKTEN — ÉN ENSARTET SKIFTER TIL TIL/FRA-VALG (udv-2.07) * ============================================================ * * "Systemets omfang" og "Påmind om sikkerhedskopi" var begge en * KNAP, der skiftede tilstand ved klik og viste den NYE tilstand * som tekst bagefter ("🧩 Systemets omfang: Koblet") — man skulle * læse teksten for at vide, hvad der ville ske ved næste klik. * * En rigtig kontakt viser tilstanden med det samme, uden at skulle * læse noget — samme udseende begge steder, så man ikke skal lære * to forskellige mønstre for samme slags valg. */ #ziggo-regn .toggle-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; cursor: pointer; } #ziggo-regn .toggle-switch-label { font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; color: var(--text); } #ziggo-regn .toggle-switch-state { font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text-secondary); min-width: 62px; text-align: right; } #ziggo-regn .toggle-switch { position: relative; display: inline-flex; flex-shrink: 0; } #ziggo-regn .toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; /* skal modtage klikket — ikke den synlige grafik nedenunder */ } #ziggo-regn .toggle-switch-track { display: block; width: 42px; height: 24px; border-radius: 999px; background: var(--border); transition: background-color 0.15s; pointer-events: none; /* rent visuelt — klik går til input ovenover */ } #ziggo-regn .toggle-switch-knob { display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s; } #ziggo-regn .toggle-switch input:checked + .toggle-switch-track { background: var(--primary); } #ziggo-regn .toggle-switch input:checked + .toggle-switch-track .toggle-switch-knob { transform: translateX(18px); } #ziggo-regn .toggle-switch input:focus-visible + .toggle-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; } @media (max-width: 640px) { #ziggo-regn .system-menu { padding: 16px 16px 20px; } #ziggo-regn .system-menu-grid { grid-template-columns: 1fr; } } /* ============================================================ OM-DIALOGEN ============================================================ */ #ziggo-regn .om-overlay { /* * !! z-index: 1100, IKKE 200 (udv-2.54) !! * MÅLT: .system-menu selv ligger på z-index 1000. Så længe * ethvert System-overlay ALTID lukkede menuen, FØR det åbnede * sig selv, var det aldrig et problem — de to var aldrig * synlige samtidig. Efter at System-menuen nu bevidst bliver * stående åben bag sine egne funktioner (se saetSystemMenu()s * forklaring), sad den derfor midt oven på fx Systemloggens * dialog — usynligt for øjet (begge har jo en fuldskærms- * baggrund), men fanger klik: en test, der skulle sætte et * flueben i selve dialogen, ramte i stedet den fysisk * overliggende menu og fik "intercepts pointer events". * z-index: 1100 sikrer ethvert System-overlay reelt ligger * OVEN PÅ menuen, ikke kun visuelt ser sådan ud. */ position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } #ziggo-regn .om-overlay[hidden] { display: none; } #ziggo-regn .om-kort { position: relative; background: var(--surface); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 30px; max-width: 540px; width: 100%; max-height: 85vh; overflow-y: auto; } #ziggo-regn .om-kort h2 { font-size: calc(22px * var(--skrift-faktor, 1)); margin-bottom: 2px; } #ziggo-regn .om-kort h3 { font-size: calc(14px * var(--skrift-faktor, 1)); margin: 20px 0 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } #ziggo-regn .om-kort p { font-size: calc(14px * var(--skrift-faktor, 1)); line-height: 1.65; margin-bottom: 12px; } #ziggo-regn .om-version { color: var(--text-secondary); font-size: calc(13px * var(--skrift-faktor, 1)); margin-bottom: 4px; } #ziggo-regn .om-luk { position: absolute; top: 12px; right: 14px; background: transparent; border: none; cursor: pointer; font-size: calc(18px * var(--skrift-faktor, 1)); color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; line-height: 1; } #ziggo-regn .om-luk:hover { background: var(--primary-light); color: var(--text); } /* Kopiér-knappen sidder til venstre for lukkekrydset, ikke oven i det. */ #ziggo-regn .om-kopier { position: absolute; top: 12px; right: 52px; background: var(--surface-alt); border: 1px solid var(--border); cursor: pointer; font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; line-height: 1; } #ziggo-regn .om-kopier:hover { background: var(--primary-light); color: var(--text); } /* ---------- Systemloggen ---------- */ /* * Nulstil-knappen ses KUN på de farver, der er ændret. Dens * tilstedeværelse er oversigten over, hvad man har rørt. Begge er tegnet * i forvejen, så skiftet er ét klasseskift og ingen optegning. */ #ziggo-regn .farve-linje .farve-nulstil { display: none; } #ziggo-regn .farve-linje.er-aendret .farve-nulstil { display: inline-flex; } #ziggo-regn .farve-linje.er-aendret .farve-nulstil-plads { display: none; } #ziggo-regn .farve-linje.er-aendret .farve-vaerdi { font-weight: 700; color: var(--text); } /* Og „Nulstil alle farver“ er der kun, når der ER noget at nulstille. */ #ziggo-regn #vaerktoejIndhold #btnNulstilFarver { display: none; } #ziggo-regn #vaerktoejIndhold.har-farveaendringer #btnNulstilFarver { display: block; } #ziggo-regn .syslog-underrubrik { font-size: calc(12.5px * var(--skrift-faktor, 1)); color: var(--text-secondary); margin: -6px 0 14px; } #ziggo-regn .syslog-flueben { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--skrift-faktor, 1)); margin-bottom: 12px; } #ziggo-regn .syslog-note { font-size: calc(12px * var(--skrift-faktor, 1)); line-height: 1.5; color: var(--text-secondary); margin: 0 0 10px; } #ziggo-regn .syslog-boks { height: 260px; overflow: auto; margin: 6px 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); } #ziggo-regn .syslog-boks pre { margin: 0; padding: 8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(11px * var(--skrift-faktor, 1)); line-height: 1.5; /* Uden disse to løber en lang linje ud i siden, og loggen er ulæselig på en tablet. */ white-space: pre-wrap; word-break: break-word; } #ziggo-regn .syslog-knapper { display: flex; flex-wrap: wrap; gap: 8px; } /* Ikonet i nederste venstre hjørne, mens der optages. Venstre, fordi gemmestatussen ligger i højre — de to skal kunne være fremme samtidig uden at dække hinanden. */ #ziggo-regn #sysLogBadge { position: fixed; left: 10px; bottom: 10px; z-index: 9998; display: flex; align-items: center; gap: 5px; background: var(--syslog-ikon-flade); color: var(--syslog-ikon-tekst); border: 1px solid var(--syslog-ikon-kant); border-radius: 999px; padding: 7px 13px 7px 10px; cursor: pointer; font-size: calc(12px * var(--skrift-faktor, 1)); line-height: 1; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } #ziggo-regn #sysLogBadge[hidden] { display: none; } #ziggo-regn #sysLogBadge .slb-tal { color: var(--syslog-ikon-daempet); } #ziggo-regn #sysLogBadge .slb-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--syslog-ikon-prik); /* En rød prik, der blinker roligt, er den almindelige måde at vise „der optages“ på — den skal kunne ses i øjenkrogen uden at stjæle opmærksomheden fra selve arbejdet. */ animation: ziggoregn-slb-puls 1.6s ease-in-out infinite; } @keyframes ziggoregn-slb-puls { #ziggo-regn 0%, #ziggo-regn 100% { opacity: 1; } #ziggo-regn 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { #ziggo-regn #sysLogBadge .slb-prik { animation: none; } } /* ============================================================ TYPOGRAFI DER SKALERER JÆVNT clamp() erstatter et brydepunkt: skriften vokser glidende med vinduet mellem en bund og et loft, uden spring (erfaringsregel 6b.9). BEVIDST KUN på de STORE tekster. Brødtekst og felter er ladt urørt: de er allerede afstemt efter tabellernes bredde, og at skalere dem ville flytte kolonnebredder, jeg ikke kan måle på rigtige enheder herfra. ============================================================ */ #ziggo-regn .header-title h1 { font-size: calc(clamp(21px, 1.1vw + 17px, 30px) * var(--skrift-faktor, 1)); } #ziggo-regn .card-value { font-size: calc(clamp(20px, 0.9vw + 16.5px, 27px) * var(--skrift-faktor, 1)); } #ziggo-regn .actions-panel-title, #ziggo-regn .dashboard-section-title { font-size: calc(clamp(14px, 0.35vw + 12.6px, 17px) * var(--skrift-faktor, 1)); } #ziggo-regn .skat-box-value { font-size: calc(clamp(17px, 0.6vw + 14.5px, 22px) * var(--skrift-faktor, 1)); } #ziggo-regn .aendringer-indhold h3 { font-size: calc(15px * var(--skrift-faktor, 1)); margin: 18px 0 8px; color: var(--primary); text-transform: none; letter-spacing: 0; } #ziggo-regn .aendringer-indhold ul { margin: 0 0 12px; padding-left: 18px; } #ziggo-regn .aendringer-indhold li { font-size: calc(13.5px * var(--skrift-faktor, 1)); line-height: 1.6; margin-bottom: 6px; list-style: disc; } #ziggo-regn .aendringer-indhold p { font-size: calc(13.5px * var(--skrift-faktor, 1)); line-height: 1.6; } #ziggo-regn .aendringer-indhold hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; } #ziggo-regn .aendringer-indhold code { background: var(--primary-light); padding: 1px 5px; border-radius: 4px; font-size: calc(12.5px * var(--skrift-faktor, 1)); } /* ---------- Koblet tilstand ---------- */ /* * Modulerne er skjult i «kun finans». De er IKKE fjernet fra siden — * tilstanden kan skiftes uden en genindlæsning, og et skjult felt er * hurtigere at vise igen end et, der skal bygges op. */ #ziggo-regn .kun-koblet { display: none; } #ziggo-regn .kun-koblet-menu { display: none !important; } /* * !! & OG IKKE #ziggo-regn !! * * skoler-css.js sætter #ziggo-regn foran hver selektor. Skriver man selv * #ziggo-regn.tilstand-koblet, bliver resultatet * «#ziggo-regn #ziggo-regn.tilstand-koblet», som aldrig kan matche — og * reglen dør i tavshed. MÅLT: menupunktet var usynligt, selv om * tilstanden var koblet, mens den tilsvarende regel med & virkede. */ #ziggo-regn.tilstand-koblet .kun-koblet-menu { display: block !important; } #ziggo-regn.tilstand-koblet .kun-koblet { display: block; } /* * SIDEFANER (udv-1.98). * * &.tilstand-koblet .kun-koblet ovenfor gør fanebjælken og de nye * ikonbjælker/fold alle-striber synlige, NÅR TILSTANDEN er koblet. * Hvilken ENKELT side der vises blandt dem, styres af skiftSide() i * app.js via inline style.display — se kommentaren dér om hvorfor * det er inline og ikke endnu et klassenavn. * * Debitor/Fakturaoversigt-ikonerne i selve sideNav (Finans-siden) * hører kun hjemme i KUN FINANS-tilstand, hvor de to paneler stadig * står på samme side. I koblet tilstand har de fået deres egen side * og skal væk herfra, uanset hvilken side der aktuelt er valgt. */ #ziggo-regn.tilstand-koblet #sideNav button[data-modul-side] { display: none; } /* Omvendt: denne knap giver kun mening, når fanebjælken findes — altså kun i koblet tilstand. De fem andre ikonbjælker er allerede helt skjult i kun finans (deres .side-nav bærer selv kun-koblet), så kun sideNavs eget eksemplar skal styres separat her. */ #ziggo-regn.tilstand-finans #sideNav button[data-kun-koblet] { display: none; } /* * !! FANEBJÆLKEN ER IKKE LÆNGERE FASTGJORT I HØJRE SIDE !! * * Den lå først som en flydende boks (position:fixed) i øverste højre * hjørne — samme idé som venstrenavigationen. Men venstrenavigationen * har en hel 5 %-margen at stå i (se .container: width 90 %), og den * er smal nok til at være der. Fanebjælken med seks faner er * bredere end de 5 %, den skulle dele plads med — og landede derfor * OVEN I hver undersides egen værktøjslinje (fold alle-knappen, * ikonbjælken), præcis dér hvor de også ligger i toppen af siden. * * MÅLT: et klik på "Finans"-fanen ramte i stedet Debitor-sidens egen * "Fold alle sektioner"-knap, fordi de to lå oven i hinanden på * skærmen — usynligt for øjet ved almindelig brug, men opdaget af en * prøve, der klikkede præcis dér. * * Løsningen er at lægge den ind i det NORMALE flow som en vandret * bjælke øverst, i stedet for at konkurrere om den samme smalle * margen som indholdet. Så er der ingen margen at dele, og dermed * intet at kollidere om. */ #ziggo-regn .side-tabbar { display: none; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px 0; margin: 0 0 6px; border-bottom: 1px solid var(--border); } #ziggo-regn.tilstand-koblet .side-tabbar.kun-koblet { display: flex; } #ziggo-regn .side-tabbar button { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-family: var(--font-display); font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; cursor: pointer; white-space: nowrap; } /* Samme specificitetsproblem gælder de nye fold alle-striber og ikonbjælker pr. modul-side: deres egen display:flex er sat med samme specificitet som .kun-koblet, og skal derfor vindes eksplicit tilbage, når koblet er slået til (ellers bliver de block, og flex-egenskaberne — justify-content, kolonneretning — holder op med at virke). */ #ziggo-regn.tilstand-koblet .sektionsstyring.kun-koblet { display: flex; } #ziggo-regn.tilstand-koblet .side-nav.kun-koblet { display: flex; } #ziggo-regn .side-tabbar button:hover { border-color: var(--primary); background: var(--primary-light); } #ziggo-regn .side-tabbar button[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--paa-farve); } #ziggo-regn .kreditor-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; } #ziggo-regn .kreditor-moms { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--skrift-faktor, 1)); margin-bottom: 10px; cursor: pointer; } #ziggo-regn .kreditor-moms input { width: 17px; height: 17px; margin: 0; } #ziggo-regn .kreditor-panel .btn-submit { margin-bottom: 14px; } /* ---------- Kreditor — kun i koblet tilstand ---------- */ /* * !! SKJULT ER IKKE DET SAMME SOM FRAVÆRENDE !! * * Sektionen står i markup'en hele tiden og skjules med CSS. Det er ikke * adgangskontrol — den, der finder den frem, kan stadig bogføre, og * serveren tager imod. Tilstanden er et VALG om, hvad man vil se, ikke * en spærring (erfaringsregel 9b.12). */ /* Reglerne for .kun-koblet står samlet længere oppe — se afsnittet om tilstanden. De stod også her, hvilket er én gang for meget. */ #ziggo-regn .kreditor-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; } #ziggo-regn .kreditor-moms { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--skrift-faktor, 1)); margin: 4px 0 10px; cursor: pointer; } #ziggo-regn .kreditor-moms input { width: 17px; height: 17px; margin: 0; } #ziggo-regn #btnBogfoerKreditor { width: auto; padding: 10px 20px; margin: 0 0 14px; } /* * FAKTURERING (udv-1.93) — varelinjer. * * Samme fem kolonner i hoved og hver linje, så de altid flugter. * auto-fit ville lade kolonnerne skride, hver gang en linje er * tommere end de andre — derfor faste grid-template-columns her, * modsat .kreditor-formular ovenfor. */ #ziggo-regn .fakturering-linjer-hoved { display: grid; grid-template-columns: 1fr 70px 100px 100px 32px; gap: 8px; padding: 0 4px 4px; font-size: calc(12px * var(--skrift-faktor, 1)); opacity: 0.7; } #ziggo-regn .fakturering-linjer-hoved span:nth-child(2), #ziggo-regn .fakturering-linjer-hoved span:nth-child(3), #ziggo-regn .fakturering-linjer-hoved span:nth-child(4) { text-align: right; } #ziggo-regn .fakturering-linjer { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } #ziggo-regn .fakturering-linje { display: grid; grid-template-columns: 1fr 70px 100px 100px 32px; gap: 8px; align-items: center; } #ziggo-regn .fakturering-linje input { width: 100%; } #ziggo-regn .fakturering-linje input[type="number"] { text-align: right; } #ziggo-regn .fl-beloeb { text-align: right; font-variant-numeric: tabular-nums; } #ziggo-regn .fl-slet { width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; font-size: calc(16px * var(--skrift-faktor, 1)); opacity: 0.6; padding: 0; } #ziggo-regn .fl-slet:hover { opacity: 1; } #ziggo-regn #btnFaktureringLinje { width: auto; padding: 6px 14px; margin-bottom: 14px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .fakturering-total { display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding: 8px 4px; margin-bottom: 10px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; } #ziggo-regn .fakturering-ved-bogfoering { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 2px 4px 10px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .fakturering-ved-bogfoering label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; } #ziggo-regn .fakturering-ved-bogfoering input[type="checkbox"] { width: auto; } #ziggo-regn #btnBogfoerFakturering { width: auto; padding: 10px 20px; margin-bottom: 4px; } /* Forfalden skal kunne ses på to meters afstand — det er den ene oplysning, man åbner sektionen for. */ #ziggo-regn .kreditor-forfalden { color: var(--danger); font-weight: 700; } #ziggo-regn .kreditor-ingen-frist { color: var(--text-secondary); font-style: italic; } #ziggo-regn .kreditor-betal-row td { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--flade-deaktiveret); padding: 10px; } #ziggo-regn .kreditor-betal-row select, #ziggo-regn .kreditor-betal-row input { width: auto; padding: 5px 8px; font-size: calc(13px * var(--skrift-faktor, 1)); } /* ---------- Vindue pr. sektion ---------- */ #ziggo-regn .vindue-vaelger { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; } #ziggo-regn .vindue-vaelger label { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); font-weight: 600; } #ziggo-regn .vindue-vaelger select { width: auto; padding: 4px 8px; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .vindue-hint { font-size: calc(11px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .rapport-sammenligning { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; } #ziggo-regn .rapport-sammenligning label { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); font-weight: 600; } #ziggo-regn .rapport-sammenligning select { width: auto; padding: 4px 8px; font-size: calc(13px * var(--skrift-faktor, 1)); } /* To ekstra kolonner, når en sammenligning er valgt. */ #ziggo-regn .rapport-table td.rapport-sammenlign-val, #ziggo-regn .rapport-table th.rapport-sammenlign-val { text-align: right; } #ziggo-regn .rapport-table td.rapport-sammenlign-diff, #ziggo-regn .rapport-table th.rapport-sammenlign-diff { text-align: right; opacity: 0.85; font-size: calc(12px * var(--skrift-faktor, 1)); } #ziggo-regn .rapport-sammenlign-diff.stigning { color: var(--groen-lys); } #ziggo-regn .rapport-sammenlign-diff.fald { color: var(--danger); } /* * Boksen ruller, og tabellens hoved bliver stående. Uden det klistrede * hoved ville en rullet tabel være kolonner uden navne. */ #ziggo-regn .vindue-boks { overflow-y: auto; } #ziggo-regn .vindue-boks thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); } /* ---------- Regnskabsår ---------- */ #ziggo-regn .stamdata-aar { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding-right: 12px; border-right: 1px solid var(--border); } #ziggo-regn .stamdata-aar-etiket { font-size: calc(11px * var(--skrift-faktor, 1)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); font-weight: 700; } #ziggo-regn .stamdata-aar select { width: auto; padding: 4px 8px; font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 700; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--felt-bg); color: var(--primary); } #ziggo-regn .saet-kort { max-width: 660px; } #ziggo-regn .saet-intro { font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .saet-underoverskrift { font-size: calc(14px * var(--skrift-faktor, 1)); margin: 16px 0 8px; } #ziggo-regn .stamdata-underoverskrift { font-size: calc(14px * var(--skrift-faktor, 1)); margin: 20px 0 8px; } #ziggo-regn .saet-liste { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; max-height: 34vh; overflow-y: auto; } /* Kontakter (udv-2.04): sidder listen inde i en .vindue-boks, er det DEN, der styrer højde og rulning — saet-listens egen 34vh-grænse ville ellers give to indlejrede rullepaneler oven i hinanden. */ #ziggo-regn .vindue-boks .saet-liste { max-height: none; overflow-y: visible; border: none; height: 100%; } #ziggo-regn .saet-linje { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm); min-height: 40px; } #ziggo-regn .saet-linje + .saet-linje { border-top: 1px solid var(--border); } #ziggo-regn .saet-linje.er-aaben { background: var(--primary-light); } #ziggo-regn .saet-linje-navn { flex: 1; font-size: calc(14px * var(--skrift-faktor, 1)); font-weight: 600; } #ziggo-regn .saet-linje-detalje { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); white-space: nowrap; } #ziggo-regn .saet-linje-maerke { font-size: calc(11px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; color: var(--primary); white-space: nowrap; } #ziggo-regn .saet-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } #ziggo-regn .saet-felt { display: flex; flex-direction: column; gap: 4px; } #ziggo-regn .saet-felt label { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); font-weight: 600; } #ziggo-regn .saet-note { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); margin-top: 8px; } #ziggo-regn .saet-bund { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } #ziggo-regn .saet-bund .btn-secondary, #ziggo-regn .saet-bund button.btn-submit { width: auto; margin-top: 0; padding: 10px 20px; } #ziggo-regn .send-faktura-formular { display: flex; flex-direction: column; gap: 12px; } #ziggo-regn .send-faktura-formular textarea { font-family: inherit; font-size: calc(14px * var(--skrift-faktor, 1)); padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); resize: vertical; } /* ---------- Kontovælgeren til «Kontoplan med posteringer» ---------- */ #ziggo-regn .udskrift-konti-kort { max-width: 620px; } #ziggo-regn .udskrift-konti-intro { font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); margin-bottom: 10px; } #ziggo-regn .udskrift-konti-handlinger { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } #ziggo-regn .udskrift-konti-handlinger .btn-secondary { padding: 6px 12px; font-size: calc(13px * var(--skrift-faktor, 1)); min-height: 34px; } #ziggo-regn .udskrift-konti-taeller { margin-left: auto; font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); } /* * Listen ruller, kortet gør ikke. Med hundrede konti ville dialogen * ellers blive højere end skærmen, og «Fortsæt» ville stå neden for * kanten uden at nogen kunne se det. */ #ziggo-regn .udskrift-konti-liste { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; } #ziggo-regn .udskrift-konti-gruppe { font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: 10px 6px 4px; } #ziggo-regn .udskrift-konti-linje { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); cursor: pointer; min-height: 38px; } #ziggo-regn .udskrift-konti-linje:hover { background: var(--flade-deaktiveret); } #ziggo-regn .udskrift-konti-linje input { margin: 0; width: 17px; height: 17px; flex: none; } #ziggo-regn .udskrift-konti-navn { flex: 1; font-size: calc(14px * var(--skrift-faktor, 1)); } #ziggo-regn .udskrift-konti-antal { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); white-space: nowrap; } #ziggo-regn .udskrift-konti-bund { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } #ziggo-regn .udskrift-konti-bund .btn-secondary, #ziggo-regn .udskrift-konti-bund button.btn-submit { width: auto; margin-top: 0; padding: 10px 20px; } /* ---------- Værktøjsdialogen ---------- */ #ziggo-regn .om-kort-bred { max-width: 760px; } /* * FAKTURA-DESIGN — TEMA-KORT (udv-2.19). * Et grid af klikbare kort, hver med en farveprøve, et navn og en * kort beskrivelse — samme "se det, før du vælger det"-tanke som * temaerne under ⚙ System → Farver. */ #ziggo-regn .faktura-tema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; --tema-accent: #0f172a; } #ziggo-regn .faktura-tema-kort { display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--border); border-radius: var(--radius-md); padding: 12px; cursor: pointer; position: relative; } #ziggo-regn .faktura-tema-kort input[type="radio"] { position: absolute; top: 10px; right: 10px; width: auto; } #ziggo-regn .faktura-tema-kort:has(input:checked) { border-color: var(--primary); background: var(--primary-light); } #ziggo-regn .faktura-tema-navn { font-weight: 700; font-size: calc(14px * var(--skrift-faktor, 1)); } #ziggo-regn .faktura-tema-beskrivelse { font-size: calc(12.5px * var(--skrift-faktor, 1)); color: var(--text-secondary); line-height: 1.4; } /* * STREGKODEUDSKRIFTENS VÆLGELISTE (udv-2.50). * !! EGEN, DEDIKERET KLASSE — ALDRIG !important (se overleverings- * dokumentets afsnit 4.2) !! * Søgefiltreringen i app.js virker ved at sætte * label.style.display = 'none' direkte fra JavaScript. Havde * appens almindelige checkbox-rækker (var der nogen) et * !important-sat display, ville den inline-stil blive tavst * ignoreret — ingen fejl, ingen konsolbesked, søgningen ville * bare ikke virke, når man rent faktisk klikkede sig igennem * appen. Ziggo-Lager ramte netop denne fælde; undgået her fra * start ved slet ikke at dele klasse med noget andet. */ #ziggo-regn .print-barcodes-raekke { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; cursor: pointer; font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text); } #ziggo-regn .print-barcodes-raekke input[type="checkbox"] { width: auto; } /* KATEGORI-STYRING (udv-2.52) — samme rækkeopbygning som Ziggo-Butiks overlevering (alert-item/reorder-row), tilpasset Ziggo-Regns egne klassenavne/farvevariabler. */ #ziggo-regn #kategoriStyringListe { max-height: 340px; overflow-y: auto; } #ziggo-regn .kategori-styring-raekke { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; border-left: 4px solid var(--success); } /* * TALE-INDTASTNINGENS LYTTEINDIKATOR (udv-2.55). To lag, ikke kun ét — * personalet kigger typisk på varen/scanneren i hånden, ikke * skærmen, i netop det øjeblik (samme begrundelse, overleveringen * selv gav). --danger genbruges som pulsfarve — appen har ingen * dedikeret "advarsel/optager"-farve at ty til i stedet. */ @keyframes taleLytterPuls { #ziggo-regn 0%, #ziggo-regn 100% { box-shadow: 0 0 0 2px var(--danger); } #ziggo-regn 50% { box-shadow: 0 0 0 2px transparent; } } @keyframes taleLytterBannerPuls { #ziggo-regn 0%, #ziggo-regn 100% { opacity: 1; } #ziggo-regn 50% { opacity: 0.3; } } #ziggo-regn .tale-lytter { animation: taleLytterPuls 1s ease-in-out infinite; } #ziggo-regn .tale-lytter-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; align-items: center; gap: 10px; background: var(--danger); color: var(--paa-farve); font-weight: 700; font-size: calc(15px * var(--skrift-faktor, 1)); padding: 10px 22px; border-radius: 0 0 10px 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; } #ziggo-regn .tale-lytter-banner-prik { width: 11px; height: 11px; border-radius: 50%; background: var(--paa-farve); animation: taleLytterBannerPuls 1s ease-in-out infinite; flex-shrink: 0; } /* * MIKROFON PAA HVERT FELT (1.05). * * !! INDPAKNINGEN MAA IKKE FLYTTE FELTET !! * Hvert felt pakkes i .tale-felt, som overtager feltets plads i * layoutet. Er feltet et grid- eller flex-element, bliver * indpakningen det i stedet — derfor width:100% paa begge, saa * baade en formularrubrik og en fakturalinjes smalle kolonne * beholder sin bredde. Der maatte ikke vaere en eneste selektor med * "> input" eller "+ input" i denne fil, foer det kunne lade sig * goere; det blev kontrolleret, ikke antaget. * * Knappen ligger OVEN PAA feltets hoejre kant, ikke ved siden af. * Ved siden af ville hvert felt blive smallere, og paa en telefon * ville rubrikkerne begynde at brydes om. */ #ziggo-regn .tale-felt { position: relative; display: block; width: 100%; } #ziggo-regn .tale-felt > input { width: 100%; } /* * !! TILSTANDEN SIDDER PAA HVER INDPAKNING, IKKE PAA APPENS ROD !! * * Det naerliggende var én klasse paa #ziggo-regn og * ".tale-til .tale-mik { display: flex }". Det virker ikke her: * skoler-css.js saetter "#ziggo-regn " foran hver selektor, saa * reglen bliver "#ziggo-regn .tale-til .tale-mik" — og den kraever, * at .tale-til er et BARN af roden, ikke roden selv. Knapperne blev * derfor aldrig synlige, og CSS'en saa rigtig ud i kilden. * Kontrollen "Ingen doedfoedt selektor i app.css" findes af samme * grund; den fanger dobbelt #ziggo-regn, ikke dette tilfaelde. * * Klassen saettes derfor paa hver .tale-felt. Det er 60-70 * klasseskift, naar funktionen taendes eller slukkes — altsaa * naesten aldrig — og til gengaeld kan reglen ikke skoleres i * stykker. */ #ziggo-regn .tale-felt-til > input { padding-right: 36px; } #ziggo-regn .tale-mik { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; line-height: 1; display: none; align-items: center; justify-content: center; border: 1px solid var(--kant-svag); border-radius: var(--radius-sm); background: var(--felt-bg); color: var(--tekst-daempet); font-size: calc(13px * var(--skrift-faktor, 1)); cursor: pointer; } #ziggo-regn .tale-felt-til > .tale-mik { display: flex; } #ziggo-regn .tale-mik:hover { background: var(--primary-light); border-color: var(--primary); } #ziggo-regn .tale-mik:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* Et deaktiveret eller skrivebeskyttet felt skal ikke kunne tales i. */ #ziggo-regn .tale-felt > input:disabled ~ .tale-mik, #ziggo-regn .tale-felt > input[readonly] ~ .tale-mik { display: none; } /* * MINIATURE-FORHÅNDSVISNINGER (udv-2.39, porteret fra Ziggo-Lager). * Erstatter den tidligere, ensfarvede "swatch"-firkant med en lille * opdigtet faktura, der viser temaets REELLE strukturelle greb — * side-om-side/stablet/centreret/spejlvendt osv. — ikke kun farven. * Hvert kort tegnes med samme flexbox-retning (flex-direction, * justify-content, align-items), som det rigtige tema selv bruger * i fakturaTemaCSS(), så forskellen er synlig med det samme. * --tema-accent sættes af JS (opdaterTemaForhaandsvisningFarve) fra * den FAKTISKE, valgte accentfarve — ikke en fast demofarve. */ #ziggo-regn .tema-preview { background: var(--felt-bg); border-radius: 4px; overflow: hidden; height: 80px; padding: 6px; box-sizing: border-box; display: flex; flex-direction: column; } #ziggo-regn .tp-header { display: flex; flex: 0 0 auto; } #ziggo-regn .tp-h1group { display: flex; flex-direction: column; gap: 3px; } #ziggo-regn .tp-h1 { height: 7px; width: 60px; background: var(--tekst-kraftig); border-radius: 1px; } #ziggo-regn .tp-meta { height: 3px; width: 44px; background: var(--kant-svag); border-radius: 1px; } #ziggo-regn .tp-date { height: 3px; width: 30px; background: var(--kant-svag); border-radius: 1px; align-self: flex-start; } #ziggo-regn .tp-table { flex: 1 1 auto; margin-top: 5px; } #ziggo-regn .tp-row { height: 4px; width: 100%; background: var(--flade-hover); border-radius: 1px; margin-top: 4px; } #ziggo-regn .tp-total { height: 6px; width: 34px; border-radius: 1px; } #ziggo-regn .tema-preview-klassisk .tp-header { justify-content: space-between; align-items: flex-end; padding-bottom: 5px; border-bottom: 2px solid var(--tema-accent); } #ziggo-regn .tema-preview-klassisk .tp-h1 { background: var(--tema-accent); } #ziggo-regn .tema-preview-klassisk .tp-total { background: var(--tekst-kraftig); margin-left: auto; } #ziggo-regn .tema-preview-moderne .tp-header { flex-direction: column; align-items: flex-start; padding-bottom: 5px; border-bottom: 3px solid var(--tema-accent); } #ziggo-regn .tema-preview-moderne .tp-h1 { background: var(--tema-accent); width: 70px; } #ziggo-regn .tema-preview-moderne .tp-date { margin-top: 4px; } #ziggo-regn .tema-preview-moderne .tp-row { border-bottom: 1px solid var(--flade-hover); background: transparent; } #ziggo-regn .tema-preview-moderne .tp-total { background: var(--tema-accent); opacity: 0.35; margin-left: auto; } #ziggo-regn .tema-preview-erhverv { padding: 0; } #ziggo-regn .tema-preview-erhverv .tp-header { flex-direction: column; align-items: center; background: var(--tema-accent); padding: 8px 6px 6px; } #ziggo-regn .tema-preview-erhverv .tp-h1group { align-items: center; } #ziggo-regn .tema-preview-erhverv .tp-h1 { background: var(--felt-bg); } #ziggo-regn .tema-preview-erhverv .tp-meta { background: rgba(255,255,255,0.6); } #ziggo-regn .tema-preview-erhverv .tp-date { background: rgba(255,255,255,0.6); margin-top: 4px; align-self: center; } #ziggo-regn .tema-preview-erhverv .tp-table { padding: 0 6px; } #ziggo-regn .tema-preview-erhverv .tp-total { background: var(--tema-accent); margin: 0 6px 0 auto; } #ziggo-regn .tema-preview-minimalistisk .tp-header { flex-direction: column; align-items: flex-end; padding-bottom: 5px; border-bottom: 1px solid var(--tema-accent); } #ziggo-regn .tema-preview-minimalistisk .tp-h1group { align-items: flex-end; } #ziggo-regn .tema-preview-minimalistisk .tp-h1 { background: var(--tekst-daempet); height: 5px; width: 50px; } #ziggo-regn .tema-preview-minimalistisk .tp-date { align-self: flex-end; margin-top: 4px; } #ziggo-regn .tema-preview-minimalistisk .tp-row { border-bottom: 1px solid var(--flade-hover); background: transparent; height: 3px; } #ziggo-regn .tema-preview-minimalistisk .tp-total { background: transparent; border-top: 1px solid var(--tekst-kraftig); height: 0; margin-top: 8px; margin-right: auto; } #ziggo-regn .tema-preview-farverig { padding: 6px 6px 6px 10px; border-left: 5px solid var(--tema-accent); } #ziggo-regn .tema-preview-farverig .tp-header { flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; } #ziggo-regn .tema-preview-farverig .tp-h1 { background: var(--tema-accent); width: 66px; height: 8px; } #ziggo-regn .tema-preview-farverig .tp-total { background: var(--tema-accent); margin-left: auto; } #ziggo-regn .tema-preview-brevhoved { display: flex; flex-direction: column; align-items: center; } #ziggo-regn .tp-bh-logo { width: 34px; height: 16px; background: var(--tema-accent); border-radius: 2px; margin-bottom: 5px; } #ziggo-regn .tp-bh-title { width: 60px; height: 6px; background: var(--tekst-kraftig); border-radius: 1px; margin-bottom: 6px; } #ziggo-regn .tp-bh-row { display: flex; justify-content: space-between; width: 100%; padding-bottom: 5px; border-bottom: 2px solid var(--tema-accent); margin-bottom: 5px; } #ziggo-regn .tp-bh-col { width: 44%; height: 10px; background: var(--flade-hover); border-radius: 1px; } #ziggo-regn .vaerktoej-tom { padding: 18px; text-align: center; color: var(--text-secondary); font-size: calc(14px * var(--skrift-faktor, 1)); background: var(--background); border-radius: var(--radius-sm); } #ziggo-regn .vaerktoej-linje { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 7px; background: var(--background); } #ziggo-regn .vaerktoej-linje-tekst { flex: 1; min-width: 0; } #ziggo-regn .vaerktoej-linje-tid { font-size: calc(13px * var(--skrift-faktor, 1)); font-weight: 600; } #ziggo-regn .vaerktoej-linje-note { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .vaerktoej-knap { background: var(--primary); color: var(--paa-farve); border: none; border-radius: var(--radius-sm); padding: 8px 14px; font-size: calc(12.5px * var(--skrift-faktor, 1)); font-weight: 700; font-family: var(--font-display); cursor: pointer; white-space: nowrap; min-height: 38px; } #ziggo-regn .vaerktoej-knap:hover { filter: brightness(1.08); } #ziggo-regn .vaerktoej-knap.knap-fare { background: var(--danger); } /* Fund fra integritetskontrollen. Alvorsgraden skal kunne SES, ikke kun læses - ellers drukner en fejl mellem bemærkninger. */ #ziggo-regn .fund { border-left: 4px solid var(--border); padding: 12px 14px; border-radius: var(--radius-sm); background: var(--background); margin-bottom: 12px; } #ziggo-regn .fund-fejl { border-left-color: var(--danger); } #ziggo-regn .fund-advarsel { border-left-color: var(--rav-dyb); } #ziggo-regn .fund-bemaerkning { border-left-color: var(--text-secondary); } #ziggo-regn .fund h4 { font-size: calc(14px * var(--skrift-faktor, 1)); margin-bottom: 5px; font-family: var(--font-display); } #ziggo-regn .fund p { font-size: calc(13px * var(--skrift-faktor, 1)); line-height: 1.55; margin-bottom: 8px; color: var(--text-secondary); } #ziggo-regn .fund-bilag { font-size: calc(12px * var(--skrift-faktor, 1)); font-family: ui-monospace, monospace; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 7px 9px; margin-bottom: 8px; max-height: 110px; overflow-y: auto; word-break: break-word; } #ziggo-regn .fund-ok { padding: 16px; border-radius: var(--radius-sm); background: var(--primary-light); font-size: calc(14px * var(--skrift-faktor, 1)); } /* ============================================================ SKRIFTSTØRRELSE Én variabel styrer det hele. Byggescriptet har ganget hver font-size i stylesheetet med --skrift-faktor, så der er ÉT sted at rette (erfaringsregel 6b.10). Klasserne sidder på indpakningen selv — deraf &-formen. ============================================================ */ #ziggo-regn.skrift-lille { --skrift-faktor: 0.90; } #ziggo-regn.skrift-normal { --skrift-faktor: 1; } #ziggo-regn.skrift-stor { --skrift-faktor: 1.14; } #ziggo-regn.skrift-ekstra { --skrift-faktor: 1.30; } /* Vælgeren i systemmenuen */ #ziggo-regn .skrift-vaelger { display: flex; gap: 6px; } #ziggo-regn .skrift-knap { flex: 1; background: var(--background); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 4px; cursor: pointer; min-height: 42px; font-family: var(--font-display); font-weight: 700; line-height: 1; transition: border-color 0.15s, background-color 0.15s; } #ziggo-regn .skrift-knap:hover { border-color: var(--primary); } #ziggo-regn .skrift-knap[aria-pressed="true"] { background: var(--primary); color: var(--paa-farve); border-color: var(--primary); } /* Knappernes egen skrift viser, hvad man vælger. De er derfor BEVIDST ikke skaleret med — ellers ville alle fire se ens ud, uanset hvilken der var valgt. */ #ziggo-regn .skrift-knap-lille { font-size: var(--skrift-fast, 12px); } #ziggo-regn .skrift-knap-normal { font-size: var(--skrift-fast, 14px); } #ziggo-regn .skrift-knap-stor { font-size: var(--skrift-fast, 16px); } #ziggo-regn .skrift-knap-ekstra { font-size: var(--skrift-fast, 19px); } /* ---------- Farvevælgeren ---------- */ #ziggo-regn .farve-gruppe { margin-bottom: 18px; } #ziggo-regn .farve-gruppe h4 { font-size: var(--skrift-fast, 12px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; font-family: var(--font-display); } #ziggo-regn .farve-linje { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--flade-svag); } #ziggo-regn .farve-navn { flex: 1; font-size: calc(13.5px * var(--skrift-faktor, 1)); } #ziggo-regn .farve-vaerdi { font-family: ui-monospace, monospace; font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); min-width: 74px; text-align: right; } #ziggo-regn .farve-linje input[type="color"] { width: 46px; height: 34px; padding: 2px; border-radius: 5px; border: 1px solid var(--kant-svag); background: var(--felt-bg); cursor: pointer; flex: none; } #ziggo-regn .farve-tema-note { font-size: calc(13px * var(--skrift-faktor, 1)); line-height: 1.6; color: var(--text-secondary); background: var(--flade-svag); border-left: 3px solid var(--primary); padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 16px; } /* ============================================================ LICENS ============================================================ */ #ziggo-regn #ziggo-regn-licensbjaelke { position: sticky; top: 0; z-index: 150; padding: 11px 18px; margin: -28px -20px 20px; font-family: var(--font-display); font-size: calc(13.5px * var(--skrift-faktor, 1)); font-weight: 600; line-height: 1.5; text-align: center; } #ziggo-regn #ziggo-regn-licensbjaelke[hidden] { display: none; } #ziggo-regn #ziggo-regn-licensbjaelke.tilstand-grace { background: var(--rav-flade-2); color: var(--rav-tekst-2); border-bottom: 2px solid var(--rav-kant); } #ziggo-regn #ziggo-regn-licensbjaelke.tilstand-locked { background: var(--roed-flade); color: var(--roed-tekst); border-bottom: 2px solid var(--roed-lys); } /* Skrivebeskyttet tilstand. Formularen og de knapper, der ændrer noget, slås fra. Alt der LÆSER — filtre, udskrift, PDF, backup — bliver stående. Bilagene er lovpligtig dokumentation og må ikke kunne låses inde. */ /* ============================================================ DEMOTILSTAND HELE LISTEN OVER DET, DER SKJULES, STÅR HER — ét sted. Fordelt ud over tyve linjer JavaScript ville den enogtyvende blive glemt, og en glemt knap i en demo er en knap, der svarer med en fejl. Det, der IKKE står her, bliver stående med vilje: filtre, søgning, perioder, alle rapporter, kontoplanen og samtlige udskrifter. Man skal kunne prøve produktet. ============================================================ */ /* * !! HER STOD FØRST EN LANG LISTE OVER TING, DER SKULLE SKJULES !! * * Den hørte til den første demo, som læste sidens rigtige regnskab og * derfor måtte være skrivebeskyttet. Da demoen holdt op med at røre * databasen, forsvandt grunden — og med den listen. * * Nu skjules kun det, der ikke GIVER MENING uden en bruger. Alt det * øvrige — bogføring, fakturaer, betalinger, sletning, import og * nulstilling — er tilbage, fordi man skal kunne prøve produktet og * ikke bare kigge på det. Det rammer kun hukommelsen. * * Punkterne under "Data og drift" og "Farlige handlinger" er allerede * ude af billedet: de ligger i .kun-admin, og demoen har ingen * administrator. */ /* Der er ingen bruger at logge ud som. */ #ziggo-regn.demo #btnLogud { display: none; } /* ============================================================ DEMOVÆLGEREN Fuldskærm, og over indlæseren. Første udgave lå i bjælken øverst, som er position: sticky med top: 0 — og under et tema med fast header havner den BAG headeren. En fuldskærmsflade kan ikke dækkes. ============================================================ */ #ziggo-regn #demoVaelger { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--overlay-bag); } #ziggo-regn .demo-vaelger-kort { width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; padding: 28px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } #ziggo-regn .demo-vaelger-kort h2 { margin: 0 0 6px; font-size: calc(21px * var(--skrift-faktor, 1)); } #ziggo-regn .demo-vaelger-intro { margin: 0 0 18px; color: var(--text-secondary); font-size: calc(14px * var(--skrift-faktor, 1)); } #ziggo-regn .demo-vaelger-liste { display: grid; gap: 10px; } #ziggo-regn .demo-valg { display: grid; gap: 3px; width: 100%; padding: 14px 16px; text-align: left; cursor: pointer; background: var(--flade-svag); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); } #ziggo-regn .demo-valg:hover { border-color: var(--primary); background: var(--surface); } #ziggo-regn .dv-navn { font-size: calc(16px * var(--skrift-faktor, 1)); font-weight: 700; } #ziggo-regn .dv-tilstand { font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 600; color: var(--primary); } #ziggo-regn .dv-tekst { font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); line-height: 1.45; } /* * Plads over formularen, når der rulles til den. * * Uden dette lander formularens overskrift UNDER demobjælken og under * en eventuel fast header fra temaet — scrollIntoView kender kun * dokumentet, ikke hvad der klæber ovenpå. */ #ziggo-regn .form-panel { scroll-margin-top: 72px; } /* * !! SAMME PROBLEM, SAMME LØSNING — FANEBJÆLKEN (udv-2.11) !! * * "Sidemenu"-ikonet øverst i hver ikonbjælke (data-scroll-til= * "sideTabbar") rullede til det RIGTIGE sted — men #ziggo-regn- * licensbjaelke er position:sticky med top:0, og uden en * scroll-margin-top landede fanebjælkens øverste ~44px lige bag * den, næsten usynlig. Ikke kun i demoen: den samme bjælke bruges * til den rigtige licens' grace/locked-tilstande på et rigtigt * site. */ #ziggo-regn #sideTabbar { scroll-margin-top: 72px; } /* Skift demo — én knap i bjælken. Vælgeren selv står i fuldskærm. */ #ziggo-regn .demo-skift { margin-left: 12px; padding: 3px 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 600; cursor: pointer; } #ziggo-regn .demo-skift:hover { text-decoration: underline; } /* Bjælken øverst. Grøn og ikke rød: det er ikke en fejltilstand. */ #ziggo-regn.demo #ziggo-regn-licensbjaelke.tilstand-demo { background: var(--groen-flade); border-color: var(--groen-kant); color: var(--groen-tekst); } #ziggo-regn.skrivebeskyttet .form-panel { opacity: 0.5; } #ziggo-regn.skrivebeskyttet .form-panel input, #ziggo-regn.skrivebeskyttet .form-panel select, #ziggo-regn.skrivebeskyttet .form-panel button, #ziggo-regn.skrivebeskyttet .form-panel textarea { pointer-events: none; } /* Advarsel ved momsfluebenet. Ravgul og ikke rød: det er en bemærkning, ikke en fejl — brugeren kan udmærket have ret. */ /* Rubrik A, B og C. Dæmpet: de er en oplysning til angivelsen, ikke et beløb, der skal betales. */ #ziggo-regn .moms-rubrikker { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } #ziggo-regn .moms-rubrikker[hidden] { display: none; } #ziggo-regn .moms-rubrikker h4 { margin: 0 0 6px; font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); } #ziggo-regn .mr-linje { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: calc(13px * var(--skrift-faktor, 1)); } #ziggo-regn .mr-note { margin: 0 0 6px; font-size: calc(11px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .moms-advarsel { margin: 6px 0 0; padding: 7px 10px; background: var(--rav-flade); border: 1px solid var(--rav-kant); border-radius: var(--radius-sm); color: var(--rav-tekst); font-size: calc(12px * var(--skrift-faktor, 1)); line-height: 1.45; } #ziggo-regn .moms-advarsel[hidden] { display: none; } /* "Afhænger" er ikke en advarsel, men en oplysning. */ #ziggo-regn .moms-advarsel-info { background: var(--flade-svag); border-color: var(--border); color: var(--text-secondary); } #ziggo-regn .skrivebeskyttet-note { background: var(--roed-flade); color: var(--roed-tekst); border: 1px solid var(--roed-lys); border-radius: var(--radius-sm); padding: 11px 13px; font-size: calc(13px * var(--skrift-faktor, 1)); line-height: 1.55; margin-bottom: 12px; } /* ---------- Header-knapper ---------- */ #ziggo-regn .header-knapper { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Brugernavnet vises kun, når der er plads. På en telefon fylder knapperne ellers hele bredden og skubber overskriften væk. */ @media (max-width: 620px) { #ziggo-regn .header-knapper .logud-navn, #ziggo-regn .header-knapper #themeToggleLabel { display: none; } } /* Tema-skifteren i farvedialogen */ #ziggo-regn .farve-tema-linje { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } /* Med 34 farver i otte grupper skal dialogen have plads. */ #ziggo-regn .om-kort-bred { max-width: 860px; } /* ---------- Navn og version i toppen ---------- */ /* Erstatter den tidligere overskrift med undertitel. Diskret, fordi siden allerede har en titel fra temaet — to overskrifter over hinanden hjælper ingen. */ #ziggo-regn .app-navn { display: flex; align-items: baseline; gap: 9px; } #ziggo-regn .app-navn-tekst { font-family: var(--font-display); font-weight: 800; font-size: calc(clamp(17px, 0.6vw + 14.5px, 22px) * var(--skrift-faktor, 1)); color: var(--text); letter-spacing: -0.01em; } #ziggo-regn .app-navn-version { font-family: ui-monospace, monospace; font-size: var(--skrift-fast, 12px); color: var(--text-secondary); background: var(--flade-svag); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; } /* ---------- Nulstil pr. farve ---------- */ #ziggo-regn .farve-nulstil { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: var(--skrift-fast, 15px); line-height: 1; padding: 0; } #ziggo-regn .farve-nulstil:hover { border-color: var(--primary); color: var(--primary); } /* Samme bredde som knappen, så linjerne står lige, uanset om en farve er ændret eller ej. */ #ziggo-regn .farve-nulstil-plads { flex: none; width: 30px; } /* ---------- Tooltip på ikonbjælken ---------- */ /* * Egen tooltip frem for browserens. * * `title` giver en lille systemboks med minimal skrift, som IKKE kan * styles — hverken størrelse, farve eller placering. Ikonerne er * emoji uden tekst, så teksten er den eneste forklaring på, hvad * knappen gør, og den skal kunne læses. * * Attributten hedder derfor data-tip og ikke title: står begge, viser * browseren SIN oveni vores, og man får to bokse. */ #ziggo-regn .side-nav button { position: relative; } #ziggo-regn .side-nav button::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--text); color: var(--surface); padding: 8px 13px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--skrift-fast, 14px); font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 120; } /* Lille trekant, så boksen peger på knappen. */ #ziggo-regn .side-nav button::before { content: ''; position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-right-color: var(--text); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 120; } #ziggo-regn .side-nav button:hover::after, #ziggo-regn .side-nav button:hover::before, #ziggo-regn .side-nav button:focus-visible::after, #ziggo-regn .side-nav button:focus-visible::before { opacity: 1; } /* ---------- Fakturaoversigt ---------- */ #ziggo-regn .faktura-panel { border-left: 4px solid var(--moms-color); } #ziggo-regn .faktura-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } #ziggo-regn .faktura-filter label { font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text-secondary); } #ziggo-regn .faktura-filter select { min-height: 38px; } /* * OVERBLIK-BAREN (udv-2.04) — søgning, filter og sortering. Genbrugt på * Kreditor, Lager, Lagerbevægelser og Kontakter, samme opskrift som * .faktura-filter ovenfor. Egen klasse frem for at dele * .faktura-filter, fordi de to ikke nødvendigvis skal ændre sig * samstemt — Fakturaoversigten er ældre og har sine egne særheder. */ #ziggo-regn .kreditor-overblik-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; } #ziggo-regn .kreditor-overblik-bar label { font-size: calc(12px * var(--skrift-faktor, 1)); font-weight: 700; color: var(--text-secondary); } #ziggo-regn .kreditor-overblik-bar select, #ziggo-regn .kreditor-overblik-bar input[type="text"] { min-height: 38px; } #ziggo-regn .kreditor-overblik-bar input[type="text"] { flex: 1 1 180px; min-width: 140px; } /* * KIOSK-BANNER (udv-2.06) — samme ravgule farvesprog som * .betaling-formular-row bruger andre steder til "noget venter på * dig". Ikke rødt/danger — det er ikke en fejl, kun en handling, * der venter. */ #ziggo-regn .kiosk-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--rav-flade); border: 1px solid var(--rav-kant); border-radius: var(--radius-md); padding: 14px 18px; margin: 0 0 16px; } #ziggo-regn .kiosk-banner-ikon { font-size: calc(24px * var(--skrift-faktor, 1)); } #ziggo-regn .kiosk-banner-tekst { flex: 1 1 240px; font-weight: 600; color: var(--rav-tekst); } #ziggo-regn .faktura-sum { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: calc(13px * var(--skrift-faktor, 1)); color: var(--text-secondary); } /* Er der noget udestående, skal tallet kunne ses uden at lede. */ #ziggo-regn .faktura-sum.har-udestaaende { color: var(--rav-tekst); } #ziggo-regn .faktura-table tr.er-ubetalt td { background: var(--rav-flade); } #ziggo-regn .faktura-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: calc(11.5px * var(--skrift-faktor, 1)); font-weight: 700; white-space: nowrap; } #ziggo-regn .faktura-status.betalt { background: var(--groen-flade); color: var(--groen-tekst); } #ziggo-regn .faktura-status.ubetalt { background: var(--rav-flade-2); color: var(--rav-tekst); } /* Forfalden skiller sig ud fra almindeligt ubetalt: det er forskellen på "venter" og "her skal gøres noget". */ #ziggo-regn .faktura-status.forfalden { background: var(--roed-flade); color: var(--roed-tekst); } #ziggo-regn .faktura-dage { font-weight: 400; opacity: 0.85; } /* ==================== FAKTURAOVERSIGT PÅ SKÆRMEN ==================== */ /* Nøgletallene øverst. Fire tal, man kan læse på et sekund, frem for en linje tekst man skal tyde. */ #ziggo-regn .faktura-noegletal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; } #ziggo-regn .faktura-noegletal:empty { display: none; } #ziggo-regn .noegletal-felt { background: var(--flade-svag); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; } /* Det tal, man er kommet for, skal kunne ses uden at lede. */ #ziggo-regn .noegletal-felt.fremhaevet { border-left: 4px solid var(--rav); } #ziggo-regn .noegletal-felt.advarsel { border-left: 4px solid var(--danger); } #ziggo-regn .noegletal-navn { display: block; font-size: calc(10.5px * var(--skrift-faktor, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } #ziggo-regn .noegletal-tal { display: block; font-family: var(--font-display); font-weight: 800; font-size: calc(clamp(16px, 0.6vw + 13.5px, 21px) * var(--skrift-faktor, 1)); font-variant-numeric: tabular-nums; line-height: 1.25; margin-top: 2px; } #ziggo-regn .noegletal-note { display: block; font-size: calc(11.5px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .faktura-note { margin-left: auto; margin-bottom: 0; } /* ---- Blokke ---- */ #ziggo-regn .faktura-blok { margin-bottom: 18px; } #ziggo-regn .faktura-blok:last-child { margin-bottom: 0; } #ziggo-regn .faktura-blok-titel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 7px 2px; margin-bottom: 6px; border-bottom: 2px solid var(--border); } #ziggo-regn .blok-navn { font-family: var(--font-display); font-weight: 800; font-size: calc(14px * var(--skrift-faktor, 1)); } #ziggo-regn .blok-antal { font-size: calc(12px * var(--skrift-faktor, 1)); color: var(--text-secondary); } #ziggo-regn .blok-sum { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: calc(14px * var(--skrift-faktor, 1)); font-variant-numeric: tabular-nums; } #ziggo-regn .blok-ubetalt .faktura-blok-titel { border-bottom-color: var(--rav); } #ziggo-regn .blok-ubetalt .blok-sum { color: var(--rav-tekst); } #ziggo-regn .blok-betalt .faktura-blok-titel { border-bottom-color: var(--groen-kant); } /* Tal højrestilles med ens cifferbredde, så kolonnen kan skimmes lodret. Med proportionale cifre står de forskudt, og hvert tal skal læses for sig. */ #ziggo-regn .faktura-table td.celle-tal, #ziggo-regn .faktura-table th.celle-tal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } #ziggo-regn .faktura-table td.beloeb { font-weight: 700; } #ziggo-regn .faktura-table td.celle-bilag { font-family: ui-monospace, monospace; white-space: nowrap; } /* Dagtallet som et mærke frem for løs tekst — så øjet kan finde det. */ #ziggo-regn .dage-maerke { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--flade-deaktiveret); color: var(--text-secondary); font-size: calc(11.5px * var(--skrift-faktor, 1)); font-weight: 700; } #ziggo-regn .dage-maerke.er-forfalden { background: var(--roed-flade); color: var(--roed-tekst); } /* Forfalden markeres på hele rækken, ikke kun i én celle. */ #ziggo-regn .faktura-table tr.forfalden td { background: var(--roed-flade-2); } /* ---------- Sorteringsknap i tabeloverskriften ---------- */ /* Knappen ligner overskriften, den sidder i — den skal ikke stjæle opmærksomhed, kun kunne findes af den, der leder efter den. */ #ziggo-regn .sorter-knap { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } #ziggo-regn .sorter-knap:hover { color: var(--primary); } #ziggo-regn .sorter-pil { font-size: calc(0.85em * var(--skrift-faktor, 1)); opacity: 0.75; } #ziggo-regn .sorter-knap:hover .sorter-pil { opacity: 1; } /* ---------- Handlingskolonne i fakturaoversigten ---------- */ #ziggo-regn .faktura-table td.celle-handling { white-space: nowrap; text-align: right; } /* Liste uden rulleboks. Samme ramme som .scrollable-report-table, så de to ser ens ud — forskellen skal være, om man kan rulle, ikke hvordan kassen ser ud. */ #ziggo-regn .fuld-liste { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; } #ziggo-regn .fuld-liste .rapport-table { margin-bottom: 0; }