/* ==========================================================================
   console.app.crewbyte.io — internal super-admin.

   Different job, different rules. The operator app is light, roomy and
   thumb-first because it's used mid-service on a phone. The console is dark
   and dense because it's used on a desktop by someone who needs to see forty
   organisations at once and spot the one that's broken.
   ========================================================================== */

body.console {
  background: var(--ink-900);
  color: rgba(248, 247, 244, .74);
  font-size: 14px;
}

.console h1, .console h2, .console h3, .console h4 { color: #F8F7F4; }
.console a { color: var(--accent-on-dark); }
.console hr { border-color: var(--line-dark); }

/* ---------------------------------------------------------------- shell */
.c-shell { min-height: 100vh; }
@media (min-width: 900px) {
  .c-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); align-items: start; }
}

.c-rail {
  background: #0B0D11;
  border-right: 1px solid var(--line-dark);
  padding: var(--s5) var(--s3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: none;
  flex-direction: column;
}
@media (min-width: 900px) { .c-rail { display: flex; } }

.c-rail__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 var(--s2) var(--s5);
  color: #F8F7F4;
  font-weight: 700;
  letter-spacing: -.028em;
  text-decoration: none;
  font-size: .9375rem;
}
.c-rail__brand small {
  display: block;
  font-size: .5625rem;
  font-weight: 660;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warn-on-dark);
  margin-top: 1px;
}

.c-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px var(--s3);
  border-radius: var(--r-sm);
  color: rgba(248, 247, 244, .58);
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 540;
}
.c-link:hover { background: rgba(255, 255, 255, .05); color: #F8F7F4; }
.c-link.is-active {
  background: rgba(18, 135, 111, .18);
  color: #F8F7F4;
  box-shadow: inset 2px 0 0 var(--accent-on-dark);
}
.c-link__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 640;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}
.c-rail__section {
  font-size: .5625rem;
  font-weight: 680;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: var(--s5) var(--s3) var(--s2);
}
.c-rail__foot { margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--line-dark); }

/* -------------------------------------------------------------- top bar */
.c-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 13, 17, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.c-bar__env {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 660;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: rgba(169, 108, 18, .22);
  color: var(--warn-on-dark);
  border: 1px solid rgba(226, 163, 63, .3);
}
.c-bar__env--prod { background: rgba(178, 58, 44, .2); color: var(--bad-on-dark); border-color: rgba(228, 104, 90, .3); }

.c-main { padding: var(--s6) var(--s5) var(--s10); min-width: 0; }
@media (min-width: 900px) { .c-main { padding: var(--s6) var(--s7) var(--s10); } }

.c-head { margin-bottom: var(--s6); }
.c-head h1 { font-size: 1.375rem; letter-spacing: -.026em; margin-bottom: 3px; }
.c-head p { color: var(--ink-300); font-size: .8125rem; margin: 0; }

/* ------------------------------------------------------------- surfaces */
.c-panel {
  background: var(--ink-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
}
.c-panel__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-dark);
}
.c-panel__title {
  font-size: .75rem;
  font-weight: 660;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-200);
}
.c-panel__body { padding: var(--s4); }
.c-panel__foot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, .015);
}

/* ---------------------------------------------------------------- stats */
.c-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--ink-800);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  overflow: hidden;
}
.c-stat { padding: var(--s4); border-left: 1px solid var(--line-dark); }
.c-stat:first-child { border-left: 0; }
.c-stat__label {
  font-size: .625rem;
  font-weight: 660;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.c-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.625rem;
  font-weight: 620;
  letter-spacing: -.035em;
  color: #F8F7F4;
  line-height: 1.15;
  margin-top: 3px;
}
.c-stat__value--ok  { color: var(--accent-on-dark); }
.c-stat__value--warn{ color: var(--warn-on-dark); }
.c-stat__value--bad { color: var(--bad-on-dark); }
.c-stat__note { font-size: .6875rem; color: var(--ink-300); margin-top: 2px; }
@media (max-width: 640px) {
  .c-stats { grid-template-columns: repeat(2, 1fr); }
  .c-stat { border-top: 1px solid var(--line-dark); }
  .c-stat:nth-child(-n+2) { border-top: 0; }
  .c-stat:nth-child(odd) { border-left: 0; }
}

/* --------------------------------------------------------------- tables */
.c-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.c-table th {
  text-align: left;
  padding: 9px var(--s3);
  font-size: .625rem;
  font-weight: 680;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-300);
  background: rgba(255, 255, 255, .022);
  border-bottom: 1px solid var(--line-dark-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.c-table td {
  padding: 9px var(--s3);
  border-bottom: 1px solid var(--line-dark);
  vertical-align: middle;
  color: rgba(248, 247, 244, .78);
}
.c-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.c-table tbody tr:last-child td { border-bottom: 0; }
.c-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.c-table a { text-decoration: none; }
.c-table a:hover { text-decoration: underline; }
.c-table .strong { color: #F8F7F4; font-weight: 600; }

.c-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------- inputs */
.console .input,
.console .select,
.console .textarea {
  background: rgba(255, 255, 255, .045);
  border-color: var(--line-dark-strong);
  color: #F8F7F4;
  min-height: 38px;
  padding: 8px 11px;
  font-size: .875rem;
}
.console .input::placeholder, .console .textarea::placeholder { color: var(--ink-400); }
.console .input:focus, .console .select:focus, .console .textarea:focus {
  border-color: var(--accent-on-dark);
  box-shadow: 0 0 0 3px rgba(53, 183, 154, .16);
}
.console .label { color: var(--ink-200); font-size: .75rem; }
.console .help { color: var(--ink-400); }
.console .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239AA1AC' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.console .btn { min-height: 38px; padding: 8px 16px; font-size: .8125rem; }
.console .btn--sm { min-height: 30px; padding: 4px 11px; font-size: .75rem; }
.console .btn--ghost {
  --btn-fg: rgba(248, 247, 244, .82);
  --btn-border: var(--line-dark-strong);
}
.console .btn--ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--ink-400); }
.console .btn--quiet { --btn-fg: var(--ink-300); }
.console .btn--quiet:hover { background: rgba(255, 255, 255, .05); color: #fff; }

/* --------------------------------------------------------------- badges */
.c-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  font-size: .625rem;
  font-weight: 660;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .07);
  color: var(--ink-200);
  white-space: nowrap;
}
.c-tag--ok   { background: rgba(18, 135, 111, .2);  color: var(--accent-on-dark); }
.c-tag--warn { background: rgba(169, 108, 18, .22); color: var(--warn-on-dark); }
.c-tag--bad  { background: rgba(178, 58, 44, .2);   color: var(--bad-on-dark); }
.c-tag--info { background: rgba(44, 90, 130, .28);  color: var(--info-on-dark); }

/* ---------------------------------------------------------- health dots */
.c-health { display: flex; align-items: center; gap: var(--s2); font-size: .8125rem; }
.c-health__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-on-dark);
  box-shadow: 0 0 0 3px rgba(53, 183, 154, .16);
  flex: 0 0 auto;
}
.c-health__dot--bad { background: var(--bad-on-dark); box-shadow: 0 0 0 3px rgba(228, 104, 90, .16); }
.c-health__dot--warn { background: var(--warn-on-dark); box-shadow: 0 0 0 3px rgba(226, 163, 63, .16); }

/* --------------------------------------------------------------- charts */
.c-bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.c-bars i { flex: 1; min-width: 2px; background: rgba(53, 183, 154, .3); border-radius: 1px; }
.c-bars i.hi { background: var(--accent-on-dark); }
.c-bars i.zero { background: rgba(255, 255, 255, .07); }

/* ---------------------------------------------------------------- login */
body.console-login {
  background: #0B0D11;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s5);
}
.c-login {
  width: 100%;
  max-width: 380px;
  background: var(--ink-800);
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
}
.c-login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: var(--s6);
  color: #F8F7F4;
  font-weight: 700;
  letter-spacing: -.028em;
}
.c-login__warn {
  margin-top: var(--s5);
  padding: var(--s3);
  border: 1px solid rgba(226, 163, 63, .26);
  background: rgba(169, 108, 18, .12);
  border-radius: var(--r-sm);
  font-size: .75rem;
  line-height: 1.55;
  color: var(--warn-on-dark);
}

/* ----------------------------------------------------------- utilities */
.c-empty {
  padding: var(--s8) var(--s5);
  text-align: center;
  color: var(--ink-300);
  font-size: .875rem;
}
.c-danger-zone {
  border: 1px solid rgba(228, 104, 90, .3);
  background: rgba(178, 58, 44, .08);
  border-radius: var(--r-md);
  padding: var(--s4);
}
.c-danger-zone h3 { font-size: .875rem; color: var(--bad-on-dark); margin-bottom: var(--s2); }