/* RIETC SSO responsive layer — loaded last by Admin and Account surfaces. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

.main-column,
.content,
.account-content,
.panel,
.panel-head > *,
.page-heading > *,
.account-heading > *,
.application-workspace > *,
.dashboard-grid > *,
.stats > *,
.form-grid > *,
.profile-form > * { min-width: 0; }

img,
svg { max-width: 100%; }

.table-wrap {
  position: relative;
  max-width: 100%;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table { min-width: 640px; }
.table-wrap .compact-table { min-width: 680px; }

.sidebar-scrim { display: none; }

@media (min-width: 1600px) {
  .content { max-width: 1520px; }
  .account-shell { max-width: 1520px; }
  .stats { gap: 14px; }
  .dashboard-grid { gap: 14px; }
}

@media (max-width: 1180px) {
  .content { padding-inline: 24px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-workspace { gap: 10px; }
  .account-content { padding-inline: 26px; }
}

@media (max-width: 900px) {
  /* The drawer is out of flow; do not retain the desktop sidebar grid track. */
  .shell { grid-template-columns: minmax(0, 1fr); }

  .shell-frame,
  .account-page { padding: 0; }

  .shell,
  .account-shell {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .topbar,
  .account-topbar {
    padding-top: env(safe-area-inset-top);
  }

  .topbar {
    height: calc(60px + env(safe-area-inset-top));
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }

  .mobile-menu,
  .sidebar-toggle,
  .icon-button,
  .avatar { min-width: 40px; min-height: 40px; }

  .sidebar {
    z-index: 70;
    width: min(300px, calc(100vw - 48px));
    max-width: 88vw;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sidebar-scrim {
    position: fixed;
    z-index: 65;
    inset: 0;
    display: block;
    visibility: hidden;
    border: 0;
    background: rgba(15, 23, 42, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    backdrop-filter: blur(2px);
  }

  .shell.mobile-open .sidebar-scrim {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .side-nav a { min-height: 44px; height: auto; }
  .logout-button { min-height: 44px; }

  .content {
    padding: 22px max(18px, env(safe-area-inset-right)) max(38px, calc(24px + env(safe-area-inset-bottom))) max(18px, env(safe-area-inset-left));
  }

  .account-topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    min-height: calc(64px + env(safe-area-inset-top));
    padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  }

  .account-nav {
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .account-nav a {
    min-height: 44px;
    scroll-snap-align: start;
  }

  .account-content {
    padding: 24px max(18px, env(safe-area-inset-right)) max(38px, calc(24px + env(safe-area-inset-bottom))) max(18px, env(safe-area-inset-left));
  }

  .dialog-layer { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .dialog { max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

@media (max-width: 720px) {
  .page-heading,
  .account-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .page-heading > .primary-button,
  .page-heading > .secondary-button,
  .page-heading > .topbar-actions,
  .account-heading > .primary-button,
  .account-heading > .secondary-button { width: 100%; }

  .page-heading > .primary-button,
  .page-heading > .secondary-button,
  .account-heading > .primary-button,
  .account-heading > .secondary-button { justify-content: center; min-height: 44px; }

  .page-heading > .topbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-heading > .topbar-actions > * { width: 100%; justify-content: center; }

  .data-toolbar,
  .table-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .data-toolbar .search-control,
  .data-toolbar .grow-field,
  .data-toolbar .table-meta,
  .table-tools .search-control,
  .table-tools .table-meta { grid-column: 1 / -1; width: 100%; }

  .search-control,
  .compact-field select,
  .compact-field input { min-height: 42px; }

  .compact-field { min-width: 0; }
  .compact-field select,
  .compact-field input { width: 100%; min-width: 0; }

  .bulk-bar,
  .table-pager,
  .panel-head,
  .session-guidance { align-items: stretch; flex-direction: column; }

  .bulk-bar .row-actions,
  .table-pager > div { width: 100%; }
  .bulk-bar .row-actions > *,
  .table-pager > div > * { flex: 1; justify-content: center; min-height: 40px; }

  .panel-head { display: flex; }
  .panel-head > a,
  .panel-head > button { align-self: flex-start; min-height: 40px; }

  .notice { padding: 12px; }
  .profile-schema-grid,
  .profile-schema-section { grid-template-columns: 1fr; }

  .form-grid.two,
  .permission-list { grid-template-columns: 1fr; }

  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .profile-form input,
  .profile-form select,
  .add-email-form input { min-height: 44px; font-size: 16px; }

  .form-actions,
  .dialog-actions { flex-direction: column-reverse; }
  .form-actions > *,
  .dialog-actions > * { width: 100%; min-height: 44px; justify-content: center; }

  .security-summary,
  .session-guidance { grid-template-columns: auto minmax(0, 1fr); }
  .security-summary > a,
  .session-guidance > .secondary-button { grid-column: 1 / -1; justify-content: center; min-height: 44px; }

}

@media (max-width: 560px) {
  .topbar-actions { gap: 5px; }
  .breadcrumb > span,
  .breadcrumb > :not(b) { display: none; }
  .breadcrumb b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .content,
  .account-content { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }

  .page-heading h1,
  .account-heading h1 { font-size: clamp(20px, 6vw, 23px); }
  .page-heading .muted { line-height: 1.55; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { min-height: 112px; padding: 14px; }
  .stat-card strong { font-size: 26px; }
  .stat-icon { width: 36px; height: 36px; }

  .data-toolbar,
  .table-tools { grid-template-columns: 1fr; }
  .data-toolbar > *,
  .table-tools > * { grid-column: 1 !important; }

  .panel { border-radius: var(--radius-md); }
  .panel-head { padding: 12px; }
  .inset-toolbar { padding: 12px; }

  .table-wrap {
    background:
      linear-gradient(90deg, var(--sf) 30%, transparent),
      linear-gradient(270deg, var(--sf) 30%, transparent),
      linear-gradient(90deg, color-mix(in srgb, var(--tx) 12%, transparent), transparent 18px),
      linear-gradient(270deg, color-mix(in srgb, var(--tx) 12%, transparent), transparent 18px);
    background-attachment: local, local, scroll, scroll;
    background-position: left, right, left, right;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 18px 100%, 18px 100%;
  }

  th,
  td { padding-inline: 12px; }

  .kv-list { grid-template-columns: 1fr; }

  .profile-form,
  .add-email-form { padding: 14px 12px; }
  .profile-form { grid-template-columns: 1fr; }
  .profile-form-actions { align-items: stretch; flex-direction: column; }
  .profile-form-actions .primary-button,
  .add-email-form .secondary-button { width: 100%; min-height: 44px; justify-content: center; }

  .dialog-layer {
    align-items: end;
    padding: env(safe-area-inset-top) 0 0;
  }

  .dialog,
  .dialog.wide,
  .account-dialog {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: sheet-in;
  }

  .dialog-head { padding: 16px; }
  .dialog-head .icon-button { min-width: 44px; min-height: 44px; }

  .toast {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: max(10px, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .login-story { padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 20px max(18px, env(safe-area-inset-left)); }
  .login-copy { margin-top: 34px; }
  .login-copy h1 { font-size: clamp(24px, 8vw, 30px); }
  .login-copy p { line-height: 1.6; }
  .login-footer { margin-top: 24px; }
  .login-form-side { padding: 28px max(12px, env(safe-area-inset-right)) max(34px, calc(20px + env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left)); }
  .login-theme-button { top: 12px; right: max(12px, env(safe-area-inset-right)); }
  .login-card { width: 100%; padding: 24px 18px; }
  .login-form input { min-height: 46px; font-size: 16px; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 10px; }
  .account-topbar { padding-inline: 10px; }
  .brand-logo-account { width: 78px; height: 38px; }
  .account-title > span:last-child { display: none; }
  .account-user { gap: 4px; }
  .account-user .secondary-button { min-width: 40px; min-height: 40px; }
  .page-heading > .topbar-actions { grid-template-columns: 1fr; }
  .login-story { padding-inline: 14px; }
  .brand-logo-login { width: 126px; height: 58px; }
  .login-copy h1 { font-size: 23px; }
  .login-copy p { font-size:12px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .login-layout { grid-template-columns: minmax(300px, .8fr) minmax(380px, 1.2fr); }
  .login-story { min-height: 100dvh; padding: 22px 28px; }
  .login-copy { margin: auto 0 12px; }
  .login-copy h1 { font-size: 28px; }
  .login-copy p { margin-top: 8px; font-size:12px; }
  .login-capabilities,
  .login-footer { display: none; }
  .login-form-side { min-height: 100dvh; padding-block: 22px; }
  .login-card { padding: 22px; }
}

@media (hover: none), (pointer: coarse) {
  button,
  a,
  input[type='checkbox'],
  input[type='radio'],
  select { touch-action: manipulation; }

  .primary-button,
  .secondary-button,
  .danger-button,
  .small-button,
  .row-action,
  .text-action { min-height: 44px; }

  .side-nav a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-scrim { transition: none; }
}