/* ==========================================================================
   APEBA — Design System v5.0 · Design Tokens
   --------------------------------------------------------------------------
   Single sophisticated dark theme — refined palette, glassmorphism,
   smooth micro-interactions, and elegant typography.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap');

/* ──── Regras Globais de Media Responsiva ──── */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Touch targets mínimos WCAG (44px) para mobile */
@media (pointer: coarse) {
  .btn, button, a, input, select, textarea,
  .nav-tabs a, .main-nav a, .topbar-link,
  [role="button"], .header-user {
    min-height: 44px;
  }
  input, select, textarea {
    font-size: 16px !important; /* Previne zoom automático no iOS */
  }
}

:root {
  /* -- Django Admin Variable Overrides ---------- */
  --primary:             #14b8a6;
  --secondary:           #0d9488;
  --accent:              #5eead4;
  --primary-fg:          #fff;

  --body-fg:             #e2e8f0;
  --body-bg:             #080a12;
  --body-quiet-color:    #7a8799;
  --body-loud-color:     #f1f5f9;

  --header-color:        #f1f5f9;
  --header-branding-color: #14b8a6;
  --header-bg:           rgba(8, 10, 18, .97);
  --header-link-color:   #7a8799;

  --breadcrumbs-fg:      #7a8799;
  --breadcrumbs-link-fg: #14b8a6;
  --breadcrumbs-bg:      #111520;

  --link-fg:             #14b8a6;
  --link-hover-color:    #0d9488;
  --link-selected-fg:    #14b8a6;

  --hairline-color:      rgba(255, 255, 255, .05);
  --border-color:        rgba(255, 255, 255, .08);

  --error-fg:            #ef4444;

  --message-success-bg:  rgba(16, 185, 129, .12);
  --message-warning-bg:  rgba(245, 158, 11, .12);
  --message-error-bg:    rgba(239, 68, 68, .12);

  --darkened-bg:         #111520;
  --selected-bg:         rgba(20, 184, 166, .12);
  --selected-row:        rgba(20, 184, 166, .18);

  --button-fg:           #fff;
  --button-bg:           #14b8a6;
  --button-hover-bg:     #0d9488;
  --default-button-bg:   #14b8a6;
  --default-button-hover-bg: #0d9488;
  --close-button-bg:     #252b3d;
  --close-button-hover-bg: #323a52;
  --delete-button-bg:    #ef4444;
  --delete-button-hover-bg: #dc2626;

  --object-tools-fg:     #14b8a6;
  --object-tools-bg:     rgba(20, 184, 166, .1);
  --object-tools-hover-bg: #0d9488;

  /* -- Backgrounds ------------------------------- */
  --bg-primary:    #080a12;
  --bg-secondary:  #0e111a;
  --bg-card:       #151a28;
  --bg-card-hover: #1c2235;
  --bg-glass:      rgba(255, 255, 255, .025);
  --bg-glass-hover: rgba(255, 255, 255, .045);

  /* -- Borders ----------------------------------- */
  --border-glass:  rgba(255, 255, 255, .05);
  --border-subtle: rgba(255, 255, 255, .03);
  --border-accent: rgba(20, 184, 166, .2);

  /* -- Text -------------------------------------- */
  --text-primary:   #f1f5f9;
  --text-secondary: #b8c4d0;
  --text-muted:     #7a8799;

  /* -- Accents (APEBA Teal Palette) -------------- */
  --accent-1:        #14b8a6;
  --accent-2:        #0d9488;
  --accent-3:        #5eead4;
  --accent-gradient:  linear-gradient(135deg, #0d9488, #14b8a6, #5eead4);
  --accent-gradient-subtle: linear-gradient(135deg, rgba(13, 148, 136, .4), rgba(20, 184, 166, .3), rgba(94, 234, 212, .2));
  --accent-glow:     rgba(20, 184, 166, .2);
  --accent-glow-strong: rgba(20, 184, 166, .35);

  /* -- Status Colors ----------------------------- */
  --color-success:      #10b981;
  --color-success-soft: rgba(16, 185, 129, .1);
  --color-danger:       #f43f5e;
  --color-danger-soft:  rgba(244, 63, 94, .1);
  --color-warning:      #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, .1);
  --color-info:         #14b8a6;
  --color-info-soft:    rgba(20, 184, 166, .1);
  --color-purple:       #a78bfa;
  --color-purple-soft:  rgba(167, 139, 250, .1);

  /* -- Shadows ----------------------------------- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, .45);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, .55);
  --shadow-xl:   0 16px 60px rgba(0, 0, 0, .6);
  --shadow-glow: 0 0 30px var(--accent-glow);
  --shadow-glow-strong: 0 0 40px var(--accent-glow-strong);

  /* -- Radius ------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* -- Typography -------------------------------- */
  --font-body:    'Inter', 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-display: 'DM Sans', 'Inter', sans-serif;
  --font-mono:    'Geist Mono', 'Fira Code', monospace;

  /* -- Letter Spacing --------------------------- */
  --tracking-tight:  -.03em;
  --tracking-normal: 0;
  --tracking-wide:   .04em;
  --tracking-wider:  .08em;

  /* -- Motion ------------------------------------ */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);

  /* -- Layout ------------------------------------ */
  --container-width: min(1200px, 92vw);
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 64px;
}

/* -- Ambient Glow (background blobs) ------------ */
body::before {
  content: '';
  position: fixed; top: -30%; left: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(20, 184, 166, .06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; bottom: -20%; right: -10%;
  width: 50%; height: 50%;
  background: radial-gradient(circle, rgba(94, 234, 212, .04) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* -- Shared Scrollbar --------------------------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 184, 166, .2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20, 184, 166, .5); }

/* -- Shared Animation --------------------------- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: slideUp .5s var(--ease-out) both; }

/* -- Selection ---------------------------------- */
::selection {
  background: rgba(20, 184, 166, .25);
  color: #fff;
}

/* -- Focus ring --------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* -- Ambient Glow (background blobs) ------------ */
body::before {
  content: '';
  position: fixed; top: -30%; left: -10%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(20, 184, 166, .08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; bottom: -20%; right: -10%;
  width: 50%; height: 50%;
  background: radial-gradient(circle, rgba(94, 234, 212, .06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* -- Shared Scrollbar --------------------------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 184, 166, .3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #14b8a6; }

/* -- Shared Animation --------------------------- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: slideUp .5s var(--ease-out) both; }