/* css/panel_from_best.css */
/* side panel redesign ported from best (account card, device name, licence card, options grid, licence button) */
:root{
  --panel-card-radius:18px; /* side panel cards: account, licence, site settings */
  --c-surface-1:#ffffff;
  --c-text-1:#000000;
  --c-text-on-accent-1:#ffffff;
  --c-accent-strong-1:#05668d; /* History button */
  --c-success-3:#c7d7a7; /* panel option buttons */
  --c-warning-1:#ffa500; /* licence: 30 days or fewer */
  --c-license-bg:rgba(46,160,67,0.08);
  --c-license-border:rgba(46,160,67,0.35);
  --c-license-btn-top:#dce8c8; /* "Get Music Licence" panel button */
  /* used by css/history_popup.css (values from best tokens.css) */
  --c-icon:#000000; /* close X */
  --c-border-19:rgba(104,117,155,0.18);
  --c-shadow-17:rgba(40,48,72,0.12);
  --c-negative:#f44336;
  --c-surface-3:#f3f3f3;
  --c-surface-4:rgba(255,255,255,0.6);
  --c-surface-alt-1:rgba(211,211,211,0.7);
}
/* panel: fixed width (must not grow when the account card expands), X top-left on the title line */
@media (min-width: 941px){
  #settings-display2_out{
    width: 464px;
    max-width: 100vw;
    padding: 20px;
  }
  #close-settings-display2{
    top: 40px; /* centred on the 30px title line: 20 wrapper + 15 panel padding + 15 - 10 */
    left: 32px;
    right: auto;
    z-index: 25;
  }
}
@media (min-width: 941px) and (max-height: 730px){
  #settings-display2_out{
    width: 100vw;
  }
}
@media (max-width: 940px){
  #close-settings-display2{
    top: 30px; /* centred on the 30px title line: 10 wrapper + 15 panel padding + 15 - 10 */
    left: 20px;
    right: auto;
  }
}
#right-display-inner{
  overflow-y: auto;
  background-color: var(--c-surface-1); /* white, as in best (cloud had #ecfaff) */
}
/* settings cards inside the side panel: stacked, full width */
#right-display-inner #opened_settings_row{
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin-top: 16px;
}
#right-display-inner .st_card{
  flex: 0 0 auto;
  max-width: none;
  padding: 14px 16px 16px;
  border-radius: var(--panel-card-radius);
}
#right-display-inner .st_card_head{
  font-size: 17px;
}
#right-display-inner #opened_settings_inner_Account{
  justify-content: start;
}
#profile_card_title{
  font-size: 24px;
  line-height: 30px; /* fixed so the close X is centred on this line */
  margin-bottom: 20px;
}
#profile_card_info{
  width: auto;
  flex: 1; /* full width, so Logout can sit at the far right */
  min-width: 0;
}
/* account card: avatar + name + Logout on top, email under, More/Less for ID, phone, language, device name */
#profile_card.st_card{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--panel-card-radius);
}
#profile_card_row{
  display: flex;
  align-items: center;
  gap: 12px;
}
#profile_card_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#profile_card_info #profile_card_logout{
  width: auto;
  height: 26px;
  font-size: 15px;
}
.card_info_item#profile_card_info_name{
  height: 26px;
  font-size: 18px;
  font-weight: 600;
}
.card_info_item#profile_card_info_email{
  height: auto;
  font-size: 14px;
  opacity: .7;
  word-break: break-all;
}
/* expanded part: rows "label … value (right)", no lines */
#profile_card_more{
  display: grid;
  grid-template-columns: auto 1fr;
  margin-top: 4px;
  font-size: 15px;
}
#profile_card_more[hidden]{
  display: none;
}
#profile_card_more > strong,
#profile_card_more > span,
#profile_card_more > #language_preference_form,
#profile_card_more > #device_name_row{
  display: flex;
  align-items: center;
  min-height: 40px;
}
#profile_card_more > strong{
  padding-right: 12px;
  font-size: 15px;
  font-weight: 400;
  opacity: .8;
  white-space: nowrap;
}
#profile_card_more > span{
  justify-content: flex-end;
  text-align: right;
}
#profile_card_more > #language_preference_form,
#profile_card_more > #device_name_row,
#device_name_row > #device_name_form{
  flex-direction: row;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
/* device name: text + pencil; the pencil opens the field with Save */
#device_name_row > #device_name_form{
  display: flex;
  align-items: center;
}
#device_name_row > #device_name_form[hidden],
#device_name_row > [hidden]{
  display: none;
}
#device_name_edit{
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
#device_name_edit::before{
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5l4 4L8 20H4v-4L16.5 3.5z'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5l4 4L8 20H4v-4L16.5 3.5z'/%3E%3C/svg%3E") center / 70% no-repeat;
  background-color: var(--text-title-d_blue);
}
#profile_card_more #device_name_input{
  width: 130px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--text-title-d_blue);
  border-radius: 8px;
  background-color: var(--c-surface-1);
  color: var(--text-title-d_blue);
  font-size: 14px;
  font-weight: 400;
}
#profile_card_more .locale_dropdown{
  min-width: 0;
  max-width: 160px;
  padding: 0 8px;
  font-size: 14px;
}
#profile_card_more .update_locale_btn{
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
}
/* every control in the expanded card is 30px tall (rows are 40px); min-height 0 beats the global text-input rule */
#profile_card_more .locale_dropdown,
#profile_card_more .update_locale_btn,
#profile_card_more #device_name_input{
  box-sizing: border-box;
  height: 30px;
  min-height: 0;
  margin: 0;
}
#profile_card_more .locale_message{
  grid-column: 1 / -1;
  position: static;
  transform: none;
}
#profile_card_more .locale_message:empty{
  display: none;
}
/* removed songs: a plain row with › (no box) */
#profile_card_more .st_link{
  grid-column: 1 / -1;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#profile_card_more .st_link:hover{
  background: none;
}
#profile_card_more .st_link_icon{
  flex: 0 0 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 15px;
}
#profile_card_more .st_link_title{
  font-size: 15px;
}
#profile_card_more .st_link_desc{
  font-size: 12px;
}
#profile_card_more_btn{
  align-self: end;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text-title-d_blue);
  font-size: 14px;
  cursor: pointer;
}
/* licence card: same width and radius as the other panel cards */
#profile_subscription.license_active_box{
  margin: 10px 0 0;
  border-radius: var(--panel-card-radius) var(--panel-card-radius) 0 0;
}
.exp_date.exp_date_show{
  margin: 0 0 12px;
  border-radius: 0 0 var(--panel-card-radius) var(--panel-card-radius);
}
/* days remaining: coloured text, no pill — blue with many days left, orange at 30 days or fewer */
.license_days_left{
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-title-d_blue);
  font-size: 14px;
  font-weight: 700;
}
.license_days_left.license_days_soon{
  background: none;
  color: var(--c-warning-1);
}
/* panel options (Spots, History…): a list of plain text rows, coloured icon tile left, › right, no lines */
#right-display-sidebar-options{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px; /* minimum gap above the licence button (which uses margin-top:auto) */
}
#right-display-sidebar-options > .sidebar_options{
  height: auto;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-radius: 0;
  background: none;
  color: var(--text-title-d_blue);
  font-size: 18px;
  font-weight: 500;
  transition: opacity 0.2s ease-in-out;
}
body.dark-mode #right-display-sidebar-options > .sidebar_options{
  background: none; /* dark_theme.css gives the Spots button a background */
}
#right-display-sidebar-options > .sidebar_options::after{
  content: "›";
  margin-left: auto; /* chevron stays at the far right */
  font-size: 22px;
  opacity: .6;
}
#right-display-sidebar-options > .sidebar_options:hover{
  opacity: .75;
}
/* coloured icon on a light rounded tile before each row (megaphone: Spots, clock with back arrow: History) */
#right-display-sidebar-options > .sidebar_options::before{
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sb-tile) var(--sb-icon) center / 24px no-repeat; /* 24px = the SVG's own grid: 2px lines stay sharp */
}
#right-display-options4{
  --sb-tile: #fff1e0;
  --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f08c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
}
#right-display-options5{
  --sb-tile: #e3f4f8;
  --sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305668d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E");
}
/* "Get Music Licence" as the last item of the panel */
#right-display-options1{
  width: 100%;
  height: 56px;
  margin-top: auto; /* pushed to the bottom of the panel */
  flex-shrink: 0;
  border-radius: var(--panel-card-radius);
  background: var(--c-license-btn-top);
  color: var(--c-text-1);
  font-size: 20px;
  text-align: center;
  transition: filter 0.35s ease-in-out;
}
#right-display-options1:hover{
  filter: brightness(0.90);
}