/**
 * CallAid Dashboard Design System
 * CallRail / Stripe / Notion inspired
 */

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

[data-app-shell="1"] {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Dashboard palette */
:root {
  --cg-brand: #1d4ed8;
  --qn-primary: #1d4ed8;
  --qn-primary-hover: #1d4ed8;
  --qn-primary-light: #eff6ff;
  --qn-success: #16a34a;
  --qn-success-light: #f0fdf4;
  --qn-urgency: #dc2626;
  --qn-urgency-light: #fef2f2;
  --qn-neutral: #64748b;
  --qn-radius: 0.75rem;
  --qn-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  --qn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* App chrome: align fixed sidebar / toolbars with the global header (h-16 = 4rem) */
/* Logo-aligned brand — single hue (matches partials/header.php --cg-brand-blue) */
body.app-shell-app {
  --app-header-height: 4rem;
}

.cg-app-brand-surface {
  background-color: var(--cg-brand);
  color: #fff;
}
button.cg-app-brand-surface:hover:not(:disabled),
a.cg-app-brand-surface:hover {
  filter: brightness(0.94);
}
button.cg-app-brand-surface:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cg-app-text-brand {
  color: var(--cg-brand);
}

.cg-app-sidebar-link--active {
  background-color: var(--cg-brand);
  color: #fff;
  font-weight: 600;
}
.cg-app-sidebar-link--active .cg-app-sidebar-icon {
  border-color: rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.cg-app-segment-active {
  background-color: var(--cg-brand);
  color: #fff;
}

.cg-app-input-focus:focus {
  border-color: var(--cg-brand) !important;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cg-brand) 22%, transparent);
}

/* Logged-in app: keep main desktop header nav visible; only hide mobile marketing drawer */
body.app-shell-app #mobile-menu-btn {
  display: none !important;
}
body.app-shell-app #mobile-drawer,
body.app-shell-app #mobile-drawer-overlay {
  display: none !important;
  pointer-events: none !important;
}

/* App sidebar */
#app-sidebar {
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 1023px) {
  #app-sidebar {
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
  }
}