/* SRTTS: tickets table (control bar, bulk bar, sortable header, dense rows, icon actions, badges, pagination).
   Works in light and dark mode. Colours come from tokens on .tt-card, so a theme change only touches the token block. */

/* ---------- 0. Tokens ---------- */
.tt-card {
    --tt-line: #EAEAEA;           /* row divider */
    --tt-hover: #F5F5F5;          /* row hover tint */
    --tt-sel: #EAEAEA;            /* selected row */
    --tt-accent: #6F6F6F;
    --tt-field: #FFFFFF;
    --tt-field-line: #D9D9D9;
    --tt-box: #989898;            /* checkbox outline (3:1 against the card) */
    --tt-prefix: var(--muted, #707070);
    --tt-tip-bg: #0C0C0C;
    --tt-tip-ink: #F6F6F6;
    --tt-tip-line: #424242;
    --tt-danger: #B42318;
    --tt-danger-bg: rgba(220, 68, 68, .10);
}
html[data-theme="dark"] .tt-card {
    --tt-line: rgba(196, 196, 196,.14);
    --tt-hover: #262626;
    --tt-sel: rgba(165, 165, 165,.16);
    --tt-accent: #A5A5A5;
    --tt-field: #181818;
    --tt-field-line: #424242;
    --tt-box: #6D6D6D;
    --tt-prefix: #989898;
    --tt-danger: #FFA9AE;
    --tt-danger-bg: rgba(248, 113, 113, .16);
}

.tt-card [hidden],
.tt-card tr[hidden] { display: none !important; }

.tt-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 1. Control bar (title left, search + status right) ---------- */
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.tt-title { margin: 0; }
.tt-count { font-size: 13px; font-weight: 500; color: var(--muted); }
.tt-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.tt-search { position: relative; flex: 0 1 300px; min-width: 200px; }
.tt-search .form-control { width: 100%; height: 38px; padding: 0 12px 0 36px; font-size: 13px; }
.tt-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tt-status .form-control { height: 38px; min-width: 170px; padding: 0 12px; font-size: 13px; }

/* ---------- 2. Bulk action bar (appears when rows are selected) ---------- */
.tt-bulkbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin: 0; padding: 10px 20px;
    background: var(--tt-sel); border-bottom: 1px solid var(--tt-line);
    font-size: 13px; color: var(--ink);
}
.tt-bulk-count strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-link {
    padding: 4px 6px; margin: 0; border: 0; border-radius: 6px; background: transparent;
    color: var(--tt-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.tt-link:hover { text-decoration-thickness: 2px; }
.tt-bulk-del {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px; border-radius: 8px;
    border: 1px solid rgba(220, 68, 68, .45); background: var(--tt-danger-bg); color: var(--tt-danger);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.tt-bulk-del:hover { background: rgba(220, 68, 68, .22); border-color: rgba(220, 68, 68, .7); }
.tt-link:focus-visible, .tt-bulk-del:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; }

/* ---------- 3. Table: header, density, row scanning ---------- */
.data-table.tt-table { border-collapse: separate; border-spacing: 0; }
.data-table.tt-table thead th {
    padding: 11px 10px; background: transparent;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--tt-line); white-space: nowrap;
}
.data-table.tt-table td {
    padding: 10px 10px; vertical-align: middle; line-height: 1.35;
    border-bottom: 1px solid var(--tt-line); background: transparent; color: var(--ink);
    transition: background-color .15s ease;
}
.data-table.tt-table th:first-child, .data-table.tt-table td:first-child { padding-left: 16px; }
.data-table.tt-table th:last-child, .data-table.tt-table td:last-child { padding-right: 16px; }
.data-table.tt-table tbody tr:last-child td { border-bottom: 0; }
/* Cancel the old zebra striping so hover and selection are the only row tints. */
.data-table.tt-table tbody tr:nth-child(even) td { background: transparent; }
.data-table.tt-table tbody tr:hover td,
.data-table.tt-table tbody tr:focus-within td { background: var(--tt-hover); }
.data-table.tt-table tbody tr.is-selected td { background: var(--tt-sel); }
.data-table.tt-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--tt-accent); }

/* Sortable headers */
.tt-sort {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 -6px; padding: 4px 6px;
    border: 0; border-radius: 6px; background: transparent; color: inherit;
    font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.tt-sort:hover { color: var(--ink); background: rgba(165, 165, 165,.12); }
.tt-sort:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 1px; }
.tt-caret { width: 8px; height: 12px; flex: none; }
.tt-caret path { fill: currentColor; opacity: .35; transition: opacity .15s, fill .15s; }
.tt-sort:hover .tt-caret path { opacity: .6; }
th[aria-sort="ascending"] .tt-sort, th[aria-sort="descending"] .tt-sort { color: var(--ink); }
th[aria-sort="ascending"] .tt-caret .up { opacity: 1; fill: var(--tt-accent); }
th[aria-sort="descending"] .tt-caret .down { opacity: 1; fill: var(--tt-accent); }

/* Checkbox column (custom box, real input underneath for keyboard and screen readers) */
.data-table.tt-table th.tt-col-check, .data-table.tt-table td.tt-col-check { width: 1%; padding-right: 0; }
.tt-check { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; cursor: pointer; }
.tt-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tt-check-box {
    width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--tt-box); background: var(--tt-field);
    display: inline-flex; align-items: center; justify-content: center; pointer-events: none;
    transition: background-color .12s, border-color .12s;
}
.tt-check-box::after { content: ""; display: none; }
.tt-check:hover .tt-check-box { border-color: var(--tt-accent); }
.tt-check input:checked + .tt-check-box,
.tt-check input:indeterminate + .tt-check-box { background: var(--tt-accent); border-color: var(--tt-accent); }
.tt-check input:checked + .tt-check-box::after {
    display: block; width: 5px; height: 9px; margin-top: -2px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tt-check input:indeterminate + .tt-check-box::after { display: block; width: 8px; height: 2px; background: #fff; border: 0; border-radius: 1px; transform: none; margin: 0; }
html[data-theme="dark"] .tt-check input:checked + .tt-check-box::after { border-color: #121212; }
html[data-theme="dark"] .tt-check input:indeterminate + .tt-check-box::after { background: #121212; }
.tt-check input:focus-visible + .tt-check-box { outline: 2px solid var(--tt-accent); outline-offset: 2px; }

/* ---------- 4. Cell typography and hierarchy ---------- */
.tt-primary { color: var(--ink); font-weight: 600; font-size: 14px; }
.tt-secondary { color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* Ticket number: dim repeated prefix, bold the unique part, copy icon on hover or focus */
.tt-tkt { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-tkt-prefix { color: var(--tt-prefix); font-weight: 500; }
.tt-tkt-id { color: var(--ink); font-weight: 700; }
.tt-copy {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
    opacity: 0; transition: opacity .12s, background-color .12s, color .12s;
}
.tt-table tr:hover .tt-copy, .tt-table tr:focus-within .tt-copy, .tt-copy:focus-visible, .tt-copy.is-copied { opacity: 1; }
.tt-copy:hover { background: rgba(165, 165, 165,.16); color: var(--ink); }
.tt-copy:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 1px; }
.tt-copy.is-copied { color: #2FB67C; }
.tt-copy .ico-check { display: none; }
.tt-copy.is-copied .ico-copy { display: none; }
.tt-copy.is-copied .ico-check { display: block; }
@media (hover: none) { .tt-copy { opacity: .7; } }

/* Subject: first line is the focal point, wrapped lines fall back to muted text */
.tt-subject { max-width: 300px; color: var(--muted); font-size: 13px; }
.tt-subject::first-line { color: var(--ink); font-weight: 600; }

/* Date: relative text first, absolute date underneath */
.tt-time { display: block; }
.tt-time .tt-primary { font-weight: 500; }

/* Unassigned: dashed outline so real names stand apart */
.tt-unassigned {
    display: inline-block; padding: 2px 10px; border: 1px dashed var(--tt-box); border-radius: 999px;
    color: var(--muted); font-size: 12px; font-style: italic; font-weight: 500; white-space: nowrap;
}

/* ---------- 5. Icon actions with tooltips ---------- */
.data-table.tt-table td.actions-cell { min-width: 0; width: 1%; white-space: nowrap; }
.tt-actions { display: flex; align-items: center; gap: 4px; }
.data-table.tt-table td.actions-cell .tt-actions form { display: flex; margin: 0; }
.tt-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer; text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.tt-icon-btn:hover, .tt-icon-btn:focus-visible { background: rgba(165, 165, 165,.16); color: var(--ink); border-color: rgba(165, 165, 165,.35); }
.tt-icon-btn:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; }
.tt-icon-danger:hover, .tt-icon-danger:focus-visible { background: var(--tt-danger-bg); color: var(--tt-danger); border-color: rgba(220, 68, 68, .45); }
.tt-icon-danger:focus-visible { outline-color: var(--tt-danger); }

.tt-icon-btn::after, .tt-copy::after {
    content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px);
    padding: 4px 8px; border-radius: 6px; background: var(--tt-tip-bg); color: var(--tt-tip-ink); border: 1px solid var(--tt-tip-line);
    font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .12s, transform .12s; z-index: 20;
}
.tt-icon-btn:hover::after, .tt-icon-btn:focus-visible::after,
.tt-copy:hover::after, .tt-copy:focus-visible::after, .tt-copy.is-copied::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- 6. Badges: translucent tint, matching bright text (dark) or deep text (light) ---------- */
.tt-table .badge {
    --c: 160 155 190; --tl: #595959; --td: #C5C5C5;
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; transform: none;
    font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
    background: rgb(var(--c) / .16); color: var(--tl); border: 1px solid rgb(var(--c) / .34);
}
.tt-table .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
html[data-theme="dark"] .tt-table .badge { color: var(--td); border-color: rgb(var(--c) / .32); }

/* Status */
.tt-table .badge-status-submitted   { --c: 245 181 68;  --tl: #8A5300; --td: #FFD27A; }
.tt-table .badge-status-review      { --c: 157 130 238; --tl: #626262; --td: #D9D9D9; }
.tt-table .badge-status-forpay      { --c: 251 146 60;  --tl: #9A4A00; --td: #FFC089; }
.tt-table .badge-status-paypending  { --c: 56 189 248;  --tl: #595959; --td: #CFCFCF; }
.tt-table .badge-status-payverified { --c: 45 212 191;  --tl: #0B6B5E; --td: #7CEBD9; }
.tt-table .badge-status-progress    { --c: 129 140 248; --tl: #525252; --td: #C3C3C3; }
.tt-table .badge-status-ready       { --c: 163 230 53;  --tl: #4D6B00; --td: #D4F28A; }
.tt-table .badge-status-claimed     { --c: 148 163 184; --tl: #545454; --td: #D4D4D4; }
.tt-table .badge-status-resolved    { --c: 52 211 153;  --tl: #11704A; --td: #8FE0B5; }
.tt-table .badge-status-closed,
.tt-table .badge-status-default     { --c: 160 155 190; --tl: #595959; --td: #C5C5C5; }
/* Priority */
.tt-table .badge-priority-normal    { --c: 160 155 190; --tl: #595959; --td: #C5C5C5; }
.tt-table .badge-priority-high      { --c: 251 146 60;  --tl: #9A4A00; --td: #FFC089; }
.tt-table .badge-priority-urgent    { --c: 248 113 113; --tl: #B42318; --td: #FFA9AE; }

/* ---------- 7. Empty state ---------- */
.tt-empty { padding: 28px 16px !important; text-align: center; color: var(--muted) !important; }

/* ---------- 8. Pagination footer ---------- */
.tt-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 28px;
    padding: 10px 16px; border-top: 1px solid var(--tt-line); font-size: 13px; color: var(--muted);
}
.tt-rows { display: inline-flex; align-items: center; gap: 8px; }
.tt-select {
    height: 32px; padding: 0 8px; border: 1px solid var(--tt-field-line); border-radius: 8px;
    background: var(--tt-field); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.tt-select:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 1px; }
.tt-range { min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); }
.tt-pager { display: inline-flex; gap: 4px; }
.tt-pg {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
    border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.tt-pg:hover:not(:disabled) { background: rgba(165, 165, 165,.16); border-color: rgba(165, 165, 165,.35); }
.tt-pg:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; }
.tt-pg:disabled { color: var(--muted); opacity: .4; cursor: not-allowed; }

/* ---------- 9. Small screens ---------- */
@media (max-width: 760px) {
    .tt-controls { width: 100%; flex-wrap: wrap; }
    .tt-search { flex: 1 1 100%; }
    .tt-status { flex: 1 1 140px; }
    .tt-status .form-control { width: 100%; }
    .tt-foot { justify-content: space-between; }
    .tt-bulk-del { margin-left: 0; }
    /* The base stylesheet turns rows into stacked cards on phones. */
    .data-table.tt-table td.tt-col-check { padding: 10px 16px 0; }
    .data-table.tt-table td.tt-col-check::before { display: none; }
    .tt-copy { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
    .tt-icon-btn, .tt-icon-btn::after, .tt-copy, .tt-copy::after, .tt-pg, .tt-sort,
    .tt-check-box, .data-table.tt-table td, .tt-caret path { transition: none; }
}


/* =====================================================================
   Manage Users table: fits the screen with no sideways scrolling.
   - Edit / Reset Password / Delete become icon buttons (label stays for screen readers + tooltip)
   - tighter cell padding, long emails and offices wrap instead of stretching the table
   ===================================================================== */
.users-table {
  width: 100%;
}

.users-table th,
.users-table td {
  padding: 12px 10px;
}

.users-table th:first-child,
.users-table td:first-child {
  padding-left: 20px;
}

.users-table th:last-child,
.users-table td:last-child {
  padding-right: 20px;
}

.users-table td[data-label="Full Name"] {
  min-width: 120px;
}

.users-table td[data-label="Email"] {
  overflow-wrap: anywhere;
}

.users-table td[data-label="Created"],
.users-table td[data-label="Status"],
.users-table td[data-label="Role"] {
  white-space: nowrap;
}

.users-table td[data-label="Actions"] {
  width: 1%;
  white-space: nowrap;
}

.users-table td[data-label="Actions"] form {
  margin-left: 6px !important;
}

/* icon-only action buttons */
.users-table .btn-icon {
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  gap: 0;
}

.users-table .btn-icon .btn-ico {
  width: 18px;
  height: 18px;
}

.users-table .btn-icon .btn-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* desktop: never show a sideways scrollbar for this table */
@media (min-width: 721px) {
  .table-responsive:has(> .users-table) {
    overflow-x: visible;
  }
}

/* phones: the table turns into cards, so show the full labels again */
@media (max-width: 720px) {
  .users-table .btn-icon {
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 0 14px;
    gap: 6px;
  }

  .users-table .btn-icon .btn-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}