/* JATOL_MOBILE_DASHBOARD_UI_V1 */
:root {
  --jatol-bg: #f6f8fb;
  --jatol-card: #ffffff;
  --jatol-border: rgba(15, 23, 42, .10);
  --jatol-text: #0f172a;
  --jatol-muted: #64748b;
  --jatol-primary: #0f766e;
  --jatol-warn: #b45309;
  --jatol-danger: #b91c1c;
  --jatol-soft: rgba(15, 118, 110, .10);
}

html.jatol-block8-ui-v1 {
  background: var(--jatol-bg);
}

html.jatol-block8-ui-v1 body {
  color: var(--jatol-text);
}

html.jatol-block8-ui-v1 a {
  text-underline-offset: 3px;
}

.jatol-block8-filter,
.jatol-block8-cleanup-link,
.jatol-block8-mobile-note {
  box-sizing: border-box;
}

.jatol-block8-filter {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--jatol-border);
  border-radius: 18px;
  background: var(--jatol-card);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.jatol-block8-filter-title {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
}

.jatol-block8-filter-grid {
  display: grid;
  grid-template-columns: 1fr 160px 160px auto;
  gap: 10px;
  align-items: center;
}

.jatol-block8-filter input,
.jatol-block8-filter select,
.jatol-block8-filter button {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--jatol-border);
  padding: 8px 12px;
  background: #fff;
  color: var(--jatol-text);
}

.jatol-block8-filter button {
  cursor: pointer;
  font-weight: 700;
}

.jatol-block8-count {
  margin-top: 9px;
  font-size: 13px;
  color: var(--jatol-muted);
}

.jatol-block8-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 4px 2px 0;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  border: 1px solid transparent;
}

.jatol-block8-badge-dark {
  color: #78350f;
  background: #fef3c7;
  border-color: #fde68a;
}

.jatol-block8-badge-flag {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fecaca;
}

.jatol-block8-badge-ok {
  color: #14532d;
  background: #dcfce7;
  border-color: #bbf7d0;
}

.jatol-block8-thumb {
  width: 82px;
  height: 62px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--jatol-border);
  margin: 4px 8px 4px 0;
  vertical-align: middle;
  background: #e2e8f0;
}

.jatol-block8-cleanup-link {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .25);
}

.jatol-block8-patrol-mobile video,
.jatol-block8-patrol-mobile canvas,
.jatol-block8-patrol-mobile img {
  max-width: 100%;
}

.jatol-block8-patrol-mobile video,
.jatol-block8-patrol-mobile canvas {
  border-radius: 18px;
  background: #020617;
}

.jatol-block8-patrol-mobile button,
.jatol-block8-patrol-mobile input,
.jatol-block8-patrol-mobile select,
.jatol-block8-patrol-mobile textarea {
  font-size: 16px;
}

@media (max-width: 820px) {
  html.jatol-block8-ui-v1 body {
    overflow-x: hidden;
  }

  html.jatol-block8-ui-v1 main,
  html.jatol-block8-ui-v1 .container,
  html.jatol-block8-ui-v1 .max-w-7xl,
  html.jatol-block8-ui-v1 .mx-auto {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .jatol-block8-filter-grid {
    grid-template-columns: 1fr;
  }

  .jatol-block8-filter input,
  .jatol-block8-filter select,
  .jatol-block8-filter button {
    width: 100%;
  }

  html.jatol-block8-ui-v1 table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    -webkit-overflow-scrolling: touch;
  }

  html.jatol-block8-ui-v1 th,
  html.jatol-block8-ui-v1 td {
    white-space: nowrap;
  }

  html.jatol-block8-ui-v1 button,
  html.jatol-block8-ui-v1 .btn,
  html.jatol-block8-ui-v1 a[role="button"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  .jatol-block8-cleanup-link {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    border-radius: 16px;
  }

  .jatol-block8-patrol-mobile {
    background: #f8fafc;
  }

  .jatol-block8-patrol-mobile h1,
  .jatol-block8-patrol-mobile h2,
  .jatol-block8-patrol-mobile h3 {
    line-height: 1.2;
  }

  .jatol-block8-patrol-mobile form,
  .jatol-block8-patrol-mobile section,
  .jatol-block8-patrol-mobile .card,
  .jatol-block8-patrol-mobile .panel,
  .jatol-block8-patrol-mobile .box {
    border-radius: 18px;
  }

  .jatol-block8-patrol-mobile input,
  .jatol-block8-patrol-mobile select,
  .jatol-block8-patrol-mobile textarea {
    min-height: 44px;
  }

  .jatol-block8-patrol-mobile .toolbar,
  .jatol-block8-patrol-mobile .actions,
  .jatol-block8-patrol-mobile .button-row,
  .jatol-block8-patrol-mobile .quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}