/* ============================================================================
   AVISECO SYSTEMS — Componente
   v1.0 · Necesita aviseco-tokens.css incarcat INAINTE.
   Vanilla CSS, fara build step, fara dependinte. Prefix .avs- peste tot.
   ============================================================================ */

/* ---------- 1. BAZA ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--avs-bg-app);
  color: var(--avs-text-primary);
  font-family: var(--avs-font-sans);
  font-size: var(--avs-text-base);
  line-height: var(--avs-lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--avs-space-3); font-weight: var(--avs-weight-semibold); letter-spacing: -.01em; }
h1 { font-size: var(--avs-text-2xl); line-height: var(--avs-lh-2xl); }
h2 { font-size: var(--avs-text-xl); line-height: var(--avs-lh-xl); }
h3 { font-size: var(--avs-text-lg); line-height: var(--avs-lh-lg); }
h4 { font-size: var(--avs-text-md); line-height: var(--avs-lh-md); }
p  { margin: 0 0 var(--avs-space-3); }

a { color: var(--avs-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp { font-family: var(--avs-font-mono); font-size: .92em; }

.avs-num { font-variant-numeric: tabular-nums; text-align: right; }
.avs-mono { font-family: var(--avs-font-mono); }
.avs-muted { color: var(--avs-text-tertiary); }
.avs-label {
  font-size: var(--avs-text-xs); line-height: var(--avs-lh-xs);
  font-weight: var(--avs-weight-medium); text-transform: uppercase;
  letter-spacing: .04em; color: var(--avs-text-tertiary);
}

/* Focus vizibil, unic pentru tot sistemul. Nu suprascrie asta niciodata. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--avs-border-focus);
  outline-offset: 2px;
  border-radius: var(--avs-radius-sm);
}

.avs-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 2. LAYOUT DE APLICATIE ---------- */

.avs-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.avs-sidebar {
  background: var(--avs-navy-700);
  color: var(--avs-white);
  padding: var(--avs-space-5) var(--avs-space-4);
  display: flex; flex-direction: column; gap: var(--avs-space-6);
}
[data-theme="dark"] .avs-sidebar { background: var(--avs-navy-950); border-right: 1px solid var(--avs-border); }

.avs-sidebar__logo { display: block; width: 168px; height: auto; }
.avs-sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.avs-sidebar__group-title {
  font-size: var(--avs-text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--avs-sky-300); margin-bottom: var(--avs-space-2); font-weight: var(--avs-weight-semibold);
}
.avs-nav-item {
  display: flex; align-items: center; gap: var(--avs-space-3);
  padding: var(--avs-space-2) var(--avs-space-3);
  border-radius: var(--avs-radius-md);
  color: rgba(255,255,255,.82); font-size: var(--avs-text-base);
  text-decoration: none; transition: background var(--avs-motion-fast) var(--avs-ease);
}
.avs-nav-item:hover { background: rgba(255,255,255,.10); color: var(--avs-white); text-decoration: none; }
.avs-nav-item[aria-current="page"] {
  background: rgba(149,207,241,.18); color: var(--avs-white); font-weight: var(--avs-weight-medium);
  box-shadow: inset 3px 0 0 var(--avs-sky-300);
}

.avs-main { display: flex; flex-direction: column; min-width: 0; }

.avs-topbar {
  position: sticky; top: 0; z-index: var(--avs-z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--avs-space-4);
  padding: var(--avs-space-4) var(--avs-space-6);
  background: var(--avs-bg-surface);
  border-bottom: 1px solid var(--avs-border);
}
.avs-topbar h1 { margin: 0; }

.avs-content { padding: var(--avs-space-6); flex: 1; }
.avs-section + .avs-section { margin-top: var(--avs-space-8); }

@media (max-width: 900px) {
  .avs-app { grid-template-columns: 1fr; }
  .avs-sidebar { flex-direction: row; align-items: center; overflow-x: auto; gap: var(--avs-space-4); }
  .avs-sidebar__group { flex-direction: row; }
  .avs-sidebar__group-title { display: none; }
  .avs-content { padding: var(--avs-space-4); }
}

/* ---------- 3. CARD ---------- */

.avs-card {
  background: var(--avs-bg-surface);
  border: 1px solid var(--avs-border);
  border-radius: var(--avs-radius-md);
  padding: var(--avs-space-6);
}
.avs-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--avs-space-4);
  margin: calc(var(--avs-space-6) * -1) calc(var(--avs-space-6) * -1) var(--avs-space-5);
  padding: var(--avs-space-4) var(--avs-space-6);
  border-bottom: 1px solid var(--avs-border);
}
.avs-card__title { font-size: var(--avs-text-lg); font-weight: var(--avs-weight-semibold); margin: 0; }
.avs-grid { display: grid; gap: var(--avs-space-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Tile de indicator (KPI) */
.avs-stat { display: flex; flex-direction: column; gap: var(--avs-space-1); }
.avs-stat__value {
  font-size: var(--avs-text-3xl); line-height: var(--avs-lh-3xl);
  font-weight: var(--avs-weight-bold); font-variant-numeric: tabular-nums;
  color: var(--avs-text-primary);
}
.avs-stat__delta { font-size: var(--avs-text-sm); font-weight: var(--avs-weight-medium); }
.avs-stat__delta--up { color: var(--avs-success); }
.avs-stat__delta--down { color: var(--avs-danger); }

/* ---------- 4. BUTOANE ---------- */

.avs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--avs-space-2);
  min-height: var(--avs-control-height);
  padding: 0 var(--avs-space-4);
  border: 1px solid transparent;
  border-radius: var(--avs-radius-md);
  font: inherit; font-weight: var(--avs-weight-medium);
  cursor: pointer; white-space: nowrap;
  transition: background var(--avs-motion-fast) var(--avs-ease),
              border-color var(--avs-motion-fast) var(--avs-ease),
              color var(--avs-motion-fast) var(--avs-ease);
}
.avs-btn:disabled, .avs-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.avs-btn--primary { background: var(--avs-action); color: var(--avs-action-text); }
.avs-btn--primary:hover:not(:disabled) { background: var(--avs-action-hover); }
.avs-btn--primary:active:not(:disabled) { background: var(--avs-action-active); }

.avs-btn--secondary {
  background: var(--avs-bg-surface); color: var(--avs-text-primary);
  border-color: var(--avs-border-strong);
}
.avs-btn--secondary:hover:not(:disabled) { background: var(--avs-bg-subtle); border-color: var(--avs-navy-400); }

.avs-btn--ghost { background: transparent; color: var(--avs-text-link); }
.avs-btn--ghost:hover:not(:disabled) { background: var(--avs-bg-subtle); }

.avs-btn--danger { background: var(--avs-danger); color: var(--avs-white); }
.avs-btn--danger:hover:not(:disabled) { filter: brightness(.92); }

.avs-btn--sm { min-height: 28px; padding: 0 var(--avs-space-3); font-size: var(--avs-text-sm); }
.avs-btn--lg { min-height: 44px; padding: 0 var(--avs-space-6); font-size: var(--avs-text-md); }

/* Stare de incarcare: butonul isi pastreaza latimea si nu poate fi apasat din nou. */
.avs-btn[data-loading="true"] { pointer-events: none; position: relative; color: transparent; }
.avs-btn[data-loading="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--avs-action-text);
  animation: avs-spin 700ms linear infinite;
}
.avs-btn--secondary[data-loading="true"]::after,
.avs-btn--ghost[data-loading="true"]::after { color: var(--avs-text-primary); }
@keyframes avs-spin { to { transform: rotate(360deg); } }

/* ---------- 5. FORMULARE ---------- */

.avs-field { display: flex; flex-direction: column; gap: var(--avs-space-2); margin-bottom: var(--avs-space-4); }
.avs-field__label { font-size: var(--avs-text-sm); font-weight: var(--avs-weight-medium); color: var(--avs-text-secondary); }
.avs-field__label[data-required]::after { content: " *"; color: var(--avs-danger); }
.avs-field__hint { font-size: var(--avs-text-xs); color: var(--avs-text-tertiary); }
.avs-field__error { font-size: var(--avs-text-xs); color: var(--avs-danger); font-weight: var(--avs-weight-medium); }

.avs-input, .avs-select, .avs-textarea {
  width: 100%; min-height: var(--avs-control-height);
  padding: var(--avs-space-2) var(--avs-space-3);
  background: var(--avs-bg-surface); color: var(--avs-text-primary);
  border: 1px solid var(--avs-border-strong);
  border-radius: var(--avs-radius-sm);
  font: inherit;
  transition: border-color var(--avs-motion-fast) var(--avs-ease);
}
.avs-textarea { min-height: 96px; resize: vertical; }
.avs-input::placeholder, .avs-textarea::placeholder { color: var(--avs-text-tertiary); }
.avs-input:hover, .avs-select:hover, .avs-textarea:hover { border-color: var(--avs-navy-400); }
.avs-input:disabled, .avs-select:disabled, .avs-textarea:disabled {
  background: var(--avs-bg-subtle); color: var(--avs-text-disabled); cursor: not-allowed;
}
.avs-input[aria-invalid="true"], .avs-textarea[aria-invalid="true"] { border-color: var(--avs-danger); }
.avs-input[type="number"], .avs-input.avs-num { font-variant-numeric: tabular-nums; text-align: right; }

.avs-check { display: flex; align-items: center; gap: var(--avs-space-2); cursor: pointer; }
.avs-check input { width: 16px; height: 16px; accent-color: var(--avs-navy-700); cursor: pointer; }

/* ---------- 6. TABEL DE DATE ---------- */

.avs-table-wrap {
  background: var(--avs-bg-surface);
  border: 1px solid var(--avs-border);
  border-radius: var(--avs-radius-md);
  overflow: auto; max-height: 70vh;
}
.avs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--avs-text-sm); }
.avs-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--avs-bg-subtle);
  padding: var(--avs-space-2) var(--avs-row-padding-x);
  text-align: left; white-space: nowrap;
  font-size: var(--avs-text-xs); font-weight: var(--avs-weight-semibold);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--avs-text-secondary);
  border-bottom: 1px solid var(--avs-border-strong);
}
.avs-table td {
  padding: var(--avs-row-padding-y) var(--avs-row-padding-x);
  border-bottom: 1px solid var(--avs-border);
  vertical-align: top;
}
.avs-table tbody tr:nth-child(even) td { background: var(--avs-ink-50); }
[data-theme="dark"] .avs-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
.avs-table tbody tr:hover td { background: var(--avs-navy-50); }
[data-theme="dark"] .avs-table tbody tr:hover td { background: rgba(149,207,241,.08); }
.avs-table tbody tr[aria-selected="true"] td { background: var(--avs-sky-100); }
.avs-table th.avs-num, .avs-table td.avs-num { text-align: right; font-variant-numeric: tabular-nums; }
.avs-table tfoot td {
  position: sticky; bottom: 0; background: var(--avs-bg-subtle);
  font-weight: var(--avs-weight-semibold); border-top: 2px solid var(--avs-navy-700);
}
[data-theme="dark"] .avs-table tfoot td { border-top-color: var(--avs-sky-400); }

/* ---------- 7. BADGE / STATUS ---------- */

.avs-badge {
  display: inline-flex; align-items: center; gap: var(--avs-space-1);
  padding: 2px var(--avs-space-2);
  border-radius: var(--avs-radius-full);
  font-size: var(--avs-text-xs); font-weight: var(--avs-weight-medium); white-space: nowrap;
  background: var(--avs-navy-100); color: var(--avs-navy-800);
}
.avs-badge--success { background: var(--avs-success-bg); color: var(--avs-success); }
.avs-badge--warning { background: var(--avs-warning-bg); color: var(--avs-warning); }
.avs-badge--danger  { background: var(--avs-danger-bg);  color: var(--avs-danger); }
.avs-badge--info    { background: var(--avs-info-bg);    color: var(--avs-info); }
.avs-badge--neutral { background: var(--avs-ink-100);    color: var(--avs-ink-700); }

/* In tema dark, badge-ul implicit si cel neutru trebuie sa se inverseze,
   altfel raman insule deschise pe fundal inchis. */
[data-theme="dark"] .avs-badge:not([class*="avs-badge--"]) { background: rgba(149,207,241,.14); color: var(--avs-sky-300); }
[data-theme="dark"] .avs-badge--neutral { background: rgba(255,255,255,.08); color: var(--avs-text-secondary); }

/* Punctul de status: forma + text, nu doar culoare. */
.avs-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* Etichete de domeniu tehnic — culoare fixa la nivel de companie. */
.avs-domain { border-left: 3px solid currentColor; padding-left: var(--avs-space-2); }
.avs-domain--gpon   { color: var(--avs-cat-gpon); }
.avs-domain--bms    { color: var(--avs-cat-bms); }
.avs-domain--tvcc   { color: var(--avs-cat-tvcc); }
.avs-domain--evac   { color: var(--avs-cat-evac); }
.avs-domain--fire   { color: var(--avs-cat-fire); }
.avs-domain--room   { color: var(--avs-cat-room); }
.avs-domain--access { color: var(--avs-cat-access); }
.avs-domain--av     { color: var(--avs-cat-av); }
.avs-domain--lights { color: var(--avs-cat-lights); }

/* ---------- 8. ALERTA ---------- */

.avs-alert {
  display: flex; gap: var(--avs-space-3);
  padding: var(--avs-space-4);
  border-radius: var(--avs-radius-md);
  border-left: 4px solid var(--avs-info);
  background: var(--avs-info-bg); color: var(--avs-text-primary);
  font-size: var(--avs-text-base);
}
.avs-alert--success { border-color: var(--avs-success); background: var(--avs-success-bg); }
.avs-alert--warning { border-color: var(--avs-warning); background: var(--avs-warning-bg); }
.avs-alert--danger  { border-color: var(--avs-danger);  background: var(--avs-danger-bg); }
.avs-alert__title { font-weight: var(--avs-weight-semibold); margin-bottom: var(--avs-space-1); }

/* ---------- 9. MODAL ---------- */

.avs-modal::backdrop { background: rgba(0, 26, 54, .55); }
.avs-modal {
  border: none; padding: 0;
  max-width: 560px; width: calc(100% - var(--avs-space-8));
  background: var(--avs-bg-raised); color: var(--avs-text-primary);
  border-radius: var(--avs-radius-lg);
  box-shadow: var(--avs-shadow-lg);
}
.avs-modal__header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--avs-space-4);
  padding: var(--avs-space-5) var(--avs-space-6);
  border-bottom: 1px solid var(--avs-border);
}
.avs-modal__body { padding: var(--avs-space-6); }
.avs-modal__footer {
  display: flex; justify-content: flex-end; gap: var(--avs-space-3);
  padding: var(--avs-space-4) var(--avs-space-6);
  border-top: 1px solid var(--avs-border);
  background: var(--avs-bg-subtle);
  border-radius: 0 0 var(--avs-radius-lg) var(--avs-radius-lg);
}

/* ---------- 10. TABURI ---------- */

.avs-tabs { display: flex; gap: var(--avs-space-1); border-bottom: 1px solid var(--avs-border); }
.avs-tab {
  padding: var(--avs-space-3) var(--avs-space-4);
  background: none; border: none; border-bottom: 2px solid transparent;
  font: inherit; font-weight: var(--avs-weight-medium);
  color: var(--avs-text-tertiary); cursor: pointer;
  transition: color var(--avs-motion-fast) var(--avs-ease);
}
.avs-tab:hover { color: var(--avs-text-primary); }
.avs-tab[aria-selected="true"] { color: var(--avs-text-link); border-bottom-color: var(--avs-navy-700); }
[data-theme="dark"] .avs-tab[aria-selected="true"] { border-bottom-color: var(--avs-sky-300); }

/* ---------- 11. TOAST ---------- */

.avs-toasts {
  position: fixed; bottom: var(--avs-space-6); right: var(--avs-space-6);
  z-index: var(--avs-z-toast);
  display: flex; flex-direction: column; gap: var(--avs-space-2);
}
.avs-toast {
  min-width: 280px; max-width: 420px;
  padding: var(--avs-space-3) var(--avs-space-4);
  background: var(--avs-navy-800); color: var(--avs-white);
  border-radius: var(--avs-radius-md); box-shadow: var(--avs-shadow-lg);
  font-size: var(--avs-text-base);
}
.avs-toast--success { background: var(--avs-success); }
.avs-toast--danger  { background: var(--avs-danger); }

/* ---------- 12. STARE GOALA ---------- */

.avs-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--avs-space-3);
  padding: var(--avs-space-12) var(--avs-space-6); text-align: center;
}
.avs-empty__title { font-size: var(--avs-text-lg); font-weight: var(--avs-weight-semibold); }
.avs-empty__text { color: var(--avs-text-tertiary); max-width: 46ch; margin: 0; }

/* ---------- 13. SCHELET DE INCARCARE ---------- */

.avs-skeleton {
  background: linear-gradient(90deg, var(--avs-ink-100) 25%, var(--avs-ink-50) 50%, var(--avs-ink-100) 75%);
  background-size: 200% 100%;
  border-radius: var(--avs-radius-sm);
  animation: avs-shimmer 1.4s ease-in-out infinite;
  min-height: 14px;
}
@keyframes avs-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- 14. TIPARIRE ---------- */

@media print {
  :root { --avs-bg-app: var(--avs-white); --avs-bg-surface: var(--avs-white); }
  .avs-sidebar, .avs-topbar, .avs-toasts, .avs-btn { display: none !important; }
  .avs-app { display: block; }
  .avs-content { padding: 0; }
  .avs-card, .avs-table-wrap { border: 1px solid var(--avs-ink-200); box-shadow: none; break-inside: avoid; }
  .avs-table-wrap { max-height: none; overflow: visible; }
  .avs-table th { background: var(--avs-navy-50) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: var(--avs-ink-500); }
}