:root{--ink:#10271d;--rail:#06160f;--accent:#80cf65;--line:#e3eae5;--muted:#7a8c82;background:#f2f5f3;color:var(--ink)}body{background:radial-gradient(ellipse at 80% 0,#edf5ed,transparent 65%),#f3f6f4}aside{width:258px;padding:30px 20px;background:linear-gradient(160deg,#0a2116,#030d08 80%);border-right:1px solid #173123;overflow-y:auto;z-index:10}aside img{width:205px;height:60px;object-fit:contain;background:transparent;border-radius:0;padding:0;filter:none}aside small{font-size:10px;letter-spacing:1.6px;color:#739181;padding:0 12px;line-height:1.9;margin:28px 0 18px}aside nav{border-top:1px solid #ffffff12;padding-top:18px}aside button{display:flex;align-items:center;gap:12px;font-size:13px;padding:14px 13px;border-radius:12px;color:#a7beb1;transition:all .2s}aside button:hover{background:#183023;color:#fff}aside button.active{background:#203629;color:#fff;box-shadow:inset 3px 0 #9cdd79,0 10px 25px #0003}aside svg{width:18px;height:18px;flex-shrink:0}.sidebar-bottom{margin-top:25px;padding:17px 12px;border-top:1px solid #ffffff15;font-size:11px;color:#8ba694}.sidebar-bottom i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#85d66d;box-shadow:0 0 12px #85d66d;margin-right:7px}main{margin-left:258px;padding:22px 30px 42px;max-width:2100px}.topbar{display:flex;justify-content:space-between;align-items:center;background:#ffffffcc;border:1px solid var(--line);border-radius:20px;padding:14px 22px;margin-bottom:26px;backdrop-filter:blur(8px);gap:16px}.breadcrumb{font-size:11px;font-weight:650;letter-spacing:1.6px;background:#0a2015;color:#fff;border-radius:30px;padding:10px 17px}.company-pill{display:flex;align-items:center;gap:11px;font-size:11px;color:#789083}.company-pill b{color:#2b4738;font-weight:600}.company-pill .profile{width:34px;height:34px;border-radius:50%;background:#edf3ec;display:grid;place-items:center;color:#537244}header{margin-bottom:25px}header p:first-child{letter-spacing:2px;font-size:10px;color:#728c7a;font-weight:650}h1{font-size:29px;letter-spacing:-.8px;font-weight:650}h2{font-size:16px;font-weight:650}header #subtitle{font-size:13px;margin:10px 0 0}.primary{background:#102d1c;color:white;border:1px solid #183d27;box-shadow:0 6px 16px #102d1c18}.primary:hover{background:#1c432a;transform:translateY(-1px)}button{transition:background .2s,transform .2s;outline-offset:4px}.filters{padding:22px;background:#fff;border:1px solid var(--line);border-radius:20px;gap:16px;margin:20px 0 24px;box-shadow:0 9px 24px #132c1a04}.filter-toolbar{flex-basis:100%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf1ed;padding-bottom:14px;margin-bottom:2px}.eyebrow{letter-spacing:2px;text-transform:uppercase;font-size:10px;color:#789184;font-weight:650}.filter-toolbar button{font-size:11px;background:#f5f8f4;border:1px solid var(--line);padding:8px 12px}.filters label{font-size:11px;color:#526d5d;min-width:155px}.filters input,.filters select{background:#f8faf8;border:1px solid #e2eae2;border-radius:10px;font-size:12px;min-height:43px}.filters label:has(#search){flex:1;min-width:220px}.advanced-filters{display:none;flex-basis:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;padding-top:16px;border-top:1px solid #edf1ed}.advanced-filters.open{display:grid}.advanced-filters label{min-width:0}.cards{gap:16px}.card{position:relative;overflow:hidden;border-radius:20px;padding:24px 22px;min-height:156px;box-shadow:0 12px 32px #10271d06;border-color:#e2eae3;animation:cardIn .5s both}.card:before{content:'';position:absolute;top:0;left:22px;right:22px;height:4px;border-radius:0 0 6px 6px;background:var(--tone,#263b2e)}.card:nth-child(4n+2){--tone:#e6ac36}.card:nth-child(4n+3){--tone:#529be7}.card:nth-child(4n+4){--tone:#38b98c}.card:nth-child(4n+1){--tone:#8fc568}.card span{font-size:11px;letter-spacing:.7px;color:#76907e;display:block}.card strong{font-size:28px;letter-spacing:-.8px;font-weight:620;white-space:nowrap;margin:19px 0 14px}.card small{font-size:10px;color:#8a9b8e}.card:hover{box-shadow:0 16px 30px #112c1c12;transform:translateY(-4px);border-color:#c8dbc4}.card:nth-child(2){animation-delay:45ms}.card:nth-child(3){animation-delay:90ms}.card:nth-child(4){animation-delay:130ms}.panel{border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:0 10px 30px #10271d04}.panels{grid-template-columns:1fr 1fr;gap:20px}.bar{gap:13px;margin:19px 0}.bar b{width:43%;font-weight:500;font-size:11px;color:#5e7765}.bar i{height:9px;transform-origin:left;animation:growBar .9s cubic-bezier(.16,1,.3,1) both;background:var(--bar-color,#8bb76b);box-shadow:0 4px 10px #76b95112}.bar em{font-size:11px;font-weight:650;color:#2e5038}.bar:hover i{filter:brightness(1.15)}.notice{background:#f3f6ee;color:#75805d;border:1px solid #e4e9d7;font-size:11px}.tablewrap{border:1px solid #e9eee7;border-radius:12px}table{font-size:11px}th{background:#f7faf6;color:#7d927f;font-weight:500;padding:15px 12px}td{padding:16px 12px;color:#385140}tbody tr:hover{background:#f4faef}.badge{font-size:10px;border-radius:30px;padding:5px 11px;background:#ddf8e8;color:#27855c}.warn{background:#fff3d9;color:#ac7c22}.row-detail{display:inline-grid;place-items:center;border:1px solid #dde8dd;background:#fff;border-radius:50%;width:26px;height:26px;color:#446c4b}.titleline .muted{font-size:10px}.titleline{gap:14px}.chart-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin:24px 0}.chart-panel{overflow:hidden}.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.chart-head h2{margin:0 0 7px}.chart-head p{font-size:11px;margin:0;color:#849584}.chart-head select{padding:8px 10px;font-size:11px;border-radius:9px;background:#f7faf5}.chart-svg{width:100%;height:auto;display:block;overflow:visible}.chart-line{stroke-dasharray:1800;stroke-dashoffset:1800;animation:drawLine 1.7s ease forwards}.chart-area{animation:fadeIn 1.5s both}.chart-dot{cursor:pointer;transition:r .2s}.chart-dot:hover{r:6}.chart-svg text{font-family:inherit;font-size:10px;fill:#8b9d8d}.chart-axis{stroke:#e7eee6;stroke-dasharray:4 5}.donut-layout{display:flex;align-items:center;justify-content:center;gap:25px;min-height:230px}.donut-layout svg{width:190px;flex-shrink:0}.donut-ring{transform:rotate(-90deg);transform-origin:100px 100px;animation:donutIn 1.2s ease both}.legend{display:flex;flex-direction:column;gap:18px;font-size:11px;min-width:135px}.legend button{background:none;padding:0;text-align:left;color:#5b7361;font-size:11px}.legend i{width:8px;height:8px;display:inline-block;border-radius:50%;margin-right:8px}.legend b{display:block;color:#213e29;font-size:20px;margin:6px 0 0 17px}.chart-meta{display:flex;gap:20px;border-top:1px solid #edf1e9;padding-top:16px;margin-top:12px;font-size:10px;color:#829784}.chart-meta b{color:#335a3c}.status-cards .card{min-height:118px;text-align:center;padding:21px}.status-cards .card strong{margin:10px 0 0;font-size:32px}.status-cards .card span{font-size:10px;letter-spacing:2px}.status-cards{margin-bottom:22px}.uploadgrid .panel{transition:transform .2s}.uploadgrid .panel:hover{transform:translateY(-2px)}.uploadgrid input[type=file]{max-width:100%;font-size:11px}.avatar{background:#eaf3e1;border-radius:12px;color:#608743;vertical-align:middle}.detail div{background:#f7faf5;border:1px solid #edf1e8}.detail small{text-transform:uppercase;letter-spacing:.6px;font-size:9px}dialog{background:#fff;box-shadow:0 30px 100px #0005}dialog::backdrop{background:#03140b99;backdrop-filter:blur(4px)}#msg:empty{display:none}#msg{background:#edf5e8;padding:12px 16px;border-radius:10px}.count-animate{animation:numberIn .5s ease}.chart-empty{min-height:220px;display:grid;place-items:center;color:#8b9d89;font-size:12px}@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes drawLine{to{stroke-dashoffset:0}}@keyframes donutIn{from{stroke-dasharray:0 565}}@keyframes cardIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes numberIn{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1450px){.filters label:has(#search){min-width:290px}.card strong{font-size:30px}}@media(max-width:1150px){aside{width:218px}aside img{width:178px}main{margin-left:218px;padding:20px}.cards{grid-template-columns:1fr 1fr}.chart-grid{grid-template-columns:1fr}.advanced-filters{grid-template-columns:repeat(3,1fr)}.company-pill b{display:none}}@media(max-width:750px){aside{position:static;width:100%;height:auto;padding:18px}aside img{width:175px;height:42px}aside small,.sidebar-bottom{display:none}aside nav{display:flex;overflow:auto;padding:10px 0 0;margin-top:10px}aside button{flex-shrink:0;width:auto;font-size:11px;margin:0 5px 0 0}aside button svg{width:15px}main{margin:0;padding:16px}.topbar{padding:12px;margin-bottom:18px}.company-pill{font-size:9px}.breadcrumb{font-size:9px}.filters{padding:16px}.panels{grid-template-columns:1fr}.advanced-filters{grid-template-columns:1fr 1fr}.card{padding:21px 16px;min-height:144px}.card strong{font-size:23px}h1{font-size:25px}header .primary{font-size:11px;padding:11px}.chart-panel{padding:20px}.donut-layout{gap:14px}.donut-layout svg{width:165px}.titleline{align-items:flex-start}.status-cards .card strong{font-size:28px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.chart-line{stroke-dashoffset:0}}

@media(min-width:751px) and (max-width:1150px){aside button{font-size:12px;white-space:nowrap;padding:13px 10px}}


/* =========================================================
   OVERALL MOBILE RESPONSIVENESS (SMARTPHONES & TABLETS)
   ========================================================= */
@media (max-width: 768px) {
  aside {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 14px 16px !important;
    background: #0a2116 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #173123;
  }
  aside img {
    width: 130px !important;
    height: auto !important;
    max-height: 36px;
    margin-bottom: 4px;
  }
  aside small, .sidebar-bottom {
    display: none !important;
  }
  aside nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 0 2px !important;
    margin-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  aside nav::-webkit-scrollbar {
    display: none !important;
  }
  aside button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #c2d8c8 !important;
    margin: 0 !important;
  }
  aside button.active {
    background: #2b573d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }
  main {
    margin-left: 0 !important;
    padding: 14px 12px 36px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  h1 {
    font-size: 22px !important;
    letter-spacing: -0.4px !important;
    margin: 4px 0 !important;
  }
  header #subtitle {
    font-size: 12px !important;
    margin: 2px 0 0 !important;
  }
  header button, header .primary {
    width: 100% !important;
    padding: 12px !important;
    font-size: 12px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  /* Filters Visibility & Responsive Layout */
  .filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px 12px !important;
    margin: 12px 0 16px !important;
    border-radius: 14px !important;
  }
  .filters[style*="display: none"],
  .filters[style*="display:none"],
  .filters.is-hidden,
  body.page-viagens #filters,
  body:not(.dashboard-view) #filters {
    display: none !important;
  }
  .filters.is-collapsed label,
  .filters.is-collapsed .advanced-filters {
    display: none !important;
  }
  .filters.is-collapsed {
    padding: 8px 12px !important;
    margin: 8px 0 12px !important;
  }
  .filters label {
    min-width: 0 !important;
    font-size: 11px !important;
  }
  .filters label:nth-child(3),
  .filters label:nth-child(4),
  .filters label:has(#search) {
    grid-column: 1 / -1 !important;
  }
  .filters input, .filters select {
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  .delivery-filters,
  .finance-filter-panel,
  .page-specific-filters {
    display: block !important;
    padding: 12px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }
  .delivery-filters-grid,
  .finance-due-filters,
  .page-specific-filters-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .delivery-filters-grid label,
  .finance-due-filters label,
  .page-specific-filters-grid label {
    min-width: 0 !important;
    font-size: 11px !important;
  }
  .delivery-filters-grid label:has(#delivery-search),
  .delivery-filters-grid label:nth-child(4),
  .delivery-filters-grid label:nth-child(5),
  .page-specific-filters-grid label:last-child {
    grid-column: 1 / -1 !important;
  }
  .delivery-filters-grid input,
  .delivery-filters-grid select,
  .finance-due-filters input,
  .finance-due-filters select,
  .page-specific-filters-grid input,
  .page-specific-filters-grid select {
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  .filter-actions-inline {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 2px !important;
  }
  .filter-accordion-header {
    padding: 8px 10px !important;
  }
  .filter-header-title {
    font-size: 12px !important;
  }
  .filter-header-badge {
    font-size: 10px !important;
    max-width: 120px !important;
  }
  .filter-accordion-btn {
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
  .cards, .overview-operations {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .card {
    padding: 14px 12px !important;
    min-height: 100px !important;
    border-radius: 14px !important;
  }
  .card strong {
    font-size: clamp(16px, 4.2vw, 22px) !important;
    margin: 6px 0 2px !important;
  }
  .card span {
    font-size: 10px !important;
  }
  .card small {
    font-size: 9px !important;
  }
  .panel {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  .panels {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 14px 0 !important;
  }
  .tablewrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }
  table {
    font-size: 11px !important;
    min-width: 580px !important;
  }
  th, td {
    padding: 9px 8px !important;
  }
  dialog {
    width: 95vw !important;
    max-width: 520px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .detail {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* =========================================================
   COLLAPSIBLE ACCORDION FILTERS (DESKTOP & MOBILE)
   ========================================================= */
.filter-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f6faf5;
  border: 1px solid #dfe9dc;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  gap: 10px;
  transition: all 0.2s ease;
}
.filter-accordion-header:hover {
  background: #edf5eb;
  border-color: #c6dcbf;
}
.filter-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.filter-header-icon {
  font-size: 15px;
  line-height: 1;
}
.filter-header-title {
  font-size: 13px;
  font-weight: 650;
  color: #173824;
  white-space: nowrap;
}
.filter-header-badge {
  font-size: 11px;
  background: #e0eee0;
  color: #215330;
  padding: 3px 9px;
  border-radius: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.filter-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.filter-accordion-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #c9dcc6;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1c462b;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.15s ease;
}
.filter-accordion-btn:hover {
  background: #1c462b;
  color: #ffffff;
  border-color: #1c462b;
}
.filter-chevron {
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}
.btn-clear-filters {
  background: transparent;
  border: 1px solid #d4e2d2;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: #55725e;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-clear-filters:hover {
  background: #eef5ec;
  color: #1b3d27;
  border-color: #b5ceb1;
}

/* Collapsible container behavior */
.delivery-filters.is-collapsed .delivery-filters-content,
.finance-filter-panel.is-collapsed .finance-filters-content,
.page-specific-filters.is-collapsed .page-specific-filters-content {
  display: none !important;
}
.delivery-filters.is-collapsed,
.finance-filter-panel.is-collapsed,
.page-specific-filters.is-collapsed {
  padding-bottom: 12px !important;
}
.delivery-filters-grid,
.page-specific-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.filter-actions-inline {
  display: flex;
  align-items: flex-end;
}

/* Page-level Filter Bar Visibility (Desktop & Mobile) */
body.page-viagens #filters,
body.page-viagens .filters-bar,
body.page-viagens #toggleSearchBtn,
body.page-viagens #toggleExtraFiltersBtn,
body.page-viagens .header-actions .btn-clear-filters,
body.finance-view #filters,
body.finance-view .filters-bar,
body.finance-view #toggleSearchBtn,
body.finance-view #toggleExtraFiltersBtn,
body.finance-view .header-actions .btn-clear-filters,
.filters[style*="display: none"],
.filters[style*="display:none"],
.filters.is-hidden {
  display: none !important;
}


