/* Deliberately the SAME visual language as the SPFx Crew Clock web part
   (v1.0.0.17). Crews should not be able to tell they have moved to a different
   app — same dark card layout, same orange START, same green DONE, same sizes.
   Anything that reads as "a new thing to learn" is a adoption cost, and adoption
   is the only reason this project exists. */

:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #1b1b1f;
  color: #f5f5f5;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Stop iOS bouncing the whole page under a fixed layout. */
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

.cc {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
  padding-top: calc(12px + env(safe-area-inset-top));
}

.cc-h { font-size: 15px; color: #b9b9c0; margin: 0 0 10px; }

/* 30px/700 on a 30px-padded block: the one control that must be hittable
   without looking, wearing gloves, in sunlight. */
.cc-btn {
  display: block; width: 100%;
  border: 0; border-radius: 14px;
  background: #c2410c; color: #fff;
  font-size: 30px; font-weight: 700;
  padding: 30px 16px; margin: 12px 0;
  cursor: pointer; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.cc-btn:active { background: #9a3412; }
.cc-btn[disabled] { opacity: .55; }
.cc-btn.sm { font-size: 20px; padding: 18px 14px; }
.cc-done { background: #166534; }
.cc-done:active { background: #124e28; }
.cc-alt { background: #33333a; font-size: 17px; padding: 14px; font-weight: 600; }

.cc-sub { font-size: 15px; font-weight: 400; opacity: .85; display: block; margin-top: 4px; }
.cc-card { background: #26262a; border: 1px solid #33333a; border-radius: 12px; padding: 14px; margin: 12px 0; }
.cc-ban { background: #722608; border-radius: 12px; padding: 14px; margin: 12px 0; font-size: 17px; }
.cc-el { font-size: 44px; font-weight: 700; margin: 6px 0; font-variant-numeric: tabular-nums; }
.cc-st { font-size: 14px; color: #b9b9c0; min-height: 20px; margin-top: 10px; }
.cc-warn { color: #fbbf24; font-size: 14px; margin: 8px 0; }
.cc-lnk { color: #fb923c; cursor: pointer; text-decoration: underline; font-size: 15px; }

/* 16px minimum on form controls specifically so iOS does not zoom the page on
   focus — the same rule the Field Calendar's crew mode carries. */
.cc-sel {
  font-size: 18px; padding: 10px; border-radius: 8px;
  border: 1px solid #444; background: #1b1b1f; color: #f5f5f5;
  margin: 4px 6px 4px 0; font-family: inherit;
}
.cc-in {
  font-size: 17px; padding: 12px; width: 100%;
  border-radius: 8px; border: 1px solid #444;
  background: #1b1b1f; color: #f5f5f5; font-family: inherit;
}

/* --- status surfaces (ported from web part v1.0.0.17) --- */
.cc-bar {
  border-radius: 12px; padding: 12px 14px; margin: 0 0 12px;
  font-size: 17px; font-weight: 600; line-height: 1.3;
}
.cc-bar-ok   { background: #14532d; color: #dcfce7; }
.cc-bar-wait { background: #78350f; color: #fef3c7; }
.cc-bar-bad  { background: #7f1d1d; color: #fee2e2; }

.cc-rc { border-radius: 12px; padding: 14px; margin: 0 0 12px; }
.cc-rc-ok   { background: #14532d; color: #dcfce7; }
.cc-rc-wait { background: #78350f; color: #fef3c7; }
.cc-rc-bad  { background: #7f1d1d; color: #fee2e2; }
.cc-rc-t { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.cc-rc-s { font-size: 15px; opacity: .92; }

.cc-log { background: #26262a; border: 1px solid #33333a; border-radius: 12px; padding: 12px 14px; margin: 16px 0 0; }
.cc-log-h { font-size: 14px; color: #b9b9c0; margin-bottom: 8px; letter-spacing: .03em; }
.cc-log-r { font-size: 16px; padding: 6px 0; border-top: 1px solid #303036; }
.cc-log-r:first-of-type { border-top: 0; }
.cc-log-w { color: #fbbf24; }
.cc-log-s { color: #4ade80; }