:root { /* Hage + Koi palett — lyst tema (default) */ --c-primary: #2d5538; /* Dypgrønn — bregner, mose */ --c-primary-light: #4a7d5a; /* Lysere grønn for hover */ --c-primary-fade: #e3edd9; /* Subtil grønn bakgrunn */ --c-secondary: #3b8b8b; /* Vann-teal */ --c-secondary-fade: #d6ebeb; --c-accent: #e8743d; /* Koi-oransje (Showa) */ --c-accent-hover: #d05f2a; --c-accent-fade: #fbe4d5; --c-warning: #f1b938; /* Solsikke-gul */ --c-warning-fade: #fdf3d6; --c-error: #c0392b; /* Koi-rød (Kohaku) */ --c-error-fade: #f9d9d5; --c-info: #4a90b8; /* Klar dam */ --c-info-fade: #dceaf2; --c-bg: #f7f3eb; /* Sand */ --c-surface: #ffffff; /* Kort, paneler */ --c-surface-alt: #f0f6f4; /* Vann-skum, subtil flate */ --c-fg: #1d2622; /* Mørk skog */ --c-fg-muted: #5a6660; --c-border: #d6d8d2; --c-border-strong: #b8bcb4; --c-row-hover: #eef4ec; --c-row-selected: #d8e8df; /* Skygger */ --shadow-sm: 0 1px 2px rgba(45, 85, 56, 0.06); --shadow-md: 0 2px 8px rgba(45, 85, 56, 0.12); --shadow-lg: 0 8px 24px rgba(45, 85, 56, 0.18); /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 999px; /* Bakoverkompatibilitet */ --bg: var(--c-bg); --fg: var(--c-fg); --accent: var(--c-primary); --accent-fade: var(--c-primary-fade); --border: var(--c-border); --warn: var(--c-warning); --error: var(--c-error); --ok: var(--c-primary); } /* Dark mode — manuell toggle via data-theme="dark" på */ :root[data-theme="dark"], :root[data-theme="auto"] { color-scheme: dark light; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --c-primary: #6fa17b; --c-primary-light: #88b894; --c-primary-fade: #2a3e30; --c-secondary: #5fbab5; --c-secondary-fade: #1f3a3a; --c-accent: #ff8d5c; --c-accent-hover: #ffa376; --c-accent-fade: #4a2e1f; --c-warning: #f1c850; --c-warning-fade: #3d3120; --c-error: #e85f51; --c-error-fade: #3d201d; --c-info: #6fb4d6; --c-info-fade: #1f323d; --c-bg: #1a2823; --c-surface: #243530; --c-surface-alt: #2d3f3a; --c-fg: #e8efe9; --c-fg-muted: #9aa8a0; --c-border: #3a4c44; --c-border-strong: #506258; --c-row-hover: #2d3f3a; --c-row-selected: #355048; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --c-primary: #6fa17b; --c-primary-light: #88b894; --c-primary-fade: #2a3e30; --c-secondary: #5fbab5; --c-secondary-fade: #1f3a3a; --c-accent: #ff8d5c; --c-accent-hover: #ffa376; --c-accent-fade: #4a2e1f; --c-warning: #f1c850; --c-warning-fade: #3d3120; --c-error: #e85f51; --c-error-fade: #3d201d; --c-info: #6fb4d6; --c-info-fade: #1f323d; --c-bg: #2d4338; --c-surface: #3d564b; --c-surface-alt: #486357; --c-fg: #f0f6f1; --c-fg-muted: #b8c8be; --c-border: #587068; --c-border-strong: #6e8579; --c-row-hover: #486357; --c-row-selected: #557868; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } /* Global: respect the hidden attribute even when display is overridden elsewhere */ [hidden] { display: none !important; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--fg); } header, .app-header { background: var(--accent); color: white; padding: 0.6rem 1.25rem; display: flex; align-items: center; gap: 1rem; } header h1 { margin: 0; font-size: 1.4rem; } header .hint { margin: 0.25rem 0 0; opacity: 0.8; font-size: 0.85rem; } .brand { display: inline-flex; align-items: center; gap: 0.75rem; color: white; text-decoration: none; flex: 1; } .brand-logo { height: 44px; width: auto; display: block; } .brand-title { font-size: 1.25rem; font-weight: 700; } .hamburger { background: transparent; border: 1px solid rgba(255,255,255,0.35); color: white; width: 38px; height: 38px; border-radius: 6px; cursor: pointer; font-size: 1.2rem; line-height: 1; } .hamburger:hover { background: rgba(255,255,255,0.1); } .login-logo { display: block; margin: 0 auto 1rem; height: 96px; width: auto; } /* Page layout med venstremeny */ .page-layout { display: grid; grid-template-columns: 180px 1fr; gap: 0.5rem; align-items: start; padding: 0.5rem; max-width: none; } .page-layout.no-sidenav, .page-layout.collapsed { grid-template-columns: 1fr; } .page-layout.collapsed .sidenav, .page-layout.no-sidenav .sidenav { display: none; } .page-content { min-width: 0; } .sidenav { position: sticky; top: 1rem; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); /* Hvis menyen er lenger enn skjermen — scrollbar inne i panelet, slik at alle punkter (f.eks. Automasjoner nederst) er nåbare. */ max-height: calc(100vh - 2rem); overflow-y: auto; } .sidenav.collapsed { display: none; } .sidenav hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 0.3rem 0; } .sidenav-item { text-align: left; background: transparent; border: none; padding: 0.6rem 0.9rem; border-radius: 4px; cursor: pointer; font-size: 0.95rem; color: var(--fg); font-family: inherit; text-decoration: none; display: block; } .sidenav-item:hover { background: var(--accent-fade); } .sidenav-link { color: var(--accent); font-weight: 600; } .sidenav-dropdown { position: relative; } .sidenav-dropdown .dropdown-menu { position: absolute; top: 0; left: calc(100% + 4px); min-width: 240px; } /* Backdrop bak sidenav-overlay på mobil */ .sidenav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 99; } @media (max-width: 720px) { /* Header: mer kompakt */ header, .app-header { padding: 0.4rem 0.6rem; gap: 0.5rem; flex-wrap: nowrap; } .brand { gap: 0.4rem; min-width: 0; } .brand-logo { height: 32px; } .brand-title { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hamburger { width: 36px; height: 36px; font-size: 1.1rem; flex-shrink: 0; } #user-badge { font-size: 0.8rem; gap: 0.4rem; flex-shrink: 0; } #user-badge #username-display { display: none; /* skjul brukernavn-tekst, behold bare knappen */ } #user-badge button { padding: 0.25rem 0.6rem; font-size: 0.8rem; } /* Page layout: én kolonne, sidenav blir overlay */ .page-layout { grid-template-columns: 1fr; padding: 0.5rem; gap: 0; } .sidenav { position: fixed; top: 52px; left: 0; bottom: 0; width: 80%; max-width: 280px; z-index: 100; border-radius: 0; border-right: 1px solid var(--border); box-shadow: 2px 0 8px rgba(0,0,0,0.15); overflow-y: auto; transform: translateX(-100%); transition: transform 0.25s ease; } /* Vis sidenav på mobil (med mindre leser-modus) — bruker spesifisitet for å overstyre .collapsed/.no-sidenav-regler */ .page-layout:not(.no-sidenav) .sidenav { display: flex; } /* Skyv inn når ikke collapsed */ .page-layout:not(.collapsed):not(.no-sidenav) .sidenav { transform: translateX(0); } .page-layout.collapsed .sidenav-backdrop { display: none; } .sidenav-dropdown .dropdown-menu { position: static; min-width: 0; margin-top: 0.25rem; } /* Tabeller: kompakt + gi mulighet for horisontal scroll */ .admin-card { padding: 1rem 0.75rem; } .toolbar { gap: 0.4rem; } .toolbar input[type=search], .toolbar select { padding: 0.4rem 0.6rem; font-size: 0.9rem; } table { font-size: 0.82rem; } th, td { padding: 0.4rem 0.5rem; } /* Send-knappen i compose skal ikke ta hele bredden */ .compose-send-row { padding: 0.5rem 0.75rem; } } /* Skjul backdrop helt på desktop */ @media (min-width: 721px) { .sidenav-backdrop { display: none !important; } } #user-badge { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; } #user-badge button { background: transparent; border: 1px solid rgba(255,255,255,0.5); color: white; padding: 0.3rem 0.8rem; border-radius: 4px; cursor: pointer; } #user-badge button:hover { background: rgba(255,255,255,0.1); } main { padding: 0; margin: 0; } .hint { color: var(--c-fg-muted); } /* Buttons */ button { font-family: inherit; } .btn-primary { background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.95rem; } .btn-primary:hover { filter: brightness(0.95); } .btn-danger { background: var(--error); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } .btn-danger:hover { filter: brightness(0.95); } .btn-danger.small, .btn-primary.small { padding: 0.25rem 0.6rem; font-size: 0.82rem; } tr.row-disabled { opacity: 0.55; cursor: not-allowed; } tr.row-disabled td { color: var(--c-fg-muted); opacity: 0.7; } .cron-snippet { background: #1f1f1f; color: #d4d4d4; padding: 0.75rem 1rem; border-radius: 6px; font-family: ui-monospace, monospace; font-size: 0.85rem; overflow-x: auto; white-space: pre; user-select: all; } .col-noter { text-align: center; } .noter-marker { color: var(--accent); font-weight: 700; cursor: help; } /* Dropdown */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; background: var(--c-surface); color: var(--c-fg); border: 1px solid var(--c-border); border-radius: 4px; box-shadow: var(--shadow-md); z-index: 50; padding: 0.3rem; } .dropdown-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 0.5rem 0.7rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .dropdown-menu button:hover { background: var(--accent-fade); } .dropdown-menu .empty { color: var(--c-fg-muted); padding: 0.5rem 0.7rem; font-size: 0.85rem; } .dropdown-menu .dropdown-sep { padding: 0.4rem 0.7rem 0.2rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #888; letter-spacing: 0.5px; border-top: 1px solid var(--border); margin-top: 0.25rem; } .dropdown-menu .dropdown-sep:first-child { border-top: none; margin-top: 0; } /* Fargekoding av mal-typer i Send-melding-dropdown (tema-aware) */ .dropdown-menu button.tpl-custom { background: var(--c-primary-fade); color: var(--c-primary); border-left: 4px solid var(--c-primary); } .dropdown-menu button.tpl-custom:hover { background: var(--c-row-selected); filter: brightness(1.05); } .dropdown-menu button.tpl-system { background: var(--c-error-fade); color: var(--c-error); border-left: 4px solid var(--c-error); } .dropdown-menu button.tpl-system:hover { filter: brightness(1.05); } /* Invite-tabellen er bred — komprimer for å unngå horisontal scroll */ #invite-members-table { table-layout: fixed; width: 100%; font-size: 0.82rem; } #invite-members-table th, #invite-members-table td { padding: 0.35rem 0.45rem; word-break: break-word; overflow-wrap: anywhere; vertical-align: top; } #invite-members-table th.col-num, #invite-members-table td.col-num { width: 2.2rem; } #invite-members-table th:nth-child(2), #invite-members-table td:nth-child(2) { width: 1.8rem; } #invite-members-table th:nth-child(3) { width: 14%; } /* Navn */ #invite-members-table th:nth-child(4) { width: 18%; } /* E-post */ #invite-members-table th:nth-child(5) { width: 7%; } /* Mobil */ #invite-members-table th:nth-child(6) { width: 10%; } /* Sted */ #invite-members-table th:nth-child(7) { width: 11%; } /* Rolle */ #invite-members-table th:nth-child(8) { width: 12%; } /* 2026 */ #invite-members-table th:nth-child(9) { width: 9%; } /* Medlemskort sendt */ #invite-members-table th:nth-child(10){ width: 7.5%; } /* Status */ #invite-members-table .badge { white-space: normal; font-size: 0.72rem; padding: 0.1rem 0.4rem; } #invite-members-table .preview-table-wrap, .preview-table-wrap:has(#invite-members-table) { overflow-x: hidden; } .badge-skip { background: #eee; color: #666; } .badge-new { background: #d8e8ff; color: #1b4d8a; } .template-block { border: 2px solid var(--c-primary, #2d5538); border-left-width: 6px; border-radius: 8px; padding: 1.2rem 1.4rem; margin-bottom: 1.8rem; background: #fafafa; box-shadow: 0 2px 6px rgba(0,0,0,0.06); } .template-block + .template-block { margin-top: 1.8rem; } .template-block h3 { margin: 0 0 0.75rem; padding-bottom: 0.5rem; font-size: 1.15rem; border-bottom: 1px solid var(--c-border, #e2e8f0); } /* System-maler: oransje aksent (skiller dem visuelt fra brukermaler) */ .template-block[data-system="1"] { border-left-color: var(--c-accent, #e8743d); } .template-block label { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; font-size: 0.85rem; color: #555; } .template-block input[type=text], .template-block textarea { padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.95rem; width: 100%; } .template-block textarea { font-family: ui-monospace, monospace; font-size: 0.9rem; resize: vertical; } .template-description { background: #fff3d6; border-left: 3px solid var(--warn); padding: 0.5rem 0.75rem; margin: 0.5rem 0; font-size: 0.85rem; border-radius: 0 4px 4px 0; } .template-vars { font-size: 0.82rem; color: #666; } .template-vars code { background: #e8e8e8; padding: 0.1rem 0.4rem; border-radius: 3px; margin-right: 0.3rem; } /* Login card */ .login-card { max-width: 360px; margin: 4rem auto; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .login-card h2 { margin-top: 0; } .login-card form { display: flex; flex-direction: column; gap: 1rem; } .login-card label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; } .login-card input { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem; } .login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .login-card button { background: var(--accent); color: white; border: none; padding: 0.7rem; font-size: 1rem; border-radius: 4px; cursor: pointer; } .login-card button:hover { filter: brightness(0.95); } .error { color: var(--c-error); font-size: 0.85rem; background: var(--c-error-fade); padding: 0.5rem 0.75rem; border-radius: 4px; border-left: 3px solid var(--c-error); font-weight: 500; } /* Eksplisitt overstyring i dark mode for max kontrast */ :root[data-theme="dark"] .error, :root[data-theme="auto"] .error { background: #4d1f1c; color: #ffd9d4; border-left-color: #e85f51; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .error { background: #4d1f1c; color: #ffd9d4; border-left-color: #e85f51; } } .link-button { background: transparent; border: none; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0.4rem 0; font-size: 0.9rem; } .link-button:hover { color: #1d4d34; } /* Toolbar */ .toolbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } .toolbar input[type=search], .toolbar select { padding: 0.5rem 0.8rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; } .toolbar input[type=search] { flex: 1; min-width: 200px; } .toolbar input:focus, .toolbar select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* Table */ table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } th, td { text-align: left; padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; line-height: 1.35; } th { background: var(--accent-fade); font-weight: 600; position: sticky; top: 0; cursor: pointer; user-select: none; } /* th:hover overstyres av V2-regel — fjernet hardkodet farge */ th.sort-asc::after { content: " ▲"; font-size: 0.7em; } th.sort-desc::after { content: " ▼"; font-size: 0.7em; } th.col-num, td.col-num { width: 3rem; text-align: right; color: #888; cursor: default; font-variant-numeric: tabular-nums; } th.col-num:hover { background: var(--accent-fade); } .col-sent { font-variant-numeric: tabular-nums; color: #555; white-space: nowrap; } tbody tr { cursor: pointer; } /* tbody tr:hover overstyres av V2-regel — fjernet hardkodet farge */ .badge { display: inline-block; padding: 0.08rem 0.45rem; border-radius: 99px; font-size: 0.76rem; font-weight: 500; white-space: nowrap; } /* Datofelt skal aldri brekke linje */ .col-sent, td.col-sent, .nowrap { white-space: nowrap; } .badge-vipps { background: #fff3d6; color: #8a6a00; } .badge-bank { background: #d8e8df; color: var(--accent); } .badge-ikke { background: #fde; color: var(--error); } .badge-ok { background: #d8e8df; color: var(--accent); } .badge-error { background: #fde; color: var(--error); } /* Readonly-felter i edit-modal */ .readonly-field input[readonly] { background: #f5f5f5; color: #666; cursor: default; border-style: dashed; } .readonly-field input[readonly]:focus { outline: none; } .row-edit { background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 0.2rem 0.55rem; font-size: 0.8rem; cursor: pointer; color: #555; } .row-edit:hover { background: var(--accent-fade); } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal { background: white; border-radius: 8px; width: min(640px, 90vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .modal-header { display: flex; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); } .modal-header h2 { margin: 0; font-size: 1.15rem; flex: 1; } .close-btn { background: transparent; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #888; padding: 0 0.5rem; } .close-btn:hover { color: #333; } .modal-body { padding: 1.5rem; overflow-y: auto; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; } .form-grid label, .payment-fields label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: #555; } .form-grid input, .form-grid select, .payment-fields input, .payment-fields select { padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; } .form-grid input:focus, .form-grid select:focus, .payment-fields input:focus, .payment-fields select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .col-span-2 { grid-column: span 2; } .payment-fields { margin-top: 1rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; } .payment-fields legend { font-size: 0.85rem; color: #555; padding: 0 0.4rem; grid-column: span 2; } .payment-fields .col-span-2 { grid-column: span 2; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; } .modal-footer .spacer { flex: 1; } .modal-footer button { padding: 0.5rem 1.2rem; border-radius: 4px; cursor: pointer; font-size: 0.95rem; border: 1px solid var(--border); background: white; } .modal-footer button:hover { background: #f5f5f5; } .modal-footer .btn-primary { border-color: var(--accent); background: var(--accent); color: white; } .modal-footer .btn-primary:hover { background: var(--accent); filter: brightness(0.95); } .modal-footer .btn-danger { border-color: var(--error); background: var(--error); color: white; } .modal-footer .btn-danger:hover { background: var(--error); filter: brightness(0.95); } /* Admin page */ .nav-link { color: white; text-decoration: none; border: 1px solid rgba(255,255,255,0.5); padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.85rem; } .nav-link:hover { background: rgba(255,255,255,0.1); } .admin-layout { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; } .admin-nav { position: sticky; top: 1rem; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .admin-nav.collapsed { display: none; } .admin-nav-item { text-align: left; background: transparent; border: none; padding: 0.6rem 0.9rem; border-radius: 4px; cursor: pointer; font-size: 0.95rem; color: var(--fg); } .admin-nav-item:hover { background: #f0f4f1; } .admin-nav-item.active { background: var(--accent); color: white; } .admin-content { min-width: 0; } @media (max-width: 720px) { .admin-layout { grid-template-columns: 1fr; } .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; } } .admin-card { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 1.5rem; } .admin-card h2 { margin-top: 0; } .admin-card fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; } .admin-card fieldset legend { font-size: 0.85rem; color: #555; padding: 0 0.4rem; } .admin-card label.checkbox-line { flex-direction: row; align-items: center; gap: 0.5rem; } .admin-card textarea { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.95rem; resize: vertical; width: 100%; } .admin-card textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .compose-vars-help { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--accent-fade); border-radius: 4px; border-left: 3px solid var(--accent); font-size: 0.9rem; } .compose-vars-help strong { color: var(--accent); } .compose-vars-help .vars-list { margin: 0.5rem 0; padding-left: 1.25rem; columns: 2; column-gap: 1.5rem; } .compose-vars-help .vars-list li { margin: 0.15rem 0; break-inside: avoid; } .compose-vars-help code { background: white; padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.85rem; color: var(--accent); } .compose-vars-help .signature-note { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px solid rgba(0,0,0,0.08); } .compose-vars-help .signature-note em { display: inline-block; margin-top: 0.25rem; padding-left: 0.5rem; border-left: 2px solid var(--accent); font-style: normal; color: #555; } @media (max-width: 600px) { .compose-vars-help .vars-list { columns: 1; } } .var-chip { background: white; border: 1px solid var(--border); border-radius: 3px; padding: 0 0.25rem; cursor: pointer; font: inherit; } .var-chip:hover { background: var(--accent); color: white; } .var-chip:hover code { background: transparent; color: white; } .var-chip code { background: transparent; padding: 0; border: 0; } .attach-list { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .attach-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.5rem; background: white; border: 1px solid var(--border); border-radius: 12px; font-size: 0.85em; } .attach-chip button { background: none; border: 0; cursor: pointer; color: #c00; font-weight: bold; padding: 0 0.2rem; } .compose-send-row { margin-top: 1rem; padding: 0.75rem 1rem; background: white; border: 1px solid var(--border); border-radius: 4px; /* Static posisjon — sticky top: 0 forårsaket at editor-innhold visuelt overlappet Send-knappen. */ position: static; } .compose-send-row .inline-error { margin-left: auto; } .compose-toolbar { flex-wrap: wrap; gap: 0.5rem; } .compose-toolbar input[type="search"] { min-width: 14rem; flex: 1 1 14rem; } .admin-card .form-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } /* Import modal */ .modal-wide { width: min(960px, 95vw); max-height: 90vh; } .import-step h3 { margin: 0 0 0.5rem; } .import-step + .import-step { margin-top: 1.5rem; } .preview-table-wrap { border: 1px solid var(--border); border-radius: 4px; margin-top: 0.5rem; /* OBS: inner overflow-y/max-height fjernet i v2.31 — vi vil ha viewport (side-scroll) som scroll-kontekst slik at thead sticky-positionerer mot toppen av siden, ikke mot wrapperen. */ } /* Tillat horisontal scroll for spesielt brede tabeller (users-matrix m.fl.) uten å bryte sticky-thead. */ .preview-table-wrap.users-matrix-wrap, .preview-table-wrap#tg-overview-wrap { overflow-x: auto; } #preview-table { box-shadow: none; } #preview-table td.action-cell { padding: 0.3rem 0.6rem; } #preview-table tr.skip { opacity: 0.5; } #preview-table .badge-new { background: #d8e8ff; color: #1b4d8a; } #preview-table .badge-match { background: var(--accent-fade); color: var(--accent); } #preview-table .badge-skip { background: #eee; color: #777; } .badge-note { background: #fff3cd; color: #8a6d1b; border: 1px solid #e0c87a; } .badge-melding { background: #eef4ff; color: #1b4d8a; border: 1px solid #b8d0f0; } .badge-template { background: #f0e6f7; color: #5c2a87; border: 1px solid #c7a8db; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; } .btn-small { font-size: 0.85em; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 3px; background: white; cursor: pointer; } .btn-small:hover { background: #f3f5f8; } .btn-small:disabled { opacity: 0.6; cursor: not-allowed; } #mail-log-table td:last-child { white-space: nowrap; } /* "Mutet" knapp — fortsatt klikkbar, men visuelt nedtonet */ .btn-muted { opacity: 0.55; filter: grayscale(0.4); } /* Klikkbar OK-badge (markér mail som ikke levert) */ button.mark-failed-btn { cursor: pointer; border: 1px solid currentColor; font: inherit; font-weight: bold; } button.mark-failed-btn:hover { filter: brightness(0.92); outline: 1px dashed currentColor; } button.mark-failed-btn:disabled { opacity: 0.5; cursor: wait; } #mail-log-table tr.row-failed td { background: #fdecea; } #mail-log-date-filter, #mail-log-subject-filter { max-width: 320px; padding: 0.3rem 0.4rem; } #preview-table tr.has-note td { background: #fffceb; } .warn-inline { color: #8a6d1b; font-weight: 600; margin-left: 0.5rem; } .note-member-info, .note-payment-info { padding: 0.5rem 0.75rem; background: #f7f7f9; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.75rem; } .note-payment-info { background: #fffceb; border-color: #e0c87a; } #note-editor { width: 100%; box-sizing: border-box; } #note-progress { font-weight: normal; font-size: 0.9em; color: #666; } #note-member-status { margin-left: 0.5rem; vertical-align: middle; } .note-db-info { padding: 0.5rem 0.75rem; background: #f3f5f8; border: 1px solid #c8cfdb; border-radius: 4px; margin-bottom: 0.75rem; } .db-list { margin: 0.3rem 0 0 1.2rem; padding: 0; font-size: 0.92em; } .db-list li { margin: 0.15rem 0; } .db-list .db-empty { color: #888; font-style: italic; } .payment-effect { margin-top: 0.4rem; font-size: 0.92em; padding: 0.3rem 0.5rem; border-radius: 3px; display: inline-block; } .payment-effect.effect-noop { background: #e0e0e0; color: #555; } .payment-effect.effect-new { background: #d8e8df; color: #1d6f3b; } .payment-effect.effect-double { background: #ffe1cc; color: #a04510; } .payment-effect.effect-change { background: #fff3cd; color: #8a6d1b; } .note-melding-block { padding: 0.5rem 0.75rem; background: #eef4ff; border: 1px solid #b8d0f0; border-radius: 4px; margin-bottom: 0.75rem; } .note-melding-text { margin-top: 0.25rem; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; } .note-suggestions { padding: 0.5rem 0.75rem; background: #e8f5ec; border: 1px solid #9cc8a8; border-radius: 4px; margin-bottom: 0.75rem; } .suggestion-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; } .suggestion-row code { background: white; padding: 0.05rem 0.3rem; border-radius: 3px; border: 1px solid var(--border); } .suggestion-row .hint { color: #777; } /* Cards modal */ .cards-toolbar { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; } .cards-toolbar input[type=search] { padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 4px; flex: 1; font-size: 0.9rem; } .cards-toolbar .spacer { flex: 1; } #cards-table td:first-child { width: 2rem; } .email-template { margin-top: 1rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 1rem; } .email-template summary { cursor: pointer; font-size: 0.9rem; color: #555; } .email-template label { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; font-size: 0.85rem; color: #555; } .email-template input, .email-template textarea { padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.95rem; } #card-canvas { display: block; margin: 0.5rem 0; max-width: 100%; height: auto; border: 1px solid var(--border); background: white; } /* ============================================================ V2 — Modernisering (Koi + hage palett, mobil-tabbar, dashboard) ============================================================ */ /* Sidemeny: grupper + ikoner */ .sidenav-group { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.5rem; } .sidenav-group:first-child { margin-top: 0; } .sidenav-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--c-fg-muted); padding: 0.35rem 0.9rem 0.15rem; } /* Collapsible-variant: knapp-aktig label med chevron */ .sidenav-group-label.sidenav-group-toggle { display: flex; align-items: center; gap: 0.4rem; width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit; } .sidenav-group-label.sidenav-group-toggle:hover { color: var(--c-fg); background: rgba(127,127,127,0.08); border-radius: 4px; } .sidenav-group-chevron { display: inline-block; transition: transform 150ms; font-size: 0.8rem; width: 0.9rem; } .sidenav-group.collapsed .sidenav-group-chevron { transform: rotate(-90deg); } .sidenav-group-items { display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; max-height: 1200px; transition: max-height 220ms ease-out; } .sidenav-group.collapsed .sidenav-group-items { max-height: 0; } .sidenav-item.v2 { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem; font-size: 0.92rem; color: var(--c-fg); border-radius: 6px; transition: background 120ms; } .sidenav-item.v2 .ic { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; } .sidenav-item.v2:hover { background: var(--c-primary-fade); } .sidenav-item.v2.active { background: var(--c-primary-fade); color: var(--c-primary); font-weight: 600; } .sidenav-item.v2.active .ic { opacity: 1; } /* Mobil bunn-tabbar */ .mobile-tabbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--c-surface); border-top: 1px solid var(--c-border); z-index: 90; padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,0.08); } .mobile-tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.2rem; align-items: end; } .mobile-tab { background: transparent; border: none; color: var(--c-fg-muted); font-size: 0.7rem; padding: 0.4rem 0.2rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-family: inherit; } .mobile-tab .ic { width: 22px; height: 22px; } .mobile-tab.active { color: var(--c-primary); } .mobile-tab.active .ic { stroke: var(--c-primary); } .mobile-tab.fab { background: var(--c-accent); color: white; border-radius: var(--radius-full); width: 52px; height: 52px; margin: 0 auto; justify-self: center; align-self: center; margin-top: -16px; box-shadow: var(--shadow-md); padding: 0; } .mobile-tab.fab .ic { width: 26px; height: 26px; stroke: white; } @media (max-width: 720px) { .mobile-tabbar { display: block; } .page-content { padding-bottom: 72px; } } /* ============================================================ Dashboard v3 — hero, ikon-kort, purring-cards ============================================================ */ /* Hero — stort topp-kort med progress */ .dash-hero { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%); color: white; border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 0.25rem 0 1rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: var(--shadow-md); cursor: pointer; transition: transform 120ms, box-shadow 120ms; position: relative; overflow: hidden; } .dash-hero::after { content: ""; position: absolute; top: -40%; right: -10%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%); pointer-events: none; } .dash-hero:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .dash-hero:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; } .dash-hero .hero-ic { width: 64px; height: 64px; flex-shrink: 0; background: rgba(255,255,255,0.15); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .dash-hero .hero-ic svg { width: 36px; height: 36px; stroke: white; } .dash-hero .hero-body { flex: 1; min-width: 0; } .hero-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; } .hero-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.6rem; } #hero-paid { font-size: 2.8rem; font-weight: 700; line-height: 1; } .hero-of { font-size: 0.95rem; opacity: 0.9; } .progress-track { height: 8px; background: rgba(255,255,255,0.22); border-radius: var(--radius-full); overflow: hidden; } .progress-fill { height: 100%; background: var(--c-accent); border-radius: var(--radius-full); transition: width 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } .hero-pct { margin-top: 0.4rem; font-size: 0.85rem; opacity: 0.9; } /* Seksjons-overskrifter */ .dash-section-title { margin: 1.5rem 0 0.6rem; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--c-fg-muted); } /* Stat-cards v3 — med ikon */ .stat-card-v3 { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 0.9rem 1rem; box-shadow: var(--shadow-sm); display: flex; gap: 0.7rem; align-items: center; cursor: pointer; transition: transform 120ms, box-shadow 120ms, border-color 120ms; position: relative; overflow: hidden; } .stat-card-v3::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-primary); } .stat-card-v3:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-primary); } .stat-card-v3:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .stat-card-v3 .sc-ic { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--c-primary-fade); color: var(--c-primary); } .stat-card-v3 .sc-ic svg { width: 22px; height: 22px; } .stat-card-v3 .sc-body { flex: 1; min-width: 0; } .stat-card-v3 .sc-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--c-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-card-v3 .sc-value { font-size: 1.7rem; font-weight: 700; color: var(--c-fg); line-height: 1.1; } .stat-card-v3 .sc-sub { font-size: 0.78rem; color: var(--c-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Fargede varianter per kontekst */ .stat-card-v3.ic-paid::before { background: var(--c-primary); } .stat-card-v3.ic-paid .sc-ic { background: var(--c-primary-fade); color: var(--c-primary); } .stat-card-v3.ic-unpaid::before { background: var(--c-warning); } .stat-card-v3.ic-unpaid .sc-ic { background: var(--c-warning-fade); color: var(--c-warning); } .stat-card-v3.ic-unpaid .sc-value { color: var(--c-warning); } .stat-card-v3.ic-kort::before { background: var(--c-accent); } .stat-card-v3.ic-kort .sc-ic { background: var(--c-accent-fade); color: var(--c-accent); } .stat-card-v3.ic-kort .sc-value { color: var(--c-accent); } .stat-card-v3.ic-total::before { background: var(--c-secondary); } .stat-card-v3.ic-total .sc-ic { background: var(--c-secondary-fade); color: var(--c-secondary); } .stat-card-v3.ic-utm::before { background: var(--c-fg-muted); } .stat-card-v3.ic-utm .sc-ic { background: var(--c-surface-alt); color: var(--c-fg-muted); } .stat-card-v3.ic-mail::before { background: var(--c-info); } .stat-card-v3.ic-mail .sc-ic { background: var(--c-info-fade); color: var(--c-info); } .stat-card-v3.ic-mail .sc-value { color: var(--c-info); } .stat-card-v3.ic-sms::before { background: var(--c-primary); } .stat-card-v3.ic-sms .sc-ic { background: var(--c-primary-fade); color: var(--c-primary); } .stat-card-v3.ic-sms .sc-value { color: var(--c-primary); } /* Purring-row med tre store kort */ .purr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 0.25rem 0 0; } .purr-card { border: none; border-radius: var(--radius-md); padding: 1rem 0.6rem; cursor: pointer; font-family: inherit; text-align: center; transition: transform 120ms, box-shadow 120ms; display: flex; flex-direction: column; gap: 0.25rem; position: relative; overflow: hidden; } .purr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .purr-card:focus-visible { outline: 2px solid var(--c-fg); outline-offset: 2px; } .purr-card .purr-num { font-size: 2rem; font-weight: 700; line-height: 1; } .purr-card .purr-label { font-size: 0.78rem; opacity: 0.85; font-weight: 600; } .purr-card.purr-1 { background: var(--c-info-fade); color: var(--c-info); border: 1px solid var(--c-info); } .purr-card.purr-2 { background: var(--c-warning-fade); color: var(--c-warning); border: 1px solid var(--c-warning); } .purr-card.purr-3 { background: var(--c-error-fade); color: var(--c-error); border: 1px solid var(--c-error); } /* Quick-actions: store kort med ikon */ .quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; margin-top: 0.25rem; } .qa-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1rem; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--c-fg); text-align: left; transition: transform 120ms, box-shadow 120ms, border-color 120ms; min-height: 60px; } .qa-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--c-accent); } .qa-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .qa-card svg { width: 26px; height: 26px; flex-shrink: 0; padding: 0.4rem; border-radius: var(--radius-sm); background: var(--c-accent-fade); color: var(--c-accent); stroke: var(--c-accent); box-sizing: content-box; } /* Dashboard grid (eksisterende) */ .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; padding: 0.5rem 0; } .stat-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.3rem; transition: transform 120ms, box-shadow 120ms; } .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .stat-card .stat-label { color: var(--c-fg-muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--c-primary); line-height: 1.1; } .stat-card .stat-sub { color: var(--c-fg-muted); font-size: 0.85rem; } .stat-card.accent .stat-value { color: var(--c-accent); } .stat-card.warning .stat-value { color: var(--c-warning); } .stat-card.error .stat-value { color: var(--c-error); } .stat-card.info .stat-value { color: var(--c-info); } /* Purring-breakdown pills */ .purring-breakdown { display: flex; gap: 0.5rem; margin: 0.2rem 0; } .purring-pill { flex: 1; background: var(--c-warning-fade); border: 1px solid transparent; border-radius: var(--radius-md); padding: 0.5rem 0.4rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-family: inherit; transition: transform 100ms, border-color 100ms; } .purring-pill:hover { transform: translateY(-1px); border-color: var(--c-warning); } .purring-pill[data-list="purr-3"] { background: var(--c-error-fade); } .purring-pill[data-list="purr-3"]:hover { border-color: var(--c-error); } .purring-pill .pp-label { font-size: 0.72rem; color: var(--c-fg-muted); font-weight: 600; } .purring-pill .pp-value { font-size: 1.4rem; font-weight: 700; color: var(--c-warning); line-height: 1; } .purring-pill[data-list="purr-3"] .pp-value { color: var(--c-error); } .dash-section { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); margin-top: 1rem; } .dash-section h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--c-primary); } .dash-link { background: transparent; border: none; color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; padding: 0; font-weight: 600; } .dash-link:hover { color: var(--c-accent-hover); } .member-list-modal { max-height: 70vh; overflow-y: auto; } .member-list-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--c-border); cursor: pointer; border-radius: var(--radius-sm); } .member-list-row:last-child { border-bottom: none; } .member-list-row:hover { background: var(--c-row-hover); } .member-list-row .mr-name { font-weight: 600; flex: 1; color: var(--c-fg); } .member-list-row .mr-meta { color: var(--c-fg-muted); font-size: 0.85rem; } .member-list-row .mr-missing { color: var(--c-error); font-size: 0.78rem; background: var(--c-error-fade); padding: 0.1rem 0.4rem; border-radius: var(--radius-full); } .dash-attention-list { list-style: none; padding: 0; margin: 0; } .dash-attention-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 0.6rem; } .dash-attention-list li:last-child { border: none; } .dash-attention-icon { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--c-warning-fade); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } /* Filter-chips */ .filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0; } .chip { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-fg); padding: 0.3rem 0.75rem; border-radius: var(--radius-full); font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: all 120ms; display: inline-flex; align-items: center; gap: 0.3rem; } .chip:hover { border-color: var(--c-primary); } .chip.active { background: var(--c-primary); color: white; border-color: var(--c-primary); } .chip .chip-count { background: rgba(255,255,255,0.25); padding: 0.02rem 0.4rem; border-radius: var(--radius-full); font-size: 0.75rem; } .chip:not(.active) .chip-count { background: var(--c-primary-fade); color: var(--c-primary); } /* Toast-system */ #toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column-reverse; gap: 0.5rem; max-width: 380px; pointer-events: none; } @media (max-width: 720px) { #toast-container { bottom: auto; top: 1rem; left: 1rem; right: 1rem; max-width: none; flex-direction: column; } } .toast { background: var(--c-surface); border-left: 4px solid var(--c-primary); border-radius: var(--radius-md); padding: 0.7rem 1rem; box-shadow: var(--shadow-md); pointer-events: auto; animation: toast-in 200ms ease-out; display: flex; align-items: flex-start; gap: 0.6rem; } .toast.toast-success { border-left-color: var(--c-primary); } .toast.toast-error { border-left-color: var(--c-error); } .toast.toast-warning { border-left-color: var(--c-warning); } .toast.toast-info { border-left-color: var(--c-info); } .toast .toast-icon { font-size: 1.1rem; flex-shrink: 0; } .toast .toast-msg { flex: 1; font-size: 0.9rem; color: var(--c-fg); white-space: pre-wrap; } .toast .toast-close { background: transparent; border: none; color: var(--c-fg-muted); cursor: pointer; font-size: 1.1rem; padding: 0 0.2rem; line-height: 1; } @keyframes toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Bottom sheet på mobil */ @media (max-width: 720px) { .modal-backdrop { align-items: flex-end; padding: 0; } .modal { width: 100%; max-width: none; max-height: 90vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: 0; animation: sheet-up 250ms ease-out; } .modal-header { padding-top: 0.6rem; position: relative; } .modal-header::before { content: ""; display: block; width: 40px; height: 4px; background: var(--c-border-strong); border-radius: 999px; margin: 0 auto 0.5rem; } } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Cmd/Ctrl+K palette */ .cmdk-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh; z-index: 300; } .cmdk-panel { background: var(--c-surface); border-radius: var(--radius-md); width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; } .cmdk-input { width: 100%; padding: 1rem 1.2rem; border: none; border-bottom: 1px solid var(--c-border); font-size: 1rem; font-family: inherit; background: transparent; color: var(--c-fg); outline: none; } .cmdk-results { max-height: 50vh; overflow-y: auto; padding: 0.3rem; } .cmdk-item { padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; } .cmdk-item:hover, .cmdk-item.active { background: var(--c-primary-fade); } .cmdk-item .ic { width: 18px; height: 18px; opacity: 0.7; } .cmdk-item .cmdk-section-label { margin-left: auto; color: var(--c-fg-muted); font-size: 0.78rem; } .cmdk-empty { padding: 1rem; text-align: center; color: var(--c-fg-muted); } /* Medlemstabell — mobil card-view */ .member-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 0.75rem 0.9rem; margin-bottom: 0.5rem; box-shadow: var(--shadow-sm); cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; min-height: 56px; transition: transform 100ms, box-shadow 100ms; } .member-card:active { transform: scale(0.99); } .member-card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .member-card .mc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .member-card .mc-name { font-weight: 600; font-size: 1.02rem; color: var(--c-fg); flex: 1; } .member-card .mc-meta { color: var(--c-fg-muted); font-size: 0.9rem; line-height: 1.4; } .member-card .mc-extra { color: var(--c-fg-muted); font-size: 0.82rem; } .member-card .mc-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; } .member-card .mc-check { width: 22px; height: 22px; cursor: pointer; flex-shrink: 0; } @media (max-width: 720px) { .members-table-wrap { display: none; } .members-cards-wrap { display: block; } } @media (min-width: 721px) { .members-cards-wrap { display: none; } .members-table-wrap { display: block; } } /* ============================================================ MOBIL — generelle forbedringer ============================================================ */ @media (max-width: 720px) { /* Sidemeny som drawer fra venstre */ .sidenav { z-index: 110; width: 85%; max-width: 320px; } .sidenav-backdrop { z-index: 105; } /* Skjul mobil-tabbar når sidemeny er åpen */ .page-layout:not(.collapsed) .mobile-tabbar { display: none; } /* Header mer kompakt */ header.app-header { padding: 0.4rem 0.75rem; } .brand-title { font-size: 1.05rem; } .brand-logo { height: 36px; } /* Skjul brukernavn-tekst på mobil for å spare plass */ #user-badge #username-display { display: none; } #user-badge { gap: 0.4rem; } /* Toolbar: bedre touch + stack */ .toolbar { padding: 0.5rem 0; gap: 0.5rem; } .toolbar input[type=search] { min-height: 44px; padding: 0.6rem 0.8rem; font-size: 1rem; flex: 1 1 100% !important; max-width: none !important; } .toolbar select, .toolbar button:not(.chip):not(.var-chip) { min-height: 44px; } .toolbar .dropdown { width: 100%; } .toolbar .dropdown > .btn-accent, .toolbar .dropdown > .btn-primary { width: 100%; min-height: 44px; } .toolbar .toolbar-spacer { display: none; } /* Filter-chips horisontal scroll */ .filter-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.3rem 0.25rem 0.6rem; margin: 0.25rem -0.25rem; scrollbar-width: none; } .filter-chips::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; padding: 0.45rem 0.9rem; font-size: 0.92rem; min-height: 38px; } .filter-chips .toolbar-spacer { display: none; } .filter-chips #result-count { flex-basis: 100%; padding: 0.3rem 0.5rem; } /* Dashboard: 2 kolonner på mobil */ .dashboard { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .stat-card { padding: 0.7rem 0.8rem; } .stat-card .stat-value { font-size: 1.5rem; } .stat-card .stat-label { font-size: 0.7rem; } .stat-card .stat-sub { font-size: 0.78rem; } .dash-section { padding: 0.75rem 0.9rem; } .dash-actions button { flex: 1 1 100%; min-height: 44px; } .purring-pill .pp-value { font-size: 1.2rem; } /* Dashboard v3 — mobil */ .dash-hero { padding: 1rem 1rem; gap: 0.9rem; border-radius: var(--radius-md); } .dash-hero .hero-ic { width: 48px; height: 48px; } .dash-hero .hero-ic svg { width: 28px; height: 28px; } #hero-paid { font-size: 2.2rem; } .hero-of { font-size: 0.85rem; } .hero-label { font-size: 0.7rem; } .hero-pct { font-size: 0.78rem; } .stat-card-v3 { padding: 0.75rem 0.85rem; gap: 0.55rem; } .stat-card-v3 .sc-ic { width: 38px; height: 38px; } .stat-card-v3 .sc-ic svg { width: 20px; height: 20px; } .stat-card-v3 .sc-value { font-size: 1.4rem; } .stat-card-v3 .sc-label { font-size: 0.65rem; } .stat-card-v3 .sc-sub { font-size: 0.72rem; } .purr-card { padding: 0.8rem 0.4rem; } .purr-card .purr-num { font-size: 1.7rem; } .purr-card .purr-label { font-size: 0.72rem; } .quick-actions { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .qa-card { padding: 0.8rem; font-size: 0.88rem; min-height: 64px; } .qa-card svg { width: 22px; height: 22px; } .dash-section-title { font-size: 0.78rem; margin: 1.25rem 0 0.5rem; } .dash-attention-list li { font-size: 0.9rem; gap: 0.5rem; } /* Admin-cards mer luft */ .admin-card { padding: 0.75rem; border-radius: var(--radius-sm); } .admin-card h2 { font-size: 1.1rem; margin-bottom: 0.3rem; } .admin-card h3 { font-size: 1rem; } /* Andre tabeller — horisontal scroll i wrapper */ #compose-table, #kort-table, #sms-table, #invite-members-table, #update-info-members-table, #mail-log-table { font-size: 0.78rem; } .preview-table-wrap, .members-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Modal-footer: knapper full bredde + stack */ .modal-footer { flex-direction: column-reverse; gap: 0.5rem; padding: 0.75rem; } .modal-footer button { width: 100%; min-height: 44px; padding: 0.7rem; } .modal-footer .spacer { display: none; } /* Form-grid: 1 kolonne */ .form-grid { grid-template-columns: 1fr; } .form-grid .col-span-2 { grid-column: 1; } .form-grid input, .form-grid select, .form-grid textarea { min-height: 44px; padding: 0.6rem 0.7rem; font-size: 1rem; } /* Kiosk større touch */ .kiosk-result-card { min-height: 64px; padding: 0.9rem 1rem; } #kiosk-search { font-size: 1.05rem; padding: 0.8rem 1rem; min-height: 48px; } /* Cmd+K palette */ .cmdk-panel { max-width: 95vw; } .cmdk-input { font-size: 0.95rem; padding: 0.9rem 1rem; min-height: 48px; } /* Bedre tap-feedback på rader/knapper generelt */ button, .chip, .stat-card, .member-card, .kiosk-result-card, .dropdown-menu button, .cmdk-item, .member-list-row { -webkit-tap-highlight-color: rgba(45, 85, 56, 0.2); } } /* Veldig små skjermer (< 400px) — 1 kolonne dashboard */ @media (max-width: 400px) { .dashboard { grid-template-columns: 1fr; } .brand-title { display: none; } } /* Loading skeleton */ .skel { background: linear-gradient(90deg, var(--c-surface-alt) 0%, var(--c-border) 50%, var(--c-surface-alt) 100%); background-size: 200% 100%; animation: skel-pulse 1.4s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes skel-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Dark-mode-toggle i header */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: white; width: 32px; height: 32px; border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { background: rgba(255,255,255,0.12); } .theme-toggle svg { width: 18px; height: 18px; } /* Passord-krav-liste (accept.html / reset.html / change_password-modal) */ .pw-req { list-style: none; padding: 0; margin: 0.25rem 0 0.75rem 0.25rem; font-size: 0.85rem; color: var(--c-fg-muted, #666); } .pw-req li { padding: 0.1rem 0 0.1rem 1.4rem; position: relative; } .pw-req li::before { content: "○"; position: absolute; left: 0; color: #aaa; } .pw-req li.ok { color: #2d5538; } .pw-req li.ok::before { content: "✓"; color: #2d5538; font-weight: bold; } .pw-req li.missing { color: #999; } /* Globalt søkefelt i header — til venstre for "Innlogget som …" */ .global-search { padding: 0.4rem 0.7rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; background: rgba(255,255,255,0.1); color: white; font: inherit; font-size: 0.9rem; min-width: 220px; margin-right: 0.5rem; } .global-search::placeholder { color: rgba(255,255,255,0.7); } .global-search:focus { outline: 2px solid var(--c-accent, #e8743d); outline-offset: 1px; } @media (max-width: 720px) { .global-search { display: none; } /* mobile tabbar har egen FAB-søk */ } /* Tilganger-side (vannfylling-stil): velg-bruker-kort + editor-kort */ .tg-card { background: var(--c-surface, white); border: 1px solid var(--c-border, #e2e8f0); border-radius: var(--radius-md, 8px); padding: 0.9rem 1.1rem; margin: 0.75rem 0; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04)); } .tg-card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .tg-search-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .tg-search-row input[type="search"], .tg-search-row select { padding: 0.5rem 0.7rem; border: 1px solid var(--c-border, #cbd5e1); border-radius: 6px; font: inherit; background: var(--c-surface, white); color: var(--c-fg, #1e293b); } .tg-search-row input[type="search"] { min-width: 200px; flex: 1 1 200px; max-width: 320px; } .tg-search-row select { min-width: 260px; flex: 1 1 260px; max-width: 420px; } .tg-badges { color: var(--c-fg-muted, #64748b); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .tg-badges .tg-badge-marker { font-weight: 600; } .tg-warning { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; border-radius: 6px; padding: 0.6rem 0.9rem; margin: 0.5rem 0 0.9rem; font-size: 0.92rem; } .tg-perm-group { margin-top: 0.9rem; } .tg-perm-group-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-fg-muted, #64748b); margin: 0 0 0.5rem 0; } .tg-perm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem 1rem; } @media (max-width: 720px) { .tg-perm-grid { grid-template-columns: 1fr; } } .tg-perm-grid label { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; cursor: pointer; font-size: 0.95rem; } .tg-perm-grid label input[type="checkbox"] { transform: scale(1.15); cursor: pointer; flex-shrink: 0; } /* Tilganger-oversikt (permissions = rader, brukere = kolonner) */ .tg-overview { border-collapse: collapse; min-width: 100%; font-size: 0.85rem; } .tg-overview th, .tg-overview td { border-bottom: 1px solid var(--c-border, #eee); padding: 0.45rem 0.7rem; vertical-align: middle; } .tg-overview thead th { background: var(--c-surface-alt, #f8fafc); font-weight: 600; position: sticky; top: 0; z-index: 3; text-align: center; } .tg-overview th.tg-ov-stickyl, .tg-overview td.tg-ov-stickyl { position: sticky; left: 0; background: var(--c-surface, white); z-index: 2; min-width: 220px; text-align: left; border-right: 1px solid var(--c-border, #eee); } .tg-overview thead th.tg-ov-stickyl { background: var(--c-surface-alt, #f8fafc); z-index: 4; } .tg-overview .tg-ov-user { min-width: 110px; white-space: nowrap; text-align: center; } .tg-overview .tg-ov-user-clickable { cursor: pointer; transition: background 120ms; } .tg-overview .tg-ov-user-clickable:hover { background: var(--c-primary-fade, #e6f0ea); } .tg-overview .tg-ov-user-clickable .tg-ov-name { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .tg-overview .tg-ov-star { color: #d97706; font-weight: 700; } .tg-overview .tg-ov-count { font-size: 0.7rem; color: var(--c-fg-muted, #888); font-weight: 500; margin-top: 2px; } .tg-overview .tg-ov-count-zero { color: #ef4444; font-weight: 600; } .tg-overview .tg-ov-label { font-weight: 500; } .tg-overview .tg-ov-key { font-size: 0.72rem; color: var(--c-fg-muted, #888); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; } .tg-overview .tg-ov-cell { text-align: center; font-size: 1rem; color: var(--c-primary, #2d5538); font-weight: 600; } .tg-overview .tg-ov-dot { color: #d1d5db; font-weight: 400; } .tg-overview tr.tg-ov-grouprow td { background: var(--c-surface-alt, #f1f5f9); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-fg-muted, #64748b); padding: 0.4rem 0.7rem; } /* Brukere — tilgangs-matrise (rader = brukere, kolonner = permissions) */ .users-matrix-wrap { overflow-x: auto; /* Mer plass for vertikale headere */ padding-top: 0; } .users-matrix { border-collapse: collapse; min-width: 100%; font-size: 0.85rem; } .users-matrix th, .users-matrix td { border-bottom: 1px solid var(--c-border, #eee); padding: 0.4rem 0.5rem; white-space: nowrap; } .users-matrix thead th { background: var(--c-surface-alt, #f8fafc); font-weight: 600; vertical-align: bottom; position: sticky; top: 0; z-index: 3; } .users-matrix th.perm-col { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); /* så teksten leses nedenfra og opp */ height: 160px; padding: 0.5rem 0.25rem; min-width: 28px; font-weight: 500; letter-spacing: 0; cursor: help; font-size: 0.78rem; } .users-matrix td.perm-cell { text-align: center; padding: 0.3rem 0.25rem; } .users-matrix td.perm-cell input[type="checkbox"] { transform: scale(1.2); cursor: pointer; } .users-matrix .user-col-sticky { position: sticky; left: 0; background: var(--c-surface, white); z-index: 2; min-width: 180px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .users-matrix thead .user-col-sticky { background: var(--c-surface-alt, #f8fafc); z-index: 4; /* over både sticky-row og sticky-col */ } /* Tilgangs-modal (admin → bruker permissions) */ .perm-group { border: 1px solid var(--c-border, #ddd); border-radius: var(--radius-sm, 4px); padding: 0.5rem 0.75rem 0.75rem; margin: 0.75rem 0; } .perm-group legend { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--c-fg-muted, #555); padding: 0 0.4rem; } .perm-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; cursor: pointer; } .perm-row input[type="checkbox"] { flex-shrink: 0; } .perm-row .perm-label { flex: 1; font-size: 0.95rem; } .perm-row .perm-key { font-size: 0.75rem; color: var(--c-fg-muted, #888); background: var(--c-surface-alt, #f5f5f5); padding: 0.1rem 0.4rem; border-radius: 3px; } /* ============================================================ Sticky toolbars + table headers (v2.31) ============================================================ Strategi: 1) Toolbar/compose-toolbar/filter-chips: sticky top: 0 (z-index 5) 2) Hvis BÅDE toolbar OG filter-chips er direkte søsken (medlemmer), stables filter-chips under toolbar 3) thead-th: sticky alltid — top: 0 hvis ingen sticky-toolbar over, ellers offset under toolbar (48px) eller toolbar+chips (96px) 4) Aktive forespørsler-h3 i update-info: stables også under toolbar */ /* (1) Sticky topp-toolbars i alle relevante seksjoner */ .admin-card > .toolbar, .admin-card > .compose-toolbar, .admin-card > .filter-chips, .app-section > .toolbar, .app-section > .filter-chips { position: sticky; top: 0; background: var(--c-surface, white); z-index: 5; padding: 0.4rem 0; margin: 0; border-bottom: 1px solid var(--c-border, #eee); } /* (2) Filter-chips stables under toolbar i medlemmer-seksjonen (og andre seksjoner som har begge som direkte søsken) */ .admin-card > .toolbar ~ .filter-chips, .app-section > .toolbar ~ .filter-chips { top: 48px; } /* (3a) Universell sticky thead — virker overalt mot side-scroll */ thead th, .preview-table-wrap thead th, .sortable-table thead th, .members-table-wrap thead th { position: sticky; top: 0; background: var(--c-primary-fade); color: var(--c-fg); z-index: 3; box-shadow: inset 0 -1px 0 var(--c-border, #e2e8f0); } /* (3b) Når en admin-card har sticky-toolbar over tabellen, offset thead under den. :has() er Chrome 105+/Firefox 121+/Safari 15.4+ — gracefully degrader til top:0 i eldre browsere (overlap-merket). */ .admin-card:has(> .toolbar) thead th, .admin-card:has(> .compose-toolbar) thead th, .admin-card:has(> .filter-chips) thead th { top: 48px; } /* (3c) Medlemmer-seksjonen har BÅDE toolbar OG filter-chips — thead må offset under begge */ .app-section[data-section="medlemmer"] thead th { top: 96px; } /* (4) Aktive forespørsler-h3-raden i update-info-seksjonen: stables under sticky toolbar slik at den ikke overlapper */ .admin-card:has(> .toolbar) > .form-actions:has(h3), .admin-card > h3.sticky-h3 { position: sticky; top: 48px; background: var(--c-surface, white); z-index: 4; padding: 0.4rem 0; margin-top: 0 !important; } /* Sorterbar tabell: klikkbare headere + visuell sortering */ .sortable-table th[data-sort] { cursor: pointer; user-select: none; } .sortable-table th[data-sort]:hover { background: var(--c-primary-fade, #e6f0ea); } .sortable-table th.sort-asc::after { content: " ▲"; font-size: 0.7em; opacity: 0.7; } .sortable-table th.sort-desc::after { content: " ▼"; font-size: 0.7em; opacity: 0.7; } /* Nøytral ↕-hint på sorterbare kolonner som ikke er aktive, så det er tydelig at alle kan klikkes for stigende/synkende sortering. */ .sortable-table th[data-sort]:not(.sort-asc):not(.sort-desc)::after { content: " ↕"; font-size: 0.7em; opacity: 0.3; } /* Info-notater: liste over delte fritekst-notater */ .info-item { background: var(--c-surface, white); border: 1px solid var(--c-border, #e2e8f0); border-left: 4px solid var(--c-primary, #2d5538); border-radius: 6px; padding: 0.7rem 1rem; margin-bottom: 0.6rem; } .info-item .info-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; font-size: 0.9rem; } .info-item .info-meta .spacer { flex: 1; } .info-item .info-text { white-space: pre-wrap; word-break: break-word; font-size: 0.95rem; line-height: 1.4; } .info-item .info-edit { width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--c-border, #ccc); border-radius: 4px; } /* Søke-inputs: alltid synlig clear (X)-knapp uten mouse-over. Native ::-webkit-search-cancel-button vises ofte kun ved hover i Safari. */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; opacity: 1; margin-left: 0.3rem; } input[type="search"]::-webkit-search-cancel-button:hover { opacity: 0.7; } /* Globalt SVG-baseline for alle .ic-ikoner — defensiv mot mobile-browsers som ellers kan fylle med svart eller skalere feil. Eksplisitte regler andre steder kan fortsatt overstyre størrelse/farge per seksjon. */ .ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; } /* V2 overstyringer */ body { background: var(--c-bg); color: var(--c-fg); transition: background 200ms, color 200ms; } .admin-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .sidenav { background: var(--c-surface) !important; border: 1px solid var(--c-border); color: var(--c-fg); } .sidenav hr { border-top: 1px solid var(--c-border); } .sidenav-item, .sidenav-item.v2 { color: var(--c-fg) !important; } .sidenav-item:hover, .sidenav-item.v2:hover { background: var(--c-primary-fade) !important; color: var(--c-fg) !important; } .sidenav-item.v2.active { background: var(--c-primary-fade) !important; color: var(--c-primary) !important; } .sidenav-item.v2 .ic { stroke: var(--c-fg); opacity: 0.85; } .sidenav-item.v2.active .ic { stroke: var(--c-primary); opacity: 1; } .sidenav-group-label { color: var(--c-fg-muted); } /* Mobile tabbar i dark mode */ .mobile-tabbar { background: var(--c-surface); border-top-color: var(--c-border); } .mobile-tab { color: var(--c-fg-muted); } .mobile-tab .ic { stroke: var(--c-fg-muted); } .mobile-tab.active, .mobile-tab.active .ic { color: var(--c-primary); stroke: var(--c-primary); } /* Modal — theme-aware overstyringer */ .modal { background: var(--c-surface) !important; color: var(--c-fg); border: 1px solid var(--c-border); } .modal-header { background: var(--c-primary-fade); color: var(--c-fg); border-bottom: 1px solid var(--c-border); } .modal-header h2 { color: var(--c-fg) !important; } .modal-header .hint { color: var(--c-fg-muted) !important; } .close-btn { color: var(--c-fg-muted); } .close-btn:hover { color: var(--c-fg); background: var(--c-row-hover); border-radius: var(--radius-sm); } .modal-body, .modal-body * { color: var(--c-fg); } .modal-body .hint, .modal-body .stat-sub, .modal-body p.hint { color: var(--c-fg-muted) !important; } .modal-body .mr-meta, .modal-body .mr-missing { /* unngå å overstyre badges */ } .modal-body label { color: var(--c-fg-muted) !important; } .modal-body input, .modal-body select, .modal-body textarea { color: var(--c-fg) !important; background: var(--c-surface) !important; } .modal-footer { background: var(--c-surface-alt); border-top: 1px solid var(--c-border); } /* Sørg for at member-list-radene har god kontrast */ .member-list-row .mr-name { color: var(--c-fg) !important; } .member-list-row .mr-meta { color: var(--c-fg-muted) !important; } .member-list-row .mr-missing { color: white !important; background: var(--c-error) !important; } /* Faste e-poster — alltid svart-på-hvit i edit-felter for max kontrast */ .template-block { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-fg); } .template-block h3 { color: var(--c-fg); } .template-block label { color: var(--c-fg-muted) !important; } .template-block input[type=text], .template-block textarea { background: #ffffff !important; color: #1a1a1a !important; border: 1px solid var(--c-border-strong) !important; } .template-block input[type=text]:focus, .template-block textarea:focus { border-color: var(--c-primary) !important; outline: 2px solid var(--c-primary-fade); } .template-block input[type=text]:disabled { background: #f5f5f5 !important; color: #555 !important; } .template-vars, .template-description { color: var(--c-fg-muted); } .template-vars code, .template-description code { background: var(--c-surface-alt); color: var(--c-fg); padding: 0.05rem 0.4rem; border-radius: var(--radius-sm); } /* Klikkbare variabel-chips */ .var-chip { background: transparent; border: 1px solid var(--c-border-strong); border-radius: var(--radius-full); padding: 0.15rem 0.5rem; cursor: pointer; font: inherit; transition: all 120ms; display: inline-flex; align-items: center; margin: 0.1rem 0.1rem; } .var-chip code { background: transparent !important; color: var(--c-fg) !important; font-size: 0.85rem; padding: 0 !important; } .var-chip:hover { background: var(--c-accent-fade); border-color: var(--c-accent); } .var-chip:hover code { color: var(--c-accent-hover) !important; } .var-chip:active { transform: scale(0.96); } /* Norsk file-picker — skjuler native input, viser styled label */ .file-picker { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .file-picker-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .file-picker-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; background: var(--c-accent); color: #ffffff !important; border: 1px solid var(--c-accent-hover); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.92rem; font-weight: 600; transition: background 120ms; text-shadow: 0 1px 1px rgba(0,0,0,0.25); } .file-picker-btn:hover { background: var(--c-accent-hover); } .file-picker-status { color: var(--c-fg); font-size: 0.88rem; font-style: italic; opacity: 0.85; } .file-picker-status.has-file { color: var(--c-fg); font-style: normal; font-weight: 600; opacity: 1; } /* Modal-footer-knapper (Lukk, Avbryt osv.) — sikker kontrast i begge tema */ .modal-footer button:not(.btn-primary):not(.btn-accent):not(.btn-danger) { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border-strong); padding: 0.45rem 1rem; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.92rem; } .modal-footer button:not(.btn-primary):not(.btn-accent):not(.btn-danger):hover { background: var(--c-row-hover); border-color: var(--c-primary); } /* Generelle knapper i admin-cards og toolbars — fall-tilbake kontrast */ .admin-card button:not(.btn-primary):not(.btn-accent):not(.btn-danger):not(.chip):not(.var-chip):not(.dash-link):not(.purring-pill):not(.file-picker-btn):not(.close-btn):not(.toast-close):not(.mark-failed-btn):not(.row-edit) { background: var(--c-surface-alt); color: var(--c-fg); border: 1px solid var(--c-border-strong); padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.9rem; } .admin-card button:not(.btn-primary):not(.btn-accent):not(.btn-danger):not(.chip):not(.var-chip):not(.dash-link):not(.purring-pill):not(.file-picker-btn):not(.close-btn):not(.toast-close):not(.mark-failed-btn):not(.row-edit):hover { background: var(--c-row-hover); border-color: var(--c-primary); } /* Toolbar-knapper utenfor admin-cards (f.eks. medlemsliste-toolbar) */ .toolbar button:not(.btn-primary):not(.btn-accent):not(.btn-danger):not(.chip) { background: var(--c-surface); color: var(--c-fg); border: 1px solid var(--c-border-strong); padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-size: 0.9rem; } .toolbar button:not(.btn-primary):not(.btn-accent):not(.btn-danger):not(.chip):hover { background: var(--c-row-hover); border-color: var(--c-primary); } /* Kiosk-modus */ .kiosk-search-wrap { margin: 1rem 0; } #kiosk-search { width: 100%; padding: 0.9rem 1.2rem; font-size: 1.15rem; border: 2px solid var(--c-primary); border-radius: var(--radius-md); background: var(--c-surface); color: var(--c-fg); box-shadow: var(--shadow-md); } #kiosk-search:focus { outline: 3px solid var(--c-primary-fade); } .kiosk-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.6rem; margin-top: 1rem; } .kiosk-result-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 0.8rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem; transition: transform 100ms, border-color 100ms, box-shadow 100ms; } .kiosk-result-card:hover { transform: translateY(-1px); border-color: var(--c-primary); box-shadow: var(--shadow-md); } .kiosk-result-card .kr-name { font-size: 1.05rem; font-weight: 600; color: var(--c-fg); } .kiosk-result-card .kr-meta { font-size: 0.85rem; color: var(--c-fg-muted); } .kiosk-result-card .kr-action { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--c-accent); font-size: 0.88rem; font-weight: 600; } .kiosk-result-card.row-disabled { opacity: 0.6; } /* Compose-editor + andre tekst-områder skal også være svart-på-hvit */ #compose-subject, #compose-body-text, .tox-edit-area__iframe, .tox .tox-edit-area { background: #ffffff !important; color: #1a1a1a !important; } .tox-tinymce { border-color: var(--c-border-strong) !important; } /* Generelle form-labels i dark mode */ .form-grid label, .payment-fields label, .admin-card label { color: var(--c-fg-muted) !important; } .admin-card fieldset legend, .payment-fields legend { color: var(--c-fg-muted) !important; } .email-template summary { color: var(--c-fg-muted); } .col-sent { color: var(--c-fg-muted); } table { background: var(--c-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* overflow:hidden fjernet i v2.31 — kan klippe vekk sticky-thead under side-scroll i Firefox/Safari. Border-radius rendrer fortsatt fint. */ th { background: var(--c-primary-fade); color: var(--c-fg); } th:hover { background: var(--c-primary); color: white; } tbody tr:hover { background: var(--c-row-hover); } input, select, textarea { background: var(--c-surface); color: var(--c-fg); border: 1px solid var(--c-border); } input:focus, select:focus, textarea:focus { border-color: var(--c-primary); outline: 2px solid var(--c-primary-fade); outline-offset: -1px; } .btn-primary { background: var(--c-primary); } .btn-primary:hover { background: var(--c-primary-light); } .btn-accent { background: var(--c-accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; } .btn-accent:hover { background: var(--c-accent-hover); } .app-section, .admin-card { animation: section-fade 200ms ease-out; } @keyframes section-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } #preview-table select.action-select { padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; max-width: 200px; } /* Dashboard: skjul ikoner på nøkkeltall + hero */ .dash-hero .hero-ic, .stat-card-v3 .sc-ic { display: none; } .stat-card-v3::before { display: none; } .dash-hero { padding-left: 1.4rem; } /* Automasjoner: kort per automasjon med tittel + beskrivelse + handlings-rad */ .automation-card { border: 1px solid var(--c-border, #ddd); border-radius: var(--radius-md, 8px); padding: 1rem 1.25rem; margin: 1rem 0; background: var(--c-surface, white); } .automation-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; } .automation-head h3 { margin: 0; font-size: 1.1rem; } .automation-desc { margin: 0.5rem 0 1rem; color: var(--c-fg-muted, #555); font-size: 0.95rem; } /* Forhåndsvisnings-tabell i automasjons-modal */ .auto-recipients-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.9rem; } .auto-recipients-table th, .auto-recipients-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--c-border, #eee); text-align: left; } .auto-recipients-table thead th { background: var(--c-surface-alt, #f7f7f7); font-weight: 600; } /* Rad-uthevning for medlemmer som blir auto-utmeldt ved purring */ .auto-recipients-table tr.row-warn td { background: #fff8e1; } /* Compose-tabell: dempet stil for medlemmer som er avmeldt nyhetsbrev */ tr.row-avmeldt td { opacity: 0.55; } tr.row-avmeldt input[type="checkbox"][disabled] { cursor: not-allowed; } /* Mail-log: bredere emne-kolonne (unngå 3-linjers wrap) */ #mail-log-table th.ml-col-subject, #mail-log-table td.ml-col-subject { min-width: 320px; max-width: 480px; white-space: normal; } /* Mail-log: klikkbar emne (rad med arkiv-snapshot) */ .subject-link { background: none; border: none; padding: 0; text-align: left; color: var(--c-primary, #2d5538); text-decoration: underline; cursor: pointer; font: inherit; } .subject-link:hover { color: var(--c-accent, #e8743d); } .subject-link:focus-visible { outline: 2px solid var(--c-accent, #e8743d); outline-offset: 2px; } /* Arkiv-modal: viser snapshot av sendt e-post */ .archive-modal-body { max-height: 70vh; overflow-y: auto; padding: 1rem 1.5rem; } .archive-meta p { margin: 0.25rem 0; } .archive-html-body { background: white; color: #111; border: 1px solid var(--c-border, #ddd); border-radius: 4px; padding: 1rem; margin-top: 0.5rem; max-width: 100%; overflow-x: auto; } .archive-html-body img { max-width: 100%; height: auto; } .archive-plain-body { background: #f7f7f7; color: #111; border: 1px solid var(--c-border, #ddd); border-radius: 4px; padding: 1rem; margin-top: 0.5rem; white-space: pre-wrap; word-wrap: break-word; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.9rem; }