/* ============================================================
   Hivematic Console — APP LAYER of the design system (console.css).
   This file is the platform-wide standard: colors, typography and
   component classes for the whole admin portal. Loaded AFTER
   tailwind so its overrides win.

   Rules (vs. the marketing layer of the site):
   1. Density: base 13px, 40px rows, 12–16px padding, radius 8–10px.
   2. Color: neutral surfaces (#f6f7f9 canvas, #fff panels). Brand
      orange reserved for: primary action (1 per view), active state,
      focus ring. Never as decoration.
   3. Typography: Inter Tight for UI; Poppins ONLY for the page
      title; JetBrains Mono for technical ids, codes, cron, states.
   4. Shadows: none. Hierarchy from 1px borders and backgrounds.
      Elevation only on popovers / canvas nodes.
   5. Brand patterns (iso grid) live ONLY in the dark sidebar.
   6. Collections are tables (.tbl) with mono headers, not landing
      cards. Panels (.panel) group, they don't decorate.
   7. States: dot + mono 10px label (.st-*). Green=ok, amber=warn,
      red=error, gray=neutral. Never text color alone.
   ============================================================ */
:root{
  --bg:#f6f7f9;--panel:#fff;--line:#e6e7ec;--line-soft:#f0f1f4;
  --ink:#20222b;--ink-2:#454956;--ink-3:#6b6f7e;--ink-4:#9498a6;
  --brand:#e75800;--brand-dark:#c24600;--brand-bg:#fff7ed;--brand-line:#fed7aa;
  --ok:#10855c;--ok-bg:#effaf3;--ok-line:#bfe3cf;
  --warn:#b45309;--warn-bg:#fffbeb;--warn-line:#fde68a;
  --err:#c03434;--err-bg:#fdf5f5;--err-line:#f0c4c4;
  --violet:#7c3aed;--violet-bg:#f5f3ff;--violet-line:#ddd6fe;
  --info:#1d5fb8;--info-bg:#f0f6ff;--info-line:#c3d9f5;
}

/* — base typography (platform standard) — */
body{
  font-family:"Inter Tight",ui-sans-serif,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);font-size:13px;
}
h1{font-family:"Poppins","Inter Tight",sans-serif}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.jm{font-family:"JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em}

/* — page frame — */
/* Standard width of the main column, applied by the admin layout to every
   page (full-page canvas views excepted via :skip_page_wrapper). */
.page-main{max-width:1100px}
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.page-head h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.page-head .sub{margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.head-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.obj-glyph{height:40px;width:40px;flex:none;border-radius:10px;display:grid;place-items:center}

/* — grid — */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.stack{display:flex;flex-direction:column;min-width:0}

/* — section header outside the panel ("Titolo esterno" pattern) — */
.pg-head{display:flex;align-items:flex-end;gap:18px;margin:34px 2px 7px}
.pg-head:first-child{margin-top:0}
.pg-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.pg-title .t{padding:5px}
.pg-help{margin-left:auto;max-width:560px;position:relative;padding:4px 0 0 22px;font-size:11.5px;line-height:1.5;color:#9a854d}
.pg-help b,.pg-help strong{color:#7c6a35;font-weight:600}
.pg-help a{color:var(--brand-dark)}
.pg-help::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='%23f3e5b8'/><path d='M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.8.3-.9 1-.9 1.7M12 16.5v.5' fill='none' stroke='%238a6d1f' stroke-width='1.9' stroke-linecap='round'/></svg>") no-repeat center/contain}

/* — panels — */
/* overflow stays visible so dropdown menus anchored in the footer are not
   clipped; edge children get their own corner rounding instead. */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px}
.panel-h{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-bottom:1px solid var(--line-soft)}
.panel-h .t{font-size:13px;font-weight:600;color:var(--ink)}
.panel-h .n{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink-4);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.panel-h .sp{margin-left:auto;display:flex;gap:6px;align-items:center}
.panel-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--line-soft);background:#fbfbfd}
/* Standard: panel actions live in the footer (title sits outside in .pg-head) */
.panel-foot{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:8px 10px;border-top:1px solid var(--line-soft);background:#fbfbfd;border-radius:0 0 9px 9px}
.panel>.tbl:first-child thead th:first-child,.panel>form:first-child .tbl:first-child thead th:first-child{border-top-left-radius:9px}
.panel>.tbl:first-child thead th:last-child,.panel>form:first-child .tbl:first-child thead th:last-child{border-top-right-radius:9px}
.panel>.panel-hint:first-child{border-radius:9px 9px 0 0}
.panel>.panel-h:first-child{border-radius:9px 9px 0 0}
.panel-hint{position:relative;padding:9px 14px 9px 36px;font-size:12px;line-height:1.55;color:#8a6d1f;border-bottom:1px solid #f3e8c8;background:#fdf9ec;border-left:3px solid #e6cf7a}
.panel-hint b{color:#6f5714}
.panel-hint a{color:var(--brand-dark)}
.panel-hint::before{content:"";position:absolute;left:12px;top:10px;width:14px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a23e' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.8.3-.9 1-.9 1.7M12 16.5v.5'/></svg>") no-repeat center/contain}

/* — buttons: flat, 32px; xs 26px. One primary per view. — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}.btn-ghost:hover{border-color:#c6c7ce;color:var(--ink-2)}
.btn-soft{background:var(--brand-bg);border-color:var(--brand-line);color:var(--brand-dark)}.btn-soft:hover{background:#ffedd5;border-color:#fdba74;color:var(--brand-dark)}
.btn-subtle{background:transparent;color:var(--ink-3)}.btn-subtle:hover{background:var(--line-soft);color:var(--ink)}
.btn-danger{background:#fff;border-color:var(--err-line);color:var(--err)}.btn-danger:hover{background:var(--err-bg);color:var(--err)}
.btn-xs{height:26px;padding:0 9px;font-size:12px;border-radius:7px}
.icon-btn{display:inline-grid;place-items:center;height:28px;width:28px;border-radius:7px;color:var(--ink-4);cursor:pointer;background:transparent;border:none;transition:.12s;padding:0}
.icon-btn:hover{color:var(--ink-2);background:var(--line-soft)}
.icon-btn.danger:hover{color:var(--err);background:var(--err-bg)}

/* — status — */
.st{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border-radius:99px;padding:2px 9px;border:1px solid;white-space:nowrap}
.st i{height:5px;width:5px;border-radius:99px;background:currentColor}
.st-ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.st-warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.st-err{color:var(--err);background:var(--err-bg);border-color:var(--err-line)}
.st-mut{color:var(--ink-4);background:var(--bg);border-color:var(--line)}
.chip{font-family:"JetBrains Mono",monospace;font-size:11px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-2);white-space:nowrap}

/* — tables — */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-4);text-align:left;padding:8px 14px;border-bottom:1px solid var(--line-soft);background:#fbfbfd;white-space:nowrap}
.tbl td{padding:0 14px;height:40px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#fafbfd}
.tbl .r{text-align:right}
.cell-2l{line-height:1.3;padding:7px 14px}
.cell-2l .a{font-weight:600}
.cell-2l .b{font-size:11.5px;color:var(--ink-4);margin-top:2px}

/* — definition list — */
.dl{display:grid;grid-template-columns:190px minmax(0,1fr);font-size:13px}
.dl>dt{padding:9px 14px;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line-soft)}
.dl>dd{margin:0;padding:9px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.dl>dt:last-of-type,.dl>dd:last-of-type{border-bottom:none}
.dl .na{color:var(--ink-4)}
.dl .sub{font-size:11.5px;color:var(--ink-4);margin-top:2px}

/* — forms — */
.field{width:100%;height:30px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 9px;font-size:12.5px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s;box-sizing:border-box}
.field:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(231,88,0,.12);outline:none}
textarea.field{height:auto;padding:7px 9px}
.sel-wrap{position:relative;display:inline-block;width:100%}
.sel{appearance:none;padding-right:26px;cursor:pointer;background-image:none}
.sel-chev{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.cbox{appearance:none;width:14px;height:14px;flex:none;border:1px solid #cfd0d6;border-radius:4px;background-color:#fff;cursor:pointer;transition:.12s;vertical-align:-2px;margin:0}
.cbox:checked{background-color:var(--brand);border-color:var(--brand);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-size:10px;background-position:center;background-repeat:no-repeat}
.cbox:disabled{opacity:.35;cursor:not-allowed}
.chk-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.lab{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-4);margin-bottom:5px}

/* — glyphs / empty — */
.glyph{display:grid;place-items:center;height:30px;width:30px;flex:none;border-radius:8px}
.g-orange{background:var(--brand-bg);border:1px solid var(--brand-line);color:var(--brand-dark)}
.g-slate{background:var(--bg);border:1px solid var(--line);color:var(--ink-2)}
.g-violet{background:var(--violet-bg);border:1px solid var(--violet-line);color:var(--violet)}
.g-emerald{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.empty{padding:26px 16px;text-align:center}
.empty h4{margin:8px 0 2px;font-size:13px;font-weight:600;color:var(--ink-2)}
.empty p{margin:0;font-size:12px;color:var(--ink-4)}
.empty svg{margin:0 auto;color:var(--ink-4)}

/* — flash / notice banners — */
.flash{display:flex;align-items:flex-start;gap:10px;border:1px solid;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:500;margin-bottom:16px}
.flash svg{flex:none;margin-top:1px}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.flash-err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.flash-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.flash-info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}

/* button_to wraps its button in a form — keep it inline so icon
   buttons sit side by side in table cells and toolbars */
form.button_to{display:inline-block;margin:0}

/* — popover (dropdown menus) — */
.pop{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px -12px rgba(32,34,43,.35);overflow:hidden}
.pop-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 12px;font-size:12.5px;color:var(--ink-2);background:#fff;border:none;cursor:pointer}
.pop-item:hover{background:var(--bg)}

/* — workflow canvas — */
.canvas{position:relative;background:#fafbfc;overflow:hidden;background-image:linear-gradient(to right,rgba(32,34,43,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(32,34,43,.04) 1px,transparent 1px);background-size:28px 28px}
.node{position:absolute;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px -14px rgba(32,34,43,.35);font-size:12px;box-sizing:border-box}
.node-h{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line-soft);border-radius:10px 10px 0 0;font-weight:600;font-size:12.5px}
.node-b{padding:8px 10px;color:var(--ink-3);line-height:1.55}
.legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.legend .d{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:5px;vertical-align:1px}

/* ============================================================
   LEGACY OVERRIDES — remap the old Tailwind-based accent and
   surface classes to the new design tokens so the whole portal
   picks up the standard without rewriting every view at once.
   Remove these as pages get migrated to the classes above.
   ============================================================ */

/* old indigo accent → brand orange */
.text-indigo-600,.text-indigo-500,.text-purple-600{color:var(--brand-dark)}
.hover\:text-indigo-500:hover,.hover\:text-indigo-600:hover{color:#9a3712}
.bg-indigo-600,.bg-purple-600{background-color:var(--brand)}
.hover\:bg-indigo-500:hover,.hover\:bg-indigo-700:hover{background-color:var(--brand-dark)}
.focus\:outline-indigo-600:focus,.focus-visible\:outline-indigo-600:focus-visible{outline-color:var(--brand)}
.focus\:ring-indigo-600:focus,.focus\:ring-indigo-500:focus{--tw-ring-color:var(--brand)}
.focus\:border-indigo-500:focus{border-color:var(--brand)}
.text-indigo-600:focus{--tw-ring-color:var(--brand)}
.ring-indigo-600{--tw-ring-color:var(--brand)}
input[type="checkbox"].text-indigo-600:checked,input[type="radio"].text-indigo-600:checked{background-color:var(--brand);border-color:var(--brand)}

/* shadows become 1px borders (hierarchy from lines, not elevation) */
.shadow,.shadow-sm{box-shadow:0 0 0 1px var(--line)}
.shadow-lg,.shadow-xl{box-shadow:0 12px 32px -12px rgba(32,34,43,.35)}

/* canvas + neutral text tones */
.bg-gray-50{background-color:var(--bg)}
.bg-gray-100{background-color:var(--line-soft)}
.text-gray-900{color:var(--ink)}
.text-gray-700{color:var(--ink-2)}
.text-gray-500,.text-gray-600{color:var(--ink-3)}
.text-gray-400{color:var(--ink-4)}
.divide-gray-100>:not([hidden])~:not([hidden]),.divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--line-soft)}
.border-gray-200,.border-gray-300{border-color:var(--line)}
.ring-gray-300{--tw-ring-color:var(--line)}
.ring-black\/5{--tw-ring-color:var(--line)}

/* density: legacy type scale nudged to the 13px standard */
.text-sm{font-size:13px}
.text-xs{font-size:11.5px}