/* ==========================================================================
   CareMetrix — Rosters page (calendar roster grid)
   Every rule is scoped under `.ros` so this page cannot collide with the
   shared components in components.css. Local colour tokens for shift chips,
   weekend/holiday/today column tints live on `.ros`, mirroring how
   roster-templates.css scopes its own tokens under `.rt`. The drawer,
   overlay, toast and tabs come straight from components.css.
   ========================================================================== */

.ros {
  /* Every value below was pixel-sampled directly from the Figma roster
     screenshot (node 6531:15446), not carried over from the app's shared
     theme — this matches the attached Figma reference, not the existing
     CareMetrix theme defaults. */
  --ros-purple-bg:#EDE9FE;    --ros-purple-border:#D6C6FB;  --ros-purple-text:#6D28D9;
  --ros-green-bg:#C8F5E2;     --ros-green-border:#9AE6C4;   --ros-green-text:#0F8A3F;
  --ros-amber-bg:#FFFED6;     --ros-amber-border:#F0E29D;   --ros-amber-text:#8A6A00;
  --ros-weekend-bg:#FFE8E8;   --ros-weekend-text:#C0616B;
  --ros-today-bg:#F5F3FF;
  --ros-holiday-bg:#E8F4FE;   --ros-holiday-text:#1D6FA5;
  --ros-open-bg:#FFFBEB;      --ros-open-text:#B45309;
  --ros-pink: #D0479A;        --ros-pink-soft: #FBEAF4;
  --ros-neutral-bg: #F3F6FA;  --ros-neutral-bg-2: #F4F7FA;
  --ros-grid-line: #E2E7EE;
}

/* the Figma reference is a clean white enterprise surface end-to-end —
   the app's shared lavender content background (used elsewhere) is
   overridden only while the Rosters page is mounted. */
#content:has(.ros) { background: #fff; }

/* the reference UI stacks its toolbar rows tightly — tighten the shared
   .page gap for this page only rather than touching it globally */
.ros.page { gap: 14px; }

/* view tabs: a neutral blue-grey track, not the app's violet-tinted
   --surface-3 */
.ros-toolbar1 .tabs { background: var(--ros-neutral-bg); }

/* status tabs: plain white row, underline indicator on the active tab —
   not the pill/box treatment the shared .tabs.is-active state gives the
   view tabs above */
.ros-statustabs { background: #fff; padding: 0; gap: 18px; }
.ros-statustabs button { padding: 0 0 10px; border-radius: 0; }
.ros-statustabs button.is-active {
  background: transparent; box-shadow: none;
  border-bottom: 2px solid var(--brand-purple);
}

/* ---------------------------------------------------------- toolbar row 1 */

.ros-toolbar1 { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.ros-daterange { display: flex; align-items: center; gap: 10px; }

.ros-navbtn {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-2);
  display: grid; place-items: center;
  transition: all .16s var(--ease);
}
.ros-navbtn:hover { border-color: var(--brand-violet); color: var(--brand-purple); }
.ros-navbtn svg { width: 17px; height: 17px; }

.ros-rangelabel { font-weight: 800; font-size: 15px; color: var(--text); white-space: nowrap; min-width: 176px; text-align: center; }

.ros-ai {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED 0%, #C026D3 55%, #EC4899 100%);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-brand);
  transition: box-shadow .16s var(--ease);
}
.ros-ai:hover { box-shadow: 0 12px 28px -6px rgba(124, 58, 237, .5); }
.ros-ai svg { width: 19px; height: 19px; }

.ros-admin { position: relative; }
.ros-more.ros-iconbtn--solo { width: 40px; height: 40px; border-color: var(--border-strong); color: var(--text-2); }
.ros-more.ros-iconbtn--solo:hover { border-color: var(--brand-violet); color: var(--brand-purple); background: var(--surface); }
.ros-more svg { width: 19px; height: 19px; }

.ros-admin__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 226px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 60;
  display: none;
}
.ros-admin__menu.is-open { display: block; }
.ros-admin__label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 8px 10px 6px;
}
.ros-admin__menu button {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.ros-admin__menu button svg { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.ros-admin__menu button:hover { background: var(--violet-bg); color: var(--brand-purple); }
.ros-admin__menu button:hover svg { color: var(--brand-purple); }

/* ------------------------------------------------------- custom date pop */

.ros-customdate {
  display: none;
  align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--violet-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.ros-customdate.is-open { display: flex; }
.ros-customdate label { font-size: 12.5px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.ros-customdate input { width: auto; }

/* ---------------------------------------------------------- toolbar row 2 */

.ros-toolbar2 { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.ros-statustabs button { display: flex; align-items: center; gap: 8px; }
.ros-count {
  background: #F1EEFA; color: var(--text-2);
  border-radius: 999px; font-size: 11px; font-weight: 800; padding: 1px 7px;
}
.ros-statustabs button.is-active .ros-count { background: var(--ros-purple-bg); color: var(--brand-purple); }

.ros-toolbar2__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ros-field { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }

/* pill-shaped select with a leading status dot, matching the Figma "All
   Roaster" / "All Property" controls */
.ros-pill-select {
  position: relative; display: inline-flex; align-items: center;
  min-width: 168px;
  border: 1.5px solid var(--form-border); border-radius: var(--r-pill);
  background: var(--surface);
}
.ros-pill-select .dot { position: absolute; left: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--green-dot); pointer-events: none; }
.ros-pill-select select {
  width: 100%; border: none; background-color: transparent; box-shadow: none;
  padding: 7px 30px 7px 26px; border-radius: var(--r-pill); font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239C95AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.ros-pill-select select:focus { box-shadow: 0 0 0 3px var(--form-focus-ring); }

.ros-filter { position: relative; }

/* Filter / view-mode / export / fullscreen read as one pink-accented group
   in the Figma toolbar, distinct from the violet brand controls. */
.ros-pinkbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border: 1.5px solid var(--ros-pink); border-radius: var(--r-btn);
  background: var(--surface); color: var(--ros-pink);
  font-size: 13px; font-weight: 700;
  transition: all .14s var(--ease);
}
.ros-pinkbtn:hover { background: var(--ros-pink-soft); }
.ros-pinkbtn svg { width: 16px; height: 16px; }

.ros-filter__pop {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 60;
  display: none;
}
.ros-filter__pop.is-open { display: block; }
.ros-filter__title { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.ros-filter__row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.ros-filter__dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ros-filter__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

.ros-viewicons {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1.5px solid var(--ros-pink); border-radius: var(--r-btn);
  background: var(--surface);
}
.ros-iconbtn { width: 32px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ros-pink); transition: all .14s var(--ease); }
.ros-iconbtn svg { width: 17px; height: 17px; }
.ros-viewicons .ros-iconbtn.is-active { background: var(--ros-pink); color: #fff; }
.ros-iconbtn--solo {
  width: 36px; height: 36px; border-radius: var(--r-btn);
  display: grid; place-items: center;
  border: 1.5px solid var(--ros-pink); background: var(--surface); color: var(--ros-pink);
  transition: all .14s var(--ease);
}
.ros-iconbtn--solo svg { width: 17px; height: 17px; }
.ros-iconbtn--solo:hover { background: var(--ros-pink-soft); }

/* ------------------------------------------------------------------ card */

.ros-card { margin-top: 2px; overflow: hidden; border-color: var(--ros-grid-line); }

/* Header area: one CSS grid, not two stacked flex rows. The left column
   spans both grid rows (grid-row: 1 / 3) so its border-right runs, unbroken,
   past the Property row AND the Date row — giving the single vertical
   divider the spec calls for without absolute positioning or negative
   margins. The horizontal divider between Property and Dates is a
   border-bottom on the Property row alone, so it starts exactly at the
   vertical divider and never runs under Search. */
.ros-headergrid {
  display: grid;
  grid-template-columns: 236px 1fr;
  grid-template-rows: auto auto;
}

.ros-headergrid__left {
  grid-column: 1; grid-row: 1 / 3;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 12px 16px;
  border-right: 1px solid var(--ros-grid-line);
}

.ros-headergrid__propertyrow {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  min-height: 54px; box-sizing: border-box;
  border-bottom: 1px solid var(--ros-grid-line);
}

/* the date row is a plain, non-scrolling wrapper — rosters.js keeps its
   scrollLeft mirrored to the grid body below so the dates always line up
   with the shift columns, even while a user scrolls the grid horizontally */
.ros-headergrid__daterow-wrap {
  grid-column: 2; grid-row: 2;
  overflow: hidden;
}
.ros-headergrid__daterow { display: flex; }

.ros-segmented { display: flex; background: var(--ros-neutral-bg-2); border-radius: var(--r-sm); padding: 4px; width: fit-content; }
.ros-segmented button { padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); transition: all .14s var(--ease); }
.ros-segmented button.is-active { background: var(--surface); color: var(--brand-purple); box-shadow: var(--shadow-xs); }
.ros-headergrid__left .ros-segmented { width: 100%; }

.ros-search { position: relative; display: flex; align-items: center; }
.ros-search svg { position: absolute; left: 12px; color: var(--text-3); pointer-events: none; }
.ros-search input {
  width: 208px; box-sizing: border-box;
  font-size: 13px; padding: 8px 12px 8px 36px;
  border: 1.5px solid #E4E9F0; border-radius: var(--form-radius);
  background: #F8FAFC; outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ros-headergrid__left .ros-search { width: 100%; }
.ros-headergrid__left .ros-search input { width: 100%; }
.ros-search input:focus { border-color: var(--form-focus); background: var(--surface); box-shadow: 0 0 0 3px var(--form-focus-ring); }

.ros-legend { position: relative; }
.ros-legend__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--form-radius);
  border: 1.5px solid var(--form-border); background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--text);
}
.ros-legend__btn:hover { border-color: var(--brand-violet); }
.ros-legend__btn svg { width: 14px; height: 14px; color: var(--text-3); }
.ros-legend__pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 208px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 12px; z-index: 60; display: none;
}
.ros-legend__pop.is-open { display: block; }
.ros-legend__row { display: flex; align-items: center; gap: 9px; padding: 5px 2px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.ros-legend__row .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ros-legend__row b { margin-left: auto; color: var(--text-2); }

/* ------------------------------------------------------------------ grid */

.ros-grid-scroll { overflow: auto; max-height: calc(100vh - 430px); min-height: 380px; }

.ros-grid { border-collapse: separate; border-spacing: 0; font-size: 13px; }

/* shared column-width token — used by both the date-row cells (divs) and
   the grid body's <td> cells, so header and body stay pixel-aligned */
.ros-daycol { width: 132px; min-width: 132px; }

/* date-row cells (plain divs in .ros-headergrid__daterow, not <th> — kept
   in sync with the scrollable grid body via rosters.js) */
.ros-headergrid__daterow .ros-daycol {
  flex: none;
  border-right: 1px solid var(--ros-grid-line);
  padding: 10px 6px;
  text-align: center;
}
.ros-headergrid__daterow .ros-daycol:last-child { border-right: 0; }
.ros-corner-col { width: 236px; min-width: 236px; }

.ros-dayhead { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ros-dayhead .dow { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-3); }
.ros-dayhead .num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: var(--text);
}
.ros-dayhead .mon { font-size: 10px; color: var(--text-3); }
.ros-dayhead .tag {
  font-size: 8.5px; font-weight: 800; letter-spacing: .03em;
  color: var(--ros-holiday-text); background: #fff;
  border-radius: 999px; padding: 1px 6px; margin-top: 1px;
}

.ros-col--today .num { background: var(--grad-purple); color: #fff; }
.ros-col--weekend { background: var(--ros-weekend-bg); }
.ros-col--weekend .dow, .ros-col--weekend .mon { color: var(--ros-weekend-text); }
.ros-col--holiday { background: var(--ros-holiday-bg); }
.ros-col--holiday .dow, .ros-col--holiday .mon { color: var(--ros-holiday-text); }
td.ros-col--today { background: var(--ros-today-bg); }

.ros-grid tbody td {
  border-bottom: 1px solid var(--ros-grid-line);
  border-right: 1px solid var(--ros-grid-line);
  padding: 8px;
  vertical-align: top;
}
.ros-grid tbody td:last-child { border-right: 0; }
.ros-grid tbody tr:last-child td { border-bottom: 0; }

.ros-who {
  position: sticky; left: 0; z-index: 3;
  width: 236px; min-width: 236px; box-sizing: border-box;
  background: var(--surface);
  min-height: 88px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 17px;
}
.ros-grid tbody tr:hover .ros-who { background: var(--surface-2); }
.ros-who__row { display: flex; align-items: center; gap: 10px; }
.ros-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px;
}
.ros-who__name { font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.25; }
.ros-who__role { font-size: 11.5px; color: var(--text-3); }
.ros-who__hours { margin-left: auto; align-self: flex-end; font-size: 11.5px; font-weight: 800; color: var(--brand-purple); white-space: nowrap; }

tr.ros-row--open td { background: var(--ros-open-bg) !important; }
tr.ros-row--open .ros-who__name { color: #9A5B12; }
tr.ros-row--open .ros-who__role { color: #C08A4E; }
.ros-open-icon {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: #E89727; color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.ros-open-count {
  margin-left: auto; background: #F8E4B8; color: var(--ros-open-text);
  font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}

.ros-chip {
  position: relative;
  border-radius: 10px; border: 1px solid;
  padding: 7px 20px 8px 9px;
  margin-bottom: 6px;
  font-size: 11.5px; cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.ros-chip:last-child { margin-bottom: 0; }
.ros-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(88, 62, 160, .45); }
.ros-chip--sil { background: var(--ros-purple-bg); border-color: var(--ros-purple-border); color: var(--ros-purple-text); }
.ros-chip--mta { background: var(--ros-green-bg); border-color: var(--ros-green-border); color: var(--ros-green-text); }
.ros-chip--sta { background: var(--ros-amber-bg); border-color: var(--ros-amber-border); color: var(--ros-amber-text); }
.ros-chip__head { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 10.5px; letter-spacing: .02em; }
.ros-chip__head svg { width: 12px; height: 12px; flex: none; }
.ros-chip__recur {
  position: absolute; top: 6px; right: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  display: grid; place-items: center; color: inherit;
}
.ros-chip__recur svg { width: 10px; height: 10px; }
.ros-chip__name { font-weight: 700; color: var(--text); font-size: 12px; margin-top: 3px; }
.ros-chip__time { font-size: 10.5px; color: var(--text-2); margin-top: 2px; }

.ros-cell-empty { min-height: 52px; }

/* -------------------------------------------------------------- legend bar */
/* Persistent key strip along the bottom of the calendar card — shift-type
   chips on the left, cell-tint dots on the right. */

.ros-legendbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px;
  border-top: 1px solid var(--ros-grid-line);
  font-size: 11.5px; color: var(--text-2);
}
.ros-legendbar__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ros-legendbar__item svg { width: 12px; height: 12px; flex: none; }
.ros-legendbar__dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.ros-legendbar__sep { width: 1px; align-self: stretch; background: var(--border); }

/* ------------------------------------------------------------------ list */

.ros-listview[hidden] { display: none; }

/* ------------------------------------------------------------- drawer -- */

.ros-drawer-body > .field + .field,
.ros-drawer-body > .ros-field-grid + .field,
.ros-drawer-body > .field + .ros-field-grid,
.ros-drawer-body > .ros-field-grid3 + .field,
.ros-drawer-body > .ros-field-grid + .ros-field-grid,
.ros-drawer-body > .ros-field-grid3,
.ros-drawer-body > .ros-hours-panel,
.ros-drawer-body > #afCards {
  margin-top: 16px;
}
.ros-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ros-field-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* text input with a trailing decorative icon (time / date fields) */
.ros-icon-input { position: relative; display: block; }
.ros-icon-input input { padding-right: 34px; }
.ros-icon-input svg {
  position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-3); pointer-events: none;
}

/* purple "scheduled vs actual hours" summary panel in Add Shift */
.ros-hours-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--violet-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 12px 16px;
}
.ros-hours-panel__left { display: flex; align-items: center; gap: 10px; }
.ros-hours-panel__left > svg { width: 20px; height: 20px; color: var(--brand-purple); flex: none; }
.ros-hours-panel__val { font-size: 16px; font-weight: 800; color: var(--brand-purple); line-height: 1.2; }
.ros-hours-panel__lbl { font-size: 11.5px; color: var(--text-2); }
.ros-hours-panel__actual { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ros-hours-panel__actual b { color: var(--text); font-size: 13.5px; }

/* Mon..Sun multi-select day toggle */
.ros-daybtns { display: flex; gap: 8px; flex-wrap: wrap; }
.ros-daybtns button {
  min-width: 46px; padding: 8px 10px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-btn);
  background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 700; text-align: center;
  transition: all .14s var(--ease);
}
.ros-daybtns button:hover { border-color: var(--brand-violet); }
.ros-daybtns button.is-active { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }

/* small tag pinned to the top-right of a gradient drawer header */
.ros-drawer-tag {
  position: absolute; top: 20px; right: 60px;
  font-size: 11.5px; font-weight: 600; font-style: italic;
  color: rgba(255, 255, 255, .9);
}

/* -------------------------------------------------------- funding cards */

.ros-fundcard {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  overflow: hidden;
}
.ros-fundcard:last-child { margin-bottom: 0; }
.ros-fundcard__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ros-fundcard__who { flex: 1; min-width: 0; }
.ros-fundcard__name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ros-fundcard__ndis { font-size: 11.5px; color: var(--text-3); }
.ros-fundcard__chevron, .ros-fundcard__remove {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: var(--text-3); flex: none;
  transition: all .14s var(--ease);
}
.ros-fundcard__chevron svg { width: 16px; height: 16px; transition: transform .16s var(--ease); }
.ros-fundcard.is-collapsed .ros-fundcard__chevron svg { transform: rotate(-90deg); }
.ros-fundcard__chevron:hover { background: var(--violet-bg); color: var(--brand-purple); }
.ros-fundcard__remove svg { width: 15px; height: 15px; }
.ros-fundcard__remove:hover { background: var(--red-bg); color: var(--red); }
.ros-fundcard__body { padding: 14px; }
.ros-fundcard.is-collapsed .ros-fundcard__body { display: none; }
.ros-fundcard__body .ros-field-grid { margin-top: 0; }
.ros-fundcard__body > * + * { margin-top: 14px; }

.ros-calc-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  border-radius: var(--r-sm);
  padding: 11px 14px;
}
.ros-calc-panel__badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 999px; font-size: 11px; font-weight: 800; flex: none;
}
.ros-calc-panel__main { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; }
.ros-calc-panel__sub { display: block; font-size: 11px; font-weight: 600; opacity: .75; margin-top: 1px; }
.ros-calc-panel__total { font-size: 16px; font-weight: 800; white-space: nowrap; }

.ros-calc-panel--weekly { background: var(--ros-amber-bg); border: 1px solid var(--ros-amber-border); align-items: flex-start; }
.ros-calc-panel--weekly .ros-calc-panel__badge { background: #fff; color: var(--ros-amber-text); }
.ros-calc-panel--weekly .ros-calc-panel__main { color: var(--ros-amber-text); }
.ros-calc-panel--weekly .ros-calc-panel__main b { display: block; font-size: 13px; }
.ros-calc-panel--weekly .ros-calc-panel__main span { display: block; font-weight: 500; margin-top: 2px; }

.ros-calc-panel--hourly { background: var(--violet-bg); border: 1px solid var(--border-strong); }
.ros-calc-panel--hourly .ros-calc-panel__badge { background: #fff; color: var(--brand-purple); }
.ros-calc-panel--hourly .ros-calc-panel__main, .ros-calc-panel--hourly .ros-calc-panel__total { color: var(--brand-purple); }

.ros-calc-panel--green { background: var(--green-bg); border: 1px solid #BFEACB; }
.ros-calc-panel--green .ros-calc-panel__badge { background: #fff; color: var(--green); }
.ros-calc-panel--green .ros-calc-panel__main, .ros-calc-panel--green .ros-calc-panel__total { color: var(--green); }

/* -------------------------------------------------------------- fullscreen */

.ros-fullscreen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  overflow: auto;
  padding: 24px var(--gutter);
  margin: 0;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .ros-rangelabel { min-width: 0; }
  .ros-toolbar1, .ros-toolbar2 { align-items: flex-start; }
  .ros-search input { width: 160px; }
}