/* ============================================================================
   Bookrr OS — this build only.

   Load order: tokens.css → brand.css → defcon.css → THIS.

   The kit owns structure and brand.css owns the skin, so what is left here is
   only what one product needs and no other build would: the handful of
   pieces the kit has no component for (the charts), and the responsive
   behaviour.

   If you find yourself changing a padding, a height or a column width in this
   file, stop: that is structural and belongs in the kit's components.md.
   ========================================================================= */

/* ── Ground ──────────────────────────────────────────────────────────── */

html, body { height: 100%; }
body {
  margin: 0; background: var(--bg-secondary);
  font: var(--font-text-md-regular); color: var(--text-tertiary);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

#root.boot {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-tertiary);
}

/* Status tones. Navy and gold are never one of them. */
.bk-good  { color: var(--good); }
.bk-warn  { color: var(--warn); }
.bk-bad   { color: var(--bad); }
.bk-mute  { color: var(--text-placeholder); }

.bk-tag--good  { background: var(--tint-good); color: var(--good); }
.bk-tag--warn  { background: var(--tint-warn); color: var(--warn); }
.bk-tag--bad   { background: var(--tint-bad);  color: var(--bad); }
.bk-tag--mute,
.bk-tag--grey  { background: var(--bg-tertiary); color: var(--text-tertiary); }
.bk-dot--good  { background: var(--good); }
.bk-dot--warn  { background: var(--warn); }
.bk-dot--bad   { background: var(--bad); }
.bk-dot--grey  { background: var(--text-placeholder); }

/* ── Shell ───────────────────────────────────────────────────────────── */

.dfc-body { background: var(--bg-secondary); }
.dfc-sidebar { position: relative; }
.bk-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: var(--radius-xs);
  background: var(--button-primary-bg); color: var(--text-white);
  font: var(--font-text-sm-medium);
}
.bk-navhead { background: transparent; border: 0; cursor: pointer; width: 100%;
              display: flex; align-items: center; justify-content: space-between; }
.bk-navhead > i, .bk-navhead > svg { width: 14px; height: 14px; }
.bk-navitem { background: transparent; border: 0; cursor: pointer; width: 100%; text-align: left; }
.bk-navitem__label { flex: 1 1 0; min-width: 0; }
.bk-navitem__count { font: var(--font-text-sm-medium); color: var(--text-placeholder); }
.dfc-menu-item[aria-current="page"] { background: var(--bg-tertiary_hover); }

.bk-rail__foot {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 8px 4px; font: var(--font-text-sm-regular); color: var(--text-placeholder);
  border-top: 1px solid var(--border-secondary);
}
.bk-live { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none;
           background: var(--text-placeholder); }
.bk-live--live      { background: var(--good); }
.bk-live--connecting{ background: var(--warn); }
.bk-live--retrying  { background: var(--warn); }
.bk-live--error     { background: var(--bad); }
.bk-rail__who { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.bk-rail__email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--font-text-sm-regular); color: var(--text-tertiary); }

.bk-head h1 { font: var(--font-header-h4); color: var(--text-primary); }
.bk-saving { font: var(--font-text-sm-medium); color: var(--text-tertiary); }

.dfc-page-desc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.bk-desc__emoji { font-size: 14px; }

.bk-note {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 32px; font: var(--font-text-md-regular); color: var(--text-secondary);
  border-bottom: 1px solid var(--border-secondary);
}
.bk-note--good { color: var(--good); }
.bk-note--bad  { color: var(--bad); }
.bk-note__x { margin-left: auto; background: transparent; border: 0; cursor: pointer;
              color: inherit; display: inline-flex; }
.bk-notice { padding: 24px 32px; max-width: 640px; color: var(--text-tertiary); }
.bk-notice code { color: var(--text-primary); background: var(--bg-tertiary);
                   padding: 1px 4px; border-radius: var(--radius-xs); }

/* ── Board ───────────────────────────────────────────────────────────── */

.bk-boardpage, .bk-tablepage { display: flex; flex-direction: column; height: 100%; }
.bk-boardpage .dfc-board { flex: 1 1 0; min-height: 0; align-items: stretch; overflow-x: auto; }
.dfc-board__column { max-height: 100%; min-height: 0; }
.dfc-board__tasks  { overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.dfc-board__header { background: var(--bg-primary); }
.bk-board__toggle  { background: transparent; border: 0; padding: 0; cursor: pointer;
                     color: inherit; font: inherit; flex: 1 1 0; text-align: left; }
.bk-column-empty   { padding: 12px 4px; font: var(--font-text-sm-regular);
                     color: var(--text-placeholder); }
.dfc-card { width: 100%; text-align: left; }
.dfc-card__meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.bk-ava {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); color: var(--text-secondary);
  font: var(--font-text-sm-medium); border: 1px solid var(--border-secondary);
}

/* ── Table ───────────────────────────────────────────────────────────── */

.bk-tablepage .bk-table { flex: 1 1 0; min-height: 0; overflow: auto; }
.bk-table { width: 100%; }
.dfc-table__header { position: sticky; top: 0; z-index: 5; background: var(--bg-secondary); }
.bk-row { cursor: pointer; border: 0; background: transparent; width: 100%; }
.bk-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-cell--name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.bk-cell--name > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* ── Record ──────────────────────────────────────────────────────────── */

.dfc-detail--page { background: var(--bg-primary); border: 1px solid var(--border-secondary);
                    border-radius: var(--radius-lg); }
.bk-detail__sub { margin: -8px 0 16px; font: var(--font-text-md-regular);
                  color: var(--text-tertiary); }
.bk-value { overflow-wrap: anywhere; }
.bk-value--link { background: transparent; border: 0; padding: 0; cursor: pointer;
                  color: var(--text-brand); font: inherit; text-align: left;
                  text-decoration: underline; text-underline-offset: 2px; }
.bk-notes { width: 100%; color: var(--text-secondary); background: var(--bg-secondary); }
.dfc-detail__section-head h2 { font: var(--font-text-lg-medium); }

/* ── Dashboard ───────────────────────────────────────────────────────── */

.bk-dash { padding-bottom: 24px; }
.bk-stat__note { color: var(--text-placeholder); right: 15px; bottom: 12px; max-width: 66%;
                 text-align: right; line-height: 14px; }
.bk-section-title { padding: 0 32px 12px; font: var(--font-text-lg-medium);
                    color: var(--text-primary); }
.bk-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One client, one colour, in every bar of every chart on the page. None of
   these ten is navy or gold — the brand colour is never a status colour. */
.bk-c1  { background: #6696F5; }
.bk-c2  { background: #7E57C2; }
.bk-c3  { background: #26A69A; }
.bk-c4  { background: #5C6BC0; }
.bk-c5  { background: #26C6DA; }
.bk-c6  { background: #AB47BC; }
.bk-c7  { background: #42A5F5; }
.bk-c8  { background: #7986CB; }
.bk-c9  { background: #4DB6AC; }
.bk-c10 { background: #9575CD; }

.bk-chart__sub { font: var(--font-text-sm-regular); color: var(--text-placeholder); }
.bk-chart__plot { display: flex; align-items: flex-end; gap: 12px; padding: 16px;
                  min-height: 200px; overflow-x: auto; }
.bk-chart__col { flex: 1 1 0; min-width: 56px; display: flex; flex-direction: column;
                 align-items: center; gap: 4px; }
.bk-chart__stack { width: 100%; height: 140px; display: flex; align-items: stretch; }
.bk-chart__bar { width: 100%; height: 100%; display: flex; flex-direction: column-reverse;
                 justify-content: flex-start; border-radius: var(--radius-xs);
                 overflow: hidden; }
.bk-chart__seg { width: 100%; min-height: 4px; border: 0; padding: 0; cursor: pointer; }
.bk-chart__seg:hover { filter: brightness(1.15); }
.bk-chart__n { font: var(--font-text-sm-medium); color: var(--text-primary); }
.bk-chart__x { font: var(--font-text-sm-regular); color: var(--text-placeholder);
               text-align: center; line-height: 14px; }
.bk-chart__key { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 16px;
                 font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.bk-chart__keyitem { display: inline-flex; align-items: center; gap: 6px; }
.bk-chart__swatch { width: 10px; height: 10px; border-radius: var(--radius-xs); }

.bk-foot { margin: 0; padding: 16px 32px 24px; max-width: 780px;
           font: var(--font-text-sm-regular); color: var(--text-placeholder); }

/* ── Modal ───────────────────────────────────────────────────────────── */

.dfc-overlay { z-index: 60; }
.bk-select { appearance: none; background-image: none; }
.dfc-modal__body { display: flex; flex-direction: column; gap: 16px; }

/* ── Small screens ───────────────────────────────────────────────────── */

.bk-topbar { display: none; }
.bk-scrim  { display: none; }

@media (max-width: 1000px) {
  .bk-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px; border-bottom: 1px solid var(--border-primary);
  }
  .bk-topbar__where { font: var(--font-text-md-medium); color: var(--text-primary); }
  .dfc-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .bk-app--nav-open .dfc-sidebar { transform: none; }
  .bk-app--nav-open .bk-scrim {
    display: block; position: fixed; inset: 0; z-index: 45; border: 0;
    background: rgba(11,29,58,.5);
  }
  .dfc-page-header, .dfc-page-desc, .bk-note, .bk-foot, .bk-section-title,
  .dfc-dash, .dfc-dash-charts { padding-left: 16px; padding-right: 16px; }
  .bk-charts { grid-template-columns: minmax(0, 1fr); }
  .dfc-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dfc-detail--dock { width: 100%; }
}
@media (max-width: 620px) {
  .dfc-dash { grid-template-columns: minmax(0, 1fr); }
}