/* ==========================================================================
   Component layer — Green Tech Official
   --------------------------------------------------------------------------
   Semantic classes for every recurring surface in the product. Page modules
   compose these instead of re-deriving Tailwind utility chains, which keeps
   twenty-plus screens visually identical and makes a restyle a one-file job.

   Sections
     1. Buttons            6. Cards & sections     11. Drawer
     2. Form controls      7. Tables & data grid   12. Toast
     3. Badges & pills     8. Tabs                 13. Skeletons & empty
     4. Battery motifs     9. Dropdown & popover   14. Timeline & activity
     5. Stat tiles        10. Modal                15. Layout & print helpers
   ========================================================================== */

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--gt-radius-sm);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--gt-dur-fast) var(--gt-ease),
              border-color var(--gt-dur-fast) var(--gt-ease),
              color var(--gt-dur-fast) var(--gt-ease),
              box-shadow var(--gt-dur-fast) var(--gt-ease),
              transform var(--gt-dur-fast) var(--gt-ease);
}
.btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.995); }
.btn:disabled,
.btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.btn .lucide,
.btn svg { width: 1rem; height: 1rem; flex: none; }

.btn-primary {
  background: rgb(var(--gt-primary));
  color: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}
.btn-primary:hover:not(:disabled) { background: rgb(var(--gt-primary-strong)); }
.dark .btn-primary { color: rgb(var(--gt-canvas)); }

.btn-secondary {
  background: rgb(var(--gt-surface));
  border-color: rgb(var(--gt-hairline));
  color: rgb(var(--gt-ink));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
.btn-secondary:hover:not(:disabled) { background: rgb(var(--gt-inset)); border-color: rgb(var(--gt-faint) / 0.5); }

.btn-ghost { background: transparent; color: rgb(var(--gt-muted)); }
.btn-ghost:hover:not(:disabled) { background: rgb(var(--gt-ink) / 0.05); color: rgb(var(--gt-ink)); }

.btn-danger { background: rgb(var(--gt-danger)); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(0.93); }
.dark .btn-danger { color: rgb(var(--gt-canvas)); }

.btn-success { background: rgb(var(--gt-success)); color: #fff; }
.btn-success:hover:not(:disabled) { filter: brightness(0.93); }
.dark .btn-success { color: rgb(var(--gt-canvas)); }

.btn-soft {
  background: rgb(var(--gt-primary-soft));
  color: rgb(var(--gt-primary));
  border-color: rgb(var(--gt-primary) / 0.16);
}
.btn-soft:hover:not(:disabled) { background: rgb(var(--gt-primary) / 0.14); }

.btn-sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; border-radius: 7px; }
.btn-sm .lucide, .btn-sm svg { width: 0.875rem; height: 0.875rem; }
.btn-lg { padding: 0.6875rem 1.125rem; font-size: 0.9375rem; }

.btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; }
.btn-icon.btn-sm { padding: 0.375rem; width: 1.875rem; height: 1.875rem; }

/* Split-button group: [ Primary action | ▾ ] */
.btn-group { display: inline-flex; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.btn-group > .btn:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ==========================================================================
   2. Form controls
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }

.label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(var(--gt-ink));
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.label--required::after { content: '*'; color: rgb(var(--gt-danger)); font-weight: 700; }

.hint { font-size: 0.75rem; color: rgb(var(--gt-faint)); line-height: 1.4; }

.error-text {
  display: flex;
  align-items: flex-start;
  gap: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(var(--gt-danger));
  line-height: 1.4;
}

.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius-sm);
  background: rgb(var(--gt-surface));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(var(--gt-ink));
  transition: border-color var(--gt-dur-fast) var(--gt-ease),
              box-shadow var(--gt-dur-fast) var(--gt-ease),
              background-color var(--gt-dur-fast) var(--gt-ease);
}
.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) { border-color: rgb(var(--gt-faint) / 0.6); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: rgb(var(--gt-primary));
  box-shadow: 0 0 0 3px rgb(var(--gt-primary) / 0.15);
}

.input:disabled,
.select:disabled,
.textarea:disabled { background: rgb(var(--gt-inset)); color: rgb(var(--gt-faint)); cursor: not-allowed; }

.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: rgb(var(--gt-danger)); }
.input[aria-invalid='true']:focus,
.select[aria-invalid='true']:focus,
.textarea[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgb(var(--gt-danger) / 0.15); }

.textarea { min-height: 5.25rem; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
}
.dark .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Numeric entry — voltages, capacities, money. Right-aligned mono so decimal
   points line up down a column of inputs. */
.input--num { font-family: 'JetBrains Mono', ui-monospace, monospace; text-align: right; font-variant-numeric: tabular-nums; }

/* Input with a leading icon or trailing unit */
.input-group { position: relative; display: flex; align-items: center; }
.input-group > .lucide,
.input-group > svg {
  position: absolute; left: 0.625rem;
  width: 1rem; height: 1rem;
  color: rgb(var(--gt-faint)); pointer-events: none;
}
.input-group > .input { padding-left: 2.125rem; }
.input-group .input-suffix {
  position: absolute; right: 0.75rem;
  font-size: 0.75rem; font-weight: 600;
  color: rgb(var(--gt-faint)); pointer-events: none;
}
.input-group:has(.input-suffix) > .input { padding-right: 3rem; }

.checkbox, .radio {
  appearance: none;
  width: 1rem; height: 1rem;
  flex: none;
  border: 1.5px solid rgb(var(--gt-faint));
  background: rgb(var(--gt-surface));
  cursor: pointer;
  transition: all var(--gt-dur-fast) var(--gt-ease);
}
.checkbox { border-radius: 4px; }
.radio { border-radius: 50%; }

.checkbox:checked, .radio:checked { background-color: rgb(var(--gt-primary)); border-color: rgb(var(--gt-primary)); }
.checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: 100%;
}
.checkbox:indeterminate {
  background-color: rgb(var(--gt-primary)); border-color: rgb(var(--gt-primary));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='7.25' width='8' height='1.6' rx='.8' fill='white'/%3E%3C/svg%3E");
}
.radio:checked { box-shadow: inset 0 0 0 3px rgb(var(--gt-surface)); }
.checkbox:focus-visible, .radio:focus-visible { outline: 2px solid rgb(var(--gt-primary)); outline-offset: 2px; }

.switch {
  appearance: none;
  position: relative;
  width: 2.25rem; height: 1.25rem;
  flex: none;
  border-radius: var(--gt-radius-full);
  background: rgb(var(--gt-hairline));
  cursor: pointer;
  transition: background-color var(--gt-dur) var(--gt-ease);
}
.switch::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.2);
  transition: transform var(--gt-dur) var(--gt-ease);
}
.switch:checked { background: rgb(var(--gt-primary)); }
.switch:checked::after { transform: translateX(1rem); }

/* Selectable card — used for role pickers, payment methods, repair decisions */
.choice {
  display: flex; align-items: flex-start; gap: 0.625rem;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius);
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  transition: all var(--gt-dur-fast) var(--gt-ease);
}
.choice:hover { border-color: rgb(var(--gt-faint) / 0.6); background: rgb(var(--gt-inset)); }
.choice:has(:checked) {
  border-color: rgb(var(--gt-primary));
  background: rgb(var(--gt-primary-soft));
  box-shadow: 0 0 0 1px rgb(var(--gt-primary));
}

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.col-6  { grid-column: span 12 / span 12; }
.col-4  { grid-column: span 12 / span 12; }
.col-3  { grid-column: span 6  / span 6;  }
.col-12 { grid-column: span 12 / span 12; }
@media (min-width: 768px) {
  .col-6 { grid-column: span 6 / span 6; }
  .col-4 { grid-column: span 4 / span 4; }
  .col-3 { grid-column: span 3 / span 3; }
}

/* ==========================================================================
   3. Badges & pills
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border-radius: var(--gt-radius-full);
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge .lucide, .badge svg { width: 0.75rem; height: 0.75rem; }

.badge-neutral { background: rgb(var(--gt-ink) / 0.06); color: rgb(var(--gt-muted)); }
.badge-primary { background: rgb(var(--gt-primary) / 0.10); color: rgb(var(--gt-primary)); }
.badge-success { background: rgb(var(--gt-success) / 0.12); color: rgb(var(--gt-success)); }
.badge-warn    { background: rgb(var(--gt-warn) / 0.14);    color: rgb(var(--gt-warn)); }
.badge-danger  { background: rgb(var(--gt-danger) / 0.11);  color: rgb(var(--gt-danger)); }
.badge-info    { background: rgb(var(--gt-info) / 0.11);    color: rgb(var(--gt-info)); }

/* Status badge carries a leading dot — colour alone never conveys state. */
.badge-dot::before {
  content: '';
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius-full);
  background: rgb(var(--gt-surface));
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem; font-weight: 500;
  color: rgb(var(--gt-muted));
}
.chip button { display: inline-flex; color: rgb(var(--gt-faint)); }
.chip button:hover { color: rgb(var(--gt-danger)); }

.chip-code {
  border-radius: 5px;
  background: rgb(var(--gt-ink) / 0.06);
  padding: 0.0625rem 0.3125rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
}

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem;
  border: 1px solid rgb(var(--gt-hairline));
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgb(var(--gt-surface));
  padding: 0 0.3125rem;
  font-family: inherit;
  font-size: 0.6875rem; font-weight: 600;
  color: rgb(var(--gt-muted));
}

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  border-radius: 50%;
  background: rgb(var(--gt-primary) / 0.12);
  font-size: 0.75rem; font-weight: 700;
  color: rgb(var(--gt-primary));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Battery motifs — the product's signature language
   --------------------------------------------------------------------------
   `.cell-rail`  a segmented gauge. Used for the job pipeline (one segment
                 per workflow stage) and for pack charge level.
   `.cell-grid`  the physical cell layout of a pack, one tile per 18650 cell,
                 coloured by measured health.
   ========================================================================== */

.cell-rail { display: flex; align-items: center; gap: 2px; }
.cell-rail > span {
  width: 0.5rem; height: 1rem;
  border-radius: 2px;
  background: rgb(var(--gt-hairline));
  transition: background-color var(--gt-dur) var(--gt-ease);
}
.cell-rail > span[data-on='1']   { background: rgb(var(--gt-charge)); }
.cell-rail > span[data-on='now'] { background: rgb(var(--gt-primary)); animation: gt-pulse-soft 1.8s var(--gt-ease) infinite; }
.cell-rail > span[data-on='halt']{ background: rgb(var(--gt-danger)); }

.cell-rail--sm > span { width: 0.25rem; height: 0.625rem; border-radius: 1.5px; }
.cell-rail--boot > span { width: 0.75rem; height: 2rem; border-radius: 3px; animation: gt-charge 1.4s var(--gt-ease) infinite; }
.cell-rail--boot > span:nth-child(2) { animation-delay: 0.12s; }
.cell-rail--boot > span:nth-child(3) { animation-delay: 0.24s; }
.cell-rail--boot > span:nth-child(4) { animation-delay: 0.36s; }
.cell-rail--boot > span:nth-child(5) { animation-delay: 0.48s; }

.cell-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
  gap: 0.375rem;
}
.cell-tile {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  aspect-ratio: 1 / 1.9;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: 5px;
  background: rgb(var(--gt-inset));
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5625rem;
  line-height: 1;
  color: rgb(var(--gt-faint));
  cursor: pointer;
  transition: all var(--gt-dur-fast) var(--gt-ease);
}
.cell-tile::before {
  content: '';
  position: absolute; top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 3px;
  border-radius: 2px 2px 0 0;
  background: rgb(var(--gt-hairline));
}
.cell-tile:hover { transform: translateY(-1px); box-shadow: var(--gt-shadow-lift); }
.cell-tile[data-health='good'] { border-color: rgb(var(--gt-success) / 0.55); background: rgb(var(--gt-success) / 0.12); color: rgb(var(--gt-success)); }
.cell-tile[data-health='weak'] { border-color: rgb(var(--gt-warn) / 0.55);    background: rgb(var(--gt-warn) / 0.14);    color: rgb(var(--gt-warn)); }
.cell-tile[data-health='dead'] { border-color: rgb(var(--gt-danger) / 0.55);  background: rgb(var(--gt-danger) / 0.12);  color: rgb(var(--gt-danger)); }
.cell-tile[data-health='new']  { border-color: rgb(var(--gt-primary) / 0.55); background: rgb(var(--gt-primary) / 0.12); color: rgb(var(--gt-primary)); }

/* Horizontal capacity meter used in tables and stat tiles */
.meter { height: 0.375rem; border-radius: var(--gt-radius-full); background: rgb(var(--gt-hairline)); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--gt-charge)); transition: width var(--gt-dur-slow) var(--gt-ease); }
.meter[data-tone='warn']   > i { background: rgb(var(--gt-warn)); }
.meter[data-tone='danger'] > i { background: rgb(var(--gt-danger)); }
.meter[data-tone='primary']> i { background: rgb(var(--gt-primary)); }

/* ==========================================================================
   5. Stat tiles
   ========================================================================== */

.stat {
  position: relative;
  display: flex; flex-direction: column; gap: 0.625rem;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius);
  background: rgb(var(--gt-surface));
  padding: 1rem 1.125rem;
  box-shadow: var(--gt-shadow-card);
  transition: box-shadow var(--gt-dur) var(--gt-ease), transform var(--gt-dur) var(--gt-ease);
}
a.stat:hover, .stat--link:hover { box-shadow: var(--gt-shadow-lift); transform: translateY(-1px); }

.stat__label {
  display: flex; align-items: center; gap: 0.4375rem;
  font-size: 0.75rem; font-weight: 600;
  color: rgb(var(--gt-muted));
  letter-spacing: 0.01em;
}
.stat__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem; font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--gt-ink));
}
.stat__foot { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgb(var(--gt-faint)); }
.stat__delta { display: inline-flex; align-items: center; gap: 0.125rem; font-weight: 600; }
.stat__delta--up   { color: rgb(var(--gt-success)); }
.stat__delta--down { color: rgb(var(--gt-danger)); }
.stat__icon {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--gt-radius-sm);
  background: rgb(var(--gt-primary) / 0.10);
  color: rgb(var(--gt-primary));
}
.stat__icon .lucide, .stat__icon svg { width: 0.9375rem; height: 0.9375rem; }
.stat__icon[data-tone='success'] { background: rgb(var(--gt-success) / 0.12); color: rgb(var(--gt-success)); }
.stat__icon[data-tone='warn']    { background: rgb(var(--gt-warn) / 0.14);    color: rgb(var(--gt-warn)); }
.stat__icon[data-tone='danger']  { background: rgb(var(--gt-danger) / 0.11);  color: rgb(var(--gt-danger)); }
.stat__icon[data-tone='neutral'] { background: rgb(var(--gt-ink) / 0.06);     color: rgb(var(--gt-muted)); }

/* ==========================================================================
   6. Cards & page sections
   ========================================================================== */

.card {
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius);
  background: rgb(var(--gt-surface));
  box-shadow: var(--gt-shadow-card);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgb(var(--gt-hairline));
  padding: 0.875rem 1.125rem;
}
.card__title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.card__sub   { font-size: 0.75rem; color: rgb(var(--gt-faint)); margin-top: 0.125rem; }
.card__body  { padding: 1.125rem; }
.card__foot  { border-top: 1px solid rgb(var(--gt-hairline)); padding: 0.875rem 1.125rem; background: rgb(var(--gt-inset)); border-radius: 0 0 var(--gt-radius) var(--gt-radius); }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.page-sub   { margin-top: 0.25rem; font-size: 0.875rem; color: rgb(var(--gt-muted)); }

.section-label {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: rgb(var(--gt-faint));
}

.breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: rgb(var(--gt-faint)); }
.breadcrumb a { color: rgb(var(--gt-muted)); border-radius: 4px; }
.breadcrumb a:hover { color: rgb(var(--gt-primary)); }
.breadcrumb [aria-current='page'] { color: rgb(var(--gt-ink)); font-weight: 600; }

/* Definition list used across every detail panel */
.dl { display: grid; gap: 0.75rem 1rem; }
.dl__row { display: grid; grid-template-columns: minmax(7rem, 34%) 1fr; gap: 0.75rem; align-items: baseline; }
.dl__k { font-size: 0.75rem; font-weight: 500; color: rgb(var(--gt-muted)); }
.dl__v { font-size: 0.8125rem; font-weight: 500; color: rgb(var(--gt-ink)); min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================================
   7. Tables & data grid
   ========================================================================== */

.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }

.table thead th {
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid rgb(var(--gt-hairline));
  background: rgb(var(--gt-inset));
  padding: 0.5625rem 0.875rem;
  text-align: left;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.055em;
  color: rgb(var(--gt-muted));
  white-space: nowrap;
}
.table thead th.is-sortable { cursor: pointer; user-select: none; }
.table thead th.is-sortable:hover { color: rgb(var(--gt-ink)); }
.table thead th[aria-sort]:not([aria-sort='none']) { color: rgb(var(--gt-primary)); }

.table tbody td {
  border-bottom: 1px solid rgb(var(--gt-hairline));
  padding: var(--gt-row-py) 0.875rem;
  vertical-align: middle;
  color: rgb(var(--gt-ink));
}
.table tbody tr { transition: background-color var(--gt-dur-fast) var(--gt-ease); }
.table tbody tr:hover { background: rgb(var(--gt-primary) / 0.035); }
.table tbody tr[data-selected='true'] { background: rgb(var(--gt-primary) / 0.07); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-clickable { cursor: pointer; }

.table .cell-num   { text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.table .cell-center{ text-align: center; }
.table .cell-tight { width: 1%; white-space: nowrap; }
.table .cell-id    { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 500; }

/* Row action cluster stays invisible until the row is hovered or focused,
   so a 12-column table does not read as 12 columns of icons. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.125rem; opacity: 0; transition: opacity var(--gt-dur-fast) var(--gt-ease); }
tr:hover .row-actions,
tr:focus-within .row-actions,
.row-actions:focus-within { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }

/* Toolbar sitting above a table: search, filters, bulk actions */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  border-bottom: 1px solid rgb(var(--gt-hairline));
  padding: 0.75rem 1.125rem;
}
.toolbar__spacer { flex: 1 1 auto; }

.bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem;
  border-bottom: 1px solid rgb(var(--gt-primary) / 0.25);
  background: rgb(var(--gt-primary-soft));
  padding: 0.625rem 1.125rem;
  font-size: 0.8125rem; font-weight: 600;
  color: rgb(var(--gt-primary));
  animation: gt-rise var(--gt-dur) var(--gt-ease);
}

.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid rgb(var(--gt-hairline));
  padding: 0.6875rem 1.125rem;
  font-size: 0.8125rem; color: rgb(var(--gt-muted));
}
.pager__pages { display: flex; align-items: center; gap: 0.1875rem; }
.pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.875rem; height: 1.875rem;
  border-radius: 7px;
  padding: 0 0.4375rem;
  font-size: 0.8125rem; font-weight: 600;
  color: rgb(var(--gt-muted));
  transition: all var(--gt-dur-fast) var(--gt-ease);
}
.pager__btn:hover:not(:disabled) { background: rgb(var(--gt-ink) / 0.05); color: rgb(var(--gt-ink)); }
.pager__btn[aria-current='page'] { background: rgb(var(--gt-primary)); color: #fff; }
.dark .pager__btn[aria-current='page'] { color: rgb(var(--gt-canvas)); }
.pager__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mobile: tables become stacked records. `data-th` supplies the row label. */
@media (max-width: 767px) {
  .table--stack thead { display: none; }
  .table--stack tbody tr {
    display: block;
    border: 1px solid rgb(var(--gt-hairline));
    border-radius: var(--gt-radius);
    background: rgb(var(--gt-surface));
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.625rem;
  }
  .table--stack tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    border: 0;
    padding: 0.3125rem 0;
    text-align: right;
  }
  .table--stack tbody td::before {
    content: attr(data-th);
    flex: none;
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.055em;
    color: rgb(var(--gt-faint));
    text-align: left;
  }
  .table--stack tbody td:empty { display: none; }
  .table--stack .row-actions { opacity: 1; }
}

/* ==========================================================================
   8. Tabs
   ========================================================================== */

.tabs { display: flex; gap: 0.125rem; border-bottom: 1px solid rgb(var(--gt-hairline)); overflow-x: auto; }
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4375rem;
  border-bottom: 2px solid transparent;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap;
  color: rgb(var(--gt-muted));
  transition: color var(--gt-dur-fast) var(--gt-ease), border-color var(--gt-dur-fast) var(--gt-ease);
}
.tab:hover { color: rgb(var(--gt-ink)); }
.tab[aria-selected='true'] { border-bottom-color: rgb(var(--gt-primary)); color: rgb(var(--gt-primary)); }
.tab .count {
  border-radius: var(--gt-radius-full);
  background: rgb(var(--gt-ink) / 0.07);
  padding: 0.0625rem 0.375rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
}
.tab[aria-selected='true'] .count { background: rgb(var(--gt-primary) / 0.14); color: rgb(var(--gt-primary)); }

/* Segmented control — for view switches (Table / Board / Calendar) */
.segment { display: inline-flex; border: 1px solid rgb(var(--gt-hairline)); border-radius: var(--gt-radius-sm); background: rgb(var(--gt-inset)); padding: 2px; }
.segment button {
  border-radius: 6px;
  padding: 0.3125rem 0.6875rem;
  font-size: 0.75rem; font-weight: 600;
  color: rgb(var(--gt-muted));
  transition: all var(--gt-dur-fast) var(--gt-ease);
}
.segment button[aria-pressed='true'] { background: rgb(var(--gt-surface)); color: rgb(var(--gt-ink)); box-shadow: var(--gt-shadow-card); }

/* ==========================================================================
   9. Dropdown & popover
   ========================================================================== */

.menu {
  min-width: 11rem;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius);
  background: rgb(var(--gt-raised));
  padding: 0.3125rem;
  box-shadow: var(--gt-shadow-pop);
  animation: gt-rise var(--gt-dur-fast) var(--gt-ease);
}
.menu__item {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  border-radius: 7px;
  padding: 0.4375rem 0.5625rem;
  text-align: left;
  font-size: 0.8125rem; font-weight: 500;
  color: rgb(var(--gt-ink));
  transition: background-color var(--gt-dur-fast) var(--gt-ease);
}
.menu__item:hover:not(:disabled),
.menu__item[data-active='true'] { background: rgb(var(--gt-ink) / 0.06); }
.menu__item:disabled { opacity: 0.45; cursor: not-allowed; }
.menu__item .lucide, .menu__item svg { width: 0.875rem; height: 0.875rem; flex: none; color: rgb(var(--gt-faint)); }
.menu__item--danger { color: rgb(var(--gt-danger)); }
.menu__item--danger .lucide, .menu__item--danger svg { color: rgb(var(--gt-danger)); }
.menu__item--danger:hover { background: rgb(var(--gt-danger) / 0.09); }
.menu__sep { height: 1px; margin: 0.3125rem -0.3125rem; background: rgb(var(--gt-hairline)); }
.menu__label { padding: 0.375rem 0.5625rem 0.25rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgb(var(--gt-faint)); }

.popover {
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius);
  background: rgb(var(--gt-raised));
  box-shadow: var(--gt-shadow-pop);
  animation: gt-rise var(--gt-dur-fast) var(--gt-ease);
}

/* Tooltip — CSS only, no JS positioning cost on hover-heavy tables */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  z-index: 60;
  border-radius: 6px;
  background: rgb(var(--gt-ink));
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem; font-weight: 500;
  color: rgb(var(--gt-surface));
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--gt-dur-fast) var(--gt-ease), transform var(--gt-dur-fast) var(--gt-ease);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   10. Modal
   ========================================================================== */

.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(15 23 42 / 0.45);
  backdrop-filter: blur(2px);
  animation: gt-fade-in var(--gt-dur) var(--gt-ease);
}
.overlay[data-closing='true'] { animation: gt-fade-out var(--gt-dur-fast) var(--gt-ease) forwards; }

.modal {
  display: flex; flex-direction: column;
  width: 100%;
  max-height: min(86vh, 52rem);
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius-lg);
  background: rgb(var(--gt-raised));
  box-shadow: var(--gt-shadow-pop);
  animation: gt-rise var(--gt-dur-slow) var(--gt-ease);
}
.modal[data-closing='true'] { animation: gt-sink var(--gt-dur-fast) var(--gt-ease) forwards; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgb(var(--gt-hairline)); padding: 1rem 1.25rem; }
.modal__title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
.modal__sub { margin-top: 0.1875rem; font-size: 0.8125rem; color: rgb(var(--gt-muted)); }
.modal__body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem; }
.modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid rgb(var(--gt-hairline)); padding: 0.875rem 1.25rem; background: rgb(var(--gt-inset)); border-radius: 0 0 var(--gt-radius-lg) var(--gt-radius-lg); }

@media (max-width: 640px) {
  .modal { max-height: 92vh; border-radius: var(--gt-radius-lg) var(--gt-radius-lg) 0 0; }
  .modal__foot { border-radius: 0; }
  .modal__foot .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   11. Drawer
   ========================================================================== */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
  display: flex; flex-direction: column;
  width: min(30rem, 100vw);
  border-left: 1px solid rgb(var(--gt-hairline));
  background: rgb(var(--gt-surface));
  box-shadow: var(--gt-shadow-pop);
  animation: gt-slide-in-right var(--gt-dur-slow) var(--gt-ease);
}
.drawer[data-closing='true'] { animation: gt-slide-out-right var(--gt-dur) var(--gt-ease) forwards; }
.drawer--wide { width: min(46rem, 100vw); }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgb(var(--gt-hairline)); padding: 1rem 1.25rem; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem; }
.drawer__foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid rgb(var(--gt-hairline)); background: rgb(var(--gt-inset)); padding: 0.875rem 1.25rem; }

/* ==========================================================================
   12. Toast (Toastify skin)
   ========================================================================== */

.toastify {
  display: flex !important; align-items: flex-start; gap: 0.625rem;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius) !important;
  background: rgb(var(--gt-raised)) !important;
  padding: 0.75rem 0.875rem !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.8125rem; font-weight: 500;
  color: rgb(var(--gt-ink)) !important;
  box-shadow: var(--gt-shadow-pop) !important;
  max-width: 22rem;
}
.toastify .toast-close { align-self: flex-start; opacity: 0.4; color: rgb(var(--gt-ink)); font-size: 1.125rem; padding: 0 0 0 0.375rem; }
.toastify .toast-close:hover { opacity: 1; }
.gt-toast__icon { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; flex: none; margin-top: 1px; }
.gt-toast--success .gt-toast__icon { color: rgb(var(--gt-success)); }
.gt-toast--error   .gt-toast__icon { color: rgb(var(--gt-danger)); }
.gt-toast--warn    .gt-toast__icon { color: rgb(var(--gt-warn)); }
.gt-toast--info    .gt-toast__icon { color: rgb(var(--gt-primary)); }
.gt-toast__title { font-weight: 600; }
.gt-toast__msg { margin-top: 0.125rem; font-size: 0.75rem; color: rgb(var(--gt-muted)); font-weight: 400; }

/* SweetAlert2 skin — confirmations must match the product, not the library */
.swal2-popup.gt-swal {
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius-lg);
  background: rgb(var(--gt-raised));
  font-family: Inter, system-ui, sans-serif;
  padding: 1.5rem;
  box-shadow: var(--gt-shadow-pop);
}
.gt-swal .swal2-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.0625rem; font-weight: 700; color: rgb(var(--gt-ink)); }
.gt-swal .swal2-html-container { font-size: 0.875rem; color: rgb(var(--gt-muted)); margin-top: 0.5rem; }
.gt-swal .swal2-actions { gap: 0.5rem; margin-top: 1.25rem; }
.gt-swal .swal2-icon { margin: 0 auto 0.75rem; }

/* ==========================================================================
   13. Skeletons, empty & loading states
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: rgb(var(--gt-hairline) / 0.7);
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(var(--gt-surface) / 0.55), transparent);
  animation: gt-shimmer 1.4s infinite;
}

.spinner {
  width: 1rem; height: 1rem;
  border: 2px solid rgb(var(--gt-primary) / 0.22);
  border-top-color: rgb(var(--gt-primary));
  border-radius: 50%;
  animation: gt-spin 0.65s linear infinite;
}

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; }
.empty__art {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius);
  background: rgb(var(--gt-inset));
  color: rgb(var(--gt-faint));
}
.empty__art .lucide, .empty__art svg { width: 1.25rem; height: 1.25rem; }
.empty__title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.9375rem; font-weight: 700; }
.empty__msg { max-width: 26rem; font-size: 0.8125rem; line-height: 1.55; color: rgb(var(--gt-muted)); }

/* ==========================================================================
   14. Timeline & activity
   ========================================================================== */

.timeline { position: relative; display: flex; flex-direction: column; gap: 1.125rem; padding-left: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: 0.4375rem; top: 0.375rem; bottom: 0.375rem; width: 1.5px; background: rgb(var(--gt-hairline)); }
.timeline__item { position: relative; }
.timeline__item::before {
  content: '';
  position: absolute; left: -1.5rem; top: 0.25rem;
  width: 0.9375rem; height: 0.9375rem;
  border: 2.5px solid rgb(var(--gt-surface));
  border-radius: 50%;
  background: rgb(var(--gt-faint));
  box-shadow: 0 0 0 1.5px rgb(var(--gt-hairline));
}
.timeline__item[data-tone='success']::before { background: rgb(var(--gt-success)); box-shadow: 0 0 0 1.5px rgb(var(--gt-success) / 0.35); }
.timeline__item[data-tone='primary']::before { background: rgb(var(--gt-primary)); box-shadow: 0 0 0 1.5px rgb(var(--gt-primary) / 0.35); }
.timeline__item[data-tone='warn']::before    { background: rgb(var(--gt-warn));    box-shadow: 0 0 0 1.5px rgb(var(--gt-warn) / 0.35); }
.timeline__item[data-tone='danger']::before  { background: rgb(var(--gt-danger));  box-shadow: 0 0 0 1.5px rgb(var(--gt-danger) / 0.35); }
.timeline__when { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: rgb(var(--gt-faint)); }
.timeline__what { font-size: 0.8125rem; font-weight: 600; margin-top: 0.0625rem; }
.timeline__note { font-size: 0.75rem; color: rgb(var(--gt-muted)); margin-top: 0.1875rem; line-height: 1.5; }

/* Kanban board — workshop and job pipeline views */
.board { display: flex; gap: 0.875rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: flex-start; }
.board__col { flex: 0 0 17.5rem; border: 1px solid rgb(var(--gt-hairline)); border-radius: var(--gt-radius); background: rgb(var(--gt-inset)); }
.board__col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid rgb(var(--gt-hairline)); }
.board__list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.625rem; min-height: 4rem; }
.board__card {
  border: 1px solid rgb(var(--gt-hairline));
  border-radius: var(--gt-radius-sm);
  background: rgb(var(--gt-surface));
  padding: 0.625rem 0.75rem;
  box-shadow: var(--gt-shadow-card);
  cursor: grab;
  transition: box-shadow var(--gt-dur-fast) var(--gt-ease), transform var(--gt-dur-fast) var(--gt-ease);
}
.board__card:hover { box-shadow: var(--gt-shadow-lift); transform: translateY(-1px); }
.board__card.sortable-ghost { opacity: 0.35; border-style: dashed; }
.board__card.sortable-drag { cursor: grabbing; box-shadow: var(--gt-shadow-pop); }

/* ==========================================================================
   15. Layout & helpers
   ========================================================================== */

.nav-item {
  display: flex; align-items: center; gap: 0.625rem;
  border-radius: var(--gt-radius-sm);
  padding: 0.4375rem 0.625rem;
  font-size: 0.8125rem; font-weight: 500;
  color: rgb(var(--gt-muted));
  transition: background-color var(--gt-dur-fast) var(--gt-ease), color var(--gt-dur-fast) var(--gt-ease);
}
.nav-item:hover { background: rgb(var(--gt-ink) / 0.05); color: rgb(var(--gt-ink)); }
.nav-item[aria-current='page'] { background: rgb(var(--gt-primary) / 0.10); color: rgb(var(--gt-primary)); font-weight: 600; }
.nav-item .lucide, .nav-item svg { width: 1rem; height: 1rem; flex: none; }
.nav-item__badge {
  margin-left: auto;
  border-radius: var(--gt-radius-full);
  background: rgb(var(--gt-danger));
  padding: 0 0.3125rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.625rem; font-weight: 600;
  color: #fff;
  min-width: 1.125rem; text-align: center; line-height: 1.125rem;
}

.nav-group { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--gt-faint)); padding: 0 0.625rem; }

/* Collapsed rail: labels hide, icons centre, tooltips take over naming. */
.sidebar[data-collapsed='true'] .nav-item { justify-content: center; padding-inline: 0; }
.sidebar[data-collapsed='true'] .nav-label,
.sidebar[data-collapsed='true'] .nav-group,
.sidebar[data-collapsed='true'] .nav-item__badge { display: none; }

.scroll-fade { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 8px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 8px, #000 calc(100% - 8px), transparent); }

.animate-rise { animation: gt-rise var(--gt-dur-slow) var(--gt-ease); }
.animate-fade { animation: gt-fade-in var(--gt-dur) var(--gt-ease); }

/* Command palette */
.cmdk { width: min(38rem, calc(100vw - 2rem)); max-height: 60vh; }
.cmdk__input { width: 100%; border: 0; background: transparent; padding: 1rem 1.125rem; font-size: 0.9375rem; outline: none; }
.cmdk__item {
  display: flex; align-items: center; gap: 0.625rem;
  width: 100%;
  border-radius: var(--gt-radius-sm);
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  transition: background-color var(--gt-dur-fast) var(--gt-ease);
}
.cmdk__item[data-active='true'] { background: rgb(var(--gt-primary) / 0.10); color: rgb(var(--gt-primary)); }
.cmdk__item .lucide, .cmdk__item svg { width: 0.9375rem; height: 0.9375rem; flex: none; color: rgb(var(--gt-faint)); }
.cmdk__item[data-active='true'] .lucide { color: rgb(var(--gt-primary)); }

/* Flatpickr skin */
.flatpickr-calendar { border: 1px solid rgb(var(--gt-hairline)); border-radius: var(--gt-radius); background: rgb(var(--gt-raised)); box-shadow: var(--gt-shadow-pop); font-family: Inter, sans-serif; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: rgb(var(--gt-primary)); border-color: rgb(var(--gt-primary)); }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, .flatpickr-weekday { background: transparent; color: rgb(var(--gt-muted)); fill: rgb(var(--gt-muted)); }
.flatpickr-day { color: rgb(var(--gt-ink)); }
.flatpickr-day.flatpickr-disabled { color: rgb(var(--gt-faint) / 0.5); }
.flatpickr-current-month input.cur-year, .flatpickr-current-month .cur-month { color: rgb(var(--gt-ink)); }

/* Invoice / receipt surface — shared by print templates and on-screen preview */
.doc {
  background: #fff;
  color: #0f172a;
  font-family: Inter, system-ui, sans-serif;
}
.doc .doc__rule { border-top: 1px solid #e2e8f0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 12px; }
.doc th { border-bottom: 1px solid #cbd5e1; padding: 6px 8px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.doc td { border-bottom: 1px solid #f1f5f9; padding: 6px 8px; }