/* App look on top of Bootstrap 5. Calm and quiet: white surfaces on a cool grey page, the company's
   navy for actions, one typeface for Arabic and English. Field workers use phones outdoors, so text
   keeps strong contrast and touch targets stay large.
   Colours: components use only the role tokens (--color-*), never the ramps underneath. */

/* The fonts are preloaded and kept by the browser (public/_headers), so they are normally ready at once.
   "fallback": wait up to 0.1 s for them rather than flash a smaller stand-in font first. */
@font-face {
  font-family: 'Plex Arabic';
  font-weight: 400;
  font-display: fallback;
  src: url(/vendor/fonts/plex-arabic-arabic-400.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Plex Arabic';
  font-weight: 600;
  font-display: fallback;
  src: url(/vendor/fonts/plex-arabic-arabic-600.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E,
    U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Plex Arabic';
  font-weight: 400;
  font-display: fallback;
  src: url(/vendor/fonts/plex-arabic-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Arabic';
  font-weight: 600;
  font-display: fallback;
  src: url(/vendor/fonts/plex-arabic-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  /* Ramps (OKLCH-built, constant hue). Navy 800 and sky 400 are the logo's own colours. */
  --navy-50: #f2f7fc;
  --navy-100: #e7f0f8;
  --navy-200: #d3e2f0;
  --navy-800: #243545;
  --navy-950: #0f2233;
  --sky-50: #ecf9ff;
  --sky-200: #c0e7f6;
  --sky-400: #4ac0e8;
  --sky-600: #007aa3;
  --sky-700: #006086;
  --sky-800: #004b6c;
  --neutral-50: #f6f7f8;
  --neutral-100: #edeff1;
  --neutral-200: #dce0e4;
  --neutral-300: #c6cbd1;
  --neutral-500: #818a94;
  --neutral-600: #646d76;
  --neutral-700: #4d555d;
  --neutral-950: #1c2125;
  --amber-50: #fff5ea;
  --amber-100: #fcecd9;
  --amber-300: #eec28f;
  --amber-700: #834000;
  --amber-800: #692f00;
  --amber-900: #532200;
  --red-50: #fff4f2;
  --red-100: #fee9e6;
  --red-300: #ffb5ab;
  --red-600: #ba362e;
  --red-700: #991c18;
  --red-800: #7c0c0b;
  --green-50: #effaf3;
  --green-100: #e2f4e9;
  --green-300: #a6d8bc;
  --green-700: #00663d;
  --green-800: #00512d;

  /* Roles. Measured contrast in brackets (WCAG). */
  --color-bg: var(--neutral-50);
  --color-surface: #fff;
  --color-surface-sunken: var(--neutral-100);
  --color-row-hover: var(--neutral-50);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-500); /* form fields (3.5:1) */
  --color-text: var(--neutral-950); /* (16.2:1 on white) */
  --color-text-secondary: var(--neutral-600); /* (5.3:1 on white, 4.6:1 on sunken) */
  --color-accent: var(--navy-800); /* filled buttons, active menu item (12.6:1) */
  --color-accent-hover: var(--navy-950);
  --color-accent-subtle: var(--navy-100);
  --color-on-accent: #fff;
  --color-link: var(--sky-700); /* (7.0:1) */
  --color-link-hover: var(--sky-800);
  --color-focus: var(--sky-600); /* focus ring (4.5:1 on the page) */
  --color-brand-sky: var(--sky-400); /* decoration only: too light for text (2.1:1) */
  --color-warning-text: var(--amber-700); /* (7.8:1) */
  --color-warning-bg: var(--amber-50);
  --color-warning-border: var(--amber-300);
  --color-warning-strong: var(--amber-800); /* clock-out button */
  --color-danger-text: var(--red-700); /* (8.3:1) */
  --color-danger-bg: var(--red-50);
  --color-danger-border: var(--red-300);
  --color-success-text: var(--green-800);
  --color-success-bg: var(--green-50);
  --color-success-border: var(--green-300);
  --color-info-bg: var(--sky-50);
  --color-info-border: var(--sky-200);
  --color-row-muted: var(--neutral-50); /* days off */
  --color-control-border: var(--neutral-300); /* quiet buttons, empty boxes */
  --color-pressed: var(--neutral-200);
  --color-text-subtle: var(--neutral-700); /* menu items, grey badges */
  --color-icon: var(--neutral-500);
  --color-attention-bg: var(--amber-100);
  --color-warning-strong-hover: var(--amber-900);
  --color-on-warning-strong: #fff;
  --color-danger-solid: var(--red-600);
  --color-danger-pressed: var(--red-100);
  --color-problem-bg: var(--red-100);
  --color-problem-text: var(--red-800);
  --color-success-ring: var(--green-100);
  --color-backdrop: rgb(15 34 51 / 0.45);
  --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23646d76' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  /* Which logo and which light/dark button show; the dark look swaps them. */
  --light-only: block;
  --dark-only: none;
  color-scheme: light;

  /* One spacing scale (Bootstrap's spacers use the same steps). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Type scale: size / line height / weight per role. */
  --text-display: 1.75rem;
  --text-title: 1.25rem;
  --text-heading: 1.0625rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --shadow-xs: 0 1px 2px rgb(15 34 51 / 0.05);
  --shadow-lg: 0 16px 40px -12px rgb(15 34 51 / 0.28), 0 4px 12px rgb(15 34 51 / 0.08);
  --sidebar-width: 16rem;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* Bootstrap, pointed at the roles. */
  --bs-body-font-family: 'Plex Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --bs-body-font-size: var(--text-body);
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--color-text);
  --bs-body-color-rgb: 28, 33, 37;
  --bs-body-bg: var(--color-bg);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-secondary-color-rgb: 100, 109, 118;
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-link);
  --bs-link-color-rgb: 0, 96, 134;
  --bs-link-hover-color: var(--color-link-hover);
  --bs-link-hover-color-rgb: 0, 75, 108;
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 36, 53, 69;
  --bs-danger-rgb: 153, 28, 24;
  --bs-focus-ring-color: rgb(0 122 163 / 0.5);
  --bs-secondary-bg: var(--color-surface-sunken);
  --bs-tertiary-bg: var(--color-row-hover);
  --bs-form-invalid-color: var(--color-danger-text);
  --bs-form-invalid-border-color: var(--color-danger-solid);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
}

/* Dark look: when the device is set to dark (unless "light" was picked here), or when "dark" was picked.
   The two blocks must stay the same (a test checks). Screens only: printing always uses the light look. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  color-scheme: dark;
  --light-only: none;
  --dark-only: block;
  --color-bg: #0e1318;
  --color-surface: #161c21;
  --color-surface-sunken: #20262c; /* in the dark a step lighter: table headers, hover */
  --color-row-hover: #1b2126;
  --color-row-muted: #12171b;
  --color-border: #2d343a;
  --color-border-strong: #71787f; /* (3.8:1) */
  --color-control-border: #454b52;
  --color-pressed: #2b3137;
  --color-text: #e7ecf0; /* (15:1 on surface) */
  --color-text-subtle: #c5cbd2;
  --color-text-secondary: #a3acb5; /* (7.8:1 on surface, 7.0:1 on sunken) */
  --color-icon: #8a939d;
  --color-accent: #75cbeb; /* the logo's sky, for buttons and the current page (9.8:1) */
  --color-accent-hover: #99e0fc;
  --color-accent-subtle: #0d303c;
  --color-on-accent: #0f2233; /* (8.9:1) */
  --color-link: #80d1f0;
  --color-link-hover: #a8e5fe;
  --color-focus: #48c1ea; /* (8.6:1) */
  --color-warning-text: #f5bb75;
  --color-warning-bg: #2c1f0e;
  --color-warning-border: #65461e;
  --color-warning-strong: #f5bf81;
  --color-warning-strong-hover: #fdd7ac;
  --color-on-warning-strong: #2b1401; /* (10.5:1) */
  --color-attention-bg: #462d0b;
  --color-danger-text: #f8a59a;
  --color-danger-bg: #321a17;
  --color-danger-border: #843c35;
  --color-danger-solid: #e66f62;
  --color-danger-pressed: #51231e;
  --color-problem-bg: #51231e;
  --color-problem-text: #fcc0b8;
  --color-success-text: #88d8ae;
  --color-success-bg: #11271c;
  --color-success-border: #255940;
  --color-success-ring: #193b2a;
  --color-info-bg: #0c252e;
  --color-info-border: #1d4e60;
  --color-backdrop: rgb(0 0 0 / 0.6);
  --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3acb5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.35);
  --bs-body-color-rgb: 231, 236, 240;
  --bs-secondary-color-rgb: 163, 172, 181;
  --bs-link-color-rgb: 128, 209, 240;
  --bs-link-hover-color-rgb: 168, 229, 254;
  --bs-primary-rgb: 117, 203, 235;
  --bs-danger-rgb: 248, 165, 154;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-border-color-translucent: rgb(255 255 255 / 0.12);
  --bs-focus-ring-color: rgb(72 193 234 / 0.5);
  }
}
@media screen {
  :root[data-theme='dark'] {
  color-scheme: dark;
  --light-only: none;
  --dark-only: block;
  --color-bg: #0e1318;
  --color-surface: #161c21;
  --color-surface-sunken: #20262c; /* in the dark a step lighter: table headers, hover */
  --color-row-hover: #1b2126;
  --color-row-muted: #12171b;
  --color-border: #2d343a;
  --color-border-strong: #71787f; /* (3.8:1) */
  --color-control-border: #454b52;
  --color-pressed: #2b3137;
  --color-text: #e7ecf0; /* (15:1 on surface) */
  --color-text-subtle: #c5cbd2;
  --color-text-secondary: #a3acb5; /* (7.8:1 on surface, 7.0:1 on sunken) */
  --color-icon: #8a939d;
  --color-accent: #75cbeb; /* the logo's sky, for buttons and the current page (9.8:1) */
  --color-accent-hover: #99e0fc;
  --color-accent-subtle: #0d303c;
  --color-on-accent: #0f2233; /* (8.9:1) */
  --color-link: #80d1f0;
  --color-link-hover: #a8e5fe;
  --color-focus: #48c1ea; /* (8.6:1) */
  --color-warning-text: #f5bb75;
  --color-warning-bg: #2c1f0e;
  --color-warning-border: #65461e;
  --color-warning-strong: #f5bf81;
  --color-warning-strong-hover: #fdd7ac;
  --color-on-warning-strong: #2b1401; /* (10.5:1) */
  --color-attention-bg: #462d0b;
  --color-danger-text: #f8a59a;
  --color-danger-bg: #321a17;
  --color-danger-border: #843c35;
  --color-danger-solid: #e66f62;
  --color-danger-pressed: #51231e;
  --color-problem-bg: #51231e;
  --color-problem-text: #fcc0b8;
  --color-success-text: #88d8ae;
  --color-success-bg: #11271c;
  --color-success-border: #255940;
  --color-success-ring: #193b2a;
  --color-info-bg: #0c252e;
  --color-info-border: #1d4e60;
  --color-backdrop: rgb(0 0 0 / 0.6);
  --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3acb5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.7), 0 4px 12px rgb(0 0 0 / 0.35);
  --bs-body-color-rgb: 231, 236, 240;
  --bs-secondary-color-rgb: 163, 172, 181;
  --bs-link-color-rgb: 128, 209, 240;
  --bs-link-hover-color-rgb: 168, 229, 254;
  --bs-primary-rgb: 117, 203, 235;
  --bs-danger-rgb: 248, 165, 154;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-border-color-translucent: rgb(255 255 255 / 0.12);
  --bs-focus-ring-color: rgb(72 193 234 / 0.5);
  }
}

/* ---------- Base ---------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  -webkit-text-size-adjust: 100%;
  background: var(--color-bg);
}

h1,
.h1 {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.25;
}
h2,
.h2,
.h3,
.h4,
.h5 {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.35;
}
h3,
.h6 {
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.4;
}
/* Latin headings get slightly tighter; Arabic letters join, so they are never spaced. */
:lang(en) :is(h1, .h1, .page-title) {
  letter-spacing: -0.015em;
}
.lead {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}
.small,
small {
  font-size: var(--text-small);
}

a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir='rtl'] .icon-mirror {
  transform: scaleX(-1);
}

/* Keyboard focus: one clear ring everywhere (instead of Bootstrap's faint blue glow). */
:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: -3rem;
  z-index: 50;
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.skip-link:focus {
  top: var(--space-2);
  box-shadow: var(--shadow-lg);
}

/* ---------- App shell: sidebar + content ---------- */

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}
.brand:hover {
  color: var(--color-text);
}
.brand-mark {
  flex: none;
  height: auto;
}
.logo-light,
.theme-to-dark {
  display: var(--light-only);
}
.logo-dark,
.theme-to-light {
  display: var(--dark-only);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.brand-name {
  font-size: var(--text-heading);
  font-weight: 600;
}
.brand-company {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}
.sidebar-body {
  flex: 1;
}
.nav-section {
  margin: var(--space-5) var(--space-3) var(--space-1);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.nav-group:first-child .nav-section {
  margin-top: var(--space-2);
}
:lang(en) .nav-section {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar form {
  margin: 0;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-subtle);
  font: inherit;
  text-align: start;
  text-decoration: none;
}
.nav-item .icon {
  color: var(--color-icon);
}
/* The current page: tinted, navy, semibold, with a bar on the reading-start edge. */
.nav-item[aria-current='page'] {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 600;
}
.nav-item[aria-current='page'] .icon {
  color: var(--color-accent);
}
.nav-item[aria-current='page']::before {
  content: '';
  position: absolute;
  inset-block: var(--space-2);
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}
.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

@media (hover: hover) {
  .nav-item:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
  }
  .nav-item[aria-current='page']:hover {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
  }
  .icon-button:hover {
    background: var(--color-surface-sunken);
  }
}

/* Wide screens: the sidebar stays in view at the reading start. */
@media (min-width: 992px) {
  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }
  .topbar,
  .sidebar-close,
  .sidebar-backdrop {
    display: none;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
  }
}

/* Narrow screens: a top bar with the menu button; the sidebar slides out over the page. */
@media (max-width: 991.98px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 3.5rem;
    padding-inline: var(--space-1) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 40;
    width: min(18rem, 85vw);
    border-inline-end: 0;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
  }
  [dir='rtl'] .sidebar {
    transform: translateX(100%);
  }
  :root.menu-open .sidebar,
  [dir] .sidebar:target {
    transform: none;
    visibility: visible;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--color-backdrop);
    opacity: 0;
    visibility: hidden;
  }
  :root.menu-open .sidebar-backdrop,
  .sidebar:target ~ .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }
  :root.menu-open {
    overflow: hidden;
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
  .sidebar {
    transition:
      transform 250ms var(--ease-out),
      visibility 0s linear 250ms;
  }
  :root.menu-open .sidebar,
  [dir] .sidebar:target {
    transition:
      transform 250ms var(--ease-out),
      visibility 0s;
  }
  .sidebar-backdrop {
    transition:
      opacity 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }
  :root.menu-open .sidebar-backdrop,
  .sidebar:target ~ .sidebar-backdrop {
    transition: opacity 200ms var(--ease-out);
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-backdrop {
    transition: opacity 150ms linear;
  }
}

/* Signed-out pages: a slim bar with the language switch. */
.auth-bar .btn-quiet {
  font-weight: 400;
}

/* ---------- Page ---------- */

.page {
  padding-block: var(--space-5) var(--space-7);
}
@media (min-width: 992px) {
  .page {
    padding-block: var(--space-6) var(--space-7);
  }
}
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.page-title {
  margin: 0;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.25;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.page-narrow {
  max-width: 34rem;
}

/* A row of controls above content: the month switcher, filters. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.month-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.month-label {
  margin: 0;
  min-width: 10rem;
  font-size: var(--text-title);
  font-weight: 600;
  text-align: center;
}
.btn-step {
  padding-inline: var(--space-3);
}
.toolbar-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.toolbar-filter .form-select {
  width: auto;
  min-width: 12rem;
}
.toolbar-label {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-secondary);
}
@media (max-width: 575.98px) {
  .month-switcher {
    width: 100%;
  }
  .month-label {
    flex: 1;
    min-width: 0;
  }
  /* Phones: arrow buttons only (the words stay for screen readers). */
  .step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .btn-step {
    padding-inline: var(--space-2);
    min-width: 2.75rem;
  }
  .toolbar-filter {
    width: 100%;
  }
  .toolbar-filter .form-select {
    flex: 1;
    min-width: 0;
  }
}

/* ---------- Surfaces ---------- */

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
}
@media (min-width: 576px) {
  .panel {
    padding: var(--space-5);
  }
}
/* Panels holding a table: no inner padding, corners clip the table. */
.panel.p-0,
.panel-flush {
  padding: 0;
  overflow: hidden;
}

/* A one-line status with its action at the end (e.g. payroll on the report). */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.strip form {
  margin: 0;
}
.strip-text {
  flex: 1 1 20rem;
  min-width: 0;
}
.strip-text p {
  margin: 0;
}
.strip-text p + p {
  margin-top: var(--space-1);
}
.strip-title {
  margin: 0 0 2px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.empty-state {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-control-border);
  border-radius: var(--radius-lg);
}
.empty-title {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: 600;
}
.empty-title + .btn {
  margin-top: var(--space-3);
}

/* Notices: slim, tinted, with an icon, never a heavy box. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--color-text);
  font-size: var(--text-small);
  line-height: 1.55;
}
.alert-icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1rem;
  color: var(--color-link);
}
.alert-body {
  min-width: 0;
}
.alert a {
  color: inherit;
  font-weight: 600;
}
.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}
.alert-success .alert-icon {
  color: var(--color-success-text);
}
.alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}
.alert-warning .alert-icon {
  color: var(--color-warning-text);
}
.alert-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}
.alert-danger .alert-icon {
  color: var(--color-danger-text);
}

/* ---------- Buttons ---------- */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5625rem;
  --bs-btn-line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
}
.btn-lg {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: 1.125rem;
}
.btn-sm {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-size: var(--text-small);
}
/* Primary: the one main action of a page. */
.btn-primary {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
  --bs-btn-disabled-color: var(--color-on-accent);
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
  box-shadow: var(--shadow-xs);
}
/* Secondary: on the surface colour, quiet; everything that isn't the main action. */
.btn-secondary,
.btn-outline-primary {
  --bs-btn-color: var(--color-accent);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-control-border);
  --bs-btn-hover-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-surface-sunken);
  --bs-btn-hover-border-color: var(--color-control-border);
  --bs-btn-active-color: var(--color-accent);
  --bs-btn-active-bg: var(--color-pressed);
  --bs-btn-active-border-color: var(--color-control-border);
  --bs-btn-disabled-color: var(--color-text-secondary);
  --bs-btn-disabled-bg: var(--color-surface);
  --bs-btn-disabled-border-color: var(--color-border);
  box-shadow: var(--shadow-xs);
}
.btn-outline-danger {
  --bs-btn-color: var(--color-danger-text);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-danger-border);
  --bs-btn-hover-color: var(--color-danger-text);
  --bs-btn-hover-bg: var(--color-danger-bg);
  --bs-btn-hover-border-color: var(--color-danger-border);
  --bs-btn-active-color: var(--color-danger-text);
  --bs-btn-active-bg: var(--color-danger-pressed);
  --bs-btn-active-border-color: var(--color-danger-border);
}
.btn-link {
  --bs-btn-color: var(--color-link);
  --bs-btn-hover-color: var(--color-link-hover);
  --bs-btn-active-color: var(--color-link-hover);
  font-weight: 400;
}
.btn-quiet {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-surface-sunken);
  --bs-btn-active-bg: var(--color-pressed);
  --bs-btn-padding-x: 0.75rem;
}
/* Icon-only buttons (the light/dark switch on the sign-in page): a full-size touch target. */
.btn-icon {
  --bs-btn-padding-x: var(--space-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* The Export menu (a native disclosure; report.js closes it on outside click and Escape). */
.export-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu[open] > summary .icon {
  transform: rotate(180deg);
}
.menu-list {
  position: absolute;
  top: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 16rem;
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 576px) {
  .menu-list {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem;
  text-align: start;
}
.menu-item .icon {
  color: var(--color-text-secondary);
}
@media (hover: hover) {
  .menu-item:hover {
    background: var(--color-surface-sunken);
  }
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
  padding: 0.5625rem 0.875rem;
  border-color: var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--text-body);
}
.form-select {
  --bs-form-select-bg-img: var(--select-arrow);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
}
.form-check-input {
  --bs-form-check-bg: var(--color-surface);
  border-color: var(--color-border-strong);
}
.form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-check-input:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
}
.form-label {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* Password boxes: an eye button at the end of the box shows or hides what was typed (app.js). */
.password-field {
  position: relative;
}
.password-field > .form-control {
  padding-inline-end: 3rem;
}
.password-field > .form-control.is-invalid {
  background-image: none; /* Bootstrap's warning sign would sit under the eye; the red border stays */
}
.password-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-icon);
}
.password-toggle:hover {
  color: var(--color-text);
}
.password-toggle:focus-visible {
  outline-offset: -4px;
}
.password-toggle .icon-eye-off,
.password-toggle[aria-pressed='true'] .icon-eye {
  display: none;
}
.password-toggle[aria-pressed='true'] .icon-eye-off {
  display: block;
}
.form-text {
  color: var(--color-text-secondary);
}

/* ---------- Tables ---------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-border);
}
.table > :not(caption) > * > * {
  padding: var(--space-3) var(--space-4);
}
.table-sm > :not(caption) > * > * {
  padding: var(--space-2) var(--space-3);
}
/* A quiet header: small, grey, on the sunken tint. */
.table thead th {
  padding-block: var(--space-2);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: 600;
  white-space: nowrap;
}
.table > tbody > tr:last-child > * {
  border-bottom: 0;
}
@media (hover: hover) {
  .table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--color-row-hover);
  }
}
td a {
  font-weight: 600;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
td a:hover {
  text-decoration-color: currentColor;
}
tr.day-off > td {
  background: var(--color-row-muted);
  color: var(--color-text-secondary);
}
/* The report: eleven columns, so tighter cells; headings may wrap, names and durations don't. */
.report-table > :not(caption) > * > * {
  padding-inline: var(--space-3);
}
.report-table thead th {
  white-space: normal;
  vertical-align: bottom;
}
.report-table td,
.month-summary,
.clock-now time {
  font-variant-numeric: tabular-nums;
}
.num {
  font-weight: 600;
}
.num-zero {
  color: var(--color-text-secondary);
}
.text-attention {
  color: var(--color-warning-text);
}
.text-problem {
  color: var(--color-danger-text);
}

/* ---------- Weekly wages: the company's form «أجور العاملين», one per worker ---------- */

.wage-form {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.wage-form-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: 600;
}
.wage-form-who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-3);
}
.wage-form-who > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.wage-form-who dt {
  color: var(--color-text-secondary);
  font-weight: 400;
}
.wage-form-who dd {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: 700;
}
.wage-table > :not(caption) > * > * {
  border: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}
.wage-table thead th {
  background: var(--color-surface-sunken);
  font-size: var(--text-small);
}
.wage-table .wage-notes {
  min-width: 14rem;
  text-align: start;
  font-size: var(--text-small);
}
.wage-table tfoot th {
  text-align: end;
}
.wage-signs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
/* Room to sign under each label, above the line. */
.wage-signs > div {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-text-secondary);
  font-weight: 600;
  text-align: center;
}

/* Numbers, emails and codes are written left-to-right, but still line up with Arabic text. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir='rtl'] .ltr,
[dir='rtl'] .secret-key {
  text-align: right;
}
td.ltr {
  white-space: nowrap;
}

dl.facts {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}
dl.facts dt {
  font-weight: 400;
  color: var(--color-text-secondary);
}
dl.facts dd {
  margin: 0;
}

/* On phones, day lists, the Today board and reports become one block per row instead of a wide table. */
@media (max-width: 575.98px) {
  dl.facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  dl.facts dd {
    margin-bottom: var(--space-2);
  }
  .stack-sm thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .stack-sm tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .stack-sm tr:last-child {
    border-bottom: 0;
  }
  .table.stack-sm > :not(caption) > * > * {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .stack-sm .span-all {
    grid-column: 1 / -1;
  }
  .stack-sm .span-all.text-end {
    text-align: start !important;
  }
  .stack-sm td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
  }
  .stack-sm tr.day-off {
    background: var(--color-row-muted);
  }
}

/* ---------- Badges and numbers ---------- */

.badge {
  padding: 0.3em 0.6em;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  text-align: start;
}
.badge-ok {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  box-shadow: inset 0 0 0 1px var(--color-success-ring);
}
.badge-attention {
  background: var(--color-attention-bg);
  color: var(--color-warning-strong);
}
.badge-problem {
  background: var(--color-problem-bg);
  color: var(--color-problem-text);
}
.badge-muted,
.badge-inactive {
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
}
.badge-role {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.stat-value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.stat-value.attention {
  color: var(--color-warning-text);
}
.stat-value.stat-sm {
  font-size: 1.5rem;
}
.month-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--space-3);
}
.month-summary .panel {
  padding: var(--space-3) var(--space-4);
}

/* ---------- Sign-in pages ---------- */

.auth-wrap {
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100dvh - 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-5) var(--space-7);
}
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  text-align: center;
}
.auth-logo {
  width: 8.75rem;
  height: auto;
}
.auth-title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Temporary passwords and codes: big, spaced digits that are easy to read out. */
.secret-value {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  direction: ltr;
  unicode-bidi: isolate;
  background: var(--color-warning-bg);
  border: 1px dashed var(--color-warning-border);
  border-radius: var(--radius-md);
  user-select: all;
}
.secret-key {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-all;
}
.qr {
  width: 13rem;
  height: 13rem;
  padding: var(--space-1);
  background: #fff; /* white in both looks: phones scan dark squares on white */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.code-input {
  max-width: 12rem;
  font-size: 1.75rem;
  letter-spacing: 0.4em;
  text-align: center;
}

/* ---------- Clock-in card: the main screen for workers ---------- */

.clock-card {
  padding: var(--space-4);
}
.clock-day {
  font-size: var(--text-heading);
  font-weight: 600;
}
.clock-now time {
  font-weight: 600;
}
.clock-state {
  margin-bottom: var(--space-4);
  font-size: 1.3rem;
  font-weight: 600;
}
.btn-clock {
  --bs-btn-border-width: 0;
  --bs-btn-disabled-opacity: 0.7;
  display: flex;
  width: 100%;
  min-height: 5.5rem;
  font-size: 1.6rem;
  border-radius: var(--radius-lg);
}
.btn-clock-in {
  --bs-btn-color: var(--color-on-accent);
  --bs-btn-hover-color: var(--color-on-accent);
  --bs-btn-active-color: var(--color-on-accent);
  --bs-btn-disabled-color: var(--color-on-accent);
  --bs-btn-bg: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-disabled-bg: var(--color-accent);
}
/* Clock-out is a different colour so the two can't be confused at a glance. */
.btn-clock-out {
  --bs-btn-color: var(--color-on-warning-strong);
  --bs-btn-hover-color: var(--color-on-warning-strong);
  --bs-btn-active-color: var(--color-on-warning-strong);
  --bs-btn-disabled-color: var(--color-on-warning-strong);
  --bs-btn-bg: var(--color-warning-strong);
  --bs-btn-hover-bg: var(--color-warning-strong-hover);
  --bs-btn-active-bg: var(--color-warning-strong-hover);
  --bs-btn-disabled-bg: var(--color-warning-strong);
}
.btn-clock:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.clock-progress {
  min-height: 1.6em;
  margin-top: var(--space-3);
  text-align: center;
  font-weight: 600;
  color: var(--color-accent);
}
.clock-done .clock-state {
  color: var(--color-success-text);
}

/* ---------- Payroll changes ---------- */

.changes-month h3 {
  font-size: var(--text-body);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- Moving between pages ----------
   Each menu item is its own page. Browsers that support it cross-fade the content in 150 ms while the
   sidebar (or the phone's top bar) stays put; others simply show the next page. A fade only, so it
   also suits people who turn motion off. */
@view-transition {
  navigation: auto;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 150ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
@media (min-width: 992px) {
  .sidebar {
    view-transition-name: sidebar;
  }
}
@media (max-width: 991.98px) {
  .topbar {
    view-transition-name: topbar;
  }
}

/* ---------- Printing ("Save as PDF"): no menus or buttons, plain white paper ---------- */

@page {
  margin: 12mm;
}
@page report {
  size: A4 landscape;
}
/* Weekly wages: each worker's form on its own A5 page, like the company's paper form. */
@page wage {
  size: A5 landscape;
  margin: 7mm;
}
@media print {
  .topbar,
  .sidebar,
  .sidebar-backdrop,
  .auth-bar,
  .skip-link,
  .d-print-none {
    display: none !important;
  }
  .app-shell {
    display: block;
  }
  body {
    background: #fff;
    font-size: 10pt;
  }
  main {
    padding: 0 !important;
  }
  /* The whole page (title included), so the title doesn't get a page of its own. */
  main:has(.report-page) {
    page: report;
  }
  .page-header {
    margin-bottom: var(--space-3);
  }
  .panel,
  .strip {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .table-responsive,
  .panel.p-0,
  .panel-flush {
    overflow: visible;
  }
  .table {
    font-size: 9pt;
  }
  .table > :not(caption) > * > * {
    padding: 0.2rem 0.35rem;
  }
  .table thead th {
    background: none;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  .badge {
    border: 1px solid #888;
  }
  /* Weekly wages: only the forms are printed, one per A5 page. */
  main:has(.wages-page) .page-header {
    display: none;
  }
  .wage-form {
    page: wage;
    break-after: page;
    break-inside: avoid;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 9pt;
  }
  .wage-form:last-child {
    break-after: auto;
  }
  .wage-form-who dd {
    font-size: 12pt;
  }
  .wage-form .table-responsive {
    overflow: visible;
  }
  .wage-table {
    font-size: 8.5pt;
  }
  .wage-table > :not(caption) > * > * {
    padding: 0.15rem 0.3rem;
    border-color: #999;
  }
  .wage-table thead th {
    background: #eef1f4;
  }
  .wage-table .wage-notes {
    min-width: 0;
    font-size: 8pt;
  }
  .wage-signs {
    margin-top: 0.6rem;
  }
  .wage-signs > div {
    padding-bottom: 1.4rem;
    border-color: #555;
  }
}