/* Tailwind Base — light, slate neutrals, indigo accent, Inter everywhere. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Facebook-inspired palette (shared with global.css / automation.css) */
  --cr-primary: #1C1E21;        /* primary text */
  --cr-secondary: #65676B;      /* secondary text / captions */
  --cr-muted: #8A8D91;          /* muted text */
  --cr-tertiary: #1877F2;       /* Facebook blue — accent */
  --cr-tertiary-hover: #166FE5;
  --cr-neutral: #F0F2F5;        /* page background */
  --cr-surface: #FFFFFF;        /* cards */
  --cr-surface-2: #F5F6F7;      /* alt / hover surface */
  --cr-border: #DADDE1;
  --cr-border-strong: #C4C9CF;
  --cr-success: #31A24C;
  --cr-warning: #F7B928;
  --cr-danger: #E41E3F;
  --cr-accent-bg: #E7F0FE;
  --cr-accent-fg: #1877F2;

  --cr-success-bg: #E7F6EC; --cr-success-fg: #1E7A38; --cr-success-bd: #B7E3C4;
  --cr-danger-bg:  #FDE7EA; --cr-danger-fg:  #C31D33; --cr-danger-bd:  #F5C2C9;
  --cr-warning-bg: #FEF4E0; --cr-warning-fg: #8A5A00; --cr-warning-bd: #F7DFA6;

  --cr-radius-sm: 8px;
  --cr-radius-md: 12px;
  --cr-radius-lg: 16px;

  --cr-space-sm: 8px;
  --cr-space-md: 16px;
  --cr-space-lg: 32px;
  --cr-space-xl: 48px;

  --cr-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --cr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);

  --cr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cr-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
  --cr-primary: #E4E6EB;
  --cr-secondary: #B0B3B8;
  --cr-muted: #8A8D91;
  --cr-tertiary: #2D88FF;
  --cr-tertiary-hover: #4599FF;
  --cr-neutral: #18191A;
  --cr-surface: #242526;
  --cr-surface-2: #3A3B3C;
  --cr-border: #3A3B3C;
  --cr-border-strong: #4E4F50;
  --cr-success: #45BD62;
  --cr-warning: #F7B928;
  --cr-danger: #FF5C6C;
  --cr-accent-bg: #263A57;
  --cr-accent-fg: #4599FF;

  --cr-success-bg: #1E3126; --cr-success-fg: #6FD08C; --cr-success-bd: #2C5138;
  --cr-danger-bg:  #3A2226; --cr-danger-fg:  #FF8A97; --cr-danger-bd:  #5C2E34;
  --cr-warning-bg: #372E1A; --cr-warning-fg: #F0C574; --cr-warning-bd: #574719;

  --cr-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body.cafe-racer {
  margin: 0;
  background: var(--cr-neutral);
  color: var(--cr-primary);
  font-family: var(--cr-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.cafe-racer a { color: var(--cr-tertiary); text-decoration: none; }
.cafe-racer a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cr-display { font-family: var(--cr-font-display); font-size: 3.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--cr-primary); }
.cr-h1 { font-family: var(--cr-font-display); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--cr-space-md) 0; }
.cr-h2 { font-family: var(--cr-font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--cr-space-md) 0; }
.cr-h3 { font-family: var(--cr-font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 var(--cr-space-sm) 0; }
.cr-label { font-family: var(--cr-font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cr-secondary); }
.cr-mono { font-family: ui-monospace, 'SF Mono', Monaco, Menlo, monospace; font-size: 0.85rem; }

/* Layout */
.cr-shell { display: flex; min-height: 100vh; }
.cr-sidebar {
  width: 240px;
  background: var(--cr-surface);
  border-right: 1px solid var(--cr-border);
  padding: var(--cr-space-lg) var(--cr-space-md);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--cr-space-lg);
}
.cr-brand {
  font-family: var(--cr-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cr-primary);
  display: flex; align-items: center; gap: var(--cr-space-sm);
}
.cr-brand::before {
  content: ''; width: 10px; height: 10px; background: var(--cr-tertiary); border-radius: var(--cr-radius-sm); display: inline-block;
}
.cr-nav { display: flex; flex-direction: column; gap: 2px; }
.cr-nav a {
  display: block; padding: 10px 12px;
  color: var(--cr-secondary);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--cr-radius-md);
}
.cr-nav a:hover { color: var(--cr-primary); background: var(--cr-neutral); }
.cr-nav a.active { color: var(--cr-accent-fg); background: var(--cr-accent-bg); }

.cr-main { flex: 1; padding: var(--cr-space-lg) var(--cr-space-xl); max-width: 1200px; margin: 0 auto; width: 100%; }

/* Card */
.cr-card {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-lg);
  padding: 24px;
  box-shadow: var(--cr-shadow);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cr-card:hover { box-shadow: var(--cr-shadow-md); }
.cr-card + .cr-card { margin-top: var(--cr-space-md); }

.cr-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--cr-space-md);
  padding-bottom: var(--cr-space-md);
  border-bottom: 1px solid var(--cr-border);
}

/* Buttons */
.cr-btn {
  font-family: var(--cr-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--cr-radius-md);
  border: 1px solid var(--cr-border-strong);
  background: var(--cr-surface);
  color: var(--cr-primary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--cr-space-sm);
}
.cr-btn:hover { background: var(--cr-neutral); border-color: var(--cr-secondary); }
.cr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cr-btn.primary { background: var(--cr-tertiary); border-color: var(--cr-tertiary); color: #FFFFFF; }
.cr-btn.primary:hover { background: var(--cr-tertiary-hover); border-color: var(--cr-tertiary-hover); }
.cr-btn.ghost { border-color: transparent; background: transparent; color: var(--cr-secondary); }
.cr-btn.ghost:hover { background: var(--cr-neutral); color: var(--cr-primary); border-color: var(--cr-border); }
.cr-btn.danger { background: var(--cr-surface); border-color: var(--cr-danger); color: var(--cr-danger); }
.cr-btn.danger:hover { background: var(--cr-danger); color: #FFFFFF; }
.cr-btn.small { padding: 6px 10px; font-size: 0.82rem; }

/* Inputs */
.cr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--cr-space-md); }
.cr-field label { font-family: var(--cr-font-body); font-size: 0.8rem; font-weight: 500; color: var(--cr-primary); }
.cr-field input,
.cr-field select,
.cr-field textarea {
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  color: var(--cr-primary);
  padding: 10px 12px;
  font-family: var(--cr-font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cr-field input:focus,
.cr-field select:focus,
.cr-field textarea:focus { border-color: var(--cr-tertiary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-tertiary) 20%, transparent); }
.cr-field input::placeholder,
.cr-field textarea::placeholder { color: var(--cr-muted); }
.cr-field .hint { font-size: 0.82rem; color: var(--cr-secondary); }
.cr-field.error input,
.cr-field.error select { border-color: var(--cr-danger); }
.cr-row { display: grid; gap: var(--cr-space-md); }
.cr-row.two { grid-template-columns: 1fr 1fr; }
.cr-row.three { grid-template-columns: 1fr 1fr 1fr; }

/* Badge / pill */
.cr-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--cr-border);
  background: var(--cr-neutral);
  color: var(--cr-secondary);
}
.cr-badge.active { color: var(--cr-success-fg); border-color: var(--cr-success-bd); background: var(--cr-success-bg); }
.cr-badge.warn { color: var(--cr-warning-fg); border-color: var(--cr-warning-bd); background: var(--cr-warning-bg); }
.cr-badge.err { color: var(--cr-danger-fg); border-color: var(--cr-danger-bd); background: var(--cr-danger-bg); }
.cr-badge.accent { color: var(--cr-accent-fg); border-color: var(--cr-accent-bg); background: var(--cr-accent-bg); }

/* Alert / warnings */
.cr-alert {
  border-left: 3px solid var(--cr-border-strong);
  background: var(--cr-surface-2);
  padding: 12px 16px;
  margin-bottom: var(--cr-space-md);
  border-radius: var(--cr-radius-md);
  color: var(--cr-primary);
  font-size: 0.92rem;
}
.cr-alert.ok { border-left-color: var(--cr-success); background: var(--cr-success-bg); }
.cr-alert.warn { border-left-color: var(--cr-warning); background: var(--cr-warning-bg); }
.cr-alert.err { border-left-color: var(--cr-danger); background: var(--cr-danger-bg); }
.cr-alert .title { font-weight: 600; display: block; margin-bottom: 4px; color: var(--cr-primary); }

/* Focused task-page top bar (wizard / onboarding) — a back arrow + brand,
   instead of the full dashboard sidebar, so these read as a single screen. */
.wiz-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: var(--cr-surface);
  border-bottom: 1px solid var(--cr-border);
}
.wiz-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px;
  border-radius: var(--cr-radius-md);
  border: 1px solid var(--cr-border);
  background: var(--cr-surface);
  color: var(--cr-primary);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.wiz-back:hover { background: var(--cr-surface-2); border-color: var(--cr-border-strong); text-decoration: none; }
.wiz-back svg { width: 18px; height: 18px; }
.wiz-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wiz-brand-icon {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
  background: var(--cr-tertiary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.wiz-brand-icon svg { width: 18px; height: 18px; }
.wiz-brand-title { font-size: 0.95rem; font-weight: 700; color: var(--cr-primary); white-space: nowrap; }
.wiz-main { max-width: 1000px; margin: 0 auto; width: 100%; padding: 28px 20px 48px; }
@media (max-width: 600px) {
  .wiz-brand-title { display: none; }
  .wiz-main { padding: 20px 14px 40px; }
}

/* Stepper */
.cr-stepper {
  display: flex; gap: 0;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  background: var(--cr-surface);
  margin-bottom: var(--cr-space-lg);
  overflow-x: auto;      /* scroll on very narrow widths instead of truncating */
  overflow-y: hidden;
}
.cr-stepper .step {
  flex: 1 0 auto;        /* grow to fill, never shrink labels into an ellipsis */
  min-width: max-content;
  padding: 12px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cr-secondary);
  border-right: 1px solid var(--cr-border);
  position: relative;
  white-space: nowrap;
  text-align: center;
}
.cr-stepper .step:last-child { border-right: 0; }
.cr-stepper .step.active { color: var(--cr-primary); background: var(--cr-surface-2); }
.cr-stepper .step.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cr-tertiary);
}
.cr-stepper .step.done { color: var(--cr-primary); }
.cr-stepper .step .n { color: var(--cr-secondary); margin-right: 6px; font-weight: 600; }
.cr-stepper .step.active .n,
.cr-stepper .step.done .n { color: var(--cr-tertiary); }

/* Table */
.cr-table { width: 100%; border-collapse: collapse; }
.cr-table th, .cr-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--cr-border); }
.cr-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--cr-secondary); font-weight: 600; }

/* Utility */
.cr-stack { display: flex; flex-direction: column; gap: var(--cr-space-md); }
.cr-inline { display: flex; gap: var(--cr-space-sm); align-items: center; flex-wrap: wrap; }
.cr-inline.between { justify-content: space-between; }
.cr-divider { height: 1px; background: var(--cr-border); margin: var(--cr-space-md) 0; }
.cr-muted { color: var(--cr-secondary); }
.cr-copy { font-family: ui-monospace, monospace; background: var(--cr-surface-2); border: 1px solid var(--cr-border); padding: 10px 12px; border-radius: var(--cr-radius-md); word-break: break-all; font-size: 0.85rem; }
.cr-copy-row { display: flex; gap: var(--cr-space-sm); align-items: stretch; }
.cr-copy-row .cr-copy { flex: 1; }

.cr-page-title {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--cr-space-lg);
  padding-bottom: var(--cr-space-md);
  border-bottom: 1px solid var(--cr-border);
}
.cr-page-title .cr-h1 { margin-bottom: 4px; }
.cr-page-title .sub { color: var(--cr-secondary); font-size: 0.92rem; }

.cr-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--cr-space-sm); }
.cr-perm-grid .perm { border: 1px solid var(--cr-border); padding: 10px 12px; font-size: 0.85rem; background: var(--cr-surface); border-radius: var(--cr-radius-md); }
.cr-perm-grid .perm.granted { border-left: 3px solid var(--cr-success); }
.cr-perm-grid .perm.missing { border-left: 3px solid var(--cr-warning); color: var(--cr-warning-fg); }

.cr-checkbox { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--cr-border); background: var(--cr-surface); border-radius: var(--cr-radius-md); margin-bottom: 6px; }
.cr-checkbox input { accent-color: var(--cr-tertiary); }
.cr-checkbox .meta { color: var(--cr-secondary); font-size: 0.82rem; margin-left: auto; }

.cr-profile-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cr-space-md);
  padding: var(--cr-space-md);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-md);
  background: var(--cr-surface);
  margin-bottom: var(--cr-space-sm);
}
.cr-profile-item .meta { display: flex; flex-direction: column; gap: 4px; }
.cr-profile-item .meta .name { font-weight: 600; font-size: 1rem; }
.cr-profile-item .meta .sub { color: var(--cr-secondary); font-size: 0.82rem; }

/* Responsive */
@media (max-width: 720px) {
  .cr-shell { flex-direction: column; }
  .cr-sidebar { width: 100%; height: auto; position: relative; border-right: 0; border-bottom: 1px solid var(--cr-border); }
  .cr-main { padding: var(--cr-space-md); }
  .cr-row.two, .cr-row.three { grid-template-columns: 1fr; }
}