:root {
  --primary: #B3907A; /* Tan/Beige */
  --primary-dark: #B89A74; /* Darker Beige */
  --primary-light: rgba(210, 180, 140, 0.1); /* Light Beige */
  --secondary: #E1DACA; /* Beige */
  --light: #FEFBF6; /* Off-white */
  --dark: #3D3630; /* Dark Brown */
  --gray: #8d99ae;
  --gray-light: #edf2f7;
  --success: #B3907A; /* Sage Green */
  --danger: #d44e4e; /* Muted Coral */
  --warning: #E8C07D; /* Gold */
  --card-shadow: rgba(59, 43, 21, 0.07) 0px 10px 30px 0px;
  --border-radius: 12px;
  --spacing: 16px;
  
  /* Background colors */
  --body-bg: #EFE7DA;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --border-color: #e1daca;
  --text-color: #3D3630;
  --text-light: #8d99ae;
  --header-bg: #ffffff;
  --shopping-handle-bg: #ffffff;
  --meal-selected-bg: #efe7da61;
  --meal-header-bg: #E1DACA;
  --footer-bg: #faf9f5;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #D4B896; /* Lighter tan for better contrast on dark */
    --primary-dark: #C2A684; /* Slightly darker version */
    --primary-light: rgba(212, 184, 150, 0.15); /* Darker primary with opacity */
    --secondary: #4A453E; /* Dark secondary */
    --light: #2A2520; /* Very dark */
    --dark: #E8DDD2; /* Light text on dark bg */
    --gray: #9CA3AF;
    --gray-light: #374151;
    --success: #D4B896;
    --danger: #EF4444;
    --warning: #F59E0B;
    --card-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px 0px;
    
    /* Dark mode background colors */
    --body-bg: #1A1815;
    --card-bg: #2A2520;
    --input-bg: #374151;
    --border-color: #4a443e91;
    --text-color: #E8DDD2;
    --text-light: #9CA3AF;
    --header-bg: #2A2520;
    --shopping-handle-bg: #2A2520;
    --meal-selected-bg: rgba(74, 69, 62, 0.6);
    --meal-header-bg: #4A453E;
    --footer-bg: #1F1B18;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--body-bg);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 15px;
  overflow-x: hidden;
}

button {
  cursor: pointer;
  background-color: #B3907A;
  color: #ffffff;
  border: none;
  padding: 12px 16px;
  font-weight: 500;
  transition: all 0.2s;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--border-radius);
}

button:hover {
opacity: 0.85;      
transform: translateY(-1px);
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  background-color: var(--gray);
  opacity: 0.6;
  cursor: not-allowed;
}

button.secondary {
  background-color: var(--secondary);
  color: var(--dark);
}

button.success {
  background-color: var(--success);
  color: white;
}

button.danger {
  background-color: var(--danger);
  color: white;
}

button.warning {
  background-color: var(--warning);
}

button.outlined {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

button.outlined:hover {
  background-color: var(--primary-light);
}

button.icon-only {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--primary);
}

input, select, textarea {
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 15px;
  width: 100%;
  transition: border-color 0.2s;
  background-color: var(--input-bg);
  color: var(--text-color);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

input::placeholder, textarea::placeholder {
  color: var(--text-light);
}

h1, h2, h3 {
  color: var(--text-color);
  font-weight: 600;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: var(--spacing);
}

h2 {
  font-size: 1.4rem;
  margin-bottom: calc(var(--spacing) * 0.75);
}

h3 {
  font-size: 1.2rem;
  margin-bottom: calc(var(--spacing) * 0.5);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--primary-dark);
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing);
}

.hidden {
  display: none !important;
}

.error-message {
  background-color: rgba(207, 141, 126, 0.1);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing);
  border-left: 4px solid var(--danger);
}

@media (prefers-color-scheme: dark) {
  .error-message {
    background-color: rgba(239, 68, 68, 0.1);
  }
}

.material-icons {
  font-size: 20px;
}

/* App Header */
.app-header {
  background-color: var(--header-bg);
  box-shadow: 0 2px 15px rgba(59, 43, 21, 0.07);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (prefers-color-scheme: dark) {
  .app-header {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  }
}

/* Logo switching for dark/light mode */
.logo-dark-mode {
  display: none;
}

.logo-light-mode {
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  .logo-dark-mode {
    display: inline-block;
  }

  .logo-light-mode {
    display: none;
  }
}

/* Login logos container */
.login-logos {
  position: relative;
}

.app-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-logo .material-icons {
  font-size: 24px;
}

.logo {
  max-width: 150px;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #B3907A;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

/* Login Page */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--spacing);
}

.user-menu-button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  margin-right: 8px; /* Add some space between settings button and avatars */
}

.user-menu-button:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(179, 144, 122, 0.3);
}

.user-menu-button .material-icons {
  font-size: 20px;
}

.login-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  padding: 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.login-card h1 {
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 28px;
}

.login-card p {
  color: var(--text-light);
  margin-bottom: 32px;
}

.login-logo {
  margin-bottom: 24px;
}

.login-logo .material-icons {
  font-size: 48px;
  color: var(--primary);
}

.google-sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card-bg);
  color: var(--text-color);
  font-size: 16px;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  transition: background-color 0.3s;
  width: 100%;
  border: 1px solid var(--border-color);
}

.google-sign-in:hover {
  background-color: var(--secondary);
  box-shadow: 0 2px 10px rgba(59, 43, 21, 0.1);
}

@media (prefers-color-scheme: dark) {
  .google-sign-in:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
}

.google-sign-in img {
  margin-right: 12px;
  width: 18px;
  height: 18px;
}

/* Loading Spinner */
.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
  gap: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(210, 180, 140, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Main Page - Weekly Planner */
.weekly-planner {
  padding-bottom: 80px;
}

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.week-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.week-title h1 {
  margin-bottom: 0;
  font-size: 20px;
}

.week-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.day-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.day-card {
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: transform 0.2s, box-shadow 0.2s;
}

.day-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

.day-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.day-header h2 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.day-icon {
  margin-right: 12px;
  color: var(--primary);
}

.day-content {
  padding: 16px;
}

.meal-selection {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meal-select {
  flex: 1;
  border-bottom: 5px solid #92715d;
}

.random-button {
  background-color: #e1daca80;
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--dark);
  border-radius: 50%;
}

.selected-meal {
  margin-top: 12px;
  padding: 12px;
  background-color: var(--secondary);
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 8px;
}

.selected-meal:hover {
  background-color: var(--primary-light);
}

.meal-ingredients {
  margin-top: 8px;
  font-size: 14px;
  color: var(--dark);
}

.meal-ingredient {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.meal-ingredient .material-icons {
  font-size: 16px;
  color: var(--primary);
}

/* Ingredients container */
.ingredients-container {
  transition: max-height 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  margin: 0px 0px 20px 13px;
}

.ingredients-container.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* Ingredients toggle button */
.ingredients-toggle {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--primary);
  margin: 13px;
  cursor: pointer;
  padding: 4px 8px;
  font-weight: 500;
  background-color: var(--primary-light);
  border-radius: 16px;
  transition: background-color 0.2s;
}

.ingredients-toggle:hover {
  background-color: rgba(210, 180, 140, 0.2);
}

.ingredients-toggle .material-icons {
  font-size: 16px;
  margin-right: 4px;
}

.no-meal {
  color: var(--gray);
  font-style: italic;
}

/* Additional Meal Management Buttons */
.meal-management {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.meal-management button {
  min-width: 150px;
}

/* Shopping List Panel */
.shopping-list-panel {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  background-color: var(--shopping-handle-bg);
  box-shadow: var(--card-shadow);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  z-index: 200;
  transition: transform 0.3s ease;
  max-height: 610px;
  overflow-y: auto;
  transform: translateY(calc(100% - 60px));
}

@media (prefers-color-scheme: dark) {
  .shopping-list-panel {
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.5);
  }
}

.shopping-list-panel.expanded {
  transform: translateY(0);
}

.shopping-list-handle {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  padding: 0 16px;
}



.shopping-list-handle h2 {
  margin: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shopping-list-handle .material-icons {
  color: var(--primary);
}

/* Shopping List Progress Bar */
.shopping-progress {
display: flex;
align-items: center;
width: 100%;
padding: 0 16px;
}

.progress-bar {
flex-grow: 1;
height: 8px;
background-color: var(--gray-light);
border-radius: 4px;
overflow: hidden;
position: relative;
}

.progress-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--progress, 0%);
background-color: var(--primary);
border-radius: 4px;
transition: width 0.3s ease;
}

.progress-text {
margin-left: 8px;
font-size: 12px;
color: var(--text-light);
min-width: 36px;
text-align: right;
}

.shopping-list-content {
  padding: 0;
}

.shopping-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  margin: 17px;
}

.shopping-list-summary {
  font-size: 14px;
  color: var(--gray);
  display: flex;
  align-items: center;
  gap: 4px;
}

.shopping-items {
  list-style: none;
}

.shopping-item {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--border-color);
}

.shopping-item:last-child {
  border-bottom: none;
}

.shopping-checkbox {
  margin-right: 12px;
  position: relative;
}

.custom-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
  cursor: pointer;
}

.custom-checkbox.checked {
  background-color: var(--success);
  border-color: var(--success);
}

.custom-checkbox.checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0px;
  transform: rotate(45deg);
}

.shopping-item-details {
  flex: 1;
}

.shopping-item-name {
  font-weight: 500;
}

.shopping-item.checked .shopping-item-name {
  text-decoration: line-through;
  color: var(--text-light);
}

.shopping-item-info {
  display: flex;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
  align-items: center;
  gap: 4px;
}

.shopping-item-meals {
  font-style: italic;
}

.no-shopping-items {
  text-align: center;
  padding: 20px;
  color: var(--text-light);
}

/* Add/Edit Meal Dialog */
.dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
}

@media (prefers-color-scheme: dark) {
  .dialog-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

.dialog {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h2 {
  margin: 0;
  font-size: 18px;
}

.dialog-body {
  padding: 16px;
}

.dialog-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
}

.ingredients-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ingredients-header h3 {
  margin: 0;
}

.ingredient-row {
  display: grid;
  grid-template-columns: 3fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.remove-ingredient {
  background-color: transparent;
  color: var(--danger);
  padding: 4px;
  width: 30px;
  height: 30px;
}

.add-ingredient-button {
  background-color: var(--primary);
  width: 100%;
  margin-top: 8px;
}

/* Meal Picker Dialog */
.meal-list {
  max-height: 60vh;
  overflow-y: auto;
}

.meal-item {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.meal-item:hover {
  background-color: var(--primary-light);
}

.meal-item:last-child {
  border-bottom: none;
}

.meal-item-name {
  font-weight: 500;
}

.meal-item-ingredients {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

.meal-item-actions {
  display: flex;
  gap: 8px;
}

/* All Meals Dialog */
.all-meals-dialog .dialog {
  max-width: 600px;
}

.meals-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.meals-list-item {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.meals-list-item:last-child {
  border-bottom: none;
}

.meal-name {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.meal-description {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 8px;
}

.meal-actions {
  display: flex;
  gap: 8px;
  position: absolute;
  top: 16px;
  right: 16px;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dialog-backdrop {
  animation: fadeIn 0.2s ease;
}

.dialog {
  animation: slideUp 0.2s ease;
}

/* Responsive Styles */
@media (max-width: 767px) {
  .ingredient-row {
    grid-template-columns: 2fr 1fr auto;
  }

  .week-actions,
  .meal-management {
    flex-direction: column;
    align-items: stretch;
  }

  .meal-management button {
    width: 100%;
  }
}

/* Household name in header */
.household-name {
color: var(--dark);
font-weight: 500;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}

/* Partner Section Styles */
.partner-section {
background-color: var(--card-bg);
box-shadow: 0 2px 10px rgba(59, 43, 21, 0.05);
padding: 12px 0;
margin-bottom: 16px;
animation: slideDown 0.3s ease;
display: block !important;
}

@media (prefers-color-scheme: dark) {
.partner-section {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
}

@keyframes slideDown {
from { transform: translateY(-20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.partner-container {
display: flex;
flex-direction: column;
gap: 12px;
}

.partner-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.partner-header h3 {
margin: 0;
font-size: 16px;
color: var(--primary);
}

.partner-status {
background-color: var(--secondary);
border-radius: var(--border-radius);
padding: 12px;
}

/* Partner Info Styles */
.partner-info {
display: flex;
align-items: center;
gap: 12px;
}

.partner-avatar {
background-color: #C1B6A4;
}

.partner-details {
display: flex;
flex-direction: column;
}

.partner-name {
font-weight: 500;
}

.partner-label {
font-size: 12px;
color: var(--text-light);
}

/* Partner Pending Styles */
.partner-pending {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-color);
}

.partner-pending .material-icons {
font-size: 24px;
}

.pending-details {
display: flex;
flex-direction: column;
font-size: 14px;
}

.partner-email {
font-weight: 500;
}

/* No Partner Styles */
.no-partner {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-light);
font-style: italic;
}

/* Invite Dialog Styles */
.invite-info {
color: var(--text-light);
font-size: 14px;
margin-top: 16px;
line-height: 1.4;
}

/* Activity Indicator Styles */
.activity-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 6px;
}

.activity-active {
background-color: var(--success);
box-shadow: 0 0 6px var(--success);
}

.activity-recent {
background-color: var(--warning);
}

.activity-offline {
background-color: var(--gray);
}

/* Meal Audit Info */
.meal-audit {
font-size: 12px;
color: var(--text-light);
font-style: italic;
margin-top: 4px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
.household-name {
  max-width: 120px;
}

.partner-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.partner-header button {
  width: 100%;
}
}

.user-menu .partner-avatar {
background-color: #C1B6A3 !important;
z-index: 1;
}

/* Selected Meal Container Styles */
.selected-meal-container {
background-color: var(--meal-selected-bg);
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.2s, transform 0.2s;
}

/* Selected Meal Header Styles */
.selected-meal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background-color: var(--meal-header-bg);
}

.selected-meal-name {
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
color: var(--text-color);
}

/* Added by indicator - small circle with the initial */
.meal-added-by {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--primary);
color: white;
font-size: 10px;
font-weight: 600;
margin-left: 6px;
}

/* Action Buttons */
.meal-action-buttons {
display: flex;
gap: 4px;
}

.meal-action-button {
width: 30px;
height: 30px;
padding: 3px;
border-radius: 50%;
background-color: transparent;
box-shadow: none;
color: var(--dark);
opacity: 0.7;
transition: opacity 0.2s, background-color 0.2s;
}

.meal-action-button:hover {
opacity: 1;
transform: none;
box-shadow: none;
}

.meal-action-button .material-icons {
font-size: 18px;
}

/* Meal Ingredients in Selected State */
.selected-meal-container .meal-ingredients {
padding: 12px;
padding-top: 8px;
}

/* No Meal State */
.no-meal {
margin-top: 8px;
padding: 8px;
text-align: center;
color: var(--gray);
font-style: italic;
}

/* Hide when no meal selected, show meal-select button instead */
.selected-meal-container + .no-meal {
display: none;
}

.custom-checkbox {
position: relative;
}

.checked-by-initials {
font-weight: bold;
user-select: none;
pointer-events: none;
}

.custom-checkbox {
position: relative;
}

.checked-by-initials {
font-weight: bold;
user-select: none;
pointer-events: none;
background-color: var(--primary-light);
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
font-size: 10px;
color: var(--primary-dark);
}

/* For current user initials */
.checked-by-initials.by-current-user {
background-color: var(--primary-light);
color: var(--primary-dark);
}

/* For partner initials */
.checked-by-initials.by-partner {
background-color: var(--success);
color: white;
}

.shopping-list-arrow {
transition: transform 0.3s ease;
}

.shopping-list-panel.expanded .shopping-list-arrow {
transform: rotate(180deg);
}

.shopping-list-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(61, 41, 28, 0.6);
z-index: 190;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

@media (prefers-color-scheme: dark) {
.shopping-list-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}
}

.shopping-list-backdrop.visible {
opacity: 1;
pointer-events: auto;
}

body.no-scroll {
overflow: hidden;
}

/* Add this to the end of your style.css file */
.day-card.current-day {
border: 3px solid var(--primary);
box-shadow: rgb(179 144 122 / 80%) 0px 25px 20px -20px;
}

/* Planner Footer - add this to your style.css file */
.planner-footer {
margin-top: 32px;
padding: 16px;
background-color: var(--footer-bg);
border-radius: var(--border-radius);
width: 100%;
}

.planner-footer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

.planner-footer-main {
grid-column: 1 / -1;
}

.planner-footer-main button {
width: 100%;
padding: 14px;
font-size: 16px;
}

.planner-footer button {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
.planner-footer-grid {
grid-template-columns: 1fr;
}
}

/* Updated Shopping List Header with View Toggle */
.shopping-list-header {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}

.shopping-list-controls {
display: flex;
justify-content: space-between;
}

.shopping-list-view-toggle {
display: flex;
border-radius: var(--border-radius);
overflow: hidden;
border: 5px solid var(--primary-light);
}

.view-toggle-button {
background-color: transparent;
color: var(--dark);
padding: 9px 22px;
font-size: 13px;
border-radius: 0;
box-shadow: none;
border-right: 1px solid var(--primary-light);
font-weight: normal;
}

.view-toggle-button:last-child {
border-right: none;
}

.view-toggle-button.active {
background-color: var(--primary);
color: white;
}

.view-toggle-button:hover:not(.active) {
background-color: var(--primary-light);
box-shadow: none;
transform: none;
}

/* Category headers in shopping list */
.shopping-category-header {
padding: 12px 8px 4px 20px;
font-weight: 600;
color: var(--primary);
border-bottom: 1px solid var(--primary-light);
margin-top: 8px;
position: sticky;
top: 0;
background-color: var(--card-bg);
z-index: 10;
}

.shopping-category-header:first-child {
margin-top: 0;
}

/* Category badges */
.category-badge {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}

.category-badge:hover::after {
content: 'Change category';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
white-space: nowrap;
pointer-events: none;
margin-bottom: 4px;
}

/* Category colors */
.category-vegetables { background-color: #4CAF50; }
.category-fruits { background-color: #FF9800; }
.category-meat { background-color: #F44336; }
.category-seafood { background-color: #03A9F4; }
.category-dairy { background-color: #FFEB3B; }
.category-grains { background-color: #795548; }
.category-beans { background-color: #8BC34A; }
.category-nuts { background-color: #9C27B0; }
.category-baking { background-color: #E91E63; }
.category-condiments { background-color: #673AB7; }
.category-beverages { background-color: #2196F3; }
.category-frozen { background-color: #00BCD4; }
.category-canned { background-color: #607D8B; }
.category-snacks { background-color: #FFC107; }
.category-other { background-color: #9E9E9E; }

/* Category picker dialog */
.category-picker-dialog {
max-width: 350px;
}

.category-option {
display: flex;
align-items: center;
padding: 12px;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.2s;
color: var(--text-color);
}

.category-option:hover {
background-color: var(--primary-light);
}

.category-option.selected {
background-color: var(--primary-light);
}

.category-option .category-badge {
width: 16px;
height: 16px;
}

/* Model loading toast */
.model-loading-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px 20px;
border-radius: 20px;
font-size: 14px;
z-index: 1000;
opacity: 0.9;
animation: fadeIn 0.3s ease;
}

@media (prefers-color-scheme: dark) {
.model-loading-toast {
background-color: rgba(42, 37, 32, 0.9);
border: 1px solid var(--border-color);
}
}

.model-loading-toast.error {
background-color: rgba(244, 67, 54, 0.8);
}

.model-loading-toast.fade-out {
animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
from { opacity: 0.9; transform: translate(-50%, 0); }
to { opacity: 0; transform: translate(-50%, 20px); }
}

/* Mobile adjustments */
@media (max-width: 400px) {
.shopping-list-controls {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
}

/* Autocomplete styles */
.autocomplete-container {
position: relative;
width: 100%;
}

.autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 100%;
max-height: 200px;
overflow-y: auto;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-top: none;
border-radius: 0 0 4px 4px;
box-shadow: var(--card-shadow);
display: none;
}

.autocomplete-dropdown.active {
display: block;
}

.autocomplete-item {
padding: 8px 12px;
cursor: pointer;
transition: background-color 0.2s;
color: var(--text-color);
}

.autocomplete-item:hover, .autocomplete-item.selected {
background-color: var(--primary-light);
}

.category-selection {
margin-top: 8px;
background-color: var(--secondary);
padding: 8px;
border-radius: 4px;
border: 1px solid var(--border-color);
}

.category-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}

.category-option {
display: flex;
align-items: center;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
border: 1px solid var(--border-color);
background-color: var(--card-bg);
color: var(--text-color);
}

.category-option.selected {
background-color: var(--primary-light);
border-color: var(--primary);
}

.category-badge {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
background-color: #ccc;
}

/* Category colors */
.category-vegetables { background-color: #abdc73; }
.category-fruits { background-color: #fdb74f; }
.category-meat { background-color: #f5695f; }
.category-seafood { background-color: #6dc0e6; }
.category-dairy { background-color: #f1e579; }
.category-grains { background-color: #87695e; }
.category-beans { background-color: #a58c60; }
.category-nuts { background-color: #9f6c5d; }
.category-baking { background-color: #e0cdb4; }
.category-condiments { background-color: #a185d1; }
.category-beverages { background-color: #86b8e1; }
.category-frozen { background-color: #00BCD4; }
.category-canned { background-color: #7b97a5; }
.category-snacks { background-color: #f6d369; }
.category-other { background-color: #afacac; }


.partner-status {
background-color: var(--secondary);
border-radius: var(--border-radius);
padding: 12px;
}

.partner-status.hidden {
display: none;
}

/* Auth Form Styles */
.auth-tabs {
display: flex;
margin-bottom: 20px;
}

.auth-tab {
flex: 1;
background: none;
border: none;
padding: 12px;
font-size: 16px;
font-weight: 500;
color: var(--gray);
cursor: pointer;
transition: all 0.2s;
}

.auth-tab.active {
color: var(--primary);
border-bottom: 3px solid var(--primary);
border-radius: 0px;
}

.auth-form {
margin-bottom: 20px;
}

.auth-button {
width: 100%;
background-color: var(--primary);
color: white;
border: none;
padding: 12px;
font-size: 16px;
font-weight: 500;
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.2s;
}

.auth-button:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.auth-separator {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0;
}

.auth-separator::before,
.auth-separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #ddd;
}

.auth-separator span {
padding: 0 10px;
color: var(--gray);
font-size: 14px;
}

.form-group {
margin-bottom: 16px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
text-align: left;
}

.google-sign-in {
margin-top: 0;
}

/* Password field styling */
.password-field {
position: relative;
display: flex;
align-items: center;
}

.password-field input {
flex: 1;
padding-right: 40px;
}

.password-toggle {
position: absolute;
right: 10px;
cursor: pointer;
color: var(--gray);
display: flex;
align-items: center;
justify-content: center;
}

.password-toggle:hover {
color: var(--primary);
}

/* Button with spinner */
.auth-button {
width: 100%;
background-color: var(--primary);
color: white;
border: none;
padding: 12px;
font-size: 16px;
font-weight: 500;
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.2s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 48px;
}

.button-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
position: absolute;
}

.auth-button:disabled {
opacity: 0.7;
cursor: not-allowed;
}

/* Error message styling */
.auth-error {
margin-top: 12px;
padding: 10px;
background-color: rgba(244, 67, 54, 0.1);
border-left: 3px solid #f44336;
border-radius: 4px;
color: #f44336;
font-size: 14px;
}

.small-dialog {
max-width: 320px;
}

#confirmMessage {
text-align: center;
margin: 20px 0;
}

/* Shopping list footer */
.shopping-list-footer {
padding: 16px;
display: flex;
justify-content: center;
border-top: 1px solid var(--border-color);
margin-top: 16px;
}

.shopping-list-footer button {
min-width: 140px;
}

/* Checked items section */
.checked-items-section {
margin-top: 24px;
border-top: 2px solid var(--primary-light);
padding-top: 16px;
}

.checked-items-header {
font-weight: 600;
color: var(--text-light);
padding: 8px 0;
display: flex;
align-items: center;
gap: 8px;
margin: 0px 0px 0px 20px;
}

.checked-items-header .material-icons {
font-size: 18px;
}

/* Fullscreen button styling */
.shopping-list-fullscreen {
margin-left: 8px;
cursor: pointer;
transition: transform 0.3s ease;
opacity: 0.8;
}

.shopping-list-fullscreen:hover {
opacity: 1;
}

/* Fullscreen mode for shopping list panel */
.shopping-list-panel.fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 100%;
border-radius: 0;
transform: translateY(0);
z-index: 300;
}

.shopping-list-panel.fullscreen .shopping-list-handle {
border-radius: 0;
position: sticky;
top: 0;
background-color: var(--body-bg);
z-index: 10;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.shopping-list-panel.fullscreen .shopping-list-content {
height: calc(100vh - 60px);
max-height: none;
padding-bottom: 80px;
}

/* Adjust the close button position in fullscreen mode */
.shopping-list-panel.fullscreen .shopping-list-arrow {
display: none;
}

/* Settings Menu Styles */
.settings-menu {
position: absolute;
top: 100%;
right: 25px;
background: var(--card-bg);
border-radius: 8px;
box-shadow: var(--card-shadow);
padding: 8px;
min-width: 150px;
z-index: 100;
margin-top: 8px;
display: none;
}

.settings-menu.visible {
display: block;
}

.settings-menu-item {
display: flex;
align-items: center;
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
color: var(--text-color);
transition: background-color 0.2s;
}

.settings-menu-item:hover {
background-color: var(--primary-light);
}

.settings-menu-item.danger {
color: var(--danger);
}

.settings-menu-item .material-icons {
margin-right: 15px;
font-size: 18px;
}

.user-avatar {
cursor: pointer;
}

/* Add this to your CSS file or in a <style> tag in your HTML */
.loading-indicator {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 15px 0;
padding: 10px;
text-align: center;
}

.loading-indicator .spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
margin-bottom: 10px;
}

.loading-indicator p {
margin: 0;
color: var(--text-color);
font-size: 14px;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.hidden {
display: none !important;
}

/* Add this CSS to your existing stylesheet */

.current-household-info {
margin-top: 16px;
padding: 12px;
background: var(--secondary);
border-radius: 8px;
}

.current-household-info h4 {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
color: var(--text-color);
}

.current-members {
display: flex;
flex-direction: column;
gap: 8px;
}

.current-member {
display: flex;
align-items: center;
gap: 8px;
}

.member-avatar.small {
width: 24px;
height: 24px;
font-size: 11px;
background: var(--success);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}

.current-member span {
font-size: 13px;
color: var(--text-color);
}

.invite-info {
margin-top: 12px;
}

.invite-info p {
font-size: 14px;
color: var(--text-light);
line-height: 1.4;
}

/* Household Management Dialog Styles */
.household-content {
max-height: 60vh;
overflow-y: auto;
}

.household-members-list,
.pending-invitations-list {
margin-bottom: 24px;
}

.household-member-item,
.pending-invitation-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: 8px;
background-color: var(--card-bg);
}

.household-member-info,
.invitation-info {
display: flex;
align-items: center;
gap: 12px;
}

.household-member-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}

.household-member-details,
.invitation-details {
display: flex;
flex-direction: column;
}

.household-member-name,
.invitation-email {
font-weight: 500;
font-size: 14px;
}

.household-member-email,
.invitation-date {
font-size: 12px;
color: var(--text-light);
}

.household-member-actions,
.invitation-actions {
display: flex;
gap: 4px;
}

.remove-member-btn,
.cancel-invite-btn {
width: 32px;
height: 32px;
padding: 4px;
border-radius: 50%;
background-color: transparent;
color: var(--danger);
border: 1px solid var(--danger);
opacity: 0.7;
transition: opacity 0.2s, background-color 0.2s;
}

.remove-member-btn:hover,
.cancel-invite-btn:hover {
opacity: 1;
background-color: rgba(244, 67, 54, 0.1);
}

.remove-member-btn .material-icons,
.cancel-invite-btn .material-icons {
font-size: 18px;
}

.pending-invitation-item {
border-left: 4px solid var(--warning);
}

.pending-invitation-item .material-icons {
color: var(--warning);
font-size: 24px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
.household-member-item,
.pending-invitation-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

.household-member-actions,
.invitation-actions {
width: 100%;
justify-content: flex-end;
}
}