@font-face {
  font-family: 'Proxima Nova';
  src: url('../../main/font/proxima_nova/Proxima Nova Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../../main/font/proxima_nova/Proxima Nova Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../../main/font/proxima_nova/Proxima Nova Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutrals — warm greys, no blue tint */
  --color-bg:        #f5f5f2;
  --color-bg-deep:   #eeeee8;
  --color-surface:   #ffffff;
  --color-border:    #e4e4df;
  --color-border-strong: #d1d1ca;
  --color-text:      #1a1a1a;
  --color-text-soft: #3f3f3b;
  --color-text-muted:#7a7a74;

  /* Brand */
  --color-primary:        #2c3da7;
  --color-primary-dark:   #181d4d;
  --color-primary-soft:   #eef0ff;
  --color-primary-border: #c9ceef;
  --color-brand-accent:   #00c995;

  /* States */
  --color-danger:   #b91c1c;
  --color-danger-soft:#fdecec;
  --color-warning:  #b45309;
  --color-warning-soft:#fdf3e3;
  --color-success:  #15803d;
  --color-success-soft:#e6f4ea;
  --color-info:     #0e7490;
  --color-info-soft:#e2f3f6;
  --color-accent:   #c2410c; /* warm ember for sparse highlights */

  /* Shape */
  --radius-xs: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Elevation — hairline first, shadow second */
  --ring-soft:   0 0 0 1px var(--color-border);
  --shadow-sm:   0 1px 1px rgba(17,17,17,.04);
  --shadow:      0 1px 2px rgba(17,17,17,.06), 0 1px 1px rgba(17,17,17,.04);
  --shadow-md:   0 8px 20px -12px rgba(17,17,17,.18), 0 2px 4px rgba(17,17,17,.05);
  --shadow-lg:   0 24px 48px -24px rgba(17,17,17,.22);

  --font: 'Proxima Nova', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 { letter-spacing: -0.012em; color: var(--color-text); }

::selection { background: #fde68a; color: #1a1a1a; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .02s;
  font-family: var(--font);
  white-space: nowrap;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,78,216,.22); }

.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.btn-secondary { background: #fff; color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-bg); border-color: #b8b8b0; }

.btn-ghost { background: transparent; color: var(--color-text-soft); border-color: transparent; }
.btn-ghost:hover { background: var(--color-bg-deep); color: var(--color-text); }

.btn-danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-success:hover { background: #0f6b30; }

.btn-sm { padding: 5px 11px; font-size: .78rem; border-radius: var(--radius-xs); }
.btn-lg { padding: 11px 22px; font-size: .95rem; }

/* ── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-soft);
  letter-spacing: -.003em;
}
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: .88rem;
  font-family: var(--font);
  color: var(--color-text);
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
  line-height: 1.4;
}
.form-control::placeholder { color: #a8a8a2; }
.form-control:hover { border-color: #b8b8b0; }
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
}
textarea.form-control { resize: vertical; min-height: 110px; line-height: 1.6; }
select.form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7a74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.form-hint  { font-size: .76rem; color: var(--color-text-muted); margin-top: 5px; }
.form-error { font-size: .76rem; color: var(--color-danger); margin-top: 5px; }
.form-control.error { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(185,28,28,.10); }

/* ── Cards ─────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.card-title {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--color-text);
}

/* ── Tables ────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: transparent;
  padding: 10px 14px;
  text-align: left;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-strong);
  white-space: nowrap;
}
tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: .86rem;
  color: var(--color-text-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color .08s; }
tbody tr:hover { background: var(--color-bg); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
tbody td strong { color: var(--color-text); font-weight: 600; }
td code, .mono { font-family: var(--font-mono); font-size: .82em; color: var(--color-text); }

/* ── Badges ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: -.003em;
  line-height: 1.55;
  border: 1px solid transparent;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  flex-shrink: 0;
}
.badge-open        { background: #e8efff; color: #1e40af; border-color: #c6d3f7; }
.badge-in-progress { background: #ece7ff; color: #4338ca; border-color: #cdc3f6; }
.badge-waiting     { background: #fdf2d8; color: #92400e; border-color: #f2d9a0; }
.badge-resolved    { background: #e1f3e7; color: #166534; border-color: #b8dfc5; }
.badge-closed      { background: #ededea; color: #4b4b47; border-color: #dcdcd5; }

.badge-critical    { background: #fde3e3; color: #991b1b; border-color: #f5b7b7; }
.badge-high        { background: #fde4d0; color: #9a3412; border-color: #f4c1a0; }
.badge-medium      { background: #fbf0c4; color: #92400e; border-color: #ebd48b; }
.badge-low         { background: #ececea; color: #4b4b47; border-color: #dcdcd5; }

/* Priority dot (inline) */
.priority-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
  vertical-align: 1px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.03);
}
.dot-critical { background: #dc2626; }
.dot-high     { background: #ea580c; }
.dot-medium   { background: #ca8a04; }
.dot-low      { background: #94a3b8; }

/* ── Flash messages ────────────────────────────────────── */
.flash-message {
  padding: 11px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: .86rem;
  font-weight: 500;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 10px;
}
.flash-message::before {
  content: '';
  width: 4px; align-self: stretch;
  border-radius: 2px;
  margin: -11px 0 -11px -16px;
  margin-right: 4px;
}
.flash-success { background: var(--color-success-soft); color: #14532d; border-color: #b8dfc5; }
.flash-success::before { background: var(--color-success); }
.flash-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.flash-warning::before { background: var(--color-warning); }
.flash-error   { background: var(--color-danger-soft);  color: #991b1b; border-color: #f5b7b7; }
.flash-error::before { background: var(--color-danger); }

/* ── Pagination ────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 22px;
  justify-content: center;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .82rem;
  font-weight: 500;
  color: var(--color-text-soft);
  background: transparent;
  transition: background-color .1s, color .1s, border-color .1s;
}
.pagination a:hover {
  background: #fff;
  border-color: var(--color-border-strong);
  color: var(--color-text);
  text-decoration: none;
}
.pagination .active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.pagination .disabled { color: #b8b8b0; cursor: not-allowed; }

/* ── Stat cards ────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.stat-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: transparent;
}
.stat-card .stat-label {
  font-size: .7rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.stat-card .stat-number {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stat-card.accent-blue::before   { background: var(--color-primary); }
.stat-card.accent-red::before    { background: var(--color-danger); }
.stat-card.accent-yellow::before { background: var(--color-warning); }
.stat-card.accent-green::before  { background: var(--color-success); }
.stat-card.accent-info::before   { background: var(--color-info); }

/* ── Alerts ────────────────────────────────────────────── */
.alert {
  padding: 12px 16px 12px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: .86rem;
  border: 1px solid;
  border-left-width: 3px;
  line-height: 1.55;
}
.alert-warning { background: var(--color-warning-soft); border-color: #f2d9a0; border-left-color: var(--color-warning); color: #7c3f05; }
.alert-info    { background: var(--color-info-soft);    border-color: #b7dde2; border-left-color: var(--color-info);    color: #0b4a56; }
.alert-success { background: var(--color-success-soft); border-color: #b8dfc5; border-left-color: var(--color-success); color: #14532d; }
.alert-error   { background: var(--color-danger-soft);  border-color: #f5b7b7; border-left-color: var(--color-danger);  color: #7f1d1d; }

/* ── Utilities ─────────────────────────────────────────── */
.text-muted { color: var(--color-text-muted); }
.text-sm    { font-size: .82rem; }
.text-xs    { font-size: .75rem; }
.mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* ── Scrollbar refinement (webkit) ─────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d1ca; border-radius: 10px; border: 2px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: #b8b8b0; }