/* assets/css/app-users.css */
/* CrossWatch - App user manager */
/* Copyright (c) 2025-2026 CrossWatch / Cenodude (https://github.com/cenodude/CrossWatch) */

#page-settings .cw-app-user-card {
  overflow: hidden;
}

#page-settings #app_auth_fields > .cw-settings-2col > .cw-auth-oidc-field {
  grid-column: 1 / -1;
  min-width: 0;
}

#page-settings .cw-auth-oidc-field .cw-app-oidc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: center;
  margin-top: 12px;
  min-width: 0;
}

#page-settings .cw-auth-oidc-field .cw-app-oidc-grid > * {
  width: 100%;
  min-width: 0;
}

#page-settings .cw-auth-oidc-field #app_auth_oidc_scopes {
  grid-column: 1 / -1;
}

#page-settings .cw-auth-oidc-field .cw-app-oidc-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: center;
  margin-top: 12px;
}

#page-settings .cw-auth-oidc-field .cw-app-oidc-actions .btn {
  width: 100%;
}

#page-settings #app_auth_fields :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, .cw-icon-select, .cw-icon-select-btn) {
  box-sizing: border-box !important;
  width: 100%;
  min-width: 0;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}

#page-settings #app_auth_fields .cw-auth-totp-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
  align-content: start;
  height: 100%;
}

#page-settings #app_auth_fields .cw-auth-plex-field {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
  align-content: start;
  height: 100%;
}

#page-settings #app_auth_fields .cw-auth-totp-field > :not(.btn) {
  grid-column: 1 / -1;
}

#page-settings #app_auth_fields .cw-auth-plex-field > :not(.btn) {
  grid-column: 1 / -1;
}

#page-settings #app_auth_fields :is(.cw-auth-totp-field, .cw-auth-plex-field) > .sub {
  min-height: 3.1rem;
}

#page-settings #app_auth_fields .cw-auth-totp-field > .btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
}

#page-settings #app_auth_fields .cw-auth-totp-field > .btn.hidden {
  display: none !important;
}

#page-settings #app_auth_fields .cw-auth-totp-field > .cw-settings-inline-action {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 0.75rem !important;
}

#page-settings #app_auth_fields .cw-auth-plex-field > .cw-settings-inline-action {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 0.75rem !important;
}

#page-settings #app_auth_fields .cw-auth-totp-field > .cw-settings-inline-action > .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
}

#page-settings #app_auth_fields .cw-auth-plex-field > .cw-settings-inline-action > .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
}

#page-settings #app_auth_fields .cw-auth-totp-field > .cw-settings-inline-action > .btn.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  #page-settings .cw-auth-oidc-field .cw-app-oidc-grid,
  #page-settings .cw-auth-oidc-field .cw-app-oidc-actions {
    grid-template-columns: 1fr;
  }

  #page-settings .cw-auth-oidc-field #app_auth_oidc_scopes {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  #page-settings #app_auth_fields .cw-auth-totp-field,
  #page-settings #app_auth_fields .cw-auth-plex-field {
    grid-template-columns: 1fr;
  }
}

#page-settings .cw-app-user-list {
  display: grid;
  gap: 12px;
}

#page-settings .cw-app-user-row,
#page-settings .cw-app-user-row:not(.is-protected),
#page-settings .cw-app-user-row.is-protected {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, .09));
  border-radius: 18px;
  background: var(--cw-theme-surface-raised, rgba(8, 12, 20, .42));
}

#page-settings .cw-app-user-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 74px;
  padding: 14px 16px;
}

#page-settings .cw-app-user-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 0;
}

#page-settings .cw-app-user-main strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg, #f3f7ff);
  font-size: 15px;
}

#page-settings .cw-app-user-main small {
  display: block;
  margin-top: 2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted, rgba(220, 228, 244, .64));
  font-size: 12px;
  font-weight: 800;
}

#page-settings .cw-app-user-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(132, 160, 255, .28);
  background: rgba(102, 128, 255, .14);
  color: #a9bdff;
  font-size: 24px !important;
  line-height: 1;
}

#page-settings .cw-app-user-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

#page-settings .cw-app-user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 150px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid rgba(132, 160, 255, .24);
  border-radius: 999px;
  background: rgba(102, 128, 255, .13);
  color: var(--fg, #cbd7ff);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-settings .cw-app-user-row .cw-app-user-pill.is-off {
  border-color: var(--cw-theme-danger);
  background: transparent;
  color: var(--cw-theme-danger);
}

#page-settings .cw-app-user-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}

#page-settings .cw-app-user-edit .material-symbols-rounded,
#page-settings .cw-app-user-add .material-symbols-rounded {
  font-size: 19px;
  line-height: 1;
}

#page-settings .cw-app-card-head .cw-app-user-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

#page-settings .cw-app-user-locked .cw-app-user-add {
  display: none;
}

html[data-cw-theme="flat-light"] #page-settings .cw-app-user-row {
  background: #fff;
  border-color: rgba(21, 31, 48, .14);
  box-shadow: none;
}

html[data-cw-theme="flat-light"] #page-settings .cw-app-user-avatar {
  background: #edf2ff;
  border-color: rgba(54, 87, 180, .22);
  color: #355ecb;
}

html[data-cw-theme="flat-light"] #page-settings .cw-app-user-pill {
  background: #eef2ff;
  border-color: rgba(54, 87, 180, .18);
  color: #334155;
}

@media (max-width: 680px) {
  #page-settings .cw-app-user-summary {
    grid-template-columns: 1fr;
  }

  #page-settings .cw-app-user-summary-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #page-settings .cw-app-user-card .cw-app-card-head {
    flex-wrap: wrap;
  }

  #page-settings .cw-app-card-head .cw-app-user-add {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}