:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --col-bg: #F4F4F1;
  --sidebar: #F4F4F1;
  --border: #E4E3DE;
  --text: #1E2A36;
  --text-muted: #6B7480;
  --text-faint: #9AA1AA;
  --accent: #2F5A8A;
  --accent-hover: #24466C;
  --accent-soft: #EAF1F8;

  --c-inprog-bg: #D9EAF7;   --c-inprog-fg: #2E75B6;
  --c-await-bg:  #FFF2CC;   --c-await-fg:  #BF9000;
  --c-sanlam-bg: #FCE4D6;   --c-sanlam-fg: #B45F06;
  --c-done-bg:   #D9EAD3;   --c-done-fg:   #38761D;
  --c-urgent-bg: #F4CCCC;   --c-urgent-fg: #CC0000;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1:focus { outline: none; }

button, input, textarea, select { font-family: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--text-muted); }
.btn-block { width: 100%; padding: 15px; font-size: 15px; border-radius: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.field input, .field textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px; /* 16px avoids iOS Safari auto-zoom on focus */
  background: var(--surface);
  color: var(--text);
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 3px 9px;
  white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.status-pill.selected {
  border-width: 2px;
  font-weight: 600;
}

.needs-attention {
  background: #FDF4F4;
  border: 1px solid #E8A9A9;
  border-radius: 12px;
  padding: 14px 16px;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #2E7D32;
  font-weight: 500;
}
.live-dot .dot { width: 7px; height: 7px; border-radius: 50%; background: #3AA34F; display: inline-block; }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page { max-width: 1100px; margin: 0 auto; padding: 24px 20px 100px 20px; }
.page-header { margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.stat-tile .value { font-size: 26px; font-weight: 700; margin-top: 6px; }

.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
}
.board-column { background: var(--col-bg); border-radius: 10px; overflow: hidden; }
.board-column-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.board-column-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.board-column-header { cursor: pointer; user-select: none; }
.collapse-chevron { transition: transform .15s ease; flex-shrink: 0; }
.board-column.collapsed .collapse-chevron { transform: rotate(-90deg); }
.header-action {
  border: none;
  background: rgba(255,255,255,.7);
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 2px 9px;
  cursor: pointer;
}
.header-action:hover { background: #fff; }

/* Bottom tab bar on narrow viewports, left sidebar on wide ones. */
.app-nav {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--surface);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 10px) 8px;
  z-index: 10;
}
.app-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 500;
}
.app-nav a.active { color: var(--accent); font-weight: 600; }
.app-nav svg { width: 20px; height: 20px; }

@media (min-width: 900px) {
  .app-nav {
    position: static;
    flex-direction: column;
    width: 220px;
    border-top: none;
    border-right: 1px solid var(--border);
    padding: 24px 12px;
    height: 100vh;
  }
  .app-nav a {
    flex-direction: row;
    justify-content: flex-start;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 13px;
  }
  .app-nav a.active { background: var(--accent-soft); }
  .app-shell { display: flex; }
  .app-content { flex: 1; min-width: 0; }
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
}

.error-text { color: var(--c-urgent-fg); font-size: 13px; margin-top: 4px; }

.admin-tab-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
  background: #b32121;
  padding: 1rem;
  color: white;
  border-radius: 8px;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
  position: absolute;
  display: block;
  width: 8rem;
  height: 8rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto 0 auto;
}
.loading-progress circle {
  fill: none;
  stroke: var(--border);
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--accent);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
  color: var(--text);
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }