/* =====================================================================
   SRMASC Helpdesk — Design System
   Shared design tokens + components. Loaded globally via includes/header.php.
   Pages may still use Tailwind utilities; these classes give a consistent,
   modern, accessible baseline that works without a build step.
   ===================================================================== */

:root {
  /* Brand — refined institutional indigo */
  --brand-50:  #eef1ff;
  --brand-100: #e0e5ff;
  --brand-200: #c6ccff;
  --brand-300: #a3a9fb;
  --brand-400: #7f81f4;
  --brand-500: #6360e8;
  --brand-600: #4f46d6;  /* primary */
  --brand-700: #4138b4;
  --brand-800: #352f8f;
  --brand-900: #2e2b72;

  /* Accent — restrained magenta, for highlights only */
  --accent-500: #d6418f;
  --accent-600: #b92b7c;

  /* Neutrals (slate) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Semantic status */
  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --danger:  #dc2626;
  --danger-bg: #fee2e2;
  --info:    #2563eb;
  --info-bg: #dbeafe;

  /* Surfaces & text */
  --bg:        var(--slate-50);
  --surface:   #ffffff;
  --text:      var(--slate-800);
  --text-muted:var(--slate-500);
  --border:    var(--slate-200);

  /* Shape & depth */
  --radius-sm: 0.5rem;
  --radius:    0.75rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 4px 16px -4px rgba(15, 23, 42, 0.12), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.20);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Base ---------------------------------------------------------- */
body.ds {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ds *::selection { background: var(--brand-100); }

/* Consistent page container */
.ds-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; }

/* Section heading */
.ds-page-title { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--slate-900); }
.ds-page-subtitle { color: var(--text-muted); margin-top: 0.25rem; }

/* ---- Cards --------------------------------------------------------- */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ds-card-hover:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.ds-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.ds-card-title  { font-weight: 700; font-size: 1.05rem; color: var(--slate-900); }

/* Stat / KPI card */
.ds-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.ds-stat-value { font-size: 2rem; font-weight: 800; color: var(--brand-700); line-height: 1; }
.ds-stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* ---- Buttons ------------------------------------------------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.925rem; line-height: 1;
  padding: 0.625rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.ds-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.ds-btn-primary  { background: var(--brand-600); color: #fff; }
.ds-btn-primary:hover  { background: var(--brand-700); box-shadow: var(--shadow-sm); }
.ds-btn-secondary{ background: var(--surface); color: var(--brand-700); border-color: var(--border); }
.ds-btn-secondary:hover{ background: var(--brand-50); border-color: var(--brand-200); }
.ds-btn-danger   { background: var(--danger); color: #fff; }
.ds-btn-danger:hover { background: #b91c1c; }
.ds-btn-ghost    { background: transparent; color: var(--slate-600); }
.ds-btn-ghost:hover { background: var(--slate-100); }
.ds-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.825rem; }
.ds-btn[disabled], .ds-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Forms --------------------------------------------------------- */
.ds-label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--slate-700); margin-bottom: 0.35rem; }
.ds-input, .ds-select, .ds-textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--slate-300); border-radius: var(--radius-sm);
  padding: 0.625rem 0.8rem; font-size: 0.925rem; font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.ds-input::placeholder { color: var(--slate-400); }
.ds-help { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }

/* ---- Tables -------------------------------------------------------- */
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.ds-table thead th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); background: var(--slate-50);
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
}
.ds-table tbody td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--slate-100); color: var(--slate-700); }
.ds-table tbody tr:hover { background: var(--brand-50); }
.ds-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* ---- Badges -------------------------------------------------------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--slate-100); color: var(--slate-700);
}
.ds-badge-success { background: var(--success-bg); color: #15803d; }
.ds-badge-warning { background: var(--warning-bg); color: #b45309; }
.ds-badge-danger  { background: var(--danger-bg);  color: #b91c1c; }
.ds-badge-info    { background: var(--info-bg);     color: #1d4ed8; }

/* ---- Alerts -------------------------------------------------------- */
.ds-alert { border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 0.9rem; border: 1px solid transparent; }
.ds-alert-success { background: var(--success-bg); border-color: #bbf7d0; color: #166534; }
.ds-alert-warning { background: var(--warning-bg); border-color: #fde68a; color: #92400e; }
.ds-alert-danger  { background: var(--danger-bg);  border-color: #fecaca; color: #991b1b; }
.ds-alert-info    { background: var(--info-bg);     border-color: #bfdbfe; color: #1e40af; }

/* ---- Page header pattern (title + subtitle + actions) -------------- */
.ds-page-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .ds-page-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.ds-page-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---- Tabs / segmented filter control ------------------------------- */
.ds-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--slate-100); border-radius: var(--radius-sm); flex-wrap: wrap; }
.ds-tab {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  font-weight: 600; font-size: 0.85rem; padding: 0.4rem 0.85rem; border-radius: calc(var(--radius-sm) - 2px);
  color: var(--slate-600); background: transparent; transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.ds-tab:hover { color: var(--slate-900); }
.ds-tab[aria-selected="true"], .ds-tab.is-active { background: var(--surface); color: var(--brand-700); box-shadow: var(--shadow-sm); }
.ds-tab .ds-tab-count { font-size: 0.7rem; background: var(--slate-200); color: var(--slate-700); border-radius: 999px; padding: 0.05rem 0.45rem; }
.ds-tab[aria-selected="true"] .ds-tab-count { background: var(--brand-100); color: var(--brand-700); }

/* ---- Empty state --------------------------------------------------- */
.ds-empty { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.ds-empty svg { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; color: var(--slate-300); }
.ds-empty-title { font-weight: 600; color: var(--slate-600); }

/* ---- Icon button (round) ------------------------------------------- */
.ds-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--slate-100); color: var(--slate-600); transition: background 0.15s ease, color 0.15s ease;
}
.ds-icon-btn:hover { background: var(--slate-200); color: var(--slate-900); }
.ds-icon-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.ds-icon-btn-success { background: var(--success-bg); color: #15803d; }
.ds-icon-btn-success:hover { background: #bbf7d0; }
.ds-icon-btn-danger { background: var(--danger-bg); color: #b91c1c; }
.ds-icon-btn-danger:hover { background: #fecaca; }
.ds-icon-btn svg { width: 1rem; height: 1rem; }

/* ---- Button extras: loading + large -------------------------------- */
.ds-btn-lg { padding: 0.8rem 1.4rem; font-size: 1rem; }
.ds-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ds-btn.is-loading::after {
  content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: ds-spin 0.7s linear infinite;
  color: #fff; top: calc(50% - 0.5rem); left: calc(50% - 0.5rem);
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---- Form validation state ----------------------------------------- */
.ds-input.is-error, .ds-select.is-error, .ds-textarea.is-error { border-color: var(--danger); }
.ds-input.is-error:focus, .ds-select.is-error:focus, .ds-textarea.is-error:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
.ds-field-error { color: var(--danger); font-size: 0.78rem; margin-top: 0.3rem; }
.ds-required { color: var(--danger); }

/* ---- Accessibility & links ----------------------------------------- */
.ds-link { color: var(--brand-700); text-decoration: none; font-weight: 600; }
.ds-link:hover { text-decoration: underline; }
.ds-link:focus-visible, .ds-card:focus-visible, a.ds-card:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Utilities ----------------------------------------------------- */
.ds-divider { height: 1px; background: var(--border); border: 0; margin: 1.25rem 0; }
.ds-muted { color: var(--text-muted); }