/* ==========================================================================
   Tesseract Construction — shared design tokens
   --------------------------------------------------------------------------
   One stylesheet for every Tesseract web app, so the estimating tool, the
   timesheets, the site diary and the H&S app all look like one system.

   Sage green is the primary. Navy is secondary, used for text and dark
   contrast. Swap the two hex values marked BRAND below to the exact values
   sampled from your logo and every app updates at once.
   ========================================================================== */

:root {
  /* --- BRAND ------------------------------------------------------------ */
  --tc-sage: #748c60;   /* BRAND: primary, sampled from the logo */
  --tc-navy: #24384b;   /* BRAND: secondary, text and dark surfaces */

  /* Sage ramp */
  --tc-sage-50:  #f3f6f0;
  --tc-sage-100: #e4ebde;
  --tc-sage-200: #cbd8c1;
  --tc-sage-300: #abbf9c;
  --tc-sage-400: #8ea678;
  --tc-sage-500: var(--tc-sage);
  --tc-sage-600: #5e7350;
  --tc-sage-700: #4a5b41;
  --tc-sage-800: #3a4834;
  --tc-sage-900: #2c3628;

  /* Navy ramp */
  --tc-navy-50:  #f2f5f8;
  --tc-navy-100: #e0e7ee;
  --tc-navy-200: #c1cedb;
  --tc-navy-300: #90a5bb;
  --tc-navy-400: #5a7594;
  --tc-navy-500: var(--tc-navy);
  --tc-navy-600: #1d2e3e;
  --tc-navy-700: #16232f;
  --tc-navy-800: #101a23;
  --tc-navy-900: #0a1118;

  /* Neutrals */
  --tc-white: #ffffff;
  --tc-grey-50:  #fafaf9;
  --tc-grey-100: #f4f4f2;
  --tc-grey-200: #e7e7e4;
  --tc-grey-300: #d3d3cf;
  --tc-grey-400: #a8a8a2;
  --tc-grey-500: #7d7d77;
  --tc-grey-600: #5c5c57;
  --tc-grey-700: #43433f;
  --tc-grey-800: #2b2b28;
  --tc-grey-900: #1a1a18;

  /* Status. Muted to sit alongside sage rather than shout over it. */
  --tc-success: #4f7a4a;
  --tc-success-bg: #eef4ed;
  --tc-warning: #a8741f;
  --tc-warning-bg: #fbf3e4;
  --tc-danger: #a34038;
  --tc-danger-bg: #faeeed;
  --tc-info: #3d6382;
  --tc-info-bg: #eef3f7;

  /* Semantic aliases — prefer these in app CSS over raw ramp values */
  --tc-bg: var(--tc-grey-100);
  --tc-surface: var(--tc-white);
  --tc-surface-sunken: var(--tc-grey-50);
  --tc-border: var(--tc-grey-200);
  --tc-border-strong: var(--tc-grey-300);
  --tc-text: var(--tc-navy-700);
  --tc-text-muted: var(--tc-grey-600);
  --tc-text-faint: var(--tc-grey-500);
  --tc-text-on-dark: #eef1ec;

  /* --- Type ------------------------------------------------------------- */
  --tc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --tc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --tc-text-xs: 0.75rem;    /* 12px — labels, meta */
  --tc-text-sm: 0.875rem;   /* 14px — secondary text, table cells */
  --tc-text-base: 1rem;     /* 16px — body. Never smaller on inputs: iOS
                               zooms the page in when an input is under 16px */
  --tc-text-lg: 1.125rem;   /* 18px */
  --tc-text-xl: 1.375rem;   /* 22px — card titles */
  --tc-text-2xl: 1.75rem;   /* 28px — page titles */

  --tc-weight-normal: 400;
  --tc-weight-medium: 500;
  --tc-weight-semibold: 600;

  --tc-leading-tight: 1.25;
  --tc-leading-normal: 1.55;

  /* --- Space (4px base) -------------------------------------------------- */
  --tc-space-1: 0.25rem;
  --tc-space-2: 0.5rem;
  --tc-space-3: 0.75rem;
  --tc-space-4: 1rem;
  --tc-space-5: 1.25rem;
  --tc-space-6: 1.5rem;
  --tc-space-8: 2rem;
  --tc-space-10: 2.5rem;
  --tc-space-12: 3rem;

  /* --- Shape ------------------------------------------------------------- */
  --tc-radius-sm: 4px;
  --tc-radius: 8px;
  --tc-radius-lg: 12px;
  --tc-radius-full: 999px;

  --tc-shadow-sm: 0 1px 2px rgba(13, 27, 40, 0.06);
  --tc-shadow: 0 2px 8px rgba(13, 27, 40, 0.08);
  --tc-shadow-lg: 0 12px 32px rgba(13, 27, 40, 0.14);

  /* --- Controls ---------------------------------------------------------- */
  /* 44px is the minimum comfortable tap target on a phone, and the minimum
     Apple and Google both recommend. Everything tappable uses it. */
  --tc-control-height: 44px;
  --tc-icon-size: 20px;       /* Lucide default stroke grid */
  --tc-icon-stroke: 1.75;

  --tc-focus-ring: 0 0 0 3px var(--tc-sage-200);
  --tc-transition: 140ms ease;
}

/* Dark mode. Kept in one place so no app has to invent its own. */
@media (prefers-color-scheme: dark) {
  :root {
    --tc-bg: var(--tc-navy-800);
    --tc-surface: var(--tc-navy-700);
    --tc-surface-sunken: var(--tc-navy-800);
    --tc-border: #24323f;
    --tc-border-strong: #33465a;
    --tc-text: #e8ece6;
    --tc-text-muted: #a4b0bd;
    --tc-text-faint: #7d8b99;
    --tc-success-bg: #1c2a1f;
    --tc-warning-bg: #2e2415;
    --tc-danger-bg: #2e1a19;
    --tc-info-bg: #182531;
    --tc-focus-ring: 0 0 0 3px rgba(116, 140, 96, 0.45);
    --tc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--tc-font);
  font-size: var(--tc-text-base);
  line-height: var(--tc-leading-normal);
  color: var(--tc-text);
  background: var(--tc-bg);
  -webkit-font-smoothing: antialiased;
  /* Respect the notch and the home indicator on phones */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3, h4 { margin: 0; line-height: var(--tc-leading-tight); font-weight: var(--tc-weight-semibold); }
h1 { font-size: var(--tc-text-2xl); letter-spacing: -0.015em; }
h2 { font-size: var(--tc-text-xl); }
h3 { font-size: var(--tc-text-lg); }
p { margin: 0 0 var(--tc-space-4); }
p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Icons ---------------------------------------------------------------
   Lucide, minimalist stroke. Inline SVG rather than a CDN so the app still
   renders with no reception. */
.tc-icon {
  width: var(--tc-icon-size);
  height: var(--tc-icon-size);
  stroke: currentColor;
  stroke-width: var(--tc-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
}
.tc-icon--sm { width: 16px; height: 16px; }
.tc-icon--lg { width: 24px; height: 24px; }

/* --- Card ---------------------------------------------------------------- */
.tc-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-sm);
}
.tc-card__header {
  padding: var(--tc-space-5) var(--tc-space-6);
  border-bottom: 1px solid var(--tc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-4);
}
.tc-card__body { padding: var(--tc-space-6); }

/* --- Fields -------------------------------------------------------------- */
.tc-field { margin-bottom: var(--tc-space-5); }
.tc-field:last-child { margin-bottom: 0; }

.tc-label {
  display: block;
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-medium);
  color: var(--tc-text);
  margin-bottom: var(--tc-space-2);
}

.tc-input,
.tc-select {
  width: 100%;
  min-height: var(--tc-control-height);
  padding: 0 var(--tc-space-3);
  font-family: inherit;
  font-size: var(--tc-text-base);
  color: var(--tc-text);
  background: var(--tc-surface);
  border: 1px solid var(--tc-border-strong);
  border-radius: var(--tc-radius);
  transition: border-color var(--tc-transition), box-shadow var(--tc-transition);
  appearance: none;
}
.tc-input::placeholder { color: var(--tc-text-faint); }
.tc-input:focus,
.tc-select:focus {
  outline: none;
  border-color: var(--tc-sage-500);
  box-shadow: var(--tc-focus-ring);
}
.tc-input[aria-invalid="true"] { border-color: var(--tc-danger); }
.tc-input:disabled, .tc-select:disabled {
  background: var(--tc-surface-sunken);
  color: var(--tc-text-faint);
  cursor: not-allowed;
}

.tc-select {
  padding-right: var(--tc-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237d7d77' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--tc-space-3) center;
}

.tc-input-group { position: relative; display: flex; align-items: center; }
.tc-input-group .tc-input { padding-right: calc(var(--tc-control-height) + var(--tc-space-1)); }
.tc-input-affix {
  position: absolute;
  right: var(--tc-space-1);
  display: grid;
  place-items: center;
  width: var(--tc-control-height);
  height: var(--tc-control-height);
  border: 0;
  background: none;
  color: var(--tc-text-muted);
  cursor: pointer;
  border-radius: var(--tc-radius-sm);
}
.tc-input-affix:hover { color: var(--tc-text); }
.tc-input-affix:focus-visible { outline: none; box-shadow: var(--tc-focus-ring); }

.tc-hint {
  display: block;
  margin-top: var(--tc-space-2);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}

/* --- Buttons ------------------------------------------------------------- */
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  min-height: var(--tc-control-height);
  padding: 0 var(--tc-space-5);
  font-family: inherit;
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--tc-radius);
  cursor: pointer;
  transition: background var(--tc-transition), border-color var(--tc-transition),
    color var(--tc-transition);
  white-space: nowrap;
  text-decoration: none;
}
.tc-btn:focus-visible { outline: none; box-shadow: var(--tc-focus-ring); }
.tc-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tc-btn--block { width: 100%; }

.tc-btn--primary { background: var(--tc-sage-500); color: #fff; }
.tc-btn--primary:hover:not(:disabled) { background: var(--tc-sage-600); }

.tc-btn--secondary {
  background: var(--tc-surface);
  border-color: var(--tc-border-strong);
  color: var(--tc-text);
}
.tc-btn--secondary:hover:not(:disabled) { background: var(--tc-surface-sunken); }

.tc-btn--ghost { background: transparent; color: var(--tc-text-muted); padding: 0 var(--tc-space-3); }
.tc-btn--ghost:hover:not(:disabled) { background: var(--tc-surface-sunken); color: var(--tc-text); }

.tc-btn--danger { background: transparent; border-color: var(--tc-danger); color: var(--tc-danger); }
.tc-btn--danger:hover:not(:disabled) { background: var(--tc-danger-bg); }

/* --- Alerts -------------------------------------------------------------- */
.tc-alert {
  display: flex;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3) var(--tc-space-4);
  border-radius: var(--tc-radius);
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
  border: 1px solid transparent;
}
.tc-alert--error   { background: var(--tc-danger-bg);  color: var(--tc-danger);  border-color: rgba(163,64,56,0.25); }
.tc-alert--success { background: var(--tc-success-bg); color: var(--tc-success); border-color: rgba(79,122,74,0.25); }
.tc-alert--warning { background: var(--tc-warning-bg); color: var(--tc-warning); border-color: rgba(168,116,31,0.25); }
.tc-alert--info    { background: var(--tc-info-bg);    color: var(--tc-info);    border-color: rgba(61,99,130,0.25); }
.tc-alert[hidden]  { display: none; }

/* --- Badges -------------------------------------------------------------- */
.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  padding: 2px var(--tc-space-2);
  border-radius: var(--tc-radius-full);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-medium);
  background: var(--tc-grey-200);
  color: var(--tc-text-muted);
  white-space: nowrap;
}
.tc-badge--admin    { background: var(--tc-sage-100); color: var(--tc-sage-700); }
.tc-badge--active   { background: var(--tc-success-bg); color: var(--tc-success); }
.tc-badge--disabled { background: var(--tc-grey-200); color: var(--tc-text-faint); }

/* --- Tables -------------------------------------------------------------- */
.tc-table { width: 100%; border-collapse: collapse; font-size: var(--tc-text-sm); }
.tc-table th {
  text-align: left;
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tc-text-faint);
  padding: var(--tc-space-2) var(--tc-space-3);
  border-bottom: 1px solid var(--tc-border);
}
.tc-table td { padding: var(--tc-space-3); border-bottom: 1px solid var(--tc-border); vertical-align: middle; }
.tc-table tr:last-child td { border-bottom: 0; }

/* --- Utility ------------------------------------------------------------- */
.tc-spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tc-spin 0.66s linear infinite;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }

.tc-code {
  font-family: var(--tc-font-mono);
  font-size: var(--tc-text-lg);
  letter-spacing: 0.02em;
  background: var(--tc-surface-sunken);
  border: 1px dashed var(--tc-border-strong);
  border-radius: var(--tc-radius);
  padding: var(--tc-space-3) var(--tc-space-4);
  display: block;
  word-break: break-all;
  user-select: all;
}

.tc-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- number boxes are typed, not stepped ---------------------------------
   Every browser draws a pair of increment arrows inside an input[type=number]
   -- Chrome and Safari permanently, Firefox on hover. On a phone they are a
   target you hit while trying to put the cursor in the box; on a laptop they
   invite clicking a day count up one at a time. Every number in this app is
   typed, so they go everywhere at once rather than screen by screen.

   `appearance:textfield` is the Firefox half and the two ::-webkit- pseudo-
   elements are the other; both are needed, and neither is inherited, so this
   is the whole of it. It stays a real number input -- the numeric keypad on a
   phone, the step/min/max validation, and `.valueAsNumber` are all unchanged.
   Only the arrows go. */
input[type=number]{-moz-appearance:textfield; appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; appearance:none; margin:0}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}