/*
  TalentscopeX – Unified Theme (V1)
  Design system matching home page: Navy blue primary + Manrope/Inter fonts
  Import this AFTER page-specific CSS for consistent overrides
*/

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

/* ── Design tokens ── */
:root {
  --tsx-primary: #003178;
  --tsx-primary-dark: #0d47a1;
  --tsx-primary-light: #1565c0;
  --tsx-primary-soft: rgba(0, 49, 120, .10);
  --tsx-primary-border: rgba(0, 49, 120, .18);
  --tsx-primary-shadow: rgba(0, 49, 120, .15);
  --tsx-gradient: linear-gradient(135deg, #003178 0%, #0d47a1 100%);
  --tsx-font-heading: 'Manrope', sans-serif;
  --tsx-font-body: 'Inter', sans-serif;
}

/* ── Typography: Manrope for headings, Inter for body ── */
body {
  font-family: var(--tsx-font-body);
}

h1, h2, h3, h4, h5, h6,
.page-title,
.card-title,
.section-title,
.section-heading,
.panel-title,
.modal-title,
.dialog-title,
.hero-title,
.kpi-val,
.kpi-label,
.dash-title,
.stat-val {
  font-family: var(--tsx-font-heading);
}

/* ── Sidebar (Manrope for brand + nav) ── */
.sb-title,
.sb-brand,
.sb-label,
.sb-profile-name,
.sb-item {
  font-family: var(--tsx-font-heading);
}

.sb-item {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sb-title {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── Navigation (Manrope) ── */
.nav-links,
.nav-links a,
.top-nav a,
.topbar .breadcrumb,
.breadcrumb a {
  font-family: var(--tsx-font-heading);
}

/* ── Buttons (Manrope, bold) ── */
.btn,
.button,
button,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-link,
[class*="btn-"] {
  font-family: var(--tsx-font-heading);
  letter-spacing: -0.01em;
}

/* ── Tabs & Pills (Manrope) ── */
.tab,
.tab-btn,
.pill,
.badge,
.chip,
.tag {
  font-family: var(--tsx-font-heading);
}

/* ── Form labels (Manrope) ── */
label,
.form-label,
.field-label,
.input-label,
legend {
  font-family: var(--tsx-font-heading);
}

/* ── Table headers (Manrope) ── */
th,
.table-clean th,
.thead-label {
  font-family: var(--tsx-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Auth pages branding ── */
.brand,
.auth-brand,
.brand-name {
  font-family: var(--tsx-font-heading);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ── Card polish ── */
.card,
.feature-card,
.kpi-card,
.dash-card,
.quick-card {
  border: 1px solid rgba(0, 49, 120, .08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover,
.feature-card:hover,
.kpi-card:hover,
.dash-card:hover,
.quick-card:hover {
  border-color: rgba(0, 49, 120, .16);
}

/* ── Focus ring: navy ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #003178;
  outline-offset: 2px;
}

/* ── Input focus glow ── */
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 49, 120, .35) !important;
  box-shadow: 0 0 0 3px rgba(0, 49, 120, .08);
}

/* ── Scrollbar theming ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 49, 120, .15);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 49, 120, .30);
}

/* ═══════════════════════════════════════════════════════
   STANDARDIZED MODAL / DIALOG / TOAST SYSTEM
   Use these classes for ALL modals, confirms, and toasts
   across the platform for a consistent UX.
   ═══════════════════════════════════════════════════════ */

/* ── Modal Overlay (backdrop) ── */
.tsx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}

.tsx-modal-overlay.show {
  display: flex;
  opacity: 1;
}

.tsx-modal-overlay.hidden {
  display: none !important;
}

/* ── Modal Card (container) ── */
.tsx-modal-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  width: min(460px, 92vw);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  animation: tsxModalIn .2s ease forwards;
}

.tsx-modal-card.wide {
  width: min(600px, 92vw);
}

.tsx-modal-card.narrow {
  width: min(380px, 92vw);
}

@keyframes tsxModalIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Modal Icon ── */
.tsx-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}

.tsx-modal-icon.primary  { background: rgba(0, 49, 120, 0.10); color: var(--tsx-primary); }
.tsx-modal-icon.success  { background: rgba(16, 185, 129, 0.10); color: #059669; }
.tsx-modal-icon.warning  { background: rgba(245, 158, 11, 0.10); color: #d97706; }
.tsx-modal-icon.danger   { background: rgba(239, 68, 68, 0.10); color: #dc2626; }
.tsx-modal-icon.info     { background: rgba(59, 130, 246, 0.10); color: #2563eb; }

/* ── Modal Title ── */
.tsx-modal-title {
  font-family: var(--tsx-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #1a1b21;
  margin: 0 0 8px;
  line-height: 1.3;
}

/* ── Modal Description / Body ── */
.tsx-modal-desc {
  font-size: 14px;
  color: #5e5e66;
  line-height: 1.6;
  margin: 0 0 22px;
}

.tsx-modal-desc b,
.tsx-modal-desc strong {
  color: #1a1b21;
  font-weight: 600;
}

/* ── Modal Close Button (top-right X) ── */
.tsx-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #5e5e66;
  transition: all .15s ease;
}

.tsx-modal-close:hover {
  background: rgba(15, 23, 42, 0.12);
  color: #1a1b21;
}

.tsx-modal-card.has-close {
  position: relative;
  padding-top: 24px;
}

/* ── Modal Actions (button row) ── */
.tsx-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.tsx-modal-actions.spread {
  justify-content: space-between;
}

/* ── Modal Buttons ── */
.tsx-modal-btn {
  padding: 10px 24px;
  border-radius: 12px;
  font-family: var(--tsx-font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  min-width: 100px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.tsx-modal-btn.cancel {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.72);
}
.tsx-modal-btn.cancel:hover {
  background: rgba(15, 23, 42, 0.12);
  color: #1a1b21;
}

.tsx-modal-btn.primary {
  background: var(--tsx-primary);
  color: #fff;
}
.tsx-modal-btn.primary:hover {
  background: #00254d;
}

.tsx-modal-btn.success {
  background: #059669;
  color: #fff;
}
.tsx-modal-btn.success:hover {
  background: #047857;
}

.tsx-modal-btn.danger {
  background: #dc2626;
  color: #fff;
}
.tsx-modal-btn.danger:hover {
  background: #b91c1c;
}

.tsx-modal-btn.warning {
  background: #d97706;
  color: #fff;
}
.tsx-modal-btn.warning:hover {
  background: #b45309;
}

/* ── Badge inside modal ── */
.tsx-modal-badge {
  display: inline-block;
  background: rgba(0, 49, 120, 0.06);
  border: 1px solid rgba(0, 49, 120, 0.14);
  color: var(--tsx-primary);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  word-break: break-all;
}

.tsx-modal-badge.danger {
  background: rgba(180, 35, 24, 0.08);
  border-color: rgba(180, 35, 24, 0.20);
  color: #7a1b16;
}

/* ═══════════════════════════════════════════════════════
   STANDARDIZED TOAST / SNACKBAR
   ═══════════════════════════════════════════════════════ */

.tsx-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  padding: 12px 20px;
  border-radius: 14px;
  font-family: var(--tsx-font-body);
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(420px, calc(100vw - 32px));
  text-align: center;
  line-height: 1.5;
}

.tsx-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.tsx-toast.error { background: #991b1b; }
.tsx-toast.success { background: #047857; }
.tsx-toast.warning { background: #92400e; }

/* ═══════════════════════════════════════════════════════
   LEGACY ALIASES — standardize old class names so existing
   templates automatically get the new consistent look.
   ═══════════════════════════════════════════════════════ */

/* Logout overlay (header.html, category.html, etc.) */
.logout-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.logout-overlay.hidden { display: none !important; }

.logout-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  width: min(460px, 92vw);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  animation: tsxModalIn .2s ease forwards;
}

.logout-card h3,
.logout-card h5 {
  font-family: var(--tsx-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #1a1b21;
  margin: 0 0 8px;
}

.logout-card p {
  font-size: 14px;
  color: #5e5e66;
  margin: 0 0 22px;
  font-weight: 500;
}

.logout-card .buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.logout-card .buttons button {
  padding: 10px 24px;
  border-radius: 12px;
  font-family: var(--tsx-font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  min-width: 100px;
  height: 42px;
}

.logout-card .buttons #cancel-logout {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.72);
}
.logout-card .buttons #cancel-logout:hover {
  background: rgba(15, 23, 42, 0.12);
  color: #1a1b21;
}

.logout-card .buttons #confirm-logout {
  background: var(--tsx-primary, #003178);
  color: #fff;
}
.logout-card .buttons #confirm-logout:hover {
  background: #00254d;
}

/* Confirm backdrop + card (category.html, coding.html, etc.) */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-backdrop[aria-hidden="true"],
.confirm-backdrop.hide {
  display: none !important;
}
.confirm-backdrop.is-visible,
.confirm-backdrop.show {
  display: flex !important;
}

.confirm-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  width: min(460px, 92vw);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  animation: tsxModalIn .2s ease forwards;
}

.confirm-card .confirm-title,
.confirm-card h3,
.confirm-card h2 {
  font-family: var(--tsx-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #1a1b21;
  margin: 0 0 8px;
}

.confirm-card .confirm-message {
  font-size: 14px;
  color: #5e5e66;
  margin: 0 0 22px;
  line-height: 1.6;
}

.confirm-card .confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.confirm-card .confirm-actions button {
  padding: 10px 24px;
  border-radius: 12px;
  font-family: var(--tsx-font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  min-width: 100px;
  height: 42px;
}

.confirm-card .confirm-actions .btn-secondary,
.confirm-card .confirm-actions #confirmCancel,
.confirm-card .confirm-actions #publishOk {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.72);
}
.confirm-card .confirm-actions .btn-secondary:hover,
.confirm-card .confirm-actions #confirmCancel:hover {
  background: rgba(15, 23, 42, 0.12);
  color: #1a1b21;
}

.confirm-card .confirm-actions .btn-danger,
.confirm-card .confirm-actions #confirmOk {
  background: #dc2626;
  color: #fff;
}
.confirm-card .confirm-actions .btn-danger:hover,
.confirm-card .confirm-actions #confirmOk:hover {
  background: #b91c1c;
}

/* Confirm modal (history.html pattern) */
.confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  width: min(460px, 92vw);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  animation: tsxModalIn .2s ease forwards;
}
.confirm-modal.hide { display: none !important; }

.confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}
.confirm-icon.danger {
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
  border: none;
}

.confirm-title {
  font-family: var(--tsx-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #1a1b21;
  margin: 0 0 8px;
}

.confirm-text {
  font-size: 14px;
  color: #5e5e66;
  line-height: 1.6;
  margin: 0 0 22px;
}

.confirm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #5e5e66;
  transition: all .15s ease;
}
.confirm-close:hover {
  background: rgba(15, 23, 42, 0.12);
  color: #1a1b21;
}

.confirm-actions.center {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Remove overlay (organization.html) */
.remove-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.remove-overlay.hidden { display: none !important; }

.remove-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  width: min(460px, 92vw);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  animation: tsxModalIn .2s ease forwards;
}

/* Typing test modals */
.tt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tt-modal-backdrop.show { display: flex; }

.tt-modal {
  background: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  width: min(420px, 92vw);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
  animation: tsxModalIn .2s ease forwards;
}

.tt-modal-btn {
  padding: 10px 24px;
  border-radius: 12px;
  font-family: var(--tsx-font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  min-width: 90px;
  height: 42px;
}

/* Standardized toast (legacy alias) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  padding: 12px 20px;
  border-radius: 14px;
  font-family: var(--tsx-font-body);
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(420px, calc(100vw - 32px));
  text-align: center;
  line-height: 1.5;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast.error { background: #991b1b; }
.toast.success { background: #047857; }