/*
 * BeatHelper v17.6.6 — control decks + neutral modal system + footer/profile fixes
 * Visual-only layer. Keeps the v17.6.5 desktop readability pass and CRM pagination fix.
 */
:root{
  --bh-v6-surface:rgba(255,255,255,.048);
  --bh-v6-surface-hover:rgba(255,255,255,.068);
  --bh-v6-nested:rgba(255,255,255,.035);
  --bh-v6-border:rgba(255,255,255,.09);
  --bh-v6-border-strong:rgba(255,255,255,.125);
  --bh-v6-text:#F2F5FA;
  --bh-v6-muted:#92A4BE;
  --bh-v6-accent:#7DA5FF;
  --bh-v6-accent-bg:rgba(88,130,229,.115);
  --bh-v6-accent-border:rgba(125,165,255,.34);
}

/* ---------------------------------------------------------
   1) Filter/status/folder decks: bring the tray back, but use the rail material.
   --------------------------------------------------------- */
.screen[data-page="tools"] .tool-filter-row,
.screen[data-page="crm"] .crm-filters,
.screen[data-page="crm"] .crm-folders{
  background:var(--bh-v6-surface)!important;
  border:1px solid var(--bh-v6-border)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-radius:16px!important;
}
.screen[data-page="tools"] .tool-filter-row,
.screen[data-page="crm"] .crm-filters{
  padding:9px!important;
  gap:8px!important;
  margin-top:14px!important;
}
.screen[data-page="crm"] .crm-folders{
  padding:12px!important;
  margin-top:18px!important;
}
.screen[data-page="tools"] .tool-filter,
.screen[data-page="crm"] .crm-filter,
.screen[data-page="crm"] .crm-folder-chip{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  color:#9DABBE!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease!important;
}
.screen[data-page="tools"] .tool-filter:hover,
.screen[data-page="crm"] .crm-filter:hover,
.screen[data-page="crm"] .crm-folder-chip:hover{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#D5DEEA!important;
}
.screen[data-page="tools"] .tool-filter.on,
.screen[data-page="crm"] .crm-filter.on,
.screen[data-page="crm"] .crm-folder-chip.on{
  background:var(--bh-v6-accent-bg)!important;
  border-color:var(--bh-v6-accent-border)!important;
  color:#EDF3FF!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 0 1px rgba(125,165,255,.025)!important;
}
.screen[data-page="crm"] .crm-folders-head{margin-bottom:10px!important}
.screen[data-page="crm"] .crm-folders-title{color:#8293AB!important}

/* ---------------------------------------------------------
   2) Modal language: neutral graphite, same family as cards/rail.
   Applies to artist edit/create, folder create, language and downloader settings.
   --------------------------------------------------------- */
.crm-overlay,
.profile-settings-overlay{
  background:rgba(1,3,7,.76)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.crm-modal,
.profile-sheet{
  background:rgba(13,16,22,.985)!important;
  border:1px solid rgba(255,255,255,.105)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.crm-modal-head,
.profile-sheet-head{
  background:rgba(13,16,22,.965)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  box-shadow:none!important;
}
.crm-modal-actions,
.profile-sheet-actions{
  background:rgba(13,16,22,.965)!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 -16px 34px rgba(0,0,0,.14)!important;
}
.crm-modal-kicker,
.profile-sheet-kicker,
.crm-section-copy,
.crm-folder-help,
.profile-setting-label{
  color:#8191A8!important;
}
.crm-close,
.profile-sheet-close{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.105)!important;
  color:#AAB7C8!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.crm-close:hover,
.profile-sheet-close:hover{background:rgba(255,255,255,.075)!important;color:#EEF3FA!important}

.crm-section,
.profile-setting-group{
  background:rgba(255,255,255,.028)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.crm-section-title{color:#E9EEF6!important}
.crm-field input,
.crm-field textarea,
.crm-field select,
.profile-option,
.profile-choice,
.profile-file-preview{
  background:rgba(255,255,255,.042)!important;
  border-color:rgba(255,255,255,.09)!important;
  color:#EEF3F9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.crm-field input:hover,
.crm-field textarea:hover,
.crm-field select:hover,
.profile-option:hover,
.profile-choice:hover{
  background:rgba(255,255,255,.058)!important;
  border-color:rgba(255,255,255,.12)!important;
}
.crm-field input:focus,
.crm-field textarea:focus,
.crm-field select:focus{
  background:rgba(255,255,255,.052)!important;
  border-color:rgba(125,165,255,.36)!important;
  box-shadow:0 0 0 3px rgba(125,165,255,.055)!important;
}
.crm-status-option,
.profile-choice{
  background:rgba(255,255,255,.038)!important;
  border-color:rgba(255,255,255,.085)!important;
  color:#98A7BA!important;
}
.crm-status-option.on,
.profile-choice.on,
.profile-option.on{
  background:rgba(125,165,255,.085)!important;
  border-color:rgba(125,165,255,.31)!important;
  color:#F0F4FB!important;
}
.profile-option.on .profile-option-check{
  background:rgba(125,165,255,.12)!important;
  border-color:rgba(125,165,255,.34)!important;
  color:#AFC6FF!important;
}
.crm-save,
.profile-sheet-save{
  background:rgba(125,165,255,.105)!important;
  border-color:rgba(125,165,255,.29)!important;
  color:#EEF4FF!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.crm-save:hover,
.profile-sheet-save:hover{background:rgba(125,165,255,.145)!important;border-color:rgba(125,165,255,.38)!important}

/* Artist card/edit/create — less nested-box feel, more air. */
.crm-form{gap:14px!important}
.crm-section{border-radius:18px!important}
.crm-field>span,.crm-status-label{color:#8998AC!important}
.crm-history-dot{background:#92A4BE!important;box-shadow:none!important}

/* Language — clean three-row selector. */
.profile-sheet-panel[data-profile-panel="language"] .profile-option-list{
  gap:9px!important;
}
.profile-sheet-panel[data-profile-panel="language"] .profile-option{
  min-height:58px!important;
  padding:11px 14px!important;
  border-radius:15px!important;
}
.profile-sheet-panel[data-profile-panel="language"] .profile-option-flag{
  width:30px!important;height:30px!important;flex-basis:30px!important;
}
.profile-sheet-panel[data-profile-panel="language"] .profile-option-title{
  font-size:12px!important;
}

/* Downloader — flatter groups and calmer choice buttons. */
.profile-sheet-panel[data-profile-panel="downloader"] .profile-setting-group{
  padding:14px!important;
  border-radius:18px!important;
}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-choice-grid{gap:8px!important}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-choice{
  min-height:43px!important;
  border-radius:12px!important;
  font-size:10px!important;
}
.profile-sheet-panel[data-profile-panel="downloader"] .profile-file-preview{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.075)!important;
}

/* ---------------------------------------------------------
   3) CRM artist list: more breathing room between avatar and copy.
   --------------------------------------------------------- */
.screen[data-page="crm"] .crm-artist{
  grid-template-columns:58px minmax(0,1fr) auto!important;
  gap:18px!important;
  padding:17px 18px!important;
}
.screen[data-page="crm"] .crm-avatar{
  width:54px!important;height:54px!important;
  color:#92A4BE!important;
}
.screen[data-page="crm"] .crm-artist-copy{padding-left:2px!important}

/* ---------------------------------------------------------
   4) Profile avatar fix.
   v17.6.5 accidentally used !important background shorthand and erased inline photo.
   The corrected v5 stylesheet uses background-color, this is a safety net.
   --------------------------------------------------------- */
.screen[data-page="profile"] .profile-avatar-large.live-avatar-photo{
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  color:transparent!important;
}

@media(min-width:768px){
  .screen[data-page="tools"] .tool-filter,
  .screen[data-page="crm"] .crm-filter{height:40px!important;min-width:116px!important;border-radius:11px!important;font-size:10.5px!important}
  .screen[data-page="crm"] .crm-folder-chip{height:38px!important;border-radius:11px!important;font-size:9.5px!important}

  .crm-modal{width:min(860px,calc(100vw - 64px))!important;max-width:860px!important}
  .crm-folder-modal{width:min(620px,calc(100vw - 64px))!important;max-width:620px!important}
  .profile-sheet{width:min(780px,calc(100vw - 64px))!important;max-width:780px!important}
  .crm-modal-head,.profile-sheet-head{padding:22px 24px 18px!important}
  .crm-form,.profile-sheet-body{padding:20px!important}
  .crm-section,.profile-setting-group{padding:17px!important}
  .crm-modal-actions,.profile-sheet-actions{padding:14px 20px 18px!important}
}

@media(max-width:767px){
  .screen[data-page="tools"] .tool-filter-row,
  .screen[data-page="crm"] .crm-filters{padding:7px!important;border-radius:14px!important}
  .screen[data-page="crm"] .crm-folders{padding:10px!important;border-radius:14px!important}
  .screen[data-page="crm"] .crm-artist{grid-template-columns:44px minmax(0,1fr) auto!important;gap:12px!important;padding:12px!important}
  .screen[data-page="crm"] .crm-avatar{width:42px!important;height:42px!important}
}