/* ============================================================
   BIDII CLEANERS — the office shell
   Shared by the three staff-facing demonstrations: the
   quotation generator, the job dashboard and the payment
   tracker.

   Why one shell for three demos: a cleaning company does not
   want three unrelated tools, it wants one place to work. The
   sidebar links the three demonstrations to each other, so a
   prospect clicking through sees a single system rather than
   three disconnected toys.

   Loaded on top of bidii.css, which supplies the colour and
   type tokens. Nothing here overrides the public website.
   ============================================================ */

:root {
  --of-top-h: 56px;
  --of-side-w: 232px;
}

/* ---------- Top bar ---------- */
.of-top {
  position: sticky;
  top: var(--demo-bar-h, 0px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: var(--of-top-h);
  padding: .5rem 1rem;
  background: var(--b-ink);
  color: #fff;
}
.of-top a { color: #fff; }

.of-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.of-brand svg { flex-shrink: 0; }
.of-brand b { font-size: .98rem; font-weight: 800; letter-spacing: -0.01em; }
.of-brand span {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #8FB4D8;
}

.of-top-right { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.of-who {
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: #C6DAEE;
}
.of-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--b-green); color: #fff;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .02em;
}
@media (max-width: 620px) { .of-who span { display: none; } }

.of-tolive {
  font-size: .8rem; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--b-pill);
  padding: .3rem .8rem; white-space: nowrap;
}
.of-tolive:hover { background: rgba(255,255,255,.12); }
@media (max-width: 760px) { .of-tolive { display: none; } }

/* ---------- Shell layout ---------- */
.of-shell { display: block; background: var(--b-wash); min-height: 70vh; }
@media (min-width: 900px) {
  .of-shell {
    display: grid;
    grid-template-columns: var(--of-side-w) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Sidebar / mobile tab strip ---------- */
.of-side {
  background: #fff;
  border-bottom: 1px solid var(--b-line);
}
@media (min-width: 900px) {
  .of-side {
    border-bottom: 0;
    border-right: 1px solid var(--b-line);
    position: sticky;
    top: calc(var(--demo-bar-h, 0px) + var(--of-top-h));
    height: calc(100vh - var(--demo-bar-h, 0px) - var(--of-top-h));
    padding: 1.1rem .8rem;
    overflow-y: auto;
  }
}

.of-side-lab {
  display: none;
  font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--b-slate);
  padding: 0 .6rem; margin-bottom: .6rem;
}
@media (min-width: 900px) { .of-side-lab { display: block; } }

.of-nav { display: flex; gap: .3rem; list-style: none; margin: 0; padding: .55rem .7rem; overflow-x: auto; }
@media (min-width: 900px) { .of-nav { display: grid; gap: .2rem; padding: 0; overflow: visible; } }

.of-nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem;
  border-radius: var(--b-r-sm);
  font-size: .88rem; font-weight: 700;
  color: var(--b-slate); text-decoration: none;
  white-space: nowrap;
}
.of-nav a:hover { background: var(--b-wash); color: var(--b-ink); }
.of-nav a[aria-current="page"] { background: var(--b-soft); color: var(--b-blue); }
.of-nav svg { flex-shrink: 0; opacity: .85; }

.of-side-note {
  display: none;
  margin-top: 1.4rem; padding: .85rem;
  background: var(--b-wash); border-radius: var(--b-r-sm);
  font-size: .76rem; line-height: 1.55; color: var(--b-slate);
}
@media (min-width: 900px) { .of-side-note { display: block; } }

/* ---------- Main column ---------- */
.of-main { padding: 1.2rem 1rem 3rem; min-width: 0; }
@media (min-width: 760px) { .of-main { padding: 1.8rem 1.6rem 4rem; } }

.of-head { margin-bottom: 1.3rem; }
.of-head h1 { font-size: clamp(1.4rem, 2.4vw + .6rem, 1.95rem); letter-spacing: -0.02em; }
.of-head p { color: var(--b-slate); font-size: .94rem; margin-top: .3rem; max-width: 62ch; }
.of-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.of-head-row .of-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.of-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1.5px solid var(--b-line); background: #fff; color: var(--b-ink);
  border-radius: var(--b-r-sm); padding: .55rem .95rem;
  font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.of-btn:hover { border-color: #AFC9E3; background: var(--b-wash); }
.of-btn:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 2px; }
.of-btn-primary { background: var(--b-blue); border-color: var(--b-blue); color: #fff; }
.of-btn-primary:hover { background: var(--b-blue-dk); border-color: var(--b-blue-dk); color: #fff; }
.of-btn-go { background: var(--b-green); border-color: var(--b-green); color: #fff; }
.of-btn-go:hover { background: var(--b-green-dk); border-color: var(--b-green-dk); color: #fff; }
.of-btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.of-btn svg { flex-shrink: 0; }

/* ---------- KPI tiles ---------- */
.of-kpis { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 1.4rem; }
@media (min-width: 880px) { .of-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; } }

.of-kpi {
  background: #fff; border: 1px solid var(--b-line);
  border-radius: var(--b-r); padding: .95rem 1rem;
  box-shadow: var(--b-sh-sm);
}
.of-kpi .l {
  display: block; font-size: .73rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--b-slate);
}
.of-kpi .n {
  display: block; font-size: clamp(1.35rem, 2.4vw + .5rem, 1.7rem);
  font-weight: 800; letter-spacing: -0.03em; margin-top: .3rem; line-height: 1.15;
}
.of-kpi .d { display: block; font-size: .78rem; color: var(--b-slate); margin-top: .15rem; }
.of-kpi.good .n { color: var(--b-green); }
.of-kpi.late .n { color: #B3261E; }
.of-kpi.blue .n { color: var(--b-blue); }

/* ---------- Cards ---------- */
.of-card {
  background: #fff; border: 1px solid var(--b-line);
  border-radius: var(--b-r); box-shadow: var(--b-sh-sm);
  margin-bottom: 1.2rem; overflow: hidden;
}
.of-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .95rem 1.1rem; border-bottom: 1px solid var(--b-line);
}
.of-card-head h2 { font-size: 1.02rem; letter-spacing: -0.01em; }
.of-card-head .of-card-sub { font-size: .82rem; color: var(--b-slate); }
.of-card-head .right { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.of-card-body { padding: 1.1rem; }
.of-card-body.tight { padding: .6rem 1.1rem 1.1rem; }

/* ---------- Filters ---------- */
.of-filters {
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--b-line);
  background: #FBFDFF;
}
.of-chip {
  border: 1.5px solid var(--b-line); background: #fff; color: var(--b-slate);
  border-radius: var(--b-pill); padding: .35rem .85rem;
  font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.of-chip:hover { border-color: #AFC9E3; color: var(--b-ink); }
.of-chip[aria-pressed="true"] {
  background: var(--b-blue); border-color: var(--b-blue); color: #fff;
}
.of-chip .c {
  display: inline-block; margin-left: .35rem; font-size: .76rem; opacity: .75;
}
.of-search {
  flex: 1 1 180px; min-width: 150px;
  border: 1.5px solid var(--b-line); border-radius: var(--b-pill);
  padding: .35rem .95rem; font-size: .86rem; background: #fff;
}
.of-search:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 1px; }

/* ---------- Fields ---------- */
.of-field { display: block; margin-bottom: .9rem; }
.of-field > span {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--b-ink); margin-bottom: .3rem;
}
.of-field input, .of-field select, .of-field textarea {
  width: 100%; background: #fff;
  border: 1.5px solid var(--b-line); border-radius: var(--b-r-sm);
  padding: .6rem .8rem; font-size: .92rem;
}
.of-field input:focus-visible, .of-field select:focus-visible, .of-field textarea:focus-visible {
  outline: 3px solid var(--b-blue); outline-offset: 1px; border-color: var(--b-blue);
}
.of-field .hint { font-size: .76rem; color: var(--b-slate); margin-top: .25rem; font-weight: 400; }
.of-field-row { display: grid; gap: .9rem; }
@media (min-width: 620px) { .of-field-row.two { grid-template-columns: 1fr 1fr; } }

.of-switch { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; cursor: pointer; }
.of-switch input { width: 18px; height: 18px; margin: .2rem 0 0; flex-shrink: 0; accent-color: var(--b-blue); }

/* ---------- Tables that survive a phone ----------
   On a narrow screen each row becomes its own stacked card and
   every cell grows a label, taken from the column heading via
   data-label. The owner checks these on a phone far more often
   than on a laptop, so the phone view is the one that matters. */
.of-table-wrap { overflow-x: auto; }
.of-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.of-table th, .of-table td { padding: .7rem .8rem; text-align: left; vertical-align: top; }
.of-table thead th {
  font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--b-slate);
  border-bottom: 1px solid var(--b-line); background: #FBFDFF;
  position: sticky; top: 0; z-index: 1;
}
.of-table tbody tr { border-bottom: 1px solid var(--b-line); }
.of-table tbody tr:last-child { border-bottom: 0; }
.of-table tbody tr:hover { background: #FBFDFF; }
.of-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.of-table .who { font-weight: 700; }
.of-table .sub { display: block; font-size: .8rem; color: var(--b-slate); font-weight: 400; }
.of-table td.actions { white-space: nowrap; text-align: right; }

@media (max-width: 820px) {
  .of-table thead { display: none; }
  .of-table, .of-table tbody, .of-table tr, .of-table td { display: block; width: 100%; }
  .of-table tbody tr {
    border: 1px solid var(--b-line); border-radius: var(--b-r);
    margin: .7rem 0; padding: .3rem .2rem; background: #fff;
  }
  .of-table td {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .4rem .8rem; text-align: right;
  }
  .of-table td::before {
    content: attr(data-label);
    font-size: .72rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--b-slate);
    text-align: left; flex-shrink: 0; padding-top: .15rem;
  }
  .of-table td.actions { justify-content: flex-end; padding-bottom: .7rem; }
  .of-table td.actions::before { content: none; }
  .of-table .num { text-align: right; }
}

/* ---------- Badges ---------- */
.of-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: var(--b-pill); padding: .2rem .65rem;
  font-size: .76rem; font-weight: 800; white-space: nowrap;
  border: 1px solid transparent;
}
.of-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.of-badge.ok      { background: #E3F7EF; color: #0B6B4F; border-color: #BFE9D8; }
.of-badge.info    { background: var(--b-soft); color: var(--b-blue-dk); border-color: #C5DEF4; }
.of-badge.warn    { background: #FDF0DC; color: #7A4F06; border-color: #F0D4A3; }
.of-badge.late    { background: #FDECEA; color: #8E2A1E; border-color: #F5C6C0; }
.of-badge.neutral { background: #EEF2F7; color: #41536B; border-color: #DCE6F0; }

.of-empty { padding: 2.2rem 1.1rem; text-align: center; color: var(--b-slate); font-size: .92rem; }

/* ---------- Drawer (job / invoice detail) ---------- */
.of-drawer-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10,37,64,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.of-drawer-back.open { opacity: 1; pointer-events: auto; }

.of-drawer {
  position: fixed; z-index: 401; background: #fff;
  box-shadow: var(--b-sh-lg);
  display: flex; flex-direction: column;
  transition: transform .24s ease;
}
/* The demonstration banner is fixed at the top of every demo screen and
   sits above everything. The drawer has to start below it, or its own
   heading and close button disappear underneath. --demo-bar-h falls back
   to 0 so these screens still work if the banner is ever not loaded. */
@media (min-width: 720px) {
  .of-drawer {
    top: var(--demo-bar-h, 0px); right: 0; bottom: 0; width: min(440px, 92vw);
    transform: translateX(104%);
  }
  .of-drawer.open { transform: translateX(0); }
}
@media (max-width: 719px) {
  .of-drawer {
    left: 0; right: 0; bottom: 0;
    max-height: min(86vh, calc(100vh - var(--demo-bar-h, 0px) - .75rem));
    border-radius: var(--b-r-lg) var(--b-r-lg) 0 0;
    transform: translateY(104%);
  }
  .of-drawer.open { transform: translateY(0); }
}
.of-drawer-head {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--b-line);
}
.of-drawer-head h2 { font-size: 1.1rem; }
.of-drawer-head .sub { font-size: .84rem; color: var(--b-slate); margin-top: .15rem; }
.of-x {
  margin-left: auto; border: 0; background: var(--b-wash); color: var(--b-slate);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; line-height: 1;
}
.of-x:hover { background: var(--b-line); color: var(--b-ink); }
.of-drawer-body { padding: 1.2rem; overflow-y: auto; }

.of-dl { display: grid; gap: 0; border: 1px solid var(--b-line); border-radius: var(--b-r-sm); overflow: hidden; }
.of-dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem .9rem; border-bottom: 1px solid var(--b-line); font-size: .9rem;
}
.of-dl > div:last-child { border-bottom: 0; }
.of-dl .k { color: var(--b-slate); flex-shrink: 0; }
.of-dl .v { font-weight: 700; text-align: right; }

.of-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.of-timeline li { display: flex; gap: .7rem; font-size: .88rem; }
.of-timeline .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--b-blue);
  flex-shrink: 0; margin-top: .45rem;
}
.of-timeline .when { display: block; font-size: .78rem; color: var(--b-slate); }

/* ---------- The honesty note ---------- */
.of-fiction {
  display: flex; gap: .7rem; align-items: flex-start;
  background: #FDF0DC; border: 1px solid #F0D4A3; color: #7A4F06;
  border-radius: var(--b-r); padding: .85rem 1rem;
  font-size: .86rem; line-height: 1.55; margin-bottom: 1.3rem;
}
.of-fiction svg { flex-shrink: 0; margin-top: 2px; }
.of-fiction strong { font-weight: 800; }