/* KAN-425: one policy tone for office rows and shared unit pills. AT-160: one frameless red trash (.atlas-trash-btn) and one add button with the house's green plus badge. */
:root { --atlas-policy-tone: var(--accent-secondary, var(--accent-primary)); }
.atlas-unit-pills { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.atlas-unit-pills .agent-view-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; border:1px solid var(--pill-state-idle-border); background:var(--pill-state-idle-bg) !important; color:var(--pill-state-idle-text); text-decoration:none; font:inherit; font-size:12px; min-height:30px; }
.atlas-unit-pills .agent-view-pill.is-selected { border-color:var(--pill-state-active-border); background:var(--pill-state-active-bg) !important; color:var(--pill-state-active-text); }
.atlas-unit-pill svg,.of-policy-icon svg { width:16px; height:16px; flex-shrink:0; color:color-mix(in srgb,var(--atlas-policy-tone) 50%,var(--text-primary)); }
.atlas-unit-pill.is-empty { background:color-mix(in srgb,var(--text-primary) 2%,transparent) !important; border-style:dashed; }
.atlas-unit-pill:focus-visible,.cf-variation button:focus-visible { outline:2px solid var(--accent-primary); outline-offset:3px; }
.atlas-unit-target { outline:2px solid var(--accent-primary); outline-offset:3px; }
#box-prices [data-office-facts] { display:grid; gap:8px; margin-top:8px; }
.office-fact-row { display:flex; flex-direction:column; gap:6px; min-width:0; padding:10px; border-radius:8px; background:color-mix(in srgb,var(--atlas-policy-tone) 18%,var(--bg-dark-secondary)); color:var(--text-primary); }
.office-fact-row:not(.is-editing) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(80px, .55fr); align-items:center; min-height:var(--of-price-row-height,64px); box-sizing:border-box; }
.office-fact-row:not(.is-editing) .of-row-heading { min-width:0; }
.office-fact-row:not(.is-editing) .of-row-heading strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.office-fact-row:not(.is-editing) .of-value { min-width:0; text-align:right; }
.of-value summary { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; border-radius:4px; }
.of-value summary:focus-visible { outline:2px solid var(--accent-primary); outline-offset:3px; }
.office-fact-row:has(.of-value[open]) { align-items:start; }
.office-fact-row .of-value[open] { grid-column:1 / -1; text-align:left; }
.of-full-value { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; line-height:1.5; }
@media (max-width:768px) { #box-prices [data-office-facts] { margin-left:-11px; margin-right:-11px; } }
.office-fact-row .of-help,.office-fact-row .of-status { grid-column:1 / -1; }
.of-row-heading { display:flex; align-items:center; gap:8px; min-height:28px; font-size:13px; }
.of-row-heading strong { font-weight:500; overflow-wrap:anywhere; }
.of-row-heading .of-delete { margin-left:auto; }
#office-package-actions .of-policy-icon { width:32px; height:32px; padding:0; }
#box-prices .of-delete, #view-admin .atlas-trash-btn { display:flex; align-items:center; justify-content:center; width:24px !important; height:24px !important; min-width:24px !important; padding:0; line-height:1; border:0 !important; border-radius:8px !important; background:transparent !important; box-shadow:none !important; font-size:0 !important; color:var(--status-danger,#ef4444); cursor:pointer; }
#box-prices .of-delete svg, #view-admin .atlas-trash-btn svg { width:14px !important; height:14px !important; fill:currentColor !important; stroke:none !important; }
#box-prices .of-delete:hover,#box-prices .of-delete:focus-visible,#view-admin .atlas-trash-btn:hover,#view-admin .atlas-trash-btn:focus-visible { background:color-mix(in srgb,var(--status-danger,#ef4444) 12%,transparent) !important; }
body.atlas-light-theme #box-prices .of-delete, body.atlas-light-theme #view-admin .atlas-trash-btn { color:#b91c1c !important; }
/* Match mobile-ticket-reader's price trash override without its price selector. */
@media (max-width:768px) { :root body #box-prices .of-delete, :root body #view-admin .atlas-trash-btn { color:#ff453a !important; } }
.of-value { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.of-help,.of-status { font-size:12px; color:var(--text-secondary); margin:0; line-height:1.5; }
.of-status[data-status="conflict"],.of-status[data-status="invalid"],.of-status[data-status="error"] { color:var(--status-warning); }
.of-source { display:grid; gap:4px; font-size:12px; color:var(--text-secondary); }
.fact-source label { display:grid; gap:4px; }
#view-admin .fact-source select, #view-admin #cf-surface .fact-source select { appearance:none !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:10px 7px !important; padding-right:30px !important; }
.office-fact-row .filter-input,.of-picker .filter-input { width:100%; min-width:0; box-sizing:border-box; font:inherit; font-size:13px; }
.office-fact-row textarea { resize:vertical; min-height:28px; }
.of-picker { display:grid; gap:8px; padding:12px; border:1px solid var(--border-color); border-radius:8px; }
.of-picker label { display:grid; gap:5px; color:var(--text-secondary); font-size:12px; }
.of-picker-actions,.of-choices { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.of-terms { display:grid; gap:8px; }
.of-terms > div { display:grid; gap:5px; }
.of-catalog-icon { width:16px; height:16px; display:inline-flex; align-items:center; margin-right:6px; vertical-align:middle; }
.of-catalog-icon svg { width:16px; height:16px; }
.cf-variation { margin:8px 0; }
.cf-variation-units { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.atlas-unit-tooltip { position:fixed; z-index:99999; max-width:min(300px,calc(100vw - 20px)); box-sizing:border-box; padding:9px 13px; border:1px solid color-mix(in srgb,var(--accent-primary) 30%,transparent); border-radius:12px; background:var(--bg-dark-secondary); color:var(--text-primary); font-size:11.5px; line-height:1.58; white-space:pre-line; box-shadow:0 8px 24px color-mix(in srgb,#000 35%,transparent); /* AT-177: samma ruta som #atlas-sh-tooltip */ pointer-events:none; }
#view-admin .atlas-add-btn { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:4px 8px 4px 4px; border:0 !important; border-radius:8px; background:transparent !important; box-shadow:none !important; color:var(--text-secondary); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
#view-admin .atlas-add-btn:hover,#view-admin .atlas-add-btn:focus-visible { background:color-mix(in srgb,var(--accent-primary) 12%,transparent) !important; color:var(--text-primary); }
.atlas-add-icon { position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; }
.atlas-add-icon svg { width:16px; height:16px; color:color-mix(in srgb,var(--atlas-policy-tone) 50%,var(--text-primary)); }
.atlas-add-plus { position:absolute; top:-4px; right:-6px; width:12px; height:12px; border-radius:50%; background:rgba(76,217,100,0.15); border:1px solid rgba(76,217,100,0.45); font-size:var(--text-badge-min-size); font-weight:800; display:flex; align-items:center; justify-content:center; color:#4cd964; line-height:1; }
.atlas-add-plus::after { content:'+'; }
/* AT-162: the unit after an office number field looks like the price rows' SEK. */
.office-fact-row .cf-num { display:flex; align-items:center; gap:8px; }
.office-fact-row .cf-num small.cf-unit { font-size:11px; color:var(--text-primary); }
/* AT-162: the saved value is a rounded box and every value starts at the same place. Light themes keep their details colour. */
.office-fact-row:not(.is-editing):has(> .of-value) { cursor:pointer; }
.office-fact-row:not(.is-editing) .of-value { box-sizing:border-box; padding:6px 10px; border-radius:8px; background:color-mix(in srgb,var(--text-primary) 6%,transparent); text-align:left; }
.office-fact-row .cf-num > input[type=number] { width:64px; flex:none; text-align:right; font-variant-numeric:tabular-nums; }
/* AT-162: unlocked rows fold to title + value; a click on the heading opens the row for editing. */
.office-fact-row.is-editing .of-row-heading { cursor:pointer; }
.office-fact-row.is-folded > :not(.of-row-heading) { display:none; }
.office-fact-row.is-folded .of-folded-value { margin-left:auto; min-width:0; max-width:45%; padding:6px 10px; border-radius:8px; background:color-mix(in srgb,var(--text-primary) 6%,transparent); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.office-fact-row.is-folded .of-row-heading .of-delete { margin-left:0; }
/* AT-162 + AT-219 (Patrik 11-07): long pill lists show TWO WHOLE rows, then the house's arrow button unfolds them.
   The row count is this one variable; admin-pill-rows.js measures the height (--atlas-pills-cap) per list. */
:root { --atlas-pills-max-rows: 2; }
.atlas-unit-pills > .atlas-unit-pills-wrap { flex-basis:100%; }
.atlas-unit-pills-wrap { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; }
.atlas-unit-pills-wrap > :first-child { width:100%; }
.atlas-unit-pills-wrap.is-capped:not(.is-open) > :first-child { box-sizing:border-box; max-height:var(--atlas-pills-cap, 64px); overflow:hidden; }
.atlas-unit-pills-wrap:not(.is-capped) > .atlas-unit-pills-more { display:none; }
/* AT-219: the staff form's office list has its own max-height:none !important (dator och mobil); the fold wins over it. */
#view-admin .atlas-unit-pills-wrap.is-capped:not(.is-open) > .new-agent-office-list.new-agent-office-list { max-height:var(--atlas-pills-cap, 64px) !important; overflow:hidden !important; }
.atlas-unit-pills-wrap.is-open > .atlas-unit-pills-more svg { transform:rotate(180deg); }
/* AT-177: pilen återanvänds i snabbfrågeformuläret och kampanjen, där knapp-svg annars krymper och tonas. */
#view-admin .atlas-unit-pills-wrap > .atlas-unit-pills-more { opacity:1 !important; width:26px; min-width:26px; height:26px; min-height:26px; padding:0; }
#view-admin .atlas-unit-pills-wrap > .atlas-unit-pills-more svg { width:14px !important; height:14px !important; flex:none; }