:root {
  --bg-white: #fff;        /* Was:#0f172a slate-900 */
  --bg-grey: #F0F0F0;        /* Was:#686b8b slate-900 */
  --bg-dark: #111827;        /* Was:#0f172a slate-900 */
  --bg-blue: #147ae8;        /* Was:#0f172a slate-900 */
  --panel: #147ae8;     /* Was:#111827 gray-900 */
  --text-white: #fff;      /*  */
  --text-light: #e5e7eb;      /* gray-200 */
  --text-gray: #686b8b;      /* from Q360 */
  --text-dark: #14142a;      /* from Q360 */
  --muted: #111827;     /* Was:#9ca3af gray-400 */
  --accent: #38bdf8;    /* sky-400 */
  --accent-2: #22d3ee;  /* cyan-400 */
  --header-h: 84px;
  --footer-h: 44px;
  --sidebar-w: 280px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body { 
  margin: 0; 
  background: var(--bg-white); 
  color: var(--text-dark); 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 
}

h1, h2, h3, h4 {
  margin-bottom: 4px; 
}

h4 {
  text-decoration: underline; /* Adds an underline to the text */
  font-weight: normal; /* Optional: keep it bold */
  font-size: 18px; /* or any size you want */
}

p, ul, ol, li {
  margin-top: 4px;
  margin-bottom: 4px; 
  line-height: 1.2; /* 1.5 times the font size */}

/* Layout (Landing page) */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  min-height: 100vh;
}

/* Sticky top section */
.site-header {
  grid-area: header;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap;                /* NEW: allow wrapping */
  gap: 12px;                      /* NEW: spacing when wrapped */
  padding:12px 18px;
  background: var(--bg-grey);
  border-bottom:1px solid #1f2937;
  position: sticky; top: 0; z-index: 1000;
}
.brand { display:flex; align-items:center; gap: 28px; min-width: 0;}
.logo { width: clamp(96px, 12vw, 186px); height: auto; object-fit: contain; }
.subtitle { color: var(--bg); margin:4px 0 0; }

.search input {
  width: clamp(180px, 40vw, 320px);  /* NEW: responsive width */
  max-width: 45vw;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: var(--bg-white);
  color: var(--text-dark);
}

.site-header .titles {
  min-width: 0;                    /* NEW */
}

.site-header .titles h1 {
  margin: 0;           /* Remove default bottom margin */
  line-height: 1.2;    /* Optional: tighten vertical spacing */
  font-size: clamp(1rem, 2.5vw, 2rem); /* NEW: scale down on small screens */
  white-space: normal;             /* ensure wrapping */
  overflow-wrap: anywhere;         /* helps avoid overflow */
}

.site-header .subtitle {
  margin: 2px 0 0;     /* Small gap above subtitle */
  font-size: clamp(0.85rem, 2vw, 1rem);   /* NEW: responsive size */
  color: var(--text-dark);
}

/* Menu (left) */
.sidebar {
  grid-area: sidebar;
  padding:20px; border-right:1px solid #1f2937; background:var(--bg-grey);
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h) - var(--footer-h));
  overflow: auto;
}
.sidebar h2 { margin:0 0 8px; font-size:1.1rem; }
.sidebar .muted { color: var(--muted); margin: 16px 0 6px; font-size: .95rem; }
.sidebar ul { list-style:none; padding:0; margin:8px 0; }
.sidebar a { display:block; padding:8px 10px; color: var(--text-light); text-decoration: none; border-radius:6px;}
.sidebar a:hover { background:Var(--bg-blue); }
.sidebar a.is-active { color:#fff; background:Var(--bg-blue); border:1px solid #334155; }
.sidebar ul.sub a { color: var(--accent); }


/* Sidebar container is already sticky in your layout; these focus on spacing/visuals */
.sidebar .menu-root {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-group {
  margin-bottom: 4px;
}

/* details/summary for foldable Org section */
.sidebar details {
  border: 1px solid #1f2937;
  border-radius: 8px;
  background: var(--bg-white);
  padding: 6px 10px 4px;   /* top right/left bottom (was 6px 10px) */
}

.sidebar summary {
  cursor: pointer;
  list-style: none; /* hide default triangle in some browsers */
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 2px 2px;        /* was 4px 2px: tighter header line */
  line-height: 1.2;
}

/* Custom chevron indicator */
.sidebar summary::before {
  content: "▸";
  display: inline-block;
  transform: rotate(90deg);   /* starts as open */
  transition: transform 0.2s ease;
  color: var(--muted);
}
.sidebar details[open] summary::before {
  transform: rotate(90deg);
}
.sidebar details:not([open]) summary::before {
  transform: rotate(0deg);
}

/* Submenu list */
.sidebar .menu-sub {
  list-style: none;
  margin: 4px 0 0;
  padding-left: 16px;                 /* <— the indent */
}

/* Ensure the first submenu item doesn’t add extra top spacing */
.sidebar .menu-sub li:first-child {
  margin-top: 0;         /* keep the first item snug under the header */
}

/* Submenu items: tighten spacing */
.sidebar .menu-sub li {
  margin: 0px 0;
}

/* Link styles */
.sidebar .menu-sub a.menu-link {
  display: block;
  padding: 0px 10px;
  font-size: 0.95rem;
  color: var(--accent);
}

.sidebar a.menu-link:hover {
  background: Var(--bg-grey);
  border: 1px solid #334155;
}

.sidebar a.menu-link.is-active {
  color: #fff;
  background: Var(--bg-grey);
  border: 1px solid #334155;
}

/* Slightly smaller text for submenu items */
.sidebar .menu-sub a.menu-link {
  color: var(--text-dark);
  font-size: 0.95rem;
}


/* Content area (iframe) */
.content {
  grid-area: content;
  padding: 0;
  height: calc(100vh - var(--header-h) - var(--footer-h));
  background: #fff;
}
#contentFrame {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;   /* Was: #0b132b */
}

/* Sticky footer */
.site-footer {
  grid-area: footer;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-dark);
  color: var(--bg-grey);
  border-top:1px solid #1f2937;
  position: sticky; bottom: 0; z-index: 1000;
}

/* Shared elements for the inner doc pages (admin.html / mgp.html) */
.doc-page { margin:0; }
article { padding: 20px; }
article header h1 { margin:0 0 6px; }
article .muted { color: var(--muted); }
section { margin: 24px 0 40px; padding-bottom:12px; border-bottom:1px dashed #374151; }
h2 { font-size:1.3rem; margin:0 0 10px; }
ul, ol { line-height:1.6; }
.screenshot { margin:16px 0; text-align:center; }
.screenshot img { max-width: 100%; border-radius:8px; border:1px solid #1f2937; }

/* MP4 demo video styling */

/* Make <video> look like your screenshots */
.screenshot video,
.demo-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #1f2937;
  background-color: #000;
  object-fit: cover; /* keeps aspect ratio while filling container nicely */
}

/* Caption consistency */
.screenshot figcaption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

/* Two-column content layout inside sections */
.two-col {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px); /* text grows, media has a comfy fixed-ish width */
  align-items: start;
  gap: 20px 28px; /* row gap, column gap */
  margin-top: 8px; /* small space under h2 */
}

/* Make sure long code/links don’t overflow in the text column */
.two-col .col-text {
  min-width: 0;
}

/* Keep media nicely constrained */
.two-col .col-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Utilities */
.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;
}

/* Responsive */
@media (max-width: 900px) {
  /* existing rules stay */
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) auto var(--footer-h);
    grid-template-areas:
      "header"
      "content"
      "footer";
  }
  .sidebar { display:none; }
  .search input { width: 60vw; }
  .logo { width: 96px; }

  /* NEW header responsiveness */
  .site-header {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  .brand {
    flex: 1 1 100%;
    gap: 12px;
  }

  .search {
    flex: 1 1 100%;
    order: 2;
  }

  .search input {
    width: 100%;
    max-width: none;
  }

  .site-header .subtitle {
    display: none; /* optional */
  }
}

/* Add a subtle sticky effect for the GIF on taller sections */
@media (min-width: 1100px) {
  #org-basic-settings .col-media {
    position: sticky;
    top: calc(var(--header-h) + 16px); /* keeps it visible while scrolling the section */
  }
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr; /* single column */
  }
  .two-col .col-media {
    order: 2;            /* keep GIF below text */
    margin-top: 8px;
  }
}