/* PRIMARY BUTTONS AND FLOATING ISLAND */
/* Accessibility Tools Container: floating island at bottom center */
#accessibility-tools-container {
  position: fixed;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 6px;
  z-index: 20000;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.23);
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  min-width: auto;
  max-width: calc(100vw - 48px);
}

/* Buttons inside the accessibility container: flat style with hover */
#accessibility-tools-container .ui-action-button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  font-size: 15px;
  padding: 0 6px;
  transition: background 0.18s;
}

/* Mobile responsiveness for the floating island and its buttons */
@media (max-width: 1024px) {
  /* Turn the island into a horizontally scrollable pill bar with safe-area awareness */
  #accessibility-tools-container {
    bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    left: 15px;
    right: 15px;
    transform: none;
    padding: 10px 8px;
    gap: 4px;
    max-width: none;
    /* keep centered but allow horizontal scroll for overflow */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -ms-overflow-style: none;            /* hide scrollbar in IE/Edge Legacy */
    scrollbar-width: none;               /* hide scrollbar in Firefox */
    scrollbar-gutter: stable both-edges; /* prevent layout shift when scrollbars appear */
    -webkit-overflow-scrolling: touch;
    /* account for notches/edges */
    padding-left: calc(8px + env(safe-area-inset-left, 0px));
    padding-right: calc(8px + env(safe-area-inset-right, 0px));
    justify-content: flex-start;
    margin: 0 !important;
  }

  /* Hide scrollbar on WebKit to keep the bar clean */
  #accessibility-tools-container::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar in Firefox/standards */
  #accessibility-tools-container {
    scrollbar-width: none;
  }

  /* Larger tap targets on mobile */
  #accessibility-tools-container .ui-action-button {
    min-width: 44px;   /* Apple HIG tap target */
    min-height: 44px;  /* Material min touch target */
    font-size: 14px;
    padding: 0 8px;
  }
}

/* Extra-small devices: tighten spacing slightly */
@media (max-width: 360px) {
  #accessibility-tools-container {
    padding: 8px 6px;
    gap: 3px;
  }
  #accessibility-tools-container .ui-action-button {
    min-width: 42px;
    min-height: 42px;
  }
}

/* Hover and active states for accessibility buttons */
#accessibility-tools-container .ui-action-button:hover,
#accessibility-tools-container .ui-action-button:active {
  background: rgba(41,118,255,0.10) !important;
}


/* Dark mode styling for the container */
body.dark #accessibility-tools-container {
  background: rgba(25, 26, 29, 0.8) !important; /* #191a1d with 80% opacity */
  color: #ffffff !important;
  border: 1px solid rgba(38, 38, 49, 1) !important; /* #262631 */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
}

/* Light mode styling for the container */
body.light #accessibility-tools-container {
  background: rgba(246, 247, 250, 0.8) !important; /* #f6f7fa with 80% opacity */
  color: #000000 !important;
  border: 1px solid rgba(207, 207, 216, 1) !important; /* #cfcfd8  */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
}

/* -----END OF PRIMARY BUTTONS AND FLOATING ISLAND----- */










  /* ----------------------------------
  ACCESSIBILITY BUTTONS
  ------------------------------------- */

  /* Accessibility Button: theme-specific styles */
  .accessibility-button {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 0 16px;
    height: 40px;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.18s, background 0.18s, color 0.18s, border 0.18s;
  }

  body.dark .accessibility-button,
  body.dark .toggle-stacked-btn,
  body.dark .typeface-option {
    background-color: #232429;
    color: #ffffff;
    border: 1px solid rgba(38, 38, 49, 1) !important; /* #262631 */
  }

  body.light .accessibility-button,
  body.light .toggle-stacked-btn,
  body.light .typeface-option {
    background-color: #f6f7fa;
    color: #000000;
    border: 1px solid rgba(207, 207, 216, 1) !important; /* #cfcfd8 */
  }

  .accessibility-button:hover,
  .accessibility-button.active {
    opacity: 1;
  }
  

  /* Optional: Set body background for clarity */
  body.dark {
    background: #11121a;
    color: #ffffff;
  }
  body.light {
    background: #ffffff;
    color: #000000;
  }

/* -----END OF ACCESSIBILITY BUTTONS----- */












  /*-------------------------- 
  POPUP COMMON UI 
  -----------------------------*/

  /* Shared Popup Layout Styles */
  .accessibility-popup,
  #emoji-popup,
  #accessibility-notes-popup,
  .stamp-wheel,
  #object-tracker-panel,
  #custom-table-popup,
  .custom-popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    border-radius: 18px;
    padding: 16px;
    width: 380px;
    max-width: calc(100vw - 40px);
    height: 380px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  

  /* Dark Mode Popup Styles */
  body.dark .accessibility-popup,
  body.dark #emoji-popup,
  body.dark #accessibility-notes-popup,
  body.dark .stamp-wheel,
  body.dark #color-picker-popup,
  body.dark #table-popup,
  body.dark .custom-popup,
  body.dark #object-tracker-panel {
    background: rgba(25, 26, 29, 0.8);
    color: #ffffff;
    border: 1px solid #262631;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  }

  /* Light Mode Popup Styles */
  body.light .accessibility-popup,
  body.light #emoji-popup,
  body.light #accessibility-notes-popup,
  body.light .stamp-wheel,
  body.light #color-picker-popup,
  body.light #table-popup,
  body.light .custom-popup,
  body.light #object-tracker-panel {
    background: rgba(246, 247, 250, 0.8);
    color: #000000;
    border: 1px solid #cfcfd8;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  }

  /* Placeholder text color for inputs and textareas in popups */
  body.dark .accessibility-popup ::placeholder,
  body.dark #emoji-popup ::placeholder,
  body.dark #accessibility-notes-popup ::placeholder,
  body.dark .stamp-wheel ::placeholder {
    color: #bbbbbb !important;
    opacity: 1 !important;
  }

  body.light .accessibility-popup ::placeholder,
  body.light #emoji-popup ::placeholder,
  body.light #accessibility-notes-popup ::placeholder,
  body.light .stamp-wheel ::placeholder {
    color: #7c7c7c !important;
    opacity: 1 !important;
  }

  /* -----END POPUP COMMON UI----- */







 /* ---------------------- 
  SEARCH BAR COMMON UI
  ------------------------- */
  .search-bar {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Avenir Next', sans-serif;
    border: 1px solid var(--ui-button-border-color, rgba(255, 255, 255, 0.1));
    background-color: var(--ui-button-bg-color, rgba(12, 12, 12, 0.6));
    color: var(--ui-button-text-color, #ffffff);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
  }

  .search-bar:focus {
    outline: none;
  box-shadow: 0 0 0 2px rgba(41, 118, 255, 0.3);
  background-color: inherit;
  }
/* -----END OF COMMON SEARCH BAR UI----- */








  /* ---------------------- 
  COMMON DROPDOWN UI - used in color popup
  ------------------------- */

  /* Dropdown animation keyframes */
  @keyframes fadeInDropdown {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* Dropdown (select) and custom dropdown theme styles */
  .custom-dropdown {
    border-radius: 8px;
    margin-top: 4px;
  }
  
  body.dark select,
  body.dark .custom-dropdown {
    background: #232429;
    color: #ffffff;
    border: 1px solid #393943;
    transition: background 0.18s, color 0.18s, border 0.18s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  body.light select,
  body.light .custom-dropdown {
    background: #ffffff;
    color: #000000;
    border: 1px solid #bfc1c7;
    transition: background 0.18s, color 0.18s, border 0.18s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

 /* -----END OF COMMON DROPDOWN UI----- */




/* ---------------------------
COMMON DROPDOWN BUTTON - used in color popup
------------------------------*/

/* Dropdown Button Styles */
.dropdown-button {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
  border: 1px solid transparent;
  outline: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Dark Mode Dropdown Button */
body.dark .dropdown-button {
  background-color: #000000;
  border-color: #393943;
  color: #ffffff;
}

/* Light Mode Dropdown Button */
body.light .dropdown-button {
  background-color: #ffffff;
  border-color: #cfcfd8;
  color: #000000;
}

/* Focus State */
.dropdown-button:focus {
  box-shadow: 0 0 0 2px rgba(41, 118, 255, 0.3);
  background-color: inherit;
}

/* Dropdown button SVG icon color */
body.dark .dropdown-button svg {
  color: #ffffff;
  fill: #ffffff;
}

body.light .dropdown-button svg {
  color: #000000;
  fill: #000000;
}

/* -----END OF COMMON DROPDOWN BUTTON----- */











/* ----------------------------
CANCEL AND ACCEPT BUTTONS
------------------------------- */

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 24px;
}

/* Cancel button: gray text, neutral background */
.cancel-btn {
  color: #555555;
  border: 1px solid #888888;
  font-weight: 500;
  background: transparent;
  transition: background 0.18s, color 0.18s, border 0.18s;
  font-size: 14px;
  border-radius: 8px;
  flex: 1;
  padding: 6px 14px;
}

body.dark .cancel-btn {
  color: #bbbbbb;
  border: 1px solid #262631;
}

body.light .cancel-btn {
  color: #555555;
  border: 1px solid #cfcfd8;
}

.cancel-btn:hover,
.cancel-btn:active {
  background: rgba(200, 200, 200, 0.15);
  border-color: #2976ff;
  color: #2976ff;
}

/* Accept button: uses theme highlight color */
.accept-btn {
  font-weight: 500;
  font-size: 14px;
  border-radius: 8px;
  flex: 1;
  padding: 6px 14px;
}

/* Theme overrides */
body.dark .accept-btn {
  background: #2976ff;
  color: #fff;
  border: 1px solid #2976ff;
}
body.light .accept-btn {
  background: #2976ff;
  color: #fff;
  border: 1px solid #2976ff;
}

/* Button hover/focus for Accept (primary) */
.accept-btn:hover, .accept-btn:active {
  background: #1856c9;
  border-color: #1856c9;
}

/* -----END OF CANCEL AND ACCEPT BUTTONS----- */












/* ---------------------------------- 
COMMON INPUT AND PLACEHOLDER UI
-------------------------------------*/

/* Data Input Field Styles */
.data-input {
  width: 100%; 
  padding: 8px; 
  border-radius: 8px; 
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
  border: 1px solid transparent;
  outline: none; /* Remove default focus outline */
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  text-align: center;
}

/* Dark Mode: Input background, border, and text colors */
body.dark .data-input {
  background-color: #000000;
  border-color: #393943;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff; /* Safari text fill */
  caret-color: #ffffff;
}

/* Light Mode: Input background, border, and text colors */
body.light .data-input {
  background-color: #ffffff;
  border-color: #cfcfd8;
  color: #000000;
  -webkit-text-fill-color: #000000;
  caret-color: #000000;
}

/* Placeholder Text Color in Dark Mode */
body.dark .data-input::placeholder {
  color: #bbbbbb !important;
  opacity: 1 !important;
}

/* Placeholder Text Color in Light Mode */
body.light .data-input::placeholder {
  color: #7c7c7c !important;
  opacity: 1 !important;
}


/* Focus State: Highlight border and subtle glow */
.data-input:focus {
  border-color: #2976ff; /* UI accent blue */
  box-shadow: 0 0 0 2px rgba(41, 118, 255, 0.3); /* Blue glow */
  background-color: inherit;
}

/* Hide native number input spinners */
.data-input::-webkit-outer-spin-button,
.data-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.data-input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;
}

/* -----END OF COMMON INPUT UI----- */












/* ------------------------------------------ 
COMMON DRAG AND OBJECT/ITEM SELECT UI 
--------------------------------------------- */
/* no-emoji-shadow.css */
/* Ensures that all emojis added to the canvas have no shadow */
.accessibility-emoji,
.accessibility-stamp {
  box-shadow: none !important;
}

.draggable-canvas-item {
  border-radius: 0 !important;
}
/* -----END OF COMMON DRAG AND OBJECT/ITEM SELECT UI----- */














/* ----------------------------------------
FLOATINNG TOOLBAR UI
------------------------------------------- */

/* Floating Text Toolbar Styles */
#floating-text-toolbar.floating-toolbar-ui, 
.table-font-popup {
  z-index: 100000;
  padding: 6px 6px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  display: flex;
  gap: 6px;
  position: absolute;
  transition: background 0.18s, border 0.18s, box-shadow 0.18s;
}

/* Dark Mode Styling */
body.dark #floating-text-toolbar.floating-toolbar-ui,
body.dark .table-font-popup {
  background: rgba(25, 26, 29, 0.8);
  color: #ffffff;
  border: 1px solid rgba(38, 38, 49, 0.8);
}

/* Light Mode Styling */
body.light #floating-text-toolbar.floating-toolbar-ui,
body.light .table-font-popup {
  background: rgba(246, 247, 250, 0.8);
  color: #000000;
  border: 1px solid rgba(207, 207, 216, 0.8);
}




/* Toolbar Buttons */
#floating-text-toolbar .toolbar-button,
.font-toggle-button {
  box-sizing: border-box;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  padding: 0 0;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
}

/* Font label text span hover effect */
.font-label-text {
  transition: background 0.18s, color 0.18s;
  border-radius: 8px;
  padding: 0 8px;
  height: 32px;
  line-height: 32px;
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover and Active States */
#floating-text-toolbar .toolbar-button:hover,
.font-label-text:hover,
.font-toggle-button:hover,
.font-toggle-button:active,
#floating-text-toolbar .toolbar-button:active {
  background: rgba(41, 118, 255, 0.1);
  cursor: pointer;
}

/* Ensure toolbar icon text is visible in dark mode */
body.dark #floating-text-toolbar .toolbar-icon,
body.dark .font-toggle-button {
  color: #ffffff !important;
  background-color: transparent;
}

/* Ensure toolbar icon text is visible in light mode */
body.light #floating-text-toolbar .toolbar-icon,
body.light .font-toggle-button {
  color: #000000;
  background-color: transparent;
}


/* Red hover/active for delete button in floating text toolbar */
#floating-text-toolbar #delete-text-btn:hover,
#floating-text-toolbar #delete-text-btn:active {
  background: rgba(255, 59, 48, 0.12); /* iOS-style red hover */
  color: #ff3b30;
}
#floating-text-toolbar #delete-text-btn:hover svg,
#floating-text-toolbar #delete-text-btn:active svg {
  stroke: #ff3b30 !important;
  color: #ff3b30 !important;
}




/* Confirmation buttons to apply typeface in table */
.table-font-popup button {
  font-size: 13px;
  font-family: inherit;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  border: none;
  transition: background 0.18s, color 0.18s;
}

body.dark .table-font-popup button:first-child,
body.dark .table-font-popup button:last-child {
  background-color: #232429;
  color: #ffffff;
  border: 1px solid rgba(38, 38, 49, 1) !important; /* #262631 */
}

body.light .table-font-popup button:first-child,
body.light .table-font-popup button:last-child {
  background-color: #f6f7fa;
  color: #000000;
  border: 1px solid rgba(207, 207, 216, 1) !important; /* #cfcfd8 */
}



/* End of confirmation buttons to apply typeface in table */





/* Dropdown menu container ui style */
.toolbar-font-dropdown {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
  color: inherit;
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 99999;
  min-width: 160px;
  display: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  padding: 6px 0;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Dark Mode Styling */
body.dark .toolbar-font-dropdown {
  background: rgba(25, 26, 29, 0.8);
  color: #ffffff;
  border: 1px solid rgba(38, 38, 49, 0.8);
}

/* Light Mode Styling */
body.light .toolbar-font-dropdown {
  background: rgba(246, 247, 250, 0.8);
  color: #000000;
  border: 1px solid rgba(207, 207, 216, 0.8);
}



/* Dropdown item */
.toolbar-font-dropdown div {
  padding: 6px 6px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.13s, color 0.13s;
  margin: 0 6px;
}

.toolbar-font-dropdown div:active {
  background: rgba(41, 118, 255, 0.07);
}

/* Hover/focus */
.toolbar-font-dropdown div:hover,
.toolbar-font-dropdown div:focus-visible {
  background: #2976ff;
  color: #ffffff;
}


/* -----END OF FLOATINNG TOOLBAR UI----- *


















/* ----------------------------------------
LIQUIFIED BLUR EFFECTS
------------------------------------------- */

 /* common blur for most*/
 #accessibility-tools-container,
  .accessibility-popup,
  #emoji-popup,
  #accessibility-notes-popup,
  .stamp-wheel,
  #color-picker-popup,
  #table-popup,
  .custom-popup,
  #custom-table-popup,
  .tt-context-menu,
  #object-tracker-panel,
  .toolbar-font-dropdown,
  #floating-text-toolbar.floating-toolbar-ui, 
  .table-font-popup,
  .tracker-confirm-pop {
    transition: background 0.18s, color 0.18s, border 0.18s;
    backdrop-filter: blur(30px) saturate(1.8) brightness(1.03);
    -webkit-backdrop-filter: blur(30px) saturate(1.8) brightness(1.03);
    will-change: backdrop-filter;
    isolation: isolate;
  }


  /* Edge-only liquid intensifier (keeps border unchanged) */
  #accessibility-tools-container::after,
  .accessibility-popup::after,
  #emoji-popup::after,
  #accessibility-notes-popup::after,
  .stamp-wheel::after,
  #color-picker-popup::after,
  #table-popup::after,
  #custom-table-popup::after,
  .tt-context-menu::after,
  .custom-popup::after,
  #object-tracker-panel::after, 
  .toolbar-font-dropdown::after,
  #floating-text-toolbar.floating-toolbar-ui::after, 
  .table-font-popup::after,
  .tracker-confirm-pop::after {
    content: "";
    position: absolute;
    inset: 1px;                 /* sit just inside the 1px border */
    border-radius: inherit;
    pointer-events: none;       /* never block clicks */
    /* stronger, glassy blur only at the edge band */
    backdrop-filter: blur(38px) saturate(1.28) contrast(1.02) brightness(1.02);
    -webkit-backdrop-filter: blur(38px) saturate(1.28) contrast(1.02) brightness(1.02);
    will-change: backdrop-filter;
    /* ring mask: transparent center, solid near edges for a liquified rim */
    mask-image: radial-gradient(140% 140% at 50% 50%, rgba(0,0,0,0) 76%, rgba(0,0,0,0.85) 88%, rgba(0,0,0,1) 100%);
    -webkit-mask-image: radial-gradient(140% 140% at 50% 50%, rgba(0,0,0,0) 76%, rgba(0,0,0,0.85) 88%, rgba(0,0,0,1) 100%);
  }
/* End of Edge-only liquid intensifier (keeps border unchanged) */
  
/* -----END OF LIQUFIED BLUR EFFECTS----- *