/* ============================================================
   TalentBridge — Global Stylesheet
   Target: all pages + iframe pages (orgchart, contract)
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-primary:      #2c3e50;
    --color-primary-light:#3d5166;
    --color-accent:       #2980b9;
    --color-accent-hover: #1f6391;
    --color-success:      #27ae60;
    --color-warning:      #f39c12;
    --color-danger:       #e74c3c;
    --color-danger-hover: #c0392b;
    --color-bg:           #f0f2f5;
    --color-surface:      #ffffff;
    --color-border:       #d1d5db;
    --color-text:         #1a1a2e;
    --color-muted:        #6b7280;
    --color-disabled-bg:  #e5e7eb;
    --color-disabled-text:#9ca3af;
    --color-badge-active: #d1fae5;
    --color-badge-active-text: #065f46;
    --color-badge-inactive:#fee2e2;
    --color-badge-inactive-text:#991b1b;
    --color-badge-pending:#fef3c7;
    --color-badge-pending-text:#92400e;
    --radius:             6px;
    --radius-lg:          10px;
    --shadow:             0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:          0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --transition:         .15s ease;
    --font:               'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:          'Consolas', 'Courier New', monospace;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background:  var(--color-bg);
    color:       var(--color-text);
    min-height:  100vh;
    line-height: 1.5;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--color-accent-hover); }

img { max-width: 100%; display: block; }

/* ── Layout ───────────────────────────────────────────────── */
.tb-wrap {
    display:   flex;
    min-height: 100vh;
}

/* Sidebar nav */
.tb-sidebar {
    width:      240px;
    min-height: 100vh;
    background: var(--color-primary);
    color:      #ecf0f1;
    display:    flex;
    flex-direction: column;
    flex-shrink: 0;
}

.tb-sidebar__logo {
    padding:    24px 20px 20px;
    font-size:  1.25rem;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.tb-sidebar__logo span { color: #3498db; }

.tb-sidebar__nav { flex: 1; padding: 12px 0; }

.tb-sidebar__nav a {
    display:    flex;
    align-items: center;
    gap:        10px;
    padding:    10px 20px;
    color:      #bdc3c7;
    font-size:  .9rem;
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
}

.tb-sidebar__nav a:hover,
.tb-sidebar__nav a.active {
    background: rgba(255,255,255,.08);
    color:      #ecf0f1;
}

.tb-sidebar__nav a .nav-icon { width: 18px; text-align: center; }

.tb-sidebar__footer {
    padding:    16px 20px;
    font-size:  .8rem;
    color:      #7f8c8d;
    border-top: 1px solid rgba(255,255,255,.1);
}

/* Main content */
.tb-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tb-topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding:    14px 32px;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    position:   sticky;
    top:        0;
    z-index:    100;
}

.tb-topbar__title { font-size: 1.1rem; font-weight: 600; }

.tb-topbar__user {
    font-size:  .875rem;
    color:      var(--color-muted);
    display:    flex;
    align-items: center;
    gap:        12px;
}

.tb-content { flex: 1; padding: 32px; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border:     1px solid var(--color-border);
}

.card__header {
    padding:    20px 24px 16px;
    border-bottom: 1px solid var(--color-border);
    display:    flex;
    align-items: center;
    justify-content: space-between;
}

.card__title { font-size: 1rem; font-weight: 600; }
.card__body  { padding: 24px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     8px 18px;
    border:      none;
    border-radius: var(--radius);
    font-size:   .875rem;
    font-weight: 500;
    cursor:      pointer;
    transition:  background var(--transition), opacity var(--transition), box-shadow var(--transition);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.btn-primary   { background: var(--color-accent);   color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); color: #fff; text-decoration: none; }

.btn-secondary { background: #ecf0f1; color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { background: #dfe6e9; color: var(--color-text); text-decoration: none; }

.btn-success   { background: var(--color-success);  color: #fff; }
.btn-success:hover:not(:disabled) { background: #219a52; color: #fff; text-decoration: none; }

.btn-danger    { background: var(--color-danger);   color: #fff; }
.btn-danger:hover:not(:disabled)  { background: var(--color-danger-hover);  color: #fff; text-decoration: none; }

.btn-warning   { background: var(--color-warning);  color: #fff; }
.btn-warning:hover:not(:disabled) { background: #d68910; color: #fff; text-decoration: none; }

.btn-ghost     { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); }
.btn-ghost:hover:not(:disabled) { background: rgba(41,128,185,.08); text-decoration: none; }

.btn-sm  { padding: 5px 12px; font-size: .8rem; }
.btn-lg  { padding: 11px 28px; font-size: 1rem; }
.btn-icon { padding: 7px; border-radius: 50%; }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor:  not-allowed;
    pointer-events: none;
}

/* Specific button ID used in conditional SD tests */
#btn-approve {
    transition: opacity .3s, background .3s;
}

/* ── Forms ────────────────────────────────────────────────── */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-grid--1 { grid-template-columns: 1fr; }
.col-span-2   { grid-column: span 2; }

.field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

/* Twisted locator #9: .field-label instead of <label for="..."> */
.field-label,
label.field-label {
    font-size:   .8125rem;
    font-weight: 600;
    color:       var(--color-text);
}

.field-hint {
    font-size:  .75rem;
    color:      var(--color-muted);
    margin-top: 2px;
}

.field-error {
    font-size:  .75rem;
    color:      var(--color-danger);
    margin-top: 2px;
}

.input {
    padding:       9px 12px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     .9rem;
    font-family:   var(--font);
    background:    var(--color-surface);
    color:         var(--color-text);
    transition:    border-color var(--transition), box-shadow var(--transition);
    width:         100%;
}

.input:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(41,128,185,.15);
}

.input:disabled {
    background: var(--color-disabled-bg);
    color:      var(--color-disabled-text);
    cursor:     not-allowed;
}

/* Twisted locator #4: masked-input class on type="text" */
.input.masked-input { letter-spacing: .15em; font-family: var(--font-mono); }

/* Twisted locator #5: salary field is type="tel" */
input[type="tel"].input { font-family: var(--font-mono); }

textarea.input { resize: vertical; min-height: 90px; }

select.input { cursor: pointer; }

/* ── Custom combobox (twisted locator #6) ─────────────────── */
.combobox-wrap { position: relative; }

.combobox-wrap .input { padding-right: 36px; }

.combobox-dropdown {
    position:   absolute;
    top:        calc(100% + 4px);
    left:       0;
    right:      0;
    background: var(--color-surface);
    border:     1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index:    200;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding:    4px 0;
}

.combobox-dropdown[hidden] { display: none; }

.combobox-dropdown li {
    padding:  8px 14px;
    font-size: .875rem;
    cursor:   pointer;
    transition: background var(--transition);
}

.combobox-dropdown li:hover,
.combobox-dropdown li[aria-selected="true"] {
    background: rgba(41,128,185,.1);
}

.combobox-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
    margin-top: 8px;
}

.combobox-tag {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    padding:     3px 10px 3px 10px;
    background:  rgba(41,128,185,.12);
    color:       var(--color-accent);
    border-radius: 20px;
    font-size:   .775rem;
    font-weight: 500;
}

.combobox-tag button {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      inherit;
    font-size:  .9rem;
    line-height: 1;
    padding:    0 2px;
}

/* ── Custom semantic dropdown (twisted locator #8) ─────────── */
.listbox-wrap { position: relative; }

.listbox-trigger {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       9px 12px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    cursor:        pointer;
    background:    var(--color-surface);
    font-size:     .9rem;
    user-select:   none;
    transition:    border-color var(--transition);
}

.listbox-trigger:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(41,128,185,.15);
}

.listbox-trigger.open { border-color: var(--color-accent); }

.listbox-trigger-arrow { font-size: .7rem; color: var(--color-muted); }

.listbox-options {
    position:   absolute;
    top:        calc(100% + 4px);
    left:       0;
    right:      0;
    background: var(--color-surface);
    border:     1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index:    200;
    padding:    4px 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}

.listbox-options[hidden] { display: none; }

.listbox-options li {
    padding:  9px 14px;
    font-size: .9rem;
    cursor:   pointer;
    transition: background var(--transition);
}

.listbox-options li:hover,
.listbox-options li[aria-selected="true"] {
    background: rgba(41,128,185,.1);
}

/* Hidden input that stores the listbox value */
input.listbox-value { display: none; }

/* ── ARIA checkbox group (twisted locator #7) ─────────────── */
.aria-checkbox-group {
    display:   flex;
    flex-direction: column;
    gap:       10px;
}

.aria-checkbox {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
    padding:     8px 12px;
    border:      1px solid var(--color-border);
    border-radius: var(--radius);
    transition:  border-color var(--transition), background var(--transition);
    user-select: none;
    font-size:   .875rem;
}

.aria-checkbox:hover { border-color: var(--color-accent); background: rgba(41,128,185,.04); }

.aria-checkbox[aria-checked="true"] {
    border-color: var(--color-accent);
    background:   rgba(41,128,185,.08);
}

.aria-checkbox__box {
    width:         18px;
    height:        18px;
    border:        2px solid var(--color-border);
    border-radius: 3px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    border-color var(--transition), background var(--transition);
}

.aria-checkbox[aria-checked="true"] .aria-checkbox__box {
    background:   var(--color-accent);
    border-color: var(--color-accent);
}

.aria-checkbox__box::after {
    content:   '';
    display:   none;
    width:     5px;
    height:    9px;
    border:    2px solid #fff;
    border-top:   none;
    border-left:  none;
    transform: rotate(42deg) translateY(-1px);
}

.aria-checkbox[aria-checked="true"] .aria-checkbox__box::after { display: block; }

/* Hidden inputs for ARIA checkboxes -- named so PHP can read them */
.aria-checkbox-hidden { display: none; }

/* ── Standard radio group ─────────────────────────────────── */
.radio-group {
    display: flex;
    gap:     16px;
    flex-wrap: wrap;
}

.radio-label {
    display:     flex;
    align-items: center;
    gap:         7px;
    cursor:      pointer;
    font-size:   .875rem;
    padding:     7px 14px;
    border:      1px solid var(--color-border);
    border-radius: var(--radius);
    transition:  border-color var(--transition), background var(--transition);
}

.radio-label:hover { border-color: var(--color-accent); }

.radio-label input[type="radio"]:checked + span { color: var(--color-accent); font-weight: 600; }

.radio-label:has(input:checked) {
    border-color: var(--color-accent);
    background:   rgba(41,128,185,.06);
}

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .875rem;
}

th {
    background: var(--color-primary);
    color:      #ecf0f1;
    font-weight: 600;
    text-align: left;
    padding:    11px 14px;
    white-space: nowrap;
    cursor:     pointer;
    user-select: none;
    transition: background var(--transition);
}

th:hover { background: var(--color-primary-light); }
th.sort-asc::after  { content: ' ▲'; font-size: .65rem; }
th.sort-desc::after { content: ' ▼'; font-size: .65rem; }

/* Twisted locator #1: tfoot used for headers on dashboard table */
tfoot th {
    background:     #1a252f;
    border-top:     2px solid #3d5166;
    border-bottom:  none;
}

td {
    padding:    10px 14px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(41,128,185,.04); }

/* action icons in table cells (twisted locators #2, #3) */
.action-item {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    width:       30px;
    height:      30px;
    border-radius: 50%;
    cursor:      pointer;
    transition:  background var(--transition);
    font-size:   .95rem;
}

/* span.action-item = edit (twisted #2 -- span with role=button, no id) */
span.action-item { color: var(--color-accent); }
span.action-item:hover { background: rgba(41,128,185,.12); }

/* div.action-item = delete (twisted #3 -- same class, different element type) */
div.action-item { color: var(--color-danger); }
div.action-item:hover { background: rgba(231,76,60,.12); }

.profile-thumb {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    object-fit:    cover;
    cursor:        pointer;
    border:        2px solid var(--color-border);
    transition:    border-color var(--transition);
    background:    var(--color-disabled-bg);
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    font-size:     1rem;
}

.profile-thumb:hover { border-color: var(--color-accent); }

/* ── Badges / Status pills ────────────────────────────────── */
.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 10px;
    border-radius: 20px;
    font-size:     .75rem;
    font-weight:   600;
    white-space:   nowrap;
}

.badge-active    { background: var(--color-badge-active);   color: var(--color-badge-active-text); }
.badge-inactive  { background: var(--color-badge-inactive); color: var(--color-badge-inactive-text); }
.badge-pending   { background: var(--color-badge-pending);  color: var(--color-badge-pending-text); }
.badge-contract  { background: #ede9fe; color: #5b21b6; }
.badge-part-time { background: #e0f2fe; color: #0369a1; }

/* ── Status progress bar (async job) ─────────────────────── */
.status-bar {
    background:    #e5e7eb;
    border-radius: 20px;
    height:        8px;
    overflow:      hidden;
    margin-top:    6px;
}

.status-bar__fill {
    height:     100%;
    background: var(--color-accent);
    border-radius: 20px;
    transition: width .5s ease;
}

.status-label {
    font-size:   .8rem;
    font-weight: 600;
    margin-top:  4px;
}

.status-label.status-pending   { color: var(--color-muted); }
.status-label.status-validating{ color: var(--color-warning); }
.status-label.status-saved     { color: var(--color-accent); }
.status-label.status-complete  { color: var(--color-success); }
.status-label.status-failed    { color: var(--color-danger); }

/* Report status labels */
.status-label.status-generating { color: var(--color-warning); }
.status-label.status-ready      { color: var(--color-success); }

/* ── Detail page -- dynamic ID fields (twisted locator #11) ── */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-field {
    padding:       14px 16px;
    background:    var(--color-bg);
    border-radius: var(--radius);
    border:        1px solid var(--color-border);
}

.detail-field__label {
    font-size:   .75rem;
    font-weight: 600;
    color:       var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}

/* IDs are dynamic: field_1, field_2, etc. */
.detail-field__value { font-size: .9375rem; color: var(--color-text); }

/* ── Nested table (twisted locator #10) ──────────────────── */
.nested-table-wrap {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
    font-size:     .8rem;
}

.nested-table-wrap table { margin: 0; }
.nested-table-wrap th { font-size: .75rem; padding: 7px 10px; }
.nested-table-wrap td { padding: 6px 10px; }

/* ── iFrame containers ────────────────────────────────────── */
.iframe-section {
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    background:    var(--color-surface);
}

.iframe-section__header {
    padding:       12px 18px;
    background:    var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size:     .875rem;
    font-weight:   600;
    color:         var(--color-muted);
}

.iframe-section iframe {
    width:   100%;
    border:  none;
    display: block;
}

/* ── Drag-drop (reorder page) ─────────────────────────────── */
.sortable-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    list-style:     none;
}

.sortable-item {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       12px 16px;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
    transition:    box-shadow var(--transition), opacity var(--transition);
    cursor:        default;
}

.sortable-item.dragging {
    opacity:    .5;
    box-shadow: var(--shadow-md);
}

.sortable-item.drag-over {
    border-color: var(--color-accent);
    background:   rgba(41,128,185,.05);
}

/* Twisted locator #13: drag handle is span.drag-handle with no id */
span.drag-handle {
    cursor:    grab;
    color:     var(--color-muted);
    font-size: 1.1rem;
    padding:   4px;
    flex-shrink: 0;
}

span.drag-handle:active { cursor: grabbing; }

.sortable-item__priority {
    width:         28px;
    height:        28px;
    border-radius: 50%;
    background:    var(--color-primary);
    color:         #fff;
    font-size:     .75rem;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}

.sortable-item__label { flex: 1; font-size: .9rem; font-weight: 500; }
.sortable-item__dept  { font-size: .775rem; color: var(--color-muted); }

/* ── Alert / Flash messages ───────────────────────────────── */
.alert {
    padding:       12px 18px;
    border-radius: var(--radius);
    font-size:     .875rem;
    margin-bottom: 20px;
    border-left:   4px solid transparent;
}

.alert-success { background: #d1fae5; border-color: var(--color-success); color: #065f46; }
.alert-error   { background: #fee2e2; border-color: var(--color-danger);  color: #991b1b; }
.alert-warning { background: #fef3c7; border-color: var(--color-warning); color: #92400e; }
.alert-info    { background: #dbeafe; border-color: var(--color-accent);  color: #1e40af; }

/* ── Reports page ─────────────────────────────────────────── */
.report-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       24px;
    display:       flex;
    flex-direction: column;
    gap:           14px;
}

.report-card__title { font-size: 1rem; font-weight: 600; }
.report-card__meta  { font-size: .8rem; color: var(--color-muted); }

/* Twisted locator #12: download button is div.dl-btn role="button" */
div.dl-btn {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    padding:     9px 18px;
    background:  var(--color-success);
    color:       #fff;
    border-radius: var(--radius);
    cursor:      pointer;
    font-size:   .875rem;
    font-weight: 500;
    transition:  background var(--transition);
    user-select: none;
    width:       fit-content;
}

div.dl-btn:hover { background: #219a52; }
div.dl-btn.disabled { opacity: .5; pointer-events: none; }

/* ── Upload area ──────────────────────────────────────────── */
.upload-area {
    border:        2px dashed var(--color-border);
    border-radius: var(--radius);
    padding:       20px;
    text-align:    center;
    cursor:        pointer;
    transition:    border-color var(--transition), background var(--transition);
    font-size:     .875rem;
    color:         var(--color-muted);
}

.upload-area:hover { border-color: var(--color-accent); background: rgba(41,128,185,.04); }
.upload-area.has-file { border-color: var(--color-success); background: rgba(39,174,96,.04); color: var(--color-text); }

/* ── Modal (for profile image click) ─────────────────────── */
.modal-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.55);
    z-index:         1000;
    align-items:     center;
    justify-content: center;
}

.modal-overlay.open { display: flex; }

.modal {
    background:    var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow:    0 20px 60px rgba(0,0,0,.25);
    max-width:     480px;
    width:         90%;
    padding:       28px;
}

.modal__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
.modal__close {
    float:      right;
    background: none;
    border:     none;
    font-size:  1.3rem;
    cursor:     pointer;
    color:      var(--color-muted);
    line-height: 1;
}

/* ── Login page ───────────────────────────────────────────── */
.login-wrap {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(135deg, #1a252f 0%, #2c3e50 50%, #3d5166 100%);
}

.login-card {
    background:    var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow:    0 20px 60px rgba(0,0,0,.3);
    padding:       40px;
    width:         380px;
}

.login-logo {
    font-size:   1.5rem;
    font-weight: 700;
    text-align:  center;
    margin-bottom: 8px;
    color:       var(--color-primary);
}

.login-logo span { color: var(--color-accent); }
.login-sub { text-align: center; color: var(--color-muted); font-size: .875rem; margin-bottom: 28px; }

/* ── Page header row ──────────────────────────────────────── */
.page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
    flex-wrap:       wrap;
    gap:             12px;
}

.page-title { font-size: 1.25rem; font-weight: 700; }

/* ── Misc utilities ───────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.flex   { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-muted  { color: var(--color-muted); }
.text-sm     { font-size: .875rem; }
.text-xs     { font-size: .775rem; }
.font-mono   { font-family: var(--font-mono); }
.hidden      { display: none !important; }
.w-full      { width: 100%; }
.text-center { text-align: center; }

/* Responsive */
@media (max-width: 768px) {
    .tb-sidebar { display: none; }
    .tb-content { padding: 20px 16px; }
    .form-grid  { grid-template-columns: 1fr; }
    .form-grid--3 { grid-template-columns: 1fr; }
    .col-span-2 { grid-column: span 1; }
    .detail-grid { grid-template-columns: 1fr; }
}