/* metriq · tema „operațional"
   Se încarcă DUPĂ organic.css și metriq.css. Nu cere nicio schimbare de markup.
   1) tokenuri  2) proporții  3) anularea pastilelor  4) culoare/fundal explicite

   Tokenurile sunt ale familiei `metriq_ui` (aplicațiile de teren; Marin, 26.10: panoul și aplicațiile sunt
   același produs): fundal #eef1f0, suprafețe albe, text #1b2421, linii #e1e6e4, neutre verzui (hue 180),
   accentul #2f7a58, stările ok/warn/bad ale aplicațiilor, Figtree pe titluri și Public Sans pe text.
   Componentele cadrului nou (bara de sus, selectorul, meniurile) stau în panou.css, încărcat după. */

:root{
  /* — bază — */
  --color-page:#eef1f0;
  --color-bg:#ffffff;
  --color-surface:#f6f8f7;
  --color-text:#1b2421;
  --color-divider:#e1e6e4;
  --color-accent:#2f7a58;
  --color-accent-2:oklch(.5 .06 245);

  /* — rampe, aceeași scară de luminozitate — */
  --color-neutral-100:oklch(.975 .004 180);--color-neutral-200:oklch(.94 .006 180);--color-neutral-300:oklch(.88 .008 180);
  --color-neutral-400:oklch(.79 .01 180);--color-neutral-500:oklch(.67 .012 180);--color-neutral-600:oklch(.56 .012 180);
  --color-neutral-700:oklch(.46 .012 180);--color-neutral-800:oklch(.36 .012 180);--color-neutral-900:oklch(.25 .012 180);
  /* accentul: #2f7a58 = oklch(.523 .092 161); 200 = #e3f1ea, verdele deschis al aplicațiilor */
  --color-accent-100:oklch(.975 .012 161);--color-accent-200:#e3f1ea;--color-accent-300:oklch(.88 .05 161);
  --color-accent-400:oklch(.76 .08 161);--color-accent-500:oklch(.64 .095 161);--color-accent-600:#2f7a58;
  --color-accent-700:oklch(.44 .08 161);--color-accent-800:oklch(.36 .065 161);--color-accent-900:#10291f;
  --color-accent-2-100:oklch(.975 .01 245);--color-accent-2-200:oklch(.94 .02 245);--color-accent-2-300:oklch(.88 .035 245);
  --color-accent-2-400:oklch(.77 .05 245);--color-accent-2-500:oklch(.65 .06 245);--color-accent-2-600:oklch(.55 .06 245);
  --color-accent-2-700:oklch(.46 .055 245);--color-accent-2-800:oklch(.37 .05 245);--color-accent-2-900:oklch(.27 .04 245);

  /* — stări: culori proprii, nu derivate din accente — */
  /* valorile din `metriq_ui`: ok #2e8a4f, warn #b97a1a, bad #c8352e (adânc #9c2a24), cu nuanțele lor deschise */
  --color-ok:#2e8a4f;  --color-ok-soft:#e9f6ee;  --color-ok-line:oklch(.86 .07 150);
  --color-warn:#b97a1a; --color-warn-soft:#fbf3e3; --color-warn-line:oklch(.86 .08 80);
  --color-bad:#c8352e;  --color-bad-deep:#9c2a24;  --color-bad-tint:#fbeceb;
  --color-mut:var(--color-neutral-600);

  /* — literă — */
  --font-heading:"Figtree",system-ui,sans-serif;
  --font-heading-weight:700;
  --font-body:"Public Sans",system-ui,sans-serif;

  /* — formă — */
  --radius-sm:4px;--radius-md:6px;--radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(20,30,27,.06);
  --shadow-md:0 1px 3px rgba(20,30,27,.08),0 4px 12px rgba(20,30,27,.05);
  --shadow-lg:0 12px 40px rgba(20,30,27,.18);

  /* — proporții: o singură scară, din care derivă tot — */
  --fs-xs:12px;--fs-sm:12.5px;--fs-base:14px;--fs-title:15px;--fs-h1:20px;
  --lh:1.45;
  --gap:16px;               /* între panouri */
  --pad-x:16px;             /* margine orizontală a panoului = a celulei */
  --head-h:48px;            /* antet de panou */
  --row-h:40px;             /* rând de tabel; dens = 34px */
  --row-h-dense:34px;
  --ctl-h:32px;             /* butoane, câmpuri, segmente */
  --nav-h:56px;             /* bara de sus; 52px pe telefon (panou.css) */
  --content-max:1360px;
}

/* 4) explicit, ca să nu rămână valori moștenite de la rădăcină */
html,body{background:var(--color-page);color:var(--color-text)}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-heading-weight);letter-spacing:-.005em;color:var(--color-text)}
h1{font-size:var(--fs-h1)}
.ht{font-family:var(--font-body);font-weight:600;letter-spacing:0}

/* 3) organic.css face totul pastilă — anulat */
.btn,.tag,.seg,.input,.seg-opt{border-radius:var(--radius-md)}
.pill{border-radius:var(--radius-sm)}

/* 2) proporții pe vocabularul existent (bara de sus: panou.css) */

.panel{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{min-height:var(--head-h);display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px var(--pad-x);border-bottom:1px solid var(--color-divider)}
.panel-title{margin:0;white-space:nowrap;font-family:var(--font-body);font-size:var(--fs-title);font-weight:600;line-height:1.25}
.panel-body{padding:var(--pad-x)}
.panel-body:has(>.table-scroll:only-child),.panel-body:has(>.table:only-child){padding:0}
.meta{font-size:var(--fs-sm);color:var(--color-neutral-700);font-variant-numeric:tabular-nums}

.table{width:100%;border-collapse:collapse;font-size:var(--fs-base);font-variant-numeric:tabular-nums;color:var(--color-text);background:var(--color-bg)}
.table th{height:36px;padding:0 12px;text-align:left;font-size:var(--fs-xs);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--color-neutral-700);background:var(--color-surface);border-bottom:1px solid var(--color-divider);white-space:nowrap}
.table td{height:var(--row-h);padding:0 12px;white-space:nowrap;border-bottom:1px solid var(--color-divider);vertical-align:middle}
.table th:first-child,.table td:first-child{padding-left:var(--pad-x)}
.table th:last-child,.table td:last-child{padding-right:var(--pad-x)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--color-neutral-100)}
.table-dense td{height:var(--row-h-dense);font-size:var(--fs-sm)}
.table-scroll{overflow-x:auto}

.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;font-size:var(--fs-xs);font-weight:600;line-height:1;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-ok{background:var(--color-ok-soft);color:oklch(.42 .11 150)}
.pill-warn{background:var(--color-warn-soft);color:oklch(.45 .11 65)}
.pill-bad{background:var(--color-bad-tint);color:var(--color-bad-deep)}
.pill-mut{background:var(--color-neutral-200);color:var(--color-neutral-700)}

.num{font-variant-numeric:tabular-nums;font-weight:500}
.num-warn{color:oklch(.5 .13 65);font-weight:600}
.num-bad{color:var(--color-bad-deep);font-weight:700}

.btn{height:var(--ctl-h);display:inline-flex;align-items:center;gap:6px;padding:0 12px;font:600 var(--fs-sm)/1 var(--font-body);border:1px solid transparent;cursor:pointer;background:var(--color-accent);color:#fff;text-decoration:none}
.btn:hover{background:var(--color-accent-700)}
.btn:active{background:var(--color-accent-800)}
.btn-go{background:var(--color-accent);color:#fff}
.btn-secondary{background:var(--color-bg);color:var(--color-text);border-color:var(--color-neutral-300)}
.btn-secondary:hover{background:var(--color-neutral-100);border-color:var(--color-neutral-400)}
.btn-ghost{background:transparent;color:var(--color-accent-700)}
.btn-ghost:hover{background:var(--color-accent-100)}
.table .btn{height:28px;padding:0 10px}

.notes{display:grid;gap:8px;padding:12px var(--pad-x);border-top:1px solid var(--color-divider)}
.note{padding:10px 12px;border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:1.5;background:var(--color-surface);border:1px solid var(--color-divider);color:var(--color-neutral-800)}
.note-ok{background:var(--color-ok-soft);border-color:var(--color-ok-line)}
.note-warn{background:var(--color-warn-soft);border-color:var(--color-warn-line)}
/* O notă simplă e un hint, nu un mesaj: text discret, fără cutie. Cutia rămâne pentru stări
   (salvat, avertisment), care chiar trebuie să sară în ochi. */
.note:not(.note-ok):not(.note-warn):not(.note-bad){padding:0;background:none;border:0;border-radius:0;color:var(--color-neutral-700)}

.input{height:var(--ctl-h);padding:0 10px;font:var(--fs-base) var(--font-body);background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-neutral-300)}
.input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-200)}

.dialog{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:var(--color-bg);color:var(--color-text)}
dialog.dialog:not([open]){display:none}
.dialog::backdrop{background:rgba(20,30,27,.4)}
.dialog-title{margin:0;padding:16px 20px 0;font-size:16px;font-weight:600}
.dialog-body{padding:8px 20px 16px;font-size:var(--fs-base);color:var(--color-neutral-800)}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;background:var(--color-surface);border-top:1px solid var(--color-divider)}

a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-900)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* 5) Adăugat la adoptare, 9 octombrie 2026. (Bara de sus și sigla s-au mutat în panou.css, 29.10.) */
.panel-main{max-width:var(--content-max)}