/* === Helpdesk base — Monday.com-inspired tokens, DM Sans, light + dark ===
   Aligned with the existing styles.css from the design canvas, distilled
   for a real production SPA. */

:root {
  --blue-h: 212;
  --blue-s: 98%;
  --blue-l: 46%;
  --blue:        hsl(var(--blue-h) var(--blue-s) var(--blue-l));
  --blue-hover:  hsl(var(--blue-h) var(--blue-s) 40%);
  --blue-soft:   hsl(var(--blue-h) var(--blue-s) 96%);
  --blue-soft-2: hsl(var(--blue-h) var(--blue-s) 90%);

  --green: #22a06b;        --green-soft: #e3f7ec;
  --amber: #d48806;        --amber-soft: #fff3d6;
  --red:   #e0354b;        --red-soft:   #fde5e9;
  --purple:#8b5cf6;        --purple-soft:#f1ebfe;
  --pink:  #ec4899;        --pink-soft:  #fdf2f8;
  --grey-pill: #6b7280;    --grey-pill-soft: #eef0f3;

  --bg:           #f7f8fa;
  --panel:        #ffffff;
  --panel-2:      #fbfbfd;
  --border:       #e7e9ee;
  --border-strong:#d7dae1;
  --text:         #151921;
  --text-muted:   #5b6472;
  --text-dim:     #8a93a1;
  --hover:        #f3f5f8;
  --active:       #eef1f6;
  --row-hover:    #f7f9fc;

  --shadow-sm: 0 1px 2px rgba(20, 25, 40, 0.04);
  --shadow-md: 0 6px 20px rgba(20, 25, 40, 0.06), 0 1px 3px rgba(20, 25, 40, 0.04);
  --shadow-lg: 0 24px 60px rgba(20, 25, 40, 0.12), 0 2px 6px rgba(20, 25, 40, 0.06);

  --pad-lg: 28px; --pad-md: 20px; --pad-sm: 12px;
  --row-h: 44px;
  --radius:    10px;
  --radius-sm: 8px;
  --radius-lg: 14px;

  --ai-grad: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #06b6d4 100%);
  --ai-grad-soft: linear-gradient(135deg, rgba(124,58,237,.08), rgba(37,99,235,.08), rgba(6,182,212,.08));
}

[data-theme="dark"] {
  --bg: #0d1016;
  --panel: #151922;
  --panel-2: #10141b;
  --border: #242a36;
  --border-strong: #333a49;
  --text: #e9ecf1;
  --text-muted: #9aa3b2;
  --text-dim: #6c7586;
  --hover: #1b2130;
  --active: #212a3b;
  --row-hover: #1a1f2b;
  --blue-soft: rgba(0, 115, 234, 0.14);
  --blue-soft-2: rgba(0, 115, 234, 0.28);
  --green-soft: rgba(34, 160, 107, 0.18);
  --amber-soft: rgba(212, 136, 6, 0.20);
  --red-soft:   rgba(224, 53, 75, 0.20);
  --purple-soft:rgba(139, 92, 246, 0.22);
  --pink-soft:  rgba(236, 72, 153, 0.18);
  --grey-pill-soft: rgba(107, 114, 128, 0.22);
  --grey-pill:  #a0a8b7;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ai-grad-soft: linear-gradient(135deg, rgba(124,58,237,.18), rgba(37,99,235,.16), rgba(6,182,212,.14));
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 38px; padding: 0 16px;
  border-radius: var(--radius-sm);
  font-weight: 500; font-size: 14px;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(0.5px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 7px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary { background: var(--panel); color: var(--blue); border-color: var(--blue); }
.btn-secondary:hover { background: var(--blue-soft); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--hover); }
.btn-danger { background: transparent; color: var(--red); border-color: var(--red-soft); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-icon {
  width: 36px; height: 36px; padding: 0; border-radius: 8px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { background: var(--hover); color: var(--text); }

/* === Pills === */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  letter-spacing: -0.1px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green  { background: var(--green-soft); color: var(--green); }
.pill-amber  { background: var(--amber-soft); color: var(--amber); }
.pill-red    { background: var(--red-soft); color: var(--red); }
.pill-blue   { background: var(--blue-soft); color: var(--blue); }
.pill-purple { background: var(--purple-soft); color: var(--purple); }
.pill-pink   { background: var(--pink-soft);  color: var(--pink); }
.pill-grey   { background: var(--grey-pill-soft); color: var(--grey-pill); }

/* === Inputs === */
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 14px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.textarea { height: auto; padding: 10px 14px; resize: vertical; min-height: 96px; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.helper { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.helper-error { color: var(--red); }

.toggle {
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--border-strong); position: relative; cursor: pointer;
  transition: background .15s; flex-shrink: 0;
  display: inline-block;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle.on { background: var(--blue); }
.toggle.on::after { left: 18px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.hr { height: 1px; background: var(--border); border: none; margin: 0; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: content-box; border: 2px solid transparent; }

.brand-chip {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11.5px;
  letter-spacing: -0.3px; flex-shrink: 0;
}
.brand-chip.lg { width: 36px; height: 36px; font-size: 13px; }
.brand-chip.xl { width: 48px; height: 48px; font-size: 15px; }

.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11.5px; color: #fff;
  flex-shrink: 0;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.avatar.xl { width: 64px; height: 64px; font-size: 22px; }

.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; font-size: 13px; letter-spacing: -0.2px; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 5px; font-size: 11px; font-weight: 500;
  background: var(--active); color: var(--text-muted);
  border: 1px solid var(--border);
}
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.strong { font-weight: 600; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fadeIn .18s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.slide-down { animation: slideDown .14s ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,160,107,.4); } 70% { box-shadow: 0 0 0 10px rgba(34,160,107,0); } 100% { box-shadow: 0 0 0 0 rgba(34,160,107,0); } }

.menu {
  position: absolute;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 200px; z-index: 50;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border-radius: 7px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.menu-item:hover { background: var(--hover); }
.menu-item.danger { color: var(--red); }
.menu-divider { height: 1px; background: var(--border); margin: 6px -6px; }

/* Toasts */
#toast-host {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  min-width: 280px; max-width: 380px;
  font-size: 14px;
  animation: fadeIn .2s ease-out;
}
.toast.toast-success { border-left-color: var(--green); }
.toast.toast-error   { border-left-color: var(--red); }
.toast.toast-warning { border-left-color: var(--amber); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 250; padding: 20px;
  animation: fadeIn .15s ease-out;
}
.modal {
  background: var(--panel); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 560px;
  max-height: 90vh; overflow: auto;
  animation: fadeIn .18s ease-out;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal-body { padding: 22px 24px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border);
}