/* =====================================================================
 * ATLAS HRMS — base + compatibility layer.
 * Loaded BEFORE atlas-theme.css. Provides the host-page defaults the theme
 * assumes (body font, canvas, typography) and maps the utility class names
 * used across the EJS views (card, muted, btn, badge, label, input, ok, err,
 * grid, plain tables) onto the design tokens, so every page adopts the
 * ATLAS look. atlas-theme.css remains the canonical component source.
 * ===================================================================== */

:root { --brand: var(--accent-primary); }

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Compact type scale: rem-based sizes key off 14px, body copy is 13px. */
html { font-size: 14px; }
body {
  margin: 0;
  font-family: var(--font-main, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-primary); text-decoration: none; }
a:hover { color: var(--accent-primary-hover); text-decoration: underline; }
h1 { font-size: 1.5rem; font-weight: 600; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
code { font-family: var(--font-mono, monospace); font-size: 0.85em; background: var(--bg-tertiary); padding: 1px 5px; border-radius: var(--radius-sm); }

/* Page wrapper (portal-style pages that aren't inside the app shell) */
.wrap { max-width: 1160px; margin: 0 auto; padding: 24px; }

.muted { color: var(--text-secondary); }

/* --- Cards: give bare .card padding (theme .card has none; content views
       drop content straight into .card rather than .card-body). --- */
.card:not(:has(> .card-header)):not(:has(> .card-body)) { padding: 22px; }
.card > h1:first-child, .card > h3:first-child { margin-top: 0; }
.card + .card { margin-top: 16px; }

/* --- Grid helpers used by views --- */
.grid { display: grid; gap: 16px; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- Buttons: bare .btn → primary; .btn.ghost → secondary/outline. --- */
.btn { background: var(--accent-primary); color: #fff; border: 1px solid var(--accent-primary); font-weight: 600; }
.btn:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); color: #fff; text-decoration: none; }
.btn.ghost { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn.ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

/* --- Forms: legacy .label / .input classes --- */
.label {
  display: block; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary); margin-bottom: 6px;
}
.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-size: 0.9rem; font-family: inherit;
  background: var(--bg-secondary); color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
textarea.input { min-height: 90px; resize: vertical; }

/* --- Plain tables (views use bare <table>, not always .data-table) --- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 11px 14px; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
  background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color);
}
td { text-align: left; padding: 11px 14px; font-size: 0.85rem; color: var(--text-primary); border-bottom: 1px solid var(--border-light); vertical-align: middle; }
tbody tr { transition: background var(--transition-fast); }
tbody tr:hover td { background: var(--bg-tertiary); }
tbody tr:last-child td { border-bottom: none; }

/* --- Badges: give the bare .badge a default emerald tint (theme only
       styles the semantic modifiers). --- */
.badge { background: rgba(16, 185, 129, 0.1); color: var(--accent-primary); }

/* --- Status blocks --- */
.ok { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.3); color: #065f46; padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.9rem; }
.err { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.3); color: #991b1b; padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.9rem; }

/* Stat number helper used inline by some views */
.stat-num { font-size: 1.75rem; font-weight: 700; color: var(--accent-primary); line-height: 1.1; }