/* Skybots Practice Ledger — visual shell.
 *
 * The tokens, proportions and control styling here are taken from the
 * reference demo so the lab looks like the software students actually use.
 * Keep it that way: the point of the site is that it does not feel like a
 * teaching toy.
 *
 * Deliberate teaching note: selector quality across this app is MIXED on
 * purpose. Some elements carry clean data-* hooks, some carry only a
 * generated-looking class, some are reachable by text alone. That variety
 * is the exercise. See README.md before "cleaning this up".
 */

:root {
  --blue: #0078c8;
  --blue-dark: #0064a8;
  --blue-darker: #005691;
  --navy: #0b2b45;
  --ink: #1b1c1d;
  --grey-text: #5b6670;
  --line: #dfe3e8;
  --line-soft: #eceff1;
  --page-bg: #ededed;
  --mint: #7ce0b2;
  --link: #0a6ebd;
  --danger: #d0021b;
}

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

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

/* ---------- top nav ---------- */
.topbar {
  background: var(--blue);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 60;
}

.topbar .org {
  background: var(--blue-darker);
  color: #fff;
  border: 0;
  border-radius: 22px;
  padding: 8px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
}

.topbar .org .mark {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--mint);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.topbar nav { display: flex; align-items: center; margin-left: 6px; flex: 1; }

.topbar nav a {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 17px 15px 15px;
  font-weight: 500;
  border-bottom: 4px solid transparent;
  white-space: nowrap;
}

.topbar nav a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.topbar nav a.is-active { border-bottom-color: #fff; font-weight: 600; }
.topbar nav a.open { background: rgba(0, 0, 0, .14); }

.topbar .user { display: flex; align-items: center; gap: 0; }

.topbar .user .icon-link {
  background: rgba(255, 255, 255, .14);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-left: 6px;
  color: #fff;
  position: relative;
  flex: none;
}

.topbar .user .icon-link svg { width: 20px; height: 20px; }

.topbar .user .icon-link .dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5f;
  border: 1.5px solid var(--blue);
}

.topbar .user .icon-link:hover { background: rgba(255, 255, 255, .28); text-decoration: none; }

.topbar .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--navy);
  border: 0;
  font-weight: 700;
  font-size: 12px;
  margin-left: 10px;
  overflow: hidden;
}

.topbar .avatar:hover, .topbar .avatar.open { filter: brightness(.93); }

/* ---------- dropdown menus ---------- */
#menu-layer { position: absolute; inset: 0 auto auto 0; z-index: 100; }

.menu {
  position: absolute;
  background: #fff;
  border-radius: 4px;
  min-width: 250px;
  max-height: 72vh;
  overflow: auto;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  padding: 6px 0;
}

.menu a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 18px;
  color: var(--navy);
  font-size: 14.5px;
  white-space: nowrap;
}

.menu a:hover { background: #f1f4f6; text-decoration: none; }

/* ---------- practice banner ---------- */
.practice-bar {
  background: #fff5d6;
  border-bottom: 1px solid #e8d9a0;
  color: #6b5312;
  font-size: 13px;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.practice-bar strong { color: #4e3c07; }
.practice-bar .spacer { flex: 1; }
/* The shared select arrow is drawn 20px from the top, which suits the 44px
   controls in the app. This bar's select is half that height, so it needs its
   own arrow position or the caret lands on the bottom edge. */
.practice-bar select {
  min-height: 0;
  height: 26px;
  padding: 2px 24px 2px 8px;
  width: auto;
  font-size: 13px;
  background-position: calc(100% - 13px) 11px, calc(100% - 8px) 11px;
  background-size: 5px 5px, 5px 5px;
}

/* ---------- page header ---------- */
.page-head {
  background: #fff;
  padding: 20px 32px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
  margin: -24px -24px 24px;
}

.page-head h1 { margin: 0; font-size: 29px; font-weight: 700; letter-spacing: -.4px; }
.page-head p { margin: 4px 0 0; color: var(--grey-text); font-size: 13.5px; }
.page-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.org-block { display: flex; align-items: center; gap: 14px; }

.org-avatar {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #ffb3c7;
  color: #8c1338;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

/* ---------- layout ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: 24px 24px 60px; }

.card {
  background: #fff;
  border-radius: 4px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  margin-bottom: 22px;
}

.card > h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.card .body { padding: 0; }
.card h3 { margin: 0; font-size: 18px; font-weight: 700; }
.card .sub { color: var(--grey-text); font-size: 13px; margin-top: 2px; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; }

/* ---------- dashboard cards ---------- */
.dash-card { display: flex; flex-direction: column; margin-bottom: 0; }
.dash-card .body { display: flex; flex-direction: column; flex: 1; }

.stat-row { display: flex; gap: 24px; margin: 16px 0 6px; }
.stat-row > div { flex: 1; }
.stat-row > div + div { border-left: 1px solid var(--line); padding-left: 24px; }

.dash-card .num { font-size: 26px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.dash-card .cap { font-size: 13px; margin-top: 2px; color: var(--grey-text); }
.dash-card .red, .dash-card .cap.red, .red { color: var(--danger); }

.card-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.split { display: flex; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; font-size: 14px; }

/* ---------- bar chart ---------- */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 150px;
  margin-top: 20px;
  border-bottom: 1px solid var(--line);
  padding: 0 6px;
}

.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar { width: 100%; max-width: 56px; background: #a9d8f5; border-radius: 2px 2px 0 0; position: relative; }
.bar::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; background: var(--blue); border-radius: 2px 2px 0 0; }
.bar-col:first-child .bar { background: #f5c4c8; }
.bar-col:first-child .bar::after { background: var(--danger); }
.bar-labels { display: flex; gap: 16px; padding: 8px 6px 0; }
.bar-labels span { flex: 1; text-align: center; font-size: 12px; color: var(--grey-text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 22px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #b7bec4;
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
}

.btn:hover { background: #f4f6f7; text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #a80116; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-link { border: 0; background: none; color: var(--link); padding: 4px 6px; }
.btn-link:hover { background: none; text-decoration: underline; }

/* Square-cornered controls, used on the report toolbars and foot bar. */
.btn-square { border-radius: 3px; min-height: 42px; padding: 0 20px; }
.btn-blue-outline { background: #fff; border: 1px solid var(--blue); color: var(--blue); border-radius: 3px; min-height: 40px; padding: 0 16px; font-weight: 600; }
.btn-blue-outline:hover { background: #eef7fd; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label, .field .flabel { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.field .flabel span { font-weight: 400; color: var(--grey-text); }
.field .hint { font-size: 12px; color: var(--grey-text); margin-top: 4px; }

input[type="text"], input[type="date"], input[type="number"],
input[type="email"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  border: 1px solid #9aa5ad;
  background: #fff;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  border-radius: 3px;
  min-height: 44px;
  color: var(--ink);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 120, 200, .18);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #333 50%),
                    linear-gradient(135deg, #333 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 20px; }

.toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.toolbar label { font-weight: 600; font-size: 14px; }
.toolbar .grow { flex: 1; min-width: 180px; }
.toolbar select, .toolbar input { min-height: 40px; }

/* ---------- tables ---------- */
table.data { width: 100%; border-collapse: collapse; margin-top: 8px; }

table.data th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--grey-text);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  white-space: nowrap;
}

table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--link); }
table.data td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); }
table.data th.num, table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: #f5f9fc; }
table.data tfoot td { border-bottom: 0; border-top: 1px solid var(--line); font-weight: 600; }

.muted { color: var(--grey-text); }
.nowrap { white-space: nowrap; }
.empty-row td { text-align: center; color: var(--grey-text); padding: 34px 10px; }

/* ---------- status pills ---------- */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--line-soft);
  color: #54606a;
}

.pill[data-status="Paid"], .pill[data-status="Accepted"],
.pill[data-status="Approved"], .pill[data-status="Active"],
.pill[data-status="Posted"], .pill[data-status="Registered"],
.pill[data-status="Current"], .pill[data-status="Billed"] { background: #e2f5ec; color: #1d6b48; }

.pill[data-status="Awaiting Payment"], .pill[data-status="Sent"],
.pill[data-status="Awaiting Approval"], .pill[data-status="In Progress"],
.pill[data-status="Awaiting Authorisation"] { background: #fdf1d8; color: #8a5b00; }

.pill[data-status="Overdue"], .pill[data-status="Declined"],
.pill[data-status="Expired"], .pill[data-status="Disposed"] { background: #fde6e8; color: #9b1220; }

.pill[data-status="Draft"], .pill[data-status="Closed"],
.pill[data-status="Invoiced"] { background: var(--line-soft); color: #54606a; }

/* ---------- pagination ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
  flex-wrap: wrap;
}

.pager .pages { display: flex; gap: 4px; }

.pager .pages button {
  min-width: 34px;
  border: 1px solid #b7bec4;
  background: #fff;
  border-radius: 3px;
  padding: 6px 9px;
  font: inherit;
}

.pager .pages button[aria-current="page"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}

/* ---------- report shell ---------- */
.report-crumbs {
  background: #fff;
  padding: 14px 26px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: -24px -24px 0;
}

.report-crumbs .crumb { font-size: 14px; margin-bottom: 2px; }
.report-crumbs h1 { margin: 2px 0 0; font-size: 22px; font-weight: 700; }
.star-btn { background: none; border: 0; color: var(--blue); font-size: 22px; line-height: 1; }

.report-shell { display: flex; align-items: stretch; min-height: 520px; border-top: 1px solid var(--line); margin: 0 -24px; }

.report-side { width: 330px; flex: 0 0 330px; background: #fff; border-right: 1px solid var(--line); }
.report-side.is-min { width: 56px; flex-basis: 56px; overflow: hidden; }

.side-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--grey-text);
  font-size: 15px;
}

.side-top button { background: none; border: 0; color: var(--grey-text); display: flex; align-items: center; gap: 10px; }
.side-block { padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.side-block .lbl { color: var(--grey-text); font-size: 13px; margin-bottom: 12px; }
.side-block a { display: block; padding: 7px 0; color: var(--link); }
.side-block.formats a { color: var(--navy); }

.report-main { flex: 1; min-width: 0; background: #fafbfc; padding: 22px 26px 40px; }
.filters { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; }
.filters .inputs { display: flex; }
.filters .inputs input { width: 150px; }
.filters .inputs input:first-child { border-radius: 3px 0 0 3px; border-right: 0; }
.filters .inputs input:last-child { border-radius: 0 3px 3px 0; }
.filters select { min-width: 240px; }
.filter-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }

.report-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 34px 38px 40px;
  margin-top: 24px;
}

.report-sheet h2 { margin: 0 0 18px; font-size: 26px; font-weight: 700; }
.report-sheet .org-line, .report-sheet .period { font-size: 15px; }
.report-sheet .period { margin-bottom: 26px; }

table.report-matrix { width: 100%; border-collapse: collapse; }

table.report-matrix th {
  text-align: right;
  font-weight: 400;
  color: var(--grey-text);
  font-size: 13.5px;
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

table.report-matrix th:first-child { text-align: left; }
table.report-matrix td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
table.report-matrix td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.report-matrix tbody tr:hover { background: transparent; }
table.report-matrix tr.section-head td { font-weight: 700; border-bottom: 1px solid var(--line-soft); }
table.report-matrix td.indent, table.report-matrix tr td:first-child.indent { padding-left: 22px; }
table.report-matrix tr.section-total td { font-weight: 700; border-bottom: 1px solid var(--ink); }
table.report-matrix tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-size: 15px; }

.report-footbar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 22px;
  flex-wrap: wrap;
  z-index: 40;
  margin: 0 -24px -60px;
}

.footbar-left, .footbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toggle { display: flex; align-items: center; gap: 10px; }

.switch {
  width: 44px;
  height: 24px;
  border-radius: 14px;
  background: var(--blue);
  border: 0;
  position: relative;
  transition: background .15s;
  flex: none;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 23px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}

.switch[aria-pressed="false"] { background: #b7bec4; }
.switch[aria-pressed="false"]::after { left: 3px; }

.over-budget { color: var(--danger); font-weight: 600; }

/* ---------- reports index ---------- */
.ri-group h3 { margin: 0 0 4px; font-size: 17px; }
.ri-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px 24px; }
.ri-list a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }

/* ---------- typeahead ---------- */
.typeahead { position: relative; }

.typeahead-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  max-height: 232px;
  overflow-y: auto;
  z-index: 30;
  padding: 4px 0;
}

.typeahead-list[hidden] { display: none; }
.typeahead-list li { list-style: none; padding: 8px 14px; cursor: pointer; font-size: 14.5px; }
.typeahead-list li:hover, .typeahead-list li.is-highlighted { background: #f1f4f6; }
.typeahead-list li .sub { display: block; font-size: 12px; color: var(--grey-text); }
.typeahead-list li.is-empty { color: var(--grey-text); cursor: default; }

/* ---------- line item editor ---------- */
table.lines { width: 100%; border-collapse: collapse; }
table.lines th { font-size: 12px; text-transform: uppercase; color: var(--grey-text); text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
table.lines td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.lines input, table.lines select { padding: 8px 10px; min-height: 40px; font-size: 14px; }
table.lines select { background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; padding-right: 30px; }
table.lines .col-desc { width: 30%; }
table.lines .col-qty { width: 92px; }
table.lines .col-price { width: 124px; }
table.lines .col-amount { width: 124px; }
table.lines .col-x { width: 40px; }

.totals { margin-left: auto; width: 300px; margin-top: 18px; }
.totals div { display: flex; justify-content: space-between; padding: 6px 0; }
.totals .grand { border-top: 1px solid var(--ink); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 700; }

/* ---------- journal table ---------- */
table.journal-table tfoot td { border-top: 1px solid var(--ink); }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 43, 69, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  padding: 20px;
}

.modal-backdrop[hidden] { display: none; }

.modal { background: #fff; border-radius: 4px; width: 100%; max-width: 470px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.modal h3 { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); font-size: 18px; }
.modal .modal-body { padding: 20px 22px; }
.modal .modal-foot { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- toast ---------- */
.toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: 28px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }

.toast {
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  max-width: 90vw;
  font-size: 14px;
}

.toast.is-error { background: #8e1119; }

/* ---------- spinner ---------- */
.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.spinner.dark { border-color: rgba(27, 28, 29, .25); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-block { padding: 48px; text-align: center; color: var(--grey-text); }

/* ---------- misc ---------- */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; }
.kv dt { color: var(--grey-text); }
.kv dd { margin: 0; }
code, .mono { font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: 13px; }

.callout {
  background: #fff;
  border-left: 3px solid var(--blue);
  padding: 14px 18px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* ---------- sign-in screen ---------- */
.auth-page { background: var(--blue); min-height: 100vh; }
.auth-shell { max-width: 400px; margin: 0 auto; padding: 8vh 20px 40px; }

.auth-brand {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.auth-brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--mint);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}

.auth-card { background: #fff; border-radius: 4px; padding: 28px; box-shadow: 0 16px 44px rgba(0, 0, 0, .3); }
.auth-card h1 { font-size: 22px; font-weight: 700; margin: 0 0 18px; }

.auth-demo {
  background: #f1f4f6;
  border-left: 3px solid var(--blue);
  border-radius: 0 3px 3px 0;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.auth-demo strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-text); }
.auth-error { background: #fde6e8; border-left: 3px solid var(--danger); border-radius: 0 3px 3px 0; color: #9b1220; padding: 10px 14px; margin: 0 0 16px; font-size: 13.5px; }
.auth-submit { width: 100%; padding: 12px; margin-top: 4px; }
.auth-note { font-size: 12.5px; color: var(--grey-text); margin: 16px 0 0; line-height: 1.6; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.auth-foot a { color: #fff; text-decoration: underline; }

@media (max-width: 1000px) {
  .report-side { display: none; }
  .topbar nav { overflow-x: auto; }
}

@media (max-width: 820px) {
  .topbar { gap: 8px; padding: 0 10px; overflow-x: auto; }
  .page { padding: 18px 14px 60px; }
  .page-head { margin: -18px -14px 18px; padding: 16px 18px; }
  .page-head h1 { font-size: 23px; }
  .totals { width: 100%; }
}