/* Alert Enterprise Brand System — from AE Brand Guidelines 2023 */
/* Font: DM Sans (approved alternate for Aeonik) */
/*
 * ⚠️ SHARED STYLESHEET — keep this file byte-identical across all AE
 * internal tools under *.alertenterprise.app (AE Quote Tool, AE Email
 * Generator, future tools). When you update this file, mirror the change
 * in the sibling tool(s) so the common look/feel/auth stays consistent.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* Primary */
  --ae-purple: #5F51D5;
  --ae-purple-80: #7F74DD;
  --ae-purple-60: #9F97E6;
  --ae-purple-40: #BFBAEE;
  --ae-purple-20: #DFDDF7;
  --ae-orange: #FF5233;
  --ae-orange-80: #FF755C;
  --ae-orange-60: #FF9885;
  --ae-orange-40: #FFBBAD;
  --ae-orange-20: #FFDDD6;
  --ae-gradient-red: #F9423A;

  /* Text */
  --ae-text: #262626;
  --ae-text-secondary: #6B6B6B;
  --ae-text-muted: #999999;

  /* Neutrals */
  --ae-grey: #D9D9D9;
  --ae-grey-light: #F4F4F5;
  --ae-grey-border: #E5E5E5;
  --ae-white: #FFFFFF;
  --ae-black: #262626;

  /* Semantic */
  --ae-success: #16A34A;
  --ae-warning: #F59E0B;
  --ae-error: #DC2626;
  --ae-info: var(--ae-purple);

  /* Shadows */
  --ae-shadow-sm: 0 1px 2px rgba(38, 38, 38, 0.06);
  --ae-shadow-md: 0 4px 12px rgba(38, 38, 38, 0.08);
  --ae-shadow-lg: 0 8px 24px rgba(38, 38, 38, 0.12);

  /* Radii */
  --ae-radius-sm: 6px;
  --ae-radius-md: 10px;
  --ae-radius-lg: 16px;
  --ae-radius-xl: 24px;

  /* Transitions */
  --ae-transition: 150ms ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: var(--ae-text);
  background: var(--ae-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { line-height: 1.5; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; font-weight: 600; }

a { color: var(--ae-purple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  border-radius: var(--ae-radius-sm);
  cursor: pointer;
  transition: all var(--ae-transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--ae-purple);
  color: var(--ae-white);
}
.btn-primary:hover { background: #4F43B5; text-decoration: none; }

.btn-accent {
  background: var(--ae-orange);
  color: var(--ae-white);
}
.btn-accent:hover { background: #E64A2E; text-decoration: none; }

.btn-outline {
  background: transparent;
  color: var(--ae-purple);
  border: 1.5px solid var(--ae-purple);
}
.btn-outline:hover { background: var(--ae-purple-20); text-decoration: none; }

.btn-ghost {
  background: transparent;
  color: var(--ae-text-secondary);
}
.btn-ghost:hover { background: var(--ae-grey-light); text-decoration: none; }

/* ── Coming-soon indicator ──────────────────────────────────
   Minimal muted label for a disabled feature. No button shape,
   no border, no chip. Just reads as a subtle text note parked
   where the active CTA used to be, so it doesn't compete with
   real actions in the same strip.

   Usage:
     <span class="soon-tag">Advanced Mode — coming soon</span>
*/
.soon-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--ae-text-muted);
  cursor: not-allowed;
  user-select: none;
  white-space: nowrap;
  line-height: 1.4;
}
.soon-tag em {
  font-style: italic;
  font-weight: 400;
  color: var(--ae-text-muted);
  margin-left: 4px;
}

/* Form inputs */
.input {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ae-text);
  background: var(--ae-white);
  border: 1.5px solid var(--ae-grey-border);
  border-radius: var(--ae-radius-sm);
  outline: none;
  transition: border-color var(--ae-transition);
}
.input:focus { border-color: var(--ae-purple); }
.input::placeholder { color: var(--ae-text-muted); }

/* Cards */
.card {
  background: var(--ae-white);
  border: 1px solid var(--ae-grey-border);
  border-radius: var(--ae-radius-md);
  box-shadow: var(--ae-shadow-sm);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 100px;
}
.badge-purple { background: var(--ae-purple-20); color: var(--ae-purple); }
.badge-orange { background: var(--ae-orange-20); color: var(--ae-orange); }
.badge-success { background: #DCFCE7; color: var(--ae-success); }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-error { background: #FEE2E2; color: var(--ae-error); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ae-text-secondary);
  background: var(--ae-grey-light);
  border-bottom: 1.5px solid var(--ae-grey-border);
}
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ae-grey-border);
}
.table tr:hover td { background: #FAFAFA; }

/* ── Cross-tool nav ────────────────────────────────────────────────
   Drop-in link that takes the user back to the AE tool hub from any
   sibling tool. Usage:
     <a class="back-to-tools" href="https://alertenterprise.app/dashboard">Back to Tools</a>
   Styled as a subtle outlined pill that reads as navigation, not a
   primary CTA. !important on color + text-decoration to beat any
   inline .dash-user / .sidebar / .id-bar styles that target <a>
   descendants. When adding a new AE tool, include brand.css and drop
   this markup wherever the tool's header nav lives — the styling
   stays in lockstep across the ecosystem automatically. */
.back-to-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ae-text-secondary) !important;
  background: transparent;
  border: 1px solid var(--ae-grey-border);
  border-radius: var(--ae-radius-sm);
  text-decoration: none !important;
  transition: all 150ms ease;
  white-space: nowrap;
  line-height: 1;
}
.back-to-tools::before {
  content: '←';
  font-size: 0.95em;
  line-height: 1;
}
.back-to-tools:hover {
  color: var(--ae-purple) !important;
  border-color: var(--ae-purple);
  background: var(--ae-purple-20);
}

/* Utility */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--ae-text-muted); }
.text-secondary { color: var(--ae-text-secondary); }
.text-purple { color: var(--ae-purple); }
.text-orange { color: var(--ae-orange); }
.text-success { color: var(--ae-success); }
.text-error { color: var(--ae-error); }
.font-mono { font-family: 'SF Mono', 'Fira Code', monospace; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full { width: 100%; }