/* ============================================================================
 * Hypen Design System v2.1 — Base Tokens & Components
 * Platform-agnostic. Per-platform accent tokens live in platform-<slug>.css.
 * Source: /root/.claude/docs/hypen-design-system.md (Part B + Part C)
 * ========================================================================== */

/* === DESIGN TOKENS === */
:root {
  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Neutral palette (Notion-style) */
  --white:    #ffffff;
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --black:    #0a0a0a;

  /* Semantic backgrounds */
  --bg-primary:   var(--white);
  --bg-secondary: var(--gray-50);
  --bg-tertiary:  var(--gray-100);
  --bg-hover:     var(--gray-100);
  --bg-active:    var(--gray-200);

  /* Semantic text */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --text-inverse:   var(--white);

  /* Borders */
  --border-light:   var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);

  /* State colors */
  --color-success:        #15803d;
  --color-success-bg:     #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-error:          #dc2626;
  --color-error-bg:       #fef2f2;
  --color-error-border:   #fecaca;
  --color-warning:        #ca8a04;
  --color-warning-bg:     #fefce8;
  --color-warning-border: #fef08a;
  --color-info:           #2563eb;
  --color-info-bg:        #eff6ff;
  --color-info-border:    #bfdbfe;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --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.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Layout */
  --sidebar-width:           240px;
  --sidebar-collapsed-width: 64px;
  --sidebar-bg:              var(--gray-50);
  --sidebar-border:          var(--border-light);
  --topbar-height:           56px;

  /* Z-index */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

:where(a, button, input, select, textarea, summary, [role="button"], .btn) {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.7);
  outline-offset: 2px;
}

.hn-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2000;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--gray-900);
  color: var(--white);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  transform: translateY(-140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast), visibility 0s linear var(--transition-fast);
}

.hn-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--white);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* === LAYOUT === */
/* Gardă anti-overflow orizontal de pagină: împreună cu min-width:0 pe
   .hn-main-wrapper/.hn-content și .hn-table-wrapper{overflow-x:auto}, orice copil
   prea lat (tabel max-content, bară nowrap) face scroll INTERN, nu mai împinge
   pagina pe ecrane ~14". NU se pune pe .hn-content (păstrează overflow-y + scroll tabel). */
body.hn-sidebar-layout { overflow-x: hidden; }
.hn-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width var(--transition-slow);
  z-index: var(--z-fixed);
}
.hn-sidebar.collapsed { width: var(--sidebar-collapsed-width); }

.hn-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: calc(var(--z-fixed) - 1);
}
.hn-sidebar-overlay.visible { display: block; }

.hn-main-wrapper {
  margin-left: var(--sidebar-width);
  min-width: 0;
  min-height: 100vh; display: flex; flex-direction: column;
  transition: margin-left var(--transition-slow);
}
.hn-main-wrapper.sidebar-collapsed { margin-left: var(--sidebar-collapsed-width); }

.hn-topbar {
  position: sticky; top: 0;
  height: var(--topbar-height);
  background: linear-gradient(90deg, #fafafa 0%, #fef1e8 100%);
  border-bottom: 1px solid #f1d7c8;
  display: flex; align-items: center;
  padding: 0 var(--space-6);
  z-index: var(--z-sticky); gap: var(--space-4);
  box-shadow: 0 1px 0 rgba(23, 23, 23, 0.04);
}

.hn-content { flex: 1; min-width: 0; padding: var(--space-6) var(--space-8); }

.hn-content-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4); flex-wrap: wrap;
}

.hn-content-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.page-title { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; text-wrap: balance; }
.page-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

@media (max-width: 767px) {
  .hn-sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; z-index: var(--z-modal); transition: transform var(--transition-slow); }
  .hn-sidebar.mobile-open { transform: translateX(0); }
  .hn-main-wrapper { margin-left: 0 !important; }
  .hn-content { padding: var(--space-4); }
}

/* === SIDEBAR COMPONENTS === */
.hn-sidebar-logo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-4); border-bottom: 1px solid var(--border-light);
  height: var(--topbar-height); flex-shrink: 0;
}
.hn-logo-link { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; overflow: hidden; flex: 1; }
.hn-logo-link svg, .hn-logo-link img { flex-shrink: 0; max-height: 28px; }
.hn-sidebar-toggle {
  background: none; border: none; padding: var(--space-1) var(--space-2);
  color: var(--text-muted); cursor: pointer; border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); flex-shrink: 0; line-height: 1;
}
.hn-sidebar-toggle:hover { background: var(--bg-active); color: var(--text-primary); }
.hn-sidebar.collapsed .hn-sidebar-toggle i { transform: rotate(180deg); }

/* Company switcher */
.hn-company-switcher { padding: var(--space-2); border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.hn-company-current {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-md);
  cursor: pointer; transition: background var(--transition-fast); user-select: none;
}
.hn-company-current:hover { background: var(--bg-hover); }
.hn-company-avatar {
  width: 28px; height: 28px; border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: var(--font-bold); flex-shrink: 0; text-transform: uppercase;
}
.hn-company-avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.hn-company-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.hn-company-name { font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-company-hint { font-size: var(--text-xs); color: var(--text-muted); }
.hn-company-arrow { font-size: 10px; color: var(--text-muted); transition: transform var(--transition-fast); flex-shrink: 0; }
.hn-company-current.open .hn-company-arrow { transform: rotate(180deg); }
.hn-company-dropdown { display: none; flex-direction: column; gap: 2px; padding: var(--space-1) 0; }
.hn-company-dropdown.visible { display: flex; }
.hn-company-option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-md);
  text-decoration: none; color: var(--text-primary); font-size: var(--text-sm);
  transition: background var(--transition-fast);
}
.hn-company-option:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.hn-company-option.active { color: var(--accent); font-weight: var(--font-medium); }
.hn-company-option .fa-check { margin-left: auto; color: var(--accent); font-size: var(--text-xs); }

/* Navigation */
.hn-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-3) var(--space-2); scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.hn-nav-group { margin-bottom: var(--space-5); }
.hn-nav-group-label {
  display: block; font-size: 11px; font-weight: var(--font-semibold);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
  padding: 0 var(--space-3); margin-bottom: var(--space-1);
}
.hn-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--font-medium);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border: none; background: none;
  width: 100%; cursor: pointer; white-space: nowrap; text-align: left;
}
.hn-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.hn-nav-item.active,
.hn-nav-link.active,
.hn-nav-link.is-active { background: var(--accent-light); color: var(--accent); }
.hn-nav-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 14px; }
.hn-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-nav-arrow { font-size: 10px; transition: transform var(--transition-fast); margin-left: auto; flex-shrink: 0; padding-left: var(--space-2); }
.hn-nav-item-group.open > .hn-nav-parent .hn-nav-arrow { transform: rotate(90deg); }
.hn-nav-submenu { display: none; flex-direction: column; padding-left: calc(var(--space-3) + 16px + var(--space-3)); gap: 2px; margin-top: 2px; }
.hn-nav-item-group.open .hn-nav-submenu { display: flex; }
.hn-nav-subitem {
  display: block; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md); color: var(--text-secondary);
  text-decoration: none; font-size: var(--text-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast); position: relative;
}
.hn-nav-subitem::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 3px; height: 16px;
  background: var(--border-default); border-radius: var(--radius-full);
}
.hn-nav-subitem:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.hn-nav-subitem.active { color: var(--accent); }
.hn-nav-subitem.active::before { background: var(--accent); }

/* #1235: numele de grup mai lungi decât lățimea rezervată etichetei (~149px) erau tăiate cu
   „…" — „Utilizatori și securit…" în loc de „Utilizatori și securitate" — deci nu se mai
   puteau citi din meniu. Etichetele de grup se rup pe două rânduri, exact ca subintrările,
   în loc să fie trunchiate. Bara restrânsă le ascunde oricum (regula de mai jos). */
.hn-nav-parent { white-space: normal; }
.hn-nav-parent .hn-nav-label { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.3; }

/* Collapsed state */
.hn-sidebar.collapsed .hn-nav-group-label,
.hn-sidebar.collapsed .hn-nav-label,
.hn-sidebar.collapsed .hn-nav-arrow,
.hn-sidebar.collapsed .hn-nav-submenu,
.hn-sidebar.collapsed .hn-company-info,
.hn-sidebar.collapsed .hn-company-arrow,
.hn-sidebar.collapsed .hn-user-info { display: none !important; }
.hn-sidebar.collapsed .hn-nav-item { justify-content: center; padding: var(--space-2); }
.hn-sidebar.collapsed .hn-company-current { justify-content: center; }
.hn-sidebar.collapsed .hn-sidebar-logo { justify-content: center; }
.hn-sidebar.collapsed .hn-logo-link { flex: 0; }
.hn-sidebar.collapsed .hn-sidebar-footer { justify-content: center; padding-inline: var(--space-2); }
.hn-sidebar.collapsed .hn-sidebar-footer > :not(form) { display: none !important; }
.hn-sidebar.collapsed .hn-sidebar-footer form { display: flex; justify-content: center; width: 100%; margin: 0; }
.hn-sidebar.collapsed .hn-logout-btn { width: 40px; height: 40px; }

/* Sidebar footer */
.hn-sidebar-footer { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-3); border-top: 1px solid var(--border-light); flex-shrink: 0; }
.hn-user-card { display: flex; align-items: center; gap: var(--space-2); flex: 1; overflow: hidden; text-decoration: none; color: var(--text-primary); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); transition: background var(--transition-fast); min-width: 0; }
.hn-user-card:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.hn-user-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--gray-800); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-bold); flex-shrink: 0; text-transform: uppercase; }
.hn-user-info { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-width: 0; }
.hn-user-name { font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-user-email { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-logout-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); flex-shrink: 0; }
.hn-logout-btn:hover { background: var(--color-error-bg); color: var(--color-error); text-decoration: none; }

/* === BUTTONS === */
.btn-hn-primary, .btn-hn-secondary, .btn-hn-ghost, .btn-hn-danger, .btn-hn-icon, .btn-hn-success {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium);
  line-height: 1; padding: 0.5rem 0.875rem; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap; user-select: none; vertical-align: middle;
}
.btn-hn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-hn-primary:hover, .btn-hn-primary:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); text-decoration: none; }
.btn-hn-secondary { background: var(--white); color: var(--text-primary); border-color: var(--border-default); }
.btn-hn-secondary:hover, .btn-hn-secondary:focus-visible { background: var(--bg-tertiary); border-color: var(--border-strong); color: var(--text-primary); text-decoration: none; }
.btn-hn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-hn-ghost:hover, .btn-hn-ghost:focus-visible { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.btn-hn-danger { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error-border); }
.btn-hn-danger:hover, .btn-hn-danger:focus-visible { background: var(--color-error); color: var(--white); border-color: var(--color-error); text-decoration: none; }
.btn-hn-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.btn-hn-success:hover, .btn-hn-success:focus-visible { background: var(--color-success); color: var(--white); border-color: var(--color-success); text-decoration: none; }
.btn-hn-icon { padding: 0.4375rem; background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-hn-icon:hover, .btn-hn-icon:focus-visible { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.btn-hn-primary.btn-sm, .btn-hn-secondary.btn-sm, .btn-hn-ghost.btn-sm, .btn-hn-danger.btn-sm, .btn-hn-success.btn-sm { font-size: var(--text-xs); padding: 0.375rem 0.625rem; }
.btn-hn-primary.btn-lg, .btn-hn-secondary.btn-lg { font-size: var(--text-base); padding: 0.625rem 1.25rem; }
.btn-hn-primary:disabled, .btn-hn-secondary:disabled, .btn-hn-ghost:disabled, .btn-hn-danger:disabled, .btn-hn-icon:disabled, .btn-hn-success:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; pointer-events: none; }

/* === FORMS === */
.hn-form-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-xs); max-width: 860px; }
.hn-form-section { margin-bottom: var(--space-8); }
.hn-form-section-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light); margin-bottom: var(--space-5); margin-top: 0; }
.hn-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.hn-form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.hn-form-group:last-child { margin-bottom: 0; }
.hn-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); display: block; }
.hn-required { color: var(--color-error); margin-left: 2px; }
.hn-input {
  width: 100%; padding: 0.5rem 0.75rem;
  font-family: var(--font-sans); font-size: var(--text-sm);
  color: var(--text-primary); background: var(--white);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.5; appearance: none; -webkit-appearance: none;
}
.hn-input:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
.hn-input::placeholder { color: var(--text-muted); }
.hn-input.hn-input-error, .hn-input.is-invalid { border-color: var(--color-error); background: var(--color-error-bg); }
.hn-input.hn-input-error:focus, .hn-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }
.hn-input:disabled { background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed; }
.hn-input[readonly] { background: var(--bg-secondary); color: var(--text-secondary); }
.hn-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23a3a3a3' d='M10 14L4 8h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 16px; padding-right: 2.5rem; cursor: pointer; }
.hn-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.hn-field-error { font-size: var(--text-xs); color: var(--color-error); display: flex; align-items: center; gap: var(--space-1); margin: 0; }
.hn-field-hint { font-size: var(--text-xs); color: var(--text-muted); margin: 0; line-height: 1.5; }
.hn-form-check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.hn-check-input { width: 16px; height: 16px; border: 1.5px solid var(--border-default); border-radius: var(--radius-sm); accent-color: var(--accent); cursor: pointer; flex-shrink: 0; margin: 0; }
.hn-check-label { font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; margin: 0; font-weight: var(--font-normal); line-height: 1.5; }
.hn-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border-light); margin-top: var(--space-6); }

@media (max-width: 767px) {
  .hn-form-card { padding: var(--space-5); }
  .hn-form-row { grid-template-columns: 1fr; }
  .hn-form-actions { flex-direction: column-reverse; }
  .hn-form-actions .btn { width: 100%; justify-content: center; }
}

/* === TABLES === */
/* Wrapper neutru de scroll orizontal auto-aplicat de hn-ui-consistency.js pe ORICE
   tabel care nu e deja într-un container scrollabil (.hn-table-wrapper/.table-responsive).
   Doar overflow-x — fără border/bg/umbră — ca să nu adauge chrome peste tabelele din carduri.
   overflow-x:auto scrollează intern doar când conținutul depășește lățimea; altfel invizibil. */
.hn-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.hn-table-wrapper { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow-xs); }
.hn-table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-light); gap: var(--space-4); flex-wrap: wrap; }
.hn-table-toolbar-left, .hn-table-toolbar-right { display: flex; align-items: center; gap: var(--space-2); }
.hn-table-search { display: flex; align-items: center; gap: var(--space-2); background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 0.4rem 0.75rem; min-width: 220px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.hn-table-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
.hn-table-search i { color: var(--text-muted); font-size: var(--text-sm); flex-shrink: 0; }
.hn-table-search input { border: none; background: transparent; font-size: var(--text-sm); color: var(--text-primary); outline: 2px solid transparent; outline-offset: 2px; width: 100%; font-family: var(--font-sans); }
.hn-table-search input::placeholder { color: var(--text-muted); }
.hn-table { margin: 0; width: 100% !important; border-collapse: collapse; }
.hn-table thead th { background: var(--bg-secondary); font-size: 11px; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.625rem 1rem; border-bottom: 1px solid var(--border-light); border-top: none; white-space: nowrap; }
.hn-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background var(--transition-fast); }
.hn-table tbody tr:last-child { border-bottom: none; }
.hn-table tbody tr:hover { background: var(--bg-secondary); }
.hn-table tbody td { padding: 0.75rem 1rem; font-size: var(--text-sm); color: var(--text-primary); vertical-align: middle; }
.hn-table-actions-col { width: 1%; white-space: nowrap; text-align: right; }
.hn-table-btns { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.hn-cell-primary { font-weight: var(--font-medium); line-height: 1.4; }
.hn-cell-secondary { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.hn-cell-date { color: var(--text-secondary); white-space: nowrap; }

/* === BADGES === */
.hn-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-semibold); line-height: 1.5; white-space: nowrap; }
.hn-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.hn-badge-danger,
.hn-badge-error   { background: var(--color-error-bg);   color: var(--color-error); }
.hn-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.hn-badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.hn-badge-secondary,
.hn-badge-light,
.hn-badge-dark,
.hn-badge-neutral { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-light); }
.hn-badge-primary,
.hn-badge-accent  { background: var(--accent-light); color: var(--accent); }

/* === ALERTS === */
/* .hn-alert e BLOC, nu flex. Motivul, măsurat pe cod: 239 din cele 310 alerte ale aplicației
   (77%) pun textul DIRECT în alertă, fără <div> care să-l învelească. La display:flex fiecare
   copil — INCLUSIV fiecare nod de text — devine un element flex separat, pe coloana lui, deci
   propoziția se rupe în coloane („…complet pentru" | „0" | „din 42 departamente…").
   Cele 47 de alerte care VOR rând își declară singure `d-flex` (Bootstrap, !important, deci
   trece peste display-ul de aici); `align-items`, `gap` și `flex: 1` de mai jos rămân pentru
   ele — 37 dintre cele 47 nu declară `gap-*` și se sprijină pe cel din regula asta. Pe un
   container bloc sunt inerte. */
.hn-alert { display: block; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid transparent; font-size: var(--text-sm); line-height: 1.5; margin-bottom: var(--space-4); }
.hn-alert > i:first-child { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
/* Pe bloc `gap` nu se aplică, deci distanța pictogramă–text se pune explicit. Doar acolo unde
   alerta NU e flex: la cele cu `d-flex` distanța o dă `gap`, iar o margine ar dubla-o. */
.hn-alert:not(.d-flex) > i:first-child { margin-right: var(--space-3); }
.hn-alert > div { flex: 1; line-height: 1.5; }
/* `padding` scurt de mai sus ANULEAZĂ `padding-right: 3rem` din `.alert-dismissible` (Bootstrap),
   iar butonul „×" e poziționat absolut în dreapta-sus: la orice mesaj lung se suprapune peste
   sfârșitul primului rând și acoperă text. Văzut pe ecran la „Adu din arhiva Softeh" — cifra
   „Sărite (IBAN invalid): 0" era pe jumătate sub „×" (#1198, 26.07.2026). Se redă doar spațiul. */
.hn-alert.alert-dismissible { padding-right: 3rem; }
.hn-alert strong { font-weight: var(--font-semibold); }
.hn-alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.hn-alert-error   { background: var(--color-error-bg);   border-color: var(--color-error-border);   color: var(--color-error); }
.hn-alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.hn-alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.hn-alert-close { background: none; border: none; padding: 2px; color: inherit; opacity: 0.6; cursor: pointer; border-radius: var(--radius-sm); flex-shrink: 0; line-height: 1; }
.hn-alert-close:hover { opacity: 1; }

/* === CARDS === */
.hn-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); overflow: hidden; }
.hn-card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-light); gap: var(--space-4); flex-wrap: wrap; }
.hn-card-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; }
.hn-card-header-actions { display: flex; gap: var(--space-2); }

/* Antet de card PLIABIL — clic pe tot antetul deschide/închide corpul cardului.
   Plierea o face Bootstrap (`data-bs-toggle="collapse"` pe antet); aici sunt doar
   cursorul și săgeata care se rotește după `aria-expanded`, ca starea să se vadă.
   Accesul de la tastatură (Enter/Space pe un antet care nu e buton) e adăugat în
   `public/js/hn-ui-consistency.js`. */
.hn-card-header[data-bs-toggle="collapse"] { cursor: pointer; }
.hn-card-header[data-bs-toggle="collapse"]:hover { background: var(--bg-hover); }
.hn-collapse-caret { transition: transform var(--transition-fast, .15s) ease; }
.hn-card-header[data-bs-toggle="collapse"][aria-expanded="false"] .hn-collapse-caret { transform: rotate(-90deg); }
.hn-card-body { padding: var(--space-6); }
.hn-card-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-light); background: var(--bg-secondary); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }

/* === DROPDOWN (iHR, opt-in via .hn-dropdown on the .dropdown wrapper) === */
.hn-dropdown .dropdown-menu {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  min-width: 232px;
  margin-top: 6px;
  background: var(--white);
}
.hn-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  transition: background var(--transition-base), color var(--transition-base);
}
.hn-dropdown .dropdown-item i { width: 1.15rem; text-align: center; font-size: 0.95rem; }
.hn-dropdown .dropdown-item:hover,
.hn-dropdown .dropdown-item:focus,
.hn-dropdown .dropdown-item:active {
  background: var(--accent-light);
  color: var(--accent-dark);
}
.hn-dropdown .dropdown-item.text-danger:hover,
.hn-dropdown .dropdown-item.text-danger:focus { background: #fee2e2; color: #b91c1c; }
.hn-dropdown .dropdown-divider { margin: var(--space-2) 0; border-color: var(--border-light); }
.hn-dropdown .dropdown-header { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: var(--font-semibold); padding: var(--space-2) var(--space-3); }

/* === STAT CARD === */
.hn-stat-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4); box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-base); }
.hn-stat-card:hover { box-shadow: var(--shadow-md); }
.hn-stat-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.hn-stat-body { flex: 1; }
.hn-stat-value { display: block; font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1.2; }
.hn-stat-label { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.hn-stat-change { font-size: var(--text-xs); font-weight: var(--font-semibold); }
.hn-stat-change.positive { color: var(--color-success); }
.hn-stat-change.negative { color: var(--color-error); }

/* === MODALS (Bootstrap 4/5 compatible) === */
.hn-modal { border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.hn-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-light); }
.hn-modal-title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin: 0; }
.hn-modal-close { background: none; border: none; padding: var(--space-1); color: var(--text-muted); cursor: pointer; border-radius: var(--radius-md); font-size: 18px; line-height: 1; transition: background-color var(--transition-fast), color var(--transition-fast); }
.hn-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.hn-modal-body { padding: var(--space-6); }
.hn-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-light); background: var(--bg-secondary); }

/* === TOPBAR EXTENSIONS === */
.hn-topbar-brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text-primary); font-weight: var(--font-semibold); }
.hn-topbar-brand:hover { color: var(--text-primary); text-decoration: none; }
.hn-topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; list-style: none; padding: 0; margin-bottom: 0; }
.hn-topbar-context { display: flex; align-items: center; min-width: 0; flex: 1; }
.hn-topbar-page-title {
  color: var(--accent-dark);
  font-size: 1.05rem;
  font-weight: var(--font-semibold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: var(--space-3);
  border-left: 3px solid rgba(var(--accent-rgb), 0.35);
}
.hn-topbar-right { display: none; }
.hn-topbar-shortcut { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.65rem; border: 1px solid var(--border-light); border-radius: 999px; background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }
.hn-topbar-shortcut kbd { font: inherit; font-weight: var(--font-semibold); padding: 0.05rem 0.35rem; border-radius: var(--radius-sm); background: var(--white); border: 1px solid var(--border-light); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.hn-topbar-link { color: var(--text-secondary); border-color: transparent; }
.hn-topbar-link:hover { text-decoration: none; background: var(--bg-secondary); }
.hn-topbar-user { display: flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.65rem 0.3rem 0.35rem; border: 1px solid var(--border-light); border-radius: 999px; background: var(--bg-secondary); min-width: 0; max-width: 320px; }
.hn-topbar-user-avatar { width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-bold); flex-shrink: 0; }
.hn-topbar-user-copy { display: flex; flex-direction: column; min-width: 0; }
.hn-topbar-user-name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hn-topbar-user-meta { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.hn-topbar-logout-form { margin: 0 0 0 0.15rem; }
.hn-topbar-logout { white-space: nowrap; }

@media (max-width: 991px) {
  .hn-topbar {
    padding: 0 var(--space-4);
  }
}

/* ── Empty state (x-empty-state) ─────────────────────────────────────────── */
.hn-empty-state { color: var(--text-secondary); }
.hn-empty-state-icon { font-size: 2.5rem; color: var(--border-strong); display: block; margin: 0 auto var(--space-3); }
.hn-empty-state-title { font-size: var(--text-base, 1rem); font-weight: var(--font-semibold); color: var(--text-primary); }
.hn-empty-state-text { font-size: var(--text-sm, 0.875rem); }

/* ── Grupuri de acțiuni (role="group" + aria-label) ──────────────────────────
   Barele de acțiuni ale ecranelor își numesc grupurile („Editarea lunii",
   „Fișiere: import și export", „Stare și flux: …") ca operatorul să citească la fel
   fiecare ecran al aceluiași flux. Un grup ajunge însă GOL când starea documentului
   sau rolul omului nu lasă nicio acțiune din el — de exemplu luna de pontaj predată
   spre aprobare, privită de biroul de salarizare, care nu are ce apăsa acolo.
   Cutia goală rămânea în pagină: spațiu fără rost în bară și, mai rău, un grup
   anunțat de cititoarele de ecran fără niciun conținut.
   Se ascunde AICI, o dată pentru toate ecranele, în loc să se repete în fiecare
   șablon condiția care descrie când e gol — condiție care ar diverge de conținut la
   prima acțiune adăugată. `:has()` alege elementele fără copii-element; spațiile
   albe și comentariile lăsate de Blade nu contează, de aceea nu merge `:empty`. */
[role="group"][aria-label]:not(:has(> *)) { display: none; }