/* ============================================================
   NIST CSF Assessment — Design System
   Unified typography, spacing, color, and component styles.
   Inter font · Brand orange #F36E21 · Clean minimal UI
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand */
  --brand:          #F36E21;
  --brand-dark:     #d95e16;
  --brand-light:    #fff4ee;
  --brand-ring:     rgba(243,110,33,0.20);

  /* Text */
  --txt-heading:    #111827;
  --txt-body:       #374151;
  --txt-secondary:  #6b7280;
  --txt-muted:      #9ca3af;
  --txt-disabled:   #d1d5db;

  /* Surfaces */
  --surface:        #ffffff;
  --surface-subtle: #f9fafb;
  --surface-muted:  #f3f4f6;
  --border:         #e5e7eb;
  --border-strong:  #d1d5db;

  /* Semantic colors */
  --success:        #10b981;
  --success-bg:     #ecfdf5;
  --warning:        #f59e0b;
  --warning-bg:     #fffbeb;
  --error:          #ef4444;
  --error-bg:       #fef2f2;
  --info:           #3b82f6;
  --info-bg:        #eff6ff;

  /* Font scale */
  --f-2xs:  0.625rem;    /* 10px */
  --f-xs:   0.6875rem;   /* 11px */
  --f-sm:   0.75rem;     /* 12px */
  --f-base: 0.875rem;    /* 14px */
  --f-md:   0.9375rem;   /* 15px */
  --f-lg:   1.0625rem;   /* 17px */
  --f-xl:   1.1875rem;   /* 19px */
  --f-2xl:  1.375rem;    /* 22px */
  --f-3xl:  1.75rem;     /* 28px */

  /* Legacy aliases (keep existing code working) */
  --color-brand:          var(--brand);
  --color-brand-dark:     var(--brand-dark);
  --color-brand-light:    var(--brand-light);
  --color-text-heading:   var(--txt-heading);
  --color-text-body:      var(--txt-body);
  --color-text-secondary: var(--txt-secondary);
  --color-text-muted:     var(--txt-muted);
  --color-surface:        var(--surface);
  --color-surface-subtle: var(--surface-subtle);
  --color-border:         var(--border);
  --color-border-strong:  var(--border-strong);
  --color-success:        var(--success);
  --color-warning:        var(--warning);
  --color-error:          var(--error);
  --color-info:           var(--info);
  --text-2xs:  var(--f-2xs);
  --text-xs:   var(--f-xs);
  --text-sm:   var(--f-sm);
  --text-base: var(--f-base);
  --text-md:   var(--f-md);
  --text-lg:   var(--f-lg);
  --text-xl:   var(--f-xl);
  --text-2xl:  var(--f-2xl);
  --text-3xl:  var(--f-3xl);
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* Radius scale */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* Shadow scale */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 48px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.08);
}

/* ── BASE RESET ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--f-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--txt-body);
  background-color: var(--surface-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force Inter on text elements — explicitly exclude Font Awesome elements
   and never touch ::before / ::after (FA icons live there). */
html, body,
button:not(.fa):not(.fas):not(.far):not(.fab),
input, select, textarea,
h1, h2, h3, h4, h5, h6, p,
span:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab),
div:not([class*="fa-"]),
a:not([class*="fa-"]),
li, td, th, label {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Explicitly restore Font Awesome — highest priority */
.fa, .fas, .far, .fab, .fal, .fad,
[class*=" fa-"]:before, [class^="fa-"]:before,
.fas:before, .far:before, .fab:before, .fal:before {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome' !important;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  color: var(--txt-heading);
  font-weight: 600;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover { color: var(--brand-dark); }

/* ── TYPOGRAPHY UTILITIES ───────────────────────────────────── */
.page-title {
  font-size: var(--f-2xl);
  font-weight: 700;
  color: var(--txt-heading);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.section-header {
  font-size: var(--f-lg);
  font-weight: 600;
  color: var(--txt-heading);
  line-height: 1.3;
}

.card-title {
  font-size: var(--f-md);
  font-weight: 600;
  color: var(--txt-heading);
}

.body-text {
  font-size: var(--f-base);
  color: var(--txt-body);
  line-height: 1.6;
}

.secondary-text {
  font-size: var(--f-base);
  color: var(--txt-secondary);
}

.meta-label {
  font-size: var(--f-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--txt-secondary);
}

.badge-text {
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.text-muted {
  font-size: var(--f-sm);
  color: var(--txt-secondary);
}

/* ── NORMALIZE TAILWIND GRAY CLASSES → DESIGN TOKENS ────────── */
/* Headings */
.text-gray-900 { color: var(--txt-heading)   !important; }
.text-gray-800 { color: var(--txt-heading)   !important; }
.text-gray-700 { color: var(--txt-body)      !important; }
.text-gray-600 { color: var(--txt-secondary) !important; }
.text-gray-500 { color: var(--txt-muted)     !important; }
.text-gray-400 { color: var(--txt-disabled)  !important; }

/* Make h-elements inside cards/views consistent */
#main-content h1,
#main-content h2:not([class*="text-red"]):not([class*="text-green"]):not([class*="text-blue"]):not([class*="text-purple"]) {
  font-size: var(--f-2xl);
  font-weight: 700;
  color: var(--txt-heading);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

#main-content h3,
.bg-white h3,
.rounded-lg h3,
.rounded-xl h3 {
  font-size: var(--f-lg);
  font-weight: 600;
  color: var(--txt-heading);
}

#main-content h4,
.bg-white h4 {
  font-size: var(--f-md);
  font-weight: 600;
  color: var(--txt-heading);
}

/* ── STAT NUMBERS ───────────────────────────────────────────── */
.stat-value {
  font-weight: 900;
  color: var(--txt-heading);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-value-xl { font-size: var(--f-3xl); }
.stat-value-lg { font-size: 2rem; }
.stat-value-md { font-size: 1.5rem; }

/* ── CARDS ──────────────────────────────────────────────────── */
.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.app-card-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

/* Normalize common Tailwind card patterns */
.bg-white.rounded-lg,
.bg-white.rounded-xl {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── TABLES ─────────────────────────────────────────────────── */
th {
  font-size: var(--f-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--txt-secondary) !important;
  white-space: nowrap;
}

td {
  font-size: var(--f-base);
  color: var(--txt-body);
  vertical-align: middle;
}

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
/* label: block only inside actual forms, not inline filter bars */
label {
  font-size: var(--f-sm) !important;
  font-weight: 500 !important;
  color: var(--txt-body) !important;
}
form label,
.form-group label,
.space-y-4 label,
.space-y-3 label,
.space-y-2 label {
  display: block;
  margin-bottom: 0.25rem;
}

/* Inputs / selects / textareas inside forms → full width */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="search"],
form select,
form textarea,
.form-group input,
.form-group select,
.form-group textarea,
.space-y-4 input[type="text"],
.space-y-4 input[type="email"],
.space-y-4 input[type="password"],
.space-y-4 input[type="number"],
.space-y-4 input[type="date"],
.space-y-4 select,
.space-y-4 textarea,
.space-y-3 select,
.space-y-3 textarea,
.space-y-2 select {
  font-family: inherit !important;
  font-size: var(--f-base) !important;
  color: var(--txt-heading) !important;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  line-height: 1.5;
}

/* Focus ring for form fields */
form input:focus,
form select:focus,
form textarea:focus,
.space-y-4 input:focus,
.space-y-4 select:focus,
.space-y-4 textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--txt-muted) !important;
  font-weight: 400;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
/* Base button reset */
button {
  font-family: inherit !important;
  cursor: pointer;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.btn-brand {
  background: var(--brand);
  color: #fff !important;
  font-size: var(--f-base);
  font-weight: 500;
  border-radius: var(--r-md);
  padding: 0.5rem 1rem;
}
.btn-brand:hover { background: var(--brand-dark); }

.btn-secondary {
  background: var(--surface);
  color: var(--txt-body) !important;
  font-size: var(--f-base);
  font-weight: 500;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 0.5rem 1rem;
}
.btn-secondary:hover {
  background: var(--surface-subtle);
  border-color: var(--txt-secondary);
}

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--f-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

/* ── MODAL TITLES ───────────────────────────────────────────── */
.fixed h2,
.fixed h3 {
  font-size: var(--f-xl) !important;
  font-weight: 700 !important;
  color: var(--txt-heading) !important;
}

/* ── DROPDOWNS ──────────────────────────────────────────────── */
.app-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  z-index: 100;
  overflow: hidden;
}

.app-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-size: var(--f-base);
  font-weight: 500;
  color: var(--txt-body);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
}
.app-dropdown-item:hover {
  background: var(--surface-subtle);
  color: var(--txt-heading);
}
.app-dropdown-item + .app-dropdown-item {
  border-top: 1px solid var(--border);
}

/* ── PAGE VIEW CONTAINER ────────────────────────────────────── */
.view-container {
  animation: fadeInUp 0.22s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── VIEW HEADER (page icon + title) ───────────────────────── */
/* Enforce consistent page-title style wherever h2 is used as page header */
.view-container > div:first-child h2,
#action-plans-view > div:first-child h2,
#assessments-view > div:first-child h2,
#frameworks-view > div:first-child h2,
#reports-view > div:first-child h2 {
  font-size: var(--f-2xl) !important;
  font-weight: 700 !important;
  color: var(--txt-heading) !important;
  letter-spacing: -0.015em !important;
}

/* ── NAV BUTTON ─────────────────────────────────────────────── */
.nav-btn {
  transition: all 0.18s ease;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--txt-muted); }