/* Icon background images - using PNG files from icons folder */
.icon-save {
  background-image: url('icons/save_icon.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.5) brightness(0.8);
}

.icon-clear {
  background-image: url('icons/delete.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.5) brightness(0.8);
}

.icon-reset {
  background-image: url('icons/reset.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.5) brightness(0.8);
}

.icon-share {
  background-image: url('icons/share_icon.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.5) brightness(0.8);
}

.icon-whatsapp {
  background-image: url('icons/chat_icon.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.5) brightness(0.8);
}

.icon-sms {
  background-image: url('icons/share_sms.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.5) brightness(0.8);
}

.icon-load {
  background-image: url('icons/load.png');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.1) brightness(0.9);
}

.icon-add {
  background-image: url('icons/add new item.png');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.1) brightness(0.9);
}

.icon-view-mode {
  background-image: url('icons/day-night.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.1) brightness(0.95);
}

.header-btn.icon-reset {
  background-image: url('icons/reset_header.PNG');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.1) brightness(0.9);
}

/* Text-based emoji icons for menu buttons */
.icon-menu::before {
  content: "≡";
  font-family: Arial, sans-serif;
}

.icon-font-size::before {
  content: "A±";
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.icon-categories::before {
  content: "⚙️";
}

.icon-close::before {
  content: "×";
  font-family: Arial, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
}

.icon-font-increase::before {
  content: "+A";
}

.icon-font-decrease::before {
  content: "-A";
}

.icon-font-reset::before {
  content: "↩️";
}

/* For buttons that use text/emoji icons (hide button text, show ::before) */
.menu-icon.icon-menu,
.menu-icon.icon-font-size,
.dropdown-close.icon-close {
  font-size: 0;
}

.menu-icon::before {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.menu-icon.icon-menu::before {
  font-size: 1.45rem;
}

.menu-icon.icon-font-size::before {
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}

.dropdown-close.icon-close::before {
  font-size: 1.6rem;
}

/* For menu dropdown buttons with both icon and text */
.menu-dropdown .icon-categories::before,
.menu-dropdown .icon-font-increase::before,
.menu-dropdown .icon-font-decrease::before,
.menu-dropdown .icon-font-reset::before {
  margin-left: 0.4rem;
}

/* Dark mode adjustments - use dark mode PNG icons */
body.dark-mode .icon-save {
  background-image: url('icons/save_icon_dark.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-clear {
  background-image: url('icons/delete_dark-mode.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-reset {
  background-image: url('icons/reset_dark.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-share {
  background-image: url('icons/share_icon_dark.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-whatsapp {
  background-image: url('icons/chat_icon_dark.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-sms {
  background-image: url('icons/share_sms_dark.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-load {
  background-image: url('icons/load_dark.PNG');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-add {
  background-image: url('icons/add new item_dark.png');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .icon-view-mode {
  background-image: url('icons/day-night_dark.png');
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}

body.dark-mode .header-btn.icon-reset {
  background-image: url('icons/reset_header_dark.PNG');
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  filter: contrast(1.2) brightness(1.1);
}