@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* Mobile-first base styles */
body, html {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  background: #e3e7ee;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow-x: hidden !important;
  width: 100vw !important;
  box-sizing: border-box !important;
}

/* When editing text, allow selection globally */
body.text-selection-active {
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}

/* --- Modern Top Bar --- */
.top-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f8fafc;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 8px rgba(60,80,130,0.07);
  padding: 7px 10px 7px 7px;
  margin: 0 0 7px 0;
  min-height: 44px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Top bar: compact, no extra white space */
.top-bar.compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* was 18px, reduce for less space between email and buttons */
  background: #f8fafc;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 2px 8px rgba(60,80,130,0.07);
  padding: 4px 6px 4px 6px;
  margin: 0 0 2px 0;
  min-height: 36px;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Logout button: colorful, round, same size as collapse-all */
.action-btn.logout {
  background: linear-gradient(135deg, #ff5858 0%, #f09819 100%) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(30,30,30,0.13), 0 1.5px 4px rgba(60,80,130,0.10) !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 0 !important;
  border: none !important;
  transition: background 0.18s, box-shadow 0.13s, transform 0.12s !important;
  z-index: 100 !important;
  outline: none !important;
  cursor: pointer !important;
  overflow: visible !important;
}
.action-btn.logout svg {
  width: 24px !important;
  height: 24px !important;
  fill: #fff !important;
  stroke: #fff !important;
  display: block !important;
  transition: fill 0.13s, stroke 0.13s !important;
}
.action-btn.logout:active,
.action-btn.logout:hover,
.action-btn.logout:focus {
  background: linear-gradient(135deg, #f09819 0%, #ff5858 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(30,30,30,0.18) !important;
  transform: scale(1.08) !important;
}

/* Email label: next to logout, no extra margin */
#user-email-label {
  background: #f9f9f9;
  color: #333;
  font-size: 1em;
  padding: 0.02em 0.5em; 
  border-radius: 1.2em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin: 0;
  font-weight: 500;
  min-width: 0;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
}

/* Collapse All: colorful, round, same size as logout */
#collapse-all-btn {
  position: static;
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #36d1c4 0%, #5b86e5 100%) !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  min-width: 40px !important;
  min-height: 40px !important;
  width: 40px !important;
  height: 40px !important;
  transition: background 0.13s, box-shadow 0.13s, transform 0.11s;
  z-index: 1;
  order: 2;
}
#collapse-all-btn .collapse-icon svg {
  width: 24px !important;
  height: 24px !important;
}
#collapse-all-btn:active,
#collapse-all-btn:hover {
  background: linear-gradient(135deg, #5b86e5 0%, #36d1c4 100%) !important;
  box-shadow: 0 4px 12px rgba(60, 80, 130, 0.17);
  transform: scale(1.07);
}

/* --- Modern Action Buttons --- */
.actions-mobile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: 99vw;
  margin: 0 auto 0 auto;
  padding: 0 2vw;
}

/* Remove extra white space below top bar */
.actions-mobile.compact-actions {
  margin-top: 18px !important; /* Add vertical space below top bar */
  margin: 0 auto 0 auto;
  padding: 0 2vw;
  gap: 0;
}


.row-btns {
  display: flex;
  flex-direction: row;
  gap: 7px;
  width: 100%;
  margin-bottom: 2px;
}

.action-btn.reset {
  background: linear-gradient(90deg, #6366f1 70%, #a5b4fc 100%);
  color: #fff;
  border-radius: 10px;
  font-size: 1.08rem;
  min-height: 38px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 4px rgba(60,80,130,0.09);
}

.action-btn.check-zeros {
  background: linear-gradient(90deg, #22c55e 70%, #38bdf8 100%) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-size: 0.97rem !important;
  min-height: 32px !important;
  max-height: 36px !important;
  padding: 0 12px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 4px rgba(60,80,130,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 70px !important;
  max-width: 80px !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

/* Force the three main buttons to always be in a single horizontal line */
.actions-mobile .row-btns,
.actions-mobile .row-btns.one-line-btns,
.actions-mobile .compact-row-btns,
.actions-mobile .row-btns.compact-row-btns {
  display: flex !important;
  flex-direction: row !important;
  gap: 2px !important; /* was 3px */
  width: 100%;
  margin-bottom: 2px;
  justify-content: space-between;
}

/* Make the buttons as compact as possible */
.action-btn.compact-btn,
.action-btn.reset,
.action-btn.check-zeros {
  font-size: 0.89rem;
  min-height: 27px;
  padding: 0 3px;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(60,80,130,0.05);
  flex: 1 1 0;
  max-width: 50%; /* Adjust to 50% for two buttons */
  white-space: nowrap;
  line-height: 1.1;
  margin: 0;
}

/* Remove extra margin from .action-btn.move-delete */
/* This rule is no longer needed.
.action-btn.move-delete {
  margin-bottom: 0;
}
*/

/* On small screens, keep them horizontal unless extremely narrow */
@media (max-width: 350px) {
  .actions-mobile .row-btns,
  .actions-mobile .row-btns.one-line-btns,
  .actions-mobile .compact-row-btns,
  .actions-mobile .row-btns.compact-row-btns {
    flex-direction: column !important;
    gap: 5px !important;
  }
}

/* Responsive: stack buttons on very small screens */
@media (max-width: 430px) {
  .row-btns {
    flex-direction: column;
    gap: 7px;
  }
  .top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 7px 5px 7px 5px;
  }
  #user-email-label {
    max-width: 90vw;
    margin: 0 0 0 0;
  }
  .row-btns.one-line-btns {
    flex-direction: column;
    gap: 5px;
  }
}

/* Center the title */
.center-title {
  text-align: center;
  margin: 8px 0 0 0 !important;
  font-size: 1.55rem;
  color: #343c4e;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.main-title-your {
  color: #4B5563; /* A softer dark grey */
}

.main-title-swiftlist {
  font-family: 'Pacifico', cursive;
  color: #1976d2; /* Purple accent color */
  font-weight: 500; /* Pacifico is best at a lower weight */
}

/* Remove space between title and clock */
.tight-datetime {
  font-size: 1.06rem;
  color: #6c7a89;
  text-align: center;
  margin-top: 2px;
  margin-bottom: 13px;
  font-weight: 500;
  opacity: 0.92;
}

/* Datetime display */
.datetime {
  font-size: 1.06rem;
  color: #6c7a89;
  text-align: center;
  margin-bottom: 13px;
  font-weight: 500;
  opacity: 0.92;
}

/* List/table containers */
.container {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  /* Remove extra margin if present */
  margin: 13px 0 22px 0 !important;
  background: #fff;
  border-radius:10px;
  box-shadow:0 2px 9px rgba(66,80,104,0.08);
  overflow:hidden;
  border:1px solid #d8e0ed;
  max-width: 99vw;
  padding-bottom: 3px;
}
.header {
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:8px 10px 8px 10px; /* Decreased vertical padding */
  font-size:1.22rem;
  font-weight:700;
  color:#fff;
  cursor:pointer;
  min-height:32px; /* Decreased from 48px */
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  letter-spacing:0.01em;
  border-bottom: 1px solid #d6dbe2;
  font-size: 1.38rem !important; /* Force larger header font always */
}
.veggies-header { background: #388e3c; }
.grocery-header { background: #1976d2; }
.indian-header { background: #ff9800; }
.kmart_bigw_target-header { background: #8e24aa; }
.pharmacy-header { background: #00897b; }
.others-header { background: #607d8b; }
.default-header { background: #546e7a; }
.header-title{
  flex:0 0 auto;
  font-size:1.03rem;
  margin-right:7px;
  color: #fff;
  letter-spacing:0.01em;
  cursor: pointer;
  font-size: 1.22rem !important; /* Force larger header title always */
}
.header-count{
  font-size:1.01rem;
  font-weight:900;
  background:rgba(240,240,240,0.98);
  color:#222;
  padding:2px 10px;
  border-radius:17px;
  margin-left:3px;
  margin-right: 18px; /* <-- Add more space after count */
  min-width:20px;
  text-align:center;
  display:inline-block;
  vertical-align:middle;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  border:1px solid #e0e3ea;
  margin-right: 8px; /* Adjust spacing for icons */
}
.header-check{
  font-size:1.01rem;
  font-weight:900;
  color:#fff;
  background:#71c77a;
  padding:2px 8px;
  border-radius:17px;
  margin-left:4px;
  min-width:15px;
  display:inline-block;
  text-align:center;
}

/* --- Header Action Buttons (Voice, Menu) --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 21px; /* This is line 405. It controls the spacing. */
  margin-left: auto; /* Push to the right, before collapse arrow */
}

.header .voice-add-btn,
.header .header-burger-menu {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: inherit;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  transform: scale(1);
  padding: 0;
  margin: 0;
}

.header .voice-add-btn:hover,
.header .header-burger-menu:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.05);
}

.header .voice-add-btn.pressing,
.header .voice-add-btn:active,
.header .header-burger-menu:active {
  background: rgba(255,255,255,0.45);
  transform: scale(0.95);
  transition: transform 0.1s ease-in-out;
}

/* --- Icon Stack for Voice Add Button --- */
.icon-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.icon-stack .fa-microphone-alt {
  font-size: 20px; /* Larger mic icon */
  line-height: 1;
}

.icon-stack .fa-plus {
  position: absolute;
  font-size: 10px; /* Small plus icon */
  font-weight: 900;
  bottom: 0px;
  right: -2px;
  line-height: 1;
}

/* --- MODERN VOICE RECOGNITION UI --- */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(54, 209, 196, 0.5);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(54, 209, 196, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(54, 209, 196, 0);
  }
}

.voice-notification-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(248, 250, 252, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9998;
  display: flex;
  align-items: flex-start; /* Position at the top */
  justify-content: center;
  padding-top: 15vh; /* Space from the top */
  animation: fadeInBackdrop 0.3s ease-out;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

.voice-notification {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 48px rgba(60,80,130,0.2);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 90vw;
  max-width: 380px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: popIn 0.4s cubic-bezier(.68,-0.55,.27,1.55);
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.voice-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #36d1c4 0%, #5b86e5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-glow 2s infinite;
}

.voice-notification i.fa-microphone-alt {
  font-size: 36px;
  color: #fff;
}

.voice-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.voice-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #475569;
}

.voice-interim-results {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e293b;
  min-height: 2.5rem; /* Reserve space to prevent layout shifts */
  padding: 8px 12px;
  text-align: center;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.voice-subtitle {
  font-size: 1rem;
  color: #6c7a89;
  font-weight: 500;
}

.voice-list-name {
  font-size: 1.4rem;
  font-weight: 800;
  /* color is now set via inline style */
  margin-top: 4px;
  padding: 4px 16px;
  border-radius: 12px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-cancel-btn {
  margin-top: 16px;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.voice-cancel-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
  transform: scale(1.05);
}

/* --- Item Blink Animation --- */
@keyframes blink-animation {
  0%, 100% { background-color: #fff176 !important; } /* Yellow */
  50% { background-color: inherit !important; }
}

/* New, more specific class to apply the blink animation */
li.item-blink,
.item-blink {
  animation: blink-animation 0.5s ease-in-out 4 !important;
}



.collapse-arrow{
  margin-left:auto; /* Push to far right */
  margin-right: 8px; /* Some space from right edge */
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0; /* Hide default triangle text */
  cursor: pointer;
  user-select: none;
  z-index: 2;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  transition: all 0.18s ease;
  position: relative;
  order: 999; /* Ensure it's always last */
}

/* Modern chevron icon using CSS */
.collapse-arrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.85;
}

/* Hover effect */
.collapse-arrow:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.05);
}

/* Collapsed state - rotate chevron */
.collapsed .collapse-arrow::before {
  transform: rotate(-135deg);
}

/* Active state */
.collapse-arrow:active {
  background: rgba(255,255,255,0.35);
  transform: scale(0.98);
}

ul { list-style:none; margin:0; padding:0 }
li {
  border: 1px solid #ccc;
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px 4px; /* Reduced padding for compact rows */
  border-bottom:1px solid #e3e9f2;
  background: #fff;
  font-size:1.13rem; /* Larger list item font for desktop */
  user-select:none;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  position:relative;
  border-radius:10px;
  margin: 8px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  min-height: 36px; /* Reduced row height from 64px */
  font-size: 1.18rem !important; /* Force larger list item font always */
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: transform 0.18s ease, background 0.28s cubic-bezier(.68,-0.55,.27,1.55), border 0.18s, box-shadow 0.18s; /* enable smooth swipe translate */
}


li.swipe-out {
  transform: translateX(-110%) !important;
  opacity: 0 !important;
}


li:last-child { border-bottom:none }
li.checked {
  background: #f1f1f1 !important;
  color: #444 !important;
  opacity: .77;
  text-decoration: line-through;
}
li.to-buy {
  background: #FFF8D6 !important;
  color: #b26a00 !important;
  opacity: 1;
  text-decoration: none;
}
li.zero-count {
  background: #fff !important;
  color: inherit !important;
  opacity: 1;
  text-decoration: none;
}

/* Delete SVG wrapper */
.item-delete-svg-wrap {
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-shadow: 0 1.5px 4px rgba(60,80,130,0.10);
  border: 1.5px solid #bbb; /* Add subtle border for visibility */
  transition: background 0.13s, border-color 0.13s;
}

/* Move handle for items: square white background, like bin icon */
.item-move-handle {
  margin-left: 4px;      /* Reduce left margin */
  margin-right: 20px;     /* Add right margin to move icon leftwards */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  background: #fff;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  box-shadow: 0 1.5px 4px rgba(60,80,130,0.10);
  border: 1.5px solid #bbb;
  transition: background 0.13s, border-color 0.13s;
  color: #888;
}

.item-move-handle i {
  font-size: 18px;
  color: #666;
}

.item-move-handle:active {
  background: #f3f6fa;
  border-color: #888;
}

/* Edit input for table name */
.edit-table-input {
  font-size: 1.13rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  margin: 0 2px;
  width: 80%;
  border: 1.5px solid #c7d1e6;
  background: #f7fafd;
  outline: none;
  box-sizing: border-box;
}
.edit-table-input:focus {
  border: 1.5px solid #388e3c;
  background: #fff;
}

/* Edit input for item name */
.edit-item-input {
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 7px;
  margin: 0 2px;
  width: 90%;
  border: 1.5px solid #c7d1e6;
  background: #f7fafd;
  outline: none;
  box-sizing: border-box;
}
.edit-item-input:focus {
  border: 1.5px solid #388e3c;
  background: #fff;
}

/* --- NAME FIELD: Larger font and padding --- */
.name {
  /* --- THIS CONTROLS THE ITEM NAME FONT SIZE AND STYLE --- */
  flex: 1;
  min-width: 0;
  font-size: 1.6rem !important; /* <--- Item name font size (change this for item name size, !important added) */
  line-height: 1.2;
  border: none;
  background: transparent;
  outline: none;
  padding: 0 0 0 4px;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  color: #232323;
  letter-spacing: 0.01em;
  border-radius: 8px;
  word-break: break-word;
  cursor: pointer;
}

/* --- Hindi font for item names in Devanagari script --- */
.name:lang(hi),
.name.hindi-text {
  font-family: 'Noto Sans Devanagari', 'Mangal', 'Lohit Devanagari', 'Arial', sans-serif !important;
  font-weight: 700;
  /* Optionally, adjust font-size or color for Hindi if needed */
}

/* --- COUNTER BUTTONS: Squeeze and right-align --- */
.counter {
  /* --- THIS CONTROLS THE COUNTER BUTTONS SIZE AND LAYOUT --- */
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent !important; /* Remove any background */
  border-radius: 16px;
  padding: 0 2px;
  min-width: 0;
  justify-content: flex-end;
  box-shadow: none;
  margin-left: auto;
  margin-right: 15px !important;
  border: none;
  flex: 0 0 auto;
  /* Optionally, set a max-width if needed */
}

.counter button {
  /* --- THIS CONTROLS THE COUNTER BUTTON SIZE --- */
  width: 28px !important;      /* <--- Counter button width */
  height: 28px !important;     /* <--- Counter button height */
  min-width: 28px !important;
  min-height: 28px !important;
  font-size: 1.05rem !important; /* <--- Counter button font size */
  border-radius: 20% !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-weight: 700;
  border: 0.001px solid #888;
  background: transparent;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  touch-action: manipulation;
  outline: none;
  line-height: 1;
}
.counter .count {
  /* --- THIS CONTROLS THE NUMBER FONT SIZE IN THE COUNTER --- */
  font-size: 1.6rem !important; /* <--- Counter number font size */
  font-weight: 700;
  margin: 0 2px;
  min-width: 16px;
  text-align: center;
  color: #1c2331;
}

/* --- CHECKBOXES: Large for touch --- */
input[type="checkbox"] {
  width: 32px;
  height: 32px;
  cursor: pointer;
  margin-top: 1px;
  accent-color: #666;
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(80,80,80,0.07);
  border: 1.5px solid #d3dbe6;
  background: #fafbfc;
  margin-left: 4px;
}

/* --- BUTTONS: General --- */
.add-table-btn,
.action-btn {
  font-size: 1.25rem !important;
  min-height: 54px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(60,80,130,0.09);
  touch-action: manipulation;
  color: #444 !important; /* Make text gray, not black */
}

/* --- ADD TABLE BUTTON WRAP: Make button small and left-aligned --- */
.add-table-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;   /* Left align */
  align-items: flex-start;
  margin: 54px 0 0 0;           /* Increased from 38px to 54px for more space from top */
  padding-left: 0;
}

/* --- ADD TABLE BUTTON: Small, compact, left, mobile-friendly --- */
.add-table-btn {
  font-size: 0.97rem !important;
  min-height: 24px !important;
  max-height: 28px !important;
  padding: 0 13px !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(60,80,130,0.07);
  color: #444 !important;
  background: #f5f7fa !important;
  border: 1.2px solid #bbb;
  margin-left: 10px;
  margin-right: 0;
  margin-top: 12px;              /* Space from last item */
  margin-bottom: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  transition: background 0.13s, border-color 0.13s;
}

/* Remove extra centering for add-table-btn inside wrap */
.add-table-btn {
  margin: 0 0 0 10px;
}

/* For the per-table "+ Add Item" button at the bottom of each table */
.container > .add-table-btn {
  font-size: 0.97rem !important;
  min-height: 22px !important;
  max-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  margin-top: 18px !important;    /* Space from last item in list */
  margin-bottom: 6px !important;  /* Minimal space at bottom */
  margin-left: 12px !important;   /* Left align, some indent */
  margin-right: 0 !important;
  box-shadow: 0 1px 2px rgba(60,80,130,0.07);
  background: #f5f7fa !important;
  border: 1.2px solid #bbb;
  color: #444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: 180px !important;
  min-width: 0 !important;
}

/* Prevent full width for per-table add button */
.container > .add-table-btn,
.container > .add-table-btn:only-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: 180px !important;
  display: inline-flex;
}

/* Remove any centering from the wrap for per-table button */
.add-table-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20px 0 10px 0;
  padding-left: 0;
}

/* --- MODALS: Make popups smaller and buttons compact --- */
.modal-dialog, .input-modal-dialog {
  min-width: 180px;
  max-width: 90vw;
  width: 320px;
  padding: 18px 12px 12px 12px;
  font-size: 1.04rem;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.13);
  border: 1px solid #e2e7f1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-title, .input-modal-title {
  font-size: 1.07rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
}

.modal-btns, .input-modal-btns {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  width: 100%;
}

.modal-btn-no, .modal-btn-yes, .input-modal-btn {
  width: auto;
  min-width: 64px;
  max-width: 120px;
  padding: 7px 0;
  font-size: 1.01rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  background: #f3f6fa;
  color: #222;
  margin: 0;
  box-shadow: none;
  transition: background 0.14s;
  flex: 1 1 0;
}

.modal-btn-yes, .input-modal-btn-ok {
  background: linear-gradient(90deg,#388e3c 60%, #5dd05d 100%);
  color: #fff;
}

.modal-btn-no, .input-modal-btn-cancel {
  background: #f3f6fa;
  color: #222;
}

.modal-btn-no:active, .input-modal-btn-cancel:active {
  background: #e0e7ef;
}
.modal-btn-yes:active, .input-modal-btn-ok:active {
  background: linear-gradient(90deg,#3070b3 0%,#2b79c2 100%);
}

.input-modal-backdrop {
  position: fixed;
  z-index: 2000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(30,40,60,0.18);
  display: none;
  align-items: center;
  justify-content: center;
}
.input-modal-backdrop.active {
  display: flex;
}
.input-modal-dialog {
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.13);
  border: 1px solid #e2e7f1;
  min-width: 180px;
  max-width: 90vw;
  width: 320px;
  padding: 18px 12px 12px 12px;
  font-size: 1.04rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.input-modal-title {
  font-size: 1.07rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: center;
}
.input-modal-input {
  font-size: 1.07rem;
  padding: 8px 8px;
  border-radius: 7px;
  border: 1.2px solid #c7d1e6;
  background: #f7fafd;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
  transition: border 0.13s, background 0.13s;
}
.input-modal-input:focus {
  border: 1.2px solid #388e3c;
  background: #fff;
}
.input-modal-btns {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  width: 100%;
}
.input-modal-btn {
  width: auto;
  min-width: 64px;
  max-width: 120px;
  padding: 7px 0;
  font-size: 1.01rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  background: #f3f6fa;
  color: #222;
  margin: 0;
  box-shadow: none;
  transition: background 0.14s;
  flex: 1 1 0;
}
.input-modal-btn-ok {
  background: linear-gradient(90deg,#388e3c 60%, #5dd05d 100%);
  color: #fff;
}
.input-modal-btn-cancel {
  background: #f3f6fa;
  color: #222;
}
.input-modal-btn-cancel:active {
  background: #e0e7ef;
}
.input-modal-btn-ok:active {
  background: linear-gradient(90deg,#3070b3 0%,#2b79c2 100%);
}

/* --- LOGIN CARD: Larger for mobile --- */
.login-card {
  padding: 38px 8vw 38px 8vw;
  min-width: 0;
  width: 98vw;
  max-width: 99vw;
  border-radius: 18px;
  gap: 18px;
}
.login-logo {
  font-size: 3.2rem;
  width: 70px;
  height: 70px;
}
.login-title {
  font-size: 1.45rem;
}
.login-desc {
  font-size: 1.18rem;
}
.allowed-item {
  font-size: 1.18rem;
  padding: 14px 18px;
  gap: 14px;
}
.allowed-avatar {
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
}
.google-btn {
  font-size: 1.18rem;
  padding: 14px 0;
  gap: 14px;
}

/* --- MODERN LOGIN PAGE --- */
.login-bg-modern {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #e3e7ee 0%, #f8fafc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
}

.login-card-modern {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(60,80,130,0.13), 0 1.5px 4px rgba(60,80,130,0.10);
  padding: 48px 32px 36px 32px;
  min-width: 0;
  width: 98vw;
  max-width: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 0 auto;
  position: relative;
}

.login-logo-modern {
  margin-bottom: 10px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-title-modern {
  font-size: 2.1rem;
  font-weight: 800;
  color: #232c3d;
  letter-spacing: 0.01em;
  text-align: center;
  margin-bottom: 0;
}
.brand-accent {
  color: #1976d2;
  font-weight: 900;
}

.login-desc-modern {
  font-size: 1.18rem;
  color: #4b5563;
  text-align: center;
  margin-bottom: 0;
  font-weight: 500;
}
.login-subdesc {
  font-size: 1.01rem;
  color: #6c7a89;
  display: block;
  margin-top: 7px;
  font-weight: 400;
}

.google-btn-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: linear-gradient(90deg, #fff 70%, #f3f6fa 100%);
  border: 1.5px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(60,80,130,0.07);
  font-size: 1.18rem;
  font-weight: 700;
  color: #232c3d;
  padding: 13px 0;
  width: 100%;
  max-width: 340px;
  cursor: pointer;
  transition: background 0.13s, box-shadow 0.13s, border 0.13s;
  margin-top: 10px;
}
.google-btn-modern:hover,
.google-btn-modern:focus {
  background: #f3f6fa;
  border-color: #1976d2;
  color: #1976d2;
  box-shadow: 0 4px 16px rgba(60,80,130,0.13);
  outline: none;
}
.google-logo-modern {
  width: 32px;
  height: 32px;
  display: block;
}

#google-btn-text-modern {
  font-size: 1.18rem;
  font-weight: 700;
  color: #232c3d;
}

.login-error-modern {
  color: #e53935;
  font-size: 1.01rem;
  margin-top: 8px;
  text-align: center;
  min-height: 1.2em;
}

/* Responsive for login card */
@media (max-width: 600px) {
  .login-card-modern {
    padding: 32px 8vw 32px 8vw;
    max-width: 98vw;
    min-width: 0;
    border-radius: 16px;
  }
  .login-title-modern {
    font-size: 1.45rem;
  }
  .login-desc-modern {
    font-size: 1.08rem;
  }
  .google-btn-modern {
    font-size: 1.08rem;
    padding: 12px 0;
    border-radius: 10px;
    max-width: 99vw;
  }
  .login-logo-modern {
    width: 54px;
    height: 54px;
  }
}

/* Hide old login card if present */
.login-card, .login-bg {
  display: none !important;
}

/* --- MODALS: Position input modals higher on mobile to avoid keyboard overlap --- */
@media (max-width: 600px) {
  .input-modal-backdrop.active,
  .modal-backdrop.active {
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .input-modal-dialog,
  .modal-dialog {
    margin-top: 10vh !important;
    margin-bottom: 0 !important;
  }
}

/* For very small screens, push even higher */
@media (max-width: 430px) {
  .input-modal-dialog,
  .modal-dialog {
    margin-top: 4vh !important;
  }
}

/* --- Make input modal dialog float above keyboard, centered, not full width --- */
@media (max-width: 600px) {
  .input-modal-backdrop.active {
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .input-modal-dialog {
    position: fixed !important;
    left: 50% !important;
    /* Place the dialog above the keyboard, but not at the very bottom */
    bottom: 18vh !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 340px !important;
    min-width: 0 !important;
    border-radius: 13px !important;
    margin: 0 !important;
    z-index: 2001 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.13);
    background: #fff;
    padding-bottom: 12px;
  }
}

/* For very small screens, float a bit higher and keep width reasonable */
@media (max-width: 430px) {
  .input-modal-dialog {
    bottom: 24vh !important;
    width: 97vw !important;
    max-width: 99vw !important;
  }
}

/* Add white rectangle background to the delete and move buttons in table headers */
.table-delete-btn, .table-move-handle {
  background: #fff !important;
  border-radius: 7px !important;
  box-shadow: 0 1.5px 4px rgba(60,80,130,0.10);
  border: 1.5px solid #bbb !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 0 !important;
}

/* Hide modals by default, show only when active */
.modal-backdrop {
  display: none !important;
}

/* --- MODAL DEBUG: Hide all modals by default, only show when .active is present --- */
.modal-backdrop {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: rgba(30,40,60,0.18);
}
.modal-backdrop.active {
  display: flex !important;
}

/* Make sure .modal-dialog is only visible when .modal-backdrop is active */
.modal-backdrop:not(.active) .modal-dialog {
  display: none !important;
}

/* --- Modern Professional Action Buttons --- */
.row-btns .action-btn,
.row-btns .add-table-btn {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 1.13rem !important;
  font-weight: 700 !important;
  border-radius: 13px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(60,80,130,0.09);
  padding: 0.85em 0.5em !important;
  margin: 0 7px 0 0 !important;
  min-height: 44px !important;
  max-height: 54px !important;
  flex: 1 1 0;
  transition: background 0.16s, box-shadow 0.13s, color 0.13s, transform 0.11s;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.row-btns .action-btn:last-child,
.row-btns .add-table-btn:last-child {
  margin-right: 0 !important;
}

/* Edit Button */
.row-btns .action-btn.move-delete {
  background: linear-gradient(90deg, #ffb347 0%, #ffcc80 100%) !important;
  color: #232323 !important;
  border: 1.5px solid #f59e42 !important;
  box-shadow: 0 2px 8px rgba(245,158,66,0.10);
}
.row-btns .action-btn.move-delete.editing-mode {
  background: linear-gradient(90deg, #f59e42 0%, #fbbf24 100%) !important;
  color: #333 !important;
  border: 1.5px solid #f59e42 !important;
}

/* Reset Button */
.row-btns .action-btn.reset {
  background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%) !important;
  color: #fff !important;
  border: 1.5px solid #6366f1 !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.10);
}

/* Check Zeros Button */
.row-btns .action-btn.check-zeros {
  background: linear-gradient(90deg, #22c55e 0%, #38bdf8 100%) !important;
  color: #fff !important;
  border: 1.5px solid #22c55e !important;
  box-shadow: 0 2px 8px rgba(34,197,94,0.10);
}

/* Button hover/active/focus states */
.row-btns .action-btn:hover,
.row-btns .action-btn:focus {
  filter: brightness(1.07) saturate(1.08);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 16px rgba(60,80,130,0.13);
  outline: none;
}
.row-btns .action-btn:active {
  filter: brightness(0.97);
  transform: scale(0.98);
}

/* Make sure text is always centered and ellipsis if too long */
.row-btns .action-btn span,
.row-btns .action-btn {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reduce height for the three main action buttons */
.row-btns .action-btn,
.row-btns .add-table-btn {
  min-height: 28px !important; /* was 32px */
  max-height: 32px !important; /* was 38px */
  padding: 0.35em 0.35em !important; /* was 0.5em 0.5em */
  font-size: 0.97rem !important; /* was 1.13rem */
}

/* Responsive: smaller on mobile */
@media (max-width: 600px) {
  .row-btns .action-btn,
  .row-btns .add-table-btn {
    min-height: 28px !important;
    max-height: 34px !important;
    padding: 0.4em 0.3em !important;
  }
}

/* Hide the add-table-btn when the table is collapsed */
.container.collapsed > .add-table-btn {
  display: none !important;
}

/* Remove !important from display for .add-table-btn so JS/CSS can control it */
.container > .add-table-btn,
.container > .add-table-btn:only-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: 180px !important;
  display: inline-flex;
}

/* Style the main "+ Add New Store & Item" button to be darker, centered, and spaced down */
.add-table-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;      /* Center horizontally */
  align-items: flex-start;
  margin: 54px 0 0 0;           /* Increased from 38px to 54px for more space from top */
  padding-left: 0;
  margin-bottom: 160px; /* Keep as is for bottom space */
}

#add-table-btn-main.add-table-btn {
  background: linear-gradient(90deg, #959494 0%, #959494 100%) !important;
  color: #fff !important;
  border: 1.5px solid #222 !important;
  font-size: 1.09rem !important;
  min-height: 34px !important;
  max-height: 40px !important;
  padding: 0 22px !important;
  border-radius: 9px !important;
  font-weight: 700 !important;
  margin: 0 auto !important;
  box-shadow: 0 2px 8px rgba(60,80,130,0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

#add-table-btn-main.add-table-btn:hover {
  background: linear-gradient(90deg, #222 0%, #444 100%) !important;
  color: #fff !important;
  border-color: #111 !important;
}

/* Restore per-table "+ Add Item" button styles (do NOT override with dark color or center) */
.container > .add-table-btn,
.container > .add-table-btn:only-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: 180px !important;
  display: inline-flex;
}

/* Center and space down the main button only */
.add-table-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 38px 0 0 0;
  padding-left: 0;
}

/* Center modal dialog vertically and horizontally on all screens */
.modal-backdrop {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal-backdrop.active {
  display: flex !important;
}

/* --- MODAL CENTERING FIX: Always center modal dialog in viewport --- */
.modal-backdrop,
.modal-backdrop.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: rgba(30,40,60,0.18);
}

/* Ensure modal-dialog is centered and not positioned at the bottom */
.modal-dialog {
  margin: 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Remove any mobile overrides that push modal to the top or bottom */
@media (max-width: 600px) {
  .modal-backdrop.active {
    align-items: center !important;
    justify-content: center !important;
  }
  .modal-dialog {
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
}

/* --- FIX: Prevent modal-backdrop from blocking clicks when not active --- */
.modal-backdrop {
  display: none !important;
  pointer-events: none !important; /* Do not block clicks when hidden */
}
.modal-backdrop.active {
  display: flex !important;
  pointer-events: auto !important; /* Only block clicks when active */
}

/* Add gap between delete and move icons in table header */
.header .table-delete-btn {
  margin-right: 14px !important; /* Increase this value for more gap */
}

/* Table header delete and move icons: same height and width */
.header .table-delete-btn,
.header .table-move-handle {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Make SVGs inside both icons the same size */
.header .table-delete-btn svg,
.header .table-move-handle svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

/* --- Undo Toast: Show above the Add New Store button, floating, centered, visually clear --- */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  z-index: 3000;
  background: rgba(34,44,61,0.82);
  color: #fff;
  padding: 10px 18px 10px 14px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(30,40,60,0.18), 0 1.5px 4px rgba(60,80,130,0.10);
  font-size: 1.01rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.97;
  pointer-events: auto;
  min-width: 0;
  max-width: 85vw;
  white-space: pre-line;
  border: 1.5px solid rgba(255,255,255,0.10);
  transition: box-shadow 0.18s, background 0.18s;
}

.undo-toast .undo-message {
  flex: 1 1 auto;
  font-size: 1.01rem;
  font-weight: 600;
  color: #fff;
  margin-right: 6px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.undo-toast .undo-btn {
  background: linear-gradient(90deg, #22c55e 0%, #38bdf8 100%);
  color: #fff;
  font-size: 0.97rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  margin-left: 4px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(34,197,94,0.13);
  transition: background 0.13s, color 0.13s, box-shadow 0.13s;
  outline: none;
}
.undo-toast .undo-btn:active,
.undo-toast .undo-btn:focus {
  background: linear-gradient(90deg, #38bdf8 0%, #22c55e 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34,197,94,0.18);
}

/* Animation for subtle appearance */
@keyframes undo-flash {
  0% { box-shadow: 0 0 0 0 #22c55e55; }
  60% { box-shadow: 0 0 0 8px #22c55e33; }
  100% { box-shadow: 0 8px 32px rgba(30,40,60,0.18), 0 1.5px 4px rgba(60,80,130,0.10);}
}
.undo-toast {
  animation: undo-flash 0.5s;
}

/* Responsive: make toast even more compact on small screens */
@media (max-width: 430px) {
  .undo-toast {
    padding: 8px 10px 8px 10px;
    font-size: 0.97rem;
    border-radius: 13px;
    gap: 8px;
    bottom: 18px;
    max-width: 98vw;
  }
  .undo-toast .undo-btn {
    padding: 6px 12px;
    font-size: 0.93rem;
  }
}

/* --- Table header colors: readable, not white --- */
.header.veggies-header      { background: #b8dbc7 !important; color: #23472b !important; }
.header.indian-header       { background: #d7c3e6 !important; color: #4b2956 !important; }
.header.bigw_target_kmart-header { background: #c3d4ea !important; color: #23324b !important; }
.header.bunnings-header     { background: #cfd8dc !important; color: #263238 !important; }
.header.officeworks-header  { background: #f3cccc !important; color: #8b1c1c !important; }
.header.test-header         { background: #e2d3cb !important; color: #4e342e !important; }
.header.default-header      { background: #c3d4ea !important; color: #232c3d !important; }

/* Ensure header children also use readable color */
.header,
.header * { color: #232c3d !important; }
.header.veggies-header,
.header.veggies-header * { color: #23472b !important; }
.header.indian-header,
.header.indian-header * { color: #4b2956 !important; }
.header.bigw_target_kmart-header,
.header.bigw_target_kmart-header * { color: #23324b !important; }
.header.bunnings-header,
.header.bunnings-header * { color: #263238 !important; }
.header.officeworks-header,
.header.officeworks-header * { color: #8b1c1c !important; }
.header.test-header,
.header.test-header * { color: #4e342e !important; }
.header.default-header,
.header.default-header * { color: #232c3d !important; }

/* --- SYNC TOAST: Floating notification for sync status --- */
.sync-toast {
  position: fixed;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  z-index: 4000;
  background: rgba(25, 118, 210, 0.85); /* glassy blue */
  color: #fff;
  padding: 14px 32px 14px 22px;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(30,40,60,0.18), 0 1.5px 4px rgba(60,80,130,0.10);
  font-size: 1.13rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.97;
  pointer-events: none;
  min-width: 0;
  max-width: 92vw;
  white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,0.18);
  animation: sync-flash 1.2s linear infinite;
  transition: box-shadow 0.18s, background 0.18s;
}
.sync-toast i {
  font-size: 1.35em;
  margin-right: 8px;
  color: #fff;
  filter: drop-shadow(0 2px 6px #1565c0aa);
}
.sync-toast .sync-progress-bar {
  height: 4px;
  width: 48px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff 0%, #90caf9 100%);
  margin-left: 12px;
  overflow: hidden;
  position: relative;
}
.sync-toast .sync-progress-bar::before {
  content: '';
  position: absolute;
  left: -48px;
  top: 0;
  height: 100%;
  width: 48px;
  background: linear-gradient(90deg, #90caf9 0%, #fff 100%);
  animation: sync-progress-move 1.2s linear infinite;
  border-radius: 2px;
}
@keyframes sync-progress-move {
  0% { left: -48px; }
  100% { left: 48px; }
}
@keyframes sync-flash {
  0%,100%{opacity:1;}
  50%{opacity:0.7;}
}





/* ===== Dark Mode Overrides (prefers-color-scheme) ===== */
@media (prefers-color-scheme: dark) {
  body, html {
    background: #0f172a !important; /* slate-900 */
    color: #e5e7eb !important;      /* gray-200 */
  }

  .top-bar,
  .top-bar.compact {
    background: #0b1220 !important; /* darker slate */
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
  }

  #user-email-label {
    background: #0f172a !important;
    color: #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
    border: 1px solid #1f2937 !important;
  }

  .container {
    background: #111827 !important; /* gray-900 */
    border-color: #1f2937 !important; /* gray-800 */
    box-shadow: 0 2px 9px rgba(0,0,0,0.35) !important;
  }

  /* Override inline header colors for readability in dark mode */
  .header {
    background: #1f2937 !important; /* gray-800 */
    color: #e5e7eb !important;      /* gray-200 */
    border-bottom: 1px solid #243041 !important;
  }
  .header * {
    color: #e5e7eb !important;
  }
  .header .header-count {
    background: rgba(255,255,255,0.08) !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
    box-shadow: none !important;
  }
  .header .voice-add-btn,
  .header .header-burger-menu {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }
  .collapse-arrow {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }

  /* List items */
  li {
    background: #0f172a !important;
    border-color: #1f2937 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
    color: #e5e7eb !important;
  }
  li.checked {
    background: #0b1220 !important;
    color: #94a3b8 !important; /* slate-400 */
  }
  li.to-buy {
    background: #2b2a12 !important; /* muted warm for highlight */
    color: #fbbf24 !important;      /* amber-400 */
  }
  li.zero-count {
    background: #0f172a !important;
    color: #e5e7eb !important;
  }

  /* Inputs & buttons */
  input[type="checkbox"] {
    background: #0b1220 !important;
    border-color: #334155 !important;
    accent-color: #38bdf8 !important; /* sky-400 */
    box-shadow: none !important;
  }
  .counter .count {
    color: #e5e7eb !important;
  }
  .counter button {
    color: #e5e7eb !important;
    border-color: #475569 !important;
    background: transparent !important;
  }
  .counter button:hover {
    background: rgba(148,163,184,0.12) !important;
  }

  /* Add buttons */
  .add-table-btn {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
    box-shadow: none !important;
  }
  #add-table-btn-main.add-table-btn {
    background: linear-gradient(90deg, #374151 0%, #1f2937 100%) !important;
    border-color: #111827 !important;
  }
  #add-table-btn-main.add-table-btn:hover {
    background: linear-gradient(90deg, #1f2937 0%, #0b1220 100%) !important;
  }

  /* Move/delete handles */
  .item-move-handle,
  .table-move-handle,
  .item-delete-svg-wrap {
    background: #0b1220 !important;
    border-color: #475569 !important;
    box-shadow: none !important;
    color: #cbd5e1 !important;
  }
  .item-move-handle i {
    color: #cbd5e1 !important;
  }

  /* Modals */
  .modal-backdrop {
    background: rgba(2,6,23,0.6) !important; /* slate-950 with opacity */
  }
  .modal-dialog,
  .input-modal-dialog,
  .help-modal-content,
  .voice-notification {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border-color: #1f2937 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  }
  .input-modal-input,
  .edit-item-input,
  .edit-table-input {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
  }
  .input-modal-input:focus,
  .edit-item-input:focus,
  .edit-table-input:focus {
    border-color: #38bdf8 !important;
    background: #0b1220 !important;
  }
  .modal-btn-no,
  .input-modal-btn-cancel {
    background: #0f172a !important;
    color: #e5e7eb !important;
  }
  .modal-btn-yes,
  .input-modal-btn-ok {
    background: linear-gradient(90deg,#16a34a 0%, #0ea5e9 100%) !important; /* green->sky */
    color: #fff !important;
  }

  /* Voice UI */
  .voice-notification-backdrop {
    background: rgba(2,6,23,0.75) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
  .voice-title { color: #e5e7eb !important; }
  .voice-interim-results { color: #93c5fd !important; } /* light blue */
  .voice-subtitle { color: #cbd5e1 !important; }
  .voice-cancel-btn {
    background: #0f172a !important;
    color: #e5e7eb !important;
  }
  .voice-cancel-btn:hover {
    background: #111827 !important;
    color: #fff !important;
  }

  /* Undo toast */
  .undo-toast {
    background: rgba(2,6,23,0.85) !important;
    border-color: rgba(148,163,184,0.2) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  }
  .undo-toast .undo-btn {
    background: linear-gradient(90deg, #22c55e 0%, #38bdf8 100%) !important;
    color: #fff !important;
  }

  /* Sync toast */
  .sync-toast {
    background: rgba(3,105,161,0.85) !important; /* sky-700 glass */
    border-color: rgba(148,163,184,0.2) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  }

  /* Collapse arrow */
  .collapse-arrow {
    color: #e5e7eb !important;
  }

  /* Name text color */
  .name {
    color: #e7e7eb !important;
  }

  /* Headers by class (override light palette mappings) */
  .header.veggies-header,
  .header.indian-header,
  .header.bigw_target_kmart-header,
  .header.bunnings-header,
  .header.officeworks-header,
  .header.test-header,
  .header.default-header {
    background: #1f2937 !important;
    color: #e5e7eb !important;
  }
  .header.veggies-header *,
  .header.indian-header *,
  .header.bigw_target_kmart-header *,
  .header.bunnings-header *,
  .header.officeworks-header *,
  .header.test-header *,
  .header.default-header * {
    color: #e5e7eb !important;
  }

  /* Move/drag effects */
  .item-moving {
    background: #0b1220 !important;
    color: #93c5fd !important; /* sky-300 */
    box-shadow: 0 2px 14px 0 rgba(14,165,233,0.35) !important;
  }
  .item-squeeze {
    background: rgba(59,130,246,0.15) !important; /* blue-500 tint */
    border: 2.5px dashed #38bdf8 !important;
    box-shadow: 0 0 8px 1px rgba(56,189,248,0.35) !important;
  }
}
#sl-debug-toggle:focus { outline: 2px solid #38bdf8; outline-offset: 2px; }
#sl-debug-panel code, #sl-debug-panel pre { font-size: 12px; }



/* === SWIPE TO DELETE MODERN UX === */
li.swipe-pending-delete {
  background: #ffcdd2 !important; /* Light red background */
  border-left: 5px solid #d32f2f ! important;
  opacity: 1 !important;
}

li.swipe-trash-visible {
  position: relative;
}

.swipe-delete-trash {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  opacity: 0;
  color: #d32f2f;
  font-size: 2em;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

li.swipe-trash-visible .swipe-delete-trash {
  opacity: 1;
}

/* Prevent text selection while swiping */
li.swiping {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Visual hint that item is ready for swipe-delete */
li[style*="opacity: 0.8"] {
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3) !important;
  border: 2px dashed #d32f2f !important;
}