/* ==========================================================================
   Dashboard TMT — TriplePro Brand Design System
   Derived from https://www.onlinemarketing.triplepro.nl/ (custom.css)
   Fonts: Dystopian (headings, Adobe Typekit eqs4uan) + Montserrat (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from production stylesheet) */
  --color-dark:        hsl(240 78% 18%);          /* deep navy — primary text */
  --color-light:       #ffffff;                   /* white — cards, panels */
  --color-usp:         hsl(154 62% 60%);          /* accent green — buttons, links */
  --color-button:      var(--color-usp);
  --color-link:        var(--color-usp);
  --color-1:           hsl(231 91% 96%);          /* lightest blue — page bg */
  --color-2:           hsl(230 92% 90%);          /* light blue — alt sections */
  --color-3:           hsl(230 91% 56%);          /* medium blue — sub-headings */
  --color-4:           hsl(240 78% 18%);          /* dark navy — footer */
  --color-5:           #ff7c66;                   /* coral accent */
  --transparent-color-4: hsla(240 78% 18% / 0.45);

  /* Task-specified brand anchors */
  --color-primary:     #0066cc;
  --color-accent:      #00a3e0;
  --color-black:       #0a0a0a;

  /* TMT department accent */
  --color-tmt:         hsl(213 100% 60%);
  --color-tmt-light:   hsl(213 100% 88%);

  /* Gray tones */
  --color-gray-100:    hsl(230 20% 96%);
  --color-gray-200:    hsl(230 15% 90%);
  --color-gray-300:    hsl(230 10% 78%);
  --color-gray-500:    hsl(230 8% 55%);
  --color-gray-700:    hsl(235 12% 35%);

  /* Semantic */
  --color-bg:          var(--color-1);
  --color-surface:     var(--color-light);
  --color-text:        var(--color-dark);
  --color-text-muted:  var(--color-gray-500);
  --color-border:      var(--color-gray-200);
  --color-success:     hsl(154 62% 45%);
  --color-warning:     hsl(38 95% 55%);
  --color-error:       hsl(0 79% 63%);
  --color-info:        var(--color-accent);

  /* Typography */
  --font-header:       "Dystopian", "Montserrat", sans-serif;
  --font-text:         "Montserrat", sans-serif;
  --font-size:         clamp(12px, 0.85vw, 16px);
  --font-size-sm:      0.875rem;
  --font-size-lg:      1.125rem;
  --font-size-h1:      clamp(2rem, 4vw, 3rem);
  --font-size-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --font-size-h3:      1.375rem;
  --line-height:       1.6;

  /* Layout */
  --website-content-width: 85em;
  --topbar-height:     4.5rem;
  --sidebar-width:     16rem;

  /* Radii & shadows */
  --radius-card:       1em;
  --radius-button:     0.4em;
  --radius-input:      0.4em;
  --shadow-card:       0 0.15em 0.25em hsla(0 0% 0% / 0.2);
  --shadow-card-hover: 0 0.4em 1em hsla(240 78% 18% / 0.18);
  --shadow-focus:      0 0 0 3px hsl(213 100% 60% / 0.35);

  /* Spacing scale (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Motion */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --easing-default:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Breakpoints (reference — used via media queries) */
  --bp-lg: 1365px;
  --bp-md: 997px;
  --bp-sm: 768px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}

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

/* Headings — Dystopian, 900, lowercase (brand rule) */
h1, h2, h3, h4, h5, h6,
.title {
  font-family: var(--font-header);
  font-weight: 900;
  text-transform: lowercase;
  line-height: 1.15;
  color: var(--color-dark);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

strong { font-weight: 600; }

::selection {
  background: var(--color-tmt);
  color: var(--color-light);
}

/* --------------------------------------------------------------------------
   3. Layout — Dashboard Grid
   -------------------------------------------------------------------------- */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background: var(--color-dark);
  color: var(--color-light);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar .logo {
  height: 2.5em;
  width: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button);
  color: hsl(231 91% 96% / 0.8);
  font-weight: 600;
  transition: background var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}

.sidebar-nav a:hover {
  background: hsl(240 78% 25%);
  color: var(--color-light);
}

.sidebar-nav a.active {
  background: var(--color-tmt);
  color: var(--color-dark);
}

/* Top bar — full-width band; inner content constrained to shared max-width */
.topbar {
  grid-area: topbar;
  background: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px hsla(240 78% 18% / 0.06);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar .logo {
  height: 2.5em;
  width: auto;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Main content */
.main-content {
  grid-area: main;
  padding: var(--space-6);
  max-width: var(--website-content-width);
  width: 100%;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  transition: box-shadow var(--duration-normal) var(--easing-default),
              transform var(--duration-normal) var(--easing-default);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-tmt-light);
}

.card-title {
  font-family: var(--font-header);
  font-weight: 900;
  text-transform: lowercase;
  font-size: var(--font-size-lg);
  color: var(--color-tmt);
}

/* Stat card — self-contained surface (views render it without .card) */
.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 3px solid var(--color-tmt-light);
  transition: box-shadow var(--duration-normal) var(--easing-default),
              transform var(--duration-normal) var(--easing-default);
}

.stat-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.stat-card .stat-value {
  font-family: var(--font-header);
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--color-dark);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-2);
}

.stat-card .stat-value.accent { color: var(--color-usp); }
.stat-card .stat-value.tmt    { color: var(--color-tmt); }

/* Container — shared max-width wrapper (main content, footer) */
.container {
  max-width: var(--website-content-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* Topbar inner — flex wrapper for topbar sections, constrained to content width */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--topbar-height);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Topbar brand link */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

/* Topbar nav links — pill-style buttons */
.topbar-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border-radius: var(--radius-button);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default);
}

.topbar-link:hover {
  background: var(--color-gray-100);
  color: var(--color-tmt);
}

.topbar-link:active {
  background: var(--color-tmt-light);
  color: var(--color-dark);
}

/* Topbar username */
.topbar-username {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* Footer — full-width band (matches header); inner content constrained */
.footer {
  background: var(--color-4);
  color: var(--color-light);
  padding: var(--space-6) 0;
  margin-top: var(--space-8);
  width: 100%;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
}

/* Stats grid — 3-column responsive grid for dashboard stat cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* Dashboard topbar: stats grid stacked over an inline sync-bar. Wraps
   on small screens so the sync button never overlaps the last-sync label. */
.dashboard-topbar {
  margin-bottom: var(--space-6);
}
.dashboard-topbar .stats-grid {
  margin-bottom: var(--space-4);
}
.sync-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.sync-bar .last-sync { margin-right: auto; }

/* Project list — clean list for AJAX-loaded project items */
.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Last-synced timestamp */
.last-sync {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Status message (sync feedback, errors, info) */
.status-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  border-left: 4px solid;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.status-message.info    { background: var(--color-tmt-light); border-color: var(--color-tmt); color: var(--color-dark); }
.status-message.error   { background: hsl(0 79% 95%);         border-color: var(--color-error); color: hsl(0 79% 35%); }
.status-message.success { background: hsl(154 62% 92%);       border-color: var(--color-success); color: hsl(154 62% 25%); }

/* Adjacent card vertical spacing */
.card + .card {
  margin-top: var(--space-5);
}

/* Consistent vertical rhythm between dashboard content blocks
   (stats, filter bar, status messages, support projects, project hours) */
.dashboard-home > * + * {
  margin-top: var(--space-6);
}

.dashboard-home .stats-grid,
.dashboard-home .filter-bar,
.dashboard-home .status-message {
  margin-bottom: 0;
}

/* Panel headings inside content cards */
.projects-panel h2,
.hours-panel h2 {
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-tmt-light);
}

/* Project list items */
.project-list li {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-button);
}

.project-list li + li {
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

.project-list li.empty,
.empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-5);
  text-align: center;
}

/* Infinite-scroll sentinel row */
.project-list li.project-list-sentinel {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-4);
}

/* Sync progress tracker */
.sync-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 100%;
  margin-top: var(--space-3);
}

.sync-progress-bar {
  flex: 1 1 auto;
  height: 8px;
  background: var(--color-tmt-light);
  border-radius: 4px;
  overflow: hidden;
}

.sync-progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-tmt);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.sync-progress-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Tables
   -------------------------------------------------------------------------- */
.table-wrapper {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table thead th {
  font-family: var(--font-header);
  font-weight: 900;
  text-transform: lowercase;
  text-align: left;
  padding: var(--space-4);
  color: var(--color-light);
  background: var(--color-dark);
  white-space: nowrap;
}

.data-table thead th:first-child { border-top-left-radius: var(--radius-card); }
.data-table thead th:last-child  { border-top-right-radius: var(--radius-card); }

.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-gray-100);
}

.data-table tbody tr:hover {
  background: var(--color-tmt-light);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table tfoot td {
  padding: var(--space-4);
  font-weight: 700;
  background: var(--color-2);
  border-top: 2px solid var(--color-dark);
}

/* Badges */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-success { background: hsl(154 62% 90%); color: var(--color-success); }
.badge-warning { background: hsl(38 95% 90%);  color: hsl(38 95% 35%); }
.badge-error   { background: hsl(0 79% 93%);   color: var(--color-error); }
.badge-info    { background: var(--color-tmt-light); color: var(--color-primary); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--font-size);
  line-height: 1;
  padding: 0.75em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--easing-default),
              color var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default),
              padding var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Small button variant (topbar actions, back links) */
.btn-sm {
  font-size: var(--font-size-sm);
  padding: 0.5em 1.1em;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Primary — brand mint green, dark text (matches production buttons) */
.btn-primary {
  background: var(--color-button);
  color: var(--color-dark);
}

.btn-primary:hover:not(:disabled) {
  background: hsl(154 62% 52%);
  color: var(--color-dark);
  padding-left: 1.75em;
  padding-right: 1.75em;
}

/* Secondary — outlined navy */
.btn-secondary {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-dark);
  color: var(--color-light);
}

/* TMT blue variant */
.btn-tmt {
  background: var(--color-tmt);
  color: var(--color-light);
}

.btn-tmt:hover:not(:disabled) {
  background: hsl(213 100% 50%);
  color: var(--color-light);
}

/* Sync button — accent cyan with spinning icon state */
.btn-sync {
  background: var(--color-accent);
  color: var(--color-light);
}

.btn-sync:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--color-light);
}

.btn-sync .material-symbols-outlined,
.btn-sync .sync-icon {
  transition: transform var(--duration-normal) var(--easing-default);
}

.btn-sync.is-syncing {
  pointer-events: none;
  opacity: 0.8;
}

.btn-sync.is-syncing .material-symbols-outlined,
.btn-sync.is-syncing .sync-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Link-style button */
.btn-link {
  background: none;
  border: none;
  color: var(--color-link);
  padding: 0;
  font-weight: 600;
  cursor: pointer;
}

.btn-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Forms (login / register / filters)
   -------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background:
    radial-gradient(60em 40em at 80% -10%, var(--color-tmt-light), transparent 60%),
    radial-gradient(50em 35em at -10% 110%, var(--color-2), transparent 60%),
    var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-7) var(--space-6);
}

.auth-card .logo {
  height: 2.5em;
  width: auto;
  margin: 0 auto var(--space-5);
}

.auth-card h1 {
  text-align: center;
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-5);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  color: var(--color-dark);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem; /* prevents iOS zoom on focus */
  padding: 0.7em 1em;
  color: var(--color-text);
  background: var(--color-light);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-input);
  transition: border-color var(--duration-fast) var(--easing-default),
              box-shadow var(--duration-fast) var(--easing-default);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-tmt);
  box-shadow: var(--shadow-focus);
}

.form-control::placeholder { color: var(--color-gray-300); }

.form-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.form-error {
  font-size: 0.8rem;
  color: var(--color-error);
  font-weight: 600;
  margin-top: var(--space-1);
}

.form-control.is-invalid {
  border-color: var(--color-error);
}

/* Filter bar (month/year/status selects) — single flex row. The global
   `select { width: 100% }` rule stretched each select to full width, which
   made flex-wrap put every control on its own line and blew the bar up
   vertically. Overriding `width` here keeps labels + selects inline. */
.filter-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.filter-bar > label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  margin: 0;
}

.filter-bar .form-group {
  margin-bottom: 0;
  min-width: 8rem;
}

.filter-bar select {
  width: auto;
  min-width: 8rem;
  padding: 0.4em 0.75em;
}

/* Alerts / flash messages */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  border-left: 4px solid;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.alert-success { background: hsl(154 62% 92%); border-color: var(--color-success); color: hsl(154 62% 25%); }
.alert-error   { background: hsl(0 79% 95%);   border-color: var(--color-error);   color: hsl(0 79% 35%); }
.alert-info    { background: var(--color-tmt-light); border-color: var(--color-tmt); color: var(--color-dark); }

/* Auth footer links */
.auth-links {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   7. Utility & States
   -------------------------------------------------------------------------- */
.text-muted  { color: var(--color-text-muted); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }

.loading-spinner {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border: 3px solid var(--color-tmt-light);
  border-top-color: var(--color-tmt);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--color-text-muted);
}

.empty-state .material-symbols-outlined {
  font-size: 3rem;
  color: var(--color-gray-300);
  margin-bottom: var(--space-3);
}

/* Last-synced timestamp */
.sync-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.sync-status .dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--color-success);
}

.sync-status.stale .dot { background: var(--color-warning); }

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1365px) {
  .main-content { padding: var(--space-5); }
}

@media (max-width: 997px) {
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) auto 1fr;
    grid-template-areas:
      "topbar"
      "sidebar"
      "main";
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: var(--space-2) var(--space-4);
  }

  .sidebar .logo { display: none; }

  .sidebar-nav {
    flex-direction: row;
    gap: var(--space-2);
  }

  .sidebar-nav a {
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    min-height: 44px; /* touch target */
  }
}

@media (max-width: 768px) {
  .main-content { padding: var(--space-4); }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar .form-group,
  .filter-bar select {
    width: 100%;
    min-width: 0;
  }

  .main-content .btn,
  .filter-bar .btn {
    width: 100%;
    min-height: 44px;
  }

  .topbar-inner {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .topbar-nav { order: 3; width: 100%; }

  .topbar-user { margin-left: auto; }

  .auth-card { padding: var(--space-6) var(--space-5); }

  .data-table thead th,
  .data-table tbody td {
    padding: var(--space-2) var(--space-3);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hours specification summary on the project-hours detail page */
.hours-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.hours-summary-item {
  flex: 1 1 160px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gray-200, #e5e7eb);
  border-radius: var(--radius-input);
  background: var(--color-white, #fff);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hours-summary-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.hours-summary-value {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: 700;
}

.hours-summary-value.negative {
  color: var(--color-error);
}

/* Remaining-hours cell in the projects table: red when over budget */
.hours-remaining.negative {
  color: var(--color-error);
  font-weight: 700;
}

/* Individual hour-entry cards on the project-hours detail page */
.hour-card-title {
  font-size: var(--font-size-lg);
  overflow-wrap: anywhere;
}

.hour-card-amount {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-tmt);
  white-space: nowrap;
}

.hour-card-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--font-size-sm);
}

.hour-card-meta dt {
  color: var(--color-text-muted);
  font-weight: 600;
}

.hour-card-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.hours-cards-total {
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
}

/* Hour-entry selection on the project hours detail page. The first column
   holds a checkbox per entry; unselected rows are rendered as disabled
   (muted text, no hover highlight) while staying fully readable. */
.hours-select-col {
  width: 2.5rem;
}

.hours-select-cell {
  text-align: center;
  width: 2.5rem;
}

.hour-select-checkbox {
  cursor: pointer;
  accent-color: var(--color-tmt);
  width: 1rem;
  height: 1rem;
}

/* Unselected hour entries: visually disabled. The checkbox itself keeps
   full opacity so the row can be re-selected easily. */
.data-table tbody tr.hour-row-unselected td {
  color: var(--color-gray-300);
}

.data-table tbody tr.hour-row-unselected,
.data-table tbody tr.hour-row-unselected:nth-child(even),
.data-table tbody tr.hour-row-unselected:hover {
  background: var(--color-gray-100);
}

.data-table tbody tr.hour-row-unselected .hour-select-checkbox {
  opacity: 1;
}

/* Screen-reader-only label for the checkbox column header. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Whole-row highlight for over-budget projects in the projects table
   (#projects-table-body). Light blue tint matches the color legend
   ("Light blue = over budget") and keeps the text legible while making
   the row obvious at a glance; the zebra stripe (nth-child even) and
   hover states get overridden so the flag never disappears when
   scanning the list. */
.data-table tbody tr.over-budget,
.data-table tbody tr.over-budget:nth-child(even) {
  background: var(--color-tmt-light);
}
.data-table tbody tr.over-budget:hover {
  background: hsl(213 100% 80%);
}
.data-table tbody tr.over-budget td {
  color: hsl(213 100% 28%);
}

/* The over-budget stat card at the top of the dashboard intentionally uses
   the default .stat-card styling — the blue "over budget" highlight is
   reserved for the over-budget rows inside #projects-table-body (see the
   tr.over-budget rules above), matching the color legend. */

/* Whole-row highlight for projects that used MORE than 20 minutes in the
   currently displayed month. Declared after .over-budget so the red flag
   wins when a row is both over budget and high usage — matching the
   legend, where red means "> 20 minutes used in that month". */
.data-table tbody tr.high-usage,
.data-table tbody tr.high-usage:nth-child(even) {
  background: hsl(0 79% 95%);
}
.data-table tbody tr.high-usage:hover {
  background: hsl(0 79% 90%);
}
.data-table tbody tr.high-usage td {
  color: hsl(0 79% 30%);
}

/* High-usage entries in the project list variant (same > 20 minute rule) */
.project-list li.high-usage {
  background: hsl(0 79% 95%);
  color: hsl(0 79% 30%);
}

/* Color legend — sits between the over-budget stat card and the sync bar
   and explains the two highlight colors used on the dashboard. */
.color-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.legend-swatch {
  flex: none;
  width: 1em;
  height: 1em;
  border-radius: 0.25em;
  border: 1px solid;
}

.legend-swatch--blue {
  background: var(--color-tmt-light);
  border-color: var(--color-tmt);
}

.legend-swatch--red {
  background: hsl(0 79% 95%);
  border-color: var(--color-error);
}