/* CSS Variables for theming */
:root {
  --bg: #ffffff;
  --card-bg: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-label: #475569;
  --button-bg: var(--primary, #3f51b5);
  --button-text: #ffffff;
  --button-border: var(--primary, #3f51b5);
  --primary: #3f51b5;
  --primary-hover: var(--primary-hover, #3035a5);
  --border: #e2e8f0;
  
  /* Additional variables for team management */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #cbd5e1;
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --section-header-bg: #f8fafc;
  --role-bg: #e2e8f0;
  --role-text: #475569;
  --owner-bg: #fef3c7;
  --owner-text: #92400e;
  --current-user-bg: #f0f9ff;
  
  /* Role colors for admin page */
  --owner-color: #9c27b0;
  --admin-color: #2196f3;
  --member-color: #666;
  
  /* Status colors */
  --success-color: #10b981;
  --error-color: #ef4444;
}

/* Dark mode variables */
.dark-mode {
  --bg: #0f172a;
  --card-bg: #1e293b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --input-bg: #334155;
  --input-border: #475569;
  --input-label: #cbd5e1;
  --button-bg: var(--primary, #3f51b5);
  --button-text: #ffffff;
  --button-border: var(--primary, #3f51b5);
  --primary: #3f51b5;
  --primary-hover: var(--primary-hover, #3035a5);
  --border: #334155;
  
  /* Additional dark mode variables for team management */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border-color: #334155;
  --border-light: #475569;
  --section-header-bg: #334155;
  --role-bg: #475569;
  --role-text: #cbd5e1;
  --owner-bg: #451a03;
  --owner-text: #fbbf24;
  --current-user-bg: #1e3a8a;
  
  /* Role colors for admin page - dark mode */
  --owner-color: #d946ef;
  --admin-color: #60a5fa;
  --member-color: #94a3b8;
  
  /* Status colors - dark mode */
  --success-color: #34d399;
  --error-color: #f87171;
}

/* Light mode variables */
.light-mode {
  --bg: #ffffff;
  --card-bg: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-label: #475569;
  --button-bg: var(--primary, #3f51b5);
  --button-text: #ffffff;
  --button-border: var(--primary, #3f51b5);
  --primary: #3f51b5;
  --primary-hover: var(--primary-hover, #3035a5);
  --border: #e2e8f0;
  
  /* Additional light mode variables for team management */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #cbd5e1;
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --section-header-bg: #f8fafc;
  --role-bg: #e2e8f0;
  --role-text: #475569;
  --owner-bg: #fef3c7;
  --owner-text: #92400e;
  --current-user-bg: #f0f9ff;
  
  /* Role colors for admin page - light mode */
  --owner-color: #9c27b0;
  --admin-color: #2196f3;
  --member-color: #666;
  
  /* Status colors - light mode */
  --success-color: #10b981;
  --error-color: #ef4444;
}

/* Body styling */
body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ---  Team sidebar and team list --- */
.sidebar {
  background: var(--card-bg);
  border-radius: 14px;
  box-shadow: 0 2px 10px #0001;
  padding: 2rem 1.2rem 1.2rem 1.2rem;
  min-width: 270px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-header h4 {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 1.2rem 0;
}
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-actions input {
  margin-bottom: 0;
  font-size: 1em;
}
.team-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.team-member-item {
  display: flex;
  align-items: center;
  background: var(--bg);
  border-radius: 8px;
  padding: 0.6em 0.8em;
  box-shadow: 0 1px 4px #0001;
  transition: box-shadow 0.18s, background 0.18s;
  gap: 0.7em;
}
.team-member-item:hover {
  background: var(--card-bg);
  box-shadow: 0 2px 8px #0002;
}
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: 700;
  box-shadow: 0 1px 4px #0002;
  margin-right: 0.5em;
}
.team-member-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.team-member-name {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.team-member-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 0.3em;
  border: 2px solid var(--card-bg);
  box-shadow: 0 1px 3px #0002;
  vertical-align: middle;
}
.team-member-role {
  font-size: 0.98em;
  color: var(--muted);
}
.team-member-color[type="color"] {
  border: none;
  background: none;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0 0.5em 0 0.5em;
  cursor: pointer;
  box-shadow: 0 1px 3px #0001;
  border-radius: 50%;
  transition: box-shadow 0.18s;
}
.team-member-color[type="color"]::-webkit-color-swatch {
  border-radius: 50%;
  border: 2px solid var(--input-border);
}
.team-member-color[type="color"]:hover {
  box-shadow: 0 2px 8px #0002;
}
.empty-team-members {
  color: var(--muted);
  text-align: center;
  margin: 1.5em 0 0 0;
  font-size: 1.05em;
}
@media (max-width: 900px) {
  .sidebar {
    min-width: 100%;
    max-width: 100%;
    border-radius: 10px;
    padding: 1.2rem 0.5rem;
  }
}
/* --- CSS Variables for Light and Dark Mode --- */
:root {
  --bg: #f5f5f5;
  --card-bg: #fff;
  --text: #23232b;
  --primary: #3f51b5;
  --primary-hover: #3035a5;
  --input-bg: #fff;
  --input-border: #ccc;
  --input-label: #3f51b5;
  --button-bg: #3f51b5;
  --button-text: #fff;
  --button-border: #3f51b5;
  --muted: #888;
}

.dark-mode {
  --bg: #181824;
  --card-bg: #23232b;
  --text: #e0e0e0;
  --input-bg: #181824;
  --input-label: #b3b3ff;
  --button-text: #fff;
  --muted: #b3b3ff;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', 'Helvetica', sans-serif;
  margin: 0;
  padding: 0;
}

.card, .dashboard-card, .login-container, .user-container, .orders-list-container, .items-grid, .modal-content, .add-item-card, .notification-section {
  background: var(--card-bg);
  color: var(--text);
  border-radius: 8px;
  box-shadow: 0 2px 8px #0002;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--primary);
}

.muted, .no-subscription, .orders-list-no-sub, .orders-list-empty {
  color: var(--muted);
}

input, .mdl-textfield__input, select, textarea {
  background: var(--input-bg);
  color: var(--text);
  border: 1.5px solid var(--input-border);
  border-radius: 6px;
  padding: 0.7em 1em;
  margin-bottom: 1em;
  box-shadow: 0 2px 6px #0001;
  font-size: 1em;
}

label, .mdl-textfield__label {
  color: var(--input-label);
  font-weight: 500;
  margin-bottom: 0.2em;
  display: block;
}

button, .mdl-button, input[type="button"], input[type="submit"], a.mdl-button, a.button, .index-actions a, .orders-list-new-btn, .order-summary-back-btn, .theme-selector, .action-btn, .mdl-button--colored, .mdl-button--raised {
  background: var(--button-bg);
  color: var(--button-text);
  border: 1.5px solid var(--button-border);
  border-radius: 6px;
  box-shadow: 0 2px 6px #0002;
  padding: 0.5em 1.2em;
  min-height: 2.1em;
  line-height: 1.2;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border 0.18s;
}
.mdl-button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, .mdl-button--colored:hover, .mdl-button--raised:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Preserve quantity button colors (add/remove buttons) */
.item-quantity button.add-btn,
.cart-item-quantity button.add-btn {
  color: #388e3c ;
  background-color: rgba(56, 142, 60, 0.1) ;
  border-color: rgba(56, 142, 60, 0.3) ;
}

.item-quantity button.add-btn:hover,
.cart-item-quantity button.add-btn:hover {
  background-color: rgba(56, 142, 60, 0.2) ;
  border-color: rgba(56, 142, 60, 0.5) ;
}

.item-quantity button.remove-btn,
.cart-item-quantity button.remove-btn {
  color: #d32f2f ;
  background-color: rgba(211, 47, 47, 0.1) ;
  border-color: rgba(211, 47, 47, 0.3) ;
}

.item-quantity button.remove-btn:hover,
.cart-item-quantity button.remove-btn:hover {
  background-color: rgba(211, 47, 47, 0.2) ;
  border-color: rgba(211, 47, 47, 0.5) ;
}

.item-quantity button:disabled,
.cart-item-quantity button:disabled {
  color: #666 ;
  background-color: rgba(102, 102, 102, 0.1) ;
  border-color: rgba(102, 102, 102, 0.3) ;
}

/* Action button variants */
.action-btn.secondary {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
}

.action-btn.secondary:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.action-btn.danger {
  background: #f44336;
  color: white;
  border-color: #f44336;
}

.action-btn.danger:hover {
  background: #d32f2f;
  border-color: #d32f2f;
}

/* Theme selector button special styling */
.theme-selector {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
}

.theme-selector:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

/* Override Material Design Lite button colors */
.mdl-button--colored {
  background-color: var(--button-bg) ;
  color: var(--button-text) ;
  border-color: var(--button-border) ;
}

.mdl-button--colored:hover {
  background-color: var(--primary-hover) ;
  border-color: var(--primary-hover) ;
}

.mdl-button--raised {
  background-color: var(--button-bg) ;
  color: var(--button-text) ;
  border-color: var(--button-border) ;
}

.mdl-button--raised:hover {
  background-color: var(--primary-hover) ;
  border-color: var(--primary-hover) ;
}

.nav-container {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%) ;
  color: var(--button-text) ;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.nav-brand, .nav-links a, .nav-links .material-icons {
  color: var(--button-text) ;
}

#dark-mode-toggle {
  color: var(--button-text) ;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  transition: background 0.18s, box-shadow 0.18s;
}
#dark-mode-toggle:hover, #dark-mode-toggle:focus {
  background: rgba(255,255,255,0.1);
  box-shadow: none;
  outline: none;
}

.category-pill {
  background: var(--card-bg);
  color: var(--primary);
  border: 1.5px solid var(--input-border);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 0.7em 2em;
  font-size: 1.08em;
  cursor: pointer;
  outline: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.18s, transform 0.18s;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  margin-right: 0.2em;
  position: relative;
  top: 2px;
  z-index: 2;
}
.category-pill.selected, .category-pill:hover {
  background: var(--primary);
  color: #fff;
  border-bottom: 2px solid var(--primary);
}

.item-card, .add-item-card {
  background: var(--card-bg);
  color: var(--text);
  border-radius: 18px;
  box-shadow: 0 2px 12px #0002;
  padding: 1.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 1px solid var(--input-border);
}
.item-name, .item-price {
  color: var(--primary);
}

/* Remove unwanted backgrounds from icons and spans */
.material-icons, .category-pill span, .category-pill .material-icons, #dark-mode-toggle .material-icons {
  background: none ;
  background-color: transparent ;
  box-shadow: none ;
}

/* Remove unwanted backgrounds from text elements */
span, p, h1, h2, h3, h4, h5, h6, label, .mdl-card__title, .mdl-card__supporting-text {
  background: none ;
  background-color: transparent ;
  box-shadow: none ;
}

/* Alerts and status */
.alert {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Default alert (error) */
.alert {
  background-color: #ffebee;
  color: #c62828;
}
.dark-mode .alert {
  background-color: #2d2d3a;
  color: #ffb3b3;
}

/* Success alerts */
.alert.alert-success {
  background-color: #e8f5e8 ;
  color: #2e7d32 ;
}
.dark-mode .alert.alert-success {
  background-color: #1b5e20 ;
  color: #4caf50 ;
}

/* Warning alerts */
.alert.alert-warning {
  background-color: #fff3e0;
  color: #ef6c00;
}
.dark-mode .alert.alert-warning {
  background-color: #e65100;
  color: #ffcc02;
}

/* Info alerts */
.alert.alert-info {
  background-color: #e3f2fd;
  color: #1565c0;
}
.dark-mode .alert.alert-info {
  background-color: #0d47a1;
  color: #90caf9;
}

/* Table and status pills */
.orders-list-table, .mdl-data-table, table {
  background: var(--card-bg);
  color: var(--text);
}
.orders-list-table th, .orders-list-table td, th, td {
  color: var(--text);
}
.orders-list-status {
  background: var(--input-bg);
  color: var(--primary);
  border-radius: 12px;
  font-size: 0.98em;
  font-weight: 500;
  display: inline-block;
  padding: 0.3em 1em;
}

/* Miscellaneous */
.is-invisible { display: none; }

/* Responsive adjustments */
@media (max-width: 600px) {
  .dashboard-card, .card, .login-container, .user-container, .orders-list-container {
    padding: 1em 0.5em;
    max-width: 99vw;
  }
  .category-pill, .item-card, .add-item-card {
    font-size: 1em;
    padding: 0.5em 1em;
  }
}

.main-content-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem 1rem;
}
@media (max-width: 900px) {
    .main-content-container {
        padding: 1rem 0.5rem;
  }
}