/* ShiftTracker UK web app — dark theme, same palette, artwork and tile colours as the
   ShiftTracker UK Android app (MaterialTheme(colorScheme = darkColorScheme())).

   Backgrounds: the menu and login use the UK artwork, every sub-screen the general artwork
   (MainActivity backgroundRes), and a wide screen (601 px and up — the same switch the
   Android app makes) the "_fold" variant. The "_fold" files here are 16:9 backdrops built
   from the Android "_fold" drawings: the whole drawing fitted and centred over a softened,
   darkened copy of itself. That way the picture fills a 16:9 PC monitor (or any wide
   screen) without cutting the logo, the skyline or the flags, and without stretching.
   Phones keep the tall drawing, cropped to fill, exactly like ContentScale.Crop. */

:root {
  --primary: #D0BCFF;
  --secondary: #CCC2DC;
  --tertiary: #EFB8C8;
  --on-primary: #381E72;
  --window: #0A1119;
  --surface-variant: #2A2A2E;
  --on-surface: #E6E1E5;
  --on-surface-variant: #CAC4D0;
  --menu-card: rgba(30, 30, 30, 0.40);
  --header-row: rgba(59, 59, 61, 0.40);
  --profile-card: #3B3940;
  --subtitle: #B0B0B0;
  --paypal-bg: #003087;
  --paypal-sub: #009CDE;
  --bh-hint: #81D4FA;
  --section: #90CAF9;
  --positive: #81C784;
  --negative: #EF5350;
  --error: #FFB4AB;
  --split: #FFCA28;
  --pending: #1E3B4D;
  --approved: #1B4D2E;
  --approved-text: #7EE2A8;
  --rejected: #4D1E1E;
  --month-full: #1E3A5F;
  --month-empty: #1E1E1E;
  --payslip-card: #2C3E50;
  --perfect: #1B5E20;
  --discrepancy: #B71C1C;
  --legend-card: #1E1E1E;
  --rota-selected: #1E3B4D;
  --rota-line: #2C2C30;
  --rota-box: #546E7A;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--window);
  color: var(--on-surface);
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

/* Background artwork. Two shapes of screen:
   - a phone held upright gets the tall Android drawing, cropped to fill (nothing else
     is on screen, so no part of the drawing matters more than another);
   - a wide screen (601 px and up: PC monitor 16:9, tablet, phone turned sideways) gets the
     16:9 backdrop built from the Android "_fold" drawing — picture whole in the middle,
     its own softened copy behind it, so the screen is always full. */
body.with-bg {
  background-color: #03080E;
  background-image: url("/bg-uk.webp");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.with-bg.bg-gen { background-image: url("/bg-gen.webp"); }
@media (min-width: 601px) {
  body.with-bg { background-image: url("/bg-uk-fold.webp"); }
  body.with-bg.bg-gen { background-image: url("/bg-gen-fold.webp"); }
}

/* Squarer wide screens (below 16:10, e.g. 4:3 monitors, tablets turned sideways): "cover" would blow the 16:9
   backdrop up and push the artwork under the side columns, so show the whole tall picture fitted to the height. */
@media (min-width: 900px) and (max-aspect-ratio: 8/5) {
  body.with-bg:not(.bg-gen) {
    background-image: url("/bg-uk.webp");
    background-position: center top;
    background-size: auto 100vh;
  }
}

/* Phones: the tall picture has the "SHIFTRACKER UK" title at the very top. In a phone browser (address bar
   showing) the screen is wider than the picture, so "cover" scaled it up and cut the title off. Fit the whole
   picture to the screen height and fill the sides with a gradient of its (dark) edge colours. Phones narrower
   than 9:20 keep "cover". The general artwork on the inner screens is left as it was. */
@media (max-width: 600px) and (min-aspect-ratio: 9/20) {
  body.with-bg:not(.bg-gen) {
    background-color: #03080E;
    background-image: url("/bg-uk.webp"),
      linear-gradient(to bottom, #000000 0%, #000306 10%, #0f2a2e 20%, #0a2223 30%, #0d282c 40%, #0e3334 50%,
        #041c1f 60%, #061d22 70%, #000d0e 80%, #000308 90%, #000000 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100vh, 100% 100%;
    background-size: auto 100svh, 100% 100%;
    background-attachment: fixed;
  }
}

#app {
  max-width: 940px;
  /* Left-aligned on a PC, full width on a phone. */
  margin: 0;
  padding: 16px 16px 48px;
  min-height: 100vh;
}
/* On the logged-out page the public description follows the login card, so #app only
   needs to reserve the card's height (avoids a layout jump when the app boots). */
body:not(.in-app) #app { min-height: 330px; }
@media (max-width: 600px) {
  #app { max-width: none; }
  /* The title is baked into the top of the picture (about the top 17%): start the login card below it. */
  body:not(.in-app) .narrow { margin-top: 20vh; margin-top: 20svh; }
}

/* The menu docks to the left on a wide screen (same as the ShiftTracker web app), so the
   artwork stays visible beside it. */
@media (min-width: 900px) {
  body.menu-left #app { max-width: 460px; margin-left: 5%; margin-right: auto; }
}

/* Every screen after the main menu carries .bg-gen: centre the column on the screen.
   On a phone #app is full width, so the auto margins have no visible effect. */
body.bg-gen #app { margin-left: auto; margin-right: auto; }

/* Login sits in the clear band of the artwork. */
.narrow { max-width: 460px; margin: 6vh auto 0; }

/* On a PC the login card sits in the LEFT side space and the public description (and the disclaimer
   at its end) in the RIGHT side space, so the picture in the middle stays free to be seen.
   The side width is worked out from the picture itself: on a 16:9-or-wider screen the artwork
   (bg-uk-fold) fills about 56% of the screen width, centred; on a squarer screen (below 16:10) the tall
   picture is fitted to the screen height instead (see the body.with-bg rules above) and is about
   0.4628 x the screen height wide. Each side column is what is left, less a small gap. On a phone
   everything stacks in the same order (login card first). */
.login-layout { display: block; }

@media (min-width: 900px) {
  body:not(.in-app) .login-layout {
    --art-w: calc(0.56 * max(100vw, 177.78vh));
    --side: max(280px, calc((100vw - var(--art-w)) / 2 - 40px));
    display: grid;
    grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
    align-items: start;
    max-width: none;
    margin: 0;
    padding: 4vh 24px 40px;
  }
  /* Squarer screens (below 16:10): the tall picture, fitted to the height, is the centre. */
  @media (max-aspect-ratio: 8/5) {
    body:not(.in-app) .login-layout { --art-w: calc(0.4628 * 100vh); }
  }
  /* Signed in: the wrapper goes back to being a plain page container. */
  body.in-app .login-layout { display: block; max-width: none; margin: 0; padding: 0; }
  body:not(.in-app) #app {
    grid-column: 1;
    min-height: 0;
    max-width: none;
    padding: 0;
    position: sticky;   /* the login card stays in view while the description scrolls */
    top: 4vh;
  }
  body:not(.in-app) .narrow { margin: 0; max-width: none; }
  body:not(.in-app) #site-home { grid-column: 3; margin: 0; padding: 0; max-width: none; }
}

/* Menu sections, styled like the ShiftTracker web app: a small letter-spaced title over a
   solid card of full-width buttons. */
.section-title {
  font-size: .8rem;
  letter-spacing: 2px;
  color: var(--section);
  margin: 16px 0 4px;
  font-weight: 700;
}
.menu-section {
  background: rgba(28, 37, 48, .96);
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
}
.menu-btn {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 8px 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--primary);
  color: var(--on-primary);
  text-align: center;
}
.menu-btn.outline { background: transparent; border: 1px solid #888; color: #fff; font-weight: 500; }
.menu-btn.danger { background: #D32F2F; color: #fff; }

h1.title {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  margin: 8px 0 16px;
}
h1.title.caps { text-transform: uppercase; letter-spacing: 2px; }
h2.subtitle { font-size: 14px; color: var(--subtitle); font-weight: 400; margin: -10px 0 16px; }
h3.section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #CCCCCC;
  text-transform: uppercase;
  margin: 18px 0 4px 12px;
}

.card {
  background: rgba(44, 44, 48, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.card.plain { background: rgba(20, 20, 22, 0.78); }
.card.tight { padding: 12px; }

.menu-card {
  background: var(--menu-card);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 16px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 16px;
  text-align: left;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(208, 188, 255, 0.12); }
.menu-item .glyph { width: 24px; text-align: center; font-size: 18px; opacity: .95; }
.menu-item.destructive { color: var(--error); }

.header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--header-row);
  border-radius: 24px;
  padding: 16px;
  margin-bottom: 12px;
}
.avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  overflow: hidden; cursor: pointer; flex: 0 0 48px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-name { font-size: 18px; font-weight: 700; color: #fff; }
.header-sub { font-size: 14px; color: var(--subtitle); }

.banner { border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font-size: 14px; }
.banner .banner-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.banner.pending { background: var(--pending); }
.banner.approved { background: var(--approved); color: var(--approved-text); }
.banner.rejected { background: var(--rejected); }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grow { flex: 1 1 auto; }
.spacer { height: 12px; }

button, .btn {
  font: inherit;
  border: 0;
  border-radius: 20px;
  padding: 10px 18px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: .45; cursor: default; }
button.outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
button.ghost { background: var(--surface-variant); color: var(--on-surface-variant); }
button.danger { background: #D32F2F; color: #fff; }
button.green { background: #2E7D32; color: #fff; }
button.blue { background: #1976D2; color: #fff; }
button.purple { background: #673AB7; color: #fff; }
button.google { background: var(--primary); color: var(--on-primary); width: 100%; margin-top: 10px; }
button.small { padding: 6px 12px; font-size: 13px; }
button.chip {
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 18px;
}
button.chip.active { background: var(--primary); color: var(--on-primary); }
button.link { background: none; color: var(--primary); padding: 4px 6px; font-weight: 500; }

label { display: block; font-size: 13px; color: var(--on-surface-variant); margin: 12px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  background: #1B1B1E;
  border: 1px solid #4A4A50;
  border-radius: 10px;
  color: #fff;
  padding: 11px 12px;
  font: inherit;
}
input[type=date] { color-scheme: dark; }
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-surface); margin: 8px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.hint { font-size: 13px; color: var(--bh-hint); }
.note { font-size: 13px; color: var(--subtitle); }
.error-text { color: var(--error); font-size: 14px; }
.ok-text { color: var(--positive); }
.money-neg { color: var(--negative); }

.divider { height: 1px; background: #4A4A50; margin: 12px 0; }

/* Log Viewer tiles */
.tile-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tile {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  cursor: pointer;
  padding: 2px;
  overflow: hidden;
  text-align: center;
}
.tile.placeholder { background: transparent; border-color: transparent; cursor: default; }
.tile .t-date { font-weight: 800; font-size: 10px; }
.tile.bh .t-date { color: var(--bh-hint); }
.tile.light .t-date, .tile.light .t-main, .tile.light .t-sub { color: #1E1E1E; }
.tile .t-main { font-weight: 700; font-size: 10px; }
.tile .t-short { font-weight: 700; font-size: 8px; }
.tile .t-sub { font-size: 8px; }
.tile .t-ot { color: #81C784; font-weight: 700; font-size: 8px; }
.tile.light .t-ot { color: #1B5E20; }
.tile .t-break { color: #FFA726; font-size: 8px; }
.tile.light .t-break { color: #B71C1C; }

.legend { background: var(--legend-card); border-radius: 12px; padding: 12px; }
.legend h4 { margin: 0 0 8px; font-size: 13px; color: #fff; }
.legend-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); }
.legend-row span { font-size: 11px; color: #CCCCCC; }

/* Year view */
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.month-card { background: rgba(30,30,32,.8); border-radius: 10px; padding: 8px; }
.month-card h5 { margin: 0 0 6px; font-size: 12px; color: #fff; }
.month-weeks { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.day-box { aspect-ratio: 1; border-radius: 2px; font-size: 7px; color: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
.day-box.empty { background: transparent; }

/* Archive */
.month-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.archive-month { border-radius: 12px; padding: 14px; cursor: pointer; color: #fff; }
.archive-month.full { background: var(--month-full); }
.archive-month.empty { background: var(--month-empty); color: #888; cursor: default; }
.archive-month .count { font-size: 12px; color: #9FD3FF; }
.archive-month.empty .count { color: #888; }
.payslip-card { background: var(--payslip-card); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.payslip-card .paid-line { color: var(--section); font-size: 12px; }
.badge { display: inline-block; border-radius: 6px; padding: 4px 8px; font-size: 12px; margin-top: 6px; color: #fff; }
.badge.perfect { background: var(--perfect); }
.badge.bad { background: var(--discrepancy); }

/* Rest days rota */
.rota-line { background: var(--rota-line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.rota-line.selected { background: var(--rota-selected); outline: 1px solid var(--primary); }
.rota-boxes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rota-box {
  border-radius: 6px; padding: 10px 0; text-align: center; font-weight: 700;
  background: #33343A; color: #ddd; cursor: pointer; user-select: none;
}
.rota-box.rd { background: var(--rota-box); color: #fff; }
.rota-box .letter { font-size: 11px; opacity: .8; display: block; }

/* Modal + toast */
#modal-root { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.65); padding: 16px; z-index: 40; }
#modal-root.open { display: flex; }
.modal {
  background: #1E1E22;
  border: 1px solid #4A4A50;
  border-radius: 16px;
  padding: 18px;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow: auto;
}
.modal h3 { margin: 0 0 12px; font-size: 18px; color: #fff; }
.modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #33343A;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

.paypal-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--paypal-bg);
  border-radius: 14px; padding: 14px 16px; margin-top: 20px;
  color: #fff; text-decoration: none;
}
.paypal-card .coffee { font-size: 26px; }
.paypal-card .p-title { font-weight: 700; }
.paypal-card .p-sub { color: var(--paypal-sub); font-size: 13px; }

.footer-credit { text-align: center; color: #888; font-size: 12px; margin-top: 18px; }
.footer-note { text-align: center; color: #777; font-size: 11px; margin-top: 6px; }

.salary-lines p { margin: 4px 0; }
.salary-lines p.small { font-size: 13px; }
.salary-lines p.bold { font-weight: 700; }
.split-year { color: var(--split); font-size: 13px; }
.section-header { color: var(--section); font-weight: 700; font-size: 13px; margin: 10px 0 6px; }

.totals-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.totals-row .label { color: #CCCCCC; }

.file-drop {
  border: 1px dashed #6A6A72; border-radius: 12px; padding: 18px; text-align: center;
  color: var(--subtitle); font-size: 14px; cursor: pointer;
}
.template-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #3A3A40; }

@media (max-width: 600px) {
  #app { padding: 12px 12px 40px; }
  h1.title { font-size: 24px; }
  .tile-grid { gap: 3px; }
}

/* ---------------------------------------------------------------------------
   Public home / SEO content (logged-out page only)
   The text is always in the HTML so crawlers and no-JS visitors can read it;
   app.js adds .in-app to <body> as soon as somebody is signed in.
   --------------------------------------------------------------------------- */
body.in-app #site-home { display: none; }

#site-home {
  max-width: 860px;
  margin: 0 auto 32px;
  padding: 0 16px;
}

.home-hero {
  background: rgba(10, 17, 25, .82);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 20px 22px;
  margin: 0 0 14px;
}

.home-kicker {
  margin: 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#site-home h1 {
  margin: 6px 0 10px;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.18;
  color: #fff;
}

.home-lede {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--on-surface);
}

.home-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.home-points li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--on-surface-variant);
}

.home-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 700;
}

.home-section {
  background: rgba(20, 20, 22, .84);
  padding: 18px 20px;
}

#site-home h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  color: var(--primary);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.home-grid h3 {
  margin: 0 0 3px;
  font-size: 14px;
  color: #fff;
}

.home-grid p,
.home-section > p {
  margin: 0;
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 1.5;
}

.faq details {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 0;
}
.faq details:first-of-type { border-top: 0; }

.faq summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.faq details p {
  margin: 6px 0 2px;
  color: var(--on-surface-variant);
  font-size: 13px;
  line-height: 1.5;
}

.home-footer {
  color: var(--subtitle);
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
  padding: 2px 6px 0;
}
.home-footer p { margin: 0; }

@media (max-width: 600px) {
  #site-home { padding: 0 12px; }
  .home-hero, .home-section { padding: 16px; }
}