/* Opt-in appearance only; the normal theme and application behavior remain unchanged. */
html.has-personal-background body,
html.ss-studio.has-personal-background body{
 background-image:var(--personal-background-image)!important;
 background-position:center!important;
 background-repeat:no-repeat!important;
 background-size:var(--personal-background-size,auto)!important;
 background-attachment:fixed!important;
}
html.has-personal-background[data-background-mode=stretch] body{background-size:100% 100%!important}
html.has-personal-background[data-background-mode=tile] body{background-repeat:repeat!important;background-position:left top!important}

/* Glass creates a stacking context: lift the whole header, not just its menu. */
html.has-personal-background #employeeView>.employee-header{position:relative;z-index:75}

/* Layered important declarations override legacy theme-specific opaque panels
   without changing those themes or escalating individual selector specificity. */
@layer personal-background {
 @media screen {
  html.has-personal-background {
   --personal-glass-paper:var(--studio-paper,var(--surface-solid,#fff));
   --personal-glass-opacity:var(--personal-glass-user-opacity,56%);
   --personal-glass-detail-opacity:36%;
   --personal-glass-blur:blur(14px);
   --personal-glass-surface:color-mix(in srgb,var(--personal-glass-paper) var(--personal-glass-opacity),transparent);
   --personal-glass-detail:color-mix(in srgb,var(--personal-glass-paper) var(--personal-glass-detail-opacity),transparent);
   --personal-glass-shadow:inset 0 1px 0 rgb(255 255 255 / 55%),inset 0 0 0 1px rgb(255 255 255 / 20%),0 1px 3px rgb(15 23 42 / 5%);
   --personal-glass-muted:#435166;
   --personal-glass-amber:#674807;
   --personal-glass-green:#175437;
   --personal-glass-blue:#234f9c;
  }
  html.has-personal-background:is([data-theme=dark],[data-palette=graphite]) {
   --personal-glass-shadow:inset 0 1px 0 rgb(255 255 255 / 24%),inset 0 0 0 1px rgb(255 255 255 / 10%),0 1px 3px rgb(0 0 0 / 8%);
   --personal-glass-muted:#c0ccda;
   --personal-glass-amber:#f1cd80;
   --personal-glass-green:#8bddb3;
   --personal-glass-blue:#adc8ff;
  }

  /* Work surfaces, including the formerly transparent payouts block. */
  html.has-personal-background :where(
   .card,.summary-card,.admin-panel,.employee-date-filter,.balance-card,
   #employeeView .employee-header,.studio-employee-dock,#adminView>.topbar,
   .entry-card,.studio-stat,.profile-section,.employee-profile-summary,
   .empty-state,.report-comment,.report-list-heading,.studio-review-summary,
   :where(#employeeView .planning-review),
   .planning-group,.equipment-hall,.project-task-plan,.project-catalog-card,
   .project-plan-heading,.event-overview-block,.ref-row,.rate-module,
   .training-card,.help-center-card,.approval-row,.employee-row,#projectCreate,
   .project-catalog-filters,.projects-toolbar,#projectArchive,#staffAbsenceRequests,
   .dispatch-period-matrix,.dispatch-day-matrix,:where(#projectCatalog ~ .btn.btn-ghost),
   .studio-brand,.studio-sidebar-profile,#adminNav,
   .accreditation-controls,.personnel-inline,.personnel-form,
   .production-task,.production-hall,.project-tasks-section,
   .ref-form,.ref-editor,.ref-report,.fine-card,.dialog-card,
   .planning-review,.planning-stat,.planning-meals
  ) {
   background:color-mix(in srgb,var(--personal-glass-paper) var(--personal-glass-opacity),transparent)!important;
   -webkit-backdrop-filter:var(--personal-glass-blur)!important;
   backdrop-filter:var(--personal-glass-blur)!important;
   box-shadow:var(--personal-glass-shadow)!important;
  }

  /* Desktop and mobile share these controls. The image is opt-in; action
     colours and native popup menus are not made transparent. */
  html.has-personal-background :is(#adminView,#employeeView) :is(
   .btn:not(.btn-primary):not(.btn-danger),.view-toggle-btn,
   .project-inner-tab,.calendar-zoom button,.ref-add>summary,.ref-report>summary,
   .reference-nav button,.rates-tab,
   input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
   select,textarea
  ) {
   background:var(--personal-glass-surface)!important;
   color:var(--text)!important;
   box-shadow:var(--personal-glass-shadow)!important;
  }
  html.has-personal-background :is(#adminView,#employeeView) :is(
   .view-toggle-btn.is-active,.project-inner-tab.is-active,
   .reference-nav button[aria-pressed=true],.rates-tab.is-active
  ) {
   background:color-mix(in srgb,color-mix(in srgb,var(--personal-glass-blue) 16%,var(--personal-glass-paper)) var(--personal-glass-opacity),transparent)!important;
   color:var(--personal-glass-blue)!important;
  }
  html.has-personal-background :is(#adminView,#employeeView) option {
   background:var(--personal-glass-paper)!important;
   color:var(--text)!important;
  }
  html.has-personal-background :is(.studio-brand,.studio-sidebar-profile,#adminNav) {
   color:var(--text)!important;
  }
  html.has-personal-background :is(.studio-sidebar-profile strong,.studio-sidebar-profile small,#adminNav .studio-nav-label) {
   color:inherit!important;
  }

  /* Neutral timesheet controls and shell chrome use the same opt-in glass.
     Keep primary/destructive actions, checked controls and badges distinct. */
  html.has-personal-background :is(#employeeView,#adminView>.topbar) :is(
   .btn.btn-ghost:not(.btn-primary):not(.btn-danger),.icon-btn,
   .employee-menu>summary
  ),
  html.has-personal-background #employeeView :is(
   .employee-date-filter select,.employee-date-filter input[type=date],
   .view-toggle-btn
  ) {
   background:color-mix(in srgb,var(--personal-glass-paper) var(--personal-glass-opacity),transparent)!important;
   color:var(--text)!important;
   -webkit-backdrop-filter:var(--personal-glass-blur)!important;
   backdrop-filter:var(--personal-glass-blur)!important;
   box-shadow:var(--personal-glass-shadow)!important;
  }
  html.has-personal-background #employeeView :is(.report-period,.view-toggle) {
   background:transparent!important;
   box-shadow:none!important;
  }
  html.has-personal-background #employeeView :is(
   .view-toggle-btn.is-active,.date-shortcuts .btn[aria-pressed=true]
  ),
  html.has-personal-background .studio-employee-dock>button[aria-current=page] {
   background:color-mix(in srgb,color-mix(in srgb,var(--personal-glass-blue) 12%,var(--personal-glass-paper)) var(--personal-glass-opacity),transparent)!important;
   color:var(--personal-glass-blue)!important;
  }
  html.has-personal-background #employeeView .date-range-inputs label,
  html.has-personal-background .studio-employee-dock>button:not(.studio-dock-add):not([aria-current=page]) {
   color:var(--personal-glass-muted)!important;
  }
  /* Native option menus are separate popups: keep their text readable. */
  html.has-personal-background #employeeView .employee-date-filter option {
   background:var(--personal-glass-paper);
   color:var(--text);
  }

  /* These are only layout wrappers: an opaque wrapper would hide the photo
     behind every child. Keep their existing padding and responsive geometry. */
  html.has-personal-background :is(#projectsSection,.employee-days,.employee-finances.payment-balance) {
   -webkit-backdrop-filter:none!important;
   backdrop-filter:none!important;
   box-shadow:none!important;
  }
  html.has-personal-background :is(#projectsSection,.employee-days,.employee-finances.payment-balance) {
   background:transparent!important;
  }
  /* One glass layer per panel; plain layout containers must not add a giant
     pane beneath all the individual cards, tables and forms. */
  html.has-personal-background :is(
   #peopleSection,#projectCalendarSection,#ratesView,#venuesSection,
   .production-editor,.project-production-plan,.project-inner-tabs,.view-toggle,
   .rates-tabs,.staff-card-grid,.equipment-table,.summary-table,
   .calendar-week,.calendar-band-week,.equipment-legacy,
   .equipment-hall-group,.equipment-hall-group>.production-hall
  ) {
   background:transparent!important;
   -webkit-backdrop-filter:none!important;
   backdrop-filter:none!important;
   box-shadow:none!important;
  }
  html.has-personal-background #projectCalendarSection .project-calendar-filters {
   background:var(--personal-glass-surface)!important;
   -webkit-backdrop-filter:var(--personal-glass-blur)!important;
   backdrop-filter:var(--personal-glass-blur)!important;
   padding:14px;border-radius:14px;
  }
  html.has-personal-background #projectCalendarSection .calendar-bands {
   background:var(--personal-glass-surface)!important;
   -webkit-backdrop-filter:var(--personal-glass-blur)!important;
   backdrop-filter:var(--personal-glass-blur)!important;
   box-shadow:var(--personal-glass-shadow)!important;
  }
  html.has-personal-background :is(
   .staff-assigned,.equipment-hall-details>summary,.day-history-entry,
   .personnel-history,.admin-report-filters,.ref-list,.ref-row,
   .equipment-table td,.equipment-table th,.summary-table td,.summary-table th,
   .rates-overview-table td,.rates-overview-table th,.fine-row,
   .employee-table-view,.table-wrap,.project-audit-entry
  ) {
   background:var(--personal-glass-detail)!important;
   color:var(--text)!important;
  }
  html.has-personal-background :is(.day-history,.day-history-entry,.table-wrap,.employee-table-view,.staff-assigned) {
   border-radius:12px;
  }
  /* The dark theme paints this wrapper behind the rounded period buttons,
     leaving a dark seam between them when the filter panel is translucent. */
  html.has-personal-background #employeeView :is(.date-filter-controls,.date-shortcuts) {
   background:transparent!important;
   box-shadow:none!important;
   border:0!important;
  }
  html.has-personal-background .report-list-heading {
   padding:12px 14px;
   border:1px solid var(--line);
   border-radius:12px;
  }
  html.has-personal-background :is(.project-catalog-filters,.projects-toolbar,#projectArchive,#staffAbsenceRequests) {
   padding:12px!important;
   border:1px solid var(--line);
   border-radius:12px;
  }
  /* Keep nested details light, instead of stacking opaque rectangles. */
  html.has-personal-background :is(.venue-summary,.day-venue-block,.task-display-row,.profile-stat) {
   background:color-mix(in srgb,var(--personal-glass-paper) var(--personal-glass-detail-opacity),transparent)!important;
  }
  html.has-personal-background :is(.muted,.balance-card small,.balance-card .balance-note,.studio-project-line,.project-catalog-filters label) {
   color:var(--personal-glass-muted)!important;
  }
  html.has-personal-background .balance-work {--balance-accent:var(--personal-glass-green)!important}
  html.has-personal-background .balance-meals {--balance-accent:var(--personal-glass-amber)!important}
  html.has-personal-background :is(.balance-taxi,.balance-expenses) {--balance-accent:var(--personal-glass-blue)!important}
  html.has-personal-background .balance-card :is(h4,.balance-hero) {color:var(--balance-accent)!important}

  /* Event colours remain useful identifiers on the glass. */
  html.has-personal-background :is(.project-catalog-card,.project-plan-heading) {
   background:color-mix(in srgb,color-mix(in srgb,var(--event-border,var(--studio-line)) 12%,var(--personal-glass-paper)) var(--personal-glass-opacity),transparent)!important;
   color:var(--text)!important;
   border:1px solid var(--event-border,var(--studio-line))!important;
   border-inline-start:4px solid var(--event-border,var(--studio-line))!important;
  }
  html.has-personal-background .project-catalog-card .studio-project-name {
   color:color-mix(in srgb,var(--event-border,var(--text)) 48%,var(--text))!important;
  }
  html.has-personal-background .staff-choice-card {
   background:color-mix(in srgb,color-mix(in srgb,hsl(var(--staff-role-hue,140) 50% 65%) 16%,var(--personal-glass-paper)) var(--personal-glass-opacity),transparent)!important;
   color:var(--text)!important;
  }
  html.has-personal-background :is(#adminView,#employeeView) {
   scrollbar-color:color-mix(in srgb,var(--text) 32%,transparent) transparent;
   scrollbar-width:thin;
  }
  html.has-personal-background :is(#adminView,#employeeView) ::-webkit-scrollbar {
   width:10px;height:10px;
  }
  html.has-personal-background :is(#adminView,#employeeView) ::-webkit-scrollbar-track,
  html.has-personal-background :is(#adminView,#employeeView) ::-webkit-scrollbar-corner {
   background:transparent;
  }
  html.has-personal-background :is(#adminView,#employeeView) ::-webkit-scrollbar-thumb {
   border:3px solid transparent;border-radius:20px;
   background:color-mix(in srgb,var(--text) 32%,transparent);background-clip:padding-box;
  }
  html.has-personal-background :is(#adminView,#employeeView) ::-webkit-scrollbar-button {
   display:none;width:0;height:0;
  }

  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
   html.has-personal-background {--personal-glass-opacity:94%!important;--personal-glass-detail-opacity:94%}
  }
  @media(prefers-reduced-transparency:reduce) {
   html.has-personal-background {--personal-glass-opacity:96%!important;--personal-glass-detail-opacity:96%;--personal-glass-blur:none}
  }
 }
}
.theme-picker .personal-background-settings{border-top:1px solid var(--line,#dce3ec);margin-top:20px;padding-top:16px;min-width:0}
.theme-picker .personal-background-settings h3{font-size:16px;margin:0 0 6px}
.theme-picker .personal-background-settings p{font-size:13px;line-height:1.5;color:var(--muted,#667384);margin:6px 0 12px}
.theme-picker .personal-background-controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
.theme-picker .personal-background-controls label{display:grid;gap:5px;flex:1 1 210px;min-width:0;font-size:13px}
.theme-picker .personal-background-controls select{width:100%;min-height:42px;font:inherit;padding:8px;border:1px solid var(--line,#dce3ec);border-radius:10px;background:var(--field-bg,var(--surface-solid,#fff));color:var(--text,#203040)}
.theme-picker .personal-background-controls .btn{font-size:14px;min-height:42px;white-space:normal}
.theme-picker .personal-background-controls input[hidden]{display:none!important}
.theme-picker .personal-background-transparency{display:grid;gap:6px;margin-top:16px;min-width:0}
.theme-picker .personal-background-transparency label,.theme-picker .personal-background-range-ends{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.theme-picker .personal-background-transparency output{font-variant-numeric:tabular-nums;flex-shrink:0}
.theme-picker .personal-background-transparency input[type=range]{display:block;width:100%;min-width:0;min-height:32px;height:32px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;accent-color:var(--accent,#21835b);cursor:pointer}
.theme-picker .personal-background-transparency input:disabled{cursor:default;opacity:.5}
.theme-picker .personal-background-range-ends{color:var(--muted,#667384)}
.theme-picker .personal-background-transparency p{margin:0}
.theme-picker .personal-background-status{min-height:20px;margin-bottom:0}
@media(max-width:560px){.theme-picker .personal-background-controls{display:grid;grid-template-columns:minmax(0,1fr)}.theme-picker .personal-background-controls label{width:100%}}
@media print{html.has-personal-background body,html.ss-studio.has-personal-background body{background-image:none!important}}