/* mobile.css - GEM Time Mobile (the employee app at /m)
 *
 * Deliberately a SEPARATE stylesheet from style.css, for the same reason
 * onboarding.css is separate: the admin console is an information-dense
 * desktop tool, and inheriting its table/typography density would make the
 * phone app feel like a shrunken web page instead of an app. Nothing here
 * touches the desktop pages, and a future GEM Time update that rewrites
 * style.css cannot break this one.
 *
 * Brand values match the GEM Time icon gradient (#0B3C5D -> #12A0A8) and
 * the desktop navy/teal in style.css.
 */

:root {
  --gm-navy: #0f2440;
  --gm-navy-2: #16335a;
  --gm-teal: #0d9488;
  --gm-teal-dark: #0b7a70;
  --gm-teal-tint: #e6f6f4;
  --gm-bg: #f2f4f8;
  --gm-card: #ffffff;
  --gm-border: #e3e8ef;
  --gm-text: #16202c;
  --gm-muted: #6b7684;
  --gm-danger: #c0392b;
  --gm-danger-tint: #fdecea;
  --gm-ok: #1e824c;
  --gm-ok-tint: #e8f5ee;
  --gm-warn: #b45309;
  --gm-warn-tint: #fdf3e2;
  --gm-info-tint: #eaf1fb;
  --gm-info: #2461c9;
  --gm-radius: 16px;
  --gm-bar-h: 54px;
  --gm-tabs-h: 62px;
}

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

html, body { height: 100%; }

body.gm {
  margin: 0;
  background: var(--gm-bg);
  color: var(--gm-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; /* never below 16 on inputs - iOS zooms the page otherwise */
  line-height: 1.45;
  /* Stop the whole app rubber-banding like a web page; individual scroll
     areas still scroll normally. */
  overscroll-behavior-y: none;
}

/* ---------- shell ---------- */
.gm-app { min-height: 100%; display: flex; flex-direction: column; }

.gm-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--gm-bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  background: linear-gradient(135deg, #0B3C5D 0%, var(--gm-navy) 55%, #10405f 100%);
  color: #fff;
}
.gm-bar-title { flex: 1; font-weight: 650; font-size: 1.05rem; letter-spacing: 0.01em; }
.gm-bar-back, .gm-bar-account {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 -6px; border-radius: 50%;
  color: #cfe0ee; text-decoration: none;
}
.gm-bar-back:active, .gm-bar-account:active { background: rgba(255, 255, 255, 0.14); }
.gm-bar-mark {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(135deg, #12A0A8, #0d9488);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.gm-main {
  flex: 1;
  padding: 14px 14px calc(var(--gm-tabs-h) + env(safe-area-inset-bottom) + 18px);
  max-width: 640px; /* readable on a tablet, unchanged on a phone */
  width: 100%;
  margin: 0 auto;
}

/* ---------- bottom tabs ---------- */
.gm-tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(1.6) blur(8px);
  border-top: 1px solid var(--gm-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.gm-tab {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  height: var(--gm-tabs-h);
  text-decoration: none;
  color: var(--gm-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gm-tab svg { width: 23px; height: 23px; }
.gm-tab.is-active { color: var(--gm-teal-dark); }
.gm-tab:active { background: #eef1f6; }
.gm-dot {
  position: absolute;
  top: 6px; left: 50%; margin-left: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px;
  background: var(--gm-danger); color: #fff;
  font-size: 0.62rem; font-style: normal; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- cards & type ---------- */
.gm-card {
  background: var(--gm-card);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(16, 32, 56, 0.04);
}
.gm-card.tight { padding: 12px 14px; }
.gm-card h2 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gm-muted);
}
.gm-sub { margin: 0; color: var(--gm-muted); font-size: 0.85rem; }
.gm-muted { color: var(--gm-muted); }
.gm-center { text-align: center; }
.gm-section-title {
  margin: 18px 4px 8px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gm-muted);
}
.gm-empty { color: var(--gm-muted); font-size: 0.9rem; padding: 6px 0; }

/* ---------- the clock hero ---------- */
.gm-hero {
  background: linear-gradient(150deg, #0B3C5D 0%, #133a63 50%, #0f5d68 100%);
  color: #fff;
  border: none;
  padding: 20px 16px 22px;
  text-align: center;
}
.gm-hero .gm-hello { font-size: 0.9rem; color: #b9cee0; margin: 0 0 2px; }
.gm-hero .gm-company { font-size: 0.76rem; color: #8fb0ca; margin: 0 0 14px; }
.gm-now {
  font-variant-numeric: tabular-nums;
  font-size: 2.9rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
}
.gm-now-date { font-size: 0.82rem; color: #b9cee0; margin: 2px 0 16px; }
.gm-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 0.83rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.13);
  margin-bottom: 18px;
}
.gm-status .gm-pip { width: 9px; height: 9px; border-radius: 50%; background: #7d8ea0; }
.gm-status.is-in { background: rgba(45, 190, 150, 0.22); }
.gm-status.is-in .gm-pip { background: #3ddc9a; box-shadow: 0 0 0 0 rgba(61, 220, 154, 0.7); animation: gm-pulse 2.2s infinite; }
@keyframes gm-pulse {
  70% { box-shadow: 0 0 0 9px rgba(61, 220, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 154, 0); }
}
.gm-elapsed { font-variant-numeric: tabular-nums; }

/* The punch button. Large on purpose - it is pressed with a thumb, often
   in a hurry, sometimes with wet or gloved hands. */
.gm-punch {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  border: none; border-radius: 14px;
  padding: 18px 16px;
  font-size: 1.12rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, #12b795, #0d9488);
  box-shadow: 0 6px 18px rgba(13, 148, 136, 0.35);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.gm-punch.out { background: linear-gradient(180deg, #e0553f, #c0392b); box-shadow: 0 6px 18px rgba(192, 57, 43, 0.35); }
.gm-punch:active { transform: translateY(2px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }
.gm-punch[disabled] { opacity: 0.65; box-shadow: none; }
.gm-punch-note { margin: 10px 0 0; font-size: 0.75rem; color: #a9c4d8; }

/* ---------- stats ---------- */
.gm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gm-stats.three { grid-template-columns: repeat(3, 1fr); }
.gm-stat {
  background: var(--gm-card);
  border: 1px solid var(--gm-border);
  border-radius: 14px;
  padding: 12px 12px 11px;
}
.gm-stat .n { font-size: 1.32rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.gm-stat .l { font-size: 0.7rem; color: var(--gm-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-top: 2px; }
.gm-stat.accent { background: var(--gm-teal-tint); border-color: #cbe9e4; }
.gm-stat.accent .n { color: var(--gm-teal-dark); }

/* ---------- rows ---------- */
.gm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--gm-border);
}
.gm-row:first-of-type { border-top: none; }
.gm-row .gm-row-main { flex: 1; min-width: 0; }
.gm-row .gm-row-title { font-weight: 600; font-size: 0.95rem; }
.gm-row .gm-row-meta { font-size: 0.8rem; color: var(--gm-muted); }
.gm-row .gm-row-right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.gm-row { text-decoration: none; color: inherit; }
a.gm-row:active { background: #f5f7fa; }

/* Date chip on schedule/timecard rows */
.gm-date {
  flex: 0 0 auto;
  width: 46px; text-align: center;
  border-radius: 11px; padding: 5px 0 6px;
  background: #eef2f7; color: var(--gm-navy);
}
/* display:block on both halves so a two-character day (7 Aug) and a
   three-character month always stack the same way as a two-digit day -
   left inline they reflow differently and the column looks broken. */
.gm-date .d { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.15; }
.gm-date .m { display: block; font-size: 0.62rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gm-muted); font-weight: 700; }
.gm-date.is-today { background: var(--gm-navy); color: #fff; }
.gm-date.is-today .m { color: #a9c4d8; }

/* Shift template colour chip */
.gm-chip {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  background: #eef2f7; color: var(--gm-navy);
}

/* ---------- badges ---------- */
.gm-badge {
  display: inline-block;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  background: #eef1f5; color: var(--gm-muted);
}
.gm-badge.ok { background: var(--gm-ok-tint); color: var(--gm-ok); }
.gm-badge.warn { background: var(--gm-warn-tint); color: var(--gm-warn); }
.gm-badge.info { background: var(--gm-info-tint); color: var(--gm-info); }
.gm-badge.danger { background: var(--gm-danger-tint); color: var(--gm-danger); }

/* ---------- notices ---------- */
.gm-notice {
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  font-size: 0.87rem; line-height: 1.4;
}
.gm-notice.warn { background: var(--gm-warn-tint); color: #7c3d06; border: 1px solid #f3ddb6; }
.gm-notice.danger { background: var(--gm-danger-tint); color: #8e2318; border: 1px solid #f3c6c0; }
.gm-notice.info { background: var(--gm-info-tint); color: #1c4585; border: 1px solid #cadcf6; }
.gm-notice.ok { background: var(--gm-ok-tint); color: #14603a; border: 1px solid #bfe3ce; }

/* ---------- forms ---------- */
label.gm-label {
  display: block;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gm-muted); margin: 14px 0 5px;
}
label.gm-label:first-child { margin-top: 0; }
.gm-field, select.gm-field, textarea.gm-field {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  font: inherit; font-size: 16px;
  color: var(--gm-text); background: #fff;
  border: 1px solid var(--gm-border); border-radius: 12px;
  padding: 13px 14px;
  min-height: 48px;
}
select.gm-field {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5' fill='none' stroke='%236b7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
  padding-right: 40px;
}
.gm-field:focus, select.gm-field:focus, textarea.gm-field:focus {
  outline: none; border-color: var(--gm-teal); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.gm-field[type="file"] { padding: 10px 12px; }
.gm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gm-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.88rem; margin-top: 14px; color: var(--gm-text);
}
.gm-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--gm-teal); }

.gm-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px;
  border: none; border-radius: 13px;
  padding: 14px 18px;
  font: inherit; font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--gm-teal); text-decoration: none;
}
.gm-btn:active { background: var(--gm-teal-dark); }
.gm-btn[disabled] { opacity: 0.6; }
.gm-btn.ghost { background: #eef1f5; color: var(--gm-navy); }
.gm-btn.ghost:active { background: #e2e7ee; }
.gm-btn.danger { background: var(--gm-danger); }
.gm-btn.small { min-height: 40px; padding: 9px 14px; font-size: 0.85rem; width: auto; border-radius: 10px; }
.gm-btn-row { display: flex; gap: 8px; margin-top: 12px; }
.gm-btn-row .gm-btn { width: auto; flex: 1; }

/* ---------- period pager ---------- */
.gm-pager { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gm-pager .gm-pager-label {
  flex: 1; text-align: center;
  font-size: 0.86rem; font-weight: 600; color: var(--gm-navy);
  background: #fff; border: 1px solid var(--gm-border); border-radius: 12px;
  padding: 11px 8px;
}
.gm-pager a, .gm-pager span.disabled {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 12px; border: 1px solid var(--gm-border);
  background: #fff; color: var(--gm-navy); text-decoration: none;
}
.gm-pager span.disabled { opacity: 0.35; }

/* ---------- login ---------- */
.gm-login {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 34px) 22px calc(env(safe-area-inset-bottom) + 28px);
  background: linear-gradient(165deg, #0B3C5D 0%, #0f2440 55%, #0d4d5c 100%);
  color: #fff;
}
.gm-login-mark { width: 74px; height: 74px; margin: 0 auto 18px; display: block; border-radius: 20px; }
.gm-login h1 { text-align: center; font-size: 1.4rem; margin: 0 0 4px; font-weight: 650; }
.gm-login p.gm-login-sub { text-align: center; color: #a9c4d8; font-size: 0.88rem; margin: 0 0 26px; }
.gm-login label.gm-label { color: #a9c4d8; }
.gm-login .gm-field { background: rgba(255, 255, 255, 0.97); border-color: transparent; }
.gm-login .gm-btn { margin-top: 22px; background: #12b795; }
.gm-login-foot { text-align: center; color: #7fa0bb; font-size: 0.72rem; margin-top: 26px; line-height: 1.6; }

/* ---------- iOS install hint ---------- */
.gm-install {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--gm-tabs-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 40;
  background: var(--gm-navy); color: #fff;
  border-radius: 14px; padding: 13px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 26px rgba(10, 24, 44, 0.35);
  font-size: 0.83rem; line-height: 1.35;
}
.gm-install button {
  -webkit-appearance: none; appearance: none;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  border: none; border-radius: 9px; padding: 8px 11px;
  font: inherit; font-size: 0.8rem; font-weight: 700;
  flex: 0 0 auto;
}

/* Standalone (installed) mode: the OS draws its own status bar area, and
   there is no browser chrome to scroll away, so the top bar can sit
   flush. */
@media (display-mode: standalone) {
  .gm-install { display: none; }
}

/* ---------- offline ---------- */
.gm-offline {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 26px; gap: 6px;
}
.gm-offline h1 { font-size: 1.25rem; margin: 8px 0 0; }

/* ---------- dark mode ---------- */
/* Phones are used on night shifts and in dark warehouses; a white slab at
   3am is the fastest way to make an app unpleasant. */
@media (prefers-color-scheme: dark) {
  :root {
    --gm-bg: #0d1420;
    --gm-card: #151f2e;
    --gm-border: #26334a;
    --gm-text: #e8eef6;
    --gm-muted: #93a3b8;
    --gm-teal-tint: #10312f;
    --gm-ok-tint: #12301f;
    --gm-warn-tint: #34240c;
    --gm-danger-tint: #3a1a16;
    --gm-info-tint: #14243f;
    --gm-ok: #4ade80;
    --gm-warn: #fbbf24;
    --gm-danger: #f87171;
    --gm-info: #7fb0ff;
  }
  .gm-tabs { background: rgba(15, 23, 36, 0.97); }
  .gm-tab.is-active { color: #2dd4bf; }
  .gm-tab:active { background: #1b2536; }
  .gm-date { background: #22304a; color: #dce6f3; }
  .gm-date.is-today { background: #2dd4bf; color: #06231f; }
  .gm-date.is-today .m { color: #0a3b34; }
  .gm-chip { background: #22304a; color: #dce6f3; }
  .gm-badge { background: #22304a; color: #a9b8cc; }
  .gm-field, select.gm-field, textarea.gm-field { background: #101a28; color: var(--gm-text); }
  .gm-btn.ghost { background: #22304a; color: #dce6f3; }
  .gm-pager .gm-pager-label, .gm-pager a, .gm-pager span.disabled { background: var(--gm-card); color: var(--gm-text); }
  a.gm-row:active { background: #1b2536; }
  .gm-notice.warn { color: #f6d69a; border-color: #5a4413; }
  .gm-notice.danger { color: #f8c0b8; border-color: #6b2b23; }
  .gm-notice.info { color: #bcd4fb; border-color: #274169; }
  .gm-notice.ok { color: #b6ecca; border-color: #1f5436; }
}

/* Respect a user who has asked the OS to cut down on motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}