/* ============================================================
   AnimalisPro – Global UI Theme
   ap-global-theme.css
   Design tokens + shared components for all internal pages.

   Load order: Bootstrap → style.css → animalis-theme.css
               → ap-dark-pages.css → ap-global-theme.css (this file)

   This file is the AUTHORITATIVE source for design tokens and
   reusable component classes used across all internal pages.
   It is loaded last so its values take final precedence.
   ============================================================ */

:root {
  /* ── Backgrounds ───────────────────────────────────────── */
  --bg-dark:        #140826;
  --bg-secondary:   #1E0F3A;
  --bg-card:        rgba(30, 15, 58, 0.82);
  --bg-nav:         rgba(12, 5, 24, 0.92);
  --bg-dropdown:    #1a0a3a;

  /* ── Accent colours ────────────────────────────────────── */
  --accent-primary:   #D977FF;
  --accent-secondary: #5AB8FF;
  --accent-purple:    #D977FF;
  --accent-blue:      #5AB8FF;
  --accent-soft:      #F4C2FF;

  /* ── Text ──────────────────────────────────────────────── */
  --text-main:      #F5F0FF;
  --text-muted:     #CDBFEA;
  --text-faint:     rgba(205, 191, 234, 0.50);

  /* ── Borders / glass ───────────────────────────────────── */
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-border-h: rgba(255, 255, 255, 0.22);
  --glass-bg:       rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.09);
  --glass-blur:     18px;

  /* ── Gradients ─────────────────────────────────────────── */
  --grad-primary:   linear-gradient(135deg, #D977FF 0%, #5AB8FF 100%);
  --grad-hover:     linear-gradient(135deg, #e48eff 0%, #72c5ff 100%);
  --grad-soft:      linear-gradient(135deg, rgba(217,119,255,.18) 0%, rgba(90,184,255,.14) 100%);
  --grad-bg:        linear-gradient(160deg, #140826 0%, #1b0a32 50%, #0d1a3a 100%);

  /* ── Glows / shadows ───────────────────────────────────── */
  --glow-primary:   0 0 32px rgba(217, 119, 255, 0.35);
  --glow-purple:    0 0 32px rgba(217, 119, 255, 0.35);
  --glow-blue:      0 0 32px rgba(90, 184, 255, 0.28);
  --glow-card:      0 8px 40px rgba(217, 119, 255, 0.12), 0 2px 12px rgba(0,0,0,0.45);
  --shadow-md:      0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:      0 8px 48px rgba(0, 0, 0, 0.50);
  --shadow-xl:      0 24px 64px rgba(0, 0, 0, 0.55);

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  /* ── Transitions ───────────────────────────────────────── */
  --transition: 0.28s ease;

  /* ── Typography ────────────────────────────────────────── */
  --font-base: 'Inter', system-ui, sans-serif;

  /* ── Z-index hierarchy ─────────────────────────────────── */
  --z-background:   -1;
  --z-decoration:    0;
  --z-content:       1;
  --z-sticky:       10;
  --z-navbar:     1040;
  --z-dropdown:   1055;
  --z-modal:      1060;
  --z-toast:      9999;
}

/* ── Body/base (only when AnimalisPro layout is active) ────── */
body[data-ap-layout="animalispro"] {
  font-family: var(--font-base);
  background: var(--grad-bg);
  background-attachment: fixed;
  color: var(--text-main);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 768px) {
  body[data-ap-layout="animalispro"] { background-attachment: scroll; }
}
body[data-ap-layout="animalispro"] ::-webkit-scrollbar { width: 6px; }
body[data-ap-layout="animalispro"] ::-webkit-scrollbar-track { background: var(--bg-dark); }
body[data-ap-layout="animalispro"] ::-webkit-scrollbar-thumb { background: rgba(217,119,255,.45); border-radius: 3px; }
body[data-ap-layout="animalispro"] * { scrollbar-width: thin; scrollbar-color: rgba(217,119,255,.45) var(--bg-dark); }

/* ── Ambient orbs ──────────────────────────────────────────── */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-orbs span { position: absolute; border-radius: 50%; filter: blur(100px); opacity: .22; }
.bg-orbs .orb1 { width: 600px; height: 600px; top: -150px; left: -180px; background: radial-gradient(circle, #D977FF, transparent 70%); }
.bg-orbs .orb2 { width: 520px; height: 520px; bottom: 5%; right: -140px; background: radial-gradient(circle, #5AB8FF, transparent 70%); }
.bg-orbs .orb3 { width: 380px; height: 380px; top: 42%; left: 35%; background: radial-gradient(circle, #a855f7, transparent 70%); opacity: .12; }
body > *:not(.bg-orbs) { position: relative; z-index: 1; }

/* ── Glass card ────────────────────────────────────────────── */
/* Uses !important on background/border-radius/backdrop-filter/box-shadow to
   override ap-dark-pages.css's .card { background: !important } rule. */
.glass-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: var(--glow-card) !important;
  color: var(--text-main) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--glow-purple), var(--glow-card) !important;
  border-color: var(--glass-border-h) !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--grad-primary); color: #fff; font-weight: 700; font-size: .97rem;
  letter-spacing: .02em; border: none; border-radius: var(--radius-md);
  padding: .82rem 2rem; box-shadow: var(--glow-purple);
  transition: filter .22s ease, transform .22s ease, box-shadow .22s ease;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-primary-brand:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 0 48px rgba(217,119,255,.55); color: #fff; }
.btn-secondary-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--text-main); font-weight: 600; font-size: .97rem;
  border: 1.5px solid var(--glass-border-h); border-radius: var(--radius-md);
  padding: .80rem 1.9rem; backdrop-filter: blur(8px);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-secondary-brand:hover { border-color: var(--accent-purple); background: rgba(217,119,255,.08); transform: translateY(-2px); color: var(--accent-soft); }
.btn-primary-brand.btn-sm, .btn-secondary-brand.btn-sm { font-size: .83rem; padding: .45rem 1.2rem; }

/* ── Pill badge ────────────────────────────────────────────── */
.pill-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(217,119,255,.12); border: 1px solid rgba(217,119,255,.28);
  color: var(--accent-soft); font-size: .78rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; border-radius: 100px; padding: .32rem .9rem;
}
.pill-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-purple); box-shadow: 0 0 6px var(--accent-purple); }

/* ── Page header ───────────────────────────────────────────── */
.page-header {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 2rem;
}
.page-header h1, .page-header .page-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.neon-line { width: 56px; height: 3px; background: var(--grad-primary); border-radius: 2px; box-shadow: var(--glow-purple); margin: .5rem 0 1rem; }

/* ── Stats grid ────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: var(--glow-card) !important;
  padding: 1.5rem 1.75rem;
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .28s ease, box-shadow .28s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--glow-purple), var(--glow-card); }
.stat-card .stat-icon { font-size: 1.8rem; margin-bottom: .25rem; }
.stat-card .stat-value { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { font-size: .85rem; color: var(--text-muted); font-weight: 500; }
.stat-card.accent-purple .stat-value { color: var(--accent-purple); }
.stat-card.accent-blue   .stat-value { color: var(--accent-blue); }
.stat-card.accent-soft   .stat-value { color: var(--accent-soft); }

/* ── Content card ──────────────────────────────────────────── */
.content-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: var(--glow-card) !important;
  color: var(--text-main) !important;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

/* ── Section title ─────────────────────────────────────────── */
.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center; gap: .5rem;
}
.section-title i { color: var(--accent-purple); }

/* ── Page wrapper ──────────────────────────────────────────── */
.page-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Form dark styles ──────────────────────────────────────── */
.form-group-dark { margin-bottom: 1.25rem; }
.form-group-dark label {
  display: block; font-size: .88rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: .4rem; letter-spacing: .03em;
}
.input-dark,
.input-dark.form-control,
.input-dark.form-select,
.input-dark.form-control:focus,
.input-dark.form-select:focus {
  background: rgba(20, 8, 38, 0.65) !important;
  border: 1px solid var(--glass-border-h) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-main) !important;
  padding: .6rem 1rem !important;
  font-size: .95rem !important;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: none !important;
}
.input-dark:focus,
.input-dark.form-control:focus,
.input-dark.form-select:focus {
  border-color: var(--accent-purple) !important;
  box-shadow: 0 0 0 3px rgba(217,119,255,.15) !important;
  outline: none !important;
}
.input-dark::placeholder { color: rgba(205,191,234,.45) !important; }

/* ── Dark table ────────────────────────────────────────────── */
.table-dark-glass {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: var(--glow-card) !important;
  overflow: hidden;
}
.table-dark-glass table,
.table-dark-glass .table {
  margin: 0;
  color: var(--text-main) !important;
  background: transparent !important;
}
.table-dark-glass thead th {
  background: rgba(217,119,255,.10) !important;
  color: var(--accent-soft) !important;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--glass-border) !important;
  padding: .9rem 1.1rem;
  white-space: nowrap;
}
.table-dark-glass tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .18s ease;
}
.table-dark-glass tbody tr:last-child { border-bottom: none; }
.table-dark-glass tbody tr:hover { background: rgba(217,119,255,.06) !important; }
.table-dark-glass td {
  padding: .8rem 1.1rem;
  color: var(--text-main) !important;
  vertical-align: middle;
  border: none !important;
}

/* ── Badge status ──────────────────────────────────────────── */
.badge-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; border-radius: 100px;
  padding: .25rem .75rem; white-space: nowrap;
}
.badge-status-born      { background: rgba(90,184,255,.15); color: #5AB8FF; border: 1px solid rgba(90,184,255,.3); }
.badge-status-planned   { background: rgba(217,119,255,.15); color: #D977FF; border: 1px solid rgba(217,119,255,.3); }
.badge-status-pregnant  { background: rgba(244,194,255,.15); color: #F4C2FF; border: 1px solid rgba(244,194,255,.3); }
.badge-status-completed { background: rgba(100,200,120,.15); color: #64C878; border: 1px solid rgba(100,200,120,.3); }
.badge-status-active    { background: rgba(100,200,120,.15); color: #64C878; border: 1px solid rgba(100,200,120,.3); }
.badge-status-inactive  { background: rgba(180,180,200,.10); color: #CDBFEA; border: 1px solid rgba(180,180,200,.2); }

/* ── Utilities ─────────────────────────────────────────────── */
.text-gradient {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-muted-brand { color: var(--text-muted) !important; }
.text-accent { color: var(--accent-purple); }

/* ── Fade-up animation ─────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}