/* 168 shared cross-device and cross-browser compatibility layer. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-inline-end: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-inline-start: env(safe-area-inset-left, 0px);
  --app-vh: 1vh;
  --app-container: min(100% - 32px, 1440px);
  --app-container-wide: min(100% - 48px, 1760px);
}

html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(82px + var(--app-safe-top));
}

body {
  margin: 0;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: calc(var(--app-vh, 1vh) * 100);
  overflow-x: hidden;
  padding-inline-start: var(--app-safe-inline-start);
  padding-inline-end: var(--app-safe-inline-end);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
}

*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; max-width: 100%; }
button, a, input, select, textarea, [role='button'] { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), [role='button'], a[href], input[type='button'], input[type='submit'] { cursor: pointer; }
button { min-height: 44px; }
input, select, textarea { font-size: max(16px, 1rem); }

@supports (-webkit-touch-callout: none) {
  html, body { min-height: -webkit-fill-available; }
  body { min-height: -webkit-fill-available; }
  input, textarea { font-size: 16px; }
  .ui-sticky-surface { -webkit-transform: translateZ(0); transform: translateZ(0); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-blurred-surface { background-color: color-mix(in oklab, var(--surface-secondary) 98%, transparent); }
  :root[data-theme-mode='dark'] .ui-blurred-surface { background-color: color-mix(in oklab, var(--surface-secondary) 98%, transparent); }
}

/* Auth/login/register shells */
app-login, app-register, app-root { min-width: 0; }
.auth-shell-controls { max-width: calc(100vw - 24px); }
html[dir='rtl'] input, html[dir='rtl'] textarea { text-align: right; }

/* Control Panel and app workspace surfaces */
app-root, router-outlet { display: block; min-width: 0; }
.ui-page-container { width: 100%; max-width: var(--content-max-width); margin-inline: auto; }
.ui-mobile-stack { min-width: 0; }
.ui-responsive-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.ui-responsive-table table {
  min-width: max(100%, 48rem);
  border-collapse: separate;
}

@media (min-width: 1600px) {
  :root { --app-container: min(100% - 72px, 1560px); --app-container-wide: min(100% - 96px, 1920px); }
}

@media (min-width: 2200px) {
  :root { --app-container-wide: min(100% - 128px, 2160px); }
  body { font-size: 17px; }
}

@media (max-width: 1024px) {
  :root { --app-container: min(100% - 28px, 980px); }
  /* Control-panel: prevent desktop sidebars/tables from forcing page overflow. */
  .ui-responsive-sidebar { max-width: min(88vw, 320px); }
  .ui-responsive-content { margin-inline: 0; width: 100%; }
}

@media (max-width: 768px) {
  :root { --app-container: min(100% - 24px, 720px); }
  body { font-size: 15px; }

  .auth-shell-controls { top: max(10px, var(--app-safe-top)); inset-inline-end: max(10px, var(--app-safe-inline-end)); }
  html[dir='rtl'] .auth-shell-controls { inset-inline-start: max(10px, var(--app-safe-inline-start)); inset-inline-end: auto; }

  .ui-mobile-stack { display: grid; grid-template-columns: 1fr; }
  .ui-responsive-table th, .ui-responsive-table td { white-space: nowrap; }
}

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