/* ============================================================
   Control Center — make the admin console visually identical to
   the customer app (js/app.jsx styled by css/lite.css).

   Mirrors lite.css's real app chrome:
     .app  (230px dark sidebar + light content grid)
     .side (var(--ink-900) sidebar, mint active nav)
     .topbar / .content (var(--app-bg) surfaces, Newsreader titles)

   Loaded AFTER hub.css so these win. This is the LIGHT / default
   theme; hub-theme.css layers the html[data-theme="dark"] overrides.
   ============================================================ */

.uj-rail { display: none; }   /* single grouped sidebar; brand lives in the sidebar header */

/* ------------------------------------------------------------
   SIDEBAR  →  lite.css  .side
   .side{background:var(--ink-900);color:#cdd8cf;display:flex;
         flex-direction:column;padding:18px 12px;
         position:sticky;top:0;height:100vh}   width 230px via .app grid
   ------------------------------------------------------------ */
.uj-side {
  width: 230px;
  flex: 0 0 230px;
  background: var(--ink-900);
  color: #cdd8cf;
  border-right: 0;
  padding: 18px 12px;
}

/* brand header  →  .side .brand{color:#fff;padding:6px 10px 18px}
   made to read like the app's serif brand mark */
.uj-side-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
  border-bottom: 0;
}
.uj-side-hd h1 {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* leaf logo tile — subtle glass square, like a compact app brand mark */
.uj-side-hd .uj-side-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0;
}
.uj-side-hd .uj-side-logo img { width: 20px; height: 20px; object-fit: contain; }
/* "open board" external link — subtle glass button, tucked to the right */
.uj-side-hd .ext {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.uj-side-hd .ext:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* nav list  →  .side nav{gap:2px} */
.uj-nav { flex: 1; overflow: auto; padding: 0 0 8px; }

/* group labels  →  .side nav .nav-group */
.uj-sec-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  padding: 14px 12px 4px;
}

/* nav buttons  →  .side nav button */
.uj-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #aebcb0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  transition: .12s;
}
.uj-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.uj-item.active { background: var(--mint-500); color: #fff; font-weight: 600; box-shadow: 0 6px 16px rgba(42, 136, 98, .26); }
/* gold accent bar on the active item — mirrors .side nav button.on::before */
.uj-item.active::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--gold); }
.uj-item.active .ic, .uj-item.active .lb { color: #fff; }
.uj-item .ic { color: #7f958a; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; opacity: .92; }
.uj-item:hover .ic { opacity: 1; }
.uj-item.active .ic { opacity: 1; }
/* count chip on a nav item */
.uj-item .ct {
  background: rgba(255, 255, 255, .14);
  color: #dff2e9;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.uj-item.active .ct { background: rgba(255, 255, 255, .22); color: #fff; }

/* sidebar footer / who row  →  .side .who */
.uj-side .uj-side-ft,
.uj-side .who,
.uj-side .uj-foot {
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .55);
}
.uj-side .who .em { color: #fff; font-weight: 600; }
.uj-side .who .mode { color: #8aa092; }

/* ------------------------------------------------------------
   LIGHT SIDEBAR variant (html[data-side="light"], light theme only)
   → mirrors the app's cream sidebar option (.side.side-light).
   ------------------------------------------------------------ */
html[data-theme="light"][data-side="light"] .uj-side { background: var(--app-bg); color: #5B6B62; border-right: 1px solid var(--line); }
html[data-theme="light"][data-side="light"] .uj-side-hd h1 { color: var(--ink-900); }
html[data-theme="light"][data-side="light"] .uj-side-hd .uj-side-logo { background: var(--tint); }
html[data-theme="light"][data-side="light"] .uj-side-hd .ext { border-color: var(--line); background: var(--surface); color: var(--ink-400); }
html[data-theme="light"][data-side="light"] .uj-side-hd .ext:hover { background: var(--tint); color: var(--ink-700); }
html[data-theme="light"][data-side="light"] .uj-sec-label { color: rgba(0, 0, 0, .4); }
html[data-theme="light"][data-side="light"] .uj-item { color: #5B6B62; }
html[data-theme="light"][data-side="light"] .uj-item .ic { color: #8a9a90; }
html[data-theme="light"][data-side="light"] .uj-item:hover { background: #E6D6AE; color: var(--ink-900); }
html[data-theme="light"][data-side="light"] .uj-item:hover .ic { color: var(--ink-700); }
html[data-theme="light"][data-side="light"] .uj-item.active { background: var(--mint-500); color: #fff; }
html[data-theme="light"][data-side="light"] .uj-item.active .ic, html[data-theme="light"][data-side="light"] .uj-item.active .lb { color: #fff; }
html[data-theme="light"][data-side="light"] .uj-item .ct { background: rgba(0, 0, 0, .08); color: var(--ink-600); }
html[data-theme="light"][data-side="light"] .uj-side .uj-foot,
html[data-theme="light"][data-side="light"] .uj-side .who { border-top-color: rgba(0, 0, 0, .08); color: var(--ink-500); }

/* ------------------------------------------------------------
   TOP BAR  →  lite.css  .topbar
   .topbar{padding:16px 26px;border-bottom:1px solid var(--line);
           background:var(--app-bg);position:sticky;top:0;z-index:20}
   ------------------------------------------------------------ */
.uj-top {
  height: auto;
  min-height: 61px;
  flex: 0 0 auto;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--app-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* title  →  .topbar h1 (Newsreader serif, 28px) */
.uj-top h2 {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-900);
}
@media (max-width: 640px) { .uj-top h2 { font-size: 22px; } }

/* ------------------------------------------------------------
   CONTENT  →  lite.css  .content
   .content{padding:24px 26px;background:var(--app-bg)}
   ------------------------------------------------------------ */
.uj-content { background: var(--app-bg); padding: 24px 26px 60px; }
.uj-content.narrow { max-width: 900px; }

/* ------------------------------------------------------------
   BUTTONS / SEARCH  →  lite.css  .btn language (mint primary)
   ------------------------------------------------------------ */
.uj-btn {
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  color: var(--ink-800);
  background: var(--surface);
  height: 34px;
  font-weight: 600;
}
.uj-btn:hover { border-color: var(--mint-400); background: var(--mint-50); }
.uj-btn.dark { background: var(--mint-500); border-color: var(--mint-500); color: #fff; }
.uj-btn.dark:hover { background: var(--mint-600); border-color: var(--mint-600); }
.uj-btn.ghost { border-color: transparent; background: transparent; }
.uj-btn.ghost:hover { background: var(--ink-100); }
.uj-search {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  height: 34px;
}

/* ------------------------------------------------------------
   CARDS / STATS / TABLES  →  lite.css  .panel language
   ------------------------------------------------------------ */
.uj-card, .uj-stat {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.uj-table th { color: var(--ink-500); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.uj-table td { border-bottom: 1px solid var(--line); }
.uj-table tr:hover td { background: var(--surface-2); }
.uj-table select { border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; font-size: 12.5px; background: var(--surface); }
.uj-empty { color: var(--ink-500); }

/* filter chips (feedback statuses) */
.uj-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  background: var(--surface);
  cursor: pointer;
}
.uj-chip:hover { background: var(--surface-2); }
.uj-chip.on { background: var(--mint-500); border-color: var(--mint-500); color: #fff; }

/* the main-app KPI/panel classes rendered inside the hub content
   (their look comes from lite.css + hub-lux.css — leave untouched,
   just make sure they sit on the app-bg content surface) */
.uj-content .kpi { margin: 0; }
.uj-content .panel { margin: 0; }

/* real service logos + monogram fallback (Control Center integrations) */
.cc-logo { border-radius: 6px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); flex-shrink: 0; display: inline-block; }
.cc-logo-mono { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: var(--mint-700); background: var(--tint); }

/* theme toggle button (sun/moon) */
.cc-theme-btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* section headings that carry an inline logo */
.uj-content .panel .head h3 { display: inline-flex; align-items: center; gap: 8px; }

/* embedded finalized Product Hub board (iframe) — fills the content area */
.uj-content.cc-embed-wrap { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.cc-embed-box { flex: 1; display: flex; flex-direction: column; min-height: calc(100vh - 61px); }
.cc-embed-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface); flex-shrink: 0; }
.cc-embed { flex: 1; width: 100%; border: 0; display: block; background: var(--app-bg); min-height: 70vh; }