/* List, view, and edit screens, plus the Home header. Shared .scr prefix. */

/* ============================================================
   Page frame
   ============================================================ */

.scr {
  align-self: flex-start;
  min-width: 0;
  animation: scr-in 0.25s ease both;
}

.scr [hidden] { display: none !important; }

.scr-head {
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.scr-head .ks-h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0;
}

.scr-head .ks-h2 .ks-badge { font-size: var(--ks-text-xs); }

.scr-lede {
  margin: 0.35rem 0 0;
  color: var(--ks-text-muted);
  font-size: var(--ks-text-sm);
}

.scr-crumbs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  font-size: var(--ks-text-sm);
  color: var(--ks-text-muted);
}

.scr-crumbs a { color: var(--ks-text-link); }

.scr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

.scr-actions .ks-btn { display: inline-flex; align-items: center; gap: 0.4rem; }

.scr-body { padding: 1.5rem 1rem 2.5rem; }

.scr-state { min-height: 40vh; }

.scr-none { color: var(--ks-text-subtle); }
.scr-you { color: var(--ks-text-muted); font-size: var(--ks-text-sm); }
.scr-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Links: never underlined. Hover lays a soft tint behind the text
   (a background and a spread shadow, so nothing moves).
   ============================================================ */

#app a,
#app a:hover,
#app .ks-link:hover,
#app .ks-breadcrumb a:hover { text-decoration: none; }

.scr a:not(.ks-btn),
.scr .tkt-file-link,
#app #right .form-container a {
  --link-tint: color-mix(in srgb, var(--ks-brand-primary) 14%, transparent);
  border-radius: 2px;
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.scr a:not(.ks-btn):hover,
.scr .tkt-file-link:hover,
#app #right .form-container a:hover {
  color: var(--ks-text-link-hover);
  background-color: var(--link-tint);
  box-shadow: 0 0 0 0.2em var(--link-tint);
}

.scr a:not(.ks-btn):focus-visible,
.scr .tkt-file-link:focus-visible {
  outline: 2px solid var(--ks-brand-primary);
  outline-offset: 2px;
}

/* ============================================================
   Lists
   ============================================================ */

/* Tables sit on a solid surface so the canvas texture never shows
   through; stripes and hover are solid tints of that surface. */
#page-container .ks-table {
  background-color: var(--ks-surface-default);
  box-shadow: var(--ks-shadow-xs), var(--ks-edge-soft);
}

#page-container .ks-table thead th,
#page-container .ks-table tfoot td { background-color: var(--ks-surface-subtle); }
/* stripe toward the text colour so it reads in light and dark tones alike */
#page-container .ks-table--striped tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--ks-surface-default) 96%, var(--ks-text-default)); }
/* list tables filter by marking rows and stripe only the rows on show */
.scr-list tbody tr[data-ks-filtered] { display: none; }
#page-container .scr-list.ks-table--striped tbody tr:nth-child(even) { background-color: transparent; }
#page-container .scr-list.ks-table--striped tbody tr.is-alt { background-color: color-mix(in srgb, var(--ks-surface-default) 96%, var(--ks-text-default)); }
.scr-list .ks-table-sort { color: inherit; font: inherit; }
.scr-list + .ks-table-pager { padding: 0.75rem 0.25rem 0; color: var(--ks-text-muted); }
.scr-empty-note { padding: 2rem 1rem; text-align: center; color: var(--ks-text-muted); }

#page-container .ks-table--hover tbody tr:hover { background-color: color-mix(in srgb, var(--ks-surface-default) 90%, var(--ks-brand-primary)); }

.scr-filters { gap: 1rem; align-items: flex-end; }
.scr-filters .ks-col { max-width: 28rem; }
.scr-filters .scr-filter-narrow { flex: 0 0 12rem; }
.scr-filters .ks-input,
.scr-filters .ks-select { width: 100%; box-sizing: border-box; }

.scr-table tbody tr[data-id] { cursor: pointer; }
.scr-table tbody tr.is-disabled td { color: var(--ks-text-muted); }
.scr-table td a { color: var(--ks-text-link); font-weight: var(--ks-weight-medium); }
.scr-table .scr-empty-row td { padding: 2rem 1rem; text-align: center; color: var(--ks-text-muted); cursor: default; }
.scr-table tfoot td { color: var(--ks-text-muted); font-size: var(--ks-text-sm); }

/* ============================================================
   View pages
   ============================================================ */

/* A view page fills the screen, and its body sits on frosted glass so
   the tone texture softens behind the text instead of crossing it. */
.scr-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.scr-view > .scr-body {
  flex: 1 0 auto;
  background-color: color-mix(in srgb, var(--ks-canvas) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

.scr-section { max-width: 60rem; }
.scr-view .scr-section { max-width: none; }
.scr-section + .scr-section { margin-top: 2rem; }

.scr-section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-family);
  font-size: var(--ks-text-xs);
  font-weight: var(--ks-weight-semibold);
  letter-spacing: var(--ks-tracking-wider);
  text-transform: uppercase;
  color: var(--ks-text-muted);
}

.scr-details { width: 100%; }

.scr-details th {
  width: 14rem;
  text-align: left;
  font-weight: var(--ks-weight-medium);
  color: var(--ks-text-muted);
  background: var(--ks-surface-subtle);
}

.scr-details td a { color: var(--ks-text-link); }

/* Inline confirm and notices replace modals */
.scr-confirm,
.scr-notice {
  flex-basis: 100%;
  align-items: center;
  text-align: left;
}

.scr-confirm > .ks-i,
.scr-notice > .ks-i { flex: none; color: var(--ks-warning-default); }

.scr-confirm-actions { display: flex; gap: 0.5rem; margin-left: auto; flex: none; }

/* Ticket text and conversation */
.scr-ticket-no { color: var(--ks-text-muted); font-weight: var(--ks-weight-regular); }
.scr-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--ks-leading-relaxed); }

.scr-thread { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.scr-message {
  padding: 1rem 1.15rem;
  border-radius: var(--ks-radius-card);
  background: var(--ks-surface-default);
  box-shadow: var(--ks-shadow-xs), var(--ks-edge-soft);
}

.scr-message-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.35rem; }
.scr-message-from { font-weight: var(--ks-weight-semibold); }
.scr-message-time { font-size: var(--ks-text-xs); color: var(--ks-text-muted); }
.scr-message-subject { margin-bottom: 0.5rem; font-size: var(--ks-text-sm); color: var(--ks-text-muted); }

/* ============================================================
   Edit pages
   ============================================================ */

/* Unsaved-changes bar floats over the page so nothing shifts */
.scr-unsaved {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: var(--ks-z-sticky, 20);
  width: min(40rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  align-items: center;
  background: var(--ks-surface-default);
  box-shadow: var(--ks-shadow-xl), var(--ks-edge-soft);
  animation: scr-rise 0.2s ease both;
}

.scr-unsaved > .ks-i { flex: none; color: var(--ks-brand-primary); }

@keyframes scr-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }

.scr-form { max-width: 48rem; }

.scr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1.25rem;
}

.scr-field { margin: 0; min-width: 0; }
.scr-field--wide { grid-column: 1 / -1; }
.scr-field--narrow .ks-input { max-width: 8rem; }
.scr-field .ks-input,
.scr-field .ks-select,
.scr-field .ks-textarea { width: 100%; box-sizing: border-box; }

.scr-optional {
  margin-left: 0.3rem;
  font-weight: var(--ks-weight-regular);
  font-size: var(--ks-text-xs);
  color: var(--ks-text-subtle);
}

.scr-field-msg { min-height: 1.35rem; padding-top: 0.2rem; font-size: var(--ks-text-xs); line-height: 1.35; }
.scr-field-hint { display: block; color: var(--ks-text-muted); font-size: var(--ks-text-xs); }
.ks-field.is-invalid .scr-field-hint { display: none; }
.ks-field.is-invalid .ks-input,
.ks-field.is-invalid .ks-select,
.ks-field.is-invalid .ks-textarea { box-shadow: inset 0 0 0 1.5px var(--ks-error-default); }
.ks-field.is-invalid .ks-label { color: var(--ks-error-text); }

.scr-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  cursor: pointer;
}

.scr-check input { flex: none; width: auto; height: auto; margin-top: 0.2rem; }
.scr-check:has(input:disabled) { cursor: default; }
.scr-check-label { display: block; color: var(--ks-text-default); font-weight: var(--ks-weight-medium); }

.scr-note { margin: 1rem 0 0; font-size: var(--ks-text-sm); color: var(--ks-text-muted); }
.scr-note a { color: var(--ks-text-link); }

.scr-form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ks-border-muted);
}

.scr-form-actions .ks-btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.scr-spinner { width: 1em; height: 1em; }

/* ============================================================
   Home header
   ============================================================ */

.home-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--tone-hero, var(--ks-surface-inverse));
  color: rgb(255 255 255 / 0.92);
}

.home-company { min-width: 0; flex: 1 1 24rem; }

.home-eyebrow {
  font-size: var(--ks-text-xs);
  letter-spacing: var(--ks-tracking-wider);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

.home-name {
  margin: 0.3rem 0 0.75rem;
  font-family: var(--font-family);
  font-size: clamp(1.8rem, 3.4vw, 2.75rem);
  font-weight: var(--ks-weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--ks-tracking-tight);
  text-wrap: balance;
  color: #fff;
}

.home-skel { width: min(20rem, 60vw); height: 0.9em; background-color: rgb(255 255 255 / 0.12); box-shadow: none; }

.home-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ks-text-sm);
  color: rgb(255 255 255 / 0.72);
}

.home-meta li { display: inline-flex; align-items: center; gap: 0.4rem; }
.home-meta .ks-i { color: rgb(255 255 255 / 0.45); }
.home-meta a { color: #fff; }
#app .home-meta a:hover { color: #fff; --link-tint: rgb(255 255 255 / 0.14); }

.home-user {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: var(--ks-text-sm);
  text-align: right;
}

.home-user-label { font-size: var(--ks-text-xs); letter-spacing: var(--ks-tracking-wider); text-transform: uppercase; color: rgb(255 255 255 / 0.5); }
.home-user-name { font-weight: var(--ks-weight-semibold); color: #fff; }
.home-user-login { color: rgb(255 255 255 / 0.7); overflow-wrap: anywhere; }

@keyframes scr-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .scr,
  .scr-unsaved { animation: none; }
}

/* ============================================================
   Small screens
   ============================================================ */

@media (max-width: 640px) {
  .scr-actions { margin-left: 0; justify-content: flex-start; }
  .scr-filters .scr-filter-narrow { flex: 1 1 auto; }
  .scr-grid { grid-template-columns: 1fr; }
  .scr-details th { width: 40%; }
  .scr-confirm,
  .scr-unsaved { flex-wrap: wrap; }
  .scr-confirm-actions { margin-left: 0; }
  .home-user { text-align: left; }
}

/* ============================================================
   Home welcome (until the dashboard takes this space)
   ============================================================ */

.home-welcome {
  margin: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 52rem;
  background-color: color-mix(in srgb, var(--ks-surface-default) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--ks-shadow-xs), var(--ks-edge-soft);
  border-left: 3px solid var(--ks-brand-primary);
  animation: scr-rise-in 0.35s 0.1s ease both;
}

.home-welcome-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-family);
  font-size: var(--ks-text-xl);
  font-weight: var(--ks-weight-semibold);
  letter-spacing: var(--ks-tracking-tight);
}

.home-welcome-text { margin: 0; max-width: 40rem; color: var(--ks-text-muted); line-height: var(--ks-leading-relaxed); }

.home-welcome-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.home-welcome-actions .ks-btn { display: inline-flex; align-items: center; gap: 0.45rem; }

@keyframes scr-rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Ticket page
   ============================================================ */

/* Status band: four cells on one solid strip; 1px gaps draw the rules */
.tkt-band {
  --tkt-accent: var(--ks-brand-primary);
  display: grid;
  grid-template-columns: minmax(11rem, 0.9fr) minmax(12rem, 1fr) minmax(16rem, 2.2fr) minmax(13rem, 1fr);
  gap: 1px;
  background-color: var(--ks-border-muted);
  box-shadow: var(--ks-shadow-sm), var(--ks-edge-soft);
  border-top: 3px solid var(--tkt-accent);
}

.tkt-band--waiting   { --tkt-accent: #3FA9FF; }
.tkt-band--scheduled { --tkt-accent: #3090C8; }
.tkt-band--new       { --tkt-accent: #484848; }
.tkt-band--closed    { --tkt-accent: var(--ks-border-default); }

.tkt-cell {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  margin: 0;
  padding: 1rem 1.25rem 1.1rem;
  background-color: var(--ks-surface-default);
}

.tkt-label {
  font-size: var(--ks-text-xs);
  font-weight: var(--ks-weight-semibold);
  letter-spacing: var(--ks-tracking-wider);
  text-transform: uppercase;
  color: var(--ks-text-muted);
}

.tkt-sub { font-size: var(--ks-text-sm); color: var(--ks-text-muted); }
.tkt-sub strong { color: var(--ks-text-default); font-weight: var(--ks-weight-semibold); }

.tkt-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  font-weight: var(--ks-weight-semibold);
  background-color: var(--ks-brand-primary);
  color: #fff;
}

.tkt-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.tkt-status--active .tkt-status-dot { animation: tkt-pulse 1.8s ease-in-out infinite; }
.tkt-status--waiting   { background-color: #3FA9FF; color: #0B2233; }
.tkt-status--scheduled { background-color: color-mix(in srgb, #3090C8 18%, var(--ks-surface-default)); color: var(--ks-text-default); }
.tkt-status--new       { background-color: var(--ks-surface-emphasis); color: var(--ks-text-default); }
.tkt-status--closed    { background-color: var(--ks-surface-subtle); color: var(--ks-text-muted); box-shadow: var(--ks-edge-soft); }

@keyframes tkt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.55); }
  50% { box-shadow: 0 0 0 0.3rem rgb(255 255 255 / 0); }
}

.tkt-tech { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.tkt-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--ks-brand-primary);
  color: #fff;
  font-size: var(--ks-text-sm);
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-brand-primary) 18%, transparent);
}
.tkt-tech-name { font-weight: var(--ks-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkt-tech.is-none .tkt-avatar { background-color: var(--ks-surface-emphasis); color: var(--ks-text-muted); box-shadow: var(--ks-edge-soft); }
.tkt-tech.is-none .tkt-tech-name { color: var(--ks-text-muted); font-weight: var(--ks-weight-regular); }

button.tkt-cell--update {
  appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

button.tkt-cell--update:hover { background-color: color-mix(in srgb, var(--ks-surface-default) 92%, var(--ks-brand-primary)); }
button.tkt-cell--update:focus-visible { outline: 2px solid var(--ks-brand-primary); outline-offset: -2px; }

.tkt-update {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: var(--ks-leading-relaxed);
  color: var(--ks-text-muted);
}

.tkt-update strong { color: var(--ks-text-default); font-weight: var(--ks-weight-semibold); }

.tkt-meta { justify-content: center; gap: 0.3rem; font-size: var(--ks-text-sm); }
.tkt-meta div { display: flex; justify-content: space-between; gap: 1rem; }
.tkt-meta dt { color: var(--ks-text-muted); }
.tkt-meta dd { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tabs */
.tkt-tabs { margin-top: 1.5rem; }
.tkt-tabs > .ks-tabs-panel { padding-top: 1.25rem; }
.tkt-tabs > .ks-tabs-panel:focus-visible { outline: none; }

.tkt-count {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border-radius: 2px;
  font-size: var(--ks-text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
  background-color: color-mix(in srgb, var(--ks-text-default) 9%, transparent);
  color: var(--ks-text-muted);
}

.tkt-count.is-hot { background-color: var(--ks-brand-primary); color: #fff; }

.tkt-lede { margin: 0 0 0.85rem; font-size: var(--ks-text-sm); color: var(--ks-text-muted); }

/* Conversation: our team's messages carry a blue rule, the customer's
   a quiet tint; all share one edge */
.tkt-thread { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.tkt-msg {
  padding: 1rem 1.2rem 1.1rem;
  background-color: var(--ks-surface-default);
  box-shadow: var(--ks-shadow-xs), var(--ks-edge-soft);
  border-left: 3px solid var(--ks-border-default);
  scroll-margin: 2rem;
}

.tkt-msg--out { border-left-color: var(--ks-brand-primary); }
.tkt-msg--in {
  background-color: color-mix(in srgb, var(--ks-surface-default) 95%, var(--ks-brand-primary));
}

.tkt-msg.is-flash { animation: tkt-flash 1.4s ease; }
@keyframes tkt-flash {
  0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ks-brand-primary) 45%, transparent), var(--ks-shadow-sm); }
  100% { box-shadow: var(--ks-shadow-xs), var(--ks-edge-soft); }
}

.tkt-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-bottom: 0.6rem; }
.tkt-msg-avatar { font-size: var(--ks-text-xs); }
.tkt-msg--out .tkt-msg-avatar { background-color: var(--ks-brand-primary); color: #fff; }
.tkt-msg-from { font-weight: var(--ks-weight-semibold); }
.tkt-msg-tag {
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  font-size: var(--ks-text-xs);
  color: var(--ks-brand-primary);
  background-color: color-mix(in srgb, var(--ks-brand-primary) 12%, transparent);
}
.tkt-msg-time { margin-left: auto; font-size: var(--ks-text-xs); color: var(--ks-text-muted); }

/* File chips, on messages and in the composer */
.tkt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }

.tkt-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-radius: 2px;
  font: inherit;
  font-size: var(--ks-text-sm);
  color: var(--ks-text-default);
  background-color: var(--ks-surface-subtle);
  box-shadow: var(--ks-edge-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}

button.tkt-chip { cursor: pointer; }
button.tkt-chip:hover { color: var(--ks-text-link-hover); background-color: color-mix(in srgb, var(--ks-surface-subtle) 86%, var(--ks-brand-primary)); }
button.tkt-chip:focus-visible { outline: 2px solid var(--ks-brand-primary); outline-offset: 2px; }
.tkt-chip > .ks-i { color: var(--ks-brand-primary); }
.tkt-chip:disabled { opacity: 0.6; cursor: progress; }

.tkt-file-name { min-width: 0; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkt-file-size { flex: none; font-size: var(--ks-text-xs); color: var(--ks-text-muted); }

.tkt-file-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--ks-weight-medium);
  color: var(--ks-text-link);
  cursor: pointer;
}

.tkt-file-link:disabled { opacity: 0.6; cursor: progress; }

.tkt-unpend {
  appearance: none;
  display: inline-flex;
  padding: 0.1rem;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--ks-text-muted);
  cursor: pointer;
}

.tkt-unpend:hover { color: var(--ks-text-default); background-color: color-mix(in srgb, var(--ks-text-default) 8%, transparent); }

/* Space the chosen files use, out of 50 MB */
.tkt-usage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-top: 0.7rem; }
.tkt-usage .ks-progress { flex: 1 1 10rem; max-width: 16rem; height: 6px; }
.tkt-usage-text { font-size: var(--ks-text-xs); color: var(--ks-text-muted); }
.tkt-usage.is-full .ks-progress-bar { background-color: var(--ks-warning-default, var(--ks-blue-700)); }
.tkt-usage.is-full .tkt-usage-text { color: var(--ks-text-default); }

/* Composer */
.tkt-composer {
  margin-bottom: 1.25rem;
  padding: 1rem 1.2rem 1.1rem;
  background-color: var(--ks-surface-default);
  box-shadow: var(--ks-shadow-sm), var(--ks-edge-soft);
  border-left: 3px solid var(--ks-border-default);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tkt-composer:focus-within { border-left-color: var(--ks-brand-primary); }
#ticket-form.is-dragging,
.tkt-composer.is-dragging {
  border-left-color: var(--ks-brand-primary);
  background-color: color-mix(in srgb, var(--ks-surface-default) 90%, var(--ks-brand-primary));
  outline: 2px dashed color-mix(in srgb, var(--ks-brand-primary) 60%, transparent);
  outline-offset: -8px;
}

.tkt-composer-label { display: block; margin-bottom: 0.55rem; font-weight: var(--ks-weight-semibold); }
.tkt-composer .ks-textarea { width: 100%; box-sizing: border-box; }
.tkt-composer.is-invalid .ks-textarea { box-shadow: inset 0 0 0 1.5px var(--ks-error-default); }

#ticket-files .tkt-composer-bar { margin-top: 0; }
.tkt-composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.8rem; }
.tkt-composer-bar .ks-btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.tkt-composer-msg { flex: 1 1 14rem; font-size: var(--ks-text-xs); color: var(--ks-text-muted); }
.tkt-composer-msg.is-error { color: var(--ks-error-text); }

.tkt-closed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.2rem;
  background-color: var(--ks-surface-subtle);
  box-shadow: var(--ks-edge-soft);
  color: var(--ks-text-muted);
}

.tkt-closed > .ks-i { color: var(--ks-brand-primary); }
.tkt-closed .ks-btn { margin-left: auto; }

/* Close request, inline in the head */
.tkt-close > .ks-i { color: var(--ks-brand-primary); }
.tkt-close-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; flex: 1; }
.tkt-close-body label { font-weight: var(--ks-weight-semibold); }
.tkt-close-body .ks-input { flex: 1 1 16rem; min-width: 0; }

/* Alerts */
.tkt-device { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: var(--ks-weight-medium); }
.tkt-device .ks-i { color: var(--ks-text-muted); }

.tkt-sev { display: inline-flex; align-items: center; gap: 0.45rem; }
.tkt-sev::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sev, var(--ks-text-subtle)); }
.tkt-sev--info     { --sev: #3FA9FF; }
.tkt-sev--warning  { --sev: var(--ks-warning-default); }
.tkt-sev--average  { --sev: var(--ks-warning-default); }
.tkt-sev--high     { --sev: var(--ks-error-default); }
.tkt-sev--disaster { --sev: var(--ks-error-default); box-shadow: none; font-weight: var(--ks-weight-semibold); }

@media (max-width: 1100px) {
  .tkt-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tkt-band { grid-template-columns: 1fr; }
  .tkt-closed .ks-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-welcome,
  .tkt-msg.is-flash,
  .tkt-status--active .tkt-status-dot { animation: none; }
}

/* ============================================================
   Staff view (portal-staff-spec): read-only, so anything marked
   data-write is hidden.
   ============================================================ */

.is-read-only [data-write] { display: none !important; }

.tkt-readonly { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; margin-bottom: 0.5rem; color: var(--ks-text-muted); font-size: var(--ks-text-sm); }


/* a value shown in a form that can't be changed there */
.scr-field-static { margin: 0; padding: 0.5rem 0; }