/* Appearance preferences for the live Barrick Media workspace. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}
.theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.theme-toggle .theme-icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon--moon { display: none; }
.account-theme-control { display: flex; justify-content: flex-end; width: 100%; max-width: 430px; margin-bottom: 10px; }
.account-startup { position: relative; }
.startup-theme-control { position: absolute; top: 22px; right: 24px; }
.privacy-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.privacy-header > a { font-weight: 650; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #79c9ed;
  --blue-dark: #9bdaf5;
  --navy: #e1edf5;
  --gold: #d3bc7e;
  --gold-light: #332f22;
  --ink: #e6eef4;
  --muted: #a7b7c5;
  --canvas: #0d1722;
  --line: #304353;
  --white: #162431;
  --soft-blue: #203b4c;
  --shadow: 0 6px 25px rgb(0 0 0 / 14%);
  --theme-surface: #162431;
  --theme-raised: #203341;
  --theme-input: #101e2a;
  --theme-primary: #126b92;
  --theme-primary-hover: #177aa5;
  --theme-success-bg: #183b30;
  --theme-success: #9ae1ba;
  --theme-warning-bg: #3a3020;
  --theme-warning: #ead092;
  --theme-error-bg: #432a2b;
  --theme-error: #ffbab2;
}

/* App chrome and shared live controls. Brand and media pixels are preserved. */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .account-auth-shell,
:root[data-theme="dark"] .drive-media-open,
:root[data-theme="dark"] .drive-library-entry { background: var(--theme-surface); }
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .mobile-nav { background: rgb(22 36 49 / 97%); border-color: var(--line); }
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .mobile-logo,
:root[data-theme="dark"] .account-auth-mobile-brand img,
:root[data-theme="dark"] .account-startup > img { background: #fff; padding: 6px; border-radius: 4px; }
:root[data-theme="dark"] .workspace-badge { background: var(--theme-input); }
:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .account-profile-avatar { background: var(--soft-blue); color: var(--blue); }
:root[data-theme="dark"] .header-actions > .avatar { border-color: var(--theme-surface); }
:root[data-theme="dark"] .avatar-button { border-color: var(--theme-surface); }
:root[data-theme="dark"] .nav-item,
:root[data-theme="dark"] .mobile-nav-item,
:root[data-theme="dark"] .icon-btn { color: var(--muted); }
:root[data-theme="dark"] .nav-item.active,
:root[data-theme="dark"] .mobile-nav-item.active { color: var(--blue); }
:root[data-theme="dark"] .mobile-nav-item.active svg { fill: var(--soft-blue); }
:root[data-theme="dark"] .nav-count,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .filter-chip.active { background: var(--theme-primary); color: #fff; border-color: var(--theme-primary); }
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .filter-chip { background: var(--theme-surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .btn-gold { background: var(--gold); color: #17232b; }
:root[data-theme="dark"] .btn-danger { background: var(--theme-error-bg); color: var(--theme-error); border-color: #694346; }
:root[data-theme="dark"] .badge { background: var(--theme-raised); color: var(--muted); }
:root[data-theme="dark"] .badge-blue { background: var(--soft-blue); color: var(--blue); }
:root[data-theme="dark"] .badge-gold { background: var(--gold-light); color: var(--gold); }
:root[data-theme="dark"] .badge-green { background: var(--theme-success-bg); color: var(--theme-success); }
:root[data-theme="dark"] .text-input,
:root[data-theme="dark"] .search-input,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .form-stack textarea,
:root[data-theme="dark"] .form-stack select,
:root[data-theme="dark"] .drive-google-form input,
:root[data-theme="dark"] .drive-source-filter select,
:root[data-theme="dark"] .drive-audience-control select,
:root[data-theme="dark"] .drive-copy-field input,
:root[data-theme="dark"] .account-auth-form input,
:root[data-theme="dark"] .account-invite-card select,
:root[data-theme="dark"] .account-member-controls select { background: var(--theme-input); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #91a4b5; opacity: 1; }
:root[data-theme="dark"] input { accent-color: var(--blue); }
:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .drive-sync-progress { background: var(--soft-blue); color: var(--ink); border-color: #365566; }
:root[data-theme="dark"] .drive-notice { background: #193738; color: #b1ded9; border-color: #355956; }
:root[data-theme="dark"] .drive-notice-error,
:root[data-theme="dark"] .drive-inline-error { background: var(--theme-error-bg); color: var(--theme-error); border-color: #694346; }
:root[data-theme="dark"] .modal-backdrop { background: rgb(2 8 15 / 76%); }
:root[data-theme="dark"] .modal-close { background: var(--theme-raised); color: var(--ink); }
:root[data-theme="dark"] .toast { background: #29485d; color: #f0f6fa; border: 1px solid #466477; }

/* Account forms, profile details and member management. */
:root[data-theme="dark"] .account-auth-tabs a { color: var(--muted); }
:root[data-theme="dark"] .account-auth-tabs a[aria-current] { color: var(--blue); }
:root[data-theme="dark"] .account-auth-heading p,
:root[data-theme="dark"] .account-auth-form .field > small,
:root[data-theme="dark"] .account-auth-note,
:root[data-theme="dark"] .account-auth-help,
:root[data-theme="dark"] .account-auth-help > a,
:root[data-theme="dark"] .account-auth-footer,
:root[data-theme="dark"] .account-auth-mobile-brand span,
:root[data-theme="dark"] .account-signed-in p,
:root[data-theme="dark"] .account-sidebar-privacy,
:root[data-theme="dark"] .account-app-footer,
:root[data-theme="dark"] .account-app-footer a,
:root[data-theme="dark"] .account-startup p,
:root[data-theme="dark"] .account-profile-details dt,
:root[data-theme="dark"] .account-profile-note,
:root[data-theme="dark"] .account-privacy-card p,
:root[data-theme="dark"] .account-invite-card > p,
:root[data-theme="dark"] .account-invite-row small,
:root[data-theme="dark"] .account-member-controls label > span,
:root[data-theme="dark"] .account-member-controls small,
:root[data-theme="dark"] .workspace-badge small,
:root[data-theme="dark"] .sidebar-profile small,
:root[data-theme="dark"] .sidebar-bottom > p { color: var(--muted); }
:root[data-theme="dark"] .account-profile-details dd,
:root[data-theme="dark"] .account-member-controls strong { color: #c9d9e5; }
:root[data-theme="dark"] .account-invite-icon { color: var(--blue); }
:root[data-theme="dark"] .account-invitation-result { background: #2d2b22; border-color: #665d3f; }
:root[data-theme="dark"] .account-invitation-result p,
:root[data-theme="dark"] .account-invitation-result > small { color: #d7c9a2; }
:root[data-theme="dark"] .account-invitation-result textarea { background: #232219; border-color: #665d3f; color: #ead7a4; }

/* Connected accounts, folder picker and the live media library. */
:root[data-theme="dark"] .drive-intro { background: linear-gradient(120deg, #193648, #2b302b); border-color: #3b515a; }
:root[data-theme="dark"] .drive-intro-icon { background: var(--theme-surface); }
:root[data-theme="dark"] .drive-folder-icon,
:root[data-theme="dark"] .drive-setup-steps span { color: var(--gold); }
:root[data-theme="dark"] .drive-status { background: var(--soft-blue); color: var(--blue); }
:root[data-theme="dark"] .drive-status.is-good { background: var(--theme-success-bg); color: var(--theme-success); }
:root[data-theme="dark"] .drive-status.is-warning { background: var(--theme-warning-bg); color: var(--theme-warning); }
:root[data-theme="dark"] .drive-status.is-muted { background: var(--theme-raised); color: var(--muted); }
:root[data-theme="dark"] .drive-search-form,
:root[data-theme="dark"] .drive-audience-control { background: var(--theme-input); border-color: var(--line); }
:root[data-theme="dark"] .drive-folder-row { border-color: var(--line); }
:root[data-theme="dark"] .drive-folder-browse > svg:first-child { color: var(--gold); }
:root[data-theme="dark"] .drive-folder-browse:hover { background: var(--theme-raised); }
:root[data-theme="dark"] .drive-switch > span:not(.sr-only) { background: #526675; }
:root[data-theme="dark"] .drive-switch input:checked + span { background: var(--theme-primary); }
:root[data-theme="dark"] .drive-spinner { border-color: #3e5669; border-top-color: var(--blue); }
:root[data-theme="dark"] .drive-media-visual { background: #203341; }
:root[data-theme="dark"] .drive-media-fallback { color: #a1b8c8; }
:root[data-theme="dark"] .drive-kind-label { background: rgb(15 29 40 / 94%); color: #e5eff5; }
:root[data-theme="dark"] .drive-video-play { background: rgb(15 29 40 / 90%); color: #e5eff5; }
:root[data-theme="dark"] .drive-detail-preview { background: #09121c; }
:root[data-theme="dark"] .drive-intro p,
:root[data-theme="dark"] .drive-intro p.drive-consent-note,
:root[data-theme="dark"] .drive-pilot-note,
:root[data-theme="dark"] .drive-email,
:root[data-theme="dark"] .drive-source-meta,
:root[data-theme="dark"] .drive-switch,
:root[data-theme="dark"] .drive-empty p,
:root[data-theme="dark"] .drive-loading,
:root[data-theme="dark"] .drive-setup > p,
:root[data-theme="dark"] .drive-setup-steps small,
:root[data-theme="dark"] .drive-setup-details,
:root[data-theme="dark"] .drive-breadcrumb,
:root[data-theme="dark"] .drive-breadcrumb button[aria-current],
:root[data-theme="dark"] .drive-folder-browse small,
:root[data-theme="dark"] .drive-empty-inline,
:root[data-theme="dark"] .drive-sync-progress small,
:root[data-theme="dark"] .drive-media-caption small,
:root[data-theme="dark"] .drive-detail-info > p,
:root[data-theme="dark"] .drive-google-steps,
:root[data-theme="dark"] .drive-audience-control label > span,
:root[data-theme="dark"] .drive-audience-control > small,
:root[data-theme="dark"] .detail-meta dt,
:root[data-theme="dark"] .modal-body > .form-stack p { color: var(--muted); }
:root[data-theme="dark"] .drive-empty-inline strong,
:root[data-theme="dark"] .detail-meta dd { color: #c9d9e5; }

@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { background: var(--soft-blue); color: var(--blue); }
  :root[data-theme="dark"] .btn-primary:hover { background: var(--theme-primary-hover); }
  :root[data-theme="dark"] .btn-secondary:hover,
  :root[data-theme="dark"] .btn-ghost:hover,
  :root[data-theme="dark"] .filter-chip:hover:not(.active),
  :root[data-theme="dark"] .nav-item:hover:not(.active),
  :root[data-theme="dark"] .icon-btn:hover { background: var(--theme-raised); color: var(--blue); border-color: #456072; }
  :root[data-theme="dark"] .btn-gold:hover { background: #e0ca91; color: #17232b; }
}

@media (max-width: 800px) {
  :root[data-theme="dark"] .brand-logo { padding: 3px; }
  .account-live-shell .header-actions { gap: 8px; }
}
@media (max-width: 640px) {
  .account-live-shell .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .account-live-shell .header-actions .theme-toggle { width: 44px; height: 44px; padding: 10px; }
  .account-live-shell .header-actions .theme-toggle-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .account-theme-control { margin-bottom: 16px; }
  .account-startup { padding-top: 100px; }
  .startup-theme-control { top: 18px; right: 20px; }
}
@media (max-width: 420px) {
  .account-live-shell .account-header-role { display: none; }
}