/* ==========================================================================
   UX / UI Polish Layer — loaded after styles.css
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ring: 0 0 0 3px rgba(13, 148, 136, 0.35);
  --shadow-layered: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05), 0 16px 32px -8px rgba(15, 23, 42, 0.08);
  --shadow-layered-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.09), 0 28px 48px -12px rgba(11, 59, 96, 0.18);
}

[data-theme="dark"] {
  --ring: 0 0 0 3px rgba(45, 212, 191, 0.4);
  --shadow-layered: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-layered-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- Global refinements ---------- */
::selection {
  background: rgba(13, 148, 136, 0.25);
  color: inherit;
}

html {
  scroll-padding-top: 130px;
}

body {
  background-image:
    radial-gradient(1100px 500px at 100% -10%, rgba(13, 148, 136, 0.06), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(11, 59, 96, 0.05), transparent 60%);
  background-attachment: fixed;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(13, 148, 136, 0.7); background-clip: content-box; }

/* ---------- Accessibility: visible keyboard focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}
.search-input-wrap input:focus-visible,
.audit-input-group input:focus-visible,
.audit-note-input:focus-visible {
  border-color: var(--brand-secondary);
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 1100;
  background: transparent;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #0d9488, #38bdf8, #d97706);
  border-radius: 0 99px 99px 0;
  transition: transform 0.08s linear;
}
html[dir="rtl"] .scroll-progress-bar {
  transform-origin: 100% 50%;
  border-radius: 99px 0 0 99px;
}

/* ---------- Navbar: compact-on-scroll ---------- */
.top-navbar {
  transition: box-shadow 0.3s var(--ease-out), background 0.3s ease;
}
.top-navbar .navbar-inner {
  transition: padding 0.3s var(--ease-out);
}
.top-navbar.is-compact {
  box-shadow: 0 8px 28px -10px rgba(15, 23, 42, 0.25);
}
.top-navbar.is-compact .navbar-inner {
  padding-block: 0.4rem;
}
.top-navbar.is-compact .brand-logo-wrap {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}
.top-navbar.is-compact .brand-titles p {
  display: none;
}
.brand-logo-wrap {
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

/* Active tab: animated underline accent */
.nav-tab.active::after {
  content: "";
  position: absolute;
  inset-inline: 22%;
  bottom: 3px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-secondary), #38bdf8);
  animation: tabAccent 0.35s var(--ease-out) both;
}
@keyframes tabAccent {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* ---------- Hero: depth + subtle grid texture ---------- */
.hero-banner {
  isolation: isolate;
}
.hero-banner > .hero-inner {
  position: relative;
  z-index: 1;
}
.hero-banner::after {
  z-index: 0;
}
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -2.3rem -1.5rem;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}
.hero-content h2 {
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.stat-card {
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.stat-card .stat-num {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #bfe9e4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Cards: layered depth + severity accent ---------- */
.item-card,
.intro-card,
.limits-section-card,
.thematic-matrix-card,
.audit-dashboard,
.filter-panel,
.quiz-container {
  box-shadow: var(--shadow-layered);
}
.item-card:hover,
.intro-card:hover {
  box-shadow: var(--shadow-layered-hover);
}
.item-card {
  position: relative;
  border-inline-start: 4px solid transparent;
}
.item-card:has(.severity-badge.critical) { border-inline-start-color: #dc2626; }
.item-card:has(.severity-badge.critical_major) { border-inline-start-color: #e11d48; }
.item-card:has(.severity-badge.major) { border-inline-start-color: #ea580c; }

.item-number-pill {
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px -3px rgba(11, 59, 96, 0.4);
}
.item-req-title {
  text-wrap: pretty;
}

/* Compliance boxes: refined icon chips */
.compliance-box {
  position: relative;
  overflow: hidden;
}
.compliance-box::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
  opacity: 0.55;
}
.compliance-box.limit-box { color: var(--critical-text); }
.compliance-box.verify-box { color: var(--major-text); }
.compliance-box.action-box { color: var(--success-text); }
.compliance-box .compliance-box-text { color: var(--text-primary); }

/* ---------- Buttons: tactile feedback ---------- */
.btn-tool,
.chip-btn,
.audit-btn,
.quiz-option-btn,
.nav-tab,
.icon-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-tool:active,
.chip-btn:active,
.audit-btn:active,
.nav-tab:active,
.icon-btn:active {
  transform: scale(0.96);
}
.btn-lang {
  box-shadow: 0 6px 16px -6px rgba(13, 148, 136, 0.55);
}

/* Chapter sidebar: clearer active & hover states */
.chapter-nav-btn {
  border-inline-start: 3px solid transparent;
}
.chapter-nav-btn.active {
  border-inline-start-color: #5eead4;
  box-shadow: 0 10px 22px -10px rgba(11, 59, 96, 0.55);
}

/* Search input: elevated */
.search-input-wrap input {
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.search-input-wrap input:focus {
  background: var(--bg-secondary);
}

/* Matrix table: zebra + rounded container */
.template-table-wrap {
  border-radius: var(--radius-md);
  overflow: auto;
}
.matrix-table th:first-child { border-start-start-radius: 10px; }
.matrix-table th:last-child { border-start-end-radius: 10px; }
.matrix-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-tertiary) 55%, transparent); }
.matrix-table tbody tr:hover td { background: var(--bg-tertiary); }

/* Audit: progress ring-like KPI emphasis */
.audit-kpi-box {
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.audit-kpi-box::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-secondary), #38bdf8);
  opacity: 0.6;
}
.audit-kpi-box .kpi-val {
  font-variant-numeric: tabular-nums;
}

/* ---------- Back-to-top floating action button ---------- */
.fab-top {
  position: fixed;
  inset-inline-end: 1.1rem;
  bottom: 1.1rem;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: var(--brand-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 900;
  box-shadow: 0 12px 28px -8px rgba(11, 59, 96, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s var(--ease-spring), box-shadow 0.25s ease;
}
.fab-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fab-top:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px -8px rgba(13, 148, 136, 0.6);
}
.fab-top svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Skeleton-friendly image loading ---------- */
.media-thumb-card img {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmerSweep 1.6s linear infinite;
}
.media-thumb-card img[complete],
.media-thumb-card img.loaded {
  animation: none;
  background: #fff;
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 768px) {
  html { scroll-padding-top: 150px; }
  .fab-top {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    bottom: 0.9rem;
  }
  /* Comfortable minimum touch targets (44px guideline) */
  .btn-tool,
  .chip-btn,
  .audit-btn,
  .icon-btn {
    min-height: 40px;
  }
  .item-card { border-inline-start-width: 3px; }
  .hero-inner::before { inset: -1.5rem -1rem; background-size: 26px 26px; }
}

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print: hide new chrome ---------- */
@media print {
  .scroll-progress, .fab-top { display: none !important; }
  body { background-image: none !important; }
  .item-card, .intro-card, .audit-dashboard { box-shadow: none !important; }
}

/* ---------- Performance (INP): skip rendering of off-screen heavy blocks ---------- */
.item-card,
.audit-row-card,
.limits-section-card,
.intro-card,
.chapter-group .chapter-banner + .items-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
.audit-row-card { contain-intrinsic-size: auto 150px; }
.limits-section-card { contain-intrinsic-size: auto 360px; }

/* Entrance animation only for first cards; avoid animating 96 cards at once */
.item-card:nth-child(n + 7) { animation: none; }

/* Cheaper compositing for the sticky blurred navbar */
.top-navbar { will-change: transform; contain: layout style; }

/* ==========================================================================
   Mobile hardening: no horizontal overflow, compact chapter carousel
   ========================================================================== */
html, body { max-width: 100%; overflow-x: clip; }

.chapter-range-tag { display: inline-flex; gap: 0.3rem; align-items: center; white-space: nowrap; }
.chapter-count { opacity: 0.75; }

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .navbar-inner, .nav-tabs-wrapper, .hero-inner, .hero-content, .hero-stats,
  .explorer-layout > *, .main-container, .filter-panel { min-width: 0; max-width: 100%; }

  .hero-banner { overflow: hidden; }
  .hero-top-row { gap: 0.6rem; }
  .hero-full-logo { height: 40px; max-width: 100%; }
  .hero-badge { max-width: 100%; white-space: normal; border-radius: 14px; line-height: 1.5; font-size: 0.74rem; padding: 0.4rem 0.75rem; }
  .hero-content h2 { overflow-wrap: anywhere; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card .stat-label { overflow-wrap: anywhere; }

  /* Toolbar: keep all controls on one tidy row */
  .toolbar-actions { flex-wrap: wrap; gap: 0.5rem; }

  /* Chapters: swipeable carousel instead of a long vertical list */
  .chapters-sidebar { padding: 0.75rem 0; background: transparent; border: none; box-shadow: none; }
  .sidebar-header { padding-inline: 0.25rem; }
  .chapter-nav-list {
    display: flex !important;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 0.6rem;
    padding: 0.4rem 0.25rem 0.8rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chapter-nav-list::-webkit-scrollbar { display: none; }
  .chapter-nav-btn {
    flex: 0 0 78%;
    max-width: 280px;
    scroll-snap-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    border-radius: 14px;
    min-height: 92px;
  }
  .chapter-nav-btn.active { border-color: transparent; }
  .chapter-nav-top { gap: 0.5rem; flex-wrap: wrap; }

  .chapter-banner h3 { font-size: 0.98rem; line-height: 1.5; }
  .item-req-title, .details-list, .compliance-box-text { overflow-wrap: anywhere; }
  .template-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   Mobile round 2: grid blowout fix, real carousel, slim sticky header
   ========================================================================== */
@media (max-width: 1080px) {
  /* 1fr = minmax(auto,1fr) lets long text widen the column past the screen */
  .explorer-layout,
  .intro-grid,
  .compliance-grid,
  .bilingual-split,
  .item-content-split { grid-template-columns: minmax(0, 1fr) !important; }
  .audit-meta-inputs, .audit-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .explorer-layout > *, .intro-card, .item-card, .item-card-body, .compliance-box,
  .thematic-matrix-card, .view-section { min-width: 0; max-width: 100%; }
  .intro-card p, .compliance-box-text, .detail-line { overflow-wrap: anywhere; }
}

@media (max-width: 768px) {
  /* Chapter carousel: force a horizontal row (base style was a column) */
  .chapter-nav-list { flex-direction: row !important; flex-wrap: nowrap !important; }
  .chapter-nav-btn { width: auto; }

  /* Slim sticky header: brand + tools scroll away, tabs stay pinned */
  .navbar-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .brand-area { order: 1; }
  .toolbar-actions { order: 2; border-top: none; padding-top: 0; justify-content: space-between; }
  .nav-tabs-wrapper { order: 3; }
  .top-navbar.is-compact .navbar-inner { padding-block: 0.6rem; }
  .top-navbar.is-compact .brand-logo-wrap { width: 44px; height: 44px; }
  .top-navbar.is-compact .brand-titles p { display: block; }
}

/* ==========================================================================
   Mobile: thematic index table -> tappable cards
   ========================================================================== */
@media (max-width: 768px) {
  .thematic-matrix-card .template-table-wrap { overflow: visible; }
  .matrix-table, .matrix-table tbody { display: block; width: 100%; }
  .matrix-table thead { display: none; }

  .matrix-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "chapter range"
      "domain  domain"
      "scope   scope";
    gap: 0.45rem 0.6rem;
    align-items: center;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.7rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--brand-secondary);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
    cursor: pointer;
  }
  .matrix-table tbody tr:active { transform: scale(0.985); }

  .matrix-table tbody td {
    display: block;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-width: 0;
  }
  .matrix-table td.mx-chapter {
    grid-area: chapter;
    white-space: normal !important;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .matrix-table td.mx-chapter strong { font-weight: 800; }
  .matrix-table td.mx-range { grid-area: range; text-align: end !important; }
  .matrix-table td.mx-domain { grid-area: domain; font-size: 1rem; line-height: 1.55; }
  .matrix-table td.mx-domain strong { font-weight: 800; }
  .matrix-table td.mx-scope {
    grid-area: scope;
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--text-secondary);
    padding-top: 0.45rem !important;
    border-top: 1px dashed var(--border-color) !important;
    text-align: start;
  }
  .matrix-table .matrix-range-pill { min-width: 0 !important; padding: 0.28rem 0.7rem !important; font-size: 0.76rem !important; }

  /* "Explore guide" button: full-width under the title */
  #matrix-header-title { font-size: 1.02rem !important; line-height: 1.6; }
  #btn-start-explorer { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Footer / signature — mobile redesign
   ========================================================================== */
.footer-sep { margin-inline: 0.4rem; opacity: 0.4; }

@media (max-width: 768px) {
  .app-footer { padding: 1.5rem 0.9rem 5.5rem; /* room so the back-to-top button never covers text */ }
  .footer-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0.9rem; }

  /* Authority rights card */
  .footer-nfsa-rights {
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    text-align: center;
    padding: 1rem 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }
  .footer-logo-badge { width: 44px; height: 44px; }
  #footer-nfsa-text { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.82rem; line-height: 1.7; }
  #footer-nfsa-text .footer-link { font-size: 0.86rem; letter-spacing: 0.02em; }
  #footer-nfsa-text .footer-sep { display: none; }
  #footer-nfsa-text .footer-rights-text { color: var(--text-secondary); text-wrap: balance; }

  /* Developer signature card */
  .footer-dev-rights {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.10), rgba(11, 59, 96, 0.08));
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 35%, var(--border-color));
    font-size: 0.8rem; font-weight: 700; line-height: 1.7;
  }
  .footer-dev-rights > svg { width: 22px; height: 22px; color: var(--brand-secondary); margin-bottom: 0.15rem; }
  .footer-dev-rights .footer-company-link {
    font-size: 1.12rem; font-weight: 800; letter-spacing: 0.02em;
    padding: 0.1rem 0.2rem; border-bottom: 2px solid color-mix(in srgb, var(--brand-secondary) 55%, transparent);
    white-space: nowrap;
  }
  .footer-dev-rights > span:last-child { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
}

/* ==========================================================================
   Desktop: thematic index table header polish
   ========================================================================== */
@media (min-width: 769px) {
  .thematic-matrix-card .template-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--bg-secondary);
  }
  .matrix-table { margin-top: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }

  /* One continuous gradient across the whole header (per-cell gradients caused visible seams) */
  .matrix-table thead { background: var(--brand-gradient); position: relative; }
  .matrix-table thead::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, #2dd4bf, #38bdf8, #fbbf24);
    opacity: 0.9;
  }
  .matrix-table thead th {
    background: transparent;
    padding: 1rem 1.1rem 1.1rem;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: none;
    position: relative;
  }
  .matrix-table thead th + th::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 28%; bottom: 28%;
    width: 1px; background: rgba(255, 255, 255, 0.22);
  }

  /* Column rhythm: header and cells share width + alignment */
  .matrix-table th:nth-child(1), .matrix-table td:nth-child(1) { width: 11%; }
  .matrix-table th:nth-child(2), .matrix-table td:nth-child(2) { width: 25%; }
  .matrix-table th:nth-child(3), .matrix-table td:nth-child(3) { width: 15%; text-align: center; }
  .matrix-table th:nth-child(4), .matrix-table td:nth-child(4) { width: 49%; }
  .matrix-table td:nth-child(1) { color: var(--text-secondary); }
  .matrix-table tbody tr:last-child td { border-bottom: none; }
}