/*
 * EDAT Design System — Bootstrap 4 / Material Dashboard Override
 * Institutional Research Office — UNICAMP
 *
 * Architecture: three-layer token system
 *   Layer 1: Primitive tokens (raw values)
 *   Layer 2: Semantic tokens (role-based aliases)
 *   Layer 3: Component rules (reference semantic tokens only)
 *
 * Load order: material-dashboard.css → edat.css
 * This file overrides Material Dashboard while keeping Bootstrap 4
 * grid, flexbox utilities, and display helpers intact.
 *
 * Fonts loaded via Google Fonts (add to base template):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@400;500;600;700&display=swap" rel="stylesheet">
 */

/* ==========================================================================
   LAYER 1: PRIMITIVE TOKENS
   ========================================================================== */

:root {
  /* Red scale */
  --red-50:  #FFF5F5;
  --red-100: #FFE4E4;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;
  --red-950: #450A0A;

  /* Gray scale */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* Blue scale */
  --blue-50:  #F0F4FF;
  --blue-100: #E0E8FF;
  --blue-200: #D9E1F5;
  --blue-300: #B8CAF0;
  --blue-400: #91AADF;
  --blue-500: #6B8DCE;
  --blue-600: #4A6CBB;
  --blue-700: #3251A3;
  --blue-800: #1E3A8A;
  --blue-900: #1E2F6E;
  --blue-950: #0F1845;

  /* Green (for success states) */
  --green-100: #DCFCE7;
  --green-800: #166634;

  /* ==========================================================================
     LAYER 2: SEMANTIC TOKENS
     ========================================================================== */

  /* Surface tokens */
  --surface-page:         var(--gray-100);     /* #F3F4F6 — outermost page background */
  --surface-default:      #ffffff;             /* Primary content, cards */
  --surface-alt:          var(--gray-50);      /* #F9FAFB — alternating sections */
  --surface-brand:        var(--red-600);      /* #DC2626 — CTAs, selected states */
  --surface-brand-strong: var(--red-700);      /* #B91C1C — pressed, hover */
  --surface-brand-soft:   var(--red-100);      /* #FFE4E4 — badge fills */
  --surface-brand-wash:   var(--red-50);       /* #FFF5F5 — lowest-intensity tint */
  --surface-sunken:       var(--gray-900);     /* #111827 — dark panels, toasts */
  --surface-hover:        var(--gray-200);     /* #E5E7EB — interactive row hover */
  --surface-hover-soft:   var(--gray-100);     /* #F3F4F6 — subtle hover fill */
  --surface-success:      var(--green-100);    /* #DCFCE7 */
  --surface-info:         var(--blue-100);     /* #E0E8FF */

  /* Text tokens */
  --text-heading:         var(--gray-900);     /* #111827 — page titles */
  --text-strong:          var(--gray-700);     /* #374151 — sub-headings */
  --text-body:            var(--gray-600);     /* #4B5563 — default body */
  --text-secondary:       var(--gray-500);     /* #6B7280 — captions, nav */
  --text-muted:           var(--gray-400);     /* #9CA3AF — placeholders, disabled */
  --text-inverse:         #ffffff;             /* On dark/brand surfaces */
  --text-brand:           var(--red-600);      /* #DC2626 — links, active nav */
  --text-brand-strong:    var(--red-700);      /* #B91C1C — pressed links, badge text */
  --text-success:         var(--green-800);    /* #166634 */
  --text-info:            var(--blue-800);     /* #1E3A8A */

  /* Border tokens */
  --border-default:       var(--gray-200);     /* #E5E7EB — separators, containers */
  --border-strong:        var(--gray-300);     /* #D1D5DB — strong borders */
  --border-brand:         var(--red-600);      /* #DC2626 — brand borders */
  --border-focus:         var(--red-600);      /* #DC2626 — focus rings */
  --border-brand-soft:    var(--red-200);      /* #FECACA — soft brand borders */

  /* Status tokens */
  --status-online:        #22C55E;

  /* Typography tokens */
  --font-display:         "Archivo", sans-serif;
  --font-body:            "Archivo Narrow", sans-serif;
  --font-code:            Menlo, Consolas, "SFMono-Regular", monospace;

  /* Spacing tokens — only these values exist */
  --sp-micro: 6px;
  --sp-xs:    10px;
  --sp-sm:    14px;
  --sp-base:  18px;
  --sp-lg:    22px;
  --sp-xl:    26px;
  --sp-2xl:   32px;
  --sp-3xl:   40px;
  --sp-4xl:   48px;
  --sp-section: 64px;

  /* Border radius tokens */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Elevation tokens */
  --elevation-flat:    none;
  --elevation-low:     0 1px 4px rgba(0, 0, 0, 0.08);
  --elevation-overlay: 0 4px 12px rgba(0, 0, 0, 0.10);

  /* Layout tokens */
  --sidebar-width:  220px;
  --navbar-height:  64px;

  /* Transition */
  --transition-fast: 120ms ease-in-out;
  --transition-base: 150ms ease-in-out;
}

/* ==========================================================================
   GLOBAL BASE — REMOVE MATERIAL DASHBOARD BODY OVERRIDES
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Archivo display family */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--sp-sm);
}

h1, .h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.2px;
}

h2, .h2 {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}

h3, .h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

h4, .h4 {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
}

h5, .h5 {
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 600;
}

h6, .h6 {
  font-size: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-strong);
}

p {
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.65;
}

a {
  color: var(--text-brand);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-brand-strong);
  text-decoration: underline;
}

/* Remove Material Dashboard's root wrapper quirks */
.wrapper {
  position: relative;
  top: 0;
  height: 100vh;
  display: flex;
}

/* ==========================================================================
   LAYER 3: LAYOUT — APP SHELL
   ========================================================================== */

/* ---- Sidebar ---- */

.edat-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--surface-default);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  z-index: 99;
  overflow-y: auto;
  overflow-x: hidden;
  /* No elevation — sidebar is a flat structural element */
  box-shadow: var(--elevation-flat);
  /* Smooth scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.edat-sidebar::-webkit-scrollbar {
  width: 4px;
}

.edat-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.edat-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
  border-radius: var(--radius-full);
}

.edat-sidebar__brand {
  padding: var(--sp-lg) var(--sp-base) var(--sp-base);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.edat-sidebar__logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--surface-brand);
  display: block;
  letter-spacing: -0.3px;
  text-decoration: none;
  line-height: 1.1;
}

.edat-sidebar__logo:hover {
  color: var(--surface-brand-strong);
  text-decoration: none;
}

.edat-sidebar__subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  display: block;
  margin-top: var(--sp-micro);
}

.edat-sidebar__section-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: var(--sp-base) var(--sp-base) var(--sp-micro);
  display: block;
}

/* Nav rail — left border acts as visual rail */
.edat-sidebar__nav {
  padding: var(--sp-sm) 0;
  border-left: 1px solid var(--border-default);
  margin-left: 0;
  list-style: none;
  flex: 1;
}

.edat-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-micro) var(--sp-base);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.0;
  text-decoration: none;
  transition: color var(--transition-fast), box-shadow var(--transition-fast);
  margin-left: -1px; /* overlap the rail */
  border-left: 3px solid transparent;
  min-height: var(--sp-3xl);
}

.edat-sidebar__link i,
.edat-sidebar__link .material-icons {
  font-size: 18px;
  color: var(--text-muted);
  transition: color var(--transition-fast);
  flex-shrink: 0;
  width: 18px;
}

.edat-sidebar__link:hover {
  color: var(--text-strong);
  text-decoration: none;
  box-shadow: inset 2px 0 0 var(--border-strong);
}

.edat-sidebar__link:hover i,
.edat-sidebar__link:hover .material-icons {
  color: var(--text-strong);
}

.edat-sidebar__link--active,
.edat-sidebar__link.active {
  color: var(--text-brand);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--surface-brand);
  /* No background fill — left-bar indicator only */
}

.edat-sidebar__link--active i,
.edat-sidebar__link--active .material-icons,
.edat-sidebar__link.active i,
.edat-sidebar__link.active .material-icons {
  color: var(--text-brand);
}

.edat-sidebar__footer {
  padding: var(--sp-base);
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- Main panel ---- */

/* Kill any sidebar remnants — Material Dashboard JS may still inject .sidebar */
.sidebar,
.edat-sidebar {
  display: none !important;
  width: 0 !important;
  visibility: hidden !important;
}

/* Ensure main panel never gets the MD default float:right + narrow width */
.main-panel {
  float: none !important;
  margin-left: 0 !important;
  width: 100% !important;
}

.edat-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  flex: 1;
  margin-left: 0 !important;
}

/* ==========================================================================
   MATERIAL DASHBOARD OVERRIDES — SIDEBAR (legacy .sidebar class)
   ========================================================================== */

/* Override the existing Material Dashboard sidebar — redirect to EDAT layout */
.sidebar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  background: var(--surface-default) !important;
  border-right: 1px solid var(--border-default) !important;
  box-shadow: none !important;
  z-index: 99 !important;
  overflow-y: auto !important;
}

/* Remove Material Dashboard gradient backgrounds from sidebar */
.sidebar::after,
.sidebar[data-color]::after {
  background: none !important;
  background-color: var(--surface-default) !important;
}

.sidebar[data-color="darkblue"],
.sidebar[data-color="purple"],
.sidebar[data-color="azure"],
.sidebar[data-color="green"],
.sidebar[data-color="orange"],
.sidebar[data-color="danger"],
.sidebar[data-color="rose"],
.sidebar[data-color="white"] {
  background-color: var(--surface-default) !important;
  background-image: none !important;
}

/* Material Dashboard sidebar links — reset to EDAT style */
.sidebar .nav li > a,
.sidebar .nav li > a:hover,
.sidebar .nav li > a:focus {
  color: var(--text-secondary) !important;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  padding: var(--sp-micro) var(--sp-base);
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: color var(--transition-fast);
}

.sidebar .nav li.active > a,
.sidebar .nav li.active > a:hover,
.sidebar .nav li.active > a:focus {
  color: var(--text-brand) !important;
  font-weight: 600 !important;
  background: transparent !important;
  box-shadow: inset 3px 0 0 var(--surface-brand) !important;
}

.sidebar .nav li[data-color="darkblue"].active > a {
  background-color: transparent !important;
  box-shadow: inset 3px 0 0 var(--surface-brand) !important;
}

/* Remove Material Dashboard sidebar logo dark gradient */
.sidebar .logo {
  border-bottom: 1px solid var(--border-default) !important;
  background: var(--surface-default) !important;
  padding: var(--sp-lg) var(--sp-base) var(--sp-base) !important;
}

.sidebar .logo a.simple-text {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--surface-brand) !important;
  text-transform: none !important;
  letter-spacing: -0.3px !important;
}

/* ==========================================================================
   NAVBAR OVERRIDES — REMOVE MATERIAL DASHBOARD FIXED + COLORED NAVBAR
   ========================================================================== */

/* Material Dashboard uses position:fixed — we remove that */
.navbar,
.navbar-absolute,
.navbar.navbar-transparent {
  position: sticky !important;
  top: 0 !important;
  background-color: var(--surface-default) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  height: var(--navbar-height) !important;
  min-height: var(--navbar-height) !important;
  padding: 0 var(--sp-xl) !important;
  z-index: 98 !important;
  /* Remove any floating animation effects */
  transition: none !important;
}

/* Ensure navbar content is vertically centered */
.navbar > .container,
.navbar > .container-fluid,
.navbar .navbar-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  letter-spacing: -0.3px !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}

.navbar-brand:hover {
  color: var(--text-brand) !important;
}

/* Navbar links */
.navbar .nav-link,
.navbar .navbar-nav .nav-link {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  padding: var(--sp-micro) var(--sp-sm) !important;
  line-height: 1 !important;
  transition: color var(--transition-fast) !important;
  text-decoration: none !important;
}

.navbar .nav-link:hover,
.navbar .navbar-nav .nav-link:hover {
  color: var(--text-strong) !important;
  text-decoration: none !important;
}

.navbar .nav-link.active,
.navbar .navbar-nav .nav-link.active {
  color: var(--text-brand) !important;
  font-weight: 600 !important;
}

/* Remove Material Dashboard's colored navbar variants */
.navbar[class*="bg-"],
.navbar.navbar-danger,
.navbar.navbar-primary,
.navbar.navbar-success,
.navbar.navbar-info,
.navbar.navbar-warning,
.navbar.navbar-rose {
  background-color: var(--surface-default) !important;
  background-image: none !important;
}

/* Navbar text colors after override */
.navbar[class*="bg-"] .nav-link,
.navbar[class*="bg-"] .navbar-brand {
  color: var(--text-secondary) !important;
}

/* Hamburger / toggler */
.navbar-toggler {
  border: 1px solid var(--border-default);
  padding: var(--sp-micro) var(--sp-xs);
  border-radius: var(--radius-sm);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   CONTENT AREA OVERRIDES
   ========================================================================== */

/* Material Dashboard adds a ::before overlay — remove it */
.main-panel::before,
.main-panel > .content::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

.main-panel {
  width: 100% !important;
  float: none !important;
  background: var(--surface-page) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  box-shadow: none !important;
}

/* Remove the fixed-navbar top offset Material Dashboard injects */
.main-panel > .content {
  padding: var(--sp-2xl) var(--sp-xl) !important;
  margin-top: 0 !important;
  background: var(--surface-page) !important;
  min-height: calc(100vh - var(--navbar-height)) !important;
  flex: 1 !important;
}

/* Generic .content override for templates that use it directly */
.content {
  padding: var(--sp-2xl) var(--sp-xl);
  background: var(--surface-page);
}

/* In-page anchor scroll offset (sticky navbar compensation) */
[id] {
  scroll-margin-top: calc(var(--navbar-height) + var(--sp-base));
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background-color: var(--surface-default) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--elevation-low) !important;
  /* Remove Material Dashboard multi-layer shadows and gradient backgrounds */
  background-image: none !important;
  margin-bottom: var(--sp-xl);
}

/* Remove Material Dashboard's colored gradient card backgrounds */
.card[data-color],
.card.bg-primary,
.card.bg-danger,
.card.bg-success,
.card.bg-warning,
.card.bg-info,
.card.bg-rose {
  background-image: none !important;
}

.card-header {
  background-color: var(--surface-default) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: var(--sp-base) var(--sp-xl) !important;
  /* Remove Material Dashboard shadows on card headers */
  box-shadow: none !important;
}

.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0;
  line-height: 1.3;
}

.card-header .card-category {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.card-body {
  padding: var(--sp-xl) !important;
}

.card-footer {
  background-color: var(--surface-default) !important;
  border-top: 1px solid var(--border-default) !important;
  padding: var(--sp-sm) var(--sp-xl) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* ---- Colored card header variants — EDAT flat style with left accent border ---- */
/* Material Dashboard uses background gradients — we replace with flat white + left border */

.card-header-danger,
.card-header-primary,
.card-header-success,
.card-header-info,
.card-header-warning,
.card-header-rose {
  background: var(--surface-default) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-left: 4px solid var(--surface-brand) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: var(--sp-base) var(--sp-xl) !important;
  margin: 0 !important; /* Remove Material Dashboard negative margin */
}

.card-header-success {
  border-left-color: #16A34A !important;
}

.card-header-info {
  border-left-color: var(--text-info) !important;
}

.card-header-warning {
  border-left-color: #D97706 !important;
}

/* Text inside colored headers must use heading color (not inverse) */
.card-header-danger h4,
.card-header-danger h5,
.card-header-danger .card-title,
.card-header-primary h4,
.card-header-primary h5,
.card-header-primary .card-title,
.card-header-success h4,
.card-header-success h5,
.card-header-success .card-title,
.card-header-info h4,
.card-header-info h5,
.card-header-info .card-title,
.card-header-warning h4,
.card-header-warning h5,
.card-header-warning .card-title {
  color: var(--text-heading) !important;
}

.card-header-danger .card-category,
.card-header-primary .card-category,
.card-header-success .card-category,
.card-header-info .card-category,
.card-header-warning .card-category {
  color: var(--text-secondary) !important;
}

/* Card stats (Material Dashboard widget cards) */
.card-stats .card-header {
  border-left: none !important;
  border-bottom: none !important;
  padding: var(--sp-sm) var(--sp-base) !important;
}

.card-stats .card-header .card-icon {
  background: var(--surface-brand-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--sp-sm) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.card-stats .card-header .card-icon i {
  color: var(--text-brand) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--text-body) !important;
  margin-bottom: 0;
  border-collapse: collapse;
  width: 100%;
}

.table thead th {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-top: none !important;
  padding: var(--sp-xs) var(--sp-sm) !important;
  background-color: transparent !important;
  background-image: none !important;
  white-space: nowrap;
}

/* Remove ALL Material Dashboard table header color classes */
.table thead.thead-danger th,
.table thead.thead-primary th,
.table thead.thead-success th,
.table thead.thead-info th,
.table thead.thead-warning th,
.table thead.thead-rose th,
.table thead.thead-dark th,
.table thead.text-warning th,
.table thead.text-primary th,
.table thead.text-danger th,
.table thead.text-success th,
.table thead.text-dark th {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

.table tbody td {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text-body) !important;
  border-top: 1px solid var(--border-default) !important;
  padding: var(--sp-xs) var(--sp-sm) !important;
  vertical-align: middle !important;
  line-height: 1.4;
}

/* Hover rows */
.table-hover tbody tr:hover {
  background-color: var(--surface-hover-soft) !important;
  color: var(--text-body) !important;
}

.table-hover tbody tr:hover td {
  color: var(--text-body) !important;
}

/* Striped rows */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--surface-alt) !important;
}

/* Remove Material Dashboard table with colored backgrounds */
.table.table-danger,
.table.table-primary,
.table.table-success,
.table.table-info,
.table.table-warning {
  background-color: transparent !important;
}

/* Responsive table wrapper */
.table-responsive {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: auto;
}

.table-responsive .table {
  margin-bottom: 0;
}

/* ==========================================================================
   BUTTONS — REMOVE MATERIAL RIPPLE + GRADIENT SHADOWS
   ========================================================================== */

/* Base reset — remove Material Dashboard's ripple effect and shadow system */
.btn {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-md) !important;
  height: 36px !important;
  padding: 0 var(--sp-base) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-micro) !important;
  border-width: 1px !important;
  border-style: solid !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast) !important;
  /* Remove Material Dashboard shadow effects */
  box-shadow: none !important;
  text-shadow: none !important;
  /* Remove Material ripple */
  overflow: hidden !important;
  position: relative !important;
}

.btn-sic {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-md) !important;
  height: 36px !important;
  padding: 0 var(--sp-base) !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-micro) !important;
  border-width: 1px !important;
  border-style: solid !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast) !important;
  /* Remove Material Dashboard shadow effects */
  box-shadow: none !important;
  text-shadow: none !important;
  /* Remove Material ripple */
  overflow: hidden !important;
  position: relative !important;
}

/* Remove Material Dashboard ripple element */
.btn .ripple-container,
.btn::after {
  display: none !important;
  content: none !important;
}

/* Focus state — WCAG compliant */
.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--border-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---- btn-primary / btn-dark → EDAT button-primary ---- */

.btn-primary,
.btn-dark {
  background-color: var(--surface-brand) !important;
  border-color: var(--surface-brand) !important;
  color: var(--text-inverse) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-dark:hover,
.btn-dark:active,
.btn-dark.active {
  background-color: var(--surface-brand-strong) !important;
  border-color: var(--surface-brand-strong) !important;
  color: var(--text-inverse) !important;
  box-shadow: none !important;
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-dark:disabled,
.btn-dark.disabled {
  background-color: var(--text-muted) !important;
  border-color: var(--text-muted) !important;
  color: var(--text-inverse) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* ---- btn-outline-primary / btn-outline-dark → EDAT button-outline ---- */

.btn-outline-primary,
.btn-outline-dark {
  background-color: transparent !important;
  border-color: var(--border-brand) !important;
  color: var(--text-brand) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-dark:hover,
.btn-outline-dark:active,
.btn-outline-dark.active {
  background-color: var(--surface-brand-wash) !important;
  border-color: var(--border-brand) !important;
  color: var(--text-brand) !important;
  box-shadow: none !important;
}

/* ---- btn-secondary ---- */

.btn-secondary {
  background-color: var(--surface-default) !important;
  border-color: var(--border-default) !important;
  color: var(--text-strong) !important;
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: var(--surface-hover-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-heading) !important;
  box-shadow: none !important;
}

/* ---- btn-success ---- */

.btn-success {
  background-color: #16A34A !important;
  border-color: #16A34A !important;
  color: var(--text-inverse) !important;
}

.btn-success:hover,
.btn-success:active {
  background-color: #15803D !important;
  border-color: #15803D !important;
  box-shadow: none !important;
}

/* ---- btn-danger ---- */

.btn-danger {
  background-color: var(--surface-brand) !important;
  border-color: var(--surface-brand) !important;
  color: var(--text-inverse) !important;
}

.btn-danger:hover,
.btn-danger:active {
  background-color: var(--surface-brand-strong) !important;
  border-color: var(--surface-brand-strong) !important;
  box-shadow: none !important;
}

/* ---- btn-warning ---- */

.btn-warning {
  background-color: #D97706 !important;
  border-color: #D97706 !important;
  color: var(--text-inverse) !important;
}

.btn-warning:hover,
.btn-warning:active {
  background-color: #B45309 !important;
  border-color: #B45309 !important;
  box-shadow: none !important;
}

/* ---- btn-info ---- */

.btn-info {
  background-color: var(--text-info) !important;
  border-color: var(--text-info) !important;
  color: var(--text-inverse) !important;
}

.btn-info:hover,
.btn-info:active {
  background-color: #1E2F6E !important;
  border-color: #1E2F6E !important;
  box-shadow: none !important;
}

/* ---- btn-link ---- */

.btn-link {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--text-brand) !important;
  height: auto !important;
  padding: var(--sp-micro) var(--sp-micro) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-link:hover {
  color: var(--text-brand-strong) !important;
  text-decoration: underline !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ---- btn-sm ---- */

.btn-sm {
  height: 32px !important;
  font-size: 12px !important;
  padding: 0 var(--sp-sm) !important;
  border-radius: var(--radius-sm) !important;
}

/* ---- btn-lg ---- */

.btn-lg {
  height: 52px !important;
  font-size: 18px !important;
  padding: 0 var(--sp-xl) !important;
}

/* ---- btn-block ---- */

.btn-block {
  width: 100% !important;
}

/* Remove Material Dashboard "just-icon" button styles */
.btn.btn-just-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-md) !important;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

/* Override Material Dashboard's underline-only inputs to full border box */
.form-control {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--text-heading) !important;
  background-color: var(--surface-default) !important;
  background-image: none !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  height: 44px !important;
  padding: 0 var(--sp-base) !important;
  line-height: 1 !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  box-shadow: none !important;
  /* Remove Material bottom-border animation */
  background-size: unset !important;
}

.form-control:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
  background-color: var(--surface-default) !important;
  outline: none !important;
  /* Material Dashboard uses gradient animation for focus — remove it */
  background-image: none !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--surface-alt) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  border-color: var(--border-default) !important;
  pointer-events: none !important;
}

/* Textarea */
textarea.form-control {
  height: auto !important;
  min-height: 100px !important;
  padding: var(--sp-sm) var(--sp-base) !important;
  line-height: 1.65 !important;
  resize: vertical !important;
}

/* Select — override webapp/style.css's -34px margin-top hack */
select.form-control {
  cursor: pointer !important;
  appearance: auto !important;
  padding-right: var(--sp-xl) !important;
  margin-top: 0 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* custom-radio: card selector redesign (EDAT) */
section.custom-radio {
  height: auto !important;
  padding: var(--sp-xs) 0 var(--sp-sm) !important;
}

section.custom-radio > div {
  padding: var(--sp-xs) !important;
}

.form-group section.custom-radio label,
section.custom-radio label {
  border: 1.5px solid var(--border-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease !important;
  padding: var(--sp-base) var(--sp-sm) !important;
  padding-left: var(--sp-sm) !important;
  min-height: 80px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  pointer-events: auto !important;
}

.form-group section.custom-radio div.box:hover label,
section.custom-radio div.box:hover label {
  border-color: var(--surface-brand) !important;
  color: var(--surface-brand) !important;
  box-shadow: 0 2px 8px rgba(220,38,38,0.12) !important;
}

/* checked + hover: mantém texto branco sobre fundo vermelho */
section.custom-radio div.box:hover input[type="radio"]:checked ~ label,
section.custom-radio div.box:hover input[type="checkbox"]:checked ~ label {
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220,38,38,0.30) !important;
}

section.custom-radio input[type="radio"]:checked + label,
section.custom-radio input[type="checkbox"]:checked + label {
  background: var(--surface-brand) !important;
  border-color: var(--surface-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220,38,38,0.30) !important;
}

section.custom-radio input[type="radio"]:checked + label::after,
section.custom-radio input[type="checkbox"]:checked + label::after {
  font-family: 'Material Icons' !important;
  content: '\e86c' !important;
  font-size: 16px !important;
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  color: rgba(255,255,255,0.9) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

section.custom-radio input[type="radio"]:disabled ~ label,
section.custom-radio input[type="checkbox"]:disabled ~ label {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Select focus ring — brand color instead of browser blue */
select.form-control:focus,
.edat-filter-select:focus,
.edat-filter-bar__search select:focus {
  outline: none !important;
  border-color: var(--surface-brand) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}

/* Select option checked/hover — brand color (#dc2626; var() não funciona em <option>) */
select option:checked {
  background: #dc2626 !important;
  color: #fff !important;
}
select option:hover {
  background: #dc2626 linear-gradient(0deg, #dc2626 0%, #dc2626 100%) !important;
  color: #fff !important;
}

/* Form group label */
.form-group label,
.form-group .control-label,
label.control-label {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
  line-height: 1.4 !important;
  margin-bottom: var(--sp-micro) !important;
  display: block !important;
  /* Remove Material's floating label positioning */
  position: static !important;
  top: auto !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
}

/* Remove Material Dashboard floating label animations */
.form-group.label-floating label,
.form-group.label-placeholder label {
  font-size: 14px !important;
  top: auto !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
}

/* Kill BMD (Bootstrap Material Design) floating label positioning.
   Must cover both the class alone (.bmd-label-floating) AND the parent-child
   combo (.bmd-form-group .bmd-label-floating) which BMD CSS uses with !important
   at higher specificity — we match it here so our static rule wins. */
.bmd-label-static,
.bmd-label-floating,
.bmd-label-placeholder,
.bmd-label-static.mini-label,
label.bmd-label-static,
.bmd-form-group .bmd-label-static,
.bmd-form-group .bmd-label-floating,
.bmd-form-group .bmd-label-placeholder,
.bmd-form-group.is-focused .bmd-label-floating,
.bmd-form-group.is-filled .bmd-label-floating {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  transition: none !important;
  display: block !important;
  margin-bottom: var(--sp-micro) !important;
  padding: 0 !important;
  width: auto !important;
}

/* Guard edat-form-group labels against BMD label mutation.
   Specificity (0,2,1) beats BMD's (0,2,0) — element selector wins the tie. */
.edat-form-group label,
.edat-form-group > label,
.modal-simples .modal-body .edat-form-group label,
.modal-simples .modal-body label,
.modal-confirmacao .modal-body label {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
  transition: none !important;
  width: auto !important;
  pointer-events: auto !important;
}

/* Kill BMD FAB / round button — normalize to standard EDAT button */
.btn-fab,
.btn-round {
  border-radius: var(--radius-md) !important;
  width: auto !important;
  min-width: unset !important;
  height: 44px !important;
  padding: 0 var(--sp-sm) !important;
  box-shadow: none !important;
}

/* Form text / help text */
.form-text,
.help-block:not(.bd-callout .help-block) {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: var(--sp-micro) !important;
}

/* Validation feedback */
.invalid-feedback,
.valid-feedback {
  font-family: var(--font-body);
  font-size: 12px;
  margin-top: var(--sp-micro);
  font-weight: 500;
}

.invalid-feedback {
  color: var(--text-brand-strong);
}

.valid-feedback {
  color: var(--text-success);
}

.form-control.is-invalid {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

.form-control.is-valid {
  border-color: #16A34A !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.10) !important;
}

/* Input group */
.input-group .input-group-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  background-color: var(--surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--sp-base);
  height: 44px;
  display: flex;
  align-items: center;
}

.input-group .form-control:not(:first-child) {
  border-left: none !important;
}

.input-group .form-control:not(:last-child) {
  border-right: none !important;
}

/* Checkbox and radio — reset Material Design styling */
.form-check-input {
  accent-color: var(--surface-brand);
}

/* jQuery UI autocomplete dropdown above Bootstrap modals */
ul.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  z-index: 9999 !important;
}

/* ==========================================================================
   MODALS
   ========================================================================== */

/* Dialog sizing */
.modal-dialog {
  margin: var(--sp-xl) auto !important;
}
.modal-dialog.modal-lg { max-width: 680px !important; }
.modal-dialog.modal-md { max-width: 480px !important; }
.modal-dialog.modal-sm { max-width: 380px !important; }

/* Container */
.modal-content {
  background-color: var(--surface-default) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
}

/* Header */
.modal-header {
  background-color: var(--surface-default) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border-default) !important;
  padding: var(--sp-base) var(--sp-xl) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-sm) !important;
  color: var(--text-heading) !important;
}

/* All MD colored modal header variants → flat white */
.modal-header.modal-header-danger,
.modal-header.modal-header-primary,
.modal-header.modal-header-success,
.modal-header.modal-header-info,
.modal-header.modal-header-warning,
.modal-header.modal-header-rose {
  background: var(--surface-default) !important;
  background-image: none !important;
  color: var(--text-heading) !important;
  box-shadow: none !important;
}

/* Title */
.modal-title {
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  line-height: 1.3 !important;
  flex: 1 !important;
  margin: 0 !important;
}

/* Close button — 32×32 icon button with hover state */
.modal-header .close,
.close {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  background: none !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.modal-header .close:hover,
.close:hover {
  background: var(--surface-hover-soft) !important;
  color: var(--text-heading) !important;
  opacity: 1 !important;
}
.modal-header .close .material-icons,
.close .material-icons {
  font-size: 20px !important;
  display: block !important;
}

/* Body */
.modal-body {
  padding: var(--sp-xl) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--text-body) !important;
  line-height: 1.65 !important;
}

/* Strip unnecessary card wrapper that form templates add inside modal-body */
.modal-body > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.modal-body > .row > [class*="col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.modal-body > .row > [class*="col"] > .card {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.modal-body > .row > [class*="col"] > .card > .card-body {
  padding: 0 !important;
}

/* Remove <br> spacers inside modal forms */
.modal-body br { display: none !important; }

/* Form action buttons inside modal-body (float-right pattern) */
.modal-body .float-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--sp-xs) !important;
  padding-top: var(--sp-base) !important;
  margin-top: var(--sp-base) !important;
  border-top: 1px solid var(--border-default) !important;
  width: 100% !important;
}

/* Cancel buttons inside modal forms → secondary style (override both btn-dark variants) */
.modal-body .btn[data-dismiss="modal"] {
  background-color: transparent !important;
  border-color: var(--border-default) !important;
  color: var(--text-body) !important;
}
.modal-body .btn[data-dismiss="modal"]:hover {
  background-color: var(--surface-hover-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-heading) !important;
}

/* Footer */
.modal-footer {
  background-color: var(--surface-alt) !important;
  border-top: 1px solid var(--border-default) !important;
  padding: var(--sp-sm) var(--sp-xl) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--sp-xs) !important;
}

/* Backdrop */
.modal-backdrop {
  background-color: var(--surface-sunken) !important;
}
.modal-backdrop.show {
  opacity: 0.45 !important;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  padding: var(--sp-sm) var(--sp-base) !important;
  border: 1px solid transparent !important;
  /* Remove Material Dashboard shadow alerts */
  box-shadow: none !important;
  background-image: none !important;
  width: 100% !important;
}

.alert-danger {
  background-color: var(--surface-brand-soft) !important;
  color: var(--text-brand-strong) !important;
  border-color: var(--border-brand-soft) !important;
}

.alert-warning {
  background-color: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}

.alert-success {
  background-color: var(--surface-success) !important;
  color: var(--text-success) !important;
  border-color: #BBF7D0 !important;
}

.alert-info {
  background-color: var(--surface-info) !important;
  color: var(--text-info) !important;
  border-color: var(--blue-300) !important;
}

/* Alert with icon */
.alert .alert-icon,
.alert i:first-child {
  font-size: 18px;
  vertical-align: middle;
  margin-right: var(--sp-micro);
}

/* ---- Validation toasts (bootstrap-notify) ----
   The plugin's default template sizes itself with "col-xs-11 col-sm-3",
   Bootstrap 3 grid classes that no longer exist in Bootstrap 4/5 (the "xs"
   infix was dropped). Without a matching class the toast gets no reliable
   width from Bootstrap and can render clipped/misaligned, especially on
   phones. Give it an explicit width instead, independent of those classes. */
[data-notify="container"] {
  box-sizing: border-box !important;
  width: 320px !important;
  max-width: calc(100vw - (var(--sp-base) * 2)) !important;
  white-space: normal !important;
}

@media (max-width: 767.98px) {
  [data-notify="container"] {
    left: var(--sp-sm) !important;
    right: var(--sp-sm) !important;
    width: auto !important;
    max-width: calc(100vw - (var(--sp-sm) * 2)) !important;
  }
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-full) !important;
  padding: var(--sp-micro) var(--sp-xs) !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Brand badge */
.badge-danger,
.badge-primary {
  background-color: var(--surface-brand-soft) !important;
  color: var(--text-brand-strong) !important;
}

/* Success badge */
.badge-success {
  background-color: var(--surface-success) !important;
  color: var(--text-success) !important;
}

/* Info badge */
.badge-info {
  background-color: var(--surface-info) !important;
  color: var(--text-info) !important;
}

/* Warning badge */
.badge-warning {
  background-color: #FEF3C7 !important;
  color: #92400E !important;
}

/* Neutral / secondary badge */
.badge-secondary {
  background-color: var(--surface-hover-soft) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
}

.badge-dark {
  background-color: var(--surface-sunken) !important;
  color: var(--text-inverse) !important;
}

.badge-light {
  background-color: var(--surface-alt) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-default) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-muted) !important;
  background-color: var(--surface-default) !important;
  background-image: none !important;
  border-top: 1px solid var(--border-default) !important;
  padding: var(--sp-base) var(--sp-xl) !important;
  /* Remove Material shadow */
  box-shadow: none !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

.footer .copyright {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

.footer a {
  color: var(--text-brand);
  text-decoration: none;
}

.footer a:hover {
  color: var(--text-brand-strong);
  text-decoration: underline;
}

/* ==========================================================================
   NAVIGATION / BREADCRUMBS / PAGINATION
   ========================================================================== */

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-body);
  font-size: 14px;
  background-color: transparent;
  padding: 0;
  margin-bottom: var(--sp-base);
}

.breadcrumb-item {
  color: var(--text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted);
  content: "/";
}

.breadcrumb-item.active {
  color: var(--text-body);
}

.breadcrumb-item a {
  color: var(--text-brand);
}

/* Pagination */
.pagination .page-link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  background-color: var(--surface-default);
  border: 1px solid var(--border-default);
  padding: var(--sp-xs) var(--sp-sm);
  transition: all var(--transition-fast);
}

.pagination .page-link:hover {
  background-color: var(--surface-hover-soft);
  border-color: var(--border-strong);
  color: var(--text-strong);
  box-shadow: none;
}

.pagination .page-item.active .page-link {
  background-color: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--text-inverse);
  box-shadow: none;
}

.pagination .page-item.disabled .page-link {
  color: var(--text-muted);
  background-color: var(--surface-default);
  border-color: var(--border-default);
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown-menu {
  font-family: var(--font-body);
  font-size: 14px;
  background-color: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-overlay);
  padding: var(--sp-micro) 0;
  min-width: 180px;
}

.dropdown-item {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-body);
  padding: var(--sp-xs) var(--sp-base);
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-hover-soft);
  color: var(--text-strong);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--surface-brand-soft);
  color: var(--text-brand-strong);
}

.dropdown-divider {
  border-top: 1px solid var(--border-default);
  margin: var(--sp-micro) 0;
}

.dropdown-header {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: var(--sp-xs) var(--sp-base);
}

/* ==========================================================================
   TABS
   ========================================================================== */

.nav-tabs {
  border-bottom: 1px solid var(--border-default);
}

.nav-tabs .nav-link {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: var(--sp-xs) var(--sp-base) !important;
  border-radius: 0 !important;
  transition: color var(--transition-fast), border-color var(--transition-fast) !important;
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--text-strong) !important;
  border-bottom-color: var(--border-strong) !important;
  background: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--text-brand) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--border-brand) !important;
  background: transparent !important;
}

.nav-pills .nav-link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: var(--sp-micro) var(--sp-sm);
  transition: all var(--transition-fast);
}

.nav-pills .nav-link:hover {
  background-color: var(--surface-hover-soft);
  color: var(--text-strong);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--surface-brand);
  color: var(--text-inverse);
}

/* ==========================================================================
   EDAT UTILITY CLASSES
   ========================================================================== */

/* Page header — display typography */
.edat-page-header {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--text-heading);
  padding: var(--sp-2xl) 0;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--sp-xl);
  background: transparent;
}

/* Section label — micro typography, uppercase, eyebrow */
.edat-section-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--sp-xs);
  line-height: 1.4;
}

/* Breadcrumb navigation */
.edat-breadcrumb {
  list-style: none;
  padding: 0 0 0 calc(var(--sp-base) + 4px); /* alinha com o texto do título */
  margin: 0 0 var(--sp-xs) 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-secondary);
  line-height: 1.4;
}
.edat-breadcrumb::-webkit-scrollbar { display: none; }
.edat-breadcrumb li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.edat-breadcrumb li + li::before {
  content: "›";
  margin: 0 6px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
}
.edat-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.edat-breadcrumb a:hover {
  color: var(--text-brand);
  text-decoration: none;
}
.edat-breadcrumb li:last-child,
.edat-breadcrumb [aria-current="page"] {
  color: var(--text-body);
  font-weight: 600;
  pointer-events: none;
}

/* Environment banner — fixed top, crimson, full-width */
.edat-top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
}

.edat-env-banner {
  background: var(--surface-brand);
  color: var(--text-inverse);
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 5px var(--sp-base);
}

/* ─── Dual-bar header — mirrors portal.dados.unicamp.br ──────────────── */

/* Bar 1: brand / utility */
.edat-brand-bar {
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.edat-brand-bar__inner {
  display: flex;
  align-items: center;
  padding: 0 24px;
  min-height: 76px;       /* taller bar — gives logos room to breathe */
  position: relative;
}
.edat-brand-bar__logos {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.edat-brand-logo-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 10px;   /* top/bottom breathing room around logo */
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.12s;
}
.edat-brand-logo-link:hover { opacity: 1; text-decoration: none; }
.edat-brand-logo { height: 3.5rem; width: auto; display: block; }

/* Search + user — pushed to the right, same baseline */
.edat-brand-bar__right {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: center;   /* force vertical center within parent flex */
}
.edat-brand-bar__right form {
  display: flex;        /* stop form from being a block with invisible extra height */
  align-items: center;
  margin: 0;
  padding: 0;
  height: 38px;
}

/* Bar 2: main nav */
.edat-nav-bar {
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-default);
}
.edat-nav-bar__inner {
  display: flex;
  align-items: stretch;
  padding: 0 24px;
  min-height: 44px;
}

.edat-topnav { display: flex; align-items: stretch; gap: 0; }
.edat-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  white-space: nowrap;
}
.edat-nav-link:hover {
  background: var(--surface-hover-soft);
  color: var(--text-heading);
  text-decoration: none;
  border-bottom-color: var(--border-default);
}
.edat-nav-link--active {
  color: var(--text-brand);
  font-weight: 600;
  border-bottom-color: var(--text-brand);
}
.edat-nav-link .material-icons { font-size: 16px; }

/* Search — gray input + red button (same as portal) */
.edat-navbar-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 38px;
}
.edat-navbar-search input {
  border: none;
  background: var(--surface-page);
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-heading);
  width: 200px;
  outline: none;
  height: 100%;
}
.edat-navbar-search input::placeholder { color: var(--text-muted); }
.edat-navbar-search button {
  background: var(--surface-brand);
  border: none;
  padding: 0 12px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
  transition: background 0.12s;
}
.edat-navbar-search button:hover { background: var(--surface-brand-strong); }
.edat-navbar-search button .material-icons { font-size: 18px; }

.edat-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 10px;
  height: 38px;         /* same height as .edat-navbar-search */
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-heading);
  transition: background 0.12s;
}
.edat-user-btn:hover { background: var(--surface-hover-soft); }
.edat-user-btn::after { display: none; }
.edat-user-avatar {
  width: 28px;
  height: 28px;
  background: var(--surface-brand-soft);
  color: var(--text-brand-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.edat-dropdown {
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elevation-overlay) !important;
  padding: 0 !important;
  overflow: hidden;
  min-width: 200px;
}
.edat-dropdown__header {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-size: 14px;
}
.edat-dropdown .dropdown-item {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-body);
  padding: 10px 16px;
}
.edat-dropdown .dropdown-item:hover {
  background: var(--surface-hover-soft);
  color: var(--text-heading);
}
.edat-dropdown .dropdown-divider { margin: 0; border-color: var(--border-default); }

/* ─── Site Footer (.site-footer) — DESIGN.md component, SIC content ──── */
.site-footer {
  background-color: var(--surface-alt) !important; /* #F9FAFB */
  border-top: 1px solid var(--border-default) !important;
  padding: var(--sp-xl) 0; /* 26px top/bottom */
  margin-top: auto;
  flex-shrink: 0;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-xl); /* 26px */
  flex-wrap: wrap;
  padding: 0 24px;
}

/* Left — logo cluster: gap spacing.base (18px), forced first via order */
.site-footer__logos {
  display: flex;
  align-items: center;
  gap: var(--sp-base);
  order: -1;
}

.site-footer__logo-link {
  display: inline-flex;
  opacity: 0.72;
  transition: opacity var(--transition-fast);
  text-decoration: none;
  border: none;
}

.site-footer__logo-link:hover,
.site-footer__logo-link:focus {
  opacity: 1;
}

.site-footer__logo-img {
  height: var(--sp-4xl); /* 48px — logo-size-footer */
  width: auto;
  display: block;
}

/* Right — brand block: title + secondary label on a baseline, attribution below */
.site-footer__brand {
  text-align: right;
}

.site-footer__title-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--sp-xs);
}

.site-footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-strong);
  letter-spacing: 0.06em;
}

.site-footer__title-secondary {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
}

.site-footer__attribution {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin: var(--sp-micro) 0 0;
}

.site-footer__attribution-sep {
  color: var(--border-strong);
  margin: 0 var(--sp-micro);
}

.site-footer__attribution a {
  color: var(--text-muted);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.site-footer__attribution a:hover,
.site-footer__attribution a:focus {
  color: var(--text-strong);
}

.site-footer__contact-icon {
  font-size: 14px;
  vertical-align: -2px;
  margin-right: 2px;
}

@media (max-width: 640px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .site-footer__brand,
  .site-footer__title-row {
    text-align: center;
    justify-content: center;
  }
}

/* Chip / filter-chip */
.edat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-micro);
  background-color: var(--surface-hover-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  padding: var(--sp-micro) var(--sp-sm);
  cursor: default;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.edat-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
  text-decoration: none;
}

.edat-chip--active {
  background-color: var(--surface-brand-wash);
  border-color: var(--border-brand);
  color: var(--text-brand);
  font-weight: 600;
}

/* Status indicator */
.edat-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-micro);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

.edat-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--status-online);
  flex-shrink: 0;
}

.edat-status--online::before  { background-color: var(--status-online); }
.edat-status--offline::before { background-color: var(--text-muted); }
.edat-status--busy::before    { background-color: var(--surface-brand); }

/* Status pill — Ativo / Inativo (table badges) */
.edat-status--active {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.edat-status--inactive {
  background: var(--surface-alt);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.edat-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.edat-status--active .edat-status__dot   { background: #15803d; }
.edat-status--inactive .edat-status__dot { background: var(--text-muted); }

/* Count badge */
.edat-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--surface-alt);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.edat-count-badge--warn { background: rgba(234, 179, 8, 0.12); color: #a16207; }

/* Icon action buttons — used in tables */
.edat-icon-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  line-height: 1 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
.edat-icon-btn:hover        { background: var(--surface-hover-soft); color: var(--text-heading); text-decoration: none; }
.edat-icon-btn--edit:hover   { background: var(--surface-info); color: var(--text-info); }
.edat-icon-btn--delete:hover { background: rgba(220, 38, 38, 0.08); color: var(--surface-brand); }
.edat-icon-btn--approve:hover { background: rgba(22, 163, 74, 0.08); color: #15803d; }
.edat-icon-btn .material-icons { font-size: 18px; display: block; }

/* Table action cell */
.edat-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  white-space: nowrap;
}

/* Paginator row inside a p-0 card-body */
.edat-card-paginator {
  padding: var(--sp-xs) var(--sp-base);
  border-top: 1px solid var(--border-default);
}

/* Callout / info box */
.edat-callout {
  background-color: var(--surface-info);
  color: var(--text-info);
  border-radius: var(--radius-md);
  padding: var(--sp-base);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  border: 1px solid var(--blue-300);
}

.edat-callout--warning {
  background-color: #FEF3C7;
  color: #92400E;
  border-color: #FDE68A;
}

.edat-callout--danger {
  background-color: var(--surface-brand-soft);
  color: var(--text-brand-strong);
  border-color: var(--border-brand-soft);
}

.edat-callout--success {
  background-color: var(--surface-success);
  color: var(--text-success);
  border-color: #BBF7D0;
}

/* Empty state */
.edat-empty-state {
  background-color: var(--surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl);
  text-align: center;
  color: var(--text-secondary);
}

.edat-empty-state__icon {
  font-size: 48px;
  color: var(--text-muted);
  margin-bottom: var(--sp-base);
}

.edat-empty-state__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: var(--sp-xs);
}

.edat-empty-state__text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-base);
}

/* Code / pre */
code {
  font-family: var(--font-code);
  font-size: 14px;
  background-color: var(--surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px var(--sp-micro);
  color: var(--text-brand-strong);
}

pre {
  font-family: var(--font-code);
  font-size: 14px;
  background-color: var(--surface-sunken);
  color: #E5E7EB;
  border-radius: var(--radius-md);
  padding: var(--sp-base);
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  border-radius: 0;
}

/* Toast (dark, bottom-right) */
.edat-toast {
  background-color: var(--surface-sunken);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-base);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--elevation-overlay);
  position: fixed;
  bottom: var(--sp-xl);
  right: var(--sp-xl);
  z-index: 9999;
  min-width: 280px;
  max-width: 400px;
}

/* ==========================================================================
   MATERIAL DASHBOARD SPECIFIC REMOVALS
   ========================================================================== */

/* Remove the dark overlay Material adds to main-panel */
.main-panel::before {
  background: none !important;
  display: none !important;
}

/* Remove Material Dashboard's fixed navbar animation transitions */
.navbar,
.navbar-absolute {
  transition: none !important;
  animation: none !important;
}

/* Remove Material's card header margin trick (negative top offset) */
.card .card-header:not(.card-header-icon):not(.card-header-text) {
  margin: 0 !important;
}

/* Remove Material floating card header style */
.card .card-header.card-header-icon,
.card .card-header.card-header-text {
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: var(--sp-base) var(--sp-xl) !important;
}

/* Remove Material's `.card .card-header .card-icon` colored backgrounds */
.card .card-header .card-icon {
  background: var(--surface-brand-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Remove Material's colored gradient backgrounds on `.ct-chart` and similar */
.card .ct-chart {
  margin: 0 !important;
}

/* Material's sidebar nav collapse arrow — keep but style correctly */
.sidebar .caret {
  color: var(--text-muted) !important;
}

.sidebar .nav li.active .caret,
.sidebar .nav li:hover .caret {
  color: var(--text-brand) !important;
}

/* Remove Material's sidebar user profile block gradient */
.sidebar .user,
.sidebar .user-wrapper {
  background: transparent !important;
  border-bottom: 1px solid var(--border-default) !important;
  padding: var(--sp-base) !important;
}

/* Fix Material Dashboard's `.content` top padding that assumes fixed navbar */
.main-panel > .content {
  padding-top: var(--sp-2xl) !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   RESPONSIVE — MOBILE BREAKPOINT (< 768px)
   ========================================================================== */

@media (max-width: 767.98px) {

  /* Hide sidebar by default on mobile */
  .edat-sidebar,
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
    z-index: 200 !important;
  }

  /* Show sidebar when toggled */
  .edat-sidebar--open,
  .sidebar.open,
  .sidebar--open {
    transform: translateX(0) !important;
  }

  /* Overlay scrim when sidebar open */
  .edat-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    z-index: 199;
  }

  .edat-sidebar-overlay--visible {
    display: block;
  }

  /* Main panel takes full width on mobile */
  .edat-main,
  .main-panel {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Hamburger toggle — visible on mobile */
  .edat-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    margin-right: var(--sp-xs);
    transition: all var(--transition-fast);
  }

  .edat-hamburger:hover {
    background-color: var(--surface-hover-soft);
    color: var(--text-strong);
  }

  /* Navbar adjustments */
  .navbar {
    padding: 0 var(--sp-base) !important;
  }

  /* Content padding reduction */
  .main-panel > .content,
  .content {
    padding: var(--sp-base) !important;
  }

  /* Card padding reduction */
  .card-body {
    padding: var(--sp-base) !important;
  }

  .card-header {
    padding: var(--sp-sm) var(--sp-base) !important;
  }

  /* Page header reduction */
  .edat-page-header {
    font-size: 26px;
    letter-spacing: -0.3px;
    padding: var(--sp-base) 0;
  }

  /* Buttons full width on smallest screens */
  .btn-block-sm {
    width: 100% !important;
  }

  /* Buttons with long labels: stack full-width and wrap text instead of
     being clipped by the fixed .btn height + overflow:hidden */
  .btn-wrap-sm {
    width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: center !important;
    padding: var(--sp-sm) var(--sp-base) !important;
  }

  .btn-wrap-sm.btn-lg {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  /* Table scroll */
  .table-responsive {
    border: none;
  }

  /* Modal full-width on mobile */
  .modal-dialog {
    margin: var(--sp-base);
    max-width: calc(100% - var(--sp-2xl));
  }
}

/* Hamburger hidden on desktop */
.edat-hamburger {
  display: none;
}

/* ==========================================================================
   TABLET BREAKPOINT (768px – 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Sidebar hidden on tablet, use hamburger */
  .edat-sidebar,
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
    z-index: 200 !important;
  }

  .edat-sidebar--open,
  .sidebar.open {
    transform: translateX(0) !important;
  }

  .edat-main,
  .main-panel {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .edat-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    margin-right: var(--sp-xs);
  }
}

/* ==========================================================================
   DESKTOP BREAKPOINT (>= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
  .edat-sidebar,
  .sidebar {
    display: none !important;
  }

  .edat-main,
  .main-panel {
    margin-left: 0 !important;
  }

  .edat-hamburger {
    display: none !important;
  }
}

/* ==========================================================================
   BOOTSTRAP 4 UTILITY OVERRIDES — ENSURE EDAT TOKENS APPLY
   ========================================================================== */

/* Text color utilities */
.text-primary { color: var(--text-brand) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--text-success) !important; }
.text-danger { color: var(--text-brand) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text-heading) !important; }
.text-white { color: var(--text-inverse) !important; }

/* Background utilities */
.bg-white { background-color: var(--surface-default) !important; }
.bg-light  { background-color: var(--surface-alt) !important; }

/* Border utilities */
.border { border: 1px solid var(--border-default) !important; }
.border-top { border-top: 1px solid var(--border-default) !important; }
.border-bottom { border-bottom: 1px solid var(--border-default) !important; }
.border-left { border-left: 1px solid var(--border-default) !important; }
.border-right { border-right: 1px solid var(--border-default) !important; }

/* Border radius */
.rounded     { border-radius: var(--radius-md) !important; }
.rounded-sm  { border-radius: var(--radius-sm) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-xl  { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-full) !important; }
.rounded-0   { border-radius: 0 !important; }

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.edat-page-header {
  padding: var(--sp-lg) 0 var(--sp-2xl);
}
.edat-page-header__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.3px;
  border-left: 4px solid var(--surface-brand);
  padding-left: var(--sp-base);
}
.edat-page-header__subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   CONTEXT BAR — full-width header below topbar (DESIGN.md v1.6.0)
   ========================================================================== */
.context-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-default);
  padding: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}

.context-bar__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.context-bar__crumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}
.context-bar__crumbs::-webkit-scrollbar { display: none; }

.context-bar__crumbs li {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.context-bar__crumbs li + li::before {
  content: "›";
  margin: 0 6px;
  color: var(--border-strong);
  font-size: 15px;
  line-height: 1;
}
.context-bar__crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.context-bar__crumbs a:hover {
  color: var(--text-brand);
}
.context-bar__crumbs li[aria-current="page"] {
  color: var(--text-secondary);
  font-weight: 600;
}

.context-bar__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--text-heading);
  margin: 0;
  border-left: 4px solid var(--surface-brand);
  padding-left: var(--sp-base);
}

.context-bar__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  padding-left: calc(var(--sp-base) + 4px);
  margin: 0;
}

.context-bar__actions {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  margin-left: var(--sp-xl);
}

.context-bar__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  padding-left: calc(var(--sp-base) + 4px);
}

@media (max-width: 640px) {
  .context-bar {
    flex-direction: column;
    gap: var(--sp-base);
    padding: var(--sp-base);
  }
  .context-bar__title {
    font-size: 22px;
  }
  .context-bar__actions {
    margin-left: 0;
    width: 100%;
  }
  .context-bar__crumbs li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  .context-bar__crumbs li:nth-last-child(2)::before {
    display: none;
  }
  .context-bar__crumbs li:nth-last-child(2) a::before {
    content: "‹ ";
  }
}

/* ==========================================================================
   MAIS OPÇÕES — Grid de navegação
   ========================================================================== */

/* 6 fixed columns */
.edat-opcoes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-base);
}

/* Horizontal card: icon left, content right */
.edat-opcao-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-base);
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  text-decoration: none;
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s;
  color: inherit;
}
.edat-opcao-card:hover {
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.edat-opcao-card--danger:hover  { border-color: var(--surface-brand); }
.edat-opcao-card--warning:hover { border-color: #D97706; }

.edat-opcao-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.edat-opcao-card--danger  .edat-opcao-card__icon {
  background: var(--surface-brand);
  color: #fff;
}
.edat-opcao-card--warning .edat-opcao-card__icon {
  background: #D97706;
  color: #fff;
}
.edat-opcao-card__icon .material-icons { font-size: 24px; }

.edat-opcao-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Badge — solid color + white text (invertido) */
.edat-opcao-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-sm);   /* badge → título: 3 tokens (14px) */
  line-height: 1.6;
  color: #fff;
  align-self: flex-start;
}
.edat-opcao-card--danger  .edat-opcao-card__badge {
  background: var(--surface-brand);
}
.edat-opcao-card--warning .edat-opcao-card__badge {
  background: #D97706;
}

.edat-opcao-card__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.35;
  margin-bottom: var(--sp-xs);  /* título → descrição: 2 tokens (10px) */
}
.edat-opcao-card__label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

/* ==========================================================================
   PAGINATION BUTTONS (custom .paginacao class — not Bootstrap .pagination)
   ========================================================================== */

/* Inactive pages and nav buttons */
.paginacao:not(.btn-danger):not(.btn-primary):not(.btn-dark):not(.btn-success) {
  background-color: var(--surface-alt) !important;
  border-color: var(--border-default) !important;
  color: var(--text-body) !important;
}
.paginacao:not(.btn-danger):not(.btn-primary):not(.btn-dark):hover {
  background-color: var(--surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-heading) !important;
}

/* Disabled/inactive arrows (no .paginacao class) */
#primeiro_inativo,
#anterior_inativo,
#proximo_inativo,
#ultimo_inativo {
  background-color: var(--surface-alt) !important;
  border-color: var(--border-default) !important;
  color: var(--text-muted) !important;
  cursor: default !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
}

/* ==========================================================================
   FORM VALIDATION STATE (jQuery Validate)
   ========================================================================== */

.form-control.form-error,
.form-error.form-control:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}

/* ==========================================================================
   RESEARCH PROFILES / CUSTOM APP CLASSES
   ========================================================================== */

/* label-red: inline emphasis for example values in help text */
.label-red {
  color: var(--text-brand) !important;
  font-weight: 600 !important;
}

/* topico-bases: section heading displayed next to a logo inside card-header */
h4.topico-bases,
.topico-bases {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  margin: 0 0 0 var(--sp-xs) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1.3 !important;
}

/* field-bases: compact inline input embedded in running text */
input.field-bases {
  display: inline-block !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: 300px !important;
  height: 32px !important;
  padding: 0 var(--sp-xs) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--text-heading) !important;
  background-color: var(--surface-default) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
input.field-bases:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
  outline: none !important;
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

/* middle-screen: vertically and horizontally center an empty/error state */
.middle-screen {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 220px !important;
  width: 100% !important;
  padding: var(--sp-xl) 0 !important;
}

/* pull-center: legacy MD horizontal centering */
.pull-center {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* no-margin: zero margin utility */
.no-margin {
  margin: 0 !important;
}

/* ==========================================================================
   FORM SECTION DIVIDERS
   ========================================================================== */

/* text-divisor-dark: eyebrow heading that introduces a form section */
h6.text-divisor-dark,
.text-divisor-dark {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  margin-top: var(--sp-xl) !important;
  margin-bottom: 0 !important;
}

/* form-divisor: thin rule beneath section headings */
hr.form-divisor,
.form-divisor {
  border: 0 !important;
  border-top: 1px solid var(--border-default) !important;
  margin-top: var(--sp-micro) !important;
  margin-bottom: var(--sp-base) !important;
}

/* ==========================================================================
   BD-CALLOUT (Bootstrap docs callout — used for AVISO / alerts in forms)
   ========================================================================== */

.bd-callout {
  padding: var(--sp-base) var(--sp-xl) !important;
  background: var(--surface-alt) !important;
  border: 1px solid var(--border-default) !important;
  border-left: 4px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--sp-xl) !important;
}
.bd-callout-danger {
  background: var(--surface-brand-wash) !important;
  border-color: var(--border-brand-soft) !important;
  border-left-color: var(--surface-brand) !important;
}
.bd-callout h4 {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-heading) !important;
  margin-bottom: var(--sp-xs) !important;
}
.bd-callout-danger h4 {
  color: var(--text-brand) !important;
}
.bd-callout p {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--text-body) !important;
  margin-bottom: var(--sp-micro) !important;
  line-height: 1.6 !important;
}
.bd-callout p:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   MATERIAL DASHBOARD DARK MODIFIER
   ========================================================================== */

/* .is-dark was MD's dark-theme modifier — normalize to standard EDAT style */
.is-dark > .form-control,
.is-dark .form-control {
  background-color: var(--surface-default) !important;
  color: var(--text-heading) !important;
  border-color: var(--border-default) !important;
}
.is-dark > label,
.is-dark label {
  color: var(--text-strong) !important;
}

/* ==========================================================================
   TEXTAREA SIZE VARIANTS
   ========================================================================== */

textarea.textarea-md {
  min-height: 160px !important;
}
textarea.textarea-lg {
  min-height: 240px !important;
}

/* ==========================================================================
   CARD WITH TABS IN HEADER
   ========================================================================== */

.card-header.card-header-tabs {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: var(--sp-xs) !important;
}
.card-header.card-header-tabs .nav-tabs {
  border-bottom: none !important;
  margin-bottom: -1px !important;
}

/* ==========================================================================
   BMD FORM GROUP (normalize to same as .form-group)
   ========================================================================== */

.bmd-form-group {
  margin-bottom: var(--sp-base) !important;
}

/* ==========================================================================
   THUMBNAIL
   ========================================================================== */

.thumbnail {
  display: inline-block !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 4px !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  background-color: var(--surface-default) !important;
}

/* ==========================================================================
   TOOLTIP (Bootstrap 4 tooltips)
   ========================================================================== */

.tooltip-inner {
  background-color: #40444B !important;
  color: var(--text-inverse) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  max-width: 280px !important;
  text-align: left !important;
}
.tooltip .arrow::before,
.bs-tooltip-top .arrow::before    { border-top-color:    #40444B !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #40444B !important; }
.bs-tooltip-left .arrow::before   { border-left-color:   #40444B !important; }
.bs-tooltip-right .arrow::before  { border-right-color:  #40444B !important; }

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */

.progress {
  height: 8px !important;
  background-color: var(--surface-hover) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.progress-bar {
  background-color: var(--surface-brand) !important;
  border-radius: var(--radius-full) !important;
  transition: width var(--transition-base) !important;
}
.progress-bar-striped {
  background-image: none !important;
}
.progress-bar.bg-success { background-color: #16A34A !important; }
.progress-bar.bg-info    { background-color: var(--text-info) !important; }
.progress-bar.bg-warning { background-color: #D97706 !important; }
.progress-bar.bg-danger  { background-color: var(--surface-brand) !important; }

/* ==========================================================================
   TABLE DESIGN — padrão consistente com o portal EDAT
   ========================================================================== */

/* Cabeçalho: fundo cinza-50, borda inferior sólida, tipografia forte */
.card .table thead th,
.card .table thead td {
  background-color: var(--surface-alt) !important;
  border-top: none !important;
  border-bottom: 2px solid var(--border-default) !important;
  border-right: none !important;
  border-left: none !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-strong) !important;
  padding: 10px 14px !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

/* Células do corpo: padding uniforme, tipografia legível */
.card .table tbody td {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-body);
  border-top: 1px solid var(--border-default) !important;
  border-bottom: none !important;
  padding: 10px 14px !important;
  vertical-align: middle !important;
}

/* Hover de linha */
.card .table-hover tbody tr:hover > td {
  background-color: var(--surface-hover-soft) !important;
}

/* Remove borda dupla no topo da primeira linha */
.card .table tbody tr:first-child td {
  border-top: none !important;
}

/* ==========================================================================
   MODAL FORM LABELS — neutraliza o posicionamento flutuante do BMD dentro de modais
   ========================================================================== */

/* Wrapper alternativo ao form-group do BMD — ignora completamente a inicialização BMD */
.edat-form-group { margin-bottom: var(--sp-base); }
.edat-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  position: static;
}

/* BMD aplica position:absolute + transform em labels dentro de .form-group,
   o que faz o label sobrepor o select/input em modais AJAX.
   Esta regra fixa labels de modais como estáticos globalmente. */
.modal .form-group label,
.modal .edat-form-group label {
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 4px !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   FILTER BAR — barra de busca/filtro para listagens
   ========================================================================== */

.edat-filter-bar {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-base) var(--sp-lg);
  margin-bottom: var(--sp-base);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.edat-filter-bar__form {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.edat-filter-bar__search {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
  min-width: 260px;
  height: 38px;
}

.edat-filter-bar__search select {
  border: none;
  border-right: 1px solid var(--border-default);
  background: var(--surface-page);
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  height: 100%;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
}

.edat-filter-bar__search input {
  border: none;
  background: var(--surface-default);
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-heading);
  height: 100%;
  width: 100%;
  outline: none;
}

.edat-filter-select {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-default);
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-heading);
  height: 38px;
  cursor: pointer;
  outline: none;
}

.edat-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-brand);
  border: none;
  border-radius: var(--radius-md);
  padding: 0 16px;
  height: 38px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}

.edat-filter-btn:hover { background: var(--surface-brand-strong); }

/* ==========================================================================
   STATUS TABS — pills de filtro de status fora do card
   ========================================================================== */

.edat-status-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-base);
  flex-wrap: wrap;
}

.edat-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--surface-default);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.edat-status-tab .material-icons { font-size: 15px; }

.edat-status-tab:hover {
  background: var(--surface-page);
  color: var(--text-heading);
  border-color: var(--border-strong);
  text-decoration: none;
}

.edat-status-tab--active {
  background: var(--surface-brand);
  color: #fff;
  border-color: var(--surface-brand);
  font-weight: 600;
}

.edat-status-tab--active:hover {
  background: var(--surface-brand-strong);
  color: #fff;
  border-color: var(--surface-brand-strong);
  text-decoration: none;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .edat-sidebar,
  .sidebar,
  .navbar,
  .footer,
  .edat-env-banner {
    display: none !important;
  }

  .edat-main,
  .main-panel {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid var(--border-default) !important;
    break-inside: avoid;
  }

  body {
    background: #ffffff !important;
    color: #000 !important;
  }
}


/* ==========================================================================
   OUVIDORIA HOME — layout da página inicial (estilos específicos)
   Classes .ouv-* são usadas exclusivamente em inicio.html.
   ========================================================================== */

/* Escape .content padding so sections touch the container edge */
.ouv-home {
  margin: calc(-1 * var(--sp-2xl)) calc(-1 * var(--sp-xl));
  font-family: var(--font-body);
}

/* Inner content wrapper — max-width + internal padding */
.ouv-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

/* ── Skip link ── */
.ouv-skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--surface-sunken);
  color: var(--text-inverse);
  padding: var(--sp-xs) var(--sp-base);
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 300;
  font-family: var(--font-body);
  font-size: 12px;
  text-decoration: none;
}
.ouv-skip:focus { left: 0; outline: 2px solid var(--border-focus); }

/* ==========================================================================
   HERO — full-width entry section (DESIGN.md v1.6.0)
   Shared verbatim with sicd/css/edat.css — do not fork ouvidoria-specific
   rules here; scope page-specific tweaks under .ouv-home instead.
   ========================================================================== */

.hero {
  background: var(--surface-page) url('assets/img/edat-pattern.png') center / cover no-repeat;
  border-bottom: 1px solid var(--border-default);
  padding: var(--sp-section) 0 var(--sp-4xl);
  position: relative;
  overflow: hidden;
}
.hero--plain { background-image: none; }
.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow {
  display: block;
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-base);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--text-heading);
  margin: 0 0 var(--sp-base);
}
.hero__title--md { font-size: 34px; line-height: 1.05; letter-spacing: -0.035em; }
.hero__title--sm { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }

.hero__highlight { color: var(--text-brand); }

.hero__description {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0;
}
.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  margin-top: var(--sp-xl);
}
.hero__link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  transition: color var(--transition-fast);
}
.hero__link:hover { color: var(--text-brand-strong); text-decoration: none; }
.hero__link-arrow { transition: transform var(--transition-fast); }
.hero__link:hover .hero__link-arrow { transform: translateX(4px); }

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__title { line-height: 1.1; }
}

/* Mesmo tamanho reduzido que o SIC aplica em .pc-page .hero__title
   (painel_cidadao.css), em vez do clamp(3rem, 7vw, 5.5rem) padrão acima. */
.ouv-home .hero__title {
  font-size: clamp(28px, 5vw, 48px);
}

/* ── CTA Cards ── */
.ouv-actions {
  padding: var(--sp-3xl) 0 var(--sp-xl);
  background: var(--surface-page);
}

.ouv-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
}
@media (max-width: 680px) { .ouv-cta-grid { grid-template-columns: 1fr; } }

.ouv-cta-card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-2xl) var(--sp-xl);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  box-shadow: var(--elevation-low);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.ouv-cta-card:hover {
  box-shadow: var(--elevation-overlay);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.ouv-cta-card--alt { background: var(--surface-alt); }

.ouv-cta-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ouv-cta-icon .material-icons { font-size: 22px; }

.ouv-cta-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
  margin: var(--sp-xs) 0 0;
  line-height: 1.2;
}

.ouv-cta-desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

.ouv-cta-go {
  margin-top: auto;
  padding-top: var(--sp-sm);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-brand);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-micro);
}
.ouv-cta-go .material-icons { font-size: 16px; transition: transform var(--transition-fast); }
.ouv-cta-card:hover .ouv-cta-go { color: var(--text-brand-strong); }
.ouv-cta-card:hover .ouv-cta-go .material-icons { transform: translateX(3px); }

/* ── Tipos de Manifestação ── */
.ouv-types {
  background: var(--surface-default);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: var(--sp-section) 0 var(--sp-3xl);
}

.ouv-section-header { margin-bottom: var(--sp-2xl); }

.ouv-section-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.3px;
  margin: 0 0 var(--sp-xs);
}

.ouv-section-sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
  line-height: 1.65;
}

.ouv-types-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-sm);
}
@media (max-width: 880px) { .ouv-types-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ouv-types-grid { grid-template-columns: 1fr; } }

.ouv-type-card {
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-base);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.ouv-type-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ouv-type-icon .material-icons { font-size: 22px; }

.ouv-type-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  display: block;
}

.ouv-type-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── Trust ── */
.ouv-trust {
  padding: var(--sp-section) 0;
  background: var(--surface-page);
}

.ouv-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-xl);
}
@media (max-width: 760px) { .ouv-trust-grid { grid-template-columns: 1fr; } }

.ouv-trust-item { display: flex; gap: var(--sp-sm); align-items: flex-start; }

.ouv-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ouv-trust-icon .material-icons { font-size: 22px; }

.ouv-trust-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 var(--sp-xs);
  line-height: 1.3;
}

.ouv-trust-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* ── Bridge ── */
.ouv-bridge {
  background: var(--surface-alt);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: var(--sp-2xl) 0;
}

.ouv-bridge-box {
  display: flex;
  gap: var(--sp-base);
  align-items: center;
  flex-wrap: wrap;
}

.ouv-bridge-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-brand-soft);
  color: var(--text-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ouv-bridge-icon .material-icons { font-size: 22px; }

.ouv-bridge-text {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-body);
  margin: 0;
  flex: 1;
  min-width: 200px;
}

.ouv-bridge-link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-brand);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-micro);
  flex-shrink: 0;
}
.ouv-bridge-link .material-icons { font-size: 14px; }
.ouv-bridge-link:hover { color: var(--text-brand-strong); text-decoration: underline; }

/* ── FAQ ── */
.ouv-faq {
  padding: var(--sp-section) 0 var(--sp-3xl);
  background: var(--surface-default);
  border-top: 1px solid var(--border-default);
}

.ouv-faq details { border-bottom: 1px solid var(--border-default); }

.ouv-faq details summary {
  cursor: pointer;
  padding: var(--sp-base) 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-base);
  user-select: none;
}
.ouv-faq details summary::-webkit-details-marker { display: none; }

.ouv-faq-chev {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-brand);
  transition: transform var(--transition-base);
  flex-shrink: 0;
  line-height: 1;
}
.ouv-faq details[open] .ouv-faq-chev { transform: rotate(45deg); }

.ouv-faq-body {
  padding: 0 0 var(--sp-base);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ==========================================================================
   SELECT2 OVERRIDES — tela Classificar Manifestação
   ========================================================================== */

.select2-container .select2-selection--single {
    height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
}
.select2-selection__rendered {
    line-height: 1.5rem !important;
    color: var(--text-heading) !important;
}
.select2-selection__arrow {
    height: 100% !important;
}
.select2-results__option--highlighted {
    background-color: var(--text-secondary);
    color: var(--text-inverse) !important;
}