/* ClientAI design system v2
 *
 * One stylesheet that restyles every portal page. Pages are built from
 * Tailwind CDN utilities, so the theme layer below uses `html body`-prefixed
 * selectors to win over the runtime-injected utilities, then adds a small set
 * of reusable component classes (cai-*) for new markup.
 *
 * Language: calm, light, neutral. One accent (brand blue). Dark sidebar kept
 * because the brand logo is white-on-dark. One radius scale:
 *   8px controls, 12px panels, 999px pills.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500&display=swap');

:root {
  --cai-accent: #4B66E3;
  --cai-accent-hover: #3F58CC;
  --cai-accent-soft: #EEF1FD;
  --cai-accent-ring: rgba(75, 102, 227, 0.22);
  --cai-lime: #D2F561;

  --cai-ink: #18181B;
  --cai-ink-2: #3F3F46;
  --cai-muted: #71717A;
  --cai-faint: #A1A1AA;
  --cai-line: #E8E8EC;
  --cai-line-strong: #D9D9DF;
  --cai-canvas: #F7F7F8;
  --cai-surface: #FFFFFF;
  --cai-surface-2: #FAFAFB;

  --cai-side-bg: #222222;
  --cai-side-line: #333338;
  --cai-side-text: #A1A1AA;
  --cai-side-text-hover: #F4F4F5;

  --cai-success: #15803D;
  --cai-success-soft: #E8F7EE;
  --cai-warning: #B45309;
  --cai-warning-soft: #FEF3E2;
  --cai-danger: #B91C1C;
  --cai-danger-soft: #FDEBEB;

  --cai-r-control: 8px;
  --cai-r-panel: 12px;
  --cai-shadow-1: 0 1px 2px rgba(24, 24, 27, 0.04);
  --cai-shadow-2: 0 8px 24px -8px rgba(24, 24, 27, 0.14), 0 2px 6px rgba(24, 24, 27, 0.05);
  --cai-font: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --cai-font-mono: 'Geist Mono', ui-monospace, monospace;
  --cai-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base ------------------------------------------------------------------ */

html body {
  font-family: var(--cai-font);
  color: var(--cai-ink);
  background: var(--cai-canvas);
  letter-spacing: -0.006em;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
}

html body.bg-gray-50 { background: var(--cai-canvas); }


html body .text-gray-500 { color: var(--cai-muted); }
html body .text-gray-400 { color: var(--cai-faint); }
html body .border-gray-200,
html body .border-gray-100 { border-color: var(--cai-line); }
html body .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html body .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--cai-line); }

/* Numbers read as data: tabular figures in stat values */
html body h3.text-3xl,
html body .tabular { font-variant-numeric: tabular-nums; }

/* Visible, consistent keyboard focus everywhere */
html body :focus-visible {
  outline: 2px solid var(--cai-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Sidebar --------------------------------------------------------------- */

@media (min-width: 768px) {
  html body #sidebar { width: 16.5rem; }
}

html body #sidebar {
  background: var(--cai-side-bg);
  border-right: 1px solid var(--cai-side-line);
  min-height: 0;
}

html body #sidebar > .flex-1 { min-height: 0; }

/* Logo row */
html body #sidebar .h-20 {
  height: 5rem; /* matches the page header (h-20) so their borders line up */
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-color: var(--cai-side-line);
}
/* Logos come in any shape (wide wordmarks, stacked marks): give them a height
   budget and let width follow, never distorting the image. */
html body #sidebar .h-20 img {
  height: 2.5rem !important;
  width: auto !important;
  max-width: min(100%, 8.5rem);
  object-fit: contain;
  object-position: left center;
}

html body #sidebar-nav { padding: 0.75rem 0.75rem 1rem; }
html body #sidebar-nav > * + * { margin-top: 0; }

/* Section labels */
html body #sidebar-nav .uppercase {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #6A6A73;
  padding-left: 0.625rem;
  margin: 1.25rem 0 0.375rem;
}
html body #sidebar-nav .uppercase:first-child { margin-top: 0.25rem; }

/* Nav items */
html body #sidebar-nav a {
  gap: 0.625rem;
  padding: 0 0.625rem;
  min-height: 2.5rem;
  border-radius: var(--cai-r-control);
  color: var(--cai-side-text);
  font-weight: 500;
  transition: background-color 0.15s var(--cai-ease), color 0.15s var(--cai-ease);
}
html body #sidebar-nav a span { font-size: 1rem; font-weight: 500; }
html body #sidebar-nav a svg,
html body #sidebar-nav a i { width: 1.25rem; height: 1.25rem; color: #8B8B95; stroke-width: 1.75; }
html body #sidebar-nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--cai-side-text-hover); }
html body #sidebar-nav a:hover svg { color: var(--cai-lime); }

/* Active item: subtle fill, white label, lime icon (brand accent) */
html body #sidebar-nav a.bg-white\/10 {
  background: rgba(255, 255, 255, 0.09);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
html body #sidebar-nav a.bg-white\/10 svg,
html body #sidebar-nav a.bg-white\/10 i { color: var(--cai-lime); }

/* Profile + logout footer */
html body #sidebar > .shrink-0 {
  padding: 0.5rem 0.75rem 0.75rem;
  border-color: var(--cai-side-line);
}
html body #sidebar > .shrink-0 button {
  border-radius: var(--cai-r-control);
  padding: 0.375rem 0.5rem;
  margin-bottom: 0.125rem;
  gap: 0.625rem;
}
html body #sidebar > .shrink-0 img { width: 2rem; height: 2rem; border-width: 1px; }
html body #sidebar > .shrink-0 p { line-height: 1.2; }
html body #sidebar > .shrink-0 .text-white { font-size: 0.875rem; font-weight: 500; }
html body #sidebar > .shrink-0 .text-gray-500 { font-size: 0.75rem; color: #6A6A73; }
html body #sidebar > .shrink-0 button span { font-size: 0.875rem; }

/* Header ------------------------------------------------------------------ */

html body main > header {
  height: 5rem;
  flex-shrink: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--cai-line);
}
html body main > header h1 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.012em; }
html body main > header input[type='text'],
html body main > header input[type='search'] {
  height: 2.125rem;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--cai-canvas);
  border: 1px solid var(--cai-line);
  border-radius: var(--cai-r-control);
  font-size: 0.875rem;
}
html body main > header input:focus { background: #fff; border-color: var(--cai-accent); box-shadow: 0 0 0 3px var(--cai-accent-ring); }

/* Panels / cards ---------------------------------------------------------- */

html body .bg-white.rounded-xl,
html body .bg-white.rounded-2xl,
html body .bg-white.rounded-lg.border {
  border-color: var(--cai-line);
  border-radius: var(--cai-r-panel);
  box-shadow: var(--cai-shadow-1);
}
html body .shadow-sm { box-shadow: var(--cai-shadow-1); }
html body .shadow-lg, html body .shadow-xl { box-shadow: var(--cai-shadow-2); }
html body .hover\:shadow-md:hover { box-shadow: var(--cai-shadow-2); }

/* Tables */
html body table thead th,
html body table th {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cai-muted);
  background: var(--cai-surface-2);
  border-bottom: 1px solid var(--cai-line);
}
html body table tbody tr { transition: background-color 0.12s ease; }
html body table td { font-size: 0.875rem; }
html body table td.py-5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
html body table td.py-4 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
html body table td.px-6, html body table th.px-6 { padding-left: 1.25rem; padding-right: 1.25rem; }
html body table tbody tr:hover { background: var(--cai-surface-2); }

/* Buttons ------------------------------------------------------------------ */

html body button.bg-\[\#222222\],
html body a.bg-\[\#222222\] {
  background: var(--cai-ink);
  border-radius: var(--cai-r-control);
  box-shadow: var(--cai-shadow-1);
  font-size: 0.875rem;
  font-weight: 500;
}
html body button.bg-\[\#222222\]:hover,
html body a.bg-\[\#222222\]:hover { background: #2E2E33; }

html body button.bg-\[\#4B66E3\],
html body a.bg-\[\#4B66E3\] {
  border-radius: var(--cai-r-control);
  font-size: 0.875rem;
  font-weight: 500;
}
html body button.bg-\[\#4B66E3\]:hover,
html body a.bg-\[\#4B66E3\]:hover { background: var(--cai-accent-hover); }

html body button:not(:disabled):active,
html body a.rounded-lg:active { transform: translateY(0.5px) scale(0.99); }
html body button:disabled { cursor: not-allowed; }

/* Form controls --------------------------------------------------------- */

html body input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
html body select,
html body textarea {
  border-radius: var(--cai-r-control);
  font-size: 0.875rem;
  border-color: var(--cai-line-strong);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
html body input:not([type='checkbox']):not([type='radio']):focus,
html body select:focus,
html body textarea:focus {
  outline: none;
  border-color: var(--cai-accent);
  box-shadow: 0 0 0 3px var(--cai-accent-ring);
}
html body label { font-size: 0.875rem; }
html body label.font-medium, html body label.text-sm { color: var(--cai-ink-2); font-weight: 500; }

/* Tabs on detail pages */
html body .project-tab-button,
html body [id^='client-tab-'],
html body .client-tab-button {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Modals ------------------------------------------------------------------ */

html body .fixed.inset-0 .bg-white.rounded-2xl,
html body .fixed.inset-0 .bg-white.rounded-xl {
  border-radius: 14px;
  box-shadow: 0 24px 64px -16px rgba(24, 24, 27, 0.35);
  border: 1px solid var(--cai-line);
}
html body .fixed.inset-0.bg-black\/50,
html body .fixed.inset-0.bg-black\/40 {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Status colours: fewer, calmer tones */
html body .bg-emerald-50 { background-color: var(--cai-success-soft); }
html body .text-emerald-600, html body .text-emerald-700 { color: var(--cai-success); }
html body .bg-amber-50 { background-color: var(--cai-warning-soft); }
html body .text-amber-600, html body .text-amber-700 { color: var(--cai-warning); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Reusable components for new markup ------------------------------------ */

.cai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--cai-font); font-weight: 500; font-size: 0.875rem; line-height: 1.25rem;
  padding: 0.4375rem 0.875rem; border-radius: var(--cai-r-control);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s var(--cai-ease), border-color 0.15s, color 0.15s, transform 0.1s;
}
.cai-btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.99); }
.cai-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cai-btn-primary { background: var(--cai-ink); color: #fff; }
.cai-btn-primary:hover:not(:disabled) { background: #2E2E33; }
.cai-btn-accent { background: var(--cai-accent); color: #fff; }
.cai-btn-accent:hover:not(:disabled) { background: var(--cai-accent-hover); }
.cai-btn-secondary { background: var(--cai-surface); border-color: var(--cai-line-strong); color: var(--cai-ink); }
.cai-btn-secondary:hover:not(:disabled) { background: var(--cai-surface-2); }
.cai-btn-danger { background: var(--cai-danger); color: #fff; }
.cai-btn-ghost { background: transparent; color: var(--cai-muted); }
.cai-btn-ghost:hover:not(:disabled) { background: rgba(24, 24, 27, 0.05); color: var(--cai-ink); }

.cai-card {
  background: var(--cai-surface); border: 1px solid var(--cai-line);
  border-radius: var(--cai-r-panel); box-shadow: var(--cai-shadow-1);
}
.cai-card-hover { transition: box-shadow 0.2s var(--cai-ease), border-color 0.2s, transform 0.2s var(--cai-ease); }
.cai-card-hover:hover { box-shadow: var(--cai-shadow-2); border-color: var(--cai-line-strong); transform: translateY(-1px); }

.cai-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-weight: 500; font-size: 0.75rem; line-height: 1rem;
  padding: 0.125rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.cai-badge-success { background: var(--cai-success-soft); color: var(--cai-success); }
.cai-badge-warning { background: var(--cai-warning-soft); color: var(--cai-warning); }
.cai-badge-danger  { background: var(--cai-danger-soft);  color: var(--cai-danger); }
.cai-badge-info    { background: var(--cai-accent-soft);  color: var(--cai-accent-hover); }
.cai-badge-neutral { background: #F1F1F3; color: var(--cai-muted); }

.cai-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 1.5rem; color: var(--cai-muted); }
.cai-empty-state-title { font-weight: 600; color: var(--cai-ink); margin-bottom: 0.25rem; }
.cai-empty-state-body { font-size: 0.875rem; max-width: 34ch; }

.cai-skeleton {
  background: linear-gradient(90deg, #F1F1F3 25%, #E8E8EC 37%, #F1F1F3 63%);
  background-size: 400% 100%; animation: cai-shimmer 1.4s ease infinite; border-radius: 6px;
}
@keyframes cai-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.cai-focusable:focus-visible { outline: 2px solid var(--cai-accent); outline-offset: 2px; }

/* Pills inside tables and rows never wrap */
html body td .rounded-full,
html body td .rounded-md,
html body .project-tab-button { white-space: nowrap; }

html body #sidebar-user-avatar { object-fit: cover; flex-shrink: 0; }

/* Auth pages (login, signup, forgot/reset password) ----------------------
   Left: brand panel. Right: light form panel matching the app canvas. */

html body.auth-page { background: #fff; }
html body.auth-page > div.flex-1 {
  background: #fff !important;
  padding: 2rem 1.5rem;
}
html body.auth-page > div.flex-1 .max-w-md { max-width: 24rem; }
html body.auth-page > div.flex-1 h1 { color: var(--cai-ink); font-size: 1.625rem; line-height: 2rem; letter-spacing: -0.026em; font-weight: 600; }
html body.auth-page > div.flex-1 .text-white:not(button):not(a.bg-\[\#4B66E3\]) { color: var(--cai-ink); }
html body.auth-page > div.flex-1 .text-gray-400 { color: var(--cai-muted); }
html body.auth-page > div.flex-1 .text-gray-300 { color: var(--cai-ink-2); }
html body.auth-page > div.flex-1 .text-gray-500 { color: var(--cai-muted); }
html body.auth-page > div.flex-1 .text-gray-500:hover { color: var(--cai-ink); }

html body.auth-page .bg-\[\#2a2a2a\] { background: #fff; color: var(--cai-ink); }
html body.auth-page .border-gray-700 { border-color: var(--cai-line-strong); }
html body.auth-page input.px-4.py-3 { padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 0.875rem; }
html body.auth-page input::placeholder { color: var(--cai-faint); }
html body.auth-page select.bg-\[\#2a2a2a\] option { color: var(--cai-ink); }
html body.auth-page .text-\[\#4B66E3\] { color: var(--cai-accent-hover); }

html body.auth-page .bg-red-500\/20 { background: var(--cai-danger-soft); border-color: #F5C2C2; }
html body.auth-page .text-red-300, html body.auth-page .text-red-400 { color: var(--cai-danger); }
html body.auth-page .bg-green-500\/20 { background: var(--cai-success-soft); border-color: #BBE5CB; }
html body.auth-page .text-green-300, html body.auth-page .text-green-400 { color: var(--cai-success); }

html body.auth-page form button[type='submit'] {
  padding-top: 0.625rem; padding-bottom: 0.625rem;
  font-size: 0.875rem; border-radius: var(--cai-r-control);
}
html body.auth-page form button[type='submit']:disabled { opacity: 0.6; cursor: wait; }

/* Brand panel value points */
.auth-points { display: grid; gap: 1rem; margin-top: 2rem; max-width: 26rem; }
.auth-point { display: flex; gap: 0.75rem; align-items: flex-start; }
.auth-point-icon {
  flex: none; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255, 255, 255, 0.14); color: #fff;
}
.auth-point strong { display: block; font-weight: 600; font-size: 0.9375rem; color: #fff; }
.auth-point span { display: block; font-size: 0.875rem; line-height: 1.35rem; color: rgba(255, 255, 255, 0.78); }

/* Responsive polish ------------------------------------------------------ */

html body main button.rounded-lg,
html body main a.rounded-lg,
html body main button.rounded-xl { white-space: nowrap; }

html body div:has(> .project-tab-button) { overflow-x: auto; max-width: 100%; scrollbar-width: none; gap: 1.5rem; }

@media (max-width: 640px) {
  html body h1.text-4xl, html body h1.text-3xl, html body h1.text-5xl { font-size: 1.375rem; line-height: 1.75rem; }
  html body main > header { padding-left: 1rem; padding-right: 1rem; }
}

html body #sidebar > .shrink-0 a.client-nav-link {
  gap: 0.625rem; padding: 0 0.625rem; min-height: 2.125rem; border-radius: var(--cai-r-control);
  color: var(--cai-side-text); font-weight: 500;
}
html body #sidebar > .shrink-0 a.client-nav-link span { font-size: 1rem; font-weight: 500; }
html body #sidebar > .shrink-0 a.client-nav-link svg { width: 1.25rem; height: 1.25rem; color: #8B8B95; stroke-width: 1.75; }
html body #sidebar > .shrink-0 a.client-nav-link:hover { background: rgba(255,255,255,0.06); color: var(--cai-side-text-hover); }
html body #sidebar > .shrink-0 a.client-nav-link:hover svg { color: var(--cai-lime); }