:root {
    --bg-pattern-image: url('/Images/PCBBackDrop.png');
    --bg-pattern-opacity: 0.015;
    --container-bg: #bbbbbb;
    --container-border: #ffffff00;
    --mobile-font-scale: 1.125;
}

html,
body {
    height: 100%;
    overscroll-behavior-y: none;
}

body { 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    min-height: 100dvh;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    background-color: #5a5a5a;
    background-image: linear-gradient(
        rgba(43, 43, 43, calc(1 - var(--bg-pattern-opacity))),
        rgba(43, 43, 43, calc(1 - var(--bg-pattern-opacity)))
    ), var(--bg-pattern-image);
    background-repeat: repeat;
    background-position: top left;
}

* {
    box-sizing: border-box; /* Global box-sizing */
}

header {
    background-color: #34495e;
    color: #ffffff;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

header .site-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.2;
}

header .site-title a {
    color: inherit;
    text-decoration: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.hamburger-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}

.hamburger-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hamburger-menu {
    position: relative;
}

.hamburger-menu-toggle {
    list-style: none;
}

.hamburger-menu-toggle::-webkit-details-marker {
    display: none;
}

.hamburger-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 160px;
    background: #ffffff;
    border: 1px solid #d7dde3;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    z-index: 100;
}

.hamburger-menu[open] .hamburger-menu-dropdown {
    display: block;
}

.hamburger-menu-dropdown a {
    display: block;
    padding: 0.55rem 0.75rem;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.9rem;
}

.hamburger-menu-dropdown a:hover {
    background: #f3f6f9;
}

footer {
    background-color: #1f1f1f;
    background-image: linear-gradient(
        rgba(31, 31, 31, calc(1 - (var(--bg-pattern-opacity) * 0.8))),
        rgba(31, 31, 31, calc(1 - (var(--bg-pattern-opacity) * 0.8)))
    ), var(--bg-pattern-image);
    background-repeat: repeat;
    background-position: top left;
    color: #e8edf3;
    padding: 1rem;
    text-align: center;
    margin-top: auto;
    width: 100%;
}

footer p {
    margin: 0 0 0.6rem 0;
}

footer button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    cursor: pointer;
}

footer button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.main-layout {
    display: flex;
    width: 100%;
}

.banner-column {
    width: 320px; /* 300px ad plus the 10px side padding of .banner-sticky */
    flex-shrink: 0;
    background-color: #1f1f1f;
    background-image: linear-gradient(
        rgba(31, 31, 31, calc(1 - (var(--bg-pattern-opacity) * 0.8))),
        rgba(31, 31, 31, calc(1 - (var(--bg-pattern-opacity) * 0.8)))
    ), var(--bg-pattern-image);
    background-repeat: repeat;
    background-position: top left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 20px;
    border-left: none;
    border-right: none;
}

.banner-sticky {
    position: sticky;
    top: 20px;
    width: 100%;
    padding: 0 10px;
}

.banner-ad-slot {
    width: 100%;
    min-width: 0;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate;
    background: transparent;
}

.ad-surface {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    contain: layout paint;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.banner-ad-slot .adsbygoogle {
    display: block !important;
    width: 300px !important;
    height: 600px !important;
    margin: 0 auto;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    position: relative;
    z-index: 0;
}

.bottom-ad-slot .adsbygoogle,
.home-ad-box .adsbygoogle {
    display: block !important;
    width: 100% !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    position: relative;
    z-index: 0;
}

.banner-ad-slot iframe,
.bottom-ad-slot iframe,
.home-ad-box iframe {
    display: block;
    background: #ffffff;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

.banner-column.left {
    order: 1;
}

.home-ad-box .ad-surface {
    height: 100%;
}

/* Empty ad boxes fade out, then leave the layout (script in views/partials/ads/loader.ejs):
   when Google marks a slot data-ad-status="unfilled", or the AdSense script
   fails to load (e.g. blocked). Side banners hide only the box (the dark side
   column stays, so the main content doesn't shift); the grid ad tile is removed.
   .banner-ad-slot forces opacity: 1 !important above, so these need !important. */
.banner-ad-slot,
.home-ad-box {
    transition: opacity 0.6s ease;
}

.banner-ad-slot.ad-fading,
.home-ad-box.ad-fading {
    opacity: 0 !important;
    pointer-events: none;
}

.banner-ad-slot.ad-hidden,
.home-ad-box.ad-hidden {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .banner-ad-slot,
    .home-ad-box {
        transition: none;
    }
}

.main-layout main {
    order: 2;
    flex: 1; 
    margin-inline: clamp(0px, 3.5vw, 100px);
    padding: 20px;
    min-width: 0; /* Allows flex item to shrink below content size */
    /* The test grid picks its layout from the width it actually gets (see "Dashboard layout modes"). */
    container: dashboard / inline-size;
}

.banner-column.right {
    order: 3;
}

.ad-row {
    width: 100%;
    background-color: #1f1f1f;
    background-image: linear-gradient(
        rgba(31, 31, 31, calc(1 - (var(--bg-pattern-opacity) * 0.8))),
        rgba(31, 31, 31, calc(1 - (var(--bg-pattern-opacity) * 0.8)))
    ), var(--bg-pattern-image);
    background-repeat: repeat;
    background-position: top left;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.bottom-ad-slot {
    width: 100%;
    max-width: 100%;
    background: transparent;
}

.ad-placeholder,
.banner-placeholder {
    align-items: center;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    border: 1px dashed #ced4da;
    position: relative; /* Ensure generated content is positioned correctly */
}

/* Show placeholder when empty OR when explicitly marked as empty by JS */
.ad-placeholder:empty::before,
.ad-placeholder.ad-empty::before,
.banner-placeholder:empty::before,
.banner-placeholder.ad-empty::before {
    background-color: #6c757d;
    border-radius: 5px;
    color: #fff;
    content: attr(data-placeholder-label);
    font: 12px sans-serif;
    padding: 5px 10px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* Moved inline styles for grid-container and resizable-box here */
.grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 10px;
    margin: 0;
}

.resizable-box {
    position: relative;
    display: flex;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    /* Initial size for 3x3 grid (approx 33.33% minus gap) */
    width: calc(33.3333% - 6.6667px);
    flex: 0 0 calc(33.3333% - 6.6667px);
    aspect-ratio: 1; /* Force square aspect ratio */
    background-color: transparent;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    font-size: clamp(0.8rem, 2vw, 1.5rem);
    color: #555;
    min-width: 100px;
    min-height: 100px;
    user-select: none; /* Prevent text selection during drag */
    overflow: hidden;
    box-sizing: border-box;
}

.resizable-box.box-touch-fill {
    aspect-ratio: auto;
    min-height: 360px;
}

.box-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: text;
    -webkit-user-select: text;
}

.box-content * {
    user-select: text;
    -webkit-user-select: text;
}

/* Help badge: top-right of each dashboard test, links to its dedicated tool page */
.tool-help {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 30;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3498db;
    color: #fff;
    font: 700 14px/22px Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    user-select: none;
    transition: background 0.2s;
}

.tool-help:hover,
.tool-help:focus-visible {
    background: #2c7fb8;
}

.tool-help-tip {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: max-content;
    max-width: 200px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #1f2d3d;
    color: #fff;
    font: 400 12px/1.4 Arial, sans-serif;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.tool-help:hover .tool-help-tip,
.tool-help:focus-visible .tool-help-tip {
    display: block;
}

/* Handles */
.resizer {
    position: absolute;
    z-index: 10;
}

/* Right Handle */
.resizer.r {
    top: 0; bottom: 0; right: -5px;
    width: 10px;
    cursor: col-resize;
}

/* Bottom Handle */
.resizer.b {
    left: 0; right: 0; bottom: -5px;
    height: 10px;
    cursor: row-resize;
}

/* Bottom-Right Handle */
.resizer.br {
    right: -5px; bottom: -5px;
    width: 15px; height: 15px;
    cursor: se-resize;
}

/* Visual cue on hover/active */
.resizable-box:hover .resizer, .resizer.resizing {
    background-color: rgba(0, 123, 255, 0.1);
}
.resizer.br::after {
    content: '';
    position: absolute;
    bottom: 5px; right: 5px;
    width: 6px; height: 6px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
}

/* ===================================================================
   Dashboard layout modes
   The home page grid is either in its designed arrangement (the widths in
   dashboardComponents, server.js) or one square test per row, never wrapped
   in between. The designed arrangement needs the grid area (main's content
   box) to be at least 780px wide; below that the camera tile, at 15%, would
   hit its 100px minimum and the rows would wrap.

   Side banners give way first so the grid keeps that width: both show from
   1590px, only the left one from 1250px, none below. (Each banner column is
   320px; main also has 3.5vw margins and 20px padding per side; media queries
   include the scrollbar, so there's 20px to spare for it.)
   =================================================================== */
@media (max-width: 1589px) {
    .banner-column.right {
        display: none;
    }
}

@media (max-width: 1249px) {
    .banner-column {
        display: none;
    }
}

@container dashboard (max-width: 779px) {
    .grid-container {
        padding: 12px;
    }

    .resizable-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 100% !important;
        min-height: 0 !important;
    }

    .resizable-box.box-touch-fill {
        aspect-ratio: auto !important;
        min-height: 60dvh !important;
    }
}

@media (max-width: 600px) {
    .ad-row {
        display: none; /* Hide wide banner on mobile */
    }
}

@media (orientation: portrait) {
    .grid-container {
        padding: 12px;
    }

    .resizable-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 100% !important;
        min-height: 0 !important;
    }

    .resizable-box.box-touch-fill {
        aspect-ratio: auto !important;
        min-height: 60dvh !important;
    }
}

/* Width cap: desktops with a touch screen can report a coarse pointer and no hover */
@media (pointer: coarse) and (hover: none) and (max-width: 1024px) {
    html {
        font-size: calc(1em * var(--mobile-font-scale));
    }

    .banner-column,
    .ad-row {
        display: none;
    }

    .main-layout main {
        padding: 1%;
    }

    .grid-container {
        gap: 12px;
        padding: 24px;
    }

    .resizable-box {
        width: 100% !important;
        flex: 0 0 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .resizable-box.box-touch-fill {
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
    }

    .box-content > [class$="-component"] {
        font-size: 1rem !important;
    }
}

/* ===================================================================
   Shared Content Page Container
   The light "paper" card used by any page whose content sits on top of
   the dark site background (privacy, components list, libraries,
   account, etc.) - defined once here instead of being redefined per page.
   =================================================================== */
.page-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px 30px 60px;
    background: #fff;
    border-radius: 8px;
    line-height: 1.6;
    color: #222;
}

.page-container h1 { margin-bottom: 0.25rem; }
.page-container h2 { margin-top: 2.2rem; border-bottom: 2px solid #eee; padding-bottom: 0.3rem; }
.page-container h3 { margin-top: 1.4rem; }
.page-container table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.page-container th, .page-container td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; font-size: 0.95rem; vertical-align: top; }
.page-container th { background: #f5f5f5; }
.page-container ul { padding-left: 1.4rem; }
.page-container code { background: #f1f1f1; padding: 1px 5px; border-radius: 3px; }

/* ===================================================================
   Shared "Back to Home"-style link button, used on pages that link back
   out of a sub-page (components list, libraries, etc.).
   =================================================================== */
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #667eea;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

/* Click-to-reveal email button (public/scripts/protected-email.js), styled as a link. */
.protected-email {
    padding: 0;
    border: none;
    background: none;
    color: #1a5fb4;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.back-link:hover {
    background: #5568d3;
}