:root {
  --bg: #f7f5fb;
  --surface: #ffffff;
  --text: #140a26;
  --text-muted: #6b6478;
  --border: #e8e1f0;

  /* Brand palette */
  --primary: #ff00a8;        /* vivid pink — primary actions, brand accents */
  --primary-dark: #c4007f;   /* hover/pressed state for pink */
  --primary-light: #ffe3f4;  /* pale pink tint for hovers/highlights */
  --accent: #1f6dff;         /* blue — links, secondary elements */
  --accent-dark: #0028ff;    /* deep blue — hover/focus */
  --navy: #05001c;           /* near-black navy — sidebar, dark surfaces */

  /* Status colors kept distinct from the brand palette so "overdue" / "on track"
     stay readable at a glance instead of blending into the pink/blue branding. */
  --danger: #d1293e;
  --danger-light: #fbe7ea;
  --success: #1f9d6b;
  --success-light: #e4f7ee;
  --warn: #b3720a;
  --warn-light: #fbf0dc;

  --radius: 10px;
  --shadow: 0 1px 3px rgba(5, 0, 28, 0.07), 0 1px 2px rgba(5, 0, 28, 0.09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

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

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidenav {
  width: 220px;
  flex-shrink: 0;
  background: var(--navy);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidenav .brand {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 8px 12px 18px;
  color: #ffffff;
}

.sidenav a {
  color: rgba(255, 255, 255, 0.78);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.sidenav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.sidenav a.active { background: var(--primary); color: #fff; }
.sidenav a.logout-link { margin-top: auto; color: #ff9db8; }
.sidenav a.logout-link:hover { background: rgba(255, 70, 199, 0.14); color: #fff; }

.content {
  flex: 1;
  min-width: 0;
  padding: 24px 28px 60px;
}

.content.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.topbar {
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.nav-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.1rem;
  padding: 6px 10px;
  cursor: pointer;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stat {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin: 8px 0;
}

.progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

.toggle-label {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.toggle-label:hover { color: var(--primary); }
.toggle-caret {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--text-muted);
  width: 0.8em;
}
.detail-panel {
  display: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 6px;
  padding-left: 2px;
}
.detail-panel.open { display: block; }
.detail-panel > div { padding: 2px 0; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-warn { background: var(--warn-light); color: var(--warn); }
.badge-success { background: var(--success-light); color: var(--success); }

form { max-width: 480px; }
form.inline { display: inline; max-width: none; }

.form-row { margin-bottom: 14px; }

label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--text);
}

input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn.btn-secondary:hover { background: var(--bg); }
.btn.btn-danger { background: var(--danger); }
.btn.btn-small { padding: 6px 12px; font-size: 0.85rem; }

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px;
}

.auth-card h1 { text-align: center; color: var(--navy); font-size: 1.4rem; }
.auth-card .muted-link { text-align: center; margin-top: 14px; font-size: 0.9rem; color: var(--text-muted); }
.auth-card .muted-link a { color: var(--primary); font-weight: 600; }

.alert {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.alert-success { background: var(--success-light); color: var(--success); }
.alert-error { background: var(--danger-light); color: var(--danger); }

.text-muted { color: var(--text-muted); }
/* .row-actions marks a <td> holding the action buttons. It intentionally
   does NOT use display:flex -- setting flex directly on a <td> takes it out
   of normal table-cell layout, which throws off the whole row's height and
   makes borders land in the wrong place (they end up following whichever
   cell's content is shortest instead of the row as a whole). Simple inline
   spacing gets the same look without breaking the table. */
.row-actions { white-space: nowrap; }
.row-actions > * { margin-right: 8px; }
.row-actions > *:last-child { margin-right: 0; }
.empty-state { color: var(--text-muted); padding: 20px 0; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 14px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filter-field { min-width: 150px; }
.filter-field label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.filter-field select { padding: 7px 9px; font-size: 0.88rem; }
.filter-field-reset { min-width: 0; }

.group-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 6px 0 10px;
}
.group-toggle-btn {
  border: none;
  background: transparent;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.group-toggle-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.category-block {
  border-radius: 8px;
  border-left: 4px solid transparent;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.category-block-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.category-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.category-block-name { flex: 1; }
.category-block-total { font-weight: 700; }
.category-block-item { padding: 2px 0 2px 16px; font-size: 0.85rem; color: var(--text-muted); }
.shared-person-block { margin-bottom: 12px; }
.shared-person-block:last-child { margin-bottom: 0; }
.shared-total-line {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  color: var(--text);
}

.account-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.account-block:last-child { margin-bottom: 0; }
.account-block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.account-block-name { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.account-block-target { font-weight: 700; font-size: 1.3rem; color: var(--primary); }
.account-block table { margin-top: 4px; }

@media (max-width: 860px) {
  .sidenav {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 20;
    width: 220px;
  }
  .sidenav.open { transform: translateX(0); box-shadow: var(--shadow); }
  .topbar { display: flex; }
  .content { padding: 16px 16px 48px; }
}