/* ============================================================================
 * Commit / Dilaxia UI Kit v0.1
 *
 * Design system lean "internal tool non landing page". Eventually extracted to
 * a standalone commit-ui-kit repo. Referenced by every template via
 * /static/css/ui-kit.css.
 *
 * Palette: marigold #F7A71B (brand Dilaxia, estratto dal logo ufficiale),
 * ink #33393C, paper #F7F6F3. Font stack: IBM Plex Sans/Mono/Serif.
 *
 * NOTA: il `tailwind.config` con la definizione dei colori extend vive inline
 * in `base.html` PRIMA del tag <script> della Tailwind CDN — non puo' stare
 * qui perche' il runtime Tailwind lo legge da window.tailwind.config.
 * ========================================================================== */

/* ---------- base ---------- */

html, body {
  background: #F7F6F3;
  color: #212A2E;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

.mono {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---------- hairlines ---------- */

.hair   { border-color: #E8E8E8; }
.hair-b { border-bottom: 1px solid #E8E8E8; }
.hair-t { border-top: 1px solid #E8E8E8; }
.hair-r { border-right: 1px solid #E8E8E8; }
.hair-l { border-left: 1px solid #E8E8E8; }

/* ---------- grid backdrop (opzionale, per pagine hero) ---------- */

.grid-bg {
  background-image:
    linear-gradient(to right, rgba(11, 13, 16, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 13, 16, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------- status chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.chip-ok    { background: #D1FAE5; color: #047857; }
.chip-run   { background: #F7A71B; color: #33393C; box-shadow: inset 0 -1px 0 rgba(51, 57, 60, .18); }
.chip-warn  { background: #FEF3C7; color: #B45309; }
.chip-err   { background: #FFE4E6; color: #BE123C; }
.chip-ghost { background: #F1F2F3; color: #4E5A60; }
.chip-brand { background: #FFEDE3; color: #B37500; }

/* ---------- status squares (indicatori puntuali) ---------- */

.sq {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 1px;
}

.sq-ok    { background: #10B981; }
.sq-run   { background: #33393C; animation: bl 1.2s ease-in-out infinite; }
.sq-warn  { background: #D97706; }
.sq-err   { background: #E11D48; }
.sq-idle  { background: #B4BBBF; }
.sq-brand { background: #F7A71B; }

@keyframes bl {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ---------- dense table ---------- */

table.dense th,
table.dense td {
  padding: 10px 14px;
  font-size: 13px;
}

table.dense th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4E5A60;
  background: #F7F6F3;
}

/* Default th alignment e' left, ma NON sovrascrivere le classi esplicite
   (text-right, text-center). Senza il :not lo specificity di table.dense th
   (0,0,1,1) batte le utility Tailwind (0,0,1,0). */
table.dense th:not([class*="text-"]) {
  text-align: left;
}

table.dense tbody tr:hover td {
  background: #FBFAF6;
}

/* ---------- KPI numerics ---------- */

.kpi {
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.kpi em {
  font-style: normal;
  color: #B4BBBF;
  font-size: 1rem;
  font-weight: 400;
}

.kpi-accent {
  position: relative;
  padding-bottom: 6px;
}

.kpi-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: #F7A71B;
  border-radius: 2px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 6px;
  transition: all .15s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: #F7A71B;
  color: #33393C;
  box-shadow: inset 0 -1px 0 rgba(51, 57, 60, .18), 0 1px 0 rgba(51, 57, 60, .06);
  font-weight: 600;
}

.btn-primary:hover { background: #FFB833; }

.btn-ghost {
  background: #FFFFFF;
  color: #3A4449;
  border: 1px solid #D9DCDE;
}

.btn-ghost:hover {
  background: #F7F6F3;
  border-color: #B4BBBF;
}

.btn-xs {
  padding: 4px 9px;
  font-size: 11.5px;
  border-radius: 4px;
}

.btn-brand {
  background: #F7A71B;
  color: #33393C;
  border: 1px solid #DB8E00;
}

.btn-brand:hover { background: #FFB833; }

.btn[disabled],
.btn[disabled]:hover {
  opacity: .5;
  cursor: not-allowed;
  background: #F1F2F3;
  color: #8E979C;
  box-shadow: none;
}

/* ---------- section tags ---------- */

.tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6B767C;
}

.tag-brand { color: #B37500; }

/* ---------- avatar + icon button ---------- */

.avatar-brand {
  background: #F7A71B;
  color: #33393C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: #8E979C;
  transition: all .15s;
  cursor: pointer;
}

.btn-icon:hover {
  background: #F1F2F3;
  color: #33393C;
}

/* ---------- sidebar nav items ---------- */

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #3A4449;
  text-decoration: none;
  cursor: pointer;
}

.nav-item:hover { background: #F1F2F3; }

.nav-item.active {
  background: #F7A71B;
  color: #33393C;
  font-weight: 600;
  position: relative;
  box-shadow: inset 0 -1px 0 rgba(51, 57, 60, .12);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #33393C;
  border-radius: 0 2px 2px 0;
}

.nav-section {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8E979C;
  padding: 0 10px;
}

/* ---------- utility ---------- */

.ascii {
  font-family: "IBM Plex Mono", monospace;
  color: #A8B0BF;
  font-size: 11px;
  letter-spacing: .2em;
}