/* ═══════════════════════════════════════════════
   HFA_STYLES.css
   Huemanity for ALL — Main Stylesheet
   All class names are fully descriptive.
═══════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════
   CSS VARIABLES — change these to restyle the app
═══════════════════════════════════════════════ */
:root {
    --background-color:       #2a0045;
    --surface-color:          purple;   /* panels, cards */
    --surface-color-mid:      indigo;   /* inputs, selects */
    --surface-color-dark:     #46076d;   /* nav bar, deepest bg */
    --border-color:           #AF0A5F;   /* active / accent borders */
    --border-color-dim:       #00dd58;   /* subtle borders */
    --text-color:             #00dd58;   /* main body text — neon green */
    --text-color-dim:         rgb(255, 255, 255);   /* secondary / label text */
    --text-color-muted:       #ffffff;   /* placeholder / hint text */
    --accent-color: purple;   /* primary accent — indigo/purple */
    --accent-color-hot:       #AF0A5F;   /* stronger accent for highlights */
    --button-bg-color:        indigo;   /* button background */
    --button-text-color:      #ffffff;   /* button foreground text */
    --border-radius:          16px;      /* standard corner rounding */
    --font-body:              'Roboto', Ubuntu, Arial, monospace;
    --font-display:           'Arial', monospace;  /* used for popup titles */

    /* Font sizes — kept large for accessibility */
    --font-size-small:        22px;
    --font-size-medium:       26px;
    --font-size-large:        32px;
    --font-size-xlarge:       42px;

    /* ── Per-surface customization — GLOBAL TIER ──────────────────────────
       Readable name for the whole-app panel default. It simply reads from
       --surface-color, so changing the theme still flows through here.
       Per-tab and per-card layers fall back to this when they are unset. */
    --app-background-default: var(--surface-color);
}


/* ═══════════════════════════════════════════════
   RESET — zero out browser default spacing
═══════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}


/* ═══════════════════════════════════════════════
   BODY
═══════════════════════════════════════════════ */
body {
    background:     var(--background-color);
    color:          var(--text-color);
    font-size:      var(--font-size-medium);
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
    overflow-x:     hidden;
}

body {
    font-family: var(--font-body), "Roboto";
}


/* ═══════════════════════════════════════════════
   APP INTRO TITLE — "A Colorful Celebration..."
   Sits above the dedication text
═══════════════════════════════════════════════ */
#app-intro-title {
    display:     block;
    color:       #FFFFFF;
    text-align:  center;
    font-weight: 700;
    font-size:   var(--font-size-large);
    padding:     10px 24px 0;
}


/* ═══════════════════════════════════════════════
   NAV BAR — top navigation strip
═══════════════════════════════════════════════ */
.nav {
    background:      var(--surface-color-dark);
    border-bottom:   2px solid var(--border-color-dim);
    padding:         0 20px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          75px;
    flex-shrink:     0;
}

.nav-links {
    display:     flex;
    gap:         8px;
    align-items: center;
}

.nav-link {
    font-family:     var(--font-body), "Century Gothic UI", monospace;
    font-size:       var(--font-size-xlarge);
    font-weight:     800;
    padding:         10px 20px;
    border-radius:   30px;
    border:          2px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    background:      none;
    color:           var(--text-color-dim);
    transition:      all 0.18s;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
}

.nav-link:hover {
    color:        var(--text-color);
    border-color: var(--border-color);
    background:   var(--surface-color-mid);
}

.nav-link.active {
    color:        #ffffff;
    background:   var(--accent-color); 
                  filter: brightness(1.25);
    border-color: var(--accent-color); 
    font-weight:  900;
    min-height: 80px;
}

/* Settings gear icon button in the nav */
.nav-settings-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     var(--font-size-xlarge);
    color:         var(--text-color-dim);
    padding:       4px 8px;
    border-radius: 50%;
    transition:    color 0.2s, background 0.2s;
    display:       flex;
    align-items:   center;
}

.nav-settings-btn:hover {
    color:       var(--accent-color);
                 filter: brightness(1.25);
    background:  var(--surface-color-mid);
}


/* ═══════════════════════════════════════════════
   SPA PAGES — show/hide between app sections
═══════════════════════════════════════════════ */
.page        { display: none; flex-direction: column; flex: 1; min-height: 0; }
.page.active { display: flex; }


/* ═══════════════════════════════════════════════
   RAINBOW BANNER — "HUEMANITY for ALL!"
═══════════════════════════════════════════════ */
.rainbow-banner {
    height:          100px;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      linear-gradient(to right,
    #AF0A5F 0%, #CC6600 20%, #CCAA00 40%,
    teal 60%, #1A3366 80%, #551A66 100%);
    border-radius:   16px;
    margin:          10px 16px 0;
    box-shadow:      0 4px 20px rgba(0,0,0,0.5);
}

.banner-text {
    font-family: var(--font-body), monospace;
    font-size:      var(--font-size-xlarge);
    font-weight:    900;
    letter-spacing: 0.04em;
    text-shadow:    2px 2px 0 rgba(0,0,0,0.9);
    user-select:    none;
}

.banner-word-huemanity { color: #AF0A5F;}
.banner-word-for       { color: #60FF1C; }
.banner-word-all       { color: #ffffff; font-size: var(--font-size-xlarge); text-transform: uppercase; }


/* ═══════════════════════════════════════════════
   MAIN LAYOUT — left controls | collapse toggle | preview
═══════════════════════════════════════════════ */
.app-layout {
    display:               grid;
    grid-template-columns: var(--left-panel-width, 600px) 28px 1fr;
    transition:            grid-template-columns 0.3s ease;
    flex:                  1;
    min-height:            0;
}

.app-layout.panel-collapsed {
    --left-panel-width: 0px;
}

@media (max-width: 90vw) {
    .app-layout            { grid-template-columns: 1fr; }
    .panel-collapse-toggle { display: none; }
}


/* ═══════════════════════════════════════════════
   LEFT CONTROLS PANEL
═══════════════════════════════════════════════ */
.left-panel {
    display:        flex;
    flex-direction: column;
    gap:            7px;
    padding:        10px 12px 10px 10px;
    max-width:      580px;
    transition:     max-width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow:       hidden;
}

.left-panel.collapsed {
    max-width: 0;
    opacity:   0;
    padding:   0;
}


/* ── Control section heading (e.g. "Gradient Type") ── */
.control-section-heading {
    font-size:      var(--font-size-medium);
    font-weight:    800;
    color:          #00dd58;
    letter-spacing: 0.05em;
}


/* ── Control row — label + input side by side ── */
.control-row {
    display:     flex;
    align-items: center;
    gap:         6px;
    padding:     6px 0;
}


/* ── Control label (e.g. "Cat:", "W:", "Palette:") ── */
.control-label {
    font-size:   var(--font-size-medium);
    font-weight: 700;
    color:       #00dd58;
    white-space: nowrap;
    flex-shrink: 0;
    min-width:   20px;
}


/* ── Text / number input fields ── */
.control-input {
    background:    var(--surface-color-mid);
    border:        2px solid var(--border-color-dim);
    border-radius: var(--border-radius);
    color:         #ffffff;
    font-family: var(--font-body), monospace;
    font-size:     var(--font-size-medium);
    font-weight:   600;
    padding:       8px 10px;
    outline:       none;
    flex:          1;
    min-width:     0;
    width:         100%;
    transition:    border-color 0.2s;
}

.control-input:focus       { border-color: var(--accent-color); filter: brightness(1.25);}
.control-input::placeholder { color: var(--text-color-muted); }


/* Hide number input spinners — unnecessary and distracting */
.control-input[type="number"]::-webkit-inner-spin-button,
.control-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.control-input[type="number"] { -moz-appearance: textfield; }

/* ── Dropdown select menus ── */
.control-select {
    background:          var(--surface-color-mid);
    border:              2px solid var(--border-color-dim);
    border-radius:       var(--border-radius);
    color:               #ffffff;
    font-family: var(--font-body), monospace;
    font-size:           var(--font-size-medium);
    font-weight:         600;
    padding:             12px 30px 12px 14px;
    outline:             none;
    flex:                1;
    min-width:           0;
    cursor:              pointer;
    appearance:          none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffccee' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 8px center;
    transition:          border-color 0.2s;
}

.control-select:focus { border-color: var(--accent-color); }


/* ── medium icon buttons (star / favorites toggle) ── */
.icon-btn {
    width:           36px;
    height:          36px;
    border-radius:   var(--border-radius);
    border:          2px solid var(--border-color-dim);
    background:      var(--surface-color-mid);
    color:           var(--text-color-dim);
    font-size:       var(--font-size-medium);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      all 0.15s;
    padding:         0;
}

.icon-btn:hover             { border-color: var(--accent-color); color: var(--accent-color-hot); }
.icon-btn.favorites-active  { color: var(--gold-color); border-color: var(--gold-color); background: rgba(248, 210, 3, 0.1); }
.icon-btn.starred           { color: var(--gold-color); border-color: var(--gold-color); }


/* ── Palette color strip — shows colors in current palette ── */
.palette-color-strip {
    height:        22px;
    border-radius: 5px;
    width:         100%;
    border:        1px solid var(--border-color-dim);
    background:    var(--surface-color-dark);
    display:       block;
}


/* ── Gradient type selector button (opens popup) ── */
#gradient-type-selector-btn {
    background:      var(--surface-color-mid);
    border:          2px solid var(--border-color-dim);
    border-radius:   var(--border-radius);
    color:           #00dd58;   /* bright green — always visible, matches Category:/Palette: labels */
    font-family:     var(--font-body), monospace;
    font-size:       var(--font-size-medium);
    font-weight:     700;
    height:          52px;
    width:           100%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 14px;
    margin:          10px 0;
    transition:      all 0.15s;
}

#gradient-type-selector-btn:hover { border-color: var(--accent-color); }

/* ─────────────────────────────────────────────────────────────────────
   GRADIENT TAB — Δ-customizable surfaces (self-explanatory names).
   Scoped to #panel-gradient so they ONLY affect this tab — the same
   .control-input / .control-select classes are reused on other tabs.
   Each falls back to its current color, so nothing changes until a
   DIY picker is actually used.
   ───────────────────────────────────────────────────────────────────── */

/* Category / Palette dropdowns + the Gradient-Type selector button */
#panel-gradient .control-select,
#panel-gradient #gradient-type-selector-btn {
    background: var(--gradient-dropdown-background, var(--surface-color-mid));
}

/* Typed input boxes — palette search, Width, Height */
#panel-gradient .control-input {
    background: var(--gradient-input-background, var(--surface-color-mid));
}

/* The palette color strip under the gradient type selector */
#panel-gradient .palette-color-strip {
    background: var(--gradient-palette-strip-background, var(--surface-color-dark));
}

/* Background behind the control labels (W:, H:, Category:, Palette:).
   Transparent today, so this stays invisible until a color is chosen. */
#panel-gradient .control-label {
    background: var(--gradient-label-background, transparent);
}

.gradient-type-current-label { color: #00dd58; font-weight: 900; }


/* ── Width / Height input pair ── */
.dimensions-pair { display: flex; gap: 8px; margin: 10px 0; }

.dimensions-pair > div {
    display:     flex;
    align-items: center;
    gap:         5px;
    flex:        1;
}

.dimensions-pair input { flex: 1; min-width: 0; }


/* ── General action buttons ── */
.btn {
    border-radius:   var(--border-radius);
    border:          2px solid transparent;
    font-family:     var(--font-body) monospace;
    font-size:       var(--font-size-medium);
    font-weight:     800;
    cursor:          pointer;
    transition:      all 0.15s;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         10px 14px;
    height:          auto;
    min-height:      52px;
}

/* Filled primary button (Create, Save, Random) */
.btn-primary        { background: var(--button-bg-color); color: #00dd58; border-color: var(--button-bg-color); }
.btn-primary:hover  { filter: brightness(1.10); }
.btn-primary:active { filter: brightness(1.25); }

/* Outlined secondary button */
.btn-outline        { background: transparent; color: #00dd58; border-color: var(--border-color-dim); }
.btn-outline:hover  { border-color: var(--accent-color); color: #00dd58; background: var(--surface-color-mid); }

/* Side-by-side button pair row */
.btn-pair-row       { display: flex; gap: 6px; margin: 10px 0; }
.btn-pair-row .btn  { flex: 1; }

/* Options & Export Sizes full-width button */
#btnOptions {
    background:      var(--surface-color-mid);
    border:          2px solid var(--accent-color);
    color:           var(--accent-color-hot);
    font-family:     var(--font-body);
    font-size:       var(--font-size-medium);
    font-weight:     900;
    border-radius:   var(--border-radius);
    cursor:          pointer;
    height:          42px;
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    transition:      all 0.15s;
}

#btnOptions:hover { background: var(--accent-color); color: #fff; }


/* ═══════════════════════════════════════════════
   PANEL COLLAPSE TOGGLE BUTTON
   The medium ◀ ▶ button between left and right panels
═══════════════════════════════════════════════ */
.panel-collapse-toggle {
    display:         flex;
    justify-content: center;
    padding-top:     14px;
}

#btnTogglePanel {
    background:      var(--surface-color-mid);
    border:          2px solid var(--border-color-dim);
    border-radius:   50%;
    color:           var(--text-color-dim);
    font-size:       20px;
    width:           25px;
    height:          25px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 0.2s;
    padding:         0;
    flex-shrink:     0;
}

#btnTogglePanel:hover { border-color: var(--accent-color); background: var(--accent-color); }


/* ═══════════════════════════════════════════════
   RIGHT PREVIEW PANEL — gradient canvas area
═══════════════════════════════════════════════ */
.right-panel {
    display:        flex;
    flex-direction: column;
    flex:           1;
    overflow:       auto;
    gap:            8px;
    min-height:     0;
}

/* The dark frame that holds the gradient canvas */
.gradient-preview-frame {
    flex:            1;
    background:      #0a0a0a;
    border:          2px solid var(--border-color-dim);
    border-radius:   var(--border-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    min-height:      480px;
}

/* Idle image shown before any gradient is generated */
#splashIdleImage {
    width:         100%;
    max-height:    100%;
    object-fit:    contain;
    border-radius: 8px;
    display:       block;
}

/* Canvas where gradients are drawn */
#gradientCanvas {
    max-width:     100%;
    max-height:    100%;
    display:       none;
    border-radius: 8px;
}

/* Info row showing palette name and dimensions */
.gradient-info-row {
    display:     flex;
    align-items: center;
    font-size:   var(--font-size-medium);
    color:       var(--text-color-dim);
    padding:     0 4px;
}

#previewPaletteName { font-weight: 800; color: #ff4fa3; }   /* bright fuchsia — readable on purple */

/* Dedication text below the preview */
.dedication-text {
    text-align:  center;
    font-size:   var(--font-size-large);
    color:       #FFFFFF !important;   /* locked white — never touched by Δ or theme */
    line-height: 1.5;
    padding:     8px 24px 12px;
}

.dedication-text strong { color: #FFFFFF !important; font-weight: 700; }

/* Gradient tab backdrop — the page background, owned by the global theme.
   Not a "panel"; the Gradient tab has no panels (see gradient surfaces below). */
#panel-gradient {
    background: var(--surface-color);
}

/* Troyski brand mark — locked, no Δ control ever */
.brand-watermark {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 65px;
    height: auto;
    opacity: 0.65;
    pointer-events: none;
    z-index: 5;
    user-select: none;
}

/* ═══════════════════════════════════════════════
   POPUP WINDOWS — shared styles for all popups
═══════════════════════════════════════════════ */

/* Dark overlay behind the popup */
.popup-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.65);
    z-index:         400;
    align-items:     center;
    justify-content: center;
}

.popup-overlay.open { display: flex; }

/* The popup window box itself */
.popup-box {
    background:    var(--surface-color);
    border:        2px solid var(--accent-color-hot);
    border-radius: 16px;
    padding:       28px;
    width:         560px;
    max-height:    88vh;
    overflow-y:    auto;
    box-shadow:    0 12px 60px rgba(0,0,0,0.7);
    position:      relative;
}

/* Title at the top of a popup */
.popup-title {
    font-family:   var(--font-display);
    font-size:     var(--font-size-medium);
    font-weight:   700;
    color:         #39ff14;
    margin-bottom: 22px;
    letter-spacing: 0.05em;
}

/* × close button in the top-right corner */
.popup-close-btn {
    position:    absolute;
    top:         14px;
    right:       16px;
    background:  none;
    border:      none;
    color:       var(--text-color-dim);
    font-size:   var(--font-size-xlarge);
    cursor:      pointer;
    line-height: 1;
    padding:     0;
}

.popup-close-btn:hover { color: var(--accent-color); }

/* A labeled section inside a popup */
.popup-section { margin-bottom: 20px; }

.popup-section-heading {
    font-size:      var(--font-size-medium);
    font-weight:    800;
    color:          var(--accent-color);
    letter-spacing: 0.1em;
    text-transform: capitalize;
    margin-bottom:  12px;
    padding-bottom: 6px;
    border-bottom:  1px solid var(--border-color-dim);
}

/* Row with a label and a color picker swatch */
.theme-color-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   12px;
    gap:             12px;
}

.theme-color-row label {
    font-size:   var(--font-size-medium);
    font-weight: 700;
    color:       var(--text-color);
    flex:        1;
}

/* Color picker swatch input */
input[type="color"] {
    width:         52px;
    height:        38px;
    border:        2px solid var(--border-color-dim);
    border-radius: 8px;
    cursor:        pointer;
    background:    none;
    padding:       2px;
    flex-shrink:   0;
}

/* Export size preset buttons grid */
.export-presets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.export-preset-btn {
    background:    var(--surface-color-mid);
    border:        2px solid var(--border-color-dim);
    border-radius: var(--border-radius);
    color:         var(--text-color);
    font-family:   var(--font-body);
    font-size:     24px;
    font-weight:   700;
    padding:       10px;
    cursor:        pointer;
    text-align:    left;
    transition:    all 0.15s;
    line-height:   1.4;
}

.export-preset-btn:hover { border-color: var(--accent-color); background: var(--surface-color-dark); }

.export-preset-btn span {
    display:     block;
    font-size:   22px;
    color:       var(--text-color-muted);
    font-weight: 600;
}

/* Row of buttons at the bottom of a popup section */
.popup-action-row         { display: flex; gap: 10px; margin-top: 6px; }
.popup-action-row .btn    { flex: 1; justify-content: center; }


/* ═══════════════════════════════════════════════
   GRADIENT TYPE BUTTONS — inside the type popup
═══════════════════════════════════════════════ */
.gradient-type-btn {
    background:      var(--surface-color-mid);
    border:          2px solid var(--border-color-dim);
    border-radius:   var(--border-radius);
    color:           #00e5ff;
    font-family:     var(--font-body);
    font-size:       var(--font-size-medium);
    font-weight:     700;
    height:          64px;
    cursor:          pointer;
    transition:      all 0.15s;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
}

.gradient-type-btn:hover  { border-color: #00e5ff; color: #ffffff; }
.gradient-type-btn.active { background: var(--accent-color); border-color: #39ff14; color: #39ff14; font-weight: 900; }


/* ═══════════════════════════════════════════════
   TOAST NOTIFICATION
   The medium pop-up message that appears briefly
   (e.g. "PNG saved!", "Added to favorites!")
═══════════════════════════════════════════════ */
.toast-notification {
    position:       fixed;
    bottom:         32px;
    left:           50%;
    transform:      translateX(-50%) translateY(14px);
    background:     var(--accent-color);
    color:          #ffffff;
    font-family:    var(--font-body);
    font-size:      var(--font-size-medium);
    font-weight:    800;
    padding:        12px 34px;
    border-radius:  40px;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.3s, transform 0.3s;
    z-index:        999;
}

.toast-notification.show {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════
   TAB BAR — three main navigation tabs
═══════════════════════════════════════════════ */
.tab-bar {
    display:          flex;
    gap:              4px;
    padding:          10px 16px 0;
    background:       var(--surface-color-dark);
    border-bottom:    2px solid var(--border-color-dim);
    flex-shrink:      0;
    flex-wrap:        wrap;
}

.tab-button {
    font-family:      var(--font-body);
    font-size:        var(--font-size-medium);
    font-weight:      700;
    padding:          10px 22px;
    border:           2px solid var(--border-color-dim);
    border-bottom:    none;
    border-radius:    8px 8px 0 0;
    background:       var(--surface-color-dark);
    color:            var(--text-color-dim);
    cursor:           pointer;
    transition:       all 0.18s;
    white-space:      nowrap;
}

.tab-button:hover {
    background:   var(--surface-color-mid);
    color:        var(--text-color);
    border-color: var(--accent-color);
}

.tab-button.active {
    background:   var(--accent-color);
    color:        #39ff14;
    border-color: #39ff14;
    font-weight:  700;
    font-size:    var(--font-size-medium);
    position:     relative;
    bottom:       -2px;
    z-index:      1;
}

.tab-button.inactive {
    border-color: #13131e;
}



/* ═══════════════════════════════════════════════
   TAB PANELS — show/hide content per tab
═══════════════════════════════════════════════ */
.tab-panel {
    display:    none;
    flex:       1;
    flex-direction: column;
    min-height: 0;
}

.tab-panel.active {
    display: flex;
    padding-top: 32px;
}


/* ═══════════════════════════════════════════════
   SETTINGS TAB LAYOUT
═══════════════════════════════════════════════ */
.settings-layout {
    display:        flex;
    flex-direction: column;
    gap:            28px;
    padding:        28px;
    max-width:      1400px;
}

.settings-section {
    background:    var(--appsettings-card-background,
                   var(--appsettings-panel-backgrounds,
                   var(--app-background-default)));
    border:        2px solid var(--border-color-dim);
    border-radius: var(--border-radius);
    padding:       24px;
}

.settings-section-heading {
    font-size:      var(--font-size-medium);
    font-weight:    800;
    color:          #39ff14;
    letter-spacing: 0.08em;
    text-transform: capitalize;
    margin-bottom:  18px;
    padding-bottom: 10px;
    border-bottom:  1px solid var(--border-color-dim);
}


/* ═══════════════════════════════════════════════
   COMING SOON placeholder for unfinished tabs
═══════════════════════════════════════════════ */
.tab-coming-soon {
    flex:            1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             16px;
    color:           var(--text-color-dim);
    font-size:       var(--font-size-medium);
}

.tab-coming-soon-icon { font-size: 64px; }

.tab-coming-soon-note {
    font-size: var(--font-size-medium);
    color:     var(--text-color-muted);
}


/* ═══════════════════════════════════════════════
   GRADIENT TYPE POPUP GRID — 2 columns
═══════════════════════════════════════════════ */
.gradient-type-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
}


/* ═══════════════════════════════════════════════
   COLOR WHEEL TAB — Main Layout
   Two columns: wheel/controls | sliders/palette
═══════════════════════════════════════════════ */
.colorwheel-layout {
    display:               grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap:                   20px;
    padding:               16px;
    flex:                  1;
    min-height:            0;
    overflow:              hidden;
}

/* Left column: iro.js wheel + lock row + contrast toggle */
.cw-left {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    center;
}

/* iro.js mounts its canvas inside this div */
#wheelContainer {
    display:         flex;
    justify-content: left;
    align-items:     center;
    width:           100%;
}

/* Lock / Unlock / Reset button row */
.lock-row {
    display: flex;
    gap:     8px;
    width:   100%;
}

.lock-row .btn { flex: 1; }

/* Full-width button (e.g. High Contrast toggle) */
.cw-full-btn { width: 100%; margin-top: 4px; }

/* Active state for Lock / Unlock buttons */
.btn-active {
    background:   var(--accent-color);
    border-color: var(--border-color);
    color:        #ffffff;
    font-weight:  900;
}

/* Right column: everything else stacked vertically */
.cw-right {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    min-height:     0;
    overflow:       hidden;
}


/* ═══════════════════════════════════════════════
   TOP AREA — color swatch + hex + color formats
═══════════════════════════════════════════════ */
.cw-top-area {
    display:     flex;
    gap:         14px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* Large square showing the current color */
.cw-color-swatch {
    width:         80px;
    height:        80px;
    border-radius: var(--border-radius);
    border:        3px solid var(--border-color-dim);
    background:    #ff0000;
    flex-shrink:   0;
}

/* Hex input + color info column */
.cw-hex-area {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    min-width:      0;
}

/* Monospace styling for the hex text input */
.cw-hex-input {
    font-family:    'Roboto', monospace !important;
    letter-spacing: 0.08em;
}

/* 2-column grid of color format readouts */
.cw-color-formats {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   6px 12px;
    border:                2px solid var(--border-color-dim);
    border-radius:         var(--border-radius);
    padding:               12px 16px;
    margin-top:            8px;
}

.cw-color-formats span {
    font-family:   'Roboto', monospace;
    font-size:     var(--font-size-medium);
    color:         var(--text-color-dim);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}


/* ═══════════════════════════════════════════════
   SLIDERS — hue, saturation, brightness, alpha
═══════════════════════════════════════════════ */
.cw-sliders {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    flex-shrink:    0;
    padding:        16px 0;
}

.cw-slider-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     8px 0;
}

/* Fixed-width label aligned right */
.cw-label {
    min-width:   60px;
    text-align:  right;
    flex-shrink: 0;
}

/* Range slider track */
.cw-slider {
    flex:               1;
    height:             18px;
    border-radius:      16px;
    outline:            none;
    cursor:             pointer;
    appearance:         none;
    -webkit-appearance: none;
    border:             none;
}

.cw-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              22px;
    height:             22px;
    border-radius:      50%;
    background:         #ffffff;
    border:             3px solid var(--accent-color);
    cursor:             pointer;
    box-shadow:         0 2px 6px rgba(0,0,0,0.5);
}

.cw-slider::-moz-range-thumb {
    width:         22px;
    height:        22px;
    border-radius: 16px;
    background:    #ffffff;
    border:        3px solid var(--accent-color);
    cursor:        pointer;
    box-shadow:    0 2px 6px rgba(0,0,0,0.5);
}

/* Numeric readout to the right of each slider */
.cw-readout {
    font-family: 'Courier New', monospace;
    font-size:   var(--font-size-medium);
    color:       var(--text-color);
    min-width:   52px;
    text-align:  right;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════
   BOTTOM ROW — saved palette + color history
═══════════════════════════════════════════════ */
.cw-bottom-row {
    display:    flex;
    gap:        16px;
    max-height: 300px;
    min-height: 250px;
    overflow:   hidden;
}

.cw-palette-section,
.cw-history-section {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    background:     var(--colorwheel-card-background,
                    var(--colorwheel-panel-backgrounds,
                    var(--app-background-default)));
    border:         2px solid var(--border-color-dim);
    border-radius:  var(--border-radius);
    padding:        12px;
    overflow:       hidden;
}

/* Section header: title + rename input + clear button */
.cw-section-header {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.cw-section-title {
    font-size:   var(--font-size-medium);
    font-weight: 800;
    color:       var(--accent-color-hot);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Wrapping grid of color swatches */
.cw-swatch-grid {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    overflow-y:    auto;
    flex:          1;
    align-content: flex-start;
}

/* Placeholder text when a section is empty */
.empty-message {
    color:      var(--text-color-muted);
    font-size:  var(--font-size-medium);
    font-style: italic;
}


/* ═══════════════════════════════════════════════
   MINI SWATCHES — palette & history color squares
═══════════════════════════════════════════════ */
.swatch-wrapper {
    position: relative;
    display:  inline-block;
}

.mini-swatch {
    width:         40px;
    height:        40px;
    border-radius: 6px;
    border:        2px solid rgba(255,255,255,0.25);
    cursor:        pointer;
    transition:    transform 0.15s, border-color 0.15s;
    display:       block;
}

.mini-swatch:hover {
    transform:    scale(1.1);
    border-color: #ffffff;
}

/* Custom tooltip: navy bg, white text, 18px — appears on hover */
.swatch-tooltip {
    position:       absolute;
    bottom:         calc(100% + 5px);
    left:           50%;
    transform:      translateX(-50%);
    background:     #0d1b3e;
    color:          #ffffff;
    font-size:      18px;
    font-family:    'Courier New', monospace;
    padding:        10px 10px;
    border-radius:  6px;
    white-space:    nowrap;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.15s;
    z-index:        100;
}

.swatch-wrapper:hover .swatch-tooltip { opacity: 1; }

/* × delete button — visible only on hover, palette swatches only */
.swatch-delete {
    position:        absolute;
    top:             -6px;
    right:           -6px;
    width:           18px;
    height:          18px;
    border-radius:   50%;
    background:      #cc0055;
    color:           #ffffff;
    border:          none;
    font-size:       13px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    opacity:         0;
    transition:      opacity 0.15s;
}

.swatch-wrapper:hover .swatch-delete { opacity: 1; }

/* ─── Δ panel show / hide (must stay near end of file) ─── */
.delta-panel      { display: none; }
.delta-panel.open { display: block; }

/* ═══════════ Δ CUSTOMIZER PANELS ═══════════ */
.delta-host { position: relative; }          /* anchors the panel */

.delta-btn {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px;
    border: 1px solid var(--accent-color, #ff00cc);
    border-radius: 6px; background: rgba(0,0,0,0.35);
    color: var(--text-color, #FFFFFF);
    font-size: 16px; cursor: pointer; z-index: 50;
}
.delta-btn:hover { background: var(--accent-color, #ff00cc); }

.delta-panel {
    display: none;                            /* ← stops the spill-over */
    position: absolute; top: 44px; right: 8px;
    width: 260px; padding: 16px;
    background: var(--surface-color, #2a0045);
    border: 2px solid var(--accent-color-hot, #ff00cc);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 500; text-align: left;
}
.delta-panel.open { display: block; }         /* shown only when JS adds .open */

.delta-panel-header {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 12px;
}
.delta-panel-title { font-weight: 700; color: var(--text-color, #f5e6ff); }
.delta-panel-close {
    border: none; background: transparent;
    color: var(--text-color, #f5e6ff);
    font-size: 20px; line-height: 1; cursor: pointer;
}

.delta-row { margin-bottom: 12px; }
.delta-row label { display: block; margin-bottom: 6px; color: var(--text-color, #f5e6ff); }
.delta-slider { width: 100%; }

.delta-case-row { display: flex; gap: 6px; }
.delta-case-btn {
    flex: 1; padding: 6px;
    border: 1px solid var(--accent-color, #ff00cc);
    border-radius: 6px; background: transparent;
    color: var(--text-color, #f5e6ff); cursor: pointer;
}
.delta-case-btn.active { background: var(--accent-color, #ff00cc); }

.delta-save-btn {
    width: 100%; padding: 8px; margin-top: 4px;
    border: none; border-radius: 8px;
    background: var(--accent-color-hot, #ff00cc);
    color: #fff; font-weight: 700; cursor: pointer;
}