/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 1936-2352, byte-exakt; About view grid/shortcut cell, chat input line. Laddas direkt efter föregående del i index.html. */
/* *** === OM-VY & AVSLUTANDE === *** */

/* =============================================================================
Chat-inputs: Blå linje
============================================================================= */
#inbox-chat-input {
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
outline: none !important;
}

/* =============================================================================
Om-vyn: 4-rutors grid
============================================================================= */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
padding: 20px;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}

/* Modifieraren .about-grid--with-platform-note är borttagen 2026-08-24. Den lade en
   tredje grid-rad för en fristående förklaringsrad som upprepade (i)-tooltipen
   ordagrant och stal ~22px höjd från var och en av de fyra boxarna. Om-vyn har
   därmed alltid två rader — se .about-grid ovan. */

.about-cell {
border-radius: 14px;
padding: 12px 14px;
/* Temaföljande yta: mörk på mörka teman, ljus på ljusa teman. Tidigare var
   detta hårdkodat rgba(15,15,20,0.85), vilket blev mörka partier i OM-vyn på
   ljusa teman om style-admin.css/dess inline-klon laddades EFTER temafilen
   (t.ex. live-injektion). --bg-dark-secondary är definierad i alla teman. */
background: color-mix(in srgb, var(--bg-dark-secondary) 85%, transparent) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px) !important;
overflow-y: auto;
scrollbar-width: none !important;
min-height: 0;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* =============================================================================
   #445 / #445B — Om-vyns rutor: lika stora, kompakta rader, linjerade kolumner
   -----------------------------------------------------------------------------
   Ursprung `#445`: de nedre rutorna fyllde bara ~40 % av sin höjd och såg
   nedtunga ut. Första försöket lät raderna växa med rutan upp till `68px`.
   🔴 Det var fel lösning, och Patrik såg varför direkt: *"Hade det inte gått
   att göra de översta rutorna lika stora, så att inte raderna nu i de nedre
   korten känns så luftiga och stora? ... Jag vet inte om det har att göra med
   att innehållet inte zoomar tillsammans med raderna?"* Han hade rätt på båda
   punkterna — kortets innehåll är `16px` och växer inte med raden, så en `68px`
   rad är mest luft.

   Rotorsaken låg i rutnätet, inte i raderna: `grid-template-rows` var
   `max-content minmax(0,1fr)`, vilket låste övre raden vid `314.5px` oavsett
   upplösning och lät nedre raden svälja allt överskott (`988px` @1920x1440).
   Den regeln är rättad längre ned i filen; se `#445B`-kommentaren där.

   Här hanteras följderna: rader med tak som följer fönsterhöjden, delade
   radspår så kolumnerna alltid linjerar, och överbliven höjd centrerad i
   stället för samlad nedtill.

   Mätt över fyra upplösningar efter ändringen (`690`/`768`/`900`/`1080`):
   rutorna lika stora, kolumnerna linjerade och `0px` dolt innehåll överallt.
   Före: dolt innehåll `75px` @1366x690 och osynkade kolumner upp till `1080`.

   🔴 Endast desktop. Under `768px` ger mobile.css rutorna `height:auto`, alltså
   finns ingen överbliven höjd att fördela — men gränsen sätts explicit så att
   mobilen aldrig kan påverkas av en framtida ändring här.
   ========================================================================== */
@media (min-width: 769px) {
/* Överbliven höjd hamnar lika mycket ovanför som under innehållet, i stället
   för som en klump nedtill. Rubriken är en `h3` och rörs inte av detta. */
#view-about .about-cell > div:first-of-type { margin-top: auto; }
#view-about .about-cell > div:last-child { margin-bottom: auto; }

#about-stats-content { align-items: center; }

/* 🔴 Kolumnerna delar SAMMA radspår. Två fristående flexkolumner med 5 mot 6
   kort fördelade höjden olika och hamnade osynkat — mätt @1366x768: vänster
   `48px` mellan raderna, höger `40px`. Med `grid-auto-flow: column` följer
   linjeringen av layouten och kan inte glida isär.
   Radhöjden följer fönsterhöjden: `clamp()` håller korten kompakta på stora
   skärmar (taket `44px` — utan tak blev de `68–92px` och kändes luftiga,
   eftersom innehållet bara är `16px` och inte växer med raden) och låter dem
   krympa på låga fönster i stället för att klippas. */
.about-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto repeat(6, minmax(0, clamp(28px, 4vh, 44px)));
grid-auto-flow: column;
gap: 8px;
width: 100%;
}

#about-system-info .info-item {
min-height: clamp(24px, 3.2vh, 34px);
align-items: center;
}
}

.about-cell-title {
margin: 0 0 4px 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent-primary);
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
flex-shrink: 0;
}

/* Följ temat i Om-vyn; hårdkodad vit text faller på ljusa about-celler. */
.about-cell, .about-cell span, .about-cell div, .about-cell label {
color: var(--text-primary) !important;
}

.about-stat-row {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
text-align: center;
cursor: pointer;
}

/* System & Status-rutan: ingen scroll, kompakt info-rad */
.about-cell.no-scroll {
overflow: hidden;
font-size: 12px;
}

/* Om-vyn: kompakta arbetsflödessteg — title + description, utan scroll */
#view-about .guide-section {
flex: 1;
justify-content: space-between;
gap: 4px;
margin-top: 4px;
}
#view-about .guide-step {
padding: 5px 9px;
gap: 9px;
border-left-width: 2px;
border-radius: 8px;
align-items: center;
background: rgba(255,255,255,0.025) !important;
}
#view-about .guide-step:hover {
background: color-mix(in srgb, var(--accent-primary) 9%, transparent) !important;
}
#view-about .step-number {
width: 18px;
height: 18px;
font-size: var(--text-badge-min-size);
flex-shrink: 0;
align-self: flex-start;
margin-top: 1px;
background: var(--accent-primary) !important;
color: #fff !important;
box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
}
#view-about .step-content {
display: flex;
flex-direction: column;
gap: 1px;
padding-top: 0;
}
#view-about .step-content strong {
font-size: 11.5px;
line-height: 1.25;
color: var(--accent-primary) !important;
font-weight: 600;
}
#view-about .step-desc {
font-size: var(--text-micro-size);
color: var(--text-secondary) !important;
opacity: var(--text-help-opacity);
line-height: 1.25;
}
/* Om-vyn: Prio-stat-kort röd fade (gäller alla mörka teman; ljusa teman har egna regler) */
#view-about .about-stat-card--priority {
background: rgba(255, 59, 48, 0.08) !important;
border-color: rgba(255, 59, 48, 0.3) !important;
}
#view-about .about-stat-card--priority strong {
color: #ff3b30 !important;
}

/* =============================================================================
   #453 — Medelprio-kortet ska vara gult, inte rött.
   -----------------------------------------------------------------------------
   🔴 Prioritetskortets färg sätts INTE av inline-stilen i admin-audit.js.
   Mätt: regeln ovan plus en egen kopia i **alla tio** temafiler sätter
   `background`/`border`/`strong` med `!important` på `.about-stat-card--priority`.
   De slår varje inline-stil, så när medelprio-kortet lades till ärvde det den
   röda faden och blev omöjligt att skilja från högprio.

   Därför en högre specificitet i stället: temats regel är
   `body #view-about #about-stats-content .about-stat-card--priority`
   (2 id + 1 klass + 1 element). Att lägga till `.about-stat-card--medium` ger
   2 id + 2 klasser + 1 element och vinner i alla tio teman — utan att tio
   temafiler behöver ändras.

   Färgerna är temats egna `--warning-*`. Mätt i alla tio teman: gul text mot
   kortets yta `5.37–8.79:1` (ljusa teman får `#92400e`, mörka `#ff9f0a`/`#ffb340`).
   🔵 Bara 4 av 10 teman definierar tokenen själva; de övriga sex ärver
   basvärdena i `style.css:154-166`. Faller de bort tappar sex teman färgen.
   ========================================================================== */
body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--medium,
#view-about .about-stat-card--priority.about-stat-card--medium {
background: var(--warning-bg) !important;
border: 1px solid var(--warning-border) !important;
}

body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--medium strong,
body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--medium span,
#view-about .about-stat-card--priority.about-stat-card--medium strong,
#view-about .about-stat-card--priority.about-stat-card--medium span {
color: var(--warning-text) !important;
}

/* 🔴 Högprio-kortets ETIKETT hade tappat sin färg. Inline-stilen sätter den till
   en ljusröd, men temats generiska `.about-cell span { color: … !important }`
   vinner — mätt i Apple Light Green blev etiketten `rgb(61,107,80)`, alltså
   samma gröna som brödtexten, medan siffran var röd. Korten ska vara ett
   matchat par, så etiketten får samma behandling som medelprios. */
body #view-about #about-stats-content .about-stat-card--priority.about-stat-card--high span,
#view-about .about-stat-card--priority.about-stat-card--high span {
color: var(--danger-text) !important;
}

/* Compact info-items inuti Om-cellerna (override av globala 10px padding) */
.about-cell .info-item {
padding: 2px 4px;
font-size: 12px;
}

/* Setting-item i Om-cellen mer kompakt */
.about-cell .setting-item {
margin-bottom: 0;
}
.about-cell .setting-item label {
font-size: 13px !important;
}
.about-cell .setting-item select {
font-size: 12px !important;
padding: 4px 8px !important;
}

/* =============================================================================
Om-vyn: Tangentbordsgenvägar-cell (CELL 1)
============================================================================= */
.about-shortcut-list {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
overflow-y: auto;
}

.about-shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.07);
transition: background 0.15s ease;
cursor: pointer;
color: var(--text-primary);
}

.about-shortcut-row:hover {
background: color-mix(in srgb, var(--accent-primary) 7%, rgba(255,255,255,0.04));
}

/* FASG-SLICE-4/#275: Båda utgåvornas två övre Om-celler har exakt fyra rader
   vardera. Klientnoten ligger som en fullbreddsrad utanför cellerna, så den
   får inte längre reservera eller konsumera höjd i vänstercellen. */
@media (min-width: 769px) {
/* 🔴 #445B: alla fyra rutor lika stora. Tidigare stod här `max-content
   minmax(0, 1fr)`, vilket låste ÖVRE raden vid sitt innehåll — mätt `314.5px`
   oavsett upplösning — och lät nedre raden svälja allt överskott: `315px`
   @1366x768 men `988px` @1920x1440. Det var orsaken till att de nedre kortens
   rader kändes luftiga medan de övre rutorna såg trånga ut.
   `minmax(max-content, 1fr)` ger raderna samma höjd när det finns plats, men
   låter dem växa till sitt innehåll när fönstret är för lågt — då scrollar
   vyn i stället för att klippa. Mätt: dolt innehåll `75px → 0` @1366x690. */
#view-about .about-grid {
grid-template-rows: repeat(2, minmax(max-content, 1fr));
overflow-y: auto;
}

#view-about #about-grid > .about-cell:nth-child(1),
#view-about #about-grid > .about-cell:nth-child(2) {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}

#view-about .about-shortcut-list,
#view-about .guide-section {
display: grid;
grid-template-rows: repeat(4, minmax(40px, 62px));
min-height: 0;
gap: 4px;
margin-top: 4px;
align-content: start;
overflow: visible;
}

#view-about .guide-section {
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
}

#view-about .about-shortcut-row,
#view-about .guide-step {
height: 100%;
min-height: 0;
box-sizing: border-box;
}
}

.about-kbd-group {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}

.about-kbd-sep {
font-size: 10px;
color: var(--text-secondary) !important;
opacity: 0.9;
padding: 0 1px;
}

.about-cell .about-kbd-badge {
margin-left: 5px;
padding: 2px 5px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 32%, rgba(255, 255, 255, 0.12));
border-radius: 5px;
background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
color: color-mix(in srgb, var(--accent-primary) 78%, #ffffff) !important;
font-size: var(--text-badge-min-size);
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
body.atlas-light-theme .about-cell .about-kbd-badge {
color: color-mix(in srgb, var(--accent-primary) 43%, #000) !important;
}
body:not(.atlas-light-theme) .about-cell .about-kbd-badge {
color: color-mix(in srgb, var(--accent-primary) 35%, var(--text-primary)) !important;
}

.about-shortcut-label {
font-size: 13px;
opacity: 0.85;
text-align: right;
color: var(--text-primary);
}

.about-platform-note {
grid-column: 1 / -1;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
color: var(--text-secondary) !important;
font-size: 10px;
line-height: 1.45;
}

/* Styling för kbd-tangenter inuti Om-vyn */
.about-cell kbd {
display: inline-block;
padding: 3px 8px;
background: color-mix(in srgb, var(--text-primary) 12%, rgba(0,0,0,0.6));
border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
border-bottom: 2px solid rgba(0, 0, 0, 0.45);
border-radius: 5px;
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
color: var(--text-primary) !important;
}

/* Roll-badge bredvid inloggat användarnamn (ersätter faded text) */
.about-role-badge {
display: inline-block;
font-size: var(--text-badge-min-size) !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 2px 5px;
border-radius: 4px;
background: rgba(0, 113, 227, 0.3) !important;
border: 1px solid rgba(0, 113, 227, 0.5);
color: var(--accent-primary) !important;
vertical-align: middle;
margin-left: 5px;
line-height: 1.6;
}