/* DELAD UR style-admin.css (KAN-388 CSS-1): rad 2353-3193, byte-exakt; quick questions, drift logo, mail composer buttons, offices <=1500px. Laddas direkt efter föregående del i index.html. */
/* =========================================================
Hem-vy: Skärprendering
========================================================= */
/* Tar bort blur på chat-messages i hem-vyn (#view-chat) */
#view-chat #chat-messages {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
}




/* =============================================================================
Mail Composer: knappar auto-bredd
============================================================================= */
#atlas-mail-composer .btn-modal-confirm {
width: 38px !important;
height: 38px !important;
flex: none !important;
padding: 0 !important;
}

#atlas-mail-tooltip {
background: var(--mail-tooltip-bg, rgba(18,18,28,0.97)) !important;
border-color: var(--mail-tooltip-border, rgba(255,255,255,0.12)) !important;
color: var(--mail-tooltip-text, #fff) !important;
box-shadow: var(--mail-tooltip-shadow, 0 4px 20px rgba(0,0,0,0.5)) !important;
}

#atlas-mail-tooltip span {
color: var(--mail-tooltip-muted, rgba(255,255,255,0.45)) !important;
}

#atlas-mail-tooltip span:first-child,
#atlas-mail-tooltip span[style*="font-weight:700"] {
color: var(--mail-tooltip-text, #fff) !important;
}

#atlas-mail-composer label[for="composer-file-input"],
#customer-mail-compose-modal label[for="cust-mail-file-input"],
#reader-upload-label,
#cust-reader-upload-label,
#btn-agent-upload-my {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: var(--detail-accent, var(--accent-primary)) !important;
font-size: 0 !important;
line-height: 1 !important;
}

#atlas-mail-composer label[for="composer-file-input"] svg,
#customer-mail-compose-modal label[for="cust-mail-file-input"] svg,
#reader-upload-label svg,
#cust-reader-upload-label svg,
#btn-agent-upload-my svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
}

#atlas-mail-composer label[for="composer-file-input"]:hover,
#customer-mail-compose-modal label[for="cust-mail-file-input"]:hover,
#reader-upload-label:hover,
#cust-reader-upload-label:hover,
#btn-agent-upload-my:hover {
background: color-mix(in srgb, currentColor 9%, transparent) !important;
}

.qq-icon-btn {
width: 32px !important;
height: 30px !important;
min-width: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}

.qq-toolbar-actions .qq-icon-btn[hidden],
.qq-toolbar-actions .qq-icon-btn[aria-hidden="true"],
.qq-toolbar-actions .qq-icon-btn[style*="display:none"],
.qq-toolbar-actions .qq-icon-btn[style*="display: none"],
.qq-toolbar-actions .qq-save-btn[hidden],
.qq-toolbar-actions .qq-save-btn[aria-hidden="true"],
.qq-toolbar-actions .qq-save-btn[style*="display:none"],
.qq-toolbar-actions .qq-save-btn[style*="display: none"] {
display: none !important;
}

.qq-icon-btn svg {
width: 15px !important;
height: 15px !important;
stroke: currentColor !important;
}

.qq-admin-panel {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 0;
}

.qq-section-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.qq-title-block h4 {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent-primary);
}

.qq-title-block h4 svg {
width: 15px;
height: 15px;
stroke: currentColor;
}

.qq-title-block span {
margin: 0;
font-size: 11px;
line-height: 1.45;
color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
opacity: 0.82;
}

.qq-status-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}

.qq-count-badge,
.qq-loading {
font-size: 11px;
line-height: 1;
color: var(--text-secondary);
opacity: 0.78;
white-space: nowrap;
}

/* 🔴 #315 (2026-08-18): knappen var en RAMAD TEXTKNAPP (mätt 66×30). Nu är den ett
   ikonlås enligt #78-kontraktet, och storleks-/ram-/bakgrundsdeklarationerna nedan var
   kvarlevor som slog med `!important` mot 32×32-regeln — utfallet blev 32×30.
   Kvar behålls ENDAST färgsignalen, som är knappens enda kvarvarande jobb här. */
#view-admin .qq-main-lock-btn {
color: var(--accent-primary) !important;
opacity: 1 !important;
}

#view-admin .qq-main-lock-btn.unlocked {
color: color-mix(in srgb, var(--status-warning, #f59e0b) 84%, var(--text-primary)) !important;
}

.qq-control-row,
.qq-add-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}

.qq-control-label {
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
opacity: 0.82;
}

.qq-count-btn {
min-width: 34px;
height: 30px;
padding: 0 10px;
border: 1px solid color-mix(in srgb, var(--border-color) 90%, var(--accent-primary) 8%);
border-radius: 8px;
background: color-mix(in srgb, var(--bg-dark-secondary) 95%, var(--accent-primary) 2%);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

/* SEL-standard Fas 2: rå --accent-primary som text ersatt av golvad --sel-text.
   Plattan läggs som background-IMAGE ovanpå knappens egen opaka bakgrund —
   background-color skulle annars slå ut basens yta och göra aktiv knapp
   mörkare än de ovalda i flera teman. */
#view-admin .qq-count-btn.active {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: var(--sel-edge) !important;
color: var(--sel-text) !important;
}

.qq-count-btn.is-disabled {
cursor: not-allowed;
opacity: 0.58;
}

.qq-toolbar-actions {
display: flex;
align-items: center;
gap: 7px;
margin-left: auto;
}

.qq-save-btn {
white-space: nowrap !important;
}

.qq-add-input,
.qq-test-panel textarea {
width: 100%;
min-width: 0;
box-sizing: border-box;
background: color-mix(in srgb, var(--bg-dark-secondary) 95%, var(--accent-primary) 2%) !important;
border: 1px solid color-mix(in srgb, var(--border-color) 88%, var(--accent-primary) 10%) !important;
border-radius: 9px !important;
color: var(--text-primary) !important;
outline: none;
}

.qq-add-input {
flex: 1;
height: 34px;
padding: 0 11px;
font-size: 12px;
}

.qq-candidate-panel .qq-test-heading {
align-items: center;
}

.qq-candidate-panel .qq-test-heading .qq-add-candidates-btn {
margin-left: auto;
}

#view-admin .qq-admin-panel .qq-add-candidates-btn:disabled,
#view-admin .qq-admin-panel .qq-add-candidates-btn[disabled] {
cursor: not-allowed;
opacity: 0.42;
}

.qq-candidate-row {
border-radius: 7px;
transition: background 0.15s, outline-color 0.15s;
}

.qq-candidate-row.is-selected {
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
outline: 1px solid color-mix(in srgb, var(--accent-primary) 34%, transparent);
}

.qq-candidate-row input[type="checkbox"] {
accent-color: var(--accent-primary);
}

.qq-test-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 10px;
padding: 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--border-color) 86%, var(--accent-primary) 10%);
background: color-mix(in srgb, var(--bg-dark-secondary) 95%, var(--accent-primary) 2%);
}

.qq-test-heading {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}

.qq-test-heading strong {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--text-primary);
}

.qq-test-heading span {
font-size: 10.5px;
line-height: 1.3;
color: var(--text-secondary);
opacity: 0.68;
}

.qq-test-panel textarea {
grid-column: 1;
min-height: 56px;
resize: vertical;
padding: 8px 10px;
font-size: 12px;
line-height: 1.4;
}

.qq-test-actions {
grid-column: 2;
display: flex;
flex-direction: column;
gap: 7px;
align-items: stretch;
}

.qq-test-actions .btn-glass-small {
min-height: 30px !important;
justify-content: center !important;
white-space: nowrap;
}

.qq-test-help {
grid-column: 1 / -1;
margin: -2px 0 0;
font-size: 10.5px;
line-height: 1.4;
color: var(--text-secondary);
opacity: 0.72;
}

.qq-test-result {
grid-column: 1 / -1;
padding: 10px 11px;
border-radius: 9px;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-dark-secondary) 84%, var(--accent-primary) 8%);
border: 1px solid color-mix(in srgb, var(--border-color) 72%, var(--accent-primary) 20%);
}

.qq-test-result.is-loading {
color: var(--text-secondary);
}

.qq-test-result.is-error {
color: var(--status-danger, #ef4444);
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 38%, var(--border-color));
background: color-mix(in srgb, var(--status-danger, #ef4444) 9%, var(--bg-dark-secondary));
}

.qq-list {
display: flex;
flex-direction: column;
gap: 7px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}

.qq-empty {
padding: 10px 12px;
border-radius: 9px;
background: color-mix(in srgb, var(--bg-dark-secondary) 90%, var(--text-secondary) 4%);
border: 1px dashed color-mix(in srgb, var(--border-color) 82%, var(--text-secondary) 18%);
color: var(--text-secondary);
font-size: 12px;
opacity: 0.78;
}

.qq-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
min-height: 38px;
padding: 7px 8px;
border: 1px solid color-mix(in srgb, var(--border-color) 78%, var(--accent-primary) 15%);
border-radius: 9px;
background: color-mix(in srgb, var(--bg-dark-secondary) 91%, #ffffff 4%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.qq-row:nth-child(even) {
background: color-mix(in srgb, var(--bg-dark-secondary) 87%, var(--accent-primary) 5%);
}

.qq-row:hover {
border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-color));
}

.qq-row.is-recently-added {
border-color: color-mix(in srgb, var(--status-success, #22c55e) 62%, var(--border-color));
background: color-mix(in srgb, var(--status-success, #22c55e) 10%, var(--bg-dark-secondary));
}

.qq-row-summary {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
min-width: 0;
}

.qq-row-index {
font-size: 11px;
font-weight: 800;
text-align: right;
color: var(--text-secondary);
opacity: 0.78;
}

.qq-row-main {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}

.qq-row-text {
appearance: none;
background: none;
border: 0;
padding: 0;
min-width: 0;
text-align: left;
font: inherit;
font-size: 12px;
font-weight: 650;
line-height: 1.35;
color: var(--text-primary);
word-break: break-word;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}

.qq-row-text:hover {
color: var(--accent-primary);
}

.qq-row-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 6px;
color: var(--text-secondary);
transition: transform 0.15s, color 0.15s, background 0.15s;
flex: 0 0 auto;
}

.qq-row.is-expanded .qq-row-chevron {
transform: rotate(180deg);
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
}

.qq-source-chip {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
width: fit-content;
max-width: 100%;
font-size: 10.5px;
line-height: 1.25;
color: color-mix(in srgb, var(--text-secondary) 82%, var(--accent-primary));
}

.qq-source-chip svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
stroke: currentColor;
}

.qq-source-chip span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.qq-row-actions {
display: flex;
align-items: center;
gap: 4px;
}

.qq-test-row-btn,
.qq-row-action {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: transparent;
border: 0;
color: var(--text-secondary);
cursor: pointer;
transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.qq-test-row-btn {
color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary));
}

.qq-test-row-btn svg,
.qq-row-action svg {
width: 14px;
height: 14px;
stroke: currentColor;
}

.qq-row-action {
width: 28px;
height: 28px;
padding: 0;
font-size: 15px;
line-height: 1;
}

.qq-lock-action {
color: var(--qq-lock-color, var(--text-secondary));
}

.qq-remove-action {
font-size: 16px;
font-weight: 700;
}

.qq-test-row-btn:hover,
.qq-row-action:hover {
opacity: 1;
background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-dark-secondary));
color: var(--accent-primary);
}

.qq-row-action.is-disabled,
.qq-row-action:disabled {
cursor: not-allowed;
opacity: 0.66;
}

.qq-row.is-locked .qq-lock-action {
background: color-mix(in srgb, var(--qq-lock-color, var(--accent-primary)) 12%, transparent);
}

.qq-answer-preview {
margin: 8px 0 1px 37px;
padding: 10px 11px;
border-radius: 8px;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-dark-secondary) 86%, var(--accent-primary) 6%);
border: 1px solid color-mix(in srgb, var(--border-color) 80%, var(--accent-primary) 12%);
}

.qq-answer-preview.is-loading,
.qq-answer-preview.is-idle,
.qq-answer-preview.is-missing {
color: var(--text-secondary);
}

.qq-answer-preview.is-error {
color: var(--status-danger, #ef4444);
border-color: color-mix(in srgb, var(--status-danger, #ef4444) 38%, var(--border-color));
background: color-mix(in srgb, var(--status-danger, #ef4444) 9%, var(--bg-dark-secondary));
}

.atlas-light-theme #view-admin .qq-test-panel {
background: color-mix(in srgb, var(--accent-primary) 4%, #ffffff 82%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 18%, rgba(0,0,0,0.16)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
}

.atlas-light-theme #view-admin .qq-row {
background: color-mix(in srgb, var(--accent-primary) 5%, #ffffff 84%);
border-color: color-mix(in srgb, var(--accent-primary) 22%, rgba(20,35,30,0.18));
box-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 5px 14px rgba(35,55,48,0.035);
}

.atlas-light-theme #view-admin .qq-row:nth-child(even) {
background: color-mix(in srgb, var(--accent-primary) 9%, #ffffff 80%);
}

.atlas-light-theme #view-admin .qq-add-input,
.atlas-light-theme #view-admin .qq-test-panel textarea,
.atlas-light-theme #view-admin .qq-count-btn {
background: color-mix(in srgb, var(--accent-primary) 4%, #ffffff 88%) !important;
border-color: color-mix(in srgb, var(--accent-primary) 22%, rgba(0,0,0,0.16)) !important;
}

/* SEL-standard Fas 2: ljus-override:en behövs fortfarande — men bara för att
   ÅTERSTÄLLA plattan, eftersom basens ljusa .qq-count-btn-regel ovan sätter
   background-shorthand med !important och därmed nollar background-image.
   Färgvärdena kommer nu från --sel-*, inte från en egen recept-kopia. */
.atlas-light-theme #view-admin .qq-count-btn.active {
background-image: linear-gradient(0deg, var(--sel-fill), var(--sel-fill)) !important;
border-color: var(--sel-edge) !important;
}

.drift-logo-url-row {
/* admin-config-row är display:flex på rad — utan column hamnar förklarings-<p>
   som tredje flex-barn ovanpå logotyp-thumben och radera-ikonen */
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
margin-bottom: 14px !important;
}

.drift-logo-url-row > label {
display: block !important;
margin-bottom: 5px !important;
font-size: 12px !important;
color: var(--text-secondary) !important;
}

#view-admin .admin-config-row.admin-mail-toggle-row {
display: grid !important;
grid-template-columns: minmax(220px, 220px) minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px 14px !important;
}

#view-admin .admin-config-row.admin-mail-toggle-row > label {
margin: 0 !important;
min-width: 0;
}

#view-admin .admin-config-row.admin-mail-toggle-row > div {
width: auto !important;
min-width: 0;
}

.drift-logo-url-line {
display: grid !important;
grid-template-columns: minmax(420px, 1fr) auto !important;
gap: 8px !important;
align-items: center !important;
}

.drift-logo-url-line #drift-company-logo-url {
width: 100% !important;
min-width: 0 !important;
}

.drift-logo-actions {
display: flex !important;
align-items: center !important;
gap: 6px !important;
min-width: 0 !important;
}

.drift-logo-actions .admin-lock-btn:not(.admin-config-icon-btn),
.drift-logo-actions .btn-glass-small:not(.admin-config-icon-btn) {
min-height: 30px !important;
height: 30px !important;
padding: 0 10px !important;
white-space: nowrap !important;
}

.drift-logo-actions .admin-save-icon-btn:not(.admin-config-icon-btn) {
width: 30px !important;
padding: 0 !important;
}

.drift-logo-preview {
width: 84px !important;
height: 30px !important;
border-radius: 7px !important;
border: 1px solid rgba(255,255,255,0.12) !important;
background: rgba(255,255,255,0.045) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 4px 6px !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}

.drift-logo-preview span {
color: var(--text-secondary) !important;
opacity: 0.45 !important;
font-size: 10px !important;
line-height: 1 !important;
text-align: center !important;
}

.drift-logo-url-row > p {
font-size: 11px !important;
color: var(--text-secondary) !important;
opacity: 0.55 !important;
margin: 5px 0 0 0 !important;
}

@media (max-width: 900px) {
.drift-logo-url-line {
grid-template-columns: 1fr !important;
}
.drift-logo-actions {
justify-content: flex-start !important;
flex-wrap: wrap !important;
}
}

/* Nytt meddelande: behåll editorhöjden när mottagar-/agentläge växlar. */
#atlas-mail-composer #composer-body-container {
min-height: 0 !important;
}

#atlas-mail-composer #composer-message-row {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .composer-quill-wrap {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .composer-quill-wrap .ql-container {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}

#atlas-mail-composer .composer-quill-wrap .ql-editor {
flex: 1 1 auto !important;
min-height: 100px !important;
max-height: none !important;
overflow-y: auto !important;
}

#atlas-mail-composer #composer-agent-grid {
height: auto !important;
min-height: 0 !important;
max-height: min(168px, 24vh) !important;
align-items: start !important;
}

#atlas-mail-composer #composer-info-box {
min-height: 34px !important;
box-sizing: border-box !important;
}

/* Om-vyn: nedersta informationsraderna får bryta istället för att klämmas. */
.about-cell .info-item {
gap: 10px !important;
min-width: 0 !important;
}

.about-cell .info-item .info-label {
flex: 0 0 auto !important;
white-space: nowrap !important;
}

.about-cell .info-item span:last-child {
min-width: 0 !important;
overflow-wrap: anywhere !important;
text-align: right !important;
line-height: 1.3 !important;
}

.about-cell #about-user-info span:last-child {
white-space: normal !important;
}

/* Tvingar pointer-events active på templates-vy (override av eventuella audit-regler) */
#view-templates { pointer-events: auto !important; }
.template-editor-container {
min-height: 0 !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
overflow: hidden !important;
margin: var(--spacing-lg) !important;
background-color: var(--bg-frosty-content) !important;
border-radius: var(--border-radius-lg) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
outline: none !important;
}

/* =============================================================================
RESPONSIVE ADMIN OFFICES — SMÅSKÄRMAR (⩽1500px)
============================================================================= */

@media (max-width: 1500px) {
#office-detail-body {
gap: 15px !important;
padding: 18px !important;
}

#box-office-master .admin-danger-footer {
margin-bottom: -18px;
}

#office-detail-body .admin-office-detail-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}

}