/*
 * Friends POS admin dashboard -- minimalist rearrangement (approved
 * direction "C: Two-Column Ledger" from the three mockups). Scoped to
 * body.dashboard-page, loaded after brand-admin.css so it wins the
 * cascade without needing !important beyond what's already established
 * there (the shared gold-top-border card accent, which this file
 * deliberately turns off inside the areas restyled here).
 *
 * True side-by-side layout: #dashboard_layout (a CSS grid) holds
 * #dashboard_kpi_rail_wrap (left) and #dashboard_main_col (right) as
 * siblings -- both now live outside the dark hero band, on the plain
 * page background, which matters for legibility: every stat value uses
 * tw-text-gray-900/600/500 (dark grays), which only read clearly on a
 * light ground. They used to be legible inside the hero because each
 * stat was its own solid white card; an earlier pass removed that white
 * fill to flatten the cards into a list, which left dark text sitting
 * almost directly on the dark hero gradient -- unreadable. Moving the
 * whole rail out onto the light page background fixes that at the
 * source, no color overrides needed.
 */

/* ---------------------------------------------------------------------
   1. Two-column grid: rail | reports.
   --------------------------------------------------------------------- */
body.dashboard-page #dashboard_layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.6fr);
  gap: 0 2.75rem;
  align-items: start;
}
body.dashboard-page #dashboard_kpi_rail_wrap {
  grid-column: 1;
  position: sticky;
  top: 1rem;
}
body.dashboard-page #dashboard_main_col {
  grid-column: 2;
  min-width: 0;
}
/* Non-admin users (permitted to see reports but not the KPI rail) get
   only #dashboard_main_col as a child of #dashboard_layout -- span the
   full grid instead of sitting in column 2 with an empty column 1. */
body.dashboard-page #dashboard_main_col.dashboard-main-col--full {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  body.dashboard-page #dashboard_layout {
    grid-template-columns: 1fr;
  }
  body.dashboard-page #dashboard_kpi_rail_wrap {
    grid-column: 1;
    position: static;
  }
  body.dashboard-page #dashboard_main_col {
    grid-column: 1;
    margin-top: 2rem;
  }
}

/* ---------------------------------------------------------------------
   2. KPI rows -- flat vertical list, dark hairline dividers (both rows
      now sit on the plain light page background, not the dark hero).
   --------------------------------------------------------------------- */
body.dashboard-page #dashboard_kpi_rail,
body.dashboard-page #dashboard_kpi_rail_2 {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
}
body.dashboard-page #dashboard_kpi_rail_2 {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(36, 22, 16, 0.14);
}
body.dashboard-page #dashboard_kpi_rail > div,
body.dashboard-page #dashboard_kpi_rail_2 > div {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(36, 22, 16, 0.1);
  transform: none !important;
}
body.dashboard-page #dashboard_kpi_rail > div:last-child,
body.dashboard-page #dashboard_kpi_rail_2 > div:last-child {
  border-bottom: none;
}
body.dashboard-page #dashboard_kpi_rail > div > div,
body.dashboard-page #dashboard_kpi_rail_2 > div > div {
  padding: 0.85rem 0 !important;
}
/* Row layout instead of a centered icon+number block: icon left, label
   and value inline to the right -- reads like a ledger line, not a card. */
body.dashboard-page #dashboard_kpi_rail .tw-flex.tw-items-center.tw-gap-4,
body.dashboard-page #dashboard_kpi_rail_2 .tw-flex.tw-items-center.tw-gap-4 {
  justify-content: flex-start;
}
/* Total Sales + Net (the two "hero" stats) already carry bigger icon/
   text classes from the earlier hierarchy pass (tw-w-12/14, tw-text-2xl/
   3xl) -- kept as-is here, that's still the right emphasis for a rail. */

/* ---------------------------------------------------------------------
   3. Report widgets -- shared card chrome removed everywhere in the
      report section; each becomes a quiet block with a bottom hairline
      instead of a shadowed, ringed, top-bordered box.
   --------------------------------------------------------------------- */
body.dashboard-page #dashboard_reports .tw-bg-white.tw-shadow-sm.tw-rounded-xl {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(36, 22, 16, 0.1);
  transform: none !important;
}
body.dashboard-page #dashboard_reports .tw-bg-white.tw-shadow-sm.tw-rounded-xl:last-child {
  border-bottom: none;
}
body.dashboard-page #dashboard_reports .tw-bg-white.tw-shadow-sm.tw-rounded-xl:hover {
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   4. "Needs attention" heading -- introduces the grouping without
      touching any of the widgets it groups (they're already contiguous
      siblings; the .js-dw-card auto-hide behaviour means this heading
      and every widget under it can vanish together on a quiet day).
   --------------------------------------------------------------------- */
.dashboard-section-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 30;
  font-size: 1.05rem;
  color: #241610;
  margin: 0 0 0.9rem;
  padding-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   5. "More reports" disclosure -- collapsed by default, houses the two
      purely-informational trend charts (service staff, current FY).
   --------------------------------------------------------------------- */
#dashboard_more_reports {
  margin: 0.25rem 0 1.75rem;
  border-top: 1px dashed rgba(36, 22, 16, 0.16);
  padding-top: 1rem;
  grid-column: 1 / -1;
}
#dashboard_more_reports > summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: #6B5A4A;
  list-style: none;
}
#dashboard_more_reports > summary::-webkit-details-marker {
  display: none;
}
#dashboard_more_reports > summary::before {
  content: '+ ';
  color: #7E2F1E;
}
#dashboard_more_reports[open] > summary::before {
  content: '\2212 ';
}
#dashboard_more_reports .dashboard-more-body {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
#dashboard_more_reports .dashboard-more-body .tw-bg-white.tw-shadow-sm.tw-rounded-xl {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: none !important;
}