.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}




















/* Phones */
@media (max-width: 767px) {
  /* The layout content already has its own margin, so pages drop their side padding. */
  .app-content > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Card headers: buttons and search move below the title instead of running off screen. */
  .app-content .ant-card-head-wrapper {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 8px 0;
  }
  /* antd sets flex: 1 on the title with higher specificity; a title of its own width
     lets the extra wrap to the next line instead of squeezing the title to nothing. */
  .app-content .ant-card-head-title {
    flex: 1 0 auto !important;
    max-width: 100%;
  }
  .app-content .ant-card-extra {
    max-width: 100%;
  }
  /* Lists: title and details get the full width; status and actions go below. */
  .app-content .ant-list-item {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .app-content .ant-list-item-meta {
    flex: 1 1 100% !important;
  }
  .app-content .ant-list-item-action {
    margin-inline-start: 0;
  }
  /* Collapse headers: the buttons on the right move below the label. */
  .app-content .ant-collapse-header {
    flex-wrap: wrap !important; /* antd sets nowrap with higher specificity */
    row-gap: 8px;
  }
  /* The label stays next to the expand arrow; only the buttons wrap. */
  .app-content .ant-collapse-header-text {
    flex: 1 1 calc(100% - 40px) !important;
    min-width: 0;
  }
  .app-content .ant-collapse-content-box {
    padding: 8px !important;
  }
  /* Month calendar: empty days do not need the desktop cell height. */
  .app-content .ant-picker-calendar-date-content {
    height: auto !important;
    min-height: 24px;
  }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.app {
  min-height: 100vh;
}

.app.dark {
  background-color: #141414;
  color: #fff;
}

.app.light {
  background-color: #f0f2f5;
  color: #000;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Ant Design overrides */
.ant-layout-sider {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ant-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ant-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

/* Device map popup: match app theme, hide default maplibre chrome */
.device-map-popup .maplibregl-popup-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.device-map-popup--light .maplibregl-popup-tip {
  border-top-color: #ffffff;
}
.device-map-popup--dark .maplibregl-popup-tip {
  border-top-color: #1f1f1f;
}