/* ============================================================
   LEMONTECH product surface — shared shell across all 3 prototypes
   Built on top of the PraxisIQ design system tokens. Lemontech's
   actual brand uses a lemon/lime accent against a dark sidebar;
   we keep that vibe while staying inside the DS spacing/type scale.
   ============================================================ */
:root {
  /* Lemontech accent — fresh lemon-lime */
  --lt-lemon:        #C4E83C;
  --lt-lemon-dark:   #A8CC1E;
  --lt-lemon-deep:   #6B8C00;
  --lt-lemon-soft:   #F5FBD9;

  /* Product surface */
  --lt-panel:        #0F2027;  /* sidebar */
  --lt-panel-2:      #163039;
  --lt-panel-fg:     #D9E1E5;
  --lt-panel-mute:   #7C8B92;
  --lt-bg:           #F6F7F8;
  --lt-card:         #FFFFFF;

  --lt-radius:       10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--lt-bg);
  color: var(--ciq-ink-700);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ───────── App shell ───────── */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

/* Sidebar */
.sb {
  background: linear-gradient(180deg, var(--lt-panel) 0%, var(--lt-panel-2) 100%);
  color: var(--lt-panel-fg);
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.sb-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 14px; }
.sb-mark { height: 30px; width: auto; flex-shrink: 0; display: block; }
.sb-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--lt-lemon); color: var(--lt-panel);
  display: grid; place-items: center;
  font: 700 14px/1 var(--font-sans); letter-spacing: -0.02em;
}
.sb-wm { font: 700 16px/1 var(--font-sans); letter-spacing: -0.012em; color: #fff; }
.sb-wm span { color: var(--lt-lemon); }
.sb-product {
  font: 500 9px/1 var(--font-mono); color: var(--lt-panel-mute);
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 4px;
}

/* Top-right sign-out chip available in prototype top bars */
.tb-signout {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ciq-ink-500); padding: 7px 10px; border-radius: 8px;
  background: var(--lt-bg); border: 1px solid var(--divider); cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.tb-signout:hover { background: var(--ciq-ink-025); color: var(--ciq-ink-900); }

.sb-section { font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lt-panel-mute); padding: 14px 10px 6px; }

.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font: 500 13px/1 var(--font-sans); color: var(--lt-panel-fg);
  cursor: pointer; user-select: none;
  transition: background 150ms ease;
}
.sb-item:hover { background: rgba(255,255,255,0.05); }
.sb-item.active { background: rgba(196,232,60,0.14); color: #fff; }
.sb-item.active .sb-ico { color: var(--lt-lemon); }
.sb-item .sb-ico {
  width: 16px; height: 16px; display: grid; place-items: center;
  color: var(--lt-panel-mute);
}
.sb-item .badge {
  margin-left: auto;
  font: 600 10px/1 var(--font-mono); letter-spacing: 0.04em;
  background: var(--lt-lemon); color: var(--lt-panel);
  padding: 3px 6px; border-radius: 999px;
}
.sb-item .count { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--lt-panel-mute); }

.sb-user {
  margin-top: auto; display: flex; gap: 10px; align-items: center;
  padding: 12px 10px; border-top: 1px solid rgba(255,255,255,0.06);
}
.sb-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, #C4E83C, #6B8C00); color: var(--lt-panel);
  display: grid; place-items: center; font: 700 11px/1 var(--font-sans);
}
.sb-user-name { font: 600 12px/1.2 var(--font-sans); color: #fff; }
.sb-user-firm { font: 400 11px/1.2 var(--font-sans); color: var(--lt-panel-mute); margin-top: 2px; }

/* Main area */
.main { display: flex; flex-direction: column; min-width: 0; }

/* Top bar */
.tb {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px; background: #fff;
  border-bottom: 1px solid var(--divider);
  min-height: 60px;
}
.tb h1 { font: 600 16px/1.2 var(--font-sans); color: var(--ciq-ink-900); margin: 0; }
.tb .crumb { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ciq-ink-400); margin-bottom: 4px; }
.tb-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.tb-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--lt-bg); padding: 7px 12px; border-radius: 8px;
  width: 260px; color: var(--ciq-ink-500);
  font: 400 13px/1 var(--font-sans);
}
.tb-bell {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; background: var(--lt-bg);
  color: var(--ciq-ink-700); position: relative; cursor: pointer;
}
.tb-bell::after {
  content: ""; position: absolute; top: 8px; right: 9px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--ciq-red-500);
  border: 1.5px solid var(--lt-bg);
}

/* Page area */
.page { padding: 28px 32px 56px; flex: 1; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.page-head h2 { font: 700 22px/1.2 var(--font-sans); color: var(--ciq-ink-900); margin: 0; letter-spacing: -0.012em; }
.page-head p { font: 400 13px/1.5 var(--font-sans); color: var(--ciq-ink-500); margin: 6px 0 0; max-width: 60ch; }

/* ───────── Generic components ───────── */
.card {
  background: var(--lt-card);
  border: 1px solid var(--hairline);
  border-radius: var(--lt-radius);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 18px 20px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--font-sans);
  padding: 9px 14px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn-primary { background: var(--lt-lemon); color: var(--lt-panel); border-color: var(--lt-lemon-dark); }
.btn-primary:hover { background: var(--lt-lemon-dark); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--ciq-ink-100); color: var(--ciq-ink-400); border-color: var(--ciq-ink-100); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ciq-ink-700); border-color: var(--divider); }
.btn-ghost:hover { background: var(--lt-bg); }
.btn-dark { background: var(--lt-panel); color: #fff; border-color: var(--lt-panel); }
.btn-dark:hover { background: #1B3A47; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font: 600 11px/1.4 var(--font-sans); letter-spacing: 0.01em;
}
.pill.green  { background: var(--ciq-green-050);  color: var(--ciq-green-700); }
.pill.red    { background: var(--ciq-red-050);    color: var(--ciq-red-700); }
.pill.amber  { background: var(--ciq-amber-050);  color: var(--ciq-amber-700); }
.pill.blue   { background: var(--ciq-blue-050);   color: var(--ciq-blue-700); }
.pill.violet { background: var(--ciq-violet-050); color: var(--ciq-violet-700); }
.pill.grey   { background: var(--ciq-ink-025);    color: var(--ciq-ink-700); }
.pill.lemon  { background: var(--lt-lemon-soft);  color: var(--lt-lemon-deep); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.eyebrow { font: 500 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ciq-ink-500); }

table.lt {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font: 400 13px/1.4 var(--font-sans); color: var(--ciq-ink-700);
}
table.lt thead th {
  text-align: left; padding: 10px 14px;
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ciq-ink-500);
  background: var(--lt-bg); border-bottom: 1px solid var(--divider);
}
table.lt tbody td { padding: 12px 14px; border-bottom: 1px solid var(--divider); vertical-align: top; }
table.lt tbody tr:hover { background: var(--ciq-ink-012); }
table.lt tbody tr:last-child td { border-bottom: 0; }

/* Back-to-hub chip */
.back {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lt-panel-mute); text-decoration: none;
  padding: 8px 10px; border-radius: 6px; transition: background 150ms ease;
}
.back:hover { background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; }

/* "Powered by LIA" badge */
.lia-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-mono); letter-spacing: 0.06em;
  padding: 5px 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(196,232,60,0.18), rgba(107,140,0,0.12));
  border: 1px solid rgba(196,232,60,0.45);
  color: var(--lt-lemon-deep);
}
.lia-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--lt-lemon-dark); box-shadow: 0 0 0 3px rgba(196,232,60,0.25); }
.lia-dot.live { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(196,232,60,0.25); } 50% { box-shadow: 0 0 0 6px rgba(196,232,60,0.08); } }

/* Demo banner */
.demo-strip {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  background: var(--lt-panel); color: #D9E1E5;
  padding: 8px 16px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.demo-strip .lia-dot { background: var(--lt-lemon); }