/* Monitor Proiect — stiluri specifice aplicației, construite exclusiv din tokenii Aviseco.
   Componentele generale vin din assets/aviseco-components.css; aici doar ce e propriu acestui ecran. */

:root {
  --mp-sidebar-bottom: calc(var(--avs-space-5) + var(--avs-app-footer-height));
  /* Tokeni de grafic și de rând, derivați din paleta Aviseco (nu există încă în aviseco-tokens.css;
     de propus în skill la următoarea revizie: --avs-chart-1, --avs-chart-2, --avs-chart-track, --avs-row-hover). */
  --mp-chart-1: var(--avs-navy-700);
  --mp-chart-2: var(--avs-ink-300);
  --mp-chart-track: var(--avs-navy-100);
  --mp-row-hover: var(--avs-navy-50);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mp-chart-1: var(--avs-sky-300); --mp-chart-2: var(--avs-ink-500); --mp-chart-track: var(--avs-navy-800); --mp-row-hover: var(--avs-bg-raised); }
}
:root[data-theme="dark"] { --mp-chart-1: var(--avs-sky-300); --mp-chart-2: var(--avs-ink-500); --mp-chart-track: var(--avs-navy-800); --mp-row-hover: var(--avs-bg-raised); }

.mp-loading[hidden] { display: none; }
.avs-table td.avs-num, .avs-table th.avs-num { white-space: nowrap; }
.avs-table td.mp-wrap { min-width: 24ch; }
.mp-matrix td:first-child { white-space: nowrap; }
.avs-toasts { bottom: calc(var(--avs-space-6) + var(--avs-app-footer-height)); }
.avs-modal form { display: flex; flex-direction: column; max-height: calc(100vh - var(--avs-space-12)); }
.avs-modal__body { overflow: auto; }

.mp-ico { flex: none; vertical-align: middle; }

/* ---------- Sidebar ---------- */
.avs-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding-bottom: var(--mp-sidebar-bottom); }
.mp-sidebar__app { display: flex; align-items: center; gap: var(--avs-space-3); padding: 0 var(--avs-space-1); color: var(--avs-white); }
.mp-sidebar__app-icon { width: 32px; height: 32px; border-radius: var(--avs-radius-md); display: grid; place-items: center; background: rgba(255, 255, 255, .10); flex: none; }
.mp-sidebar__app-name { font-weight: var(--avs-weight-semibold); line-height: var(--avs-lh-sm); }
.mp-sidebar__app-sub { font-size: var(--avs-text-xs); color: var(--avs-sky-300); line-height: var(--avs-lh-xs); }
.mp-sidebar__bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--avs-space-2); }
.mp-sidebar__status { display: flex; align-items: center; gap: var(--avs-space-2); font-size: var(--avs-text-xs); color: rgba(255, 255, 255, .72); padding: 0 var(--avs-space-1); }
.mp-sidebar .avs-btn--ghost { color: var(--avs-white); justify-content: flex-start; }
.mp-sidebar .avs-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .10); }
.mp-sidebar .avs-btn--ghost:active:not(:disabled) { background: rgba(255, 255, 255, .16); }
.avs-nav-item .avs-badge { margin-left: auto; text-transform: uppercase; letter-spacing: .04em; }
.avs-nav-item:focus-visible { outline-color: var(--avs-sky-300); }
.mp-select-proiect { background: rgba(255, 255, 255, .08); color: var(--avs-white); border-color: rgba(255, 255, 255, .25); }
.mp-select-proiect option { color: var(--avs-text-primary); background: var(--avs-bg-surface); }
@media (max-width: 900px) {
  /* relative, nu static: altfel eticheta ascunsă a selectorului (.avs-sr-only, absolută) scapă din banda care derulează
     și lărgește toată pagina pe telefon */
  .avs-sidebar { position: relative; height: auto; padding-bottom: var(--avs-space-3); }
  .mp-sidebar__bottom { margin-top: 0; flex-direction: row; align-items: center; }
  .mp-sidebar__app-sub, .mp-sidebar__status, .mp-sidebar__app-name { display: none; }
  .mp-sidebar__app { gap: 0; }
}

/* ---------- Topbar ---------- */
.mp-topbar__sub { font-size: var(--avs-text-sm); color: var(--avs-text-tertiary); margin: 0; }
.mp-topbar__actions { display: flex; gap: var(--avs-space-3); flex-wrap: wrap; align-items: center; }
.mp-view[hidden] { display: none; }

/* ---------- Indicatori ---------- */
.mp-kpi-grid { display: grid; gap: var(--avs-space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.avs-stat__value--sm { font-size: var(--avs-text-xl); line-height: var(--avs-lh-xl); }
.mp-stat__row { display: flex; align-items: baseline; gap: var(--avs-space-2); flex-wrap: wrap; }

/* ---------- Bare de progres ---------- */
.mp-bar { position: relative; height: 10px; border-radius: var(--avs-radius-full); background: var(--mp-chart-track); overflow: hidden; }
.mp-bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--mp-chart-1); border-radius: inherit; transition: width var(--avs-motion-slow) var(--avs-ease); }
.mp-bar--lg { height: 14px; }
.mp-bar--sm { height: 6px; }
.mp-bar__fill--success { background: var(--avs-success); }
.mp-bar__fill--muted { background: var(--mp-chart-2); }
.mp-progress-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) 3fr auto; gap: var(--avs-space-4); align-items: center; padding: var(--avs-space-3) 0; border-bottom: 1px solid var(--avs-border); }
.mp-progress-row:last-child { border-bottom: 0; }
.mp-progress-row__label { display: flex; flex-direction: column; min-width: 0; }
.mp-progress-row__label small { color: var(--avs-text-tertiary); font-size: var(--avs-text-xs); }
.mp-progress-row__value { font-variant-numeric: tabular-nums; font-weight: var(--avs-weight-semibold); min-width: 5ch; text-align: right; }
@media (max-width: 600px) { .mp-progress-row { grid-template-columns: 1fr auto; } .mp-progress-row .mp-bar { grid-column: 1 / -1; } }

/* ---------- Matricea de realizare ---------- */
.mp-matrix td, .mp-matrix th { text-align: center; }
.mp-matrix td:first-child, .mp-matrix th:first-child { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--avs-bg-surface); }
.mp-matrix thead th:first-child { z-index: 3; background: var(--avs-bg-subtle); }
.mp-matrix tbody tr:nth-child(even) td:first-child { background: var(--avs-bg-surface); }
.mp-matrix tbody tr:hover td:first-child { background: var(--mp-row-hover); }
.mp-matrix th .mp-cap { display: block; white-space: normal; max-width: 12ch; margin: 0 auto; line-height: var(--avs-lh-xs); }
.mp-matrix th .mp-cap__pondere { display: block; color: var(--avs-text-tertiary); font-weight: var(--avs-weight-regular); text-transform: none; letter-spacing: 0; }
.mp-cell { display: inline-flex; align-items: center; gap: var(--avs-space-1); }
.mp-cell__input { width: 64px; min-height: 30px; padding: var(--avs-space-1) var(--avs-space-2); text-align: right; font-variant-numeric: tabular-nums; }
.mp-cell__input[data-dirty="true"] { border-color: var(--avs-warning); background: var(--avs-warning-bg); }
.mp-cell__unit { font-size: var(--avs-text-xs); color: var(--avs-text-tertiary); }
.mp-cell--done .mp-cell__input { border-color: var(--avs-success); }
.mp-matrix .mp-total { font-weight: var(--avs-weight-semibold); font-variant-numeric: tabular-nums; }
.mp-matrix td.mp-total { text-align: right; }
.mp-matrix .mp-note-btn { opacity: .55; }
.mp-matrix .mp-note-btn[data-has-note="true"] { opacity: 1; color: var(--avs-text-link); }
.mp-unit-cell { display: flex; align-items: center; gap: var(--avs-space-2); }
.mp-unit-cell .mp-bar { width: 56px; flex: none; }
.mp-cfg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--avs-space-4); flex-wrap: wrap; }
.mp-cfg-head__meta { display: flex; gap: var(--avs-space-4); flex-wrap: wrap; color: var(--avs-text-secondary); font-size: var(--avs-text-sm); }
.mp-cfg-head__meta strong { font-variant-numeric: tabular-nums; color: var(--avs-text-primary); }
.mp-sticky-actions { position: sticky; bottom: calc(var(--avs-app-footer-height) + var(--avs-space-3)); z-index: var(--avs-z-sticky); display: flex; justify-content: flex-end; gap: var(--avs-space-3); align-items: center; padding: var(--avs-space-3) var(--avs-space-4); background: var(--avs-bg-raised); border: 1px solid var(--avs-border); border-radius: var(--avs-radius-md); box-shadow: var(--avs-shadow-md); margin-top: var(--avs-space-4); }
.mp-sticky-actions[hidden] { display: none; }
.mp-sticky-actions__text { margin-right: auto; color: var(--avs-text-secondary); font-size: var(--avs-text-sm); }

/* Articole din anexă (pliabile) */
.mp-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--avs-space-2); color: var(--avs-text-link); font-weight: var(--avs-weight-medium); padding: var(--avs-space-2) 0; }
.mp-details > summary::-webkit-details-marker { display: none; }
.mp-details > summary:hover { text-decoration: underline; }
.mp-details > summary:focus-visible { outline: 2px solid var(--avs-border-focus); outline-offset: 2px; border-radius: var(--avs-radius-sm); }
.mp-details[open] > summary .mp-ico--chev { transform: rotate(90deg); }
.mp-ico--chev { transition: transform var(--avs-motion-base) var(--avs-ease); }

/* ---------- Tabele ---------- */
.mp-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--avs-space-3); flex-wrap: wrap; margin-bottom: var(--avs-space-4); }
.mp-table-toolbar__filters { display: flex; gap: var(--avs-space-2); flex-wrap: wrap; align-items: center; }
.mp-table-toolbar .avs-select, .mp-table-toolbar .avs-input { width: auto; min-width: 160px; }
.mp-actions-cell { white-space: nowrap; text-align: right; }
.mp-actions-cell .avs-btn { padding-inline: var(--avs-space-2); }
.avs-table td.mp-wrap { white-space: normal; max-width: 36ch; }
.mp-sub { display: block; color: var(--avs-text-tertiary); font-size: var(--avs-text-xs); }
.avs-table-wrap--flat { border: 0; border-radius: 0; max-height: none; }
.mp-card--flat { padding: 0; overflow: hidden; }
.mp-card--flat .avs-card__header { margin: 0; }
.mp-card--flat .avs-table-wrap { border: 0; border-radius: 0; }
.mp-card--flat .mp-table-toolbar { padding: var(--avs-space-4) var(--avs-space-6) 0; margin-bottom: var(--avs-space-3); }
.mp-card--flat .avs-empty { padding-inline: var(--avs-space-6); }
.mp-tabs-wrap { margin-bottom: var(--avs-space-5); overflow-x: auto; }
.avs-tab:focus-visible { outline-offset: -2px; }
.mp-badge-count { font-variant-numeric: tabular-nums; }

/* ---------- Grafic flux lunar (SVG) ---------- */
.mp-chart { width: 100%; height: auto; display: block; font-size: 11px; }
.mp-chart text { fill: var(--avs-text-tertiary); font-family: inherit; font-variant-numeric: tabular-nums; }
.mp-chart .mp-chart__grid { stroke: var(--avs-border); }
.mp-chart .mp-chart__axis { stroke: var(--avs-border-strong); }
.mp-chart .mp-chart__facturat { fill: var(--mp-chart-2); }
.mp-chart .mp-chart__incasat { fill: var(--mp-chart-1); }
.mp-chart .mp-chart__plati { fill: var(--avs-danger); opacity: .8; }
.mp-chart rect:hover { opacity: .75; }
.mp-legend { display: flex; gap: var(--avs-space-4); flex-wrap: wrap; font-size: var(--avs-text-xs); color: var(--avs-text-secondary); margin-top: var(--avs-space-2); }
.mp-legend span { display: inline-flex; align-items: center; gap: var(--avs-space-1); }
.mp-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mp-legend .mp-legend--facturat { background: var(--mp-chart-2); }
.mp-legend .mp-legend--incasat { background: var(--mp-chart-1); }
.mp-legend .mp-legend--plati { background: var(--avs-danger); }

/* ---------- Alerte în sinteză ---------- */
.mp-alerts { display: flex; flex-direction: column; gap: var(--avs-space-2); }
.mp-alerts .avs-alert { padding: var(--avs-space-3) var(--avs-space-4); align-items: center; }
.mp-alerts .avs-alert .avs-btn { margin-left: auto; }

/* ---------- Formulare în modal ---------- */
.mp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--avs-space-4); }
.mp-form-grid .avs-field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .mp-form-grid { grid-template-columns: 1fr; } }
.avs-modal--wide { max-width: 760px; }
.mp-form-errors { margin-bottom: var(--avs-space-4); }
.mp-form-errors ul { margin: var(--avs-space-1) 0 0; padding-left: var(--avs-space-5); }
.mp-calc { font-size: var(--avs-text-sm); color: var(--avs-text-secondary); display: flex; gap: var(--avs-space-4); flex-wrap: wrap; }
.mp-calc strong { font-variant-numeric: tabular-nums; color: var(--avs-text-primary); }
.avs-field__label[data-required]::after { content: " *"; color: var(--avs-danger); }

/* ---------- Setări ---------- */
.mp-settings-grid { display: grid; gap: var(--avs-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.mp-list { display: flex; flex-direction: column; gap: var(--avs-space-2); }
.mp-list__row { display: grid; grid-template-columns: 1fr auto; gap: var(--avs-space-3); align-items: center; padding: var(--avs-space-2) var(--avs-space-3); border: 1px solid var(--avs-border); border-radius: var(--avs-radius-sm); background: var(--avs-bg-subtle); }
.mp-list__row .avs-input { min-height: 30px; }
.mp-chip-row { display: flex; gap: var(--avs-space-2); flex-wrap: wrap; }
.mp-theme-row { display: flex; gap: var(--avs-space-2); flex-wrap: wrap; }
.mp-theme-row .avs-btn[aria-pressed="true"] { border-color: var(--avs-action); box-shadow: inset 0 0 0 1px var(--avs-action); }
.mp-code { font-family: var(--avs-font-mono); font-size: var(--avs-text-xs); background: var(--avs-bg-subtle); padding: var(--avs-space-1) var(--avs-space-2); border-radius: var(--avs-radius-sm); word-break: break-all; }

/* ---------- Login ---------- */
.mp-login { min-height: 100vh; display: grid; place-items: center; padding: var(--avs-space-6); padding-bottom: calc(var(--avs-space-6) + var(--avs-app-footer-height)); background: var(--avs-bg-app); }
.mp-login .avs-card { width: min(100%, 400px); }
.mp-login__logo { display: block; width: 168px; margin: 0 auto var(--avs-space-6); }
.mp-login[hidden] { display: none; }

/* ---------- Bannere de mod ---------- */
.mp-mode-banner { margin-bottom: var(--avs-space-5); }

/* ---------- Jurnal ---------- */
.mp-journal { display: flex; flex-direction: column; }
.mp-journal__row { display: grid; grid-template-columns: 140px 120px 1fr; gap: var(--avs-space-4); padding: var(--avs-space-3) 0; border-bottom: 1px solid var(--avs-border); font-size: var(--avs-text-sm); }
.mp-journal__row:last-child { border-bottom: 0; }
.mp-journal__when { color: var(--avs-text-tertiary); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .mp-journal__row { grid-template-columns: 1fr; gap: var(--avs-space-1); } }

/* ---------- Încărcare ---------- */
.mp-loading { display: flex; flex-direction: column; gap: var(--avs-space-3); }
.mp-loading .avs-skeleton { height: 48px; }

/* ---------- Tipărire ---------- */
@media print {
  .mp-sticky-actions, .mp-table-toolbar, .mp-actions-cell, .mp-mode-banner, .mp-login { display: none !important; }
  .mp-view[hidden] { display: none !important; }
  .mp-matrix td:first-child, .mp-matrix th:first-child { position: static; }
}

/* ---------- Ecosistem: comutator, AVIA, WhatsApp, login prin portal ---------- */
.mp-sidebar > avs-app-switcher { margin-bottom: var(--avs-space-1); }
@media (max-width: 900px) { .mp-sidebar > avs-app-switcher { flex: none; width: auto; min-width: 180px; } }
.mp-login__sso { width: 100%; margin-bottom: var(--avs-space-4); }
.mp-login__sso[hidden] { display: none; }
.mp-login__sau { display: flex; align-items: center; gap: var(--avs-space-3); margin: 0 0 var(--avs-space-4); color: var(--avs-text-tertiary); font-size: var(--avs-text-xs); }
.mp-login__sau::before, .mp-login__sau::after { content: ""; flex: 1; border-top: 1px solid var(--avs-border); }
.mp-login__sau[hidden] { display: none; }
#login-alerta { margin-bottom: var(--avs-space-4); }
#login-alerta[hidden] { display: none; }
#login-form[hidden] { display: none; }
.mp-wa-intro { max-width: 72ch; color: var(--avs-text-secondary); margin-bottom: var(--avs-space-5); }
avs-asistent[hidden] { display: none; }

/* ============ Cum funcționează (skill how-it-works) ============ */
.mp-cf { display: flex; flex-direction: column; gap: var(--avs-space-8); max-width: 1100px; min-width: 0; }
/* min-width: 0 — altfel cadrul diagramei (min-width 760px) lărgește coloana și pagina iese din ecran pe telefon */
.mp-cf__sec { display: flex; flex-direction: column; gap: var(--avs-space-3); min-width: 0; }
.mp-cf__sec h2 { margin: 0; font-size: var(--avs-text-xl); }
.mp-cf__sec > p { margin: 0; max-width: 72ch; color: var(--avs-text-secondary); }
.mp-cf__diagrama { border: 1px solid var(--avs-border); border-radius: var(--avs-radius-md); background: var(--avs-bg-surface); overflow: hidden; }
/* Pe ecrane înguste desenul se derulează lateral, nu își micșorează etichetele (≈ 2/3 din lățimea lui, 1120 px). */
.mp-cf__cadru-wrap { overflow-x: auto; }
.mp-cf__cadru { display: block; width: 100%; min-width: 760px; aspect-ratio: 1120 / 702; border: 0; background: var(--avs-bg-surface); }
.mp-cf__cadru[style*="height"] { aspect-ratio: auto; }
.mp-cf__deschide { display: flex; justify-content: flex-end; padding: var(--avs-space-2) var(--avs-space-3); border-top: 1px solid var(--avs-border); }
.mp-cf__text summary { cursor: pointer; color: var(--avs-text-link); font-weight: 500; }
.mp-cf__text summary:focus-visible { outline: 2px solid var(--avs-border-focus); outline-offset: 2px; border-radius: var(--avs-radius-sm); }
.mp-cf__text ul, .mp-cf__pasi { margin: var(--avs-space-2) 0 0; padding-left: var(--avs-space-5); display: flex; flex-direction: column; gap: var(--avs-space-2); max-width: 80ch; color: var(--avs-text-secondary); }
.mp-cf__pasi strong { color: var(--avs-text-primary); }
.mp-cf__parti { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--avs-space-3); }
.mp-cf__parte { display: flex; flex-direction: column; gap: var(--avs-space-1); }
.mp-cf__parte h3 { margin: 0; font-size: var(--avs-text-base); }
.mp-cf__parte p { margin: 0; color: var(--avs-text-secondary); }
.mp-cf__parte .avs-muted { font-size: var(--avs-text-xs); }
.mp-cf__detalii { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: var(--avs-space-2) var(--avs-space-5); margin: 0; max-width: 960px; }
.mp-cf__detalii dt { font-weight: 600; color: var(--avs-text-primary); }
.mp-cf__detalii dd { margin: 0; color: var(--avs-text-secondary); }
.mp-cf__verificat { font-size: var(--avs-text-xs); margin: 0; }
@media (max-width: 640px) { .mp-cf__detalii { grid-template-columns: 1fr; } .mp-cf__detalii dd { margin-bottom: var(--avs-space-2); } }