/* ==========================================================================
   Almanac Console — stili propri (issue #5).
   Carica dopo brand-tokens.css e brand-components.css (brand pack
   markwins/brand-pack main 3fa4ef7a, copiati in static/brand/ senza modifiche).
   Pattern nuovi prefissati `alm-` presi dalla preview approvata (studio v3,
   25/09/2026); si canonizzano nel brand pack con la MR gemella.
   ========================================================================== */

/* Accento petrolio (D4): rimappa la famiglia accento sotto la radice della
   console. Ciliegia resta per le sole azioni finali. */
.alm-console {
  --pink: #2A7571;           /* atlas-ignore: Almanac accent */
  --pink-deep: #1F5C5A;      /* atlas-ignore: Almanac accent */
  --pink-text: #174543;      /* atlas-ignore: Almanac accent */
  --pink-light: #A9CFCB;     /* atlas-ignore: Almanac accent */
  --pink-tint: #E3F0EE;      /* atlas-ignore: Almanac accent */
  --surface: #EEF6F5;        /* atlas-ignore: Almanac accent */
  --shell-menu-tint: #EEF6F5;/* atlas-ignore: Almanac accent */
}

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.alm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- barra alta: marchio + sezioni + account ---- */
.alm-top { height: 76px; display: flex; align-items: stretch; gap: 40px; padding: 0 28px; border-bottom: 1px solid var(--hairline); }
.alm-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.alm-brand__wm { font-family: var(--font-wordmark); font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--pink); display: inline-flex; align-items: center; gap: 6px; }
.alm-brand__mark { width: 34px; height: 34px; flex: 0 0 34px; display: block; }
.alm-brand__by { font-family: var(--font-mono-heavy); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); border-left: 1px solid var(--hairline); padding-left: 12px; line-height: 1.5; }
.alm-nav { display: flex; align-items: center; gap: 4px; }
.alm-nav a { height: 38px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 0 16px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: color var(--motion-base), background var(--motion-base); }
.alm-nav a:hover { color: var(--ink); background: var(--shell-menu-tint); }
.alm-nav a.is-active { color: var(--pink-deep); background: var(--pink-tint); font-weight: 600; }
.alm-nav a.is-active .cnt { color: var(--pink-deep); }
.alm-nav a:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.alm-nav .cnt { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); font-weight: 500; }
.alm-top__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* "checked HH:MM" (in Atlas vive in admin.css come .pm-updated) */
.pm-updated { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.pm-updated .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.pm-updated--down .dot { background: var(--ink-3); }

/* account: avatar + menu del brand pack, aperto con <details> (niente JS) */
.alm-account { position: relative; }
.alm-account > summary { list-style: none; }
.alm-account > summary::-webkit-details-marker { display: none; }
.alm-account[open] > summary.avatar { border-color: var(--pink); }
.alm-account[open] > .menu { display: block; }
.alm-account .menu form { margin: 0; }
.alm-account .menu-item { width: 100%; background: none; border: 0; text-align: left; }

/* ---- pagina ---- */
.alm-body { padding: 22px 28px 34px; max-width: 1440px; }
.alm-body .section-eyebrow { margin-bottom: 12px; }

@media (max-width: 960px) {
  .alm-top { height: auto; flex-wrap: wrap; gap: 8px 20px; padding: 14px 16px 0; }
  .alm-nav { order: 3; width: 100%; padding-bottom: 10px; }
  .alm-brand__by { display: none; }
  .alm-body { padding: 18px 16px 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 1ms !important; } }

/* ---- striscia KPI (MR 3): la struttura .d5-kpi e' del brand pack; qui solo
   le misure che la preview metteva in style="" (la CSP non ammette stili
   inline) e il menu di sostituzione aperto dal JS. ---- */
.alm-body .d5-kpi { margin-bottom: 26px; }
.d5-kpi .alm-ok { background: var(--success); }
.d5-kpi .alm-warn { background: var(--warning); }
.d5-kpi .k-mk.alm-l-100 { left: calc(100% - 1.5px); }
/* larghezze 0-100 % per code, bullet e mix */
.alm-w-0{width:0%} .alm-w-1{width:1%} .alm-w-2{width:2%} .alm-w-3{width:3%} .alm-w-4{width:4%} .alm-w-5{width:5%} .alm-w-6{width:6%} .alm-w-7{width:7%} .alm-w-8{width:8%} .alm-w-9{width:9%}
.alm-w-10{width:10%} .alm-w-11{width:11%} .alm-w-12{width:12%} .alm-w-13{width:13%} .alm-w-14{width:14%} .alm-w-15{width:15%} .alm-w-16{width:16%} .alm-w-17{width:17%} .alm-w-18{width:18%} .alm-w-19{width:19%}
.alm-w-20{width:20%} .alm-w-21{width:21%} .alm-w-22{width:22%} .alm-w-23{width:23%} .alm-w-24{width:24%} .alm-w-25{width:25%} .alm-w-26{width:26%} .alm-w-27{width:27%} .alm-w-28{width:28%} .alm-w-29{width:29%}
.alm-w-30{width:30%} .alm-w-31{width:31%} .alm-w-32{width:32%} .alm-w-33{width:33%} .alm-w-34{width:34%} .alm-w-35{width:35%} .alm-w-36{width:36%} .alm-w-37{width:37%} .alm-w-38{width:38%} .alm-w-39{width:39%}
.alm-w-40{width:40%} .alm-w-41{width:41%} .alm-w-42{width:42%} .alm-w-43{width:43%} .alm-w-44{width:44%} .alm-w-45{width:45%} .alm-w-46{width:46%} .alm-w-47{width:47%} .alm-w-48{width:48%} .alm-w-49{width:49%}
.alm-w-50{width:50%} .alm-w-51{width:51%} .alm-w-52{width:52%} .alm-w-53{width:53%} .alm-w-54{width:54%} .alm-w-55{width:55%} .alm-w-56{width:56%} .alm-w-57{width:57%} .alm-w-58{width:58%} .alm-w-59{width:59%}
.alm-w-60{width:60%} .alm-w-61{width:61%} .alm-w-62{width:62%} .alm-w-63{width:63%} .alm-w-64{width:64%} .alm-w-65{width:65%} .alm-w-66{width:66%} .alm-w-67{width:67%} .alm-w-68{width:68%} .alm-w-69{width:69%}
.alm-w-70{width:70%} .alm-w-71{width:71%} .alm-w-72{width:72%} .alm-w-73{width:73%} .alm-w-74{width:74%} .alm-w-75{width:75%} .alm-w-76{width:76%} .alm-w-77{width:77%} .alm-w-78{width:78%} .alm-w-79{width:79%}
.alm-w-80{width:80%} .alm-w-81{width:81%} .alm-w-82{width:82%} .alm-w-83{width:83%} .alm-w-84{width:84%} .alm-w-85{width:85%} .alm-w-86{width:86%} .alm-w-87{width:87%} .alm-w-88{width:88%} .alm-w-89{width:89%}
.alm-w-90{width:90%} .alm-w-91{width:91%} .alm-w-92{width:92%} .alm-w-93{width:93%} .alm-w-94{width:94%} .alm-w-95{width:95%} .alm-w-96{width:96%} .alm-w-97{width:97%} .alm-w-98{width:98%} .alm-w-99{width:99%}
.alm-w-100{width:100%}
.alm-banner { margin-bottom: 12px; }

/* ---- bacheca domini (preview v3) ---- */
.alm-family { margin-bottom: 22px; }
.alm-family__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.alm-family__name { font-family: var(--font-mono-heavy); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.alm-family__note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.alm-domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.alm-domain { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.alm-domain__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.alm-domain__name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.alm-domain__src { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.alm-domain__tables { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--hairline); padding-top: 8px; }
.alm-t { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.alm-t .ts { color: var(--ink-3); font-size: 10.5px; white-space: nowrap; }
.alm-domain--planned { border-style: dashed; }
.alm-domain--planned .alm-domain__name { color: var(--ink-2); }

/* ---- tabella dataset (preview v3) ---- */
.alm-tablewrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 4px 16px; }
.alm-tablewrap .data-table { min-width: 860px; }
.alm-tablewrap td.mono, .alm-tablewrap td .mono { font-family: var(--font-mono); font-size: 12px; }
.alm-tablewrap td.mute { color: var(--ink-2); font-size: 12.5px; }

@media (max-width: 960px) {
  .d5-kpi { flex-wrap: wrap; }
  .d5-kpi .k-cd { flex: 1 1 calc(50% - 12px) !important; }
  .d5-kpi .k-capo { flex: 1 1 100% !important; }
}

/* ---- pagine di accesso: .auth del brand pack, marchio Strati al posto delle sparkle ---- */
.auth__wm .alm-brand__mark { width: 34px; height: 34px; }
.auth__form .field { min-width: 0; }
.auth__form .input { width: 100%; box-sizing: border-box; }

/* ==========================================================================
   Parità con l'admin di Atlas (issue #9, preview console-proposta.html §1).
   Pattern pm-* ripresi da assets/admin.css di Atlas come nella preview;
   i colori esadecimali della preview sono portati sui token.
   ========================================================================== */
.pm-sec { margin-bottom: 26px; }
.pm-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pm-sec__head .section-title { font-size: 16px; }
.pm-sec__note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.alm-sec-chain { margin-top: 18px; }
.alm-sec-after { margin-top: 22px; }
.alm-empty { margin: 0; font-size: 13px; color: var(--ink-3); }

/* risposta del mattino */
.pm-verdict { display: flex; align-items: center; gap: 16px; padding: 4px 0; margin-bottom: 16px; }
.pm-verdict__ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; }
.pm-verdict__ic svg { width: 22px; height: 22px; }
.pm-verdict--warn .pm-verdict__ic { background: var(--warning-tint); color: var(--warning-deep); }
.pm-verdict--ok .pm-verdict__ic { background: var(--success-tint); color: var(--success-deep); }
.pm-verdict--unknown .pm-verdict__ic { background: var(--surface); color: var(--ink-3); }
.pm-verdict__body { min-width: 0; flex: 1; }
.pm-verdict__h { font-family: var(--font-wordmark); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; }
.pm-verdict__sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }
.pm-verdict__sub b { color: var(--ink); font-weight: 600; }

/* schede problema */
.pm-issue { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--paper); margin-bottom: 10px; }
.pm-issue__body { flex: 1; min-width: 0; }
.pm-issue__title { font-size: 14.5px; color: var(--ink); margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.pm-issue__title b { font-weight: 600; }
.pm-issue__title .ds { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--surface); padding: 1px 6px; border-radius: 5px; }
.pm-issue__detail { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.pm-issue__detail .mono, .pm-heldback-row .mono, .timeline-event__title .mono { font-family: var(--font-mono); }
.pm-issue__detail .mono { font-size: 11.5px; }
.pm-issue__action { flex: 0 0 auto; align-self: center; }
.pm-issue__action .btn svg, .pm-heldback-row .btn svg, .alm-toolbar .btn svg, .pm-ctacell .btn svg { width: 14px; height: 14px; }
/* Rebuild (issue #9, MR 2): il form non deve cambiare il posto del pulsante. */
.alm-rebuild { display: inline; margin: 0; }
td.pm-ctacell { text-align: right; white-space: nowrap; width: 1%; }

/* catena di consegna */
.alm-chain { display: grid; grid-template-columns: 1.5fr 1px 1fr 1px 1fr; }
.pm-health-strip__col { padding: 2px 18px; min-width: 0; }
.alm-chain .pm-health-strip__col:first-child { padding-left: 2px; }
.alm-chain .pm-health-strip__col:last-child { padding-right: 2px; }
.pm-health-strip__sep { width: 1px; background: var(--hairline); }
.alm-chain__name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.alm-chain .kv-strip__v { font-size: 14px; white-space: nowrap; }
.alm-chain .kv-strip__k { white-space: nowrap; }
/* voci larghe quanto il valore: "1.5.0 · = repo" non deve finire sotto "Pending" */
@media (min-width: 961px) { .alm-chain .kv-strip__item { flex: 1 0 auto; } }
.alm-chain__name a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.alm-chain__name a:hover { color: var(--pink-deep); border-bottom-color: currentColor; }
.alm-tone--warn { color: var(--warning-deep); }
.alm-tone--down { color: var(--error); }
.alm-tone--up { color: var(--success-deep); }

/* pannello Courier (Datasets, #9 MR 3) */
#courier { scroll-margin-top: 16px; }
.alm-courier__strip { padding-top: 0; flex-wrap: wrap; row-gap: 14px; }
.alm-courier__strip--second { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 14px; }
.alm-courier__folders { margin-top: 12px; }
.alm-courier__folders .data-table { min-width: 640px; }
.alm-note { font-size: 11.5px; color: var(--ink-3-text); margin: 10px 2px 0; }

/* altri dataset freschi */
.pm-fresh { margin: -10px 0 16px; }
.pm-fresh__toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 10px 2px; user-select: none; list-style: none; }
.pm-fresh__toggle::-webkit-details-marker { display: none; }
.pm-fresh__toggle .chev { color: var(--ink-3); transition: transform var(--motion-medium) var(--motion-ease-out); display: inline-block; }
.pm-fresh[open] .pm-fresh__toggle .chev { transform: rotate(90deg); }
.pm-fresh__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: 0 0 8px; }
.pm-fresh__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; padding: 6px 2px 2px; }
.pm-fresh__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.pm-fresh__row .nm { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }
.pm-fresh__row .ts { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-align: right; }

/* Datasets: filtro, cella pipeline, stato */
.alm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.alm-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alm-chip { height: 30px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--paper); font-size: 13px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: background var(--motion-base); }
.alm-chip:hover { background: var(--shell-menu-tint); }
.alm-chip:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.alm-chip .cnt { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.alm-chip.is-on { background: var(--pink-tint); color: var(--pink-deep); border-color: transparent; font-weight: 600; }
.alm-chip.is-on .cnt { color: var(--pink-deep); }
.alm-tablewrap tr[id] { scroll-margin-top: 16px; }
.alm-tablewrap tr:target td { background: var(--pink-tint); }
.pm-pipe { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-pipe__raw { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.pm-pipe__raw .lbl, .pm-pipe__silver .lbl { color: var(--ink-3); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.pm-pipe__silver { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); padding-left: 4px; white-space: nowrap; }
.pm-pipe__silver .arrow { color: var(--ink-3); margin-right: 4px; }
.pm-pipe__silver--late { color: var(--error); }
.pm-pipe__silver--missing { color: var(--ink-3); font-style: italic; }
td.pm-statuscell { white-space: nowrap; width: 1%; }
.status-pill__spinner { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: almspin 800ms linear infinite; vertical-align: -1px; }
@keyframes almspin { to { transform: rotate(360deg); } }

/* file trattenuti */
.pm-heldback-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--hairline); border-radius: var(--radius-md); margin-bottom: 8px; }
.pm-heldback-row .ds { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.pm-heldback-row .reason { font-size: 12.5px; color: var(--ink-2); }
.pm-heldback-row .reason .mono { font-size: 11.5px; color: var(--ink); }
.pm-heldback-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ultime 48 h: la timeline è del brand pack; qui solo il "mostra tutto" (console.js) */
.timeline--collapsed .timeline-event:nth-of-type(n+7) { display: none; }
.alm-more { margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; background: transparent; border: 0; padding: 4px 0; color: var(--pink-deep); cursor: pointer; }

@media (max-width: 960px) {
  .alm-chain { grid-template-columns: 1fr; }
  .alm-chain .pm-health-strip__col { padding: 0 2px; }
  .alm-chain .pm-health-strip__sep { height: 1px; width: auto; margin: 12px 0; }
  .kv-strip { flex-wrap: wrap; }
  .kv-strip__item { flex: 1 1 40%; }
  .pm-issue { flex-direction: column; gap: 10px; }
  .pm-issue__action { align-self: flex-start; }
  .pm-heldback-row { grid-template-columns: 1fr; gap: 8px; }
  .pm-fresh__list { grid-template-columns: 1fr; }
  .pm-verdict__h { font-size: 23px; }
}