/* Ownership: material theme skin (color/elevation/state overrides).
   Avoid adding feature layout blocks when the feature has its own file. */

/* Material theme toggle button state */
body.theme-material #design-theme-btn {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
}

body.theme-material.dark-theme #design-theme-btn {
  background: var(--color-brand-accent-soft);
  color: var(--color-brand-accent);
}

/* ========== LIGHT THEME SKIN ========== */
body.theme-material {
  background: var(--color-bg-surface-alt);
  color: var(--color-text-primary);
  transition: background-color 0s ease, color 0s ease;
}

body.theme-material .mobile-topbar {
  background: var(--color-bg-surface);
  border-bottom-color: var(--color-border-default);
  box-shadow: var(--shadow-1);
}

body.theme-material .mobile-menu-btn {
  border-radius: 50%;
  transition: background 0.15s ease, transform 0.15s ease;
}

body.theme-material .mobile-menu-btn:hover {
  background: var(--color-bg-hover);
  transform: scale(1.08);
}

body.theme-material .main {
  background: var(--color-bg-surface-alt);
}

body.theme-material .main-title {
  color: var(--color-text-primary);
}

@keyframes taskCardNewMaterial {
  0% { background: var(--color-success-soft); box-shadow: inset 4px 0 0 var(--color-success); }
  100% { background: var(--color-bg-surface); box-shadow: none; }
}

body.theme-material .modal-btn {
  border-radius: 20px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
body.theme-material .modal-btn:focus-visible {
  outline: 2px solid var(--color-focus-border);
  outline-offset: 2px;
}

body.theme-material .modal-btn-rename {
  background: transparent;
  color: var(--color-text-secondary);
}

body.theme-material .modal-btn-rename:hover {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary);
  transform: scale(1.02);
}

body.theme-material .modal-btn-secondary {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
}

body.theme-material .modal-btn-secondary:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
  transform: scale(1.02);
}

body.theme-material .modal-btn-primary,
body.theme-material .modal-btn-success {
  background: var(--color-brand-primary) !important;
  color: var(--color-brand-primary-foreground) !important;
  border-radius: 20px;
}

body.theme-material .modal-btn-primary:hover,
body.theme-material .modal-btn-success:hover {
  background: var(--color-brand-primary-hover) !important;
  transform: scale(1.02);
}

body.theme-material .modal-btn-danger {
  border-radius: 20px;
  color: var(--color-danger-foreground) !important;
}

body.theme-material .modal-btn-danger:hover {
  transform: scale(1.02);
}

body.theme-material .modal-input {
  background: var(--color-bg-surface);
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--color-border-default), var(--shadow-1);
  transition: box-shadow 0.15s ease;
}

body.theme-material .modal-input:hover {
  box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-1);
}

body.theme-material .modal-input:focus {
  box-shadow: 0 0 0 2px var(--color-focus-ring), var(--shadow-1);
}


/* ========== DARK THEME SKIN ========== */
body.theme-material.dark-theme {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}

body.theme-material.dark-theme .main {
  background: var(--color-bg-page);
}

@keyframes taskCardNewMaterialDark {
  0% { background: var(--color-success-soft); box-shadow: inset 4px 0 0 var(--color-success); }
  100% { background: var(--color-bg-muted); box-shadow: none; }
}

body.theme-material.dark-theme .modal-btn-secondary {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

body.theme-material.dark-theme .modal-btn-secondary:hover {
  background: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

body.theme-material.dark-theme .modal-btn-rename {
  background: transparent;
  color: var(--color-text-primary);
}

body.theme-material.dark-theme .modal-btn-rename:hover {
  background: var(--color-brand-accent-soft);
  color: var(--color-brand-accent);
}

body.theme-material.dark-theme .modal-confirm-text,
body.theme-material.dark-theme .modal-label {
  color: var(--color-text-primary);
}

body.theme-material.dark-theme .modal-input {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-1);
}

body.theme-material.dark-theme .modal-input:hover {
  box-shadow: 0 0 0 1px var(--color-focus-border), var(--shadow-1);
}

body.theme-material.dark-theme .modal-input:focus {
  box-shadow: 0 0 0 2px var(--color-focus-ring), var(--shadow-1);
}

/* Toolbar dark-theme visuals are owned by css/features/task-list.css */