@import url("./app-blue-theme.css");

:root {
  color-scheme: light;
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-focus: #2563eb;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding-left: var(--app-safe-left);
  padding-right: var(--app-safe-right);
  padding-bottom: var(--app-safe-bottom);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-x: none;
}

img, video, canvas, svg, iframe { max-width: 100%; }
button, a, input, select, textarea { touch-action: manipulation; }
button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] { min-height: 44px; }
input, select, textarea { max-width: 100%; font-size: max(16px, 1em); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--app-focus) !important;
  outline-offset: 3px !important;
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .58;
}

.app-skip-link {
  position: fixed;
  left: max(12px, var(--app-safe-left));
  top: max(8px, var(--app-safe-top));
  z-index: 2147483647;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  color: #0b2d57;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.app-skip-link:focus { transform: translateY(0); }

.app-network-status {
  position: fixed;
  left: 50%;
  bottom: max(12px, calc(var(--app-safe-bottom) + 8px));
  z-index: 2147483000;
  transform: translate(-50%, 150%);
  max-width: calc(100% - 28px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #7f1d1d;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 14px 38px rgba(0,0,0,.24);
  transition: transform .2s ease;
}
.app-network-status.show { transform: translate(-50%, 0); }
.app-network-status.online { background: #047857; }

.app-standard-footer {
  width: 100%;
  padding: 20px max(14px, var(--app-safe-right)) max(20px, calc(var(--app-safe-bottom) + 12px)) max(14px, var(--app-safe-left));
  text-align: center;
  line-height: 1.65;
}
.app-standard-footer small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.app-install-mode .topbar,
.app-install-mode .top,
.app-install-mode header:first-of-type {
  padding-top: max(12px, var(--app-safe-top));
}

@media (max-width: 720px) {
  body { padding-bottom: max(12px, var(--app-safe-bottom)); }
  input, select, textarea { font-size: 16px !important; }
  table { max-width: 100%; }
  .container, .wrap, main { min-width: 0; max-width: 100%; }
  .modal, [class*="-modal"] { padding-bottom: max(16px, var(--app-safe-bottom)) !important; }
}

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

@media (forced-colors: active) {
  button, a, input, select, textarea { border: 1px solid ButtonText; }
}

@media print {
  .app-skip-link, .app-network-status { display: none !important; }
}