/* ============================================================ File: batches.css Project: StudioFlow (Grace Aerobics & Fitness Center) Developer: Janvi Vakhariya — V Techno Labs Created: 2026-09-01 (updated 2026-09-07) Purpose: Design system for Batches — three screens, one family: 1) Batches list 2) Add Batch 3) Edit Batch. ONE list pattern (.sf-batch-row under session groups, timetable-aligned times) and ONE form pattern (.sf-batch-form-card) shared by screens 2-3. Copyright: © 2026 V Techno Labs. All rights reserved. Proprietary software developed by V Techno Labs. ============================================================ Same "Sunset" language as the other final screens: sunset wash ground, white glass cards with soft pink shadows, 20px radius, Archivo, wing-gradient ribbon on form cards. THE TIMETABLE PROBLEM — the same times repeat across activities: times sit in ONE fixed-width left column (tabular numerals, start over end) so they align down the page, and activity is a coloured spine + tinted chip on every row. Time reads down, activity reads by colour — the two never blur. Prefix: sf-batch-, and nothing else. Never sf-dash- / sf-idash- / sf-dev- / sf-user- / sf-plan-. The only non-prefixed selectors are the .sf-app shell overrides and the validation classes the Razor tag helpers emit — see note 7. ============================================================ IMPORTANT — four of these class names ALREADY EXIST in site.css, and one of them is still in live use by another module: .sf-batch-card site.css gives it border-left: 4px solid var(--primary), and Views/Members/Details.cshtml STILL USES IT on the member's batch card. The design's .sf-batch-card is the timetable's glass card, so defining it globally here would have re-skinned a Members screen. Every rule for it below is therefore scoped as `.sf-batch .sf-batch-card` — inside this module's root container and nowhere else. Do not un-scope it. .sf-batch site.css gives it border-left: 4px solid var(--primary). No view carries it any more, so this file's root container safely overrides it — cancelled with border: 0. .sf-batch-stopped unused by any view; this design says .sf-batch-row--stopped instead. Left alone. .sf-batch-note still used by Members Renew and _MemberFields; this design never uses the name. Left alone. ============================================================ Seven things this file does differently from the supplied design, all of them because it now lives inside the StudioFlow app shell: 1. --sf-batch-photo points at /img/mats-rolled.png, which now ships in wwwroot/img. It is written root-relative rather than relative: this file lives in /css/, so a bare url("img/x.png") would resolve to /css/img/x.png and 404. Lowercase and space-free for the same reason it is root-relative — Windows would forgive a mis-cased name and a Linux host would not, so the bug would only appear once deployed. 2. The bar variables are bound to the shell's real bar heights (--appbar-h 56px, --tabbar-h 64px, from site.css :root) and then zeroed inside .sf-app, which already pads the body past both fixed bars. Batches is a main tabbed page, so the bottom bar really is there. 3. The ground is painted by a fixed backdrop behind the whole page rather than as a block behind the column, so the wash reaches the screen edges and the design's background-attachment: fixed keeps working inside a scrolling shell. 4. container-type: inline-size is not declared. The design set it, but no @container query in this file reads it, and containment would make .sf-batch the containing block for the fixed backdrop in note 3. 5. The instructor