/* ============================================================================
   TrustElevate Admin — Design System  ·  ds-components.css
   Canonical component styles. Pairs with colors_and_type.css.
   ============================================================================ */

/* ---------------------------------------------------- BUTTONS */
.te-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-4); border-radius: var(--te-radius-md);
  font-family: var(--te-font-sans); font-size: 0.875rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, box-shadow .14s, color .14s, transform .04s;
  user-select: none;
}
.te-btn:active { transform: translateY(0.5px); }
.te-btn svg { width: 17px; height: 17px; flex: none; }
.te-btn:focus-visible { outline: none; box-shadow: var(--te-ring); }

.te-btn--primary { background: var(--te-teal); color: #fff; box-shadow: 0 1px 2px rgba(13,148,136,.3); }
.te-btn--primary:hover { background: var(--te-teal-dark); }
.te-btn--secondary { background: #fff; color: var(--te-text); border-color: var(--te-border); }
.te-btn--secondary:hover { background: var(--te-surface); border-color: var(--te-text-muted); }
.te-btn--gold { background: var(--te-gold); color: #3a2a07; }
.te-btn--gold:hover { background: #c98f29; }
.te-btn--danger { background: var(--te-danger); color: #fff; }
.te-btn--danger:hover { background: #c93d3d; }
.te-btn--danger-quiet { background: #fff; color: var(--te-danger); border-color: #f3c2c2; }
.te-btn--danger-quiet:hover { background: var(--te-danger-soft); border-color: var(--te-danger); }
.te-btn--ghost { background: transparent; color: var(--te-text-muted); }
.te-btn--ghost:hover { background: var(--te-surface); color: var(--te-text); }

.te-btn[disabled], .te-btn--disabled { opacity: .5; pointer-events: none; }
.te-btn--sm { height: 32px; padding: 0 var(--sp-3); font-size: 0.8125rem; }
.te-btn--lg { height: 46px; padding: 0 var(--sp-5); font-size: 0.95rem; }
.te-btn--icon { width: 40px; padding: 0; }
.te-btn--icon.te-btn--sm { width: 32px; }
.te-btn--block { width: 100%; }

/* ---------------------------------------------------- FORM FIELDS */
.te-field { display: flex; flex-direction: column; gap: 6px; }
.te-field__label { font-family: var(--te-font-dense); font-size: 0.8125rem; font-weight: 600; color: var(--te-text); }
.te-field__label .req { color: var(--te-danger); margin-left: 2px; }
.te-field__hint { font-family: var(--te-font-dense); font-size: 0.75rem; color: var(--te-text-muted); }
.te-field__error { font-family: var(--te-font-dense); font-size: 0.75rem; color: var(--te-danger); display: flex; align-items: center; gap: 5px; }
.te-field__error svg { width: 13px; height: 13px; }

.te-input, .te-select, .te-textarea {
  width: 100%; height: 40px; padding: 0 12px;
  font-family: var(--te-font-dense); font-size: 0.875rem; color: var(--te-text);
  background: #fff; border: 1px solid var(--te-border); border-radius: var(--te-radius-md);
  transition: border-color .14s, box-shadow .14s; outline: none;
}
.te-textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.te-input::placeholder, .te-textarea::placeholder { color: var(--te-text-muted-alt); }
.te-input:hover, .te-select:hover, .te-textarea:hover { border-color: var(--te-text-muted); }
.te-input:focus, .te-select:focus, .te-textarea:focus { border-color: var(--te-teal); box-shadow: var(--te-ring); }
.te-input:disabled, .te-select:disabled { background: var(--te-surface); color: var(--te-text-muted); cursor: not-allowed; }
.te-field--error .te-input, .te-field--error .te-select, .te-field--error .te-textarea {
  border-color: var(--te-danger);
}
.te-field--error .te-input:focus { box-shadow: 0 0 0 3px rgba(225,76,76,.16); }
.te-field--success .te-input { border-color: var(--te-success); }

.te-input-group { position: relative; display: flex; align-items: center; }
.te-input-group svg.lead { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--te-text-muted); pointer-events: none; }
.te-input-group .te-input.has-lead { padding-left: 38px; }
.te-select-wrap { position: relative; }
.te-select { appearance: none; padding-right: 36px; cursor: pointer; }
.te-select-wrap svg.chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--te-text-muted); pointer-events: none; }

/* checkbox / radio */
.te-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--te-font-dense); font-size: 0.875rem; }
.te-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.te-check__box { width: 18px; height: 18px; border: 1.5px solid var(--te-border); border-radius: 5px; background: #fff; display: grid; place-items: center; transition: all .14s; flex: none; }
.te-check__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.te-check input:checked + .te-check__box { background: var(--te-teal); border-color: var(--te-teal); }
.te-check input:checked + .te-check__box svg { opacity: 1; }
.te-check input:focus-visible + .te-check__box { box-shadow: var(--te-ring); }
.te-check--radio .te-check__box { border-radius: 50%; }
.te-check--radio .te-check__box::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; }
.te-check--radio input:checked + .te-check__box { background: var(--te-teal); border-color: var(--te-teal); }
.te-check--radio input:checked + .te-check__box::after { opacity: 1; }

/* toggle */
.te-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.te-toggle input { position: absolute; opacity: 0; }
.te-toggle__track { width: 38px; height: 22px; border-radius: 999px; background: var(--te-border); position: relative; transition: background .18s; flex: none; }
.te-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; }
.te-toggle input:checked + .te-toggle__track { background: var(--te-teal); }
.te-toggle input:checked + .te-toggle__track::after { transform: translateX(16px); }
.te-toggle input:focus-visible + .te-toggle__track { box-shadow: var(--te-ring); }

/* ---------------------------------------------------- BADGES / CHIPS */
.te-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--te-font-dense); font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: var(--te-radius-pill); white-space: nowrap; }
.te-chip__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.te-chip--green  { background: var(--te-success-soft); color: #1d7a12; } .te-chip--green .te-chip__dot { background: var(--te-success); }
.te-chip--gold   { background: var(--te-gold-soft); color: #9a6c10; }    .te-chip--gold .te-chip__dot { background: var(--te-gold); }
.te-chip--red    { background: var(--te-danger-soft); color: #b42323; }  .te-chip--red .te-chip__dot { background: var(--te-danger); }
.te-chip--sky    { background: var(--te-info-soft); color: #0a6c93; }    .te-chip--sky .te-chip__dot { background: var(--te-accent-sky); }
.te-chip--purple { background: var(--te-purple-soft); color: #7d20b8; }  .te-chip--purple .te-chip__dot { background: var(--te-purple); }
.te-chip--gray   { background: var(--te-surface); color: var(--te-text-muted); border: 1px solid var(--te-border-alt); } .te-chip--gray .te-chip__dot { background: var(--te-text-muted); }

.te-roletag { display: inline-flex; align-items: center; font-family: var(--te-font-dense); font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: #f0eef5; color: #5a4b73; }
.te-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--te-danger); color: #fff; font-family: var(--te-font-dense); font-size: 0.6875rem; font-weight: 700; }
.te-count--neutral { background: var(--te-text-muted); }

/* env badges */
.te-env { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: var(--te-radius-pill); font-family: var(--te-font-dense); font-size: 0.75rem; font-weight: 600; border: 1px solid; }
.te-env__dot { width: 8px; height: 8px; border-radius: 50%; }
.te-env--prod { background: var(--te-warning-soft); border-color: #fcd9b6; color: #b25a13; } .te-env--prod .te-env__dot { background: var(--te-warning); box-shadow: 0 0 0 3px rgba(253,126,20,.18); }
.te-env--stag { background: var(--te-info-soft); border-color: #bfe6fb; color: #0a6c93; } .te-env--stag .te-env__dot { background: var(--te-accent-sky); box-shadow: 0 0 0 3px rgba(56,189,248,.18); }

/* ---------------------------------------------------- CARD / PANEL */
.te-panel { background: #fff; border: 1px solid var(--te-border-alt); border-radius: var(--te-radius-lg); box-shadow: var(--te-shadow-sm); overflow: hidden; }
.te-panel__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--te-border-alt); }
.te-panel__title { font-size: 1.0625rem; font-weight: 600; }
.te-panel__sub { font-size: 0.8125rem; color: var(--te-text-muted); }
.te-panel__head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------- TABLE */
.te-table-wrap { overflow-x: auto; }
table.te-table { width: 100%; border-collapse: collapse; font-family: var(--te-font-dense); }
.te-table thead th {
  text-align: left; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--te-text-muted); padding: 11px 16px;
  border-bottom: 1px solid var(--te-border-alt); white-space: nowrap; background: #fcfcfd;
  position: sticky; top: 0; z-index: 2;
}
.te-table thead th.sortable { cursor: pointer; user-select: none; }
.te-table thead th.sortable:hover { color: var(--te-text); }
.te-table thead th .sort { display: inline-flex; align-items: center; gap: 5px; }
.te-table thead th .sort svg { width: 13px; height: 13px; opacity: .5; }
.te-table thead th.sorted .sort svg { opacity: 1; color: var(--te-teal-dark); }
.te-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--te-border-alt); font-size: 0.875rem; vertical-align: middle; }
.te-table tbody tr:last-child td { border-bottom: none; }
.te-table tbody tr:hover { background: #fafafb; }
.te-table tbody tr.selected { background: var(--te-teal-soft); }
.te-table tbody tr.selected:hover { background: #b9f4ea; }
.te-table .col-check { width: 44px; }
.te-table .num { font-variant-numeric: tabular-nums; }
.te-table .cell-id { font-family: var(--te-font-mono); font-size: 0.78rem; color: var(--te-text-muted); }
.te-table .cell-name { display: flex; align-items: center; gap: 11px; }
.te-table .cell-name .c-main { font-weight: 600; color: var(--te-text); }
.te-mono-logo { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem; font-family: var(--te-font-dense); flex: none; }

.te-rowact { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.te-iconbtn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; background: transparent; display: grid; place-items: center; color: var(--te-text-muted); cursor: pointer; transition: all .12s; }
.te-iconbtn:hover { background: var(--te-surface); color: var(--te-text); border-color: var(--te-border-alt); }
.te-iconbtn.danger:hover { color: var(--te-danger); border-color: #f3c2c2; background: var(--te-danger-soft); }
.te-iconbtn svg { width: 16px; height: 16px; }

/* bulk action bar */
.te-bulkbar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--te-navy); color: #fff; border-radius: var(--te-radius-md); }
.te-bulkbar .count { font-weight: 600; font-size: 0.875rem; }
.te-bulkbar .right { margin-left: auto; display: flex; gap: 8px; }
.te-bulkbar .te-btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.te-bulkbar .te-btn--secondary:hover { background: rgba(255,255,255,.1); }

/* ---------------------------------------------------- TABS */
.te-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--te-border-alt); }
.te-tab { position: relative; padding: 11px 14px; border: none; background: transparent; font-family: var(--te-font-sans); font-size: 0.9rem; font-weight: 500; color: var(--te-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.te-tab:hover { color: var(--te-text); }
.te-tab svg { width: 16px; height: 16px; }
.te-tab.active { color: var(--te-teal-dark); font-weight: 600; }
.te-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--te-teal); border-radius: 2px 2px 0 0; }
.te-tab .te-count { margin-left: 2px; }

.te-segment { display: inline-flex; padding: 3px; background: var(--te-surface); border: 1px solid var(--te-border-alt); border-radius: var(--te-radius-md); }
.te-segment button { border: none; background: transparent; padding: 6px 14px; border-radius: 6px; font-family: var(--te-font-dense); font-size: 0.8125rem; font-weight: 600; color: var(--te-text-muted); cursor: pointer; }
.te-segment button.active { background: #fff; color: var(--te-text); box-shadow: 0 1px 2px rgba(11,31,58,.1); }

/* ---------------------------------------------------- TOASTS */
.te-toast { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; background: #fff; border: 1px solid var(--te-border-alt); border-left-width: 3px; border-radius: var(--te-radius-md); box-shadow: var(--te-shadow-pop); width: 360px; max-width: 100%; }
.te-toast__ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.te-toast__body { flex: 1; min-width: 0; }
.te-toast__title { font-size: 0.875rem; font-weight: 600; }
.te-toast__msg { font-size: 0.8125rem; color: var(--te-text-muted); margin-top: 2px; line-height: 1.4; }
.te-toast__close { border: none; background: transparent; color: var(--te-text-muted-alt); cursor: pointer; padding: 2px; border-radius: 5px; flex: none; }
.te-toast__close:hover { background: var(--te-surface); }
.te-toast__close svg { width: 15px; height: 15px; }
.te-toast--success { border-left-color: var(--te-success); } .te-toast--success .te-toast__ic { color: var(--te-success); }
.te-toast--danger  { border-left-color: var(--te-danger); }  .te-toast--danger .te-toast__ic { color: var(--te-danger); }
.te-toast--info    { border-left-color: var(--te-info); }    .te-toast--info .te-toast__ic { color: var(--te-info); }
.te-toast--warning { border-left-color: var(--te-warning); } .te-toast--warning .te-toast__ic { color: var(--te-warning); }

.te-toast-region { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }
.te-toast.enter { animation: te-toast-in .25s cubic-bezier(.2,.8,.2,1); }
@keyframes te-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------- BANNERS */
.te-banner { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-radius: var(--te-radius-md); font-size: 0.875rem; line-height: 1.45; }
.te-banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.te-banner strong { font-weight: 700; }
.te-banner--danger  { background: var(--te-danger-soft); border: 1px solid #f5c6c6; color: #952020; } .te-banner--danger svg { color: var(--te-danger); }
.te-banner--info    { background: var(--te-info-soft); border: 1px solid #bfe6fb; color: #0a6c93; } .te-banner--info svg { color: var(--te-info); }
.te-banner--warning { background: var(--te-warning-soft); border: 1px solid #fcd9b6; color: #97500f; } .te-banner--warning svg { color: var(--te-warning); }
.te-banner--success { background: var(--te-success-soft); border: 1px solid #bfe6b6; color: #1d6112; } .te-banner--success svg { color: var(--te-success); }

/* ---------------------------------------------------- MODAL */
.te-modal-scrim { position: fixed; inset: 0; background: rgba(11,31,58,.5); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 9998; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .18s; }
.te-modal-scrim.open { opacity: 1; pointer-events: auto; }
.te-modal { width: 480px; max-width: 100%; background: #fff; border-radius: var(--te-radius-lg); box-shadow: var(--te-shadow-pop); overflow: hidden; transform: translateY(8px) scale(.98); transition: transform .18s; }
.te-modal-scrim.open .te-modal { transform: none; }
.te-modal__head { display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px 0; }
.te-modal__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.te-modal__ic svg { width: 20px; height: 20px; }
.te-modal__ic--danger { background: var(--te-danger-soft); color: var(--te-danger); }
.te-modal__ic--teal { background: var(--te-teal-soft); color: var(--te-teal-dark); }
.te-modal__title { font-size: 1.15rem; font-weight: 600; }
.te-modal__close { margin-left: auto; }
.te-modal__body { padding: 12px 22px 20px; }
.te-modal__body p { margin: 0; color: var(--te-text-muted); font-size: 0.9rem; line-height: 1.55; }
.te-modal__body p b { color: var(--te-text); }
.te-confirm-input { margin-top: 16px; }
.te-modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; background: var(--te-surface); border-top: 1px solid var(--te-border-alt); }

/* ---------------------------------------------------- STATES: empty / loading / error */
.te-state { display: grid; place-items: center; text-align: center; padding: 56px 24px; }
.te-state__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; }
.te-state__ic svg { width: 26px; height: 26px; }
.te-state--empty .te-state__ic { background: var(--te-surface); border: 1px solid var(--te-border-alt); color: var(--te-text-muted); }
.te-state--error .te-state__ic { background: var(--te-danger-soft); color: var(--te-danger); }
.te-state h3 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; }
.te-state p { margin: 0 0 18px; color: var(--te-text-muted); font-size: 0.9rem; max-width: 380px; line-height: 1.5; }

.te-skel { background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 37%, #eef0f3 63%); background-size: 400% 100%; animation: te-shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes te-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.te-skel-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--te-border-alt); }
.te-skel-row:last-child { border-bottom: none; }

/* ---------------------------------------------------- KEBAB MENU */
.te-menu { background: #fff; border: 1px solid var(--te-border-alt); border-radius: var(--te-radius-md); box-shadow: var(--te-shadow-pop); padding: 6px; min-width: 190px; }
.te-menu__item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 7px; font-family: var(--te-font-sans); font-size: 0.875rem; color: var(--te-text); cursor: pointer; }
.te-menu__item:hover { background: var(--te-surface); }
.te-menu__item svg { width: 16px; height: 16px; color: var(--te-text-muted); }
.te-menu__item.danger { color: var(--te-danger); } .te-menu__item.danger svg { color: var(--te-danger); }
.te-menu__div { height: 1px; background: var(--te-border-alt); margin: 5px 0; }