/* Robin of Loxley: the app shell, v2.2.
   The signed-in side of every app: a dark sidebar with the app's mark and
   Gloock wordmark, Lucide icons (icons.svg), the page on parchment, and the
   working parts a dashboard needs. Load tokens.css and components.css first.
   Markup is in brand/DESIGN.md under "App shell".

   Inside an app everything is Hanken Grotesk, Gloock is the wordmark only.
   It follows the theme from tokens.css, so dark mode comes for free when an
   app leaves data-theme off <html>. */

.rol-app, .rol-sidebar, .rol-main, .rol-nav__link, .rol-tabbar, .rol-banner,
.rol-stat, .rol-panel { box-sizing: border-box; }

/* ---- Frame --------------------------------------------------------------- */

.rol-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--rol-parchment);
  color: var(--rol-ink);
  font-family: var(--rol-font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The sidebar is the band: near-black in both themes, the one dark surface. */
.rol-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--rol-space-1);
  padding: var(--rol-space-5) var(--rol-space-3);
  background: var(--rol-band);
  color: var(--rol-band-soft);
  border-right: 1px solid rgba(245, 239, 225, 0.08);
}
.rol-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px var(--rol-space-4);
  color: var(--rol-band-text);
  text-decoration: none;
  font-family: var(--rol-font-display);
  font-size: 1.3rem;
  line-height: 1;
  white-space: nowrap;
}
.rol-sidebar__brand img, .rol-sidebar__brand svg { width: 28px; height: 28px; flex: none; }
/* The workspace or business name under the wordmark. */
.rol-sidebar__meta {
  padding: 0 10px var(--rol-space-3);
  font-size: var(--rol-text-small);
  color: var(--rol-band-soft);
  overflow-wrap: anywhere;
}
.rol-sidebar__meta select {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border-radius: var(--rol-radius);
  border: 1px solid rgba(245, 239, 225, 0.2);
  background: rgba(245, 239, 225, 0.06);
  color: var(--rol-band-text);
  font: inherit;
}
.rol-sidebar__foot {
  margin-top: auto;
  padding: var(--rol-space-4) 10px 0;
  border-top: 1px solid rgba(245, 239, 225, 0.12);
  font-size: var(--rol-text-small);
  display: grid;
  gap: var(--rol-space-2);
}
.rol-sidebar__foot form { margin: 0; }
.rol-sidebar__foot button, .rol-sidebar__foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rol-band-soft);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.rol-sidebar__foot button:hover, .rol-sidebar__foot a:hover { color: var(--rol-band-text); }

/* ---- Navigation ---------------------------------------------------------- */

.rol-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rol-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--rol-radius);
  color: var(--rol-band-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--rol-dur-press) ease, color var(--rol-dur-press) ease;
}
.rol-nav__link:hover { background: rgba(245, 239, 225, 0.08); color: var(--rol-band-text); }
.rol-nav__link[aria-current="page"] {
  background: rgba(245, 239, 225, 0.12);
  color: var(--rol-band-text);
  font-weight: 600;
}
/* Gold marks where you are: decoration on dark, which is gold's job. */
.rol-nav__link[aria-current="page"] .rol-icon { color: var(--rol-gold); }
.rol-nav__link:focus-visible { outline: var(--rol-focus); outline-offset: -2px; }
.rol-nav__sep { height: 1px; margin: var(--rol-space-2) 10px; background: rgba(245, 239, 225, 0.12); }

/* ---- Icons --------------------------------------------------------------- */

/* <svg class="rol-icon" aria-hidden="true"><use href="/static/rol/icons.svg#calendar"></use></svg> */
.rol-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -4px;
}
.rol-icon--sm { width: 16px; height: 16px; vertical-align: -3px; }
.rol-icon--lg { width: 24px; height: 24px; }

/* ---- Main ---------------------------------------------------------------- */

.rol-main { min-width: 0; padding: var(--rol-space-6) var(--rol-space-6) var(--rol-space-8); }
.rol-page { max-width: var(--rol-container); }
.rol-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--rol-space-3) var(--rol-space-4);
  margin: 0 0 var(--rol-space-5);
}
.rol-page-title {
  margin: 0;
  font-family: var(--rol-font-body);
  font-size: 1.625rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rol-ink);
}
.rol-section-title {
  margin: 0 0 var(--rol-space-3);
  font-family: var(--rol-font-body);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
}

/* A panel is the app's card: linen, a hairline, 6px. Never one inside another. */
.rol-panel {
  background: var(--rol-linen);
  border: 1px solid var(--rol-line);
  border-radius: var(--rol-radius-lg);
  padding: var(--rol-space-4) var(--rol-space-5);
  margin: 0 0 var(--rol-space-4);
}

/* ---- Banners ------------------------------------------------------------- */

.rol-banner {
  display: block;
  padding: 10px 14px;
  margin: 0 0 var(--rol-space-4);
  border-radius: var(--rol-radius);
  border: 1px solid var(--rol-line-strong);
  background: var(--rol-linen);
  color: var(--rol-ink);
  font-size: 0.9375rem;
}
.rol-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.rol-banner--info { background: var(--rol-accent-soft); border-color: color-mix(in oklab, var(--rol-accent) 30%, transparent); }
.rol-banner--ok { background: var(--rol-moss); border-color: color-mix(in oklab, var(--rol-lincoln) 30%, transparent); }
.rol-banner--warn { background: color-mix(in oklab, var(--rol-straw) 55%, var(--rol-linen)); border-color: color-mix(in oklab, var(--rol-yew) 35%, transparent); }
.rol-banner--danger { background: var(--rol-scarlet-soft); border-color: color-mix(in oklab, var(--rol-scarlet) 40%, transparent); }

/* ---- Numbers ------------------------------------------------------------- */

.rol-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--rol-space-3); margin: 0 0 var(--rol-space-5); }
.rol-stat {
  display: grid;
  gap: 2px;
  padding: var(--rol-space-3) var(--rol-space-4);
  background: var(--rol-linen);
  border: 1px solid var(--rol-line);
  border-radius: var(--rol-radius-lg);
  color: inherit;
  text-decoration: none;
}
a.rol-stat:hover { border-color: var(--rol-line-strong); }
.rol-stat__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rol-stat__label { font-size: var(--rol-text-small); color: var(--rol-ink-soft); }

/* ---- Status tags (on top of .rol-tag) ------------------------------------ */

.rol-tag--ok { background: var(--rol-moss); color: var(--rol-lincoln); }
.rol-tag--warn { background: color-mix(in oklab, var(--rol-straw) 70%, var(--rol-linen)); color: var(--rol-ink); }
.rol-tag--bad { background: var(--rol-scarlet-soft); color: color-mix(in oklab, var(--rol-scarlet) 80%, var(--rol-ink)); }
.rol-tag--muted { background: color-mix(in oklab, var(--rol-ink) 7%, var(--rol-linen)); color: var(--rol-ink-soft); }
.rol-tag--accent { background: var(--rol-accent-soft); color: var(--rol-accent); }

/* ---- Working tables ------------------------------------------------------ */

/* The quiet table for lists inside an app: no ink head row, which is for the
   one comparison on a public page. */
.rol-table--quiet { background: var(--rol-linen); border: 1px solid var(--rol-line); border-radius: var(--rol-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.rol-table--quiet thead th {
  background: transparent;
  color: var(--rol-ink-soft);
  font-size: var(--rol-text-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--rol-line-strong);
}
.rol-table--quiet th, .rol-table--quiet td { padding: 10px 14px; }
.rol-table--quiet tbody tr:hover td { background: color-mix(in oklab, var(--rol-accent) 4%, transparent); }
.rol-main .rol-table-wrap { margin: 0 0 var(--rol-space-5); }
.rol-table--quiet .rol-tag { white-space: nowrap; }

/* ---- Phone ------------------------------------------------------------- */

/* A bottom tab bar for the four or five things done most, plus one "new". */
.rol-tabbar { display: none; }

@media (max-width: 900px) {
  .rol-app { display: block; }
  /* The sidebar becomes a top band; its links scroll sideways in one row. */
  .rol-sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rol-space-2);
    padding: var(--rol-space-3) var(--rol-space-4);
    border-right: 0;
  }
  .rol-sidebar__brand { padding: 0; font-size: 1.2rem; }
  .rol-sidebar__brand img, .rol-sidebar__brand svg { width: 24px; height: 24px; }
  .rol-sidebar__meta { padding: 0; margin-left: auto; max-width: 50%; }
  .rol-sidebar > nav { flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--rol-space-4)); padding: 0 var(--rol-space-4); }
  .rol-sidebar > nav::-webkit-scrollbar { display: none; }
  .rol-nav { display: flex; gap: 4px; }
  .rol-nav__sep { display: none; }
  .rol-sidebar__foot { display: none; }
  .rol-main { padding: var(--rol-space-5) var(--rol-space-4) var(--rol-space-8); }
  .rol-page-title { font-size: 1.375rem; }

  .rol-tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--rol-linen);
    border-top: 1px solid var(--rol-line-strong);
  }
  .rol-tabbar a {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 48px;
    padding-top: 4px;
    color: var(--rol-ink-soft);
    text-decoration: none;
    font-size: var(--rol-text-small);
    font-weight: 500;
  }
  .rol-tabbar a[aria-current="page"] { color: var(--rol-accent); font-weight: 700; }
  .rol-tabbar .rol-icon { width: 22px; height: 22px; }
  .rol-app--tabbar .rol-main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .rol-nav__link { transition: none; }
}