/* ==========================================================================
   Staff portal (interns & employees) — mobile-first, installable on iOS.
   Self-contained: does NOT load styles.css, so the desktop app layout rules
   can never fight the phone layout. Palette matches the PULSE dark theme.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand, sampled straight from the app icon's gradient. */
  --sf-brand-sky:  #ade8fc;
  --sf-brand:      #5b6dfb;
  --sf-brand-deep: #6c4ce9;

  --sf-primary:      #4f5bf0;   /* buttons, active state */
  --sf-primary-ink:  #ffffff;   /* text ON primary */
  --sf-primary-text: #4338ca;   /* primary used as text on a light surface */
  --sf-primary-dim:  rgba(79, 91, 240, .10);
  --sf-primary-line: rgba(79, 91, 240, .38);
  --sf-primary-ring: rgba(79, 91, 240, .16);

  /* Semantic. Text tones are picked to stay readable on light surfaces. */
  --sf-success:     #0b8457;
  --sf-success-dim: rgba(11, 132, 87, .12);
  --sf-warning:     #b45309;
  --sf-warning-dim: rgba(245, 158, 11, .16);
  --sf-danger:      #d92d20;
  --sf-danger-dim:  rgba(217, 45, 32, .10);
  --sf-danger-ink:  #ffffff;
  --sf-info:        #1d4ed8;
  --sf-info-dim:    rgba(29, 78, 216, .10);
  --sf-muted-dim:   rgba(110, 120, 150, .11);

  /* Surfaces */
  --sf-bg:         #f4f5fa;
  --sf-card:       #ffffff;
  --sf-card-solid: #ffffff;
  --sf-input-bg:   #ffffff;
  --sf-track:      rgba(110, 120, 150, .16);
  --sf-line:       #e3e6f0;
  --sf-line-soft:  #edeff6;

  --sf-appbar-bg: rgba(255, 255, 255, .88);
  --sf-tabbar-bg: rgba(255, 255, 255, .94);
  --sf-scrim:     rgba(20, 22, 45, .42);
  --sf-modal-bg:  rgba(244, 245, 250, .99);
  --sf-shadow-lg: 0 10px 34px rgba(23, 26, 50, .16);

  /* Text */
  --sf-text:   #16192b;
  --sf-text-2: #565d75;
  --sf-text-3: #868da3;

  /* Back-compat aliases: templates carry inline style="color:var(--sf-teal)"
     and friends, so the old names stay valid and simply follow the theme. */
  --sf-teal:      var(--sf-primary);
  --sf-teal-dim:  var(--sf-primary-dim);
  --sf-gold:      var(--sf-warning);
  --sf-green:     var(--sf-success);
  --sf-green-dim: var(--sf-success-dim);
  --sf-red:       var(--sf-danger);
  --sf-red-dim:   var(--sf-danger-dim);
  --sf-blue:      var(--sf-info);
  --sf-blue-dim:  var(--sf-info-dim);
  --sf-void:      var(--sf-bg);
  --sf-deep:      var(--sf-bg);

  --sf-r: 16px;
  --sf-r-sm: 11px;
  --sf-tabbar: 62px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --sf-primary:      #818cff;
  --sf-primary-ink:  #0b0e20;
  --sf-primary-text: #9aa3ff;
  --sf-primary-dim:  rgba(129, 140, 255, .14);
  --sf-primary-line: rgba(129, 140, 255, .42);
  --sf-primary-ring: rgba(129, 140, 255, .22);

  --sf-success:     #4edea3;
  --sf-success-dim: rgba(78, 222, 163, .13);
  --sf-warning:     #e8c07a;
  --sf-warning-dim: rgba(232, 192, 122, .13);
  --sf-danger:      #f08a9e;
  --sf-danger-dim:  rgba(240, 138, 158, .13);
  --sf-danger-ink:  #2a0d14;
  --sf-info:        #7cc4e8;
  --sf-info-dim:    rgba(124, 196, 232, .13);
  --sf-muted-dim:   rgba(154, 162, 189, .12);

  --sf-bg:         #0d0f1c;
  --sf-card:       #171a2c;
  --sf-card-solid: #171a2c;
  --sf-input-bg:   #10132444;
  --sf-track:      rgba(154, 162, 189, .16);
  --sf-line:       rgba(150, 160, 220, .18);
  --sf-line-soft:  rgba(150, 160, 220, .10);

  --sf-appbar-bg: rgba(13, 15, 28, .88);
  --sf-tabbar-bg: rgba(18, 21, 38, .94);
  --sf-scrim:     rgba(0, 0, 0, .58);
  --sf-modal-bg:  rgba(9, 11, 22, .985);
  --sf-shadow-lg: 0 10px 34px rgba(0, 0, 0, .55);

  --sf-text:   #e9ecf7;
  --sf-text-2: #9aa2bd;
  --sf-text-3: #6f7794;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--sf-bg);
  color: var(--sf-text);
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior-y: none;
  padding-top: env(safe-area-inset-top);
}

a { color: inherit; text-decoration: none; }

/* --- App bar --------------------------------------------------------- */

.sf-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--sf-appbar-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--sf-line-soft);
}

.sf-appbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  min-height: 56px;
}

.sf-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.sf-brand-mark {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: block;
  object-fit: cover;
}

.sf-brand-text {
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-appbar-btn {
  position: relative;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  border: 1px solid var(--sf-line-soft);
  background: var(--sf-card);
  color: var(--sf-text-2);
  font-size: 15px;
}

.sf-dot {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--sf-red);
  color: var(--sf-danger-ink);
  font-size: 10px;
  font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--sf-void);
}

.sf-back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--sf-text-2);
  font-size: 14px;
  font-weight: 500;
}

/* --- Layout ---------------------------------------------------------- */

.sf-main {
  padding: 16px 16px calc(var(--sf-tabbar) + 28px + env(safe-area-inset-bottom));
  max-width: 720px;
  margin: 0 auto;
}

.sf-section-title {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sf-text-3);
  margin: 26px 2px 10px;
}
.sf-section-title:first-child { margin-top: 4px; }

.sf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* --- Cards ----------------------------------------------------------- */

.sf-card {
  background: var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  padding: 16px;
  margin-bottom: 12px;
}

.sf-card-tight { padding: 13px 14px; }

.sf-card-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 3px;
  letter-spacing: -.01em;
}

.sf-muted { color: var(--sf-text-2); font-size: 13px; }
.sf-dim { color: var(--sf-text-3); font-size: 12px; }

/* --- Stat tiles ------------------------------------------------------ */

.sf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.sf-stat {
  background: var(--sf-card);
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-r-sm);
  padding: 13px 12px;
}

.sf-stat-val {
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.sf-stat-lbl {
  font-size: 11px;
  color: var(--sf-text-3);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --- Buttons --------------------------------------------------------- */

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: inherit;
  font-weight: 620;
  font-size: 15px;
  cursor: pointer;
  background: var(--sf-primary);
  color: var(--sf-primary-ink);
  transition: transform .12s ease, opacity .12s ease;
}

.sf-btn:active { transform: scale(.985); }
.sf-btn[disabled] { opacity: .45; pointer-events: none; }

.sf-btn-ghost {
  background: transparent;
  border-color: var(--sf-line);
  color: var(--sf-text);
}

.sf-btn-danger { background: var(--sf-danger); color: var(--sf-danger-ink); }

.sf-btn-sm {
  width: auto;
  min-height: 38px;
  padding: 8px 15px;
  font-size: 13.5px;
  border-radius: 10px;
}

/* --- Badges ---------------------------------------------------------- */

.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--sf-primary-dim);
  color: var(--sf-primary-text);
  white-space: nowrap;
}

.sf-badge-ok      { background: var(--sf-green-dim); color: var(--sf-green); }
.sf-badge-warn    { background: var(--sf-warning-dim); color: var(--sf-warning); }
.sf-badge-danger  { background: var(--sf-red-dim); color: var(--sf-red); }
.sf-badge-info    { background: var(--sf-blue-dim); color: var(--sf-blue); }
.sf-badge-muted   { background: var(--sf-muted-dim); color: var(--sf-text-2); }

/* --- Lists ----------------------------------------------------------- */

.sf-list { display: flex; flex-direction: column; gap: 9px; }

.sf-item {
  display: block;
  background: var(--sf-card);
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-r-sm);
  padding: 13px 14px;
}

.sf-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sf-item-title {
  font-weight: 570;
  font-size: 14.5px;
  letter-spacing: -.005em;
}

.sf-item-meta {
  color: var(--sf-text-3);
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.sf-empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--sf-text-3);
}

.sf-empty i { font-size: 30px; opacity: .35; display: block; margin-bottom: 12px; }

/* --- Forms ----------------------------------------------------------- */

.sf-field { margin-bottom: 13px; }

.sf-label {
  display: block;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--sf-text-2);
  margin-bottom: 6px;
}

.sf-input, .sf-select, .sf-textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--sf-line);
  background: var(--sf-input-bg);
  color: var(--sf-text);
  font: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  appearance: none;
  -webkit-appearance: none;
}

.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
  outline: none;
  border-color: var(--sf-primary);
  box-shadow: 0 0 0 3px var(--sf-primary-ring);
}

.sf-textarea { min-height: 92px; resize: vertical; }

.sf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ba3ae'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  padding-right: 38px;
}

.sf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* --- Alerts ---------------------------------------------------------- */

.sf-alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  margin-bottom: 12px;
  border: 1px solid;
  background: var(--sf-blue-dim);
  border-color: color-mix(in srgb, var(--sf-info) 34%, transparent);
  color: var(--sf-blue);
}

.sf-alert-error, .sf-alert-danger {
  background: var(--sf-red-dim);
  border-color: color-mix(in srgb, var(--sf-danger) 34%, transparent);
  color: var(--sf-red);
}

.sf-alert-success {
  background: var(--sf-green-dim);
  border-color: color-mix(in srgb, var(--sf-success) 34%, transparent);
  color: var(--sf-green);
}

.sf-alert-warning {
  background: var(--sf-warning-dim);
  border-color: color-mix(in srgb, var(--sf-warning) 34%, transparent);
  color: var(--sf-gold);
}

/* --- Bottom tab bar -------------------------------------------------- */

.sf-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--sf-tabbar-bg);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--sf-line-soft);
  padding-bottom: env(safe-area-inset-bottom);
}

.sf-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--sf-tabbar);
  border: 0;
  background: none;
  font: inherit;
  color: var(--sf-text-3);
  font-size: 10px;
  font-weight: 550;
  cursor: pointer;
  letter-spacing: .01em;
}

.sf-tab i { font-size: 17px; }
.sf-tab.active { color: var(--sf-primary-text); }

/* --- More sheet ------------------------------------------------------ */

.sf-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--sf-scrim);
  backdrop-filter: blur(2px);
}

.sf-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--sf-card-solid);
  border-top: 1px solid var(--sf-line);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 82vh;
  overflow-y: auto;
  animation: sf-rise .22s cubic-bezier(.32, .72, 0, 1);
}

@keyframes sf-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sf-sheet-grip {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--sf-line);
  margin: 0 auto 16px;
  cursor: pointer;
  /* Small bar, finger-sized tap target. */
  padding: 0;
  box-sizing: content-box;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  background-clip: content-box;
  margin-top: -12px;
  margin-bottom: 4px;
}

.sf-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--sf-line-soft);
}

img.sf-avatar { object-fit: cover; display: block; }

.sf-avatar {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--sf-teal-dim);
  color: var(--sf-primary-text);
  font-weight: 680;
  font-size: 17px;
}

.sf-sheet-name { font-weight: 600; font-size: 15px; }
.sf-sheet-sub { color: var(--sf-text-3); font-size: 12.5px; }

.sf-sheet-links { display: flex; flex-direction: column; }

.sf-sheet-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  font-size: 15px;
  border-bottom: 1px solid var(--sf-line-soft);
}

.sf-sheet-links a:last-child { border-bottom: 0; }
.sf-sheet-links a i { width: 20px; text-align: center; color: var(--sf-text-3); font-size: 15px; }
.sf-sheet-danger { color: var(--sf-red); }
.sf-sheet-danger i { color: var(--sf-red) !important; }

/* --- Login ----------------------------------------------------------- */

.sf-login-body {
  --sf-login-bg: #f6f6fc;
  --sf-login-blob-1: rgba(120, 150, 255, .42);
  --sf-login-blob-2: rgba(196, 160, 255, .34);
  --sf-login-arc: rgba(150, 160, 230, .30);
  --sf-login-card: rgba(255, 255, 255, .92);
  --sf-login-card-line: rgba(255, 255, 255, .9);
  --sf-login-shadow: 0 30px 70px -20px rgba(80, 90, 170, .28), 0 2px 6px rgba(80, 90, 170, .06);
  background: var(--sf-login-bg);
  overflow-x: hidden;
}

[data-theme="dark"] .sf-login-body {
  --sf-login-bg: #0d0f1c;
  --sf-login-blob-1: rgba(90, 110, 240, .28);
  --sf-login-blob-2: rgba(150, 100, 240, .22);
  --sf-login-arc: rgba(150, 160, 230, .16);
  --sf-login-card: rgba(23, 26, 44, .9);
  --sf-login-card-line: rgba(150, 160, 220, .16);
  --sf-login-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}

/* Decorative backdrop: soft blobs, thin arcs, a few floating orbs. */
.sf-login-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sf-login-bg span { position: absolute; border-radius: 50%; }

.sf-blob { filter: blur(2px); }
.sf-blob-a {
  width: 62vmax; height: 62vmax; left: -24vmax; bottom: -30vmax;
  background: radial-gradient(circle at 35% 35%, var(--sf-login-blob-1), var(--sf-login-blob-2) 45%, transparent 70%);
}
.sf-blob-b {
  width: 46vmax; height: 46vmax; right: -16vmax; top: -18vmax;
  background: radial-gradient(circle at 40% 45%, var(--sf-login-blob-1), var(--sf-login-blob-2) 50%, transparent 72%);
}
.sf-arc { border: 1.5px solid var(--sf-login-arc); }
.sf-arc-a { width: 80vmax; height: 80vmax; left: -46vmax; top: 24vh; }
.sf-arc-b { width: 44vmax; height: 44vmax; right: -12vmax; top: 6vh; border-color: transparent transparent var(--sf-login-arc) var(--sf-login-arc); transform: rotate(-20deg); }

.sf-orb {
  background: radial-gradient(circle at 32% 30%, #ffffff, rgba(140, 165, 255, .85) 45%, rgba(200, 150, 255, .8));
  box-shadow: 0 18px 40px -10px rgba(110, 120, 240, .45);
  animation: sf-float 7s ease-in-out infinite;
}
.sf-orb-a { width: 104px; height: 104px; left: 17%; top: 7%; opacity: .75; }
.sf-orb-b { width: 58px; height: 58px; right: 9%; bottom: 25%; opacity: .7; animation-delay: -3s; }
.sf-dot { width: 16px; height: 16px; right: 20%; top: 33%; background: rgba(120, 130, 240, .55); }

@keyframes sf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .sf-orb { animation: none; } }

.sf-auth {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
}
/* The offline page reuses .sf-auth without a card. */
.sf-auth > :not(.sf-auth-card) { width: 100%; max-width: 420px; }

.sf-auth-card {
  width: 100%;
  max-width: 580px;
  padding: 48px 56px 40px;
  border-radius: 32px;
  background: var(--sf-login-card);
  border: 1px solid var(--sf-login-card-line);
  box-shadow: var(--sf-login-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.sf-auth-brand { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.sf-auth-mark {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: block;
  object-fit: cover;
  box-shadow: 0 8px 20px -6px rgba(90, 90, 230, .45);
}
.sf-auth-brand-name {
  padding-left: 20px;
  border-left: 1px solid var(--sf-line);
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sf-text-2);
}

.sf-auth h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.sf-auth-sub { color: var(--sf-text-2); font-size: 18px; line-height: 1.55; margin: 0 0 30px; }

.sf-auth .sf-field { margin-bottom: 20px; }
.sf-auth .sf-label { font-size: 15px; font-weight: 600; color: var(--sf-text); margin-bottom: 9px; }

.sf-auth-input { position: relative; }
.sf-auth-input > i {
  position: absolute; left: 19px; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--sf-text-3); pointer-events: none;
}
.sf-auth-input .sf-input {
  height: 58px;
  padding-left: 54px;
  border-radius: 13px;
  font-size: 16px;
}
.sf-auth-input .sf-input::placeholder { color: var(--sf-text-3); }
.sf-auth-input .sf-input[type="password"],
.sf-auth-input .sf-input#password { padding-right: 54px; }
.sf-auth-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--sf-text-2);
  font-size: 18px;
  cursor: pointer;
}
.sf-auth-eye:hover { background: var(--sf-primary-dim); color: var(--sf-primary-text); }
.sf-auth-eye:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 1px; }

.sf-auth-submit {
  min-height: 60px;
  margin-top: 4px;
  border-radius: 13px;
  font-size: 18px;
  background: linear-gradient(90deg, #4a63f5 0%, #5b5cf2 55%, #8a4ff0 100%);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(80, 90, 240, .7);
}
.sf-auth-submit:hover { filter: brightness(1.05); }

.sf-auth-install {
  min-height: 60px;
  margin-top: 22px;
  border-radius: 13px;
  font-size: 17px;
  background: var(--sf-card);
}
.sf-auth-install i { font-size: 19px; }

.sf-auth-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 40px 0 0;
  font-size: 14px;
  color: var(--sf-text-2);
  white-space: nowrap;
}
.sf-auth-foot::before, .sf-auth-foot::after {
  content: ''; flex: 1; height: 1px; background: var(--sf-line);
}

@media (max-width: 560px) {
  .sf-auth-card { padding: 32px 22px 26px; border-radius: 26px; }
  .sf-auth-mark { width: 52px; height: 52px; border-radius: 15px; }
  .sf-auth-brand { gap: 14px; margin-bottom: 20px; }
  .sf-auth-brand-name { padding-left: 14px; font-size: 12px; }
  .sf-auth h1 { font-size: 32px; }
  .sf-auth-sub { font-size: 15.5px; margin-bottom: 24px; }
  .sf-auth-input .sf-input, .sf-auth-submit, .sf-auth-install { height: 54px; min-height: 54px; }
  .sf-auth-submit { font-size: 16.5px; }
  .sf-auth-install { font-size: 15.5px; margin-top: 16px; }
  .sf-auth-foot { margin-top: 28px; font-size: 13px; gap: 12px; }
  .sf-orb-a { width: 64px; height: 64px; left: 6%; top: 3%; }
  .sf-orb-b, .sf-dot { display: none; }
}

/* --- Attendance ------------------------------------------------------ */

.sf-att-hero {
  text-align: center;
  padding: 26px 18px 22px;
  background: radial-gradient(120% 90% at 50% 0%, var(--sf-primary-dim), transparent 70%), var(--sf-card);
  border: 1px solid var(--sf-line);
  border-radius: 20px;
  margin-bottom: 14px;
}

.sf-att-ring {
  width: 104px; height: 104px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 16px;
  border: 2px solid var(--sf-line);
  background: var(--sf-bg);
  font-size: 34px;
  color: var(--sf-text-3);
}

.sf-att-ring.in {
  border-color: color-mix(in srgb, var(--sf-success) 55%, transparent);
  color: var(--sf-success);
  box-shadow: 0 0 0 8px var(--sf-success-dim);
}

.sf-att-ring.done {
  border-color: color-mix(in srgb, var(--sf-info) 55%, transparent);
  color: var(--sf-info);
  box-shadow: 0 0 0 8px var(--sf-info-dim);
}

.sf-att-state { font-size: 19px; font-weight: 640; letter-spacing: -.015em; }
.sf-att-sub { color: var(--sf-text-2); font-size: 13.5px; margin-top: 5px; }

.sf-att-times {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--sf-line-soft);
  align-items: center;
}

.sf-att-divider { background: var(--sf-line-soft); height: 32px; }
.sf-att-time { font-size: 17px; font-weight: 620; letter-spacing: -.01em; }

/* Step flow */

.sf-steps { display: flex; flex-direction: column; gap: 10px; }

.sf-step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid var(--sf-line-soft);
  border-radius: 13px;
  background: var(--sf-card);
}

.sf-step.active { border-color: var(--sf-primary-line); background: var(--sf-primary-dim); }
.sf-step.done   { border-color: color-mix(in srgb, var(--sf-success) 36%, transparent); }

.sf-step-num {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sf-muted-dim);
  color: var(--sf-text-3);
  font-size: 12.5px;
  font-weight: 680;
}

.sf-step.active .sf-step-num { background: var(--sf-primary-dim); color: var(--sf-primary-text); }
.sf-step.done .sf-step-num   { background: var(--sf-success-dim); color: var(--sf-success); }

.sf-step-body { min-width: 0; flex: 1; }
.sf-step-title { font-size: 14px; font-weight: 570; }
.sf-step-hint { font-size: 12px; color: var(--sf-text-3); margin-top: 2px; }

/* Camera / scanner surfaces */

.sf-cam {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 62vh;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--sf-line);
  margin-bottom: 12px;
}

.sf-cam video, .sf-cam canvas, .sf-cam img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.sf-cam-selfie video { transform: scaleX(-1); }

.sf-scan-frame {
  position: absolute;
  inset: 17%;
  border: 2px solid var(--sf-primary);
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
  pointer-events: none;
}

#sfQrReader { width: 100%; border-radius: 18px; overflow: hidden; }
#sfQrReader video { width: 100% !important; border-radius: 18px; display: block; }
#sfQrReader img[alt="Info icon"] { display: none; }

.sf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--sf-modal-bg);
  overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}

.sf-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sf-modal-title { font-size: 17px; font-weight: 640; }

.sf-modal-close {
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid var(--sf-line);
  background: var(--sf-card);
  color: var(--sf-text-2);
  font-size: 15px;
  cursor: pointer;
}

.sf-spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(127, 127, 127, .35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: sf-spin .7s linear infinite;
}

@keyframes sf-spin { to { transform: rotate(360deg); } }

/* --- Misc ------------------------------------------------------------ */

.sf-kv {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sf-line-soft);
  font-size: 14px;
}

.sf-kv:last-child { border-bottom: 0; }
.sf-kv-k { color: var(--sf-text-2); }
.sf-kv-v { font-weight: 560; text-align: right; }
.sf-kv-total { font-size: 17px; font-weight: 680; color: var(--sf-primary-text); }

.sf-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--sf-track);
  overflow: hidden;
  margin-top: 8px;
}

.sf-bar-fill { height: 100%; border-radius: 3px; background: var(--sf-primary); }

.sf-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.sf-chips::-webkit-scrollbar { display: none; }

.sf-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--sf-line);
  background: var(--sf-card);
  color: var(--sf-text-2);
  font-size: 13px;
  font-weight: 540;
  white-space: nowrap;
}

.sf-chip.active { background: var(--sf-primary-dim); border-color: var(--sf-primary-line); color: var(--sf-primary-text); }

.sf-unread { border-left: 2px solid var(--sf-primary); }

@media (min-width: 640px) {
  .sf-main { padding-left: 24px; padding-right: 24px; }
}


/* --- Install to home screen prompt ------------------------------------ */

.sf-install {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(var(--sf-tabbar) + 10px + env(safe-area-inset-bottom));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 15px;
  background: var(--sf-card-solid);
  border: 1px solid var(--sf-primary-line);
  box-shadow: var(--sf-shadow-lg);
  animation: sf-rise-in .28s cubic-bezier(.32, .72, 0, 1);
}

@keyframes sf-rise-in {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.sf-install-icon {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--sf-primary-dim);
  color: var(--sf-primary-text);
  font-size: 15px;
}

.sf-install-body { flex: 1; min-width: 0; }
.sf-install-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.sf-install-sub { font-size: 12px; color: var(--sf-text-3); margin-top: 1px; }

.sf-install-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.sf-install-x {
  width: 30px; height: 30px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--sf-text-3);
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 359px) {
  .sf-install-sub { display: none; }
}

/* ---- Daily update -------------------------------------------------------
   Each report is three labelled blocks; the blocker one is tinted so a stuck
   person is visible without reading the whole card. */
.sf-dr-block { margin-top: 10px; }

.sf-dr-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sf-text-3);
  margin-bottom: 3px;
}
.sf-dr-label i { margin-right: 5px; }

.sf-dr-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sf-text-2);
  white-space: normal;
}

.sf-dr-blocked {
  background: var(--sf-warning-dim);
  border-radius: 10px;
  padding: 9px 11px;
}
.sf-dr-blocked .sf-dr-label { color: var(--sf-warning); }

.sf-dr-comment {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--sf-primary-dim);
  font-size: 13px;
  line-height: 1.5;
  color: var(--sf-text-2);
}
.sf-dr-comment-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--sf-primary-text);
  margin-bottom: 3px;
}

.sf-dr-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}