/* ==========================================================
   PROFILE V58 — SETTINGS FIX
   ========================================================== */


/* ==========================================================
   REMOVE DUPLICATE ACCOUNT CARD FROM PROFILE HEADER
   Sidebar already contains the authenticated user.
   ========================================================== */

#screen-profile-v56
.p56-header-user,

#screen-profile-v56
.p57-header-user,

#screen-profile-v56
.p57-account-card {
  display:
    none !important;
}


#screen-profile-v56
.p56-header {
  justify-content:
    flex-start !important;
}


#screen-profile-v56
.p56-header > div:first-child {
  width:
    100%;

  max-width:
    920px;
}


/* ==========================================================
   PROFILE SIZE
   ========================================================== */

#screen-profile-v56 {
  min-height:
    0 !important;

  overflow:
    hidden !important;
}


#screen-profile-v56
.p56-root {
  height:
    100% !important;

  min-height:
    0 !important;

  overflow:
    hidden !important;
}


#screen-profile-v56
.p56-content {
  min-height:
    0 !important;

  overflow:
    hidden !important;
}


/* ==========================================================
   SETTINGS PANEL — ACTUAL SCROLL CONTAINER
   ========================================================== */

#screen-profile-v56
[data-p56-panel="settings"] {
  height:
    100% !important;

  min-height:
    0 !important;

  overflow-y:
    auto !important;

  overflow-x:
    hidden !important;

  overscroll-behavior:
    contain;

  touch-action:
    pan-y;

  scrollbar-gutter:
    stable;

  padding:
    0 10px 90px 0 !important;
}


#screen-profile-v56
[data-p56-panel="settings"]::-webkit-scrollbar {
  width:
    8px;
}


#screen-profile-v56
[data-p56-panel="settings"]::-webkit-scrollbar-track {
  background:
    rgba(5, 20, 38, .45);

  border-radius:
    10px;
}


#screen-profile-v56
[data-p56-panel="settings"]::-webkit-scrollbar-thumb {
  background:
    rgba(67, 133, 198, .42);

  border:
    2px solid
    transparent;

  border-radius:
    10px;

  background-clip:
    padding-box;
}


#screen-profile-v56
[data-p56-panel="settings"]::-webkit-scrollbar-thumb:hover {
  background:
    rgba(74, 154, 232, .65);

  background-clip:
    padding-box;
}


/* ==========================================================
   SETTINGS TITLE
   ========================================================== */

#screen-profile-v56
[data-p56-panel="settings"]
.p56-section-title {
  min-height:
    62px;

  padding-bottom:
    8px;
}


#screen-profile-v56
[data-p56-panel="settings"]
.p56-section-title h2 {
  font-size:
    20px !important;

  letter-spacing:
    -.025em;
}


#screen-profile-v56
[data-p56-panel="settings"]
.p56-section-title p {
  max-width:
    760px;

  color:
    #7897b9 !important;
}


/* ==========================================================
   STICKY SAVE BAR
   ========================================================== */

.p58-settings-toolbar {
  position:
    sticky;

  top:
    0;

  z-index:
    30;

  min-height:
    52px;

  margin:
    0 0 12px;

  padding:
    7px 8px 7px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  border:
    1px solid
    rgba(67, 132, 198, .30);

  border-radius:
    11px;

  background:
    rgba(5, 22, 42, .96);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, .18);
}


.p58-settings-status {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.p58-status-dot {
  width:
    8px;

  height:
    8px;

  flex:
    0 0 8px;

  border-radius:
    50%;

  background:
    #39dda0;

  box-shadow:
    0 0 12px
    rgba(57, 221, 160, .38);
}


#p58SettingsStatus {
  color:
    #8da8c5;

  font-size:
    8px;

  font-weight:
    850;
}


#p58SettingsStatus[data-type="dirty"] {
  color:
    #ffcb55;
}


#p58SettingsStatus[data-type="error"] {
  color:
    #ff7474;
}


#p58SettingsStatus[data-type="saving"] {
  color:
    #6eb9ff;
}


.p58-settings-status:has(
  #p58SettingsStatus[data-type="dirty"]
)
.p58-status-dot {
  background:
    #ffc13c;

  box-shadow:
    0 0 12px
    rgba(255, 193, 60, .35);
}


.p58-settings-status:has(
  #p58SettingsStatus[data-type="error"]
)
.p58-status-dot {
  background:
    #ff5d68;
}


.p58-settings-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.p58-reset,
.p58-save {
  min-height:
    36px;

  padding:
    0 15px;

  border-radius:
    8px;

  cursor:
    pointer;

  font-size:
    8px;

  font-weight:
    950;
}


.p58-reset {
  border:
    1px solid
    rgba(67, 140, 210, .34);

  color:
    #b4cae0;

  background:
    rgba(8, 32, 58, .78);
}


.p58-save {
  min-width:
    125px;

  border:
    1px solid
    rgba(255, 197, 61, .88);

  color:
    #07111c;

  background:
    linear-gradient(
      135deg,
      #ffd55f,
      #ffae1c
    );
}


.p58-save.dirty {
  box-shadow:
    0 0 0 1px
    rgba(255, 190, 42, .10),

    0 9px 25px
    rgba(255, 174, 28, .13);
}


.p58-reset:disabled,
.p58-save:disabled {
  opacity:
    .42;

  cursor:
    default;

  box-shadow:
    none;
}


/* ==========================================================
   PREMIUM SETTINGS CARDS
   ========================================================== */

#screen-profile-v56
[data-p56-panel="settings"]
.settings-panel,

#screen-profile-v56
[data-p56-panel="settings"]
.p57-settings-card {
  border:
    1px solid
    rgba(62, 128, 193, .27) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 57, .96),
      rgba(5, 22, 42, .97)
    ) !important;

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, .12);
}


/* ==========================================================
   SELECTS
   ========================================================== */

#screen-profile-v56
[data-p56-panel="settings"]
select {
  min-height:
    44px !important;

  padding:
    0 14px !important;

  border:
    1px solid
    rgba(70, 137, 204, .30) !important;

  border-radius:
    9px !important;

  outline:
    none !important;

  color:
    #e4edf8 !important;

  background-color:
    #071c34 !important;

  font-weight:
    800 !important;

  cursor:
    pointer;
}


#screen-profile-v56
[data-p56-panel="settings"]
select:focus {
  border-color:
    rgba(73, 164, 253, .72) !important;

  box-shadow:
    0 0 0 3px
    rgba(73, 164, 253, .08) !important;
}


/* ==========================================================
   THEME / DENSITY SEGMENTS
   ========================================================== */

#screen-profile-v56
#settingsTheme,

#screen-profile-v56
#settingsDensity {
  padding:
    4px !important;

  display:
    grid !important;

  gap:
    4px !important;

  border:
    1px solid
    rgba(64, 129, 194, .22) !important;

  border-radius:
    10px !important;

  background:
    rgba(4, 19, 37, .62) !important;
}


#screen-profile-v56
#settingsTheme {
  grid-template-columns:
    repeat(3, 1fr) !important;
}


#screen-profile-v56
#settingsDensity {
  grid-template-columns:
    repeat(2, 1fr) !important;
}


#screen-profile-v56
#settingsTheme button,

#screen-profile-v56
#settingsDensity button {
  min-height:
    39px !important;

  border:
    1px solid
    transparent !important;

  border-radius:
    7px !important;

  color:
    #7898bb !important;

  background:
    transparent !important;

  cursor:
    pointer !important;

  font-size:
    8px !important;

  font-weight:
    950 !important;

  transition:
    .16s ease !important;
}


#screen-profile-v56
#settingsTheme button:hover,

#screen-profile-v56
#settingsDensity button:hover {
  color:
    #dfeaf5 !important;

  background:
    rgba(25, 63, 100, .54) !important;
}


#screen-profile-v56
#settingsTheme button.active,

#screen-profile-v56
#settingsDensity button.active,

#screen-profile-v56
#settingsTheme button[aria-pressed="true"],

#screen-profile-v56
#settingsDensity button[aria-pressed="true"] {
  border-color:
    rgba(255, 195, 49, .84) !important;

  color:
    #09131f !important;

  background:
    linear-gradient(
      135deg,
      #ffd45d,
      #ffae1d
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(255, 175, 29, .10) !important;
}


/* ==========================================================
   TOGGLES
   ========================================================== */

#screen-profile-v56
[data-p56-panel="settings"]
input[type="checkbox"] {
  cursor:
    pointer !important;
}


#screen-profile-v56
[data-p56-panel="settings"]
.setting-row,

#screen-profile-v56
[data-p56-panel="settings"]
.p57-setting-row {
  min-height:
    62px;

  border-bottom:
    1px solid
    rgba(65, 127, 188, .13);
}


#screen-profile-v56
[data-p56-panel="settings"]
.setting-row:last-child,

#screen-profile-v56
[data-p56-panel="settings"]
.p57-setting-row:last-child {
  border-bottom:
    0;
}


/* ==========================================================
   REMOVE OLD DUPLICATE SAVE FOOTER IF V57 LEFT ONE
   ========================================================== */

#screen-profile-v56
[data-p56-panel="settings"]
.settings-savebar {
  margin-bottom:
    30px;
}


/* ==========================================================
   LIGHT THEME PROFILE SUPPORT
   Existing staging engine sets html[data-theme].
   ========================================================== */

html[data-theme="light"]
#screen-profile-v56
.p56-root {
  --p56-text:
    #162236;

  --p56-muted:
    #65748a;

  background:
    #f3f6fa !important;
}


html[data-theme="light"]
#screen-profile-v56
.p56-card,

html[data-theme="light"]
#screen-profile-v56
.settings-panel,

html[data-theme="light"]
#screen-profile-v56
.p57-settings-card {
  color:
    #162236 !important;

  border-color:
    rgba(51, 89, 128, .18) !important;

  background:
    #ffffff !important;
}


html[data-theme="light"]
.p58-settings-toolbar {
  border-color:
    rgba(51, 89, 128, .18);

  background:
    rgba(255, 255, 255, .95);
}


/* ==========================================================
   COMFORTABLE DENSITY
   ========================================================== */

html[data-density="comfortable"]
#screen-profile-v56
[data-p56-panel="settings"]
.setting-row,

html[data-density="comfortable"]
#screen-profile-v56
[data-p56-panel="settings"]
.p57-setting-row {
  min-height:
    74px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:900px) {

  .p58-settings-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .p58-settings-actions {
    width:
      100%;
  }


  .p58-reset,
  .p58-save {
    flex:
      1;
  }

}