:root {
  --color-primary: #2C5FA8;
  --color-warning: #C97A2B;
  --color-error: #B3261E;
  --color-content-bg: #F1F2F3;
  --color-sidebar-dark: #16181C;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--color-content-bg);
  color: #1B1D21;
}

a { color: var(--color-primary); }

/* Plain, unauthenticated pages (login) */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card { width: 100%; max-width: 480px; padding: 2.5rem; text-align: center; }

/* Centers the actual form content as its own column within the (wider)
   card, instead of letting fields stretch edge-to-edge across it. */
.login-form-col {
  max-width: 280px;
  margin: 0 auto;
  text-align: left;
}

.login-form-col h1 { text-align: center; font-size: 1.25rem; }

.login-form-col input[type="text"],
.login-form-col input[type="password"] {
  width: 100%;
}

.login-logo {
  max-height: 44px;
  margin: 0 auto 1.25rem;
}

.error, .field-error { color: var(--color-error); font-size: 0.9rem; }

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

.sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-top {
  background: #FFFFFF;
  padding: 1.25rem 1rem;
  text-align: center;
  border-bottom: 1px solid #E3E4E6;
}

.logo-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sidebar-top .logo-img { margin-bottom: 15px; }

.wordmark {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.sidebar-body {
  background: var(--color-sidebar-dark);
  color: #E7E8EA;
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9096A0;
  margin-bottom: 0.35rem;
}

.current-client-name {
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.current-client-name.muted { color: #9096A0; font-weight: 400; }

.client-list { list-style: none; margin: 0; padding: 0; }

.client-list li { margin-bottom: 0.15rem; }

.client-link, .add-client-link {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  color: #C7C9CD;
  text-decoration: none;
}

.client-link:hover, .add-client-link:hover { background: #22252B; }

.client-link.active { background: var(--color-primary); color: #fff; }

.add-client-link { color: var(--color-primary); font-weight: 500; margin-top: 0.4rem; }

.primary-nav { display: flex; flex-direction: column; gap: 0.25rem; }

.nav-item {
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  color: #C7C9CD;
  text-decoration: none;
}

a.nav-item:hover { background: #22252B; }

.nav-item.disabled { color: #9096A0; cursor: not-allowed; }

.sidebar-footer {
  background: var(--color-sidebar-dark);
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #22252B;
  font-size: 0.8rem;
  color: #9096A0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

.signed-in-as {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.signed-in-name { color: #E7E8EA; font-weight: 500; }

.sidebar-footer form { margin: 0; }

.logout-link {
  background: none;
  border: 1px solid #3A3E46;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  padding: 0.35rem 0.9rem;
  border-radius: 4px;
  white-space: nowrap;
}

.main-content {
  flex: 1;
  padding: 2rem;
}

.card {
  background: #FFFFFF;
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  max-width: 640px;
}

.flashes { list-style: none; margin: 0 0 1rem; padding: 0; }

.flash { padding: 0.5rem 0.75rem; border-radius: 4px; margin-bottom: 0.5rem; font-size: 0.9rem; }

.flash-success { background: #E4F3E9; color: #1D6B3B; }

.flash-error { background: #FBEAE9; color: var(--color-error); }

table { border-collapse: collapse; width: 100%; }

th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid #E3E4E6; font-size: 0.9rem; }

button[type="submit"] {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

input[type="text"], input[type="password"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid #CBCDD1;
  border-radius: 4px;
}

.money-input { font-family: var(--font-mono); }

fieldset { border: 1px solid #E3E4E6; border-radius: 4px; margin: 1rem 0; }