/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 5307-7813, byte-exakt; services/packages/prices/campaigns. Laddas direkt efter föregående del i index.html. */
/* === ADMIN TJÄNSTER & PAKET === */
.catalog-active-vehicles-panel {
position: relative;
margin: 0;
padding: 12px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
background: rgba(255,255,255,0.025);
}

.catalog-duration-variance-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: var(--text-small-size);
color: var(--text-secondary);
}

#view-admin .catalog-duration-variance-pill {
min-width: 72px;
height: 24px;
padding: 0 10px;
font-size: 11px;
font-weight: 800;
line-height: 1;
cursor: pointer !important;
}

#view-admin .catalog-duration-variance-pill:disabled {
opacity: 1;
cursor: default !important;
}

#view-admin .catalog-duration-variance-pill:focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent-primary, #93c5fd) 70%, transparent);
outline-offset: 2px;
}

/* Patriks begäran 2026-09-16: denna pill har omvänd färgsemantik mot övriga status-pills —
   "Samma" (is-inactive) ska vara grön (det normala/enkla läget), "Varierar" (is-active) röd
   (kräver mer admin-arbete per enhet). Override:as här specifikt, rör INTE delade
   .status-pill.is-active/.is-inactive-reglerna ovan som andra togglar använder. */
#view-admin .catalog-duration-variance-pill.is-active {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 28%, transparent) !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 78%, var(--text-primary, #fff)) !important;
}

#view-admin .catalog-duration-variance-pill.is-inactive {
background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
border-color: color-mix(in srgb, var(--status-success, #22c55e) 32%, transparent) !important;
color: color-mix(in srgb, var(--status-success, #22c55e) 82%, var(--text-primary, #fff)) !important;
}

body.atlas-light-theme #view-admin .catalog-duration-variance-toggle {
color: color-mix(in srgb, var(--text-secondary) 84%, #000);
}

body.atlas-light-theme #view-admin .catalog-duration-variance-pill.is-active {
background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, #fff) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 36%, #000) !important;
color: color-mix(in srgb, var(--status-danger, #ef4444) 43%, #000) !important;
}

body.atlas-light-theme #view-admin .catalog-duration-variance-pill.is-inactive {
background: color-mix(in srgb, var(--status-success, #22c55e) 18%, #fff) !important;
border-color: color-mix(in srgb, var(--status-success, #22c55e) 44%, #000) !important;
color: color-mix(in srgb, var(--status-success, #22c55e) 43%, #000) !important;
}
.catalog-active-vehicles-panel.is-list-panel {
margin: 10px 0 12px;
}
.catalog-active-vehicles-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
padding-right: 104px;
}
.catalog-active-vehicles-heading h4 {
margin: 0 0 3px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--accent-primary);
}
.catalog-active-vehicles-heading p,
.drift-active-vehicles-summary p {
margin: 0;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
opacity: 0.62;
}
.catalog-active-vehicles-actions {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.catalog-active-vehicles-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card {
position: relative;
padding: 7px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
background: rgba(255,255,255,0.025);
transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:focus-visible {
outline: 2px solid color-mix(in srgb, var(--accent-primary, #93c5fd) 70%, transparent);
outline-offset: 2px;
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card.is-active {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: var(--sel-edge) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sel-edge) 10%, transparent), 0 10px 24px rgba(0,0,0,0.08);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card.is-inactive {
background: rgba(239,68,68,0.045);
border-color: rgba(239,68,68,0.18);
}
.catalog-active-vehicle-btn {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 6px 8px;
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px;
background: rgba(255,255,255,0.035);
color: var(--text-primary);
font-size: 12px;
font-weight: 700;
cursor: not-allowed;
transition: background 0.18s, border-color 0.18s, opacity 0.18s, box-shadow 0.18s;
}
.catalog-active-vehicle-btn.is-active {
background: var(--sel-fill);
border-color: var(--sel-edge);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--sel-edge) 10%, transparent) inset;
opacity: 1;
color: var(--sel-text);
}
.catalog-active-vehicle-btn.is-inactive {
background: rgba(239,68,68,0.08);
border-color: rgba(239,68,68,0.24);
color: color-mix(in srgb, var(--status-danger, #ef4444) 72%, var(--text-secondary, #fff));
opacity: 1;
}
.catalog-active-vehicle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.catalog-active-vehicle-icon svg {
width: 24px;
height: 24px;
display: block;
}
.catalog-active-vehicle-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.catalog-active-vehicles-grid[data-locked="false"] .catalog-active-vehicle-btn {
cursor: pointer;
}
.catalog-active-vehicles-grid .vehicle-coverage-details {
min-height: 0;
font-size: var(--text-badge-min-size);
line-height: 1.25;
text-align: center;
}
.catalog-active-vehicles-grid .vehicle-coverage-facts {
align-items: center;
gap: 1px;
}
.catalog-active-vehicles-grid .vehicle-coverage-warning {
font-size: var(--text-badge-min-size);
line-height: 1.25;
padding: 3px 4px;
text-align: center;
}
.catalog-active-vehicle-popover {
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
width: max-content;
max-width: min(260px, 78vw);
padding: 9px 10px;
border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
border-radius: 8px;
background: color-mix(in srgb, #0a0910 96%, var(--accent-primary, #93c5fd) 4%);
box-shadow: 0 12px 36px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.035);
color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary));
font-size: 11px;
font-weight: 500;
line-height: 1.4;
text-align: left;
opacity: 0;
pointer-events: none;
transform: translate(-50%, 4px);
transition: opacity 0.12s ease, transform 0.12s ease;
z-index: 10020;
}
.catalog-active-vehicle-popover strong {
display: block;
margin-bottom: 5px;
color: var(--accent-primary);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.catalog-active-vehicle-popover ul {
max-height: 260px;
margin: 0;
padding: 0 0 0 14px;
overflow: auto;
}
.catalog-active-vehicle-popover li {
margin: 0 0 3px;
padding: 0;
}
.catalog-active-vehicle-popover p {
margin: 0;
color: var(--text-secondary);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child .catalog-active-vehicle-popover {
left: 0;
right: auto;
transform: translate(0, 4px);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child .catalog-active-vehicle-popover {
left: auto;
right: 0;
transform: translate(0, 4px);
}
.catalog-active-vehicle-popover::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 8px;
}
.catalog-active-vehicle-card:hover .catalog-active-vehicle-popover,
.catalog-active-vehicle-card:focus-within .catalog-active-vehicle-popover,
.catalog-active-vehicle-card:focus-visible .catalog-active-vehicle-popover {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child:hover .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child:focus-within .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:first-child:focus-visible .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child:hover .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child:focus-within .catalog-active-vehicle-popover,
.catalog-active-vehicles-grid .catalog-active-vehicle-card:last-child:focus-visible .catalog-active-vehicle-popover {
transform: translate(0, 0);
}
.catalog-feature-group {
padding: 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.catalog-feature-card {
justify-content: space-between;
/* --accent-primary = agentens profilfärg (sätts på documentElement vid inloggning
   och livesyncas vid färgbyte) — ingen hårdkodad blå (IRL-fynd A14 2026-06-10) */
border-left: 2px solid color-mix(in srgb, var(--accent-primary, #93c5fd) 45%, transparent);
}
.catalog-guide-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.catalog-guide-card {
padding: 11px 12px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
background: rgba(255,255,255,0.025);
min-width: 0;
}
.catalog-guide-card strong {
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--accent-primary);
margin-bottom: 5px;
}
.catalog-guide-card p {
margin: 0;
font-size: 11px;
line-height: 1.5;
color: var(--text-secondary);
opacity: 0.68;
}
.catalog-vehicle-group {
padding: 0 10px 10px;
}
.catalog-vehicle-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 10px 4px 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--text-secondary);
}
.catalog-vehicle-heading span {
opacity: 0.5;
}
.catalog-vehicle-heading-main,
.catalog-vehicle-tools {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.catalog-vehicle-heading-main {
flex-wrap: wrap;
}
.catalog-vehicle-tools,
.catalog-vehicle-name {
opacity: 1 !important;
flex-shrink: 0;
}
.catalog-vehicle-tools {
gap: 10px;
}
.catalog-group-heading.is-active,
.catalog-vehicle-heading.is-active {
border-left: 2px solid rgba(52, 199, 89, 0.4);
padding-left: 6px;
}
.catalog-group-heading.is-inactive,
.catalog-vehicle-heading.is-inactive {
border-left: 2px solid rgba(255, 59, 48, 0.45);
padding-left: 6px;
}
.catalog-vehicle-publish-status.is-inactive {
display: none;
}
.catalog-vehicle-coverage-warning {
color: var(--warning-text);
font-size: var(--text-badge-min-size);
letter-spacing: 0;
white-space: nowrap;
}
.catalog-vehicle-add-btn {
background: none;
border: none;
color: rgba(0,210,100,0.65);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
opacity: 1;
}
.catalog-vehicle-add-btn:hover {
color: rgba(0,210,100,1);
}
#view-admin .catalog-list-card {
justify-content: space-between;
}

.catalog-campaign-section {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
margin-bottom: 12px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, rgba(255,255,255,0.10));
border-radius: 8px;
background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 6%, rgba(255,255,255,0.035)), rgba(255,255,255,0.025));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.catalog-campaign-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.catalog-campaign-heading > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.catalog-campaign-heading .catalog-list-section-label-text {
display: inline-flex;
align-items: center;
gap: 7px;
color: color-mix(in srgb, var(--accent-primary) 78%, var(--text-primary));
}

.campaign-heading-icon,
.campaign-list-meta span,
.campaign-create-btn,
.campaign-icon-btn,
.campaign-modal-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}

.campaign-heading-icon {
width: 18px;
height: 18px;
}

.campaign-heading-icon svg {
width: 15px;
height: 15px;
}

.catalog-campaign-heading small {
color: var(--text-secondary);
font-size: 11px;
}

.campaign-create-btn {
gap: 6px;
white-space: nowrap;
border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
background: color-mix(in srgb, var(--accent-primary) 9%, rgba(255,255,255,0.04));
color: color-mix(in srgb, var(--accent-primary) 72%, var(--text-primary));
}

.campaign-create-btn svg {
width: 14px;
height: 14px;
}

.campaign-create-icon-btn {
width: 32px;
height: 32px;
padding: 0;
flex: 0 0 auto;
border: none;
}

.campaign-create-icon-btn svg {
width: 16px;
height: 16px;
}

.campaign-summary-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px;
cursor: pointer;
border-left: 2px solid color-mix(in srgb, var(--accent-primary) 72%, transparent);
background: color-mix(in srgb, var(--bg-dark-secondary) 72%, rgba(255,255,255,0.045)) !important;
}

/* SEL-standard Fas 2: hover och vald var hopslagna → vald gick inte att skilja
   från "muspekaren råkar vara här". Nu: vald = --sel-fill + accentkant,
   hover = den svagare hover-plattan. */
/* Plattan som background-IMAGE ovanpå kortets egen opaka yta — se motiveringen
   vid .admin-sysconfig-nav-item.active i style-modals.css. */
#view-admin .campaign-summary-card.active {
border-color: var(--sel-edge) !important;
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
color: var(--sel-text) !important;
}

#view-admin .campaign-summary-card:not(.active):hover {
border-color: color-mix(in srgb, var(--sel-edge) 44%, rgba(255,255,255,0.10)) !important;
background-image: linear-gradient(0deg, var(--sel-fill-hover), var(--sel-fill-hover)) !important;
}

.campaign-list {
display: flex;
flex-direction: column;
gap: 8px;
}

#view-admin .campaign-list-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-left: 2px solid color-mix(in srgb, var(--accent-primary) 72%, transparent);
background: color-mix(in srgb, var(--bg-dark-secondary) 72%, rgba(255,255,255,0.045)) !important;
}

#view-admin .campaign-list-card.is-upcoming {
border-left-color: color-mix(in srgb, var(--text-primary) 42%, var(--accent-primary));
}

#view-admin .campaign-list-card.is-expired,
#view-admin .campaign-list-card.is-inactive {
opacity: 0.72;
border-left-color: color-mix(in srgb, var(--text-secondary) 64%, transparent);
}

.campaign-list-main {
appearance: none;
border: 0;
background: transparent;
color: inherit;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 0;
text-align: left;
cursor: pointer;
}

.campaign-list-title,
.campaign-list-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.campaign-list-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}

.campaign-list-meta {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 2px;
min-width: 0;
color: var(--text-secondary);
font-size: 11px;
}

.campaign-list-meta span {
gap: 4px;
max-width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.campaign-list-meta svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
opacity: 0.75;
}

.campaign-list-description {
color: var(--text-secondary);
font-size: 11px;
opacity: 0.78;
}

.campaign-list-side {
display: flex;
align-items: center;
flex-direction: row;
gap: 6px;
min-width: 0;
}

.campaign-list-actions {
display: flex;
align-items: center;
gap: 4px;
}

.campaign-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
padding: 4px 7px;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
background: rgba(255,255,255,0.035);
color: var(--text-primary);
font-size: 10px;
font-weight: 700;
line-height: 1;
}

.campaign-status-badge.is-active {
border-color: color-mix(in srgb, var(--accent-primary) 48%, transparent);
background: color-mix(in srgb, var(--accent-primary) 13%, transparent);
color: color-mix(in srgb, var(--accent-primary) 86%, var(--text-primary));
}

.campaign-status-badge.is-upcoming {
color: color-mix(in srgb, var(--text-primary) 88%, var(--accent-primary));
}

.campaign-status-badge.is-expired,
.campaign-status-badge.is-inactive {
color: var(--text-secondary);
}

.campaign-icon-btn {
width: 24px;
height: 24px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.campaign-icon-btn svg {
width: 15px;
height: 15px;
}

.campaign-icon-btn:hover {
color: var(--accent-primary);
background: transparent;
transform: translateY(-1px);
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-primary) 40%, transparent));
}

.campaign-icon-btn.is-danger:hover {
color: var(--status-danger, #ef4444);
background: transparent;
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--status-danger, #ef4444) 40%, transparent));
}

.catalog-campaign-empty {
display: flex;
flex-direction: column;
gap: 3px;
padding: 11px 12px;
border: 1px dashed color-mix(in srgb, var(--text-secondary) 24%, transparent);
border-radius: 8px;
color: var(--text-secondary);
background: rgba(255,255,255,0.025);
}

.catalog-campaign-empty strong {
color: var(--text-primary);
font-size: 12px;
}

.catalog-campaign-empty small {
font-size: 11px;
}

.catalog-campaign-empty.is-error {
color: var(--status-danger, #ef4444);
}

.campaign-detail-view .detail-body {
gap: 14px;
}

.campaign-detail-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, rgba(255,255,255,0.08));
border-radius: 8px;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 9%, rgba(255,255,255,0.035)), rgba(255,255,255,0.02));
}

.campaign-detail-hero-title {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.campaign-detail-hero h3 {
margin: 0;
font-size: 15px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--accent-primary);
}

.campaign-detail-hero p {
margin: 4px 0 0;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
}

.campaign-detail-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}

.campaign-detail-stats span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--text-secondary) 16%, transparent);
border-radius: 8px;
background: rgba(255,255,255,0.025);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
text-align: center;
}

.campaign-detail-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
align-items: stretch;
}

.campaign-detail-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
border-left: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--bg-dark-secondary) 76%, rgba(255,255,255,0.035));
min-width: 0;
}

.campaign-detail-card.is-expired,
.campaign-detail-card.is-inactive {
opacity: 0.74;
border-left-color: color-mix(in srgb, var(--text-secondary) 64%, transparent);
}

.campaign-detail-main {
appearance: none;
border: 0;
background: transparent;
color: inherit;
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
padding: 0;
text-align: left;
cursor: pointer;
}

.campaign-detail-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}

.campaign-detail-title-row strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: var(--text-primary);
}

.campaign-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
color: var(--text-secondary);
font-size: 11px;
}

.campaign-detail-meta span,
.campaign-detail-actions {
display: inline-flex;
align-items: center;
gap: 5px;
}

.campaign-detail-meta svg {
width: 12px;
height: 12px;
opacity: 0.75;
}

.campaign-detail-description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--text-secondary);
font-size: 11px;
line-height: 1.45;
}

.campaign-detail-url {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: color-mix(in srgb, var(--accent-primary) 74%, var(--text-primary));
font-size: 10px;
}

.campaign-detail-actions {
align-self: start;
gap: 6px;
}

#atlas-campaign-modal .campaign-modal-box {
width: min(620px, 94vw) !important;
max-width: 94vw !important;
max-height: min(84vh, 720px) !important;
padding: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
border-top: 3px solid var(--accent-primary) !important;
background: color-mix(in srgb, var(--bg-frosty-content, rgba(13,16,28,0.94)) 88%, #ffffff 3%) !important;
}

#atlas-campaign-modal .glass-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px 14px;
margin: 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent);
flex: 0 0 auto;
}

.campaign-modal-title-row {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.campaign-modal-icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 42%, rgba(255,255,255,0.16));
background: color-mix(in srgb, var(--accent-primary) 14%, rgba(255,255,255,0.04));
color: var(--accent-primary);
}

.campaign-modal-icon svg {
width: 19px;
height: 19px;
}

#atlas-campaign-modal .glass-modal-header h3 {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 14px !important;
line-height: 1.2 !important;
letter-spacing: 0.5px !important;
color: var(--accent-primary) !important;
}

.campaign-modal-title-row small {
display: block;
margin-top: 4px;
font-size: 11px;
line-height: 1.35;
font-weight: 500;
color: var(--text-secondary);
text-transform: none;
letter-spacing: 0;
}

.campaign-modal-close {
width: 32px;
height: 32px;
color: var(--text-secondary);
}

#atlas-campaign-modal .campaign-modal-body {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 20px 14px;
overflow-y: auto;
min-height: 0;
flex: 1 1 auto;
}

#atlas-campaign-modal .catalog-field span {
color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

#atlas-campaign-modal .filter-input {
margin-bottom: 0 !important;
border-color: color-mix(in srgb, var(--text-primary) 16%, transparent) !important;
background: rgba(0, 0, 0, 0.28) !important;
}

#atlas-campaign-modal .filter-input:focus {
border-color: color-mix(in srgb, var(--accent-primary) 58%, transparent) !important;
background: rgba(0, 0, 0, 0.36) !important;
}

#atlas-campaign-modal .campaign-modal-box.is-readonly .filter-input[readonly],
#atlas-campaign-modal .campaign-modal-box.is-readonly select.filter-input:disabled {
opacity: 1 !important;
color: var(--text-primary) !important;
cursor: default !important;
}

#atlas-campaign-modal .campaign-modal-box.is-readonly .campaign-toggle-row,
#atlas-campaign-modal .campaign-modal-box.is-readonly .campaign-toggle-row input {
cursor: default !important;
}

.campaign-description-input {
min-height: 116px;
line-height: 1.45;
resize: vertical;
}

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

.campaign-toggle-row {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
position: relative;
min-height: 38px;
padding: 6px 2px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--text-primary);
font-size: 12px;
font-weight: 700;
cursor: pointer;
user-select: none;
transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.campaign-toggle-row:hover {
color: color-mix(in srgb, var(--accent-primary) 72%, var(--text-primary));
background: transparent;
}

.campaign-toggle-row input {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 2;
}

.campaign-toggle-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 7px;
border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent);
background: rgba(0,0,0,0.26);
color: var(--accent-primary);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.campaign-toggle-box svg {
width: 14px;
height: 14px;
opacity: 0;
transform: scale(0.72);
transition: opacity 0.14s ease, transform 0.14s ease;
}

.campaign-toggle-row input:checked + .campaign-toggle-box {
border-color: color-mix(in srgb, var(--accent-primary) 58%, transparent);
background: color-mix(in srgb, var(--accent-primary) 18%, rgba(0,0,0,0.18));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 14%, transparent), inset 0 1px 0 rgba(255,255,255,0.06);
}

.campaign-toggle-row input:checked + .campaign-toggle-box svg {
opacity: 1;
transform: scale(1);
}

/* K5 batch 2 (punkt F): komprimera kampanjmodalen på låga skärmar (Patrik kör
   1366×768) så den ryms utan intern scroll. Träffar ENDAST viewporthöjd ≤800px
   — 1920×1080 (höjd 1080) påverkas inte och behåller sin luftiga layout. */
@media (max-height: 800px) {
#atlas-campaign-modal .campaign-modal-box { max-height: 94vh !important; }
#atlas-campaign-modal .glass-modal-header { padding: 11px 20px 10px; }
#atlas-campaign-modal .campaign-modal-body { gap: 10px; padding: 12px 20px 10px; }
.campaign-description-input { min-height: 82px; }
.campaign-form-grid { gap: 10px; }
.campaign-modal-footer-info { padding: 9px 12px; line-height: 1.4; }
.campaign-toggle-row { min-height: 32px; padding: 3px 2px; }
}

#atlas-campaign-modal .atlas-filter-dd {
width: 100%;
min-height: 36px;
border-color: color-mix(in srgb, var(--text-primary) 16%, transparent);
background: rgba(0, 0, 0, 0.28);
color: var(--text-primary);
font-size: 12px;
}

#atlas-campaign-modal .atlas-filter-dd:hover,
#atlas-campaign-modal .atlas-filter-dd.open {
border-color: color-mix(in srgb, var(--accent-primary) 58%, transparent);
background: rgba(0, 0, 0, 0.36);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-panel {
border-color: color-mix(in srgb, var(--accent-primary) 32%, rgba(255,255,255,0.12));
background: color-mix(in srgb, var(--bg-frosty-content, #101827) 92%, #000 8%);
box-shadow: 0 18px 42px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.04);
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-item {
color: var(--text-primary);
}

/* SEL-standard Fas 2: kampanjmodalens dropdown enad med basreceptet. */
body:has(#atlas-campaign-modal) .atlas-filter-dd-item:not(.selected):hover {
background: var(--sel-fill-hover);
color: var(--text-primary);
}

body:has(#atlas-campaign-modal) .atlas-filter-dd-item.selected {
background: var(--sel-fill);
color: var(--sel-text);
}

#atlas-campaign-modal .glass-modal-footer {
display: flex;
align-items: stretch;
flex-direction: row;
gap: 16px;
padding: 20px 22px;
margin: 0;
border-top: 1px solid color-mix(in srgb, var(--accent-primary) 24%, rgba(255,255,255,0.08));
box-shadow: 0 -12px 28px rgba(0,0,0,0.14);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 12%, rgba(0,0,0,0.2)), rgba(0,0,0,0.12));
flex: 0 0 auto;
}

.campaign-modal-footer-info {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
max-width: none;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, rgba(255,255,255,0.08));
border-radius: 8px;
background: color-mix(in srgb, var(--accent-primary) 8%, rgba(255,255,255,0.025));
color: var(--text-secondary);
font-size: 12px;
line-height: 1.58;
}

.campaign-modal-footer-info strong {
color: color-mix(in srgb, var(--accent-primary) 86%, var(--text-primary));
font-weight: 800;
}

.campaign-footer-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
color: var(--accent-primary);
margin-top: 2px;
}

.campaign-footer-info-icon svg {
width: 16px;
height: 16px;
}

.campaign-modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex: 0 0 128px;
min-height: 42px;
}

.campaign-footer-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
min-width: 112px;
height: 38px;
padding: 0 16px;
border: 1px solid color-mix(in srgb, var(--accent-primary) 46%, rgba(255,255,255,0.12));
border-radius: 8px;
background: color-mix(in srgb, var(--accent-primary) 82%, #111);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
cursor: pointer;
transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.campaign-footer-icon-btn svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
}

.campaign-footer-icon-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 24px color-mix(in srgb, var(--accent-primary) 28%, transparent);
}

#atlas-campaign-modal .glass-modal-footer .campaign-footer-icon-btn.is-save {
color: #111;
background: color-mix(in srgb, var(--accent-primary) 72%, #fff) !important;
}

#atlas-campaign-modal .glass-modal-footer .campaign-footer-icon-btn.is-save:hover {
color: #111;
background: color-mix(in srgb, var(--accent-primary) 82%, #fff) !important;
border-color: color-mix(in srgb, var(--accent-primary) 66%, rgba(255,255,255,0.25));
}

@media (max-width: 720px) {
#view-admin .campaign-list-card {
grid-template-columns: 1fr;
}

.campaign-detail-hero {
align-items: flex-start;
flex-direction: column;
}

.campaign-detail-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.campaign-detail-list {
grid-template-columns: 1fr;
}

.campaign-detail-card {
grid-template-columns: 1fr;
}

.campaign-detail-actions {
justify-content: flex-end;
}

.campaign-list-side {
justify-content: space-between;
}

.campaign-form-grid {
grid-template-columns: 1fr;
}

#atlas-campaign-modal .glass-modal-header {
align-items: flex-start;
padding: 14px 16px 12px;
}

#atlas-campaign-modal .campaign-modal-body {
padding: 14px 16px;
}

#atlas-campaign-modal .glass-modal-footer {
padding: 16px;
gap: 12px;
flex-direction: column;
}

.campaign-modal-actions {
justify-content: stretch;
}

.campaign-footer-icon-btn {
width: 100%;
}
}

.catalog-list-copy {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.catalog-list-copy strong,
.catalog-list-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.catalog-list-copy strong {
font-size: 12px;
font-weight: 600;
}
.catalog-list-copy small,
.catalog-muted {
font-size: 10px;
opacity: 0.45;
}
.svc-type-pill {
flex-shrink: 0;
font-size: var(--text-badge-min-size);
padding: 3px 7px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
color: var(--text-secondary);
background: color-mix(in srgb, var(--bg-dark-secondary) 82%, var(--text-secondary) 6%);
font-weight: 650;
line-height: 1;
}
.svc-type-pill.is-package {
border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.svc-type-pill.svc-type-kurs {
border-color: color-mix(in srgb, #a78bfa 42%, transparent);
color: color-mix(in srgb, #a78bfa 82%, var(--text-primary));
background: color-mix(in srgb, #a78bfa 10%, transparent);
}
.svc-type-pill.svc-type-lesson {
border-color: color-mix(in srgb, #60a5fa 40%, transparent);
color: color-mix(in srgb, #60a5fa 78%, var(--text-primary));
background: color-mix(in srgb, #60a5fa 9%, transparent);
}
.svc-type-pill.svc-type-theory {
border-color: color-mix(in srgb, #f59e0b 42%, transparent);
color: color-mix(in srgb, #f59e0b 76%, var(--text-primary));
background: color-mix(in srgb, #f59e0b 9%, transparent);
}
.catalog-detail .detail-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.catalog-active-vehicles-detail .detail-body {
gap: 0;
}
.catalog-main-panel,
.catalog-description-panel,
.catalog-quick-question-panel,
.catalog-components-panel {
padding: 18px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
}
.catalog-chain-panel,
.catalog-new-service-guide {
padding: 16px 18px;
border-radius: 12px;
background: color-mix(in srgb, var(--accent-primary) 6%, rgba(255,255,255,0.025));
border-color: color-mix(in srgb, var(--accent-primary) 22%, rgba(255,255,255,0.08)) !important;
}

/* KAN-191 etapp 3: separation for adminpaneler i ljusa teman.
   #449 IRL-refix 2026-08-28 efter Patriks fynd — TVA fel rattade:

   1. TONEN. Forsta versionen anvande var(--surface-raise), som ar
      color-mix mot var(--text-primary). Den textfargen ar nastan svart
      (#0f2918 gront, #111827 blatt), sa 13 % av den over en mattad gron yta
      AVMATTAR den mot gratt i stallet for att fordjupa den. Patrik:
      "du har fargat gratt valdigt fel". Tokenen ar luminansmedveten men inte
      fargtonsmedveten. Ytan bar darfor temats EGEN accentfarg i stallet, vilket
      ger ratt kulor i alla tre ljusa teman utan att rora --surface-raise
      (etapp 1:s modallager anvander samma token och ar Patrik-godkant).

   2. SELEKTORMANGDEN. .admin-ticket-preview (matte 1.351) och
      .agent-view-permission-panel (matte 1.265) lag REDAN over 1.12-troskeln
      fore rundan och skulle aldrig ha varit med. De kom med for att de visade
      storst tapp mot morkt tema — men ett tapp ar inget fel nar det absoluta
      vardet ar bra. De ar borttagna och aterstallda till sitt tidigare utseende.

   Matt 2026-08-28 pa catalog-main-panel, barande kanal per ljust tema:
   apple-light-green 1.329 · nordic-dawn 1.317 · onyx-ultradark 1.294 (krav 1.12).
   Foregaende version lag pa 1.532-1.580, alltsa markbart starkare an bestallt. */
body.atlas-light-theme #view-admin .office-catalog-link-help,
body.atlas-light-theme #view-admin #box-prices .price-row,
body.atlas-light-theme #view-admin .catalog-main-panel,
body.atlas-light-theme #view-admin #agent-ticket-list-panel,
body.atlas-light-theme #view-admin .catalog-chain-panel,
body.atlas-light-theme #view-admin .catalog-description-panel,
body.atlas-light-theme #view-admin .catalog-quick-question-panel,
body.atlas-light-theme #view-admin .catalog-components-panel {
background: color-mix(in srgb, var(--accent-primary) 5%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
}

/* #463 (Patriks IRL 2026-08-28): "jag gillar inte se vita fyrkantiga boxar i
   fargboxarna pa denna sida ... kanns sa fyrkantig jamfort med ex ai motor-fliken".

   Matt orsak: .catalog-field ar en LAYOUT-wrapper (en <label> runt etikett + falt +
   hjalptext) och har i basen INGEN bakgrund — style-admin.css:6212 satter bara
   display:flex, riktning, gap och typografi. De tre ljusa temana buntar anda in den i
   sin INPUT-regel (t.ex. onyx-ultradark.css:2609, i samma selektorlista som
   .ki-raw-text och .ki-input-warnings) och malar en OPAK bakgrund med
   border-radius: 0 bakom hela gruppen. Resultatet ar en fyrkantig vit platta per
   faltgrupp, inuti en rundad panel.

   Matt per tema: onyx-ultradark rgb(237,243,246) opak · apple-light-green opak
   gronvit · carbon-theme (mork) REDAN transparent. Felet finns alltsa bara i de ljusa.

   Aterstaller den till det basen och de morka temana redan gor. En egen regel i
   stallet for kirurgi i fem delade selektorlistor per temafil: lagre risk, en plats. */
body.atlas-light-theme #view-admin .catalog-field {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.catalog-quick-question-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.catalog-quick-question-row .filter-input {
flex: 1 1 auto;
min-width: 0;
}
.catalog-quick-question-row .catalog-field-hint {
flex: 1 1 auto;
min-width: 0;
}
.catalog-header-help {
margin-left: auto;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.catalog-title-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
margin-left: 6px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, rgba(255,255,255,0.18));
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
color: var(--accent-primary);
font-size: 11px;
font-weight: 800;
font-style: italic;
line-height: 1;
cursor: help;
}
.catalog-chain-list {
display: grid;
gap: 8px;
}
.catalog-chain-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
}
.catalog-chain-row.is-ok {
color: color-mix(in srgb, var(--status-success, #22c55e) 72%, var(--text-primary));
border-color: color-mix(in srgb, var(--status-success, #22c55e) 30%, rgba(255,255,255,0.08));
background: color-mix(in srgb, var(--status-success, #22c55e) 8%, rgba(255,255,255,0.025));
}
.catalog-chain-row.is-warning {
color: color-mix(in srgb, var(--status-warning, #f59e0b) 78%, var(--text-primary));
border-color: color-mix(in srgb, var(--status-warning, #f59e0b) 34%, rgba(255,255,255,0.08));
background: color-mix(in srgb, var(--status-warning, #f59e0b) 9%, rgba(255,255,255,0.025));
}
.catalog-chain-row.is-muted {
opacity: 0.72;
}
.catalog-chain-icon {
width: 18px;
min-width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
background: rgba(255,255,255,0.08);
}
.catalog-new-service-guide ol {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
list-style: none;
counter-reset: catalog-guide-step;
margin: 0;
padding: 0;
}
.catalog-new-service-guide li {
counter-increment: catalog-guide-step;
min-width: 0;
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
}
/* Ljusa desktop-teman: samma inneslutning som Capacitor-regeln i mobile.css —
   den vit-transparenta basen är osynlig mot ljusa panelbakgrunder. */
body.atlas-light-theme #view-admin .catalog-new-service-guide li {
  background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 80%);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, rgba(0, 0, 0, 0.13));
}
.catalog-new-service-guide li::before {
content: counter(catalog-guide-step);
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 6px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
color: var(--accent-primary);
font-size: 10px;
font-weight: 800;
}
.catalog-new-service-guide strong {
display: inline;
font-size: 11px;
color: var(--text-primary);
}
.catalog-new-service-guide span {
display: block;
margin-top: 5px;
}
/* 🔴 #510 rev 2 (Patriks IRL 2026-09-02): rubriken hade 0px ovanför och 14px under.
   Närhetsprincipen band den därför till KORTEN OVANFÖR i stället för till den
   sektion den inleder — "Kopplingen till Kunskapsbanken och AI" såg ut att höra
   till de tre korten före den. Avståndet är vänt: tydlig luft ovanför, tätare under.
   `:first-child` nollar toppen så en rubrik som inleder sin behållare inte får en
   tom rad över sig. */
.catalog-section-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-top: 30px;
margin-bottom: 10px;
}
.catalog-section-heading:first-child {
margin-top: 0;
}
.catalog-section-heading h4 {
margin: 0 0 4px;
font-size: 11px;
text-transform: uppercase;
color: var(--accent-primary);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.catalog-section-heading p {
margin: 0;
font-size: 11px;
line-height: 1.5;
opacity: 0.5;
max-width: 620px;
}
.catalog-edit-only {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.catalog-field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

/* 🔴 #315 `P-2` (Patriks IRL-fynd): med UDDA antal fält blev det sista ensamt i
   vänsterkolumnen med tom högerkolumn ⇒ raggad högerkant. Mätt på sandbox: rutnätet är
   `485px 485px`, och fältantalet varierar med tjänstetypen (`Lektionslängd` renderas bara
   för lektioner), så pariteten kan inte antas — den måste hanteras.
   Ett ensamt sistafält spänner därför över båda kolumnerna. Självjusterande: ingen
   markupändring, och rätt oavsett hur många fält typen råkar ha.
   🔵 I mobilens enkolumnsläge (`:6775`) är `1 / -1` redan hela bredden ⇒ ingen effekt där. */
.catalog-field-grid > *:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.catalog-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-secondary);
}
.catalog-field small {
font-size: var(--text-badge-min-size);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
opacity: 0.55;
}
.catalog-description-input {
min-height: 88px;
line-height: 1.45;
resize: vertical;
}
.catalog-keywords-block {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 14px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
color: var(--text-secondary);
}
.catalog-keywords-block .admin-kb-keywords {
margin-top: 0 !important;
}
.catalog-kw-label-row {
display: flex;
align-items: center;
gap: 8px;
}
.catalog-keywords-block > .ai-source-chip,
.catalog-kw-label-row > .ai-source-chip {
margin-left: 0;
}
.catalog-kw-unlock-btn {
font-size: 10px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
padding: 2px 7px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
background: rgba(255,255,255,0.04);
color: var(--text-secondary);
cursor: pointer;
}
.catalog-field-hint {
font-size: 10px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--text-secondary);
opacity: 0.6;
margin: 2px 0 4px;
}
.catalog-package-toggle {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 12px;
cursor: pointer;
}
.catalog-component-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 72px 28px;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.catalog-remove-component {
width: 26px;
height: 26px;
border: 1px solid rgba(255,69,58,0.3);
border-radius: 50%;
background: rgba(255,69,58,0.12);
color: #ff453a;
cursor: pointer;
}
.catalog-empty-components {
padding: 16px;
border: 1px dashed rgba(255,255,255,0.1);
border-radius: 8px;
font-size: 11px;
text-align: center;
opacity: 0.45;
}
.catalog-heading-actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.catalog-form-actions {
display: flex;
align-items: center;
gap: 4px;
}
.catalog-form-actions[hidden],
.catalog-edit-only[hidden],
.catalog-remove-component[hidden],
#catalog-unlock-btn[hidden],
#catalog-kw-unlock-btn[hidden] {
display: none !important;
}
/* #78 yta 4: katalogformulärets åtgärder följer det delade 32px-kontraktet.
   Scoped till catalog-form-actions — rör inte btn-glass-icon på andra ytor. */
.catalog-form-actions .btn-glass-icon {
width: 32px !important;
height: 32px !important;
border: none !important;
}
/* Lås save-/cancel-glyfen till 16px överallt så framtida ikonbyten inte driftar. */
.admin-save-icon-btn svg,
.catalog-form-actions .btn-glass-icon svg {
width: 16px;
height: 16px;
}

/* #78 yta 4: samma ikonknappskontrakt för katalogens lås och
   kategoribyggarens rubrikåtgärder.
   2026-08-05 (listnivån, F4): `.category-builder-heading-actions`,
   `.category-builder-group-tools` och `.category-builder-children-label`
   tillagda i SAMMA selektorgrupper i stället för
   en egen CSS-familj. Kontrollerna där (`Ny kategori`, `Ny tjänst i <namn>`,
   `Ändra kategoriordning`) låg tidigare på 27-28 px med hårdkodad
   rgba(73,150,255,...) i ett inline-<style> i admin-category-builder.js — en blå
   accent som ignorerade temavariablerna i alla tio teman. */
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
padding: 0;
border: none !important;
border-radius: 8px;
background: transparent !important;
box-shadow: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transform: none !important;
cursor: pointer;
transition: background 0.2s, color 0.2s, opacity 0.2s;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn svg {
width: 16px;
height: 16px;
}
/* #78 F1 (Claude-verifiering 2026-08-05): rollfärgerna MÅSTE vara !important här.
   Knapparna bär även .btn-glass-icon, och ALLA tio temafiler deklarerar
   `.btn-glass-icon { color: … !important }` (apple-light-green.css:1642-1656 m.fl.).
   Utan !important vann temat och avbryt/ta bort/spara renderade identisk färg i
   alla tre teman — mätt live 2026-08-05. Temafilerna delas med de LÅSTA Box1-3,
   så de får inte scopas om; därför kontras temats !important här i stället.
   Se atlas_dev_log.md 2026-08-05 för den öppet loggade mönsteravvikelsen. */
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-lock-icon-btn {
color: var(--text-secondary) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn {
color: var(--status-danger, #ef4444) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn {
color: var(--status-success, #22c55e) !important;
}
/* Ljusa teman (apple-light-green OCH onyx-ultradark bär båda .atlas-light-theme):
   temavariablernas #ff4444 / #00C851 är för lätta mot ljus panelbakgrund — mätt
   1,89-3,08 innan denna override. Samma mörkare toner som .admin-config-row-ytorna
   redan använder, så hela adminen håller ihop. */
body.atlas-light-theme #view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn,
body.atlas-light-theme #view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn {
color: #b91c1c !important;
}
body.atlas-light-theme #view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn {
color: #166534 !important;
}
/* Hover/fokus-återkoppling som på .admin-config-row-ytorna. Utan detta blir
   knapparna helt stumma, eftersom .btn-glass-icon:hover tvingar transparent
   bakgrund och vi låser färgen ovan. Bakgrund bär återkopplingen — färgen står
   still, vilket också håller kontrasten stabil (#114-lärdomen). */
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-lock-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-lock-icon-btn:focus-visible {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-cancel-icon-btn:focus-visible,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-delete-icon-btn:focus-visible {
background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, transparent) !important;
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn:hover,
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-save-icon-btn:focus-visible {
background: color-mix(in srgb, var(--status-success, #22c55e) 12%, transparent) !important;
}
/* Listnivåns neutrala kontroller (Ny kategori, Ny tjänst i <namn>, Ändra
   kategoriordning) har ingen rollklass, så ingen av rollreglerna ovan träffar
   dem. De får samma accentåterkoppling som lås/redigera. `!important` krävs
   eftersom basregeln i samma grupp sätter `background: transparent !important`. */
#view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:hover,
#view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:focus-visible {
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 12%, transparent) !important;
}
/* Ljusa teman: `apple-light-green` OCH `onyx-ultradark` bär båda
   `body.atlas-light-theme` — mätt på `document.body.className` 2026-08-05, inte
   antaget. Deras `--accent-primary` är för ljus mot listytans bakgrund: plusset
   mätte 2,02-3,29:1 (WCAG 1.4.11 kräver 3,0:1 för ikoner). Det gick att leva med
   som ett fetstilt 19px-texttecken, men glyfen är nu en 16px SVG med 2px stroke,
   så samma ratio blir märkbart svagare. Tonen HÄRLEDS ur temavariabeln i stället
   för att hårdkodas, så temana fortsätter styra. Vilotonen gäller bara
   skapa-knapparna; sorteringsknappen ska stå kvar på --text-secondary. */
body.atlas-light-theme #view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) :is(.category-builder-add, .category-builder-group-add),
body.atlas-light-theme #view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:hover,
body.atlas-light-theme #view-admin :is(.category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:focus-visible {
color: color-mix(in srgb, var(--accent-primary) 60%, #000);
}
#view-admin :is(.catalog-active-vehicles-actions, .catalog-heading-actions, .category-builder-edit-heading, .category-builder-heading-actions, .category-builder-group-tools, .category-builder-children-label) .admin-config-icon-btn:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
.catalog-kb-save-btn {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, color 0.2s;
}
.catalog-kb-save-btn.is-dirty {
opacity: 1;
pointer-events: auto;
color: #4cd964 !important;
animation: kb-save-pulse 1.8s ease-in-out infinite;
}
@keyframes kb-save-pulse {
0%, 100% { filter: drop-shadow(0 0 3px rgba(76,217,100,0.5)); }
50%       { filter: drop-shadow(0 0 7px rgba(76,217,100,0.9)); }
}
/* #78 F1: .catalog-cancel-btn hade `color: rgba(255,255,255,0.38) !important` —
   vit 38 % är nära osynlig i de ljusa temana (samma mönsterfel som
   .kb-save-icon-btn). Färgen ägs nu av ikonkontraktet ovan; endast layout
   blir kvar här. .catalog-delete-btn tappar likaså sin hårdkodade #ff453a
   till förmån för var(--status-danger), så temana kan styra tonen. */
.catalog-delete-btn {
margin-left: 4px;
}
.catalog-delete-btn svg {
fill: currentColor !important;
stroke: none !important;
}
.catalog-kb-jump-btn {
background: none;
border: none;
cursor: pointer;
font-size: 13px;
opacity: 0.55;
padding: 0 4px;
vertical-align: middle;
}
.catalog-kb-jump-btn:hover {
opacity: 1;
}
.kb-service-count-badge {
font-size: var(--text-badge-min-size);
background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-secondary));
border-radius: 4px;
padding: 1px 5px;
margin-left: auto;
color: color-mix(in srgb, var(--accent-primary) 58%, var(--text-primary));
vertical-align: middle;
white-space: nowrap;
flex-shrink: 0;
}
.kb-linked-services-panel {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
padding: 8px 14px;
margin: 0 0 12px;
background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-dark-secondary) 90%);
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
border-radius: 8px;
font-size: 11px;
color: var(--text-primary);
line-height: 1.45;
max-height: min(280px, 32dvh);
overflow-y: auto;
}
.kb-linked-services-label {
font-weight: 600;
margin-right: 4px;
color: var(--text-primary);
}
.kb-linked-services-panel span:not(.kb-linked-services-label) {
background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-dark-secondary) 88%);
border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, transparent);
border-radius: 4px;
padding: 2px 7px;
color: var(--text-primary);
max-width: 100%;
overflow-wrap: anywhere;
}
.catalog-kb-section-panel {
margin-top: 12px;
padding: 18px;
border-radius: 12px;
background: rgba(255,255,255,0.025);
}
.catalog-kb-answer {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 90px;
}
.catalog-kb-section-meta,
#catalog-kb-section-status {
font-size: 10px;
opacity: 0.5;
}
.catalog-kb-section-actions {
margin-top: 8px;
display: flex;
gap: 8px;
align-items: center;
}
.catalog-kb-section-error {
color: #ff6b6b;
font-size: 10px;
}
.catalog-list-section-label {
margin: 14px 4px 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-primary);
opacity: 0.85;
}
.catalog-list-section-label--clickable {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, opacity 0.15s;
}
.catalog-list-section-label--clickable:hover {
background: var(--sel-fill-hover);
opacity: 1;
}
/* SEL-standard Fas 2: egen 16 %-platta ersatt av den delade --sel-fill (14 %)
   + golvad --sel-text, så katalogetiketten markeras exakt som flik/meny/subnav.
   Ingen kant här: elementet har ingen border i viloläge och en tillagd 2px-kant
   skulle flytta innehållet (layoutändring är utanför scope). */
.catalog-list-section-label--clickable.active {
background: var(--sel-fill);
color: var(--sel-text);
opacity: 1;
}
.catalog-guide-label-hint {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--text-badge-min-size);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
opacity: 0.55;
}
.catalog-guide-label-arrow {
transition: transform 0.15s;
}
.catalog-list-section-label--clickable:hover .catalog-guide-label-arrow {
transform: translateX(2px);
}
.catalog-kb-link-block {
margin-bottom: 12px;
padding: 10px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
}
.catalog-kb-link-label {
margin: 0 0 8px;
font-size: 11px;
line-height: 1.45;
color: var(--text-secondary);
}
.catalog-kb-link-row {
display: flex;
gap: 8px;
align-items: center;
}
.catalog-kb-link-row select {
flex: 1;
min-width: 0;
}
.catalog-kb-link-row option:disabled {
opacity: 0.45;
}
.catalog-kb-locked-note {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
border-radius: 8px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.075);
}
.catalog-kb-locked-icon {
font-size: 16px;
line-height: 1;
}
.catalog-kb-locked-copy {
flex: 1;
min-width: 0;
}
.catalog-kb-locked-copy strong {
display: block;
font-size: 11px;
color: var(--text-primary);
margin-bottom: 4px;
}
.catalog-kb-locked-copy p {
margin: 0;
font-size: 11px;
line-height: 1.5;
color: var(--text-secondary);
}
.catalog-kb-lock-row {
margin-top: 10px;
}
.catalog-kb-lock-link {
background: none;
border: none;
padding: 0;
font-size: 10px;
color: var(--text-secondary);
opacity: 0.65;
cursor: pointer;
text-align: left;
}
.catalog-kb-lock-link:hover {
opacity: 1;
text-decoration: underline;
}
@media (max-width: 768px) {
.ai-chip,
.ai-source-chip {
font-size: var(--text-badge-min-size);
}

.catalog-kb-link-row {
flex-direction: column;
align-items: stretch;
}
.catalog-kb-locked-note {
flex-direction: column;
}
}
.drift-vehicle-coverage-card {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.vehicle-coverage-details {
min-height: 42px;
font-size: var(--text-badge-min-size);
line-height: 1.35;
color: var(--text-secondary);
}
.vehicle-coverage-facts {
display: flex;
flex-direction: column;
gap: 2px;
}
.vehicle-publish-status {
font-weight: 700;
}
.vehicle-publish-status.is-active {
color: #4cd964;
}
.vehicle-publish-status.is-inactive,
.vehicle-coverage-muted {
opacity: 0.5;
}
.vehicle-coverage-warning {
margin-top: 4px;
padding: 4px 6px;
border: 1px solid var(--warning-border);
border-radius: 5px;
background: var(--warning-bg);
color: var(--warning-text);
}
.drift-active-vehicles-summary {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 18px;
}
.drift-vehicle-pill {
display: inline-flex;
align-items: center;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.3);
background: transparent;
font-weight: 400;
transition: all 0.15s;
}
.drift-vehicle-pill.is-active {
border-color: rgba(76,217,100,0.55);
color: #4cd964;
background: rgba(76,217,100,0.10);
font-weight: 600;
}
.drift-vehicle-pill:not(.is-active) {
border-color: rgba(239,68,68,0.22);
color: color-mix(in srgb, var(--status-danger, #ef4444) 62%, var(--text-secondary, #fff));
background: rgba(239,68,68,0.055);
opacity: 1;
}
.office-catalog-link-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 5px;
border-radius: 5px;
border: 1px solid color-mix(in srgb, var(--status-success, #22c55e) 42%, transparent);
background: color-mix(in srgb, var(--status-success, #22c55e) 10%, transparent);
color: var(--status-success, #22c55e);
font-size: 10px;
font-weight: 800;
vertical-align: middle;
cursor: help;
}
.office-catalog-link-help {
margin-top: 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.075);
font-size: 10px;
line-height: 1.45;
color: var(--text-secondary);
}
.office-catalog-link-help span {
color: var(--status-success, #22c55e);
font-weight: 800;
}

/* Admin office price list: compact, quiet price controls on all shells. */
#box-prices .price-row {
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.075) !important;
box-shadow: none !important;
}
#view-admin .category-builder-group.is-inactive > .category-builder-card,
#box-prices .price-row.is-vehicle-inactive {
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, rgba(255,255,255,0.035)) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 30%, rgba(255,255,255,0.075)) !important;
}
#view-admin .category-builder-group.is-inactive > .category-builder-card {
opacity: 0.82;
}
/* Patriks begäran 2026-09-16: en inset box-shadow-"kant" på prisraden är redan
   reserverad för data-row-kind="info" (rad nedan) — inaktiv-fordonstyp fick av misstag
   samma signal, vilket blandade två olika betydelser. Inaktiv-fordonstyp ska bara vara en
   röd fade över hela raden, ingen kant. */
body.atlas-light-theme #view-admin #box-prices .price-row.is-vehicle-inactive {
/* Mätt 2026-09-16: body.atlas-light-theme #view-admin #box-prices .price-row (rad ~6583)
   har högre specificitet (två id:n) än #box-prices .price-row.is-vehicle-inactive och
   vann alltid i de tre ljusa temana — röd fade syntes aldrig, bara den nu borttagna kanten.
   Denna regel matchar samma id-antal och lägger till en tredje klass för att vinna. */
background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 30%, transparent) !important;
}
#box-prices .price-inp {
width: 74px !important;
min-width: 68px !important;
height: 28px !important;
padding: 2px 10px !important;
border-radius: 999px !important;
border: 1px solid rgba(255,255,255,0.14) !important;
background: rgba(255,255,255,0.045) !important;
color: var(--text-primary) !important;
font-size: 12px !important;
font-weight: 700 !important;
box-shadow: none !important;
}
#box-prices .price-inp:not(:disabled) {
border-color: color-mix(in srgb, var(--status-success, #22c55e) 34%, rgba(255,255,255,0.14)) !important;
background: color-mix(in srgb, var(--status-success, #22c55e) 8%, rgba(255,255,255,0.045)) !important;
}
#view-admin #box-prices .price-row[data-row-kind="info"] {
box-shadow: inset 3px 0 0 var(--office-row-kind-accent, var(--accent-primary)) !important;
}
#box-prices .office-row-kind-fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
max-width: 100%;
}
#box-prices .office-row-kind-fieldset legend {
display: flex;
align-items: center;
margin: 0 0 5px;
padding: 0;
font-size: var(--text-micro-size);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
#box-prices .office-row-kind-help {
margin-left: 6px;
}
#box-prices .office-row-kind-picker {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 3px;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 9px;
background: rgba(0,0,0,0.16);
}
#box-prices .office-row-kind-option {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
white-space: nowrap;
transition: background .15s, color .15s, box-shadow .15s;
}
#box-prices .office-row-kind-option.is-disabled {
cursor: default;
}
#box-prices .office-row-kind-option svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
#box-prices .office-row-kind-radio {
margin: 0;
accent-color: var(--office-row-kind-accent, var(--accent-primary));
}
#box-prices .office-row-kind-option:focus-within {
outline: 2px solid var(--office-row-kind-accent, var(--accent-primary));
outline-offset: 2px;
}
#office-package-actions {
max-width: 100%;
}
@media (max-width: 560px) {
/* Håll rubriken "Tjänster & Priser" och Lås upp-knappen på SAMMA rad i låst läge.
   Tidigare tvingade flex-direction:column ner Lås upp på en egen andra rad.
   I redigeringsläge wrappar fordons-/paketknapparna till egen rad under rubriken. */
#box-prices > div:first-child {
align-items: center !important;
gap: 8px 10px !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
#box-prices > div:first-child > div {
justify-content: flex-end !important;
}
#office-package-actions {
width: 100% !important;
justify-content: flex-end !important;
}
#price-list-grid .price-row > div:first-child {
align-items: flex-start !important;
gap: 8px !important;
}
#price-list-grid .price-row > div:first-child > span:first-child {
max-width: 100% !important;
white-space: normal !important;
}
.office-catalog-link-help {
font-size: var(--text-badge-min-size);
}
}

/* Office services: clearer local-info and delete controls. */
#box-booking .office-booking-row {
gap: 7px !important;
}
#box-booking .office-booking-row > span:first-child {
width: 38px !important;
}
#box-booking .office-booking-row > input {
min-width: 0 !important;
}
#box-prices .office-service-note-btn {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
margin-left: 0 !important;
align-self: center !important;
cursor: pointer !important;
font-size: var(--text-badge-min-size) !important;
transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s !important;
}
#box-prices .office-service-note-btn.has-note {
color: #fff !important;
border-color: var(--accent-primary) !important;
background: var(--accent-primary) !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent-primary) 24%, transparent),
0 0 12px color-mix(in srgb, var(--accent-primary) 58%, transparent) !important;
opacity: 1 !important;
text-shadow: 0 1px 1px color-mix(in srgb, #000 35%, transparent) !important;
}
#box-prices .office-service-note-btn.has-note:hover {
border-color: color-mix(in srgb, var(--accent-primary) 74%, #fff 26%) !important;
background: color-mix(in srgb, var(--accent-primary) 88%, #fff 12%) !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent-primary) 30%, transparent),
0 0 15px color-mix(in srgb, var(--accent-primary) 68%, transparent) !important;
}
#box-prices .office-service-note-editor {
width: 100% !important;
box-sizing: border-box !important;
margin-top: 8px !important;
padding: 10px !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
display: grid !important;
gap: 8px !important;
animation: officeServiceNoteIn 120ms ease-out both;
}
@keyframes officeServiceNoteIn {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
#box-prices .office-service-note-head,
#box-prices .office-service-note-foot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
#box-prices .office-service-note-head {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--text-secondary) !important;
}
#box-prices .office-service-note-textarea {
width: 100% !important;
min-height: 70px !important;
box-sizing: border-box !important;
resize: vertical !important;
font-size: 12px !important;
line-height: 1.45 !important;
border-radius: 9px !important;
border: 1px solid rgba(255,255,255,0.12) !important;
background: rgba(255,255,255,0.06) !important;
color: var(--text-primary) !important;
padding: 9px 10px !important;
}
body.atlas-light-theme #box-prices .office-service-note-editor {
background: color-mix(in srgb, var(--bg-color) 90%, var(--accent-primary) 5%) !important;
border-color: color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 24%) !important;
}
body.atlas-light-theme #box-prices .office-service-note-textarea {
background: color-mix(in srgb, var(--bg-color) 94%, #ffffff 6%) !important;
border-color: color-mix(in srgb, var(--border-color) 68%, var(--accent-primary) 26%) !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent) !important;
}
body.atlas-light-theme #box-prices .office-service-note-textarea:focus {
border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-color) 28%) !important;
outline: 2px solid color-mix(in srgb, var(--accent-primary) 28%, transparent) !important;
outline-offset: 1px !important;
}
#box-prices .office-service-note-textarea:disabled,
#box-prices .office-price-booking-url:disabled {
opacity: 1 !important;
cursor: not-allowed !important;
border-color: color-mix(in srgb, var(--text-secondary) 42%, rgba(255,255,255,0.16)) !important;
background: color-mix(in srgb, var(--bg-dark-secondary, #202632) 90%, #ffffff 5%) !important;
color: color-mix(in srgb, var(--text-primary) 74%, var(--text-secondary) 26%) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent) !important;
}
body.atlas-light-theme #box-prices .office-service-note-textarea:disabled,
body.atlas-light-theme #box-prices .office-price-booking-url:disabled {
border-color: color-mix(in srgb, var(--border-color) 70%, var(--text-secondary) 30%) !important;
background: color-mix(in srgb, var(--bg-color) 82%, var(--text-secondary) 10%) !important;
color: color-mix(in srgb, var(--text-primary) 84%, var(--text-secondary) 16%) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 76%, transparent) !important;
}
#box-prices .office-service-note-count,
#box-prices .office-service-note-save-hint {
font-size: 10px !important;
color: var(--text-secondary) !important;
opacity: 0.62 !important;
}
#box-prices .office-custom-service-toggle {
position: relative !important;
width: 32px !important;
height: 28px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
color: #4cd964 !important;
}
#box-prices .price-delete-btn {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
border-radius: 8px !important;
font-size: 0 !important;
}
#box-prices .price-delete-btn svg {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
stroke: none !important;
}
/* #78: knappen är ramfri sedan 2026-08-05 — border-color här var död kod utan
   border-style. Hovertonen följer samma 12 %-konvention som de konverterade
   admin-ikonknapparna. */
#box-prices .price-delete-btn:hover,
#box-prices .price-delete-btn:focus-visible {
background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, transparent) !important;
}
/* #78 kontrast: den röda standardfärgen mäter 2,88:1 mot ljusa temapaneler
   (apple-light-green, onyx-ultradark). Samma mörkare röd som de övriga
   admin-ikonknapparna redan använder i ljust tema. */
body.atlas-light-theme #box-prices .price-delete-btn {
color: #b91c1c !important;
}
@media (max-width: 900px) {
.catalog-field-grid {
grid-template-columns: 1fr;
}
.catalog-new-service-guide ol {
grid-template-columns: 1fr;
}
.catalog-section-heading {
flex-direction: column;
}
.catalog-active-vehicles-heading {
flex-direction: column;
}
.catalog-guide-grid {
grid-template-columns: 1fr;
}
.catalog-vehicle-heading-main {
gap: 5px;
}
}

/* Admin office top panels keep their own bounded lists so many tickets/agents
   do not stretch the whole office detail page. */
/* #78 etablerade golvet: 220px behövs för att kontorets ärende- och agentpaneler
   ska bära rubrik/padding utan att spränga sin ram.
   🔴 RÖR INTE TAKET UTAN ATT LÄSA DETTA. #460 tog först bort taket helt, så att
   panelerna fyllde hela detaljkortet. Patriks IRL 2026-08-30 (60 % och 90 % zoom):
   *"Varför är dessa boxar så stora nu?"* — mätt bar de 73px innehåll i en 985px
   hög ruta vid 60 % zoom, alltså över 900px tomrum. Taket är återställt.
   Kontorsvyn skiljer sig från Personal: här ÄR topp-raden ofta glest fylld
   (tom kö, en enskild agent), och då ska rutan vara liten. I Personal är
   ärendepanelen sista sektionen och SKA fylla ut — den behåller därför
   fyllnadsmodellen nedan. Samma regel för båda gav fel resultat i en av dem. */
#admin-detail-content #box-tickets,
#admin-detail-content #box-agents {
max-height: min(360px, 46vh) !important;
overflow: hidden !important;
min-height: 220px !important;
}

#admin-detail-content #box-tickets .scroll-list,
#admin-detail-content #box-agents .scroll-list {
overflow-y: auto !important;
min-height: 0 !important;
flex: 1 1 auto !important;
/* #78 F5: scoped exception from style-tickets.css master contain so kontorsboxen
   can pass wheel/touch gestures to #office-detail-body when its own list ends. */
overscroll-behavior: auto !important;
}

/* #460 / KAN-214: desktop-webb/Electron använder samma fyllnadsmodell för de tre
   adminpanelerna som annars fick växande tomrum vid zoom-ut. Mobil har egna
   body.capacitor-client-regler i mobile.css och ska inte ärva denna höjdmodell. */
body:not(.capacitor-client) #admin-detail-content .admin-zoom-fill-section {
flex: 1 0 auto !important;
display: flex !important;
flex-direction: column !important;
min-height: 220px !important;
}

body:not(.capacitor-client) #admin-detail-content .admin-zoom-fill-panel {
flex: 1 1 220px !important;
min-height: 220px !important;
max-height: none !important;
overflow: hidden !important;
}

/* 🔴 Kontorsvyns topp-rad ska INTE tvingas fylla kortet (se takkommentaren ovan).
   `align-items: stretch` behålls så de två boxarna följer varandra — det är #78:s
   uttryckliga krav från Patrik: *"så att det inte blir en sådan osymmetrisk kant
   till nästa box"*. `auto` i stället för `1fr` gör att raden växer med innehållet
   upp till taket, i stället för att sträckas ut av kortets höjd. */
body:not(.capacitor-client) #office-detail-body #office-top-grid.admin-zoom-fill-grid {
flex: 0 0 auto !important;
min-height: 220px !important;
align-items: stretch !important;
grid-auto-rows: minmax(220px, auto) !important;
}

body:not(.capacitor-client) #admin-detail-content .admin-zoom-fill-panel > .scroll-list {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
}

input[type="color"] {
cursor: pointer !important;
}