/* === ModulHub list-row – kortvisning (Administrasjon er forbilde) === */
/* Stabel av utvidbare kort med farget venstrekant. Klikk paa header = utvid. */
/* Bruk for objekter som kan redigeres/utvides/slettes. Ikke for flat data. */
/*
Struktur:
Varianter (sett paa .list-row):
Default: noeytral graa. Brukes for lister uten status-betydning
(prosjektlogg, foelgeliste, dokumentlister).
.accent-primary (orange) — eksplisitt branding/identitet (qr-pdf).
.accent-blue, .accent-green, .accent-gray (eksplisitt graa),
.accent-warning (gul), .accent-danger (roed).
Vidars vedtak 2026-04-26: Default flyttet fra orange til graa.
Orange er identitetsfarge og skal reserveres for accent (knapper,
fokus, branding). Lange lister er roligere i graa default.
Status-styrte accents (gul/blaa/groenn) leses tydeligere mot graa
enn mot orange-paa-orange.
Aapne/lukke: toggle klassen `open` paa .list-row.
JS-hjelper: shared/js/list-row.js (ModulHubListRow.bind).
*/
.list-row {
--list-row-accent: #6B7280;
--list-row-accent-soft: #f1f3f6;
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 8px;
background: var(--surface);
overflow: hidden;
transition: box-shadow 0.15s;
}
.list-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.list-row.open { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
/* Fokus-ramme: sist klikkede list-row paa siden faar tynn accent-farget
ramme. Kun én .focused per side om gangen — JS rydder globalt. Gir
brukeren tydelig "du er her"-signal uten aa skape stoey naar flere
kort er aapne samtidig. Foelger accent-fargen via --list-row-accent. */
.list-row.focused {
box-shadow: 0 0 0 1.5px var(--list-row-accent), 0 2px 12px rgba(0,0,0,0.08);
}
/* Tabellrad-fokus (2026-04-23): Dempet variant for inni tabeller
(typisk bruker-rader i admin, men generelt gjenbrukbart). Bruker
venstre-border + soft bakgrunn siden box-shadow fungerer daarlig
paa tabellrader pga border-collapse. Arver accent-fargen fra
omkringligende .list-row — saa brukerrad i en .accent-blue-klient
blir blaa, i en .accent-green-klient blir groenn, osv.
Opt-in: gi
for aa aktivere. */
tr.focusable-row { cursor: pointer; }
tr.focusable-row:hover td {
background: rgba(0, 0, 0, 0.02);
}
tr.focusable-row.focused td {
background: var(--list-row-accent-soft, rgba(232, 84, 26, 0.08));
}
tr.focusable-row.focused td:first-child {
border-left: 3px solid var(--list-row-accent, var(--primary));
padding-left: 6px;
}
/* Eksplisitt orange — for moduler/objekter som vil ha ModulHub-identitet
som accent (qr-pdf-editor). Default er graa, denne klassen overrider. */
.list-row.accent-primary { --list-row-accent: var(--primary); --list-row-accent-soft: var(--primary-soft); }
.list-row.accent-blue { --list-row-accent: #3D5A80; --list-row-accent-soft: #EBF0F7; }
.list-row.accent-green { --list-row-accent: #2e7d32; --list-row-accent-soft: #e8f5e9; }
.list-row.accent-gray { --list-row-accent: #6B7280; --list-row-accent-soft: #f1f3f6; }
.list-row.accent-warning { --list-row-accent: #92400e; --list-row-accent-soft: #fef9c3; }
.list-row.accent-danger { --list-row-accent: #ef4444; --list-row-accent-soft: #fef2f2; }
.list-row-header {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; cursor: pointer; user-select: none;
background: var(--list-row-accent-soft);
color: #1A1A1A;
border-left: 3px solid var(--list-row-accent);
border-radius: var(--radius-md);
}
.list-row.open > .list-row-header {
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.list-row-header:hover {
filter: brightness(0.97);
}
.list-row-chevron {
font-size: 11px; color: var(--list-row-accent);
transition: transform 0.2s;
flex-shrink: 0; width: 14px; text-align: center;
/* Stoerre klikkmaal: chevron er den eksplisitte toggle-knappen etter
"smart klikk" (2026-04-23). Padding oeker hitbox uten aa endre
visuell stoerrelse. border-radius + hover viser at det er klikkbart. */
padding: 4px 6px;
margin: -4px -2px;
border-radius: 4px;
cursor: pointer;
}
.list-row-header:hover .list-row-chevron {
background: rgba(0, 0, 0, 0.05);
}
.list-row.open > .list-row-header .list-row-chevron { transform: rotate(90deg); }
.list-row-drag {
cursor: grab; color: var(--muted); font-size: 14px;
user-select: none; flex-shrink: 0;
padding: 0 4px;
/* touch-action: none signaliserer til browseren at drag-handtaket
haandterer touch selv — hindrer at browseren tolker finger-
bevegelse som scroll naar bruker drar handle. */
touch-action: none;
}
.list-row-drag:active { cursor: grabbing; }
.list-row-title {
font-weight: 700; font-size: 14px; flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-row-title-sub {
font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 8px;
}
.list-row-meta {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--muted); flex-shrink: 0;
}
.list-row-actions {
display: flex; gap: 4px; flex-shrink: 0;
}
.list-row-actions .btn {
font-size: 11px; height: 26px; padding: 0 8px;
}
/* Skjul sekundaere actions paa lukket rad (kun primaer og meta synlig) */
.list-row:not(.open) .list-row-actions .list-row-action-secondary { display: none; }
.list-row-body {
display: none;
padding: 12px 16px;
border-top: 1px solid var(--border);
}
.list-row.open > .list-row-body { display: block; }
/* Mobil: lar tabeller inne i list-row-body scrolle horisontalt hvis
de er bredere enn skjermen (admin-brukertabell, osv.). Unngaar
at innhold flyter ut av kortet paa sma skjermer.
Lar ogsaa knapperader (list-row-actions) og meta wrappe til neste
linje istedenfor aa klippes ved høyre kant. Tittel + chevron blir paa
foerste linje, knapper glir under hvis total bredde overstiger
skjermen. (Fiks 2026-04-23: "Rediger"/"Knytt" o.l. ble klippet paa
smale skjermer.) */
@media (max-width: 720px) {
.list-row.open > .list-row-body { overflow-x: auto; }
.list-row-header {
flex-wrap: wrap;
row-gap: 6px;
}
/* Tittelen tar full bredde paa foerste linje for aa tvinge
meta/actions til neste linje ved overflow. */
.list-row-title { flex-basis: 100%; }
/* Knapperad fyller tilgjengelig bredde paa egen linje — gir plass
til alle knappene uten klipping. */
.list-row-actions {
flex-wrap: wrap;
justify-content: flex-end;
width: 100%;
}
}
/* Drop-target highlight for transfer mellom lister */
.list-row.mh-drop-target > .list-row-header {
background: var(--primary-soft);
}
/* ---------------------------------------------------------------------------
Deep-link highlight — markerer rad/kort som bruker kom til via søk/navigasjon.
Gjelder både .list-row-kort og
i .data-table inne i list-row-body.
Midlertidig: kallende kode fjerner klassen etter ~3 sek via
`ModulHubListRow.autoFadeDeepLinks()`. Ikke permanent.
--------------------------------------------------------------------------- */
.list-row.deep-link-highlight {
box-shadow: 0 0 0 2px var(--primary) !important;
}
tr.deep-link-highlight td {
background: var(--primary-soft, #fff3ee) !important;
font-weight: 600;
}
tr.deep-link-highlight td:first-child {
border-left: 4px solid var(--primary, #E8541A) !important;
padding-left: 6px !important;
}