/* Scoped to the code list so other admin toolbars retain their layout. */
#t-codes-admin-tools {
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
}
#t-codes-admin-tools .ts-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px #0f172a08;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
#t-codes-admin-tools .ts-tool i { font-size: 14px; width: 16px; text-align: center; }
#t-codes-admin-tools .ts-tool:hover { background: #f1f5f9; border-color: #94a3b8; }
#t-codes-admin-tools .ts-tool:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
#t-codes-admin-tools .ts-tool:active { box-shadow: inset 0 1px 3px #0f172a18; }
#t-codes-admin-tools .ts-tool-icon { width: 34px; padding: 0; }
#t-codes-admin-tools .ts-tool-primary { background: #4f46e5; border-color: #4f46e5; color: #fff; padding: 0 14px; box-shadow: 0 2px 5px #4f46e52b; }
#t-codes-admin-tools .ts-tool-primary:hover { background: #4338ca; border-color: #4338ca; }
#t-codes-admin-tools .ts-tool-amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }
#t-codes-admin-tools .ts-tool-amber:hover { background: #fef3c7; }
#t-codes-admin-tools .ts-tool-purple { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
#t-codes-admin-tools .ts-tool-purple:hover { background: #ede9fe; }
#t-codes-admin-tools .ts-tool-danger { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
#t-codes-admin-tools .ts-tool-danger:hover { background: #ffe4e6; }
#t-codes-admin-tools .ts-tool-divider { height: 20px; width: 1px; background: #dbe3ee; margin: 0 2px; }
#t-codes-admin-tools .ts-tool-badge { background: #b45309; color: #fff; border-radius: 10px; padding: 2px 5px; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { #t-codes-admin-tools .ts-tool { transition: none; } }

/* Dense code and permission lists at normal browser zoom. */
#codes-overlay #t-codes-content-list > .q-toolbar {
  margin: 0; gap: 6px !important; padding: 6px 12px !important;
}
#codes-overlay #t-codes-content-list > .q-toolbar .q-input {
  min-width: 0; height: 32px; border-radius: 6px; font-size: 12px;
}
#codes-overlay #t-codes-admin-tools .ts-tool {
  min-height: 32px; padding: 0 9px; gap: 5px;
}
#codes-overlay #table-scroll-container .q-table { font-size: 12px; }
#codes-overlay #table-scroll-container th { padding: 6px 8px !important; }
#codes-overlay #t-codes-table-body td { padding: 3px 6px !important; }
#codes-overlay #t-codes-table-body .q-input {
  min-width: 0 !important; width: 100%; height: 30px !important;
  padding: 3px 4px !important; border-radius: 4px;
  box-sizing: border-box; font-size: 12px;
}
#codes-overlay #t-codes-table-body input[type="date"] { min-width: 108px !important; }
#codes-overlay #contact-permissions-table { font-size: 12px; }
#codes-overlay #contact-permissions-table th { padding: 6px 8px; }
#codes-overlay #contact-permissions-table td { padding: 3px 6px; }
#codes-overlay #contact-permissions-table input,
#codes-overlay #contact-permissions-table select {
  min-width: 0; height: 30px; padding: 3px 4px;
}
#codes-overlay #contact-permissions-table input[type="date"] { min-width: 108px; }
#codes-overlay #contact-permissions-table textarea {
  min-height: 34px !important; height: 34px !important; font-size: 12px;
  box-sizing: border-box; padding: 5px 6px;
}
#codes-overlay #churn-contact-permissions-sheet .contact-toolbar {
  gap: 6px; padding: 5px 10px;
}
#codes-overlay #churn-contact-permissions-sheet .contact-admin-group {
  padding: 5px 8px; gap: 6px; align-items: center;
}
#codes-overlay #churn-contact-permissions-sheet .contact-admin-group > label,
#codes-overlay #churn-contact-permissions-sheet .contact-archive-group > label {
  display: flex; flex-direction: row; align-items: center; gap: 5px; white-space: nowrap;
}
#codes-overlay #churn-contact-permissions-sheet .contact-admin-group > label input,
#codes-overlay #churn-contact-permissions-sheet .contact-admin-group > label select {
  margin-top: 0;
}
#codes-overlay #churn-contact-permissions-sheet .contact-toolbar input,
#codes-overlay #churn-contact-permissions-sheet .contact-toolbar select,
#codes-overlay #churn-contact-permissions-sheet .contact-toolbar button:not([hidden]) {
  min-width: 0; height: 32px; font-size: 12px; border-radius: 6px;
}

/* Shared spreadsheet cells: loaded by both Telesales and the Churn shadow root. */
      .spreadsheet-input, .spreadsheet-select {
        border: 1px solid transparent !important;
        background: transparent !important;
        outline: none;
        box-shadow: none !important;
        border-radius: 0 !important;
        transition: all 0.2s;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 5px;
      }
      .spreadsheet-input:focus, .spreadsheet-select:focus {
        border: 1px solid #3b82f6 !important;
        background: #fff !important;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
      }
      .spreadsheet-input:hover:not(:focus):not([readonly]),
      .spreadsheet-select:hover:not(:focus):not([disabled]) {
        border: 1px solid #cbd5e1 !important;
        background: #f8fafc !important;
      }

/* Keep shareable pivot summaries compact instead of stretching sparse columns. */
#p-view-matrix-container > div { width: fit-content; max-width: 100%; }
#p-view-matrix-container table { width: auto !important; table-layout: auto; }
#p-view-matrix-container th:first-child,
#p-view-matrix-container td:first-child {
  width: auto; min-width: 260px !important; max-width: none;
  white-space: nowrap; overflow-wrap: normal;
}
#p-view-matrix-container th:not(:first-child),
#p-view-matrix-container td:not(:first-child) { min-width: 68px; white-space: nowrap; }

/* A single admin pivot panel should not grow across an ultrawide screen. */
#t-bulk-sales-panel[style*="display: none"] + #t-pivot-summary-panel,
#t-bulk-sales-panel[style*="display:none"] + #t-pivot-summary-panel {
  flex: 0 1 1200px !important; width: 1200px; max-width: 100%; min-width: 0;
  box-sizing: border-box; margin-right: auto;
}

#bulk-codes-input::placeholder { color: #94a3b8; opacity: 1; }

/* Keep every representative and the total visible in narrower admin panels. */
#t-pivot-summary-panel { container: pivot-summary / inline-size; }
@container pivot-summary (max-width: 1050px) {
  #p-view-matrix-container > div { width: 100%; box-sizing: border-box; }
  #p-view-matrix-container table { width: 100% !important; table-layout: fixed; }
  #p-view-matrix-container th:first-child,
  #p-view-matrix-container td:first-child {
    width: 48%; min-width: 0 !important; white-space: normal;
    overflow-wrap: anywhere; padding: 8px !important;
  }
  #p-view-matrix-container th:not(:first-child),
  #p-view-matrix-container td:not(:first-child) {
    min-width: 0; padding: 8px 4px !important; white-space: normal;
    overflow-wrap: anywhere;
  }
}