:root {
  --ui-sidebar: 272px;
  --ui-radius: 15px;
  --ui-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
  --ui-focus: 0 0 0 3px rgba(57, 199, 243, 0.24);
}

html {
  font-size: 16px;
}

body.app-shell {
  min-height: 100vh;
  font-family: "DM Sans", Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 16px !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-shell button,
.app-shell input:not([type="checkbox"]):not([type="radio"]),
.app-shell select,
.app-shell textarea {
  font-family: inherit;
}

.app-shell button,
.app-shell a,
.app-shell input,
.app-shell select,
.app-shell textarea {
  outline: none;
}

.app-shell button:focus-visible,
.app-shell a:focus-visible,
.app-shell input:focus-visible,
.app-shell select:focus-visible,
.app-shell textarea:focus-visible {
  border-color: #39c7f3 !important;
  box-shadow: var(--ui-focus) !important;
}

.app-shell button:not(:disabled),
.app-shell select:not(:disabled),
.app-shell a[href] {
  cursor: pointer;
}

.app-shell button:not(:disabled) {
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.app-shell button:not(:disabled):active {
  transform: translateY(1px);
}

.app-shell:not(.app-platform) > aside {
  width: var(--ui-sidebar);
  padding: 25px 18px 20px;
  scrollbar-color: #263a52 transparent;
  scrollbar-width: thin;
}

.app-shell:not(.app-platform) > main {
  margin-left: var(--ui-sidebar);
  padding: 32px 36px 56px;
}

.app-shell:not(.app-platform) > aside nav {
  gap: 5px;
}

.app-shell:not(.app-platform) > aside nav > p,
.app-monitoring .nav-label {
  margin: 18px 11px 7px;
  color: #7186a0;
  font-size: 10.5px !important;
  font-weight: 800;
  letter-spacing: 1.35px;
}

.app-shell:not(.app-platform) > aside nav a,
.app-shell:not(.app-platform) > aside nav button,
.app-monitoring .nav-item {
  min-height: 57px;
  padding: 10px 11px;
  border-radius: 11px;
  gap: 11px;
}

.app-shell .nav-icon,
.app-monitoring .nav-item .icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  font-size: 16px;
}

.app-shell:not(.app-platform) > aside nav strong,
.app-monitoring .nav-copy strong {
  color: #3ca8ff;
  font-size: 13.5px;
  line-height: 1.25;
}

.app-shell:not(.app-platform) > aside nav small,
.app-monitoring .nav-copy small {
  color: #edf4fb;
  font-size: 11px;
  line-height: 1.25;
}

.app-shell:not(.app-platform) > aside nav a:hover strong,
.app-shell:not(.app-platform) > aside nav button:hover strong,
.app-shell:not(.app-platform) > aside nav .active strong,
.app-monitoring .nav-item:hover .nav-copy strong,
.app-monitoring .nav-item.active .nav-copy strong {
  color: #63c8ff;
}

.app-shell:not(.app-platform) > aside nav a:hover small,
.app-shell:not(.app-platform) > aside nav button:hover small,
.app-shell:not(.app-platform) > aside nav .active small,
.app-monitoring .nav-item:hover .nav-copy small,
.app-monitoring .nav-item.active .nav-copy small {
  color: #ffffff;
}

.app-shell .identity,
.app-shell .logo,
.app-monitoring .brand {
  padding-bottom: 25px;
}

.app-shell .identity img,
.app-shell .logo img,
.app-monitoring .brand-logo {
  min-height: 52px;
}

.app-shell .identity small,
.app-shell .logo small,
.app-monitoring .brand small {
  color: #8297b0;
  font-size: 9.5px;
  line-height: 1.35;
}

.app-shell:not(.app-platform) > main > header {
  min-height: 72px;
  height: auto;
  margin-bottom: 25px;
}

.app-shell:not(.app-platform) > main > header p,
.app-monitoring .eyebrow {
  color: #8496ad;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.35px;
}

.app-shell:not(.app-platform) > main > header h1 {
  font-size: clamp(26px, 2vw, 32px);
  letter-spacing: -0.55px;
  line-height: 1.16;
}

.app-shell .panel,
.app-operations .metrics article,
.app-operations .table-card,
.app-operations .filters,
.app-operations .report-card,
.app-operations .report-tools,
.app-platform .card,
.app-platform .metric {
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

.app-shell .panel {
  padding: 22px;
}

.app-shell .panel h2,
.app-shell .panel-title h2,
.app-shell .panel-head h2 {
  font-size: 18px;
  line-height: 1.3;
}

.app-shell .panel p,
.app-shell .panel-title p,
.app-shell .panel-head p {
  font-size: 12.5px;
  line-height: 1.55;
}

.app-shell input,
.app-shell select,
.app-shell textarea {
  min-height: 43px;
  border-radius: 9px;
  font-size: 14px !important;
}

.app-shell button {
  min-height: 39px;
  border-radius: 9px;
  font-size: 12.5px;
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
  min-height: 0;
}

/* Central de monitoramento */
.app-monitoring .sidebar + main {
  margin-left: var(--ui-sidebar);
}

body.app-monitoring.dashboard-fullscreen > .sidebar {
  display: none;
}

body.app-monitoring.dashboard-fullscreen > main {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  padding: 22px 28px 36px;
}

body.app-monitoring.dashboard-fullscreen .bottom-grid {
  display: none !important;
}

body.app-monitoring.dashboard-fullscreen .content-grid {
  grid-template-columns: minmax(0, 2fr) minmax(330px, 0.72fr);
}

.app-monitoring .sidebar {
  width: var(--ui-sidebar);
}

.app-monitoring .system-card {
  padding: 16px;
  border-radius: 12px;
}

.app-monitoring .system-card strong {
  font-size: 12.5px;
}

.app-monitoring .system-card p,
.app-monitoring .system-card small {
  font-size: 10.5px;
  line-height: 1.45;
}

.app-monitoring .profile strong {
  font-size: 12px;
}

.app-monitoring .profile small,
.app-monitoring .profile button {
  font-size: 10.5px;
}

.app-monitoring .realtime-status,
.app-monitoring .site-select {
  min-height: 43px;
  height: 43px;
  font-size: 12.5px;
}

.app-monitoring .circle-btn {
  width: 43px;
  height: 43px;
  font-size: 16px;
}

.app-monitoring .camera-pin,
.app-monitoring .dots,
.app-monitoring .modal-close {
  min-height: 0;
}

.app-monitoring .camera-pin {
  width: 30px;
  height: 30px;
}

.app-monitoring .dots {
  width: 34px;
  height: 34px;
}

.app-monitoring .status-strip strong {
  font-size: 15px;
}

.app-monitoring .status-strip p,
.app-monitoring .status-metrics span {
  font-size: 11.5px;
}

.app-monitoring .status-metrics b {
  font-size: 20px;
}

.app-monitoring .camera-wall-controls label {
  font-size: 11.5px;
}

.app-monitoring .camera-wall-controls select,
.app-monitoring .camera-wall-controls button {
  min-height: 39px;
  font-size: 12px;
}

.app-monitoring .camera {
  border-radius: 13px;
}

.app-monitoring .camera-top span,
.app-monitoring .camera-card-identity small,
.app-monitoring .camera-card-meta .ai-tag,
.app-monitoring .preview-quality-banner {
  font-size: 11px;
}

.app-monitoring .camera-card-identity strong {
  font-size: 13.5px;
}

.app-monitoring .event {
  min-height: 76px;
  padding: 13px 12px;
  border-radius: 11px;
}

.app-monitoring .event strong {
  font-size: 14px;
}

.app-monitoring .event p,
.app-monitoring .event-time,
.app-monitoring .event-time i {
  font-size: 11.5px;
  line-height: 1.45;
}

.app-monitoring .event button {
  min-width: 42px;
  font-size: 12px;
}

.app-monitoring .health-row span,
.app-monitoring .health-row small,
.app-monitoring .health-footer {
  font-size: 11.5px;
}

.app-monitoring .health-row strong,
.app-monitoring .health-footer strong {
  font-size: 13px;
}

.app-monitoring .modal-card label,
.app-monitoring .event-detail label {
  font-size: 12px;
}

.app-monitoring .modal-card h2,
.app-monitoring .event-detail h2 {
  font-size: 21px;
}

/* Ocorrencias e relatorios */
.app-operations .identity,
.app-admin .logo {
  gap: 8px;
}

.app-operations .aside-status strong,
.app-operations .aside-status small,
.app-admin .aside-context strong,
.app-admin .aside-context span,
.app-admin .aside-context small {
  font-size: 11px;
  line-height: 1.4;
}

.app-operations .header-right span,
.app-admin .session-actions span {
  font-size: 12px;
}

.app-operations .header-right button,
.app-operations .report-tools button,
.app-admin .session-actions button {
  min-height: 41px;
  padding-inline: 15px;
  font-size: 12px;
}

.app-operations .metrics {
  gap: 14px;
  margin-bottom: 16px;
}

.app-operations .metrics article {
  min-height: 126px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app-operations .metrics span {
  color: #91a4bb;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.9px;
}

.app-operations .metrics strong {
  font-size: 32px;
  line-height: 1.1;
  margin: 9px 0 5px;
}

.app-operations .metrics small {
  color: #8a9bb0;
  font-size: 11.5px;
  text-align: center;
}

.app-operations .filters {
  gap: 11px;
  padding: 16px;
}

.app-operations .filters label,
.app-operations .report-tools label {
  color: #93a4b8;
  font-size: 11.5px;
  font-weight: 650;
}

.app-operations .filters input,
.app-operations .filters select,
.app-operations .report-tools select,
.app-operations .filters button {
  min-height: 42px;
  height: 42px;
  margin-top: 6px;
  font-size: 13px;
}

.app-operations .table-head {
  padding: 13px 17px;
  color: #8599b1;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.75px;
}

.app-operations .event-row {
  min-height: 78px;
  padding: 13px 17px;
}

.app-operations .event-row strong {
  font-size: 13px;
}

.app-operations .event-row small,
.app-operations .event-row > span {
  font-size: 11px;
  line-height: 1.4;
}

.app-operations .status {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 10px !important;
}

.app-operations .pagination button,
.app-operations .pagination span {
  font-size: 11.5px;
}

.app-operations .report-intro span,
.app-operations .scheduled-heading > div:first-child > span,
.app-operations .report-intro > strong {
  font-size: 10.5px;
}

.app-operations .report-intro p,
.app-operations .scheduled-heading p {
  font-size: 12px;
}

/* Administracao */
.app-admin .panel {
  border-radius: var(--ui-radius);
}

.app-admin form label,
.app-admin .form-help {
  color: #9aacbf;
  font-size: 12px;
  line-height: 1.5;
}

.app-admin .list-item {
  min-height: 66px;
  padding: 15px 5px;
  gap: 12px;
}

.app-admin .list-item strong,
.app-admin .table-row strong {
  font-size: 13.5px;
}

.app-admin .list-item small,
.app-admin .table-row,
.app-admin .module-family span {
  font-size: 11.5px;
  line-height: 1.5;
}

.app-admin .table-row.head {
  color: #8498ae;
  font-size: 10.5px;
  font-weight: 750;
}

.app-admin .pill,
.app-admin .module-tag {
  font-size: 10.5px;
}

.app-admin .module-family {
  gap: 12px;
}

.app-admin .module-family div {
  min-height: 112px;
  padding: 17px;
  border-radius: 12px;
}

.app-admin .module-family strong {
  font-size: 14px;
}

.app-admin .health-summary small,
.app-admin .health-history-heading small,
.app-admin .health-history-note,
.app-admin .health-history-grid small {
  font-size: 11.5px;
}

.app-admin .health-history-grid strong {
  font-size: 13px;
}

/* Gestao da plataforma */
.app-platform .login-card {
  width: min(440px, 100%);
  padding: 28px;
}

.app-platform .login-card img {
  width: 245px;
}

.app-platform h1 {
  font-size: 27px;
}

.app-platform h2 {
  font-size: 19px;
}

.app-platform p,
.app-platform small,
.app-platform label {
  font-size: 12.5px;
  line-height: 1.55;
}

.app-platform input,
.app-platform button {
  min-height: 44px;
  font-size: 13.5px;
}

.app-platform main {
  padding: 30px;
}

.app-platform .metric {
  min-height: 112px;
  display: grid;
  place-content: center;
  text-align: center;
}

.app-platform .metric strong {
  font-size: 31px;
}

.app-platform .metric span,
.app-platform .pill {
  font-size: 11px;
}

@media (max-width: 1180px) {
  :root {
    --ui-sidebar: 248px;
  }

  .app-shell:not(.app-platform) > main {
    padding-inline: 25px;
  }

  .app-operations .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  :root {
    --ui-sidebar: 100%;
  }

  .app-shell:not(.app-platform) > aside,
  .app-monitoring .sidebar {
    position: static;
    width: 100%;
    max-height: none;
    padding: 18px;
  }

  .app-shell:not(.app-platform) > aside nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell:not(.app-platform) > aside nav > p,
  .app-monitoring .nav-label {
    grid-column: 1 / -1;
  }

  .app-shell:not(.app-platform) > main,
  .app-monitoring .sidebar + main {
    width: 100%;
    margin-left: 0;
    padding: 24px 18px 42px;
  }

  .app-shell:not(.app-platform) > main > header {
    align-items: flex-start;
    gap: 16px;
  }

  .app-monitoring .header-actions,
  .app-operations .header-right,
  .app-admin .session-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .app-operations .metrics,
  .app-platform .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-operations .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .app-shell:not(.app-platform) > aside nav {
    grid-template-columns: 1fr;
  }

  .app-shell:not(.app-platform) > aside nav > p,
  .app-monitoring .nav-label {
    grid-column: auto;
  }

  .app-shell:not(.app-platform) > main > header {
    display: flex;
    flex-direction: column;
  }

  .app-operations .metrics,
  .app-operations .filters,
  .app-platform .metrics {
    grid-template-columns: 1fr;
  }

  .app-admin .module-family {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}