/* ETABLIX internal portal styles */

:root {
  --ink: #14181d;
  --ink-2: #1d232b;
  --ink-3: #2a323d;
  --paper: #f4f5f7;
  --white: #ffffff;
  --orange: #9c7a3c;
  --orange-dark: #7c6130;
  --amber: #c9a96a;
  --slate: #5b6672;
  --slate-light: #97a1ac;
  --line: #e3e6ea;
  --line-dark: #333c47;
  --success: #1f9d61;
  --danger: #c0392b;
  --font-head: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }

/* ---------- Login ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(115deg, rgba(20,24,29,0.96) 40%, rgba(20,24,29,0.85)),
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(156,122,60,0.1) 47px, rgba(156,122,60,0.1) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(156,122,60,0.1) 47px, rgba(156,122,60,0.1) 48px),
    #1d232b;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 14px;
  padding: 44px 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

.login-card .logo {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 14px;
}
.logo .logo-mark { display: block; border-radius: 8px; }
.login-card .logo .logo-mark { width: 42px; height: 42px; }
.logo .logo-text { display: flex; flex-direction: column; line-height: 1; color: inherit; }
.logo .logo-text small {
  font-family: var(--font-head);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 4px;
  white-space: nowrap;
}
.login-card .topline {
  font-family: var(--font-head);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.login-card .topline b { color: var(--orange-dark); }
.login-card .sub { color: var(--slate); font-size: 0.92rem; margin-bottom: 26px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; }
.field input {
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  font-size: 0.98rem;
  font-family: inherit;
  background: var(--paper);
}
.field input:focus { outline: none; border-color: var(--orange); }

.btn-block {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 7px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.btn-block:hover { background: var(--orange-dark); }
.btn-block:disabled { opacity: 0.6; cursor: wait; }

.login-error {
  background: rgba(192,57,43,0.08);
  border: 1.5px solid var(--danger);
  color: var(--danger);
  border-radius: 7px;
  padding: 11px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}
.login-error.show { display: block; }

.demo-hint {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--paper);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--slate);
}
.demo-hint code { background: #e8eaee; padding: 1px 6px; border-radius: 4px; font-size: 0.78rem; }

.back-link { display:block; margin-top: 18px; text-align:center; font-size: 0.85rem; color: var(--slate); text-decoration:none; }
.back-link:hover { color: var(--orange); }

/* ---------- App shell ---------- */

.topbar {
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 26px;
  height: 62px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .logo { font-family: var(--font-head); font-weight: 900; font-size: 1.2rem; letter-spacing: -0.02em; display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; }
.topbar .logo .logo-mark { width: 30px; height: 30px; }
.topbar .logo .logo-text small { font-size: 0.46rem; color: var(--amber); margin-top: 3px; }
.topbar .brand-block { display: flex; align-items: center; gap: 12px; }
.topbar .desk-label {
  font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--amber); border: 1px solid rgba(201,169,106,0.4);
  padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}
.topbar .desk-strap {
  font-family: "Barlow Condensed", var(--font-head), sans-serif;
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #cfd6dd; white-space: nowrap;
}
.topbar .user-box { display: flex; align-items: center; gap: 14px; font-size: 0.88rem; }
.topbar .user-box .who { text-align: right; }
.topbar .user-box .who b { display: block; line-height: 1.2; }
.topbar .user-box .who .signed-label { color: var(--slate-light); font-size: 0.72rem; display: block; }

.desk-toolbar { margin-bottom: 16px; }
.desk-toolbar input[type="search"] {
  width: 100%;
  max-width: 460px;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
}
.desk-toolbar input[type="search"]:focus { outline: none; border-color: var(--orange); }

.doc-link { color: var(--orange); font-weight: 600; font-size: 0.84rem; text-decoration: none; }
.doc-link:hover { text-decoration: underline; }
.brief { max-width: 34em; }
.btn-ghost {
  background: transparent; color: #cfd6dd; border: 1px solid var(--line-dark);
  padding: 8px 16px; border-radius: 6px; font-weight: 600; font-size: 0.84rem;
}
.btn-ghost:hover { border-color: var(--orange); color: #fff; }

.tabs {
  display: flex;
  gap: 4px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 0 26px;
  overflow-x: auto;
}
.tabs button {
  border: none;
  background: none;
  padding: 15px 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--slate);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--orange); border-bottom-color: var(--orange); }

.main { padding: 28px 26px 60px; max-width: 1280px; margin: 0 auto; }

.panel { display: none; }
.panel.active { display: block; }

.panel-title { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; margin-bottom: 4px; }
.panel-sub { color: var(--slate); font-size: 0.92rem; margin-bottom: 24px; }

/* ---------- KPI cards ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
}
.kpi b { display: block; font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; }
.kpi span { font-size: 0.8rem; color: var(--slate); }
.kpi.accent { border-top: 3px solid var(--orange); }
.kpi.green { border-top: 3px solid var(--success); }

/* ---------- Tables ---------- */

.table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 720px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
  background: #f8f9fa; position: sticky; top: 0;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

.pill {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px;
  background: #eef0f3; color: var(--slate);
}
.pill.new, .pill.submitted, .pill.scheduled, .pill.mobilization { background: rgba(201,169,106,0.18); color: #a86e00; }
.pill.contacted, .pill.under_review, .pill.in_progress { background: rgba(59,130,246,0.14); color: #1d4ed8; }
.pill.qualified, .pill.prequalified, .pill.curing, .pill.closeout { background: rgba(139,92,246,0.14); color: #6d28d9; }
.pill.won, .pill.approved, .pill.passed, .pill.ok, .pill.closed, .pill.completed, .pill.answered { background: rgba(31,157,97,0.15); color: var(--success); }
.pill.lost, .pill.declined, .pill.failed, .pill.alert, .pill.open, .pill.critical { background: rgba(192,57,43,0.12); color: var(--danger); }
.pill.major { background: rgba(156,122,60,0.15); color: var(--orange-dark); }
.pill.minor { background: #eef0f3; color: var(--slate); }

td select {
  font-family: inherit; font-size: 0.82rem; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white);
}

.progress-track { background: #eef0f3; border-radius: 100px; height: 8px; min-width: 90px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--orange); border-radius: 100px; }

.muted { color: var(--slate-light); font-size: 0.8rem; }
.error-note { color: var(--danger); font-weight: 600; padding: 14px 0; }
.empty-note { color: var(--slate); padding: 18px 16px; }

.section-block { margin-bottom: 34px; }
.section-block h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; margin-bottom: 12px; }

.team-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.team-form input, .team-form select {
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 7px;
  font-size: 0.92rem; font-family: inherit; background: var(--white); min-width: 200px; flex: 1;
}
.team-form input:focus, .team-form select:focus { outline: none; border-color: var(--orange); }
/* Checkbox scope and event pickers. The generic rule above gives every input
   in a team form flex:1 and a 200px minimum, which stretches a checkbox into
   a wide box with its label pushed to the far side of the row. These are
   picked from a list, so they size to their own label instead. */
.pick-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pick-list label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.team-form .pick-list input[type="checkbox"] {
  flex: none; min-width: 0; width: 15px; height: 15px; padding: 0; margin: 0; border-radius: 3px;
}

.pill.restricted { background: rgba(192,57,43,0.16); color: var(--danger); border: 1px solid rgba(192,57,43,0.35); }
.pill.info { background: rgba(156,122,60,0.15); color: var(--orange-dark); }
.pill.success { background: rgba(31,157,97,0.15); color: var(--success); }
.pill.warning { background: rgba(176,122,30,0.16); color: #a86e00; }

.bell-count {
  display: inline-block; min-width: 18px; text-align: center;
  background: var(--danger); color: #fff; border-radius: 100px;
  font-size: 0.7rem; font-weight: 700; padding: 1px 5px; margin-left: 4px;
}

#bell-panel {
  position: fixed; top: 68px; right: 22px; z-index: 100;
  width: min(430px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}
#bell-panel .bell-head {
  font-family: var(--font-head); font-weight: 800; font-size: 0.95rem;
  padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--white);
}
#bell-panel .bell-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 0.86rem;
}
#bell-panel .bell-item:last-child { border-bottom: none; }
#bell-panel .bell-item .pill { flex-shrink: 0; margin-top: 2px; }

.btn-run {
  background: var(--white); color: var(--orange-dark); border: 1.5px solid var(--orange);
  padding: 7px 14px; border-radius: 6px; font-family: var(--font-head);
  font-weight: 700; font-size: 0.78rem; white-space: nowrap;
}
.btn-run:hover { background: var(--orange); color: #fff; }
.btn-run:disabled { opacity: 0.55; cursor: wait; }

@media (max-width: 700px) {
  /* THE CONTROL DESK ON A PHONE.
     The top bar was a single fixed-height flex row with
     `justify-content: space-between` and no wrapping, holding a logo, a
     pill, a strap, four quick-action buttons and the signed-in box. On a
     390px screen the signed-in box started at x=385 and ran to x=963, so
     the whole portal panned 574px sideways on every tab — and because the
     bar is sticky, it panned there permanently.
     It wraps onto as many rows as it needs now, and the pieces are allowed
     to shrink. `height: auto` is the important half: a sticky element with
     a fixed height cannot wrap, it can only overflow. */
  .topbar {
    padding: 9px 14px;
    height: auto;
    min-height: 62px;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 10px;
  }
  .topbar .env-tag { display: none; }
  .topbar .brand-block, .topbar .user-box { min-width: 0; }
  /* The user box holds six things — four quick actions, the name and sign
     out — in one nowrap flex row. Letting the bar wrap moved it onto its
     own line and it still ran 202px past the screen, because the row
     itself does not wrap. It does now, and it takes the full width so the
     actions sit under the brand rather than beside it. */
  .topbar .user-box {
    flex-wrap: wrap;
    flex-basis: 100%;
    gap: 8px;
    justify-content: flex-start;
    font-size: 0.82rem;
  }
  .topbar .user-box .btn-ghost { padding: 6px 10px; }
  .topbar .desk-label { display: none; }
  /* "Signed in as" is a label for a name that is already obviously a name. */
  .topbar .user-box .who .signed-label { display: none; }
  .topbar .user-box .who { text-align: left; }
  .main { padding: 20px 14px 50px; }
  .tabs { padding: 0 10px; }
}

@media (max-width: 860px) {
  .topbar .desk-strap { display: none; }
}

/* ============================================================
   V2 — PREMIUM REFINEMENT LAYER (portal)
   ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

::selection { background: #c9a35c; color: #14181d; }
:focus-visible { outline: 2px solid #c9a35c; outline-offset: 2px; }

.login-card { border-radius: 4px; box-shadow: 0 34px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,169,106,0.18); }
.login-card .topline b { letter-spacing: 0.2em; }
.field input, .desk-toolbar input[type="search"], td select, .team-form input, .team-form select { border-radius: 2px; }
.btn-block { border-radius: 2px; background: #c9a35c; color: #14181d; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; }
.btn-block:hover { background: var(--ink); color: #fff; }
.btn-ghost, .btn-run { border-radius: 2px; }
.kpi, .table-wrap, .demo-hint, #bell-panel { border-radius: 3px; }
.kpi b { font-variant-numeric: tabular-nums; }
.kpi { transition: border-color 0.2s ease; }
.kpi:hover { border-color: #c9a35c; }
.tabs button { letter-spacing: 0.02em; }