/* ============================================================================
   Supernova Admin — Modern overlay
   Loaded after sb-admin-2.min.css and styles.css to modernize the legacy UI
   without rewriting any templates.
   ============================================================================ */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  --sn-bg: #f7f8fa;
  --sn-surface: #ffffff;
  --sn-surface-soft: #fafbfc;
  --sn-border: #e5e7eb;
  --sn-border-soft: #eef0f3;

  --sn-text: #0f172a;
  --sn-text-muted: #64748b;
  --sn-text-soft: #94a3b8;

  --sn-accent: #6366f1;
  --sn-accent-hover: #4f46e5;
  --sn-accent-soft: #eef2ff;
  --sn-accent-fg: #ffffff;

  --sn-success: #10b981;
  --sn-warning: #f59e0b;
  --sn-danger: #ef4444;
  --sn-info: #0ea5e9;

  --sn-sidebar-bg: #20223f;
  --sn-sidebar-bg-2: #181a30;
  --sn-sidebar-fg: #cdd3e6;
  --sn-sidebar-fg-active: #ffffff;
  --sn-sidebar-hover: rgba(129, 140, 248, 0.22);
  --sn-sidebar-active: rgba(129, 140, 248, 0.32);

  --sn-radius-sm: 6px;
  --sn-radius: 10px;
  --sn-radius-lg: 14px;

  --sn-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sn-shadow-sm:
    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sn-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);

  --sn-font:
    "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base ---------------------------------------------------------------- */
body,
html {
  background: var(--sn-bg) !important;
  color: var(--sn-text) !important;
  font-family: var(--sn-font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body,
body * {
  font-family: var(--sn-font) !important;
}

/* FontAwesome glyphs must keep their own icon font. The `body *` !important
   rule above otherwise overrides it; styles.css only re-excepts .fas (solid),
   so brand icons (.fab, e.g. `fab fa-whatsapp` on the dashboard) rendered as
   tofu boxes. Re-assert the correct family for every FA variant. */
.fa, .fas, .far, .fal, .fad {
  font-family: "Font Awesome 5 Free" !important;
}
.fab {
  font-family: "Font Awesome 5 Brands" !important;
}
body div {
  font-size: 14px;
  line-height: 1.5;
}

a,
a:visited {
  color: var(--sn-accent);
  text-decoration: none;
}
a:hover {
  color: var(--sn-accent-hover);
}

/* Reset legacy h1-h6 monstrosities (text-shadow, !important font-sizes) */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--sn-font) !important;
  color: var(--sn-text) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.5em !important;
}
h1 {
  font-size: 22px !important;
}
h2 {
  font-size: 20px !important;
}
h3 {
  font-size: 18px !important;
}
h4 {
  font-size: 16px !important;
}
h5 {
  font-size: 14px !important;
}
h6 {
  font-size: 13px !important;
}

/* ---- Page shell ---------------------------------------------------------- */
#wrapper #content-wrapper {
  background: var(--sn-bg) !important;
}
#content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#wrapper {
  padding-top: 0 !important;
}
body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.container-fluid {
  padding-left: 36px !important;
  padding-right: 36px !important;
  max-width: 1600px;
  margin: 0 auto; /* center the cap so the leftover space is balanced, not a lopsided right gap */
}

/* #interno is a Bootstrap .row: a FLEX container with -15px side margins.
   Modules dump a plain wrapper div into it, which then behaves as a flex item
   that shrinks to its content width instead of filling — so the content sits
   left and all the slack piles up on the right (uneven gutters), and the
   negative margins pull it flush against the sidebar (a pixel PAST the edge on
   mobile, where the container padding is smaller). The transient "nice gap"
   while navigating is the loader placeholder; the real .row content then snaps.
   Make it a normal block so children fill the width and the container padding
   is a symmetric gutter on both sides. Inner Bootstrap rows/cols are untouched
   (only #interno itself is targeted), so column layouts keep working. The login
   page overrides #interno to display:contents in its own later <style>. */
#interno.row,
#interno {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Fixed sidebar + sticky header (desktop only) -----------------------
   Pin the sidebar to the viewport so it stays put while the page scrolls,
   and offset the content by the sidebar width. The header sticks to the top
   of the scroll area. Scoped to >=768px; on mobile the sidebar overlays and
   should keep its normal flow. */
@media (min-width: 768px) {
  #accordionSidebar.sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1040;
  }
  /* Offset the content by the expanded sidebar width, and match the rail
     width when the sidebar is collapsed via .toggled. */
  /* The sidebar is position:fixed (out of flow), so SB Admin 2's
     #content-wrapper{width:100%} would span the full viewport and then get
     shoved right by margin-left, overflowing under overflow-x:hidden and
     leaving a clipped, left-shifted, not-full-width content area. Pin the
     width to exactly (viewport - sidebar) so content fills the space. */
  /* Offset = sidebar width (14rem) + a structural gutter so content never sits
     flush against the menu. The gutter is a hard gap that no inner negative
     margin (Bootstrap .row) can eat, on top of the .container-fluid padding. */
  #wrapper #content-wrapper {
    margin-left: 15rem;
    width: calc(100% - 15rem);
    /* Only animate the offset on sidebar collapse. Transitioning width made the
       content visibly stretch on first paint (modern.css applies after
       sb-admin's width:100%), which read as a jarring load animation. */
    transition: margin-left .15s ease;
  }
  #wrapper:has(#accordionSidebar.toggled) #content-wrapper {
    margin-left: 7.5rem;
    width: calc(100% - 7.5rem);
  }
  /* Header rides the top of the scroll area. */
  #content .topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
  }
}

/* ---- Sidebar ------------------------------------------------------------- */
.navbar-nav.bg-gradient-primary,
.bg-gradient-primary {
  background: var(--sn-sidebar-bg) !important;
  background-image: linear-gradient(
    180deg,
    #24264a 0%,
    #1b1d36 55%,
    #161830 100%
  ) !important;
  border-right: 1px solid rgba(129, 140, 248, 0.1);
}

/* ---- Cosmic sidebar backdrop (Supernova theme) -------------------------- */
/* Purely decorative: drifting parallax starfield + soft nebula glow toward
   the empty lower half + an occasional shooting star. Animates only transform
   and opacity (cheap, GPU-composited). Sits behind the brand and the menu. */
.sn-cosmos {
  position: absolute;
  inset: 0;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Keep everything interactive above the backdrop. */
.sidebar .sidebar-brand,
.sidebar .nav-item,
.sidebar .sidebar-divider,
.sidebar .sidebar-heading { position: relative; z-index: 1; }

/* Two tiled-gradient star layers drifting up at different speeds (parallax),
   each twinkling on its own cadence. translateY equals one tile height so the
   loop is seamless. */
.sn-stars {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200%;
  background-repeat: repeat;
  background-image:
    radial-gradient(1px 1px at 18px 32px,  rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 56px 120px, rgba(199,210,254,.85), transparent),
    radial-gradient(1px 1px at 110px 60px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 150px 200px,rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 90px 240px, rgba(165,180,252,.75), transparent),
    radial-gradient(1.5px 1.5px at 30px 170px, rgba(255,255,255,.95), transparent);
  background-size: 180px 280px;
  animation: sn-driftA 90s linear infinite, sn-twinkleA 6s ease-in-out infinite;
}
.sn-stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px,  rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 130px 150px, rgba(186,230,253,.8), transparent),
    radial-gradient(1px 1px at 80px 300px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 200px 220px, rgba(216,180,254,.7), transparent);
  background-size: 240px 360px;
  filter: blur(.3px);
  animation: sn-driftB 150s linear infinite, sn-twinkleB 8s ease-in-out infinite;
}
@keyframes sn-driftA { from { transform: translateY(0); } to { transform: translateY(-280px); } }
@keyframes sn-driftB { from { transform: translateY(0); } to { transform: translateY(-360px); } }
@keyframes sn-twinkleA { 0%,100% { opacity: .35; } 50% { opacity: .75; } }
@keyframes sn-twinkleB { 0%,100% { opacity: .2; }  50% { opacity: .5; } }

/* Nebula glow pooled at the bottom (fills the empty space) — slow breathing. */
.sn-nebula {
  position: absolute;
  left: -25%; right: -25%; bottom: -8%;
  height: 65%;
  background:
    radial-gradient(48% 44% at 32% 82%, rgba(99,102,241,.30), transparent 70%),
    radial-gradient(44% 40% at 74% 92%, rgba(56,189,248,.16), transparent 70%),
    radial-gradient(40% 36% at 56% 64%, rgba(168,85,247,.20), transparent 70%);
  filter: blur(16px);
  animation: sn-breathe 14s ease-in-out infinite;
}
@keyframes sn-breathe {
  0%,100% { opacity: .65; transform: translateY(0) scale(1); }
  50%     { opacity: 1;   transform: translateY(-10px) scale(1.05); }
}

/* Shooting star: bright head + fading tail crossing diagonally, long pause. */
.sn-shooting {
  position: absolute;
  top: 14%; left: -40px;
  width: 90px; height: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  border-radius: 2px;
  opacity: 0;
  animation: sn-shoot 11s ease-in infinite;
}
@keyframes sn-shoot {
  0%   { opacity: 0; transform: translate(0,0) rotate(26deg); }
  2%   { opacity: 1; }
  12%  { opacity: 1; }
  17%  { opacity: 0; transform: translate(240px,118px) rotate(26deg); }
  100% { opacity: 0; transform: translate(240px,118px) rotate(26deg); }
}

/* Accessibility: hold the ambience but stop all motion. */
@media (prefers-reduced-motion: reduce) {
  .sn-stars, .sn-stars2, .sn-nebula { animation: none !important; }
  .sn-shooting { display: none; }
}

/* Desktop sidebar: full-width by default, collapse to icon rail when toggled */
@media (min-width: 768px) {
  .sidebar {
    width: 14rem !important;
  }
  .sidebar.toggled {
    width: 6.5rem !important;
  }
  .sidebar.toggled .nav-item .nav-link span {
    font-size: 11px !important;
  }
}

.sidebar .sidebar-brand {
  height: 64px !important;
  padding: 14px 14px 10px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  /* Breathing room so the first menu item isn't glued to the logo. */
  margin-bottom: 14px !important;
}
.sidebar .sidebar-brand img {
  width: 88% !important;
  filter: brightness(1.05);
}
.sidebar .sidebar-divider {
  border-color: rgba(255, 255, 255, 0.06) !important;
  margin: 8px 12px !important;
}

.sidebar .nav-item .nav-link {
  position: relative !important;
  margin: 2px 10px !important;
  padding: 10px 14px 10px 16px !important;
  border-radius: var(--sn-radius-sm) !important;
  color: var(--sn-sidebar-fg) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  overflow: hidden;
  transition:
    background 160ms ease,
    color 160ms ease,
    padding 160ms ease,
    transform 160ms ease;
}
/* Left accent rail — slides in on hover/active */
.sidebar .nav-item .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #818cf8;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
}
.sidebar .nav-item .nav-link i {
  color: var(--sn-sidebar-fg) !important;
  opacity: 0.7;
  margin-right: 4px !important;
  font-size: 14px !important;
  width: 18px !important;
  text-align: center !important;
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}
.sidebar .nav-item .nav-link span {
  letter-spacing: 0.005em;
  transition: color 160ms ease;
}
/* Hover / focus — subtle indigo wash + brighter text. */
.sidebar.sidebar-dark .nav-item .nav-link:hover,
.sidebar.sidebar-dark .nav-item .nav-link:focus,
.sidebar.sidebar-dark .nav-item .nav-link:focus-visible,
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:focus,
.sidebar .nav-item .nav-link:focus-visible {
  background-color: rgba(129, 140, 248, 0.22) !important;
  background-image: linear-gradient(
    90deg,
    rgba(129, 140, 248, 0.34) 0%,
    rgba(129, 140, 248, 0.12) 100%
  ) !important;
  color: #ffffff !important;
  padding-left: 18px !important;
  outline: none;
  text-decoration: none !important;
}
.sidebar.sidebar-dark .nav-item .nav-link:hover::before,
.sidebar.sidebar-dark .nav-item .nav-link:focus::before,
.sidebar.sidebar-dark .nav-item .nav-link:focus-visible::before,
.sidebar .nav-item .nav-link:hover::before,
.sidebar .nav-item .nav-link:focus::before,
.sidebar .nav-item .nav-link:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}
.sidebar.sidebar-dark .nav-item .nav-link:hover i,
.sidebar.sidebar-dark .nav-item .nav-link:focus i,
.sidebar.sidebar-dark .nav-item .nav-link:focus-visible i,
.sidebar .nav-item .nav-link:hover i,
.sidebar .nav-item .nav-link:focus i,
.sidebar .nav-item .nav-link:focus-visible i {
  color: #c7d2fe !important;
  opacity: 1 !important;
  transform: scale(1.06);
}
.sidebar.sidebar-dark .nav-item .nav-link:hover span,
.sidebar.sidebar-dark .nav-item .nav-link:focus span,
.sidebar .nav-item .nav-link:hover span,
.sidebar .nav-item .nav-link:focus span {
  color: #ffffff !important;
}
.sidebar .nav-link:active {
  transform: translateY(0.5px);
}
/* Current-section highlight. menu.tpl hardcodes class="active" on EVERY <li>,
   so `.active` is useless as a marker. Instead JS (see structure.tpl) sets a
   dedicated `.sn-current` class on the nav-link whose ?on= matches the section
   loaded in #interno. Mirrors the hover state but persistent: stronger wash,
   permanent left accent bar, bright icon + label. */
.sidebar .nav-item .nav-link.sn-current,
.sidebar.sidebar-dark .nav-item .nav-link.sn-current {
  /* Clearly stronger / deeper than the :hover wash (0.22) so the selected
     section reads as selected even while another item is hovered. */
  background-color: rgba(99, 102, 241, 0.45) !important;
  background-image: linear-gradient(
    90deg,
    rgba(99, 102, 241, 0.58) 0%,
    rgba(99, 102, 241, 0.30) 100%
  ) !important;
  color: #ffffff !important;
  font-weight: 600;
}
.sidebar .nav-item .nav-link.sn-current::before {
  opacity: 1;
  transform: translateX(0);
}
.sidebar .nav-item .nav-link.sn-current i {
  color: #c7d2fe !important;
  opacity: 1 !important;
}
.sidebar .nav-item .nav-link.sn-current span {
  color: #ffffff !important;
}

/* ---- Topbar (dark indigo) ------------------------------------------------ */
.navbar.topbar {
  position: sticky;
  top: 0;
  height: 60px !important;
  background: linear-gradient(
    135deg,
    #1e1b4b 0%,
    #232050 50%,
    #1c1a47 100%
  ) !important;
  background-color: #1e1b4b !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 18px rgba(30, 27, 75, 0.25) !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  z-index: 1030;
}
/* Soft indigo glow hugging the bottom edge */
.navbar.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(129, 140, 248, 0.65) 30%,
    rgba(165, 180, 252, 0.65) 50%,
    rgba(129, 140, 248, 0.65) 70%,
    transparent 100%
  );
  pointer-events: none;
}
.topbar .topbar-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
  margin: 0 16px !important;
  height: 28px !important;
}

/* User dropdown trigger as a pill with chevron */
.topbar .nav-link.dropdown-toggle,
.topbar .nav-link {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #e2e8f0 !important;
  padding: 5px 14px 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
}
.topbar .nav-link::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.6px solid rgba(226, 232, 240, 0.65);
  border-bottom: 1.6px solid rgba(226, 232, 240, 0.65);
  transform: translateY(-1px) rotate(45deg);
  transition:
    transform 140ms ease,
    border-color 140ms ease;
}
.topbar .nav-item.show .nav-link::after,
.topbar .nav-link[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
  border-color: #818cf8;
}
.topbar .nav-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}
.topbar .nav-link:hover::after {
  border-color: #ffffff;
}
.topbar .nav-link span {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.005em;
}
.topbar .nav-link:hover span {
  color: #ffffff !important;
}

/* Avatar with online status dot */
.topbar .nav-link {
  isolation: isolate;
}
.topbar .img-profile {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  border: 2px solid rgba(11, 18, 32, 0) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.3);
  object-fit: cover;
  transition: box-shadow 140ms ease;
}
.topbar #userDropdown::before {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid #1e1b4b;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.3),
    0 0 8px rgba(52, 211, 153, 0.55);
  z-index: 2;
  pointer-events: none;
}
.topbar .nav-link:hover .img-profile {
  box-shadow:
    0 0 0 1px #818cf8,
    0 2px 12px rgba(99, 102, 241, 0.45);
}

#sidebarToggleTop {
  color: rgba(226, 232, 240, 0.85) !important;
  border-radius: var(--sn-radius-sm) !important;
}
#sidebarToggleTop:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* Mobile: same indigo as desktop, solid (no blur) for performance. */
@media (max-width: 767.98px) {
  .topbar #userDropdown::before {
    display: none;
  }
  .navbar.topbar {
    position: relative;
    background: linear-gradient(135deg, #1e1b4b 0%, #232050 100%) !important;
    background-color: #1e1b4b !important;
    border-bottom: 1px solid rgba(129, 140, 248, 0.18) !important;
    margin-top: 0 !important;
  }
  .topbar .nav-link::after {
    display: none;
  }
  /* Mobile centered logo needs the white variant on dark bg */
  .topbar-brand-mobile img {
    filter: brightness(0) invert(1);
  }
  #sidebarToggleTop {
    color: #e2e8f0 !important;
  }
  #sidebarToggleTop:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
  }
  .topbar .img-profile {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.18),
      0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

/* User dropdown menu */
.dropdown-menu#user,
.dropdown-menu-right {
  margin-top: 10px !important;
  min-width: 180px;
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius) !important;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.1),
    0 1px 3px rgba(15, 23, 42, 0.06) !important;
  padding: 6px !important;
}
.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px !important;
  border-radius: var(--sn-radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--sn-text) !important;
}
.dropdown-menu .dropdown-item i {
  color: var(--sn-text-muted);
  font-size: 13px;
}
.dropdown-menu .dropdown-item:hover {
  background: var(--sn-accent-soft) !important;
  color: var(--sn-accent-hover) !important;
}
.dropdown-menu .dropdown-item:hover i {
  color: var(--sn-accent) !important;
}

/* User dropdown */
.dropdown-menu {
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius) !important;
  box-shadow: var(--sn-shadow) !important;
  padding: 6px !important;
}
.dropdown-item {
  border-radius: var(--sn-radius-sm) !important;
  padding: 8px 10px !important;
  font-size: 13.5px !important;
  color: var(--sn-text) !important;
}
.dropdown-item:hover {
  background: var(--sn-bg) !important;
}

/* ---- Cards / panels ------------------------------------------------------ */
.card {
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius) !important;
  box-shadow: var(--sn-shadow-xs) !important;
}
.card.shadow,
.card.shadow-sm,
.card.shadow-lg {
  box-shadow: var(--sn-shadow-xs) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sn-border-soft) !important;
  padding: 14px 18px !important;
}
.card-header h6,
.card-header .m-0 {
  color: var(--sn-text) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
.card-body {
  padding: 18px !important;
}

/* ---- Section headers (forms + lists) ------------------------------------- */
.boxPadrao,
#interno > div,
.w100- {
  background: transparent;
}

.topo_secao,
.topoPadrao {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 12px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sn-border-soft) !important;
  padding: 4px 0 18px !important;
  margin: 0 0 24px !important;
  float: none !important;
  position: relative;
}
.topo_secao h1,
.topoPadrao h1,
.topoPadrao .h3 {
  float: none !important;
  margin: 0 !important;
  padding-left: 16px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.2 !important;
  color: #0b1220 !important;
  text-shadow: none !important;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.topo_secao h1::before,
.topoPadrao h1::before,
.topoPadrao .h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
.topoPadrao .boxAcoes,
.topo_secao .boxAcoes {
  display: flex !important;
  gap: 8px;
  align-items: center;
  float: none !important;
  margin: 0 !important;
}

/* List/form body wrapped in a card-look. .boxPadrao is the legacy list wrapper.
   We make it look like a card; the table inside (.lista) already has its own
   card-look so a wrapping border could be redundant — keep it transparent and
   let the inner .lista / .card do the framing. */
.boxPadrao {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}

/* Generic form rows-as-table (form_generico.tpl) */
table tr.lista_linha td {
  border: 0 !important;
  padding: 6px 8px !important;
  height: auto !important;
  background: transparent !important;
}
.filtros {
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow-xs);
  padding: 18px 20px;
  margin: 0 0 16px;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  font-family: var(--sn-font) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-radius: var(--sn-radius-sm) !important;
  padding: 8px 14px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  border: 1px solid transparent !important;
  transition:
    background 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease !important;
  box-shadow: none !important;
}
.btn:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

.btn-primary,
.btn-primary:visited {
  background: var(--sn-accent) !important;
  border-color: var(--sn-accent) !important;
  color: var(--sn-accent-fg) !important;
}
.btn-primary:hover {
  background: var(--sn-accent-hover) !important;
  border-color: var(--sn-accent-hover) !important;
  color: var(--sn-accent-fg) !important;
}

.btn-secondary {
  background: var(--sn-surface) !important;
  border-color: var(--sn-border) !important;
  color: var(--sn-text) !important;
}
.btn-secondary:hover {
  background: var(--sn-bg) !important;
  border-color: var(--sn-border) !important;
  color: var(--sn-text) !important;
}

.btn-info {
  background: var(--sn-info) !important;
  border-color: var(--sn-info) !important;
  color: #fff !important;
}
.btn-info:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
}

.btn-success {
  background: var(--sn-success) !important;
  border-color: var(--sn-success) !important;
  color: #fff !important;
}
.btn-warning {
  background: var(--sn-warning) !important;
  border-color: var(--sn-warning) !important;
  color: #fff !important;
}
.btn-danger {
  background: var(--sn-danger) !important;
  border-color: var(--sn-danger) !important;
  color: #fff !important;
}

.btn-link {
  color: var(--sn-accent) !important;
}
.btn-link:hover {
  color: var(--sn-accent-hover) !important;
  text-decoration: none !important;
}

/* Legacy action buttons → unify with .btn */
.botaoAcoes,
.botaoAcoesNova {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--sn-accent) !important;
  background-image: none !important;
  border: 1px solid var(--sn-accent) !important;
  color: var(--sn-accent-fg) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 8px 14px !important;
  border-radius: var(--sn-radius-sm) !important;
  cursor: pointer;
  float: none !important;
  margin: 0 !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  transition: background 120ms ease;
}
.botaoAcoes a,
.botaoAcoes a:visited {
  color: var(--sn-accent-fg) !important;
}
.botaoAcoes:hover,
.botaoAcoesNova:hover {
  background: var(--sn-accent-hover) !important;
  border-color: var(--sn-accent-hover) !important;
}
.botaoAcoes input[type="button"] {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  font: inherit !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

.botaoVoltar {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  color: var(--sn-text) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 8px 14px !important;
  border-radius: var(--sn-radius-sm) !important;
  cursor: pointer;
  float: none !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
}
.botaoVoltar:hover {
  background: var(--sn-bg) !important;
  border-color: var(--sn-border) !important;
}

input[type="button"],
input[type="submit"] {
  font-family: var(--sn-font) !important;
}

/* ---- Form inputs --------------------------------------------------------- */
form {
  width: 100%;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea,
select {
  font-family: var(--sn-font) !important;
  font-size: 13px !important;
  color: var(--sn-text) !important;
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius-sm) !important;
  padding: 6px 11px !important;
  height: 34px;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
  outline: none;
  box-sizing: border-box;
}
textarea {
  height: auto;
  min-height: 68px;
  padding: 8px 11px !important;
  resize: vertical;
}
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  padding-right: 32px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: var(--sn-accent) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sn-accent);
  vertical-align: middle;
  margin-right: 6px;
}

/* Form rows: label-above layout — compact, two-column */
.form_linha {
  width: 49% !important;
  padding: 7px 0 !important;
  margin-bottom: 12px;
  float: left !important;
  box-sizing: border-box;
}
.form_linha:nth-child(odd) {
  padding-right: 18px !important;
}
.form_linha_dupla {
  width: 99% !important;
  padding: 7px 0 !important;
  margin-bottom: 12px;
  clear: both !important;
  float: none !important;
}
.form_label,
.form_label_dupla,
.label {
  float: none !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--sn-text-muted) !important;
  letter-spacing: 0.005em;
  padding: 0 0 3px !important;
  line-height: 1.25 !important;
  background: transparent !important;
}
.form_campo,
.form_campo_dupla,
.campo {
  float: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}
.form_campo input[type="text"],
.form_campo input[type="email"],
.form_campo input[type="password"],
.form_campo input[type="number"],
.form_campo input[type="tel"],
.form_campo textarea,
.form_campo select,
.form_linha_dupla textarea {
  width: 100% !important;
  max-width: 100%;
}
.form_label_visualizar {
  float: none !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--sn-text-muted) !important;
  text-align: left !important;
  padding: 0 0 4px !important;
}
.form_campo_visualizar {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--sn-text) !important;
}
.formAcoes {
  display: flex !important;
  gap: 8px;
  align-items: center;
  float: none !important;
  margin: 16px 0 0 !important;
}
.botaoSalvar {
  margin-bottom: 20px;
}
/* ---- Form group accordion (grupoFormBloco / grupoFormTitulo / grupoForm) -- */
.grupoFormBloco {
  float: none !important;
  /* Clear the right-floated "Guardar" (.botaoSave) button. Without this the
     first block's margin:auto centers in the width left beside the float and
     ends up shifted left, while later blocks (which clear the float) center
     normally — making the first group look misaligned from the rest. */
  clear: both !important;
  width: 100% !important;
  max-width: 1040px;
  padding: 0 !important;
  margin: 14px auto 16px !important;
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius) !important;
  box-shadow: var(--sn-shadow-xs) !important;
  overflow: hidden;
}
.grupoFormTitulo {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  cursor: pointer !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sn-border-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sn-text) !important;
  padding: 10px 16px !important;
  transition: background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.grupoFormTitulo:hover {
  background: #eaf0fd !important;
}
.grupoFormTitulo a,
.grupoFormTitulo a:visited {
  float: none !important;
  display: inline-block;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--sn-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.grupoFormTitulo::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-right: 2px solid var(--sn-text-muted);
  border-bottom: 2px solid var(--sn-text-muted);
  transform: rotate(45deg);
  margin-bottom: 3px;
  transition:
    transform 160ms ease,
    border-color 160ms ease;
}
.grupoFormTitulo:hover::after {
  border-color: var(--sn-accent);
}
.grupoForm {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 16px 6px !important;
  background: var(--sn-surface) !important;
}
.grupoForm::after {
  content: "";
  display: block;
  clear: both;
}

/* ---- Tabs ---------------------------------------------------------------- */
#tabs {
  border-bottom: 1px solid var(--sn-border);
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 0;
  flex-wrap: wrap;
}
#tabs a,
#tabs .tab,
#tabs li {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: var(--sn-radius-sm) var(--sn-radius-sm) 0 0;
  color: var(--sn-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
#tabs a:hover,
#tabs .tab:hover {
  color: var(--sn-text);
}
#tabs .ativo,
#tabs .active,
#tabs a.ativo,
#tabs a.active {
  color: var(--sn-accent);
  border-bottom-color: var(--sn-accent);
}

/* ---- Filters card -------------------------------------------------------- */
form[name="busca"] .card {
  margin-bottom: 16px !important;
}
form[name="busca"] .card-header {
  background: transparent !important;
  cursor: pointer;
}
form[name="busca"] .card-header h6 {
  color: var(--sn-text) !important;
  font-weight: 600 !important;
}
form[name="busca"] .card-body {
  padding: 14px 18px !important;
}
form[name="busca"] input[type="text"] {
  width: 90% !important;
}
form[name="busca"] input[type="submit"] {
  background: var(--sn-accent) !important;
  border-color: var(--sn-accent) !important;
  color: #fff !important;
}

/* ---- List / table -------------------------------------------------------- */
.lista,
table.lista,
table.table {
  width: 100% !important;
  background: var(--sn-surface) !important;
  border: 1px solid var(--sn-border) !important;
  border-radius: var(--sn-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  box-shadow: var(--sn-shadow-xs);
  font-size: 13.5px !important;
}
.lista td,
.lista th,
.table td,
.table th {
  border-top: 1px solid var(--sn-border-soft) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
  text-align: left;
  height: auto !important;
  font-size: 13.5px;
  color: var(--sn-text);
}
.lista tr:first-child td,
.table tr:first-child td {
  border-top: 0 !important;
}

.lista_cabecalho,
.lista td.lista_cabecalho {
  background: var(--sn-surface-soft) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sn-border) !important;
  color: var(--sn-text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px !important;
  height: auto !important;
}
.lista_cabecalho a,
.lista_cabecalho a:visited {
  color: var(--sn-text-muted) !important;
}
.lista_cabecalho a:hover {
  color: var(--sn-text) !important;
}
.lista_cabecalho:first-child {
  border-top-left-radius: var(--sn-radius);
}
.lista_cabecalho:last-child {
  border-top-right-radius: var(--sn-radius);
}

/* Row hover */
.lista tr:hover td.linha_,
.lista tr:hover td[class*="linha_"] {
  background: var(--sn-bg) !important;
}
.lista_linha_selecionada,
td.lista_linha_selecionada {
  background: var(--sn-accent-soft) !important;
}

/* Empty state */
.lista_vazia,
td.lista_vazia {
  background: var(--sn-surface) !important;
  text-align: center !important;
  padding: 48px 16px !important;
  color: var(--sn-text-muted) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* ---- Pagination ---------------------------------------------------------- */
.paginacao {
  margin-top: 16px !important;
  padding: 12px 0 !important;
}
.paginacao table {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.paginacao td {
  border: 0 !important;
  padding: 0 2px !important;
  height: auto !important;
  background: transparent !important;
}
/* Hide JPG sprite buttons, restyle their wrappers as chevrons */
.paginacao img {
  display: none !important;
}
.paginacao td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin: 0 2px;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-sm);
  background: var(--sn-surface);
  color: var(--sn-text);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}
.paginacao td a:hover {
  background: var(--sn-bg);
  border-color: var(--sn-border);
  color: var(--sn-text);
}
/* First/prev/next/last via CSS chevrons (target by table column position) */
.paginacao tr td:nth-child(1) a::before {
  content: "«";
}
.paginacao tr td:nth-child(2) a::before {
  content: "‹";
}
.paginacao tr td:nth-last-child(1) a::before {
  content: "»";
}
.paginacao tr td:nth-last-child(2) a::before {
  content: "›";
}
.paginacao tr td:nth-child(3),
.paginacao tr td:nth-last-child(3) {
  display: none !important;
}
.paginacao tr td[background] {
  background: transparent !important;
}
.paginacao span a {
  margin: 0 2px;
}
.paginacao span a[class*="atual"],
.paginacao span a.ativo {
  background: var(--sn-accent) !important;
  border-color: var(--sn-accent) !important;
  color: #fff !important;
}

/* ---- Messages / notices -------------------------------------------------- */
.mensagem {
  background: var(--sn-accent-soft);
  color: var(--sn-text);
  border: 1px solid #c7d2fe;
  border-radius: var(--sn-radius-sm);
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 13.5px;
}
.mensagem:empty {
  display: none;
}

/* ---- Footer -------------------------------------------------------------- */
.sticky-footer {
  background: transparent !important;
  border-top: 1px solid var(--sn-border);
  padding: 16px 0 !important;
}
.sticky-footer .copyright {
  color: var(--sn-text-soft) !important;
  font-size: 12.5px !important;
}

/* ---- Loader (page-change indicator) ------------------------------------- */
/* Modernized: subtle blur backdrop + animated top progress bar + minimal pill.
   The legacy carregando.gif is hidden in favor of a CSS spinner ring. */
#loader {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.1) !important;
  -webkit-backdrop-filter: blur(2px) saturate(105%);
  backdrop-filter: blur(2px) saturate(105%);
  opacity: 1 !important;
  z-index: 9990 !important;
  pointer-events: auto;
  align-items: center;
  justify-content: center;
  animation: snLoaderFade 160ms ease-out both;
}
/* Flex centering is applied ONLY while JS has the loader shown.
   ajax.js toggles inline `style.display` between "block" and "none";
   without this conditional, `display: flex !important` would beat the
   inline `display: none` and the loader would never hide. */
#loader[style*="display: block"],
#loader[style*="display:block"] {
  display: flex !important;
}
@keyframes snLoaderFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animated top progress bar — primary visual signal.
   A short bright segment slides left→right repeatedly across the very top. */
#loader::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 18%,
    #a5b4fc 32%,
    #6366f1 50%,
    #a5b4fc 68%,
    transparent 82%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  box-shadow:
    0 0 14px rgba(99, 102, 241, 0.55),
    0 0 4px rgba(99, 102, 241, 0.35);
  animation: snProgressSlide 1.1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  z-index: 10001;
  pointer-events: none;
}
@keyframes snProgressSlide {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

/* Centered floating pill: small modern card with a spinning ring.
   Centered by the parent flex on #loader — no transform tricks. */
.loader_interno {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  padding: 14px 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 14px !important;
  box-shadow:
    0 14px 36px rgba(2, 6, 23, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 10000 !important;
  animation: snLoaderRise 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes snLoaderRise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* CSS spinner ring — replaces carregando.gif. */
.loader_icone {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  position: relative;
  flex: 0 0 auto;
}
.loader_icone img {
  display: none !important;
}
.loader_icone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(99, 102, 241, 0.18);
  border-top-color: var(--sn-accent, #6366f1);
  animation: snSpin 720ms linear infinite;
}
@keyframes snSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Loader label — always show "Cargando…" via ::before. We zero the parent
   font-size so any whitespace text node becomes invisible, then re-set on
   the pseudo. This is robust to leftover whitespace in the template. */
.loader_texto {
  padding: 0 !important;
  height: auto !important;
  float: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}
.loader_texto::before {
  content: "Cargando…";
  color: var(--sn-text, #0f172a);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
}

/* Soften the legacy 35%-opacity content fade-out — felt jarring. */
#interno.interno_off {
  opacity: 0.75 !important;
  border: 0 !important;
  filter: blur(0.5px);
  transition:
    opacity 180ms ease,
    filter 180ms ease;
  pointer-events: none;
}

/* ---- Misc legacy cleanup ------------------------------------------------- */
.boxLegenda {
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-sm);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--sn-text-muted);
  margin: 0 0 12px;
}
.boxAviso {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--sn-radius-sm);
  color: #9a3412;
  padding: 12px 14px;
}

/* Legacy oversized div font-size from styles.css (line 222) */
#interno div {
  font-size: 14px;
  line-height: 1.5;
}

/* Kill float layout artifacts that fight modern layout */
.boxPadrao {
  float: none !important;
}
.w100- {
  width: 100% !important;
}

/* ---- Lead detail drawer (slides in over the kanban) --------------------- */
#lead-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 10040;
}
#lead-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
#lead-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 92vw;
  background: var(--sn-surface, #ffffff);
  box-shadow: -18px 0 50px rgba(2, 6, 23, 0.3);
  transform: translateX(102%);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 10041;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#lead-drawer.open {
  transform: translateX(0);
}
#lead-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Loading placeholder shown while the detail HTML is fetched */
.ld-drawer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 240px;
}
.ld-drawer-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(99, 102, 241, 0.18);
  border-top-color: var(--sn-accent, #6366f1);
  animation: snSpin 720ms linear infinite;
}
body.lead-drawer-open {
  overflow: hidden;
}
@media (max-width: 767.98px) {
  #lead-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ---- Mobile sidebar drawer ---------------------------------------------- */
@media (max-width: 767.98px) {
  /* Off-canvas drawer: hidden by default, slides in when .toggled.
     Width grows with the viewport so labels never get clipped. */
  .sidebar.sidebar-dark,
  ul.sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh !important;
    width: 88vw !important;
    max-width: 320px !important;
    min-width: 264px !important;
    z-index: 1050 !important;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }
  .sidebar.sidebar-dark.toggled,
  ul.sidebar.toggled {
    transform: translateX(0);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
  }
  /* Drawer always shows full text labels regardless of .toggled state.
     SB Admin 2 hardcodes width:6.5rem on mobile — we override to auto. */
  .sidebar.sidebar-dark .nav-item .nav-link,
  .sidebar.sidebar-dark.toggled .nav-item .nav-link,
  .sidebar.toggled .nav-item .nav-link,
  .sidebar .nav-item .nav-link {
    width: auto !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .sidebar.sidebar-dark .nav-item,
  .sidebar .nav-item {
    width: 100% !important;
  }
  .sidebar.sidebar-dark .nav-item .nav-link span,
  .sidebar.sidebar-dark.toggled .nav-item .nav-link span,
  .sidebar.toggled .nav-item .nav-link span,
  .sidebar .nav-item .nav-link span {
    font-size: 14px !important;
    display: inline-block !important;
    text-align: left !important;
    padding-top: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    flex: 1 1 auto;
    min-width: 0;
  }
  .sidebar .sidebar-brand {
    padding: 18px 18px 14px !important;
  }
  .sidebar .sidebar-brand img {
    width: 70% !important;
  }

  /* Content takes the full viewport width */
  #wrapper {
    display: block !important;
  }
  #content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Backdrop overlay (body class is added in sync with sidebar.toggled).
     pointer-events:auto + cursor:pointer make the dim area tappable to close. */
  body.sidebar-toggled::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1040;
    pointer-events: auto;
    cursor: pointer;
    animation: snFadeIn 180ms ease;
  }
  body.sidebar-toggled {
    overflow: hidden;
  }

  /* Topbar hamburger stays above the backdrop so it's reachable to close */
  .navbar.topbar {
    position: relative;
    z-index: 1060;
    padding-left: 8px !important;
    padding-right: 12px !important;
  }
  #sidebarToggleTop {
    position: relative;
    z-index: 1061;
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important;
    color: #ffffff !important;
  }
  #sidebarToggleTop i {
    font-size: 20px;
    color: #ffffff;
  }

  /* Mobile-only centered brand */
  .topbar-brand-mobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    text-decoration: none;
    pointer-events: auto;
    line-height: 0;
    max-width: calc(100vw - 140px);
  }
  .topbar-brand-mobile img {
    display: block;
    height: 38px;
    width: auto;
    max-width: 100%;
  }

  /* User dropdown trigger sits cleanly on the right */
  .topbar .navbar-nav {
    margin-left: auto !important;
  }
  .topbar .img-profile {
    width: 32px !important;
    height: 32px !important;
  }
  .topbar .topbar-divider {
    display: none !important;
  }
}

/* Hide mobile brand on desktop regardless of Bootstrap class state */
@media (min-width: 768px) {
  .topbar-brand-mobile {
    display: none !important;
  }
}

@keyframes snFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Section header stacks */
  .topo_secao,
  .topoPadrao {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 0 0 12px !important;
  }
  .topo_secao h1,
  .topoPadrao h1,
  .topoPadrao .h3 {
    font-size: 18px !important;
  }
  .topo_secao .boxAcoes,
  .topoPadrao .boxAcoes {
    width: 100%;
    flex-wrap: wrap;
  }
  .botaoVoltar,
  .botaoAcoes,
  .botaoAcoesNova {
    padding: 9px 14px !important;
  }

  /* Form rows stack to single column */
  .form_linha,
  .form_linha:nth-child(odd) {
    width: 100% !important;
    padding-right: 0 !important;
    float: none !important;
  }
  .form_linha_dupla {
    width: 100% !important;
  }

  /* Form group accordion — full width with comfortable touch target */
  .grupoFormBloco {
    margin-bottom: 12px !important;
    border-radius: var(--sn-radius-sm) !important;
  }
  .grupoFormTitulo {
    padding: 14px 14px !important;
    min-height: 48px;
  }
  .grupoFormTitulo a {
    font-size: 14px !important;
  }
  .grupoForm {
    padding: 14px 14px 4px !important;
  }

  /* Tabs scroll horizontally instead of wrapping awkwardly */
  #tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #tabs::-webkit-scrollbar {
    height: 4px;
  }
  #tabs a,
  #tabs .tab,
  #tabs li {
    flex: 0 0 auto;
  }

  /* Topbar */
  .navbar.topbar {
    height: 56px !important;
    margin-bottom: 14px !important;
  }

  /* Tables: keep readable, allow horizontal scroll on overflow */
  .lista,
  table.lista,
  table.table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lista td,
  .lista th,
  .table td,
  .table th {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* Filters card */
  .filtros {
    padding: 14px !important;
  }
  form[name="busca"] input[type="text"] {
    width: 100% !important;
  }

  /* Inputs slightly larger to avoid iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
    height: 42px;
  }
  textarea {
    height: auto;
  }
}

@media (max-width: 480px) {
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .topo_secao h1,
  .topoPadrao h1 {
    font-size: 17px !important;
  }
  .grupoFormTitulo {
    padding: 13px 12px !important;
  }
  .grupoForm {
    padding: 12px 12px 4px !important;
  }
  .lista td,
  .lista th,
  .table td,
  .table th {
    padding: 9px 10px !important;
  }
}