/* ==========================================================================
   POWERHIVE THEME FOR TWENTY CRM — High-Impact Design System Edition
   Based on Powerhive Identity Guide (v03, July 2026) & Twenty UI Token Spec
   ========================================================================== */

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

/* --- Light Mode (Default) --- */
:root,
[data-theme="light"],
.light-theme {
  /* Typography */
  --t-font-family: 'Colfax', 'Söhne', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --t-code-font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Powerhive Identity Brand Anchors */
  --powerhive-amber: #FFB800;        /* Primary CTA & energy spark */
  --powerhive-amber-hover: #FFC940;  /* Hover state */
  --powerhive-amber-pressed: #E5A300;/* Active / pressed state */
  --powerhive-navy: #264860;         /* Deep Navy ink & dark canvas */
  --powerhive-navy-hover: #355B75;
  --powerhive-navy-dark: #152E40;
  --powerhive-cyan: #0095BE;         /* Connective brand blue & links */
  --powerhive-cyan-hover: #17A6CD;
  --powerhive-blue: #02659C;         /* Corporate Blue */
  --powerhive-lime: #D2D946;         /* Secondary highlight */
  --powerhive-grey: #666666;

  /* Font Colors (Deep Navy ink system) */
  --t-font-color-primary: #264860;
  --t-font-color-secondary: #5B6B75;
  --t-font-color-tertiary: #8A98A0;
  --t-font-color-extra-light: #BAC9D3;
  --t-font-color-inverted: #FFFFFF;
  --t-font-color-danger: #E0564A;

  /* Backgrounds */
  --t-background-primary: #FFFFFF;
  --t-background-secondary: #FFFFFF;
  --t-background-tertiary: #F5F7F8;
  --t-background-quaternary: #E9EEF1;
  --t-background-inverted-primary: #264860;
  --t-background-inverted-secondary: #355B75;
  --t-background-danger: #FDF2F1;
  --t-background-transparent-blue: rgba(0, 149, 190, 0.12);
  --t-background-transparent-orange: rgba(255, 184, 0, 0.18);
  --t-background-transparent-success: rgba(28, 157, 107, 0.14);
  --t-background-transparent-danger: rgba(224, 86, 74, 0.14);
  --t-background-transparent-light: rgba(38, 72, 96, 0.05);
  --t-background-transparent-medium: rgba(38, 72, 96, 0.09);
  --t-background-transparent-strong: rgba(38, 72, 96, 0.16);

  /* Borders & Radii */
  --t-border-color-light: #E3E8EA;
  --t-border-color-medium: #D2DADD;
  --t-border-color-strong: #8A98A0;
  --t-border-color-blue: #0095BE;
  --t-border-color-danger: #E0564A;
  --t-border-color-inverted: #264860;
  --t-border-radius-xs: 2px;
  --t-border-radius-sm: 4px;
  --t-border-radius-md: 8px;
  --t-border-radius-lg: 12px;
  --t-border-radius-xl: 16px;
  --t-border-radius-xxl: 24px;
  --t-border-radius-pill: 999px;

  /* Accents (Amber Action CTA + Cyan Links) */
  --t-accent-primary: #FFB800;
  --t-accent-secondary: #E5A300;
  --t-accent-tertiary: #FFF8E0;
  --t-accent-quaternary: #FFFDF5;
  --t-accent-accent1: #FFFDF5;
  --t-accent-accent2: #FFF8E0;
  --t-accent-accent3: #FEEAB0;
  --t-accent-accent4: #FFE082;
  --t-accent-accent5: #FFD45E;
  --t-accent-accent6: #FFC940;
  --t-accent-accent7: #FFC020;
  --t-accent-accent8: #FFB800;
  --t-accent-accent9: #FFB800;
  --t-accent-accent10: #E5A300;
  --t-accent-accent11: #996A00;
  --t-accent-accent12: #3A2600;

  /* Color Palettes */
  --t-color-amber: #FFB800;
  --t-color-amber1: #FFFDF5;
  --t-color-amber2: #FFF8E0;
  --t-color-amber3: #FEEAB0;
  --t-color-amber4: #FFE082;
  --t-color-amber5: #FFD45E;
  --t-color-amber6: #FFC940;
  --t-color-amber7: #FFC020;
  --t-color-amber8: #FFB800;
  --t-color-amber9: #FFB800;
  --t-color-amber10: #E5A300;
  --t-color-amber11: #996A00;
  --t-color-amber12: #3A2600;

  --t-color-blue: #0095BE;
  --t-color-blue1: #F0F8FA;
  --t-color-blue2: #E1F2F6;
  --t-color-blue3: #BEE5EE;
  --t-color-blue4: #8CD4E4;
  --t-color-blue5: #52BFD7;
  --t-color-blue6: #24ACCC;
  --t-color-blue7: #0CA0C4;
  --t-color-blue8: #0095BE;
  --t-color-blue9: #0095BE;
  --t-color-blue10: #00789F;
  --t-color-blue11: #02659C;
  --t-color-blue12: #152E40;

  --t-color-cyan: #0095BE;
  --t-color-lime: #D2D946;
  --t-color-gray: #666666;

  /* GrayScale Palette (mapped to Navy Neutrals) */
  --t-gray-scale-gray1: #FFFFFF;
  --t-gray-scale-gray2: #F9FBFC;
  --t-gray-scale-gray3: #F5F7F8;
  --t-gray-scale-gray4: #E9EEF1;
  --t-gray-scale-gray5: #E3E8EA;
  --t-gray-scale-gray6: #D2DADD;
  --t-gray-scale-gray7: #BAC9D3;
  --t-gray-scale-gray8: #8A98A0;
  --t-gray-scale-gray9: #5B6B75;
  --t-gray-scale-gray10: #355B75;
  --t-gray-scale-gray11: #264860;
  --t-gray-scale-gray12: #152E40;

  /* Buttons */
  --t-buttons-secondary-text-color: #264860;

  /* Snackbars */
  --t-snack-bar-default-background-color: #264860;
  --t-snack-bar-default-color: #FFFFFF;
  --t-snack-bar-success-background-color: rgba(28, 157, 107, 0.18);
  --t-snack-bar-success-color: #117A51;
  --t-snack-bar-warning-background-color: rgba(229, 163, 0, 0.18);
  --t-snack-bar-warning-color: #9A6500;
  --t-snack-bar-error-background-color: rgba(224, 86, 74, 0.18);
  --t-snack-bar-error-color: #B23A30;
  --t-snack-bar-info-background-color: rgba(0, 149, 190, 0.18);
  --t-snack-bar-info-color: #066B89;

  /* Tags & Badges */
  --t-tag-background-amber: #FFF8E0;
  --t-tag-text-amber: #9A6500;
  --t-tag-background-blue: #E1F2F6;
  --t-tag-text-blue: #00789F;
  --t-tag-background-cyan: #E1F2F6;
  --t-tag-text-cyan: #066B89;
  --t-tag-background-green: rgba(28, 157, 107, 0.16);
  --t-tag-text-green: #117A51;
  --t-tag-background-lime: #F6F8D4;
  --t-tag-text-lime: #6B7010;
  --t-tag-background-red: rgba(224, 86, 74, 0.16);
  --t-tag-text-red: #B23A30;
  --t-tag-background-gray: #E9EEF1;
  --t-tag-text-gray: #5B6B75;
}

/* --- Dark Mode --- */
[data-theme="dark"],
.dark-theme {
  --t-font-color-primary: #FFFFFF;
  --t-font-color-secondary: #BAC9D3;
  --t-font-color-tertiary: #8A98A0;
  --t-font-color-extra-light: #5C7B91;
  --t-font-color-inverted: #264860;
  --t-font-color-danger: #FF6B5E;

  --t-background-primary: #152E40;
  --t-background-secondary: #1B384D;
  --t-background-tertiary: #264860;
  --t-background-quaternary: #355B75;
  --t-background-inverted-primary: #FFFFFF;
  --t-background-inverted-secondary: #E9EEF1;
  --t-background-danger: rgba(224, 86, 74, 0.25);
  --t-background-transparent-blue: rgba(0, 149, 190, 0.25);
  --t-background-transparent-orange: rgba(255, 184, 0, 0.25);
  --t-background-transparent-success: rgba(28, 157, 107, 0.25);
  --t-background-transparent-danger: rgba(224, 86, 74, 0.25);
  --t-background-transparent-light: rgba(255, 255, 255, 0.08);
  --t-background-transparent-medium: rgba(255, 255, 255, 0.12);
  --t-background-transparent-strong: rgba(255, 255, 255, 0.18);

  --t-border-color-light: #264860;
  --t-border-color-medium: #355B75;
  --t-border-color-strong: #5C7B91;
  --t-border-color-blue: #0095BE;
  --t-border-color-danger: #E0564A;
  --t-border-color-inverted: #FFFFFF;

  --t-accent-primary: #FFB800;
  --t-accent-secondary: #FFC940;
  --t-accent-tertiary: #355B75;
  --t-accent-quaternary: #264860;

  --t-color-amber: #FFB800;
  --t-color-blue: #0095BE;
  --t-color-cyan: #0095BE;
  --t-color-lime: #D2D946;
  --t-color-gray: #8A98A0;

  --t-buttons-secondary-text-color: #FFFFFF;
}

/* ==========================================================================
   DIRECT COMPONENT & BRAND ENHANCEMENTS
   ========================================================================== */

/* 1. Global Typography & Ink */
body, #root {
  font-family: var(--t-font-family) !important;
  color: var(--t-font-color-primary) !important;
}

/* Monospace numerics in tables & metrics */
table td, .tabular-nums, [data-field-type="number"], [data-field-type="currency"] {
  font-family: var(--t-code-font-family) !important;
  font-variant-numeric: tabular-nums;
}

/* 2. Primary Action Buttons (Powerhive Amber CTA) */
button[data-variant="primary"],
button[color="primary"],
.button-primary,
button:has(svg[data-icon="plus"]):not([data-variant="secondary"]),
button:has(span:contains("Save")),
button:has(span:contains("Create")),
button:has(span:contains("New")) {
  background: var(--powerhive-amber) !important;
  color: #3A2600 !important;
  font-weight: 600 !important;
  border-radius: var(--t-border-radius-md) !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

button[data-variant="primary"]:hover,
button[color="primary"]:hover,
.button-primary:hover {
  background: var(--powerhive-amber-hover) !important;
  box-shadow: 0 4px 12px rgba(255, 184, 0, 0.28) !important;
}

button[data-variant="primary"]:active,
button[color="primary"]:active,
.button-primary:active {
  background: var(--powerhive-amber-pressed) !important;
  transform: translateY(1px);
}

/* 3. Secondary Action Buttons (Deep Navy) */
button[data-variant="secondary"],
.button-secondary {
  color: var(--powerhive-navy) !important;
  border-color: var(--t-border-color-medium) !important;
}

button[data-variant="secondary"]:hover,
.button-secondary:hover {
  background: var(--t-background-quaternary) !important;
  color: var(--powerhive-navy-dark) !important;
}

/* 4. Left Navigation Drawer / Sidebar */
nav[aria-label="Workspace navigation"],
aside,
[data-testid="left-drawer"],
.navigation-drawer {
  background: #F8FAFB !important;
  border-right: 1px solid var(--t-border-color-light) !important;
}

/* Active navigation item with Powerhive Amber Accent indicator */
nav a[aria-current="page"],
nav a[data-active="true"],
.nav-item-active,
[data-active="true"] {
  background: #FFFFFF !important;
  color: var(--powerhive-navy) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--powerhive-amber) !important;
  box-shadow: 0 1px 4px rgba(38, 72, 96, 0.06) !important;
}

/* 5. Links & Interactive Blue Accents */
a, a:visited {
  color: var(--powerhive-cyan);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--powerhive-cyan-hover);
}

/* 6. Form Fields & Focus Rings */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex="0"]:focus-visible {
  outline: none !important;
  border-color: var(--powerhive-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 149, 190, 0.24) !important;
}

/* 7. Badges & Chips */
[data-variant="pill"],
.chip,
.badge {
  border-radius: var(--t-border-radius-pill) !important;
  font-family: var(--t-code-font-family) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* 8. Table Headers */
table th {
  font-family: var(--t-code-font-family) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--t-font-color-tertiary) !important;
}