/* ============================================================
   ARABESCO EMAIL - official brand layer (v3)
   Uses Arabesco's cobalt, dark slate and geometric mark across
   the mail app while retaining a quiet hospitality-grade canvas,
   focused interaction states and Plus Jakarta Sans typography.
   Plus Jakarta Sans is used consistently throughout the app.
   Loaded after app CSS from index.html; re-applied by
   /opt/BillionMail/branding/apply-branding.sh after updates.
   ============================================================ */

:root {
  --ae-black: #252840;
  --ae-black-2: #1D2440;
  --ae-canvas: #F4F7FC;
  --ae-card: #FFFFFF;
  --ae-line: rgba(37, 40, 64, 0.09);
  --ae-text: #252840;
  --ae-muted: #5D647D;
  --ae-orange: #F59E0B;
  --ae-blue: #1E57C8;
  --ae-purple: #65A3FF;
  --ae-red: #EF4444;
  --ae-cyan: #18B96F;
  --ae-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --ae-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.05), 0 12px 32px rgba(16, 24, 40, 0.08);
  --ae-radius: 20px;
  --ae-radius-sm: 12px;
}

/* ---------- Type ---------- */
body,
.n-config-provider,
.n-button, .n-input, .n-menu, .n-data-table, .n-card, .n-tabs,
.n-dropdown-menu, .n-modal, .n-dialog, .n-form-item, .n-tag, .n-select {
  font-family: "Plus Jakarta Sans", "Manrope", "Segoe UI", sans-serif !important;
}
body { letter-spacing: 0; color: var(--ae-text); }
h1, h2, h3, .n-h1, .n-h2, .n-h3 { font-weight: 700 !important; letter-spacing: -0.5px; }

/* Consistent Arabesco typography for page titles. */
h1, .n-h1, .page-title, [class*="page-title"], [class*="analytics-container"] > div:first-child > span:first-child {
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.6px;
}

::selection { background: var(--ae-black); color: #FFFFFF; }

/* ---------- Canvas + the gradient header moment ---------- */
html, body {
  background-color: var(--ae-canvas) !important;
}
/* layout layers must stay transparent so the gradient shows through */
#app, .n-config-provider, .n-layout, .n-layout-scroll-container, .n-layout-header {
  background-color: transparent !important;
}
/* gradient band removed per request - clean light top like the reference's app interior */
body::before { display: none !important; }
body::after { display: none !important; }

/* ---------- Top bar cleanup (match reference's clean header row) ---------- */
/* the app's header ships broken bits over the gradient: a stray dark
   "Submit a Request" pill top-left and empty 0x0 icon buttons top-right.
   Quiet them so the header reads clean like the reference. */
.n-layout-header { min-height: 56px; padding-top: 8px !important; }
/* "Submit a Request" -> clean quiet white pill with hairline border (light bg now) */
.n-layout-header .header-left .n-button--primary-type {
  background: #FFFFFF !important;
  color: var(--ae-text) !important;
  border: 1px solid rgba(17,18,20,0.10) !important;
  box-shadow: var(--ae-shadow-sm) !important;
  font-weight: 600 !important;
}
.n-layout-header .header-left .n-button--primary-type .n-button__border,
.n-layout-header .header-left .n-button--primary-type .n-button__state-border { border: none !important; }
/* header utility icons -> clean white discs with hairline border + dark glyph */
.n-layout-header .header-right .n-button--default-type {
  width: 38px; height: 38px;
  background: #FFFFFF !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,18,20,0.08) !important;
  box-shadow: var(--ae-shadow-sm) !important;
}
.n-layout-header .header-right .n-button--default-type .n-button__border,
.n-layout-header .header-right .n-button--default-type .n-button__state-border { border: none !important; }
.n-layout-header .header-right .n-button--default-type:hover { background: #F7F7F9 !important; box-shadow: var(--ae-shadow-md) !important; }
/* account avatar button (primary, right side) -> solid black circle like reference */
.n-layout-header .header-right .n-button--primary-type {
  width: 40px; height: 40px; border-radius: 999px !important;
  background: var(--ae-black) !important;
}

/* the app ships these header icons at 0x0 (no UnoCSS glyph) - restore them as
   clean line-icons via SVG masks so they aren't empty circles */
.n-layout-header .header-right .icon {
  display: inline-block !important;
  width: 19px !important; height: 19px !important;
  background-color: var(--ae-text) !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.n-layout-header .header-right .i-ri-sun-line {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/%3E%3C/svg%3E");
}
.n-layout-header .header-right .i-mdi-language {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18'/%3E%3C/svg%3E");
}
.n-layout-header .header-right .i-mdi-server-network {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.5'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.5'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E");
}
.n-layout-header .header-right .i-mdi-user-outline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

/* keep app content above the gradient */
#app, .n-config-provider { position: relative; z-index: 1; }

/* ---------- Motion: one orchestrated entrance, then calm ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ae-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .n-card { animation: ae-rise .45s cubic-bezier(.2, .7, .3, 1) backwards; }
  .n-card:nth-of-type(2) { animation-delay: .05s; }
  .n-card:nth-of-type(3) { animation-delay: .10s; }
  .n-card:nth-of-type(4) { animation-delay: .15s; }
  .n-card:nth-of-type(5) { animation-delay: .20s; }
  .n-data-table { animation: ae-rise .5s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: .08s; }
  .n-button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
  .n-button:active { transform: scale(.97); }
}

/* ---------- Sidebar ---------- */
.n-layout-sider, .n-layout-sider .n-layout-sider-scroll-container, aside {
  background: var(--ae-card) !important;
  border-right: 1px solid var(--ae-line) !important;
  box-shadow: var(--ae-shadow-sm);
  border-radius: 0 24px 24px 0;
}
.n-menu .n-menu-item { margin: 3px 8px !important; height: 42px !important; }
.n-menu .n-menu-item-content { border-radius: 999px !important; padding-left: 16px !important; padding-right: 8px !important; }
.n-menu .n-menu-item-content-header { font-size: 13.5px; }
/* The app now uses Arabesco's official geometric mark directly. */
.app-logo, .logo { filter: none !important; }

/* ---- Sidebar icons: app ships them at 0x0 (no UnoCSS glyph); restore as line-icons ---- */
.n-menu .n-menu-item-content__icon .icon,
.n-menu .n-menu-item-content__icon i {
  display: inline-block !important;
  width: 20px !important; height: 20px !important;
  background-color: currentColor !important;
  color: var(--ae-text) !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.n-menu .i-mdi-web {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 2.5 15.4 0 18M12 3c-2.5 2.6-2.5 15.4 0 18'/%3E%3C/svg%3E");
}
.n-menu .i-mdi-email-fast-outline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4 11 15M22 4l-7 18-4-8-8-4 19-6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4 11 15M22 4l-7 18-4-8-8-4 19-6z'/%3E%3C/svg%3E");
}
.n-menu .i-mdi-settings-outline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
.n-menu .i-mdi-chart-line {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18M7 14l4-4 3 3 5-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18M7 14l4-4 3 3 5-6'/%3E%3C/svg%3E");
}
.n-menu .i-mdi-user-multiple-outline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.n-menu .i-custom\:mailbox {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
.n-menu .i-custom\:smtp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E");
}
.n-menu .i-icon-park-outline\:log {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
}
.n-menu .i-mdi-video-outline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m23 7-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m23 7-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E");
}
.n-menu .i-mdi-logout {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}
.n-menu .n-menu-item-content::before {
  border-radius: 999px !important;
  left: 0 !important; right: 0 !important;
  transition: background-color .18s ease;
}
.n-menu .n-menu-item-content--selected { font-weight: 700; }
.n-menu .n-menu-item-content--selected::before { background: var(--ae-black) !important; }
.n-menu .n-menu-item-content--selected,
.n-menu .n-menu-item-content--selected .n-menu-item-content-header,
.n-menu .n-menu-item-content--selected .n-icon { color: #FFFFFF !important; }
/* the label is a router-link <a>/<span> the app paints green when active - force white on the black pill */
.n-menu-item-content--selected a,
.n-menu-item-content--selected a span,
.n-menu-item-content--selected .router-link-active,
.n-menu-item-content--selected .router-link-active span,
.n-menu-item-content--selected .router-link-exact-active,
.n-menu-item-content--selected .router-link-exact-active span { color: #FFFFFF !important; }
/* active icon -> white on the black pill (mask uses background-color) */
.n-menu-item-content--selected .n-menu-item-content__icon .icon,
.n-menu-item-content--selected .n-menu-item-content__icon i { background-color: #FFFFFF !important; color: #FFFFFF !important; }
.n-menu .n-menu-item-content:not(.n-menu-item-content--selected):hover::before {
  background: rgba(17, 18, 20, 0.05) !important;
}

/* ---------- Cards ---------- */
.n-card, .n-list, .n-collapse, .n-alert, .n-statistic, .n-descriptions,
[class*="card"], [class*="panel-box"] {
  border-radius: var(--ae-radius) !important;
}
.n-card {
  background: var(--ae-card) !important;
  border: none !important;
  box-shadow: var(--ae-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.n-card:hover { box-shadow: var(--ae-shadow-md); }
.n-card > .n-card-header .n-card-header__main { font-weight: 700 !important; letter-spacing: -0.2px; }

/* ---------- Buttons: Arabesco cobalt pills ---------- */
.n-button { border-radius: 999px !important; font-weight: 600 !important; }
.n-button--primary-type {
  background-color: var(--ae-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(30, 87, 200, 0.25);
}
.n-button--primary-type:hover { background-color: #1748AC !important; transform: translateY(-1px); }
.n-button--primary-type .n-button__border,
.n-button--primary-type .n-button__state-border { border: none !important; }
.n-button--default-type { background: #FFFFFF !important; }
.n-button__border { border-color: rgba(17,18,20,0.12) !important; }

/* inside tables, "primary" buttons are the app's text links - make them
   blue link-style instead of black chips (classes are identical; context decides) */
.n-data-table .n-button--primary-type {
  background: transparent !important;
  color: var(--ae-blue) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.n-data-table .n-button--primary-type:hover {
  background: rgba(30, 87, 200, 0.08) !important;
  transform: none !important;
}
/* small circular icon buttons: white discs with dark icons (reference header style) */
.n-button--circle-shape {
  background: #FFFFFF !important;
  box-shadow: var(--ae-shadow-sm);
  color: var(--ae-text) !important;
}
.n-button--circle-shape .n-icon, .n-button--circle-shape svg { color: var(--ae-text) !important; fill: currentColor; }

/* header icon buttons: the app ships them without icon glyphs (0x0, app-level bug),
   so keep them clickable but visually quiet instead of empty white discs */
.n-layout-header .n-button--default-type {
  background: transparent !important;
  box-shadow: none !important;
}
.n-layout-header .n-button--default-type .n-button__border,
.n-layout-header .n-button--default-type .n-button__state-border { border: none !important; }

/* kill the leftover underline indicator under active tabs (pill style replaces it) */
.n-tabs .n-tabs-bar { display: none !important; }
.n-tabs .n-tabs-tab-pad { border: none !important; }
.n-tabs-nav__line { display: none !important; }

/* ---------- Inputs ---------- */
.n-input { border-radius: 999px !important; background: #FFFFFF !important; }
.n-input--textarea { border-radius: 16px !important; }
.n-input .n-input__border { border-color: rgba(17,18,20,0.10) !important; }
.n-input.n-input--focus .n-input__state-border { border-color: var(--ae-blue) !important; box-shadow: 0 0 0 3px rgba(30,87,200,.12) !important; }
.n-base-selection { border-radius: 999px !important; }

/* ---------- Tabs / segmented controls: white + black active pill ---------- */
.n-tabs .n-tabs-rail { border-radius: 999px !important; background: rgba(17,18,20,.05) !important; padding: 3px !important; }
.n-tabs .n-tabs-tab { border-radius: 999px !important; font-weight: 600; }
.n-tabs .n-tabs-tab--active { background: var(--ae-black) !important; color: #fff !important; }
.n-tabs .n-tabs-tab__label { letter-spacing: 0; }
.n-radio-group { border-radius: 999px !important; background: transparent; border: none !important; }
.n-radio-group .n-radio-button {
  border-radius: 999px !important;
  border: 1px solid rgba(17,18,20,0.10) !important;
  background: #FFFFFF;
  margin-right: 6px;
  font-weight: 600;
}
.n-radio-group .n-radio-button--checked {
  background: var(--ae-black) !important;
  color: #fff !important;
  border-color: var(--ae-black) !important;
}
.n-radio-group .n-radio-button--checked .n-radio__label { color: #fff !important; }

/* ---------- Tables ---------- */
.n-data-table { border-radius: var(--ae-radius) !important; overflow: hidden; }
.n-data-table .n-data-table-th {
  background: #FAFAFB !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ae-muted) !important;
  font-weight: 700 !important;
}
.n-data-table .n-data-table-td { border-color: var(--ae-line) !important; }
.n-data-table .n-data-table-tr:hover .n-data-table-td { background: #F7F7F9 !important; }

/* ---------- Progress bars: fat rounded, colorful ---------- */
.n-progress .n-progress-graph-line-rail { border-radius: 999px !important; height: 12px !important; background: rgba(17,18,20,.07) !important; }
.n-progress .n-progress-graph-line-fill { border-radius: 999px !important; }

/* ---------- Tags / badges ---------- */
.n-tag { border-radius: 999px !important; font-weight: 600 !important; }
.n-tag--success-type { background: rgba(34,197,94,.12) !important; color: #16A34A !important; }
.n-tag--error-type   { background: rgba(239,68,68,.12) !important; color: var(--ae-red) !important; }
.n-tag--warning-type { background: rgba(245,158,11,.14) !important; color: #B45309 !important; }
.n-tag--info-type    { background: rgba(59,130,246,.12) !important; color: #2563EB !important; }

/* ---------- Modals / dropdowns ---------- */
.n-modal, .n-dialog, .n-card.n-modal { border-radius: 24px !important; box-shadow: 0 24px 64px rgba(16,24,40,.18) !important; }
.n-dropdown-menu, .n-popover { border-radius: 16px !important; box-shadow: var(--ae-shadow-md) !important; border: 1px solid var(--ae-line); }
.n-dropdown-option-body { border-radius: 10px !important; }

/* ---------- Pagination ---------- */
.n-pagination .n-pagination-item { border-radius: 999px !important; }
.n-pagination .n-pagination-item--active { background: var(--ae-black) !important; color: #fff !important; border-color: var(--ae-black) !important; }

/* ---------- Login page ---------- */
.login-container {
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(30, 87, 200, 0.19), transparent 66%),
    radial-gradient(760px 520px at 0% 100%, rgba(37, 40, 64, 0.12), transparent 65%),
    linear-gradient(135deg, #F8FAFF 0%, #EEF3FC 100%),
    var(--ae-canvas) !important;
}
.login-container::before {
  background: linear-gradient(145deg, var(--ae-blue), #65A3FF) !important;
  opacity: .12;
}
.login-container::after {
  background: var(--ae-black) !important;
  opacity: .08;
}
.login-card {
  border-radius: 28px !important;
  box-shadow: 0 28px 80px rgba(37, 40, 64, 0.16) !important;
  border: 1px solid rgba(37, 40, 64, 0.07) !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(12px);
}

/* ---------- Remaining legacy green controls -> Arabesco cobalt ---------- */
.n-switch.n-switch--active .n-switch__rail { background-color: var(--ae-blue) !important; }
.n-checkbox.n-checkbox--checked .n-checkbox-box,
.n-checkbox.n-checkbox--indeterminate .n-checkbox-box { background-color: var(--ae-blue) !important; border-color: var(--ae-blue) !important; }
.n-radio .n-radio__dot--checked { background-color: var(--ae-blue) !important; box-shadow: inset 0 0 0 1px var(--ae-blue) !important; }
.n-loading-bar { background: var(--ae-blue) !important; }
.n-base-select-option--selected, .n-base-select-option--pending { color: var(--ae-text) !important; }
.n-base-select-option--selected { background: rgba(30, 87, 200, 0.08) !important; font-weight: 700; }
.n-spin { color: var(--ae-blue) !important; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(17,18,20,.16); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(17,18,20,.30); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Focus visibility ---------- */
.n-button:focus-visible, .n-input:focus-within, a:focus-visible {
  outline: 2px solid var(--ae-blue) !important;
  outline-offset: 2px;
}