/* ============================================================
   File:        instructor-dashboard.css
   Project:     StudioFlow (Grace Aerobics & Fitness Center)
   Developer:   Janvi Vakhariya — V Techno Labs
   Created:     2026-08-31  (updated 2026-09-07)
   Purpose:     The Instructor Dashboard design system — a TASK screen, not a
                business overview. One dominant element (the class open right
                now) and everything else quiet.
   Copyright:   © 2026 V Techno Labs. All rights reserved.
                Proprietary software developed by V Techno Labs.
   ============================================================

   Theme: "light sunset" — pink/peach/violet wash behind white glass cards.

   Prefix: sf-idash- throughout, never sf-dash-, so this sheet cannot touch the
   admin dashboard and the admin sheet cannot touch this one. The two dashboards
   are separate screens for separate roles and must be able to change apart.

   A stylesheet rather than an inline <style> block on purpose: any at-rule here
   (@media, @keyframes, @supports) would have to be written @@ inside a .cshtml,
   and one missed escape is a build error nobody reads twice. This file has a
   @keyframes and a @media, so that is not hypothetical.

   Same conventions as dashboard.css:
   - colours as custom properties on .sf-idash
   - activity colours read from the ONE list in site.css
     (activity-aerobics / -yoga / -dance and their -text inks)
   - the photo appears in the header banner only
   - anchors reset with .sf-idash :where(a). The :where() sits on the ANCHOR,
     not the scope: written :where(.sf-idash a) it would score 0,0,0 and lose to
     Bootstrap Reboot's own `a { text-decoration: underline }` at 0,0,1. See the
     long note in dashboard.css, which this file deliberately mirrors.
   - inside .sf-app the shell already pads past both fixed bars, so
     .sf-app .sf-idash stands the clearance down

   TWO CHANGES from the supplied design, both noted where they occur:
   1. the --open aerobics gradient now uses the Aerobics teal (see below)
   2. an .sf-idash-actions rule so a POST form can sit in the action grid
   ============================================================ */

.sf-idash {
  /* The banner photo. Swap the crop by pointing this at another file. If it
     ever goes missing, put .sf-idash-banner-fallback on the banner element —
     a designed gradient in the studio's colours, not an empty dark box. */
  --sf-idash-photo: url("/img/wings.png");

  --sf-idash-wing: linear-gradient(90deg,#43a047,#d4b91e,#f57c00,#e53957,#c2185b,#7e57c2,#5c6f91);
  --sf-idash-ground: linear-gradient(165deg, #fdeef3 0%, #fde8d9 34%, #f3ecfa 70%, #e8f0fb 100%);
  /* Muted deepened from #6d6b58, which measured 4.05:1 against the darkest
     part of the shared ball-pit ground -- under the 4.5:1 minimum for any
     muted line that sits on the ground rather than inside a card. #615F4E
     measures 4.85:1 there and 6.45:1 on white. Deepening the ink was the fix,
     not a panel behind the text. */
  --sf-idash-ink: #2b2a1f; --sf-idash-muted: #615F4E;
  --sf-idash-glass: #ffffff; --sf-idash-glass-edge: rgba(43,42,31,.08);
  --sf-idash-glass-line: rgba(43,42,31,.12);
  --sf-idash-pink: var(--brand-pink, #c2185b);
  --sf-idash-good: #1d7a3f; --sf-idash-warn: #9a5b00; --sf-idash-bad: #c62828;

  /* The three class types, read from the one list in site.css, exactly as the
     admin sheet reads them. The -ink pair comes with them: the violet needs
     dark text, the teal and the amber carry their own. */
  --sf-idash-aer: var(--activity-aerobics, #17a89a);
  --sf-idash-yog: var(--activity-yoga, #f08a1d);
  --sf-idash-dan: var(--activity-dance, #9d76e8);
  --sf-idash-aer-ink: var(--activity-aerobics-text, #1e293b);
  --sf-idash-yog-ink: var(--activity-yoga-text, #1e293b);
  --sf-idash-dan-ink: var(--activity-dance-text, #241338);

  --sf-idash-radius: 20px; --sf-idash-tap: 48px;

  /* Bound to the app's own bar heights, so a standalone use of .sf-idash still
     clears them. Inside .sf-app they are zeroed below. */
  --sf-idash-top-bar: var(--appbar-h, 56px);
  --sf-idash-bottom-bar: var(--tabbar-h, 64px);

  box-sizing: border-box; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(var(--sf-idash-top-bar) + 14px) 16px calc(var(--sf-idash-bottom-bar) + 26px + env(safe-area-inset-bottom, 0px));
  background: var(--sf-idash-ground);
  color: var(--sf-idash-ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* Inside the app shell the layout has already done all three jobs: .sf-app pads
   the body past both fixed bars, .sf-content supplies the 1rem side gutter and
   caps the column at 640px, and .sf-frame paints the one shared ground. This
   screen used to layer two coloured washes of its own over that ground, which
   made the app's first page the only page that did not match the rest; it now
   takes the shared background unchanged. Repeating any of the three here would
   double the gap or hide the ground behind an opaque block, so this rule stands
   them all down. */
.sf-app .sf-idash {
  --sf-idash-top-bar: 0px;
  --sf-idash-bottom-bar: 0px;
  padding-left: 0; padding-right: 0;
  background: transparent;
}

.sf-idash *, .sf-idash *::before, .sf-idash *::after { box-sizing: border-box; }
.sf-idash :where(a) { color: inherit; text-decoration: none; }
.sf-idash :focus-visible { outline: 2px solid var(--sf-idash-pink); outline-offset: 2px; }
.sf-idash-ico { display: inline-block; width: 20px; height: 20px; flex: none; }
.sf-idash-go { display: inline-block; width: 16px; height: 16px; flex: none; opacity: .7; }

/* ---------- banner: slim. She knows who she is. ---------- */
.sf-idash-banner {
  position: relative; overflow: hidden;
  min-height: 128px; padding: 14px 16px 12px;
  display: flex; align-items: flex-end;
  border-radius: 24px; border: 1.5px solid rgba(255,255,255,.4);
  background:
    linear-gradient(180deg, rgba(32,22,44,.05) 18%, rgba(32,22,44,.6) 76%, rgba(32,22,44,.78) 100%),
    var(--sf-idash-photo) center 24% / cover no-repeat;
  box-shadow: 0 18px 36px -18px rgba(194,24,91,.5);
  color: #fff;
}
.sf-idash-banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: var(--sf-idash-wing); }
.sf-idash-banner-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sf-idash-avatar {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--sf-idash-pink);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 4px 12px -4px rgba(20,10,35,.6);
  color: #fff; font-size: 18px; font-weight: 800; line-height: 1;
  text-transform: uppercase; user-select: none;
}
.sf-idash-banner-idtext { min-width: 0; }
.sf-idash-banner-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; text-shadow: 0 1px 10px rgba(0,0,0,.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-idash-banner-date { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.sf-idash-banner-fallback {
  background:
    linear-gradient(180deg, rgba(32,22,44,.10) 18%, rgba(32,22,44,.62) 76%, rgba(32,22,44,.82) 100%),
    radial-gradient(120% 90% at 12% 8%, #17a89a 0%, rgba(23,168,154,0) 62%),
    radial-gradient(110% 85% at 92% 0%, #f08a1d 0%, rgba(240,138,29,0) 58%),
    linear-gradient(150deg, #c2185b 0%, #7b519b 52%, #241c33 100%);
}

/* ============================================================
   THE PRIMARY ELEMENT — .sf-idash-now
   The largest thing on screen, directly under the slim banner so it is on
   screen without scrolling. Three states, one per modifier: --open, --next,
   --done. The view renders exactly one.
   ============================================================ */
.sf-idash-now {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 16px 16px;
  border-radius: var(--sf-idash-radius);
  border: 1.5px solid rgba(255,255,255,.35);
  box-shadow: 0 16px 34px -16px rgba(194,24,91,.55);
  transform: rotate(-.7deg);   /* the funk: barely off-square, like the money cards */
}
.sf-idash-now::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--sf-idash-wing); }

/* --open: the class running RIGHT NOW, in its activity colour.
   White display text on the deep end of each gradient.

   CHANGED from the supplied design: the aerobics gradient arrived as
   linear-gradient(180deg, #FFB8B8C4, #72066EC1) — a translucent pink to magenta
   that is nowhere near the Aerobics teal, and unlike its yoga and dance
   siblings it did not read from the activity list at all. Left as it was, an
   Aerobics class open now would have painted pink while the same class showed
   teal in every chip, dot and badge elsewhere in the app. It now takes the same
   shape as the other two: the activity colour, darkened at the far end so white
   display text holds. Say the word if the pink was deliberate. */
.sf-idash-now--open { color: #fff; }
.sf-idash-now--open.sf-idash-now--aerobics { background: linear-gradient(160deg, #17a89a 0%, #0a5f57 78%); }
.sf-idash-now--open.sf-idash-now--yoga     { background: linear-gradient(160deg, #f08a1d 0%, #a85a02 78%); }
.sf-idash-now--open.sf-idash-now--dance    { background: linear-gradient(160deg, #9d76e8 0%, #5b3a9e 78%); }

.sf-idash-now-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-idash-live {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.45);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.sf-idash-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: sf-idash-pulse 1.6s ease-in-out infinite; }
@keyframes sf-idash-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .sf-idash-live-dot { animation: none; } }

.sf-idash-now-time { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.sf-idash-now-name { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.sf-idash-now-sub { margin: -4px 0 0; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.92); }

/* The action. 60px tall, full width, the loudest thing on the screen — white so
   it pops off any of the three gradients, label flush with a 24x24 icon slot. */
.sf-idash-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; margin-top: 4px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: #fff; color: var(--sf-idash-pink);
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 22px -10px rgba(20,10,35,.55);
}
.sf-idash-cta:active { transform: translateY(1px); filter: brightness(.95); }
.sf-idash-cta .sf-idash-ico { width: 24px; height: 24px; }
.sf-idash-cta-count { font-size: 13px; font-weight: 700; color: var(--sf-idash-muted); }

/* --next: nothing open yet. Quiet glass, the activity chip does the colour, and
   the when-line is the point. No CTA. */
.sf-idash-now--next {
  background: var(--sf-idash-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-color: var(--sf-idash-glass-edge);
  box-shadow: 0 14px 30px -16px rgba(194,24,91,.4);
  color: var(--sf-idash-ink);
}
.sf-idash-now-label { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--sf-idash-muted); }
.sf-idash-now--next .sf-idash-now-name { font-size: 22px; text-shadow: none; }
.sf-idash-now--next .sf-idash-now-sub { color: var(--sf-idash-muted); }
.sf-idash-next-row { display: flex; align-items: center; gap: 12px; }
.sf-idash-next-chip {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; min-height: 50px; border-radius: 14px;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1;
  box-shadow: 0 6px 12px -7px rgba(20,10,35,.7);
  background: var(--sf-idash-aer); color: var(--sf-idash-aer-ink);
}
.sf-idash-next-chip small { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.sf-idash-now--yoga  .sf-idash-next-chip { background: var(--sf-idash-yog); color: var(--sf-idash-yog-ink); }
.sf-idash-now--dance .sf-idash-next-chip { background: var(--sf-idash-dan); color: var(--sf-idash-dan-ink); }
.sf-idash-opens { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--sf-idash-pink); }

/* --done: the reward. Glass again, but the badge is a full wing-gradient ring
   around a solid green check disc — unmistakably "finished", visible from
   arm's length. */
.sf-idash-now--done {
  background: var(--sf-idash-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-color: var(--sf-idash-glass-edge);
  box-shadow: 0 14px 30px -16px rgba(194,24,91,.4);
  color: var(--sf-idash-ink);
  align-items: center; text-align: center; padding: 22px 16px 20px;
  transform: rotate(.7deg);
}
.sf-idash-done-badge {
  width: 74px; height: 74px; border-radius: 50%; padding: 5px;
  background: var(--sf-idash-wing);
  display: grid; place-items: center;
  box-shadow: 0 10px 22px -10px rgba(194,24,91,.55);
}
.sf-idash-done-badge-in {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(155deg, #3cae68, #1e7a44);
  display: grid; place-items: center; color: #fff;
}
.sf-idash-done-badge-in .sf-idash-ico { width: 28px; height: 28px; }
.sf-idash-now--done .sf-idash-now-name { font-size: 22px; text-shadow: none; }
.sf-idash-now--done .sf-idash-now-sub { color: var(--sf-idash-muted); margin: 0; }

/* ---------- section heading ---------- */
.sf-idash-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 2px -6px; }
.sf-idash-h-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.sf-idash-h-side { font-size: 13px; font-weight: 700; color: var(--sf-idash-muted); white-space: nowrap; }

/* ---------- glass card shell ---------- */
.sf-idash-card {
  background: var(--sf-idash-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1.5px solid var(--sf-idash-glass-edge);
  border-radius: var(--sf-idash-radius);
  box-shadow: 0 14px 30px -16px rgba(194,24,91,.4);
  padding: 6px 16px; position: relative; overflow: hidden;
}
.sf-idash-note { margin: 10px 0; font-size: 14px; color: var(--sf-idash-muted); }

/* ---------- today's classes: glance rows ----------
   Deliberately quieter than the admin batch rows: no meters, no present/absent
   maths. Time, dot, name, one state chip. */
.sf-idash-row {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--sf-idash-tap); padding: 9px 0;
  border-top: 1px solid var(--sf-idash-glass-line);
}
.sf-idash-row:first-of-type { border-top: 0; }
.sf-idash-row-time { flex: none; width: 58px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-idash-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-idash-aer); }
.sf-idash-dot--yoga  { background: var(--sf-idash-yog); }
.sf-idash-dot--dance { background: var(--sf-idash-dan); }
.sf-idash-row-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-idash-row--off .sf-idash-row-name { text-decoration: line-through; color: var(--sf-idash-muted); }
.sf-idash-row--off .sf-idash-dot { background: #b7b5a4; }

/* One chip carries the row's whole story. */
.sf-idash-state {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.sf-idash-state-ico { display: inline-block; width: 14px; height: 14px; flex: none; }
.sf-idash-state--marked  { background: #e3f3e8; color: var(--sf-idash-good); }
.sf-idash-state--open    { background: var(--sf-idash-pink); color: #fff; }
.sf-idash-state--pending { background: #fdf0d7; color: var(--sf-idash-warn); }
.sf-idash-state--locked  { background: rgba(43,42,31,.08); color: var(--sf-idash-muted); }
.sf-idash-state--off     { background: rgba(43,42,31,.08); color: var(--sf-idash-muted); }

/* ---------- my month: one quiet line, hers only ---------- */
.sf-idash-month {
  display: flex; align-items: center; gap: 10px;
  margin: -2px 2px; font-size: 14px; color: var(--sf-idash-muted);
}
.sf-idash-month strong { color: var(--sf-idash-ink); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.sf-idash-month img { display: block; flex: none; }

/* ---------- ending soon ---------- */
.sf-idash-member {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--sf-idash-tap); padding: 9px 0;
  border-top: 1px solid var(--sf-idash-glass-line);
}
.sf-idash-member:first-of-type { border-top: 0; }
.sf-idash-member-text { flex: 1; min-width: 0; }
.sf-idash-member-name { display: block; font-size: 15px; font-weight: 700; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-idash-member-sub { display: block; font-size: 12px; color: var(--sf-idash-muted); }
.sf-idash-member-when { flex: none; font-size: 12px; font-weight: 800; color: var(--sf-idash-warn); white-space: nowrap; }
.sf-idash-member-when--overdue { color: var(--sf-idash-bad); }

/* ---------- the two small actions ---------- */
.sf-idash-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.sf-idash-act {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 12px; border-radius: 16px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 800; white-space: nowrap;
}
.sf-idash-act--primary {
  border: 0; background: linear-gradient(155deg, #e0447a, var(--sf-idash-pink));
  color: #fff; box-shadow: 0 12px 24px -12px rgba(194,24,91,.7);
  transform: rotate(-.6deg);
}
.sf-idash-act--ghost {
  border: 1.5px solid var(--sf-idash-glass-edge);
  background: var(--sf-idash-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--sf-idash-ink); box-shadow: 0 10px 20px -12px rgba(20,10,35,.35);
  transform: rotate(.6deg);
}
.sf-idash-act:active { transform: translateY(1px); filter: brightness(.95); }

/* ADDED to the supplied design. Log out is a POST with an antiforgery token, so
   it can only be a <form> wrapping a <button> — it cannot be an <a> like the
   design's two action slots assumed. The form becomes the grid cell and the
   button fills it, so the pair still sits as two equal halves. */
.sf-idash-actions form { margin: 0; display: flex; }
.sf-idash-actions form .sf-idash-act { width: 100%; }

/* ---------- footer ---------- */
/* Only the wingbar. The tagline and the credit under it come from the shared
   _SiteFooter partial, which the layout already renders on every page, so
   printing them here as well would say "Music on. Chaos off." twice on one
   screen. The two rules below are kept for a standalone use of this sheet. */
.sf-idash-foot { text-align: center; padding: 2px 2px 0; }
.sf-idash-wingbar {
  height: 4px; border: 0; width: 132px; margin: 0 auto 10px;
  border-radius: 999px; opacity: 1;   /* opacity restated: Bootstrap Reboot ships hr { opacity: .25 } */
  background: var(--sf-idash-wing);
}
.sf-idash-foot-tag { margin: 0; font-size: 14px; font-weight: 800; color: var(--sf-idash-pink); }
.sf-idash-foot-credit { margin: 3px 0 0; font-size: 12px; color: var(--sf-idash-muted); }