:root {
  /* Official Brand Palette */
  --azul-profundo: #0D1328;
  --azul-primario: #2F5BFF;
  --azul-claro: #7B8CFF;
  --gris-medio: #5F6472;
  --gris-claro: #E8EBF3;
  --blanco: #FFFFFF;

  /* Theme Mappings delegated to design-system tokens */
  --bg: var(--color-bg, #F3F3F4);
  --bg-gradient: var(--color-bg, #F3F3F4);
  --panel: var(--color-surface, #FFFFFF);
  --panel-solid: var(--color-surface, #FFFFFF);
  --panel2: var(--color-surface-muted, #F4F4F6);
  --text: var(--color-text, #18181B);
  --muted: var(--color-text-muted, #62626D);
  --muted-bright: var(--color-text-secondary, #3F3F46);
  --blue: var(--color-primary, #2F5BFF);
  --blue-hover: var(--color-primary-hover, #2449D8);
  --blue2: #2449D8;
  --cyan: #0879A5;
  --line: var(--color-border, #E3E3E6);
  --line-glow: rgba(47, 91, 255, 0.2);
  --green: var(--color-success, #0D7138);
  --amber: var(--color-warning, #915007);
  --red: var(--color-danger, #B42318);
  --shadow: 0 1px 3px rgba(16, 17, 20, 0.05);
  --shadow-glow: 0 1px 3px rgba(16, 17, 20, 0.05);
  --radius-lg: 16px;
  --radius-md: 12px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  background-color: var(--color-bg, #F3F3F4);
  background: var(--color-bg, #F3F3F4);
  color: var(--color-text, #18181B);
  color-scheme: light;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"], html[data-theme="dark"] body {
  background-color: var(--color-bg, #0B0E14);
  background: var(--color-bg, #0B0E14);
  color: var(--color-text, #F0F1F3);
  color-scheme: dark;
}

button, input, textarea, select {
  font: inherit;
}

/* Background Effects - Disabled for clean, focused workspace */
.noise,
.bg-grid,
.cursor-glow {
  display: none !important;
}

/* ====================================================
   App Layout: Gis Persistent Sidebar + Top Header
   ==================================================== */
.app-sidebar {
  position: fixed;
  top: 8px;
  left: 8px;
  bottom: 8px;
  width: 64px;
  background: var(--component-sidebar-bg, #FAFAFA);
  border: 1px solid var(--color-border, #E3E3E6);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  z-index: 150;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-sidebar.collapsed {
  width: 64px;
}

.app-sidebar.collapsed .ui-icon,
.app-sidebar.collapsed .sidebar-header .brand svg {
  opacity: 0.48;
  transition: opacity 160ms ease;
}

.sidebar-header {
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.sidebar-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text, #18181B);
  text-decoration: none;
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  letter-spacing: -0.02em;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.sidebar-header .brand svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.sidebar-header .brand .brand-text {
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-mode-switcher {
  display: flex;
  background: var(--color-bg-subtle, #EAEAEC);
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
}

.mode-switcher-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted, #62626D);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.mode-switcher-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.mode-switcher-btn.active {
  background: var(--color-surface, #FFFFFF);
  color: var(--color-primary, #2F5BFF);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sidebar-nav.nav-tabs {
  position: static;
  transform: none !important;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #3F3F46);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.nav-tab .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-tab:hover {
  background: var(--color-surface-hover, #ECECEE);
  color: var(--color-text, #18181B);
}

.nav-tab.active {
  background: var(--component-selected-bg, #EAF1FF);
  color: var(--color-primary, #2F5BFF);
  font-weight: var(--weight-semibold);
}

.sidebar-ai-quick-wrap,
.sidebar-ai-quick-btn {
  display: none !important;
}

.sidebar-section {
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.sidebar-section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted, #62626D);
  letter-spacing: 0.06em;
  padding: 4px 12px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #3F3F46);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.sidebar-nav-item .ui-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-nav-item:hover {
  background: var(--color-surface-hover, #ECECEE);
  color: var(--color-text, #18181B);
}

.sidebar-nav-item.active {
  background: var(--component-selected-bg, #EAF1FF);
  color: var(--color-primary, #2F5BFF);
  font-weight: var(--weight-semibold);
}

[data-theme="dark"] .sidebar-nav-item.active {
  background: rgba(47, 91, 255, 0.15);
  color: #638BFF;
}

.sidebar-footer {
  margin-top: auto;
  padding: 10px 10px 14px;
  border-top: 1px solid var(--color-border, #E3E3E6);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}

.sidebar-footer-links {
  display: none !important;
}

.sidebar-footer-btn {
  border: none;
  background: transparent;
  padding: 4px 6px;
  font-size: var(--text-xs);
  color: var(--color-text-muted, #62626D);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.sidebar-footer-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.sidebar-footer-btn:hover {
  color: var(--color-text, #18181B);
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-muted, #62626D);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.sidebar-collapse-btn .ui-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--color-surface-hover, #ECECEE);
  color: var(--color-text, #18181B);
}

/* Collapsed Sidebar */
.app-sidebar.collapsed .brand-text,
.app-sidebar.collapsed .sidebar-mode-switcher,
.app-sidebar.collapsed .nav-tab span,
.app-sidebar.collapsed .sidebar-ai-quick-btn span,
.app-sidebar.collapsed .sidebar-section-title,
.app-sidebar.collapsed .sidebar-nav-item span,
.app-sidebar.collapsed .sidebar-footer-links,
.app-sidebar.collapsed .collapse-label {
  display: none !important;
}

.app-sidebar.collapsed .brand,
.app-sidebar.collapsed .nav-tab,
.app-sidebar.collapsed .sidebar-ai-quick-btn,
.app-sidebar.collapsed .sidebar-nav-item,
.app-sidebar.collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 0;
}

/* Desktop navigation rail: expand on hover or keyboard focus without shifting the workspace. */
.app-sidebar:hover,
.app-sidebar:focus-within {
  width: 240px;
}

.app-sidebar:hover .brand-text,
.app-sidebar:hover .sidebar-mode-switcher,
.app-sidebar:hover .nav-tab span,
.app-sidebar:hover .sidebar-section-title,
.app-sidebar:hover .sidebar-nav-item span,
.app-sidebar:focus-within .brand-text,
.app-sidebar:focus-within .sidebar-mode-switcher,
.app-sidebar:focus-within .nav-tab span,
.app-sidebar:focus-within .sidebar-section-title,
.app-sidebar:focus-within .sidebar-nav-item span {
  display: inline !important;
}

.app-sidebar:hover .brand,
.app-sidebar:hover .nav-tab,
.app-sidebar:hover .sidebar-nav-item,
.app-sidebar:focus-within .brand,
.app-sidebar:focus-within .nav-tab,
.app-sidebar:focus-within .sidebar-nav-item {
  justify-content: flex-start;
  padding-left: 12px;
  padding-right: 12px;
}

.app-sidebar:hover .ui-icon,
.app-sidebar:hover .sidebar-header .brand svg,
.app-sidebar:focus-within .ui-icon,
.app-sidebar:focus-within .sidebar-header .brand svg {
  opacity: 1;
}

.app-sidebar.collapsed {
  background: transparent !important;
  background-image: none !important;
  border-color: rgba(148, 163, 184, 0.52);
  box-shadow: 4px 0 24px rgba(47, 91, 255, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

html[data-theme="dark"] .app-sidebar.collapsed {
  background: transparent;
  background-image: none;
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22);
}

.sidebar-compatibility { display: none; }

/* Top Persistent Fixed Header - Transparent background both in Trabajo and Gis AI */
.app-header {
  position: fixed;
  top: 0;
  left: 256px;
  right: 0;
  height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box;
  z-index: 100;
  transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

body.sidebar-collapsed .app-header {
  left: 80px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-context-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #18181B);
}

.header-sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 10px;
  background: var(--color-surface, #FFFFFF);
  color: var(--color-text-secondary, #64748B);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}

.header-sidebar-toggle-btn:hover {
  background: var(--color-surface-hover, #F1F5F9);
  border-color: var(--color-border-strong, #CBD5E1);
  color: var(--color-text, #1E293B);
}

.header-sidebar-toggle-btn:active {
  transform: scale(0.96);
}

.header-sidebar-toggle-btn .ui-icon {
  width: 18px;
  height: 18px;
}

html[data-theme="dark"] .header-sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  box-shadow: none;
}

html[data-theme="dark"] .header-sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #F1F5F9;
}

.mobile-menu-btn {
  display: none;
  border: none;
  background: transparent;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text, #18181B);
}

.mobile-menu-btn .ui-icon {
  width: 22px;
  height: 22px;
}

.mobile-menu-btn:hover {
  background: var(--color-surface-hover, #ECECEE);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-menu-wrapper {
  position: relative;
  display: inline-block;
}

.user-access-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.user-access-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(47, 91, 255, 0.5);
  box-shadow: 0 0 14px rgba(47, 91, 255, 0.35);
  transform: scale(1.04);
}

.user-access-badge:active {
  transform: scale(0.95);
}

html[data-theme="light"] .user-access-badge {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .user-access-badge:hover {
  background: #ffffff;
  border-color: rgba(36, 73, 216, 0.4);
  box-shadow: 0 2px 10px rgba(36, 73, 216, 0.2);
}

/* User Dropdown Menu - Aligned with Apple HIG design system */
.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  display: none;
  flex-direction: column;
  z-index: 200;
  box-sizing: border-box;
}

html[data-theme="light"] .user-dropdown-menu {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .user-dropdown-menu {
  background: rgba(21, 25, 34, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.user-menu-wrapper.open .user-dropdown-menu {
  display: flex;
}

/* Dropdown User Profile Header */
.dropdown-user-profile-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 4px;
}

.dropdown-user-name {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--color-text, #111827);
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dropdown-user-email {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary, #64748B);
  letter-spacing: 0;
  line-height: 1.35;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dropdown-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #EDF3FE;
  color: #1A73E8;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.015em;
  line-height: 1.4;
  border: none;
}

html[data-theme="dark"] .dropdown-role-badge {
  background: rgba(47, 91, 255, 0.2);
  color: #93C5FD;
  border: 1px solid rgba(47, 91, 255, 0.3);
}

.user-dropdown-menu .dropdown-divider {
  display: block !important;
  height: 1px !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
  margin: 12px -14px 8px -14px !important;
  width: calc(100% + 28px) !important;
}

html[data-theme="dark"] .user-dropdown-menu .dropdown-divider {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.dropdown-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Theme Toggle Row */
.dropdown-theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text, #1E293B);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.dropdown-theme-toggle-btn:hover {
  background: var(--color-surface-hover, rgba(0, 0, 0, 0.04));
}

html[data-theme="dark"] .dropdown-theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.theme-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text, #1E293B);
}

.theme-row-left .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary, #64748B);
}

.theme-row-label {
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text, #1E293B);
}

/* iOS Toggle Switch */
.theme-switch-track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #E2E8F0;
  position: relative;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.dropdown-theme-toggle-btn.is-light .theme-switch-track {
  background: #E2E8F0;
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .dropdown-theme-toggle-btn .theme-switch-track {
  background: var(--color-primary, #2F5BFF);
}

html[data-theme="dark"] .dropdown-theme-toggle-btn .theme-switch-thumb {
  transform: translateX(18px);
}

/* Logout Item */
.dropdown-logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #C5221F !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  box-sizing: border-box;
  margin-top: 2px;
}

.dropdown-logout-btn .ui-icon {
  width: 18px;
  height: 18px;
  color: #C5221F !important;
}

.dropdown-logout-btn:hover {
  background: rgba(197, 34, 31, 0.06);
}

.dropdown-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dropdown-eyebrow {
  font: var(--weight-medium) var(--text-xs) var(--font-heading);
  letter-spacing: 0.02em;
  color: var(--blue2);
  padding: 4px 8px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text, var(--muted-bright));
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dropdown-item:hover {
  background: var(--color-surface-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text, #111827);
}

html[data-theme="dark"] .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.dropdown-item:active {
  transform: scale(0.98);
}

.company-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(47, 91, 255, 0.15);
  border: 1px solid rgba(47, 91, 255, 0.3);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.company-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-item-text strong {
  font-size: var(--text-sm);
  color: #ffffff;
  font-weight: var(--weight-semibold);
}

.company-item-text small {
  font-size: var(--text-xs);
  color: var(--muted);
}

.collaborator-company-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(47, 91, 255, 0.08);
  border: 1px solid rgba(47, 91, 255, 0.2);
}

.collaborator-company-card .company-item-text strong {
  font-size: var(--text-sm);
  color: #ffffff;
  font-weight: var(--weight-semibold);
}

.collaborator-company-card .company-item-text small {
  font-size: var(--text-xs);
  color: var(--blue2);
  font-weight: var(--weight-semibold);
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

html[data-theme="light"] .dropdown-divider {
  background: rgba(0, 0, 0, 0.06);
}

/* User Dropdown Theme Selector (Apple segmented control) */
.dropdown-theme-container {
  padding: 4px 4px 6px;
}

.dropdown-theme-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

html[data-theme="light"] .dropdown-theme-selector {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.dropdown-theme-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.6));
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-theme-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.dropdown-theme-btn:hover {
  color: var(--color-text, #ffffff);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .dropdown-theme-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text, #11182b);
}

.dropdown-theme-btn.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-weight: var(--weight-semibold);
}

html[data-theme="light"] .dropdown-theme-btn.active {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--color-primary, #2449d8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dropdown-theme-btn:active {
  transform: scale(0.96);
}

.logout-item {
  color: var(--red);
}

.logout-item:hover {
  background: rgba(255, 111, 125, 0.12);
  border-color: rgba(255, 111, 125, 0.3);
  color: var(--red);
}

.reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #2F5BFF 0%, #1e46e4 100%);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 20px rgba(47, 91, 255, 0.4);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.reset-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 28px rgba(47, 91, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.reset-btn .cta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
  display: inline-block;
}

/* Main Container */
.app-container {
  position: relative;
  z-index: 10;
  width: calc(100% - 256px);
  max-width: calc(100% - 256px);
  min-width: 0;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  margin: 56px 0 0 256px;
  padding: 24px;
  box-sizing: border-box;
  transition: margin-left 0.22s cubic-bezier(0.16, 1, 0.3, 1), width 0.22s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

body.sidebar-collapsed .app-container {
  margin-left: 80px;
  width: calc(100% - 80px);
  max-width: calc(100% - 80px);
}

body.auth-mode #appSidebar,
body.unauthenticated #appSidebar {
  display: none !important;
}

body.auth-mode .app-header,
body.unauthenticated .app-header {
  display: none !important;
}

body.auth-mode .app-container,
body.unauthenticated .app-container {
  margin-left: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
}

/* Views Management */
.app-view {
  display: none;
}

.app-view.active {
  display: block;
  flex: 1 0 auto;
  animation: viewSmoothFade 0.2s ease-out forwards;
}

@keyframes viewSmoothFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Buttons & Interactive Elements */
.primary-btn, .secondary-btn, .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  user-select: none;
}

.primary-btn:active,
.secondary-btn:active,
.action-btn:active {
  transform: scale(0.975);
}

.primary-btn {
  background: linear-gradient(135deg, var(--blue) 0%, #1e46e4 100%);
  color: #fff;
  box-shadow: 0 4px 22px rgba(47, 91, 255, 0.4);
}

.primary-btn:hover {
  box-shadow: 0 6px 28px rgba(47, 91, 255, 0.6);
  transform: translateY(-2px);
}

.secondary-btn {
  background: rgba(232, 235, 243, 0.06);
  color: var(--muted-bright);
  border-color: var(--line);
}

.secondary-btn:hover {
  background: var(--color-surface-hover, rgba(232, 235, 243, 0.12));
  border-color: var(--color-border-strong, var(--muted));
  color: var(--color-text, #fff);
  transform: translateY(-1px);
}

.action-btn {
  padding: 9px 14px;
  font-size: var(--text-xs);
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted-bright);
}

.action-btn:hover {
  border-color: var(--color-border-strong, var(--blue2));
  color: var(--color-text, #fff);
  transform: translateY(-1px);
}

/* Button Spinner & Processing Loading State */
.btn-loading,
button[data-is-loading="true"],
.action-btn[data-is-loading="true"],
.primary-btn[data-is-loading="true"],
.secondary-btn[data-is-loading="true"] {
  position: relative !important;
  pointer-events: none !important;
  opacity: 0.82 !important;
  cursor: wait !important;
  user-select: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  transform: none !important;
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-right-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: btnSpinnerRotate 0.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
}

.secondary-btn .btn-spinner,
.action-btn .btn-spinner {
  border-color: rgba(123, 140, 255, 0.3);
  border-top-color: var(--blue2, #7B8CFF);
}

@keyframes btnSpinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Section Headings */
.view-header {
  margin-bottom: 28px;
  scroll-margin-top: 72px;
}

.eyebrow {
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  letter-spacing: 0.15em;
  color: var(--blue2);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.view-title {
  font: var(--weight-semibold) var(--type-page-size) var(--font-heading);
  margin: 0 0 10px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.view-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 720px;
  line-height: 1.6;
  margin: 0;
}

/* Privacy & Trust Center */
.compliance-view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.release-pill {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid rgba(123, 140, 255, 0.34);
  border-radius: 999px;
  background: rgba(47, 91, 255, 0.1);
  color: var(--muted-bright);
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  letter-spacing: .06em;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.compliance-card,
.trust-pillar {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 18px 46px rgba(4, 8, 24, .18);
}

.compliance-card--accent::after {
  content: '';
  position: absolute;
  inset: auto -60px -90px auto;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(47, 91, 255, .19);
  filter: blur(8px);
  pointer-events: none;
}

.compliance-card--wide { grid-column: 1 / -1; }
.compliance-card h2,
.trust-pillar h2 { margin: 8px 0 10px; font-size: var(--text-xl); }
.compliance-card p,
.trust-pillar p { margin: 0 0 18px; color: var(--muted); line-height: 1.65; }
.compliance-kicker { color: var(--blue2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .14em; }
.compliance-actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }
.compliance-muted { color: var(--muted); }
.compliance-status { min-height: 24px; margin-top: 16px; color: var(--muted-bright); font-size: var(--text-sm); }

.data-use-list { display: grid; gap: 12px; }
.data-use-list > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.data-use-list strong { font-size: var(--text-sm); }
.data-use-list p { margin: 3px 0 0; font-size: var(--text-xs); }

.privacy-request-form { display: grid; grid-template-columns: minmax(180px, .5fr) 1fr; gap: 10px 16px; align-items: start; }
.privacy-request-form label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted-bright); }
.privacy-request-form textarea,
.privacy-request-form button { grid-column: 1 / -1; }

.request-list { display: grid; gap: 8px; }
.request-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.request-row div { display: grid; gap: 3px; }
.request-row small { color: var(--muted); }
.request-status { padding: 5px 9px; border-radius: 999px; background: rgba(47, 91, 255, .12); color: var(--blue2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; }

.trust-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.trust-pillar > span { display: block; color: rgba(123, 140, 255, .56); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -.04em; }
.trust-pillar p { margin-bottom: 0; font-size: var(--text-sm); }
.trust-detail-grid { grid-template-columns: 1fr; }
.evidence-links { display: flex; flex-wrap: wrap; gap: 9px; }
.evidence-links a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted-bright); text-decoration: none; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.evidence-links a:hover,
.evidence-links a:focus-visible { border-color: var(--color-primary, var(--blue2)); color: var(--color-primary, #fff); }
.audit-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.audit-header h2 { margin-bottom: 0; }
.audit-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 12px; }
.audit-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.audit-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.audit-table th,
.audit-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--text-xs); color: var(--muted); vertical-align: top; }
.audit-table th { color: var(--muted-bright); background: rgba(255,255,255,.035); text-transform: uppercase; letter-spacing: .07em; }
.audit-table code { color: var(--muted-bright); font-size: var(--text-xs); }

[data-theme="light"] .compliance-card,
[data-theme="light"] .trust-pillar { background: rgba(255,255,255,.82); box-shadow: 0 16px 36px rgba(32, 52, 96, .08); }

@media (max-width: 900px) {
  .trust-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .compliance-view-header { flex-direction: column; }
  .compliance-grid,
  .trust-pillars,
  .privacy-request-form,
  .audit-filters { grid-template-columns: 1fr; }
  .compliance-card--wide { grid-column: auto; }
  .privacy-request-form textarea,
  .privacy-request-form button { grid-column: auto; }
  .compliance-card,
  .trust-pillar { padding: 20px; }
}

/* ----------------------------------------------------
   ONBOARDING VIEW (Entender la empresa)
   ---------------------------------------------------- */
.onboarding-wrap {
  max-width: 860px;
  margin: 20px auto;
}

.onboarding-progress-bar {
  height: 4px;
  background: var(--line);
  border-radius: 4px;
  margin-bottom: 32px;
  overflow: hidden;
}

.onboarding-progress-fill {
  height: 100%;
  width: 16.66%;
  background: linear-gradient(90deg, var(--blue), var(--blue2));
  transition: width 0.4s ease;
}

.onboarding-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(47, 91, 255, 0.12);
  border: 1px solid var(--line-glow);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--blue2);
  margin-bottom: 16px;
}

.gis-card-dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow);
  position: relative;
  backdrop-filter: blur(16px);
}

.gis-header-speak {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.gis-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1e3bb5);
  color: #fff;
  display: grid;
  place-items: center;
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
  box-shadow: 0 0 25px rgba(47, 91, 255, 0.4);
  flex-shrink: 0;
}

.gis-header-speak h2 {
  font: var(--weight-semibold) var(--text-2xl) var(--font-heading);
  margin: 4px 0 8px;
}

.gis-header-speak p {
  color: var(--muted);
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Onboarding inputs & choices */
.onboarding-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.option-card {
  padding: 20px;
  border-radius: 16px;
  background: var(--panel2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease,
              background-color 0.28s ease,
              box-shadow 0.28s ease;
  user-select: none;
}

.option-card:hover {
  border-color: rgba(47, 91, 255, 0.6);
  transform: translateY(-3px);
  background: rgba(35, 56, 115, 0.75);
  box-shadow: 0 10px 28px -8px rgba(47, 91, 255, 0.25);
}

.option-card:active {
  transform: translateY(-1px) scale(0.985);
}

.option-card.selected {
  border-color: var(--blue);
  background: rgba(47, 91, 255, 0.18);
  box-shadow: 0 0 24px rgba(47, 91, 255, 0.3), inset 0 0 0 1px rgba(47, 91, 255, 0.4);
  animation: optionCardPop 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes optionCardPop {
  0% { transform: scale(0.97); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.option-card h3 {
  font: var(--weight-semibold) var(--text-md) var(--font-heading);
  margin: 0 0 6px;
}

.option-card p {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.option-card small {
  display: block;
  font-size: var(--text-xs);
  color: var(--blue2);
  margin-top: 8px;
  font-weight: var(--weight-semibold);
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.chip {
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted-bright);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip:hover {
  border-color: var(--blue);
  color: #fff;
}

.chip.selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 15px rgba(47, 91, 255, 0.35);
}

.input-field {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: #fff;
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 24px;
}

.input-field:focus {
  border-color: var(--blue);
  box-shadow: 0 0 15px rgba(47, 91, 255, 0.2);
}

.input-field.input-error,
select.input-field.input-error {
  border-color: #ff4d4d !important;
  background-color: rgba(255, 77, 77, 0.08) !important;
  box-shadow: 0 0 12px rgba(255, 77, 77, 0.35) !important;
}

.field-error-msg {
  color: #ff4d4d;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  display: block;
  margin-top: 4px;
}


/* Custom Styled Select Dropdowns */
select.input-field, select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 13px 42px 13px 16px;
  border-radius: 12px;
  background-color: var(--panel2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232F5BFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  border: 1px solid var(--line);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  outline: none;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  margin-bottom: 16px;
}

select.input-field:hover, select:hover {
  border-color: rgba(47, 91, 255, 0.5);
  background-color: rgba(22, 33, 62, 0.95);
}

select.input-field:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 16px rgba(47, 91, 255, 0.3);
  background-color: #0c1429;
}

select option {
  background-color: #0d152a;
  color: #ffffff;
  padding: 12px;
  font-size: var(--text-sm);
}

select option:disabled {
  color: var(--muted);
}

textarea.input-field {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.dept-contact-expand {
  margin-top: 10px;
  padding: 14px;
  background: rgba(13, 19, 40, 0.5);
  border-radius: 12px;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.dept-contact-expand input {
  margin-bottom: 0;
  padding: 9px 12px;
  font-size: var(--text-xs);
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* Summary Card */
.summary-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.summary-item {
  padding: 16px;
  background: var(--panel2);
  border-radius: 14px;
  border: 1px solid var(--line);
}

.summary-item small {
  display: block;
  font-size: var(--text-xs);
  color: var(--blue2);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.summary-item strong {
  display: block;
  font-size: var(--text-sm);
  color: #fff;
}

/* ----------------------------------------------------
   SCHEDULE BUILDING & APPROVAL STYLES
   ---------------------------------------------------- */
.quantity-picker-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 32px 0;
  padding: 28px;
  background: var(--panel2);
  border-radius: 20px;
  border: 1px solid var(--line-glow);
  box-shadow: 0 0 30px rgba(47, 91, 255, 0.15);
}

.qty-control-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
  border: 0;
  font: var(--weight-semibold) var(--text-2xl) var(--font-heading);
  cursor: pointer;
  transition: all 0.2s ease;
  display: grid;
  place-items: center;
}

.qty-control-btn:hover {
  background: var(--blue-hover);
  transform: scale(1.05);
}

.qty-display-val {
  font: var(--weight-semibold) var(--text-4xl) var(--font-heading);
  color: #fff;
  min-width: 60px;
  text-align: center;
}

.gis-reaction-banner {
  margin: 16px 0 24px;
  padding: 16px 20px;
  background: rgba(47, 91, 255, 0.12);
  border-left: 4px solid var(--blue);
  border-radius: 14px;
  font-size: var(--text-sm);
  color: var(--muted-bright);
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 15px rgba(47, 91, 255, 0.15);
  animation: bannerSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bannerSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.uploaded-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--panel2);
  border: 1px solid var(--line-glow);
  border-radius: 12px;
  font-size: var(--text-sm);
  color: #fff;
  margin-right: 10px;
  margin-bottom: 10px;
}

.uploaded-file-chip button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 0;
}

.uploaded-file-chip button:hover {
  color: var(--red);
}

.multi-project-summary-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}

.multi-project-item-card {
  padding: 20px;
  background: var(--panel2);
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.stages-grid-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.stage-proposal-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.stage-proposal-card:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(22, 36, 74, 0.72);
}

.stage-proposal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.stage-proposal-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.stage-proposal-heading strong {
  overflow: hidden;
  color: #f8fafc;
  font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-proposal-heading span {
  color: #94a3b8;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.stage-num-badge {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.18);
  color: #93c5fd;
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  display: grid;
  place-items: center;
}

.stage-controls {
  display: flex;
  gap: 6px;
}

.critical-path-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  background: rgba(255, 111, 125, 0.15);
  border: 1px solid rgba(255, 111, 125, 0.35);
  color: var(--red);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: help;
}

/* User Avatar Styles */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2F5BFF 0%, #00C853 100%);
  color: #ffffff;
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  user-select: none;
}

.user-info strong {
  display: block;
  font-size: var(--text-xs);
  color: #fff;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}

.user-info small {
  font-size: var(--text-xs);
  color: var(--muted);
  display: block;
  line-height: 1.3;
  white-space: nowrap;
}

/* ----------------------------------------------------
   HOY / TODAY VIEW
   ---------------------------------------------------- */
.today-greeting-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: center;
}

.today-speak {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.prompt-bar-wrap {
  margin-top: 24px;
  display: flex;
  gap: 10px;
}

.prompt-bar-wrap input {
  margin-bottom: 0;
}

.quick-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.quick-suggestions button {
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted-bright);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-suggestions button:hover {
  border-color: var(--color-primary, var(--blue));
  color: var(--color-text, #fff);
  transform: translateY(-1px);
}

.quick-suggestions button:active {
  transform: scale(0.96);
}

.today-kpi-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kpi-stat-card {
  padding: 16px 20px;
  background: var(--color-surface, var(--panel2));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.kpi-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--component-selected-border, var(--blue2));
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.35), 0 0 24px rgba(47, 91, 255, 0.18);
}

.kpi-stat-card:active {
  transform: scale(0.98);
}

.kpi-badge-num {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  letter-spacing: -0.02em;
}

.kpi-badge-num.danger { background: rgba(255, 111, 125, 0.15); color: var(--red); border: 1px solid rgba(255, 111, 125, 0.25); }
.kpi-badge-num.warning { background: rgba(255, 180, 84, 0.15); color: var(--amber); border: 1px solid rgba(255, 180, 84, 0.25); }
.kpi-badge-num.success { background: rgba(55, 215, 164, 0.15); color: var(--green); border: 1px solid rgba(55, 215, 164, 0.25); }

.kpi-stat-info strong {
  display: block;
  font-size: var(--text-sm);
  color: #fff;
  letter-spacing: -0.01em;
}

.kpi-stat-info small {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Today portfolio command center */
#todayDashboardRoot {
  display: grid;
  gap: 24px;
}

.today-command-hero,
.today-panel,
.today-empty-dashboard {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}

.today-command-hero {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at 82% 0%, var(--component-selected-bg), transparent 52%),
    var(--color-surface);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow: 0 22px 52px -10px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.today-command-copy,
.today-ai-console {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.today-context-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
}

.today-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 5px var(--component-success-soft);
}

.today-command-hero .view-title {
  max-width: 32ch;
  margin: 0;
  font-size: var(--type-page-size);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.today-command-summary {
  max-width: 75ch;
  margin: 14px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.today-first-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 720px;
  margin-top: 26px;
  padding: 16px;
  border: 1px solid var(--component-selected-border);
  border-radius: 18px;
  background: var(--component-selected-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.today-first-action > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.today-first-action strong,
.today-first-action small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-first-action strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.today-first-action small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.today-first-label,
.today-section-kicker {
  color: var(--color-primary-hover);
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  letter-spacing: .12em;
}

.today-section-kicker.danger { color: var(--color-danger); }
.today-section-kicker.value { color: var(--color-success); }

.today-first-action .primary-btn,
.today-priority-actions .primary-btn {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 14px;
  font-size: var(--text-xs);
}

.today-first-action .ui-icon,
.today-priority-actions .ui-icon {
  width: 16px;
  height: 16px;
}

.today-ai-console {
  align-self: center;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--component-control-bg);
}

.today-ai-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.today-ai-title .gis-avatar {
  width: 38px;
  height: 38px;
  font-size: var(--text-sm);
}

.today-ai-title > div:last-child {
  display: grid;
  gap: 1px;
}

.today-ai-title strong { font-size: var(--text-sm); }
.today-ai-title small { color: var(--color-text-muted); font-size: var(--text-xs); }

.today-prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

.today-prompt-row input,
.today-search-field input,
.today-filter-field select {
  width: 100%;
  min-height: 42px;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--component-control-bg);
  color: var(--color-text);
  font: var(--weight-medium) var(--text-sm) var(--font-body);
}

.today-prompt-row input { padding: 0 13px; }
.today-prompt-row input::placeholder,
.today-search-field input::placeholder { color: var(--color-text-disabled); }

.today-prompt-row input:focus,
.today-search-field:focus-within,
.today-filter-field select:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--component-selected-bg);
}

.today-prompt-row button,
.today-icon-btn {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}

.today-prompt-row button:hover,
.today-icon-btn:hover { background: var(--color-primary-hover); }
.today-prompt-row .ui-icon { width: 18px; height: 18px; }

.today-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.today-quick-actions button,
.today-segmented button,
.today-text-btn,
.today-panel-link {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  cursor: pointer;
}

.today-quick-actions button {
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.today-quick-actions button:hover {
  border-color: var(--component-selected-border);
  background: var(--component-selected-bg);
  color: var(--color-text);
}

.today-metric-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.today-metric-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.today-metric-card:hover {
  border-color: var(--component-selected-border);
  background: var(--color-surface-raised);
  transform: translateY(-1px);
}

.today-metric-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.today-metric-card.danger .today-metric-icon { background: var(--component-danger-soft); color: var(--color-danger); }
.today-metric-card.warning .today-metric-icon { background: var(--component-warning-soft); color: var(--color-warning); }
.today-metric-card.info .today-metric-icon { background: var(--component-primary-soft); color: var(--color-info); }
.today-metric-card.value .today-metric-icon { background: var(--component-success-soft); color: var(--color-success); }
.today-metric-icon .ui-icon { width: 17px; height: 17px; }
.today-metric-card > .ui-icon { width: 13px; height: 13px; color: var(--color-text-disabled); }

.today-metric-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.today-metric-copy strong {
  overflow: hidden;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-metric-copy > span {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-metric-copy small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(310px, .8fr);
  align-items: start;
  gap: 24px;
}

.today-panel {
  min-width: 0;
  border-radius: var(--radius-xl);
}

.today-priority-panel,
.today-portfolio-panel { padding: clamp(22px, 2.4vw, 32px); }

.today-panel-heading,
.today-portfolio-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.today-panel-heading h2,
.today-portfolio-heading h2 {
  margin: 4px 0 0;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
  letter-spacing: -.02em;
}

.today-panel-heading p,
.today-portfolio-heading p {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.today-panel-heading.compact h2 { font-size: var(--text-lg); }

.today-count-badge {
  display: grid;
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  place-items: center;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--component-primary-soft);
  color: var(--color-primary-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.today-count-badge.danger { background: var(--component-danger-soft); color: var(--color-danger); }

.today-segmented {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  margin: 18px 0 8px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--component-nav-bg);
  scrollbar-width: none;
}

.today-segmented button {
  flex: 1 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.today-segmented button span {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
}

.today-segmented button.active {
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
}

.today-priority-list { display: grid; }

.today-priority-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 108px 136px;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}

.today-priority-row:last-child { border-bottom: 0; padding-bottom: 0; }

.today-priority-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  color: var(--color-text-secondary);
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
}

.today-priority-row.now .today-priority-rank {
  border-color: rgba(255, 111, 125, .4);
  background: var(--component-danger-soft);
  color: var(--color-danger);
}

.today-priority-main { min-width: 0; }

.today-priority-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.today-band {
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.today-band.now { background: var(--component-danger-soft); color: var(--color-danger); }
.today-band.week { background: var(--component-warning-soft); color: var(--color-warning); }

.today-priority-main h3 {
  margin: 6px 0 3px;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.today-priority-title {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.today-priority-main p {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 8px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.today-reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.today-reason-chips span {
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.today-priority-value {
  display: grid;
  align-self: stretch;
  align-content: center;
  gap: 2px;
  padding-left: 13px;
  border-left: 1px solid var(--color-border);
}

.today-priority-value > span { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.today-priority-value > strong { color: var(--color-text); font: var(--weight-semibold) var(--text-xl) var(--font-heading); }
.today-priority-value > strong small { color: var(--color-text-muted); font-size: var(--text-xs); }
.today-priority-value > b { color: var(--color-text-secondary); font-size: var(--text-xs); }

.today-priority-actions {
  display: grid;
  gap: 5px;
}

.today-text-btn,
.today-panel-link {
  min-height: 30px;
  padding: 4px 7px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.today-text-btn:hover,
.today-panel-link:hover { color: var(--color-primary-hover); }

.today-side-stack {
  display: grid;
  gap: 16px;
}

.today-side-panel { padding: 18px; }

.today-side-list,
.today-timeline { display: grid; margin-top: 10px; }

.today-side-item,
.today-suggestion-item,
.today-timeline-item {
  display: grid;
  width: 100%;
  min-width: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.today-side-item {
  grid-template-columns: 8px minmax(0, 1fr) 13px;
  align-items: center;
  gap: 9px;
  padding: 12px 3px;
}

.today-side-item:first-child,
.today-timeline-item:first-child,
.today-suggestion-item:first-child { border-top: 0; }

.today-side-item:hover,
.today-timeline-item:hover,
.today-suggestion-item:hover { background: var(--component-table-row-hover); }

.today-side-item > span:nth-child(2),
.today-timeline-item > span:last-child,
.today-suggestion-item > span:last-child { display: grid; min-width: 0; gap: 2px; }

.today-side-item strong,
.today-timeline-item > span:last-child strong,
.today-suggestion-item strong {
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-side-item small,
.today-timeline-item small,
.today-suggestion-item small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.today-side-item > .ui-icon { width: 12px; height: 12px; color: var(--color-text-disabled); }
.today-side-status { width: 7px; height: 7px; border-radius: 50%; }
.today-side-status.danger { background: var(--color-danger); box-shadow: 0 0 0 4px var(--component-danger-soft); }

.today-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0 auto;
}

.today-panel-link .ui-icon { width: 12px; height: 12px; }

.today-timeline-item {
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 2px;
}

.today-timeline-date {
  display: grid;
  align-content: start;
  gap: 1px;
}

.today-timeline-date strong { color: var(--color-primary-hover); font-size: var(--text-xs); text-transform: capitalize; }
.today-timeline-item.overdue .today-timeline-date strong,
.today-timeline-item.overdue .today-timeline-date small { color: var(--color-danger); }

.today-suggestions-panel {
  background: linear-gradient(145deg, var(--color-surface), var(--component-success-soft));
}

.today-panel-heading.compact > .ui-icon { width: 19px; height: 19px; color: var(--color-success); }

.today-suggestion-item {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
}

.today-suggestion-item > span:first-child {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  background: var(--component-success-soft);
  color: var(--color-success);
}

.today-suggestion-item .ui-icon { width: 14px; height: 14px; }

.today-side-empty,
.today-inline-empty {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.today-side-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
}

.today-side-empty .ui-icon { width: 15px; height: 15px; color: var(--color-success); }

.today-inline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 150px;
  text-align: left;
}

.today-inline-empty > .ui-icon { width: 22px; height: 22px; color: var(--color-success); }
.today-inline-empty > div { display: grid; gap: 2px; }
.today-inline-empty strong { color: var(--color-text); font-size: var(--text-xs); }

.today-portfolio-panel { overflow: hidden; }

.today-portfolio-heading { align-items: flex-end; }

.today-portfolio-tools {
  display: flex;
  flex: 0 1 520px;
  justify-content: flex-end;
  gap: 8px;
}

.today-search-field {
  display: grid;
  flex: 1 1 310px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  min-width: 220px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--component-control-bg);
  color: var(--color-text-muted);
}

.today-search-field .ui-icon { width: 15px; height: 15px; margin-left: 11px; }
.today-search-field input { min-width: 0; padding: 0 10px; border: 0; background: transparent; }

.today-filter-field { flex: 0 0 142px; }
.today-filter-field select { padding: 0 28px 0 10px; cursor: pointer; }

.today-portfolio-results { margin-top: 18px; }
.today-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }

.today-portfolio-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  background: var(--component-table-bg);
  table-layout: fixed;
}

.today-portfolio-table th {
  padding: 10px 11px;
  border-bottom: 1px solid var(--color-border);
  background: var(--component-table-header-bg);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.today-portfolio-table th:nth-child(1) { width: 19%; }
.today-portfolio-table th:nth-child(2) { width: 9%; }
.today-portfolio-table th:nth-child(3) { width: 12%; }
.today-portfolio-table th:nth-child(4) { width: 12%; }
.today-portfolio-table th:nth-child(5) { width: 17%; }
.today-portfolio-table th:nth-child(6) { width: 12%; }
.today-portfolio-table th:nth-child(7) { width: 15%; }
.today-portfolio-table th:nth-child(8) { width: 4%; }

.today-portfolio-table td {
  overflow: hidden;
  padding: 11px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  vertical-align: middle;
}

.today-portfolio-table tr:last-child td { border-bottom: 0; }
.today-portfolio-table tbody tr:hover { background: var(--component-table-row-hover); }
.today-portfolio-table td > strong,
.today-portfolio-table td > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-portfolio-table td > strong { color: var(--color-text-secondary); font-size: var(--text-xs); }
.today-portfolio-table td > small { margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-xs); }

.today-project-link {
  display: grid;
  max-width: 100%;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.today-project-link strong,
.today-project-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-project-link strong { font: var(--weight-semibold) var(--text-xs) var(--font-heading); }
.today-project-link small { color: var(--color-text-muted); font-size: var(--text-xs); }
.today-project-link:hover strong { color: var(--color-primary-hover); }

.today-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: var(--radius-pill);
  background: var(--component-success-soft);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.today-health-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.today-health-pill.critical { background: var(--component-danger-soft); color: var(--color-danger); }
.today-health-pill.warning { background: var(--component-warning-soft); color: var(--color-warning); }

.today-progress-cell { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 5px; }
.today-progress-cell strong { color: var(--color-text-secondary); font-size: var(--text-xs); }
.today-progress-cell > span { height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-surface-muted); }
.today-progress-cell > span i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.today-progress-cell small { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--text-xs); }

.today-pressure-score {
  display: inline-grid;
  width: 28px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.today-pressure-score.now { background: var(--component-danger-soft); color: var(--color-danger); }
.today-pressure-score.week { background: var(--component-warning-soft); color: var(--color-warning); }
.today-muted { color: var(--color-text-disabled); font-size: var(--text-xs); }

.today-icon-btn { width: 30px; height: 30px; margin-left: auto; }
.today-icon-btn .ui-icon { width: 14px; height: 14px; }

.today-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.today-table-footer .secondary-btn { min-height: 36px; padding: 7px 12px; font-size: var(--text-xs); }

.today-empty-dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  gap: 12px;
  padding: 48px 24px;
  border-radius: var(--radius-xl);
  text-align: center;
}

.today-empty-dashboard .gis-director-portrait {
  width: 250px;
  max-width: 100%;
  margin: 0 auto 10px;
}

.today-empty-dashboard h1 { max-width: 24ch; margin: 4px 0; }
.today-empty-dashboard p { max-width: 56ch; margin: 0 0 16px; color: var(--color-text-muted); }

.collaborator-today-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(47, 91, 255, .13), var(--color-surface));
}
.collaborator-today-hero h1 { margin: 5px 0 8px; }
.collaborator-today-hero p { max-width: 68ch; margin: 0; color: var(--color-text-muted); line-height: 1.55; }
.collaborator-role-pill,
.collaborator-readonly-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(47, 91, 255, .35);
  border-radius: 999px;
  background: rgba(47, 91, 255, .1);
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.collaborator-quick-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.collaborator-quick-summary span {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.collaborator-quick-summary strong { color: var(--color-text); }
.collaborator-quick-summary .danger,
.collaborator-quick-summary .danger strong { border-color: rgba(239, 68, 68, .35); color: var(--color-danger); }
.collaborator-project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.collaborator-project-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue2);
  box-shadow: 0 14px 34px rgba(47, 91, 255, 0.1);
}

.collaborator-project-card .collab-card-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.collaborator-project-card .collab-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.collaborator-project-card h2.collab-card-title,
.collaborator-project-card h2 {
  font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-heading);
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.collaborator-project-card .collab-card-desc {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collaborator-project-card .collab-card-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.collaborator-project-card .collab-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-xs);
}

.collaborator-project-card .collab-stat-label {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.collaborator-project-card .collab-stat-val {
  color: var(--blue2);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.collaborator-project-card .collab-task-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: var(--text-sm);
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
}

.collaborator-project-card .collab-task-counter.active {
  background: rgba(47, 91, 255, 0.08);
  border-color: rgba(47, 91, 255, 0.22);
  color: var(--blue2);
}

.collaborator-project-card .collab-task-counter.active svg {
  color: var(--blue2);
}

.collaborator-project-card .collab-task-counter.done {
  background: rgba(55, 215, 164, 0.08);
  border-color: rgba(55, 215, 164, 0.25);
  color: var(--green);
}

.collaborator-project-card .collab-task-counter.done svg {
  color: var(--green);
}

.collaborator-project-card .collab-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.collaborator-project-card .collab-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(232, 235, 243, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collaborator-project-card .collab-meta-chip svg {
  width: 13px;
  height: 13px;
  opacity: 0.75;
  flex-shrink: 0;
}

.collaborator-project-card .collab-card-footer {
  margin-top: 2px;
}

.collaborator-project-card .collab-open-btn {
  width: 100%;
  justify-content: center;
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: 12px;
}
.collaborator-simple-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.collaborator-simple-heading h2 { margin: 4px 0 0; color: var(--color-text); font-size: var(--text-xl); }
.collaborator-simple-heading > span { color: var(--color-text-muted); font-size: var(--text-xs); }
.collaborator-simple-task-list { display: grid; gap: 10px; }
.collaborator-simple-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.collaborator-simple-task.overdue { border-left: 4px solid var(--color-danger); }
.collaborator-simple-task.done { opacity: .72; }
.collaborator-simple-task small { color: var(--blue2); font-weight: var(--weight-semibold); text-transform: uppercase; }
.collaborator-simple-task h3 { margin: 4px 0; color: var(--color-text); font-size: var(--text-sm); }
.collaborator-simple-task p { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.collaborator-gantt-readonly .gantt-stats-strip,
.collaborator-gantt-readonly .gantt-toolbar-actions,
.collaborator-gantt-readonly .gantt-legend { display: none; }
.collaborator-gantt-readonly .gantt-controls-bar { min-height: 58px; }
.collaborator-task-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.collaborator-task-metric {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 0 10px;
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.collaborator-task-metric > span { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-surface-subtle); }
.collaborator-task-metric .ui-icon { width: 18px; height: 18px; }
.collaborator-task-metric strong { font: var(--weight-semibold) var(--text-2xl)/1 var(--font-heading); color: var(--color-text); }
.collaborator-task-metric small { color: var(--color-text-muted); font-size: var(--text-xs); }
.collaborator-task-metric.danger > span { color: var(--color-danger); background: var(--component-danger-soft); }
.collaborator-task-metric.warning > span { color: var(--color-warning); background: var(--component-warning-soft); }
.collaborator-task-metric.info > span { color: var(--blue2); background: rgba(47, 91, 255, .1); }
.collaborator-task-metric.success > span { color: var(--color-success); background: var(--component-success-soft); }
.collaborator-priority-panel { margin-bottom: 16px; padding: 20px; }
.collaborator-task-list { display: grid; gap: 10px; margin-top: 16px; }
.collaborator-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--component-table-bg);
}
.collaborator-task-row.overdue { border-color: rgba(239, 68, 68, .38); background: linear-gradient(90deg, rgba(239, 68, 68, .07), var(--component-table-bg) 28%); }
.collaborator-task-context { display: flex; gap: 7px; color: var(--blue2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .04em; }
.collaborator-task-context i { color: var(--color-text-disabled); font-style: normal; }
.collaborator-task-main h3 { margin: 5px 0 10px; color: var(--color-text); font-size: var(--text-sm); }
.collaborator-task-progress { display: grid; grid-template-columns: minmax(120px, 240px) auto; align-items: center; gap: 10px; }
.collaborator-task-progress > span { height: 6px; overflow: hidden; border-radius: 999px; background: var(--color-surface-subtle); }
.collaborator-task-progress i { display: block; height: 100%; border-radius: inherit; background: var(--blue2); }
.collaborator-task-progress strong { color: var(--blue2); font-size: var(--text-xs); }
.collaborator-task-due { display: flex; align-items: center; gap: 9px; color: var(--color-text); }
.collaborator-task-due .ui-icon { width: 17px; height: 17px; color: var(--blue2); }
.collaborator-task-due span { display: grid; gap: 3px; }
.collaborator-task-due strong { font-size: var(--text-xs); }
.collaborator-task-due small { color: var(--color-text-muted); font-size: var(--text-xs); }
.collaborator-task-due.danger,
.collaborator-task-due.danger .ui-icon { color: var(--color-danger); }
.collaborator-project-access { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; }
.collaborator-project-access h2 { margin: 4px 0; font-size: var(--text-lg); }
.collaborator-project-access p,
.collaborator-empty-note { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5; }
.collaborator-permission-summary { display: grid; gap: 5px; margin: 18px 0; padding: 14px; border: 1px solid rgba(47, 91, 255, .3); border-radius: 10px; background: rgba(47, 91, 255, .08); }
.collaborator-permission-summary strong { color: var(--blue2); }
.collaborator-permission-summary span { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.5; }
body.collaborator-mode #analysisMetadataAssistant { display: none !important; }
body.collaborator-mode #createProjectBtn,
body.collaborator-mode .detail-sub-tab[data-subtab="resumen"],
body.collaborator-mode .detail-sub-tab[data-subtab="plan"],
body.collaborator-mode .detail-sub-tab[data-subtab="actas"],
body.collaborator-mode #gisChatFab,
body.collaborator-mode #gisChatWidget { display: none !important; }

@media (max-width: 900px) {
  .collaborator-task-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collaborator-task-row { grid-template-columns: minmax(0, 1fr) 140px; }
  .collaborator-task-row .primary-btn { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 560px) {
  .collaborator-today-hero,
  .collaborator-project-access { align-items: stretch; flex-direction: column; }
  .collaborator-role-pill { align-self: flex-start; white-space: normal; }
  .collaborator-task-metrics { grid-template-columns: 1fr; }
  .collaborator-task-row { grid-template-columns: 1fr; gap: 14px; }
  .collaborator-task-row .primary-btn { grid-column: auto; }
  .collaborator-task-progress { grid-template-columns: 1fr auto; }
  .collaborator-project-access .secondary-btn { width: 100%; }
  .collaborator-project-card,
  .collaborator-simple-heading,
  .collaborator-simple-task { align-items: stretch; flex-direction: column; }
  .collaborator-project-card .primary-btn,
  .collaborator-simple-task .primary-btn { width: 100%; }
}

@media (max-width: 1180px) {
  .today-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today-command-layout { grid-template-columns: 1fr; }
  .today-side-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .today-command-hero { grid-template-columns: 1fr; }
  .today-ai-console { align-self: stretch; }
  .today-priority-row { grid-template-columns: 30px minmax(0, 1fr) 108px; }
  .today-priority-actions { grid-column: 2 / -1; grid-template-columns: auto auto; justify-content: start; }
  .today-side-stack { grid-template-columns: 1fr; }
  .today-portfolio-heading { align-items: stretch; flex-direction: column; }
  .today-portfolio-tools { flex: 1 1 auto; justify-content: stretch; }
}

@media (max-width: 700px) {
  #todayDashboardRoot { gap: 16px; }
  .today-command-hero { gap: 24px; padding: 20px; }
  .today-command-hero .view-title { font-size: var(--type-page-size); }
  .today-first-action { align-items: stretch; flex-direction: column; }
  .today-first-action .primary-btn { width: 100%; }
  .today-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today-metric-card:last-child { grid-column: 1 / -1; }
  .today-priority-panel,
  .today-portfolio-panel { padding: 16px; }
  .today-priority-row { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .today-priority-value { grid-column: 2; grid-template-columns: auto auto auto auto; align-items: center; gap: 5px; padding: 8px 0 0; border-top: 1px solid var(--color-border); border-left: 0; }
  .today-priority-value > strong { font-size: var(--text-md); }
  .today-priority-actions { grid-column: 2; grid-template-columns: 1fr; }
  .today-priority-actions .primary-btn { width: 100%; }
  .today-portfolio-tools { flex-direction: column; }
  .today-search-field,
  .today-filter-field { flex: 1 1 auto; width: 100%; min-width: 0; }
  .today-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .today-portfolio-table { min-width: 0; background: transparent; }
  .today-portfolio-table,
  .today-portfolio-table tbody,
  .today-portfolio-table tr,
  .today-portfolio-table td { display: block; width: 100%; }
  .today-portfolio-table thead { display: none; }
  .today-portfolio-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin-bottom: 10px; padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--component-table-bg); }
  .today-portfolio-table td { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; min-height: 34px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
  .today-portfolio-table td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; }
  .today-portfolio-table td:first-child,
  .today-portfolio-table td:nth-child(5),
  .today-portfolio-table td:nth-child(7),
  .today-portfolio-table td:last-child { grid-column: 1 / -1; }
  .today-portfolio-table td:last-child { border-bottom: 0; }
  .today-icon-btn { margin: 0; }
}

@media (max-width: 480px) {
  .today-ai-console { padding: 15px; }
  .today-quick-actions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .today-quick-actions button { flex: 0 0 auto; }
  .today-metric-strip { grid-template-columns: 1fr; }
  .today-metric-card:last-child { grid-column: auto; }
  .today-metric-card { min-height: 78px; }
  .today-panel-heading { gap: 10px; }
  .today-segmented button { min-height: 40px; }
  .today-priority-value { grid-template-columns: auto auto; }
  .today-priority-value > span:nth-of-type(2) { margin-left: 8px; }
  .today-portfolio-table tr { grid-template-columns: 1fr; }
  .today-portfolio-table td { grid-column: 1 / -1 !important; }
  .today-table-footer { align-items: stretch; flex-direction: column; }
  .today-table-footer .secondary-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .today-metric-card { transition: none; }
  .today-metric-card:hover { transform: none; }
}

/* ----------------------------------------------------
   CREATE PROJECT CONVERSATIONAL WIZARD
   ---------------------------------------------------- */
.create-project-shell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow);
}

.chat-flow-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.chat-bubble {
  display: flex;
  gap: 14px;
  max-width: 85%;
}

.chat-bubble.gis {
  align-self: flex-start;
}

.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble .bubble-content {
  padding: 16px 20px;
  border-radius: 18px;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.chat-bubble.gis .bubble-content {
  background: var(--panel2);
  border-top-left-radius: 4px;
  border: 1px solid var(--line);
}

.chat-bubble.user .bubble-content {
  background: linear-gradient(135deg, var(--blue), #1e3bb5);
  border-top-right-radius: 4px;
  color: #fff;
}

.schedule-choice-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.upload-dropzone {
  border: 2px dashed var(--line-glow);
  background: rgba(47, 91, 255, 0.05);
  border-radius: 18px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-top: 20px;
}

.upload-dropzone:hover {
  background: rgba(47, 91, 255, 0.12);
  border-color: var(--blue);
}

.ai-building-stage {
  padding: 40px 20px;
  text-align: center;
}

.spinner-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--blue);
  animation: spin 0.9s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Project Plan View & Expanders */
.phases-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

/* ==========================================================================
   DESPLEGABLES DE ETAPAS & TAREAS (ACCORDION DROPDOWNS)
   ========================================================================== */
.phase-accordion {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
  overflow: hidden;
  margin-bottom: 12px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.phase-accordion:hover {
  border-color: rgba(96, 165, 250, 0.34);
}

.phase-accordion.open {
  border-color: rgba(96, 165, 250, 0.42);
}

.phase-accordion-header {
  min-height: 68px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  background: rgba(22, 36, 74, 0.52);
  transition: background-color 0.2s ease;
}

.phase-accordion-header:hover {
  background: rgba(30, 45, 82, 0.76);
}

.phase-header-left {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.phase-heading-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.phase-toggle-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.phase-accordion-header:hover .phase-toggle-icon {
  color: #cbd5e1;
}

.phase-accordion.open .phase-toggle-icon {
  transform: rotate(180deg);
  color: #7dd3fc;
}

.phase-title {
  margin: 0;
  font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-heading);
  color: #f8fafc;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-subtitle {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.phase-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.55);
}

.phase-progress-label {
  color: #7dd3fc;
}

.phase-context-label {
  color: #93c5fd;
}

.phase-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.phase-mini-progress {
  width: 72px;
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.phase-mini-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  transition: width 0.4s ease;
}

.phase-tasks-body {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  display: none;
  animation: dropdownExpand 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.phase-accordion.open .phase-tasks-body {
  display: block;
}

@keyframes dropdownExpand {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body.light-theme .phase-accordion {
  background: var(--color-surface, #ffffff);
  border-color: var(--color-border, #e2e8f0);
}

body.light-theme .phase-accordion-header {
  background: var(--surface2, #f8fafc);
}

body.light-theme .phase-accordion-header:hover {
  background: var(--surface3, #f1f5f9);
}

body.light-theme .phase-title {
  color: var(--color-text, #0f172a);
}

body.light-theme .phase-toggle-icon {
  color: #64748b;
}

body.light-theme .phase-accordion.open .phase-toggle-icon {
  color: var(--color-primary, #2563eb);
}


/* Recommendations Card */
.recommendation-card {
  padding: 16px 20px;
  background: var(--panel2, rgba(28, 45, 92, 0.7));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.recommendation-card:hover {
  border-color: var(--blue2, #2F5BFF);
}

.recommendation-card.applied {
  opacity: 0.75;
  border-color: var(--green, #00E5A3);
}

.recommendation-info {
  flex: 1;
}

.recommendation-info h4 {
  margin: 0 0 4px;
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  color: var(--color-text, #ffffff);
}

.recommendation-info p {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  color: var(--muted, #8E9BAE);
  line-height: 1.45;
}

.recommendation-info small {
  color: var(--green, #00E5A3);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
}

.recommendation-actions {
  flex-shrink: 0;
}

.meeting-recommendations-panel {
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid rgba(47, 91, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(47, 91, 255, 0.09), rgba(0, 180, 216, 0.035));
}

.meeting-recommendations-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.meeting-recommendations-heading h3 {
  margin: 3px 0 5px;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
}

.meeting-recommendations-heading p {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.meeting-recommendations-engine-badge,
.meeting-recommendation-status,
.meeting-recommendation-capability {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.meeting-recommendations-engine-badge {
  flex-shrink: 0;
  padding: 7px 10px;
  color: var(--blue2);
  border: 1px solid rgba(47, 91, 255, 0.25);
  background: rgba(47, 91, 255, 0.08);
}

.meeting-recommendation-card {
  align-items: flex-start;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--panel2) 92%, transparent);
}

.meeting-recommendation-card:last-child {
  margin-bottom: 0;
}

.meeting-recommendation-status {
  margin-bottom: 7px;
  padding: 5px 8px;
}

.meeting-recommendation-status.applicable {
  color: var(--green);
  background: rgba(0, 229, 163, 0.1);
}

.meeting-recommendation-status.manual {
  color: var(--amber);
  background: rgba(245, 158, 11, 0.1);
}

.meeting-recommendation-evidence {
  display: block;
  margin-top: 7px;
  color: var(--muted) !important;
  font-weight: var(--weight-medium) !important;
  line-height: 1.45;
}

.meeting-recommendation-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.meeting-recommendation-capability {
  padding: 4px 7px;
  color: var(--blue2);
  border: 1px solid rgba(47, 91, 255, 0.18);
}

.meeting-recommendations-loading,
.meeting-recommendations-error {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  font-size: var(--text-sm);
}

@media (max-width: 700px) {
  .meeting-recommendations-heading,
  .meeting-recommendation-card {
    flex-direction: column;
  }

  .meeting-recommendation-card .recommendation-actions,
  .meeting-recommendation-card .recommendation-actions button {
    width: 100%;
  }
}

/* ----------------------------------------------------
   PROJECTS LIST & DETAIL VIEW (SCALABLE ARCHITECTURE)
   ---------------------------------------------------- */
.projects-overview-bar {
  margin-bottom: 20px;
}

/* Unified Projects Control Panel */
.projects-unified-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-apple-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.projects-overview-bar {
  display: block;
}

/* Row 1: KPI Status Pills & View Mode Toggle */
.projects-kpi-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.projects-status-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.projects-kpi-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}

.projects-kpi-card:hover {
  background: var(--component-hover-bg);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.projects-kpi-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.kpi-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kpi-pill-dot.danger { background: var(--color-danger); box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
.kpi-pill-dot.warning { background: var(--color-warning); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.kpi-pill-dot.success { background: var(--color-success); box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }
.kpi-pill-dot.done { background: var(--color-primary); box-shadow: 0 0 6px rgba(47, 91, 255, 0.4); }

.kpi-pill-label {
  font-size: var(--text-xs);
  line-height: 1;
}

.kpi-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

/* Active states for status pills */
.projects-kpi-card.active {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-apple-sm);
}

.projects-kpi-card.active .kpi-pill-count {
  background: var(--color-primary);
  color: #ffffff;
}

.projects-kpi-card.danger.active {
  background: var(--component-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.projects-kpi-card.danger.active .kpi-pill-count {
  background: var(--color-danger);
  color: #ffffff;
}

.projects-kpi-card.warning.active {
  background: var(--component-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.projects-kpi-card.warning.active .kpi-pill-count {
  background: var(--color-warning);
  color: #ffffff;
}

.projects-kpi-card.success.active {
  background: var(--component-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}

.projects-kpi-card.success.active .kpi-pill-count {
  background: var(--color-success);
  color: #ffffff;
}

.projects-kpi-card.done.active {
  background: var(--component-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.projects-kpi-card.done.active .kpi-pill-count {
  background: var(--color-primary);
  color: #ffffff;
}

/* View Mode Switcher in Row 1 */
.projects-view-toggle-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 9px;
  padding: 2px;
  background: rgba(118, 118, 128, 0.08);
  gap: 2px;
}

html[data-theme="dark"] .projects-view-toggle-group {
  background: rgba(118, 118, 128, 0.18);
  border-color: rgba(255, 255, 255, 0.06);
}

.projects-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium, 500);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-apple-spring);
}

.projects-view-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
}

html[data-theme="dark"] .projects-view-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.projects-view-btn.active {
  background: var(--color-surface, #ffffff);
  color: #2449d8;
  font-weight: var(--weight-semibold, 600);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .projects-view-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.projects-view-btn svg {
  width: 13px;
  height: 13px;
}

/* Row 2: Search, Grouping, Sort & Reset */
.projects-toolbar-bar {
  margin-bottom: 0;
}

.projects-toolbar {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: 10px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: none;
  flex-wrap: wrap;
}

.projects-search-field {
  flex: 1 1 240px;
  max-width: 380px;
  position: relative;
  display: flex;
  align-items: center;
}

.projects-search-field .search-icon {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.projects-search-input {
  width: 100%;
  height: 34px;
  padding: 0 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-family: inherit;
  transition: all 0.2s ease;
}

.projects-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.12);
}

.projects-search-clear-btn {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--color-border);
  color: var(--color-text-secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.projects-search-clear-btn:hover {
  background: var(--color-text-muted);
  color: #ffffff;
}

.projects-search-clear-btn svg {
  width: 10px;
  height: 10px;
}

.projects-control-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.projects-control-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.projects-segmented-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 9px;
  padding: 2px;
  background: rgba(118, 118, 128, 0.08);
  gap: 2px;
  flex-wrap: wrap;
}

html[data-theme="dark"] .projects-segmented-control {
  background: rgba(118, 118, 128, 0.18);
  border-color: rgba(255, 255, 255, 0.06);
}

.projects-segment-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium, 500);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-apple-spring);
  white-space: nowrap;
}

.projects-segment-btn svg {
  width: 12px;
  height: 12px;
}

.projects-segment-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
}

html[data-theme="dark"] .projects-segment-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.projects-segment-btn.active {
  background: var(--color-surface, #ffffff);
  color: #2449d8;
  font-weight: var(--weight-semibold, 600);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .projects-segment-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.projects-segment-btn.active svg {
  color: currentColor;
}

.projects-select-wrap {
  display: flex;
  align-items: center;
}

.projects-toolbar-select {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.projects-toolbar-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.projects-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
}

.projects-reset-btn svg {
  width: 11px;
  height: 11px;
}

.projects-reset-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: var(--component-danger-soft);
}

.projects-group-actions-row {
  width: 100%;
  flex: 1 1 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px dashed var(--color-border);
}

.projects-group-action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.projects-link-action-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: underline;
}

.projects-link-action-btn:hover {
  color: var(--color-primary-hover);
}

/* Projects Groups */
.projects-group-section {
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  transition: margin-bottom 0.2s ease;
}

.projects-group-section.collapsed {
  margin-bottom: 8px;
}

.projects-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: var(--shadow-apple-sm);
}

.projects-group-section.collapsed .projects-group-header {
  margin-bottom: 0;
}

.projects-group-header:hover {
  border-color: rgba(47, 91, 255, 0.35);
  background: var(--color-surface-hover);
}

.projects-group-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.projects-group-toggle-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}

.projects-group-toggle-btn .chevron-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.projects-group-section.collapsed .chevron-icon {
  transform: rotate(-90deg);
}

.projects-group-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.projects-group-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.projects-group-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.projects-group-title .group-icon {
  width: 18px;
  height: 18px;
}

.group-icon.critical { color: var(--color-danger); }
.group-icon.warning { color: var(--color-warning); }
.group-icon.stable { color: var(--color-success); }
.group-icon.done { color: var(--color-primary); }

.projects-group-badge {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.projects-group-badge.critical {
  background: var(--component-danger-soft);
  color: var(--color-danger);
  border-color: rgba(180, 35, 24, 0.25);
}

.projects-group-badge.warning {
  background: var(--component-warning-soft);
  color: var(--color-warning);
  border-color: rgba(145, 80, 7, 0.25);
}

.projects-group-badge.stable {
  background: var(--component-success-soft);
  color: var(--color-success);
  border-color: rgba(13, 113, 56, 0.25);
}

.projects-group-badge.done {
  background: var(--component-primary-soft);
  color: var(--color-primary);
  border-color: rgba(47, 91, 255, 0.25);
}

.projects-group-desc {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.projects-group-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--color-surface-muted);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Projects Grid and Cards */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-apple-sm);
}

.project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 91, 255, 0.4);
  box-shadow: var(--shadow-apple-md);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.project-card-title-group h3 {
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  margin: 0 0 4px;
  color: var(--color-text);
}

.project-tags-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.project-type-tag {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.project-category-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.project-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}

.project-risk-badge svg {
  width: 13px;
  height: 13px;
}

.project-risk-badge.critical {
  background: var(--component-danger-soft);
  color: var(--color-danger);
  border: 1px solid rgba(180, 35, 24, 0.3);
}

.project-risk-badge.warning {
  background: var(--component-warning-soft);
  color: var(--color-warning);
  border: 1px solid rgba(145, 80, 7, 0.3);
}

.project-risk-badge.stable {
  background: var(--component-success-soft);
  color: var(--color-success);
  border: 1px solid rgba(13, 113, 56, 0.3);
}

.project-risk-badge.done {
  background: var(--component-primary-soft);
  color: var(--color-primary);
  border: 1px solid rgba(47, 91, 255, 0.3);
}

.project-card-summary {
  color: var(--color-text-muted);
  margin: 0 0 12px;
  line-height: 1.45;
}

.project-card-alert-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--text-xs);
}

.project-card-alert-strip.critical {
  background: var(--component-danger-soft);
  color: var(--color-danger);
  border: 1px solid rgba(180, 35, 24, 0.2);
}

.project-card-alert-strip.warning {
  background: var(--component-warning-soft);
  color: var(--color-warning);
  border: 1px solid rgba(145, 80, 7, 0.2);
}

.alert-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.alert-item svg {
  width: 12px;
  height: 12px;
}

.progress-info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: var(--text-xs);
}

.progress-label {
  color: var(--color-text-muted);
}

.progress-percent {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.progress-track-bar {
  height: 6px;
  background: var(--color-surface-muted);
  border-radius: 6px;
  margin: 8px 0 16px;
  overflow: hidden;
}

.progress-track-bar.mini {
  height: 5px;
  margin: 4px 0 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #5275ff);
  transition: width 0.3s ease;
}

.progress-fill.critical {
  background: linear-gradient(90deg, #b42318, #f04438);
}

.progress-fill.warning {
  background: linear-gradient(90deg, #b54708, #f79009);
}

.progress-fill.stable {
  background: linear-gradient(90deg, #0d7138, #12b76a);
}

.progress-fill.done {
  background: linear-gradient(90deg, #1b38ad, #2f5bff);
}

.project-meta-rows {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.project-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.project-card-actions .project-detail-btn {
  flex: 1 1 auto;
  min-width: 0;
}

.project-card-actions .project-delete-btn {
  flex: 0 0 auto;
  color: var(--color-danger);
  border-color: rgba(180, 35, 24, 0.4);
  padding: 8px 12px;
  font-size: var(--text-xs);
}

/* Projects Compact Table View */
.projects-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-apple-sm);
  margin-bottom: 24px;
}

.projects-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--text-sm);
}

.projects-table th {
  padding: 12px 16px;
  background: var(--component-table-header-bg);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.projects-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
}

.projects-table tbody tr:last-child td {
  border-bottom: 0;
}

.projects-table tbody tr:hover {
  background: var(--component-table-row-hover);
}

.projects-table tbody tr.project-card {
  display: table-row;
  min-height: unset;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border: 0;
}

.project-name-cell .projects-table-link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
  transition: color 0.15s ease;
}

.project-name-cell .projects-table-link:hover strong {
  color: var(--color-primary);
}

.project-table-code {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: normal;
}

.table-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.table-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}

.table-overdue-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-danger);
}

.table-meta-text {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.table-actions-cell {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

/* Empty Filter State */
.projects-empty-filter-state {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}

.empty-filter-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-surface-muted);
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.empty-filter-icon-wrap svg {
  width: 24px;
  height: 24px;
}

.projects-empty-filter-state h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.projects-empty-filter-state p {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 420px;
}

/* Project Detail View */
.project-detail-header {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow-1);
}

.detail-sub-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.08);
  margin-bottom: 24px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-margin-top: 72px;
  box-sizing: border-box;
}

html[data-theme="dark"] .detail-sub-tabs {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(118, 118, 128, 0.18);
}

.detail-sub-tabs::-webkit-scrollbar {
  display: none;
}

.detail-sub-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  scroll-margin-top: 72px;
  transition: all var(--duration-fast) var(--ease-apple-spring);
  user-select: none;
  box-sizing: border-box;
}

.detail-sub-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
}

html[data-theme="dark"] .detail-sub-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.detail-sub-tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .detail-sub-tab.active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Ensure hidden attribute and collaborator navigation rules are strictly respected */
[hidden],
.nav-tab[hidden],
.collaborator-mode .nav-tab[data-view="executive"],
.collaborator-mode [data-view="executive"],
.collaborator-mode .dropdown-header-bar,
.collaborator-mode .dropdown-divider:first-of-type,
.collaborator-mode #dropdownEditCompanyBtn,
.collaborator-mode #dropdownUserMgmtBtn,
.collaborator-mode #dropdownEmailAlertsBtn,
.collaborator-mode #dropdownPrivacyBtn,
.collaborator-mode #dropdownTrustBtn {
  display: none !important;
}

/* ----------------------------------------------------
   MI TRABAJO & TASK UPDATE EXPERIENCE
   ---------------------------------------------------- */
.tasks-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tasks-project-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.tasks-project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary, #2F5BFF);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tasks-project-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tasks-project-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tasks-project-icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary, #2F5BFF);
  flex-shrink: 0;
}

.tasks-project-title {
  margin: 0;
  font: var(--weight-semibold) var(--text-md)/1.3 var(--font-heading);
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tasks-project-meta {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tasks-project-badge-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.tasks-project-stages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 8px;
}

.tasks-collaborator-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.tasks-collaborator-card:hover {
  border-color: rgba(47, 91, 255, 0.4);
}

.tasks-collaborator-card.overdue {
  border-left: 4px solid var(--color-danger, #EF4444);
}

.tasks-collaborator-card.done {
  opacity: 0.75;
}

.tasks-collaborator-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tasks-collaborator-title {
  margin: 0;
  font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-heading);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tasks-collaborator-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tasks-collaborator-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.tasks-collaborator-progress-bar-wrap {
  width: 100px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-surface-muted, rgba(0, 0, 0, 0.08));
  overflow: hidden;
}

.tasks-collaborator-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--color-primary, #2F5BFF) 0%, var(--color-success, #10B981) 100%);
  transition: width 0.3s ease;
}

.tasks-collaborator-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.task-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.task-info h4 {
  margin: 0 0 4px;
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  color: var(--color-text);
}

.task-info p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.task-actions {
  display: flex;
  gap: 8px;
}

/* Task Update Drawer Modal & Standard Overlay Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 28, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 5000;
  display: none;
  place-items: center;
  padding: 24px 16px;
  overflow-y: auto;
}

.modal-overlay.open {
  display: grid;
}

.modal-card {
  background: var(--component-modal-bg, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl, 20px);
  max-width: 620px;
  width: 100%;
  max-height: min(90vh, 800px);
  overflow-y: auto;
  padding: 24px 28px;
  box-shadow: var(--shadow-apple-sheet, 0 20px 60px rgba(0, 0, 0, 0.5));
  animation: fadeIn 0.25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 91, 255, 0.3) transparent;
}

.modal-card::-webkit-scrollbar {
  width: 6px;
}

.modal-card::-webkit-scrollbar-thumb {
  background: rgba(47, 91, 255, 0.3);
  border-radius: var(--radius-pill);
}

/* ----------------------------------------------------
   ATTENTION CENTER VIEW
   ---------------------------------------------------- */
.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.attention-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 16px);
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-apple-sm);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.attention-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-apple-md);
}

.attention-card.danger {
  border-color: rgba(244, 63, 94, 0.35);
  background: linear-gradient(180deg, var(--component-danger-soft) 0%, var(--color-surface) 54px);
}

.attention-card.warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, var(--component-warning-soft) 0%, var(--color-surface) 54px);
}

.attention-card h3 {
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  margin: 10px 0 8px;
}

.attention-card p {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
}

.impact-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: rgba(255, 111, 125, 0.12);
  color: var(--red);
  margin-bottom: 16px;
}

/* ----------------------------------------------------
   Gis CHAT VIEW (Legacy overrides removed; styled via design-system.css)
   ---------------------------------------------------- */

.chat-top-header {
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 19, 40, 0.5);
}

.chat-history-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-input-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  background: rgba(13, 19, 40, 0.5);
}

.chat-input-footer input {
  margin-bottom: 0;
}

.action-chip-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  border: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
  margin-right: 6px;
}

.action-chip-btn:hover {
  background: var(--blue-hover);
}

/* ----------------------------------------------------
   EXECUTIVE ANALYSIS DASHBOARD (DASHBOARD DE ANÁLISIS)
   ---------------------------------------------------- */

/* Sticky Filter Bar */
.analysis-filter-bar {
  position: sticky;
  top: 72px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: rgba(13, 19, 40, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.an-metadata-readiness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 180, 84, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 180, 84, 0.08), rgba(47, 91, 255, 0.07));
}

.an-metadata-readiness.is-complete {
  border-color: rgba(55, 215, 164, 0.28);
  background: linear-gradient(135deg, rgba(55, 215, 164, 0.08), rgba(47, 91, 255, 0.06));
}

.an-metadata-readiness-main {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.an-readiness-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: rgba(255, 180, 84, 0.14);
  color: var(--amber);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.an-metadata-readiness.is-complete .an-readiness-icon {
  color: var(--green);
  background: rgba(55, 215, 164, 0.14);
}

.an-metadata-readiness small,
.an-assistant-header small {
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .09em;
}

.an-metadata-readiness h2 {
  margin: 3px 0 4px;
  font: var(--weight-semibold) var(--text-md) var(--font-heading);
}

.an-metadata-readiness p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.an-readiness-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.an-readiness-progress > div,
.an-assistant-coverage > div {
  height: 7px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.an-readiness-progress span,
.an-assistant-coverage span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .25s ease;
}

.an-readiness-progress strong {
  min-width: 38px;
  font-size: var(--text-sm);
}

.an-metadata-assistant-root {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.an-metadata-assistant-root.open { display: block; }

body.an-assistant-open { overflow: hidden; }

.project-portfolio-metadata {
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid rgba(123, 140, 255, .22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(47, 91, 255, .08), var(--panel2) 46%);
}

.project-portfolio-metadata.is-incomplete {
  border-color: rgba(255, 180, 84, .3);
  background: linear-gradient(145deg, rgba(255, 180, 84, .07), var(--panel2) 46%);
}

.project-portfolio-metadata-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.project-portfolio-metadata-header .eyebrow { margin: 0; }

.project-portfolio-metadata-header h3 {
  margin: 5px 0 4px;
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  color: #fff;
}

.project-portfolio-metadata-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.project-portfolio-metadata-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.project-portfolio-metadata-actions > span {
  color: var(--green);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.project-portfolio-metadata.is-incomplete .project-portfolio-metadata-actions > span { color: var(--amber); }

.project-portfolio-metadata-actions .secondary-btn {
  padding: 7px 10px;
  font-size: var(--text-xs);
  border-color: var(--blue2);
  color: var(--blue2);
}

.project-portfolio-metadata-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
}

.project-portfolio-metadata-grid > div {
  min-width: 0;
  padding: 12px 13px;
  background: rgba(11, 20, 45, .92);
}

.project-portfolio-metadata-grid small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.project-portfolio-metadata-grid strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: var(--text-xs);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-portfolio-metadata-note {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(255, 180, 84, .09);
  color: var(--amber);
  font-size: var(--text-xs);
}

.an-assistant-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 24, .78);
  backdrop-filter: blur(8px);
}

.an-assistant-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(123, 140, 255, .25);
  border-radius: 22px;
  background: #101a36;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}

.an-assistant-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.an-assistant-header h2 {
  margin: 5px 0;
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
}

.an-assistant-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.an-assistant-project-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 26px 0;
}

.an-assistant-project-row label,
.an-assistant-field label {
  color: #e8ebf3;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.an-assistant-project-row select,
.an-assistant-field input,
.an-assistant-field select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  background: #0c1530;
  color: #fff;
  padding: 11px 12px;
  outline: none;
}

.an-assistant-project-row select:focus,
.an-assistant-field input:focus,
.an-assistant-field select:focus {
  border-color: var(--blue2);
  box-shadow: 0 0 0 3px rgba(47, 91, 255, .14);
}

.an-assistant-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 20px 26px 12px;
}

.an-assistant-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.an-assistant-steps b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.an-assistant-steps .active { color: var(--color-text, #fff); }
.an-assistant-steps .active b { background: var(--color-primary, var(--blue)); }
.an-assistant-steps .done { color: var(--green); }
.an-assistant-steps .done b { background: rgba(55, 215, 164, .14); }

.an-assistant-coverage {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px 18px;
}

.an-assistant-coverage small {
  min-width: 145px;
  color: var(--muted);
  text-align: right;
  font-size: var(--text-xs);
}

.an-assistant-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  min-height: 205px;
  padding: 22px 26px;
  border-block: 1px solid rgba(255, 255, 255, .07);
  background: rgba(6, 13, 32, .28);
}

.an-assistant-field { grid-column: span 2; }
.an-assistant-field.span-2 { grid-column: span 2; }
.an-assistant-field.span-4 { grid-column: span 4; }

.an-assistant-field label {
  display: block;
  margin-bottom: 7px;
}

.an-assistant-field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.an-assistant-schedule-status {
  align-self: end;
  padding: 13px 14px;
  border: 1px solid rgba(255, 180, 84, .22);
  border-radius: 12px;
  background: rgba(255, 180, 84, .07);
}

.an-assistant-schedule-status.ready {
  border-color: rgba(55, 215, 164, .22);
  background: rgba(55, 215, 164, .07);
}

.an-assistant-schedule-status strong { font-size: var(--text-xs); }
.an-assistant-schedule-status.warning strong { color: var(--amber); }
.an-assistant-schedule-status.ready strong { color: var(--green); }
.an-assistant-schedule-status p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-xs); }

.an-assistant-error {
  margin: 14px 26px 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255, 111, 125, .12);
  color: var(--red);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.an-assistant-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 26px 24px;
}

.an-assistant-actions > span {
  color: var(--muted);
  text-align: center;
  font-size: var(--text-xs);
}

@media (max-width: 840px) {
  .an-metadata-readiness { grid-template-columns: 1fr; gap: 14px; }
  .an-readiness-progress { max-width: none; }
  .an-assistant-dialog { width: min(100vw - 16px, 820px); max-height: calc(100dvh - 16px); }
  .an-assistant-fields { grid-template-columns: 1fr; }
  .project-portfolio-metadata-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-assistant-field,
  .an-assistant-field.span-2,
  .an-assistant-field.span-4,
  .an-assistant-schedule-status { grid-column: 1; }
}

@media (max-width: 560px) {
  .an-assistant-header,
  .an-assistant-fields { padding-inline: 18px; }
  .an-assistant-project-row,
  .an-assistant-coverage { padding-inline: 18px; }
  .an-assistant-steps { padding-inline: 18px; grid-template-columns: 1fr; }
  .an-assistant-project-row { grid-template-columns: 1fr; }
  .an-assistant-actions { grid-template-columns: 1fr 1fr; padding-inline: 18px; }
  .an-assistant-actions > span { display: none; }
  .project-portfolio-metadata-header { flex-direction: column; }
  .project-portfolio-metadata-actions { width: 100%; justify-content: space-between; }
  .project-portfolio-metadata-grid { grid-template-columns: 1fr; }
}

.filter-group-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--blue2);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.an-input, .an-select {
  background: var(--panel);
  border: 1px solid var(--line);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: var(--text-sm);
  outline: none;
  transition: all 0.2s ease;
}

.an-input:focus, .an-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.25);
}

.an-input.text-search {
  min-width: 220px;
  flex: 1;
}

.an-input.date-input {
  max-width: 145px;
}

.an-select {
  cursor: pointer;
  max-width: 190px;
}

.an-select-mini {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--panel2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237B8CFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 10px;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  height: 32px;
  line-height: 32px;
  padding: 0 24px 0 10px;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  outline: none;
  cursor: pointer;
  margin: 0 !important;
  width: auto;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.an-select-mini:hover {
  border-color: rgba(123, 140, 255, 0.4);
}

.an-select-mini:focus {
  border-color: var(--blue, #2F5BFF);
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.25);
}

.an-select-mini option {
  background-color: #152247;
  color: #ffffff;
  padding: 6px 10px;
}

.an-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--muted-bright);
  cursor: pointer;
  user-select: none;
  font-weight: var(--weight-medium);
  padding: 0 4px;
}

.an-checkbox-label input[type="checkbox"] {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.filter-right-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.count-badge {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.an-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  line-height: 34px;
  background: rgba(255, 111, 125, 0.12);
  border: 1px solid rgba(255, 111, 125, 0.28);
  color: var(--red);
  border-radius: 8px;
  padding: 0 12px;
  margin: 0 !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.an-reset-btn:hover {
  background: rgba(255, 111, 125, 0.22);
  border-color: var(--red);
}

.an-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  line-height: 34px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 0 12px;
  margin: 0 !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.an-refresh-btn:hover {
  color: var(--text);
  border-color: rgba(123, 140, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.an-refresh-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* KPI Strip */
.an-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.an-kpi-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.an-kpi-card.clickable {
  cursor: pointer;
}

.an-kpi-card.clickable:hover {
  border-color: var(--line-glow);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.an-kpi-card small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.an-kpi-card strong {
  display: block;
  font: var(--weight-semibold) var(--text-2xl) var(--font-heading);
  color: #fff;
  letter-spacing: -0.02em;
}

.an-kpi-card .hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 4px;
}

.an-kpi-card.tone-critical strong, .an-kpi-card strong.tone-critical {
  color: var(--red);
}

.an-kpi-card.tone-warning strong, .an-kpi-card strong.tone-warning {
  color: var(--amber);
}

.an-kpi-card.tone-ok strong, .an-kpi-card strong.tone-ok {
  color: var(--green);
}

.an-data-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: -10px 0 24px;
  padding: 10px 14px;
  border: 1px solid rgba(232, 235, 243, 0.08);
  border-radius: 12px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.an-data-coverage b {
  color: var(--muted-bright);
}

/* Subtabs Navigation */
.an-subtabs-bar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(118, 118, 128, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

html[data-theme="dark"] .an-subtabs-bar {
  background: rgba(118, 118, 128, 0.18);
  border-color: rgba(255, 255, 255, 0.06);
}

.an-subtabs-bar::-webkit-scrollbar {
  display: none;
}

.an-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-apple-spring);
  box-sizing: border-box;
}

.an-tab-btn:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .an-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.an-tab-btn.active {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .an-tab-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Chart Grids & Cards */
.an-charts-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.an-charts-grid {
  display: grid;
  gap: 20px;
}

.an-charts-grid.two-col {
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
}

.an-charts-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.an-chart-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.an-chart-card.full-width {
  grid-column: 1 / -1;
}

.chart-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.chart-header > div:first-child {
  flex: 1;
  min-width: min(100%, 15rem);
}

.chart-header h3 {
  font: var(--weight-semibold) var(--text-md) var(--font-heading);
  color: #fff;
  margin: 0 0 4px 0;
}

.chart-desc {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.echarts-container {
  width: 100%;
  min-height: 280px;
}

.echarts-container.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.an-chart-empty {
  max-width: 420px;
}

.an-chart-empty .empty-icon {
  display: block;
  color: var(--blue2);
  font-size: var(--text-2xl);
  line-height: 1;
  margin-bottom: 10px;
}

.an-chart-empty strong {
  display: block;
  color: #fff;
  font-size: var(--text-sm);
  margin-bottom: 6px;
}

.an-chart-empty p {
  margin: 0;
  line-height: 1.5;
}

/* Chart How-To Guide */
.chart-howto {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(232, 235, 243, 0.08);
}

.chart-howto summary {
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--blue2);
  user-select: none;
  list-style: none;
}

.chart-howto summary::-webkit-details-marker {
  display: none;
}

.chart-howto summary:hover {
  color: var(--color-text, #fff);
  text-decoration: underline;
}

.howto-content {
  background: rgba(28, 45, 92, 0.4);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--muted-bright);
  line-height: 1.5;
}

.howto-content p {
  margin: 0 0 6px 0;
}

.howto-content p:last-child {
  margin-bottom: 0;
}

/* Tab Banner */
.an-tab-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--panel2);
  border: 1px solid var(--line-glow);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 20px;
}

.an-tab-banner span {
  font-size: var(--text-sm);
  color: var(--muted-bright);
}

/* Notice Box */
.an-notice-box {
  background: rgba(47, 91, 255, 0.12);
  border: 1px solid rgba(47, 91, 255, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: var(--text-sm);
  color: var(--muted-bright);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.an-inline-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  white-space: nowrap;
}

.an-tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 24px;
  min-height: 56px;
  box-sizing: border-box;
}

.an-tab-filters-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

/* Filter Capsule: Unified label + select */
.an-tab-filters-group label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin: 0 !important;
  padding: 0 4px 0 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  cursor: pointer;
}

.an-tab-filters-group label:hover {
  border-color: rgba(123, 140, 255, 0.35);
  background: rgba(255, 255, 255, 0.055);
}

.an-tab-filters-group label:focus-within {
  border-color: var(--blue, #2F5BFF);
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.25);
  background: rgba(255, 255, 255, 0.055);
}

.an-tab-filters-group label > span {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid var(--line);
  height: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.an-tab-filters-group label select,
.an-tab-filters-group label .an-select-mini {
  border: none !important;
  background-color: transparent !important;
  color: var(--text) !important;
  height: 32px;
  line-height: 32px;
  padding: 0 22px 0 6px !important;
  margin: 0 !important;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237B8CFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 10px 10px !important;
  max-width: 220px;
  box-shadow: none !important;
}

/* Multi-select filter capsule */
.an-multiselect {
  position: relative;
  display: inline-flex;
}

.an-multiselect-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin: 0 !important;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  user-select: none;
  max-width: 260px;
}

.an-multiselect-trigger:hover {
  border-color: rgba(123, 140, 255, 0.35);
  background: rgba(255, 255, 255, 0.055);
}

.an-multiselect-trigger:focus-visible,
.an-multiselect-trigger[aria-expanded="true"] {
  border-color: var(--blue, #2F5BFF);
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.25);
  background: rgba(255, 255, 255, 0.055);
}

.an-multiselect-trigger > .an-multiselect-label {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
  padding-right: 8px;
  margin-right: 6px;
  border-right: 1px solid var(--line);
  height: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.an-multiselect-trigger > .an-multiselect-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  color: var(--text);
  font-size: var(--text-xs);
}

.an-multiselect-trigger > .an-multiselect-chevron {
  margin-left: 6px;
  color: #7B8CFF;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.an-multiselect-trigger[aria-expanded="true"] > .an-multiselect-chevron {
  transform: rotate(180deg);
}

.an-multiselect-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 290px;
  max-width: 360px;
  background: var(--panel2, #181E34);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 1000;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.an-multiselect-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.an-multiselect-search {
  height: 30px;
  font-size: var(--text-xs);
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
  color: var(--text) !important;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.an-multiselect-search:focus {
  border-color: var(--blue, #2F5BFF) !important;
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.2);
}

.an-multiselect-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.an-ms-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.an-ms-action-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--blue, #2F5BFF);
}

.an-multiselect-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
}

.an-multiselect-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: var(--text-xs);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease;
}

.an-multiselect-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.an-multiselect-item input[type="checkbox"] {
  accent-color: var(--blue, #2F5BFF);
  cursor: pointer;
  margin: 0;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.an-ms-health-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.an-ms-health-dot.tone-critical {
  background: var(--crit, #FF4D4D);
  box-shadow: 0 0 6px rgba(255, 77, 77, 0.6);
}

.an-ms-health-dot.tone-warning {
  background: var(--warn, #FFAA00);
  box-shadow: 0 0 6px rgba(255, 170, 0, 0.5);
}

.an-ms-health-dot.tone-stable,
.an-ms-health-dot.tone-ok {
  background: var(--ok, #00E5A3);
  box-shadow: 0 0 6px rgba(0, 229, 163, 0.5);
}

.an-ms-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--weight-medium);
}

.an-ms-area-tag {
  font-size: var(--text-xs);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.an-multiselect-footer {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.an-multiselect-footer .an-ms-counter {
  font-size: var(--text-xs);
  color: var(--muted);
}

.an-tab-filters-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  height: 34px;
}

.an-tab-filters-stats .count-badge {
  display: inline-flex;
  align-items: center;
  height: 34px;
  line-height: 34px;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin: 0 !important;
}

.an-tab-filters-stats .count-badge b {
  color: var(--text);
  font-weight: var(--weight-semibold);
  margin-right: 2px;
}

.an-subtabs-wrap,
#view-executive .an-subtabs-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
  margin-bottom: 24px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .an-subtabs-wrap,
  #view-executive .an-subtabs-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #view-executive .an-subtabs-bar {
    width: 100%;
    overflow-x: auto;
  }
}

.an-metadata-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  margin: 0 !important;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.an-metadata-pill-btn:hover {
  background: rgba(47, 91, 255, 0.1);
  border-color: rgba(123, 140, 255, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

.an-metadata-pill-btn .ui-icon {
  color: var(--blue2);
  flex-shrink: 0;
}

.an-metadata-pill-btn span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}

.an-metadata-pill-btn:hover span {
  color: #ffffff;
}

.an-metadata-pill-btn b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: rgba(47, 91, 255, 0.2);
  color: var(--blue2);
  transition: all 0.2s ease;
}

.an-metadata-pill-btn:hover b {
  background: rgba(47, 91, 255, 0.35);
  color: #ffffff;
}

.an-kpi-card.is-filtered-active,
#view-executive .an-kpi-card.is-filtered-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light, rgba(59, 130, 246, 0.2)), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* AI Insights Stack */
.an-insights-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.an-insight-item {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.an-insight-item.danger {
  border-left: 4px solid var(--red);
}

.an-insight-item.warning {
  border-left: 4px solid var(--amber);
}

.an-insight-item.info {
  border-left: 4px solid var(--blue2);
}

.an-insight-item.ok {
  border-left: 4px solid var(--green);
}

.insight-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.an-insight-item.danger .insight-badge { color: var(--red); }
.an-insight-item.warning .insight-badge { color: var(--amber); }
.an-insight-item.info .insight-badge { color: var(--blue2); }
.an-insight-item.ok .insight-badge { color: var(--green); }

.an-insight-item h4 {
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  margin: 0 0 6px 0;
  color: #fff;
}

.an-insight-item p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.insight-actions {
  display: flex;
  gap: 8px;
}

/* Milestones List */
.an-milestones-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 6px;
}

.an-milestone-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
  font: inherit;
}

.an-milestone-item:hover {
  border-color: var(--line-glow);
  transform: translateX(3px);
}

.an-milestone-item.danger { border-left-color: var(--red); }
.an-milestone-item.warning { border-left-color: var(--amber); }
.an-milestone-item.ok { border-left-color: var(--green); }

.an-milestone-item .m-info strong {
  display: block;
  font-size: var(--text-sm);
  color: #fff;
  margin-bottom: 2px;
}

.an-milestone-item .m-info small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
}

.an-milestone-item .m-date {
  text-align: right;
  flex-shrink: 0;
}

.an-milestone-item .m-date span {
  display: block;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-weight: var(--weight-semibold);
}

.tag-danger { color: var(--red); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.tag-warning { color: var(--amber); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
.tag-ok { color: var(--green); font-weight: var(--weight-semibold); font-size: var(--text-xs); }

/* Empty state */
.an-empty-state {
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Project Detail Side Drawer */
.an-project-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}

.an-project-drawer.open {
  display: block;
}

.an-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.an-drawer-body {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: #0F172E;
  border-left: 1px solid var(--line-glow);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.7);
  padding: 32px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: slideInDrawer 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInDrawer {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.an-code-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
  font-weight: var(--weight-semibold);
}

.drawer-top-bar h2 {
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
  color: #fff;
  margin: 0 0 4px 0;
}

.drawer-top-bar p {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

.drawer-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.drawer-close-btn:hover {
  background: rgba(255, 111, 125, 0.3);
  color: var(--red);
}

.drawer-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.drawer-health-badge.critical { background: rgba(255, 111, 125, 0.18); color: var(--red); }
.drawer-health-badge.warning { background: rgba(255, 180, 84, 0.18); color: var(--amber); }
.drawer-health-badge.stable { background: rgba(55, 215, 164, 0.18); color: var(--green); }

.drawer-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.d-stat {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.d-stat small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.d-stat strong {
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  color: #fff;
}

.drawer-section h3 {
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px 0;
}

.drawer-empty-notice {
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
}

.drawer-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.d-task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.d-task-item .t-main strong {
  display: block;
  font-size: var(--text-xs);
  color: #fff;
}

.d-task-item .t-main small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
}

.d-task-item .t-badge {
  text-align: right;
  flex-shrink: 0;
}

.d-task-item .t-badge small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
}

.drawer-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}

@media (max-width: 1050px) {
  .analysis-filter-bar {
    position: relative;
    top: auto;
  }

  .an-charts-grid.two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .analysis-filter-bar {
    padding: 12px;
  }

  .filter-group-icon {
    width: 100%;
  }

  .an-input.text-search,
  .an-input.date-input,
  .an-select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .filter-right-stats,
  .an-tab-banner,
  .an-notice-box,
  .an-tab-toolbar {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .filter-right-stats {
    margin-left: 0;
  }

  .an-chart-card {
    padding: 16px 12px;
    border-radius: 16px;
  }

  .an-drawer-body {
    max-width: none;
    padding: 24px 18px;
  }
}

/* Toast */
.toast-msg {
  position: fixed;
  right: 30px;
  top: 90px;
  background: var(--panel2);
  border: 1px solid var(--line-glow);
  color: #fff;
  padding: 14px 20px;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 200;
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s ease;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.toast-msg.show {
  transform: translateY(0);
  opacity: 1;
}

/* ----------------------------------------------------
   FLOATING CHAT ACTION BUTTON & CHAT WIDGET
   ---------------------------------------------------- */
.gis-chat-fab,
#gisChatFab {
  display: none !important;
}

.gis-chat-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 36px rgba(47, 91, 255, 0.58);
  border-color: rgba(255, 255, 255, 0.4);
}

.gis-chat-fab .fab-avatar {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  font-family: var(--font-heading);
  color: #fff;
}

.gis-chat-fab .fab-pulse-dot {
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: fabPulse 2s infinite;
}

@keyframes fabPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.gis-chat-fab .fab-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: #fff;
}

/* Full-Screen Gis Conversational Overlay Window (Modal Overlay mode only) */
.gis-chat-widget:not(.chat-workspace) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background: rgba(4, 8, 20, 0.82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96) translateY(12px);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}

.gis-chat-widget.open:not(.chat-workspace) {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: scale(1) translateY(0);
}

.gis-chat-widget:not(.chat-workspace) .chat-fullscreen-inner {
  width: 100%;
  max-width: 960px;
  height: 100%;
  max-height: min(90vh, 880px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111a36 0%, #0c1328 100%);
  border: 1px solid rgba(232, 235, 243, 0.12);
  border-radius: 24px;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Unified Conversational Chat Header */
.chat-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 22px 10px 14px;
  background: linear-gradient(180deg, rgba(16, 23, 48, 0.9) 0%, rgba(9, 14, 32, 0.94) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

/* Gis Persona Slot (Interactive Avatar) */
.chat-header-persona-slot {
  width: 98px;
  height: 78px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.chat-header-persona-slot:hover {
  transform: translateY(-1.5px) scale(1.02);
  filter: drop-shadow(0 4px 14px rgba(47, 91, 255, 0.18));
}

.chat-header-persona-slot .gis-director-portrait {
  width: 100%;
  max-width: 98px;
  margin: 0;
  cursor: pointer;
}

.chat-header-persona-slot .gis-idea-container {
  display: none !important;
}

.chat-header-persona-slot .gis-director-art {
  width: 100%;
  height: auto;
  max-height: 78px;
  display: block;
}

/* Middle Section: Identity & Dynamic Conversational Context */
.chat-header-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

.chat-header-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-header-meta .chat-brand-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
}

.chat-director-badge {
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
  padding: 2px 8.5px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: #6ee7b7;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

.chat-director-pulse-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
  animation: pulseGreenGis 2s infinite ease-in-out;
}

@keyframes pulseGreenGis {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.75; }
}

.chat-widget-header.is-thinking .chat-director-pulse-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.chat-widget-header.is-thinking .chat-director-badge {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fde68a;
}

/* Active Thinking Micro-Animations */
.chat-widget-header.is-thinking .gis-director-hand-left {
  animation: gis-director-type 1.2s ease-in-out infinite !important;
}

.chat-widget-header.is-thinking .gis-director-hand-right {
  animation: gis-director-type 1.2s 0.2s ease-in-out infinite !important;
}

.chat-widget-header.is-thinking .gis-director-art circle[filter*="drop-shadow"] {
  animation: gis-laptop-pulse 1.4s ease-in-out infinite alternate;
}

@keyframes gis-laptop-pulse {
  0% { filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.6)); }
  100% { filter: drop-shadow(0 0 9px rgba(147, 197, 253, 1)); }
}

/* Right Section Controls */
.chat-header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-hdr-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #94a3b8;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.chat-hdr-icon-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.chat-hdr-icon-btn:active {
  transform: translateY(0);
}

.chat-hdr-icon-btn.close-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.2);
}

/* Custom Minimalist Project Selector (Refined Executive Pill) */
.custom-project-selector {
  position: relative;
  display: inline-flex;
  margin-top: 1px;
}

.project-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3.5px 12px 3.5px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-select-trigger:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.035) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-0.5px);
}

.custom-project-selector.active .project-select-trigger {
  background: linear-gradient(180deg, rgba(47, 91, 255, 0.16) 0%, rgba(47, 91, 255, 0.08) 100%);
  border-color: rgba(99, 137, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.selector-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  opacity: 0.9;
}

.selector-icon .ui-icon {
  width: 13px;
  height: 13px;
}

.selector-label-main {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: #e2e8f0;
  letter-spacing: -0.01em;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector-caret {
  font-size: var(--text-xs);
  color: #94a3b8;
  opacity: 0.65;
  margin-left: 1px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, color 0.2s ease;
}

.custom-project-selector.active .selector-caret {
  transform: rotate(180deg);
  color: #93c5fd;
  opacity: 1;
}

/* Dropdown Popup Menu (Luxury Frosted Menu) */
.project-select-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: auto;
  min-width: 290px;
  max-width: 360px;
  z-index: 100;
  background: rgba(12, 18, 38, 0.96);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 16px rgba(47, 91, 255, 0.1);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
}

.custom-project-selector.active .project-select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.dropdown-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 9px 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 5px;
}

.proj-count-badge {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  padding: 1.5px 6.5px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.dropdown-options-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.project-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.project-select-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateX(2px);
}

.project-select-option.selected {
  background: rgba(47, 91, 255, 0.15);
  border-color: rgba(47, 91, 255, 0.35);
  color: #93c5fd;
}

.project-select-option.selected .option-name {
  color: #93c5fd;
  font-weight: var(--weight-semibold);
}

.option-left {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}

.option-icon {
  font-size: var(--text-sm);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}

.option-icon .ui-icon {
  width: 15px;
  height: 15px;
}

.option-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 1px;
}

.option-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.option-sub {
  font-size: var(--text-xs);
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.option-check {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #60a5fa;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Light Theme Support for Unified Header */
html[data-theme="light"] .chat-widget-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 248, 253, 0.97) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .chat-header-meta .chat-brand-title {
  color: #0f172a;
}

html[data-theme="light"] .chat-director-badge {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #065f46;
}

html[data-theme="light"] .project-select-trigger {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.035) 0%, rgba(0, 0, 0, 0.015) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
}

html[data-theme="light"] .project-select-trigger:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  border-color: rgba(0, 0, 0, 0.14);
}

html[data-theme="light"] .selector-label-main {
  color: #1e293b;
}

html[data-theme="light"] .selector-icon {
  color: #2563eb;
}

html[data-theme="light"] .project-select-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .dropdown-header-bar {
  color: #64748b;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .proj-count-badge {
  background: rgba(0, 0, 0, 0.04);
  color: #475569;
  border-color: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .project-select-option {
  color: #334155;
}

html[data-theme="light"] .project-select-option:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .project-select-option.selected {
  background: rgba(47, 91, 255, 0.08);
  border-color: rgba(47, 91, 255, 0.25);
  color: #1d4ed8;
}

html[data-theme="light"] .project-select-option.selected .option-name {
  color: #1d4ed8;
}

html[data-theme="light"] .option-name {
  color: #1e293b;
}

html[data-theme="light"] .chat-hdr-icon-btn {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
  color: #64748b;
}

html[data-theme="light"] .chat-hdr-icon-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.15);
}

/* Chat Body */
.chat-history-body {
  flex: 1;
  padding: 10px 28px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 235, 243, 0.15) transparent;
}

.chat-history-body::-webkit-scrollbar {
  width: 6px;
}

.chat-history-body::-webkit-scrollbar-track {
  background: transparent;
}

.chat-history-body::-webkit-scrollbar-thumb {
  background: rgba(232, 235, 243, 0.15);
  border-radius: 6px;
}

.chat-history-body::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 235, 243, 0.3);
}

@keyframes bubbleFadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubble {
  display: flex;
  gap: 12px;
  animation: bubbleFadeInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chat-bubble.user {
  align-self: flex-end;
  flex-direction: row-reverse;
  max-width: 80%;
}

.chat-bubble.user .bubble-content {
  background: linear-gradient(135deg, #2f5bff 0%, #1e40d6 100%);
  color: #ffffff !important;
  border-radius: 18px 18px 4px 18px;
  padding: 14px 20px;
  font-size: var(--text-sm);
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(47, 91, 255, 0.28);
  word-break: break-word;
}

.chat-bubble.user .chat-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.25);
  border: 1px solid rgba(47, 91, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.chat-bubble.gis {
  align-self: flex-start;
  max-width: 88%;
}

.chat-bubble.gis .chat-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b66ff 0%, #2146e6 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading);
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(47, 91, 255, 0.3);
}

.chat-bubble.gis .bubble-content {
  background: rgba(18, 28, 58, 0.65);
  border: 1px solid rgba(232, 235, 243, 0.1);
  border-radius: 4px 18px 18px 18px;
  padding: 18px 22px;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text, #ffffff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  word-break: break-word;
}

.chat-bubble.gis .markdown-body p:not(:last-child) {
  margin-bottom: 0.75em;
}

.chat-bubble.gis .markdown-body strong,
.chat-bubble.gis .markdown-body b {
  color: #ffffff;
  font-weight: var(--weight-semibold);
}

.chat-bubble.gis .markdown-body ul,
.chat-bubble.gis .markdown-body ol {
  margin: 0.5em 0;
  padding-left: 1.4em;
}

.chat-bubble.gis .markdown-body li {
  margin-bottom: 0.35em;
}

.chat-bubble.gis .markdown-body table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(232, 235, 243, 0.12);
  font-size: var(--text-sm);
}

.chat-bubble.gis .markdown-body th {
  background: rgba(47, 91, 255, 0.15);
  padding: 8px 12px;
  font-weight: var(--weight-semibold);
  text-align: left;
  border-bottom: 1px solid rgba(232, 235, 243, 0.12);
}

.chat-bubble.gis .markdown-body td {
  padding: 8px 12px;
  border-top: 1px solid rgba(232, 235, 243, 0.06);
}

.bubble-action-chips {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(232, 235, 243, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(47, 91, 255, 0.14);
  border: 1px solid rgba(47, 91, 255, 0.32);
  color: #93c5fd;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 0;
}

.action-chip-btn:hover {
  background: #2f5bff;
  border-color: #2f5bff;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(47, 91, 255, 0.4);
}

/* Minimalist Footer & Input Capsule */
.chat-input-footer {
  padding: 6px 28px 22px;
  background: transparent;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Minimalist Ghost Quick Suggestion Chips */
.chat-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.chat-quick-chips button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--color-slate-300, #94a3b8);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 6px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

.chat-quick-chips button:hover {
  background: rgba(47, 91, 255, 0.15);
  border-color: rgba(47, 91, 255, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 91, 255, 0.2);
}

/* Integrated Single Input Capsule (ChatGPT/Claude Style) */
.chat-input-box {
  display: flex;
  flex-direction: column;
  min-height: 84px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 12px 14px 10px 18px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chat-input-box:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(18, 27, 51, 0.82);
}

.chat-input-box:focus-within {
  border-color: rgba(47, 91, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
  background: rgba(18, 27, 51, 0.92);
}

.chat-input-field {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  max-height: 140px;
  resize: none;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #ffffff;
  font-size: var(--text-sm);
  line-height: 1.5;
  letter-spacing: -0.01em;
  padding: 0;
  margin: 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.chat-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-input-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Clear Conversation Pill Button */
.chat-clear-conversation-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
}

.chat-clear-conversation-btn .ui-icon {
  width: 13px;
  height: 13px;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.chat-clear-conversation-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
  transform: translateY(-0.5px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
}

.chat-clear-conversation-btn:hover .ui-icon {
  color: #f87171;
}

/* Upward Project Selector Pop-up inside Chat Input Box */
.chat-input-box .custom-project-selector {
  position: relative;
  display: inline-flex;
}

.chat-input-box .project-select-dropdown {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  right: auto !important;
  transform: translateY(6px) scale(0.97);
}

.chat-input-box .custom-project-selector.active .project-select-dropdown {
  transform: translateY(0) scale(1) !important;
}

/* Light Theme overrides for Chat Input Card */
html[data-theme="light"] .chat-input-box {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .chat-input-box:hover {
  border-color: rgba(0, 0, 0, 0.16);
  background: #ffffff;
}

html[data-theme="light"] .chat-input-box:focus-within {
  border-color: rgba(47, 91, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

html[data-theme="light"] .chat-input-field {
  color: #0f172a;
}

html[data-theme="light"] .chat-input-field::placeholder {
  color: #94a3b8;
}

html[data-theme="light"] .chat-input-toolbar {
  border-top-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .chat-clear-conversation-btn {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.035) 0%, rgba(0, 0, 0, 0.015) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  color: #64748b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
}

html[data-theme="light"] .chat-clear-conversation-btn .ui-icon {
  color: #64748b;
}

html[data-theme="light"] .chat-clear-conversation-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.1);
}

html[data-theme="light"] .chat-clear-conversation-btn:hover .ui-icon {
  color: #dc2626;
}

.chat-input-field:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.chat-input-field::placeholder {
  color: #94a3b8;
  opacity: 0.75;
  font-weight: var(--weight-regular);
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease;
}

.chat-input-box:focus-within .chat-input-field::placeholder {
  opacity: 0.45;
}

.chat-submit-btn {
  width: 38px;
  height: 38px;
  min-height: 38px !important;
  max-height: 38px;
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(135deg, var(--blue) 0%, #1a3edc 100%);
  color: #ffffff !important;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 10px rgba(47, 91, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}

.chat-submit-btn .ui-icon {
  width: 18px;
  height: 18px;
  stroke: #ffffff !important;
  transform: translate(1px, 0);
  transition: transform 0.2s ease;
}

.chat-submit-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(47, 91, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.chat-submit-btn:hover .ui-icon {
  transform: translate(2px, -1px);
}

.chat-submit-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(47, 91, 255, 0.35);
}

.chat-msg-avatar {
  width: 32px;
  height: 32px;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.chat-bubble.thinking .chat-msg-avatar {
  animation: thinkingAvatarPulse 1.5s infinite ease-in-out;
}

@keyframes thinkingAvatarPulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 91, 255, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(47, 91, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 91, 255, 0); }
}

/* Gis AI Thinking / Processing Animation Indicator */
.gis-thinking-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.thinking-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.thinking-dots .dot {
  width: 7px;
  height: 7px;
  background: var(--blue2, #60a5fa);
  border-radius: 50%;
  animation: thinkingBounce 1.4s infinite ease-in-out both;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
}

.thinking-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.thinking-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

.thinking-dots .dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes thinkingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.35;
  }
  40% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.9);
  }
}

.thinking-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #94a3b8;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #94a3b8 0%, #ffffff 50%, #94a3b8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: thinkingShimmer 2.5s infinite linear;
}

@keyframes thinkingShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.bubble-action-chips {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Mobile Media Queries for Chat Overlay */
@media (max-width: 768px) {
  .gis-chat-widget {
    padding: 0;
  }

  .chat-fullscreen-inner {
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }

  .chat-widget-header {
    padding: 12px 16px;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
  }

  .chat-brand-title {
    font-size: var(--text-sm);
  }

  .selector-label-main {
    max-width: 125px;
  }

  .project-select-dropdown {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .chat-history-body {
    padding: 16px;
  }

  .chat-bubble {
    max-width: 94%;
  }

  .chat-input-footer {
    padding: 10px 14px max(14px, calc(14px + env(safe-area-inset-bottom)));
  }

  /* Force 16px font size on inputs to prevent Mobile Safari / Chrome iOS auto-zoom on focus */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  input[type="password"],
  textarea,
  select,
  .input-field,
  .chat-input-field {
    font-size: var(--text-md) !important;
    touch-action: manipulation;
  }

  .chat-quick-chips {
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .chat-quick-chips button {
    flex-shrink: 0;
  }

  .stage-proposal-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .stage-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .phase-accordion-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .phase-header-right {
    width: 100%;
    justify-content: flex-end;
  }

  .phase-mini-progress {
    flex: 1;
    max-width: 120px;
  }

  .phase-tasks-body {
    padding: 12px 14px 16px;
  }
}

/* Responsive Rules */
@media (max-width: 900px) {
  .today-greeting-box {
    grid-template-columns: 1fr;
  }
  .app-header {
    padding: 0 12px;
    gap: 10px;
  }
  .header-right {
    gap: 8px;
  }
  .user-info {
    display: none;
  }
}

/* ====================================================
   Gis MODAL SYSTEM STYLES
   ==================================================== */
.gis-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gis-modal.open,
.gis-modal.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.gis-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 10, 24, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1;
}

.gis-modal-card {
  position: relative;
  z-index: 2;
  background: #0b1329;
  border: 1px solid var(--line-glow, rgba(47, 91, 255, 0.35));
  border-radius: 24px;
  width: 100%;
  max-width: 650px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 40px rgba(47, 91, 255, 0.15);
  overflow: hidden;
  animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gis-modal-card.modal-lg {
  max-width: 960px;
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gis-modal-header {
  padding: 20px 28px;
  background: rgba(15, 25, 52, 0.95);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.gis-modal-header h2 {
  margin: 0;
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted-bright, #a0aec0);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: var(--text-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ff6f7d;
  transform: scale(1.05);
}

.gis-modal-body {
  padding: 28px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 91, 255, 0.4) transparent;
}

.gis-modal-body::-webkit-scrollbar {
  width: 6px;
}

.gis-modal-body::-webkit-scrollbar-thumb {
  background: rgba(47, 91, 255, 0.4);
  border-radius: 99px;
}

/* Recommendation change-control modal */
.recommendation-review-modal-card {
  max-width: 1120px;
  max-height: min(94dvh, 900px);
}

.recommendation-review-header {
  align-items: flex-start;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.recommendation-review-header > div {
  min-width: 0;
}

.recommendation-review-header h2 {
  margin-top: 4px;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.recommendation-review-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.recommendation-review-eyebrow {
  display: block;
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: 0.1em;
}

.recommendation-review-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: stretch;
  gap: 18px;
  min-height: 0;
  scroll-padding-bottom: 24px;
}

.recommendation-review-body > section:not(.recommendation-review-suggestion):not(.recommendation-review-overview) {
  grid-column: 1 / -1;
}

.recommendation-review-suggestion,
.recommendation-review-overview,
.recommendation-review-comparison,
.recommendation-review-impact {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
}

.recommendation-review-suggestion {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  border-color: rgba(47, 91, 255, 0.35);
  background: linear-gradient(135deg, rgba(47, 91, 255, 0.12), rgba(47, 91, 255, 0.035) 58%, var(--panel2));
}

.recommendation-review-suggestion::after {
  position: absolute;
  top: -55px;
  right: -35px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.08);
  content: '';
  pointer-events: none;
}

.recommendation-review-suggestion h3 {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-lg)/1.35 var(--font-heading);
}

.recommendation-review-suggestion p {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted-bright, var(--muted));
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: normal;
}

.recommendation-review-overview {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.recommendation-review-progress-copy,
.recommendation-review-section-heading,
.recommendation-review-operation-header,
.recommendation-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.recommendation-review-progress-copy h3,
.recommendation-review-section-heading h3 {
  margin: 0;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.recommendation-review-progress-copy p,
.recommendation-review-section-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.recommendation-review-progress-copy strong {
  flex-shrink: 0;
  color: var(--color-text);
  font-size: var(--text-xs);
}

.recommendation-review-progress {
  height: 7px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(142, 155, 174, 0.18);
}

.recommendation-review-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue2), var(--green));
  transition: width 0.2s ease;
}

.recommendation-review-validation {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.recommendation-review-validation.is-valid {
  color: var(--green);
  background: rgba(55, 215, 164, 0.09);
  border: 1px solid rgba(55, 215, 164, 0.22);
}

.recommendation-review-validation.is-invalid {
  color: var(--amber);
  background: rgba(255, 180, 84, 0.09);
  border: 1px solid rgba(255, 180, 84, 0.22);
}

.recommendation-review-operations {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.recommendation-review-operation {
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.recommendation-review-operation.is-approved {
  border-color: rgba(55, 215, 164, 0.55);
  box-shadow: inset 3px 0 0 var(--green);
}

.recommendation-review-operation-header {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(47, 91, 255, 0.055);
}

.recommendation-review-operation-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.recommendation-review-operation-title h4 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.recommendation-review-operation-title p {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--text-xs);
}

.recommendation-review-operation-title p span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.recommendation-review-task-stage {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(47, 91, 255, 0.22);
  border-radius: 999px;
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.08);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.recommendation-review-operation-number,
.recommendation-review-operation-status,
.recommendation-review-readonly-badge,
.recommendation-review-source {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.recommendation-review-operation-number {
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.12);
}

.recommendation-review-operation-status {
  color: var(--amber);
  background: rgba(255, 180, 84, 0.12);
}

.recommendation-review-operation.is-approved .recommendation-review-operation-status {
  color: var(--green);
  background: rgba(55, 215, 164, 0.12);
}

.recommendation-review-operation-body {
  padding: 18px;
}

.recommendation-review-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.recommendation-review-field-group {
  grid-column: 1 / -1;
  margin: 4px 0 -2px;
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.recommendation-review-field {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.recommendation-review-field.has-dependency-selector {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-template-columns: minmax(150px, 0.55fr) minmax(300px, 1.45fr) auto;
  align-items: start;
}

.recommendation-review-field.has-dependency-selector:focus-within {
  z-index: 20;
}

.recommendation-review-dependency-control {
  min-width: 0;
}

.recommendation-review-dependency-control .selected-tags-container {
  min-height: 24px;
}

.recommendation-review-dependency-control .dependency-dropdown {
  max-height: 280px !important;
  background: var(--component-modal-bg, var(--panel2)) !important;
  box-shadow: var(--shadow) !important;
}

.recommendation-review-field-copy {
  min-width: 0;
}

.recommendation-review-field label {
  display: block;
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.recommendation-review-field small {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: var(--text-xs);
}

.recommendation-review-input {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.recommendation-review-input:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.recommendation-review-delete-notice,
.recommendation-review-empty-impact {
  grid-column: 1 / -1;
  padding: 13px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.recommendation-review-delete-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.recommendation-review-field-approve {
  min-width: 88px;
  padding: 8px 11px;
  white-space: nowrap;
}

.recommendation-review-readonly-badge {
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.12);
}

.recommendation-gantt-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.recommendation-gantt-metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(47, 91, 255, 0.045);
}

.recommendation-gantt-metrics span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.recommendation-gantt-metrics strong {
  overflow-wrap: anywhere;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.recommendation-gantt-metrics .recommendation-gantt-impact-metric {
  border-color: rgba(55, 215, 164, 0.3);
  background: rgba(55, 215, 164, 0.07);
}

.recommendation-gantt-metrics .recommendation-gantt-current-metric {
  border-color: rgba(37, 99, 235, 0.3);
  background: rgba(37, 99, 235, 0.07);
}

.recommendation-gantt-current-metric strong {
  color: #2563eb;
}

.recommendation-gantt-metrics .recommendation-gantt-proposed-metric {
  border-color: rgba(22, 163, 74, 0.34);
  background: rgba(22, 163, 74, 0.08);
}

.recommendation-gantt-proposed-metric strong {
  color: #16a34a;
}

.recommendation-gantt-impact-metric strong {
  color: var(--green);
}

.recommendation-gantt-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin-top: 14px;
  color: var(--muted-bright, var(--muted));
  font-size: var(--text-xs);
}

.recommendation-gantt-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.recommendation-gantt-legend-bar {
  display: inline-block;
  width: 22px;
  height: 8px;
  border-radius: 3px;
}

.recommendation-gantt-legend-bar.current {
  border: 1px solid #2563eb;
  background: repeating-linear-gradient(135deg, rgba(37, 99, 235, 0.76) 0 3px, rgba(96, 165, 250, 0.22) 3px 6px);
}

.recommendation-gantt-legend-bar.proposed {
  border: 1px solid #15803d;
  background: linear-gradient(90deg, #16a34a, #4ade80);
}

.recommendation-gantt-legend-marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.recommendation-gantt-legend-marker.requested {
  background: var(--blue2);
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.15);
}

.recommendation-gantt-legend-marker.automatic {
  border-radius: 2px;
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(255, 180, 84, 0.14);
}

.recommendation-gantt-scroll-hint {
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.recommendation-gantt-scroll {
  max-height: min(62dvh, 680px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  scrollbar-color: rgba(47, 91, 255, 0.5) rgba(142, 155, 174, 0.1);
}

.recommendation-gantt-scroll:focus-visible {
  outline: 3px solid rgba(47, 91, 255, 0.42);
  outline-offset: 2px;
}

.recommendation-gantt-table {
  width: calc(300px + var(--recommendation-gantt-width));
  min-width: calc(300px + var(--recommendation-gantt-width));
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text);
  table-layout: fixed;
}

.recommendation-gantt-table th,
.recommendation-gantt-table td {
  padding: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.recommendation-gantt-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 48px;
  background: var(--panel2);
}

.recommendation-gantt-task-header,
.recommendation-gantt-task-cell {
  position: sticky;
  left: 0;
  z-index: 6;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  border-right: 1px solid var(--line);
  background: var(--panel2);
  box-shadow: 8px 0 18px rgba(5, 10, 24, 0.16);
}

.recommendation-gantt-task-header {
  z-index: 10 !important;
  padding: 0 14px !important;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.recommendation-gantt-axis-header,
.recommendation-gantt-timeline-cell {
  width: var(--recommendation-gantt-width);
  min-width: var(--recommendation-gantt-width);
}

.recommendation-gantt-axis {
  position: relative;
  height: 48px;
  background: linear-gradient(180deg, rgba(47, 91, 255, 0.055), transparent);
}

.recommendation-gantt-axis > span {
  position: absolute;
  bottom: 11px;
  color: var(--muted-bright, var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transform: translateX(-50%);
}

.recommendation-gantt-axis > span:first-child {
  transform: translateX(4px);
}

.recommendation-gantt-axis > span:last-child {
  transform: translateX(calc(-100% - 4px));
}

.recommendation-gantt-stage-row th {
  position: relative;
  z-index: 5;
  padding: 8px 13px;
  border-bottom-color: rgba(123, 140, 255, 0.25);
  background: rgba(47, 91, 255, 0.11);
  color: var(--color-text);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.recommendation-gantt-stage-row small {
  margin-left: 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.recommendation-gantt-task-row:last-child th,
.recommendation-gantt-task-row:last-child td {
  border-bottom: 0;
}

.recommendation-gantt-task-row.is-requested .recommendation-gantt-task-cell,
.recommendation-gantt-task-row.is-created .recommendation-gantt-task-cell,
.recommendation-gantt-task-row.is-deleted .recommendation-gantt-task-cell {
  box-shadow: inset 3px 0 0 var(--blue2), 8px 0 18px rgba(5, 10, 24, 0.16);
}

.recommendation-gantt-task-row.is-automatic .recommendation-gantt-task-cell {
  box-shadow: inset 3px 0 0 var(--amber), 8px 0 18px rgba(5, 10, 24, 0.16);
}

.recommendation-gantt-task-cell {
  height: 82px;
  padding: 9px 13px !important;
  vertical-align: middle;
}

.recommendation-gantt-task-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recommendation-gantt-task-heading > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendation-gantt-change-kind {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(142, 155, 174, 0.11);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.recommendation-gantt-change-kind.requested,
.recommendation-gantt-change-kind.created,
.recommendation-gantt-change-kind.deleted {
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.12);
}

.recommendation-gantt-change-kind.automatic {
  color: var(--amber);
  background: rgba(255, 180, 84, 0.12);
}

.recommendation-gantt-stage-move,
.recommendation-gantt-date-pair {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendation-gantt-stage-move {
  color: var(--blue2);
  font-weight: var(--weight-semibold);
}

.recommendation-gantt-date-pair b {
  display: inline-block;
  width: 48px;
  color: var(--muted-bright, var(--muted));
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.recommendation-gantt-timeline-cell {
  height: 82px;
  vertical-align: middle;
  background: rgba(142, 155, 174, 0.018);
}

.recommendation-gantt-timeline {
  position: relative;
  height: 82px;
}

.recommendation-gantt-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.recommendation-gantt-grid > span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(142, 155, 174, 0.18);
}

.recommendation-gantt-lane {
  position: absolute;
  left: 0;
  right: 0;
  height: 32px;
  border-radius: 4px;
}

.recommendation-gantt-lane.current {
  top: 8px;
}

.recommendation-gantt-lane.proposed {
  bottom: 8px;
  background: rgba(22, 163, 74, 0.045);
}

.recommendation-gantt-lane-label {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 1;
  color: rgba(142, 155, 174, 0.56);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.recommendation-gantt-bar {
  position: absolute;
  top: 8px;
  z-index: 2;
  min-width: 6px;
  height: 16px;
  border-radius: 5px;
}

.recommendation-gantt-bar.current {
  border: 1px solid #2563eb;
  background: repeating-linear-gradient(135deg, rgba(37, 99, 235, 0.82) 0 4px, rgba(96, 165, 250, 0.2) 4px 8px);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.2);
}

.recommendation-gantt-bar.proposed {
  border: 1px solid #15803d;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.25);
}

.recommendation-gantt-milestone {
  position: absolute;
  top: 9px;
  z-index: 2;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
}

.recommendation-gantt-milestone.current {
  border: 2px solid #2563eb;
  background: #93c5fd;
}

.recommendation-gantt-milestone.proposed {
  border: 2px solid #15803d;
  background: #4ade80;
}

.recommendation-gantt-missing {
  position: absolute;
  left: 10px;
  top: 50%;
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: italic;
  transform: translateY(-50%);
}

.recommendation-gantt-scenario-heading th {
  position: sticky;
  left: 0;
  z-index: 7;
  padding: 13px 16px !important;
  border-top: 10px solid var(--panel2);
  border-bottom-width: 1px;
}

.recommendation-gantt-scenario-heading th,
.recommendation-gantt-scenario-heading th > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.recommendation-gantt-scenario-heading th > span {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.recommendation-gantt-scenario-heading strong {
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.recommendation-gantt-scenario-heading small {
  color: var(--muted-bright, var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.recommendation-gantt-scenario-heading b {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.recommendation-gantt-scenario-heading.scenario-current th {
  border-bottom-color: rgba(37, 99, 235, 0.42);
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.07));
}

.recommendation-gantt-scenario-heading.scenario-current b {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.24);
}

.recommendation-gantt-scenario-heading.scenario-proposed th {
  border-bottom-color: rgba(22, 163, 74, 0.46);
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.2), rgba(22, 163, 74, 0.07));
}

.recommendation-gantt-scenario-heading.scenario-proposed b {
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.24);
}

.recommendation-gantt-hierarchy-cell {
  box-shadow: 8px 0 18px rgba(5, 10, 24, 0.16);
}

.recommendation-gantt-hierarchy-cell.level-project {
  height: 68px;
  padding: 10px 13px !important;
}

.recommendation-gantt-hierarchy-cell.level-stage {
  height: 56px;
  padding: 8px 13px 8px 23px !important;
}

.recommendation-gantt-hierarchy-cell.level-task {
  height: 52px;
  padding: 7px 13px 7px 58px !important;
}

.recommendation-gantt-hierarchy-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.recommendation-gantt-hierarchy-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.recommendation-gantt-hierarchy-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-project .recommendation-gantt-hierarchy-copy {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.level-project .recommendation-gantt-hierarchy-title strong {
  font-size: var(--text-sm);
}

.recommendation-gantt-hierarchy-title small {
  flex-shrink: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.recommendation-gantt-toggle {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(142, 155, 174, 0.28);
  border-radius: 6px;
  color: var(--muted-bright, var(--muted));
  background: rgba(142, 155, 174, 0.08);
  cursor: pointer;
}

.recommendation-gantt-toggle:hover {
  color: var(--color-text);
  background: rgba(142, 155, 174, 0.16);
}

.recommendation-gantt-toggle:focus-visible {
  outline: 2px solid var(--blue2);
  outline-offset: 2px;
}

.recommendation-gantt-toggle > span {
  font-size: var(--text-lg);
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.recommendation-gantt-toggle.is-collapsed > span {
  transform: rotate(0deg);
}

.scenario-current .recommendation-gantt-hierarchy-cell {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.07), var(--panel2) 58%);
}

.scenario-proposed .recommendation-gantt-hierarchy-cell {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.075), var(--panel2) 58%);
}

.scenario-current .recommendation-gantt-hierarchy-cell.level-project {
  box-shadow: inset 4px 0 0 #1d4ed8, 8px 0 18px rgba(5, 10, 24, 0.16);
}

.scenario-current .recommendation-gantt-hierarchy-cell.level-stage {
  box-shadow: inset 3px 0 0 #3b82f6, 8px 0 18px rgba(5, 10, 24, 0.16);
}

.scenario-proposed .recommendation-gantt-hierarchy-cell.level-project {
  box-shadow: inset 4px 0 0 #15803d, 8px 0 18px rgba(5, 10, 24, 0.16);
}

.scenario-proposed .recommendation-gantt-hierarchy-cell.level-stage {
  box-shadow: inset 3px 0 0 #22c55e, 8px 0 18px rgba(5, 10, 24, 0.16);
}

.recommendation-gantt-timeline-cell.level-project,
.recommendation-gantt-timeline.level-project {
  height: 68px;
}

.recommendation-gantt-timeline-cell.level-stage,
.recommendation-gantt-timeline.level-stage {
  height: 56px;
}

.recommendation-gantt-timeline-cell.level-task,
.recommendation-gantt-timeline.level-task {
  height: 52px;
}

.recommendation-gantt-bar {
  top: 50%;
  transform: translateY(-50%);
}

.recommendation-gantt-bar.project {
  height: 26px;
  border-radius: 7px;
}

.recommendation-gantt-bar.stage {
  height: 20px;
  border-radius: 6px;
}

.recommendation-gantt-bar.task {
  height: 14px;
  border-radius: 4px;
}

.recommendation-gantt-bar.current.project {
  border-color: #1e40af;
  background: linear-gradient(90deg, #1e40af, #2563eb);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.recommendation-gantt-bar.current.stage {
  border-color: #2563eb;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.recommendation-gantt-bar.current.task {
  border-color: #3b82f6;
  background: repeating-linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0 4px, rgba(147, 197, 253, 0.3) 4px 8px);
}

.recommendation-gantt-bar.proposed.project {
  border-color: #166534;
  background: linear-gradient(90deg, #166534, #16a34a);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}

.recommendation-gantt-bar.proposed.stage {
  border-color: #15803d;
  background: linear-gradient(90deg, #16a34a, #4ade80);
}

.recommendation-gantt-bar.proposed.task {
  border-color: #22c55e;
  background: repeating-linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0 4px, rgba(134, 239, 172, 0.3) 4px 8px);
}

.recommendation-gantt-milestone {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.scenario-proposed .recommendation-gantt-change-kind.requested,
.scenario-proposed .recommendation-gantt-change-kind.created,
.scenario-proposed .recommendation-gantt-change-kind.deleted {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.13);
}

.recommendation-gantt-task-row.scenario-proposed.is-requested .recommendation-gantt-task-cell,
.recommendation-gantt-task-row.scenario-proposed.is-created .recommendation-gantt-task-cell,
.recommendation-gantt-task-row.scenario-proposed.is-deleted .recommendation-gantt-task-cell {
  box-shadow: inset 3px 0 0 #22c55e, 8px 0 18px rgba(5, 10, 24, 0.16);
}

html[data-theme="light"] .recommendation-gantt-scenario-heading.scenario-current b {
  color: #1e40af;
}

html[data-theme="light"] .recommendation-gantt-scenario-heading.scenario-proposed b,
html[data-theme="light"] .recommendation-gantt-proposed-metric strong,
html[data-theme="light"] .scenario-proposed .recommendation-gantt-change-kind.requested,
html[data-theme="light"] .scenario-proposed .recommendation-gantt-change-kind.created,
html[data-theme="light"] .scenario-proposed .recommendation-gantt-change-kind.deleted {
  color: #166534;
}

.recommendation-review-diff-table-wrap {
  max-height: 330px;
  margin-top: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.recommendation-review-diff-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--color-text);
  font-size: var(--text-xs);
}

.recommendation-review-diff-table th,
.recommendation-review-diff-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.recommendation-review-diff-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--panel2);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recommendation-review-diff-table tbody tr:last-child td {
  border-bottom: 0;
}

.recommendation-review-diff-row.is-impacted td {
  transition: background-color 0.18s ease;
}

.recommendation-review-diff-row.is-impacted.requested td {
  background: rgba(47, 91, 255, 0.075);
}

.recommendation-review-diff-row.is-impacted.automatic td {
  background: rgba(255, 180, 84, 0.07);
}

.recommendation-review-diff-row.is-impacted.requested td:first-child {
  box-shadow: inset 3px 0 0 var(--blue2);
}

.recommendation-review-diff-row.is-impacted.automatic td:first-child {
  box-shadow: inset 3px 0 0 var(--amber);
}

.recommendation-review-diff-row.is-impacted:hover td {
  background: rgba(123, 140, 255, 0.14);
}

.recommendation-review-impacted-task {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr);
  align-items: center;
  gap: 8px;
}

.recommendation-review-impact-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue2);
  box-shadow: 0 0 0 4px rgba(47, 91, 255, 0.12);
}

.recommendation-review-diff-row.automatic .recommendation-review-impact-marker {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 180, 84, 0.12);
}

.recommendation-review-impact-kind {
  grid-column: 2;
  justify-self: start;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.12);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.recommendation-review-diff-row.automatic .recommendation-review-impact-kind {
  color: var(--amber);
  background: rgba(255, 180, 84, 0.12);
}

.recommendation-review-diff-table td strong,
.recommendation-review-diff-table td small {
  display: block;
}

.recommendation-review-diff-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.recommendation-review-source.requested {
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.12);
}

.recommendation-review-source.automatic {
  color: var(--amber);
  background: rgba(255, 180, 84, 0.12);
}

.recommendation-review-empty-impact {
  margin-top: 14px;
}

.recommendation-review-footer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 28px;
  border-top: 1px solid var(--line);
  background: rgba(15, 25, 52, 0.98);
  box-shadow: 0 -14px 32px rgba(5, 10, 24, 0.28);
}

.recommendation-review-footer .primary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.recommendation-review-input:focus-visible,
.recommendation-review-field-approve:focus-visible {
  outline: 3px solid rgba(47, 91, 255, 0.42);
  outline-offset: 2px;
}

/* ====================================================
   USER MANAGEMENT & AUTHORIZATION STYLES
   ==================================================== */
.user-mgmt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.user-mgmt-title {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 280px;
}

.company-badge-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(47, 91, 255, 0.2), rgba(0, 229, 163, 0.15));
  border: 1px solid rgba(47, 91, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.user-mgmt-title h3 {
  margin: 0 0 4px 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: #fff;
  letter-spacing: -0.3px;
}

.user-mgmt-title p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-bright, #a0aec0);
}

.company-badge-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.subscription-seats-pill {
  min-width: 210px;
  color: var(--green);
}

.subscription-seats-pill.warning {
  color: var(--amber);
  border-color: rgba(255, 180, 84, 0.45) !important;
}

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted-bright);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.fixed-role-note,
.platform-admin-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.fixed-role-note span,
.platform-admin-intro p {
  margin: 0;
  color: var(--muted-bright);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.platform-admin-intro h4 {
  margin: 0;
}

.license-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 190px;
}

.license-editor .super-seats-input {
  width: 84px;
  min-height: 44px;
  padding-inline: 10px;
  font-variant-numeric: tabular-nums;
}

#userManagementModal .primary-btn,
#userManagementModal .secondary-btn,
#userManagementModal .action-btn,
#userManagementModal .icon-btn-danger,
#companySettingsModal .primary-btn,
#companySettingsModal .secondary-btn,
#companySettingsModal .action-btn,
#companySettingsModal .icon-btn-danger {
  min-height: 44px;
}

#userManagementModal button .ui-icon,
#companySettingsModal button .ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

#userManagementModal input[readonly],
#companySettingsModal input[readonly] {
  cursor: default;
  opacity: 0.72;
}

#userManagementModal button:disabled,
#companySettingsModal button:disabled {
  cursor: wait;
  opacity: 0.55;
}

/* ====================================================
   COMPANY SETTINGS & OPERATING COSTS STYLES
   ==================================================== */
#companySettingsModal .gis-modal-card {
  max-width: 1120px;
  width: min(1120px, 95vw);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.company-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.company-settings-title {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 280px;
}

.company-settings-title h3 {
  margin: 0 0 4px 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.3px;
}

.company-settings-title p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Company Settings Layout with Internal Side Navigation */
.company-settings-layout {
  display: flex;
  min-height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.company-settings-sidebar {
  flex: 0 0 215px;
  width: 215px;
  border-right: 1px solid var(--color-border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface-subtle);
  box-sizing: border-box;
}

.company-settings-sidebar .mgmt-tab {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  gap: 8px;
  height: auto;
  min-height: 36px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-apple-spring);
  cursor: pointer;
  box-sizing: border-box;
}

.company-settings-sidebar .mgmt-tab:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
}

html[data-theme="dark"] .company-settings-sidebar .mgmt-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.company-settings-sidebar .mgmt-tab.active {
  background: #EAF1FF;
  border: none;
  color: #2F5BFF;
  font-weight: var(--weight-semibold, 600);
  box-shadow: none;
}

html[data-theme="dark"] .company-settings-sidebar .mgmt-tab.active {
  background: rgba(47, 91, 255, 0.22);
  color: #ffffff;
}

.company-settings-sidebar .mgmt-tab.active .ui-icon {
  color: currentColor;
  opacity: 1;
}

.company-settings-sidebar .mgmt-tab .step-status-pill {
  margin-left: auto !important;
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: 4px;
}

.company-settings-body {
  flex: 1 1 0;
  min-width: 0;
  padding: 22px 26px;
  overflow-y: auto;
  max-height: calc(88vh - 120px);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .company-settings-layout {
    flex-direction: column;
    min-height: 0;
  }
  .company-settings-sidebar {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    border-radius: 0;
  }
  .company-settings-sidebar .mgmt-tab {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
  }
  .company-settings-body {
    padding: 16px;
    max-height: none;
  }
}

/* Navigation Segmented Tab Bar for other modals */
.user-mgmt-tabs {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  background: rgba(118, 118, 128, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 20px;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}

html[data-theme="dark"] .user-mgmt-tabs {
  background: rgba(118, 118, 128, 0.18);
  border-color: rgba(255, 255, 255, 0.06);
}

.user-mgmt-tabs::-webkit-scrollbar {
  display: none;
}

.mgmt-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary, #64748B);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: all var(--duration-fast) var(--ease-apple-spring);
  user-select: none;
}

.mgmt-tab .ui-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: 0.75;
}

.mgmt-tab:hover:not(.active) {
  color: var(--color-text, #18181B);
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .mgmt-tab:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.mgmt-tab.active {
  background: var(--color-surface, #ffffff);
  color: #2F5BFF;
  font-weight: var(--weight-semibold, 600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .mgmt-tab.active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.mgmt-tab.active .ui-icon {
  opacity: 1;
  color: currentColor;
}

.mgmt-tab.superadmin-tab {
  color: var(--color-warning, #D97706);
  border: 1px solid rgba(217, 119, 6, 0.3);
  background: rgba(217, 119, 6, 0.06);
}

.mgmt-tab.superadmin-tab:hover:not(.active) {
  background: rgba(217, 119, 6, 0.12);
  border-color: var(--color-warning, #D97706);
  color: var(--color-text);
}

.mgmt-tab.superadmin-tab.active {
  background: linear-gradient(135deg, #D97706, #F59E0B);
  color: #0F172A;
  border-color: transparent;
  font-weight: var(--weight-semibold);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}

/* KPI Strip for Company Costs */
.company-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.company-kpi-card {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s ease;
}

.company-kpi-card small {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.company-kpi-card .kpi-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.company-kpi-card.kpi-card-highlight {
  background: linear-gradient(135deg, rgba(47, 91, 255, 0.15), rgba(0, 229, 163, 0.1));
  border-color: rgba(47, 91, 255, 0.4);
}

.company-kpi-card.kpi-card-highlight .kpi-value {
  color: var(--green, #00e5a3);
  font-size: var(--text-xl);
}

/* Interactive Card Selectors (Size & Type) */
.company-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.company-select-card {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.18s ease;
  position: relative;
  user-select: none;
}

.company-select-card:hover {
  background: var(--color-surface-hover);
  border-color: rgba(47, 91, 255, 0.35);
  transform: translateY(-1px);
}

.company-select-card.selected {
  background: var(--component-selected-bg, #EAF1FF);
  border-color: var(--color-primary, #2F5BFF);
  box-shadow: 0 0 0 1px var(--color-primary, #2F5BFF), var(--shadow-sm);
}

.company-select-card h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.company-select-card p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Chips container for regions */
.chips-interactive-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chips-interactive-wrap .chip {
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--component-control-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
}

.chips-interactive-wrap .chip:hover {
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.chips-interactive-wrap .chip.selected {
  background: var(--component-selected-bg, #EAF1FF);
  border-color: var(--color-primary, #2F5BFF);
  color: var(--color-primary, #2F5BFF);
  font-weight: var(--weight-semibold);
}

.area-user-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted-bright);
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  white-space: nowrap;
}

/* User Directory Toolbar & Search */
.user-directory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.06));
}

.user-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.user-search-box input {
  height: 38px;
  padding: 6px 12px;
  font-size: var(--text-sm);
  width: 100%;
}

.user-filter-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-filter-box select {
  height: 38px;
  font-size: var(--text-xs);
  min-width: 170px;
}

.operating-costs-form {
  display: grid;
  gap: 20px;
}

.operating-costs-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: 24px;
  padding: 18px;
  border: 1px solid rgba(47, 91, 255, 0.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(47, 91, 255, 0.1), rgba(0, 229, 163, 0.04));
  margin-bottom: 20px;
}

.operating-costs-intro small {
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
}

.operating-costs-intro h4,
.operating-area-heading h4,
.operating-area-heading p,
.operating-costs-intro p {
  margin: 0;
}

.operating-costs-intro h4 {
  margin-top: 4px;
}

.operating-costs-intro p,
.operating-area-heading p {
  color: var(--muted-bright);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.operating-area-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.operating-area-list {
  display: grid;
  gap: 10px;
}

.operating-area-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.8fr) auto;
  align-items: end;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.operating-area-row .form-group {
  margin: 0;
}

.operating-area-protected {
  align-self: center;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--green);
  background: rgba(0, 229, 163, 0.1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .operating-costs-intro,
  .operating-area-row {
    grid-template-columns: 1fr;
  }

  .operating-area-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Company Calendar & Working Days Settings */
.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 820px) {
  .calendar-days-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    overflow: visible;
  }
}

.calendar-day-card {
  padding: 12px 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  background: var(--surface, rgba(255, 255, 255, 0.025));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.calendar-day-card:hover {
  background: rgba(47, 91, 255, 0.06);
  border-color: rgba(47, 91, 255, 0.35);
  transform: translateY(-1px);
}

.calendar-day-card.selected {
  background: rgba(47, 91, 255, 0.12);
  border-color: var(--blue2, #2f5bff);
  box-shadow: 0 0 0 1px var(--blue2, #2f5bff), 0 4px 12px rgba(47, 91, 255, 0.15);
}

.calendar-day-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

.calendar-day-name .day-short {
  display: none;
}

@media (max-width: 900px) {
  .calendar-day-name .day-full {
    display: none;
  }
  .calendar-day-name .day-short {
    display: inline;
  }
}

.calendar-day-checkbox-fake {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line, rgba(255, 255, 255, 0.2));
  background: var(--surface, rgba(255, 255, 255, 0.04));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: transparent;
  flex-shrink: 0;
  transition: all 0.16s ease;
}

.calendar-day-card.selected .calendar-day-checkbox-fake,
.calendar-day-checkbox-fake.checked {
  background: var(--blue2, #2f5bff);
  border-color: var(--blue2, #2f5bff);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(47, 91, 255, 0.4);
}

.calendar-day-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}

.calendar-day-badge.badge-working {
  color: var(--green, #00e5a3);
  background: rgba(0, 229, 163, 0.12);
}

.calendar-day-badge.badge-off {
  color: var(--muted-bright, #94a3b8);
  background: rgba(255, 255, 255, 0.06);
}

.calendar-presets-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.calendar-preset-btn {
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  color: var(--muted-bright, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.calendar-preset-btn:hover {
  color: #ffffff;
  border-color: var(--blue2, #2f5bff);
  background: rgba(47, 91, 255, 0.12);
}

.calendar-card-box {
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  background: var(--surface, rgba(255, 255, 255, 0.025));
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.calendar-box-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.calendar-box-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.calendar-box-title .box-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(47, 91, 255, 0.12);
  color: var(--blue2, #2f5bff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.calendar-box-title .box-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.calendar-box-title h4 {
  margin: 0 0 3px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #fff);
}

.calendar-box-title p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted-bright, #a0aec0);
  line-height: 1.45;
}

.calendar-sync-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 130px auto;
  gap: 12px;
  align-items: end;
}

.calendar-add-holiday-grid {
  display: grid;
  grid-template-columns: 170px minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.calendar-sync-grid .form-group,
.calendar-add-holiday-grid .form-group {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.calendar-sync-grid label,
.calendar-add-holiday-grid label {
  margin-bottom: 7px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted-bright, #cbd5e1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-sync-grid .input-field,
.calendar-add-holiday-grid .input-field {
  margin-bottom: 0 !important;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  font-size: var(--text-sm);
  border-radius: 10px;
  box-sizing: border-box;
}

.calendar-sync-grid select.input-field {
  padding-right: 32px;
}

.calendar-sync-grid .calendar-action-btn,
.calendar-add-holiday-grid .calendar-action-btn {
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  margin: 0;
  background: rgba(47, 91, 255, 0.12);
  border: 1px solid rgba(47, 91, 255, 0.35);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.16s ease;
}

.calendar-sync-grid .calendar-action-btn:hover,
.calendar-add-holiday-grid .calendar-action-btn:hover {
  background: rgba(47, 91, 255, 0.22);
  border-color: var(--blue2, #2f5bff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 91, 255, 0.2);
}

@media (max-width: 768px) {
  .calendar-sync-grid,
  .calendar-add-holiday-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
  }

  .calendar-sync-grid .calendar-action-btn,
  .calendar-add-holiday-grid .calendar-action-btn {
    width: 100%;
  }
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 12px;
  align-items: flex-end;
}

.form-grid-3 > .form-group {
  min-width: 0;
}

@media (max-width: 768px) {
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

.calendar-loaded-years-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.calendar-loaded-years-empty {
  padding-top: 10px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.calendar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  border-radius: 14px;
  border: 1px dashed var(--line, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.015);
  margin-top: 10px;
}

.calendar-empty-state .empty-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(47, 91, 255, 0.1);
  color: var(--blue2, #5c82ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.calendar-empty-state .empty-icon-wrap .ui-icon {
  width: 22px;
  height: 22px;
}

.calendar-empty-state strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #fff);
  margin-bottom: 4px;
}

.calendar-empty-state p {
  font-size: var(--text-xs);
  color: var(--muted-bright, #94a3b8);
  margin: 0;
  max-width: 420px;
  line-height: 1.45;
}

.chip-static {
  cursor: default !important;
}

.calendar-holidays-section {
  margin-bottom: 20px;
}

.calendar-holidays-list {
  display: grid;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.calendar-holiday-row {
  display: grid;
  grid-template-columns: 140px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  transition: all 0.15s ease;
}

.calendar-holiday-row:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
}

.holiday-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--blue2, #5c82ff);
  font-variant-numeric: tabular-nums;
  background: rgba(47, 91, 255, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(47, 91, 255, 0.25);
  white-space: nowrap;
}

.holiday-name-wrap strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #fff);
}

.holiday-source-pill {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.holiday-source-pill.official {
  background: rgba(0, 229, 163, 0.1);
  color: var(--green, #00e5a3);
  border: 1px solid rgba(0, 229, 163, 0.25);
}

.holiday-source-pill.custom {
  background: rgba(147, 51, 234, 0.1);
  color: #c084fc;
  border: 1px solid rgba(147, 51, 234, 0.25);
}

@media (max-width: 600px) {
  .calendar-holiday-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .holiday-type-wrap {
    display: none;
  }
}

.input-select-sm {
  padding: 8px 12px;
  border-radius: 8px;
  background: #111e3c;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  outline: none;
  cursor: pointer;
}



.pending-badge-count {
  background: var(--red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 7px;
  border-radius: 99px;
}

/* Users Table */
.users-table-wrap {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.users-table th {
  text-align: left;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted-bright);
  font-weight: var(--weight-semibold);
  border-bottom: 1px solid var(--line);
}

.users-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.current-user-row {
  background: rgba(47, 91, 255, 0.05);
}

.user-cell-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #6b21a8);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.you-pill {
  font-size: var(--text-xs);
  background: var(--blue);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: var(--weight-semibold);
  margin-left: 4px;
}

.dept-info-cell {
  display: flex;
  flex-direction: column;
}

.dept-info-cell small {
  color: var(--muted-bright);
}

/* Badges */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.role-admin {
  background: rgba(234, 179, 8, 0.15);
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.role-manager {
  background: rgba(47, 91, 255, 0.15);
  color: var(--blue2);
  border: 1px solid rgba(47, 91, 255, 0.3);
}

.role-member {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-bright);
  border: 1px solid var(--line);
}

.status-approved {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-pending {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.status-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-change-select {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: #fff;
  font-size: var(--text-xs);
}

.icon-btn-danger {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn-danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* Pending Requests Section */
.pending-requests-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.3);
  margin-bottom: 20px;
}

.banner-icon {
  font-size: var(--text-2xl);
}

.pending-requests-banner strong {
  display: block;
  font-size: var(--text-sm);
  color: #fb923c;
  margin-bottom: 4px;
}

.pending-requests-banner p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted-bright);
}

.pending-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.pending-user-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pending-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pending-card-header h4 {
  margin: 0 0 2px 0;
  font-size: var(--text-sm);
  color: #fff;
}

.email-text {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--blue2);
}

.pending-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-xs);
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.pending-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.role-selector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.role-selector-row label {
  font-size: var(--text-xs);
  color: var(--muted-bright);
}

.action-buttons-row {
  display: flex;
  gap: 10px;
}

.action-buttons-row button {
  flex: 1;
  padding: 8px 12px;
  font-size: var(--text-xs);
}

/* Create User Form */
.create-user-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.create-user-form h4 {
  margin: 0;
  font-size: var(--text-lg);
  color: #fff;
}

.form-subtext {
  margin: -10px 0 6px 0;
  font-size: var(--text-sm);
  color: var(--muted-bright);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Email alert administration */
.email-alerts-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.email-alert-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(47, 91, 255, 0.35);
  border-radius: 12px;
  background: rgba(47, 91, 255, 0.09);
}

.email-alert-intro-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 12px;
  background: rgba(47, 91, 255, 0.2);
  font-size: var(--text-xl);
}

.email-alert-intro h4,
.email-alert-history h4 {
  margin: 0 0 5px;
  color: #fff;
}

.email-alert-intro p {
  margin: 0;
  color: var(--muted-bright);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.email-alert-target {
  max-width: 520px;
}

.email-alert-target .input-field,
.email-alert-form .input-field {
  margin-bottom: 0;
}

.email-alert-inherited,
.email-alert-error,
.email-alert-loading {
  padding: 14px 16px;
  border-radius: 10px;
  font-size: var(--text-sm);
  color: var(--muted-bright);
  background: rgba(255, 180, 84, 0.09);
  border: 1px solid rgba(255, 180, 84, 0.35);
}

.email-alert-error {
  color: #ffabb3;
  background: rgba(255, 111, 125, 0.1);
  border-color: rgba(255, 111, 125, 0.35);
}

.email-alert-form {
  gap: 20px;
}

.email-alert-switch-row,
.email-alert-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
}

.email-alert-switch-row small,
.email-alert-check-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted-bright);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.toggle-switch {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 26px;
  cursor: pointer;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
}

.toggle-switch span {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: #38415a;
  transition: background .2s ease;
}

.toggle-switch span::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}

.toggle-switch input:checked + span {
  background: var(--blue);
}

.toggle-switch input:checked + span::after {
  transform: translateX(22px);
}

.field-help {
  display: block;
  margin-top: 7px;
  color: var(--muted-bright);
  font-size: var(--text-xs);
}

.credential-ok {
  color: var(--green);
  font-size: var(--text-xs);
  margin-left: 5px;
}

.email-alert-biweekly-note p {
  margin: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted-bright);
  font-size: var(--text-sm);
}

.email-alert-check-row {
  justify-content: flex-start;
  cursor: pointer;
}

.email-alert-check-row > input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.email-alert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.email-progress-threshold-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.email-progress-threshold-input .input-field {
  flex: 0 0 96px;
}

.email-progress-threshold-input span {
  color: var(--muted-bright);
  font-size: var(--text-xs);
}

.email-alert-history {
  padding-top: 4px;
}

.email-alert-custom-discreet {
  margin-top: 10px;
  margin-bottom: 4px;
  padding: 6px 2px;
}

.email-alert-subtle-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted-bright, #8b95af);
  user-select: none;
  transition: color 0.15s ease;
}

.email-alert-subtle-checkbox:hover {
  color: var(--text, #e2e8f0);
}

.email-alert-subtle-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--blue, #2f5bff);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.email-alert-subtle-checkbox input[type="checkbox"]:checked {
  opacity: 1;
}

.email-alert-discreet-help {
  display: block;
  margin-top: 3px;
  margin-left: 22px;
  font-size: var(--text-xs);
  color: var(--muted, #667290);
  line-height: 1.4;
}

.email-custom-integration-fields {
  margin-top: 8px;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.email-custom-integration-fields[hidden] {
  display: none !important;
}

/* Reusable SEND_EMAIL capability UI */
.project-summary-email-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.project-summary-email-action strong,
.project-summary-email-action small {
  display: block;
}

.project-summary-email-action small,
.email-share-description,
.email-share-trace-note {
  margin: 4px 0 0;
  color: var(--muted-bright);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.email-share-modal-card {
  max-width: 620px;
}

.email-share-form {
  display: grid;
  gap: 18px;
}

.email-share-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.email-share-form legend {
  margin-bottom: 10px;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.email-recipient-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.email-recipient-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
}

.email-recipient-option:hover,
.email-recipient-option:focus-within {
  border-color: rgba(47, 91, 255, .55);
  background: rgba(47, 91, 255, .09);
}

.email-recipient-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.email-recipient-option strong,
.email-recipient-option small {
  display: block;
}

.email-recipient-option small {
  margin-top: 3px;
  color: var(--muted-bright);
  font-size: var(--text-xs);
}

.email-share-trace-note {
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(47, 91, 255, .08);
  border: 1px solid rgba(47, 91, 255, .22);
}

.email-share-empty {
  margin: 0;
  padding: 16px;
  color: var(--muted-bright);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.chat-email-share-btn {
  margin-top: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(47, 91, 255, .35);
  border-radius: 8px;
  background: rgba(47, 91, 255, .08);
  color: var(--blue2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.chat-email-share-btn:hover,
.chat-email-share-btn:focus-visible {
  border-color: var(--blue2);
  background: rgba(47, 91, 255, .16);
}

@media (max-width: 640px) {
  .project-summary-email-action {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Header Notification Badge & Lockout Banner */
.header-pending-notice-pill {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(255, 60, 60, 0.6);
}

.user-auth-lock-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.95), rgba(185, 28, 28, 0.95));
  color: #fff;
  padding: 14px 24px;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.lock-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lock-banner-icon {
  font-size: var(--text-3xl);
}

.lock-banner-content h4 {
  margin: 0 0 2px 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.lock-banner-content p {
  margin: 0;
  font-size: var(--text-sm);
  opacity: 0.95;
}

.primary-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue) 0%, #1e46e4 100%);
  color: #fff;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(47, 91, 255, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.primary-btn-sm:hover {
  box-shadow: 0 6px 24px rgba(47, 91, 255, 0.6);
  transform: translateY(-1px);
}

/* ----------------------------------------------------
   CLERK AUTHENTICATION VIEW STYLES
   ---------------------------------------------------- */
#authViewContainer {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-card-wrapper {
  max-width: 520px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line-glow);
  border-radius: 28px;
  padding: 40px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.auth-card-wrapper::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(47, 91, 255, 0.35) 0%, rgba(47, 91, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.auth-brand-text {
  text-align: left;
}

.auth-brand-text h2 {
  margin: 0;
  font: var(--weight-semibold) var(--text-2xl) var(--font-heading);
  letter-spacing: -0.5px;
  color: #FFFFFF;
}

.auth-brand-text span {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 1.5px;
  color: var(--blue2);
  display: block;
}

.auth-title {
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
  color: #FFFFFF;
  margin: 0 0 10px 0;
}

.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 20px 0;
  max-width: 400px;
}

.auth-tabs-toggle {
  display: flex;
  background: rgba(118, 118, 128, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 380px;
  gap: 3px;
  box-sizing: border-box;
}

html[data-theme="dark"] .auth-tabs-toggle {
  background: rgba(22, 31, 56, 0.7);
  border-color: rgba(255, 255, 255, 0.08);
}

.auth-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-apple-spring);
}

.auth-tab-btn.active {
  background: var(--color-surface, #ffffff);
  color: var(--color-primary, #2F5BFF);
  font-weight: var(--weight-semibold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .auth-tab-btn.active {
  background: var(--color-primary, #2F5BFF);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(47, 91, 255, 0.35);
}

.auth-tab-btn:hover:not(.active) {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .auth-tab-btn:hover:not(.active) {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.gantt-task-bar.dragging, .gantt-milestone.dragging {
  cursor: grabbing !important;
  opacity: 0.8;
  z-index: 50 !important;
  transition: none !important;
}

.auth-clerk-mount-point {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 340px;
}

.auth-card-footer {
  width: 100%;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}

.auth-back-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-back-link:hover {
  color: var(--blue2);
}

.auth-security-badge {
  color: var(--green);
  font-weight: var(--weight-semibold);
}

.auth-loading-box, .auth-spinner-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
}

.spinner-ring {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(47, 91, 255, 0.2);
  border-top-color: var(--blue2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------------------
   CLERK INNER COMPONENT OVERRIDES FOR CLEAN INTEGRATION
   ---------------------------------------------------- */
.cl-rootBox, .cl-cardBox {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

.cl-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.cl-headerTitle, .cl-headerSubtitle {
  display: none !important;
}

.cl-header {
  margin-bottom: 8px !important;
}

.cl-footer {
  background: transparent !important;
  border: none !important;
}

.cl-footer > div {
  background: transparent !important;
  border: none !important;
}

/* Hide 'Don't have an account? Sign up' & 'Already have an account? Sign in' footer actions */
#clerkSignInBox .cl-footerAction,
#clerkSignInBox .cl-footerAction__signIn,
#clerkSignUpBox .cl-footerAction,
#clerkSignUpBox .cl-footerAction__signUp {
  display: none !important;
}

.cl-internal-b3fm6y, .cl-internal-180y7d7 {
  display: none !important;
}

.cl-socialButtonsBlockButton {
  width: 100% !important;
  border-radius: 12px !important;
}

.cl-formButtonPrimary {
  width: 100% !important;
  border-radius: 12px !important;
}

/* ----------------------------------------------------
   MARKDOWN PARSER & CHAT STYLING
   ---------------------------------------------------- */
.markdown-body {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: #e2e8f0;
}

.markdown-body .md-p {
  margin: 0 0 10px 0;
}

.markdown-body .md-p:last-child {
  margin-bottom: 0;
}

.markdown-body .md-strong {
  color: #ffffff;
  font-weight: var(--weight-semibold);
}

.markdown-body .md-h1,
.markdown-body .md-h2,
.markdown-body .md-h3 {
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  margin: 12px 0 6px 0;
}

.markdown-body .md-h1 { font-size: var(--text-md); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.markdown-body .md-h2 { font-size: var(--text-sm); color: var(--blue2); }
.markdown-body .md-h3 { font-size: var(--text-sm); color: var(--cyan); }

.markdown-body .md-ul,
.markdown-body .md-ol {
  margin: 8px 0 12px 0;
  padding-left: 20px;
}

.markdown-body .md-ul-item,
.markdown-body .md-ol-item {
  margin-bottom: 6px;
  line-height: 1.5;
}

.markdown-body .md-inline-code {
  background: rgba(0, 0, 0, 0.4);
  color: #70a1ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  border: 1px solid rgba(112, 161, 255, 0.25);
}

.markdown-body .md-code-block {
  background: #0b1120;
  border: 1px solid var(--line-glow);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 10px 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #37d7a4;
}

.markdown-body .md-quote {
  border-left: 3px solid var(--blue2);
  background: rgba(47, 91, 255, 0.1);
  margin: 10px 0;
  padding: 8px 14px;
  border-radius: 0 8px 8px 0;
  color: #cbd5e1;
  font-style: italic;
}

.markdown-body .md-table-wrapper {
  overflow-x: auto;
  margin: 14px 0;
  border-radius: 12px;
  border: 1px solid var(--line-glow);
  background: rgba(13, 22, 45, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.markdown-body .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.markdown-body .md-table th {
  background: rgba(47, 91, 255, 0.25);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  padding: 10px 14px;
  border-bottom: 2px solid var(--blue2);
  white-space: nowrap;
}

.markdown-body .md-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: #e2e8f0;
}

.markdown-body .md-table tbody tr:last-child td {
  border-bottom: none;
}

.markdown-body .md-table tbody tr:hover {
  background: rgba(47, 91, 255, 0.08);
}

.markdown-body .md-hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(47, 91, 255, 0.1), var(--blue2), rgba(47, 91, 255, 0.1));
  margin: 16px 0;
}

/* ====================================================
   INTERACTIVE GANTT CHART STYLES (Clean & Modern UX)
   ==================================================== */
.gantt-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gantt-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.gantt-stat-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.gantt-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 91, 255, 0.35);
}

.gantt-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.gantt-stat-icon.total { background: rgba(47, 91, 255, 0.15); color: var(--blue2); border: 1px solid rgba(47, 91, 255, 0.3); }
.gantt-stat-icon.success { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.gantt-stat-icon.progress { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.gantt-stat-icon.danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }

.gantt-stat-info strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: #fff;
  line-height: 1.2;
}

.gantt-stat-info small {
  font-size: var(--text-xs);
  color: var(--muted);
}

.gantt-chart-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}

.gantt-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 22, 45, 0.6);
  flex-wrap: wrap;
  gap: 12px;
}

.gantt-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gantt-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.gantt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.gantt-legend-dot.done { background: #10b981; }
.gantt-legend-dot.in_progress { background: #3b82f6; }
.gantt-legend-dot.blocked { background: #ef4444; }
.gantt-legend-dot.stage { background: #8b5cf6; }

.gantt-action-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gantt-action-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--color-primary, #60a5fa);
}

.gantt-action-btn.active {
  background: rgba(47, 91, 255, 0.25);
  border-color: var(--color-primary, #2f5bff);
  color: var(--color-primary, #ffffff);
  box-shadow: 0 0 10px rgba(47, 91, 255, 0.35);
}

.gantt-toolbar-actions,
.gantt-task-filter-group,
.gantt-stage-control-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.gantt-toolbar-actions {
  margin-left: 8px;
}

.gantt-task-filter-group {
  padding-right: 8px;
  border-right: 1px solid var(--line);
}

.gantt-task-filter-group .gantt-action-btn {
  min-height: 32px;
}

.gantt-action-btn.active.critical {
  border-color: rgba(239, 68, 68, 0.75);
  background: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.24);
}

.gantt-action-btn.clear-filter {
  color: var(--muted-bright, #cbd5e1);
  border-style: dashed;
}

.gantt-action-btn:focus-visible {
  outline: 3px solid rgba(47, 91, 255, 0.42);
  outline-offset: 2px;
}

.gantt-scroll-container {
  overflow-x: auto;
  position: relative;
  isolation: isolate;
  -webkit-overflow-scrolling: touch;
  border-radius: 0 0 12px 12px;
}

.gantt-scroll-container::-webkit-scrollbar {
  height: 10px;
}

.gantt-scroll-container::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 6px;
}

.gantt-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.4);
  border-radius: 6px;
}

.gantt-scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.75);
}

.gantt-main-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.gantt-header-row {
  background: rgba(18, 28, 56, 0.95);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.gantt-header-task-col {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  padding: 14px 18px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--blue2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right: 1px solid var(--line);
  position: sticky;
  left: 0;
  background: #121c38;
  z-index: 30;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.35);
}

.gantt-header-timeline-col {
  padding: 0;
  position: relative;
  z-index: 40;
  overflow: visible;
}

.gantt-ticks-header {
  display: flex;
  height: 52px;
  position: relative;
  overflow: visible;
}

.gantt-tick-cell {
  flex: 1 0 110px;
  min-width: 110px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  text-transform: uppercase;
}

.gantt-tick-cell.is-today {
  color: var(--blue2);
  font-weight: var(--weight-semibold);
  background: rgba(47, 91, 255, 0.12);
  border-bottom: 2px solid var(--blue2);
}

.gantt-tick-year {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #60a5fa;
  letter-spacing: 0.8px;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.3);
  margin-bottom: 2px;
}

.gantt-tick-date {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #cbd5e1;
  white-space: nowrap;
}

/* Stage Row */
.gantt-stage-row {
  background: rgba(30, 41, 75, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gantt-stage-name-cell {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  padding: 13px 16px 13px 18px;
  color: #fff;
  border-right: 1px solid var(--line);
  position: sticky;
  left: 0;
  background: #16213e;
  z-index: 20;
  box-sizing: border-box;
  vertical-align: top;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.gantt-stage-name-cell:hover {
  background: #1e2d52;
}

.gantt-stage-cell-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.gantt-stage-content {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.gantt-stage-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #f8fafc;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  text-overflow: ellipsis;
  word-break: break-word;
}

.gantt-stage-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #94a3b8;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.gantt-stage-meta-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.55);
}

.gantt-stage-progress {
  color: #7dd3fc;
}

.gantt-stage-toggle-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #94a3b8;
  font-size: var(--text-xs);
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gantt-stage-timeline-cell {
  position: relative;
  padding: 10px 14px;
  height: 58px;
}

.gantt-stage-bar {
  position: absolute;
  top: 18px;
  height: 22px;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.7), rgba(99, 102, 241, 0.7));
  border: 1px solid rgba(167, 139, 250, 0.5);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task Row */
.gantt-task-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.gantt-task-row:hover {
  background: rgba(47, 91, 255, 0.05);
}

.gantt-task-name-cell {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  padding: 10px 16px 10px 24px;
  border-right: 1px solid var(--line);
  position: sticky;
  left: 0;
  background: #0d162d;
  z-index: 20;
  box-sizing: border-box;
  cursor: pointer;
}

.gantt-task-row:hover .gantt-task-name-cell {
  background: #121e3c;
}

.gantt-task-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #f1f5f9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  max-width: 100%;
  word-break: break-word;
}

.gantt-task-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 4px;
  flex-wrap: wrap;
}

.gantt-task-timeline-cell {
  position: relative;
  padding: 8px 0;
  height: 46px;
  overflow: visible !important;
}

/* Background vertical grid lines */
.gantt-grid-lines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  pointer-events: none;
}

.gantt-grid-line {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.gantt-grid-line.is-today {
  border-right: 2px dashed rgba(47, 91, 255, 0.6);
  background: rgba(47, 91, 255, 0.02);
}

/* Vertical Guide Lines: Project Start & Milestones */
.gantt-project-start-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.75);
  z-index: 4;
  pointer-events: none;
}

.gantt-project-start-badge {
  position: absolute;
  top: 3px;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.6);
  pointer-events: auto;
  cursor: help;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.gantt-project-end-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.75);
  z-index: 4;
  pointer-events: none;
}

.gantt-project-end-badge {
  position: absolute;
  top: 3px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.6);
  pointer-events: auto;
  cursor: help;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.gantt-milestone-vertical-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed #f59e0b;
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
}

.gantt-milestone-header-badge {
  position: absolute;
  bottom: 3px;
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid #f59e0b;
  color: #fbbf24;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 90;
  pointer-events: auto;
  cursor: help;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(4px);
}

/* Gantt Task Bar */
.gantt-task-row {
  position: relative;
}

.gantt-task-row:hover .gantt-link-handle {
  opacity: 1;
  pointer-events: auto;
}

.gantt-dependency-group {
  pointer-events: stroke;
}
.gantt-dependency-delete {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: all;
}
.gantt-dependency-group:hover .gantt-dependency-delete {
  opacity: 1;
}
.gantt-dependency-delete:hover circle {
  fill: #dc2626;
}

.gantt-link-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 3px solid #2563eb;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999 !important;
}

.gantt-link-handle:hover {
  transform: translateY(-50%) scale(1.3);
}

.gantt-link-handle.start {
  left: -6px;
}

.gantt-link-handle.end {
  right: -6px;
}

.gantt-task-bar {
  position: absolute;
  top: 10px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  user-select: none;
  min-width: 32px;
  overflow: visible !important;
  transform-style: preserve-3d;
}

.gantt-task-bar:hover {
  transform: translateY(-1px) scaleY(1.04);
  box-shadow: 0 6px 18px rgba(47, 91, 255, 0.4);
  filter: brightness(1.1);
  z-index: 4;
}

/* Status variants for task bar */
.gantt-task-bar.status-done {
  background: linear-gradient(90deg, #10b981, #059669);
  border: 1px solid rgba(52, 211, 153, 0.6);
}

.gantt-task-bar.status-in_progress {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border: 1px solid rgba(96, 165, 250, 0.6);
}

.gantt-task-bar.status-blocked,
.gantt-task-bar.status-overdue {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  border: 1px solid rgba(248, 113, 113, 0.6);
}

/* Gantt Milestone (High Visibility Diamond) */
.gantt-milestone {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.gantt-milestone__shape {
  display: block;
  width: 16px;
  height: 16px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #fbbf24, #d97706);
  border: 2px solid #fef08a;
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.gantt-milestone:hover .gantt-milestone__shape {
  transform: translateX(-50%) rotate(45deg) scale(1.3);
  box-shadow: 0 0 20px rgba(251, 191, 36, 1), 0 4px 12px rgba(0, 0, 0, 0.7);
  filter: brightness(1.25);
}

.gantt-milestone--critical .gantt-milestone__shape {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  border: 2px solid #ffe4e6;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.85), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.gantt-milestone--critical:hover .gantt-milestone__shape {
  box-shadow: 0 0 22px rgba(244, 63, 94, 1), 0 4px 12px rgba(0, 0, 0, 0.7);
}

.gantt-milestone--done .gantt-milestone__shape {
  background: linear-gradient(135deg, #34d399, #059669);
  border: 2px solid #d1fae5;
  box-shadow: 0 0 16px rgba(52, 211, 153, 0.85), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.gantt-milestone--done:hover .gantt-milestone__shape {
  box-shadow: 0 0 22px rgba(52, 211, 153, 1), 0 4px 12px rgba(0, 0, 0, 0.7);
}

.gantt-milestone--pending .gantt-milestone__shape {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  border: 2px solid #e0f2fe;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.85), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.gantt-milestone--pending:hover .gantt-milestone__shape {
  box-shadow: 0 0 22px rgba(56, 189, 248, 1), 0 4px 12px rgba(0, 0, 0, 0.7);
}

.gantt-milestone__label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3px 9px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gantt-milestone--flip .gantt-milestone__label {
  left: auto;
  right: 14px;
}

/* Milestone duration ghost line */
.gantt-milestone-duration-line {
  position: absolute;
  top: 50%;
  height: 0;
  border-top: 2px dashed rgba(251, 191, 36, 0.6);
  transform: translateY(-50%);
  z-index: 4;
}

/* Milestone Tag in Left Task Column */
.gantt-milestone-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(217, 119, 6, 0.25));
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fef08a;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
  flex-shrink: 0;
}

.gantt-task-bar.status-pending {
  background: linear-gradient(90deg, #64748b, #475569);
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.gantt-task-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.gantt-task-bar-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  overflow: visible !important;
  white-space: nowrap;
}

.gantt-bar-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 6px;
}

.gantt-bar-badge {
  font-size: var(--text-xs);
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

/* Gantt Modal Specific Styles */
.gantt-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.gantt-modal-field {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.gantt-modal-field label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}

.gantt-modal-field .val {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #fff;
}

/* ====================================================
   RESPONSIVE PRODUCT SHELL & MOBILE UX
   ==================================================== */

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body.chat-open,
body.modal-open {
  overflow: hidden;
}

button,
a,
input,
textarea,
select,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

:where(button, a, input, textarea, select, [role="button"]):focus-visible {
  outline: 3px solid rgba(123, 140, 255, 0.72);
  outline-offset: 3px;
}

:where(h1, h2, h3, h4, h5, h6, [tabindex="-1"], #mainContent, .gis-modal-card, .modal-card):focus,
:where(h1, h2, h3, h4, h5, h6, [tabindex="-1"], #mainContent, .gis-modal-card, .modal-card):focus-visible {
  outline: none !important;
}

@media (hover: none) {
  .primary-btn:hover,
  .secondary-btn:hover,
  .action-btn:hover,
  .project-card:hover,
  .option-card:hover,
  .kpi-stat-card:hover,
  .an-kpi-card.clickable:hover,
  .gantt-stat-card:hover {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .app-container {
    padding-inline: clamp(18px, 4vw, 36px);
  }

  .today-greeting-box {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
    gap: 24px;
  }

  .projects-grid,
  .attention-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }
}

@media (max-width: 980px) {
  :root {
    --radius-lg: 16px;
    --radius-md: 10px;
  }

  html,
  body {
    min-height: 100%;
  }

  body:not(.auth-mode) {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cursor-glow,
  .noise {
    display: none;
  }

  .bg-grid {
    opacity: .55;
    background-size: 40px 40px;
  }

  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 56px;
    margin: 0 !important;
    padding: max(0px, env(safe-area-inset-top)) 16px 0;
    box-sizing: border-box;
    background: var(--color-surface, #FFFFFF);
    border-bottom: 1px solid var(--color-border, #E3E3E6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    z-index: 100;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-sidebar-toggle-btn {
    display: none !important;
  }

  .brand {
    min-height: 44px;
    padding: 4px;
  }

  .brand svg {
    width: 29px;
    height: 29px;
  }

  .brand span {
    font-size: var(--text-sm);
    max-width: 140px;
  }

  .header-right {
    gap: 8px;
  }

  .user-access-badge,
  .reset-btn {
    min-width: 38px;
    min-height: 38px;
    padding: 4px;
    justify-content: center;
  }

  .reset-btn {
    width: auto;
    padding-inline: 10px;
  }

  .reset-btn .cta-dot,
  .dropdown-chevron,
  .user-info {
    display: none;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
  }

  .user-dropdown-menu {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }

  /* Off-canvas Mobile Sidebar Drawer */
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid var(--color-border, #E3E3E6);
    background: var(--component-sidebar-bg, #FAFAFA);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1050;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.25);
  }

  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

  .app-sidebar.collapsed .brand-text,
  .app-sidebar.collapsed .nav-tab span,
  .app-sidebar.collapsed .sidebar-section-title,
  .app-sidebar.collapsed .sidebar-nav-item span,
  .app-sidebar.mobile-open .brand-text,
  .app-sidebar.mobile-open .nav-tab span,
  .app-sidebar.mobile-open .sidebar-section-title,
  .app-sidebar.mobile-open .sidebar-nav-item span {
    display: inline !important;
  }

  .app-sidebar.collapsed .brand,
  .app-sidebar.collapsed .nav-tab,
  .app-sidebar.collapsed .sidebar-nav-item,
  .app-sidebar.mobile-open .brand,
  .app-sidebar.mobile-open .nav-tab,
  .app-sidebar.mobile-open .sidebar-nav-item {
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
  }

  .sidebar-footer .sidebar-collapse-btn {
    display: none;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .app-container {
    width: 100%;
    margin: 56px 0 0 0 !important;
    padding: 16px 14px 28px;
  }

  .view-header {
    margin-bottom: 20px;
  }

  .view-header[style*="display:flex"] {
    align-items: stretch !important;
    flex-direction: column;
    gap: 16px;
  }

  .view-title {
    font-size: var(--type-page-size);
    line-height: 1.12;
  }

  .view-desc {
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .eyebrow {
    font-size: var(--text-xs);
    letter-spacing: .12em;
  }

  .primary-btn,
  .secondary-btn,
  .action-btn,
  .chip,
  .quick-suggestions button,
  .chat-quick-chips button,
  .an-tab-btn,
  .mgmt-tab {
    min-height: 44px;
  }

  .primary-btn,
  .secondary-btn {
    padding-inline: 18px;
  }

  input,
  textarea,
  select,
  .input-field,
  .an-input,
  .an-select,
  .chat-input-field {
    font-size: var(--text-md) !important;
  }

  .input-field,
  select.input-field,
  select {
    min-height: 48px;
    margin-bottom: 18px;
  }

  .today-greeting-box,
  .gis-card-dialog,
  .create-project-shell,
  .project-detail-header,
  .project-card,
  .attention-card {
    border-radius: 18px;
  }

  .today-greeting-box,
  .gis-card-dialog,
  .create-project-shell {
    padding: 20px;
  }

  .today-greeting-box {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }

  .today-greeting-box > *,
  .today-speak > div:last-child,
  .gis-header-speak > div:last-child,
  .quick-suggestions {
    min-width: 0;
    max-width: 100%;
  }

  .today-speak,
  .gis-header-speak {
    gap: 12px;
  }

  .gis-avatar {
    width: 40px;
    height: 40px;
    font-size: var(--text-lg);
  }

  .gis-header-speak {
    margin-bottom: 22px;
  }

  .gis-header-speak h2 {
    margin-top: 2px;
    font-size: var(--text-xl);
    line-height: 1.25;
  }

  .prompt-bar-wrap {
    flex-direction: column;
    gap: 10px;
  }

  .prompt-bar-wrap .primary-btn {
    width: 100%;
  }

  .quick-suggestions,
  .detail-sub-tabs,
  .an-subtabs-bar,
  .user-mgmt-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .quick-suggestions::-webkit-scrollbar,
  .detail-sub-tabs::-webkit-scrollbar,
  .an-subtabs-bar::-webkit-scrollbar,
  .user-mgmt-tabs::-webkit-scrollbar {
    display: none;
  }

  .quick-suggestions button,
  .detail-sub-tab,
  .an-tab-btn,
  .mgmt-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .quick-suggestions {
    width: 100%;
    padding-bottom: 3px;
  }

  .today-kpi-cards {
    display: grid;
    grid-template-columns: 1fr;
  }

  .kpi-stat-card {
    min-height: 78px;
    padding: 14px;
  }

  #todayAttentionSection {
    margin-top: 28px !important;
  }

  #todayAttentionSection > div:first-child,
  #view-projects > .view-header,
  #view-tasks > .view-header {
    align-items: stretch !important;
    flex-direction: column;
    gap: 14px;
  }

  .projects-grid,
  .attention-grid,
  .summary-card-grid,
  .pending-cards-grid,
  .schedule-choice-cards,
  .form-grid-2,
  .gantt-modal-grid {
    grid-template-columns: 1fr;
  }

  .project-card,
  .attention-card,
  .task-card,
  .project-detail-header {
    padding: 18px;
  }

  .project-card-header,
  .project-detail-header,
  .task-card,
  .recommendation-card,
  .multi-project-item-card {
    align-items: stretch;
    flex-direction: column;
  }

  .project-detail-header > div[style*="justify-content:space-between"] {
    align-items: stretch !important;
    flex-direction: column;
  }

  .project-detail-header div[style*="text-align:right"] {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .project-card .primary-btn,
  .project-card .secondary-btn,
  .task-actions,
  .task-actions .action-btn,
  .recommendation-card .action-btn {
    width: 100%;
  }

  .project-card-actions .project-detail-btn {
    flex: 1 1 0;
    width: auto;
  }

  .project-card-actions .project-delete-btn {
    flex: 0 0 48px;
    width: 48px;
    padding-inline: 0;
  }

  .task-actions,
  .insight-actions,
  .action-buttons-row {
    flex-wrap: wrap;
  }

  .tasks-toolbar,
  #userTasksContainer > div:first-child {
    align-items: stretch !important;
    flex-direction: column;
    gap: 12px;
  }

  .tasks-toolbar .primary-btn-sm,
  #userTasksContainer > div:first-child .primary-btn-sm {
    width: 100%;
    min-height: 44px;
  }

  .task-actions > *,
  .insight-actions > * {
    flex: 1 1 140px;
  }

  .tasks-project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tasks-project-badge-wrap {
    width: 100%;
    justify-content: space-between;
  }

  .tasks-project-stages {
    padding-left: 0;
  }

  .tasks-collaborator-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tasks-collaborator-actions {
    width: 100%;
  }

  .tasks-collaborator-actions .primary-btn {
    width: 100%;
    min-height: 40px;
  }

  .onboarding-wrap {
    margin: 4px auto;
  }

  .onboarding-progress-bar {
    margin-bottom: 20px;
  }

  .onboarding-options-grid,
  .onboarding-options-grid[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  .option-card {
    min-height: 80px;
    padding: 16px;
  }

  .dept-contact-expand,
  .dept-contact-expand[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .onboarding-actions {
    align-items: stretch;
    gap: 10px;
  }

  .onboarding-actions > * {
    flex: 1 1 0;
  }

  .quantity-picker-box {
    margin: 24px 0;
    padding: 20px;
  }

  .qty-display-val {
    font-size: var(--text-4xl);
  }

  .stage-proposal-card,
  .phase-accordion-header {
    align-items: stretch;
    flex-direction: column;
  }

  .stage-controls,
  .phase-header-right {
    width: 100%;
    justify-content: flex-end;
  }

  .stage-controls button {
    min-width: 44px;
    min-height: 44px;
  }

  .phase-title,
  .stage-proposal-heading strong {
    white-space: normal;
  }

  .phase-tasks-body {
    padding: 12px 14px 16px;
  }

  .chat-bubble {
    max-width: 96%;
  }

  .chat-bubble .bubble-content {
    padding: 13px 15px;
  }

  .analysis-filter-bar {
    gap: 12px;
    border-radius: 14px;
  }

  .analysis-filter-bar > *,
  .filter-right-stats > *,
  .an-tab-toolbar > * {
    min-width: 0;
  }

  .an-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .an-kpi-card {
    padding: 14px;
  }

  .an-kpi-card strong {
    font-size: var(--text-2xl);
  }

  .an-chart-card {
    padding: 16px 12px;
    border-radius: 16px;
  }

  .chart-header {
    flex-direction: column;
  }

  .echarts-container {
    min-height: 250px;
  }

  .an-milestone-item,
  .d-task-item {
    align-items: flex-start;
  }

  .an-drawer-body {
    width: 100%;
    max-width: none;
    padding: max(22px, env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));
  }

  .gis-chat-fab {
    top: auto;
    right: 16px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    min-width: 44px;
    min-height: 44px;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(47, 91, 255, .38);
  }

  .gis-chat-fab .fab-label,
  .gis-chat-fab .fab-pulse-dot {
    display: none;
  }

  .gis-chat-fab .fab-avatar {
    width: 32px;
    height: 32px;
  }

  body.auth-mode .gis-chat-fab,
  body.auth-mode .gis-chat-widget,
  body:has(#authViewContainer[style*="display: flex"]) .gis-chat-fab,
  body:has(#authViewContainer[style*="display: flex"]) .gis-chat-widget {
    display: none !important;
  }

  .gis-chat-widget {
    height: 100dvh;
    padding: 0;
  }

  .chat-fullscreen-inner {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .chat-widget-header {
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  }

  .chat-header-brand {
    gap: 8px;
  }

  .chat-brand-info {
    display: none;
  }

  .chat-header-controls {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
  }

  .custom-project-selector {
    min-width: 0;
    max-width: calc(100vw - 124px);
  }

  .project-select-trigger {
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
  }

  .selector-label-main {
    max-width: min(42vw, 150px);
  }

  .chat-hdr-icon-btn {
    width: 44px;
    height: 44px;
  }

  .chat-history-body {
    padding: 14px;
  }

  .chat-input-footer {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  }

  .chat-input-box {
    min-height: 48px;
  }

  .chat-submit-btn {
    width: 40px;
    height: 40px;
  }

  .gis-modal,
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .gis-modal-card,
  .modal-card {
    width: 100%;
    max-width: none !important;
    max-height: calc(100dvh - 12px);
    padding: 0;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }

  .modal-card {
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .gis-modal-header {
    padding: 16px 18px;
  }

  .gis-modal-header h2 {
    font-size: var(--text-md);
  }

  .modal-close-btn,
  .drawer-close-btn {
    width: 44px;
    height: 44px;
  }

  .gis-modal-body {
    padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  }

  .recommendation-review-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 20px;
  }

  .recommendation-review-suggestion,
  .recommendation-review-comparison,
  .recommendation-review-impact {
    padding: 16px;
  }

  .recommendation-gantt-table {
    width: calc(250px + var(--recommendation-gantt-width));
    min-width: calc(250px + var(--recommendation-gantt-width));
  }

  .recommendation-gantt-task-header,
  .recommendation-gantt-task-cell {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
  }

  .recommendation-review-progress-copy,
  .recommendation-review-section-heading,
  .recommendation-review-operation-header,
  .recommendation-review-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .recommendation-review-fields {
    grid-template-columns: 1fr;
  }

  .recommendation-review-field {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .recommendation-review-field.has-dependency-selector {
    grid-template-columns: 1fr;
  }

  .recommendation-review-delete-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .recommendation-review-operation-status,
  .recommendation-review-readonly-badge {
    align-self: flex-start;
  }

  .recommendation-review-field-approve,
  .recommendation-review-footer button {
    width: 100%;
  }

  .recommendation-review-footer {
    gap: 10px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  }

  .gis-modal-body [style*="grid-template-columns:1fr 1fr"],
  .gis-modal-body [style*="grid-template-columns: 1fr 1fr"],
  .gis-modal-body [style*="grid-template-columns: 1fr 1fr 1fr"],
  .gis-modal-body [style*="grid-template-columns:1fr 1fr 1fr"],
  .modal-card [style*="grid-template-columns:1fr 1fr"],
  .modal-card [style*="grid-template-columns: 1fr 1fr"],
  .modal-card [style*="grid-template-columns: 1fr 1fr 1fr"],
  .modal-card [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  body:has(.modal-overlay.open) .gis-chat-fab,
  body:has(.gis-modal.open) .gis-chat-fab,
  body:has(.gis-modal.active) .gis-chat-fab {
    opacity: 0;
    pointer-events: none;
  }

  .user-mgmt-title {
    min-width: 0;
  }

  .users-table-wrap,
  .markdown-body .md-table-wrapper,
  .gantt-scroll-container {
    margin-inline: -4px;
    overscroll-behavior-x: contain;
  }

  .users-table {
    min-width: 720px;
  }

  .form-actions-row,
  .action-buttons-row,
  .role-selector-row {
    align-items: stretch;
    flex-direction: column;
  }

  .form-actions-row .primary-btn,
  .action-buttons-row button {
    width: 100%;
  }

  .lock-banner-content,
  .user-auth-lock-banner .lock-banner-content {
    align-items: stretch;
    flex-direction: column;
  }

  .toast-msg {
    top: max(76px, calc(60px + env(safe-area-inset-top)));
    left: 12px;
    right: 12px;
    width: auto;
  }

  .gantt-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .gantt-stat-card {
    align-items: flex-start;
    padding: 12px;
  }

  .gantt-stat-icon {
    width: 36px;
    height: 36px;
  }

  .gantt-controls-bar,
  .gantt-legend {
    align-items: flex-start;
  }

  .gantt-toolbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .gantt-task-filter-group {
    width: 100%;
    padding-right: 0;
    padding-bottom: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .gantt-task-filter-group .gantt-action-btn,
  .gantt-stage-control-group .gantt-action-btn {
    min-height: 44px;
  }

  .gantt-header-task-col,
  .gantt-stage-name-cell,
  .gantt-task-name-cell {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
  }

  .gantt-task-title {
    max-width: 160px;
  }

  .gantt-main-table {
    min-width: 1240px;
  }

  #authViewContainer {
    min-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom));
    align-items: flex-start;
  }

  .auth-card-wrapper {
    max-width: 480px;
    padding: 28px 20px;
    border-radius: 22px;
  }

  .auth-brand-badge {
    margin-bottom: 14px;
  }

  .auth-title {
    font-size: var(--text-xl);
  }

  .auth-tabs-toggle {
    margin-bottom: 18px;
  }

  .auth-tab-btn {
    min-height: 44px;
    padding-inline: 8px;
  }

  .auth-clerk-mount-point {
    min-height: 320px;
  }

  .auth-card-footer {
    align-items: center;
    flex-direction: column;
    gap: 12px;
    line-height: 1.4;
  }
}

@media (max-width: 430px) {
  .app-container {
    padding-inline: 12px;
  }

  .today-greeting-box,
  .gis-card-dialog,
  .create-project-shell,
  .project-card,
  .attention-card,
  .task-card,
  .project-detail-header {
    padding: 16px;
  }

  .today-speak,
  .gis-header-speak {
    align-items: flex-start;
  }

  .today-speak .gis-avatar,
  .gis-header-speak .gis-avatar {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
  }

  .today-speak .view-title {
    font-size: var(--text-2xl);
  }

  .onboarding-actions {
    flex-direction: column-reverse;
  }

  .onboarding-actions .primary-btn,
  .onboarding-actions .secondary-btn {
    width: 100%;
  }

  .an-kpi-grid,
  .gantt-stats-strip,
  .drawer-stats-grid {
    grid-template-columns: 1fr;
  }

  .an-milestone-item,
  .d-task-item {
    flex-direction: column;
  }

  .an-milestone-item .m-date,
  .d-task-item .t-badge {
    text-align: left;
  }

  .auth-card-wrapper {
    padding-inline: 16px;
  }

  .auth-brand-text span {
    font-size: var(--text-xs);
    letter-spacing: 1.1px;
  }
}

/* Executive analysis — quiet, high-clarity layout */
#view-executive .an-metadata-readiness {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) auto;
  gap: 24px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border-color: rgba(255, 180, 84, .2);
  border-left: 3px solid rgba(255, 180, 84, .78);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

#view-executive .an-metadata-readiness.is-complete {
  border-color: rgba(55, 215, 164, .18);
  border-left-color: rgba(55, 215, 164, .78);
  background: rgba(55, 215, 164, .025);
}

#view-executive .an-metadata-readiness-main {
  gap: 13px;
}

#view-executive .an-readiness-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
  background: rgba(255, 180, 84, .1);
  font-size: var(--text-md);
}

#view-executive .an-metadata-readiness h2 {
  margin: 4px 0 3px;
  font-size: var(--text-sm);
}

#view-executive .an-metadata-readiness p {
  font-size: var(--text-xs);
}

#view-executive .an-readiness-progress > div {
  height: 4px;
}

#view-executive .an-readiness-progress strong {
  font-size: var(--text-xs);
}

#view-executive .an-metadata-readiness .primary-btn,
#view-executive .an-metadata-readiness .secondary-btn {
  padding: 9px 13px;
  border-radius: 9px;
  box-shadow: none;
}

#view-executive .analysis-filter-bar {
  position: sticky;
  top: 94px;
  display: block;
  padding: 0;
  margin-bottom: 34px;
  overflow: hidden;
  border-color: rgba(232, 235, 243, .1);
  border-radius: 16px;
  background: rgba(13, 19, 40, .88);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .24);
}

.analysis-filter-primary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px 12px 10px 18px;
}

#view-executive .filter-group-icon {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(232, 235, 243, .72);
  font-size: var(--text-xs);
  letter-spacing: .09em;
}

.an-filter-symbol {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.an-filter-symbol::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  border-top: 1.5px solid currentColor;
}

#view-executive .filter-right-stats {
  gap: 8px;
}

#view-executive .count-badge {
  padding-right: 8px;
  font-family: var(--font-body);
  color: rgba(232, 235, 243, .55);
  letter-spacing: .04em;
}

#view-executive .count-badge b {
  color: #fff;
  font-size: var(--text-xs);
}

#view-executive .an-refresh-btn,
#view-executive .an-reset-btn {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 9px;
  background: transparent;
}

.an-filter-panel {
  border-top: 1px solid rgba(232, 235, 243, .08);
}

.an-filter-panel > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  color: var(--muted-bright);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.an-filter-panel > summary::-webkit-details-marker {
  display: none;
}

.an-filter-panel > summary > span:first-child {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.an-filter-panel > summary small {
  color: rgba(161, 169, 188, .7);
  font-size: var(--text-xs);
}

.an-filter-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.an-filter-panel[open] .an-filter-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.an-filter-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(232, 235, 243, .06);
  background: rgba(255, 255, 255, .018);
}

.an-filter-fields > label:not(.an-checkbox-label) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.an-filter-fields > label > span {
  color: rgba(161, 169, 188, .82);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .045em;
  text-transform: uppercase;
}

#view-executive .an-filter-fields .an-input,
#view-executive .an-filter-fields .an-select {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 9px 10px;
  border-color: rgba(232, 235, 243, .1);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  font-size: var(--text-xs);
}

#view-executive .an-filter-fields .an-checkbox-label {
  align-self: end;
  min-height: 36px;
  padding: 0 4px;
  color: rgba(232, 235, 243, .72);
  font-size: var(--text-xs);
}

#view-executive .an-filter-fields .an-checkbox-label span {
  color: inherit;
  font-size: inherit;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}

#analysisKpiStrip {
  width: 100%;
}

#view-executive .an-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 20px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#view-executive .an-kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 94px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 16px);
  background: var(--color-surface);
  text-align: left;
  min-width: 0;
  box-shadow: var(--shadow-apple-sm);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#view-executive .an-kpi-card::before {
  content: none !important;
  display: none !important;
}

#view-executive .an-kpi-card.tone-critical {
  border-color: rgba(244, 63, 94, 0.3);
  background: linear-gradient(180deg, var(--component-danger-soft) 0%, var(--color-surface) 54px);
}

#view-executive .an-kpi-card.tone-warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(180deg, var(--component-warning-soft) 0%, var(--color-surface) 54px);
}

#view-executive .an-kpi-card.tone-ok {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(180deg, var(--component-success-soft) 0%, var(--color-surface) 54px);
}

#view-executive .an-kpi-card.clickable {
  cursor: pointer;
}

#view-executive .an-kpi-card.clickable:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-apple-md);
}

#view-executive .an-kpi-card.clickable.tone-critical:hover {
  border-color: var(--color-danger);
}

#view-executive .an-kpi-card.clickable.tone-warning:hover {
  border-color: var(--color-warning);
}

#view-executive .an-kpi-card.is-filtered-active {
  border-color: var(--blue, #2F5BFF);
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.25), 0 4px 14px rgba(0, 0, 0, 0.2);
}

#view-executive .an-kpi-card .an-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin-bottom: 2px;
}

#view-executive .an-kpi-card small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

#view-executive .an-kpi-card strong {
  display: block;
  font: var(--weight-semibold) var(--text-xl) / 1.15 var(--font-heading);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 4px 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

#view-executive .an-kpi-card strong.tone-critical,
#view-executive .an-kpi-card.tone-critical strong {
  color: var(--red);
}

#view-executive .an-kpi-card strong.tone-warning,
#view-executive .an-kpi-card.tone-warning strong {
  color: var(--amber);
}

#view-executive .an-kpi-card strong.tone-ok,
#view-executive .an-kpi-card.tone-ok strong {
  color: var(--green);
}

#view-executive .an-kpi-card .hint {
  display: block;
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

#view-executive .an-kpi-card .an-metric-explain-btn {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease;
}

#view-executive .an-kpi-card .an-metric-explain-btn:hover {
  opacity: 1;
  color: var(--text);
}

#view-executive .an-data-coverage {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 0 0 28px 0;
  padding: 10px 18px;
  border: 1px solid rgba(232, 235, 243, .09);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

#view-executive .an-data-coverage .an-coverage-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#view-executive .an-data-coverage .an-coverage-item .ui-icon {
  color: var(--muted);
  opacity: 0.75;
  flex-shrink: 0;
}

#view-executive .an-data-coverage b {
  color: var(--text);
  font-weight: var(--weight-semibold);
}

#view-executive .an-subtabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  min-width: 0;
  flex: 1 1 auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#view-executive .an-subtabs-bar::-webkit-scrollbar {
  display: none;
}

#view-executive .an-tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  color: rgba(161, 169, 188, .78);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

#view-executive .an-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

#view-executive .an-tab-btn.active {
  background: rgba(47, 91, 255, .13);
  color: #fff;
  box-shadow: none;
}

#view-executive .an-tab-btn.active::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: -11px;
  left: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue2);
}

#view-executive .an-charts-stack,
#view-executive .an-charts-grid {
  gap: 24px;
}

#view-executive .an-chart-card {
  padding: 24px;
  border-color: rgba(232, 235, 243, .09);
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

#view-executive .chart-header {
  margin-bottom: 18px;
}

@media (max-width: 1200px) {
  #view-executive .an-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  #view-executive .an-metadata-readiness {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto;
    gap: 16px;
  }

  .an-filter-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #view-executive .an-metadata-readiness {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #view-executive .an-readiness-progress {
    max-width: none;
  }

  #view-executive .an-metadata-readiness button {
    width: 100%;
  }

  #view-executive .analysis-filter-bar {
    top: 86px;
    padding: 0;
  }

  .analysis-filter-primary {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }

  #view-executive .filter-group-icon {
    width: auto;
  }

  #view-executive .filter-right-stats {
    width: auto;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
  }

  #view-executive .count-badge {
    display: none;
  }

  .an-filter-panel > summary {
    grid-template-columns: auto 1fr;
  }

  .an-filter-panel > summary small {
    display: none;
  }

  .an-filter-chevron {
    justify-self: end;
  }

  .an-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-executive .an-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-executive .an-kpi-card {
    min-height: 80px;
    padding: 10px 12px;
  }

  #view-executive .an-data-coverage {
    gap: 8px 16px;
    margin-bottom: 18px;
  }
}

@media (max-width: 480px) {
  #view-executive .an-refresh-btn span {
    display: none;
  }

  .an-filter-fields {
    grid-template-columns: 1fr;
  }

  #view-executive .an-kpi-grid {
    grid-template-columns: 1fr;
  }

  #view-executive .an-kpi-card {
    min-height: 76px;
    padding: 10px 12px;
  }

  #view-executive .an-data-coverage {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   SOLID BLUE / PRIMARY CONTRAST INVARIANT (DARK & LIGHT THEMES)
   Garantiza 100% legibilidad (#ffffff) en textos e iconos en botones primarios sólidos
   ========================================================================== */
:is(.primary-btn,
  .primary-btn-sm,
  .btn-primary,
  .action-btn.is-primary,
  .chat-submit-btn,
  .chat-bubble.user .bubble-content),
:is(.primary-btn,
  .primary-btn-sm,
  .btn-primary,
  .action-btn.is-primary,
  .chat-submit-btn,
  .chat-bubble.user .bubble-content) :is(span, b, strong, i, em, small, p, svg, .ui-icon, use, line, path, polygon, circle) {
  color: #ffffff !important;
}

:is(.primary-btn, .primary-btn-sm, .btn-primary, .action-btn.is-primary, .chat-submit-btn) :is(svg, .ui-icon) {
  stroke: #ffffff !important;
}

/* ==========================================================================
   PROJECT MEETINGS & SEMANTIC HTML VIEWER STYLING
   ========================================================================== */

.project-meetings-container {
  animation: fadeIn 0.25s ease-out;
}

.meeting-card-item {
  position: relative;
  overflow: hidden;
}

.meeting-card-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

#meetingViewerModal {
  overflow: hidden;
}

#meetingViewerModal .meeting-viewer-modal-card {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
  height: min(90dvh, 860px);
  max-height: 90dvh;
  padding: 0;
  overflow: hidden;
}

#meetingViewerModal .meeting-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 18px;
  min-height: 0;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
}

.meeting-viewer-heading,
.meeting-viewer-header-actions,
.meeting-viewer-meta,
.meeting-viewer-meta-item,
.meeting-viewer-action,
.meeting-viewer-delete-btn {
  display: flex;
  align-items: center;
}

.meeting-viewer-heading {
  flex: 1;
  gap: 12px;
  min-width: 0;
}

.meeting-viewer-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(47, 91, 255, 0.22);
  border-radius: 11px;
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.1);
}

.meeting-viewer-heading-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.meeting-viewer-heading-copy {
  flex: 1;
  min-width: 0;
}

#meetingViewerTitle {
  margin-top: 3px;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-viewer-meta {
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.meeting-viewer-meta-item {
  gap: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.meeting-viewer-meta-item .ui-icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.meeting-viewer-header-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.meeting-viewer-action {
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  font-size: var(--text-xs);
  text-decoration: none;
}

.meeting-viewer-action .ui-icon,
.meeting-viewer-delete-btn .ui-icon {
  width: 15px;
  height: 15px;
}

.meeting-viewer-print-btn {
  width: 38px;
  padding-inline: 0;
}

#meetingViewerModal .meeting-viewer-workspace {
  display: grid;
  grid-template-areas: 'document recommendations';
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.72fr);
  flex: 1 1 auto;
  gap: 18px;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  background: var(--panel);
}

#meetingViewerModal .meeting-recommendations-panel {
  grid-area: recommendations;
  min-width: 0;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

#meetingViewerModal .meeting-recommendations-heading {
  display: block;
  margin-bottom: 14px;
}

#meetingViewerModal .meeting-recommendations-heading h3 {
  font-size: var(--text-md);
}

#meetingViewerModal .meeting-recommendations-heading p {
  max-width: none;
}

#meetingViewerModal .meeting-recommendations-engine-badge {
  margin-top: 10px;
}

#meetingViewerModal .meeting-recommendation-card {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  overflow: hidden;
}

.meeting-recommendation-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.meeting-recommendation-index {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(47, 91, 255, 0.24);
  border-radius: 7px;
  color: var(--blue2);
  background: rgba(47, 91, 255, 0.08);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

#meetingViewerModal .meeting-recommendation-status {
  margin: 0;
  white-space: normal;
}

#meetingViewerModal .recommendation-info,
#meetingViewerModal .recommendation-info h4,
#meetingViewerModal .recommendation-info p,
.meeting-recommendation-detail,
.meeting-recommendation-detail span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#meetingViewerModal .recommendation-info h4 {
  margin-bottom: 6px;
  font-size: var(--text-sm);
  line-height: 1.4;
}

#meetingViewerModal .recommendation-info p {
  margin-bottom: 11px;
  font-size: var(--text-xs);
  line-height: 1.55;
}

.meeting-recommendation-detail {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding: 9px 10px;
  border-left: 3px solid var(--blue2);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  background: rgba(47, 91, 255, 0.055);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.meeting-recommendation-detail strong {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.meeting-recommendation-detail.evidence {
  border-left-color: rgba(142, 155, 174, 0.55);
  background: rgba(142, 155, 174, 0.055);
}

.meeting-recommendation-detail.reason {
  border-left-color: var(--amber);
  background: rgba(255, 180, 84, 0.07);
}

#meetingViewerModal .meeting-recommendation-capabilities {
  margin-top: 9px;
}

#meetingViewerModal .recommendation-actions,
#meetingViewerModal .meeting-recommendation-action {
  width: 100%;
}

#meetingViewerModal .meeting-recommendation-action {
  min-height: 38px;
}

#meetingViewerModal .meeting-document-viewer {
  grid-area: document;
  min-width: 0;
  padding: clamp(20px, 3vw, 38px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
  scrollbar-width: thin;
}

#meetingViewerModal .meeting-viewer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 12px;
  margin: 0;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  background: var(--component-modal-bg, var(--panel));
  box-shadow: 0 -12px 28px rgba(5, 10, 24, 0.2);
}

.meeting-viewer-delete-btn {
  gap: 7px;
  color: var(--red, #ef4444);
  border-color: rgba(239, 68, 68, 0.28);
  font-size: var(--text-xs);
}

.meeting-document-viewer {
  font-family: inherit;
  color: var(--color-text);
  line-height: 1.75;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.meeting-html-content h1,
.meeting-html-content h2,
.meeting-html-content h3,
.meeting-html-content h4 {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  margin-top: 24px;
  margin-bottom: 12px;
  line-height: 1.35;
}

.meeting-html-content h1 {
  font-size: var(--text-xl);
  border-bottom: 2px solid var(--line);
  padding-bottom: 8px;
  margin-top: 8px;
}

.meeting-html-content h2 {
  font-size: var(--text-lg);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.meeting-html-content h3 {
  font-size: var(--text-sm);
}

.meeting-html-content p {
  margin: 0 0 14px;
  color: var(--color-text);
}

.meeting-html-content ul,
.meeting-html-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.meeting-html-content li {
  margin-bottom: 6px;
}

.meeting-html-content strong,
.meeting-html-content b {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.meeting-html-content em,
.meeting-html-content i {
  font-style: italic;
}

.meeting-html-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: var(--text-sm);
  background: var(--panel2);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.meeting-html-content th,
.meeting-html-content td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.meeting-html-content th:last-child,
.meeting-html-content td:last-child {
  border-right: none;
}

.meeting-html-content th {
  background: var(--bg-alt, rgba(0, 0, 0, 0.04));
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.meeting-html-content tr:last-child td {
  border-bottom: none;
}

.meeting-html-content tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

.meeting-html-content blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 4px solid var(--blue1);
  background: rgba(59, 130, 246, 0.05);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-style: italic;
}

.meeting-html-content blockquote p {
  margin: 0;
}

@media (max-width: 900px) {
  #meetingViewerModal .meeting-viewer-modal-card {
    width: min(100%, calc(100vw - 24px));
  }

  #meetingViewerModal .meeting-viewer-workspace {
    grid-template-areas:
      'recommendations'
      'document';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    overflow-y: auto;
  }

  #meetingViewerModal .meeting-recommendations-panel,
  #meetingViewerModal .meeting-document-viewer {
    overflow: visible;
  }

  #meetingViewerModal .meeting-recommendation-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #meetingViewerModal .recommendation-actions,
  #meetingViewerModal .meeting-recommendation-action {
    width: auto;
  }
}

@media (max-width: 700px) {
  #meetingViewerModal {
    align-items: flex-end;
    padding: 0;
  }

  #meetingViewerModal .meeting-viewer-modal-card {
    width: 100%;
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    border-radius: 20px 20px 0 0;
  }

  #meetingViewerModal .meeting-viewer-header {
    align-items: flex-start;
    padding: 14px 15px;
  }

  .meeting-viewer-heading-icon,
  .meeting-viewer-print-btn,
  .meeting-viewer-action span,
  .meeting-viewer-meta-item:nth-child(2) {
    display: none;
  }

  .meeting-viewer-heading {
    gap: 0;
  }

  .meeting-viewer-header-actions {
    gap: 6px;
  }

  .meeting-viewer-action {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  #meetingViewerTitle {
    max-width: calc(100vw - 150px);
    font-size: var(--text-sm);
  }

  .meeting-viewer-meta {
    display: block;
  }

  .meeting-viewer-meta-item {
    margin-top: 3px;
  }

  #meetingViewerModal .meeting-viewer-workspace {
    gap: 12px;
    padding: 12px;
  }

  #meetingViewerModal .meeting-recommendations-panel,
  #meetingViewerModal .meeting-document-viewer {
    padding: 14px;
    border-radius: 12px;
  }

  #meetingViewerModal .meeting-recommendation-card {
    display: flex;
    flex-direction: column;
  }

  #meetingViewerModal .recommendation-actions,
  #meetingViewerModal .meeting-recommendation-action {
    width: 100%;
  }

  #meetingViewerModal .meeting-viewer-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  #meetingViewerModal .meeting-viewer-footer button,
  #meetingViewerSecondaryActions,
  #meetingViewerSecondaryActions button {
    width: 100%;
  }

  .meeting-html-content table {
    font-size: var(--text-xs);
  }

  .recommendation-review-modal-card {
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
  }

  .recommendation-review-header {
    padding-block: 14px;
  }

  .recommendation-review-header p {
    margin-top: 3px;
  }

  .recommendation-review-suggestion,
  .recommendation-review-overview,
  .recommendation-review-comparison,
  .recommendation-review-impact,
  .recommendation-review-operation-body {
    padding: 14px;
  }

  .recommendation-gantt-metrics {
    gap: 6px;
  }

  .recommendation-gantt-metrics > div {
    padding: 9px 8px;
  }

  .recommendation-gantt-metrics strong {
    font-size: var(--text-xs);
  }

  .recommendation-gantt-scroll {
    max-height: min(48dvh, 420px);
  }

  .recommendation-gantt-table {
    width: calc(175px + var(--recommendation-gantt-width));
    min-width: calc(175px + var(--recommendation-gantt-width));
  }

  .recommendation-gantt-task-header,
  .recommendation-gantt-task-cell {
    width: 175px;
    min-width: 175px;
    max-width: 175px;
  }

  .recommendation-gantt-task-cell {
    padding-inline: 10px !important;
  }

  .recommendation-gantt-task-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .recommendation-review-diff-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
  }

  .recommendation-review-diff-table,
  .recommendation-review-diff-table tbody,
  .recommendation-review-diff-table tr,
  .recommendation-review-diff-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .recommendation-review-diff-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .recommendation-review-diff-table tbody {
    display: grid;
    gap: 10px;
  }

  .recommendation-review-diff-table tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel2);
  }

  .recommendation-review-diff-table td {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
    overflow-wrap: anywhere;
  }

  .recommendation-review-diff-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }

  .recommendation-review-diff-table .recommendation-review-impacted-task {
    grid-template-columns: auto minmax(0, 1fr);
    padding-top: 11px;
  }

  .recommendation-review-diff-table .recommendation-review-impacted-task::before {
    display: none;
  }

  .recommendation-review-diff-row.is-impacted.requested td:first-child,
  .recommendation-review-diff-row.is-impacted.automatic td:first-child {
    box-shadow: none;
  }
}

/* ==============================================================================
   ANALYSIS STORYTELLING & FINANCIAL INTELLIGENCE
   ============================================================================== */
.an-composition-brief,
.an-decision-brief {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  padding: clamp(18px, 1.6vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
}

.an-brief-top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.an-composition-brief > div:first-child,
.an-decision-brief-copy {
  flex: 1 1 360px;
  min-width: 0;
}

.an-brief-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.an-brief-controls .an-tab-filters-group {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}

.an-brief-controls .an-tab-filters-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.an-composition-brief > div:first-child > small,
.an-decision-brief-copy > small,
.an-story-step {
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .09em;
}
.an-story-step {
  display: block;
  margin-bottom: 5px;
  line-height: 1.2;
}
.an-composition-brief h2,
.an-decision-brief h2 {
  margin: 4px 0 7px;
  color: var(--text);
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
}
.an-composition-brief p,
.an-decision-brief p {
  margin: 0;
  color: var(--muted-bright);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.an-composition-brief p b,
.an-decision-brief p b { color: var(--text); }

.an-composition-summary,
.an-decision-summary {
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols, 3), minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.an-composition-summary article,
.an-decision-summary article,
.an-decision-summary .an-kpi-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(232, 235, 243, .09);
  border-left: 3px solid rgba(232, 235, 243, .2);
  border-radius: 12px;
  background: transparent;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
}

.an-decision-summary article.tone-critical,
.an-decision-summary .an-kpi-card.tone-critical {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(255, 111, 125, 0.08) 0%, var(--panel2) 42%);
}

.an-decision-summary article.tone-warning,
.an-decision-summary .an-kpi-card.tone-warning {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, rgba(255, 180, 84, 0.08) 0%, var(--panel2) 42%);
}

.an-decision-summary article.tone-ok,
.an-decision-summary .an-kpi-card.tone-ok {
  border-left-color: var(--green);
  background: linear-gradient(90deg, rgba(55, 215, 164, 0.08) 0%, var(--panel2) 42%);
}

.an-decision-summary article.clickable,
.an-decision-summary .an-kpi-card.clickable {
  cursor: pointer;
}

.an-decision-summary article.clickable:hover,
.an-decision-summary .an-kpi-card.clickable:hover {
  border-color: var(--line-glow, rgba(123, 140, 255, 0.28));
  border-left-color: var(--line-glow, rgba(123, 140, 255, 0.8));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.an-decision-summary article.clickable.tone-critical:hover,
.an-decision-summary .an-kpi-card.clickable.tone-critical:hover {
  border-left-color: var(--red);
}

.an-decision-summary article.clickable.tone-warning:hover,
.an-decision-summary .an-kpi-card.clickable.tone-warning:hover {
  border-left-color: var(--amber);
}

.an-decision-summary article.is-filtered-active,
.an-decision-summary .an-kpi-card.is-filtered-active {
  border-color: var(--blue, #2F5BFF);
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.25), 0 4px 14px rgba(0, 0, 0, 0.2);
}

.an-decision-summary article .an-metric-header,
.an-decision-summary .an-kpi-card .an-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin-bottom: 2px;
}

.an-composition-summary small,
.an-decision-summary small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.an-composition-summary strong,
.an-decision-summary strong {
  display: block;
  overflow: hidden;
  margin: 6px 0 4px;
  color: var(--text);
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-decision-summary strong.tone-ok { color: var(--green); }
.an-decision-summary strong.tone-warning { color: var(--amber); }
.an-decision-summary strong.tone-critical { color: var(--red); }

.an-composition-summary span,
.an-decision-summary span,
.an-decision-summary span.hint {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.an-financial-toolbar,
.an-financial-empty {
  border: 1px solid rgba(232, 235, 243, .09);
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
}

.an-financial-actions,
.an-financial-drivers,
.an-financial-economics,
.an-financial-value-story {
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  box-shadow: none;
}

.an-financial-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 22px;
  margin-bottom: 14px;
}

.an-financial-toolbar > div:first-child { min-width: 0; }
.an-financial-toolbar small,
.an-financial-section-title small {
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .09em;
}

.an-financial-toolbar h2 {
  margin: 4px 0;
  color: var(--text);
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
}

.an-financial-toolbar p,
.an-financial-section-title > span {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.an-financial-toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.an-financial-toolbar-actions label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.an-financial-currency-pill,
.an-financial-quality {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-bright);
  background: var(--panel2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: capitalize;
}

.an-financial-quality.is-complete { border-color: color-mix(in srgb, var(--green) 45%, transparent); color: var(--green); }
.an-financial-quality.is-partial { border-color: color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); }
.an-financial-quality.is-incomplete { border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); }

.an-financial-notice {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-left: 3px solid var(--blue2);
  border-radius: 0 9px 9px 0;
  color: var(--muted-bright);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  font-size: var(--text-xs);
}

.an-financial-storyline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.an-financial-storyline li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 4%, var(--panel2));
}

.an-financial-storyline li > b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--blue2);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  font-size: var(--text-xs);
}

.an-financial-storyline strong,
.an-financial-storyline small { display: block; }
.an-financial-storyline strong { color: var(--text); font-size: var(--text-xs); }
.an-financial-storyline small { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }

.an-financial-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.an-financial-metric {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
}

.an-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.an-metric-explain-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel3);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.16s ease;
  flex-shrink: 0;
}

.an-metric-explain-btn:hover {
  background: var(--panel4);
  color: #7cb2ff;
  border-color: #7cb2ff;
  transform: translateY(-1px);
}

.an-metric-explain-btn .ui-icon {
  pointer-events: none;
}

.an-financial-break-even-kpi .an-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.an-financial-break-even-kpi .an-metric-explain-btn {
  width: 18px;
  height: 18px;
}

.an-decision-summary .an-metric-header,
.an-composition-summary .an-metric-header,
.an-kpi-card .an-metric-header {
  margin-bottom: 2px;
}

.an-decision-summary .an-metric-header small,
.an-composition-summary .an-metric-header small,
.an-kpi-card .an-metric-header small,
#view-executive .an-kpi-card .an-metric-header small {
  display: inline;
  line-height: 1.2;
  margin-bottom: 0 !important;
}

.an-kpi-card .an-metric-explain-btn {
  width: 18px;
  height: 18px;
}

.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.an-section-title-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.an-financial-metric small,
.an-financial-metric span {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
}

.an-financial-metric strong {
  display: block;
  overflow: hidden;
  margin: 7px 0 5px;
  color: var(--text);
  font: var(--weight-semibold) var(--text-xl) var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-financial-metric.is-positive strong,
.is-positive { color: var(--green) !important; }
.an-financial-metric.is-risk strong,
.is-risk { color: var(--red) !important; }

.an-financial-actions,
.an-financial-drivers,
.an-financial-economics,
.an-financial-value-story {
  padding: 20px;
  margin-bottom: 20px;
}

.an-financial-section-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.an-financial-section-title h3 {
  margin: 3px 0 0;
  color: var(--text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.an-financial-action-grid,
.an-financial-driver-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.an-financial-action,
.an-financial-driver {
  border: 1px solid rgba(232, 235, 243, .09);
  border-radius: 12px;
  padding: 12px 14px;
  background: transparent;
  text-align: left;
  transition: all .2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.an-financial-action:hover,
.an-financial-driver:hover {
  border-color: var(--blue2);
  background: var(--panel-hover);
}

.an-financial-action b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.15);
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.an-financial-action > span { min-width: 0; flex: 1; }
.an-financial-action strong,
.an-financial-driver strong { display: block; color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.an-financial-action small { display: block; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; margin-top: 2px; }
.an-financial-driver small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
.an-financial-action em { color: var(--muted-bright); font-size: var(--text-xs); font-style: normal; font-weight: var(--weight-semibold); white-space: nowrap; }

.an-financial-charts { margin-bottom: 20px; }
.an-financial-value-story { margin-bottom: 20px; }
.an-financial-value-title {
  margin-bottom: 16px;
  padding: 0;
}
.an-financial-value-title > span { max-width: 620px; text-align: right; }
.an-financial-value-story .echarts-container { min-height: 300px; }
.an-financial-value-story .an-chart-card,
.an-financial-economics-charts .an-chart-card {
  background: transparent;
  border: 1px solid rgba(232, 235, 243, .09);
  box-shadow: none;
  border-radius: 16px;
}
.an-financial-value-story .an-financial-charts { margin-bottom: 0; }

.an-financial-economics-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.an-financial-economics-header > div { min-width: 0; }
.an-financial-economics-header small {
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .09em;
}

.an-financial-economics-header h3 {
  margin: 3px 0 5px;
  color: var(--text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.an-financial-economics-header p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.an-financial-project-focus {
  display: grid;
  flex: 0 0 min(320px, 38%);
  gap: 6px;
}

.an-financial-project-focus span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.an-financial-project-focus select { width: 100%; }

.an-financial-break-even-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.an-financial-break-even-kpi {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(232, 235, 243, .09);
  border-radius: 12px;
  background: transparent;
}

.an-financial-break-even-kpi small,
.an-financial-break-even-kpi span {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.an-financial-break-even-kpi strong {
  display: block;
  overflow: hidden;
  margin: 7px 0 5px;
  color: var(--text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-financial-break-even-kpi.is-positive {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, var(--panel2));
}

.an-financial-break-even-kpi.is-warning {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--line));
}

.an-financial-break-even-kpi.is-risk {
  border-color: color-mix(in srgb, var(--red) 30%, var(--line));
}

.an-financial-economics-charts { margin-bottom: 14px; }
.an-financial-economics-charts .an-chart-card { min-width: 0; }

.an-financial-methodology {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.an-financial-methodology strong { color: var(--muted-bright); }

.an-financial-economics-empty {
  display: flex;
  gap: 13px;
  align-items: center;
  min-height: 110px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--panel2);
}

.an-financial-economics-empty > span { color: var(--blue2); font-size: var(--text-2xl); }
.an-financial-economics-empty strong { display: block; color: var(--text); font-size: var(--text-xs); }
.an-financial-economics-empty p { margin: 4px 0 0; font-size: var(--text-xs); line-height: 1.5; }

.an-financial-detail-card {
  max-width: 820px;
  max-height: min(90dvh, 820px);
  background: var(--panel);
}

.an-financial-detail-header {
  align-items: flex-start;
  background: color-mix(in srgb, var(--panel) 92%, var(--blue) 8%);
}

.an-financial-detail-header > div:first-child { min-width: 0; }
.an-financial-detail-header small {
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .09em;
}

.an-financial-detail-header h2 {
  display: block;
  overflow: hidden;
  max-width: 560px;
  margin: 4px 0;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-financial-detail-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

.an-financial-detail-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

.an-financial-detail-body {
  display: grid;
  gap: 18px;
}

.an-financial-detail-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.an-financial-detail-kpi {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
}

.an-financial-detail-kpi small,
.an-financial-detail-kpi span {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.an-financial-detail-kpi strong {
  display: block;
  overflow: hidden;
  margin: 7px 0 4px;
  color: var(--text);
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-financial-detail-kpi.is-positive strong { color: var(--green); }
.an-financial-detail-kpi.is-risk strong { color: var(--red); }

.an-financial-detail-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2) 82%, transparent);
}

.an-financial-detail-section-title {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.an-financial-detail-section-title small {
  color: var(--blue2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .08em;
}

.an-financial-detail-section-title h3 {
  margin: 3px 0 0;
  color: var(--text);
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
}

.an-financial-detail-section-title > span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.an-financial-detail-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.an-financial-detail-facts > div {
  min-width: 0;
  padding: 10px;
  border-radius: 9px;
  background: var(--panel);
}

.an-financial-detail-facts small,
.an-financial-detail-facts strong { display: block; }
.an-financial-detail-facts small { margin-bottom: 4px; color: var(--muted); font-size: var(--text-xs); }
.an-financial-detail-facts strong { overflow: hidden; color: var(--text); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

.an-financial-detail-break-even {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(220px, 1.5fr) minmax(240px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--amber) 6%, var(--panel2));
}

.an-financial-detail-break-even.is-reached {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: color-mix(in srgb, var(--green) 6%, var(--panel2));
}

.an-financial-detail-break-even small,
.an-financial-detail-break-even strong { display: block; }
.an-financial-detail-break-even > div:first-child small { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .07em; }
.an-financial-detail-break-even > div:first-child strong { margin-top: 4px; color: var(--text); font-size: var(--text-sm); }
.an-financial-detail-break-even p { margin: 0; color: var(--muted-bright); font-size: var(--text-xs); line-height: 1.5; }

.an-financial-detail-break-even-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.an-financial-detail-break-even-stats span {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel);
}

.an-financial-detail-break-even-stats small { color: var(--muted); font-size: var(--text-xs); }
.an-financial-detail-break-even-stats strong { overflow: hidden; margin-top: 4px; color: var(--text); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

.an-financial-detail-quality-note {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 10px 12px;
  border-left: 3px solid var(--amber);
  color: var(--muted);
  background: color-mix(in srgb, var(--amber) 7%, transparent);
  font-size: var(--text-xs);
}

.an-financial-detail-quality-note strong { color: var(--amber); }

.an-financial-detail-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

/* Educational chart explanation popup */
.an-chart-explain-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(47, 91, 255, 0.08);
  border: 1px solid rgba(47, 91, 255, 0.28);
  border-radius: 20px;
  color: #93c5fd;
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.an-chart-explain-btn:hover {
  background: rgba(47, 91, 255, 0.18);
  border-color: rgba(96, 165, 250, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 91, 255, 0.25);
}

.an-chart-explain-btn:focus-visible {
  outline: 2px solid var(--blue2, #3b82f6);
  outline-offset: 2px;
}

.an-chart-explain-btn .ui-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.an-chart-explain-modal-card {
  max-width: 740px;
  max-height: 90vh;
  border-radius: 20px;
  background: #0b1329;
  border: 1px solid var(--line-glow, rgba(47, 91, 255, 0.35));
}

.an-chart-explain-header {
  padding: 20px 24px;
  background: rgba(15, 25, 52, 0.96);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px;
}

.an-chart-explain-header > div {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.an-chart-explain-category-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: #93c5fd;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.28);
  margin-bottom: 2px;
}

.an-chart-explain-header h2 {
  display: block !important;
  font: var(--weight-semibold) var(--text-lg) var(--font-heading);
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.an-chart-explain-header p {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted, #94a3b8);
  margin: 0;
  line-height: 1.45;
}

.an-chart-explain-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.an-explain-section {
  background: rgba(16, 26, 54, 0.65);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: 14px;
  padding: 16px;
  transition: border-color 0.2s ease;
}

.an-explain-section:hover {
  border-color: rgba(47, 91, 255, 0.25);
}

.an-explain-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.an-explain-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(47, 91, 255, 0.14);
  border: 1px solid rgba(47, 91, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.an-explain-section-header h3 {
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  color: #f1f5f9;
  margin: 0;
}

.an-explain-section-header small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted, #94a3b8);
  margin-top: 2px;
}

.an-explain-section-content {
  font-size: var(--text-xs);
  color: #cbd5e1;
  line-height: 1.55;
}

.an-explain-section-content p {
  margin: 0 0 10px 0;
}

.an-explain-section-content p:last-child {
  margin-bottom: 0;
}

.an-explain-callout {
  padding: 12px 14px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: var(--text-xs);
  line-height: 1.5;
}

.an-explain-callout-warning {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid #f59e0b;
  color: #fde68a;
}

.an-explain-callout-warning strong {
  color: #fbbf24;
  display: block;
  margin-bottom: 4px;
}

.an-explain-steps {
  margin: 8px 0 12px 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.an-explain-steps li {
  line-height: 1.45;
}

.an-explain-formula-box {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(96, 165, 250, 0.35);
  margin-top: 10px;
}

.an-explain-formula-box code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #93c5fd;
  display: block;
  word-break: break-word;
}

.an-explain-source-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.an-explain-source-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.an-explain-source-list li strong {
  color: #e2e8f0;
  font-size: var(--text-xs);
}

.an-explain-source-list li span {
  color: var(--muted, #94a3b8);
  font-size: var(--text-xs);
}

.an-explain-source-list li code {
  color: #93c5fd;
  background: rgba(47, 91, 255, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: var(--text-xs);
}

.an-explain-decision-section {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.25);
}

.an-explain-decision-section .an-explain-icon-box {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

.an-explain-decision-section h3 {
  color: #6ee7b7;
}

.an-chart-explain-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  background: rgba(15, 25, 52, 0.95);
  display: flex;
  justify-content: flex-end;
}

/* Today view header controls & help */
.today-queue-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.today-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(47, 91, 255, 0.08);
  border: 1px solid rgba(47, 91, 255, 0.28);
  border-radius: 20px;
  color: #93c5fd;
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.today-help-btn:hover {
  background: rgba(47, 91, 255, 0.18);
  border-color: rgba(96, 165, 250, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
}

.today-queue-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--muted);
  gap: 12px;
}

/* Detail Modals for Today and Project Hierarchy */
.today-detail-modal-card {
  max-width: 780px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.today-modal-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 4px;
}

.today-modal-badge.danger {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.today-modal-badge.value {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.today-modal-badge.info {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.today-concept-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(47, 91, 255, 0.08);
  border: 1px solid rgba(47, 91, 255, 0.22);
  border-radius: 12px;
  margin-bottom: 16px;
}

.today-concept-banner-icon {
  font-size: var(--text-xl);
  line-height: 1;
  flex-shrink: 0;
}

.today-concept-banner strong {
  display: block;
  font-size: var(--text-sm);
  color: #93c5fd;
  margin-bottom: 4px;
}

.today-concept-banner p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #cbd5e1;
}

.today-modal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.today-modal-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(16, 26, 54, 0.65);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: 12px;
  transition: all 0.2s ease;
}

.today-modal-list-item:hover {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.04);
}

.today-modal-item-info {
  min-width: 0;
  flex: 1;
}

.today-modal-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.today-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.today-health-dot.danger {
  background: var(--red2, #ef4444);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.today-modal-project-pill {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted, #94a3b8);
}

.today-modal-reason-text {
  margin: 0 0 6px 0;
  font-size: var(--text-xs);
  color: #fca5a5;
  line-height: 1.4;
}

.today-modal-item-meta {
  display: flex;
  gap: 14px;
  font-size: var(--text-xs);
  color: var(--muted, #94a3b8);
}

.today-suggestion-detail-box {
  padding: 18px 20px;
  background: rgba(16, 26, 54, 0.7);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
}

.today-suggestion-detail-box h3 {
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  color: #ffffff;
  margin: 0 0 10px 0;
}

.today-suggestion-full-desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0 0 14px 0;
}

.today-suggestion-impact-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  color: #6ee7b7;
  font-size: var(--text-sm);
}

.today-concepts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 700px) {
  .today-concepts-grid {
    grid-template-columns: 1fr;
  }
}

.today-concept-card {
  padding: 16px;
  background: rgba(16, 26, 54, 0.65);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.today-concept-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.today-concept-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  flex-shrink: 0;
}

.today-concept-head h4 {
  margin: 0;
  font: var(--weight-semibold) var(--text-sm) var(--font-heading);
  color: #f1f5f9;
}

.today-concept-head small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted, #94a3b8);
}

.today-concept-card p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #cbd5e1;
}

.project-hierarchy-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(47, 91, 255, 0.08);
  border: 1px solid rgba(47, 91, 255, 0.25);
  border-radius: 20px;
  color: #93c5fd;
  font: var(--weight-semibold) var(--text-xs) var(--font-heading);
  cursor: pointer;
  transition: all 0.2s ease;
}

.project-hierarchy-help-btn:hover {
  background: rgba(47, 91, 255, 0.18);
  border-color: rgba(96, 165, 250, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
}

.an-financial-risk-table-card { margin-bottom: 20px; }
.an-financial-table-wrap { overflow-x: auto; }
.an-financial-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.an-financial-table th { padding: 10px; color: var(--muted); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.an-financial-table td { padding: 12px 10px; color: var(--muted-bright); border-bottom: 1px solid var(--line); vertical-align: middle; }
.an-financial-table td:first-child strong,
.an-financial-table td:first-child small { display: block; }
.an-financial-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
.an-table-link { border: 0; padding: 4px; color: var(--blue2); background: transparent; cursor: pointer; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.an-table-link:focus-visible { border-radius: 4px; outline: 2px solid var(--blue2); outline-offset: 2px; }

.an-financial-driver { padding: 13px; }
.an-financial-driver strong { margin: 5px 0 10px; font-size: var(--text-xs); }
.an-financial-driver span { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.an-financial-inline-empty { grid-column: 1 / -1; margin: 0; padding: 16px; color: var(--muted); text-align: center; font-size: var(--text-xs); }

.an-financial-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 280px;
  place-content: center;
  padding: 28px;
  text-align: center;
}
.an-financial-empty > span { color: var(--blue2); font-size: var(--text-3xl); }
.an-financial-empty h2 { margin: 0; color: var(--text); font-size: var(--text-lg); }
.an-financial-empty p { max-width: 520px; margin: 0 0 8px; color: var(--muted); font-size: var(--text-xs); }

.an-financial-assistant-dialog { width: min(920px, calc(100vw - 32px)); }
.an-financial-assistant-fields { max-height: min(58dvh, 560px); overflow-y: auto; }
.an-drawer-financial .secondary-btn { width: 100%; margin-top: 13px; }
.an-drawer-financial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.an-drawer-financial-grid > div { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); }
.an-drawer-financial-grid small,
.an-drawer-financial-grid strong { display: block; }
.an-drawer-financial-grid small { margin-bottom: 4px; color: var(--muted); font-size: var(--text-xs); }
.an-drawer-financial-grid strong { color: var(--text); font-size: var(--text-xs); }
.an-financial-missing { margin: 10px 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.an-financial-missing strong { color: var(--amber); }

@media (max-width: 1080px) {
  .an-brief-top-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .an-brief-controls { justify-content: flex-start; width: 100%; }
  .an-composition-summary,
  .an-decision-summary { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .an-charts-grid.three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-charts-grid.three-col .an-chart-card:last-child { grid-column: 1 / -1; }
  .an-financial-storyline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-financial-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-financial-break-even-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-financial-action-grid,
  .an-financial-driver-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .an-composition-brief,
  .an-decision-brief { padding: 18px; }
  .an-composition-summary,
  .an-decision-summary,
  .an-financial-storyline,
  .an-charts-grid.three-col { grid-template-columns: 1fr; }
  .an-charts-grid.three-col .an-chart-card:last-child { grid-column: auto; }
  .an-financial-toolbar,
  .an-financial-section-title,
  .an-financial-economics-header { align-items: stretch; flex-direction: column; }
  .an-financial-value-title > span { max-width: none; text-align: left; }
  .an-financial-toolbar-actions { justify-content: flex-start; }
  .an-financial-project-focus { flex-basis: auto; }
  .an-financial-toolbar-actions .primary-btn,
  .an-financial-toolbar-actions select,
  .an-financial-project-focus select { width: 100%; }
  .an-financial-metrics,
  .an-financial-break-even-grid,
  .an-financial-action-grid,
  .an-financial-driver-grid { grid-template-columns: 1fr; }
  .an-financial-action { grid-template-columns: 28px minmax(0, 1fr); }
  .an-financial-action em { grid-column: 2; }
  .an-financial-assistant-dialog { width: calc(100vw - 16px); }
  .an-financial-detail-header-actions { align-items: flex-end; flex-direction: column-reverse; }
  .an-financial-detail-kpi-grid,
  .an-financial-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-financial-detail-break-even { align-items: stretch; grid-template-columns: 1fr; }
  .an-financial-detail-footer { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .an-financial-detail-footer .primary-btn,
  .an-financial-detail-footer .secondary-btn { flex: 1; }
}

@media (max-width: 420px) {
  .an-financial-detail-kpi-grid,
  .an-financial-detail-facts { grid-template-columns: 1fr; }
  .an-financial-detail-footer { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .an-financial-action,
  .an-financial-driver { transition: none; }
}

/* ==============================================================================
   APPLICATION GLOBAL FOOTER
   Discreet, subtle, and centered footer adhering to Gis Design System tokens.
   ============================================================================== */
.app-footer {
  margin-top: auto;
  padding: 32px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-top: 1px solid rgba(232, 235, 243, 0.05);
}

body.auth-mode .app-footer {
  display: none;
}

.app-footer-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  flex-wrap: wrap;
}

.app-footer-link {
  background: transparent;
  border: none;
  padding: 2px 4px;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.03em;
  color: var(--color-text-disabled, #7c869b);
  opacity: 0.55;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.app-footer-link:hover {
  opacity: 0.95;
  color: var(--color-primary-light, #5c82ff);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-footer-separator {
  color: var(--color-text-disabled, #7c869b);
  opacity: 0.3;
  font-size: var(--text-xs);
  user-select: none;
}

.app-footer-version {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: var(--color-text-disabled, #7c869b);
  opacity: 0.55;
  user-select: none;
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.app-footer-version:hover {
  opacity: 0.85;
  color: var(--color-text-muted, #a1a9bc);
}

html[data-theme="light"] .app-footer {
  border-top-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .app-footer-link {
  color: var(--color-slate-500, #64748b);
}

html[data-theme="light"] .app-footer-link:hover {
  color: var(--color-primary, #2f5bff);
}

html[data-theme="light"] .app-footer-separator {
  color: var(--color-slate-300, #cbd5e1);
}

html[data-theme="light"] .app-footer-version {
  color: var(--color-slate-400, #94a3b8);
}

html[data-theme="light"] .app-footer-version:hover {
  color: var(--color-slate-600, #475569);
}

@media (max-width: 640px) {
  .app-footer {
    margin-top: 32px;
    padding: 16px 0 20px;
  }

  .app-footer-content {
    gap: 8px;
  }

  .app-footer-link,
  .app-footer-version {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
  }
}

/* ==========================================================================
   INTERACTIVE USER MANUAL (MANUAL INTERACTIVO)
   Canonical visual layer for Gis interactive guide, stepper, modules and search.
   ========================================================================== */

.manual-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.manual-view-header .view-header-copy {
  flex: 1 1 500px;
}

.manual-search-wrapper {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.manual-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--component-control-bg, rgba(8, 13, 28, 0.6));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.12));
  border-radius: 10px;
  padding: 2px 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.manual-search-box:focus-within {
  border-color: var(--color-primary, #2f5bff);
  box-shadow: 0 0 0 3px rgba(47, 91, 255, 0.25);
  background: var(--component-control-bg-focus, rgba(8, 13, 28, 0.85));
}

.manual-search-box .search-icon {
  font-size: var(--text-sm);
  margin-left: 4px;
  margin-right: 8px;
  opacity: 0.7;
}

.manual-search-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--color-text, #ffffff);
  font-size: var(--text-sm);
  padding: 8px 4px;
  outline: none;
  font-family: inherit;
}

.manual-search-input::placeholder {
  color: var(--color-text-muted, #a1a9bc);
}

.manual-search-clear {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-text-secondary, #b7bfce);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 0.15s ease;
}

.manual-search-clear:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.manual-search-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-primary-hover, #5275ff);
}

/* Manual Navigation Tabs */
.manual-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px;
  background: var(--component-nav-bg, rgba(232, 235, 243, 0.035));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.08));
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.manual-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary, #b7bfce);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.manual-nav-btn .tab-icon {
  font-size: var(--text-sm);
}

.manual-nav-btn:hover {
  color: var(--color-text, #ffffff);
  background: var(--color-surface-hover, rgba(232, 235, 243, 0.08));
}

.manual-nav-btn:active {
  transform: scale(0.98);
}

.manual-nav-btn.active {
  color: #ffffff;
  background: var(--component-selected-bg, rgba(47, 91, 255, 0.2));
  border-color: var(--component-selected-border, rgba(47, 91, 255, 0.4));
  box-shadow: 0 2px 10px rgba(47, 91, 255, 0.15);
}

/* Base Manual Cards */
.manual-card {
  background: var(--color-surface, rgba(21, 34, 71, 0.88));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.12));
  border-radius: 14px;
  padding: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease;
}

.manual-card--accent {
  border-color: rgba(47, 91, 255, 0.35);
  background: linear-gradient(180deg, rgba(27, 43, 87, 0.9) 0%, rgba(21, 34, 71, 0.85) 100%);
}

.manual-card--main {
  display: flex;
  flex-direction: column;
  min-height: 380px;
}

.manual-kicker {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-hover, #5275ff);
  margin-bottom: 6px;
}

.manual-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #ffffff);
  margin: 0 0 6px 0;
}

.manual-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary, #b7bfce);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.manual-desc-lead {
  font-size: var(--text-sm);
  color: var(--color-slate-100, #e8ebf3);
  line-height: 1.6;
  margin: 12px 0 20px 0;
}

.manual-subhead {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #ffffff);
  margin: 16px 0 12px 0;
}

/* Stepper UI */
.manual-stepper-bar {
  background: var(--color-surface-muted, rgba(232, 235, 243, 0.04));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.1));
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
}

.manual-stepper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.manual-stepper-indicators {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.manual-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--component-control-bg, rgba(8, 13, 28, 0.5));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.1));
  border-radius: 8px;
  color: var(--color-text-secondary, #b7bfce);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.manual-step-indicator:hover {
  background: var(--color-surface-hover, rgba(232, 235, 243, 0.08));
  color: #ffffff;
}

.manual-step-indicator.active {
  background: var(--component-selected-bg, rgba(47, 91, 255, 0.25));
  border-color: var(--color-primary, #2f5bff);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(47, 91, 255, 0.2);
}

.manual-step-indicator.completed .step-num {
  background: var(--color-success-500, #37d7a4);
  color: #080d1c;
  font-weight: var(--weight-semibold);
}

.manual-step-indicator .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.manual-step-indicator .step-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manual-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-sm);
  color: var(--color-slate-100, #e8ebf3);
  line-height: 1.5;
}

.manual-checklist .check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(55, 215, 164, 0.2);
  color: var(--color-success-500, #37d7a4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  margin-top: 2px;
}

.manual-tip-box {
  background: rgba(47, 91, 255, 0.08);
  border-left: 3px solid var(--color-primary, #2f5bff);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: var(--text-sm);
  color: var(--color-slate-100, #e8ebf3);
  line-height: 1.5;
  margin-top: 16px;
}

.manual-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--color-border, rgba(232, 235, 243, 0.08));
  flex-wrap: wrap;
}

.manual-footer-nav {
  display: flex;
  gap: 10px;
}

.action-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(47, 91, 255, 0.4);
  background: rgba(47, 91, 255, 0.12);
  color: var(--color-primary-light, #7b8cff);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-link-btn:hover {
  background: var(--color-primary, #2f5bff);
  color: #ffffff;
  border-color: var(--color-primary, #2f5bff);
}

/* Modules Section */
.manual-modules-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}

.manual-modules-sidebar {
  background: var(--color-surface-muted, rgba(232, 235, 243, 0.035));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.08));
  border-radius: 14px;
  padding: 16px;
}

.manual-modules-sidebar .sidebar-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border, rgba(232, 235, 243, 0.06));
}

.manual-modules-sidebar .sidebar-header h3 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #ffffff);
  margin: 0;
}

.manual-module-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.manual-module-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary, #b7bfce);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.manual-module-tab:hover {
  background: var(--color-surface-hover, rgba(232, 235, 243, 0.06));
  color: #ffffff;
}

.manual-module-tab.active {
  background: var(--component-selected-bg, rgba(47, 91, 255, 0.2));
  border-color: var(--component-selected-border, rgba(47, 91, 255, 0.4));
  color: #ffffff;
}

.module-tab-icon {
  font-size: var(--text-lg);
}

.module-tab-text {
  display: flex;
  flex-direction: column;
}

.module-tab-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.module-tab-tag {
  font-size: var(--text-xs);
  color: var(--color-text-muted, #a1a9bc);
}

.manual-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.module-header-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.module-big-icon {
  font-size: var(--text-3xl);
}

.manual-module-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #ffffff);
  margin: 0;
}

.manual-module-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.manual-section-block {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.08));
  border-radius: 10px;
  padding: 16px;
}

.manual-block-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-light, #7b8cff);
  margin: 0 0 6px 0;
}

.manual-block-text {
  font-size: var(--text-sm);
  color: var(--color-slate-100, #e8ebf3);
  line-height: 1.55;
  margin: 0;
}

/* Use Cases Grid */
.manual-usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.manual-usecase-card {
  background: var(--color-surface, rgba(21, 34, 71, 0.88));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.12));
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.manual-usecase-card:hover {
  border-color: var(--color-primary, #2f5bff);
  transform: translateY(-2px);
}

.usecase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.usecase-icon {
  font-size: var(--text-2xl);
}

.usecase-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #ffffff);
  margin: 0 0 12px 0;
  line-height: 1.35;
}

.usecase-steps {
  padding-left: 18px;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-slate-300, #b7bfce);
  line-height: 1.45;
}

.usecase-steps li::marker {
  color: var(--color-primary-hover, #5275ff);
  font-weight: var(--weight-semibold);
}

.usecase-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border, rgba(232, 235, 243, 0.08));
}

.usecase-footer .secondary-btn {
  width: 100%;
  justify-content: center;
  font-size: var(--text-xs);
  padding: 8px 12px;
}

/* Cadence Section */
.cadence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.cadence-card {
  background: var(--color-surface, rgba(21, 34, 71, 0.88));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.12));
  border-radius: 14px;
  padding: 20px;
}

.cadence-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.cadence-badge--daily {
  background: rgba(55, 215, 164, 0.15);
  color: var(--color-success-500, #37d7a4);
  border: 1px solid rgba(55, 215, 164, 0.3);
}

.cadence-badge--weekly {
  background: rgba(47, 91, 255, 0.15);
  color: var(--color-primary-light, #7b8cff);
  border: 1px solid rgba(47, 91, 255, 0.3);
}

.cadence-badge--monthly {
  background: rgba(255, 180, 84, 0.15);
  color: var(--color-warning-500, #ffb454);
  border: 1px solid rgba(255, 180, 84, 0.3);
}

.cadence-card-header h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #ffffff);
  margin: 0 0 14px 0;
}

.cadence-list {
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--color-slate-100, #e8ebf3);
  line-height: 1.5;
}

.best-practices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.practice-item {
  background: rgba(8, 13, 28, 0.4);
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.08));
  border-radius: 10px;
  padding: 14px;
  font-size: var(--text-sm);
  color: var(--color-slate-100, #e8ebf3);
  line-height: 1.5;
}

/* FAQ & Accordions */
.manual-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-faq-item {
  background: var(--color-surface, rgba(21, 34, 71, 0.88));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.12));
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.manual-faq-item.open {
  border-color: rgba(47, 91, 255, 0.4);
}

.manual-faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: var(--color-text, #ffffff);
  text-align: left;
  cursor: pointer;
  gap: 16px;
}

.manual-faq-header:hover {
  background: var(--color-surface-hover, rgba(232, 235, 243, 0.04));
}

.faq-category {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-hover, #5275ff);
  margin-bottom: 4px;
}

.faq-question {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.faq-toggle-icon {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary, #b7bfce);
  flex-shrink: 0;
}

.manual-faq-body {
  padding: 0 20px 18px 20px;
  font-size: var(--text-sm);
  color: var(--color-slate-100, #e8ebf3);
  line-height: 1.6;
  border-top: 1px solid var(--color-border, rgba(232, 235, 243, 0.06));
}

.manual-faq-body p {
  margin: 12px 0 0 0;
}

/* Glossary */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.glossary-card {
  background: var(--color-surface-muted, rgba(232, 235, 243, 0.04));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.08));
  border-radius: 10px;
  padding: 14px;
}

.glossary-card h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-light, #7b8cff);
  margin: 0 0 6px 0;
}

.glossary-card p {
  font-size: var(--text-xs);
  color: var(--color-slate-300, #b7bfce);
  margin: 0;
  line-height: 1.45;
}

/* Search Results UI */
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.search-result-card {
  background: var(--color-surface, rgba(21, 34, 71, 0.88));
  border: 1px solid var(--color-border, rgba(232, 235, 243, 0.12));
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.result-type-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--color-primary-hover, #5275ff);
  margin-bottom: 6px;
}

.result-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text, #ffffff);
  margin: 0 0 8px 0;
}

.result-text {
  font-size: var(--text-sm);
  color: var(--color-slate-300, #b7bfce);
  line-height: 1.4;
  margin: 0 0 14px 0;
}

.search-result-card .action-link-btn {
  margin-top: auto;
}

.manual-empty-search {
  text-align: center;
  padding: 48px 20px;
  background: var(--color-surface-muted, rgba(232, 235, 243, 0.03));
  border-radius: 14px;
}

.manual-empty-search .empty-icon {
  font-size: var(--text-4xl);
  display: block;
  margin-bottom: 12px;
  opacity: 0.6;
}

.manual-empty-search h3 {
  color: var(--color-text, #ffffff);
  margin: 0 0 8px 0;
}

.manual-empty-search p {
  color: var(--color-text-secondary, #b7bfce);
  margin: 0 0 16px 0;
  font-size: var(--text-sm);
}

/* Footer Link Highlight */
.app-footer-link--manual {
  font-weight: var(--weight-semibold) !important;
  color: var(--color-primary-hover, #5275ff) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.app-footer-link--manual:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(47, 91, 255, 0.6);
}

.app-footer-link--manual .footer-btn-icon {
  font-size: var(--text-xs);
}

/* Light Theme Overrides for Manual */
html[data-theme="light"] .manual-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .manual-card--accent {
  background: linear-gradient(180deg, #f8faff 0%, #edf2fe 100%);
  border-color: rgba(47, 91, 255, 0.25);
}

html[data-theme="light"] .manual-search-box {
  background: #ffffff;
  border-color: #cbd5e1;
}

html[data-theme="light"] .manual-search-input {
  color: #0f172a;
}

html[data-theme="light"] .manual-search-input::placeholder {
  color: #94a3b8;
}

html[data-theme="light"] .manual-nav {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .manual-nav-btn {
  color: #475569;
}

html[data-theme="light"] .manual-nav-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .manual-nav-btn.active {
  background: #ffffff;
  color: var(--color-primary, #2f5bff);
  border-color: rgba(47, 91, 255, 0.3);
  box-shadow: 0 2px 8px rgba(47, 91, 255, 0.12);
}

html[data-theme="light"] .manual-section-title,
html[data-theme="light"] .manual-module-title,
html[data-theme="light"] .manual-subhead,
html[data-theme="light"] .usecase-title,
html[data-theme="light"] .cadence-card-header h3,
html[data-theme="light"] .manual-faq-header,
html[data-theme="light"] .result-title,
html[data-theme="light"] .manual-empty-search h3 {
  color: #0f172a;
}

html[data-theme="light"] .manual-desc,
html[data-theme="light"] .manual-desc-lead,
html[data-theme="light"] .manual-checklist li,
html[data-theme="light"] .manual-block-text,
html[data-theme="light"] .usecase-steps,
html[data-theme="light"] .cadence-list,
html[data-theme="light"] .practice-item,
html[data-theme="light"] .manual-faq-body,
html[data-theme="light"] .glossary-card p,
html[data-theme="light"] .result-text,
html[data-theme="light"] .manual-empty-search p {
  color: #334155;
}

html[data-theme="light"] .manual-stepper-bar {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .manual-step-indicator {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}

html[data-theme="light"] .manual-step-indicator.active {
  background: #eff6ff;
  border-color: var(--color-primary, #2f5bff);
  color: var(--color-primary, #2f5bff);
}

html[data-theme="light"] .manual-modules-sidebar {
  background: #f8fafc;
  border-color: #e2e8f0;
}

html[data-theme="light"] .manual-module-tab {
  color: #475569;
}

html[data-theme="light"] .manual-module-tab.active {
  background: #eff6ff;
  border-color: rgba(47, 91, 255, 0.3);
  color: var(--color-primary, #2f5bff);
}

html[data-theme="light"] .manual-section-block,
html[data-theme="light"] .practice-item,
html[data-theme="light"] .glossary-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

html[data-theme="light"] .manual-usecase-card,
html[data-theme="light"] .cadence-card,
html[data-theme="light"] .manual-faq-item,
html[data-theme="light"] .search-result-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

html[data-theme="light"] .manual-tip-box {
  background: #eff6ff;
  color: #1e3a8a;
}

html[data-theme="light"] .app-footer-link--manual {
  color: var(--color-primary, #2f5bff) !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .manual-stepper-indicators {
    grid-template-columns: repeat(3, 1fr);
  }

  .manual-modules-layout {
    grid-template-columns: 1fr;
  }

  .manual-search-wrapper {
    flex: 1 1 100%;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .manual-stepper-indicators {
    grid-template-columns: 1fr;
  }

  .manual-nav {
    flex-wrap: nowrap;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #meetingViewerModal,
  #meetingViewerModal * {
    visibility: visible;
  }
  #meetingViewerModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff !important;
    color: #000000 !important;
  }
  #meetingViewerModal .modal-actions,
  #meetingViewerModal .modal-close-btn,
  #meetingViewerModal #meetingViewerDownloadBtn {
    display: none !important;
  }
}

/* Personal notification center */
.notification-center-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 12px;
  background: var(--color-surface, var(--panel));
  color: var(--color-text-secondary, var(--muted));
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.notification-center-button:hover,
.notification-center-button:focus-visible {
  color: var(--color-primary, var(--blue2));
  border-color: var(--color-primary, var(--blue2));
  background: color-mix(in srgb, var(--color-primary, #2f5bff) 10%, var(--color-surface, #111827));
}

.notification-count-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg, #07101f);
  border-radius: 999px;
  background: var(--color-danger, #ef4444);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.notification-center-card {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
  max-height: min(880px, calc(100vh - 32px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.notification-center-header p {
  margin: 6px 0 0;
  color: var(--color-text-secondary, var(--muted));
  font-size: var(--text-sm);
}

.notification-center-toolbar,
.notification-compose-actions,
.notification-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-center-toolbar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border, var(--line));
  background: var(--color-surface-muted, var(--panel2));
}

.notification-filter-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 12px;
  background: var(--color-surface, var(--panel));
}

.notification-filter-group button {
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, var(--muted));
  font: var(--weight-semibold) var(--text-xs) var(--font-body);
  cursor: pointer;
}

.notification-filter-group button.active {
  background: color-mix(in srgb, var(--color-primary, #2f5bff) 16%, transparent);
  color: var(--color-primary, var(--blue2));
}

.notification-compose-toggle {
  min-height: 40px;
}

.notification-compose-form {
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  border-bottom: 1px solid var(--color-border, var(--line));
  background: color-mix(in srgb, var(--color-primary, #2f5bff) 6%, var(--color-surface, #111827));
}

.notification-compose-form[hidden] {
  display: none;
}

.notification-compose-form label,
.notification-reply-form label {
  display: grid;
  gap: 6px;
  color: var(--color-text, var(--text));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.notification-compose-form textarea,
.notification-reply-form textarea {
  resize: vertical;
  min-height: 88px;
}

.notification-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
  gap: 12px;
}

.notification-compose-actions small {
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
}

.notification-center-summary {
  padding: 12px 20px 6px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
}

.notification-list {
  padding: 8px 20px 22px;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  overscroll-behavior: contain;
}

.notification-card {
  overflow: hidden;
  border: 1px solid var(--color-border, var(--line));
  border-left: 3px solid var(--color-border-strong, var(--line-glow));
  border-radius: 14px;
  background: var(--color-surface, var(--panel));
}

.notification-card.priority-high,
.notification-card.priority-urgent {
  border-left-color: var(--color-warning, #f59e0b);
}

.notification-card.is-unread {
  background: color-mix(in srgb, var(--color-primary, #2f5bff) 7%, var(--color-surface, #111827));
  border-color: color-mix(in srgb, var(--color-primary, #2f5bff) 38%, var(--color-border, #263349));
}

.notification-card.is-completed {
  opacity: .78;
}

.notification-card-main {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 12px;
  gap: 12px;
  align-items: start;
  padding: 16px 16px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-type-icon {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary, #2f5bff) 14%, transparent);
  color: var(--color-primary, var(--blue2));
}

.notification-card-copy,
.notification-card-meta {
  min-width: 0;
  display: flex;
}

.notification-card-copy {
  flex-direction: column;
  gap: 5px;
}

.notification-card-meta {
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
}

.notification-card-meta strong {
  color: var(--color-primary, var(--blue2));
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--text-xs);
}

.notification-card-title {
  overflow: hidden;
  color: var(--color-text, var(--text));
  font: var(--weight-semibold) var(--text-sm)/1.35 var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-card-preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-secondary, var(--muted));
  font-size: var(--text-xs);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notification-unread-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-primary, var(--blue2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #2f5bff) 15%, transparent);
}

.notification-card-footer {
  min-height: 36px;
  padding: 0 16px 12px 70px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.notification-status-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-surface-muted, var(--panel2));
  color: var(--color-text-secondary, var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.notification-status-pill.status-unread {
  background: color-mix(in srgb, var(--color-primary, #2f5bff) 14%, transparent);
  color: var(--color-primary, var(--blue2));
}

.notification-status-pill.status-completed {
  background: color-mix(in srgb, var(--color-success, #22c55e) 14%, transparent);
  color: var(--color-success, #22c55e);
}

.notification-trace-summary {
  flex: 1 1 260px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
}

.notification-text-action {
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--color-primary, var(--blue2));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.notification-thread {
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--color-border, var(--line));
  background: var(--color-surface-muted, var(--panel2));
}

.notification-thread-messages {
  display: grid;
  gap: 8px;
}

.notification-thread-message {
  max-width: 82%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 12px 12px 12px 4px;
  background: var(--color-surface, var(--panel));
}

.notification-thread-message.outgoing {
  justify-self: end;
  border-radius: 12px 12px 4px 12px;
  background: color-mix(in srgb, var(--color-primary, #2f5bff) 12%, var(--color-surface, #111827));
}

.notification-thread-message small {
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
}

.notification-thread-message p {
  margin: 4px 0 0;
  color: var(--color-text, var(--text));
  font-size: var(--text-xs);
  line-height: 1.55;
  white-space: pre-wrap;
}

.notification-audit-details {
  color: var(--color-text-secondary, var(--muted));
  font-size: var(--text-xs);
}

.notification-audit-details summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.notification-audit-details ol {
  margin: 8px 0 0;
  padding-left: 20px;
}

.notification-audit-details li {
  padding: 3px 0;
}

.notification-audit-details li span {
  margin-left: 8px;
  color: var(--color-text-muted, var(--muted));
}

.notification-open-source {
  justify-self: start;
}

.notification-reply-form {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.notification-reply-form .primary-btn {
  justify-self: end;
}

.notification-state,
.notification-empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-secondary, var(--muted));
}

.notification-empty {
  flex-direction: column;
  padding: 36px 20px;
  text-align: center;
}

.notification-empty .ui-icon {
  width: 34px;
  height: 34px;
  color: var(--color-success, #22c55e);
}

.notification-empty h3,
.notification-empty p {
  margin: 0;
}

.notification-empty p {
  max-width: 420px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-sm);
}

/* ==========================================================================
   Email Notification Preview & Maximized Email Viewer
   ========================================================================== */

.notification-card-email {
  border-left-color: var(--color-primary, #2f5bff);
}

.notification-icon-email {
  background: color-mix(in srgb, #2f5bff 18%, transparent);
  color: #2f5bff;
}

.notification-email-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, #2f5bff 15%, transparent);
  color: var(--color-primary, #2f5bff);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-left: 6px;
}

.notification-maximize-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary, var(--blue2));
}

.notification-maximize-inline-btn svg {
  width: 13px;
  height: 13px;
}

.notification-email-thread {
  padding: 12px 14px 16px;
}

.notification-email-preview-box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 12px;
  background: var(--color-surface, var(--panel));
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.notification-email-preview-header {
  padding: 14px 16px;
  background: var(--color-surface-muted, var(--panel2));
  border-bottom: 1px solid var(--color-border, var(--line));
  display: grid;
  gap: 10px;
}

.notification-email-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notification-email-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary, var(--blue2));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.notification-email-badge svg {
  width: 14px;
  height: 14px;
}

.notification-email-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notification-email-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 6px;
  background: var(--color-surface, var(--panel));
  color: var(--color-text-secondary, var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.notification-email-action-btn:hover {
  background: var(--color-surface-muted, var(--panel2));
  color: var(--color-text, var(--text));
  border-color: var(--color-primary, #2f5bff);
}

.notification-email-action-btn svg {
  width: 12px;
  height: 12px;
}

.notification-email-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 16px;
  font-size: var(--text-xs);
}

.notification-email-meta-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--color-text, var(--text));
}

.notification-email-meta-item .meta-label {
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  min-width: 40px;
}

.notification-email-meta-item .meta-email {
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
}

.notification-email-meta-item .meta-subject {
  color: var(--color-primary, var(--blue2));
}

.notification-email-preview-body {
  padding: 0;
  background: #ffffff;
  min-height: 280px;
  max-height: 480px;
  overflow-y: auto;
  position: relative;
}

.notification-email-iframe-container {
  width: 100%;
  height: 400px;
  background: #ffffff;
}

.notification-email-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
  display: block;
}

.notification-email-text-rendered {
  padding: 18px 20px;
  color: #17213b;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.notification-email-text-rendered h2,
.notification-email-text-rendered h3,
.notification-email-text-rendered h4 {
  color: #0f172a;
  margin: 12px 0 6px;
}

.notification-email-preview-footer {
  padding: 10px 16px;
  background: var(--color-surface-muted, var(--panel2));
  border-top: 1px solid var(--color-border, var(--line));
  display: flex;
  justify-content: flex-end;
}

.notification-email-maximize-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 7px 14px;
}

.notification-email-maximize-cta svg {
  width: 14px;
  height: 14px;
}

/* Maximized Email Modal Dialog */
.email-viewer-modal {
  z-index: 1200;
}

.email-viewer-card {
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  height: min(92vh, 900px);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-surface, var(--panel));
  border: 1px solid var(--color-border, var(--line));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.email-viewer-header {
  padding: 16px 22px;
  background: var(--color-surface-muted, var(--panel2));
  border-bottom: 1px solid var(--color-border, var(--line));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.email-viewer-header-info {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.email-viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary, #2f5bff);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.email-viewer-badge svg {
  width: 14px;
  height: 14px;
}

.email-viewer-header h2 {
  margin: 0;
  font: var(--weight-semibold) var(--text-lg)/1.3 var(--font-heading);
  color: var(--color-text, var(--text));
  word-break: break-word;
}

.email-viewer-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.email-viewer-meta-pill {
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--color-surface, var(--panel));
  border: 1px solid var(--color-border, var(--line));
  color: var(--color-text-secondary, var(--muted));
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.email-viewer-meta-pill strong {
  color: var(--color-text, var(--text));
  margin-right: 3px;
}

.email-viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-viewer-body {
  flex: 1;
  min-height: 0;
  background: #ffffff;
  overflow-y: auto;
  position: relative;
}

.email-viewer-modal-iframe {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  background: #ffffff;
  display: block;
}

.email-viewer-modal-text {
  padding: 32px 36px;
  color: #17213b;
  font-size: var(--text-sm);
  line-height: 1.65;
  max-width: 840px;
  margin: 0 auto;
}

.email-viewer-modal-text h2,
.email-viewer-modal-text h3 {
  color: #0f172a;
}

.email-viewer-footer {
  padding: 14px 22px;
  background: var(--color-surface-muted, var(--panel2));
  border-top: 1px solid var(--color-border, var(--line));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.email-viewer-status-text {
  color: var(--color-text-muted, var(--muted));
  font-size: var(--text-xs);
}

.email-viewer-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 700px) {
  .notification-center-card,
  .email-viewer-card {
    width: 100%;
    max-width: none;
    max-height: 94vh;
    height: 94vh;
    margin-top: auto;
    border-radius: 20px 20px 0 0;
  }

  .email-viewer-header {
    padding: 14px 16px;
  }

  .email-viewer-footer {
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
  }

  .email-viewer-footer-actions {
    justify-content: stretch;
  }

  .email-viewer-footer-actions button {
    flex: 1;
  }

  .notification-center-toolbar,
  .notification-compose-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-filter-group {
    width: 100%;
  }

  .notification-filter-group button {
    flex: 1;
  }

  .notification-compose-toggle,
  .notification-compose-actions .primary-btn {
    width: 100%;
    justify-content: center;
  }

  .notification-compose-grid {
    grid-template-columns: 1fr;
  }

  .notification-center-summary,
  .notification-list,
  .notification-compose-form,
  .notification-center-toolbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .notification-card-footer {
    padding-left: 16px;
  }

  .notification-thread-message {
    max-width: 94%;
  }
}

/* ==============================================================================
   Gis — CSV Bulk Onboarding Components (Company, Areas & Users)
   ============================================================================== */

.csv-import-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.25s ease;
}

.csv-template-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.csv-template-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.csv-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(47, 91, 255, 0.12);
  color: var(--blue, #2F5BFF);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.csv-icon-wrap .ui-icon {
  width: 22px;
  height: 22px;
}

.csv-template-info h4 {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text, #fff);
}

.csv-template-info p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted, #94a3b8);
  line-height: 1.45;
  max-width: 650px;
}

.csv-seats-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(47, 91, 255, 0.06);
  border: 1px solid rgba(47, 91, 255, 0.2);
  border-radius: 10px;
  font-size: var(--text-sm);
}

.csv-seats-notice.warning {
  background: rgba(255, 179, 0, 0.1);
  border-color: var(--amber, #ffb300);
}

.csv-dropzone {
  border: 2px dashed var(--line-glow, rgba(47, 91, 255, 0.35));
  background: rgba(47, 91, 255, 0.03);
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0;
}

.csv-dropzone:hover,
.csv-dropzone:focus-visible,
.csv-dropzone.dragover {
  background: rgba(47, 91, 255, 0.08);
  border-color: var(--blue, #2F5BFF);
  box-shadow: 0 0 20px rgba(47, 91, 255, 0.18);
  outline: none;
}

.csv-dropzone-content .dropzone-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(47, 91, 255, 0.1);
  color: var(--blue, #2F5BFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.csv-dropzone-content h4 {
  margin: 0 0 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text, #fff);
}

.csv-dropzone-content p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted, #94a3b8);
}

.csv-preview-section {
  background: var(--surface, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-top: 10px;
  animation: fadeIn 0.25s ease;
}

.csv-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.csv-preview-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text, #fff);
}

.csv-badge-success {
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 999px;
  color: var(--green, #10b981);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.csv-badge-warning {
  padding: 4px 10px;
  background: rgba(255, 179, 0, 0.15);
  border: 1px solid rgba(255, 179, 0, 0.35);
  border-radius: 999px;
  color: var(--amber, #ffb300);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.csv-badge-danger {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 999px;
  color: var(--red, #ef4444);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.csv-alert-box {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: var(--text-sm);
  margin-bottom: 16px;
}

.csv-alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.csv-alert-warning {
  background: rgba(255, 179, 0, 0.1);
  border: 1px solid rgba(255, 179, 0, 0.3);
  color: #fde68a;
}

.csv-alert-box ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

.csv-alert-box li {
  margin-bottom: 2px;
}

.csv-summary-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 18px;
}

.csv-summary-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csv-summary-col small {
  font-size: var(--text-xs);
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
}

.csv-summary-col strong {
  font-size: var(--text-sm);
  color: var(--text, #fff);
}

.csv-preview-table {
  width: 100%;
  border-collapse: collapse;
}

.csv-preview-table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.csv-preview-table td {
  padding: 10px 14px;
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.csv-preview-table tr.row-has-error {
  background: rgba(239, 68, 68, 0.06);
}

.csv-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.csv-status-pill.success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--green, #10b981);
}

.csv-status-pill.danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red, #ef4444);
}

.csv-match-pill {
  font-weight: var(--weight-medium);
}

@media (max-width: 768px) {
  .csv-template-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .csv-summary-card {
    grid-template-columns: 1fr;
  }
}

.csv-subtabs-nav {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(118, 118, 128, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

html[data-theme="dark"] .csv-subtabs-nav {
  background: rgba(118, 118, 128, 0.18);
  border-color: rgba(255, 255, 255, 0.06);
}

.csv-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-secondary, #64748B);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-apple-spring);
}

.csv-subtab-btn:hover {
  color: var(--color-text, #18181B);
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .csv-subtab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.csv-subtab-btn.active {
  color: #2449d8 !important;
  background: var(--color-surface, #ffffff) !important;
  border: none;
  font-weight: var(--weight-semibold, 600) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="dark"] .csv-subtab-btn.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.csv-subtab-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeIn 0.2s ease;
}

.csv-guide-card {
  background: rgba(47, 91, 255, 0.03);
  border: 1px solid rgba(47, 91, 255, 0.18);
  border-radius: 12px;
  padding: 16px 20px;
}

.csv-guide-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.csv-guide-header strong {
  font-size: var(--text-sm);
  color: var(--text, #fff);
}

.csv-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 18px;
}

.csv-guide-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--muted, #94a3b8);
}

.csv-guide-item code {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--blue2, #60a5fa);
}

.csv-guide-item span {
  color: var(--text, #cbd5e1);
}


/* =============================================================================
   ANÁLISIS – RESET GLOBAL DE FONDOS
   Garantiza transparencia en todas las subsecciones, tarjetas y paneles de
   #view-executive sin importar reglas previas.
   ============================================================================= */
#view-executive .an-chart-card,
#view-executive .an-decision-brief,
#view-executive .an-composition-brief,
#view-executive .an-financial-actions,
#view-executive .an-financial-drivers,
#view-executive .an-financial-economics,
#view-executive .an-financial-value-story,
#view-executive .an-financial-toolbar,
#view-executive .an-financial-empty,
#view-executive .an-kpi-card,
#view-executive .an-decision-summary article,
#view-executive .an-composition-summary article,
#view-executive .an-financial-action,
#view-executive .an-financial-driver,
#view-executive .an-financial-break-even-kpi,
#view-executive .an-data-coverage,
#view-executive .an-tab-banner,
#view-executive .an-subtab-section {
  background: transparent !important;
  box-shadow: none !important;
}

/* Mantener gradientes tonales suaves en KPI cards */
#view-executive .an-kpi-card.tone-critical,
#view-executive .an-decision-summary article.tone-critical,
#view-executive .an-decision-summary .an-kpi-card.tone-critical {
  background: linear-gradient(90deg, rgba(255, 111, 125, 0.07) 0%, transparent 50%) !important;
}
#view-executive .an-kpi-card.tone-warning,
#view-executive .an-decision-summary article.tone-warning,
#view-executive .an-decision-summary .an-kpi-card.tone-warning {
  background: linear-gradient(90deg, rgba(255, 180, 84, 0.07) 0%, transparent 50%) !important;
}
#view-executive .an-kpi-card.tone-ok,
#view-executive .an-decision-summary article.tone-ok,
#view-executive .an-decision-summary .an-kpi-card.tone-ok {
  background: linear-gradient(90deg, rgba(55, 215, 164, 0.07) 0%, transparent 50%) !important;
}

/* Today director briefing: bounded focus, progressive context, existing theme tokens. */
#todayDashboardRoot.today-director { gap: 24px; }
.today-director .today-command-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.today-director .today-command-hero .view-title { max-width: none; font-size: var(--type-page-size); line-height: 1.25; }
.today-director .today-command-summary { margin-top: 12px; font-size: var(--text-md); }
.today-director .today-context-line { margin-bottom: 8px; font-size: var(--text-sm); font-weight: var(--weight-regular); }
.today-director .today-command-hero > button { flex-shrink: 0; }
.today-overview { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--text-sm); }
.today-overview strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.today-overview > button { margin-left: auto; }
.today-portfolio-delay-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--color-surface-hover, rgba(0,0,0,0.04)); border: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); }
.today-portfolio-delay-badge strong { color: var(--color-text); }
.today-director .today-command-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; }
.today-director .today-panel { box-shadow: none; }
.today-director .today-priority-panel { padding: 24px; }
.today-director .today-panel-heading h2 { margin-top: 0; font-size: var(--text-xl); }
.today-director .today-panel-heading p { font-size: var(--text-sm); line-height: 1.5; }
.today-director .today-segmented { flex-wrap: wrap; overflow: visible; gap: 4px; padding: 0; margin: 20px 0 8px; background: none; border: 0; }
.today-director .today-segmented button { flex: 0 1 auto; min-height: 44px; padding: 8px 10px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.today-director .today-segmented button.active { background: var(--component-selected-bg); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--component-selected-border); }
.today-director .today-segmented button span { font-size: var(--text-xs); background: none; margin-left: 2px; }
.today-director .today-priority-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 22px 0; }
.today-director .today-priority-rank { border: 0; background: none; font-size: var(--text-sm); margin-top: 2px; }
.today-director .today-priority-main h3 { margin: 0; font-size: var(--text-lg); line-height: 1.5; }
.today-director .today-project-link { display: inline; padding: 0; min-height: 44px; text-align: left; font: inherit; font-weight: var(--weight-semibold); color: var(--color-text); white-space: normal; overflow-wrap: anywhere; }
.today-director .today-project-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.today-director .today-priority-main p { display: block; overflow: visible; margin: 4px 0 8px; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.6; -webkit-line-clamp: unset; }
.today-director .today-review-btn { min-height: 44px; padding: 10px 14px; font-size: var(--text-sm); }
.today-focus-detail { color: var(--color-text-secondary); font-size: var(--text-sm); }
.today-focus-detail summary { width: fit-content; min-height: 44px; padding: 12px 0; cursor: pointer; }
.today-focus-detail summary:hover { color: var(--color-primary-hover); }
.today-focus-detail > div { padding: 12px 16px; background: var(--color-surface-muted); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.today-director .today-queue-footer { padding: 14px 0 0; margin-top: 0; font-size: var(--text-sm); line-height: 1.5; gap: 12px; }
.today-director .today-text-btn,
.today-director .today-panel-link,
.today-director .today-help-btn { min-height: 44px; font-size: var(--text-sm); white-space: normal; }
.today-director .today-help-btn { min-width: 44px; padding: 10px; }
.today-director .today-side-stack { grid-template-columns: 1fr; }
.today-director .today-side-panel { padding: 24px; }
.today-director .today-section-kicker { font-size: var(--text-xs); letter-spacing: .04em; }
.today-director .today-panel-heading.compact h2 { font-size: var(--text-xl); margin-top: 8px; }
.today-director .today-count-badge { font-size: var(--text-sm); color: var(--color-text-secondary); background: var(--color-surface-muted); }
.today-director .today-timeline-item { padding: 16px 0; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.today-director .today-timeline-item strong { font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
.today-director .today-timeline-item small { font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.today-director .today-side-empty,
.today-director .today-inline-empty { font-size: var(--text-sm); line-height: 1.6; }
.today-director .today-inline-empty strong { font-size: var(--text-md); }
.today-director .today-inline-empty span { font-size: var(--text-sm); }
.today-gis-entry { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: 24px; border: 1px solid var(--component-selected-border); border-radius: var(--radius-xl); background: var(--component-selected-bg); }
.today-gis-entry > div { min-width: 0; }
.today-gis-mark { float: left; margin-right: 12px; color: var(--color-primary-hover); }
.today-gis-entry h2 { margin: 0; font: var(--weight-semibold) var(--text-lg)/1.5 var(--font-heading); }
.today-gis-entry p { margin: 8px 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.today-prompt-field { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.today-prompt-field input { width: 100%; min-width: 0; border: 0; padding: 8px; background: transparent; color: var(--color-text); font: var(--weight-regular) var(--text-md)/1.5 var(--font-body); }
.today-prompt-field input::placeholder { color: var(--color-text-muted); }
.today-prompt-field button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 10px; }
.today-director .today-suggestions-panel .today-side-list {
  grid-template-columns: 1fr;
  gap: 0;
}
.today-director .today-suggestion-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast, 0.15s ease);
}
.today-director .today-suggestion-item:first-child {
  border-top: 0;
}
.today-director .today-suggestion-item:hover {
  background: var(--component-table-row-hover);
}
.today-director .today-suggestion-item > span:first-child {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--component-selected-bg);
  color: var(--color-primary-hover);
  flex-shrink: 0;
}
.today-director .today-suggestion-item > span:first-child .ui-icon {
  width: 16px;
  height: 16px;
}
.today-director .today-suggestion-item > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.today-director .today-suggestion-item strong {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
  overflow-wrap: anywhere;
  white-space: normal;
}
.today-director .today-suggestion-item small {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}
.today-portfolio-disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; min-height: 64px; cursor: pointer; font-size: var(--text-md); font-weight: var(--weight-semibold); list-style: none; }
.today-portfolio-disclosure > summary::-webkit-details-marker { display: none; }
.today-portfolio-disclosure > summary small { display: block; margin-top: 4px; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.today-portfolio-disclosure[open] > summary > .ui-icon { transform: rotate(45deg); }
.today-director .today-portfolio-panel { padding: 0 24px 24px; }
.today-director .today-portfolio-tools { margin-bottom: 20px; justify-content: stretch; }
.today-director .today-search-field { flex: 1; }
.today-director .today-search-field input,
.today-director .today-filter-field select { min-height: 44px; font-size: var(--text-md); }
.today-director .today-portfolio-table { min-width: 0; width: 100%; table-layout: fixed; }
.today-director .today-portfolio-table th { font-size: var(--text-xs); }
.today-director .today-portfolio-table td { font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.today-director .today-health-pill { font-size: var(--text-sm); white-space: normal; }
.today-director .today-table-footer { font-size: var(--text-sm); }
.today-director .today-table-footer .secondary-btn { min-height: 44px; font-size: var(--text-sm); }
.today-director summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (max-width: 1024px) {
  .today-director .today-command-layout { grid-template-columns: 1fr; }
  .today-director .today-timeline,
  .today-director .today-suggestions-panel .today-side-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .today-director .today-timeline-item,
  .today-director .today-suggestion-item { grid-template-columns: 1fr; align-content: start; border-top: 0; }
  .today-director .today-suggestion-item { padding: 12px 0; }
  .today-gis-entry { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .today-director .today-command-hero { align-items: start; flex-direction: column; gap: 12px; }
  .today-overview { gap: 8px 16px; }
  .today-overview > button { margin-left: 0; }
  .today-director .today-priority-panel,
  .today-director .today-side-panel,
  .today-gis-entry { padding: 20px 16px; }
  .today-director .today-priority-row { grid-template-columns: 24px minmax(0, 1fr); gap: 8px 12px; }
  .today-director .today-review-btn { grid-column: 2; justify-self: start; }
  .today-director .today-priority-main p,
  .today-focus-detail,
  .today-director .today-timeline-item strong,
  .today-director .today-suggestion-item strong { font-size: var(--text-md); }
  .today-director .today-queue-footer { align-items: start; flex-direction: column; }
  .today-director .today-timeline,
  .today-director .today-suggestions-panel .today-side-list { grid-template-columns: 1fr; gap: 0; }
  .today-director .today-timeline-item { grid-template-columns: 76px minmax(0, 1fr); }
  .today-director .today-suggestion-item { grid-template-columns: 32px minmax(0, 1fr); border-top: 1px solid var(--color-border); }
  .today-director .today-suggestion-item:first-child { border-top: 0; }
  .today-director .today-portfolio-panel { padding: 0 16px 16px; }
  .today-portfolio-disclosure > summary { padding: 20px 16px; }
  .today-director .today-portfolio-table tr { grid-template-columns: 1fr; }
  .today-director .today-portfolio-table td { grid-column: 1 / -1; grid-template-columns: 105px minmax(0, 1fr); }
  .today-director .today-portfolio-table td::before { font-size: var(--text-xs); text-transform: none; letter-spacing: 0; }
}

.today-director .today-suggestion-item strong { white-space: normal; overflow-wrap: anywhere; }
.today-director .today-priority-main .today-focus-issue { color: var(--color-text); font-size: var(--text-sm); }
@media (max-width: 640px) {
  .today-director .today-priority-main .today-focus-issue { font-size: var(--text-md); }
}

/* Gis introduces the briefing with a restrained, locally animated portrait. */
.today-director .today-director-welcome {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  padding: 16px 24px 8px;
  border-radius: var(--radius-xl);
  background: linear-gradient(110deg, var(--component-selected-bg), transparent 75%);
}
.gis-director-portrait {
  position: relative;
  margin: 0;
  min-width: 0;
  text-align: center;
  overflow: visible;
  cursor: pointer;
}
.gis-director-art { display: block; width: 100%; height: auto; overflow: visible; }
.gis-director-signature { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; color: var(--color-text); font: var(--weight-semibold) var(--text-lg)/1.5 var(--font-heading); }
.gis-director-signature span { color: var(--color-text-secondary); font: var(--weight-regular) var(--text-sm)/1.5 var(--font-body); }
.today-director .gis-director-projects { margin-top: 12px; padding-left: 0; }

/* Interactive Idea Bubble System */
.gis-idea-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 20;
}

.gis-idea-bubble {
  position: absolute;
  left: 50%;
  top: 12%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
  border: 1.5px solid #f59e0b;
  box-shadow: 0 12px 28px -4px rgba(245, 158, 11, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
  color: #0f172a;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  animation: gis-idea-burst 2.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gis-idea-icon {
  font-size: var(--text-md);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.5));
}

.gis-idea-text {
  letter-spacing: -0.01em;
  color: #0f172a;
  line-height: 1.3;
}

.gis-idea-sparkles {
  font-size: var(--text-xs);
  color: #f59e0b;
}

@keyframes gis-idea-burst {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--idea-x, 0px)), 35px) scale(0.25) rotate(var(--idea-rot, 0deg));
  }
  14% {
    opacity: 1;
    transform: translate(calc(-50% + var(--idea-x, 0px)), -14px) scale(1.08) rotate(var(--idea-rot, 0deg));
  }
  24% {
    opacity: 1;
    transform: translate(calc(-50% + var(--idea-x, 0px)), -10px) scale(1) rotate(var(--idea-rot, 0deg));
  }
  70% {
    opacity: 1;
    transform: translate(calc(-50% + var(--idea-x, 0px)), -36px) scale(0.97) rotate(var(--idea-rot, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--idea-x, 0px)), -70px) scale(0.85) rotate(var(--idea-rot, 0deg));
  }
}

.gis-director-portrait.gis-has-idea .gis-director-head {
  animation: gis-director-think 12s ease-in-out infinite, gis-idea-nod 0.4s ease-out;
}

@keyframes gis-idea-nod {
  0% { transform: scale(1); }
  45% { transform: scale(1.05) translateY(-3px); }
  100% { transform: scale(1); }
}

/* Subtle background floating bubbles */
.gis-director-bubble {
  transform-origin: center;
  animation: gis-bubble-float 4.6s ease-in-out infinite alternate;
}
.gis-director-bubble.b1 { animation-delay: 0s; }
.gis-director-bubble.b2 { animation-delay: 1.1s; }
.gis-director-bubble.b3 { animation-delay: 2.3s; }
.gis-director-bubble.b4 { animation-delay: 0.6s; }
.gis-director-bubble.b5 { animation-delay: 1.7s; }

@keyframes gis-bubble-float {
  0% { transform: translateY(0) scale(1); opacity: 0.88; }
  50% { transform: translateY(-4px) scale(1.06); opacity: 1; }
  100% { transform: translateY(2px) scale(0.96); opacity: 0.9; }
}

/* Soft plant leaves swaying */
.gis-director-leaves {
  animation: gis-leaf-sway 6.4s ease-in-out infinite alternate;
}
.gis-leaves-left { animation-delay: 0s; transform-origin: 100px 285px; }
.gis-leaves-right { animation-delay: 1.6s; transform-origin: 300px 285px; }

@keyframes gis-leaf-sway {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(1.8deg); }
  100% { transform: rotate(-1.8deg); }
}

/* Character micro-animations */
.gis-director-body { transform-origin: 200px 250px; animation: gis-director-breathe 7s ease-in-out infinite; }
.gis-director-head { transform-origin: 200px 145px; animation: gis-director-think 12s ease-in-out infinite; }
.gis-director-eyes { transform-origin: 200px 120px; animation: gis-director-blink 7.2s linear infinite; }
.gis-director-pupil { transform: translate(var(--gis-gaze-x, 0px), var(--gis-gaze-y, 0px)); transition: transform 140ms ease-out; }
.gis-director-hand-left { transform-origin: 168px 228px; animation: gis-director-type 2.8s ease-in-out infinite; }
.gis-director-hand-right { transform-origin: 232px 228px; animation: gis-director-type 2.8s 0.35s ease-in-out infinite; }
.gis-director-portrait.is-paused svg * { animation-play-state: paused; }

@keyframes gis-director-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes gis-director-think {
  0%, 65%, 100% { transform: rotate(0deg); }
  78%, 88% { transform: rotate(-1.2deg); }
}
@keyframes gis-director-blink {
  0%, 42%, 46%, 82%, 86%, 100% { transform: scaleY(1); }
  44%, 84% { transform: scaleY(0.08); }
}
@keyframes gis-director-type {
  0%, 15%, 30%, 45%, 100% { transform: translateY(0); }
  7%, 22%, 37% { transform: translateY(-2.5px); }
}

@media (max-width: 640px) {
  .today-director .today-director-welcome { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .today-director-welcome .gis-director-portrait { width: 160px; justify-self: center; }
  .today-director-welcome .gis-director-art { height: 135px; }
  .gis-director-signature { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gis-director-art * { animation: none !important; }
  .gis-idea-bubble { animation: none; opacity: 0; }
  .gis-director-pupil { transform: none; transition: none; }
}

.today-director .today-segmented button.active { background: var(--color-primary); color: var(--color-on-primary, #fff); box-shadow: none; }
.today-queue-summary { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--color-primary); background: var(--component-selected-bg); color: var(--color-text-secondary); font-size: var(--text-sm); }
.today-context-items { padding-left: 20px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .gis-director-pupil { transform: none; transition: none; }
}

/* ====================================================
   ADMINISTRATION PLATFORM VIEWS (EMPRESA, USUARIOS, ALERTAS)
   ==================================================== */
.app-view#view-company,
.app-view#view-users-management,
.app-view#view-email-alerts {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.company-sub-tabs,
.user-sub-tabs {
  margin-bottom: 24px;
}

.company-sub-tabs .detail-sub-tab,
.user-sub-tabs .detail-sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.company-sub-tabs .detail-sub-tab .ui-icon,
.user-sub-tabs .detail-sub-tab .ui-icon {
  width: 16px;
  height: 16px;
}

.admin-view-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.app-view .company-settings-view-wrap,
.app-view .user-mgmt-view-wrap,
.app-view .email-alerts-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.app-view .company-settings-body,
.app-view .user-mgmt-body {
  width: 100%;
  max-width: 100%;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.app-view .create-user-form,
.app-view .operating-costs-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.app-view .create-user-form h4 {
  color: var(--color-text);
}

.app-view .operating-costs-intro,
.app-view .email-alert-intro {
  margin-bottom: 24px;
}


/* Shared workspace composition: centered introduction, section choices, content. */
.app-view > .view-header {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  margin: 0 auto var(--space-6);
}
.app-view > .view-header .view-header-copy {
  flex: none;
  align-items: center;
  width: 100%;
  max-width: 720px;
}
.app-view > .view-header .view-title { max-width: 32ch; margin-top: 8px; }
.app-view > .view-header .view-desc { margin-bottom: 0; }
.app-view > .view-header .manual-search-wrapper { flex: none; width: min(100%, 480px); }
.app-view > .view-header .view-header-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* Gis guía cada pantalla con títulos luminosos y una entrada tipo streaming. */
.app-view > .view-header .view-title,
#view-today .chat-workspace-welcome h1 {
  background: linear-gradient(110deg, var(--color-primary) 0%, #7c3aed 42%, #d946ef 72%, var(--color-primary) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gis-title-gradient 8s ease-in-out infinite;
}
.app-view > .view-header .view-desc,
#view-today .chat-workspace-welcome + .chat-history-body {
  color: var(--color-text-secondary);
}
.is-streaming-copy {
  min-height: 1.15em;
  animation: gis-copy-cursor 720ms steps(1, end) infinite;
}
.is-stream-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  will-change: opacity, transform;
}
.is-stream-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 440ms cubic-bezier(0.16, 1, 0.3, 1), transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.unified-ai-card.is-stream-revealed {
  transition: opacity 440ms cubic-bezier(0.16, 1, 0.3, 1), transform 440ms cubic-bezier(0.16, 1, 0.3, 1), background 160ms ease, border-color 160ms ease;
}
@keyframes gis-title-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes gis-copy-cursor {
  0%, 49% { border-right: 2px solid var(--color-primary); }
  50%, 100% { border-right: 2px solid transparent; }
}
html:not([data-theme="light"]) .app-view > .view-header .view-title,
html:not([data-theme="light"]) #view-today .chat-workspace-welcome h1 {
  background-image: linear-gradient(110deg, #93c5fd 0%, #c4b5fd 42%, #f0abfc 72%, #93c5fd 100%);
}
@media (prefers-reduced-motion: reduce) {
  .app-view > .view-header .view-title,
  #view-today .chat-workspace-welcome h1,
  .is-streaming-copy,
  .is-stream-hidden,
  .is-stream-revealed,
  .unified-ai-card.is-stream-revealed { animation: none; transition: none; opacity: 1; transform: none; pointer-events: auto; }
}

/* Entrada de cada pestaña: el título ocupa la primera pantalla y el resto se descubre con una señal clara. */
.app-view:not(#view-today):not(#view-project-detail) > .view-header {
  min-height: calc(100svh - 178px);
  justify-content: center;
  margin-bottom: 0;
  box-sizing: border-box;
}
.view-scroll-cue {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 8px auto 52px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.view-scroll-cue::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
}
.view-scroll-cue .scroll-cue-icon,
.view-scroll-cue svg {
  width: 16px;
  height: 16px;
  color: inherit;
  transition: transform 180ms ease, color 180ms ease;
  flex-shrink: 0;
}
.view-scroll-cue:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-light, var(--color-primary));
  background: var(--color-surface-hover, var(--color-surface));
  box-shadow: 0 4px 14px rgba(47, 91, 255, 0.2);
  transform: translateY(2px);
}
.view-scroll-cue:hover svg {
  transform: translateY(1px);
}
.view-scroll-cue:active {
  transform: translateY(3px) scale(0.94);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.view-scroll-cue:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
html[data-theme="light"] .view-scroll-cue {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .view-scroll-cue:hover {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
}
#view-today .gis-chat-widget.chat-workspace:not(.has-conversation):not(.is-collapsed) {
  min-height: calc(100svh - 84px);
  justify-content: center;
}
#todayDashboardRoot,
[data-scroll-target] {
  scroll-margin-top: 88px;
}
@media (max-width: 600px) {
  .app-view:not(#view-today):not(#view-project-detail) > .view-header {
    min-height: calc(100svh - 156px);
  }
  .view-scroll-cue { margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .view-scroll-cue { animation: none; transition: none; }
}

/* Section controls share sizing, surface and selection in both themes — Apple HIG standard */
html body .app-view :is(.detail-sub-tabs, .manual-nav, .an-subtabs-bar) {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.08);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 24px 0;
  box-sizing: border-box;
}

html[data-theme="dark"] body .app-view :is(.detail-sub-tabs, .manual-nav, .an-subtabs-bar) {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(118, 118, 128, 0.18);
}

html body .app-view :is(.detail-sub-tabs, .manual-nav, .an-subtabs-bar)::-webkit-scrollbar {
  display: none;
}

html body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #64748B);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-medium, 500);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: all var(--duration-fast) var(--ease-apple-spring);
}

html body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn):hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text, #18181B);
}

html[data-theme="dark"] body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn):hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

html body .app-view :is(.detail-sub-tab, .manual-nav-btn).active {
  background: var(--color-surface, #ffffff) !important;
  color: #2449d8 !important;
  font-weight: var(--weight-semibold, 600) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html body .app-view .an-tab-btn.active {
  background: var(--color-surface, #ffffff) !important;
  color: #2F5BFF !important;
  font-weight: var(--weight-semibold, 600) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="dark"] body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn).active {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  font-weight: var(--weight-semibold, 600) !important;
}

html body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn).active::after { content: none; }

html body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn) .ui-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

html body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn):hover .ui-icon {
  opacity: 0.95;
}

html body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn).active .ui-icon {
  opacity: 1;
  color: currentColor;
}
#analysisTabsNav {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  scroll-margin-top: 88px;
}
.an-cards-nav-wrap {
  width: 100%;
  max-width: 100%;
  margin-bottom: 28px;
  box-sizing: border-box;
}
.an-cards-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}
.an-cards-kicker {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
#view-executive .an-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  scroll-margin-top: 88px;
}
@media (max-width: 1400px) {
  #view-executive .an-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 860px) {
  #view-executive .an-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 540px) {
  #view-executive .an-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Executive Analysis section cards */
html body #view-executive .unified-ai-card.an-tab-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: initial;
  gap: 12px;
  height: auto;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  white-space: normal;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html body #view-executive .unified-ai-card.an-tab-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

html[data-theme="dark"] body #view-executive .unified-ai-card.an-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

html body #view-executive .unified-ai-card.an-tab-btn.active {
  background: var(--component-selected-bg) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px var(--color-primary), 0 2px 8px rgba(47, 91, 255, 0.15) !important;
}

html[data-theme="light"] body #view-executive .unified-ai-card.an-tab-btn.active {
  color: #2F5BFF !important;
}

html[data-theme="dark"] body #view-executive .unified-ai-card.an-tab-btn.active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px var(--color-primary), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

html body #view-executive .unified-ai-card.an-tab-btn .unified-ai-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-primary);
}

html body #view-executive .unified-ai-card.an-tab-btn .unified-ai-card-icon .ui-icon {
  width: 20px;
  height: 20px;
}

html body #view-executive .unified-ai-card.an-tab-btn .unified-ai-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

html body #view-executive .unified-ai-card.an-tab-btn .unified-ai-card-text strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-text);
}

html[data-theme="light"] body #view-executive .unified-ai-card.an-tab-btn.active .unified-ai-card-text strong {
  color: #2F5BFF;
}

html[data-theme="dark"] body #view-executive .unified-ai-card.an-tab-btn.active .unified-ai-card-text strong {
  color: #ffffff;
}

html body #view-executive .unified-ai-card.an-tab-btn .unified-ai-card-text small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.an-section-header-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 14px;
}

/* Gis AI: one width for the composer, choices and every revealed section. */
:root body #view-today .gis-chat-widget.chat-workspace {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 32px 0 24px;
  margin: 0 auto;
  z-index: 1;
  overflow: visible;
  align-items: center;
  justify-content: flex-start;
}
:root #view-today .chat-fullscreen-inner {
  width: 100%;
  max-width: var(--workspace-content-width);
  height: auto;
  overflow: visible;
}
#view-today .chat-workspace-welcome {
  text-align: center;
  padding: 0;
  margin: 0 auto 24px;
}
#view-today .chat-workspace-welcome h1 { font-size: var(--type-page-size); color: var(--color-text); font-weight: var(--weight-semibold); }
#view-today .greeting-gradient { background: none; -webkit-text-fill-color: currentColor; color: var(--color-text); }
#view-today .chat-workspace-eyebrow { background: none; color: var(--color-text-muted); padding: 0; margin: 0 0 12px; }
#view-today .chat-workspace-desc { margin: 12px auto 0; max-width: 620px; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.55; }
:root #view-today .chat-input-footer { width: 100%; padding: 0; margin: 0; }
:root #view-today .chat-input-box { width: 100%; box-sizing: border-box; box-shadow: var(--shadow-1); border-radius: var(--radius-xl); }
#view-today .chat-submit-btn { width: 44px; height: 44px; }
.unified-ai-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; scroll-margin-top: 72px; }
.unified-ai-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.unified-ai-card:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.unified-ai-card.active { background: var(--component-selected-bg); border-color: var(--color-primary); }
.unified-ai-card-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; color: var(--color-primary); }
.unified-ai-card-icon .ui-icon { width: 18px; height: 18px; }
.unified-ai-card-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.unified-ai-card-text strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4; }
.unified-ai-card-text small { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }
#view-today .is-collapsed :is(.chat-workspace-notice, .unified-dock-divider) { display: none; }
#view-today .is-collapsed .unified-ai-cards { margin-top: 16px; }
#view-today .is-collapsed .chat-history-body { max-height: 280px; overflow-y: auto; }
#todayDashboardRoot { display: block; }
.today-single-section-container { width: 100%; max-width: var(--workspace-content-width); min-height: calc(100svh - 140px); margin: 0 auto 32px; box-sizing: border-box; scroll-margin-top: 80px; }
.today-panel-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.today-section-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-medium, 500);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all var(--duration-fast, 150ms) var(--ease-apple-spring, ease);
  flex-shrink: 0;
  user-select: none;
}
.today-section-close-btn .ui-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform var(--duration-fast, 150ms) ease;
}
.today-section-close-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.today-section-close-btn:hover .ui-icon {
  transform: translateX(-2px);
}
html[data-theme="dark"] .today-section-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--color-text-secondary);
  box-shadow: none;
}
html[data-theme="dark"] .today-section-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
#todayDashboardRoot .today-single-section-container > .today-panel { width: 100%; min-width: 0; min-height: 280px; box-sizing: border-box; padding: var(--workspace-panel-padding); border-radius: var(--radius-xl); margin: 0; }
#todayDashboardRoot .today-single-section-container .today-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
#todayDashboardRoot .today-single-section-container .today-panel-heading h2 { margin: 0; font-size: var(--text-xl); }
#todayDashboardRoot .today-single-section-container .today-portfolio-panel { padding: 0; }
#todayDashboardRoot .today-overview { margin-top: 16px; margin-bottom: 20px; }
#todayDashboardRoot .today-empty-dashboard { padding: 24px; min-height: 280px; border-radius: var(--radius-xl); box-shadow: none; }
#todayDashboardRoot .today-empty-dashboard h2 { font-size: var(--text-xl); }
html body .app-view :is(.unified-ai-card, .quick-chip, .today-section-close-btn, .detail-sub-tab, .manual-nav-btn, .an-tab-btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 1100px) { .unified-ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .app-view > .view-header { padding: 16px 0; }
  :root body #view-today .gis-chat-widget.chat-workspace { padding-top: 16px; }
  .unified-ai-card { padding: 12px; gap: 8px; align-items: flex-start; }
  .unified-ai-card-icon { width: 20px; }
  .today-panel-heading { flex-wrap: wrap; gap: 12px; }
  .today-panel-header-actions { width: 100%; justify-content: flex-end; }
  .today-section-close-btn { height: 34px; min-height: 34px; padding: 0 12px; font-size: 11px; }
  :root #view-today .chat-input-field { font-size: var(--text-md); }
  html body .app-view :is(.detail-sub-tab, .manual-nav-btn, .an-tab-btn) { flex: 0 0 auto; height: 34px; padding: 0 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .unified-ai-card { transition: none; } }