/* ========================================================================== 
   ROSTER NINJA THEME — V2
   --------------------------------------------------------------------------
   High-contrast commercial skin for the existing OUT application.
   The original OUT styling remains untouched in styles.css.
   Switch branding.js APP_BRAND between "out" and "rosterNinja".
   ========================================================================== */

html[data-theme="rosterNinja"] {
  --rn-navy-950: #06101c;
  --rn-navy-900: #0a1726;
  --rn-navy-850: #0d1d2f;
  --rn-navy-800: #11263a;
  --rn-slate-700: #27425c;
  --rn-canvas: #eef4f9;
  --rn-surface: #ffffff;
  --rn-surface-2: #f7fbfe;
  --rn-text: #102236;
  --rn-text-dark: #0a1828;
  --rn-muted: #687d91;
  --rn-muted-dark: #a8b9ca;
  --rn-blue: #2ea8f4;
  --rn-blue-strong: #168fe8;
  --rn-blue-deep: #0c6fc4;
  --rn-blue-soft: #e3f4ff;
  --rn-cyan: #50d4ff;
  --rn-line: #d7e2eb;
  --rn-line-strong: #bfd3e2;
  --rn-shadow: 0 8px 24px rgba(32, 64, 92, .10);
  --rn-shadow-strong: 0 14px 36px rgba(20, 48, 76, .14);

  --orange: var(--rn-blue);
  --orange-dark: var(--rn-blue-strong);
  --orange-soft: var(--rn-blue-soft);
  --charcoal: var(--rn-navy-900);
  --charcoal-2: var(--rn-navy-800);
  --navy: var(--rn-navy-900);
  --navy-2: var(--rn-navy-800);
  --blue: var(--rn-blue);
  --blue-light: var(--rn-blue-soft);
  --gold: var(--rn-blue);
  --ink: var(--rn-text);
  --muted: var(--rn-muted);
  --line: var(--rn-line);
  --surface: var(--rn-surface);
  --canvas: var(--rn-canvas);
  --radius: 14px;
  --shadow: var(--rn-shadow);
  color: var(--rn-text);
  background: var(--rn-canvas);
}

html[data-theme="rosterNinja"] body {
  color: var(--rn-text);
  background:
    radial-gradient(circle at 84% -8%, rgba(46,168,244,.10), transparent 34rem),
    linear-gradient(180deg, #f7fbff 0%, var(--rn-canvas) 100%);
}

/* Brand ----------------------------------------------------------------- */
html[data-theme="rosterNinja"] .brand-mark.image-brand-mark {
  width: 184px;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  transform: none;
  display: block;
}
html[data-theme="rosterNinja"] .brand-mark.image-brand-mark.small { width: 150px; margin: 0; }
html[data-theme="rosterNinja"] .brand-mark.image-brand-mark img { display:block; width:100%; height:auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.16)); }
html[data-theme="rosterNinja"] .brand-row { gap: .75rem; padding-inline: .25rem; }
html[data-theme="rosterNinja"] .brand-row > div:last-child strong { font-size: .9rem; color:#fff; }
html[data-theme="rosterNinja"] .brand-row span { color: #b9c8d8; }

/* Login ----------------------------------------------------------------- */
html[data-theme="rosterNinja"] .login-shell {
  background:
    radial-gradient(circle at 14% 0%, rgba(46,168,244,.20), transparent 28rem),
    linear-gradient(145deg, #071321 0%, #0b1b2d 58%, #102b43 100%);
}
html[data-theme="rosterNinja"] .login-panel {
  color: var(--rn-text);
  background: rgba(255,255,255,.98);
  border: 1px solid #d6e5ef;
  border-top: 5px solid var(--rn-blue);
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
html[data-theme="rosterNinja"] .login-panel .brand-mark.image-brand-mark { width:min(100%,310px); margin:0 auto 1rem; filter: invert(1); }
html[data-theme="rosterNinja"] #login-title { display:none; }
html[data-theme="rosterNinja"] .login-panel > .eyebrow,
html[data-theme="rosterNinja"] .eyebrow { color: var(--rn-blue-deep); }
html[data-theme="rosterNinja"] .login-panel .muted { color: var(--rn-muted); }
html[data-theme="rosterNinja"] input,
html[data-theme="rosterNinja"] select,
html[data-theme="rosterNinja"] textarea { color:var(--rn-text); background:#fff; border-color:#bfd0dc; }
html[data-theme="rosterNinja"] input:focus,
html[data-theme="rosterNinja"] select:focus,
html[data-theme="rosterNinja"] textarea:focus,
html[data-theme="rosterNinja"] button:focus-visible { outline-color:rgba(46,168,244,.23); border-color:var(--rn-blue); }

/* Shell / navigation ---------------------------------------------------- */
html[data-theme="rosterNinja"] .app-shell { color:var(--rn-text); background:transparent; }
html[data-theme="rosterNinja"] .sidebar {
  color:#fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(46,168,244,.18), transparent 20rem),
    linear-gradient(180deg, #0b1d30 0%, #071321 100%);
  border-right: 1px solid rgba(46,168,244,.34);
  box-shadow: 8px 0 24px rgba(19,43,65,.12);
}
html[data-theme="rosterNinja"] #primary-nav { margin-top:1.55rem; }
html[data-theme="rosterNinja"] .nav-link { color:#d4dfeb; border:1px solid transparent; border-radius:10px; transition:.15s ease; }
html[data-theme="rosterNinja"] .nav-link:hover { color:#fff; background:rgba(46,168,244,.10); border-color:rgba(46,168,244,.14); box-shadow:none; }
html[data-theme="rosterNinja"] .nav-link.active {
  color:#fff;
  background:linear-gradient(90deg, rgba(46,168,244,.30), rgba(46,168,244,.12));
  border-color:rgba(72,184,249,.25);
  box-shadow:inset 4px 0 0 var(--rn-cyan);
}
html[data-theme="rosterNinja"] .nav-icon { color:#4fc0ff; }
html[data-theme="rosterNinja"] .account-card { border-color:rgba(255,255,255,.14); }
html[data-theme="rosterNinja"] .avatar { background:linear-gradient(145deg,#3ab8ff,#0c77d5); box-shadow:0 0 0 3px rgba(63,181,255,.12); }
html[data-theme="rosterNinja"] .account-copy span { color:#aebfd0; }

html[data-theme="rosterNinja"] .workspace {
  background:
    radial-gradient(circle at 88% -6%, rgba(46,168,244,.08), transparent 28rem),
    transparent;
}
html[data-theme="rosterNinja"] .page-header { border-bottom:1px solid #dce6ee; padding-bottom:1rem; }
html[data-theme="rosterNinja"] .page-header h1 { color:var(--rn-text-dark); }

/* Controls -------------------------------------------------------------- */
html[data-theme="rosterNinja"] .button { border-radius:10px; }
html[data-theme="rosterNinja"] .button.primary { background:linear-gradient(135deg,#35b6ff,#0f8fe8); color:#fff; box-shadow:0 8px 20px rgba(22,143,232,.20); }
html[data-theme="rosterNinja"] .button.primary:hover { background:linear-gradient(135deg,#48c0ff,#1483d5); }
html[data-theme="rosterNinja"] .button.secondary { color:#18324b; background:#fff; border-color:#bdd0df; }
html[data-theme="rosterNinja"] .button.secondary:hover { color:#0b70bb; background:#f4fbff; border-color:#70bde8; }
html[data-theme="rosterNinja"] .button.ghost { color:#0c70bb; border-bottom-color:var(--rn-blue); }
html[data-theme="rosterNinja"] .button.ghost:hover { color:#0a5f9e; }
html[data-theme="rosterNinja"] .icon-button:hover { background:rgba(46,168,244,.11); }

/* Shared cards and panels ---------------------------------------------- */
html[data-theme="rosterNinja"] .stat-card,
html[data-theme="rosterNinja"] .panel,
html[data-theme="rosterNinja"] .event-card {
  color:var(--rn-text);
  background:#fff;
  border-color:#d7e3ec;
  box-shadow:var(--rn-shadow);
}
html[data-theme="rosterNinja"] .stat-card { border-top:3px solid var(--rn-blue); }
html[data-theme="rosterNinja"] .stat-card span,
html[data-theme="rosterNinja"] .muted,
html[data-theme="rosterNinja"] .meta-item span { color:var(--rn-muted); }
html[data-theme="rosterNinja"] .stat-card strong,
html[data-theme="rosterNinja"] .panel h2,
html[data-theme="rosterNinja"] .panel h3,
html[data-theme="rosterNinja"] .event-card h2,
html[data-theme="rosterNinja"] .event-card h3 { color:var(--rn-text-dark); }
html[data-theme="rosterNinja"] .event-card:hover { border-color:#b6d8eb; box-shadow:0 10px 26px rgba(38,83,118,.12); }
html[data-theme="rosterNinja"] .event-instructions { color:#31516b; background:#eef8fe; border-left-color:var(--rn-blue); }
html[data-theme="rosterNinja"] .inline-alert.info { color:#245e84; background:#e8f7ff; border-left-color:var(--rn-blue); }

/* Tables ---------------------------------------------------------------- */
html[data-theme="rosterNinja"] .table-wrap { border-color:#d6e2eb; background:#fff; }
html[data-theme="rosterNinja"] table { color:var(--rn-text); background:#fff; }
html[data-theme="rosterNinja"] th { color:#52697d; background:#f1f6fa; border-bottom-color:#6cc5f7; }
html[data-theme="rosterNinja"] td { border-bottom-color:#e3ebf1; }
html[data-theme="rosterNinja"] tbody tr:hover { background:#f5fbff; }
html[data-theme="rosterNinja"] .roster-meter div { background:#f1f8fc; border-top-color:var(--rn-blue); }

/* Roster Ninja V2 dashboard -------------------------------------------- */
html[data-theme="rosterNinja"] .rn-dashboard { display:grid; gap:1rem; }
html[data-theme="rosterNinja"] .rn-admin-kpis,
html[data-theme="rosterNinja"] .rn-officer-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; }
html[data-theme="rosterNinja"] .rn-kpi {
  appearance:none;
  width:100%;
  min-height:108px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:.8rem;
  align-items:center;
  text-align:left;
  padding:1rem;
  border:1px solid #d5e2ec;
  border-top:3px solid var(--rn-blue);
  border-radius:14px;
  background:#fff;
  color:var(--rn-text);
  box-shadow:var(--rn-shadow);
}
html[data-theme="rosterNinja"] .rn-kpi-action { cursor:pointer; }
html[data-theme="rosterNinja"] .rn-kpi-action:hover { transform:translateY(-1px); border-color:#a9d6ef; box-shadow:var(--rn-shadow-strong); }
html[data-theme="rosterNinja"] .rn-kpi-icon,
html[data-theme="rosterNinja"] .rn-section-icon,
html[data-theme="rosterNinja"] .rn-action-icon {
  display:grid; place-items:center; flex:0 0 auto;
  color:#078ce5; background:#e2f4ff; border:1px solid #cae9fb;
}
html[data-theme="rosterNinja"] .rn-kpi-icon { width:46px; height:46px; border-radius:13px; font-size:1.25rem; font-weight:900; }
html[data-theme="rosterNinja"] .rn-kpi-copy > span { display:block; color:#52697d; font-size:.77rem; font-weight:750; }
html[data-theme="rosterNinja"] .rn-kpi-copy strong { display:block; margin-top:.25rem; color:#0a1c2c; font-size:1.55rem; line-height:1.05; }
html[data-theme="rosterNinja"] .rn-kpi-copy small { display:block; margin-top:.45rem; color:#087ecb; font-size:.73rem; font-weight:800; }
html[data-theme="rosterNinja"] .rn-chevron { color:#168fe8; font-size:1.7rem; line-height:1; }
html[data-theme="rosterNinja"] .rn-kpi-warning { border-top-color:#e59b30; }
html[data-theme="rosterNinja"] .rn-kpi-warning .rn-kpi-icon { color:#a96808; background:#fff3dc; border-color:#f3d7a5; }

html[data-theme="rosterNinja"] .rn-feature-card {
  min-width:0;
  padding:1.05rem;
  border:1px solid #d5e2ec;
  border-radius:15px;
  background:#fff;
  box-shadow:var(--rn-shadow);
}
html[data-theme="rosterNinja"] .rn-dashboard-main-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr); gap:1rem; }
html[data-theme="rosterNinja"] .rn-dashboard-lower-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:1rem; }
html[data-theme="rosterNinja"] .rn-section-heading { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.9rem; }
html[data-theme="rosterNinja"] .rn-section-heading h2 { margin:0; color:#102236; font-size:1.12rem; }
html[data-theme="rosterNinja"] .rn-section-heading p { margin:.18rem 0 0; color:#718497; font-size:.8rem; }
html[data-theme="rosterNinja"] .rn-section-icon { width:38px; height:38px; border-radius:11px; font-size:1rem; font-weight:900; }
html[data-theme="rosterNinja"] .rn-alert-icon { color:#c84949; background:#feecec; border-color:#f8cece; }
html[data-theme="rosterNinja"] .rn-heading-row { align-items:center; }
html[data-theme="rosterNinja"] .rn-heading-row > div { flex:1; }
html[data-theme="rosterNinja"] .rn-inline-link { border:0; background:transparent; color:#0b84d5; font-weight:800; padding:.25rem; }
html[data-theme="rosterNinja"] .rn-inline-link:hover { color:#075f9b; }
html[data-theme="rosterNinja"] .rn-table-wrap { box-shadow:none; }
html[data-theme="rosterNinja"] .rn-table-wrap table { font-size:.81rem; }
html[data-theme="rosterNinja"] .rn-table-wrap th { background:#f4f8fb; }

html[data-theme="rosterNinja"] .rn-attention-list { display:grid; }
html[data-theme="rosterNinja"] .rn-attention-list button {
  display:grid; grid-template-columns:minmax(0,1fr) 48px auto; gap:.6rem; align-items:center;
  padding:.9rem .2rem; border:0; border-bottom:1px solid #e5edf3; background:transparent; color:#21394e; text-align:left;
}
html[data-theme="rosterNinja"] .rn-attention-list button:last-child { border-bottom:0; }
html[data-theme="rosterNinja"] .rn-attention-list button:hover { background:#f6fbfe; }
html[data-theme="rosterNinja"] .rn-attention-list strong { display:grid; place-items:center; min-width:30px; height:26px; border-radius:8px; background:#eef5fa; color:#203d55; }
html[data-theme="rosterNinja"] .rn-attention-list em { color:#087ecb; font-style:normal; font-size:.78rem; font-weight:800; white-space:nowrap; }

html[data-theme="rosterNinja"] .rn-assignment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.15rem; }
html[data-theme="rosterNinja"] .rn-admin-assignment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
html[data-theme="rosterNinja"] .rn-assignment-grid span { display:block; color:#718497; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:850; }
html[data-theme="rosterNinja"] .rn-assignment-grid strong { display:block; margin-top:.22rem; color:#11283c; font-size:.92rem; }
html[data-theme="rosterNinja"] .rn-next-assignment { border-left:4px solid var(--rn-blue); }

html[data-theme="rosterNinja"] .rn-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
html[data-theme="rosterNinja"] .rn-action-card {
  display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:.75rem;
  min-height:78px; padding:.8rem; border:1px solid #dce6ee; border-radius:12px; background:#f8fbfd; color:#19334a; text-align:left;
}
html[data-theme="rosterNinja"] .rn-action-card:hover { background:#eef8fe; border-color:#b6daf0; }
html[data-theme="rosterNinja"] .rn-action-icon { width:40px; height:40px; border-radius:11px; font-weight:900; }
html[data-theme="rosterNinja"] .rn-action-card strong { display:block; color:#11283c; font-size:.86rem; }
html[data-theme="rosterNinja"] .rn-action-card small { display:block; margin-top:.18rem; color:#718497; font-size:.71rem; line-height:1.25; }

/* Calendar — deliberately much higher contrast ------------------------- */
html[data-theme="rosterNinja"] .calendar-panel,
html[data-theme="rosterNinja"] .calendar-agenda { background:#fff; border-color:#d5e2ec; box-shadow:var(--rn-shadow); }
html[data-theme="rosterNinja"] .calendar-toolbar h2 { color:#11283c; }
html[data-theme="rosterNinja"] .calendar-arrow { background:#f7fbfe; color:#1d4e70; border-color:#cfdde8; }
html[data-theme="rosterNinja"] .calendar-weekdays { border-bottom-color:#cad9e4; background:#f2f7fb; }
html[data-theme="rosterNinja"] .calendar-weekdays span { color:#60778a; }
html[data-theme="rosterNinja"] .calendar-day {
  color:#173047;
  background:#fff;
  border-right-color:#dce6ed;
  border-bottom-color:#dce6ed;
}
html[data-theme="rosterNinja"] .calendar-day:hover { background:#eef8fe; }
html[data-theme="rosterNinja"] .calendar-day.outside { color:#9babb9; background:#f5f8fa; }
html[data-theme="rosterNinja"] .calendar-day.selected { background:#e8f6ff; box-shadow:inset 0 0 0 2px var(--rn-blue); }
html[data-theme="rosterNinja"] .calendar-day.today .calendar-number { background:linear-gradient(135deg,#2fb1fb,#0b7ed1); color:#fff; box-shadow:0 4px 10px rgba(22,143,232,.24); }
html[data-theme="rosterNinja"] .calendar-dot.open,
html[data-theme="rosterNinja"] .calendar-event-marker.open { background:var(--rn-blue); }
html[data-theme="rosterNinja"] .calendar-event { border-bottom-color:#e2ebf1; }

/* Status colors stay useful instead of making everything blue ---------- */
html[data-theme="rosterNinja"] .badge.open { color:#096cae; background:#dff3ff; }
html[data-theme="rosterNinja"] .badge.approved,
html[data-theme="rosterNinja"] .badge.staffed,
html[data-theme="rosterNinja"] .badge.ready_for_billing,
html[data-theme="rosterNinja"] .badge.active { color:#137347; background:#e4f7ee; }

/* Modal ----------------------------------------------------------------- */
html[data-theme="rosterNinja"] .modal-backdrop { background:rgba(4,15,26,.62); }
html[data-theme="rosterNinja"] .modal-card { color:var(--rn-text); background:#fff; border:1px solid #cddde8; box-shadow:0 24px 70px rgba(12,35,55,.30); }
html[data-theme="rosterNinja"] .modal-card > header { background:#fff; border-bottom-color:#dce6ee; }

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 760px) {
  html[data-theme="rosterNinja"] body {
    background:
      radial-gradient(circle at 12% -3%, rgba(46,168,244,.18), transparent 25rem),
      linear-gradient(180deg, #0c2034 0%, #081522 100%);
  }
  html[data-theme="rosterNinja"] .mobile-header {
    height:76px; color:#fff;
    background:rgba(7,19,33,.98);
    border-bottom:1px solid rgba(79,192,255,.28);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small { width:154px; }
  html[data-theme="rosterNinja"] .mobile-header .brand-row > strong { display:none; }
  html[data-theme="rosterNinja"] .sidebar {
    width:min(86vw,330px);
    padding-top:max(1.15rem,env(safe-area-inset-top));
    border-right:1px solid rgba(79,192,255,.30);
    box-shadow:20px 0 50px rgba(0,0,0,.38);
  }
  html[data-theme="rosterNinja"] .sidebar .brand-mark.image-brand-mark.small { width:190px; }
  html[data-theme="rosterNinja"] .sidebar .brand-row > div:last-child { display:none; }
  html[data-theme="rosterNinja"] .workspace { padding-top:1.15rem; padding-bottom:3rem; }
  html[data-theme="rosterNinja"] .page-header { border-bottom-color:rgba(177,205,226,.25); }
  html[data-theme="rosterNinja"] .page-header h1 { color:#f5fbff; }
  html[data-theme="rosterNinja"] .eyebrow { color:#57c3ff; }

  html[data-theme="rosterNinja"] #page-content > .panel,
  html[data-theme="rosterNinja"] #page-content > .event-card,
  html[data-theme="rosterNinja"] #page-content > .card-grid .event-card,
  html[data-theme="rosterNinja"] #page-content > .calendar-layout .calendar-panel,
  html[data-theme="rosterNinja"] #page-content > .calendar-layout .calendar-agenda { box-shadow:0 9px 24px rgba(0,0,0,.18); }

  html[data-theme="rosterNinja"] .rn-dashboard { gap:.8rem; }
  html[data-theme="rosterNinja"] .rn-admin-kpis,
  html[data-theme="rosterNinja"] .rn-officer-summary { grid-template-columns:1fr; gap:.65rem; }
  html[data-theme="rosterNinja"] .rn-officer-summary { grid-template-columns:1fr; }
  html[data-theme="rosterNinja"] .rn-kpi {
    min-height:86px; grid-template-columns:44px minmax(0,1fr) auto; padding:.8rem .9rem;
    background:linear-gradient(135deg,#173650,#10283e); border-color:#315b78; border-top:1px solid #4c9bca; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.17);
  }
  html[data-theme="rosterNinja"] .rn-kpi-copy > span { color:#bed0df; }
  html[data-theme="rosterNinja"] .rn-kpi-copy strong { color:#fff; font-size:1.55rem; }
  html[data-theme="rosterNinja"] .rn-kpi-copy small { color:#62c7ff; }
  html[data-theme="rosterNinja"] .rn-kpi-icon { background:#103b5d; border-color:#266c99; color:#42c1ff; }
  html[data-theme="rosterNinja"] .rn-kpi-warning .rn-kpi-icon { background:#583d19; border-color:#7c5b2d; color:#ffc466; }

  html[data-theme="rosterNinja"] .rn-feature-card {
    color:#eaf4fb; background:linear-gradient(145deg,#14314b,#0f263b); border-color:#315b78; box-shadow:0 10px 26px rgba(0,0,0,.19);
  }
  html[data-theme="rosterNinja"] .rn-feature-card .rn-section-heading h2,
  html[data-theme="rosterNinja"] .rn-feature-card .rn-assignment-grid strong,
  html[data-theme="rosterNinja"] .rn-action-card strong { color:#f7fbff; }
  html[data-theme="rosterNinja"] .rn-feature-card .rn-section-heading p,
  html[data-theme="rosterNinja"] .rn-feature-card .rn-assignment-grid span,
  html[data-theme="rosterNinja"] .rn-action-card small { color:#afc4d5; }
  html[data-theme="rosterNinja"] .rn-next-assignment { border-left-color:#3db9ff; }
  html[data-theme="rosterNinja"] .rn-quick-grid { grid-template-columns:1fr 1fr; gap:.65rem; }
  html[data-theme="rosterNinja"] .rn-action-card { background:#112e47; border-color:#2e5b78; color:#fff; }
  html[data-theme="rosterNinja"] .rn-action-card:hover { background:#173a57; }
  html[data-theme="rosterNinja"] .rn-action-icon { background:#103b5d; border-color:#266c99; color:#42c1ff; }
  html[data-theme="rosterNinja"] .rn-dashboard-main-grid,
  html[data-theme="rosterNinja"] .rn-dashboard-lower-grid { grid-template-columns:1fr; }

  /* Calendar remains deliberately brighter than surrounding mobile UI. */
  html[data-theme="rosterNinja"] .calendar-panel,
  html[data-theme="rosterNinja"] .calendar-agenda { background:#f8fbfd; }
  html[data-theme="rosterNinja"] .calendar-toolbar h2 { color:#122a3e; }
  html[data-theme="rosterNinja"] .calendar-day { background:#fff; color:#173047; }
}

@media (max-width: 520px) {
  html[data-theme="rosterNinja"] .rn-quick-grid { grid-template-columns:1fr; }
  html[data-theme="rosterNinja"] .rn-assignment-grid,
  html[data-theme="rosterNinja"] .rn-admin-assignment-grid { grid-template-columns:1fr 1fr; }
}


/* =====================================================================
   Roster Ninja V4 — clean dashboard + real mobile tab bar
   ===================================================================== */
html[data-theme="rosterNinja"] .rn-kpi {
  min-height:96px;
  grid-template-columns:1fr;
  padding:1rem 1.05rem;
  border-top:3px solid var(--rn-blue);
}
html[data-theme="rosterNinja"] .rn-kpi-copy > span { font-size:.8rem; }
html[data-theme="rosterNinja"] .rn-kpi-copy strong { font-size:1.7rem; }
html[data-theme="rosterNinja"] .rn-kpi-icon,
html[data-theme="rosterNinja"] .rn-kpi .rn-chevron { display:none !important; }
html[data-theme="rosterNinja"] .rn-officer-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
html[data-theme="rosterNinja"] .rn-admin-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
html[data-theme="rosterNinja"] .rn-section-heading .rn-section-icon { display:none; }
html[data-theme="rosterNinja"] .rn-dashboard-lower-grid,
html[data-theme="rosterNinja"] .rn-quick-grid.rn-officer-actions { display:none !important; }

html[data-theme="rosterNinja"] .rn-event-list { display:grid; }
html[data-theme="rosterNinja"] .rn-event-row {
  appearance:none; width:100%; border:0; border-top:1px solid #e4edf3; background:#fff; color:#1a3349;
  display:grid; grid-template-columns:125px minmax(0,1fr) 80px 100px 20px; gap:.75rem; align-items:center;
  padding:.78rem .25rem; text-align:left;
}
html[data-theme="rosterNinja"] .rn-event-row:first-child { border-top:1px solid #dce8f0; }
html[data-theme="rosterNinja"] .rn-event-row:hover { background:#f5fbff; }
html[data-theme="rosterNinja"] .rn-event-date { font-size:.78rem; color:#536d82; }
html[data-theme="rosterNinja"] .rn-event-name strong, html[data-theme="rosterNinja"] .rn-event-name small { display:block; }
html[data-theme="rosterNinja"] .rn-event-name small { color:#72899b; margin-top:.16rem; font-size:.73rem; }
html[data-theme="rosterNinja"] .rn-event-staffing { color:#38536a; font-weight:750; font-size:.8rem; }
html[data-theme="rosterNinja"] .rn-event-status { justify-self:start; }

html[data-theme="rosterNinja"] .mobile-bottom-nav { display:none; }

@media (max-width:720px) {
  html[data-theme="rosterNinja"] .workspace { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  html[data-theme="rosterNinja"][data-app-route="dashboard"] .page-header { display:none; }
  html[data-theme="rosterNinja"][data-app-route="dashboard"] .workspace { padding-top:.9rem; }

  html[data-theme="rosterNinja"] .mobile-header {
    height:74px; position:sticky; top:0; z-index:35;
    background:linear-gradient(180deg,#081827,#071522);
    border-bottom:1px solid rgba(66,181,244,.32);
  }
  html[data-theme="rosterNinja"] .mobile-header .brand-row { flex:1; justify-content:flex-start; min-width:0; }
  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small {
    width:170px; height:54px; margin:0; display:flex; align-items:center; justify-content:flex-start; overflow:visible;
  }
  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small img {
    display:block; max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain; object-position:left center;
  }

  html[data-theme="rosterNinja"] .mobile-bottom-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:grid; grid-template-columns:repeat(5,1fr);
    height:calc(72px + env(safe-area-inset-bottom));
    padding:5px 5px env(safe-area-inset-bottom);
    background:rgba(7,18,31,.98);
    border-top:1px solid rgba(115,169,207,.32);
    box-shadow:0 -10px 28px rgba(0,0,0,.24);
    backdrop-filter:blur(12px);
  }
  html[data-theme="rosterNinja"] .mobile-bottom-link {
    appearance:none; border:0; background:transparent; color:#9fb5c8; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:4px 2px; border-radius:10px; font-size:.64rem; font-weight:750; line-height:1;
  }
  html[data-theme="rosterNinja"] .mobile-bottom-link.active { color:#42baff; background:rgba(45,167,240,.11); }
  html[data-theme="rosterNinja"] .mobile-bottom-icon { font-size:1.3rem; line-height:1; font-weight:500; }

  html[data-theme="rosterNinja"] .rn-admin-kpis { grid-template-columns:1fr 1fr; gap:.65rem; }
  html[data-theme="rosterNinja"] .rn-officer-summary { grid-template-columns:repeat(3,1fr); gap:.55rem; }
  html[data-theme="rosterNinja"] .rn-kpi {
    min-height:82px; padding:.75rem .72rem; background:#fff; color:#132a3e; border:1px solid #cfe0eb; border-top:3px solid var(--rn-blue); box-shadow:0 7px 18px rgba(0,0,0,.13);
  }
  html[data-theme="rosterNinja"] .rn-kpi-copy > span { color:#62798c; font-size:.68rem; line-height:1.15; }
  html[data-theme="rosterNinja"] .rn-kpi-copy strong { color:#0d2234; font-size:1.48rem; margin-top:.28rem; }
  html[data-theme="rosterNinja"] .rn-feature-card {
    color:#173047; background:#fff; border-color:#cfdee9; box-shadow:0 8px 20px rgba(0,0,0,.14);
  }
  html[data-theme="rosterNinja"] .rn-feature-card .rn-section-heading h2,
  html[data-theme="rosterNinja"] .rn-feature-card .rn-assignment-grid strong { color:#10283b; }
  html[data-theme="rosterNinja"] .rn-feature-card .rn-section-heading p,
  html[data-theme="rosterNinja"] .rn-feature-card .rn-assignment-grid span { color:#6a8092; }
  html[data-theme="rosterNinja"] .rn-next-assignment { border-left:4px solid var(--rn-blue); }
  html[data-theme="rosterNinja"] .rn-dashboard-main-grid { grid-template-columns:1fr; }
  html[data-theme="rosterNinja"] .rn-admin-my-assignment { display:none; }

  html[data-theme="rosterNinja"] .rn-event-row {
    grid-template-columns:72px minmax(0,1fr) 54px 18px; gap:.5rem; padding:.72rem 0;
  }
  html[data-theme="rosterNinja"] .rn-event-date { font-size:.68rem; }
  html[data-theme="rosterNinja"] .rn-event-name strong { font-size:.8rem; }
  html[data-theme="rosterNinja"] .rn-event-name small { font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html[data-theme="rosterNinja"] .rn-event-staffing { font-size:.72rem; text-align:right; }
  html[data-theme="rosterNinja"] .rn-event-status { display:none; }
  html[data-theme="rosterNinja"] .rn-event-row .rn-chevron { display:block !important; font-size:1.3rem; }
  html[data-theme="rosterNinja"] .rn-attention-list button { grid-template-columns:minmax(0,1fr) 38px auto; }
}

@media (max-width:390px) {
  html[data-theme="rosterNinja"] .rn-officer-summary { grid-template-columns:repeat(3,1fr); gap:.42rem; }
  html[data-theme="rosterNinja"] .rn-kpi { padding:.65rem .55rem; }
  html[data-theme="rosterNinja"] .rn-kpi-copy > span { font-size:.62rem; }
  html[data-theme="rosterNinja"] .rn-kpi-copy strong { font-size:1.32rem; }
  html[data-theme="rosterNinja"] .mobile-bottom-link { font-size:.58rem; }
}


/* ==========================================================================
   ROSTER NINJA NATIVE CONCEPT V1
   Layout inspired by the original Roster Ninja mockup while preserving the
   known-good Firebase/auth/data engine.
   ========================================================================== */

html[data-theme="rosterNinja"] .rn-bottom-nav { display:none; }

html[data-theme="rosterNinja"] .rn-native-home {
  display:grid;
  gap:1rem;
}
html[data-theme="rosterNinja"] .rn-native-hero,
html[data-theme="rosterNinja"] .rn-native-section {
  background:#fff;
  border:1px solid #d3e1ec;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(22,59,88,.10);
  padding:1.15rem;
}
html[data-theme="rosterNinja"] .rn-native-section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem;
}
html[data-theme="rosterNinja"] .rn-native-kicker {
  margin:0 0 .2rem;
  color:#178fdc;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.16em;
}
html[data-theme="rosterNinja"] .rn-native-section-heading h2 { margin:0; color:#102236; font-size:1.08rem; }
html[data-theme="rosterNinja"] .rn-text-action {
  border:0; background:transparent; color:#087fcf; font-weight:850; padding:.4rem .2rem; cursor:pointer;
}
html[data-theme="rosterNinja"] .rn-date-badge {
  display:grid; place-items:center; align-self:center; width:58px; min-width:58px; height:66px;
  border:1px solid #bdd7e9; border-radius:13px; background:#f1f8fd; color:#113650;
}
html[data-theme="rosterNinja"] .rn-date-badge small { color:#178fdc; font-size:.68rem; font-weight:900; letter-spacing:.08em; }
html[data-theme="rosterNinja"] .rn-date-badge strong { font-size:1.55rem; line-height:1; }
html[data-theme="rosterNinja"] .rn-row-arrow { color:#168fe8; font-size:1.8rem; line-height:1; }

html[data-theme="rosterNinja"] .rn-next-event {
  width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.9rem; align-items:center;
  border:1px solid #bdd9eb; border-radius:15px; padding:.9rem; text-align:left; cursor:pointer;
  color:#102236; background:linear-gradient(135deg,#f9fdff,#edf8ff);
}
html[data-theme="rosterNinja"] .rn-next-event:hover { border-color:#7fc5ed; box-shadow:0 8px 20px rgba(22,143,232,.11); }
html[data-theme="rosterNinja"] .rn-next-event-copy { display:grid; gap:.15rem; min-width:0; }
html[data-theme="rosterNinja"] .rn-next-event-copy strong { font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="rosterNinja"] .rn-next-event-copy span { color:#657c91; font-size:.8rem; }

html[data-theme="rosterNinja"] .rn-native-tile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
html[data-theme="rosterNinja"] .rn-native-tile {
  min-height:108px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  border:1px solid #d4e2ec; border-radius:15px; padding:.9rem; background:#f8fbfd; color:#153249; text-align:left; cursor:pointer;
}
html[data-theme="rosterNinja"] .rn-native-tile:hover { transform:translateY(-1px); border-color:#9bcde9; box-shadow:0 8px 18px rgba(24,84,125,.10); }
html[data-theme="rosterNinja"] .rn-native-tile span { font-weight:800; font-size:.82rem; }
html[data-theme="rosterNinja"] .rn-native-tile strong { margin:.24rem 0 .12rem; font-size:1.65rem; color:#0d2234; }
html[data-theme="rosterNinja"] .rn-native-tile small { color:#76899a; font-size:.7rem; line-height:1.25; }
html[data-theme="rosterNinja"] .rn-tile-blue { background:linear-gradient(145deg,#eaf7ff,#f9fdff); border-color:#acd8f1; }
html[data-theme="rosterNinja"] .rn-native-notice {
  width:100%; margin-top:.8rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid #f0cf9b; border-radius:13px; background:#fff8ec; padding:.8rem .9rem; text-align:left; color:#654b20;
}
html[data-theme="rosterNinja"] .rn-native-notice span:first-child { display:grid; gap:.1rem; }
html[data-theme="rosterNinja"] .rn-native-notice small { color:#8b7248; }
html[data-theme="rosterNinja"] .rn-empty-state { display:grid; gap:.2rem; padding:1.15rem; border:1px dashed #c8d9e5; border-radius:14px; color:#28465d; background:#f8fbfd; }
html[data-theme="rosterNinja"] .rn-empty-state span { color:#71869a; font-size:.8rem; }

html[data-theme="rosterNinja"] .rn-admin-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
html[data-theme="rosterNinja"] .rn-admin-summary-grid > button {
  min-height:105px; border:1px solid #d4e2ec; border-top:3px solid #2ea8f4; border-radius:15px;
  background:#fff; padding:.9rem 1rem; color:#102236; text-align:left; cursor:pointer; box-shadow:0 7px 20px rgba(28,67,98,.08);
}
html[data-theme="rosterNinja"] .rn-admin-summary-grid span { display:block; color:#61788d; font-size:.78rem; font-weight:750; }
html[data-theme="rosterNinja"] .rn-admin-summary-grid strong { display:block; margin:.32rem 0 .15rem; font-size:1.65rem; }
html[data-theme="rosterNinja"] .rn-admin-summary-grid small { color:#7e91a1; font-size:.7rem; }
html[data-theme="rosterNinja"] .rn-admin-home-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr); gap:1rem; }
html[data-theme="rosterNinja"] .rn-upcoming-list { display:grid; }
html[data-theme="rosterNinja"] .rn-upcoming-row {
  width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:.8rem; align-items:center;
  border:0; border-top:1px solid #e3ebf1; background:transparent; padding:.78rem .1rem; color:#153249; text-align:left; cursor:pointer;
}
html[data-theme="rosterNinja"] .rn-upcoming-row:first-child { border-top:0; }
html[data-theme="rosterNinja"] .rn-upcoming-copy { min-width:0; display:grid; gap:.1rem; }
html[data-theme="rosterNinja"] .rn-upcoming-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme="rosterNinja"] .rn-upcoming-copy span,
html[data-theme="rosterNinja"] .rn-upcoming-copy small { color:#6d8192; font-size:.75rem; }
html[data-theme="rosterNinja"] .rn-staffing-pill { padding:.42rem .62rem; border-radius:999px; font-size:.68rem; font-weight:850; white-space:nowrap; }
html[data-theme="rosterNinja"] .rn-staffing-pill.needs { color:#8a5500; background:#fff0ce; }
html[data-theme="rosterNinja"] .rn-staffing-pill.full { color:#147348; background:#ddf6eb; }
html[data-theme="rosterNinja"] .rn-admin-attention > button {
  width:100%; display:grid; grid-template-columns:minmax(0,1fr) 36px auto; gap:.6rem; align-items:center;
  border:0; border-top:1px solid #e3ebf1; background:transparent; padding:.85rem 0; color:#21394e; text-align:left;
}
html[data-theme="rosterNinja"] .rn-admin-attention > button:first-of-type { border-top:0; }
html[data-theme="rosterNinja"] .rn-admin-attention > button strong { display:grid; place-items:center; width:30px; height:25px; border-radius:8px; background:#edf5fa; }
html[data-theme="rosterNinja"] .rn-admin-attention > button em { color:#087ecb; font-style:normal; font-size:.75rem; font-weight:850; }
html[data-theme="rosterNinja"] .rn-admin-assignment-row { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; border:0; background:transparent; padding:.3rem 0; text-align:left; color:#153249; }
html[data-theme="rosterNinja"] .rn-admin-assignment-row span:first-child { display:grid; gap:.12rem; }
html[data-theme="rosterNinja"] .rn-admin-assignment-row small { color:#728698; }
html[data-theme="rosterNinja"] .rn-create-event {
  display:flex; align-items:center; justify-content:center; gap:.85rem; min-height:62px; border:1px solid #43b9ff; border-radius:16px;
  background:linear-gradient(135deg,#23adff,#087ce0); color:#fff; font-size:1rem; font-weight:900; box-shadow:0 10px 24px rgba(13,126,217,.22);
}
html[data-theme="rosterNinja"] .rn-create-event span:first-child { font-size:1.4rem; }
html[data-theme="rosterNinja"] .rn-create-event span:last-child { margin-left:auto; font-size:1.6rem; }

@media (max-width: 760px) {
  html[data-theme="rosterNinja"] body { background:#081522; }
  html[data-theme="rosterNinja"] .mobile-header {
    height:78px; padding:.7rem 1rem; background:linear-gradient(180deg,#081828,#091522); border-bottom:1px solid rgba(63,181,255,.22); box-shadow:none;
  }
  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small { width:132px; max-height:58px; overflow:visible; }
  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark img { max-height:58px; object-fit:contain; }
  html[data-theme="rosterNinja"] .workspace { padding:1rem .85rem calc(96px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,#0e2941 0%,#0a1d2f 46%,#081522 100%); }
  html[data-theme="rosterNinja"][data-route="dashboard"] .page-header { display:none; }
  html[data-theme="rosterNinja"] .page-header h1 { font-size:1.35rem; }
  html[data-theme="rosterNinja"] .rn-native-home { gap:.85rem; }
  html[data-theme="rosterNinja"] .rn-native-hero,
  html[data-theme="rosterNinja"] .rn-native-section { padding:.95rem; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.14); }
  html[data-theme="rosterNinja"] .rn-native-tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  html[data-theme="rosterNinja"] .rn-native-tile { min-height:102px; }
  html[data-theme="rosterNinja"] .rn-admin-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
  html[data-theme="rosterNinja"] .rn-admin-summary-grid > button { min-height:92px; padding:.75rem; }
  html[data-theme="rosterNinja"] .rn-admin-home-grid { grid-template-columns:1fr; }
  html[data-theme="rosterNinja"] .rn-upcoming-row { grid-template-columns:auto minmax(0,1fr) auto; }
  html[data-theme="rosterNinja"] .rn-upcoming-row .rn-staffing-pill { grid-column:2; justify-self:start; margin-top:-.15rem; }
  html[data-theme="rosterNinja"] .rn-upcoming-row .rn-row-arrow { grid-column:3; grid-row:1 / span 2; }
  html[data-theme="rosterNinja"] .rn-date-badge { width:52px; min-width:52px; height:60px; }
  html[data-theme="rosterNinja"] .rn-create-event { min-height:58px; }

  html[data-theme="rosterNinja"] .rn-bottom-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(5,1fr);
    min-height:72px; padding:7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
    background:rgba(5,15,26,.96); border-top:1px solid rgba(127,183,221,.22); box-shadow:0 -12px 30px rgba(0,0,0,.24); backdrop-filter:blur(16px);
  }
  html[data-theme="rosterNinja"] .rn-bottom-link {
    appearance:none; border:0; background:transparent; color:#9eb0c2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-width:0; padding:3px 2px; font-size:.64rem; font-weight:750; line-height:1; cursor:pointer;
  }
  html[data-theme="rosterNinja"] .rn-bottom-link.active { color:#3fb5ff; }
  html[data-theme="rosterNinja"] .rn-bottom-icon { width:25px; height:25px; display:grid; place-items:center; }
  html[data-theme="rosterNinja"] .rn-bottom-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  html[data-theme="rosterNinja"] .rn-bottom-link.active::after { content:""; width:28px; height:2px; border-radius:2px; background:#3fb5ff; position:absolute; bottom:calc(3px + env(safe-area-inset-bottom)); }
  html[data-theme="rosterNinja"] .rn-bottom-link { position:relative; }
}

@media (min-width: 761px) {
  html[data-theme="rosterNinja"] .rn-native-home { max-width:1280px; }
}

/* =====================================================================
   ROSTER NINJA CONCEPT V3 — mobile header / navigation polish
   ===================================================================== */

/* #page-content is focused programmatically after route changes so screen
   readers land on the new content. It is not an interactive control and
   should not receive the browser's square blue focus rectangle. */
html[data-theme="rosterNinja"] #page-content:focus {
  outline: none;
}

@media (max-width: 760px) {
  /* Respect the iPhone status-bar / notch safe area and give the brand room. */
  html[data-theme="rosterNinja"] .mobile-header {
    box-sizing: border-box;
    height: auto;
    min-height: calc(74px + env(safe-area-inset-top));
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-right: 16px;
    padding-bottom: 10px;
    padding-left: 16px;
    justify-content: center;
    align-items: center;
  }

  html[data-theme="rosterNinja"] .mobile-header .brand-row {
    width: 100%;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
  }

  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small {
    width: 150px;
    max-width: 52vw;
    height: auto;
    max-height: none;
    margin: 0 auto;
    overflow: visible;
  }

  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* Bottom navigation replaces the redundant hamburger on mobile.
     Admins still reach secondary tools with the More tab. */
  html[data-theme="rosterNinja"] #menu-button {
    display: none !important;
  }
}

/* =====================================================================
   ROSTER NINJA CONCEPT V4 — iPhone header + account polish
   ===================================================================== */
@media (max-width: 760px) {
  /* Use a real header canvas rather than relying only on env(safe-area-*).
     Safari and installed PWAs can report the top inset differently. */
  html[data-theme="rosterNinja"] .mobile-header {
    position: sticky;
    top: 0;
    z-index: 35;
    box-sizing: border-box;
    width: 100%;
    min-height: 82px;
    height: 82px;
    padding: 18px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: visible;
    background: linear-gradient(180deg,#081828,#091522);
    border-bottom: 1px solid rgba(63,181,255,.22);
  }

  /* Center against the viewport itself, not against a flex row. */
  html[data-theme="rosterNinja"] .mobile-header .brand-row {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    min-width: 0;
    margin: 4px 0 0;
    padding: 0;
    transform: translate(-50%, -50%);
    display: block;
  }

  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small {
    width: 116px;
    max-width: 42vw;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    display: block;
  }

  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  html[data-theme="rosterNinja"] .rn-mobile-account {
    appearance: none;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid rgba(101,192,247,.42);
    border-radius: 50%;
    background: rgba(19,55,84,.78);
    color: #f5fbff;
    display: grid;
    place-items: center;
    padding: 0;
    font: inherit;
    font-size: .73rem;
    font-weight: 850;
    letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
    cursor: pointer;
  }

  html[data-theme="rosterNinja"] .rn-mobile-account:active {
    transform: scale(.96);
    background: rgba(32,86,126,.9);
  }

  html[data-theme="rosterNinja"] #menu-button {
    display: none !important;
  }
}

@media (display-mode: standalone) and (max-width: 760px) {
  html[data-theme="rosterNinja"] .mobile-header {
    height: calc(82px + env(safe-area-inset-top));
    min-height: calc(82px + env(safe-area-inset-top));
    padding-top: calc(18px + env(safe-area-inset-top));
  }
}

/* =====================================================================
   ROSTER NINJA CONCEPT V5 — iOS first-login viewport stabilization
   ===================================================================== */
@media (max-width: 760px) {
  /* Fixed header prevents Mobile Safari from carrying a scrolled login
     viewport into the authenticated screen and clipping the brand. */
  html[data-theme="rosterNinja"] .mobile-header {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    width: 100%;
    height: calc(72px + env(safe-area-inset-top));
    min-height: calc(72px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    overflow: visible;
  }

  /* Reserve the fixed header's space in normal flow. */
  html[data-theme="rosterNinja"] .workspace {
    padding-top: calc(72px + env(safe-area-inset-top) + 1rem);
  }

  /* Center the full two-line mark in the usable header area below the notch. */
  html[data-theme="rosterNinja"] .mobile-header .brand-row {
    top: calc(env(safe-area-inset-top) + 36px);
    margin: 0;
  }

  html[data-theme="rosterNinja"] .mobile-header .brand-mark.image-brand-mark.small {
    width: 116px;
    max-width: 42vw;
  }

  /* Keep the account control aligned to the same usable header area. */
  html[data-theme="rosterNinja"] .rn-mobile-account {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
    top: calc(env(safe-area-inset-top) + 18px);
  }
}

/* The fixed-header rule above already includes the safe-area inset, so the
   older standalone-only expansion is intentionally neutralized. */
@media (display-mode: standalone) and (max-width: 760px) {
  html[data-theme="rosterNinja"] .mobile-header {
    height: calc(72px + env(safe-area-inset-top));
    min-height: calc(72px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
}


/* =====================================================================
   ROSTER NINJA CONCEPT V6 — iOS dashboard landing clearance
   ===================================================================== */
@media (max-width: 760px) {
  /* Keep the first dashboard card visibly separated from the fixed header.
     This also gives iPhone Safari a little safety margin while its visual
     viewport settles after the login keyboard disappears. */
  html[data-theme="rosterNinja"][data-route="dashboard"] #page-content {
    padding-top: 14px;
  }

  html[data-theme="rosterNinja"][data-route="dashboard"] .rn-native-home {
    scroll-margin-top: calc(72px + env(safe-area-inset-top) + 14px);
  }
}

/* =====================================================================
   ROSTER NINJA CONCEPT V7 — iPhone first-card clearance
   ===================================================================== */
/* Mobile Safari can restore the visual viewport a few pixels below the
   layout viewport after the login keyboard closes. Give only WebKit touch
   browsers a little extra landing clearance so the first dashboard card
   never tucks under the fixed header. Android/Chrome keeps the V6 spacing. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    html[data-theme="rosterNinja"][data-route="dashboard"] #page-content {
      padding-top: 28px;
    }

    html[data-theme="rosterNinja"][data-route="dashboard"] .rn-native-home {
      scroll-margin-top: calc(72px + env(safe-area-inset-top) + 28px);
    }
  }
}