/* =========================
   Global Resets & Defaults
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --icon-size: 32px;
  --card-size: 120px;
  --border-style: solid;
  --border-color: #ff0000;
  --app-background: #ffffff;
  --transition-speed: 0.2s;
  --focus-outline: 2px auto -webkit-focus-ring-color;
    /* (You update --card-size in JS when the slider moves) */
  /* What fraction of the card’s height do we give the symbol box? */
  --symbol-fraction: 0.65;  
  /* The remaining 35% i
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('OpenDyslexic3-Regular.ttf') format('truetype');
}

/* Use an Apple-like system font stack */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--app-background);
  color: #333;
  min-height: 100vh;
  padding-bottom: 5em;
}

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--font-family);
}

/* =========================
   Sticky Header (Controls)
========================= */
#controls {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  /* subtle glassy effect */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 5rem;
  border-bottom: 1px solid #ddd;
}

/* Left/Right sections in the header */
.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Range and select styles (Apple-inspired minimalism) */
input[type="range"],
select {
  appearance: none;
  border: 2px solid #6d6d6d;
  background: #fff;
  padding: 0.5rem;
  border-radius: 15px;
  font-size: 1.2rem;
  transition: border-color var(--transition-speed);
}

input[type="range"]:focus,
select:focus {
  outline: var(--focus-outline);
}

#border-color-input {
  width: 8em;
  height: 4em;
}

/* Settings button */
#settings-btn {
  background-color: #007aff;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color var(--transition-speed);
}

#settings-btn:hover {
  background-color: #005bb5;
}

#settings-btn:focus {
  outline: var(--focus-outline);
}

/* =========================
   Dock
========================= */
#dock {
  position: fixed;
  z-index: 999;
  background-color: rgb(125 123 123 / 25%);
  backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-speed);
  margin: 1em;
  overflow: scroll;
  border-radius: 10px;
}

.dock-left {
  top: 0;
  left: 0;
  width: 70px;
  height: 90%;
  flex-direction: column;
  display: flow !important;
  font-size: 20px;
}

.dock-right {
  top: 0;
  right: 0;
  width: 70px;
  height: 90%;
  flex-direction: column;
  display: flow !important;
  font-size: 20px;
}

.dock-bottom {
  bottom: 0;
  left: 0;
  width: 90%;
  height: 100px;
  flex-direction: row !important;
}

.dock-top {
  top: 3.5rem;
  /* or slightly more to ensure it sits below the sticky header */
  left: 0;
  width: 100%;
  height: 60px;
  flex-direction: row;
  margin: 0 !important;
}

/* Dock Buttons */
#dock button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 3rem;
  padding: 0.5rem;
  transition: background-color var(--transition-speed);
  display: flex;
  align-items: center;
  justify-content: center;
}

#dock button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

#dock button:focus {
  outline: var(--focus-outline);
}

.dock-left,
.dock-right {
  scrollbar-width: thin;
  /* For Firefox */
  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
  /* For Firefox */
}

/* For Webkit browsers like Chrome, Safari */
.dock-left::-webkit-scrollbar,
.dock-right::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dock-left::-webkit-scrollbar-thumb,
.dock-right::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.dock-left::-webkit-scrollbar-track,
.dock-right::-webkit-scrollbar-track {
  background: transparent;
}



/* =========================
   Main Content
========================= */
#main-content {
  margin: 1rem auto;
  max-width: 1200px;
  /* or any container width you like */
  padding-top: 1rem;
  margin: 2em 4em;
}

/* Adjust margins if dock is on left/right to avoid overlap */
.dock-left~#main-content {
  margin-left: 70px;
}

.dock-right~#main-content {
  margin-right: 70px;
}

.dock-bottom~#main-content {
  margin-bottom: 70px;
}

/* For dock-top, no special margin needed unless you want extra spacing:
   .dock-top ~ #main-content { padding-top: 5rem; }
*/

/* Category Section */
.category-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  padding-top: .5em;
}

/* =========================
   Items Grid & Cards
========================= */
.items-grid {
  display: grid;
 grid-template-columns: repeat(auto-fill, minmax(var(--card-size), 1fr));
   gap: 1rem;
}

.item-card {
  width: var(--card-size);
  height: var(--card-size);
  background-color: #fafafa;
  border-radius: 12px;
  cursor: pointer;
  /* transition: background-color var(--transition-speed); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   border: 2px solid rgba(128, 128, 128, 0.528);

}


.item-card:hover {
  background-color: #f0f0f0;
  outline: 3px var(--border-style) var(--border-color);
}

.item-card:focus {
  outline: var(--focus-outline);
}

/* Highlighted cards */
.item-card.highlighted {
 /* outline: 8px solid rgba(128, 128, 128, 0.2); */
 border: 6px solid rgba(0, 0, 0, 0.62);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}




/* The item-symbol might be text or an inline SVG */
/* Adjust the item-symbol to fill and scale dynamically */
.item-symbol {
  flex: 0 0 65%;
  display: flex;
  align-items: center;
  justify-content: center;
font-size: calc(var(--card-size) * 0.5) !important;  /* Scale font size relative to card size */
  width: 200%;
  /* Take full width */
  height: 650%;
  /* Take full height */
  overflow: hidden;
  /* Prevent overflowing content */
  line-height: 1;
  /* transition: font-size 0.2s ease, transform 0.2s ease; */
    word-break: break-all;

}
/* If the .item-symbol also has .small-number, shrink it to 30% instead of 50% */
.item-symbol.small-number {
  font-size: calc(var(--card-size) * 0.2) !important;
}

/* .item-symbol:hover {
  transform: scale(1.1);
} */

/* If .item-symbol has an SVG, let's scale it fully */
.item-symbol svg {
  width: 100%;
  height: 100%;
  display: block;

}

.item-label {
  /* font-size: 100% !important; */
  flex: 0 0 35%;
  font-size: calc(var(--card-size) * 0.1);
  /* margin-top: 0.25rem; */
  text-align: center;
  color: #555;
  /* padding: 10px; */
  overflow-wrap: break-word;
}

.item-image {
  width: 100%;
  /* Make the image fill the parent container */
  height: 100%;
  /* Maintain aspect ratio */
  object-fit: contain;
  /* Ensure the entire image is visible */
  display: block;
  /* Eliminate extra spacing around images */
}

#tags-container {
  top: 60px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.25rem 1rem;


}

/* Styling for individual tags */
#tags-container .tag {
  background: #e0e0e0;
  color: #333;
  padding: 0.5rem 0.5rem;
  border-radius: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

#tags-container .tag:hover {
  background: #d0d0d0;
}

/* Tag pills in the header */
#tags-container {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.25rem 1rem;
  overflow-x: auto;
}

#tags-container .tag {
  background: #e0e0e0;
  color: #333;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

#tags-container .tag:hover {
  background: #d0d0d0;
}
#tags-container .tag.active {
  background: #007aff;
  color: #fff;
  font-weight: 600;
}



/* =========================
   Settings Modal
========================= */
#settings-modal {

  position: fixed;
  /* Ensure it’s positioned relative to the viewport */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  /* A high value to ensure it appears above other elements */
  /* background-color: rgb(24, 97, 255); */
  /* Optional: give it a visible background */
  padding: .5em;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */
}

#settings-modal.hidden {
  display: none;
}

#confirm-save{
  background-color:#007aff;
  color: white;
}

#confirm-discard{
  background-color: #ff5656;
  color: white;
}

/* Make the Settings modal content wider and scrollable */
.modal-content {
    display: grid
;
    line-height: 2em;
    background-color: white;
    border-radius: 1px;
    box-shadow: 0 2px 48px rgba(0, 0, 0, 1.3);
    padding: 1.5rem;
    width: 80vw;
    max-width: 600px;
    max-height: 84vh;
    overflow-y: auto;
    border-radius: 20px;
      background-color: rgb(125 123 123 / 1%);
  backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-content label{
  color: black;
  font-size: 1.1em;
  font-weight: 600;
}

#toggle-categories{
  background-color: #007aff;
  color: white;
  font-weight: 700;
  padding: 1em;
    margin: 2em 0em;
    border-radius: 6px;
}

/* Positioning for Settings Modal */
#settings-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

/* Positioning for Confirmation Modal */
#confirm-unsaved-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
}

/* Collapsible Button & Content */
.collapsible-btn {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.25em;
  padding: 0.25em;
}

.collapsible-content {
  margin: 0.5em 0 1em 1.5em;
}

.collapsible-content.hidden {
  display: none;
}

/* =========================
   Settings Modal & Confirmation
========================= */
.hidden {
  display: none !important;
}

/* Category visibility checkboxes */
#category-visibility-section label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
}
#category-visibility-section input[type="checkbox"] {
  /* Scale it up by 1.5× (50% larger). Adjust the 1.5 as needed. */
  transform: scale(2.2);
  /* Because scaling moves its center, add a little margin to re-position nicely */
  margin-right: 0.5rem;
  /* Optional: make the clickable area bigger to match the visual size */
  /* (padding on a checkbox doesn't do much across all browsers, but it can sometimes help) */
  padding: 0.2rem;
  /* Ensure there's room around it so labels don’t get too close */
  vertical-align: middle;
  /* If your surrounding text is larger, you might also bump the font-size */
  /* But this isn’t strictly necessary for the checkbox itself */
}
#category-visibility-section{

}
input[type="checkbox"]{
    transform: scale(2);
}

/* =========================
   Modal Actions Buttons
========================= */

/* Ensure the modal‐actions container uses flexbox and has some spacing */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  /* space between buttons */
  margin-top: 1.5rem;
  /* a bit more breathing room above */
}

/* Base style for both buttons in .modal-actions */
.modal-actions button {
  font-size: 1rem;
  /* readable text size */
  font-weight: 500;
  /* slightly bolder */
  padding: 0.6rem 1.2rem;
  /* vertical/horizontal padding */
  border-radius: 6px;
  /* softly rounded corners */
  border: none;
  /* remove default border */
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Primary Button (Save) ===== */
#save-settings {
  background-color: #007aff;
  /* vibrant blue */
  color: #fff;
  /* white text */
}

/* Hover state for primary */
#save-settings:hover {
  background-color: #005bb5;
  /* slightly darker blue */
}

/* Focus state for primary */
#save-settings:focus {
  outline: 2px solid rgba(0, 122, 255, 0.6);
  outline-offset: 2px;
}

/* Active state for primary (when clicked) */
#save-settings:active {
  transform: scale(0.98);
  /* subtle “pressed” effect */
}

/* ===== Secondary Button (Close) ===== */
#close-settings {
  background-color: #f0f0f0;
  /* light gray background */
  color: #333;
  /* dark gray text */
}

/* Hover state for secondary */
#close-settings:hover {
  background-color: #e0e0e0;
  /* slightly darker gray */
}

/* Focus state for secondary */
#close-settings:focus {
  outline: 2px solid rgba(100, 100, 100, 0.6);
  outline-offset: 2px;
}

/* Active state for secondary */
#close-settings:active {
  transform: scale(0.98);
}


.slider-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-container label {
  font-size: 0.9rem;
  color: #333;
}

#size-range {
  -webkit-appearance: none;
  /* Remove default slider styles in Chrome/Safari */
  width: 160px;
  height: 30px;
  background: #ddd;
  /* track color */
  border-radius: 20px;
  outline: none;
  transition: background 0.3s;
}

/* When hovered or focused, change track color slightly */
#size-range:hover,
#size-range:focus {
  background: #ccc;
}

/* WebKit Thumb */
#size-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  /* bigger thumb */
  height: 40px;
  background: #007aff;
  /* or your accent color */
  border-radius: 50%;
  border: 2px solid #fff;
  /* white border ring */
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transition: background 0.3s;
}

#size-range::-webkit-slider-thumb:hover {
  background: #005bb5;
  /* darker accent on hover */
}

#size-range::-webkit-slider-thumb:focus {
  outline: 4px auto -webkit-focus-ring-color;
  /* typical focus outline */
}

/* Firefox Thumb */
#size-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007aff;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

#size-range::-moz-range-thumb:hover {
  background: #005bb5;
}

/* Firefox Track */
#size-range::-moz-range-track {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

/* ================================
   Custom Range Thumb (All Browsers)
   ================================ */

/* 1) Remove default appearance for both sliders */
#modal-size-range,
#header-size-range {
  -webkit-appearance: none;  /* for Chrome, Safari, Opera */
  -moz-appearance: none;     /* for Firefox */
  appearance: none;          /* fallback */
  width: 160px;              /* adjust to your desired track width */
  height: 8px;               /* track height */
  background: #ddd;          /* track color */
  border-radius: 4px;        /* track rounding */
  outline: none;             /* no outline when focused */
  margin: 0;                 /* ensure consistent spacing */
}

/* 2) Track hover/focus states (optional but recommended) */
#modal-size-range:hover,
#modal-size-range:focus,
#header-size-range:hover,
#header-size-range:focus {
  background: #ccc;
}

/* 3) WebKit Browsers (Chrome, Safari, Edge Chromium) */
#modal-size-range::-webkit-slider-thumb,
#header-size-range::-webkit-slider-thumb {
  -webkit-appearance: none;   /* override default */
  width: 24px;                /* desired thumb width */
  height: 24px;               /* desired thumb height */
  background: #007aff;        /* thumb color (blue) */
  border: 2px solid #fff;     /* white border for contrast */
  border-radius: 50%;         /* make it a circle */
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  cursor: pointer;
  margin-top: -8px;           /* vertically center thumb on an 8px‐tall track: (24px/2) − (8px/2) = 8px → use −8px */
  transition: background 0.2s, transform 0.1s;
}

/* WebKit Thumb Hover/Active */
#modal-size-range::-webkit-slider-thumb:hover,
#header-size-range::-webkit-slider-thumb:hover {
  background: #005bb5;        /* darker on hover */
}
#modal-size-range::-webkit-slider-thumb:active,
#header-size-range::-webkit-slider-thumb:active {
  transform: scale(1.05);     /* slight grow on click */
}

/* WebKit Track */
#modal-size-range::-webkit-slider-runnable-track,
#header-size-range::-webkit-slider-runnable-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

/* 4) Firefox (Gecko) */
#modal-size-range::-moz-range-thumb,
#header-size-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #007aff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

/* Firefox Thumb Hover/Active */
#modal-size-range::-moz-range-thumb:hover,
#header-size-range::-moz-range-thumb:hover {
  background: #005bb5;
}
#modal-size-range::-moz-range-thumb:active,
#header-size-range::-moz-range-thumb:active {
  transform: scale(1.05);
}

/* Firefox Track */
#modal-size-range::-moz-range-track,
#header-size-range::-moz-range-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

/* 5) Edge/IE (Legacy - MS) */
#modal-size-range::-ms-thumb,
#header-size-range::-ms-thumb {
  width: 24px;
  height: 24px;
  background: #007aff;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

/* MS Thumb Hover/Active */
#modal-size-range::-ms-thumb:hover,
#header-size-range::-ms-thumb:hover {
  background: #005bb5;
}
#modal-size-range::-ms-thumb:active,
#header-size-range::-ms-thumb:active {
  transform: scale(1.05);
}

/* MS Track */
#modal-size-range::-ms-track,
#header-size-range::-ms-track {
  height: 8px;
  background: transparent;    /* hide the default track */
  border-color: transparent;
  color: transparent;
}
#modal-size-range::-ms-fill-lower,
#header-size-range::-ms-fill-lower {
  background: #ddd;
  border-radius: 4px;
}
#modal-size-range::-ms-fill-upper,
#header-size-range::-ms-fill-upper {
  background: #ddd;
  border-radius: 4px;
}

/* For Edge/IE if needed... 
   #size-range::-ms-track, etc.
   But modern Edge uses the Blink engine and can rely on WebKit rules
*/

/* 1) Responsive Grid: fewer columns on narrow screens */
@media (max-width: 600px) {
  .items-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
}
@media (max-width: 600px) {
  .items-grid {
    /* grid-template-columns: 1fr; */
    gap: 0.5rem;
  }
}

/* 2) Force dock to bottom on mobile */
@media (max-width: 600px) {
  #dock {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 60px !important;
    flex-direction: row !important;
    margin: 0 !important;
  }
  /* Hide any left/right/top classes */
  #dock.dock-left,
  #dock.dock-right,
  #dock.dock-top {
    /* overridden by !important above */
  }
}

/* 3) Larger touch targets for dock buttons */
@media (max-width: 600px) {
  #dock button {
    font-size: 2rem;
    min-width: 56px;
    min-height: 56px;
  }
}

/* 4) Range slider thumb bigger on mobile */
@media (max-width: 600px) {
  #modal-size-range::-webkit-slider-thumb,
  #header-size-range::-webkit-slider-thumb {
    width: 32px;
    height: 32px;
    margin-top: -12px;
  }
  #modal-size-range::-moz-range-thumb,
  #header-size-range::-moz-range-thumb {
    width: 32px;
    height: 32px;
  }
  #modal-size-range::-ms-thumb,
  #header-size-range::-ms-thumb {
    width: 32px;
    height: 32px;
  }
}

/* 5) Larger checkboxes and labels */
@media (max-width: 600px) {
  #category-visibility-section input[type="checkbox"] {
    transform: scale(1.8);
    margin-right: 0.75rem;
  }
  #category-visibility-section label {
    font-size: 1.1rem;
    padding: 0.5rem 0;
  }
}

/* 6) Full-screen Settings modal on mobile */
@media (max-width: 600px) {
  #settings-modal {
    top: 0;
    left: 0;
    transform: none;
  }
  #settings-modal .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 1rem;
    overflow-y: auto;
    padding-bottom: 15vh; /* avoid keyboard covering Save */
  }
  .modal-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  .modal-actions button {
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1.1rem;
  }
}

/* 7) Compact header on mobile */
@media (max-width: 600px) {
  #controls {
    padding: 0.5rem 1rem;
  }
  #tags-container {
    font-size: 0.9rem;
    gap: 0.5rem;
    overflow-x: auto;
  }
  /* Hide header slider placeholder unless toggled */
  #header-slider-container.hidden {
    display: none !important;
  }
}

/* 8) Ensure item-label is readable on small cards */
@media (max-width: 600px) {
  .item-label {
    font-size: 0.8rem; /* ~14px minimum */
  }
}