/* ========================================================================== 
   ClarioDB 0.9.57 — garde-fous viewport des skins 01–16
   --------------------------------------------------------------------------
   Cette couche est chargée après le skin actif. Elle ne définit aucune
   identité visuelle : elle protège uniquement la géométrie partagée contre
   les petits viewports, le zoom navigateur et les libellés longs.
   ========================================================================== */

/* Les barres doivent réellement porter leur contexte d'empilement. Sans
   position, le z-index du shell Panel n'empêchait pas le contenu du dashboard
   de repeindre au-dessus du menu Compte. */
body[data-ui-skin] .topbar,
body[data-ui-skin] .panel-topbar {
  position: relative;
  min-width: 0;
}

body[data-ui-skin] :where(
  .brand,
  .brand-text,
  .topbar-right,
  .panel-topbar-right,
  .breadcrumb,
  .user-dropdown-wrap,
  .panel-main,
  .panel-narrow,
  .dashboard-header,
  .conn-grid,
  .conn-tile-wrap,
  .conn-tile,
  .conn-tile-body
) {
  min-width: 0;
}

/* Menus Compte : même borne pour Standard et Premium, y compris au zoom.
   L'ancrage reste natif (position:absolute) et le contrôleur JS ne change pas. */
body[data-ui-skin] .user-dropdown-wrap {
  max-width: 100%;
}

body[data-ui-skin] .user-dropdown-trigger {
  min-width: 0;
  max-width: min(260px, 100%);
}

body[data-ui-skin] .user-dropdown-menu {
  right: 0;
  left: auto;
  box-sizing: border-box;
  width: min(270px, calc(100vw - 24px));
  min-width: min(200px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(480px, calc(100vh - 24px));
  max-height: min(480px, calc(100dvh - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body[data-ui-skin] .user-dropdown-item,
body[data-ui-skin] .user-dropdown-language {
  overflow-wrap: anywhere;
}

body[data-ui-skin] .user-dropdown-item-danger:hover {
  color: var(--danger);
  background: var(--danger-subtle);
}

/* Les alertes historiques employaient des couleurs claires fixes. Les tokens
   rendent désormais les trois états lisibles dans les skins nocturnes aussi. */
body[data-ui-skin] .alert {
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body[data-ui-skin] .alert-danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-subtle);
}

body[data-ui-skin] .alert-success {
  color: var(--teal-dark);
  border-color: color-mix(in srgb, var(--teal) 44%, transparent);
  background: var(--teal-subtle);
}

body[data-ui-skin] .alert-info {
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 42%, transparent);
  background: color-mix(in srgb, var(--info) 10%, transparent);
}

/* Dashboard : une colonne ne doit jamais imposer 300 px à une zone plus
   étroite. min(100%, 300px) garde la densité desktop et absorbe le zoom. */
body[data-ui-skin] .panel-narrow {
  width: 100%;
}

body[data-ui-skin] .conn-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

body[data-ui-skin] .conn-tile-wrap,
body[data-ui-skin] .conn-tile {
  width: 100%;
  max-width: 100%;
}

body[data-ui-skin] .conn-tile-state {
  min-width: 0;
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 4px;
}

body[data-ui-skin] .conn-tile-state > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-ui-skin] .conn-tile-menu {
  width: min(240px, calc(100vw - 24px));
  min-width: min(220px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(420px, calc(100dvh - 24px));
  overflow-x: hidden;
  overflow-y: auto;
}

/* Le repli mobile du shell App était complet pour Premium seulement. La règle
   commune rend désormais la page scrollable et garde le rail borné, afin que
   le contenu principal reste atteignable dans les huit skins Standard. */
@media (max-width: 760px) {
  body[data-ui-skin].shell-panel,
  body[data-ui-skin].shell-app,
  body[data-ui-skin].shell-admin {
    height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-ui-skin].shell-app .app,
  body[data-ui-skin].shell-admin .app {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    padding: 0;
    overflow: visible;
  }

  body[data-ui-skin].shell-app .sidebar,
  body[data-ui-skin].shell-admin .sidebar {
    width: 100%;
    height: min(68dvh, 620px);
    min-height: 360px;
    max-height: 620px;
    margin: 0;
    overflow: hidden;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  body[data-ui-skin].shell-app .main,
  body[data-ui-skin].shell-admin .main {
    width: 100%;
    height: auto;
    min-height: 70dvh;
    margin: 0;
    overflow: visible;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  body[data-ui-skin] .topbar,
  body[data-ui-skin] .panel-topbar {
    width: 100%;
    height: auto;
    min-height: 54px;
    padding: 8px 14px;
    gap: 8px;
  }

  body[data-ui-tier="premium"] .topbar-right,
  body[data-ui-tier="premium"] .panel-topbar-right {
    transform: none;
  }

  body[data-ui-skin] .topbar-right,
  body[data-ui-skin] .panel-topbar-right {
    min-width: 0;
    max-width: 100%;
    gap: 6px;
  }

  body[data-ui-skin] .breadcrumb {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body[data-ui-skin] .breadcrumb > * {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-ui-skin] .panel-main {
    padding: 30px 16px 44px;
  }

  body[data-ui-skin] .dashboard-header {
    align-items: flex-start;
  }

  body[data-ui-skin] .dashboard-header > .btn {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }

  body[data-ui-skin] :where(.topbar-right, .panel-topbar-right) .user-dropdown-wrap {
    flex: 0 1 150px;
    width: min(150px, 100%);
    max-width: 150px;
  }

  body[data-ui-skin] :where(.topbar-right, .panel-topbar-right) .user-dropdown-trigger {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  body[data-ui-skin] .user-dropdown-email {
    min-width: 0;
    max-width: 126px;
  }

  /* Le menu Créer est ancré sur le bord droit du rail. Une ancienne règle
     `left:0` active sous 900 px le faisait sortir du rail, puis le coupait car
     le rail possède volontairement overflow:hidden. */
  body[data-ui-skin] .sidebar-create-menu {
    right: 0;
    left: auto;
    width: min(190px, calc(100vw - 24px));
    min-width: min(190px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    overflow-wrap: anywhere;
  }

  body[data-ui-skin] .mode-toggle {
    flex: 0 1 122px;
    width: 122px;
    min-width: 0;
  }

  body[data-ui-skin] .mode-toggle button {
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
  }

  body[data-ui-skin].shell-auth .auth-wrap {
    padding: 28px 16px;
  }

  body[data-ui-skin].shell-auth .auth-inner {
    width: min(100%, 460px);
  }
}

@media (max-width: 640px) {
  body[data-ui-skin] .panel-topbar .brand-tagline {
    display: none;
  }

  body[data-ui-skin] .panel-topbar .brand {
    gap: 9px;
    padding: 2px;
  }

  body[data-ui-skin] .panel-topbar .brand img {
    width: 38px;
    height: 38px;
  }

  body[data-ui-skin] .panel-topbar .brand-name {
    font-size: 18px;
  }

  body[data-ui-skin] .panel-main {
    padding-right: 14px;
    padding-left: 14px;
  }

  body[data-ui-skin] .conn-tile {
    padding-right: 44px;
    padding-left: 14px;
  }
}

@media (max-width: 540px) {
  body[data-ui-skin] .topbar .breadcrumb {
    display: none;
  }

  body[data-ui-skin] .topbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  body[data-ui-skin] .topbar-sql-action {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  body[data-ui-skin] .mode-toggle {
    flex-basis: 116px;
    width: 116px;
  }

  body[data-ui-skin] :where(.topbar-right, .panel-topbar-right) .user-dropdown-wrap {
    flex-basis: 128px;
    width: 128px;
    max-width: 128px;
  }

  body[data-ui-skin] .user-dropdown-email {
    max-width: 104px;
  }

  body[data-ui-tier="premium"].shell-panel .panel-narrow--dashboard,
  body[data-ui-tier="premium"].shell-auth .auth-card {
    padding-right: 22px;
    padding-left: 22px;
  }
}

@media (max-width: 380px) {
  body[data-ui-skin] .topbar,
  body[data-ui-skin] .panel-topbar {
    padding-right: 12px;
    padding-left: 12px;
  }

  body[data-ui-skin] .panel-topbar {
    gap: 6px;
  }

  body[data-ui-skin] .panel-topbar .brand img {
    width: 34px;
    height: 34px;
  }

  body[data-ui-skin] .panel-topbar .brand-name {
    font-size: 16px;
  }

  body[data-ui-skin] .panel-topbar .user-dropdown-wrap {
    flex-basis: 116px;
    width: 116px;
    max-width: 116px;
  }

  body[data-ui-skin] .panel-topbar .user-dropdown-email {
    max-width: 92px;
  }

  body[data-ui-skin] .mode-toggle {
    flex-basis: 110px;
    width: 110px;
  }

  body[data-ui-skin] .mode-toggle button {
    padding-right: 6px;
    padding-left: 6px;
    font-size: 9.5px;
  }

  body[data-ui-skin] .topbar .user-dropdown-wrap {
    flex-basis: 110px;
    width: 110px;
    max-width: 110px;
  }

  body[data-ui-skin] .topbar .user-dropdown-email {
    max-width: 86px;
  }

  body[data-ui-skin] .panel-main {
    padding: 26px 12px 40px;
  }

  body[data-ui-skin].shell-auth .auth-wrap {
    padding: 24px 12px;
  }

  body[data-ui-skin].shell-auth .auth-card {
    padding: 28px 22px 26px;
  }
}


/* ClarioDBScope plein écran charge cette couche en dernier. Le conteneur est un
   enfant flex : width:100% et min-width:0 empêchent son contenu intrinsèque de
   l'élargir au-delà du viewport à 320 px. */
body.scope-fullscreen[data-ui-skin] .scope-page {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.scope-fullscreen[data-ui-skin] :where(
  .scope-header,
  .scope-heading,
  .scope-header-stats,
  .scope-toolbar,
  .scope-toolbar-cluster,
  .scope-search,
  .schema-stack
) {
  min-width: 0;
  max-width: 100%;
}