/* =================================================================== * PIKUSERU Administration – frontend styles * Moderne SaaS-dashboard. Afhængighedsfrit: egen CSS + inline SVG. * Alt er scopet til .pikuseru-admin-app, så temaet ikke påvirkes. * =================================================================== */ /* ------------------------------------------------------------------- * 1. Designsystem – tokens * ----------------------------------------------------------------- */ .pikuseru-admin-app { /* Brand / accent */ --pa-accent: #4f46e5; --pa-accent-hover: #4338ca; --pa-accent-soft: #eef2ff; --pa-on-accent: #ffffff; /* Neutrale (slate) */ --pa-bg: #f8fafc; --pa-surface: #ffffff; --pa-surface-2: #f1f5f9; --pa-border: #e2e8f0; --pa-border-strong: #cbd5e1; --pa-text: #0f172a; --pa-text-muted: #64748b; /* Semantiske (status) */ --pa-success: #16a34a; --pa-success-soft: #dcfce7; --pa-warning: #d97706; --pa-warning-soft: #fef3c7; --pa-danger: #dc2626; --pa-danger-soft: #fee2e2; --pa-info: #2563eb; --pa-info-soft: #dbeafe; /* Spacing (8px-basis) */ --pa-sp-1: 4px; --pa-sp-2: 8px; --pa-sp-3: 12px; --pa-sp-4: 16px; --pa-sp-5: 24px; --pa-sp-6: 32px; --pa-sp-8: 48px; /* Radius / skygger / typografi */ --pa-radius: 10px; --pa-radius-sm: 6px; --pa-radius-lg: 16px; --pa-radius-pill: 999px; --pa-shadow-sm: 0 1px 2px rgba(15,23,42,.06); --pa-shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --pa-shadow-lg: 0 10px 25px rgba(15,23,42,.10); --pa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; --pa-focus: 0 0 0 3px rgba(79,70,229,.35); --pa-sidebar-w: 248px; --pa-control-h: 40px; /* fælles højde på inputs/selects/knapper */ } /* ------------------------------------------------------------------- * 2. Base / reset (scopet) * ----------------------------------------------------------------- */ .pikuseru-admin-app, .pikuseru-admin-app *, .pikuseru-admin-app *::before, .pikuseru-admin-app *::after { box-sizing: border-box; } .pikuseru-admin-app { display: grid; grid-template-columns: var(--pa-sidebar-w) minmax(0, 1fr); gap: var(--pa-sp-6); align-items: start; font-family: var(--pa-font); font-size: 15px; line-height: 1.55; color: var(--pa-text); -webkit-font-smoothing: antialiased; } .pikuseru-admin-app h1, .pikuseru-admin-app h2, .pikuseru-admin-app h3 { color: var(--pa-text); line-height: 1.25; margin: 0 0 var(--pa-sp-3); font-weight: 700; } .pikuseru-admin-app h1 { font-size: 1.6rem; letter-spacing: -.01em; } .pikuseru-admin-app h2 { font-size: 1.15rem; margin-top: var(--pa-sp-5); } .pikuseru-admin-app h3 { font-size: 1rem; } /* Kolonne-underoverskrift på dashboardet (Seneste møder, Møde-status, Udviklingsstatus). */ .pikuseru-admin-app h3.pa-subhead { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pa-text-muted); margin: 0 0 var(--pa-sp-2); } .pikuseru-admin-app a { color: var(--pa-accent); } .pikuseru-admin-app :focus-visible { outline: none; box-shadow: var(--pa-focus); border-radius: var(--pa-radius-sm); } .pa-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; } /* Login / ingen adgang: centreret kort uden skal. */ .pikuseru-admin-app--basic { display: block; max-width: 420px; margin: 4rem auto; background: transparent; } /* ------------------------------------------------------------------- * 3. App-shell – mobil-topbar + scrim * ----------------------------------------------------------------- */ .pikuseru-admin-topbar { display: none; grid-column: 1 / -1; align-items: center; gap: var(--pa-sp-3); padding: var(--pa-sp-2) var(--pa-sp-3); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-sm); } .pikuseru-admin-topbar-title { font-weight: 700; font-size: 1.05rem; } .pikuseru-admin-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--pa-border); border-radius: var(--pa-radius-sm); color: var(--pa-text); cursor: pointer; } .pikuseru-admin-burger:hover { background: var(--pa-surface-2); } .pikuseru-admin-scrim { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(15,23,42,.45); } /* ------------------------------------------------------------------- * 4. Sidebar / navigation * ----------------------------------------------------------------- */ .pikuseru-admin-sidebar { position: sticky; top: var(--pa-sp-4); display: flex; flex-direction: column; gap: var(--pa-sp-4); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-lg); box-shadow: var(--pa-shadow); padding: var(--pa-sp-4); } .pikuseru-admin-brand { display: flex; align-items: center; gap: var(--pa-sp-3); padding: var(--pa-sp-1) var(--pa-sp-2) var(--pa-sp-3); border-bottom: 1px solid var(--pa-border); } .pikuseru-admin-logo { max-width: 100%; height: auto; max-height: 40px; } .pikuseru-admin-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto; background: var(--pa-accent); color: var(--pa-on-accent); border-radius: var(--pa-radius-sm); font-weight: 700; font-size: 1.05rem; } .pikuseru-admin-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; } .pikuseru-admin-nav { flex: 1 1 auto; } .pikuseru-admin-nav-group { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pa-text-muted); padding: 0 var(--pa-sp-2); margin: var(--pa-sp-4) 0 var(--pa-sp-1); } .pikuseru-admin-nav ul { list-style: none; margin: 0 0 var(--pa-sp-1); padding: 0; } .pikuseru-admin-nav-link { display: flex; align-items: center; gap: var(--pa-sp-3); padding: var(--pa-sp-2) var(--pa-sp-3); margin-bottom: 2px; border-radius: var(--pa-radius-sm); text-decoration: none; color: var(--pa-text); font-weight: 500; transition: background-color .12s ease, color .12s ease; } .pikuseru-admin-nav-icon { display: inline-flex; color: var(--pa-text-muted); transition: color .12s ease; } .pikuseru-admin-nav-link:hover { background: var(--pa-surface-2); } .pikuseru-admin-nav-link:hover .pikuseru-admin-nav-icon { color: var(--pa-text); } .pikuseru-admin-nav-link.is-active { background: var(--pa-accent-soft); color: var(--pa-accent-hover); font-weight: 600; } .pikuseru-admin-nav-link.is-active .pikuseru-admin-nav-icon { color: var(--pa-accent); } /* Bruger-footer */ .pikuseru-admin-user { display: flex; align-items: center; gap: var(--pa-sp-3); padding-top: var(--pa-sp-4); border-top: 1px solid var(--pa-border); } .pikuseru-admin-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; background: var(--pa-accent-soft); color: var(--pa-accent-hover); border-radius: var(--pa-radius-pill); font-weight: 700; font-size: .85rem; } .pikuseru-admin-user-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pikuseru-admin-user-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pikuseru-admin-logout { display: inline-flex; align-items: center; gap: var(--pa-sp-1); font-size: .82rem; color: var(--pa-text-muted); text-decoration: none; } .pikuseru-admin-logout:hover { color: var(--pa-danger); } /* ------------------------------------------------------------------- * 5. Content * ----------------------------------------------------------------- */ .pikuseru-admin-content { min-width: 0; } .pikuseru-admin-section h1 { margin-top: 0; } .pa-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--pa-sp-4); flex-wrap: wrap; margin-bottom: var(--pa-sp-4); } .pa-muted, .pa-help { color: var(--pa-text-muted); } .pa-muted { font-size: .85em; } .pa-help { font-size: .88rem; } /* Hjælpetekst under et felt eller en blok. Klassen har været brugt tolv steder * uden nogensinde at have en regel, så den faldt tilbage på brødtekst i fuld * størrelse og farve — tydeligst under et inputfelt, hvor den skal træde i * baggrunden. Rammer også Virksomheder og Pipeline, som bruger den samme vej. */ .pa-hint { margin: var(--pa-sp-1) 0 0; font-size: .82rem; color: var(--pa-text-muted); } /* Står den alene i en blok frem for under et felt, skal der også luft under. */ .pa-form > .pa-hint, .pikuseru-admin-section > .pa-hint { margin: var(--pa-sp-3) 0; } .pa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pa-sp-5); } .pa-tab-panel { margin-top: var(--pa-sp-2); } .pa-tab-panel[hidden] { display: none; } /* Virksomheds-kort (Google Maps). */ .pa-map-toolbar { display: flex; align-items: center; gap: var(--pa-sp-3); margin: var(--pa-sp-3) 0; flex-wrap: wrap; } .pa-map { width: 100%; height: 540px; border: 1px solid var(--pa-border); border-radius: var(--pa-radius); overflow: hidden; background: var(--pa-surface-2); } .pa-map .pa-empty { padding: var(--pa-sp-5); text-align: center; color: var(--pa-text-muted); } .pa-dashboard-panel { margin: var(--pa-sp-4) 0 var(--pa-sp-5); } .pa-dashboard-panel:empty { display: none; } /* ------------------------------------------------------------------- * 6. Stat-/info-kort * ----------------------------------------------------------------- */ .pa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--pa-sp-4); margin: var(--pa-sp-4) 0 var(--pa-sp-5); } .pa-card { background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-sm); padding: var(--pa-sp-4); } .pa-card--warn { border-color: var(--pa-warning); background: var(--pa-warning-soft); } .pa-card--link { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .pa-card--link:hover { border-color: var(--pa-accent); box-shadow: var(--pa-shadow-lg); transform: translateY(-1px); } .pa-card-label { display: block; font-size: .8rem; font-weight: 500; color: var(--pa-text-muted); } .pa-card-value { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-top: var(--pa-sp-1); } /* Stat-kort med ikon-badge. */ .pa-stat { display: flex; align-items: center; gap: var(--pa-sp-3); } .pa-stat-body { min-width: 0; } /* Forklarende understreg på et nøgletal (fx hvad et gennemsnit er et gennemsnit af). */ .pa-card-note { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.35; color: var(--pa-text-muted); } .pa-card-note--warn { color: #92580a; } /* Nøgletal med forklaring: top-justeret, så kort med og uden tekst flugter, og et lidt mindre * tal, så "270.458,04 kr." ikke brydes (kr. alene på en linje) i fem kort ved siden af hinanden. */ .pa-cards--notes .pa-stat { align-items: flex-start; } .pa-cards--notes .pa-card-value { font-size: 1.35rem; } /* Smalle skærme: to kolonner er for smalle til "22.538,17 kr." — én kolonne, så tallet står på én linje. */ @media (max-width: 560px) { .pa-cards--notes { grid-template-columns: minmax(0, 1fr); } } .pa-card-note[hidden] { display: none; } .pa-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; background: var(--pa-accent-soft); color: var(--pa-accent); border-radius: var(--pa-radius); } .pa-stat-icon--warn { background: var(--pa-warning-soft); color: var(--pa-warning); } .pa-card--warn .pa-card-label { color: #92580a; } .pa-card--link.pa-stat:hover .pa-stat-icon { background: var(--pa-accent); color: var(--pa-on-accent); } /* ------------------------------------------------------------------- * 7. Tabeller * ----------------------------------------------------------------- */ .pa-table { width: 100%; border-collapse: collapse; margin: var(--pa-sp-2) 0 var(--pa-sp-4); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); overflow: hidden; } /* Brede tabeller (Tidsposter alene har 11 kolonner) skal scrolle vandret i stedet for at skubbe hele siden sidelæns. Scrollen ligger på tabellens BEHOLDER, ikke på tabellen selv: `display:block` på et gør den indre (anonyme) tabel shrink-to-fit, så smalle tabeller efterlod tom luft til højre i den fuldbredde ramme. Klassen sættes af enhanceTables() på den eksisterende forælder, så DOM-strukturen er uændret for al øvrig kode. */ .pa-has-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pa-table th, .pa-table td { text-align: left; padding: var(--pa-sp-3) var(--pa-sp-3); border-bottom: 1px solid var(--pa-border); } .pa-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pa-text-muted); font-weight: 700; background: var(--pa-surface-2); } .pa-table tbody tr:last-child td { border-bottom: 0; } .pa-table tbody tr:hover { background: var(--pa-surface-2); } .pa-num { font-variant-numeric: tabular-nums; } .pa-table .pa-num { text-align: right; font-weight: 600; } /* Tags vises som ét ikon i tidsposter-oversigten; den fulde liste står i tooltip. */ .pa-tags-cell { text-align: center; } .pa-tag-indicator { display: inline-flex; cursor: help; color: var(--pa-text-muted, #6b7280); } .pa-tag-indicator:hover { color: var(--pa-accent, currentColor); } .pa-status-link { text-decoration: none; } /* Handlingscelle: bliver i tabel-layoutet, knapper højrejusteret på én linje. */ .pa-actions { white-space: nowrap; } .pa-actions > * + * { margin-left: var(--pa-sp-1); } .pa-actions .pa-btn, .pa-actions .pa-link, .pa-actions .pa-badge { vertical-align: middle; } .pa-table td.pa-actions { text-align: right; } .pa-progress-cell { min-width: 180px; } .pa-progress-cell .pa-progress { margin-bottom: 4px; } .pa-progress-cell .pa-muted { font-size: .8rem; } .pa-overdue { color: var(--pa-danger); font-weight: 600; } .pa-text-danger { color: var(--pa-danger); } /* ------------------------------------------------------------------- * 8. Formularer / inputs * ----------------------------------------------------------------- */ .pa-form { background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-sm); padding: var(--pa-sp-5); margin: var(--pa-sp-4) 0; } .pa-inline-form, .pa-merge-form { padding: var(--pa-sp-4); } .pa-form--narrow { max-width: 480px; } /* [hidden] skal altid vinde – ellers overtrumfer fx .pa-field's display:flex den, så JS-skjulte felter (scope-toggle m.m.) bliver ved med at vises. */ .pikuseru-admin-app [hidden] { display: none !important; } .pa-field { margin-bottom: var(--pa-sp-3); display: flex; flex-direction: column; } .pa-field label { font-size: .82rem; font-weight: 600; margin-bottom: var(--pa-sp-1); color: var(--pa-text); } .pa-field--grow { flex: 1 1 auto; } .pa-field--check { flex-direction: row; align-items: center; gap: var(--pa-sp-2); } .pa-field--btn { justify-content: flex-end; } .pa-row { display: flex; gap: var(--pa-sp-4); flex-wrap: wrap; align-items: flex-end; } .pa-row .pa-field { flex: 1 1 0; min-width: 120px; } /* Ensartede form-controls i hele appen (også filterbjælker, ikke kun .pa-form). */ .pikuseru-admin-app input[type="text"], .pikuseru-admin-app input[type="email"], .pikuseru-admin-app input[type="password"], .pikuseru-admin-app input[type="number"], .pikuseru-admin-app input[type="date"], .pikuseru-admin-app input[type="time"], .pikuseru-admin-app input[type="datetime-local"], .pikuseru-admin-app input[type="week"], .pikuseru-admin-app input[type="search"], .pikuseru-admin-app input[type="url"], .pikuseru-admin-app input[type="tel"], .pikuseru-admin-app select, .pikuseru-admin-app textarea, .pa-search, .pa-week-picker { width: 100%; padding: var(--pa-sp-2) var(--pa-sp-3); border: 1px solid var(--pa-border-strong); border-radius: var(--pa-radius-sm); font-size: .92rem; font-family: inherit; line-height: 1.4; color: var(--pa-text); background: var(--pa-surface); transition: border-color .12s ease, box-shadow .12s ease; } /* Samme højde som knapper – gælder enkelt-linje-controls (ikke textarea). */ .pikuseru-admin-app input[type="text"], .pikuseru-admin-app input[type="email"], .pikuseru-admin-app input[type="password"], .pikuseru-admin-app input[type="number"], .pikuseru-admin-app input[type="date"], .pikuseru-admin-app input[type="time"], .pikuseru-admin-app input[type="datetime-local"], .pikuseru-admin-app input[type="week"], .pikuseru-admin-app input[type="search"], .pikuseru-admin-app input[type="url"], .pikuseru-admin-app input[type="tel"], .pikuseru-admin-app select, .pa-search, .pa-week-picker { min-height: var(--pa-control-h); } .pikuseru-admin-app input:focus, .pikuseru-admin-app select:focus, .pikuseru-admin-app textarea:focus, .pa-search:focus, .pa-week-picker:focus { outline: none; border-color: var(--pa-accent); box-shadow: var(--pa-focus); } /* Deaktiverede felter gråtones (samme look som den søgbare select). */ .pikuseru-admin-app input:disabled, .pikuseru-admin-app select:disabled, .pikuseru-admin-app textarea:disabled { opacity: .6; cursor: not-allowed; background: var(--pa-surface-2); } .pa-form-actions { display: flex; gap: var(--pa-sp-2); align-items: center; margin-top: var(--pa-sp-3); flex-wrap: wrap; } .pa-filters { display: flex; gap: var(--pa-sp-4); flex-wrap: wrap; align-items: flex-end; } /* Vælgere i en filterbjælke er ellers kun så brede som deres valgte tekst ("Alle"), så fx virksomhedsnavne bliver ulæselige. Giv dem en bundbredde — og lad ikke søgefeltet æde resten af pladsen. Grænserne sættes på feltet, da søge-inputtet ikke altid har .pa-search-klassen. */ .pa-filters .pa-field { min-width: 190px; } .pa-filters .pa-field--btn { min-width: 0; } .pa-filters .pa-field--grow { max-width: 340px; } /* Søg-siden har kun ét felt; dér skal søgefeltet fylde hele bredden. */ .pa-filters .pa-field:only-child { max-width: none; } .pa-search { max-width: 360px; } .pa-week-picker { width: auto; } /* ------------------------------------------------------------------- * 9. Knapper & links * ----------------------------------------------------------------- */ .pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pa-sp-2); min-height: var(--pa-control-h); padding: var(--pa-sp-2) var(--pa-sp-4); border: 1px solid var(--pa-border-strong); background: var(--pa-surface); color: var(--pa-text); border-radius: var(--pa-radius-sm); cursor: pointer; font-size: .9rem; font-weight: 600; font-family: inherit; line-height: 1.4; text-decoration: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .pa-btn:hover { background: var(--pa-surface-2); border-color: var(--pa-text-muted); } .pa-btn--primary { background: var(--pa-accent); border-color: var(--pa-accent); color: var(--pa-on-accent); } .pa-btn--primary:hover { background: var(--pa-accent-hover); border-color: var(--pa-accent-hover); } .pa-btn--danger { background: var(--pa-danger); border-color: var(--pa-danger); color: #fff; } .pa-btn--danger:hover { filter: brightness(.93); } .pa-btn:disabled, .pa-btn.is-loading { opacity: .6; cursor: not-allowed; } /* Kompakt knap til inline-handlinger (fx Udskyd/Luk på opfølgninger). */ .pa-btn--sm { min-height: 0; padding: 3px var(--pa-sp-3); font-size: .8rem; } /* Links stylet som knapper må ikke arve app'ens accent-linkfarve * (.pikuseru-admin-app a), som ellers ville gøre tekst+ikon usynlige på * primary/danger-knapper. */ .pikuseru-admin-app a.pa-btn { color: var(--pa-text); } .pikuseru-admin-app a.pa-btn--primary { color: var(--pa-on-accent); } .pikuseru-admin-app a.pa-btn--danger { color: #fff; } .pa-link { background: none; border: none; color: var(--pa-accent); cursor: pointer; padding: 0 var(--pa-sp-1); font-size: .9rem; font-family: inherit; } .pa-link:hover { color: var(--pa-accent-hover); text-decoration: underline; } .pa-link--danger { color: var(--pa-danger); } .pa-link--danger:hover { color: var(--pa-danger); } /* ------------------------------------------------------------------- * 10. Badges * ----------------------------------------------------------------- */ .pa-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--pa-sp-2); border-radius: var(--pa-radius-pill); background: var(--pa-surface-2); color: #475569; /* slate-600: ≥ AA på soft bg */ font-size: .75rem; font-weight: 600; line-height: 1.5; /* Et badge er én samlet etiket: tofarvede labels som "Ikke startet" må ikke knække midtover når kolonnen bliver smal. */ white-space: nowrap; } .pa-badge--draft { background: var(--pa-surface-2); color: #475569; } .pa-badge--open { background: var(--pa-info-soft); color: #1d4ed8; } .pa-badge--closed { background: var(--pa-success-soft); color: #15803d; } .pa-badge--archived { background: var(--pa-warning-soft); color: #b45309; } .pa-badge--error { background: var(--pa-danger-soft); color: #b91c1c; } /* Projekt-status. Aktiv = grøn, Pause = gul, Afsluttet = mørkegrøn, Annulleret = rød, Intern = grå. “Ikke aktiv” beholder den lyse neutrale tone den altid har haft, så den kan skelnes fra Interns mørkere grå. Afsluttet er den eneste fyldte badge: to lyse grønne toner ville ligge for tæt på Aktiv til at kunne skelnes på et hurtigt blik. Alle kombinationer ligger på mindst 4,5:1 mod deres baggrund (WCAG AA). */ .pa-projstatus--aktiv { background: var(--pa-success-soft); color: #15803d; } .pa-projstatus--pause { background: var(--pa-warning-soft); color: #b45309; } .pa-projstatus--afsluttet { background: #166534; color: #ffffff; } .pa-projstatus--annulleret { background: var(--pa-danger-soft); color: #b91c1c; } .pa-projstatus--intern { background: #cbd5e1; color: #1e293b; } .pa-projstatus--ikke_aktiv { background: var(--pa-surface-2); color: #475569; } /* ------------------------------------------------------------------- * 10b. Modal-overlay (projekt-/klippekort-detaljer) * ----------------------------------------------------------------- */ .pa-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: var(--pa-sp-6) var(--pa-sp-4); overflow-y: auto; } .pa-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); } .pa-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: auto; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-lg); box-shadow: var(--pa-shadow-lg); padding: var(--pa-sp-5); } .pa-modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--pa-sp-3); margin-bottom: var(--pa-sp-4); } .pa-modal-head h2 { margin: 0; font-size: 1.25rem; } .pa-modal-body { min-height: 40px; } body.pa-modal-open { overflow: hidden; } /* Detalje-grid: label/værdi-par; --wide spænder begge kolonner. */ .pa-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pa-sp-3) var(--pa-sp-4); margin: 0 0 var(--pa-sp-4); } .pa-detail-grid > div { margin: 0; } .pa-detail-grid--wide { grid-column: 1 / -1; } .pa-detail-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pa-text-muted); font-weight: 700; margin-bottom: 2px; } .pa-detail-grid dd { margin: 0; } /* Skrivebeskyttet tekstblok (fx møde-referat i overblik-modal). */ .pa-detail-text { white-space: pre-wrap; margin: 0 0 var(--pa-sp-4); color: var(--pa-text); } .pa-table tr.is-done td { color: var(--pa-text-muted); text-decoration: line-through; } .pa-table tr.is-done td:first-child { text-decoration: none; color: var(--pa-success, var(--pa-text-muted)); } /* Note-strøm. */ .pa-notes-title { margin: var(--pa-sp-4) 0 var(--pa-sp-2); font-size: 1rem; } /* Note-strøm på en tidspost i redigeringsformularen (afgrænses fra formularen). */ .pa-entry-notes { margin-top: var(--pa-sp-5); border-top: 1px solid var(--pa-border); padding-top: var(--pa-sp-4); } .pa-note-form { display: flex; flex-direction: column; gap: var(--pa-sp-2); margin-bottom: var(--pa-sp-4); } .pa-note-form .pa-btn { align-self: flex-end; } .pa-note-stream { display: flex; flex-direction: column; gap: var(--pa-sp-3); } .pa-note { background: var(--pa-surface-2); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); padding: var(--pa-sp-3); } .pa-note-head { display: flex; align-items: center; gap: var(--pa-sp-2); margin-bottom: var(--pa-sp-1); } .pa-note-time { font-size: .78rem; color: var(--pa-text-muted); } .pa-note-head .pa-btn { margin-left: auto; } .pa-note-body { font-size: .92rem; line-height: 1.5; white-space: normal; word-break: break-word; } .pa-note-head .pa-badge { margin-left: var(--pa-sp-1); } /* SMS-modal. */ .pa-sms-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-sp-2); } .pa-sms-counter { font-size: .78rem; color: var(--pa-text-muted); } .pa-sms-error { margin-top: var(--pa-sp-1); font-size: .82rem; color: var(--pa-danger); } /* ------------------------------------------------------------------- * 11. Lister & diverse * ----------------------------------------------------------------- */ .pa-simple-list { list-style: none; margin: 0; padding: 0; } .pa-simple-list li { padding: var(--pa-sp-2) 0; border-bottom: 1px solid var(--pa-border); } .pa-simple-list li:last-child { border-bottom: 0; } .pa-tag-list { list-style: none; padding: 0; margin: var(--pa-sp-2) 0; display: flex; flex-wrap: wrap; gap: var(--pa-sp-2); } .pa-tag-list li { display: flex; align-items: center; gap: var(--pa-sp-1); } .pa-letter-group { margin-bottom: var(--pa-sp-4); } .pa-letter { position: sticky; top: 0; z-index: 1; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pa-accent); padding: var(--pa-sp-1) var(--pa-sp-2); background: var(--pa-bg); border-bottom: 1px solid var(--pa-border); margin-bottom: var(--pa-sp-1); } .pa-tag-item { display: inline-flex; align-items: center; gap: 2px; } /* Deltagere: én tabel med sticky bogstav-gruppe-rækker. */ .pa-letter-row th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pa-accent); background: var(--pa-surface-2); padding: var(--pa-sp-1) var(--pa-sp-3); } .pa-table--people td:last-child, .pa-table--people th:last-child { width: 1%; white-space: nowrap; } .pa-loading { color: var(--pa-text-muted); padding: var(--pa-sp-3) 0; } /* Pager (server-side paginering). */ .pa-pager { display: flex; align-items: center; justify-content: center; gap: var(--pa-sp-4); margin-top: var(--pa-sp-3); flex-wrap: wrap; } .pa-pager-info { font-size: .85rem; color: var(--pa-text-muted); } .pa-pager .pa-btn[disabled] { opacity: .5; cursor: not-allowed; } /* Empty state: ikon + tekst, centreret i et blødt felt. */ .pa-empty { display: flex; flex-direction: column; align-items: center; gap: var(--pa-sp-2); text-align: center; color: var(--pa-text-muted); padding: var(--pa-sp-6) var(--pa-sp-4); background: var(--pa-surface); border: 1px dashed var(--pa-border-strong); border-radius: var(--pa-radius); } .pa-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--pa-text-muted); background: var(--pa-surface-2); border-radius: var(--pa-radius-pill); } .pa-empty-text { font-size: .9rem; } /* Skeleton-loading: pulserende pladsholdere. */ .pa-skeleton { display: flex; flex-direction: column; gap: var(--pa-sp-2); padding: var(--pa-sp-2) 0; } .pa-skeleton-row { height: 14px; border-radius: var(--pa-radius-sm); background: linear-gradient(90deg, var(--pa-surface-2) 25%, #e9eef4 37%, var(--pa-surface-2) 63%); background-size: 400% 100%; animation: pa-shimmer 1.3s ease infinite; } .pa-skeleton-row:nth-child(1) { width: 92%; } .pa-skeleton-row:nth-child(2) { width: 78%; } .pa-skeleton-row:nth-child(3) { width: 85%; } .pa-skeleton-row:nth-child(4) { width: 70%; } @keyframes pa-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .pa-todo { display: flex; align-items: center; gap: var(--pa-sp-3); padding: var(--pa-sp-2) 0; border-bottom: 1px solid var(--pa-border); } .pa-todo:last-child { border-bottom: 0; } .pa-todo-main { display: flex; align-items: center; gap: var(--pa-sp-2); flex: 1 1 auto; min-width: 0; cursor: pointer; } .pa-todo-title { min-width: 0; } .pa-todo.is-done .pa-todo-title { text-decoration: line-through; color: var(--pa-text-muted); } .pa-todo-meta { display: flex; align-items: center; gap: var(--pa-sp-2); flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; } .pa-todo-deadline { font-size: .8rem; color: var(--pa-danger); font-weight: 600; } .pa-todo-due { font-size: .8rem; color: var(--pa-text-muted); } .pa-seen { opacity: .6; } /* ------------------------------------------------------------------- * 12. Notice / login / toast * ----------------------------------------------------------------- */ .pikuseru-admin-notice { padding: var(--pa-sp-4); border-radius: var(--pa-radius); background: var(--pa-surface); border: 1px solid var(--pa-border); box-shadow: var(--pa-shadow-sm); } .pikuseru-admin-notice--error { background: var(--pa-danger-soft); border-color: var(--pa-danger); color: #b91c1c; } .pikuseru-admin-login { max-width: 420px; margin: var(--pa-sp-8) auto; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-lg); box-shadow: var(--pa-shadow-lg); padding: var(--pa-sp-6); } .pikuseru-admin-login__logo { text-align: center; margin-bottom: var(--pa-sp-4); } .pikuseru-admin-login__logo img { max-width: 200px; max-height: 72px; width: auto; height: auto; } .pikuseru-admin-login h2 { margin-top: 0; } .pikuseru-admin-login p { color: var(--pa-text-muted); } .pikuseru-admin-login .login-username, .pikuseru-admin-login .login-password { margin: 0 0 var(--pa-sp-4); } .pikuseru-admin-login label { display: block; margin-bottom: var(--pa-sp-1); font-size: .9rem; font-weight: 600; } .pikuseru-admin-login .login-remember label { display: inline-flex; align-items: center; gap: var(--pa-sp-2); font-weight: 500; } .pikuseru-admin-login input[type="text"], .pikuseru-admin-login input[type="password"] { width: 100%; box-sizing: border-box; min-height: var(--pa-control-h); padding: var(--pa-sp-2) var(--pa-sp-3); border: 1px solid var(--pa-border-strong); border-radius: var(--pa-radius-sm); background: var(--pa-surface); color: var(--pa-text); font: inherit; font-size: .9rem; transition: border-color .12s ease, box-shadow .12s ease; } .pikuseru-admin-login input[type="text"]:focus, .pikuseru-admin-login input[type="password"]:focus { outline: none; border-color: var(--pa-accent); box-shadow: var(--pa-focus); } .pikuseru-admin-login .login-submit { margin: var(--pa-sp-5) 0 0; } .pikuseru-admin-login #wp-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--pa-control-h); padding: var(--pa-sp-2) var(--pa-sp-4); border: 1px solid var(--pa-accent); border-radius: var(--pa-radius-sm); background: var(--pa-accent); color: var(--pa-on-accent); font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.4; cursor: pointer; text-shadow: none; box-shadow: none; transition: background-color .12s ease, border-color .12s ease; } .pikuseru-admin-login #wp-submit:hover { background: var(--pa-accent-hover); border-color: var(--pa-accent-hover); } .pikuseru-admin-login #wp-submit:focus { outline: none; box-shadow: var(--pa-focus); } .pikuseru-admin-toast { position: fixed; top: var(--pa-sp-5); right: var(--pa-sp-5); z-index: 9999; display: flex; flex-direction: column; gap: var(--pa-sp-2); } .pa-toast-item { display: flex; align-items: center; gap: var(--pa-sp-2); padding: var(--pa-sp-3) var(--pa-sp-4); border-radius: var(--pa-radius-sm); color: #fff; background: var(--pa-text); box-shadow: var(--pa-shadow-lg); font-size: .9rem; font-weight: 500; max-width: 360px; transition: opacity .5s ease, transform .3s ease; animation: pa-toast-in .25s ease; } .pa-toast-icon { display: inline-flex; flex: 0 0 auto; opacity: .95; } .pa-toast-text { min-width: 0; } .pa-toast-item--success { background: var(--pa-success); } .pa-toast-item--error { background: var(--pa-danger); } .pa-toast-item--info { background: var(--pa-info); } .pa-toast-item.is-fading { opacity: 0; } @keyframes pa-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Inline opret-deltager i møde-editoren */ .pa-new-participant { margin-top: var(--pa-sp-2); padding: var(--pa-sp-3); background: var(--pa-surface-2); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-sm); } .pa-new-participant .pa-row { align-items: flex-end; } /* Kapacitet-resultat */ .pa-kap-result { margin: var(--pa-sp-2) 0 var(--pa-sp-4); } .pa-util { max-width: 480px; margin: var(--pa-sp-2) 0 var(--pa-sp-4); } .pa-util-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--pa-sp-2); font-weight: 600; font-size: .9rem; } .pa-util-head .pa-num { font-size: 1.05rem; } .pa-util-title { margin-top: var(--pa-sp-2); } .pa-table--compact { max-width: 420px; } .pa-table--compact td { padding: var(--pa-sp-2) var(--pa-sp-3); } /* ------------------------------------------------------------------- * 13. Genbrugskomponenter (klar til sektion-polering) * ----------------------------------------------------------------- */ /* Chip – kompakt tag/valg. */ .pa-chip { display: inline-flex; align-items: center; gap: var(--pa-sp-1); padding: 3px var(--pa-sp-2); border-radius: var(--pa-radius-pill); background: var(--pa-accent-soft); color: var(--pa-accent-hover); font-size: .8rem; font-weight: 600; line-height: 1.4; /* Som badges: en chip er én samlet etiket. Et navn som "Michael Bisgaard" må ikke knække midtover i fx Tildelt-kolonnen. Bliver indholdet for bredt, scroller tabellen vandret som før – chippen selv holder sammen. */ white-space: nowrap; } .pa-chip--neutral { background: var(--pa-surface-2); color: var(--pa-text-muted); } .pa-chip--warn { background: var(--pa-warning-soft); color: #b45309; } .pa-chip--danger { background: var(--pa-danger-soft); color: #b91c1c; } .pa-chip-remove { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; opacity: .7; } .pa-chip-remove:hover { opacity: 1; } /* Segmenteret kontrol / tabs. */ .pa-segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--pa-surface-2); border-radius: var(--pa-radius-sm); } .pa-segment-btn { border: 0; background: none; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; color: var(--pa-text-muted); padding: var(--pa-sp-1) var(--pa-sp-3); border-radius: var(--pa-radius-sm); transition: background-color .12s ease, color .12s ease; } .pa-segment-btn:hover { color: var(--pa-text); } .pa-segment-btn.is-active { background: var(--pa-surface); color: var(--pa-accent-hover); box-shadow: var(--pa-shadow-sm); } /* Progress-bar (klippekort-forbrug, compliance mod 48t). */ .pa-progress { height: 8px; border-radius: var(--pa-radius-pill); background: var(--pa-surface-2); overflow: hidden; } .pa-progress-bar { height: 100%; border-radius: inherit; background: var(--pa-accent); transition: width .3s ease; } .pa-progress-bar--warning { background: var(--pa-warning); } .pa-progress-bar--danger { background: var(--pa-danger); } .pa-progress-bar--success { background: var(--pa-success); } /* Ikon-knap (ikon-only handlinger; husk aria-label). */ .pa-btn--icon { padding: var(--pa-sp-2); width: 34px; height: 34px; min-height: 0; justify-content: center; color: var(--pa-text-muted); } .pa-btn--icon:hover { color: var(--pa-text); } .pa-btn--icon.pa-btn--danger { color: var(--pa-danger); border-color: var(--pa-border-strong); background: var(--pa-surface); } .pa-btn--icon.pa-btn--danger:hover { background: var(--pa-danger-soft); border-color: var(--pa-danger); } /* ------------------------------------------------------------------- * 14. Responsivt – sidebar bliver off-canvas under topbar * ----------------------------------------------------------------- */ @media (max-width: 860px) { .pikuseru-admin-app { grid-template-columns: 1fr; gap: var(--pa-sp-4); } .pikuseru-admin-topbar { display: flex; } .pikuseru-admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: min(86vw, var(--pa-sidebar-w)); max-height: 100vh; overflow-y: auto; border-radius: 0; transform: translateX(-100%); transition: transform .22s ease; } .pikuseru-admin-app.is-sidebar-open .pikuseru-admin-sidebar { transform: translateX(0); } .pikuseru-admin-app.is-sidebar-open .pikuseru-admin-scrim { display: block; } .pa-grid-2 { grid-template-columns: 1fr; } .pikuseru-admin-toast { left: var(--pa-sp-3); right: var(--pa-sp-3); top: auto; bottom: var(--pa-sp-3); } .pa-toast-item { max-width: none; } /* Vandret scroll håndteres af .pa-has-table ved alle bredder; på mobil holdes cellerne desuden på én linje, så kolonnerne ikke mases sammen til ingenting. */ .pa-table { white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { .pikuseru-admin-app * { transition: none !important; } } /* ------------------------------------------------------------------- * Notifikationer * ----------------------------------------------------------------- */ .pikuseru-admin-nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--pa-danger); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; border-radius: var(--pa-radius-pill); } .pa-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-sp-2); } .pa-notif { display: flex; align-items: flex-start; gap: var(--pa-sp-3); padding: var(--pa-sp-3) var(--pa-sp-4); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-sm); } .pa-notif.is-unread { border-left: 3px solid var(--pa-accent); background: var(--pa-accent-soft); } .pa-notif-icon { color: var(--pa-text-muted); margin-top: 2px; } .pa-notif.is-unread .pa-notif-icon { color: var(--pa-accent); } .pa-notif-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pa-notif-msg { font-weight: 600; color: var(--pa-text); text-decoration: none; } a.pa-notif-msg:hover { color: var(--pa-accent); text-decoration: underline; } .pa-notif-time { font-size: .8rem; color: var(--pa-text-muted); } .pa-notif-actions { display: flex; gap: var(--pa-sp-1); flex: 0 0 auto; } /* ------------------------------------------------------------------- * Kundelogins * ----------------------------------------------------------------- */ /* Sorterbar kolonne-header. */ .pa-table th.pa-sortable { cursor: pointer; white-space: nowrap; user-select: none; } .pa-table th.pa-sortable:hover { color: var(--pa-accent); } .pa-table th.pa-sortable:focus-visible { outline: none; box-shadow: var(--pa-focus); } .pa-input-group { display: flex; align-items: stretch; gap: var(--pa-sp-2); } .pa-input-group input { flex: 1 1 auto; } /* Vis/skjul- og generér-knapper får samme højde/bredde som felterne. */ .pa-input-group .pa-btn--icon { flex: 0 0 auto; width: var(--pa-control-h); height: var(--pa-control-h); min-height: var(--pa-control-h); } /* Tydelig callout når man tilføjer en ny tjeneste. */ .pa-new-service { margin: var(--pa-sp-3) 0; padding: var(--pa-sp-3) var(--pa-sp-4) var(--pa-sp-4); background: var(--pa-accent-soft); border: 1px solid var(--pa-accent); border-radius: var(--pa-radius-sm); } .pa-new-service[hidden] { display: none; } .pa-new-service-head { display: flex; align-items: center; gap: var(--pa-sp-2); margin-bottom: var(--pa-sp-2); font-weight: 600; color: var(--pa-accent); } .pa-pw-cell { display: flex; align-items: center; gap: var(--pa-sp-2); white-space: nowrap; } .pa-pw-dots { letter-spacing: .12em; color: var(--pa-text-muted); } /* Password-teksten er en knap: klik folder mellem maskeret og fuld kode. */ .pa-pw-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--pa-surface-2); padding: 2px var(--pa-sp-2); border-radius: var(--pa-radius-sm); border: 1px solid transparent; color: inherit; font-size: inherit; cursor: pointer; text-align: left; } .pa-pw-text:hover { border-color: var(--pa-border-strong); } /* Udfoldet: lange koder skal bryde i stedet for at sprænge kolonnen. */ .pa-pw-text.is-full { user-select: all; white-space: normal; overflow-wrap: anywhere; max-width: 20rem; line-height: 1.35; } /* Værdi + kopiér-knap side om side (brugernavn i Kundelogins). */ .pa-copy-pair { display: inline-flex; align-items: center; gap: var(--pa-sp-1); } .pa-copy-pair > span { overflow-wrap: anywhere; } .pa-copy-pair .pa-btn--icon { border-color: transparent; background: transparent; color: var(--pa-text-muted); } .pa-copy-pair .pa-btn--icon:hover { color: var(--pa-accent); background: var(--pa-surface-2); } /* ------------------------------------------------------------------- * Idéer & features (liste, board, kort) * ----------------------------------------------------------------- */ .pa-section-head-actions { display: flex; align-items: center; gap: var(--pa-sp-3); flex-wrap: wrap; } .pa-view-toggle { display: inline-flex; border: 1px solid var(--pa-border); border-radius: var(--pa-radius-sm); overflow: hidden; } .pa-view-toggle .pa-btn { border: 0; border-radius: 0; gap: var(--pa-sp-1); } .pa-view-toggle .pa-btn.is-active { background: var(--pa-accent-soft); color: var(--pa-accent-hover); } /* Status-farver (badge + board-prik). */ .pa-ideastatus--ny { background: var(--pa-surface-2); color: #475569; } .pa-ideastatus--vurderet { background: var(--pa-info-soft); color: #1d4ed8; } .pa-ideastatus--planlagt { background: var(--pa-accent-soft); color: var(--pa-accent-hover); } .pa-ideastatus--udvikling { background: var(--pa-warning-soft); color: #b45309; } .pa-ideastatus--leveret { background: var(--pa-success-soft); color: #15803d; } .pa-ideastatus--afvist { background: var(--pa-danger-soft); color: #b91c1c; } .pa-ideastatus-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--pa-sp-1); vertical-align: middle; } /* Prioritets-badge. */ .pa-prio--lav { background: var(--pa-surface-2); color: #475569; } .pa-prio--mellem { background: var(--pa-info-soft); color: #1d4ed8; } .pa-prio--hoej { background: var(--pa-danger-soft); color: #b91c1c; } .pa-over-estimate { color: var(--pa-danger); font-weight: 600; } /* Kanban-board. */ .pa-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--pa-sp-3); align-items: start; overflow-x: auto; padding-bottom: var(--pa-sp-3); } .pa-board-col { background: var(--pa-surface-2); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); display: flex; flex-direction: column; min-height: 80px; } .pa-board-col.is-drop { outline: 2px dashed var(--pa-accent); outline-offset: -2px; } .pa-board-col-head { display: flex; align-items: center; gap: var(--pa-sp-1); padding: var(--pa-sp-3); font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--pa-border); } .pa-board-count { margin-left: auto; background: var(--pa-surface); color: var(--pa-text-muted); border-radius: var(--pa-radius-pill); padding: 0 var(--pa-sp-2); font-size: .8rem; } .pa-board-col-body { padding: var(--pa-sp-2); display: flex; flex-direction: column; gap: var(--pa-sp-2); min-height: 40px; } .pa-board-empty { color: var(--pa-text-muted); text-align: center; padding: var(--pa-sp-3); font-size: .85rem; } .pa-board-card { background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-sm); box-shadow: var(--pa-shadow-sm); padding: var(--pa-sp-2) var(--pa-sp-3); cursor: grab; } .pa-board-card.is-dragging { opacity: .5; } .pa-board-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-sp-2); } .pa-board-card-title { font-weight: 600; margin: var(--pa-sp-1) 0; line-height: 1.3; } .pa-board-card-meta { color: var(--pa-text-muted); font-size: .8rem; } .pa-board-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-sp-2); margin-top: var(--pa-sp-2); font-size: .8rem; } .pa-board-card-type { color: var(--pa-text-muted); } .pa-board-card-effort { margin-left: auto; } .pa-modal-actions { margin: 0 0 var(--pa-sp-3); } @media (max-width: 640px) { .pa-board { grid-auto-columns: minmax(80%, 1fr); } } /* ------------------------------------------------------------------- * Global søgning * ----------------------------------------------------------------- */ .pa-search-group { margin-bottom: var(--pa-sp-5); } .pa-search-group-head { display: flex; align-items: center; gap: var(--pa-sp-2); font-size: .95rem; color: var(--pa-text-muted); margin: 0 0 var(--pa-sp-2); } .pa-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pa-sp-1); } .pa-search-item { display: flex; flex-direction: column; gap: 2px; padding: var(--pa-sp-2) var(--pa-sp-3); border: 1px solid var(--pa-border); border-radius: var(--pa-radius-sm); background: var(--pa-surface); text-decoration: none; } .pa-search-item:hover { background: var(--pa-surface-2); border-color: var(--pa-border-strong); } .pa-search-item-title { font-weight: 600; color: var(--pa-text); } .pa-search-item-sub { font-size: .82rem; color: var(--pa-text-muted); } .pa-portal-url { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, monospace; font-size: .82rem; } /* Tilbud: linje-editor + totaler */ .pa-quote-lines input { width: 100%; } .pa-quote-lines .ql-qty, .pa-quote-lines .ql-price { max-width: 110px; } .pa-quote-totals { max-width: 320px; margin-left: auto; } .pa-quote-totals dd { text-align: right; } /* Søgbar kontakt-vælger (tilbud) */ .pa-contactpicker { position: relative; } .pa-contact-search { width: 100%; } .pa-contact-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--pa-text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 4px; } .pa-contact-clear:hover { color: var(--pa-text); } .pa-contact-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--pa-surface); border: 1px solid var(--pa-border-strong); border-radius: var(--pa-radius-sm); box-shadow: var(--pa-shadow-lg); max-height: 280px; overflow-y: auto; } .pa-contact-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: var(--pa-sp-2) var(--pa-sp-3); border: 0; background: transparent; border-bottom: 1px solid var(--pa-border); cursor: pointer; font: inherit; } .pa-contact-item:last-child { border-bottom: 0; } .pa-contact-item:hover { background: var(--pa-surface-2); } .pa-contact-name { font-weight: 600; color: var(--pa-text); } .pa-contact-sub { font-size: .8rem; color: var(--pa-text-muted); } .pa-contact-empty { padding: var(--pa-sp-3); color: var(--pa-text-muted); font-size: .88rem; } .pa-contact-hint { padding: var(--pa-sp-2) var(--pa-sp-3); font-size: .8rem; color: var(--pa-text-muted); background: var(--pa-surface-2); border-bottom: 1px solid var(--pa-border); } .pa-pp-chips { display: flex; flex-wrap: wrap; gap: var(--pa-sp-1); margin-top: var(--pa-sp-2); } .pa-pp-chips:empty { display: none; } /* Søgbar enkelt-vælger (virksomheder/projekter) */ .pa-sselect { position: relative; } .pa-sselect-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pa-sselect-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-sp-2); width: 100%; min-height: var(--pa-control-h); padding: var(--pa-sp-2) var(--pa-sp-3); background: var(--pa-surface); border: 1px solid var(--pa-border-strong); border-radius: var(--pa-radius-sm); color: var(--pa-text); font: inherit; text-align: left; cursor: pointer; } .pa-sselect-trigger::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--pa-text-muted); border-bottom: 2px solid var(--pa-text-muted); transform: rotate(45deg) translateY(-2px); } .pa-sselect-trigger:hover { border-color: var(--pa-text-muted); } .pa-sselect.is-disabled .pa-sselect-trigger { opacity: .6; cursor: not-allowed; background: var(--pa-surface-2); } .pa-sselect-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--pa-surface); border: 1px solid var(--pa-border-strong); border-radius: var(--pa-radius-sm); box-shadow: var(--pa-shadow-lg); padding: var(--pa-sp-2); } .pa-sselect-search { width: 100%; margin-bottom: var(--pa-sp-2); } .pa-sselect-list { max-height: 240px; overflow-y: auto; } .pa-sselect-opt { display: block; width: 100%; text-align: left; padding: var(--pa-sp-2) var(--pa-sp-3); border: 0; background: transparent; border-radius: var(--pa-radius-sm); color: var(--pa-text); font: inherit; cursor: pointer; } .pa-sselect-opt:hover { background: var(--pa-surface-2); } .pa-sselect-opt.is-active { background: var(--pa-accent-soft); color: var(--pa-accent-hover); font-weight: 600; } .pa-sselect-empty { padding: var(--pa-sp-2) var(--pa-sp-3); color: var(--pa-text-muted); font-size: .88rem; } /* ---------------------------------------------------------------------- * * Fakturering + Økonomi * ---------------------------------------------------------------------- */ .pa-btn--small { padding: 4px 10px; font-size: .82rem; } .pa-billing-summary, .pa-economy-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--pa-sp-3); margin-bottom: var(--pa-sp-4); } .pa-billing-company { background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); padding: var(--pa-sp-4); margin-bottom: var(--pa-sp-4); } .pa-billing-company-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-sp-3); flex-wrap: wrap; } .pa-billing-company-head h2 { margin: 0; font-size: 1.1rem; } .pa-billing-company-meta { display: flex; align-items: center; gap: var(--pa-sp-3); font-weight: 700; } .pa-billing-company h3 { margin: var(--pa-sp-4) 0 var(--pa-sp-2); font-size: .9rem; color: var(--pa-text-muted); text-transform: uppercase; letter-spacing: .04em; } .pa-billing-company tr.is-done td { opacity: .65; } .pa-economy-chart { background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); padding: var(--pa-sp-4); margin-bottom: var(--pa-sp-4); } .pa-economy-chart svg { width: 100%; height: auto; display: block; } .pa-chart-rev { fill: var(--pa-accent); } .pa-chart-exp { fill: #d9534f; opacity: .85; } .pa-chart-axis { stroke: var(--pa-border-strong); } .pa-chart-label { font-size: 11px; fill: var(--pa-text-muted); } .pa-chart-legend { display: flex; gap: var(--pa-sp-4); margin-top: var(--pa-sp-2); font-size: .85rem; color: var(--pa-text-muted); } .pa-chart-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; } .pa-chart-dot--rev { background: var(--pa-accent); } .pa-chart-dot--exp { background: #d9534f; } .pa-board-sum { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--pa-text-muted); } /* Måneds-navigation (Fakturering) */ .pa-monthnav { display: flex; align-items: center; gap: var(--pa-sp-2); } .pa-monthnav-label { min-width: 130px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } .pa-monthnav-prev svg { transform: rotate(180deg); } .pa-monthnav-today { margin-left: var(--pa-sp-2); white-space: nowrap; } /* Månedsrapport-opsætning (Virksomheder) */ .pa-report-settings { margin: var(--pa-sp-4) 0; padding: var(--pa-sp-4); background: var(--pa-surface-2); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); } .pa-report-settings h3 { margin: 0 0 var(--pa-sp-2); font-size: .95rem; } .pa-report-settings .pa-hint { margin-top: 2px; } .pa-report-recipients { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--pa-sp-1) var(--pa-sp-4); margin-top: var(--pa-sp-1); } .pa-report-recipient { display: flex; align-items: baseline; gap: var(--pa-sp-2); padding: 4px 0; cursor: pointer; font-weight: 400; } .pa-report-recipient input { flex: 0 0 auto; } /* ---------------------------------------------------------------------- * * Noter (personlige noter og tjeklister) * * Farvepaletten spejler Pikuseru_Administration_Note::colors(): hver nøgle * dér skal have en .pa-note--{nøgle}-regel her, ellers falder noten tilbage * til standard-fladen. * ---------------------------------------------------------------------- */ .pa-note-privacy { margin: calc( var(--pa-sp-2) * -1 ) 0 var(--pa-sp-4); } /* Composer */ .pa-note-composer { max-width: 640px; margin: 0 auto var(--pa-sp-5); } .pa-note-composer-trigger { display: flex; align-items: center; gap: var(--pa-sp-2); width: 100%; min-height: var(--pa-control-h); padding: var(--pa-sp-3) var(--pa-sp-4); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-sm); color: var(--pa-text-muted); font-family: inherit; font-size: .95rem; cursor: text; text-align: left; } .pa-note-composer-trigger:hover { box-shadow: var(--pa-shadow); } .pa-note-composer-form { display: flex; flex-direction: column; gap: var(--pa-sp-2); padding: var(--pa-sp-4); background: var(--pa-surface); border: 1px solid var(--pa-border-strong); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-lg); } .pa-note-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-sp-3); flex-wrap: wrap; margin-top: var(--pa-sp-1); } .pa-note-composer-actions { display: flex; gap: var(--pa-sp-2); margin-left: auto; } /* Titel/tekst-felter uden ramme – papir-følelsen fra Keep. */ .pa-note-title-input, .pa-note-body-input { width: 100%; border: 0; background: transparent; padding: 2px 0; font-family: inherit; color: var(--pa-text); resize: vertical; } .pa-note-title-input { font-size: 1.02rem; font-weight: 600; } .pa-note-body-input { font-size: .95rem; line-height: 1.5; } .pa-note-title-input:focus, .pa-note-body-input:focus { outline: none; box-shadow: none; } .pa-note-title-input[hidden], .pa-note-body-input[hidden] { display: none; } /* Filterbjælke + etiketter */ .pa-note-bar { display: flex; align-items: center; gap: var(--pa-sp-4); flex-wrap: wrap; margin-bottom: var(--pa-sp-3); } .pa-note-bar .pa-field { margin-bottom: 0; } .pa-note-labels { display: flex; align-items: center; gap: var(--pa-sp-2); flex-wrap: wrap; margin-bottom: var(--pa-sp-4); } .pa-chip--pick { display: inline-flex; align-items: center; gap: 5px; background: var(--pa-surface-2); color: var(--pa-text-muted); border: 1px solid transparent; cursor: pointer; font-family: inherit; } .pa-chip--pick:hover { border-color: var(--pa-border-strong); color: var(--pa-text); } .pa-chip--pick.is-active { background: var(--pa-accent-soft); color: var(--pa-accent-hover); border-color: var(--pa-accent); } .pa-chip--pick input { margin: 0; } .pa-note-trash-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-sp-3); flex-wrap: wrap; margin-bottom: var(--pa-sp-4); padding: var(--pa-sp-3) var(--pa-sp-4); background: var(--pa-surface-2); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); } .pa-note-group { margin: var(--pa-sp-4) 0 var(--pa-sp-2); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pa-text-muted); } .pa-note-group:first-child { margin-top: 0; } /* Kort-gitter. Listevisningen er samme kort i én kolonne. */ .pa-note-grid { display: grid; gap: var(--pa-sp-4); align-items: start; } .pa-notes--grid .pa-note-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .pa-notes--list .pa-note-grid { grid-template-columns: minmax(0, 720px); } .pa-note { display: flex; flex-direction: column; gap: var(--pa-sp-2); padding: var(--pa-sp-4); border-radius: var(--pa-radius); background: var(--pa-note-bg, var(--pa-surface)); border: 1px solid var(--pa-note-border, var(--pa-border)); box-shadow: var(--pa-shadow-sm); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; } .pa-note:hover { box-shadow: var(--pa-shadow-lg); } .pa-note.is-dragging { opacity: .45; transform: scale(.99); } .pa-note-head { display: flex; align-items: flex-start; gap: var(--pa-sp-2); } .pa-note-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; flex: 1 1 auto; } .pa-note-title--empty { color: var(--pa-text-muted); font-weight: 500; font-style: italic; } .pa-note-pin { flex: 0 0 auto; background: none; border: 0; padding: 2px; cursor: pointer; color: var(--pa-text-muted); border-radius: var(--pa-radius-sm); } .pa-note-pin:hover { color: var(--pa-text); background: rgba(15,23,42,.06); } .pa-note-pin.is-active { color: var(--pa-accent); } .pa-note-pin.is-active svg { fill: currentColor; } .pa-note-body { font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; } .pa-note-chips { display: flex; gap: var(--pa-sp-1); flex-wrap: wrap; } /* Tjekliste – både skrivebeskyttet på kortet og redigerbar i editoren. */ .pa-note-items { display: flex; flex-direction: column; gap: 2px; } .pa-note-item { display: flex; align-items: flex-start; gap: var(--pa-sp-2); font-size: .92rem; line-height: 1.4; cursor: pointer; font-weight: 400; } .pa-note-item input { margin: 3px 0 0; flex: 0 0 auto; } .pa-note-item.is-checked span { text-decoration: line-through; color: var(--pa-text-muted); } .pa-note-item span { overflow-wrap: anywhere; } .pa-note-done-head { margin-top: var(--pa-sp-2); font-size: .78rem; font-weight: 600; color: var(--pa-text-muted); } .pa-note-more { font-size: .82rem; color: var(--pa-text-muted); } .pa-note-item-edit { display: flex; align-items: center; gap: var(--pa-sp-2); } .pa-note-item-edit input[type="text"] { flex: 1 1 auto; min-height: 32px; padding: 2px 4px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-family: inherit; font-size: .92rem; } .pa-note-item-edit input[type="text"]:focus { border-bottom-color: var(--pa-border-strong); outline: none; box-shadow: none; } .pa-note-item-edit.is-checked input[type="text"] { text-decoration: line-through; color: var(--pa-text-muted); } .pa-note-add-item { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--pa-text-muted); font-family: inherit; font-size: .85rem; } .pa-note-add-item:hover { color: var(--pa-accent); } .pa-note-add-item[hidden] { display: none; } /* Handlingsrækken vises diskret og træder frem ved hover/fokus. */ .pa-note-actions { display: flex; gap: 2px; margin-top: auto; padding-top: var(--pa-sp-1); opacity: .55; transition: opacity .15s ease; } .pa-note:hover .pa-note-actions, .pa-note:focus-within .pa-note-actions { opacity: 1; } .pa-note-actions .pa-btn--icon { border-color: transparent; background: transparent; } .pa-note-actions .pa-btn--icon:hover { background: rgba(15,23,42,.07); } /* Farvevælger */ .pa-note-tools { display: flex; align-items: center; gap: var(--pa-sp-2); flex-wrap: wrap; } .pa-note-palette { position: relative; display: inline-flex; } .pa-note-palette-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 24px); gap: 6px; padding: var(--pa-sp-2); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-lg); } .pa-note-palette-menu[hidden] { display: none; } .pa-note-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0; background: var(--pa-note-bg, var(--pa-surface)); border: 2px solid var(--pa-note-border, var(--pa-border-strong)); } .pa-note-swatch:hover { transform: scale(1.12); } .pa-note-swatch.is-active { box-shadow: 0 0 0 2px var(--pa-accent); } /* Editor-modal */ .pa-note-editor { display: flex; flex-direction: column; gap: var(--pa-sp-2); padding: var(--pa-sp-4); border-radius: var(--pa-radius); background: var(--pa-note-bg, var(--pa-surface)); border: 1px solid var(--pa-note-border, var(--pa-border)); } .pa-note-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-sp-3); flex-wrap: wrap; margin-top: var(--pa-sp-2); } .pa-note-editor-status { display: flex; align-items: center; gap: var(--pa-sp-3); margin-left: auto; } .pa-note-hide-checked { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--pa-text-muted); font-weight: 400; cursor: pointer; } .pa-note-hide-checked[hidden] { display: none; } .pa-note-editor-labels { display: flex; flex-direction: column; gap: var(--pa-sp-2); margin-top: var(--pa-sp-2); } .pa-note-label-picker { display: flex; gap: var(--pa-sp-1); flex-wrap: wrap; } .pa-note-label-new { display: flex; gap: var(--pa-sp-2); align-items: center; } .pa-note-label-new input { flex: 1 1 auto; } .pa-note-label-manager { display: flex; flex-direction: column; gap: var(--pa-sp-2); } .pa-note-label-row { display: flex; align-items: center; gap: var(--pa-sp-2); } .pa-note-label-row input { flex: 1 1 auto; } /* Farvepalet – flade, dæmpede toner der virker på hvid baggrund. * * Tokens sættes på BÅDE notefladen (.pa-note--x) og farveprikken * (.pa-note-swatch--x). Prikken ligger inde i et farvet kort, så uden sin egen * regel ville den bare arve kortets farve – og hele paletten ville se ens ud. */ .pa-note--standard, .pa-note-swatch--standard { --pa-note-bg: var(--pa-surface); --pa-note-border: var(--pa-border); } .pa-note--rod, .pa-note-swatch--rod { --pa-note-bg: #fdeceb; --pa-note-border: #f6c9c5; } .pa-note--orange, .pa-note-swatch--orange { --pa-note-bg: #fdefe0; --pa-note-border: #f5d5ae; } .pa-note--gul, .pa-note-swatch--gul { --pa-note-bg: #fdf6d8; --pa-note-border: #f0e2a1; } .pa-note--groen, .pa-note-swatch--groen { --pa-note-bg: #e6f5e6; --pa-note-border: #bcdfbc; } .pa-note--tyrkis, .pa-note-swatch--tyrkis { --pa-note-bg: #e0f4f3; --pa-note-border: #b0dedb; } .pa-note--blaa, .pa-note-swatch--blaa { --pa-note-bg: #e4eefc; --pa-note-border: #b8d0f2; } .pa-note--lilla, .pa-note-swatch--lilla { --pa-note-bg: #efe8fa; --pa-note-border: #d0bff0; } .pa-note--pink, .pa-note-swatch--pink { --pa-note-bg: #fbe8f2; --pa-note-border: #f0c2dd; } .pa-note--graa, .pa-note-swatch--graa { --pa-note-bg: #eef1f5; --pa-note-border: #d5dbe3; } /* Prikkerne er små og ligger på en hvid menu: giv dem en kraftigere kant end * kortene, så især "Standard" (hvid) kan ses. */ .pa-note-swatch--standard { --pa-note-border: var(--pa-border-strong); } .pa-note-swatch--rod { --pa-note-border: #e88b83; } .pa-note-swatch--orange { --pa-note-border: #e2ab63; } .pa-note-swatch--gul { --pa-note-border: #ddc85c; } .pa-note-swatch--groen { --pa-note-border: #85c285; } .pa-note-swatch--tyrkis { --pa-note-border: #6fc2bd; } .pa-note-swatch--blaa { --pa-note-border: #7aa8e6; } .pa-note-swatch--lilla { --pa-note-border: #a483df; } .pa-note-swatch--pink { --pa-note-border: #e08cbf; } .pa-note-swatch--graa { --pa-note-border: #a8b3c1; } @media (max-width: 640px) { .pa-notes--grid .pa-note-grid { grid-template-columns: 1fr; } .pa-note-composer { max-width: none; } .pa-note-actions { opacity: 1; } } /* ---------------------------------------------------------------------- * * Hurtigsøgning (tastaturgenvej "S") + klikbart kontaktnavn * ---------------------------------------------------------------------- */ .pa-quick { display: flex; flex-direction: column; gap: var(--pa-sp-3); } .pa-quick-input { max-width: none; width: 100%; } /* Resultatlisten scroller selv, så modalen ikke vokser ud over skærmen. */ .pa-quick-results { max-height: min(52vh, 420px); overflow-y: auto; } .pa-quick-results .pa-search-group { margin-bottom: var(--pa-sp-4); } .pa-quick-results .pa-search-group:last-child { margin-bottom: 0; } .pa-quick-results .pa-help { margin: 0; } /* Resultaterne er