/* Attendance dashboard mapped to the BuildTrack manager dashboard layout. */
.app-shell {
  --bt-sidebar:#14243b;
  --bt-bg:#f6f7f9;
  --bt-text:#202d40;
  --bt-muted:#687588;
  --bt-line:#e5e9ef;
  --bt-accent:#ef6b37;
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  min-height:100vh;
  background:var(--bt-bg);
  color:var(--bt-text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
}
.app-shell h1,.app-shell h2,.app-shell h3 { color:var(--bt-text); font-family:inherit; font-weight:650; letter-spacing:-.035em; }
.app-shell .muted { color:var(--bt-muted); }
.app-shell .eyebrow { color:#708094; font-size:9px; font-weight:650; letter-spacing:.14em; }
.app-shell input,.app-shell select { border:1px solid #dce3eb; border-radius:7px; color:var(--bt-text); }
.app-shell input:focus,.app-shell select:focus { border-color:#338ac2; box-shadow:0 0 0 3px #338ac226; }
.app-shell :is(a,button,input,select,summary):focus-visible { outline:3px solid #338ac2; outline-offset:3px; }
.app-shell .sidebar { position:sticky; top:0; z-index:30; width:236px; height:100vh; padding:28px 16px 18px; background:var(--bt-sidebar); color:#f9fbff; }
.app-shell .side-brand { min-height:86px; padding:0 10px 20px; border-bottom:0; }
.app-shell .side-brand img { width:170px; height:auto; }
.app-shell .side-brand span { margin:1px 0 0 3px; color:#a9b8cb; font-size:9px; letter-spacing:.14em; }
.app-shell .side-nav { gap:3px; padding:0; }
.app-shell .nav-caption { margin:18px 13px 6px; color:#99abc3; font-size:9px; font-weight:600; letter-spacing:.14em; }
.app-shell .side-nav a { min-height:36px; padding:9px 12px; border-radius:6px; color:#bfcbdc; font-size:12px; font-weight:500; }
.app-shell .side-nav a>span { width:17px; color:#a7b7cc; font-size:17px; }
.app-shell .side-nav a:hover { background:#21344b; }
.app-shell .side-nav a.active { background:#ef6b37; color:#fff; box-shadow:0 4px 14px #070e1920; }
.app-shell .side-nav a.active>span { color:#fff; }
.app-shell .side-bottom { gap:4px; padding:17px 6px 12px; border-top:1px solid #ffffff20; color:#dbe5f1; }
.app-shell .side-bottom small { color:#a8b8cc; }
.app-shell .side-event b { color:#ef6b37; }
.app-shell .topbar { min-height:76px; padding:16px 34px; border-bottom:1px solid var(--bt-line); background:#fff; box-shadow:none; }
.app-shell .topbar-title strong { font-size:14px; font-weight:650; }
.app-shell .topbar-title small { font-size:11px; color:#738195; }
.app-shell .topbar .live { padding:7px 10px; border:1px solid #e5e9ef; border-radius:7px; background:#fff; color:#475d76; font-size:10px; letter-spacing:0; }
.app-shell .topbar .live b { background:#3b9970; }
.app-shell .topbar #adminName { color:#4a5e77; }
.app-shell .topbar .subtle { min-height:34px; padding:6px 10px; border:1px solid #e5e9ef; border-radius:7px; color:#1f314c; background:#fff; font-size:11px; }
.app-shell main { max-width:1600px; padding:31px 34px 20px; }
.app-shell .page-heading { min-height:0; margin-bottom:26px; padding:0; border:0; background:none; box-shadow:none; }
.app-shell .page-heading::before,.app-shell .page-heading::after { display:none; }
.app-shell .page-heading .eyebrow { color:#708094; }
.app-shell .page-heading h1 { margin-top:7px; color:var(--bt-text); font-size:clamp(23px,2vw,30px); font-weight:650; }
.app-shell .page-heading h1 span { color:#ef6b37; }
.app-shell .page-heading .muted { margin-top:8px; font-size:12px; }
.app-shell .heading-date { gap:6px; color:#6d7b8f; }
.app-shell .heading-date>span,.app-shell .heading-date small { font-size:10px; letter-spacing:0; }
.app-shell .heading-date strong { color:#263b58; font-size:16px; font-weight:650; }
.app-shell .heading-date .primary { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; min-height:36px; margin:3px 0 0; padding:8px 13px; border-radius:7px; background:#bd4518; color:#fff; box-shadow:none; font-size:11px; font-weight:650; }
.app-shell .heading-date .primary span { font-size:17px; font-weight:400; }
.app-shell .heading-date .primary:hover,.app-shell .checkin-card .primary:hover { background:#a53d16; }
.app-shell .stats { gap:16px; margin:0 0 30px; }
.app-shell .stats article,.app-shell .stats .highlight { min-height:134px; padding:19px 19px 17px; border:1px solid var(--bt-line); border-radius:10px; background:#fff; box-shadow:none; }
.app-shell .stats article>span,.app-shell .stats .highlight>span { color:#556478; font-size:11px; font-weight:550; }
.app-shell .stats article i { width:25px; height:25px; border-radius:7px; background:#f0f3f8; color:#566985; font-size:16px; }
.app-shell .stats .highlight i { background:#eaf5ef; color:#27805b; }
.app-shell .stats strong,.app-shell .stats .highlight strong { margin:9px 0 6px; color:var(--bt-text); font-size:34px; font-weight:600; }
.app-shell .stats .highlight strong { color:#27805b; }
.app-shell .stats small { color:#738095; font-size:10px; }
.app-shell .stats .progress { height:4px; margin-top:10px; background:#f0f2f6; }
.app-shell .stats .progress div { background:#ef6b37; }
.app-shell .section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:15px; }
.app-shell .section-heading h2 { font-size:16px; font-weight:650; }
.app-shell .section-heading p { margin-top:4px; color:var(--bt-muted); font-size:11px; }
.app-shell .event-tag { padding:7px 10px; border:1px solid var(--bt-line); border-radius:6px; background:#fff; color:#61738a; font-size:10px; font-weight:600; }
.app-shell .overview-grid,.app-shell .work-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:19px; margin-bottom:22px; }
.app-shell .analytics-card,.app-shell .checkin-card,.app-shell .roster-card { min-width:0; margin:0; padding:23px; border:1px solid var(--bt-line); border-radius:11px; background:#fff; box-shadow:none; }
.app-shell .panel-heading { margin-bottom:19px; }
.app-shell .panel-heading .eyebrow { margin-bottom:5px; color:#708094; font-size:8px; }
.app-shell .panel-heading h2 { margin:0; font-size:14px; font-weight:650; }
.app-shell .progress-panel .panel-heading h2 { font-size:18px; }
.app-shell .panel-heading p { margin-top:5px; color:var(--bt-muted); font-size:11px; }
.app-shell .panel-icon { width:25px; height:25px; border-radius:7px; background:#f0f3f8; color:#566985; font-size:16px; }
.app-shell .status-tag { padding:5px 8px; border-radius:5px; background:#ebf5ef; color:#26734e; font-size:8px; font-weight:650; letter-spacing:.04em; }
.app-shell .progress-summary { display:flex; align-items:center; gap:24px; padding:8px 0 22px; }
.app-shell .attendance-ring { flex:0 0 126px; width:126px; height:126px; background:conic-gradient(#ef6b37 var(--rate,0%),#f1f3f6 0); }
.app-shell .attendance-ring>div { width:108px; height:108px; }
.app-shell .attendance-ring strong { color:var(--bt-text); font-size:26px; font-weight:650; }
.app-shell .attendance-ring span { color:var(--bt-muted); font-size:9px; }
.app-shell .progress-details { flex:1; min-width:0; }
.app-shell .progress-details p { margin-bottom:12px; color:var(--bt-muted); font-size:11px; line-height:1.7; }
.app-shell .progress-details dl { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:0; }
.app-shell .progress-details dt { margin-bottom:4px; color:var(--bt-muted); font-size:9px; }
.app-shell .progress-details dd { margin:0; color:var(--bt-text); font-size:17px; font-weight:650; }
.app-shell .milestone-heading { display:flex; align-items:center; justify-content:space-between; padding-top:17px; border-top:1px solid #eef1f5; }
.app-shell .milestone-heading h3 { font-size:11px; font-weight:600; }
.app-shell .milestone-heading>span { color:var(--bt-muted); font-size:9px; }
.app-shell .milestone-row { margin-top:15px; }
.app-shell .milestone-row>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#56677e; font-size:10px; }
.app-shell .milestone-row strong { color:var(--bt-text); font-size:10px; font-weight:600; white-space:nowrap; }
.app-shell .milestone-track { height:4px; overflow:hidden; margin-top:8px; border-radius:8px; background:#f0f2f6; }
.app-shell .milestone-track span { display:block; width:0; height:100%; border-radius:8px; background:#607895; }
.app-shell .milestone-row + .milestone-row .milestone-track span { background:#ef6b37; }
.app-shell .panel-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid #eef1f5; color:#77869b; font-size:10px; }
.app-shell .panel-footer a { color:#425773; text-decoration:none; font-weight:600; white-space:nowrap; }
.app-shell .panel-footer a:hover { color:#b14a21; text-decoration:underline; }
.app-shell .timeline-card { display:flex; flex-direction:column; }
.app-shell .timeline-card .arrival-chart { flex:1; min-height:220px; margin-top:8px; background:repeating-linear-gradient(to top,transparent 0,transparent 47px,#eff2f6 48px,#eff2f6 49px); border-color:#eef1f5; }
.app-shell .chart-count { color:#405772; }
.app-shell .chart-bar { background:linear-gradient(180deg,#f69b71,#ef6b37); }
.app-shell .chart-hour { color:#7b8a9e; }
.app-shell .chart-footer { margin-top:13px; color:#728096; }
.app-shell .timeline-card .panel-footer { margin-top:auto; }
.app-shell .checkin-card { display:flex; flex-direction:column; }
.app-shell .checkin-card .panel-heading h2 { font-size:15px; }
.app-shell .checkin-card .panel-heading { margin-bottom:2px; }
.app-shell .checkin-card label { color:#56677e; font-size:10px; }
.app-shell #studentId { border-width:1px; border-radius:7px; font-size:16px; }
.app-shell .person-hint { color:#738095; }
.app-shell .person-hint.found { color:#17623b; }
.app-shell .person-hint.missing { color:#a12626; }
.app-shell .checkin-card .primary { border-radius:7px; background:#bd4518; color:#fff; box-shadow:none; font-size:11px; font-weight:650; }
.app-shell .checkin-card .panel-footer { margin-top:auto; }
.app-shell .recent-card { display:flex; flex-direction:column; }
.app-shell .recent-card .panel-footer { margin-top:auto; }
.app-shell .recent-row { border-color:#eef1f5; }
.app-shell .recent-avatar { background:#f0f3f8; color:#566985; }
.app-shell .recent-person strong { color:var(--bt-text); }
.app-shell .source-strip { display:grid; grid-template-columns:1.1fr 1fr 1.2fr; gap:20px; align-items:center; margin-bottom:22px; padding:24px; border:1px solid #dfe7ee; border-radius:11px; background:#eaf0f5; }
.app-shell .source-strip h2 { margin-top:6px; font-size:14px; }
.app-shell .source-strip p { margin-top:6px; color:#62768c; font-size:10px; }
.app-shell .source-stat { display:flex; flex-direction:column; gap:3px; min-width:0; padding-left:24px; border-left:1px solid #d5dfe8; }
.app-shell .source-stat>span { color:#62768c; font-size:10px; }
.app-shell .source-stat strong { color:var(--bt-text); font-size:23px; font-weight:600; letter-spacing:-.04em; }
.app-shell .source-track { height:4px; margin:3px 0 0; background:#d7e0e8; }
.app-shell .source-track span { background:#3b9970; }
.app-shell .source-stat:last-child .source-track span { background:#ef6b37; }
.app-shell .roster-card { padding:0; }
.app-shell .roster-heading { padding:23px 23px 18px; }
.app-shell .roster-heading .eyebrow { color:#708094; }
.app-shell .roster-heading h2 { font-size:16px; font-weight:650; }
.app-shell .roster-heading h2 span { border-radius:5px; background:#f0f3f7; color:#4d6079; }
.app-shell .tools .subtle,.app-shell .button { min-height:34px; padding:6px 10px; border:1px solid var(--bt-line); border-radius:7px; background:#fff; color:#253b56; font-size:11px; }
.app-shell .filters { padding:0 23px 20px; }
.app-shell .filters input,.app-shell .filters select { min-height:36px; border-radius:7px; font-size:11px; }
.app-shell .filters .subtle { color:#425773; }
.app-shell th { background:#f8fafd; color:#687588; text-transform:none; letter-spacing:0; font-size:9px; font-weight:500; }
.app-shell td { border-color:#eef1f5; }
.app-shell td strong { color:#263b56; font-size:10px; font-weight:600; }
.app-shell .pill { border-radius:5px; background:#ebf5ef; color:#26734e; }
.app-shell .pill.pending { background:#f0f3f7; color:#4d6079; }
.app-shell .row-action { color:#425773; }
.app-shell .table-footer { border-color:#eef1f5; background:#f8fafd; color:#708094; }
.app-shell footer { border-color:#e2e8ef; color:#708094; }
.app-shell footer b { color:#ef6b37; }
.app-shell #toast { border-color:#ef6b37; background:#14243b; }
@media (max-width:1200px) {
  .app-shell .overview-grid,.app-shell .work-grid { grid-template-columns:1fr; }
  .app-shell .progress-summary { max-width:650px; }
}
@media (max-width:900px) {
  .app-shell { display:block; }
  .app-shell .sidebar { position:fixed; left:0; width:236px; transform:translateX(-100%); }
  .app-shell.menu-open .sidebar { transform:translateX(0); }
  .app-shell.menu-open .sidebar-backdrop { display:block; }
  .app-shell .menu-toggle { display:grid; place-items:center; }
  .app-shell .topbar { padding:12px 20px; }
  .app-shell main { padding:26px 20px; }
}
@media (max-width:700px) {
  .app-shell .page-heading { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  .app-shell .heading-date { align-items:flex-start; }
  .app-shell .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-shell .source-strip { grid-template-columns:1fr 1fr; }
  .app-shell .source-strip>div:first-child { grid-column:1 / -1; }
  .app-shell .source-stat:nth-child(2) { padding-left:0; border-left:0; }
  .app-shell .roster-heading { flex-wrap:wrap; }
}
@media (max-width:440px) {
  .app-shell main { padding:20px 14px; }
  .app-shell .topbar { padding:10px 14px; }
  .app-shell .stats article { padding:14px; }
  .app-shell .stats strong { font-size:29px; }
  .app-shell .analytics-card,.app-shell .checkin-card { padding:17px; }
  .app-shell .progress-summary { gap:15px; }
  .app-shell .attendance-ring { flex-basis:105px; width:105px; height:105px; }
  .app-shell .attendance-ring>div { width:89px; height:89px; }
  .app-shell .attendance-ring strong { font-size:20px; }
  .app-shell .source-strip { gap:12px; padding:17px; }
  .app-shell .source-stat { padding-left:12px; }
}

/* Final visual system: restrained brand color, consistent icons, readable data. */
.app-shell .side-nav a>span,
.app-shell .stats article i,
.app-shell .panel-icon { display:grid; place-items:center; flex:none; }
.app-shell .side-nav a>span svg { display:block; width:17px; height:17px; }
.app-shell .stats article i svg,
.app-shell .panel-icon svg { display:block; width:16px; height:16px; }
.app-shell .menu-toggle svg { display:block; width:20px; height:20px; }
.app-shell .page-heading>div:first-of-type { max-width:650px; }
.app-shell .page-heading .muted { max-width:620px; font-size:13px; line-height:1.55; }
.app-shell .side-nav a { font-size:12px; }
.app-shell .stats article>span,
.app-shell .stats .highlight>span { font-size:12px; }
.app-shell .stats small,
.app-shell .section-heading p,
.app-shell .panel-heading p,
.app-shell .progress-details p,
.app-shell .source-strip p { font-size:12px; line-height:1.5; }
.app-shell .panel-heading .eyebrow,
.app-shell .roster-heading .eyebrow { font-size:9px; }
.app-shell .panel-heading h2 { font-size:16px; }
.app-shell .progress-panel .panel-heading h2 { font-size:18px; }
.app-shell .milestone-heading h3 { font-size:12px; }
.app-shell .milestone-row>div:first-child,
.app-shell .milestone-row strong,
.app-shell .source-stat>span,
.app-shell .progress-details dt { font-size:11px; }
.app-shell .chart-slot { flex-basis:42px; min-width:42px; }
.app-shell .chart-hour { font-size:10px; }
.app-shell .checkin-card label { font-size:11px; }
.app-shell .checkin-card .primary,
.app-shell .heading-date .primary { font-size:12px; }
.app-shell .source-strip { background:#edf2f6; }
.app-shell .source-strip h2 { font-size:16px; }
.app-shell .recent-person strong,
.app-shell td strong { font-size:12px; }
.app-shell .recent-person small,
.app-shell .recent-time,
.app-shell th { font-size:10px; }
.app-shell .topbar .live,
.app-shell .topbar .subtle,
.app-shell .tools .subtle,
.app-shell .button,
.app-shell .filters input,
.app-shell .filters select { font-size:12px; }
.app-shell .analytics-card,
.app-shell .checkin-card,
.app-shell .roster-card,
.app-shell .stats article { box-shadow:0 2px 12px #14243b07; }
@media (max-width:700px) {
  .app-shell .page-heading>div:first-of-type { max-width:none; }
}

/* Sign-in screen uses the same manager-dashboard typography and palette. */
.login-shell { background:#f6f7f9; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif; }
.login-art { background:radial-gradient(circle at 70% 28%,#263e57 0,#14243b 48%,#0e1c30 100%); }
.login-art::before { width:470px; height:470px; right:-115px; top:calc(50% - 235px); border:1px solid #ffffff17; border-radius:50%; transform:none; background:radial-gradient(circle,#ef6b371c 0,#ef6b3705 48%,transparent 70%); box-shadow:0 0 0 55px #ffffff05,0 0 0 110px #ffffff04; }
.login-art .brand span { color:#b7c6d8; }
.login-art .art-copy .eyebrow { color:#f1a07d; }
.login-art .art-copy h1 { font-size:clamp(48px,5.4vw,76px); font-weight:650; letter-spacing:-.05em; }
.login-art .art-copy h1 i { color:#f09369; }
.login-art .art-copy p { max-width:420px; color:#c5d0df; line-height:1.65; }
.login-art .event-line { color:#b9c8d9; border-color:#ffffff25; }
.login-panel { background:#f6f7f9; }
.login-card { max-width:440px; padding:34px; border:1px solid #e5e9ef; border-radius:14px; background:#fff; box-shadow:0 18px 48px #14243b0d; }
.login-card .eyebrow { color:#996147; font-size:10px; letter-spacing:.14em; }
.login-card h2 { margin-top:13px; color:#202d40; font-size:clamp(30px,3vw,38px); font-weight:650; letter-spacing:-.04em; }
.login-card .muted { color:#687588; font-size:13px; line-height:1.55; }
.login-card form { margin-top:25px; }
.login-card label { color:#45566c; font-size:12px; font-weight:600; }
.login-card input { border:1px solid #dce3eb; border-radius:8px; }
.login-card input:focus { border-color:#338ac2; box-shadow:0 0 0 3px #338ac226; }
.login-card .primary { min-height:46px; margin-top:24px; border-radius:8px; background:#bd4518; color:#fff; box-shadow:none; font-size:13px; font-weight:650; }
.login-card .primary:hover { background:#a53d16; box-shadow:none; }
.login-card .private-note { color:#778599; }
.login-panel .powered { color:#8090a4; }
@media (max-width:760px) {
  .login-art::before { width:290px; height:290px; top:0; right:-90px; }
  .login-card { padding:28px; }
}
@media (max-width:440px) {
  .login-panel { padding:24px 16px; }
  .login-card { padding:24px 20px; }
}

/* Bank App reference: dark canvas, gold feature cards, light data surfaces. */
.app-shell {
  --bt-sidebar:#020817;
  --bt-bg:#f7f6f2;
  --bt-text:#172033;
  --bt-muted:#687487;
  --bt-line:#e8e9e7;
  --bt-accent:#fba900;
  background:var(--bt-bg);
}
.app-shell .sidebar { background:#020817; }
.app-shell .side-brand span { color:#d5c9ad; }
.app-shell .nav-caption { color:#8290a3; }
.app-shell .side-nav a { color:#c3cbd6; }
.app-shell .side-nav a>span { color:#d5c9ad; }
.app-shell .side-nav a:hover { background:#ffffff12; }
.app-shell .side-nav a.active { background:#fba900; color:#020817; box-shadow:0 7px 20px #fba90035; font-weight:700; }
.app-shell .side-nav a.active>span { color:#020817; }
.app-shell .side-event b,.app-shell footer b { color:#fba900; }
.app-shell .topbar { background:#fffefa; }
.app-shell .topbar .live { border-color:#d5e9d7; background:#f1f8f0; color:#356345; }
.app-shell .topbar .live b { background:#3b9361; }
.app-shell .page-heading { position:relative; isolation:isolate; overflow:hidden; min-height:204px; margin-bottom:22px; padding:27px 32px; border:1px solid #1a2841; border-radius:18px; background:linear-gradient(116deg,#020817 0%,#101d34 62%,#172a3f 100%); box-shadow:0 13px 32px #0208171c; }
.app-shell .page-heading::before { display:block; position:absolute; z-index:-1; top:-145px; right:12%; width:340px; height:340px; border:1px solid #ffffff17; border-radius:50%; box-shadow:0 0 0 44px #ffffff07,0 0 0 88px #ffffff05; content:""; }
.app-shell .page-heading .eyebrow { color:#fba900; }
.app-shell .page-heading h1 { color:#fcfcfa; font-size:clamp(25px,2.4vw,34px); }
.app-shell .page-heading h1 span { color:#fba900; }
.app-shell .page-heading .muted { color:#bac4d0; }
.app-shell .heading-date { position:relative; flex:0 0 auto; min-width:212px; align-items:flex-start; padding:17px 18px; border:1px solid #ffffff25; border-radius:13px; background:#ffffff0c; color:#d5c9ad; backdrop-filter:blur(6px); }
.app-shell .heading-date>span,.app-shell .heading-date small { color:#ccd4df; }
.app-shell .heading-date strong { color:#fcfcfa; font-size:21px; }
.app-shell .heading-date .primary { align-self:stretch; margin-top:9px; background:#fba900; color:#020817; font-weight:750; }
.app-shell .heading-date .primary:hover { background:#f9bb35; }
.app-shell .stats { margin-top:0; }
.app-shell .stats article,.app-shell .stats .highlight { position:relative; isolation:isolate; overflow:hidden; min-height:142px; border-color:#e9e9e5; border-radius:13px; background:#fffefa; }
.app-shell .stats article:first-child { border-color:#17263b; background:linear-gradient(135deg,#111d33,#020817); }
.app-shell .stats article:first-child::after { position:absolute; z-index:-1; right:-38px; bottom:-70px; width:170px; height:170px; border:1px solid #ffffff21; border-radius:50%; box-shadow:0 0 0 30px #ffffff0a; content:""; }
.app-shell .stats article:first-child>span,.app-shell .stats article:first-child strong { color:#fcfcfa; }
.app-shell .stats article:first-child small { color:#b8c4d2; }
.app-shell .stats article:first-child i { background:#ffffff1c; color:#fba900; }
.app-shell .stats article.highlight { border-color:#fba900; background:#fba900; }
.app-shell .stats article.highlight>span,.app-shell .stats article.highlight strong,.app-shell .stats article.highlight small { color:#172033; }
.app-shell .stats article.highlight i { background:#02081718; color:#020817; }
.app-shell .stats article i { background:#f2f3ee; color:#354b37; }
.app-shell .stats .progress div { background:#fc2604; }
.app-shell .event-tag { border-color:#e9e5db; background:#fffefa; color:#5f6876; }
.app-shell .analytics-card,.app-shell .checkin-card,.app-shell .roster-card { border-color:#e9e9e5; border-radius:13px; background:#fffefa; }
.app-shell .panel-icon { background:#f1f2ed; color:#354b37; }
.app-shell .status-tag { background:#e5f2e7; color:#276340; }
.app-shell .attendance-ring { background:conic-gradient(#fba900 var(--rate,0%),#edf0ec 0); }
.app-shell .milestone-track span { background:#354b37; }
.app-shell .milestone-row + .milestone-row .milestone-track span { background:#fc2604; }
.app-shell .timeline-card { border-color:#15233a; background:#081328; }
.app-shell .timeline-card .panel-heading h2,.app-shell .timeline-card .chart-count { color:#fcfcfa; }
.app-shell .timeline-card .panel-heading .eyebrow { color:#fba900; }
.app-shell .timeline-card .panel-heading p,.app-shell .timeline-card .chart-hour,.app-shell .timeline-card .chart-footer,.app-shell .timeline-card .panel-footer { color:#b9c4d2; }
.app-shell .timeline-card .panel-icon { background:#ffffff16; color:#fba900; }
.app-shell .timeline-card .arrival-chart { border-color:#ffffff21; background:repeating-linear-gradient(to top,transparent 0,transparent 47px,#ffffff12 48px,#ffffff12 49px); }
.app-shell .timeline-card .chart-bar { background:linear-gradient(180deg,#fba900,#fc2604); }
.app-shell .timeline-card .chart-bar.zero { background:#ffffff27; }
.app-shell .timeline-card .panel-footer { border-color:#ffffff1c; }
.app-shell .timeline-card .panel-footer a { color:#fba900; }
.app-shell .checkin-card .primary { background:#020817; color:#fcfcfa; }
.app-shell .checkin-card .primary:hover { background:#172a46; }
.app-shell .person-hint.found { border-left-color:#27774f; }
.app-shell .person-hint.missing { border-left-color:#bd3034; }
.app-shell .source-strip { border-color:#e7e3d6; border-radius:13px; background:#efede5; }
.app-shell .source-strip .eyebrow { color:#8b6b1d; }
.app-shell .source-track { background:#d8dacf; }
.app-shell .source-track span { background:#354b37; }
.app-shell .source-stat:last-child .source-track span { background:#fc2604; }
.app-shell .tools .subtle:hover,.app-shell .button:hover,.app-shell .filters .subtle:hover { border-color:#d9aa55; background:#fff8e8; }
.app-shell .pill { background:#e8f4e9; color:#276340; }
.app-shell .pill.pending { background:#f4eee2; color:#745520; }
.app-shell #toast { border-color:#fba900; background:#020817; }
.login-art { background:radial-gradient(circle at 70% 28%,#1c2b42 0,#020817 66%); }
.login-art::before { background:radial-gradient(circle,#fba90020 0,#fba90007 48%,transparent 70%); }
.login-art .art-copy .eyebrow,.login-art .art-copy h1 i { color:#fba900; }
.login-card .eyebrow { color:#8e681e; }
.login-card .primary { background:#fba900; color:#020817; }
.login-card .primary:hover { background:#f9bb35; }
@media (max-width:700px) {
  .app-shell .page-heading { padding:24px; }
  .app-shell .heading-date { align-items:flex-start; width:100%; margin-top:17px; }
}
@media (max-width:440px) {
  .app-shell .page-heading { padding:20px; }
  .app-shell .stats article,.app-shell .stats .highlight { min-height:126px; }
}