:root {
  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-border: #dde2e7;
  --color-text: #1c2733;
  --color-muted: #647184;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --radius: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --nav-height: 56px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
}

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

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
}
.navbar-brand { font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
.navbar-brand:hover { text-decoration: none; }
.navbar-links {
  display: none;
  gap: var(--space-4);
  align-items: center;
}
.navbar-links a { color: var(--color-text); font-weight: 500; }
.navbar-links a.active { color: var(--color-primary); }
.navbar-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 1.1rem;
  cursor: pointer;
}
.navbar-mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4) var(--space-4);
}
.navbar-mobile-menu.open { display: flex; }
.navbar-mobile-menu a {
  padding: var(--space-3) 0;
  color: var(--color-text);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}
.navbar-mobile-menu a:last-child { border-bottom: none; }

@media (min-width: 768px) {
  .navbar-links { display: flex; }
  .navbar-toggle { display: none; }
  .navbar-mobile-menu { display: none !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { text-decoration: none; background: #f0f2f5; }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.btn-sm { min-height: 32px; padding: 4px 10px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Cards / stats ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-align: center;
}
.stat-card .stat-value { font-size: 1.4rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.75rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.badge-status-new, .badge-status-assigned { background: #e0e7ff; color: #3730a3; }
.badge-status-work-ongoing { background: #dbeafe; color: #1e40af; }
.badge-status-user-to-reply { background: #fef3c7; color: #92400e; }
.badge-status-re-open { background: #fde68a; color: #92400e; }
.badge-status-on-hold { background: #fee2e2; color: #991b1b; }
.badge-status-resolved { background: #dcfce7; color: #166534; }
.badge-status-closed { background: #e5e7eb; color: #374151; }
.badge-status-archived { background: #f3e8ff; color: #6b21a8; }
.badge-priority-low { background: #e5e7eb; color: #374151; }
.badge-priority-medium { background: #dbeafe; color: #1e40af; }
.badge-priority-high { background: #ffedd5; color: #9a3412; }
.badge-priority-critical { background: #fee2e2; color: #991b1b; }
.badge-flagged { background: #fee2e2; color: #991b1b; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: var(--space-4); }
label { display: block; font-weight: 600; margin-bottom: var(--space-1); font-size: 0.85rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="search"], input[type="file"],
select, textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-family: inherit;
}
textarea { min-height: 90px; resize: vertical; }
select[multiple] { min-height: 100px; }
.help-text { font-size: 0.78rem; color: var(--color-muted); margin-top: 4px; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form-row .form-group { flex: 1 1 200px; }

/* ---------- Filters bar ---------- */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
  margin-bottom: var(--space-4);
}
.filters-bar .form-group { margin-bottom: 0; min-width: 140px; }

/* ---------- Alerts ---------- */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  font-size: 0.88rem;
}
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* ---------- Responsive ticket table ---------- */
table.ticket-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
table.ticket-table th, table.ticket-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
table.ticket-table th { color: var(--color-muted); font-size: 0.75rem; text-transform: uppercase; }
table.ticket-table tr:hover { background: #fafbfc; }

@media (max-width: 720px) {
  table.ticket-table thead { display: none; }
  table.ticket-table, table.ticket-table tbody, table.ticket-table tr, table.ticket-table td { display: block; width: 100%; }
  table.ticket-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
  }
  table.ticket-table td {
    border-bottom: none;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
  }
  table.ticket-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
  }
}

/* ---------- Misc ---------- */
.muted { color: var(--color-muted); }
.section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.attachment-list { list-style: none; padding: 0; margin: 0; }
.attachment-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.attachment-list li:last-child { border-bottom: none; }
.activity-log { list-style: none; padding: 0; margin: 0; }
.activity-log li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; }
.activity-log li:last-child { border-bottom: none; }
.activity-log .activity-meta { color: var(--color-muted); font-size: 0.75rem; }
.comment { background: #f8f9fb; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-2); }
.internal-note { background: #fffbea; border: 1px solid #fde68a; border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-2); }
.empty-state { text-align: center; color: var(--color-muted); padding: var(--space-6) var(--space-4); }
.pagination { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-card { max-width: 380px; width: 100%; }
.checkbox-cell { width: 32px; }

/* ---------- Reports charts (Phase 3) — plain CSS bars, no JS chart lib ---------- */
.bar-chart { display: flex; flex-direction: column; gap: var(--space-2); }
.bar-row { display: grid; grid-template-columns: 130px 1fr 50px; align-items: center; gap: var(--space-2); }
.bar-row .bar-label { font-size: 0.82rem; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--color-primary); border-radius: 4px 0 0 4px; min-width: 2px; }
.bar-row .bar-count { font-size: 0.82rem; text-align: right; color: var(--color-muted); }
.pii-toggle { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.pii-toggle input { width: auto; min-height: auto; }
.export-buttons { display: flex; gap: var(--space-2); }