/* ============================================
   assets/css/admin-office-agents.css
   AT-152: koppla agenter på kontorssidan ("Kopplade Agenter": papperskorg med två klick,
   plusavatar och sökbar lista) och husikonen på personalkorten. JS: modules/admin/admin-office-agents.js.
   Papperskorgen har prisradens mått och färg (admin-catalog.css #box-prices .price-delete-btn),
   plusavataren husets tilläggsikon (.hours-add-btn) i agentavatarernas storlek. Bara temats tokens.
   ============================================ */

/* Papperskorgen: 24×24, ramfri, ikon 14 px i farofärg; ljust tema mörkare röd (#78-kontrasten). */
#view-admin #box-agents .office-agent-remove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 24px; height: 24px; padding: 0 5px; box-sizing: border-box; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--status-danger, #ef4444); font: inherit; font-size: 0; line-height: 1; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
#view-admin #box-agents .office-agent-remove svg { width: 14px; height: 14px; fill: currentColor; stroke: none; flex-shrink: 0; }
/* style.css sätter background transparent !important på alla knappar; därför !important här, som prisradens papperskorg. */
#view-admin #box-agents .office-agent-remove:hover,
#view-admin #box-agents .office-agent-remove:focus-visible { background: color-mix(in srgb, var(--status-danger, #ef4444) 12%, transparent) !important; }
body.atlas-light-theme #view-admin #box-agents .office-agent-remove { color: #b91c1c; }
#view-admin #box-agents .office-agent-remove-text { display: none; }
/* Första klicket: knappen blir röd med "Ta bort?"; andra klicket tar bort. Höjden är densamma. */
#view-admin #box-agents .office-agent-remove.is-armed,
body.atlas-light-theme #view-admin #box-agents .office-agent-remove.is-armed { background: var(--status-danger, #ef4444) !important; color: #fff !important; font-size: 12px; font-weight: 600; padding: 0 8px; }
body.atlas-light-theme #view-admin #box-agents .office-agent-remove.is-armed { background: #b91c1c !important; }
#view-admin #box-agents .office-agent-remove.is-armed .office-agent-remove-text { display: inline; }
#view-admin #box-agents .office-agent-remove:disabled { opacity: 0.5; cursor: progress; }

/* Plusavataren sist i listan: rund, 28 px som agentavatarerna, plus-svg som .hours-add-btn. */
#view-admin #box-agents .office-agent-add-row { display: flex; align-items: center; padding: 7px 0; }
#view-admin #box-agents .office-agent-add { flex-shrink: 0; width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--text-secondary) 55%, transparent); background: transparent; color: var(--text-secondary); line-height: 0; cursor: pointer; }
#view-admin #box-agents .office-agent-add:hover,
#view-admin #box-agents .office-agent-add[aria-expanded="true"] { color: var(--accent-primary); border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; }

/* Den sökbara listan (finns bara i DOM:en medan den är öppen). */
#view-admin #box-agents .office-agent-picker { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; }
#view-admin #box-agents .office-agent-picker-search { width: 100%; box-sizing: border-box; }
#view-admin #box-agents .office-agent-picker-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; padding: 2px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); background: var(--bg-dark-secondary, var(--bg-dark-primary)); }
#view-admin #box-agents .office-agent-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
#view-admin #box-agents .office-agent-option:hover,
#view-admin #box-agents .office-agent-option:focus-visible { background: var(--sel-fill-hover, color-mix(in srgb, var(--accent-primary) 8%, transparent)) !important; }
#view-admin #box-agents .office-agent-option:disabled { opacity: 0.5; cursor: progress; }
#view-admin #box-agents .office-agent-option-avatar { width: 22px; height: 22px; flex-shrink: 0; display: flex; }
#view-admin #box-agents .office-agent-option-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-admin #box-agents .office-agent-picker-empty { padding: 8px 10px; font-size: 12px; color: var(--text-secondary); }

/* Felraden: begriplig text, inget ändrat i listan. */
#view-admin #box-agents .office-agents-error { margin: -4px 0 8px; font-size: 12px; color: var(--status-danger, #ef4444); }
body.atlas-light-theme #view-admin #box-agents .office-agents-error { color: #b91c1c; }

/* Husikonen på personalkorten: stylas av .office-card-agents (style-admin.css). Kortets text får
   plats för ikonen nere till höger, så att namn och statusrad aldrig hamnar under den. */
#view-admin #admin-main-list .admin-mini-card[data-username] [data-user-card-copy] { padding-right: 30px !important; }
/* Menyraden för en enhet: enhetens färg i avatarplatsen. */
body > .office-agents-menu .agent-units-swatch { width: 10px; height: 10px; margin: auto; border-radius: 3px; background: color-mix(in srgb, var(--text-secondary) 50%, transparent); }
/* Personalkortet är 50 px högt: ikonen ett par pixlar ned så att den inte nuddar räknarbrickan ovanför. */
#view-admin #admin-main-list .admin-mini-card[data-username] .agent-card-units { bottom: 3px; }

/* AT-162 (Patrik 10-30): "Koppla agent" står uppe till höger på rubrikraden, ramlös som rutornas lås.
   Ikonen är en person med plus; när listan är öppen blir den en bock (Klar), eftersom ett val kopplar agenten direkt. Listan står kvar under raderna. */
#view-admin #box-agents { position: relative; }
#view-admin #box-agents > .scroll-list { contain: style !important; }
#view-admin #box-agents .office-agent-add-row { position: absolute; top: 16px; right: 23px; padding: 0; }
#view-admin #box-agents .office-agent-add.office-agent-add { border: 0 !important; background: transparent !important; color: var(--accent-primary); border-radius: 8px; }
#view-admin #box-agents .office-agent-add > svg { display: none; }
#view-admin #box-agents .office-agent-add::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#view-admin #box-agents .office-agent-add[aria-expanded="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
#view-admin #box-agents .office-agent-add:hover,
#view-admin #box-agents .office-agent-add:focus-visible { background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important; }
#view-admin #box-agents .office-agent-add[aria-expanded="true"] { color: var(--status-success, #22c55e); }
/* Mobil: rutan har mindre utfyllnad, så ikonen flyttas upp till rubrikens mitt. */
@media (max-width: 768px) { #view-admin #box-agents .office-agent-add-row { top: 4px; right: 23px; } }