/* =============================================================
   agency-portal.css
   CAPK 2-1-1 — Agency Portal
   Uses native CSS nesting (no preprocessor needed).
   All colours come from design tokens in :root.
   No inline styles anywhere — icon colours use modifier classes.
   ============================================================= */


/* ── Design Tokens ─────────────────────────────────────────── */

:root {
  /* Brand */
  --accent:       #3b6fd4;
  --accent-lt:    #e8effc;
  --green:        #16a34a;
  --green-lt:     #dcfce7;
  --amber:        #d97706;
  --amber-lt:     #fef3c7;
  --purple:       #7c3aed;
  --purple-lt:    #ede9fe;

  /* Neutral */
  --bg:           #f0f2f5;
  --surface:      #ffffff;
  --border:       #e2e8f0;
  --text:         #1e293b;
  --muted:        #64748b;
  --subtle:       #94a3b8;

  /* Typography */
  --font-head:    'Montserrat', 'Trebuchet MS', sans-serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;

  /* Layout */
  --nav-w:        220px;
  --header-h:     56px;

  /* Shape */
  --radius-sm:    6px;
  --radius-md:    10px;

  /* Shadow */
  --shadow-card:  0 1px 3px rgba(0, 0, 0, .08),
                  0 0 0 1px rgba(0, 0, 0, .04);
}


/* ── Reset ─────────────────────────────────────────────────── */

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

html {
  font-size: 15px;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ── WCAG: Focus ring ───────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ── Header ─────────────────────────────────────────────────── */

.header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;

  & .header__title {

    & h1 {
      font-family: var(--font-head);
      font-size: .95rem;
      font-weight: 700;
      color: var(--text);
    }

    & p {
      font-size: .72rem;
      color: var(--muted);
      margin-top: 1px;
    }
  }

  & .header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  & .header__link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
    transition: color .12s;

    &:hover { color: #2d5bbf; }
  }

  & .header__signout {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .78rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s;

    &:hover {
      background: var(--bg);
      color: var(--text);
    }
  }
}


/* ── App Shell ──────────────────────────────────────────────── */

.shell {
  display: flex;
  flex: 1;
  min-height: 0;
}


/* ── Sidebar ────────────────────────────────────────────────── */

.sidebar {
  width: var(--nav-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1rem .65rem;
  flex-shrink: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .58rem;
  width: 100%;
  padding: .5rem .72rem;
  margin-bottom: .15rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;

  &:hover {
    background: var(--bg);
    color: var(--text);
  }

  &.nav-item--active {
    background: var(--accent-lt);
    color: var(--accent);
    font-weight: 700;
  }

  & .nav-item__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
}


/* ── Main Content ───────────────────────────────────────────── */

.main {
  flex: 1;
  padding: 1.75rem;
  overflow-y: auto;
}


/* ── Welcome Card ───────────────────────────────────────────── */

.welcome-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.25rem;

  & h2 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
  }

  & p {
    font-size: .82rem;
    color: var(--muted);
    margin-top: .22rem;
  }
}


/* ── Stats Grid ─────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  box-shadow: var(--shadow-card);

  & .stat-card__label {
    font-size: .7rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.3;
  }

  & .stat-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }

  & .stat-card__value {
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
  }

  & .stat-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    /* Colour modifiers — keeps all colour out of HTML */
    &.stat-card__icon--blue   { background: #eff6ff; color: var(--accent); }
    &.stat-card__icon--purple { background: #faf5ff; color: var(--purple); }
    &.stat-card__icon--green  { background: #f0fdf4; color: var(--green);  }
    &.stat-card__icon--amber  { background: #fffbeb; color: var(--amber);  }
  }

  & .stat-card__sub {
    font-size: .7rem;
    font-weight: 600;

    &.stat-card__sub--green { color: var(--green);  }
    &.stat-card__sub--blue  { color: var(--accent); }
    &.stat-card__sub--amber { color: var(--amber);  }
  }
}


/* ── Section Title ──────────────────────────────────────────── */

.section-title {
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .82rem;
}


/* ── Quick Actions Grid ─────────────────────────────────────── */

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .82rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 700px) {
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .95rem 1.05rem;
  display: flex;
  align-items: flex-start;
  gap: .72rem;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s, transform .12s;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    border-color: #c7d8f5;
    transform: translateY(-1px);
  }

  & .action-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    /* Colour modifiers */
    &.action-card__icon--blue   { background: #eff6ff; color: var(--accent); }
    &.action-card__icon--purple { background: #faf5ff; color: var(--purple); }
    &.action-card__icon--green  { background: #f0fdf4; color: var(--green);  }
    &.action-card__icon--amber  { background: #fffbeb; color: var(--amber);  }
  }

  & .action-card__text {

    & .action-card__title {
      font-family: var(--font-head);
      font-size: .82rem;
      font-weight: 600;
      color: var(--text);
    }

    & .action-card__desc {
      font-size: .73rem;
      color: var(--muted);
      margin-top: .08rem;
    }
  }
}


/* ── Current Information Card ───────────────────────────────── */
/*
   Shows agency-level fields ONLY.
   - Phone = org main line (program phones live in program_phones table)
   - Hours intentionally excluded (belong to program_location_hours)
*/

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.05rem 1.1rem;
  box-shadow: var(--shadow-card);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.5rem;
  margin-top: .82rem;
}

@media (max-width: 580px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

.info-col {
  display: flex;
  flex-direction: column;
}

.info-row {
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);

  &:last-child {
    border-bottom: none;
  }

  & .info-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-head);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--muted);
    margin-bottom: .18rem;

    & .info-label__note {
      font-family: var(--font-body);
      font-size: .65rem;
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
      color: var(--subtle);
    }
  }

  & .info-value {
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);

    & .info-value__note {
      display: block;
      font-size: .7rem;
      font-weight: 400;
      color: var(--muted);
      margin-top: .14rem;
    }
  }
}


/* ── Status Pill ────────────────────────────────────────────── */

.status-pill {
  display: inline-block;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;

  &.status-pill--published {
    background: var(--green-lt);
    color: var(--green);
  }

  &.status-pill--pending {
    background: var(--amber-lt);
    color: var(--amber);
  }
}