/* ---------------------------------------------------------
   Frimley Health – Shared App Styles (brand-aligned)
   Source: [fhft-brand-guidelines-final.pdf](https://nhs-my.sharepoint.com/personal/chris_topping1_nhs_net/Documents/Microsoft%20Copilot%20Chat%20Files/fhft-brand-guidelines-final.pdf?EntityRepresentationId=a84d4f12-96af-4e61-be39-d13e9f8470b2)
   - Colour palette (p.22)
   - Values strip sizing & usage (p.14–15)
   - Strapline graphic placement rules (p.8–13)
   - Accessibility combos (p.25–26)
   - Typography (Istok Web headings; Arial/system body) (p.28–31)
--------------------------------------------------------- */

/* 0) Fonts (headings in Istok Web per brand; body in Arial/system) */
@import url('https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap'); /* p.28 */
:root {
  /* Brand colours — exact values per guide (p.22) */
  --nhs-dark-blue:   #003087;
  --nhs-bright-blue: #0072CE;
  --nhs-pink:        #AE2573;
  --nhs-warm-yellow: #FFB81C;
  --nhs-green:       #008834;

  /* Tints (p.22) */
  --tint-dark-blue-20:  #CCD6E7;
  --tint-bright-blue-20:#CCE3F5;
  --tint-pink-20:       #EFD3E3;
  --tint-yellow-30:     #FFEABB;
  --tint-green-20:      #CCE7D6;

  /* Base UI tokens */
  --color-bg:       #F7F8FA;                   /* subtler than #f5f5f5 for contrast */
  --color-surface:  #FFFFFF;
  --color-text:     #1F2121;
  --color-muted:    #5A6772;                   /* improved contrast vs #626c7c */
  --color-border:   #E3E7ED;
  --focus:          #0B63CE;                   /* visible focus (AA) */

  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 14px;
  --space-1:  4px;   --space-2: 8px;     --space-3: 12px;
  --space-4: 16px;   --space-5: 24px;    --space-6: 32px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2: 0 2px 8px rgba(16,24,40,.10), 0 4px 16px rgba(16,24,40,.08);

  /* Brandful accents (use sparingly; p.23–24) */
  --brand-primary:   var(--nhs-dark-blue);
  --brand-accent:    var(--nhs-bright-blue);
  --brand-positive:  var(--nhs-green);
  --brand-warning:   var(--nhs-warm-yellow);
  --brand-emphasis:  var(--nhs-pink);

  /* Layout */
  --container-max: 1160px;
  --bp-md:  900px;
  --bp-sm:  640px;
}

/* 1) Reset & base */
*,*::before,*::after { box-sizing: border-box; }
html,body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 16px/1.55 Arial, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", "Liberation Sans", sans-serif; /* p.29 */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: "Istok Web", Arial, sans-serif; line-height: 1.25; margin: 0 0 var(--space-4); } /* p.28 */
h1 { font-weight:700; font-size: clamp(1.6rem, 2.2vw + 1rem, 2.2rem); color: var(--brand-primary); }
h2 { font-weight:700; font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem); }
h3 { font-weight:700; font-size: 1.1rem; }
p, ul, ol { margin: 0 0 var(--space-4); color: var(--color-text); }
a { color: var(--brand-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* WCAG focus */

/* 2) Layout containers */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
@media (max-width: var(--bp-md)) { .layout { grid-template-columns: 1fr; } }

/* 3) Header (top bar, NHS brand) */
.header {
  background: var(--nhs-dark-blue); /* p.23 corporate tone */
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.header-content {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-5) var(--space-5);
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center;
}
.header-title { color:#fff; font-family:"Istok Web", Arial, sans-serif; }
.header-actions { display:flex; gap:var(--space-3); align-items:center; }
.search-bar {
  padding: 10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color:#fff; width: clamp(200px, 24vw, 280px);
}
.search-bar::placeholder { color: rgba(255,255,255,.8); }
.search-bar:focus { border-color:#fff; }

/* 4) Sidebar (collapsible) */
.sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-5);
  position: sticky; top: 0; height: 100dvh; overflow: auto;
  box-shadow: var(--shadow-1);
}
.sidebar-header { color: var(--brand-primary); font-weight: 700; margin-bottom: var(--space-4); }
.sidebar-nav { display:flex; flex-direction:column; gap: 6px; }
.nav-item {
  background: transparent; border:none; text-align:left;
  padding: 10px 12px; border-radius: 10px; color: var(--color-muted); font-weight:600;
}
.nav-item:hover { background: var(--tint-dark-blue-20); color: var(--brand-primary); }
.nav-item.active { background: var(--brand-primary); color:#fff; }

/* Collapse sidebar on mobile */
@media (max-width: var(--bp-md)) {
  .sidebar { position: static; height:auto; padding: var(--space-4) var(--space-5); }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
}

/* 5) Main content */
.main-content { display:flex; flex-direction:column; min-width:0; }
.content { padding: var(--space-5); }

/* 6) Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.card + .card { margin-top: var(--space-5); }
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
}
/* Change Calendar React view – mobile-first cards
   Tailored to Frimley / NHS palette (light, fresh) */

.fhft-app {
  min-height: 100vh;
  background: #f7f8fa;
  color: #1f2121;
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Ubuntu, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Header */
.fhft-header {
  background: linear-gradient(135deg, #003087, #0072ce);
  color: #fff;
  padding: 1.5rem 1rem 1.75rem;
}

.fhft-header-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fhft-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fhft-title {
  margin: 0.4rem 0 0.2rem;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
}

.fhft-subtitle {
  margin: 0;
  font-size: 0.95rem;
  max-width: 32rem;
}

.fhft-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 720px) {
  .fhft-header-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Buttons */
.fhft-btn {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease,
    transform 0.05s ease;
}

.fhft-btn-primary {
  background: #CCE7D6; 
  color: #CCE7D6;;
  border-color: #ffb81c;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.fhft-btn-primary:hover {
  background: #ffd45f;
  border-color: #ffd45f;
  transform: translateY(-1px);
}

.fhft-btn-secondary {
  background: #0072ce;
  color: #fff;
  border-color: #005eb8;
}

.fhft-btn-secondary:hover {
  background: #005eb8;
}

.fhft-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.fhft-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Main layout */
.fhft-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}

.fhft-section {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
    0 4px 16px rgba(16, 24, 40, 0.06);
  padding: 1.25rem 1.25rem 1.5rem;
}

@media (min-width: 720px) {
  .fhft-section {
    padding: 1.5rem 1.75rem 1.75rem;
  }
}

.fhft-section-header h2 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  color: #003087;
}

.fhft-section-header p {
  margin: 0;
  font-size: 0.85rem;
  color: #5a6772;
}

/* Cards */
.fhft-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

@media (min-width: 720px) {
  .fhft-cards {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.fhft-card {
  background: #fdfdfd;
  border-radius: 16px;
  padding: 0.9rem 1rem;
  border: 1px solid #e3e7ed;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fhft-card-main {
  background: #fef6e7; /* warm yellow tint */
  border-color: #ffb81c;
}

.fhft-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #ffb81c;
  color: #003087;
}

.fhft-card-badge-soft {
  background: #e8edff;
  color: #003087;
}

.fhft-card-figure {
  margin: 0.1rem 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #003087;
}

.fhft-card-label {
  margin: 0;
  font-size: 0.85rem;
  color: #5a6772;
}

/* Alerts */
.fhft-alert {
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  font-size: 0.85rem;
}

.fhft-alert-info {
  background: #e8edff;
  color: #003087;
}

.fhft-alert-error {
  background: #fef2f2;
  color: #b42318;
}

/* Footer actions */
.fhft-footer-actions {
  margin-top: 1.2rem;
  display: flex;
  justify-content: flex-start;
}