/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 1116-1935, byte-exakt; network cards, knowledge import, garage filter contrast. Laddas direkt efter föregående del i index.html. */
/* ── NÄTVERKS-SERVER-URL (använder CSS-variabel för temafärg) ────────────── */
.network-server-url {
color: var(--live-server-url-color);
}

/* ── NÄTVERKS-ADRESSKORT ──────────────────────────────────────────────────
   Ramen är temabunden med samma formel som .admin-section-divider. En
   hårdkodad vit rgba-ram (tidigare inline) är osynlig på ljusa teman. */
.network-address-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid color-mix(in srgb, var(--text-secondary, #aab4c3) 34%, transparent);
}

.ki-guide-box {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 12px;
line-height: 1.55;
color: rgba(255,255,255,0.72);
}

.ki-guide-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.ki-guide-column,
.ki-guide-grid > div,
.ki-guide-example {
padding: 10px 12px;
border-radius: 8px;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.07);
}

.ki-guide-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #ffd58a;
margin-bottom: 4px;
}

/* "Lägg inte här" får subtil röd varningston (IRL-fynd 2026-06-10) —
   samma röda mönster som varningsrutan i Drift & Säkerhet, fungerar i ljusa+mörka teman */
.ki-guide-grid > .ki-guide-avoid {
background: rgba(255,107,107,0.08);
border-color: rgba(255,107,107,0.28);
}
.ki-guide-avoid .ki-guide-label {
color: #ff6b6b;
}

.ki-guide-example {
color: rgba(255,255,255,0.62);
font-style: italic;
}

.ki-guide-example span {
font-style: normal;
font-weight: 700;
color: rgba(255,255,255,0.82);
}

.ki-guide-dedup-note {
margin-top: 10px;
padding: 8px 12px;
border-radius: 6px;
background: rgba(96,165,250,0.07);
border: 1px solid rgba(96,165,250,0.18);
font-size: 11px;
line-height: 1.5;
color: rgba(255,255,255,0.60);
}

.ki-input-warnings {
margin-top: 10px;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
background: rgba(245,158,11,0.12);
border: 1px solid rgba(245,158,11,0.32);
color: #ffd58a;
}

.ki-warning-title {
font-weight: 800;
font-size: 11px;
letter-spacing: 0.2px;
margin-bottom: 4px;
}

.ki-input-warnings ul {
margin: 6px 0 0;
padding-left: 18px;
}

.ki-input-warnings li + li {
margin-top: 3px;
}

@media (max-width: 720px) {
.ki-guide-grid {
grid-template-columns: 1fr;
}
}

.ki-price-warning,
.ki-permanent-warning {
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
background: rgba(245,158,11,0.12);
border: 1px solid rgba(245,158,11,0.32);
color: #ffd58a;
margin-bottom: 12px;
}

.ki-permanent-warning {
margin: 12px 0 0;
}

.ki-next-step {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
}

.ki-next-step span {
font-size: 12px;
line-height: 1.45;
color: rgba(198,246,213,0.78);
}

.ki-save-note {
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
background: rgba(34,197,94,0.10);
border: 1px solid rgba(34,197,94,0.24);
color: rgba(198,246,213,0.90);
margin: 12px 0 0;
}

.kb-guide-container {
width: 100%;
}

.kb-guide-body {
padding: 20px;
overflow-y: auto;
}

.kb-guide-fallback-title {
margin-bottom: 18px;
font-size: 16px;
font-weight: 800;
color: var(--accent-primary);
}

.kb-guide-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 18px;
align-items: stretch;
padding: 18px;
margin: 0 0 18px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
}

.kb-guide-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.55px;
text-transform: uppercase;
color: #ffd58a;
margin-bottom: 8px;
}

.kb-guide-hero h3 {
margin: 0;
font-size: 18px;
line-height: 1.25;
color: rgba(255,255,255,0.92);
}

.kb-guide-hero p {
/* Patriks IRL 2026-09-18: en fast max-width (760px) utan centrering lät texten hänga kvar vid vänsterkanten
   medan rutan blev bredare vid utzoomning. Texten fyller nu rutans innerbredd, så avståndet till vänster och
   höger vägg är alltid lika (rutans padding). */
max-width: none;
margin: 10px 0 0;
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.66);
}

.kb-guide-summary {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: 14px;
border-radius: 8px;
background: rgba(0,0,0,0.16);
border: 1px solid rgba(255,255,255,0.07);
}

.kb-guide-summary span {
display: block;
font-size: 12px;
line-height: 1.45;
color: rgba(255,255,255,0.76);
}

.kb-guide-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}

.kb-guide-card {
min-width: 0;
padding: 14px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
}

.kb-guide-card-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 8px;
}

.kb-guide-card h4 {
margin: 0;
font-size: 14px;
line-height: 1.3;
color: rgba(255,255,255,0.90);
}

.kb-guide-card p {
margin: 9px 0 0;
font-size: 12px;
line-height: 1.55;
color: rgba(255,255,255,0.64);
}

.kb-guide-card ul {
margin: 10px 0 0;
padding-left: 18px;
font-size: 12px;
line-height: 1.5;
color: rgba(255,255,255,0.70);
}

.kb-guide-card li + li {
margin-top: 5px;
}

.kb-guide-action {
margin-top: 12px;
}

.kb-guide-candidate-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}

.kb-guide-candidate-row + .kb-guide-candidate-row {
margin-top: 8px;
}

.kb-guide-candidate-row .kb-guide-action {
flex: 1 1 auto;
display: inline-flex;
margin-top: 0;
min-width: 0;
justify-content: flex-start;
white-space: normal;
text-align: left;
line-height: 1.35;
}

.kb-guide-icon-action {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--border-color) 75%, var(--accent-primary));
background: color-mix(in srgb, var(--bg-dark-secondary) 84%, var(--accent-primary) 16%);
color: var(--text-primary);
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.kb-guide-icon-action:hover:not(:disabled) {
background: color-mix(in srgb, var(--bg-dark-secondary) 70%, var(--accent-primary) 30%);
border-color: var(--accent-primary);
transform: translateY(-1px);
}

.kb-guide-icon-action:disabled {
cursor: not-allowed;
opacity: 0.58;
transform: none;
}

.kb-guide-dismissed-label {
flex: 1 1 auto;
min-width: 0;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(148,163,184,0.22);
background: rgba(148,163,184,0.08);
color: var(--text-secondary);
font-size: 12px;
font-weight: 700;
line-height: 1.25;
}

.kb-guide-dismissed-state {
border-color: rgba(148,163,184,0.24);
background: rgba(148,163,184,0.07);
}

.kb-guide-action:disabled,
.kb-guide-action:disabled:hover {
cursor: not-allowed !important;
border-style: dashed !important;
border-color: color-mix(in srgb, var(--text-secondary) 42%, var(--border-color)) !important;
background: color-mix(in srgb, var(--bg-dark-secondary) 90%, var(--text-secondary) 10%) !important;
color: var(--text-primary) !important;
box-shadow: none !important;
transform: none !important;
filter: saturate(0.62);
}

.kb-guide-flow {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}

.kb-guide-flow > div {
padding: 12px 14px;
border-radius: 8px;
background: rgba(59,130,246,0.10);
border: 1px solid rgba(96,165,250,0.22);
}

.kb-guide-flow strong,
.kb-guide-flow span {
display: block;
}

/* 🔴 #510 rev 3 (Patrik 2026-09-02): stegen är en span var nu. Luft mellan raderna så
   siffrorna går att skanna, och en tydlig paus före avslutningshänvisningen som inte
   är ett steg. */
.kb-guide-flow span + span {
margin-top: 5px;
}
.kb-guide-flow .kb-guide-flow-note {
margin-top: 9px;
opacity: 0.78;
}

.kb-guide-flow strong {
font-size: 12px;
color: #bfdbfe;
margin-bottom: 5px;
}

.kb-guide-flow span {
font-size: 12px;
line-height: 1.45;
color: rgba(255,255,255,0.66);
}

.kb-guide-hero--single {
grid-template-columns: 1fr;
}

.kb-guide-cta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 12px 16px;
margin: 0 0 18px;
border-radius: 8px;
background: rgba(59,130,246,0.08);
border: 1px solid rgba(96,165,250,0.20);
}

.kb-guide-cta span {
display: block;
font-size: 12px;
line-height: 1.45;
color: rgba(255,255,255,0.76);
}

.kb-guide-cta span:first-child {
font-weight: 600;
color: rgba(255,255,255,0.88);
}

@media (max-width: 1100px) {
.kb-guide-hero,
.kb-guide-grid,
.kb-guide-flow {
grid-template-columns: 1fr;
}
}

.ki-section-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.ki-select-all-row {
display: flex;
gap: 8px;
margin-bottom: 6px;
}

.ki-section-card {
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.07);
border-left: 3px solid rgba(255,255,255,0.15);
padding: 14px 16px;
background: rgba(255,255,255,0.03);
transition: border-color 0.2s, opacity 0.2s;
}

.ki-section-card.ki-sc--new {
border-left-color: rgba(74,222,128,0.65);
background: rgba(74,222,128,0.04);
}

.ki-section-card.ki-sc--similar {
border-left-color: rgba(251,191,36,0.6);
background: rgba(251,191,36,0.03);
}

.ki-section-card.ki-sc--uncertain {
border-left-color: rgba(239,68,68,0.45);
background: rgba(239,68,68,0.03);
}

.ki-section-card.ki-sc--excluded {
opacity: 0.42;
border-left-color: rgba(255,255,255,0.1);
}

.ki-sc-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}

.ki-sc-check-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
min-width: 0;
}

.ki-sc-checkbox {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: #4ade80;
flex: 0 0 auto;
-webkit-appearance: checkbox !important;
appearance: auto !important;
background: initial !important;
border: revert !important;
}

.ki-sc-status-label {
font-size: 0.75rem;
color: var(--text-secondary);
opacity: var(--text-help-opacity);
letter-spacing: 0;
line-height: 1.35;
}

.ki-sc-remove {
background: none;
border: none;
color: var(--text-secondary);
opacity: 0.48;
cursor: pointer;
font-size: 0.8rem;
padding: 2px 6px;
border-radius: 4px;
transition: color 0.15s;
flex: 0 0 auto;
}

.ki-sc-remove:hover {
color: rgba(239,68,68,0.7);
opacity: 1;
}

.ki-sc-fields {
display: flex;
flex-direction: column;
}

.ki-section-title,
.ki-section-answer,
.ki-sc-input,
.ki-sc-textarea {
width: 100%;
background: var(--surface-raise);
border: 1px solid var(--surface-line);
border-radius: 6px;
color: var(--text-primary);
padding: 8px 10px;
font-size: 0.85rem;
line-height: 1.45;
margin-bottom: 8px;
box-sizing: border-box;
outline: none;
}

.ki-section-title:focus,
.ki-section-answer:focus,
.ki-sc-input:focus,
.ki-sc-textarea:focus {
border-color: var(--accent-primary);
}

.ki-section-answer,
.ki-sc-textarea {
resize: vertical;
min-height: 96px;
}

.ki-kw-row {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 4px;
}

.ki-kw-chip {
font-size: 0.72rem;
padding: 2px 8px;
background: var(--surface-raise);
border: 1px solid var(--surface-line);
border-radius: 10px;
color: var(--on-surface-strong);
}

.ki-section-summary {
font-size: 0.8rem;
color: var(--text-secondary);
opacity: var(--text-help-opacity);
margin-bottom: 14px;
padding: 0 2px;
}

.ki-import-badge {
background: #f59e0b;
color: #000;
font-size: 11px;
padding: 2px 6px;
border-radius: 3px;
margin-left: 8px;
}

.ki-draft-list {
display: flex;
flex-direction: column;
gap: 0;
}

.ki-draft-row {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.70);
font-size: 12px;
text-align: left;
cursor: pointer;
}

.ki-draft-row:hover {
color: #fff;
}

.ki-validation {
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
margin-bottom: 12px;
}

.ki-validation ul {
margin: 8px 0 0;
padding-left: 18px;
}

.ki-validation--ok {
background: rgba(46,204,113,0.10);
border: 1px solid rgba(46,204,113,0.24);
color: #8ff0b1;
}

.ki-validation--error {
background: rgba(255,77,109,0.10);
border: 1px solid rgba(255,77,109,0.24);
color: #ff9cac;
}

.ki-manifest-summary {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin: 12px 0;
}

.ki-manifest-summary div {
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
min-width: 0;
}

.ki-manifest-summary span {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(255,255,255,0.42);
margin-bottom: 4px;
}

.ki-manifest-summary strong,
.ki-office-row strong {
font-size: 12px;
color: rgba(255,255,255,0.86);
overflow-wrap: anywhere;
}

.ki-office-list {
border-top: 1px solid rgba(255,255,255,0.07);
margin-top: 10px;
}

.ki-office-row span {
font-size: 11px;
color: rgba(255,255,255,0.48);
overflow-wrap: anywhere;
}

.ki-loading-text {
margin-top: 10px;
font-size: 12px;
color: rgba(255,255,255,0.55);
}

.ki-qa-table-wrap {
overflow-x: auto;
}

.ki-qa-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}

.ki-qa-table th,
.ki-qa-table td {
padding: 9px 8px;
border-bottom: 1px solid rgba(255,255,255,0.07);
vertical-align: top;
text-align: left;
}

.ki-qa-table th {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(255,255,255,0.42);
}

.ki-pass {
color: #8ff0b1;
font-weight: 700;
}

.ki-fail {
color: #ff9cac;
font-weight: 700;
}

@media (max-width: 768px) {
.ki-status-grid,
.ki-manifest-summary {
grid-template-columns: 1fr;
}

.ki-panel-header {
align-items: flex-start;
flex-direction: column;
}

.ki-step {
flex: 1 1 calc(50% - 8px);
justify-content: center;
min-width: 130px;
}
}

.btn-glass-icon {
width: 38px;
height: 38px;
border-radius: 8px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text-primary);
transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
.btn-glass-icon:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: currentColor;
opacity: 1;
transform: scale(1.08);
filter: drop-shadow(0 0 6px currentColor);
}

/* =============================================================================
GARAGET — Filter-kontrast (fungerar i alla teman, inkl. ljusa)
============================================================================= */
.filter-select,
.filter-input {
background: rgba(0, 0, 0, 0.28) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: var(--text-primary) !important;
}
.filter-select:focus,
.filter-input:focus {
background: rgba(0, 0, 0, 0.38) !important;
border-color: var(--accent-primary) !important;
outline: none !important;
}
.filter-select option {
background: #1a1825 !important;
color: var(--text-primary) !important;
}
.filter-select option:checked {
background: var(--accent-primary) !important;
color: #fff !important;
}

/* Mallmallar — avstånd mellan mallkort i listan */
.template-item {
margin-bottom: 8px !important;
}

/* Admin — service-dropdowns matchar .filter-input (rgba(0,0,0,0.28), fungerar
   i alla teman inkl. ljusa) istf hårdkodad --bg-dark-secondary som alltid är
   mörkgrå oavsett tema (IRL-fynd 2026-06-11). */
#admin-detail-content select,
#new-service-select {
background: rgba(0, 0, 0, 0.28) !important;
color: var(--text-primary) !important;
border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent) !important;
}
#admin-detail-content select option,
#new-service-select option {
background: var(--bg-dark-primary, #1a1825);
color: var(--text-primary, #ffffff);
}