/* Conversations › Settings › SLA Settings (public/conversations-sla.js).
   Sizes are GHL's: Tailwind classes from SLASettings.vue (w-20 selects,
   w-3 dots, w-44 illustration, w-96 workflow picker), `.custom-font-size`
   at 12.85px, HighRise xs toggles and a 450px confirmation modal. */

.sla-page, .sla-mask, .sla-menu, .sla-notes {
  --sla-blue: #155eef;
  --sla-blue-dark: #004eeb;
  --sla-border: #d0d5dd;
  --sla-line: #eaecf0;
  --sla-text: #101828;
  --sla-text-2: #344054;
  --sla-muted: #475467;
  --sla-red: #f04438;
  --sla-red-dark: #d92d20;
}

.sla-page { background: #f9fafb; color: var(--sla-text); padding: 16px 24px 24px; min-height: calc(100vh - 140px); }

/* ---------- Home: the tab strip ---------- */
.sla-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sla-line); }
.sla-tab {
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; line-height: 20px;
  padding: 6px 10px 8px; color: var(--sla-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.sla-tab.on { color: var(--sla-blue); border-bottom-color: var(--sla-blue); }

/* ---------- SLASettings ---------- */
.sla-settings { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; padding-bottom: 60px; }
.sla-head { display: flex; flex-direction: column; gap: 2px; }
.sla-head-line { display: flex; align-items: center; gap: 8px; }
.sla-head-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sla-text); }
.sla-small { font-size: 12.85px; line-height: 18px; color: var(--sla-muted); }

.sla-card { background: #fff; border: 1px solid var(--sla-line); border-radius: 8px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }

/* Off: the empty card */
.sla-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 48px 12px; text-align: center; }
.sla-empty img { width: 176px; height: auto; }
.sla-empty-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--sla-text); margin-top: 4px; }
.sla-empty-text { font-size: 14px; line-height: 20px; color: var(--sla-text-2); margin-bottom: 8px; }

/* On: the form */
.sla-form { padding: 12px; display: flex; flex-direction: column; gap: 16px; }
.sla-section { display: flex; flex-direction: column; gap: 8px; }
.sla-q { display: flex; flex-direction: column; gap: 2px; }
.sla-q-title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sla-text); }

.sla-radios { display: flex; flex-direction: column; gap: 4px; }
.sla-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; color: var(--sla-text-2); cursor: pointer; width: fit-content; position: relative; }
.sla-radio input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.sla-dot-ring { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--sla-border); background: #fff; flex: none; box-sizing: border-box; transition: border-color .15s; }
.sla-radio:hover .sla-dot-ring { border-color: var(--sla-blue); }
.sla-radio.on .sla-dot-ring { border: 5px solid var(--sla-blue); }
.sla-radio input:focus-visible + .sla-dot-ring { box-shadow: 0 0 0 4px #d1e0ff; }

.sla-targets { display: flex; flex-direction: row; gap: 20px; flex-wrap: wrap; }
.sla-target { display: flex; flex-direction: column; gap: 6px; }
.sla-dot-label { display: flex; align-items: center; gap: 4px; }
.sla-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sla-dot-text { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sla-text-2); }
.sla-pair { display: flex; flex-direction: row; gap: 8px; align-items: center; }

.sla-select-wrap { position: relative; width: 80px; flex: none; }
.sla-select-wrap > svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #667085; pointer-events: none; }
.sla-select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 34px; box-sizing: border-box;
  padding: 6px 28px 6px 10px; font: inherit; font-size: 14px; line-height: 20px; color: var(--sla-text);
  background: #fff; border: 1px solid var(--sla-border); border-radius: 4px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.sla-select.empty { color: #98a2b3; }
.sla-select:hover:not(:disabled) { border-color: #84adff; }
.sla-select:focus { outline: none; border-color: #84adff; box-shadow: 0 0 0 4px #d1e0ff; }
.sla-select:disabled { background: #f9fafb; color: #98a2b3; cursor: not-allowed; }
.sla-select.error { border-color: #fda29b; }
.sla-select.error:focus { box-shadow: 0 0 0 4px #fee4e2; }

/* Channel Specific SLA */
.sla-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--sla-line); border-radius: 8px; }
.sla-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--sla-text-2); }
.sla-table th, .sla-table td { border-right: 1px solid var(--sla-line); border-bottom: 1px solid var(--sla-line); padding: 6px 12px; height: 48px; box-sizing: border-box; text-align: left; vertical-align: middle; }
.sla-table th:last-child, .sla-table td:last-child { border-right: 0; }
.sla-table tbody tr:last-child td { border-bottom: 0; }
.sla-table th { background: #f9fafb; font-weight: 500; font-size: 12px; color: var(--sla-muted); height: 44px; }
.sla-table tbody tr:hover { background: #f9fafb; }
.sla-table .sla-col-toggle { width: 10%; text-align: center; }
.sla-table .sla-col-channel { width: 25%; }
.sla-table .sla-col-due { width: 30%; }
.sla-table .sla-col-overdue { width: 35%; }
.sla-table td.sla-col-due .sla-pair { margin-right: 48px; }
.sla-clamp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.sla-table th .sla-dot-text { font-size: 14px; }

/* the workflows picker */
.sla-workflows { display: flex; flex-direction: column; gap: 4px; padding-left: 24px; }
.sla-multi {
  width: 384px; max-width: 100%; min-height: 34px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 4px 30px 4px 10px; position: relative; background: #fff; border: 1px solid var(--sla-border); border-radius: 4px;
  cursor: pointer; font-size: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.sla-multi:focus { outline: none; border-color: #84adff; box-shadow: 0 0 0 4px #d1e0ff; }
.sla-multi.error { border-color: #fda29b; }
.sla-multi > svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #667085; }
.sla-multi-ph { color: #98a2b3; line-height: 24px; }
.sla-tag { display: inline-flex; align-items: center; gap: 2px; background: #f2f4f7; color: var(--sla-text-2); border-radius: 4px; padding: 1px 4px 1px 8px; font-size: 12px; line-height: 20px; }
.sla-tag-x { border: 0; background: none; padding: 2px; display: inline-flex; color: #667085; cursor: pointer; border-radius: 3px; }
.sla-tag-x:hover { background: #e4e7ec; }
.sla-field-error { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--sla-red); }
.sla-field-error small { font-size: 12px; }

.sla-menu {
  position: absolute; z-index: 1000; background: #fff; border: 1px solid var(--sla-line); border-radius: 8px;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03); padding: 4px; box-sizing: border-box;
}
.sla-menu-search { width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit; font-size: 14px; border: 1px solid var(--sla-border); border-radius: 4px; margin-bottom: 4px; }
.sla-menu-search:focus { outline: none; border-color: #84adff; }
.sla-menu-list { max-height: 240px; overflow-y: auto; }
.sla-menu-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--sla-text-2); text-align: left; border-radius: 4px; cursor: pointer; }
.sla-menu-item:hover { background: #f9fafb; }
.sla-menu-item.on { color: var(--sla-blue); }
.sla-menu-empty { padding: 12px; text-align: center; color: #98a2b3; font-size: 14px; }

/* ---------- HighRise xs toggle ---------- */
.sla-switch { position: relative; width: 28px; height: 16px; flex: none; border-radius: 999px; border: 0; padding: 0; background: #f2f4f7; box-shadow: inset 0 0 0 1px #e4e7ec; cursor: pointer; transition: background .15s; }
.sla-switch .sla-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06); transition: left .15s; }
.sla-switch.on { background: var(--sla-blue); box-shadow: none; }
.sla-switch.on .sla-knob { left: 14px; }
.sla-switch:focus-visible { outline: none; box-shadow: 0 0 0 4px #d1e0ff; }

/* ---------- buttons, footer, modal, notification ---------- */
.sla-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600;
  line-height: 20px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--sla-border); background: #fff; color: var(--sla-text-2);
  cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); white-space: nowrap;
}
.sla-btn:hover:not(:disabled) { background: #f9fafb; }
.sla-btn:disabled { opacity: .5; cursor: not-allowed; }
.sla-btn.sm { padding: 8px 14px; }
.sla-btn.primary { background: var(--sla-blue); border-color: var(--sla-blue); color: #fff; }
.sla-btn.primary:hover:not(:disabled) { background: var(--sla-blue-dark); }
.sla-btn.danger { background: var(--sla-red-dark); border-color: var(--sla-red-dark); color: #fff; }
.sla-btn.danger:hover:not(:disabled) { background: #b42318; }
.sla-btn.loading { cursor: progress; }
.sla-foot { display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: flex-end; }

.sla-mask { position: fixed; inset: 0; background: rgba(52, 64, 84, .6); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sla-modal { width: min(450px, calc(100vw - 32px)); background: #fff; border-radius: 12px; box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03); }
.sla-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 0; }
.sla-modal-title { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--sla-text); }
.sla-modal-x { border: 0; background: none; padding: 4px; color: #98a2b3; cursor: pointer; border-radius: 6px; display: inline-flex; }
.sla-modal-x:hover { background: #f2f4f7; color: #667085; }
.sla-modal-body { padding: 8px 20px 20px; font-size: 14px; line-height: 20px; color: var(--sla-muted); }
.sla-modal-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--sla-line); }

.sla-notes { position: fixed; top: 16px; right: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; }
.sla-note {
  display: flex; align-items: center; gap: 10px; min-width: 300px; max-width: 420px; padding: 12px 12px 12px 14px; border-radius: 8px;
  background: #fff; border: 1px solid; font-size: 14px; line-height: 20px; box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08);
}
.sla-note.green { border-color: #75e0a7; background: #f6fef9; color: #067647; }
.sla-note.red { border-color: #fda29b; background: #fffbfa; color: #b42318; }
.sla-note-text { flex: 1; color: var(--sla-text-2); }
.sla-note-x { border: 0; background: none; padding: 2px; color: #98a2b3; cursor: pointer; display: inline-flex; }

/* ---------- loading ---------- */
.sla-loading { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sla-sk { height: 16px; width: 100px; border-radius: 4px; background: linear-gradient(90deg, #f2f4f7 25%, #e4e7ec 37%, #f2f4f7 63%); background-size: 400% 100%; animation: sla-sk 1.4s ease infinite; }
.sla-sk.w250 { width: 250px; }
.sla-sk.img { width: 100px; height: 115px; }
.sla-sk.w30 { width: 30%; height: 20px; margin-top: 8px; }
.sla-sk.w40 { width: 40%; margin-top: 8px; }
.sla-sk.btn { width: 85px; height: 24px; margin-top: 8px; }
@keyframes sla-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 640px) {
  .sla-page { padding: 12px 16px 20px; }
  .sla-multi { width: 100%; }
  .sla-workflows { padding-left: 0; }
}