/* ThinkOne Cloud Operations — design tokens & component system
   Grotesk UI + mono data. Light is default; .t1-dark overrides for the
   command-center theme. All color is token-driven so accent is swappable. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* brand + status */
  --accent:        #1B4DDB;
  --accent-weak:   #E7ECFB;
  --ok:            #178A52;
  --ok-weak:       #E0F1E8;
  --warn:          #B97309;
  --warn-weak:     #F8EEDB;
  --crit:          #CE3434;
  --crit-weak:     #FBE6E5;
  --info:          var(--accent);

  /* light neutrals (warm-cool neutral) */
  --bg:        #F4F5F3;
  --surface:   #FFFFFF;
  --surface-2: #FAFAF8;
  --border:    #E5E6E2;
  --border-2:  #EFEFEC;
  --ink:       #15171A;
  --ink-2:     #41454C;
  --muted:     #71767E;
  --faint:     #9AA0A8;

  --shadow-sm: 0 1px 2px rgba(20,23,26,.06), 0 1px 3px rgba(20,23,26,.05);
  --shadow-md: 0 2px 6px rgba(20,23,26,.06), 0 8px 24px rgba(20,23,26,.06);

  --r-sm: 6px;  --r-md: 9px;  --r-lg: 14px;
  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.t1-dark {
  --accent:        #5B82F2;
  --accent-weak:   #1C2840;
  --ok:            #36BE7C;
  --ok-weak:       #11271D;
  --warn:          #E0A23C;
  --warn-weak:     #2C2413;
  --crit:          #F0625E;
  --crit-weak:     #2E1817;

  --bg:        #0D0F12;
  --surface:   #16181D;
  --surface-2: #1B1E24;
  --border:    #282C34;
  --border-2:  #21242B;
  --ink:       #F1F3F5;
  --ink-2:     #C2C7CF;
  --muted:     #878D98;
  --faint:     #5E6470;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 24px rgba(0,0,0,.5);
}

/* ───────── base ───────── */
.t1 { font-family: var(--sans); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  box-sizing: border-box; }
.t1 *, .t1 *::before, .t1 *::after { box-sizing: border-box; }
.t1 ::selection { background: var(--accent-weak); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ───────── status pills ───────── */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px;
  padding: 0 9px 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pill--online   { color: var(--ok);     background: var(--ok-weak); }
.pill--resolved { color: var(--ok);     background: var(--ok-weak); }
.pill--progress { color: var(--accent); background: var(--accent-weak); }
.pill--waiting  { color: var(--warn);   background: var(--warn-weak); }
.pill--critical { color: var(--crit);   background: var(--crit-weak); }
.pill--offline  { color: var(--muted);  background: color-mix(in srgb, var(--muted) 14%, transparent); }
.pill--solid-crit { color: #fff; background: var(--crit); }
.pill .dot--pulse { animation: t1pulse 1.6s ease-in-out infinite; }
@keyframes t1pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* priority tag */
.prio { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.prio--p1 { color: var(--crit); background: var(--crit-weak); }
.prio--p2 { color: var(--warn); background: var(--warn-weak); }
.prio--p3 { color: var(--muted); background: color-mix(in srgb, var(--muted) 13%, transparent); }

/* ───────── buttons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .04s; }
.btn:active { transform: translateY(.5px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--ghost   { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn--quiet   { background: transparent; color: var(--ink-2); }
.btn--danger  { background: var(--crit); color: #fff; }
.btn--ok      { background: var(--ok); color: #fff; }
.btn--block   { width: 100%; }
.btn--lg      { height: 50px; font-size: 15.5px; border-radius: var(--r-md); }
.btn--sm      { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn .ico { width: 16px; height: 16px; }

/* ───────── card / surface ───────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); }
.card-pad { padding: 16px; }
.sect-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.hr { height: 1px; background: var(--border); border: 0; margin: 0; }

/* chips (quick actions / filters) */
.chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: border-color .12s, background .12s; }
.chip[data-on="1"] { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.chip .ck { width: 16px; height: 16px; }

/* inputs */
.field { width: 100%; height: 44px; padding: 0 13px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; }
.field::placeholder { color: var(--faint); }
.field--area { height: auto; padding: 11px 13px; min-height: 84px; resize: none; line-height: 1.5; }

/* avatar */
.avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex: 0 0 auto;
  font-family: var(--mono); letter-spacing: -.02em; }

/* image placeholder (drop-zone style) */
.imgph { position: relative; background:
  repeating-linear-gradient(135deg, var(--surface-2) 0 9px, transparent 9px 18px);
  border: 1px dashed var(--border); border-radius: var(--r-sm); display: flex;
  align-items: center; justify-content: center; overflow: hidden; }
.imgph span { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .02em;
  text-transform: uppercase; }

/* meter bar */
.meter { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }