/* ============================================================
   FAVORED · INTERNAL TOOLS · COMPONENTS
   Component primitives for tool landing pages.
   Depends on tokens.css (must load first).

   Conventions:
   · Class names are flat: .btn, .card, .kpi, .badge.
   · Modifiers are dashed:  .btn--primary, .badge--success.
   · Composition over nesting. Pages combine these.
   ============================================================ */

/* ============================================================
   1. APP SHELL
   The iframe is rendered inside Twenty's chrome — there is no
   menu bar / tool switcher inside the iframe. The page starts
   directly with the tabs row (or with .page if the tool has no
   sub-pages). Twenty owns the global wrapper.
   ============================================================ */
.app{
  min-height:100vh;
  display:flex; flex-direction:column;
}

/* Tabs row — chunky filled-pill segmented control, not an underline nav.
   Sits as its own capsule rather than a full-width bar. */
.tabs{
  display:flex; align-items:center; gap:2px;
  width:fit-content; max-width:calc(100% - (2 * var(--page-pad-x)));
  padding:4px;
  margin:var(--s-6) var(--page-pad-x) 0;
  background:var(--bg-subtle);
  border-radius:var(--r-pill);
  overflow-x:auto;
}
.tab{
  display:inline-flex; align-items:center; gap:var(--s-2);
  flex-shrink:0;
  height:calc(var(--tabs-h) - 8px);
  padding:0 var(--s-5);
  border-radius:var(--r-pill);
  font-family:var(--font-sans);
  font-weight:var(--wt-semi);
  font-size:var(--t-sm);
  color:var(--ink-3);
  transition:color var(--dur-sm) var(--ease-standard), background var(--dur-sm) var(--ease-standard);
}
.tab:hover{ color:var(--ink); }
.tab--active{ color:var(--fg-inverse); background:var(--ink); }
.tab__count{
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  color:var(--ink-4);
  background:var(--bg-raised);
  padding:2px 6px;
  border-radius:var(--r-sm);
}
.tab--active .tab__count{ color:var(--fg-inverse-muted); background:rgba(255,255,255,.12); }

/* ============================================================
   2. PAGE — the content region below the shell
   ============================================================ */
.page{
  flex:1;
  padding:var(--page-pad-y) var(--page-pad-x);
  /* max-width:var(--page-max-w); — temporarily disabled to test unbounded width */
  width:100%;
  margin:0 auto;
}

.page__header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-6);
  margin-bottom:var(--s-8);
}
.page__title{
  font-family:var(--font-sans);
  font-weight:var(--wt-bold);
  font-size:var(--t-3xl);
  line-height:var(--lh-snug);
  letter-spacing:var(--tr-tight);
  color:var(--ink);
  margin:0;
}
.page__subtitle{
  font-family:var(--font-sans);
  font-size:var(--t-md);
  color:var(--ink-3);
  margin:var(--s-2) 0 0;
  max-width:60ch;
}
.page__actions{
  display:flex; align-items:center; gap:var(--s-3);
}

/* Eyebrow above the title — small caption, plain case */
.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  font-weight:var(--wt-med);
  color:var(--ink-4);
  margin:0 0 var(--s-3);
}
.eyebrow--accent{ color:var(--accent); }

/* Section — divides a page into vertical chunks */
.section{ margin-bottom:var(--section-gap); }
.section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-5);
  padding-bottom:var(--s-3);
  border-bottom:var(--border);
}
.section__title{
  font-family:var(--font-sans);
  font-weight:var(--wt-semi);
  font-size:var(--t-xl);
  letter-spacing:var(--tr-snug);
  color:var(--ink);
  margin:0;
}
.section__meta{
  font-size:var(--t-xs);
  color:var(--ink-4);
}

/* ============================================================
   3. CARD — the workhorse surface
   ============================================================ */
.card{
  background:var(--bg-raised);
  border:var(--border);
  border-radius:var(--r-lg);
  padding:var(--s-6);
}
.card--flush{ padding:0; overflow:hidden; }
.card--inset{ background:var(--bg-subtle); border-color:transparent; }
.card--ink{ background:var(--bg-inverse); color:var(--fg-inverse); border-color:transparent; }
.card--accent{
  background:var(--accent);
  color:var(--accent-fg);
  border-color:transparent;
}

.card__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-3);
  margin-bottom:var(--s-4);
}
.card__title{
  font-family:var(--font-sans);
  font-weight:var(--wt-semi);
  font-size:var(--t-md);
  letter-spacing:var(--tr-snug);
  margin:0;
}
.card__meta{
  font-size:var(--t-xs);
  color:var(--ink-4);
}

/* ============================================================
   4. KPI — metric tile
   ============================================================ */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--s-4);
}

.kpi{
  background:var(--bg-raised);
  border:var(--border);
  border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-6);
  display:flex; flex-direction:column; gap:var(--s-2);
  position:relative;
  overflow:hidden;
}
.kpi__label{
  font-size:var(--t-xs);
  font-weight:var(--wt-med);
  color:var(--ink-4);
}
.kpi__value{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--t-3xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-tight);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kpi__delta{
  display:inline-flex; align-items:center; gap:var(--s-1);
  font-family:var(--font-mono);
  font-size:var(--t-sm);
  font-weight:var(--wt-med);
}
.kpi__delta--up   { color:var(--success); }
.kpi__delta--down { color:var(--danger); }
.kpi__delta::before{
  content:""; width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
}
.kpi__delta--up::before  { border-bottom:6px solid currentColor; }
.kpi__delta--down::before{ border-top:6px solid currentColor; }

/* Service-line tag — left edge stripe in a tag color */
.kpi--tagged{ padding-left:calc(var(--s-6) + 4px); }
.kpi--tagged::before{
  content:""; position:absolute; left:0; top:var(--s-5); bottom:var(--s-5);
  width:3px;
  background:var(--tag, var(--accent));
  border-radius:0 var(--r-pill) var(--r-pill) 0;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2);
  height:36px;
  padding:0 var(--s-4);
  border:var(--border-2);
  border-radius:var(--r-md);
  background:var(--bg-raised);
  font-family:var(--font-sans);
  font-weight:var(--wt-med);
  font-size:var(--t-sm);
  color:var(--ink);
  cursor:pointer;
  transition:background var(--dur-sm) var(--ease-standard),
             border-color var(--dur-sm) var(--ease-standard),
             transform var(--dur-xs) var(--ease-standard);
  white-space:nowrap;
}
.btn:hover{ border-color:var(--ink-4); }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn--disabled{ opacity:.5; pointer-events:none; }

.btn--primary{
  background:var(--accent);
  color:var(--accent-fg);
  border-color:transparent;
}
.btn--primary:hover{ background:var(--accent-hot); border-color:transparent; }

.btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--ink-2);
}
.btn--ghost:hover{ background:var(--bg-subtle); }

.btn--ink{
  background:var(--ink);
  color:var(--fg-inverse);
  border-color:transparent;
}
.btn--ink:hover{ background:var(--ink-2); }

.btn--danger{
  background:var(--danger);
  color:#fff;
  border-color:transparent;
}
.btn--danger:hover{ background:#a3162f; }

.btn--sm{ height:28px; padding:0 var(--s-3); font-size:var(--t-xs); }
.btn--lg{ height:44px; padding:0 var(--s-5); font-size:var(--t-md); }

.btn .icon{ width:14px; height:14px; }

/* Ghost button for use on dark/ink surfaces (masthead, .card--ink). */
.btn--inverse{
  background:transparent;
  border-color:var(--line-inverse);
  color:var(--fg-inverse);
}
.btn--inverse:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }

/* ============================================================
   6. BADGES & PILLS
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:var(--s-1);
  height:20px;
  padding:0 var(--s-2);
  border-radius:var(--r-sm);
  background:var(--bg-subtle);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  font-weight:var(--wt-med);
}
.badge--success{ background:var(--success-soft); color:var(--success); }
.badge--warning{ background:var(--warning-soft); color:var(--warning); }
.badge--danger { background:var(--danger-soft);  color:var(--danger);  }
.badge--info   { background:var(--info-soft);    color:var(--info);    }
.badge--accent { background:var(--accent-soft);  color:var(--accent-soft-fg); }
.badge--ink    { background:var(--ink); color:var(--fg-inverse); }

.badge--dot::before{
  content:""; width:6px; height:6px; border-radius:var(--r-full);
  background:currentColor;
}

/* Live indicator — pulsing dot */
.badge--live{
  background:var(--accent); color:#fff;
  animation:badgeLivePulse 1.6s ease-out infinite;
}
.badge--live::before{
  content:""; width:6px; height:6px; border-radius:var(--r-full);
  background:#fff;
}
@keyframes badgeLivePulse{
  0%   { box-shadow:0 0 0 0   rgba(255,46,85,.5); }
  70%  { box-shadow:0 0 0 8px rgba(255,46,85,0);  }
  100% { box-shadow:0 0 0 0   rgba(255,46,85,0);  }
}

/* ============================================================
   7. INPUTS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:var(--s-2); }
.field__label{
  font-family:var(--font-sans);
  font-weight:var(--wt-med);
  font-size:var(--t-sm);
  color:var(--ink-2);
}
.field__hint{
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  color:var(--ink-4);
}
.field__error{
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  color:var(--danger);
}

.input,.select,.textarea{
  display:block; width:100%;
  height:36px;
  padding:0 var(--s-3);
  border:var(--border-2);
  border-radius:var(--r-md);
  background:var(--bg-raised);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  color:var(--ink);
  transition:border-color var(--dur-sm) var(--ease-standard);
}
.textarea{ height:auto; padding:var(--s-3); min-height:80px; line-height:var(--lh-normal); resize:vertical; }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--ink-4); }
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--sh-focus);
}
.input::placeholder,.textarea::placeholder{ color:var(--ink-5); }

.input--mono{ font-family:var(--font-mono); }

/* Checkbox + radio — square-ish, ink-toned */
.check,.radio{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px;
  border:1.5px solid var(--ink-4);
  background:var(--bg-raised);
  cursor:pointer;
  display:inline-block; vertical-align:middle;
  transition:background var(--dur-xs) var(--ease-standard), border-color var(--dur-xs) var(--ease-standard);
}
.check{ border-radius:var(--r-xs); }
.radio{ border-radius:var(--r-full); }
.check:checked,.radio:checked{ background:var(--accent); border-color:var(--accent); }
.check:checked::after{
  content:""; display:block;
  width:5px; height:9px;
  margin:1px auto;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.radio:checked::after{
  content:""; display:block;
  width:6px; height:6px; margin:3px auto;
  background:#fff; border-radius:var(--r-full);
}

/* ============================================================
   8. TABLE
   ============================================================ */
.table-wrap{
  border:var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--bg-raised);
}
.table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  font-size:var(--t-sm);
}
.table th{
  text-align:left;
  padding:var(--s-3) var(--s-5);
  background:var(--bg-subtle);
  font-weight:var(--wt-semi);
  font-size:var(--t-xs);
  color:var(--ink-3);
  border-bottom:var(--border);
}
.table td{
  padding:var(--s-3) var(--s-5);
  border-bottom:var(--border);
  color:var(--ink-2);
  vertical-align:middle;
}
.table tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:var(--bg-subtle); }
.table .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }

/* ============================================================
   9. EMPTY STATE
   ============================================================ */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:var(--s-11) var(--s-6);
  border:1px dashed var(--line-2);
  border-radius:var(--r-lg);
  background:var(--bg);
}
.empty__title{
  font-family:var(--font-sans);
  font-weight:var(--wt-semi);
  font-size:var(--t-lg);
  color:var(--ink);
  margin:var(--s-3) 0 var(--s-2);
}
.empty__body{
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  color:var(--ink-3);
  max-width:42ch;
  margin:0 auto var(--s-5);
}
/* When either is the last piece of content (no button/action after it),
   drop its trailing margin so flex centering isn't thrown off-balance. */
.empty__title:last-child,
.empty__body:last-child{ margin-bottom:0; }

/* ============================================================
   10. TOAST / BANNER
   ============================================================ */
.banner{
  display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-radius:var(--r-md);
  background:var(--bg-subtle);
  border:var(--border);
  font-size:var(--t-sm);
  color:var(--ink-2);
}
.banner--info   { background:var(--info-soft);    border-color:transparent; color:var(--info);    }
.banner--success{ background:var(--success-soft); border-color:transparent; color:var(--success); }
.banner--warning{ background:var(--warning-soft); border-color:transparent; color:#7a4f0e; }
.banner--danger { background:var(--danger-soft);  border-color:transparent; color:var(--danger);  }

/* ============================================================
   11. UTILITIES
   ============================================================ */
.u-mono   { font-family:var(--font-mono); }
.u-tabular{ font-variant-numeric:tabular-nums; }
.u-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-cluster{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }
.u-stack-2{ display:flex; flex-direction:column; gap:var(--s-2); }
.u-stack-4{ display:flex; flex-direction:column; gap:var(--s-4); }
.u-stack-6{ display:flex; flex-direction:column; gap:var(--s-6); }
.u-row    { display:flex; align-items:center; gap:var(--s-3); }
.u-spacer { flex:1; }
.u-divider{ height:1px; background:var(--line); margin:var(--s-5) 0; }

/* Hue tag — inline color chip used in legends */
.dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:var(--r-full);
  background:var(--tag, var(--accent));
}

/* Brand dot — the wordmark's full stop, reprised as inline punctuation.
   Sized in em so it scales with whatever text it closes out. */
.brand-dot{
  display:inline-block;
  width:0.26em; height:0.26em;
  min-width:5px; min-height:5px;
  border-radius:var(--r-full);
  background:var(--accent);
  margin-left:0.22em;
  vertical-align:middle;
  flex-shrink:0;
}

/* ============================================================
   12. STATLINE — simple metric row. No cards, no boxes: a plain
   hairline top/bottom, thin dividers between items.
   ============================================================ */
.statline{
  display:flex; flex-wrap:wrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.statline__item{
  flex:1 1 150px;
  padding:var(--s-5) var(--s-6);
  border-left:1px solid var(--line);
}
.statline__item:first-child{ border-left:0; }
.statline__label{
  font-size:var(--t-xs); font-weight:var(--wt-med);
  color:var(--ink-4);
  margin-bottom:var(--s-2);
}
.statline__value{
  font-family:var(--font-display);
  font-weight:var(--wt-bold);
  font-size:var(--t-2xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--tr-tight);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.statline__value--accent{ color:var(--accent); }
@media (max-width: 700px){
  .statline__item{ flex:1 1 45%; border-left:1px solid var(--line); }
  .statline__item:nth-child(odd){ border-left:0; }
}