/* =============================================================
   MATERIAL DESIGN 3 (Material You) — Job Sprinter Design System
   Primary palette: Navy (#1A2B4A — from logo)
   ============================================================= */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Primary: Navy (logo colour) */
  --md-primary:              #1A2B4A;
  --md-on-primary:           #FFFFFF;
  --md-primary-container:    #D6E3FF;
  --md-on-primary-container: #001A41;

  /* Secondary */
  --md-secondary:              #2C5282;
  --md-on-secondary:           #FFFFFF;
  --md-secondary-container:    #C8DFFF;
  --md-on-secondary-container: #001D35;

  /* Surface */
  --md-surface:                #F8F9FF;
  --md-on-surface:             #1C1B1F;
  --md-surface-variant:        #E3E7F5;
  --md-on-surface-variant:     #44464F;
  --md-surface-container-low:  #F3F4FF;
  --md-surface-container:      #EDEEFF;
  --md-surface-container-high: #E7E8F9;

  /* Outline */
  --md-outline:         #79747E;
  --md-outline-variant: #CAC4D0;

  /* Error */
  --md-error:              #B3261E;
  --md-on-error:           #FFFFFF;
  --md-error-container:    #F9DEDC;
  --md-on-error-container: #410E0B;

  /* Semantic extras */
  --md-success:           #1B5E20;
  --md-success-container: #C8E6C9;
  --md-warning:           #E65100;
  --md-warning-container: #FFF3E0;

  /* Elevation */
  --md-elev-1: 0px 1px 2px rgba(0,0,0,.3), 0px 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2: 0px 1px 2px rgba(0,0,0,.3), 0px 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3: 0px 4px 8px 3px rgba(0,0,0,.15), 0px 1px 3px rgba(0,0,0,.3);

  /* Shape */
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:   12px;
  --md-shape-lg:   16px;
  --md-shape-xl:   28px;
  --md-shape-full: 9999px;

  /* Typography */
  --md-font:      'Roboto', sans-serif;
  --md-font-mono: 'Roboto Mono', monospace;

  /* RGB decompositions (for rgba() transparency) */
  --md-primary-rgb:    26, 43, 74;     /* #1A2B4A */
  --md-on-surface-rgb: 28, 27,  31;   /* #1C1B1F */

  /* Landing page */
  --md-footer-bg: #1a1a2e;

  /* Admin panel (dark sidebar design — separate from main MD3 palette) */
  --md-admin-sidebar-bg: #1a1d23;
  --md-admin-border:     #e5e7eb;
  --md-admin-surface:    #f9fafb;
  --md-admin-text-muted: #6b7280;
  --md-admin-text:       #374151;
  --md-admin-heading:    #111827;
  --md-admin-accent:     #f97316;
  --md-admin-layout-bg:  #f0f2f5;

  /* Functional one-offs */
  --md-impersonation-bg: #9333ea;
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--md-font);
  background-color: var(--md-surface-container-low);
  color: var(--md-on-surface);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Type Scale ─────────────────────────────────────────────── */
.md3-display    { font-size: 2.25rem;  font-weight: 400; line-height: 2.75rem; letter-spacing: -.01em; }
.md3-headline   { font-size: 1.75rem;  font-weight: 400; line-height: 2.25rem; }
.md3-title-lg   { font-size: 1.375rem; font-weight: 500; line-height: 1.75rem; letter-spacing: 0; }
.md3-title-md   { font-size: 1rem;     font-weight: 500; line-height: 1.5rem;  letter-spacing: .009em; }
.md3-body-lg    { font-size: 1rem;     font-weight: 400; line-height: 1.5rem; }
.md3-body-md    { font-size: .875rem;  font-weight: 400; line-height: 1.25rem; }
.md3-label-lg   { font-size: .875rem;  font-weight: 500; line-height: 1.25rem; letter-spacing: .006em; }
.md3-label-md   { font-size: .75rem;   font-weight: 500; line-height: 1rem;    letter-spacing: .031em; }

/* ── Dev Banner ─────────────────────────────────────────────── */
.md3-dev-banner {
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-variant);
  padding: 6px 16px;
  text-align: center;
  font-size: .8125rem;
  border-bottom: 1px solid var(--md-outline-variant);
}

/* ── Top App Bar ────────────────────────────────────────────── */
.md3-top-app-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  height: calc(64px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

.md3-top-app-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.md3-top-app-bar-start { display: flex; align-items: center; gap: 12px; }
.md3-top-app-bar-end   { display: flex; align-items: center; gap: 8px; }

.md3-app-title {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--md-on-surface);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  letter-spacing: 0;
}
.md3-app-title:hover { color: var(--md-on-surface); text-decoration: none; }

.md3-app-icon { color: var(--md-primary); font-size: 1.25rem; }

.md3-brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

.md3-brand-name {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--md-primary);
  letter-spacing: 0.01em;
  line-height: 1;
}

.md3-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px 4px 4px;
  border-radius: var(--md-shape-full);
  color: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: .875rem;
  font-weight: 500;
  transition: background-color .2s;
}
.md3-avatar-btn:hover         { background: rgba(var(--md-on-surface-rgb),.08); }
.md3-avatar-btn::after        { display: none; } /* remove BS caret */

.md3-avatar {
  width: 36px;
  height: 36px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .875rem;
  flex-shrink: 0;
}
.md3-avatar-name { color: var(--md-on-surface); }

/* ── Navigation Bar ─────────────────────────────────────────── */
.md3-nav-bar {
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  position: sticky;
  top: 64px;
  z-index: 999;
}

.md3-nav-bar-inner {
  display: flex;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 16px;
  gap: 8px;
}

.md3-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 40px;
  text-decoration: none;
  color: var(--md-on-surface-variant);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .006em;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-variant);
  transition: background-color .2s, color .15s;
  white-space: nowrap;
}
.md3-nav-item:hover {
  background: rgba(var(--md-primary-rgb),.15);
  color: var(--md-primary);
  text-decoration: none;
}
.md3-nav-item.active {
  color: var(--md-primary);
  background: var(--md-primary-container);
  font-weight: 600;
}
.md3-nav-icon { font-size: .9rem; }

/* ── Banners ────────────────────────────────────────────────── */
.md3-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-size: .875rem;
}
.md3-banner--info {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-bottom: 1px solid rgba(var(--md-primary-rgb),.2);
}
.md3-banner--error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  border-bottom: 1px solid var(--md-error-container);
}
.md3-banner--success {
  background: var(--md-success-container);
  color: var(--md-success);
  border-bottom: 1px solid var(--md-success-container);
}
.md3-banner--warning {
  background: var(--md-warning-container);
  color: var(--md-warning);
  border-bottom: 1px solid var(--md-warning-container);
}
.md3-banner-icon    { flex-shrink: 0; opacity: .8; }
.md3-banner-text    { flex: 1; }
.md3-banner-action  { margin-left: auto; white-space: nowrap; }
.md3-banner-dismiss {
  background: none; border: none; cursor: pointer;
  padding: 4px 8px; color: inherit; opacity: .6; border-radius: 50%;
}
.md3-banner-dismiss:hover { opacity: 1; background: rgba(0,0,0,.06); }
.md3-flash-container { display: flex; flex-direction: column; }

/* ── Dropdown Menus ─────────────────────────────────────────── */
.dropdown-menu, .md3-dropdown-menu {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  box-shadow: var(--md-elev-3);
  background: var(--md-surface);
  padding: 8px 0;
  min-width: 180px;
}
.dropdown-item {
  font-size: .875rem;
  color: var(--md-on-surface);
  padding: 10px 16px;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dropdown-item i { width: 16px; color: var(--md-on-surface-variant); }
.dropdown-item:hover { background: var(--md-surface-container); color: var(--md-on-surface); }
.dropdown-divider { border-color: var(--md-outline-variant); margin: 4px 0; }

/* ── Main Content ───────────────────────────────────────────── */
.md3-main-content {
  min-height: calc(100vh - 64px - 48px);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 767.98px) {
  .md3-main-content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--md-surface);
  border: none !important;
  border-radius: var(--md-shape-md) !important;
  box-shadow: var(--md-elev-1);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--md-outline-variant);
  padding: 16px 20px;
  font-weight: 500;
  color: var(--md-on-surface);
  font-size: .9375rem;
}
.card-body  { padding: 20px; }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--md-outline-variant);
  padding: 12px 20px;
}

/* Card variants */
.md3-card-filled   { background: var(--md-surface-container-high) !important; box-shadow: none !important; border-radius: var(--md-shape-md) !important; border: none !important; }
.md3-card-outlined { background: var(--md-surface) !important; border: 1px solid var(--md-outline-variant) !important; box-shadow: none !important; border-radius: var(--md-shape-md) !important; }
.md3-card-elevated { background: var(--md-surface) !important; box-shadow: var(--md-elev-2) !important; border-radius: var(--md-shape-md) !important; border: none !important; }

/* ── Stat Cards ─────────────────────────────────────────────── */
.md3-stat-card {
  border-radius: var(--md-shape-md);
  padding: 20px 24px;
  height: 100%;
}
.md3-stat-card--primary  { background: var(--md-primary-container);  color: var(--md-on-primary-container); }
.md3-stat-card--secondary{ background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.md3-stat-card--success  { background: var(--md-success-container);  color: var(--md-success); }
.md3-stat-card--surface  { background: var(--md-surface-container);  color: var(--md-on-surface); }

.md3-stat-number {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-family: var(--md-font);
}
.md3-stat-label {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .006em;
  opacity: .75;
  margin-top: 4px;
}
.md3-stat-icon {
  font-size: 2rem;
  opacity: .18;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--md-font);
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .006em;
  border-radius: var(--md-shape-full);
  padding: 10px 24px;
  transition: background-color .2s, box-shadow .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.25;
}
.btn-sm  { padding: 6px 16px;  font-size: .8125rem; }
.btn-lg  { padding: 12px 28px; font-size: 1rem; }

.btn-primary {
  --bs-btn-bg:                var(--md-primary);
  --bs-btn-border-color:      var(--md-primary);
  --bs-btn-hover-bg:          var(--md-on-primary-container);
  --bs-btn-hover-border-color:var(--md-on-primary-container);
  --bs-btn-active-bg:         var(--md-on-primary-container);
  --bs-btn-active-border-color:var(--md-on-primary-container);
  --bs-btn-disabled-bg:       var(--md-primary);
  --bs-btn-disabled-border-color: var(--md-primary);
  --bs-btn-color:             var(--md-on-primary);
  --bs-btn-hover-color:       var(--md-on-primary);
  --bs-btn-active-color:      var(--md-on-primary);
  background-color: var(--md-primary); color: var(--md-on-primary);
  border: none; box-shadow: var(--md-elev-1);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--md-on-primary-container); color: var(--md-on-primary); box-shadow: var(--md-elev-2);
}
/* Bootstrap 5.1 hardcodes blue on :disabled — override explicitly */
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary);
}

.btn-secondary {
  background: var(--md-surface-container-high); color: var(--md-on-surface); border: none;
}
.btn-secondary:hover { background: var(--md-surface-container); color: var(--md-on-surface); }

.btn-success { background: var(--md-primary); color: var(--md-on-primary); border: none; box-shadow: var(--md-elev-1); }
.btn-success:hover { background: var(--md-on-primary-container); color: var(--md-on-primary); }

.btn-info    { background: var(--md-secondary); color: var(--md-on-secondary); border: none; }
.btn-info:hover { background: var(--md-on-secondary-container); color: var(--md-on-secondary); }

.btn-warning { background: var(--md-warning-container); color: var(--md-warning); border: none; }
.btn-danger  { background: var(--md-error-container);   color: var(--md-on-error-container); border: none; }

.btn-outline-primary {
  background: transparent; color: var(--md-primary);
  border: 1px solid var(--md-outline) !important;
}
.btn-outline-primary:hover {
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  border-color: var(--md-primary) !important;
}
.btn-outline-secondary {
  background: transparent; color: var(--md-on-surface-variant);
  border: 1px solid var(--md-outline) !important;
}
.btn-outline-secondary:hover {
  background: var(--md-surface-container); color: var(--md-on-surface);
}
.btn-outline-success {
  background: transparent; color: var(--md-success);
  border: 1px solid var(--md-outline) !important;
}
.btn-outline-success:hover { background: var(--md-success-container); color: var(--md-success); }

.btn-outline-info {
  background: transparent; color: var(--md-secondary);
  border: 1px solid var(--md-outline) !important;
}
.btn-outline-info:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

.btn-outline-danger {
  background: transparent; color: var(--md-error);
  border: 1px solid var(--md-outline) !important;
}
.btn-outline-danger:hover { background: var(--md-error-container); color: var(--md-on-error-container); }

.btn-outline-warning {
  background: transparent; color: var(--md-warning);
  border: 1px solid var(--md-outline) !important;
}
.btn-outline-warning:hover { background: var(--md-warning-container); color: var(--md-warning); }

/* Text button */
.md3-btn-text {
  background: transparent; color: var(--md-primary); border: none;
  padding: 10px 12px; border-radius: var(--md-shape-full);
  font-family: var(--md-font); font-weight: 500; font-size: .875rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .2s;
  cursor: pointer;
}
.md3-btn-text:hover { background: var(--md-primary-container); color: var(--md-primary); text-decoration: none; }

/* btn-group pill fix */
.btn-group > .btn:first-child  { border-radius: var(--md-shape-full) 0 0 var(--md-shape-full); }
.btn-group > .btn:last-child   { border-radius: 0 var(--md-shape-full) var(--md-shape-full) 0; }
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; }

.btn-check:checked + .btn-outline-primary {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
  border-color: var(--md-primary) !important;
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  border-radius: var(--md-shape-full);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .031em;
  padding: 4px 10px;
}
.bg-primary   { background-color: var(--md-primary)           !important; }
.bg-success   { background-color: var(--md-success)           !important; }
.bg-secondary { background-color: var(--md-on-surface-variant)!important; }
.bg-info      { background-color: var(--md-secondary)         !important; }
.bg-warning   { background-color: var(--md-warning)           !important; }
.bg-danger    { background-color: var(--md-error)             !important; }
.bg-light     { background-color: var(--md-surface-container) !important; color: var(--md-on-surface) !important; }

/* Status chips */
.md3-status-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--md-shape-full);
  font-size: .75rem; font-weight: 500;
}
.md3-status-chip--completed { background: var(--md-success-container); color: var(--md-success); }
.md3-status-chip--active    { background: var(--md-primary-container);  color: var(--md-primary); }
.md3-status-chip--pending   { background: var(--md-warning-container);  color: var(--md-warning); }
.md3-status-chip--archived  { background: var(--md-surface-container);  color: var(--md-on-surface-variant); }

/* ── Chips ──────────────────────────────────────────────────── */
.md3-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: var(--md-shape-full);
  border: 1px solid var(--md-outline);
  font-size: .875rem; font-weight: 500;
  background: transparent; color: var(--md-on-surface-variant);
  cursor: pointer; transition: all .2s;
}
.md3-chip:hover       { background: var(--md-surface-container); }
.md3-chip--selected   { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.md3-chip-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--md-on-primary); flex-shrink: 0;
}
.md3-chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── MD3 List ───────────────────────────────────────────────── */
.md3-list { list-style: none; padding: 0; margin: 0; }

.md3-list-item {
  display: flex; align-items: center; padding: 12px 16px;
  transition: background .15s; gap: 16px; border-radius: var(--md-shape-md);
}
.md3-list-item:hover { background: var(--md-surface-container-low); }
.md3-list-item + .md3-list-item { border-top: 1px solid var(--md-outline-variant); }

.md3-list-item__content { flex: 1; min-width: 0; }
.md3-list-item__text    { font-size: .875rem; font-weight: 500; color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md3-list-item__supporting { font-size: .8125rem; color: var(--md-on-surface-variant); margin-top: 2px; }
.md3-list-item__trailing   { text-align: right; flex-shrink: 0; }
.md3-list-item__amount {
  font-family: var(--md-font-mono); font-size: .9rem;
  font-weight: 500; color: var(--md-primary);
}

/* ── Progress Bar ───────────────────────────────────────────── */
.progress {
  height: 4px; border-radius: 2px;
  background: var(--md-outline-variant); overflow: hidden;
}
.budget-progress { height: 4px !important; }
.progress-bar {
  border-radius: 2px; transition: width .6s ease;
  background: var(--md-primary) !important;
}
.progress-bar.bg-success { background: var(--md-success)   !important; }
.progress-bar.bg-info    { background: var(--md-secondary) !important; }
.progress-bar.bg-warning { background: var(--md-warning)   !important; }
.progress-bar.bg-danger  { background: var(--md-error)     !important; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--md-shape-sm);
  border: 1px solid var(--md-outline);
  font-family: var(--md-font); font-size: .875rem;
  color: var(--md-on-surface); background: var(--md-surface);
  padding: 10px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px rgba(var(--md-primary-rgb),.2);
  outline: none; background: var(--md-surface);
}
.form-label { font-size: .875rem; font-weight: 500; color: var(--md-on-surface-variant); margin-bottom: 6px; }
.form-text  { font-size: .75rem; color: var(--md-on-surface-variant); }
.form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }
.input-group-text {
  background: var(--md-surface-container); border: 1px solid var(--md-outline);
  color: var(--md-on-surface-variant);
  border-radius: var(--md-shape-sm) 0 0 var(--md-shape-sm);
  font-size: .875rem;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  border-radius: var(--md-shape-md); border: none;
  font-size: .875rem; padding: 14px 18px;
}
.alert-success { background: var(--md-success-container);  color: var(--md-success); }
.alert-danger  { background: var(--md-error-container);    color: var(--md-on-error-container); }
.alert-info    { background: var(--md-primary-container);  color: var(--md-on-primary-container); }
.alert-warning { background: var(--md-warning-container);  color: var(--md-warning); }

/* ── Modals / Dialogs ───────────────────────────────────────── */
.modal-content {
  border: none; background: var(--md-surface);
  border-radius: var(--md-shape-lg);
  box-shadow: 0px 8px 12px 6px rgba(0,0,0,.15), 0px 4px 4px rgba(0,0,0,.3);
}
.modal-header { border-bottom: 1px solid var(--md-outline-variant); padding: 20px 24px 16px; }
.modal-title  { font-size: 1.375rem; font-weight: 500; color: var(--md-on-surface); }
.modal-body   { padding: 16px 24px; }
.modal-footer { border-top: 1px solid var(--md-outline-variant); padding: 12px 24px; gap: 8px; }
.btn-close    { opacity: .6; }
.btn-close:hover { opacity: 1; }

/* ── Tables ─────────────────────────────────────────────────── */
.table { color: var(--md-on-surface); font-size: .875rem; }
.table th {
  font-weight: 500; color: var(--md-on-surface-variant);
  border-color: var(--md-outline-variant); font-size: .8125rem;
  letter-spacing: .031em; text-transform: uppercase;
}
.table td        { border-color: var(--md-outline-variant); vertical-align: middle; }
.table-borderless td, .table-borderless th { border: none; }

/* ── Text Colors ────────────────────────────────────────────── */
.text-primary { color: var(--md-primary)           !important; }
.text-success { color: var(--md-success)           !important; }
.text-danger  { color: var(--md-error)             !important; }
.text-info    { color: var(--md-secondary)         !important; }
.text-warning { color: var(--md-warning)           !important; }
.text-muted   { color: var(--md-on-surface-variant)!important; }

/* ── Upload / Drop Zone ─────────────────────────────────────── */
.upload-area, .drop-zone {
  border: 2px dashed var(--md-outline);
  border-radius: var(--md-shape-md);
  padding: 40px; text-align: center; cursor: pointer;
  transition: all .2s; background: var(--md-surface);
  color: var(--md-on-surface-variant);
}
.upload-area:hover, .drop-zone:hover,
.upload-area.drag-over, .drop-zone.drag-over {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* ── Project Cards ──────────────────────────────────────────── */
.project-card {
  border-left: none !important;
  cursor: pointer;
  transition: box-shadow .2s, transform .15s;
}
.project-card:hover {
  box-shadow: var(--md-elev-2) !important;
  transform: translateY(-2px);
}

/* Override bootstrap border-start pattern used in JS-generated receipt items */
[class*="border-start"] {
  border-left: none !important;
  border-radius: var(--md-shape-md);
  margin-bottom: 4px;
  padding: 12px 16px;
  transition: background .15s;
}
[class*="border-start"]:hover { background: var(--md-surface-container-low); }

/* ── Divider ────────────────────────────────────────────────── */
.md3-divider { border-color: var(--md-outline-variant); margin: 4px 0; }
hr           { border-color: var(--md-outline-variant); opacity: 1; }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner-border         { color: var(--md-primary); }
.btn .spinner-border    { color: currentColor; }

/* ── Category Badge ─────────────────────────────────────────── */
.category-badge {
  border-radius: var(--md-shape-md) !important;
  padding: 4px 10px; font-size: .75rem; font-weight: 500;
}

/* ── Action Cards (dashboard quick-action) ──────────────────── */
.md3-action-card {
  border-radius: var(--md-shape-md);
  background: var(--md-surface);
  box-shadow: var(--md-elev-2);
  padding: 28px 24px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: none;
}
.md3-action-icon {
  width: 64px; height: 64px; border-radius: var(--md-shape-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin-bottom: 4px;
}
.md3-action-icon--primary   { background: var(--md-primary-container);  color: var(--md-primary); }
.md3-action-icon--secondary { background: var(--md-secondary-container);color: var(--md-secondary); }
.md3-action-icon--surface   { background: var(--md-surface-container);  color: var(--md-on-surface-variant); }

.md3-action-title    { font-size: 1rem; font-weight: 500; color: var(--md-on-surface); }
.md3-action-subtitle { font-size: .8125rem; color: var(--md-on-surface-variant); flex: 1; }

/* ── This-Month Stat Row ────────────────────────────────────── */
.md3-month-stat-num {
  font-size: 2rem; font-weight: 400; letter-spacing: -.01em; color: var(--md-primary);
}
.md3-month-stat-num--green { color: var(--md-success); }
.md3-month-stat-label { font-size: .8125rem; font-weight: 500; color: var(--md-on-surface-variant); margin-top: 2px; }

/* ── Footer ─────────────────────────────────────────────────── */
.md3-footer {
  background: var(--md-surface-container);
  border-top: 1px solid var(--md-outline-variant);
  padding: 20px; text-align: center;
  font-size: .8125rem; color: var(--md-on-surface-variant); margin-top: 48px;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--md-surface-container-low); }
::-webkit-scrollbar-thumb  { background: var(--md-outline-variant); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--md-outline); }

/* ── Mobile Hamburger Button ─────────────────────────────────── */
.md3-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--md-primary);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.md3-hamburger:hover { background: var(--md-primary-container); }

/* ── Mobile Drawer Nav Items ─────────────────────────────────── */
.md3-drawer-item--primary {
  height: 56px;
  font-size: 1rem;
  background: var(--md-surface-variant);
  margin-bottom: 8px;
}
.md3-drawer-item--primary:hover { background: rgba(var(--md-primary-rgb),.15); color: var(--md-primary); text-decoration: none; }
.md3-drawer-item--primary.active { background: var(--md-primary-container); color: var(--md-primary); font-weight: 600; }

.md3-drawer-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 100px;
  text-decoration: none;
  color: var(--md-on-surface-variant);
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  margin-bottom: 2px;
}
.md3-drawer-item:hover { background: rgba(var(--md-primary-rgb),.08); color: var(--md-primary); text-decoration: none; }
.md3-drawer-item.active { background: var(--md-primary-container); color: var(--md-primary); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .md3-avatar-name { display: none !important; }

  /* ── Fixed bottom navigation bar ────────────────────────── */
  .md3-nav-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-bottom: none;
    border-top: none;
    background: var(--md-primary);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .md3-nav-bar-inner {
    display: flex;
    max-width: 100%;
    padding: 6px 0 4px;
    gap: 0;
    justify-content: space-around;
  }
  .md3-nav-item {
    flex-direction: column;
    flex: 1;
    height: auto;
    padding: 6px 2px 4px;
    gap: 3px;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: rgba(255,255,255,.7);
    min-width: 0;
    text-align: center;
  }
  .md3-nav-item .md3-nav-label {
    display: block;
    font-size: .6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .md3-nav-icon { font-size: 1.1rem; }
  .md3-nav-item:hover {
    background: rgba(255,255,255,.1);
    color: #ffffff;
  }
  .md3-nav-item.active {
    background: transparent;
    color: #ffffff;
  }

  /* Push content above the bottom bar (extra env() accounts for PWA safe-area in standalone mode) */
  .md3-main-content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .md3-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}



/* =============================================================
   BILLING TOGGLE & PLAN CARDS
   Used by: billing.html, index.html (pricing section)
   ============================================================= */

/* ── Billing Toggle ─────────────────────────────────────────── */
.billing-toggle-wrap {
  display: flex; align-items: center; gap: .75rem;
  justify-content: center; margin-bottom: 2rem;
}
.billing-toggle { position: relative; display: inline-block; width: 48px; height: 26px; }
.billing-toggle input { opacity: 0; width: 0; height: 0; }
.billing-toggle-slider {
  position: absolute; inset: 0; background: var(--md-outline-variant);
  border-radius: 26px; cursor: pointer; transition: .2s;
}
.billing-toggle-slider:before {
  content: ''; position: absolute; width: 20px; height: 20px;
  left: 3px; bottom: 3px; background: var(--md-on-primary); border-radius: 50%; transition: .2s;
}
.billing-toggle input:checked + .billing-toggle-slider { background: var(--md-primary); }
.billing-toggle input:checked + .billing-toggle-slider:before { transform: translateX(22px); }

/* Toggle visibility helpers */
.annual-note  { display: none; }
.billing-annual .annual-note   { display: inline; }
.billing-annual .monthly-note  { display: none; }
.billing-annual .price-monthly { display: none; }
.billing-annual .price-annual  { display: inline; }
.price-annual  { display: none; }
.billing-annual .savings-badge { display: inline; }
.savings-badge { display: none; }

/* ── Plan Cards ─────────────────────────────────────────────── */
.plan-card {
  border: 1px solid var(--md-outline-variant); border-radius: 16px; padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; height: 100%;
  position: relative; background: var(--md-surface); transition: box-shadow .2s;
}
.plan-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.plan-card.popular {
  border-color: var(--md-primary);
  box-shadow: 0 4px 20px rgba(var(--md-primary-rgb),.18);
}
.popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--md-primary); color: var(--md-on-primary);
  font-size: .7rem; font-weight: 600; padding: .25rem .85rem;
  border-radius: 20px; white-space: nowrap;
  letter-spacing: .04em; text-transform: uppercase;
}
.plan-price     { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.plan-price sup { font-size: 1rem; font-weight: 600; padding-top: .35rem; }
.plan-price span { font-size: 1rem; font-weight: 400; color: var(--md-on-surface-variant); }
.plan-savings   { font-size: .8125rem; color: var(--md-primary); font-weight: 500; min-height: 1.2em; }
.plan-features  { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; flex-grow: 1; }
.plan-features li { padding: .35rem 0; font-size: .9375rem; display: flex; align-items: center; gap: .6rem; }
.plan-features li i { color: var(--md-success, #388e3c); font-size: .85rem; flex-shrink: 0; }
.plan-btn   { width: 100%; border-radius: var(--md-shape-full) !important; }
.status-card { border-radius: 12px; }


/* =============================================================
   LANDING PAGE
   Used by: templates/index.html
   ============================================================= */

/* ── Landing Nav ────────────────────────────────────────────── */
.lp-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--md-outline-variant);
  padding: .875rem 0;
  padding-top: calc(.875rem + env(safe-area-inset-top));
}
.lp-nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.lp-logo {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--md-primary);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.lp-logo:hover { color: var(--md-primary); }
.lp-nav-links { display: flex; align-items: center; gap: 1.25rem; }
.lp-nav-text-link {
  font-size: .875rem; font-weight: 500;
  color: var(--md-on-surface-variant); text-decoration: none;
  white-space: nowrap;
}
.lp-nav-text-link:hover { color: var(--md-primary); }
.lp-nav-actions { display: flex; align-items: center; gap: .75rem; }
.lp-nav-login-btns { display: flex; align-items: center; gap: .5rem; }
.lp-nav-divider {
  width: 1px; height: 20px;
  background: var(--md-outline-variant);
  flex-shrink: 0;
}
.lp-nav-login {
  font-size: .875rem; font-weight: 500;
  color: var(--md-on-surface-variant); text-decoration: none;
}
.lp-nav-login:hover { color: var(--md-primary); }

/* ── Hero ───────────────────────────────────────────────────── */
.lp-hero {
  background: linear-gradient(135deg, #0F1929 0%, var(--md-primary) 55%, #2C5282 100%);
  color: var(--md-on-primary); padding: 5rem 1.5rem 4rem;
}
.lp-hero-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; gap: 3rem; flex-wrap: wrap;
}
.lp-hero-copy  { flex: 1 1 360px; }
.lp-hero-login { flex: 0 0 420px; }
.lp-eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px; font-size: .8125rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .9rem; margin-bottom: 1.25rem;
}
.lp-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700; line-height: 1.15; margin-bottom: 1rem;
}
.lp-hero-copy p { font-size: 1.0625rem; opacity: .88; line-height: 1.6; margin-bottom: 0; }

/* ── Login Card ─────────────────────────────────────────────── */
.lp-login-card {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px; padding: 2rem; backdrop-filter: blur(8px);
  min-height: 500px;
}
.lp-tab-btns {
  display: flex; gap: .5rem; background: rgba(0,0,0,.2);
  border-radius: 50px; padding: .25rem; margin-bottom: 1.5rem;
}
.lp-tab-btn {
  flex: 1; border: none; background: transparent; color: rgba(255,255,255,.75);
  padding: .55rem .5rem; border-radius: 50px; font-size: .875rem; font-weight: 500;
  cursor: pointer; transition: background .2s, color .2s;
}
.lp-tab-btn.active { background: var(--md-on-primary); color: var(--md-primary); }
.lp-panel        { display: none; }
.lp-panel.active { display: block; }

/* ── Benefit list (Get Started panel) ───────────────────────── */
.lp-benefit-list {
  list-style: none; padding: 0; margin: 0 0 1.25rem;
}
.lp-benefit-list li {
  display: flex; align-items: center; gap: .65rem;
  font-size: .875rem; color: rgba(255,255,255,.85);
  padding: .3rem 0;
}
.lp-benefit-list li i {
  color: rgba(255,255,255,.95); font-size: .9rem; flex-shrink: 0; width: 1rem; text-align: center;
}

/* ── Landing Buttons & Forms ────────────────────────────────── */
.btn-google {
  background: var(--md-on-primary); color: var(--md-primary); border: none;
  border-radius: 50px; padding: .75rem 1.5rem;
  font-weight: 600; font-size: .9375rem;
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  width: 100%; text-decoration: none; transition: box-shadow .2s, transform .1s;
}
.btn-google:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25); transform: translateY(-1px); color: var(--md-primary); }
.lp-form-label {
  font-size: .8125rem; font-weight: 500; color: rgba(255,255,255,.8);
  margin-bottom: .3rem; display: block;
}
.lp-form-control {
  width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12); color: #fff;
  padding: .65rem .9rem; font-size: .9375rem;
  outline: none; transition: border-color .2s, background .2s;
}
.lp-form-control::placeholder { color: rgba(255,255,255,.45); }
.lp-form-control:focus { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.2); }
.btn-member-submit {
  width: 100%; background: var(--md-on-primary); color: var(--md-primary); border: none;
  border-radius: 50px; padding: .75rem; font-weight: 600; font-size: .9375rem;
  cursor: pointer; transition: box-shadow .2s, transform .1s;
}
.btn-member-submit:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25); transform: translateY(-1px); }
.lp-login-note { font-size: .75rem; color: rgba(255,255,255,.72); text-align: center; margin-top: 1rem; margin-bottom: 0; }

/* ── Sections ───────────────────────────────────────────────── */
.lp-section        { padding: 5rem 1.5rem; }
.lp-section-white  { background: var(--md-surface); }
.lp-section-tinted { background: var(--md-surface-container-low); }
.lp-section-title  { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-align: center; color: var(--md-on-surface); margin-bottom: .5rem; }
.lp-section-sub    { text-align: center; color: var(--md-on-surface-variant); font-size: 1rem; margin-bottom: 3rem; }

/* ── How It Works ───────────────────────────────────────────── */
.lp-step { text-align: center; padding: 0 1rem; }
.lp-step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  font-size: 1.25rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
}
.lp-step h4 { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.lp-step p  { font-size: .9375rem; color: var(--md-on-surface-variant); margin: 0; }
.lp-step-arrow {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 1.6rem; color: var(--md-outline);
}

/* ── Feature Cards ──────────────────────────────────────────── */
.lp-feature-card {
  background: var(--md-surface); border: 1px solid var(--md-outline-variant);
  border-radius: 16px; padding: 1.75rem; height: 100%;
}
.lp-feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.lp-feature-card h5 { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.lp-feature-card p  { font-size: .9rem; color: var(--md-on-surface-variant); margin: 0; }

/* ── Landing Footer ─────────────────────────────────────────── */
.lp-footer { background: var(--md-footer-bg); color: rgba(255,255,255,.6); text-align: center; padding: 2rem 1.5rem; font-size: .875rem; }
.lp-footer a       { color: rgba(255,255,255,.75); text-decoration: none; }
.lp-footer a:hover { color: var(--md-on-primary); }

/* ── Google Drive Trust Stripe ──────────────────────────────── */
.lp-section-drive-stripe {
  background: linear-gradient(135deg, #0F1929 0%, var(--md-primary) 60%, #2C5282 100%);
  color: var(--md-on-primary);
  padding: 3.5rem 1.5rem;
}
.lp-drive-stripe-inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: center; gap: 2.5rem;
}
.lp-drive-stripe-icon {
  flex-shrink: 0; font-size: 3.5rem;
  color: rgba(255,255,255,.9);
  line-height: 1;
}
.lp-drive-stripe-title {
  font-size: clamp(1.2rem, 2.5vw, 1.625rem);
  font-weight: 700; margin-bottom: .5rem; color: var(--md-on-primary);
}
.lp-drive-stripe-sub {
  font-size: 1rem; color: rgba(255,255,255,.83);
  margin: 0; line-height: 1.65;
}
@media (max-width: 600px) {
  .lp-drive-stripe-inner { flex-direction: column; text-align: center; }
}

/* ── Landing Page Responsive ────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero — copy/headline first, then login card */
  .lp-hero { padding: 2.5rem 1rem 2rem; }
  .lp-hero-inner { flex-direction: column; gap: 2rem; }
  .lp-hero-copy  { flex: 1 1 100%; order: 0; }
  .lp-hero-login { flex: 1 1 100%; width: 100%; min-width: 0; order: 1; }
  .lp-login-card { min-height: 0; padding: 1.5rem 1.25rem; }

  /* Nav — hide login buttons + their adjacent divider on mobile */
  .lp-nav-login-btns { display: none !important; }

  /* Nav — condense text links on mobile */
  .lp-nav-links { gap: .75rem; }

  /* Sections */
  .lp-section { padding: 3rem 1rem; }

  /* Footer — stack links vertically */
  .lp-footer p { line-height: 2; }
}

@media (max-width: 480px) {
  /* Nav links — hide on very small phones */
  .lp-nav-links { display: none; }
  .lp-hero-copy h1 { font-size: 1.75rem; }
  /* CTA button — full width so text never clips */
  .lp-hero-cta { width: 100%; justify-content: center; box-sizing: border-box; }
}


/* =============================================================
   SIGNUP PAGE
   Used by: templates/signup.html
   ============================================================= */

.signup-wrap { max-width: 860px; margin: 1.25rem auto; padding: 0 1.5rem 4rem; }
.signup-back {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--md-on-surface-variant); text-decoration: none;
  font-size: .875rem; margin-bottom: 2rem;
}
.signup-back:hover { color: var(--md-primary); }
.signup-card { background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: 20px; overflow: hidden; }
.signup-header {
  background: linear-gradient(135deg, #0F1929 0%, var(--md-primary) 55%, #2C5282 100%);
  color: var(--md-on-primary); padding: 2.5rem 2.5rem 2rem;
}
.signup-header h1 { font-size: 1.625rem; font-weight: 700; margin-bottom: .5rem; }
.signup-header p  { font-size: .9375rem; opacity: .88; margin: 0; }
.signup-trial-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: 20px; font-size: .8rem; font-weight: 500;
  padding: .25rem .85rem; margin-bottom: 1rem;
}
.signup-body { padding: 2.5rem; }
.signup-steps { display: flex; gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.signup-step  { flex: 1 1 180px; display: flex; align-items: flex-start; gap: .85rem; }
.signup-step-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  font-size: .875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.signup-step-text strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--md-on-surface); margin-bottom: .15rem; }
.signup-step-text span   { font-size: .8375rem; color: var(--md-on-surface-variant); line-height: 1.45; }
.signup-divider { border: none; border-top: 1px solid var(--md-outline-variant); margin: 2rem 0; }
.signup-section-label {
    font-size: .9375rem; font-weight: 600;
    color: var(--md-on-surface); margin-bottom: 1.25rem;
}
.why-google-title { font-size: 1rem; font-weight: 600; color: var(--md-on-surface); margin-bottom: .25rem; }
.why-google-sub   { font-size: .875rem; color: var(--md-on-surface-variant); margin-bottom: 1.5rem; }
.permission-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.permission-item {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant);
  border-radius: 12px; padding: 1rem 1.1rem;
}
.permission-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.permission-icon.green  { background: var(--md-primary-container); color: var(--md-primary); }
.permission-icon.blue   { background: #e3f2fd; color: #1565c0; }
.permission-icon.purple { background: #f3e5f5; color: #6a1b9a; }
.permission-icon.orange { background: var(--md-warning-container); color: var(--md-warning); }
.permission-text strong { display: block; font-size: .9375rem; font-weight: 600; color: var(--md-on-surface); margin-bottom: .15rem; }
.permission-text span   { font-size: .8375rem; color: var(--md-on-surface-variant); line-height: 1.45; }
.data-note {
  background: var(--md-primary-container); border: 1px solid var(--md-success-container); border-radius: 12px;
  padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 2rem; font-size: .875rem; color: var(--md-on-primary-container);
}
.data-note i { margin-top: .1rem; flex-shrink: 0; font-size: 1rem; }
.trial-terms {
  background: var(--md-surface-container-low); border-radius: 12px;
  padding: 1rem 1.25rem; margin-bottom: 2rem;
  font-size: .8375rem; color: var(--md-on-surface-variant);
}
.trial-terms ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.trial-terms li { margin-bottom: .25rem; }
.btn-google-signup {
  background: var(--md-primary); color: var(--md-on-primary); border: none; border-radius: 50px;
  padding: .875rem 2rem; font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; gap: .75rem;
  text-decoration: none; transition: box-shadow .2s, transform .1s;
  width: 100%; justify-content: center;
}
.btn-google-signup:hover { color: var(--md-on-primary); box-shadow: 0 4px 20px rgba(var(--md-primary-rgb),.4); transform: translateY(-1px); }
.signin-link { text-align: center; margin-top: 1.25rem; font-size: .875rem; color: var(--md-on-surface-variant); }
.signin-link a       { color: var(--md-primary); text-decoration: none; font-weight: 500; }
.signin-link a:hover { text-decoration: underline; }

@media (max-width: 576px) {
  .signup-wrap    { margin: 0; padding: 0 0 2rem; }
  .signup-back    { display: inline-flex; margin: 1rem 1rem 1.25rem; }
  .signup-card    { border-radius: 0; border-left: none; border-right: none; }
  .signup-header  { padding: 1.5rem 1.25rem 1.25rem; }
  .signup-header h1 { font-size: 1.375rem; }
  .signup-body    { padding: 1.25rem; }
}


/* =============================================================
   ADMIN PANEL
   Used by: templates/admin/base.html, templates/admin/login.html
   ============================================================= */

body.admin-layout {
  background: var(--md-admin-layout-bg);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
body.admin-login {
  background: var(--md-admin-sidebar-bg);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.admin-sidebar {
  width: 220px; min-height: 100vh; background: var(--md-admin-sidebar-bg);
  position: fixed; top: 0; left: 0;
  display: flex; flex-direction: column; z-index: 100;
}
.admin-sidebar .sidebar-brand {
  padding: 1.25rem 1.5rem; color: var(--md-on-primary); font-size: 1rem; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: .6rem;
}
.admin-sidebar .sidebar-brand i { color: var(--md-admin-accent); }
.admin-sidebar .sidebar-email {
  padding: .75rem 1.5rem; font-size: .72rem;
  color: rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.07); word-break: break-all;
}
.admin-sidebar nav { flex: 1; padding: 1rem 0; }
.admin-sidebar .nav-link {
  display: flex; align-items: center; gap: .65rem; padding: .6rem 1.5rem;
  color: rgba(255,255,255,.65); font-size: .875rem; border-radius: 0;
  transition: background .15s, color .15s;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.08); }
.admin-sidebar .nav-link i { width: 16px; text-align: center; }
.admin-sidebar .sidebar-footer { padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.admin-sidebar .sidebar-footer a { color: rgba(255,255,255,.5); font-size: .8rem; text-decoration: none; }
.admin-sidebar .sidebar-footer a:hover { color: var(--md-on-primary); }

/* ── Admin Layout ───────────────────────────────────────────── */
.admin-content { margin-left: 220px; padding: 2rem; min-height: 100vh; }
.admin-page-header { margin-bottom: 1.75rem; }
.admin-page-header h1 { font-size: 1.5rem; font-weight: 600; color: var(--md-admin-sidebar-bg); margin: 0; }

/* ── Admin Cards ────────────────────────────────────────────── */
.admin-card { background: var(--md-surface); border-radius: .75rem; border: 1px solid var(--md-admin-border); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.admin-card .card-header { background: none; border-bottom: 1px solid var(--md-admin-border); padding: 1rem 1.25rem; font-weight: 600; font-size: .9rem; color: var(--md-admin-text); }
.admin-card .card-body { padding: 1.25rem; }

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-card { background: var(--md-surface); border-radius: .75rem; border: 1px solid var(--md-admin-border); padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 48px; height: 48px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.stat-icon.blue  { background: #dbeafe; color: #2563eb; }
.stat-icon.green { background: #dcfce7; color: #16a34a; }
.stat-icon.amber { background: #fef3c7; color: #d97706; }
.stat-icon.red   { background: #fee2e2; color: #dc2626; }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--md-admin-heading); }
.stat-label { font-size: .8rem; color: var(--md-admin-text-muted); margin-top: .15rem; }

/* ── Admin Table ────────────────────────────────────────────── */
.admin-table { font-size: .875rem; }
.admin-table th { background: var(--md-admin-surface); color: var(--md-admin-text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--md-admin-border); padding: .65rem 1rem; }
.admin-table td { padding: .75rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--md-admin-surface); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--md-admin-surface); }

/* ── Admin Badges ───────────────────────────────────────────── */
.badge-plan { display: inline-block; padding: .2rem .55rem; border-radius: 9999px; font-size: .7rem; font-weight: 600; text-transform: uppercase; }
.badge-plan.solo  { background: var(--md-admin-surface); color: var(--md-admin-text); }
.badge-plan.team  { background: #dbeafe; color: #1d4ed8; }
.badge-plan.pro   { background: #ede9fe; color: #6d28d9; }
.badge-status.active   { background: #dcfce7; color: #15803d; }
.badge-status.trialing { background: #fef3c7; color: #b45309; }
.badge-status.canceled,
.badge-status.expired  { background: #fee2e2; color: #b91c1c; }
.badge-status.trial    { background: #fef3c7; color: #b45309; }
.badge-status.none     { background: var(--md-admin-surface); color: var(--md-admin-text-muted); }
.admin-flash { margin-bottom: 1.25rem; }

/* ── Admin Login Card ───────────────────────────────────────── */
.admin-login-card {
  background: var(--md-surface); border-radius: 1rem; padding: 2.5rem 2rem;
  width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.admin-login-icon {
  width: 52px; height: 52px; background: var(--md-admin-sidebar-bg); border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; color: var(--md-admin-accent); font-size: 1.3rem;
}

/* ── Admin Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-sidebar { display: none; }
  .admin-content { margin-left: 0; padding: 1rem; }
}


/* =============================================================
   UTILITY CLASSES
   ============================================================= */

/* ── Icon colors ─────────────────────────────────────────────── */
.icon-primary   { color: var(--md-primary); }
.icon-secondary { color: var(--md-secondary); }
.icon-success   { color: var(--md-success, #388e3c); }
.icon-tertiary  { color: var(--md-tertiary, #009688); }

/* ── Typography ──────────────────────────────────────────────── */
.fw-medium     { font-weight: 500; }
.text-xs       { font-size: .8125rem; }
.text-2xs      { font-size: .75rem; }
.text-overline { text-transform: uppercase; letter-spacing: .06em; }

/* ── Section containers (landing + billing) ──────────────────── */
.lp-inner      { max-width: 900px; margin: 0 auto; }
.lp-inner-wide { max-width: 960px; margin: 0 auto; }

/* ── Hero card sub-components ────────────────────────────────── */
.lp-hero-cta-wrap    { margin-bottom: 1.25rem; }
.lp-hero-cta-label   { color: rgba(255,255,255,.9); font-size: .9375rem; font-weight: 600; margin-bottom: .9rem; }
.lp-hero-member-text { color: rgba(255,255,255,.8); font-size: .875rem; margin-bottom: 1.25rem; }
.lp-hero-divider     { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.lp-hero-divider-line{ flex: 1; height: 1px; background: rgba(255,255,255,.2); }
.lp-hero-divider-text{ font-size: .75rem; color: rgba(255,255,255,.5); }

/* ── Google button ghost variant (returning-user sign-in) ────── */
.btn-google-ghost {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.3);
}
.btn-google-ghost:hover {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
}

/* ── Dev-mode banner (standalone pages) ──────────────────────── */
.dev-mode-banner {
    background: var(--md-warning); color: var(--md-on-primary);
    text-align: center; padding: .4rem;
    font-size: .8125rem;
}

/* ── Project stat amounts ────────────────────────────────────── */
.project-stat-amount {
    font-size: 1.25rem; font-weight: 500;
    color: var(--md-primary);
    font-family: var(--md-font-mono, monospace);
}
.project-stat-amount--secondary { color: var(--md-secondary); }

/* ── MD3 action icon tertiary variant ────────────────────────── */
.md3-action-icon--tertiary {
    background: rgba(0, 150, 136, .12);
    color: var(--md-tertiary, #009688);
}

/* ── Clickable card / element ────────────────────────────────── */
.clickable { cursor: pointer; transition: box-shadow .2s; }

/* ── Empty state icon circle ─────────────────────────────────── */
.empty-state-icon-circle {
    width: 80px; height: 80px;
    background: var(--md-primary-container);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}

/* ── Auth / narrow-page container ────────────────────────────── */
.auth-container       { max-width: 420px; margin-top: 3rem; }
.auth-container--wide { max-width: 460px; }

/* ── Impersonation banner ────────────────────────────────────── */
.impersonation-banner {
    background: var(--md-impersonation-bg); color: var(--md-on-primary);
    text-align: center; padding: .5rem 1rem;
    font-size: .85rem;
    position: sticky; top: 0; z-index: 9999;
}
.impersonation-banner a { color: #f3e8ff; font-weight: 600; }

/* ── Landing page: hero benefits + CTA ───────────────────────── */
.lp-benefit-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.lp-benefit-list li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255,255,255,.92);
}
.lp-benefit-list li i {
    width: 1.5rem;
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
    flex-shrink: 0;
}
.lp-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-weight: 600;
    font-size: 1.0625rem;
    padding: .85rem 2rem;
    border-radius: var(--md-shape-full);
    text-decoration: none;
    transition: opacity .15s, box-shadow .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.lp-hero-cta:hover { opacity: .9; color: var(--md-on-primary); box-shadow: 0 4px 16px rgba(0,0,0,.22); }
.lp-hero-cta-note {
    margin-top: .6rem;
    font-size: .8125rem;
    color: rgba(255,255,255,.72);
}
.lp-login-inline { color: rgba(255,255,255,.9); text-decoration: underline; }
.lp-login-inline:hover { color: #fff; }

/* ── Landing page: plan feature disabled row ─────────────────── */
.plan-feature-disabled { opacity: .4; }
.plan-feature-disabled i { color: var(--md-error, #d32f2f) !important; }

/* ── Signup page: 3 benefit cards ───────────────────────────── */
.signup-benefits {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 2rem;
}
.signup-benefit-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--md-surface-container-lowest, #fafafa);
    border: 1px solid var(--md-outline-variant, #e0e0e0);
    border-radius: 12px;
    padding: .9rem 1rem;
}
.signup-benefit-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.signup-benefit-text strong {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--md-on-surface);
    margin-bottom: .2rem;
}
.signup-benefit-text span {
    font-size: .8375rem;
    color: var(--md-on-surface-variant);
    line-height: 1.45;
}