:root {
  --color-bg: oklch(0.975 0.006 70);
  --color-surface: #ffffff;
  --color-text: oklch(0.18 0.01 60);
  --color-text-secondary: oklch(0.5 0.01 60);
  --color-text-tertiary: oklch(0.45 0.01 60);
  --color-divider: oklch(0.92 0.008 70);
  --color-divider-soft: oklch(0.95 0.006 70);
  --color-divider-strong: oklch(0.89 0.008 70);

  --color-navy: oklch(0.17 0.015 60);
  --color-navy-hover: oklch(0.22 0.018 60);
  --color-navy-active: oklch(0.24 0.02 60);
  --color-navy-text-muted: oklch(0.68 0.01 60);

  --color-accent: oklch(0.65 0.16 55);
  --color-accent-light: oklch(0.75 0.16 55);
  --color-accent-tag-bg: oklch(0.95 0.06 55);
  --color-accent-tag-text: oklch(0.4 0.13 55);

  --color-open: oklch(0.55 0.15 60);
  --color-open-bg: oklch(0.94 0.07 65);
  --color-progress: oklch(0.5 0.14 250);
  --color-progress-bg: oklch(0.94 0.03 250);
  --color-done: oklch(0.5 0.12 150);
  --color-done-bg: oklch(0.94 0.05 150);
  --color-transfer: oklch(0.5 0.13 300);
  --color-transfer-bg: oklch(0.94 0.05 300);

  --color-danger: oklch(0.5 0.16 25);
  --color-danger-bg: oklch(0.95 0.05 25);

  --radius-sm: 8px;
  --radius-md: 9px;
  --radius-lg: 14px;

  --font-heading: "Sora", system-ui, sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;

  --status-접수: var(--color-open);
  --status-진행중: var(--color-progress);
  --status-완료: var(--color-done);
  --status-케이스진행중: var(--color-transfer);
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
}

.display, h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 15px; }

a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
a:hover { color: oklch(0.55 0.16 55); text-decoration: underline; }

input, select, textarea, button { font-family: inherit; font-size: 14px; }

input, select, textarea {
  border: 1.5px solid var(--color-divider-strong);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  background: #fff;
  color: var(--color-text);
}
textarea { border-radius: var(--radius-md); resize: none; height: 80px; width: 100%; }
input:hover, select:hover, textarea:hover { border-color: oklch(0.8 0.01 60); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px oklch(0.65 0.16 55 / 0.18);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' stroke='%23474238' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
  cursor: pointer;
}
select:disabled { background-image: none; cursor: default; }

input[type="date"], input[type="datetime-local"] { font-size: 14px; padding: 10px 13px; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  transform: scale(1.3); margin-left: 8px; cursor: pointer; opacity: 0.7;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

button {
  cursor: pointer;
  border: 1.5px solid var(--color-divider-strong);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
}
button:hover { background: var(--color-bg); }
button:active { background: var(--color-divider-soft); }
button.primary { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
button.primary:hover { background: var(--color-navy-hover); }
button.primary:active { background: var(--color-navy-active); }
button.ghost { border-color: transparent; background: transparent; color: var(--color-accent); }
button.ghost:hover { background: var(--color-accent-tag-bg); }
button.danger { color: var(--color-danger); border-color: oklch(0.5 0.16 25 / 0.3); }
button.danger:hover { background: var(--color-danger-bg); }

input:disabled, select:disabled, textarea[readonly] {
  background: var(--color-bg); color: var(--color-text); cursor: default; opacity: 1;
}
select:disabled { appearance: none; -webkit-appearance: none; }

/* ---- login / signup split hero ---- */
.hero-split { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; background: var(--color-bg); }
.hero-left {
  flex: 1.15 1 380px; min-height: 340px; position: relative; overflow: hidden;
  padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: var(--color-navy); color: oklch(0.96 0.01 60);
}
.hero-decor-1 {
  position: absolute; top: -120px; right: -80px; width: 340px; height: 340px; border-radius: 999px;
  background: radial-gradient(circle, oklch(0.75 0.16 55 / 0.5), transparent 70%);
}
.hero-decor-2 { display: none; }
.hero-brand { position: relative; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; }
.hero-brand .dot { width: 28px; height: 28px; border-radius: 8px; background: var(--color-accent-light); box-shadow: 0 4px 14px oklch(0.75 0.16 55 / 0.45); }
.hero-copy { position: relative; max-width: 460px; }
.hero-copy .eyebrow {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-accent-light);
  text-transform: uppercase; margin-bottom: 14px;
}
.hero-copy h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.25; margin: 0 0 18px; color: oklch(0.96 0.01 60); word-break: keep-all; overflow-wrap: break-word; }
.hero-copy p { font-size: 16px; line-height: 1.6; color: oklch(0.75 0.01 60); margin: 0; word-break: keep-all; }
.hero-stats { position: relative; display: flex; gap: 10px; }
.hero-stats .stat { flex: 1; padding-top: 12px; border-top: 2px solid oklch(0.4 0.02 60); }
.hero-stats .stat.is-accent { border-top-color: var(--color-accent-light); }
.hero-stats .stat .num { font-family: var(--font-heading); font-size: 28px; font-weight: 700; }
.hero-stats .stat .lbl { font-size: 13px; color: oklch(0.72 0.01 60); margin-top: 4px; }
.hero-copyright { font-size: 13px; color: oklch(0.55 0.01 60); position: relative; }

.hero-right { flex: 1 1 340px; display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 40px); }
.hero-form { width: 100%; max-width: 380px; }
.hero-form h2 { font-size: 25px; margin: 0 0 8px; }
.hero-form .sub { color: var(--color-text-tertiary); font-size: 14px; margin: 0 0 26px; }
.hero-form .field { margin-bottom: 16px; }
.hero-form label { display: block; font-size: 13px; font-weight: 600; color: oklch(0.3 0.01 60); margin-bottom: 6px; }
.hero-form input { width: 100%; }
.hero-form button { width: 100%; min-height: 46px; font-size: 15px; margin-top: 6px; padding: 13px; border-radius: var(--radius-md); }
.hero-form .below { font-size: 13px; color: var(--color-text-tertiary); margin: 22px 0 0; text-align: center; }
.hero-note {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px;
  background: var(--color-accent-tag-bg); color: var(--color-accent-tag-text); font-size: 12.5px; font-weight: 600; margin-bottom: 24px;
}
.hero-note .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent); flex-shrink: 0; }
.login-error { background: var(--color-danger-bg); color: var(--color-danger); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px; }

/* ---- app shell: sidebar (full height, left) + [topbar + main-content] (right column) ---- */
.app-frame { display: flex; align-items: stretch; min-height: 100vh; max-width: 100%; }

.sidebar {
  width: 224px; flex-shrink: 0;
  background: var(--color-navy); padding: 24px 14px; border-radius: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar a {
  display: flex; align-items: center; padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; color: var(--color-navy-text-muted); text-decoration: none;
  white-space: nowrap;
}
.sidebar a .dot { width: 6px; height: 6px; border-radius: 999px; margin-right: 10px; flex-shrink: 0; background: currentColor; }
.sidebar a:hover { background: var(--color-navy-hover); color: #fff; }
.sidebar a.active { background: var(--color-navy-active); color: #fff; }

.content-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 16px 40px; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.topbar-left { display: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: oklch(0.3 0.01 60); }
.avatar-circle {
  width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0;
  background: oklch(0.9 0.06 55); color: oklch(0.35 0.1 55);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--font-heading);
}

.main-content { flex: 1; min-width: 0; padding: 34px 44px; max-width: 1260px; }

@media (max-width: 780px) {
  .app-frame { flex-direction: column; }
  .sidebar {
    width: 100%; flex-direction: row; align-items: center; overflow-x: auto;
    position: static; min-height: auto; padding: 10px 12px; gap: 2px;
  }
  .sidebar a[href="/"]:first-child { display: none; }
  .main-content { padding: 18px 16px 40px; }
  .topbar { padding: 12px 18px; }
  .card { padding: 16px; }
  .table-wrap { overflow-x: visible; }
  .table-wrap table { min-width: 0; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tr {
    display: block; border-bottom: 1px solid var(--color-divider) !important;
    padding: 12px 4px; border-left: 3px solid transparent;
  }
  .table-wrap tr.ticket-row.border-접수 { border-left-color: var(--color-open); }
  .table-wrap tr.ticket-row.border-진행중 { border-left-color: var(--color-progress); }
  .table-wrap tr.ticket-row.border-완료 { border-left-color: var(--color-done); }
  .table-wrap tr.ticket-row.border-케이스진행중 { border-left-color: var(--color-transfer); }
  .table-wrap td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 4px 12px; border-bottom: none !important; font-size: 13px; max-width: none;
    white-space: normal; overflow: visible; text-overflow: unset;
  }
  .table-wrap td::before {
    content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0;
  }
  .table-wrap td.ticket-no { font-size: 15px; padding-top: 2px; }
  .table-wrap td[data-label="상태"] { justify-content: flex-end; }
  .table-wrap td[data-label="상태"]::before { display: none; }
}

/* ---- toolbar ---- */
.toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.toolbar-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar-filters input, .toolbar-filters select, .toolbar-filters button { height: 42px; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.toolbar-actions button { height: 42px; }

/* ---- card ---- */
.card {
  background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.05), 0 4px 20px oklch(0.2 0.02 60 / 0.04);
}
.card h3 { font-size: 15px; margin: 0 0 18px; }
.card-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 4px; display: block; }

.pagetitle { font-size: 23px; margin: 0 0 22px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 600; color: oklch(0.3 0.01 60); }
.form-field.full { grid-column: 1 / -1; }
.form-field input, .form-field select, .form-field textarea { background: #fff; min-height: 42px; width: 100%; }

.form-section + .form-section { margin-top: 20px; }

.form-actions { display: flex; gap: 10px; margin-top: 22px; }
.form-actions button { min-height: 44px; padding-inline: 22px; border-radius: var(--radius-md); }

/* ---- table ---- */
.table-wrap {
  background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.05), 0 4px 20px oklch(0.2 0.02 60 / 0.04);
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 13px 20px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-divider);
}
td { padding: 14px 20px 14px 17px; border-bottom: 1px solid var(--color-divider-soft); vertical-align: top; font-size: 13.5px; }
tr:last-child td { border-bottom: none; }
td.ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; background: var(--color-accent-tag-bg); color: var(--color-accent-tag-text);
}
.tag-outline-box {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: var(--radius-sm); border: 1.3px solid var(--color-divider-strong);
  color: var(--color-text-secondary); background: #fff;
}
.status-text { font-size: 13.5px; font-weight: 700; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-접수, .tag-open { background: var(--color-open-bg); color: var(--color-open); }
.badge-진행중, .tag-progress { background: var(--color-progress-bg); color: var(--color-progress); }
.badge-완료, .tag-done { background: var(--color-done-bg); color: var(--color-done); }
.badge-케이스진행중, .tag-transfer { background: var(--color-transfer-bg); color: var(--color-transfer); }

.row-actions { display: flex; gap: 6px; }
.row-actions button { padding: 4px 10px; font-size: 12px; }

.ticket-row { cursor: pointer; border-left: 3px solid transparent; }
.ticket-row td { transition: background-color 0.12s ease; }
.ticket-row:hover td { background: oklch(0.96 0.01 60); }
.ticket-row.border-접수 { border-left-color: var(--color-open); }
.ticket-row.border-진행중 { border-left-color: var(--color-progress); }
.ticket-row.border-완료 { border-left-color: var(--color-done); }
.ticket-row.border-케이스진행중 { border-left-color: var(--color-transfer); }
.ticket-no { font-family: var(--font-heading); font-weight: 700; color: var(--color-accent); white-space: nowrap; }

mark {
  background: var(--color-accent-light); color: oklch(0.2 0.02 60);
  padding: 0 2px; border-radius: 3px; font-weight: 700;
}

/* ---- ticket detail ---- */
.detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid var(--color-divider-strong);
  color: var(--color-navy); font-size: 13.5px; font-weight: 700;
  cursor: pointer; padding: 8px 14px; border-radius: var(--radius-sm);
  margin-bottom: 18px; font-family: inherit;
}
.detail-back:hover { background: var(--color-bg); border-color: var(--color-accent); color: var(--color-accent-tag-text); }
.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.detail-title { font-size: 22px; margin: 0; }
.detail-id { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 26px; }
.detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
.detail-meta-list .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--color-divider-soft); }
.detail-meta-list .row:last-child { border-bottom: none; }
.detail-meta-list .row .k { color: var(--color-text-secondary); }
.detail-meta-list .row .v { font-weight: 600; }
.detail-body p { font-size: 14.5px; line-height: 1.7; margin: 0 0 24px; }
.detail-body p:last-child { margin-bottom: 0; }

.history-list { display: flex; flex-direction: column; gap: 14px; }
.history-item { padding-bottom: 14px; border-bottom: 1px solid var(--color-divider-soft); }
.history-item:last-child { border-bottom: none; padding-bottom: 0; }
.history-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.history-actor { font-weight: 700; }
.history-action {
  font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--color-accent-tag-bg); color: var(--color-accent-tag-text);
}
.history-time { color: var(--color-text-secondary); font-size: 12px; margin-left: auto; }
.history-changes { margin: 0; padding-left: 18px; font-size: 13px; color: var(--color-text); }
.history-changes li { margin-bottom: 3px; }
.history-changes .old { color: var(--color-text-secondary); text-decoration: line-through; }
.history-changes .new { color: var(--color-done); font-weight: 600; }

@media (max-width: 780px) {
  .detail-layout { grid-template-columns: 1fr; }
}

.empty-state { text-align: center; padding: 60px 0; color: var(--color-text-secondary); }

.settings-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.tag-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }

.settings-block { margin-bottom: 26px; }
.settings-block:last-child { margin-bottom: 0; }
.settings-block h4 { margin: 0 0 10px; font-size: 15px; color: var(--color-text); }

.settings-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 26px; }

.settings-table-new-row td { padding-top: 10px; border-top: 1px dashed var(--color-divider); }
.settings-table-new-row input::placeholder { color: oklch(0.7 0.01 60); }
.settings-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; background: transparent; }
.settings-table th { font-size: 11px; padding: 10px 0; }
.settings-table td { padding: 8px 0; }
.settings-table input[type="text"], .settings-table input[type="password"] { width: 100%; padding: 6px 12px; font-size: 12.5px; min-height: auto; }
.settings-table-actions { display: flex; gap: 6px; white-space: nowrap; }
.settings-table-actions button { padding: 6px 12px; font-size: 12px; }
.settings-table-users th:nth-child(1), .settings-table-users td:nth-child(1) { width: 100px; }
.settings-table-users th:nth-child(5), .settings-table-users td:nth-child(5) { width: 60px; text-align: center; }
.settings-table-users th:nth-child(6), .settings-table-users td:nth-child(6) { width: 130px; }

.avatar-circle-lg {
  width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
  background: oklch(0.9 0.06 55); color: oklch(0.35 0.1 55);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-heading);
}

.stat-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 26px; }
.stat-card { background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 18px; border-top: 3px solid var(--color-divider-strong);
  box-shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.05), 0 4px 20px oklch(0.2 0.02 60 / 0.04); }
.stat-card.is-primary { background: var(--color-navy); border-top-color: var(--color-navy); box-shadow: none; }
.stat-card.is-primary .stat-label { color: oklch(0.72 0.01 60); }
.stat-card.is-primary .stat-value { color: var(--color-accent); }
.stat-label { font-size: 12.5px; color: var(--color-text-secondary); font-weight: 600; margin: 0 0 8px; }
.stat-value { font-family: var(--font-heading); font-size: 28px; font-weight: 700; margin: 0; color: var(--color-text); }

.chart-wrap { position: relative; height: 220px; }
.chart-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.settings-toast {
  position: fixed; top: 24px; left: 50%; transform: translate(-50%, -14px);
  background: #fff; border: 1px solid var(--color-divider); border-radius: 999px;
  padding: 12px 22px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px oklch(0.2 0.02 60 / 0.18);
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 9999; font-size: 14px; color: var(--color-text);
  pointer-events: none;
}
.settings-toast.show { opacity: 1; transform: translate(-50%, 0); }
.settings-toast .icon {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--color-done); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.settings-toast.error .icon { background: var(--color-danger); }

.tag[draggable="true"] { cursor: grab; user-select: none; }
.tag[draggable="true"]:active { cursor: grabbing; }
.tag.dragging { opacity: 0.4; }

/* Account controls share the same header on signed-in pages. */
.topbar-right { flex-wrap: wrap; justify-content: flex-end; }
.topbar-right > a, .topbar-right > span { white-space: nowrap; }
.account-password-link { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border:1px solid var(--color-divider-strong); border-radius:8px; background:#fff; color:var(--color-text); font-size:12.5px; text-decoration:none; }
.account-password-link:hover { background:#f1ede7; color:var(--color-text); }
.account-password-link:focus-visible, #ticket-list-section:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.account-content { width:100%; max-width:none; }
.password-card { width:100%; max-width:560px; padding:28px; }
.password-intro, .password-note, .password-card small { color:var(--color-text-secondary); font-size:13px; line-height:1.65; }
.password-intro { margin:0 0 24px; }
.password-card .form-field + .form-field { margin-top:20px; }
.password-note { margin:20px 0 0; }
.password-actions { flex-wrap:wrap; align-items:center; }
.password-actions > a { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 22px; border:1px solid var(--color-divider-strong); border-radius:var(--radius-md); color:var(--color-text-secondary); text-decoration:none; font-size:14px; font-weight:600; }

/* Give short fields predictable widths; reserve the remaining space for the title. */
.tickets-view { padding:26px 32px; }
.tickets-view .pagetitle { margin-bottom:20px; }
.tickets-view .toolbar { gap:10px; margin-bottom:18px; }
#filter-toolbar :is(input,select,button) { font-size:13px; height:38px; min-height:38px; }
#filter-toolbar input[type=search] { min-width:200px; }
#filter-toolbar select { min-width:120px; }
#filter-toolbar input[type=date] { min-width:140px; }
#filter-toolbar button { padding:0 14px; white-space:nowrap; }
.tickets-view .pagination { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-top:16px; font-size:13px; color:var(--color-text-secondary); }
.tickets-view .pagination-links { display:flex; align-items:center; gap:6px; }
.tickets-view .pagination button { min-height:34px; padding:6px 12px; }

@media (min-width:781px) {
  #ticket-list-section { overflow-x:auto; }
  .ticket-table { table-layout:fixed; min-width:1080px; }
  .ticket-table .col-number { width:82px; }
  .ticket-table .col-status { width:98px; }
  .ticket-table .col-program { width:136px; }
  .ticket-table .col-severity { width:84px; }
  .ticket-table .col-company { width:156px; }
  .ticket-table .col-person { width:76px; }
  .ticket-table .col-date { width:140px; }
  .ticket-table :is(th,td) { padding:14px 10px; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ticket-table th { font-size:11.5px; letter-spacing:0; background:#faf9f7; }
  .ticket-table td { font-size:13px; }
  .ticket-table td.ellipsis { max-width:none; }
  .ticket-table :is(.status-text,.tag,.tag-outline-box,.severity) { font-size:12px; white-space:nowrap; }
  .ticket-table :is(.tag,.tag-outline-box) { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
  .ticket-table .ticket-no { font-size:13px; }
}
@media (min-width:781px) and (max-width:1440px) {
  .sidebar { width:190px; padding-inline:12px; }
  .tickets-view { padding:24px; }
}
@media (max-width:780px) {
  .tickets-view { padding:20px 16px; }
  .ticket-table colgroup { display:none; }
  #ticket-list-section td { min-width:0; }
  #ticket-list-section td.ellipsis { white-space:normal; overflow-wrap:anywhere; max-width:none; }
  #ticket-list-section :is(.status-text,.tag,.tag-outline-box) { white-space:normal; word-break:keep-all; }
  #ticket-list-section .ticket-row { padding:12px 4px; }
  .password-card { padding:22px 18px; }
}

@media (max-width: 780px) {
  .form-grid, .settings-grid-3, .chart-grid-2, .detail-layout { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .toolbar-filters input, .toolbar-filters select { width: 100% !important; flex: 1 1 140px; }
  .toolbar-actions { flex-direction: column; align-items: stretch; }
  .toolbar-actions > div { justify-content: stretch; }
  .toolbar-actions button { width: 100%; }
  .hero-right { padding: 28px 20px; }
  .hero-form { max-width: 100%; }
  #new-ticket-card, .card[style*="max-width"] { max-width: 100% !important; }
  .form-field textarea { min-height: 160px; }
}