/*
 * Zatto Lab Dark Theme - matching Dokploy UI
 * Based on forgejo-dark with Dokploy color palette
 */

:root {
  --color-primary: #3b82f6;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #60a5fa;
  --color-primary-dark-2: #60a5fa;
  --color-primary-dark-3: #93bbfd;
  --color-primary-dark-4: #93bbfd;
  --color-primary-dark-5: #bfdbfe;
  --color-primary-dark-6: #bfdbfe;
  --color-primary-dark-7: #dbeafe;
  --color-primary-light-1: #2563eb;
  --color-primary-light-2: #1d4ed8;
  --color-primary-light-3: #1e40af;
  --color-primary-light-4: #1e3a8a;
  --color-primary-light-5: #1e3a8a;
  --color-primary-light-6: #172554;
  --color-primary-light-7: #172554;
  --color-primary-alpha-10: #3b82f619;
  --color-primary-alpha-20: #3b82f633;
  --color-primary-alpha-30: #3b82f64b;
  --color-primary-alpha-40: #3b82f666;
  --color-primary-alpha-50: #3b82f680;
  --color-primary-alpha-60: #3b82f699;
  --color-primary-alpha-70: #3b82f6b3;
  --color-primary-alpha-80: #3b82f6cc;
  --color-primary-alpha-90: #3b82f6e1;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-light-2);

  --is-dark-theme: true;

  /* Body & backgrounds - pure black like Dokploy */
  --color-body: #000000;
  --color-box-header: #18181b;
  --color-box-body: #0a0a0c;
  --color-box-body-highlight: #1a1a1f;

  /* Text */
  --color-text-dark: #fafafa;
  --color-text: #e4e4e7;
  --color-text-light: #d4d4d8;
  --color-text-light-1: #a1a1aa;
  --color-text-light-2: #a1a1aa;
  --color-text-light-3: #71717a;

  /* Navigation & header */
  --color-nav-bg: #09090b;
  --color-nav-hover-bg: #18181b;
  --color-nav-text: #fafafa;
  --color-header-wrapper: #09090b;
  --color-header-wrapper-transparent: #09090b00;
  --color-footer: #000000;

  /* Cards & menus */
  --color-card: #0a0a0c;
  --color-menu: #18181b;
  --color-secondary-bg: #0a0a0c;

  /* Inputs */
  --color-input-text: #e4e4e7;
  --color-input-background: #18181b;
  --color-input-toggle-background: #18181b;
  --color-input-border: #27272a;
  --color-input-border-hover: #3f3f46;

  /* Borders & lines */
  --color-timeline: #27272a;
  --color-light-border: #ffffff14;
  --color-hover: #18181b;
  --color-active: #27272a;

  /* Buttons */
  --color-button: #18181b;

  /* Code */
  --color-code-bg: #0a0a0c;
  --color-markup-code-block: #09090b;
  --color-markup-code-inline: #18181b;
  --color-markup-table-row: #ffffff06;

  /* Secondary colors - zinc-like from Dokploy */
  --color-secondary: #27272a;
  --color-secondary-dark-1: #3f3f46;
  --color-secondary-dark-2: #52525b;
  --color-secondary-dark-3: #71717a;
  --color-secondary-dark-4: #a1a1aa;
  --color-secondary-light-1: #27272a;
  --color-secondary-light-2: #18181b;
  --color-secondary-light-3: #09090b;
  --color-secondary-light-4: #000000;
  --color-secondary-alpha-10: #27272a19;
  --color-secondary-alpha-20: #27272a33;
  --color-secondary-alpha-30: #27272a4b;
  --color-secondary-alpha-40: #27272a66;
  --color-secondary-alpha-50: #27272a80;
  --color-secondary-hover: var(--color-secondary-dark-1);
  --color-secondary-active: var(--color-secondary-dark-2);

  /* Labels */
  --color-label-text: #fafafa;
  --color-label-bg: #27272a;
  --color-label-hover-bg: #3f3f46;
  --color-label-active-bg: #52525b;
  --color-label-bg-alt: #3f3f46;

  /* Accent - blue like Dokploy sidebar ring */
  --color-accent: var(--color-primary);
  --color-small-accent: var(--color-primary-light-4);
  --color-highlight-fg: var(--color-primary-light-3);
  --color-highlight-bg: var(--color-primary-alpha-20);

  /* Misc */
  --color-shadow: #00000080;
  --color-text-focus: #ffffff;
  --color-expand-button: #27272a;
  --color-placeholder-text: #71717a;
  --color-editor-line-highlight: #18181b;
  --color-project-board-bg: #09090b;
  --color-caret: var(--color-text);
  --color-overlay-backdrop: #000000d0;

  /* Reactions */
  --color-reaction-bg: #ffffff0a;
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg: var(--color-primary-alpha-40);

  /* Tooltips */
  --color-tooltip-text: #ffffff;
  --color-tooltip-bg: #18181bf0;

  /* Diff */
  --color-diff-removed-word-bg: #783030;
  --color-diff-added-word-bg: #1e4620;
  --color-diff-removed-row-bg: #3b1818;
  --color-diff-moved-row-bg: #825718;
  --color-diff-added-row-bg: #132b17;
  --color-diff-removed-row-border: #783030;
  --color-diff-moved-row-border: #a67a1d;
  --color-diff-added-row-border: #1e4620;
  --color-diff-inactive: #27272a;

  /* Status colors */
  --color-error-border: #783030;
  --color-error-bg: #3b1818;
  --color-error-text: #fef2f2;
  --color-success-border: #1e4620;
  --color-success-bg: #132b17;
  --color-success-text: #aef0c2;
  --color-warning-border: #a67a1d;
  --color-warning-bg: #3b2e0c;
  --color-warning-text: #fff388;
  --color-info-border: #1e40af;
  --color-info-bg: #172554;
  --color-info-text: #dbeafe;

  /* Console */
  --color-console-fg: #e4e4e7;
  --color-console-fg-subtle: #71717a;
  --color-console-bg: #09090b;
  --color-console-border: #27272a;
  --color-console-hover-bg: #ffffff0a;
  --color-console-active-bg: #27272a;
  --color-console-menu-bg: #18181b;
  --color-console-menu-border: #3f3f46;

  /* Checkerboard */
  --checkerboard-color-1: #27272a;
  --checkerboard-color-2: #18181b;

  accent-color: var(--color-accent);
  color-scheme: dark;
}

/* Selection highlight with blue accent */
::selection {
  background: #3b82f660 !important;
  color: #ffffff !important;
}

/* Primary buttons */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: #2563eb !important;
}

/* Notification badges */
.ui.red.label.notification_count,
.ui.primary.label,
.ui.primary.labels .label {
  background-color: #1e40af !important;
}

/* Basic primary label */
.ui.basic.labels .primary.label,
.ui.ui.ui.basic.primary.label {
  color: #fafafa !important;
}

/* Link colors */
a {
  color: #60a5fa;
}
a:hover {
  color: #93c5fd;
}

/* Pending label */
.ui.basic.yellow.label.pending-label {
  background: #3b2e0c !important;
}