/* ============================================
   themes.css — Hippopotalist colour themes
   Loaded right after style.css (see pwa_head.php).
   ============================================

   pwa_head.php puts data-theme="light|midlight|middark|dark" on <html>.
   Mid-Light is the original look: its colours are the ones in style.css,
   so nothing changes for anyone who keeps it. */


/* ============================================
   1. Colours for each theme
   ============================================ */

/* New colour names used below. These Mid-Light values match the colours
   style.css already uses, so the original look stays exactly the same. */
:root {
    --surface:              #fff;      /* inputs and rows inside cards */
    --surface-alt:          #f9f6f1;   /* shaded boxes inside cards and pop-ups */
    --on-gold:              #2c2c2c;   /* text on gold buttons, tabs and avatars */
    --accent-text:          #8a6430;   /* small gold text: more/less, menu tick */
    --toggle-on:            #c49a58;
    --toggle-off:           #8a8686;
    --btn-muted:            #8a8686;
    --btn-muted-hover:      #6e6a6a;
    --danger-text:          #c0392b;
    --alert-error-bg:       #fce4e4;
    --alert-error-border:   #f5aaaa;
    --alert-success-bg:     #e4f5ea;
    --alert-success-border: #a9ddb8;
}

html[data-theme="light"] {
    --bg:           #ece8e2;
    --bg-dark:      #ddd8d0;
    --card:         #fffdfa;
    --card-border:  #e4ded4;
    --gold-dark:    #a87b3d;
    --muted:        #8d877f;
    --text:         #2a2826;
    --text-light:   #5d5852;
    --shadow:       0 4px 18px rgba(0,0,0,0.08);
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);

    --surface:      #fff;
    --surface-alt:  #f7f4ef;
    --accent-text:  #8f6a35;
    --toggle-off:   #a8a29a;
}

html[data-theme="middark"] {
    color-scheme: dark;
    --bg:           #46413e;
    --bg-dark:      #3b3734;
    --card:         #5c5652;
    --card-border:  #6f6863;
    --gold-dark:    #ebcd9e;
    --muted:        #b3aaa1;
    --text:         #f4efe9;
    --text-light:   #d6cec4;
    --success:      #8be0a8;
    --shadow:       0 4px 18px rgba(0,0,0,0.3);
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.2);

    --surface:      #66605b;
    --surface-alt:  #534d49;
    --accent-text:  #ecd0a3;
    --toggle-off:   #8d857e;
    --btn-muted:    #7d7570;
    --btn-muted-hover: #6b645f;
    --danger-text:  #ffb3a8;
    --alert-error-bg:       rgba(192,57,43,0.25);
    --alert-error-border:   rgba(232,120,105,0.6);
    --alert-success-bg:     rgba(39,174,96,0.22);
    --alert-success-border: rgba(110,210,150,0.55);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg:           #161413;
    --bg-dark:      #0f0e0d;
    --card:         #24211f;
    --card-border:  #37332f;
    --muted:        #8f877f;
    --text:         #efe9e1;
    --text-light:   #b4aca2;
    --success:      #5cc98a;
    --shadow:       0 4px 18px rgba(0,0,0,0.5);
    --shadow-sm:    0 2px 8px rgba(0,0,0,0.4);

    --surface:      #2d2a27;
    --surface-alt:  #1d1b19;
    --accent-text:  #d7af78;
    --toggle-off:   #6b655f;
    --btn-muted:    #6b655f;
    --btn-muted-hover: #5a5550;
    --danger-text:  #f08a7c;
    --alert-error-bg:       rgba(192,57,43,0.2);
    --alert-error-border:   rgba(232,120,105,0.5);
    --alert-success-bg:     rgba(39,174,96,0.16);
    --alert-success-border: rgba(92,201,138,0.45);
}


/* ============================================
   2. Places style.css uses a fixed colour
   (for Mid-Light these come out the same as before)
   ============================================ */

.form-group input,
.form-group textarea,
.form-group select,
.share-bar input {
    background: var(--surface);
}

.conn-row-actions {
    background: var(--surface-alt);
}

.alert-error {
    background: var(--alert-error-bg);
    border-color: var(--alert-error-border);
    color: var(--danger-text);
}

.alert-success {
    background: var(--alert-success-bg);
    border-color: var(--alert-success-border);
}

.nav-dropdown .dropdown-danger {
    color: var(--danger-text);
}

.toggle-switch {
    background: var(--toggle-off);
}

.toggle-input:checked + .toggle-switch {
    background: var(--toggle-on);
}

.btn-muted,
.nav-btn-muted {
    background: var(--btn-muted);
}

.btn-muted:hover,
.nav-btn-muted:hover {
    background: var(--btn-muted-hover);
}

/* Gold things keep dark text in every theme */
.btn-gold,
.nav-btn-gold,
.search-bar button,
.btn-outline:hover,
.tab-btn.active,
.profile-tab-btn.active,
.tab-bar-scroll-btn,
.nav-avatar-btn,
.profile-avatar,
.conn-avatar-initial,
.conn-avatar-initial-lg,
.drag-handle:active,
.list-item-card.dragging .drag-handle {
    color: var(--on-gold);
}


/* ============================================
   3. Mid-Dark and Dark: colours written straight into the pages
   (white boxes, the light shaded boxes in pop-ups, gold pills, etc.)
   pwa_head.php and theme.js add .hl-dark to <html> for these two themes.
   ============================================ */

.hl-dark [style*="background:#fff;"],
.hl-dark [style*="background: #fff;"],
.hl-dark [style$="background:#fff"],
.hl-dark [style*="background:#ffffff"],
.hl-dark [style*="background: #ffffff"] {
    background-color: var(--surface) !important;
}

.hl-dark [style*="background:#f9f6f1"] {
    background-color: var(--surface-alt) !important;
}

.hl-dark [style*="background:var(--gold)"] {
    color: var(--on-gold) !important;
}

.hl-dark [style*="color:var(--danger)"] {
    color: var(--danger-text) !important;
}

.hl-dark [style*="background:#e4f5ea"] {
    background-color: var(--alert-success-bg) !important;
    border-color: var(--alert-success-border) !important;
}

.hl-dark [style*="background:#fce4e4"] {
    background-color: var(--alert-error-bg) !important;
    border-color: var(--alert-error-border) !important;
    color: var(--danger-text) !important;
}


/* ============================================
   4. Theme names in the avatar menu
   ============================================ */

.nav-dropdown .nav-theme-label {
    padding: 8px 16px 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-light);
}

.nav-dropdown button.nav-theme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    font-weight: 400;
}

.nav-dropdown button.nav-theme-option.is-active {
    font-weight: 700;
}

/* Tick next to the theme in use */
.nav-dropdown button.nav-theme-option.is-active::after {
    content: '';
    width: 5px;
    height: 10px;
    margin: 0 3px 3px 0;
    border: solid var(--accent-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    flex-shrink: 0;
}


/* ============================================
   5. Settings page: theme swatches
   ============================================ */

.theme-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 6px 10px;
    background: transparent;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-light);
    transition: border-color var(--transition), background var(--transition);
}

.theme-swatch:hover {
    border-color: var(--gold);
}

.theme-swatch.is-active {
    border-color: var(--gold);
    background: rgba(215,175,120,0.16);
    color: var(--text);
}

.theme-swatch:focus-visible,
.section-toggle:focus-visible,
.nav-dropdown button.nav-theme-option:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* A little picture of each theme: page colour with a card on it */
.theme-swatch-preview {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    border: 1px solid rgba(128,128,128,0.4);
    display: flex;
    align-items: flex-end;
    padding: 0 8px;
}

.theme-swatch-preview span {
    display: block;
    width: 100%;
    height: 30px;
    border-radius: 4px 4px 0 0;
    border-top: 3px solid #d7af78;
}

.theme-swatch-preview--light            { background: #ece8e2; }
.theme-swatch-preview--light span       { background: #fffdfa; }
.theme-swatch-preview--midlight         { background: #b5b1b1; }
.theme-swatch-preview--midlight span    { background: #f5f0ea; }
.theme-swatch-preview--middark          { background: #46413e; }
.theme-swatch-preview--middark span     { background: #5c5652; }
.theme-swatch-preview--dark             { background: #161413; }
.theme-swatch-preview--dark span        { background: #24211f; }

.theme-status {
    min-height: 1.2em;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light);
}

@media (max-width: 420px) {
    .theme-picker { gap: 6px; }
    .theme-swatch { padding: 6px 4px 8px; font-size: 0.74rem; }
    .theme-swatch-preview { height: 40px; padding: 0 5px; }
    .theme-swatch-preview span { height: 25px; }
}


/* ============================================
   6. Settings page: sections that open and close
   Each section starts closed with "more" at the bottom; open, it has
   "less" at the bottom. Without JavaScript every section stays open.
   ============================================ */

.settings-summary,
.section-toggle-row {
    display: none;
}

.hl-js .settings-card.collapsible {
    padding-bottom: 6px;
}

.hl-js .settings-card.collapsible:not(.is-open) .settings-card-title {
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: none;
}

.hl-js .settings-card.collapsible:not(.is-open) .settings-summary {
    display: block;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.45;
}

.hl-js .settings-card.collapsible:not(.is-open) .settings-card-body {
    display: none;
}

.hl-js .section-toggle-row {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    border-top: 1px solid var(--card-border);
}

.hl-js .settings-card.collapsible:not(.is-open) .section-toggle-row {
    margin-top: 14px;
}

.section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    background: none;
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-text);
    cursor: pointer;
}

.section-toggle:hover .section-toggle-text {
    text-decoration: underline;
}

.section-toggle svg {
    transition: transform var(--transition);
}

.settings-card.is-open .section-toggle svg {
    transform: rotate(180deg);
}