/*
  Shared theme for the combined app (WhatsApp, Mail, Kalender, Aufgaben, KI).
  Colours and font follow cal.com's app UI (coss-ui / shadcn-style tokens, values taken from
  cal.com's open-source theme): grayscale, dark by default, colour only as small accents.

  - Use the shadcn-style tokens below (--background, --card, --foreground, --muted-foreground, …).
  - Each area sets its accent with data-module="chat|mail|calendar|tasks|ai|sets" on its root element;
    inside, use var(--mod) for the accent and var(--mod-soft) for a faint tint.
  - Font: Cal Sans (variable, OFL), bundled in /fonts.
*/

@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/CalSansVF.woff2') format('woff2');
}

:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --background: #0f0f0f;
  --sidebar: #0f0f0f;
  --panel: #131313;
  --card: #171717;
  --card-header: #1b1b1b;
  --popover: #1c1c1c;
  --foreground: #fafafa;
  --text: #d4d4d4;
  --muted-foreground: #a3a3a3;
  --faint: #737373;
  --subtle: #262626;
  --emphasis: #404040;
  --hover: rgba(255, 255, 255, 0.04);
  --border: #262626;
  --border-strong: #3a3a3a;
  --input: #2e2e2e;
  --primary: #f5f5f5;
  --primary-foreground: #0f0f0f;
  --primary-hover: #d4d4d4;
  --ring: rgba(255, 255, 255, 0.22);
  --destructive: #f87171;
  --destructive-bg: rgba(248, 113, 113, 0.1);
  --warning: #fb923c;
  --warning-bg: rgba(251, 146, 60, 0.1);
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

  --mod-chat: #34d399;
  --mod-mail: #60a5fa;
  --mod-calendar: #fb923c;
  --mod-tasks: #facc15;
  --mod-ai: #22d3ee;
  --mod-sets: #fb7185;
  --mod-neutral: #d4d4d4;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --background: #f6f7f9;
    --sidebar: #f6f7f9;
    --panel: #ffffff;
    --card: #ffffff;
    --card-header: #f6f8fa;
    --popover: #ffffff;
    --foreground: #070a0d;
    --text: #3c3f45;
    --muted-foreground: #6b7280;
    --faint: #9ca3af;
    --subtle: #eceef1;
    --emphasis: #e5e7eb;
    --hover: rgba(0, 0, 0, 0.035);
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --input: #d1d5db;
    --primary: #1c2836;
    --primary-foreground: #ffffff;
    --primary-hover: #374151;
    --ring: rgba(28, 40, 54, 0.25);
    --destructive: #dc2626;
    --destructive-bg: #fef2f2;
    --warning: #c2410c;
    --warning-bg: #fff7ed;
    --success: #047857;
    --success-bg: #ecfdf5;
    --shadow: 0 12px 32px rgba(15, 23, 42, 0.12);

    --mod-chat: #059669;
    --mod-mail: #2563eb;
    --mod-calendar: #ea580c;
    --mod-tasks: #ca8a04;
    --mod-ai: #0891b2;
    --mod-sets: #e11d48;
    --mod-neutral: #3c3f45;
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --background: #f6f7f9;
  --sidebar: #f6f7f9;
  --panel: #ffffff;
  --card: #ffffff;
  --card-header: #f6f8fa;
  --popover: #ffffff;
  --foreground: #070a0d;
  --text: #3c3f45;
  --muted-foreground: #6b7280;
  --faint: #9ca3af;
  --subtle: #eceef1;
  --emphasis: #e5e7eb;
  --hover: rgba(0, 0, 0, 0.035);
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --input: #d1d5db;
  --primary: #1c2836;
  --primary-foreground: #ffffff;
  --primary-hover: #374151;
  --ring: rgba(28, 40, 54, 0.25);
  --destructive: #dc2626;
  --destructive-bg: #fef2f2;
  --warning: #c2410c;
  --warning-bg: #fff7ed;
  --success: #047857;
  --success-bg: #ecfdf5;
  --shadow: 0 12px 32px rgba(15, 23, 42, 0.12);

  --mod-chat: #059669;
  --mod-mail: #2563eb;
  --mod-calendar: #ea580c;
  --mod-tasks: #ca8a04;
  --mod-ai: #0891b2;
  --mod-sets: #e11d48;
  --mod-neutral: #3c3f45;
}

/* Accent of the area currently shown. */
:root,
[data-module] {
  --mod: var(--mod-neutral);
}
[data-module='chat'] {
  --mod: var(--mod-chat);
}
[data-module='mail'] {
  --mod: var(--mod-mail);
}
[data-module='calendar'] {
  --mod: var(--mod-calendar);
}
[data-module='tasks'] {
  --mod: var(--mod-tasks);
}
[data-module='ai'] {
  --mod: var(--mod-ai);
}
[data-module='sets'] {
  --mod: var(--mod-sets);
}
:root,
[data-module] {
  --mod-soft: color-mix(in srgb, var(--mod) 12%, transparent);
  --mod-line: color-mix(in srgb, var(--mod) 45%, transparent);
}

/* ---------- base ---------- */

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-optical-sizing: auto;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  background: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.015em;
}
h1 {
  font-size: 20px;
}
h2 {
  font-size: 17px;
}
h3 {
  font-size: 14.5px;
}
p {
  margin: 0;
}
::selection {
  background: color-mix(in srgb, var(--mod, #fff) 30%, transparent);
}

/* ---------- primitives (shadcn-style) ---------- */

button {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 12px;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}
.btn {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--foreground);
}
.btn:hover:not(:disabled) {
  background: var(--subtle);
}
.btn-quiet {
  color: var(--muted-foreground);
}
.btn-quiet:hover:not(:disabled) {
  background: var(--hover);
  color: var(--foreground);
}
.link {
  padding: 0;
  border: 0;
  color: var(--foreground);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.link:hover {
  text-decoration-color: currentColor;
}
.icon-btn {
  padding: 4px;
  border-radius: 6px;
  color: var(--muted-foreground);
}
.icon-btn:hover {
  color: var(--foreground);
  background: var(--hover);
}
select,
input,
textarea {
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--foreground);
}
input::placeholder,
textarea::placeholder {
  color: var(--faint);
}
textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.5;
}
select:focus,
input:focus,
textarea:focus,
button:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 0;
  border-color: var(--border-strong);
}

/* Segmented tabs like "Bevorstehende | Unbestätigt | …" */
.segmented {
  display: inline-flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
}
.segmented button {
  padding: 5px 12px;
  border-radius: 7px;
  color: var(--muted-foreground);
}
.segmented button:hover {
  color: var(--foreground);
}
.segmented button.on {
  background: var(--subtle);
  color: var(--foreground);
  font-weight: 500;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-foreground);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--subtle);
  color: var(--text);
}
.badge.accent {
  background: var(--mod-soft);
  color: var(--mod);
}