/* =========================
   THEME VARIABLES
   ========================= */
:root {
  /* Panel Loader theme vars (LIGHT defaults) */
  --insert-heading: #fff44f;
  --internal: #FB2C36;

  /* Global palette you were using */
  --light1: #fff; --dark1: #000; --dark2: #2d2d2d; --dark3: #424949;
  --blue1: #003366; --blue2: #0067a5; --blue3: #4997d0; --blue4: #98AFC7;
  --green0: #003300; --green1: #186a3b; --green2: #27ae60; --green3: #C4D600;
  --orange1: #ff4500; --orange2: #ffa500; --coral1: #FF7F50; --red1: #C0392B; --red2: #943126;
  --yellow1: #F4D03F; --yellow2: #fff44f; --yellow3: #e8f48c; --yellow4: #f4d03f;
  --cyan1: #b9dcd2; --gray1: #53565A; --gray2: #aaa; --gray3: #e5e4e2;
  --olive0: #336600; --olive1: #558b2f; --olive2: #669933; --purple1: #af7ac5;

  --text-shadow-light: #fff 1px 1px 1px; --text-shadow-dark: #000 1px 1px 1px;
}

/* Auto dark (when user hasn't set a manual theme) */
@media (prefers-color-scheme: dark) {
  :root {
    --pl-bg: #0f0f10;
    --pl-fg: #ffffff;
  }
}

:root[data-theme="dark"] {
  --font-color: #FFF;
  --font-textsh: #000;
  --font-bg: #000;
  --pl-bg: #00853E; 
  --pl-fg: #FFF;
  --pl-text-shadow: #000 1px 1px 2px;
  --pl-fg-hover: #53EAFD;
  --pl-fg-active: #FF5722;
  --pl-modal-bg: #2E7D32;
  --pl-modal-fg: #FAFAFA;
  --pl-modal-text-shadow: #000 1px 1px 2px;

  --panel-bg: #90A1B9;

  --pl-item-bg: #689F38; /*#546E7A*/ 
  --pl-item-bg-hover: #FFF176; 
  --pl-item-bg-active: #FF5722;
  --pl-item-fg: #fff; 
  --pl-item-fg-hover: #000; 
  --pl-item-fg-active: #FFF; 
  --pl-item-text-shadow: #000 1px 1px 2px;
  --pl-item-text-shadow-fg-hover: #fff 1px 1px 2px;
  --pl-item-text-shadow-fg-active: #000 1px 1px 2px;
  
  --pl-item-brd: rgba(255,255,255,0.25);
  --pl-backdrop: rgba(0,0,0,0.55);
  --pl-modal-fg-shadow: #000 1px 1px 2px;

  --pl-text-shadow-fg-hover: #000 1px 1px 2px;
  --pl-text-shadow-fg-active: #000 1px 1px 2px;
  --pl-theme-toggle-bg: #FFF;
  --pl-theme-toggle-fg: #FFA000;
  --pl-theme-toggle-brd: #99A3A4;
  --pl-theme-toggle-box: rgba(0,0,0,0.25);
  --pl-theme-toggle-hover: #5D6D7E;
  --pl-theme-toggle-fg-active: #FFF176;
  --pl-theme-toggle-active: #FF5722;

  --pl-header-bg: #546E7A;
  --pl-header-txt: #fff;
  --pl-header-shadow: #000 1px 1px 2px;
  --pl-headersm-bg: #F57F17;
  --pl-headersm-txt: #fff;
  --pl-headersm-shadow: #000 1px 1px 2px;
}

/* Manual override via data-theme (set by JS) */
:root[data-theme="light"] {
  --font-color: #000;
  --font-textsh: #FFF;
  --font-bg: #FFF;
  --pl-bg: #FFF;
  --pl-fg: #00853E;    
  --pl-text-shadow: #FFF 1px 1px 2px;
  --pl-fg-hover: #53EAFD;
  --pl-fg-active: #FB2C36;
  --pl-modal-bg: #EEE;
  --pl-modal-fg: #424242;
  --pl-modal-text-shadow: #FFF 1px 1px 2px;

  --panel-bg: #90A1B9;

  --pl-item-bg: #689F38; /*#546E7A*/ 
  --pl-item-bg-hover: #FFF176; 
  --pl-item-bg-active: #FF5722;
  --pl-item-fg: #fff; 
  --pl-item-fg-hover: #000; 
  --pl-item-fg-active: #FFF; 
  --pl-item-text-shadow: #000 1px 1px 2px;
  --pl-item-text-shadow-fg-hover: #fff 1px 1px 2px;
  --pl-item-text-shadow-fg-active: #000 1px 1px 2px;
  

  --pl-item-brd: rgba(255,255,255,0.25);
  --pl-backdrop: rgba(0,0,0,0.55);
  --pl-modal-fg-shadow: #000 1px 1px 2px;

  --pl-text-shadow-fg-hover: #000 1px 1px 2px;
  --pl-text-shadow-fg-active: #000 1px 1px 2px;
  --pl-theme-toggle-bg: #000;
  --pl-theme-toggle-fg: #FFA000;
  --pl-theme-toggle-brd: #99A3A4;
  --pl-theme-toggle-box: rgba(0,0,0,0.25);
  --pl-theme-toggle-hover: #5D6D7E;
  --pl-theme-toggle-fg-active: #FFF176;
  --pl-theme-toggle-active: #FF5722;

  --pl-header-bg: #546E7A;
  --pl-header-txt: #fff;
  --pl-header-shadow: #000 1px 1px 2px;
  --pl-headersm-bg: #F57F17;
  --pl-headersm-txt: #F2F3F4;
  --pl-headersm-shadow: #000 1px 1px 2px;
}

:root, [data-theme] { color-scheme: dark light; }

/* =========================
   PAGE BASICS
   ========================= */
html, body {
  background-color: var(--pl-bg);
  color: var(--pl-fg);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  margin: 0;
  padding: 0;
  height: auto;
}

body { display: block; width: 100%; max-width: none; overflow-y: auto; overflow-x: hidden; -webkit-font-smoothing: auto; -webkit-text-size-adjust: 100%; 
  -moz-osx-font-smoothing: auto; font-optical-sizing: auto; font-style: normal; }

.dashboard_title {
  text-align: left; width: 100%; max-width: 100%; margin: 1rem 0 .5rem 0;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  line-height: 1.2;
  text-shadow: var(--pl-text-shadow);
  margin: 1.5rem 0;
}

.dashboard_title_row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

.dashboard_title_row .dashboard_title {
  margin: 0;
  width: auto;
}

.dashboard_edit_link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--pl-fg);
  text-shadow: var(--pl-text-shadow);
  font-weight: 600;
}

.dashboard_edit_link img {
  display: block;
  width: 1rem;
  height: 1rem;
}

.dashboard_edit_link:hover {
  color: var(--pl-fg-hover);
}

.dashboard_subtitle {
  text-align: left; width: 100%; max-width: 100%; margin: 1rem 0 .5rem 0;
  font-size: clamp(1.15rem, 1.15vw + 0.2rem, 1.35rem);
  line-height: 1.2;
  text-shadow: var(--pl-text-shadow);
}

.dashboard_description {
  text-align: left; width: 100%; max-width: 100%; margin: 0 0 1rem;
  font-size: clamp(.85rem, .85vw + 0.25rem, 1rem);
  line-height: 1.4;
  text-shadow: var(--pl-text-shadow);
}

.dashboard_container {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  box-sizing: border-box; margin: auto; width: 90%; 
  height: auto;              /* was: height: 100% (or 100vh in older versions) */
  margin-top: 0rem;       /*   min-height: 62vh; keep full-viewport minimum without forcing a cap */
  margin-bottom: 1.5rem;
  }

.container {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  box-sizing: border-box; margin: auto; width: 90%; 
  height: auto;              /* was: height: 100% (or 100vh in older versions) */
  }

.container h1 {
  text-shadow: var(--pl-modal-text-shadow);
}

/* Panel grid root */
#panel, .dashboard-panel-root {
  --col-gap: 1rem;
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
  gap: 0rem var(--col-gap); box-sizing: border-box; width: 100%; margin: .5rem 0;
}

/* =========================
   PANEL CARDS
   ========================= */
.panel_container {
  display: flex;
  flex: 0 0 calc((100% - (9 * var(--col-gap))) / 10);
  width: calc((100% - (9 * var(--col-gap))) / 10);
  max-width: calc((100% - (9 * var(--col-gap))) / 10);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 0; margin: 0; gap: .5rem 0; box-sizing: border-box; color: var(--pl-fg);
  z-index: 1;
  min-width: 0; /* allow children to shrink */
  container-type: inline-size;
}

/* Phones */
@media (max-width: 599.98px) {
  .panel_container {
    /* 2 columns → 1 gap across the row */
    flex: 0 0 calc((100% - (1 * var(--col-gap))) / 2);
    max-width: calc((100% - (1 * var(--col-gap))) / 2);
    min-width: 0; /* keep text from overflowing */
  }
}

/* Tablets (all iPads + most Android tablets) */
@media (min-width: 600px) and (max-width: 1400px) {
  .panel_container {
    /* 5 columns → 4 gaps across the row */
    flex: 0 0 calc((100% - (4 * var(--col-gap))) / 5);
    max-width: calc((100% - (4 * var(--col-gap))) / 5);
    min-width: 0;
  }
}

/* Large screens remain at your current 10 columns (no change needed) */

.panel_image_container {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 1rem 1rem; margin: 0; border-radius: 10px;
  background-color: var(--panel-bg); color: var(--panel-fg); text-shadow: var(--pl-modal-fg-shadow); 
  width: 100%; max-width: 100%; cursor: pointer; aspect-ratio: 1 / 1;
}
.panel_image_container:hover { background-color: var(--pl-fg-hover); }
.panel_image_container:active { background-color: var(--pl-fg-active); }
/* link-mode keeps appearance */
.panel_image_container a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}


.panel_image {
  display: block;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 10px; background-clip: padding-box;
}

.panel_name_container {
  text-align: center; width: 100%; max-width: 100%; margin: .25rem auto .5rem;
  min-width: 0;
  container-type: inline-size;
}
.panel_name {
  margin: 0;
  /* Responsive, won’t overflow */
  font-size: clamp(0.75rem, 6cqw, 1rem);
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-shadow: var(--pl-text-shadow);
  font-weight: 400;
}

/* =========================
   MODAL
   ========================= */
.panel_modal-backdrop {
  position: fixed; inset: 0; background: var(--pl-backdrop);
  z-index: 9998; opacity: 0; transition: opacity 180ms ease-out;
}
.panel_modal-backdrop--visible { opacity: 1; }

/* AFTER */
.panel_modal {
  position: fixed;
  z-index: 9999;
  background: var(--pl-modal-bg);
  color: var(--pl-modal-fg);
  text-shadow: var(--pl-modal-text-shadow);
  border-radius: 12px;
  /* key changes ↓ */
  display: flex;
  flex-direction: column;
  overflow: hidden;               /* was: auto */
  /* existing styles 
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
  border: 1px solid var(--pl-item-brd); */
  border: none;  
}

/* Scrollable modal body, but NO visible scrollbar */
.panel_modal-content{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 0 1rem 1rem 1rem;
  container-type: inline-size;

  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto;      /* keep scrolling */
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch; /* smoother iOS */
  scrollbar-width: none;             /* Firefox: hide scrollbar */
  -ms-overflow-style: none;          /* old Edge/IE: hide scrollbar */
}

/* Chromium/Safari/WebKit: hide scrollbar */
.panel_modal-content::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* Keep your existing sticky header; no change needed */
.panel_modal-header {
  padding: 0.5rem 0rem 0.25rem 0;      /* ensure the header itself has space */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pl-modal-bg);
 /* border-top: 1px solid var(--pl-item-brd); */
  box-sizing: border-box;
  width: 100%; max-width: 100%;

  }

.panel_modal-header h1,
.panel_modal-header h2,
.panel_modal-header h3,
.panel_modal-header h4,
.panel_modal-header h5,
.panel_modal-header h6 {
  margin: 0;
  padding: 0;
}

.panel_modal-header h3 {
  padding: .5rem 1rem;
  background-color: var(--pl-header-bg);
  border-radius: 4px;
  color: var(--pl-header-txt);
  text-shadow: var(--pl-header-shadow);
}

.panel_modal-title {
  margin: 0;                 /* make sure no margin leaks in */
  padding: 0.5rem 1rem;      /* controlled spacing inside header */
  border-top: none;   
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw + 0.6rem, 1.6rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.model_close {
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  padding: .5rem;
/*  padding: 0.15rem 0.65rem 0.15rem 0.55rem;*/
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red1);
  color: var(--light1);

  /* Responsive font size */
  font-size: clamp(1rem, 1vw + .25rem, 1.25rem);
  line-height: 1;
  text-shadow: var(--text-shadow-dark);
}

.model_close:hover { background: var(--yellow4); color: var(--dark1); text-shadow: var(--text-shadow-light); }

/* Modal items grid */
.panel_modal-items {
  display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0;
}

@media (max-width: 599.99px) { .panel_modal-items { grid-template-columns: 1fr 1fr; } .panel_modal {width: 900%; max-width: 90%;} .pl-theme-toggle { position: fixed; top: .25rem; right: .25rem; padding: 0.5rem; }}
@media (min-width: 600px) and (max-width: 1400px) { .panel_modal-items { grid-template-columns: 1fr 1fr 1fr;} .panel_modal {width: 900%; max-width: 90%;} .pl-theme-toggle { position: fixed; top: .5rem; right: .5rem; padding: 0.5rem; }}
@media (min-width: 1400px) { .panel_modal-items { grid-template-columns: 1fr 1fr 1fr;} .panel_modal {width: 900%; max-width: 90%;} .pl-theme-toggle { position: fixed; top: 1rem; right: 1rem; padding: 0.5rem; }}

/* =========================
   CLONE TILES (LINK ITEMS)
   ========================= */
.item_clone {
  background: var(--pl-item-bg);
  color:  var(--pl-item-fg);
  border: 1px solid var(--pl-item-brd);
  border-radius: 10px; overflow: hidden; transition: transform 120ms ease;
  text-shadow: var(--pl-item-text-shadow); font-weight: 400; font-size: 1rem;
}
.item_clone:hover { background: var(--pl-item-bg-hover); color: var(--pl-item-fg-hover); text-shadow: var(--pl-item-text-shadow-fg-hover)}
.item_clone:active { background: var(--pl-item-bg-active); color: var(--pl-item-fg-active); text-shadow: var(--pl-item-text-shadow-fg-active)}

.item_clone a { display: block; text-decoration: none; color: inherit; padding: 0.75rem; }
.item_url { display: block; }
.item_name {
  font-weight: 600;
  word-break: break-word;

  /* Responsive text size, matches .panel_name style */
  font-size: clamp(0.75rem, 0.4vw + 0.65rem, 1rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Headings/paras inside inserts: tidy margins */
.panel_modal-items h1,
.panel_modal-items h2,
.panel_modal-items h3,
.panel_modal-items h4,
.panel_modal-items h5,
.panel_modal-items h6 { line-height: 1; margin: .25rem 0; padding: 0; }
.panel_modal-items p { line-height: 1; margin: .5rem 0 .5rem 0; padding: 0; }
.panel_modal-items hr { line-height: 1; margin: .5rem 0 0 0; padding: 0; }

/* =========================
   INSERT BLOCKS
   ========================= */
/* Full-row wrapper for both <INSERT> and <INSERT-INLINE> */
.item_insert {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 100%;
  background: transparent; border: none; padding: 0; margin: 0;
  p { font-size: 1.25rem; margin-bottom: .75rem; color: var(--pl-headersm-txt); text-shadow: var(--pl-headersm-shadow); background: var(--pl-headersm-bg); width: fit-content; padding: .5rem .9rem .65rem .75rem; border-radius: 4px;}
}

/* Inline variant: children side-by-side inside this full row */
.item_insert-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
/* Optional helpers for your content tags */
.item_insert .standard { color: var(--insert-heading); }
.item_insert .internal { color: var(--internal); }
.item_insert .heavy    { font-weight: 600; }

/* =========================
   THEME TOGGLE BUTTON
   ========================= */
.pl-theme-toggle {
  z-index: 10010;
  padding: 0.5rem 0.5rem 0.7rem 0.5rem;
  border-radius: 999px;
  font-size: 1.25rem;
/*font: inherit; */
  font-weight: 600;
  cursor: pointer;
  line-height: 1rem;
  border: 1px solid var(--pl-theme-toggle-brd);
  background: var(--pl-theme-toggle-bg);
  color: var(--pl-theme-toggle-fg);
  box-shadow: 0 4px 18px var(--pl-theme-toggle-box); 
}
/* Icon control */
/* Default (no data-theme set yet) – assume we'll switch to dark */
/* Default: assume dark is active → show sun (tap = go light) */
.pl-theme-toggle::before {
  display: inline-block;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  content: "🔆︎";
  color: var(--pl-theme-toggle-fg);
}

/* When LIGHT is active → show moon (tap = go dark) */
:root[data-theme="light"] .pl-theme-toggle::before {
  content: "🔆︎";
  color: var(--pl-theme-toggle-fg);
}

/* When we're in DARK mode: show SUN (click → light) */
:root[data-theme="dark"] .pl-theme-toggle::before {
  content: "🔆︎";
  color: var(--pl-theme-toggle-fg);
}

.pl-theme-toggle:hover { background: var(--pl-theme-toggle-hover); }
.pl-theme-toggle:active { background: var(--pl-theme-toggle-active); color: var(--pl-theme-toggle-fg-active); }
/*{ filter: brightness(1.05); }*/

#supportDiv{
  position: fixed;
  left: 3.5%; /* left: 5%; right: 76px; */
  bottom: 2px; /* bottom: 32px */
  z-index: 9999;
}

/* The pill container */

.support_info {
  background-color: #F1F3F3;
  border: none; /*1px solid #00853e; */
  border-radius: 4px;
  padding: .5rem .5rem;
  /* box-shadow: #5EA529 0 0 5px 2px; */
  /* key bits */
  display: inline-flex;     /* shrink-wrap to content */
  gap: .5rem;               /* spacing between badges */
  align-items: center;
  white-space: nowrap;      /* never wrap badges */
  width: auto;              /* override your 25% */
  margin: 0 0 0 2rem;                /* don't auto-center a fixed element */
}

.support_info a {
  text-decoration: none;
}

/* Badges */
.support_left,
.support_right{
  display: inline-block;
  font-weight: 600;
  padding: .1rem .25rem;
  font-size: 1rem;
  margin: 0;
  border: 1px solid #53565A;
  width: fit-content;
}

.support_left {
  border: none;
}

.support_right {
  border: none;
}

/* base */
.support_left a,
.support_right a {
  color:#fff;
  text-shadow:#000 1px 1px 2px;
}

/* DIV hover: make link match your A:hover styling */
.support_left:hover a{
  color:#000;
  text-shadow:yellow 1px 1px 2px;
}
.support_right:hover a{
  color:yellow;
  text-shadow:#000 1px 1px 2px;
}

/* keep your backgrounds */
.support_left { background-color: rgb(80, 158, 47); border-radius: 4px; }
.support_left:hover { background-color: yellow; }

.support_right { background-color: #525252; border-radius: 4px; }
.support_right:hover { background-color: #000; }

/* Critical: allow grid/flex children to shrink instead of forcing overflow */
.panel_modal-items,
.item_clone,
.item_insert,
.item_insert-inline{
  min-width: 0;
}

/* Ensure links/text don't create horizontal overflow */
.item_clone a,
.panel_modal-title{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.panel_modal-content {
  scrollbar-gutter: stable; /* optional, keeps layout stable in supporting browsers */
}

/* Hide page header while a modal is open */
body.pl-modal-open .container {
  visibility: hidden;
  pointer-events: none;
}


/* Mobile styles */
@media (max-width: 768px) {
container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin: auto;
    width: 90%;
    height: 2rem;
}

h1 {
   text-align: center;
   margin: .65rem auto 0 auto;
   font-size: 1.25rem;

}

.support_info {
  background-color: #F1F3F3;
  border: none; 
  border-radius: 4px;
  padding: .5rem .5rem;
  display: inline-flex;     
  gap: .5rem;              
  align-items: center;
  white-space: nowrap;     
  width: auto;              
  margin: 1rem auto 0 auto;
  text-align: center;                
}

.dashboard_container {
margin-top: .5rem;
}

.panel_modal {
  inset: 2rem 1rem 2rem 1rem !important; /* placement on screen */
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
}

.panel_modal-header {
  padding: 0.5rem 0rem 0.25rem 0rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pl-modal-bg);
  box-sizing: border-box;
  width: auto;
}

.support_left,
.support_right{
  font-size: .75rem;
}

.model_close {
  font-size: 2rem!important;
}

}