:root {
  --rcs-ink:        #0f2537;
  --rcs-ink-soft:   #44586b;
  --rcs-muted:      #7b8b9a;
  --rcs-line:       #e3e9ef;
  --rcs-bg:         #f2f5f8;
  --rcs-surface:    #ffffff;
  --rcs-navy:       #12304f;
  --rcs-navy-dark:  #0c2238;
  --rcs-accent:     #1d6fa5;
  --rcs-crit:       #c0392b;
  --rcs-crit-bg:    #fdecea;
  --rcs-warn:       #b76e00;
  --rcs-warn-bg:    #fff4e2;
  --rcs-good:       #1b7a46;
  --rcs-good-bg:    #e8f6ee;
  --rcs-info-bg:    #eaf2f9;
  --rcs-radius:     10px;
  --rcs-shadow:     0 1px 2px rgba(15,37,55,.06), 0 4px 12px rgba(15,37,55,.04);
}

body {
  background: var(--rcs-bg);
  color: var(--rcs-ink);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

/* ---------- nav ---------- */
.rcs-navbar {
  background: var(--rcs-navy);
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.rcs-navbar .navbar-brand { font-weight: 650; letter-spacing: -.01em; }
.rcs-navbar .nav-link { color: rgba(255,255,255,.76); font-size: .93rem; padding: .35rem .7rem; border-radius: 6px; }
.rcs-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.rcs-navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.15); font-weight: 600; }
.rcs-org { color: #bcd7ee; font-weight: 650; letter-spacing: -.01em; }

/* ---------- surfaces ---------- */
.card {
  border: 1px solid var(--rcs-line);
  border-radius: var(--rcs-radius);
  box-shadow: var(--rcs-shadow);
  background: var(--rcs-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--rcs-line);
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: -.01em;
  padding: .75rem 1rem;
}
.page-title { font-weight: 680; letter-spacing: -.02em; color: var(--rcs-ink); }
.section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--rcs-muted);
}

/* ---------- right now panel ---------- */
.now-card { border-radius: var(--rcs-radius); overflow: hidden; }
.now-card .card-header {
  background: var(--rcs-navy);
  color: #fff;
  border-bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
}
.now-row {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--rcs-line);
  text-decoration: none; color: inherit;
}
.now-row:last-child { border-bottom: 0; }
.now-row:hover { background: #f7fafc; }
.now-flag {
  flex: 0 0 auto; width: 4px; align-self: stretch; border-radius: 2px; background: var(--rcs-line);
}
.now-row.is-crit .now-flag { background: var(--rcs-crit); }
.now-row.is-warn .now-flag { background: var(--rcs-warn); }
.now-row.is-due  .now-flag { background: var(--rcs-accent); }
.now-main { flex: 1 1 auto; min-width: 0; }
.now-title { font-weight: 600; line-height: 1.3; }
.now-meta { font-size: .82rem; color: var(--rcs-muted); margin-top: .1rem; }
.now-when { flex: 0 0 auto; font-size: .8rem; color: var(--rcs-muted); white-space: nowrap; padding-top: .15rem; }
.now-empty { padding: 2rem 1rem; text-align: center; color: var(--rcs-muted); }

/* ---------- pills ---------- */
.pill {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .15rem .45rem; border-radius: 5px; line-height: 1.5;
}
.pill-crit { background: var(--rcs-crit-bg); color: var(--rcs-crit); }
.pill-warn { background: var(--rcs-warn-bg); color: var(--rcs-warn); }
.pill-good { background: var(--rcs-good-bg); color: var(--rcs-good); }
.pill-info { background: var(--rcs-info-bg); color: var(--rcs-accent); }
.pill-mute { background: #eef2f6; color: var(--rcs-ink-soft); }

/* ---------- metric tiles ---------- */
.metric {
  display: block; text-decoration: none; color: inherit;
  background: var(--rcs-surface);
  border: 1px solid var(--rcs-line);
  border-radius: var(--rcs-radius);
  box-shadow: var(--rcs-shadow);
  padding: .8rem .9rem;
  transition: transform .08s ease, box-shadow .08s ease;
}
.metric:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,37,55,.08), 0 8px 18px rgba(15,37,55,.06); color: inherit; }
.metric-value { font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--rcs-ink); }
.metric-label { font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rcs-muted); margin-top: .15rem; font-weight: 600; }
.metric.is-crit .metric-value { color: var(--rcs-crit); }
.metric.is-warn .metric-value { color: var(--rcs-warn); }
.metric.is-good .metric-value { color: var(--rcs-good); }

/* ---------- progress ---------- */
.day-bar { height: 8px; border-radius: 99px; background: #e6ecf2; overflow: hidden; }
.day-bar > span { display: block; height: 100%; background: var(--rcs-good); border-radius: 99px; }

/* ---------- timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { border-left: 2px solid var(--rcs-line); padding: 0 0 .9rem 1rem; position: relative; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:before {
  content: ''; position: absolute; left: -5px; top: .4rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rcs-accent);
}
.timeline .tl-time { font-weight: 650; color: var(--rcs-ink); font-size: .88rem; }

/* ---------- tables ---------- */
.table { font-size: .92rem; margin-bottom: 0; }
.table > thead > tr > th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--rcs-muted); font-weight: 700; border-bottom: 1px solid var(--rcs-line);
}
.table td, .table th { vertical-align: middle; padding: .6rem .75rem; }
.table > tbody > tr:hover { background: #f7fafc; }

/* ---------- buttons ---------- */
.btn-rcs { background: var(--rcs-navy); border-color: var(--rcs-navy); color: #fff; font-weight: 550; }
.btn-rcs:hover, .btn-rcs:focus { background: var(--rcs-navy-dark); border-color: var(--rcs-navy-dark); color: #fff; }
.btn { border-radius: 7px; }
.btn-sm { font-size: .83rem; }

/* ---------- forms ---------- */
.form-label { font-size: .83rem; font-weight: 600; color: var(--rcs-ink-soft); margin-bottom: .25rem; }
.form-control, .form-select { border-color: #d7dfe7; border-radius: 7px; font-size: .93rem; }
.form-control:focus, .form-select:focus { border-color: var(--rcs-accent); box-shadow: 0 0 0 3px rgba(29,111,165,.12); }

/* ---------- misc ---------- */
.checklist-item { border-bottom: 1px solid #eef2f6; padding: .65rem 0; }
.checklist-item:last-child { border-bottom: 0; }
.login-wrap { max-width: 420px; margin: 8vh auto; }

@media (max-width: 575.98px) {
  .metric-value { font-size: 1.45rem; }
  .now-when { display: none; }
}
/* appended focus-panel styles — paste target is the end of app.css */
.focus-card { border-top: 3px solid var(--rcs-line); }
.focus-card.focus-crit { border-top-color: var(--rcs-crit); }
.focus-card.focus-warn { border-top-color: var(--rcs-warn); }
.focus-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--rcs-line);
  text-decoration: none; color: inherit;
}
.focus-row:last-child { border-bottom: 0; }
.focus-row:hover { background: #f7fafc; }
.focus-text { display: flex; flex-direction: column; min-width: 0; }
.focus-title { font-weight: 600; line-height: 1.3; }
.focus-sub { font-size: .8rem; color: var(--rcs-muted); }
.focus-count {
  flex: 0 0 auto; min-width: 1.9rem; height: 1.9rem; border-radius: 6px;
  background: var(--rcs-warn-bg); color: var(--rcs-warn);
  font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.focus-time {
  flex: 0 0 auto; min-width: 4.2rem; font-size: .82rem; font-weight: 650;
  color: var(--rcs-accent); padding-top: .15rem;
}
.focus-clear { padding: 1.6rem .9rem; text-align: center; color: var(--rcs-muted); font-size: .9rem; }
.focus-more { display: block; padding: .5rem; text-align: center; font-size: .83rem; }