/* core.css overrides */
#right-sidebar:not(.collapsed) { width: 335px !important; }








.hidden {
  display: none;
}

/* 3d.css */

/* Keep */
.hidden { display: none; }

/* --- Minimal utility set used by 3d.html (replaces Tailwind) --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.min-h-0 { min-height: 0; }
.relative { position: relative; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* If you still want the dark background used in the viewer area */
.bg-background-light { background: #1a1a1a; }

/* --- Viewer / iframe --- */
.viewer-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/*
  IMPORTANT: ensure the iframe can actually become 100% tall.
  This makes the chain of parents have a definite height.
*/
#viewer-container,
#viewer-container > .flex,
#viewer-container main,
#viewer-container main > .flex-1,
#viewer-container main > .flex-1 > .w-full,
#viewer-container main > .flex-1 > .w-full > .w-full {
  min-height: 0;
}







/*
  LAYERS MENU
*/

/* =========================================
   1. Variables & Reset
   ========================================= */
:root {
  /* Colors */
  --primary-color: rgb(38, 38, 39);
  --bg-light: rgb(247, 247, 247);
  --bg-card-content: rgb(243, 244, 246); /* gray-100 */
  --bg-active-preset: rgb(209, 213, 219); /* gray-300 */
  --bg-toggle-off: rgb(229, 231, 235); /* gray-200 */
  
  --text-main: rgb(17, 24, 39);
  --text-sub: rgb(107, 114, 128);
  --border-color: rgb(229, 231, 235);
  
  /* Specific Grade Colors */
  --grade1: rgb(252, 228, 4);
  --grade2: rgb(252, 158, 32);
  --grade3: rgb(220, 54, 117);
  --grade4: rgb(106, 0, 168);
  --cat-inf: rgb(255, 149, 43);
  --cat-ind: rgb(240, 62, 62);
}

#aside {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* =========================================
   2. Main Layout
   ========================================= */
.app-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.sidebar {
  padding-top: 1rem;
}

.section-title {
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 0.5rem;
}

/* =========================================
   3. Presets Section
   ========================================= */
.preset-container {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.preset-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  gap: 0.25rem;
}

.preset-icon-box {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-light);
  transition: background-color 0.2s;
}

.preset-icon-box.active {
  background-color: var(--bg-active-preset);
}

.preset-icon-box img {
  width: 2.5rem;
  height: 2.5rem;
}

.preset-label {
  font-size: 0.75rem;
  color: var(--text-main);
}

.preset-label.active {
  font-weight: 600;
  color: var(--primary-color);
}

/* =========================================
   4. Control Cards (Visibility)
   ========================================= */
.controls-section {
  margin-top: 1.5rem; /* Large gap from previous section */
}

.cards-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Gap between cards */
}

.control-card {
  padding: 1rem;
  border-radius: 0.75rem; /* rounded-xl */
  border-width: 1px;
  border-color: var(--border-color);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.card-title {
  font-size: 0.875rem; /* text-sm */
  font-weight: 600;
  color: var(--text-main);
}

.card-content {
  background-color: var(--bg-card-content);
  padding: 0.75rem;
  border-radius: 0.375rem; /* rounded-md */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Uniform spacing inside cards */
}

/* Disabled State Logic */
.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* =========================================
   5. Toggle Switch Component
   ========================================= */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 0.75rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.toggle-track {
  width: 2.25rem; /* w-9 */
  height: 1.25rem; /* h-5 */
  background-color: var(--bg-toggle-off);
  border-radius: 9999px;
  transition: all 0.15s ease-in-out;
  position: relative;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: white;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 50%;
  height: 1rem; /* h-4 */
  width: 1rem; /* w-4 */
  transition: all 0.15s ease-in-out;
}

/* Checked State */
input:checked + .toggle-track {
  background-color: var(--primary-color);
}

input:checked + .toggle-track::after {
  transform: translateX(100%);
  border-color: white;
}

/* Focus State (Accessibility) */
input:focus + .toggle-track {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
  outline: none;
}

/* =========================================
   6. Pill Buttons (Satellite/Elevation etc)
   ========================================= */
.pill-group-container {
  display: flex;
  align-items: center;
  /* Removed mb-2 to rely on card-content gap */
}

.pill-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem; /* text-xs */
  background-color: white;
  padding: 0.125rem;
  border-radius: 0.375rem;
}

.pill-btn {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-sub);
  font-family: inherit;
  font-size: inherit;
}

.pill-btn.active {
  background-color: rgb(75, 85, 99); /* #4B5563 */
  color: white;
}

/* =========================================
   7. Form Elements (Checkboxes & Rows)
   ========================================= */
.checkbox-row {
  display: flex;
  align-items: center;
}

.split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  height: 1rem; /* w-4 */
  width: 1rem;  /* h-4 */
  border-radius: 0.25rem;
  border: 1px solid var(--border-color);
  background-color: white;
  color: var(--primary-color);
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 0.5rem;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Default Checkbox Check Icon */
.custom-checkbox:checked {
  border-color: transparent;
  background-color: currentColor;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* Default Focused state */
.custom-checkbox:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-color);
}

.checkbox-label {
  font-size: 0.875rem; /* text-sm */
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Stack for multi-line labels (Mining) */
.label-text-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.subtext {
  font-size: 0.75rem;
  color: var(--text-sub);
  /* Removed margin-left because it's now a vertical stack */
}

/* Submenu indentation */
.submenu-indent {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* =========================================
   8. Colored Checkboxes & Focus Rings
   ========================================= */
/* Colors */
.custom-checkbox.grade-1 { color: var(--grade1); background-color: var(--grade1); }
.custom-checkbox.grade-2 { color: var(--grade2); background-color: var(--grade2); }
.custom-checkbox.grade-3 { color: var(--grade3); background-color: var(--grade3); }
.custom-checkbox.grade-4 { color: var(--grade4); background-color: var(--grade4); }
.custom-checkbox.cat-inf { color: var(--cat-inf); background-color: var(--cat-inf); }
.custom-checkbox.cat-ind { color: var(--cat-ind); background-color: var(--cat-ind); }

/* Ensure checkmark background matches */
.custom-checkbox.grade-1:checked,
.custom-checkbox.grade-2:checked,
.custom-checkbox.grade-3:checked,
.custom-checkbox.grade-4:checked,
.custom-checkbox.cat-inf:checked,
.custom-checkbox.cat-ind:checked {
   background-color: currentColor; 
}

/* Custom Focus Colors */
.custom-checkbox.grade-1:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--grade1); }
.custom-checkbox.grade-2:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--grade2); }
.custom-checkbox.grade-3:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--grade3); }
.custom-checkbox.grade-4:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--grade4); }
.custom-checkbox.cat-inf:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--cat-inf); }
.custom-checkbox.cat-ind:focus { box-shadow: 0 0 0 2px white, 0 0 0 4px var(--cat-ind); }

/* Text states for Grade lists */
.active-text { color: var(--text-main); }
.muted-text { color: var(--text-sub); }











/* Modal backdrop + card (Tailwind-equivalent) */
.af-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.50);
}

.af-modal{
  background: var(--popup-bg, rgba(255,255,255,.95));
  color: var(--popup-text, #1f2a37);
  border-radius: 12px;              /* ~ rounded-xl */
  box-shadow: var(--popup-shadow, 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10));
  padding: 24px;                    /* ~ p-6 */
  max-width: fit-content;           /* ~ max-w-fit */
  margin: 0 auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.af-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;              /* ~ mb-6 */
  gap: 16px;
}

.af-modal-title{
  font-family: "Space Grotesk", Inter, system-ui, -apple-system, sans-serif; /* match old font-display feel */
  font-size: 24px;                  /* ~ text-2xl */
  font-weight: 700;                 /* ~ font-bold */
  color: var(--popup-title, #111827);
}

.af-modal-close{
  border: 0;
  background: transparent;
  color: rgba(107,114,128,1);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.af-modal-close:hover{ background: rgba(15,23,42,.06); color: #0f172a; }

.af-modal-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;                        /* ~ gap-14 */
}
@media (min-width: 768px){
  .af-modal-grid{ grid-template-columns: 1fr 1fr; }
}

.af-modal-sectiontitle{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;                  /* ~ text-lg */
  font-weight: 700;
  margin-bottom: 16px;              /* ~ mb-4 */
  color: var(--popup-title, #111827);
}

.af-modal-row{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 18px 0;                   /* ~ space-y-4 */
}
.af-modal-label{
  width: 80px;                      /* ~ w-20 */
  flex: 0 0 80px;
  font-weight: 600;                 /* ~ font-semibold */
  color: var(--popup-muted, #6b7280);
}

















/* =========================
   Legends (no Tailwind) — tuned to match original (screenshot 2)
   ========================= */

.legend-stack{
  position:absolute;
  right:16px;
  bottom:16px;
  z-index:10;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

/* card */
.legend-card{
  background: var(--popup-bg, rgba(255,255,255,.95));
  color: var(--popup-text, #111827);
  border-radius: 14px;
  box-shadow: var(--popup-shadow, 0 10px 28px rgba(0,0,0,.18));

  padding: 12px;
  width: auto;

  /* keeps the chevron aligned like the original */
  display: block;
}

/* keep your existing min-heights, but don’t let them “push” layout weirdly */
.legend-card--tall{ min-height:172px; }
.legend-card--mid{  min-height:128px; }

/* THIS is what fixes screenshot #1 -> #2 (chevron on the right, top aligned) */
.legend-row-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 6px;
}

.legend-content{
  flex: 1 1 auto;
}

/* header */
.legend-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 6px;
}

.legend-title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 0;
  white-space: pre-line;
}

/* inner gray panel */
.legend-panel{
  width:124px;              /* matches original */
  background: #f3f4f6;       /* gray-100 */
  border-radius: 10px;
  padding: 10px;
}

.legend-subtitle{
  display:block;
  font-size: 14px;
  line-height: 1.2;
  margin: 0 0 10px 0;
  white-space: nowrap;
}

.legend-subtitle-strong{ font-weight: 700; }

/* list */
.legend-list{
  display:grid;
  gap: 6px;                 /* tighter, like original */
  font-size: 14px;
  line-height: 1.2;
}

.legend-item{
  display:flex;
  align-items:center;
}

.legend-item.is-disabled{
  color: #d1d5db;           /* gray-300 */
}

.legend-swatch{
  width:16px;
  height:16px;
  margin-right:8px;
  flex:0 0 16px;
}

.legend-swatch.circle{ border-radius: 9999px; }
.legend-swatch.square{ border-radius: 3px; }

/* chevron button */
.legend-toggle{
  border:0;
  background:transparent;
  color: rgba(107,114,128,1);
  padding: 2px;
  border-radius: 9999px;
  line-height: 0;
}

.legend-toggle--offset{
  /* mimics old Tailwind: ml-1 -mr-1.5 -mt-1.5 */
  margin-left: 4px;
  margin-right: -6px;
  margin-top: -6px;
}

.legend-toggle:hover{
  color: #111827;
  background: rgba(17,24,39,.06);
}

.legend-toggle-icon{
  font-size: 18px;
  line-height: 18px;
  display:inline-block;
}

/* grade/category colors */
.bg-grade1-normal{ background: rgb(252, 228, 4); }
.bg-grade2-normal{ background: rgb(252, 158, 32); }
.bg-grade3-normal{ background: rgb(220, 54, 117); }
.bg-grade4-normal{ background: rgb(106, 0, 168); }

.bg-inf-normal{ background: rgb(255, 149, 43); }
.bg-ind-normal{ background: rgb(240, 62, 62); }

/* light variants (disabled) */
.bg-grade1-light{ background: rgb(254, 249, 206); }
.bg-grade2-light{ background: rgb(254, 232, 202); }
.bg-grade3-light{ background: rgb(249, 223, 233); }
.bg-grade4-light{ background: rgb(242, 221, 255); }

.bg-inf-light{ background: rgb(255, 228, 201); }
.bg-ind-light{ background: rgb(252, 220, 220); }

/* dark mode support (assuming you toggle a .dark class) */
.dark .legend-card{
  background: rgba(55, 65, 81, .92);
  color: rgb(249, 250, 251);
}

.dark .legend-panel{
  background: rgba(31, 41, 55, .50);
}

.dark .legend-item.is-disabled{
  color: rgba(75, 85, 99, 1); /* gray-600 */
}

.dark .legend-toggle:hover{
  background: rgba(255,255,255,.08);
}

/* --- Collapsed legends: match original small square chips --- */

/* kill the tall pill look */
.legend-card.is-collapsed{
  padding: 0;              /* no internal padding */
  min-height: 0 !important;
  width: 38px;             /* square-ish like original */
  height: 38px;
  border-radius: 12px;     /* rounded square */
  display: grid;
  place-items: center;     /* center the chevron */
}

/* don’t apply the offset margins when collapsed */
.legend-card.is-collapsed .legend-toggle--offset{
  margin: 0 !important;
}

/* make the button fill the collapsed chip */
.legend-card.is-collapsed .legend-toggle{
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  display: grid;
  place-items: center;
}

/* slightly larger icon, like the original */
.legend-card.is-collapsed .legend-toggle-icon{
  font-size: 20px;
  line-height: 20px;
}

/* ensure content is not taking space when collapsed (even if x-show hiccups briefly) */
.legend-card.is-collapsed .legend-content,
.legend-card.is-collapsed .legend-header,
.legend-card.is-collapsed .legend-panel{
  display: none !important;
}