:root,
html[data-theme="light"] {
  --blue: #ff6b14;
  --cyan: #ff6b14;
  --green: #00a86b;
  --orangeRed: #ff6b14;
  --primary: #ff6b14;
  --success: #00a86b;
  --bg: #f4f7fb;
  --text: #101828;
  --muted: #64748b;
  --border: #d8e1ee;
  --border-strong: #ff8a3d;
  --surface-1: rgba(255, 255, 255, 0.96);
  --surface-2: rgba(255, 255, 255, 0.84);
  --field-top: #ffffff;
  --field-bottom: #f8fafc;
  --option-bg: #ffffff;
  --option-fg: #101828;
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
  color-scheme: light;
}

html[data-theme="dark"],
html[data-theme="black"] {
  --blue: #ff6b14;
  --cyan: #ff6b14;
  --green: #00a86b;
  --orangeRed: #ff6b14;
  --primary: #ff6b14;
  --success: #00a86b;
  --bg: #0f172a;
  --text: #f8fafc;
  --muted: #b6c2d1;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: #ff8a3d;
  --surface-1: rgba(20, 32, 51, 0.98);
  --surface-2: rgba(15, 23, 42, 0.92);
  --field-top: #172033;
  --field-bottom: #111827;
  --option-bg: #172033;
  --option-fg: #f8fafc;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

body,
html[data-theme="light"] body {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f7fb 52%, #eef3f9 100%),
    var(--bg) !important;
}

html[data-theme="dark"] body,
html[data-theme="black"] body {
  background:
    linear-gradient(180deg, #0f172a 0%, #111827 56%, #0b1120 100%),
    var(--bg) !important;
}

code,
.chip-value,
.bar-value,
.legend-value {
  color: #ff6b14 !important;
}

.shell {
  background: #f4f7fb;
}

.sidebar {
  background: #ffffff !important;
  border-right-color: #d8e1ee !important;
}

.brand,
.topbar,
.card,
.modal,
.login-card {
  background: #ffffff !important;
  border-color: #d8e1ee !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] .shell,
html[data-theme="black"] .shell {
  background: #0f172a;
}

html[data-theme="dark"] .sidebar,
html[data-theme="black"] .sidebar {
  background: #111827 !important;
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .login-card,
html[data-theme="black"] .brand,
html[data-theme="black"] .topbar,
html[data-theme="black"] .card,
html[data-theme="black"] .modal,
html[data-theme="black"] .login-card {
  background: #142033 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.card:before,
.login-card:before,
.modal:before,
.topbar:before,
.brand:before {
  display: none !important;
}

.brand {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-top: 3px solid #ff6b14 !important;
}

.brand-logo {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-title {
  color: #101828 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
  letter-spacing: 0 !important;
}

html[data-theme="dark"] .brand-title,
html[data-theme="black"] .brand-title {
  color: #f8fafc !important;
}

.brand-title.is-hidden-for-logo {
  display: none !important;
}

.brand-sub {
  color: #475569 !important;
  font-weight: 700;
}

.navlink {
  color: #334155 !important;
}

html[data-theme="dark"] .navlink,
html[data-theme="black"] .navlink {
  color: #dbe3ee !important;
}

.navlink:hover {
  background: #fff4ed !important;
  color: #ff5a00 !important;
}

.navlink.active,
.navlink.active:visited {
  color: #ff5a00 !important;
  background: #fff4ed !important;
  border-color: #ffb37a !important;
  -webkit-text-fill-color: currentColor;
  background-image: none !important;
}

.topbar-title,
.login-title,
.modal-title,
.stat-value,
.donut-total {
  color: #ff5a00 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

.btn-primary {
  color: #ffffff !important;
  background: #ff6b14 !important;
  border-color: #ff6b14 !important;
}

.btn-primary:hover {
  background: #e95500 !important;
  border-color: #e95500 !important;
}

.portal-evoque-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
  color: #ff5a00 !important;
  background: #fff4ed !important;
  border-color: #ffb37a !important;
}

.theme-switch {
  width: 52px;
  height: 30px;
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  background: #ffffff;
  padding: 3px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.theme-switch-track {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #f8fafc;
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ff6b14;
  transition: transform 0.18s ease, background 0.18s ease;
}

.theme-switch[aria-pressed="true"] {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.2);
}

.theme-switch[aria-pressed="true"] .theme-switch-track {
  background: #0f172a;
}

.theme-switch[aria-pressed="true"] .theme-switch-thumb {
  transform: translateX(22px);
  background: #f8fafc;
}

.btn:focus-visible,
.input-sm:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #ff8a3d !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 20, 0.18) !important;
}

.bar-fill {
  background: linear-gradient(90deg, #ff6b14, #ff9a52) !important;
  filter: none !important;
}

.alert-success {
  border-color: rgba(0, 168, 107, 0.28) !important;
  background: rgba(0, 168, 107, 0.1) !important;
}

.login-page {
  background:
    linear-gradient(180deg, rgba(255, 107, 20, 0.08), rgba(244, 247, 251, 0.92)),
    #f4f7fb !important;
}

.units-readonly-page .table-units .tr {
  grid-template-columns: 1.2fr 0.55fr 0.55fr 1.1fr 0.9fr 1.3fr !important;
}

.units-readonly-page .table-units .tr > :last-child {
  display: none !important;
}

.equipment-image-table .tr {
  grid-template-columns: 58px minmax(180px, 1.2fr) minmax(110px, 0.8fr) minmax(130px, 1.2fr) minmax(120px, 1fr) minmax(110px, 0.8fr) minmax(100px, 0.9fr) 190px !important;
}

.table-recent.equipment-image-table .tr {
  grid-template-columns: 58px minmax(160px, 1fr) minmax(180px, 1.2fr) minmax(110px, 0.8fr) minmax(150px, 1.4fr) minmax(110px, 0.8fr) !important;
}

.equipment-image-cell {
  display: flex;
  align-items: center;
}

.equipment-image-wrap {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.equipment-image-wrap img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.equipment-image-table .actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 176px !important;
  white-space: nowrap !important;
}

.equipment-image-table .actions .btn,
.equipment-image-table .btn-xs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="dark"] .equipment-image-wrap,
html[data-theme="black"] .equipment-image-wrap {
  background: transparent;
  border-color: transparent;
}

.equipment-summary-card-wrap {
  display: block;
  padding: 18px !important;
}

.equipment-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.equipment-summary-head h2 {
  margin: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 900;
}

.equipment-summary-head span,
.equipment-summary-loading,
.equipment-summary-error {
  color: #64748b;
  font-size: 14px;
}

.equipment-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.equipment-summary-card {
  display: flex;
  min-height: 136px;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  color: #101828;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.equipment-summary-card:hover {
  border-color: #ff8a3d;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.equipment-summary-title {
  min-height: 44px;
  color: #101828;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.equipment-summary-total {
  color: #ff5a00;
  font-size: 22px;
  font-weight: 900;
}

.equipment-summary-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.equipment-summary-types span {
  border-radius: 999px;
  background: #fff4ed;
  padding: 4px 8px;
  color: #b94300;
  font-size: 12px;
  font-weight: 800;
}

.equipment-summary-action {
  margin-top: auto;
  color: #ff5a00;
  font-size: 13px;
  font-weight: 900;
}

.equipment-summary-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.46);
}

.equipment-summary-modal {
  width: min(520px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid #ff8a3d;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.equipment-summary-modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #d8e1ee;
  background: #ffffff;
  padding: 18px;
}

.equipment-summary-modal-head h2 {
  margin: 0;
  color: #101828;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
}

.equipment-summary-modal-head span {
  display: block;
  margin-top: 6px;
  color: #ff5a00;
  font-size: 18px;
  font-weight: 900;
}

.equipment-summary-modal-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  background: #ffffff;
  color: #101828;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.equipment-summary-modal-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 8px 18px 18px;
  list-style: none;
}

.equipment-summary-modal-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf2f7;
  padding: 11px 0;
  color: #334155;
  font-size: 15px;
}

.equipment-summary-modal-list strong {
  color: #101828;
  font-size: 16px;
}

html[data-theme="dark"] .equipment-summary-head h2,
html[data-theme="black"] .equipment-summary-head h2,
html[data-theme="dark"] .equipment-summary-title,
html[data-theme="black"] .equipment-summary-title,
html[data-theme="dark"] .equipment-summary-modal-head h2,
html[data-theme="black"] .equipment-summary-modal-head h2,
html[data-theme="dark"] .equipment-summary-modal-list strong,
html[data-theme="black"] .equipment-summary-modal-list strong {
  color: #f8fafc;
}

html[data-theme="dark"] .equipment-summary-card,
html[data-theme="black"] .equipment-summary-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111827;
  color: #f8fafc;
}

html[data-theme="dark"] .equipment-summary-modal,
html[data-theme="black"] .equipment-summary-modal,
html[data-theme="dark"] .equipment-summary-modal-head,
html[data-theme="black"] .equipment-summary-modal-head,
html[data-theme="dark"] .equipment-summary-modal-close,
html[data-theme="black"] .equipment-summary-modal-close {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111827;
  color: #f8fafc;
}

html[data-theme="dark"] .equipment-summary-modal-list li,
html[data-theme="black"] .equipment-summary-modal-list li {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: #dbe3ee;
}

.monitoring-page {
  max-width: 1200px;
  width: 100%;
}

.monitoring-topbar {
  margin-bottom: 12px;
}

.monitoring-form-modal[hidden],
.monitoring-form-card[hidden] {
  display: none !important;
}

.monitoring-form-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 24px;
}

.monitoring-form-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.46);
}

.monitoring-form-card {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  padding: 18px !important;
}

.monitoring-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.monitoring-form-head h2 {
  margin: 0;
  color: #101828;
  font-size: 20px;
  font-weight: 900;
}

.monitoring-form-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 14px;
}

.monitoring-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  background: #ffffff;
  color: #101828;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.monitoring-image-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.monitoring-dropzone {
  border: 1px dashed #c8d4e5;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  padding: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.monitoring-dropzone:hover,
.monitoring-dropzone:focus-visible,
.monitoring-dropzone.is-dragging {
  border-color: #ff5a12;
  background: #fff7f2;
  box-shadow: 0 0 0 3px rgba(255, 90, 18, 0.14);
  outline: none;
}

.monitoring-remove-image[hidden] {
  display: none !important;
}

.monitoring-remove-image {
  justify-self: flex-start;
}

.monitoring-active-box {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px 14px;
  color: #101828;
  font-weight: 800;
  line-height: 1;
}

.monitoring-active-box input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #ff5a12;
}

html[data-theme="dark"] .monitoring-form-head h2,
html[data-theme="black"] .monitoring-form-head h2 {
  color: #f8fafc;
}

html[data-theme="dark"] .monitoring-close,
html[data-theme="black"] .monitoring-close,
html[data-theme="dark"] .monitoring-dropzone,
html[data-theme="black"] .monitoring-dropzone,
html[data-theme="dark"] .monitoring-active-box,
html[data-theme="black"] .monitoring-active-box {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111827;
  color: #f8fafc;
}

html[data-theme="dark"] .monitoring-dropzone:hover,
html[data-theme="black"] .monitoring-dropzone:hover,
html[data-theme="dark"] .monitoring-dropzone:focus-visible,
html[data-theme="black"] .monitoring-dropzone:focus-visible,
html[data-theme="dark"] .monitoring-dropzone.is-dragging,
html[data-theme="black"] .monitoring-dropzone.is-dragging {
  border-color: #ff7a1a;
  background: #1f2937;
}

.monitoring-table .tr {
  grid-template-columns: 58px minmax(220px, 1.4fr) 100px 210px 180px !important;
  align-items: center;
}

.monitoring-table-scroll {
  max-height: min(520px, calc(100vh - 390px));
  min-height: 220px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #ffb37a #f8fafc;
  padding-bottom: 8px;
}

.monitoring-table-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.monitoring-table-scroll::-webkit-scrollbar-thumb {
  background: #ffb37a;
  border-radius: 999px;
}

.monitoring-table-scroll::-webkit-scrollbar-track {
  background: #f8fafc;
}

.monitoring-table .tr.th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ffffff;
}

.monitoring-table .actions {
  justify-content: center;
  gap: 10px;
}

.monitoring-table .tr > :last-child {
  justify-self: center;
}

.monitoring-table .tr.th > :last-child {
  text-align: center;
  width: 100%;
}

.monitoring-table .btn-xs {
  min-width: 72px;
  text-align: center;
}

.monitoring-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #d8e1ee;
  color: #64748b;
  font-size: 13px;
  position: sticky;
  bottom: 0;
  background: #ffffff;
  z-index: 3;
}

.monitoring-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.monitoring-page-actions .btn:disabled {
  opacity: 0.45;
}

html[data-theme="dark"] .monitoring-table .tr.th,
html[data-theme="black"] .monitoring-table .tr.th {
  background: #142033;
}

html[data-theme="dark"] .monitoring-pagination,
html[data-theme="black"] .monitoring-pagination {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: #b6c2d1;
  background: #142033;
}

@media (max-height: 760px) {
  .monitoring-table-scroll {
    max-height: calc(100vh - 330px);
  }
}

.monitoring-navlink.active {
  color: #ff5a00 !important;
  background: #fff4ed !important;
  border-color: #ffb37a !important;
  font-weight: 800;
}

.shell {
  grid-template-columns: 325px minmax(0, 1fr) !important;
}

.main {
  min-width: 0 !important;
  align-items: stretch !important;
}

.page {
  width: min(100%, 1240px) !important;
  min-width: 940px;
  align-self: center;
}

.topbar,
.card {
  width: 100%;
}

.filters {
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) minmax(220px, 1fr) auto !important;
}

.filters.filters-2 {
  grid-template-columns: minmax(260px, 1fr) auto !important;
}

.table {
  min-width: 100%;
}

.equipment-image-table .tr,
.monitoring-table .tr,
.table-units .tr,
.table-recent .tr {
  min-height: 56px;
}

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 285px minmax(0, 1fr) !important;
  }

  .page {
    min-width: 0;
  }

  .filters {
    grid-template-columns: 1fr !important;
  }
}

/* Codex 2026-08-28: coluna Status em equipamentos */
.table:not(.table-units):not(.table-users):not(.table-recent):not(.table-audit):not(.monitoring-table):not(.posse-table):not(.unidades-modal-table):not(.equipamentos-table) .tr {
  grid-template-columns: minmax(170px,1.2fr) minmax(115px,.75fr) minmax(130px,1fr) minmax(110px,.8fr) minmax(145px,.95fr) minmax(95px,.65fr) 190px !important;
}
.equipment-image-table .tr {
  grid-template-columns: 58px minmax(170px,1.15fr) minmax(95px,.65fr) minmax(120px,1fr) minmax(110px,.8fr) minmax(100px,.75fr) minmax(90px,.7fr) minmax(105px,.75fr) minmax(170px,.9fr) !important;
}
@media (max-width: 980px) {
  .table:not(.table-units):not(.table-users):not(.table-recent):not(.table-audit):not(.monitoring-table):not(.equipamentos-table):not(.posse-table):not(.unidades-modal-table) .tr,
  .equipment-image-table .tr {
    grid-template-columns: 1fr !important;
  }
}

/* Codex 2026-08-28: recentes no Dashboard */
.dashboard-recent-equipment-table .tr {
  grid-template-columns: 58px minmax(150px, 1fr) minmax(220px, 1.2fr) minmax(120px, .8fr) minmax(160px, 1fr) minmax(130px, .8fr) !important;
}
.dashboard-recent-equipment-rows {
  display: contents;
}
@media (max-width: 980px) {
  .dashboard-recent-equipment-table .tr {
    grid-template-columns: 1fr !important;
  }
}

/* Codex 2026-08-28: modal resumo com imagem, nome e quantidade */
.equipment-summary-modal-list-head,
.equipment-summary-modal-list-with-image li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 0.9fr) 110px;
  gap: 14px;
  align-items: center;
}
.equipment-summary-modal-list-head {
  padding: 12px 22px 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  border-top: 1px solid #e5edf7;
}
.equipment-summary-modal-list-with-image {
  margin-top: 0 !important;
}
.equipment-summary-modal-list-with-image li {
  padding: 12px 22px !important;
}
.equipment-summary-modal-list-with-image strong,
.equipment-summary-modal-list-head span:last-child {
  text-align: right;
}
.equipment-summary-modal-image .equipment-image-wrap {
  width: 34px;
  height: 34px;
}
.equipment-summary-modal-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .equipment-summary-modal-list-head,
  .equipment-summary-modal-list-with-image li {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 0.9fr) 70px;
    gap: 10px;
  }
}

/* Codex 2026-08-28: estabilizar layout da tabela de equipamentos */
.page {
  min-width: 0 !important;
}
.table.equipment-image-table .tr {
  grid-template-columns: 46px minmax(150px, 1.05fr) minmax(86px, .55fr) minmax(105px, .75fr) minmax(100px, .72fr) minmax(92px, .65fr) minmax(78px, .55fr) minmax(88px, .62fr) minmax(142px, .78fr) !important;
  align-items: center !important;
}
.table.equipment-image-table .tr > div {
  min-width: 0;
}
.table.equipment-image-table .actions {
  min-width: 132px;
  justify-content: flex-end;
}
@media (max-width: 1180px) {
  .table.equipment-image-table {
    overflow-x: auto;
  }
  .table.equipment-image-table .tr {
    min-width: 980px;
    grid-template-columns: 46px 160px 90px 110px 105px 98px 84px 92px 145px !important;
  }
}
@media (max-width: 980px) {
  .table.equipment-image-table .tr {
    min-width: 0;
    grid-template-columns: 1fr !important;
  }
}

/* Codex 2026-08-28: avisos flutuantes da tela de equipamentos */
.equipment-page .page > .alert.alert-error {
  position: fixed !important;
  top: 22px !important;
  right: 22px !important;
  z-index: 3200 !important;
  width: min(430px, calc(100vw - 32px)) !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(248, 113, 113, .7) !important;
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, .28) !important;
}
.equipment-toast-stack {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 3300;
  display: grid;
  gap: 10px;
  width: min(430px, calc(100vw - 32px));
  pointer-events: none;
}
.equipment-toast {
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-weight: 800;
  line-height: 1.35;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 20px 46px rgba(15, 23, 42, .28);
  animation: equipmentToastIn .18s ease-out;
}
.equipment-toast-success {
  background: linear-gradient(180deg, #22c55e, #15803d);
}
.equipment-toast-error {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
}
.equipment-toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
@keyframes equipmentToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  .equipment-page .page > .alert.alert-error,
  .equipment-toast-stack {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }
}

/* Codex 2026-08-28: seletor Cards/Lista em equipamentos */
.equipment-view-select {
  min-width: 150px;
}
.equipment-summary-card .equipment-summary-chips {
  display: none !important;
}
@media (min-width: 981px) {
  .filters:has(.equipment-view-select) {
    grid-template-columns: minmax(220px, 1.2fr) minmax(210px, 1fr) minmax(190px, .9fr) minmax(150px, .65fr) auto !important;
  }
}

/* Codex 2026-08-28: lista recente somente no Dashboard */
.equipment-page .page-scroll > .card:has(.table-recent:not(.dashboard-recent-equipment-table)) {
  display: none !important;
}
.dashboard-recent-equipment-card .dashboard-recent-equipment-rows > .tr:nth-child(n+6) {
  display: none !important;
}

/* Codex 2026-08-28: botão Novo com largura lateral maior */
.topbar .btn.btn-sm.btn-primary {
  min-width: 96px;
  padding-left: 18px;
  padding-right: 18px;
}

/* Codex 2026-08-28: dashboard interativo e recentes visiveis */
.dashboard-interactive-card,
.dashboard-interactive-row {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.dashboard-interactive-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 102, 0, .55) !important;
  box-shadow: 0 18px 42px rgba(255, 102, 0, .14), var(--shadow) !important;
}
.dashboard-interactive-row:hover {
  background: rgba(255, 102, 0, .06);
}
.dashboard-recent-equipment-card {
  order: 99;
  margin-top: 16px !important;
}
.dashboard-recent-equipment-card .card-title {
  color: #111827;
}
html[data-theme=dark] .dashboard-recent-equipment-card .card-title,
html[data-theme=black] .dashboard-recent-equipment-card .card-title {
  color: rgba(255,255,255,.92);
}
.dashboard-recent-equipment-table .tr {
  grid-template-columns: 58px minmax(150px, .95fr) minmax(220px, 1.25fr) minmax(120px, .8fr) minmax(150px, 1fr) minmax(130px, .8fr) !important;
}
.dashboard-recent-equipment-rows {
  display: contents;
}

/* Lista recente: aparece apenas no final do Dashboard. */
.page-scroll > .card:has(.table-recent:not(.dashboard-recent-equipment-table)) { display: none !important; }
.table-recent-dashboard { margin-top: 18px; }

/* Cards por unidade na aba de Equipamentos. */
.equipment-unit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.equipment-unit-card { min-height: 118px; padding: 20px; border: 1px solid #d8e3f0; border-radius: 8px; background: #fff; }
.equipment-unit-name { color: #172033; font-size: 16px; font-weight: 800; line-height: 1.3; }
.equipment-unit-total { margin-top: 24px; color: #f15a19; font-size: 22px; font-weight: 800; }

/* Alternância Cards / Lista em Equipamentos. */
.equipment-view-cards .equipment-list-card { display: none; }
.equipment-view-list .equipment-unit-cards,
.equipment-view-lista .equipment-unit-cards { display: none; }

/* filtro por tipo no dashboard */
.bar-row-clickable{cursor:pointer;border-radius:8px;padding:2px 6px;margin:0 -6px;transition:background-color .15s ease,transform .15s ease}
.bar-row-clickable:hover{background:rgba(255,109,0,.10);transform:translateX(2px)}
.bar-row-clickable:focus-visible{outline:2px solid #ff6d00;outline-offset:2px}
.bar-row-clickable:hover .bar-label{color:#ff6d00}
.bar-row-selected{background:rgba(255,109,0,.16)}
.bar-row-selected .bar-label{color:#ff6d00;font-weight:700}
.legend-item-dim{opacity:.28}
.dash-filter-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap}
.dash-filter-type{color:#ff6d00;letter-spacing:.02em}

/* Claude 2026-08-28: celulas da lista sem transbordar */
.table:not(.table-units):not(.table-users):not(.table-recent):not(.table-audit):not(.monitoring-table) .tr > * { min-width: 0; overflow-wrap: anywhere; }
.table:not(.table-units):not(.table-users):not(.table-recent):not(.table-audit):not(.monitoring-table) .tr > .actions { overflow-wrap: normal; white-space: nowrap; }

/* Claude 2026-08-28: card de unidade clicavel + modal de itens */
.equipment-unit-card-clickable{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.equipment-unit-card-clickable:hover{border-color:#f15a19;box-shadow:0 10px 24px rgba(241,90,25,.16);transform:translateY(-2px)}
.equipment-unit-card-clickable:focus-visible{outline:2px solid #f15a19;outline-offset:2px}
.equipment-unit-hint{margin-top:auto;padding-top:10px;color:#f15a19;font-size:12px;font-weight:700;opacity:0;transition:opacity .15s ease}
.equipment-unit-card-clickable:hover .equipment-unit-hint,
.equipment-unit-card-clickable:focus-visible .equipment-unit-hint{opacity:1}
.equipment-summary-modal-list-with-image img{width:100%;height:100%;object-fit:contain}

/* Claude 2026-08-28: Unidades sem coluna Acoes (6 colunas) */
.table-units .tr{grid-template-columns:minmax(190px,1.35fr) minmax(70px,.45fr) minmax(90px,.5fr) minmax(150px,1.05fr) minmax(155px,.95fr) minmax(170px,1.3fr) !important}
.table-units .tr > *{min-width:0;overflow-wrap:anywhere}
@media (max-width: 980px){.table-units .tr{grid-template-columns:1fr !important}}

/* Claude 2026-08-28: toggle do modo light */
.theme-toggle{display:inline-flex;align-items:center;gap:8px}
.theme-toggle-dot{width:10px;height:10px;border-radius:999px;border:1px solid currentColor;background:transparent;flex:0 0 auto;transition:background-color .15s ease,box-shadow .15s ease}
.theme-toggle-on .theme-toggle-dot{background:currentColor;box-shadow:0 0 8px currentColor}

/* Claude 2026-08-28: botoes de acao com largura igual */
.monitoring-table .actions,
.table:not(.table-units):not(.table-users):not(.table-recent):not(.table-audit):not(.monitoring-table) .tr > .actions {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  justify-self: end;
}
.monitoring-table .tr > .actions { justify-self: center; }
.monitoring-table .actions .btn,
.table:not(.table-units):not(.table-users):not(.table-recent):not(.table-audit):not(.monitoring-table) .tr > .actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Claude 2026-08-28: menu lateral no estilo da referencia */

.sidebar { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
.menu-head { flex: 0 0 auto; background: #f15a19; color: #fff; padding: 22px 20px 18px; }
.menu-head-title { font-size: 26px; font-weight: 800; letter-spacing: .24em; line-height: 1; color: #fff; }
.menu-head-sub { margin-top: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92); }

.nav { margin: 0 !important; padding: 14px 12px; display: grid; gap: 4px; align-content: start;
       flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { width: 0; height: 0; }
.navlink { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center;
           gap: 12px; padding: 11px 12px; border-radius: 12px; }
.navlink-ico { width: 22px; height: 22px; }
.navlink-text { min-width: 0; }
.navlink-title { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; }
.navlink-sub { display: block; font-size: 12px; line-height: 1.3; margin-top: 2px;
               font-weight: 500; opacity: .62; }
.navlink.active, .navlink.active:visited {
  background: #f15a19 !important; color: #fff !important; border-color: #f15a19 !important;
  box-shadow: 0 8px 20px rgba(241,90,25,.28);
}
.navlink.active .navlink-sub { opacity: .92; }
html[data-theme="dark"] .navlink.active, html[data-theme="black"] .navlink.active { color: #fff !important; }

.sidebar-foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid #e2e8f0; display: grid; gap: 10px; }
html[data-theme="dark"] .sidebar-foot, html[data-theme="black"] .sidebar-foot {
  border-top-color: rgba(255,255,255,.12);
}
.user-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center;
             gap: 10px; padding: 10px; border-radius: 12px; background: #f6f8fc; }
html[data-theme="dark"] .user-card, html[data-theme="black"] .user-card { background: rgba(255,255,255,.06); }
.user-avatar { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
               background: #1f2937; color: #fff; font-weight: 800; font-size: 14px;
               border: 2px solid #f15a19; }
.user-info { min-width: 0; }
.user-name { font-weight: 700; font-size: 14px; line-height: 1.2;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-login { margin-top: 2px; font-size: 11px; opacity: .65;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
              color: #f15a19; background: #fff1e8; border-radius: 999px; padding: 3px 7px; }

.btn-logout { width: 100%; display: inline-flex; align-items: center; justify-content: center;
              padding: 13px 14px; font-size: 15px; font-weight: 800; border-radius: 12px;
              background: #f15a19 !important; border-color: #f15a19 !important; color: #fff !important;
              box-shadow: 0 8px 20px rgba(241,90,25,.28); }
.btn-logout:hover { filter: brightness(1.06); }
.foot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-foot { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            padding: 9px 8px; font-size: 12px; font-weight: 700; border-radius: 10px;
            text-align: center; text-decoration: none; }
.btn-foot.theme-toggle-on { background: #fff4ed !important; border-color: #ffb37a !important;
                            color: #ff5a00 !important; }

/* Claude 2026-08-28: acoes no canto superior direito */

.shell-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px;
                 flex-wrap: wrap; margin-bottom: 12px; }
.btn-top { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
           padding: 9px 14px; font-size: 13px; font-weight: 700; border-radius: 10px;
           text-decoration: none; white-space: nowrap; }
.btn-top.theme-toggle-on { background: #fff4ed !important; border-color: #ffb37a !important;
                           color: #ff5a00 !important; }
@media (max-width: 620px) { .shell-actions { justify-content: stretch; }
                            .btn-top { flex: 1 1 auto; } }

/* Claude 2026-08-28: distribuicao do modal de itens */

.monitoring-form-modal .monitoring-form-card {
  width: min(560px, 100%) !important;
  padding: 22px !important;
}
.monitoring-form-modal .monitoring-form-head { margin-bottom: 18px; }
.monitoring-form { gap: 14px !important; }
.monitoring-form .field > span { margin-bottom: 6px; }

.monitoring-dropzone { padding: 16px; }
.monitoring-image-preview { gap: 14px; min-width: 0; }
.monitoring-image-preview .equipment-image-wrap { width: 48px; height: 48px; flex: 0 0 auto; }
.monitoring-image-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.monitoring-remove-image { justify-self: end !important; margin-top: -6px; }

.monitoring-active-box { width: 100%; justify-content: flex-start; }

.monitoring-form .row-right {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
html[data-theme="dark"] .monitoring-form .row-right,
html[data-theme="black"] .monitoring-form .row-right { border-top-color: rgba(255,255,255,.12); }
.monitoring-form .row-right .btn {
  min-width: 118px;
  justify-content: center;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
}

/* Claude 2026-08-28: notificacoes no canto superior direito */

@keyframes claude-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alert.alert-error,
.alert.center-popup {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 4000 !important;
  width: min(380px, calc(100vw - 36px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  font-weight: 600;
  text-align: left !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22) !important;
  animation: claude-toast-in 0.18s ease-out;
}
/* erro: vermelho */
.alert.alert-error {
  background: #d92d20 !important;
  border-color: #b42318 !important;
}
/* sucesso: verde */
.alert.center-popup {
  background: #12b76a !important;
  border-color: #039855 !important;
}
/* se os dois aparecerem juntos, o segundo desce */
.alert.alert-error + .alert.center-popup { top: 84px !important; }

/* Claude 2026-08-28: logo da marca no cabecalho do menu */

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menu-head-text { min-width: 0; }
.menu-head-logo {
  height: 40px;
  width: auto;
  max-width: 118px;
  object-fit: contain;
  flex: 0 0 auto;
}
@media (max-width: 980px) { .menu-head-logo { height: 34px; max-width: 100px; } }

/* Claude 2026-08-28: miniatura no campo Tipo */

.tipo-com-imagem { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; }
.tipo-com-imagem .tipo-thumb { width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid #d8e1ee; border-radius: 8px; background: #f8fafc; overflow: hidden; }
.tipo-com-imagem .tipo-thumb img { width: 100%; height: 100%; object-fit: contain; }
html[data-theme="dark"] .tipo-com-imagem .tipo-thumb,
html[data-theme="black"] .tipo-com-imagem .tipo-thumb {
  border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }

/* Claude 2026-08-31: coluna Setor no modal de itens */

.equipment-summary-modal-setor {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
  font-size: 13px;
}
html[data-theme="dark"] .equipment-summary-modal-setor,
html[data-theme="black"] .equipment-summary-modal-setor { color: rgba(255,255,255,.7); }

/* ==================================================================
   Menu mobile (2026-09-01, painel em cartoes 2026-09-02)

   Ate 900px a sidebar sai do fluxo e vira um painel flutuante de
   cartoes -- cabecalho, lista e rodape -- em vez da gaveta de tela
   cheia. Sobra faixa do conteudo a direita, entao da para ver que ha
   pagina atras e fechar tocando fora.

   Acima de 900px NADA muda: o grid de 325px + conteudo continua igual.

   O CSS original ja tinha regra responsiva para .shell, mas a linha
   ".shell { grid-template-columns: 325px ... !important }" deste
   arquivo vinha sem media query e a anulava em qualquer largura -- por
   isso o menu ocupava a tela inteira no celular.
   ================================================================== */

.evoque-mobile-bar,
.evoque-menu-overlay,
.evoque-menu-close {
  display: none;
}

@media (max-width: 900px) {
  /* ---------------------------------------------- barra fixa do topo */
  .evoque-mobile-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 14px;
    background: #f15a19;
    color: #fff;
    box-shadow: 0 2px 12px rgba(15, 27, 45, 0.2);
  }

  .evoque-mobile-bar-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
  }

  .evoque-mobile-bar-btn:active {
    background: rgba(255, 255, 255, 0.3);
  }

  .evoque-mobile-bar-text {
    min-width: 0;
    line-height: 1.15;
  }

  .evoque-mobile-bar-title {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.14em;
  }

  .evoque-mobile-bar-sub {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.92;
  }

  /* ------------------------------------------------------- estrutura */
  .shell {
    grid-template-columns: minmax(0, 1fr) !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding-top: 56px;
    box-sizing: border-box;
  }

  .main {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
  }

  /* ------------------------------- painel: so um contêiner de cartoes */
  .sidebar {
    position: fixed !important;
    top: 64px;
    left: 8px;
    bottom: auto !important;
    width: min(420px, calc(100vw - 52px)) !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 76px);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: translateX(calc(-100% - 16px));
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  body.evoque-menu-open .sidebar {
    transform: translateX(0);
    opacity: 1;
  }

  /* ------------------------------------------- cartao 1: o cabecalho */
  .menu-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px !important;
    border-radius: 16px;
    background: #ffffff !important;
    color: #0f1b2d !important;
    box-shadow: 0 12px 30px rgba(15, 27, 45, 0.18);
  }

  .menu-head-logo {
    flex: 0 0 auto;
    height: 36px !important;
    max-width: 62px !important;
    padding: 4px 6px;
    border-radius: 10px;
    background: #f2f5fa;
    object-fit: contain;
  }

  .menu-head-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .menu-head-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    color: #f15a19 !important;
  }

  .menu-head-sub {
    margin-top: 1px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
  }

  .evoque-menu-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #f15a19;
    cursor: pointer;
  }

  .evoque-menu-close:active {
    background: rgba(241, 90, 25, 0.12);
  }

  /* ----------------------------------------- cartao 2: lista de itens */
  .nav {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px !important;
    border-radius: 16px;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 27, 45, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .navlink {
    border-radius: 12px !important;
    padding: 11px 12px !important;
    margin: 0 !important;
  }

  /* ---------------------------------------- cartao 3: usuario e sair */
  .sidebar-foot {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding: 10px !important;
    border-radius: 16px;
    border-top: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 27, 45, 0.18);
  }

  /* ----------------------------------------------------- fundo escuro */
  .evoque-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 27, 45, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    cursor: pointer;
  }

  body.evoque-menu-open .evoque-menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Botoes Portal Evoque / Luz ficam lado a lado no topo do conteudo. */
  .shell-actions {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px !important;
    margin-bottom: 10px;
  }
}

/* Sem animacao para quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .evoque-menu-overlay {
    transition: none !important;
  }
}

/* Paginacao da lista some junto com a tabela na visao Cards. */
.equipment-view-cards .equipment-pagination-card { display: none; }

/* ==================================================================
   Equipamentos TI -- historico de posse (2026-09-04)

   Espelha o visual da aba Itens: mesma estrutura de card, tabela e
   modal, para a pagina nao parecer de outro sistema.
   ================================================================== */

.posse-table .tr {
  /* A primeira coluna guarda tipo + patrimonio + contador. Os tipos do
     catalogo chegam a "CENTRAL DE ALARME": 270px e o minimo para nao cortar
     o identificador da linha. Em tela estreita a tabela rola -- ver
     .posse-table-scroll. */
  grid-template-columns:
    minmax(270px, 1.9fr) minmax(120px, .85fr) minmax(120px, .95fr) minmax(85px, .6fr)
    minmax(85px, .55fr) minmax(115px, .8fr) minmax(150px, .85fr) !important;
}

.posse-uso-atual {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--field-top), var(--field-bottom));
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.posse-uso-atual:hover {
  border-color: var(--border-strong);
}

/* A regra geral de input poe width:100% e padding em TUDO, inclusive no
   checkbox -- que esticava para a largura da linha e achatava para 13px de
   altura. Tamanho explicito e `flex: none` o devolvem ao tamanho de caixa de
   marcar. Mesmo caminho do .monitoring-active-box, na aba Itens. */
.posse-uso-atual input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  padding: 0;
  accent-color: #f15a19;
  cursor: pointer;
}

.posse-uso-atual span {
  margin: 0;
  white-space: nowrap;
}

.posse-campo-devolucao[hidden] {
  display: none !important;
}

.posse-table .tr > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.posse-table .tr > .actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  overflow-wrap: normal;
  white-space: nowrap;
}

.posse-table-scroll {
  overflow-x: auto;
}

/* Etiqueta de patrimonio ao lado do nome do equipamento. */
.posse-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f8;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* O estado mais importante da tela: quem ainda esta com o equipamento. */
.posse-em-uso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8f7ee;
  color: #157347;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.posse-em-uso::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #1a9d54;
}

.posse-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.posse-paginacao:empty {
  display: none;
}

.posse-page-info {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.posse-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

/* ------------------------------------------------------------ modal */
.posse-modal[hidden] {
  display: none !important;
}

.posse-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 24px;
}

.posse-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.46);
}

.posse-card {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  padding: 18px !important;
}

.posse-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.posse-card-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
}

.posse-card-head span {
  font-size: 13px;
  color: #64748b;
}

.posse-fechar {
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 4px;
}

.posse-fechar:hover {
  color: #f15a19;
}

.posse-dica {
  margin: -4px 0 4px;
  font-size: 12px;
  color: #64748b;
}

.posse-form textarea {
  resize: vertical;
  min-height: 56px;
}

/* Uma coluna no celular, como as demais tabelas do sistema. */
@media (max-width: 980px) {
  .posse-table .tr {
    grid-template-columns: 1fr !important;
  }

  .posse-table .tr > .actions {
    justify-content: flex-start;
  }
}

/* Faixa que aparece ao abrir o historico de um equipamento. */
.posse-foco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid #ffd9c2;
  border-radius: 10px;
  background: #fff6f0;
  font-size: 13px;
  color: #7c2d12;
}

.posse-foco[hidden] {
  display: none !important;
}

/* O nome do equipamento e um atalho para o historico dele. */
.posse-abrir-historico {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: #b45309;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.posse-abrir-historico:hover {
  color: #f15a19;
}

/* ---- Seletor de equipamento: tipo e imagem primeiro ------------------
   Um <option> nativo nao aceita imagem, entao o campo virou um botao com
   lista propria. As cores saem dos mesmos tokens dos campos e do menu de
   opcoes nativo, para acompanhar todos os temas. */
.posse-picker {
  position: relative;
}

.posse-picker-botao {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--field-top), var(--field-bottom));
}

.posse-picker-botao:hover {
  border-color: var(--border-strong);
}

.posse-picker-resumo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.posse-picker .posse-picker-vazio {
  display: block;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.posse-picker-seta {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}

.posse-picker-img {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 3px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
}

.posse-picker .posse-picker-txt {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.posse-picker .posse-picker-tipo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.posse-picker .posse-picker-desc {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.posse-picker-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--option-bg);
  color: var(--option-fg);
  box-shadow: var(--shadow);
}

.posse-picker-busca {
  margin-bottom: 6px;
  font-size: 13px;
}

.posse-picker-lista {
  max-height: 268px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.posse-picker-opcao {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.posse-picker-opcao:hover {
  background: rgba(241, 90, 25, 0.14);
}

.posse-picker-opcao.ativa {
  background: rgba(241, 90, 25, 0.22);
}

.posse-picker-vazia {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---- Etapa 4: Unidades -- onde esta cada equipamento --------------- */
/* Equipamento que ainda nao recebeu localizacao nenhuma. */
.unidades-sem-lugar {
  color: var(--muted);
  font-style: italic;
}

.unidades-livre {
  color: var(--muted);
}

.unidades-resumo {
  margin: 0;
  padding: 10px 14px 2px;
  font-size: 12px;
  color: var(--muted);
}


/* ---- Etapa 4: cards de unidade + modal com os equipamentos ---------
   Os cards herdam .equipment-unit-card da aba de cadastro; aqui vai so o
   que e proprio desta tela. */
.unidades-page .unidades-cards {
  display: grid !important;
  margin-top: 4px;
}

/* O card do que ainda nao tem lugar nao compete com as unidades de verdade. */
.unidades-card-sem-lugar .equipment-unit-name {
  font-style: italic;
}

/* O overlay herda `display: grid` de .equipment-summary-modal-overlay, e
   estilo de autor vence o [hidden] do navegador. Sem esta regra o modal nunca
   fecha e cobre a pagina inteira. Mesmo formato dos outros modais do sistema. */
.unidades-modal-overlay[hidden] {
  display: none !important;
}

/* A tabela precisa de mais largura do que o modal de contagem original. */
.unidades-modal {
  width: min(880px, 100%) !important;
}

.unidades-modal-scroll {
  overflow-x: auto;
  padding: 8px 18px 18px;
}

.unidades-modal-table .tr {
  grid-template-columns:
    minmax(180px, 1.4fr) minmax(95px, .8fr) minmax(100px, .85fr)
    minmax(90px, .6fr) minmax(120px, .95fr) minmax(90px, .6fr) !important;
}

.unidades-modal-table .tr > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.unidades-modal-equip {
  display: flex;
  align-items: center;
  gap: 9px;
}

.unidades-modal-img {
  width: 30px;
  height: 30px;
  flex: none;
  padding: 3px;
  object-fit: contain;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #ffffff;
}

@media (max-width: 980px) {
  .unidades-modal-table .tr {
    grid-template-columns: 1fr !important;
  }
}

/* Lista de equipamentos: 6 colunas desde que o Nome saiu.
   Tipo | Marca | Modelo | Patrimonio | Serie | Acoes
   A largura dos botoes (190px) acompanha a regra geral. O empilhamento no
   celular continua vindo da regra geral, de onde esta tabela NAO foi excluida. */
.equipamentos-table .tr {
  grid-template-columns:
    minmax(95px, .65fr) minmax(130px, .95fr) minmax(140px, 1fr)
    minmax(125px, .85fr) minmax(120px, .8fr) 190px !important;
}

/* Aviso no pe da lista do seletor de equipamento. */
.posse-picker-nota {
  margin: 6px 2px 0;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

/* Quantas posses o equipamento tem ao todo. So aparece quando ha historico
   atras da linha -- se a lista mostra uma so, nao ha o que contar. */
.posse-conta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- Destaque do menu enquanto uma aba desta camada esta no ar -------
   O link aceso do React apaga por CSS, nao tirando a classe dele: quem
   escreve o className de um NavLink e o React, e ele so repoe ao
   re-renderizar -- o que nao acontece ao voltar para a mesma rota. */
html.evoque-camada-ativa .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink) {
  color: #334155 !important;
  background: transparent !important;
  border-color: transparent !important;
  /* A sombra laranja do ativo tambem sai -- era o halo que ficava preso. */
  box-shadow: none !important;
}

html.evoque-camada-ativa[data-theme="dark"] .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink),
html.evoque-camada-ativa[data-theme="black"] .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink) {
  color: #dbe3ee !important;
}

/* O hover continua respondendo, senao o link pareceria desligado. */
html.evoque-camada-ativa .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink):hover {
  background: #fff4ed !important;
  color: #ff5a00 !important;
}

/* ---- menu-mobile-contraste ------------------------------------------
   No celular os cartoes do menu sao sempre brancos, mas a cor do texto
   vinha do tema escuro (#dbe3ee): claro sobre branco. Texto escuro dentro
   dos cartoes, em qualquer tema. O item ativo continua branco no laranja. */
@media (max-width: 980px) {
  html body .sidebar .navlink:not(.active),
  html body .sidebar .navlink:not(.active):visited {
    color: #1e293b !important;
    -webkit-text-fill-color: currentColor;
  }

  html body .sidebar .navlink:not(.active) .navlink-sub {
    color: #64748b !important;
    opacity: 1 !important;
  }

  html body .sidebar .navlink:not(.active):hover {
    color: #f15a19 !important;
    background: #fff4ed !important;
  }

  /* Enquanto uma aba propria esta no ar, o link ativo do React fica neutro:
     aqui, neutro ESCURO -- o neutro claro do tema sumiria no branco. */
  html.evoque-camada-ativa body .sidebar .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink) {
    color: #1e293b !important;
    -webkit-text-fill-color: currentColor;
    background: transparent !important;
  }

  html.evoque-camada-ativa body .sidebar .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink) .navlink-sub {
    color: #64748b !important;
  }

  html body .sidebar .user-card {
    background: #f4f6fa !important;
  }

  html body .sidebar .user-name {
    color: #0f1b2d !important;
    -webkit-text-fill-color: currentColor;
  }

  html body .sidebar .user-login {
    color: #64748b !important;
    -webkit-text-fill-color: currentColor;
  }
}

/* ---- tablet-acoes-no-header -----------------------------------------
   Portal Evoque e Luz dentro da barra laranja, em tablet. So CSS: o
   .shell-actions e do React, entao ele e posicionado, nao movido. */
@media (min-width: 621px) and (max-width: 900px) {
  body .shell-actions {
    position: fixed !important;
    top: 0;
    right: 14px;
    z-index: 81;
    height: 56px;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  body .shell-actions .btn-top {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 13px;
    font-size: 13px;
    box-shadow: none !important;
  }

  /* O botao escuro de luz some contra o laranja sem um contorno claro. */
  body .shell-actions .theme-toggle:not(.theme-toggle-on) {
    border-color: rgba(255, 255, 255, 0.55) !important;
  }
}

/* ---- cards-tabela-responsivo ----------------------------------------
   Equipamentos e Localizacao abaixo de 980px: cabecalho some, cada linha
   vira um card com rotulo sobre cada valor. Rotulos por posicao da coluna
   (a marcacao e do React e nao traz rotulo por celula). */
@media (max-width: 980px) {
  .equipamentos-table .tr.th,
  .posse-table .tr.th {
    display: none !important;
  }

  .equipamentos-table .tr:not(.th),
  .posse-table .tr:not(.th) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
    align-items: start !important;
    padding: 14px 16px !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
  }

  .equipamentos-table .tr:not(.th) > div,
  .posse-table .tr:not(.th) > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .equipamentos-table .tr:not(.th) > div::before,
  .posse-table .tr:not(.th) > div::before {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
  }

  .equipamentos-table .tr:not(.th) > div:nth-child(1)::before { content: "Tipo"; }
  .equipamentos-table .tr:not(.th) > div:nth-child(2)::before { content: "Marca"; }
  .equipamentos-table .tr:not(.th) > div:nth-child(3)::before { content: "Modelo"; }
  .equipamentos-table .tr:not(.th) > div:nth-child(4)::before { content: "Patrimônio"; }
  .equipamentos-table .tr:not(.th) > div:nth-child(5)::before { content: "Série"; }
  .posse-table .tr:not(.th) > div:nth-child(1)::before { content: "Equipamento"; }
  .posse-table .tr:not(.th) > div:nth-child(2)::before { content: "Unidade"; }
  .posse-table .tr:not(.th) > div:nth-child(3)::before { content: "Com quem está"; }
  .posse-table .tr:not(.th) > div:nth-child(4)::before { content: "Setor"; }
  .posse-table .tr:not(.th) > div:nth-child(5)::before { content: "Retirada"; }
  .posse-table .tr:not(.th) > div:nth-child(6)::before { content: "Devolução"; }

  /* O rotulo nao cabe dentro de celula truncada: libera a quebra. */
  .equipamentos-table .tr:not(.th) > .truncate,
  .posse-table .tr:not(.th) > .truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .equipamentos-table .tr:not(.th) > .actions,
  .posse-table .tr:not(.th) > .actions {
    grid-column: 1 / -1;
    justify-self: stretch !important;
    width: 100%;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .equipamentos-table .tr:not(.th) > .actions::before,
  .posse-table .tr:not(.th) > .actions::before {
    content: none !important;
  }
}

@media (max-width: 620px) {
  .equipamentos-table .tr:not(.th),
  .posse-table .tr:not(.th) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* A etiqueta Usando atualmente nao cabe em meia largura de celular. */
  .posse-table .tr:not(.th) > div:nth-child(6) {
    grid-column: 1 / -1;
  }
}

/* E-mail do usuario no menu do celular: 4,4:1 era pouco para texto pequeno. */
@media (max-width: 980px) {
  html body .sidebar .user-login {
    color: #475569 !important;
  }
}

/* ---- filtros-equip-mesma-linha ---------------------------------------
   Aba Equipamentos: abaixo de 1180px a regra geral empilhava os filtros
   (.filters { 1fr }). Unidade, tipo e Filtrar ficam na mesma linha ate o
   tablet; so no celular (<=620px) voltam a empilhar. */
@media (min-width: 621px) and (max-width: 1180px) {
  .equipment-view-lista .filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    align-items: center;
  }
}

/* ---- cards-modal-unidades --------------------------------------------
   Modal da aba Unidades abaixo de 980px: mesmo padrao de card das tabelas
   de Equipamentos e Localizacao (a regra geral empilhava tudo). */
@media (max-width: 980px) {
  .unidades-modal-table .tr.th { display: none !important; }

  .unidades-modal-table .tr:not(.th) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
    align-items: start !important;
    padding: 14px 16px !important;
    margin: 0 0 10px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
  }

  .unidades-modal-table .tr:not(.th) > div {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .unidades-modal-table .tr:not(.th) > div::before {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
  }

  .unidades-modal-table .tr:not(.th) > div:nth-child(1)::before { content: "Equipamento"; }
  .unidades-modal-table .tr:not(.th) > div:nth-child(2)::before { content: "Marca"; }
  .unidades-modal-table .tr:not(.th) > div:nth-child(3)::before { content: "Modelo"; }
  .unidades-modal-table .tr:not(.th) > div:nth-child(4)::before { content: "Patrimônio"; }
  .unidades-modal-table .tr:not(.th) > div:nth-child(5)::before { content: "Com quem está"; }
  .unidades-modal-table .tr:not(.th) > div:nth-child(6)::before { content: "Retirada"; }

  /* A celula do equipamento e flex (imagem + nome): o rotulo ocupa a
     primeira linha inteira, a imagem e o nome ficam embaixo. */
  .unidades-modal-table .tr:not(.th) > .unidades-modal-equip {
    flex-wrap: wrap;
    row-gap: 3px;
  }

  .unidades-modal-table .tr:not(.th) > .unidades-modal-equip::before {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
}

@media (max-width: 620px) {
  .unidades-modal-table .tr:not(.th) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Equipamento com imagem pede a linha inteira no celular. */
  .unidades-modal-table .tr:not(.th) > .unidades-modal-equip {
    grid-column: 1 / -1;
  }
}

/* ---- barra-de-rolagem-visivel ---------------------------------------
   O CSS base esconde a barra (scrollbar-width: none) em .main e
   .page-scroll. No tablet isso some com a unica pista de que ha mais
   conteudo abaixo -- aqui ela volta. */
@media (max-width: 980px) {
  .main,
  .page-scroll {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
    scrollbar-color: var(--border-strong) transparent;
  }

  .main::-webkit-scrollbar,
  .page-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .main::-webkit-scrollbar-thumb,
  .page-scroll::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
    background-color: var(--border-strong);
  }

  .main::-webkit-scrollbar-track,
  .page-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* ---- dashboard-tres-cards -------------------------------------------
   Equipamentos / Unidades / Tipos cadastrados cabem lado a lado no
   tablet; a regra geral empilhava tudo abaixo de 980px. */
@media (min-width: 621px) and (max-width: 980px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ---- paginas-da-camada-rolam ----------------------------------------
   Itens, Localizacao e Unidades sao desenhadas por esta camada como
   `div.page` direto no .main -- e `.page` tem overflow:hidden, entao elas
   cortavam o conteudo sem deixar rolar (medido: 4850px dentro de 558px).
   As paginas do React nao sofriam disso porque usam .page-scroll. */
.page.monitoring-page,
.page.posse-page,
.page.unidades-page {
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 980px) {
  .page.monitoring-page,
  .page.posse-page,
  .page.unidades-page {
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
    scrollbar-color: var(--border-strong) transparent;
  }

  .page.monitoring-page::-webkit-scrollbar,
  .page.posse-page::-webkit-scrollbar,
  .page.unidades-page::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .page.monitoring-page::-webkit-scrollbar-thumb,
  .page.posse-page::-webkit-scrollbar-thumb,
  .page.unidades-page::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
    background-color: var(--border-strong);
  }
}

/* Cabecalho do modal da unidade: botao de relatorio ao lado do X. */
.unidades-modal-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
@media (max-width: 620px) {
  .unidades-modal-acoes .unidades-relatorio { padding: 6px 10px; font-size: 12px; }
}

/* ---- marca-picker: filtro de marca com varias escolhas ----------------
   Botao que abre um painel de opcoes marcaveis, com Limpar filtros e OK.
   Mesmos tokens dos campos, para acompanhar os temas. */
.marca-picker { position: relative; min-width: 0; }
.marca-picker-botao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; cursor: pointer; font: inherit;
}
.marca-picker-botao:disabled { cursor: not-allowed; opacity: .6; }
.marca-picker-rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-picker-seta { flex: none; color: var(--muted); font-size: 12px; }
.marca-picker-painel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  padding: 8px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--option-bg); color: var(--option-fg); box-shadow: var(--shadow);
}
.marca-picker-lista { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.marca-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font-weight: 700; font-size: 13px;
}
.marca-picker-item:hover { border-color: var(--border-strong); }
.marca-picker-item.marcado { border-color: #f15a19; background: rgba(241, 90, 25, .12); }
.marca-picker-item input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 0; padding: 0; accent-color: #f15a19; cursor: pointer;
}
.marca-picker-vazio { margin: 0; padding: 12px; font-size: 12px; color: var(--muted); text-align: center; }
.marca-picker-acoes {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ---- marca-picker-acima: o painel fica sobre a tabela ------------------
   Cada .card (backdrop-filter) e um contexto de empilhamento; o card da
   tabela, irmao posterior, pintava por cima do painel. Com o seletor
   aberto, o card dos filtros sobe. */
.card:has(.marca-picker.aberto) { z-index: 30; }
.filters:has(.marca-picker.aberto) { position: relative; z-index: 30; }

/* ---- hover-menu-escuro ------------------------------------------------
   No tema escuro, .navlink:hover (fundo claro + texto laranja) perdia a cor
   para html[data-theme=dark] .navlink (#dbe3ee): texto claro sobre fundo
   claro. Aqui o hover do escuro e laranja translucido com texto branco. */
html[data-theme="dark"] .navlink:not(.active):hover,
html[data-theme="black"] .navlink:not(.active):hover,
html.evoque-camada-ativa[data-theme="dark"] .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink):hover,
html.evoque-camada-ativa[data-theme="black"] .navlink.active:not(.monitoring-navlink):not(.posse-navlink):not(.unidades-navlink):not(.etiquetas-navlink):hover {
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor;
  background: rgba(241, 90, 25, 0.22) !important;
  border-color: rgba(241, 90, 25, 0.55) !important;
}
html[data-theme="dark"] .navlink:not(.active):hover .navlink-sub,
html[data-theme="black"] .navlink:not(.active):hover .navlink-sub {
  opacity: .85;
}

/* ---- status-legenda: o que cada status significa, junto do campo ------ */
.status-legenda { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--muted); }

/* ---- zoom-alto-desktop ------------------------------------------------
   Zoom de 125-175% numa tela comum deixa o viewport largo mas baixo
   (ex.: 1280x613). O menu lateral nao cabia e rolava com a barra
   escondida: Unidades e Auditoria sumiam sem pista. Aqui, em telas
   largas e baixas, o menu fica compacto e as barras de rolagem do menu e
   do conteudo aparecem (finas) quando ha o que rolar. */
@media (min-width: 981px) and (max-height: 760px) {
  .sidebar .menu-head {
    padding: 12px 18px 10px !important;
  }
  .sidebar .menu-head-title {
    font-size: 20px !important;
  }
  .sidebar .menu-head-sub {
    margin-top: 4px !important;
    font-size: 12px !important;
  }
  .sidebar .menu-head-logo {
    height: 28px !important;
  }
  .sidebar .nav {
    padding: 10px 10px !important;
    gap: 3px !important;
    scrollbar-width: thin !important;
  }
  .sidebar .nav::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  .sidebar .nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
  }
  .sidebar .navlink {
    padding: 8px 12px !important;
  }
  .sidebar .navlink-title {
    font-size: 14px !important;
  }
  .sidebar .navlink-sub {
    font-size: 11px !important;
  }
  .sidebar .sidebar-foot {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .sidebar .user-card {
    padding: 6px 8px !important;
  }
  .sidebar .user-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
  .sidebar .btn-logout {
    padding: 9px 12px !important;
    font-size: 14px !important;
  }

  /* O conteudo tambem rola com a barra escondida; com pouca altura a
     unica pista de que ha mais coisa abaixo e a barra. */
  .main,
  .page-scroll {
    scrollbar-width: thin !important;
  }
  .main::-webkit-scrollbar,
  .page-scroll::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  .main::-webkit-scrollbar-thumb,
  .page-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
  }
  .shell-actions {
    margin-bottom: 8px !important;
  }
}

/* Muito baixo (zoom de 175%+): o subtitulo dos itens sai para os seis
   caberem sem rolar. O titulo continua dizendo o que e cada aba. */
@media (min-width: 981px) and (max-height: 600px) {
  .sidebar .navlink-sub {
    display: none !important;
  }
  .sidebar .navlink {
    padding: 7px 12px !important;
  }
}

/* ---- rolagem-conteudo-desktop -----------------------------------------
   O CSS base esconde a barra de .page-scroll (scrollbar-width: none). No
   desktop ela volta, fina: so aparece quando ha o que rolar e e a unica
   pista de que existe conteudo abaixo (ex.: a lista de recentes). */
@media (min-width: 981px) {
  .page-scroll {
    scrollbar-width: thin !important;
  }
  .page-scroll::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  .page-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
  }
  .page-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  /* Folga no fim para o ultimo card nao encostar na borda. */
  .page-scroll > .dashboard-recent-equipment-card {
    margin-bottom: 8px !important;
  }
}

/* ---- dash-filter-inline: filtro por tipo ao lado do titulo Dashboard -- */
.topbar-right:has(.dash-filter-inline) { min-width: 0; }
.dash-filter-inline {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end; font-size: 13px;
}
.dash-filter-inline .muted { padding: 0; font-size: 13px; }
.dash-filter-inline .dash-filter-type { font-size: 15px; }
/* Em tela estreita o filtro desce para a linha de baixo do cabecalho. */
@media (max-width: 720px) {
  .topbar:has(.dash-filter-inline) { flex-wrap: wrap; }
  .topbar-right:has(.dash-filter-inline) { flex: 1 1 100%; }
  .dash-filter-inline { justify-content: flex-start; }
}

/* ---- pagina-sem-page-scroll --------------------------------------------
   O Dashboard nao envolve o conteudo em .page-scroll: os cards sao filhos
   diretos de .page, que tem overflow: hidden -- o que nao cabia sumia e
   nada rolava. Toda .page sem .page-scroll direto rola ela mesma. */
.page:not(:has(> .page-scroll)) {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  scrollbar-width: thin !important;
  padding-bottom: 8px;
}
.page:not(:has(> .page-scroll))::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
.page:not(:has(> .page-scroll))::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}
.page:not(:has(> .page-scroll))::-webkit-scrollbar-track {
  background: transparent;
}
/* Os filhos nao encolhem para caber: e a pagina que rola. */
.page:not(:has(> .page-scroll)) > * {
  flex-shrink: 0;
}

/* ---- filtro-altura-fixa: o filtro nao aumenta o cabecalho --------------
   O botao Limpar filtro (27px) era mais alto que a linha do titulo (23px)
   e esticava a barra. O bloco do filtro fica na altura da linha do titulo
   e o botao cabe nela. */
.dash-filter-inline {
  height: 23px;
  line-height: 23px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.dash-filter-inline .muted,
.dash-filter-inline .dash-filter-type {
  line-height: 23px;
}
.dash-filter-inline .btn.btn-xs {
  height: 23px;
  padding: 0 9px !important;
  line-height: 21px;
  font-size: 12px;
  box-sizing: border-box;
}
/* Em tela estreita o filtro desce para a segunda linha e pode quebrar. */
@media (max-width: 720px) {
  .dash-filter-inline {
    height: auto;
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* ---- filtro-altura-fixa-2: sem a linha de baseline do .topbar-right --- */
.topbar-right:has(.dash-filter-inline) {
  display: flex;
  align-items: center;
  height: 23px;
  line-height: 23px;
}
.dash-filter-inline {
  display: flex;
}
@media (max-width: 720px) {
  .topbar-right:has(.dash-filter-inline) {
    height: auto;
  }
}

/* ---- filtro-altura-fixa-3: a barra mede so pelo titulo ------------------
   O slot da direita tem altura zero; o filtro fica centrado nele e
   transborda igualmente para cima e para baixo. Nao entra na conta. */
@media (min-width: 721px) {
  .topbar-right:has(.dash-filter-inline) {
    height: 0 !important;
    line-height: 0;
    overflow: visible;
    align-items: center;
  }
}

/* ---- etiquetas: gerador de codigos com QR --------------------------- */
.etq-form { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(110px, .5fr) minmax(110px, .5fr) minmax(150px, .8fr) auto; gap: 10px; align-items: end; }
.etq-form .field { margin: 0; }
.etq-form .etq-prefixo { text-transform: uppercase; font-family: ui-monospace, Consolas, monospace; letter-spacing: .12em; font-weight: 700; }
.etq-form .etq-gerar { white-space: nowrap; padding: 9px 14px; }
.etq-ajuda { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.etq-erro { margin: 10px 0 0 !important; }
.etq-proximo { font-size: 13px; color: var(--muted); white-space: nowrap; }
.etq-proximo strong { font-family: ui-monospace, Consolas, monospace; font-size: 15px; color: #ff6d00; letter-spacing: .08em; }
.topbar-right:has(.etq-proximo) { display: flex; align-items: center; height: 0; overflow: visible; }

.etq-geradas-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.etq-geradas-topo .card-title { margin: 0; }
.etq-geradas-nota { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.etq-abas { padding: 10px !important; }
.etq-painel { display: contents; }
.etq-painel[hidden] { display: none !important; }
.etq-painel > .card { margin-top: 12px; }
.etq-geradas-topo .etq-busca { width: min(100%, 280px); }
.etq-geradas-acoes { display: flex; gap: 8px; }
.etq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.etq-etiqueta { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px;
                background: #ffffff; color: #111827; border: 1px solid #d8e1ee; }
.etq-qr { width: 104px; height: 104px; flex: none; image-rendering: pixelated; }
.etq-texto { min-width: 0; }
.etq-codigo { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 800; font-size: 20px; letter-spacing: .06em; color: #111827; white-space: nowrap; }
.etq-item-nome { margin-top: 2px; font-size: 12px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etq-marca-texto { margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .24em; color: #f15a19; }
.etq-table .tr { grid-template-columns: minmax(100px, .8fr) minmax(120px, 1fr) minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(130px, 1fr) auto !important; }
.etq-historico-nota { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.etq-codigo-celula { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .08em; color: #ff6d00; }
.etq-vazio[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .etq-form { grid-template-columns: 1fr 1fr; }
  .etq-form .etq-gerar { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .etq-table .tr.th { display: none !important; }
  .etq-table .tr:not(.th) { grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important; padding: 12px 14px !important;
    margin: 0 0 10px !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
  .etq-table .tr:not(.th) > .actions { grid-column: 1 / -1; justify-content: flex-end !important; }
}
@media (max-width: 620px) {
  .etq-form { grid-template-columns: 1fr; }
  .etq-grid { grid-template-columns: 1fr; }
}

/* ---- remover com modal --------------------------------------------- */
.evoque-remover-overlay {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px;
  background: rgba(2, 6, 23, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.evoque-remover {
  width: min(460px, 100%); border-radius: 16px; border: 1px solid #d8e1ee; background: #ffffff; color: #0f172a;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45); overflow: hidden;
}
html[data-theme="dark"] .evoque-remover, html[data-theme="black"] .evoque-remover {
  background: #111827; color: #e5e7eb; border-color: rgba(255, 255, 255, 0.12);
}
.evoque-remover-cabeca { padding: 14px 18px; background: #f15a19; color: #fff; }
.evoque-remover-cabeca h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.evoque-remover-corpo { padding: 16px 18px 4px; }
.evoque-remover-texto { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.evoque-remover-aviso, .evoque-remover-erro {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
}
.evoque-remover-aviso { background: #fff4ed; color: #9a3412; border: 1px solid #ffb37a; }
.evoque-remover-erro { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
html[data-theme="dark"] .evoque-remover-aviso, html[data-theme="black"] .evoque-remover-aviso {
  background: rgba(241, 90, 25, 0.16); color: #ffd3b8; border-color: rgba(241, 90, 25, 0.5);
}
html[data-theme="dark"] .evoque-remover-erro, html[data-theme="black"] .evoque-remover-erro {
  background: rgba(239, 68, 68, 0.16); color: #fecaca; border-color: rgba(239, 68, 68, 0.5);
}
.evoque-remover-aviso[hidden], .evoque-remover-erro[hidden], .evoque-remover-confirmar[hidden] { display: none !important; }
.evoque-remover-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 18px 16px; }
.evoque-remover-acoes .btn:disabled { opacity: .6; cursor: wait; }
.evoque-remover-overlay[data-modo="removendo"] { cursor: wait; }

/* ---- toast global (canto superior direito) --------------------------- */
.evoque-toast-pilha {
  position: fixed; top: 16px; right: 16px; z-index: 4000; display: grid; gap: 8px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.evoque-toast {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 700; color: #ffffff; background: #15803d;
  border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 14px 34px rgba(2, 6, 23, 0.35);
  animation: evoque-toast-entra .22s ease-out; pointer-events: auto;
}
.evoque-toast-erro { background: #b91c1c; }
.evoque-toast-icone {
  flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22); font-size: 13px; font-weight: 900;
}
.evoque-toast-texto { min-width: 0; line-height: 1.35; }
.evoque-toast.saindo { animation: evoque-toast-sai .35s ease-in forwards; }
@keyframes evoque-toast-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes evoque-toast-sai { to { opacity: 0; transform: translateY(-8px); } }
/* No celular a barra fixa do topo ocupa o canto: o aviso desce um pouco. */
@media (max-width: 900px) {
  .evoque-toast-pilha { top: 76px; }
}