/*
 * paws.css - Central style guide for paws.ms
 * ─────────────────────────────────────────────────────────────────────────────
 * All custom / brand styles live here. Page-specific overrides stay in their
 * own <style> blocks inside the relevant templates, but everything shared
 * (variables, navbar, layout, buttons, forms, cards) is defined below.
 *
 * TABLE OF CONTENTS
 *  1. CSS Custom Properties (light & dark mode)
 *  2. Astral Reset - kill inherited theme decorations
 *  3. Navbar
 *     3a. Header bar
 *     3b. Nav container & brand
 *     3c. Top-level links
 *     3d. Dropdown panels
 *     3e. Theme-toggle button
 *  4. Layout - wrapper / main / footer
 *  5. Typography
 *  6. Colour bindings (variables → elements)
 *  7. Buttons
 *  8. Form elements
 *  9. Background
 * 10. Dashboard - ID card (character section)
 * 11. Dashboard - Culvert section (home page)
 * 12. Responsive utilities
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Background gradient */
    --c-bg-body-from:  #ffa1b1;
    --c-bg-body-mid:   #fecdd9;
    --c-bg-body-to:    #feda50;

    /* Panel / surface */
    --c-panel:         #fff8fa;
    --c-panel-shadow:  rgba(201,77,114,0.25);

    /* Text */
    --c-text:          #6b4050;
    --c-heading:       #3d1828;
    --c-subheading:    #ffa1b1;

    /* Dividers & borders */
    --c-divider:       #ffb6d0;

    /* Form fields */
    --c-field-bg:      #fed5df;
    --c-field-focus:   #ffb6d0;
    --c-placeholder:   #606060;

    /* Buttons */
    --c-btn-primary:   #feda50;
    --c-btn-primary-h: #fff164;
    --c-btn-primary-a: #ffa1b1;
    --c-btn-alt:       #d9d3d6;
    --c-btn-alt-h:     #feda50;
    --c-btn-alt-a:     #fff164;

    /* Navigation */
    --c-nav-bg:        #fff0f4;
    --c-nav-icon:      #3d1828;
    --c-nav-active:    #2b0f18;
    --c-nav-tooltip:   #ffa1b1;
    --c-nav-indicator: #feda50;

    /* Footer */
    --c-footer-text:   #3d1828;
    --c-footer-copy:   #6b4050;
}

[data-theme="dark"] {
    /* Background: deep rose → near-black pink → deep violet-pink */
    --c-bg-body-from:  #420f28;
    --c-bg-body-mid:   #160810;
    --c-bg-body-to:    #300d28;

    /* Panel */
    --c-panel:         #1c0a16;
    --c-panel-shadow:  rgba(0,0,0,0.7);

    /* Text */
    --c-text:          #f0d8e8;
    --c-heading:       #fce8f4;
    --c-subheading:    #e898c8;
    --c-divider:       #5c2050;

    /* Form fields */
    --c-field-bg:      #2e0d24;
    --c-field-focus:   #441428;
    --c-placeholder:   #d8a8c4;

    /* Buttons - vivid rose primary */
    --c-btn-primary:   #c8306c;
    --c-btn-primary-h: #e04888;
    --c-btn-primary-a: #a02058;
    --c-btn-alt:       #3a1432;
    --c-btn-alt-h:     #c8306c;
    --c-btn-alt-a:     #e04888;

    /* Navigation */
    --c-nav-bg:        #220d1a;
    --c-nav-icon:      #d898bc;
    --c-nav-active:    #fce0f0;
    --c-nav-tooltip:   #1c0a16;
    --c-nav-indicator: #f09acc;

    /* Footer */
    --c-footer-text:   #d898bc;
    --c-footer-copy:   #b07898;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. ASTRAL COMPATIBILITY
   The navbar lives in #paws-nav OUTSIDE #wrapper so Astral's JS and CSS
   cannot target it. The empty #header placeholder is hidden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Suppress the empty Astral header placeholder */
#header {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3a. NAVBAR BAR  (#paws-nav)
   ═══════════════════════════════════════════════════════════════════════════ */

#paws-nav {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    box-sizing: border-box;
    height: 3.5rem;
    background: var(--c-nav-bg);
    box-shadow: 0 1px 6px rgba(180,60,100,0.15);
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    padding: 0 clamp(0.75rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

[data-theme="dark"] #paws-nav {
    background: var(--c-nav-bg);
    box-shadow: 0 1px 8px rgba(0,0,0,0.6);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3b. BRAND LINK
   ═══════════════════════════════════════════════════════════════════════════ */

#paws-nav > .nav-brand {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--c-heading);
    text-decoration: none;
    padding: 0 1rem 0 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

#paws-nav > .nav-brand img {
    height: 1.5rem;
    width: auto;
    border-radius: 0.2rem;
}

#paws-nav > .nav-brand:hover { color: var(--c-heading); opacity: 0.8; }


/* ═══════════════════════════════════════════════════════════════════════════
   3c. NAV LIST & TOP-LEVEL LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

#paws-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex: 1;
    height: 100%;
}

#paws-nav > ul > li {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Top-level links & theme-toggle button (unauthenticated nav) */
#paws-nav > ul > li > a,
#paws-nav > ul > li > button#theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0 0.85rem;
    height: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text);
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

#paws-nav > ul > li > a:hover,
#paws-nav > ul > li > button#theme-toggle:hover {
    color: var(--c-heading);
    background: rgba(255,161,177,0.12);
}

#paws-nav > ul > li.current > a {
    color: var(--c-heading);
    border-bottom-color: var(--c-nav-indicator);
}

[data-theme="dark"] #paws-nav > ul > li > a,
[data-theme="dark"] #paws-nav > ul > li > button#theme-toggle {
    color: #f0c4dc;
}
[data-theme="dark"] #paws-nav > ul > li > a:hover,
[data-theme="dark"] #paws-nav > ul > li > button#theme-toggle:hover {
    color: #fce0f0;
    background: rgba(255,161,177,0.08);
}

/* Dropdown caret */
.nav-arrow {
    font-size: 0.65em;
    opacity: 0.55;
    display: inline-block;
    transition: transform 0.2s;
}
#paws-nav > ul > li:hover > a .nav-arrow { transform: rotate(180deg); }

/* Spacer */
#paws-nav > ul > li.nav-spacer { flex: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   3d. DROPDOWN PANELS
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 185px;
    background: var(--c-nav-bg);
    border: 1px solid rgba(255,161,177,0.3);
    border-top: none;
    border-radius: 0 0 0.55rem 0.55rem;
    box-shadow: 0 6px 18px rgba(180,60,100,0.15);
    z-index: 500;
    padding: 0.3rem 0;
}

#paws-nav > ul > li:hover > .nav-dropdown,
#paws-nav > ul > li:focus-within > .nav-dropdown {
    display: block;
}

.nav-dropdown li { display: block; }

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-heading);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.12s, background 0.12s;
}

.nav-dropdown a:hover {
    color: var(--c-heading);
    background: rgba(255,161,177,0.18);
}

.nav-dropdown .nav-divider {
    height: 1px;
    background: rgba(255,161,177,0.3);
    margin: 0.25rem 0.75rem;
}

[data-theme="dark"] .nav-dropdown {
    background: #2a0e20;
    border-color: rgba(255,161,177,0.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
[data-theme="dark"] .nav-dropdown a { color: #f0d8e8; }
[data-theme="dark"] .nav-dropdown a:hover {
    color: #fce0f0;
    background: rgba(255,161,177,0.14);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3e. THEME-TOGGLE BUTTON  (standalone — unauthenticated users only)
   ═══════════════════════════════════════════════════════════════════════════ */

#paws-nav > ul > li > button#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text);
    font-size: 0.95rem;
    padding: 0 0.85rem;
    height: 100%;
    transition: color 0.15s;
}
#paws-nav > ul > li > button#theme-toggle:hover {
    color: var(--c-heading);
    background: rgba(255,161,177,0.12);
}
[data-theme="dark"] #paws-nav > ul > li > button#theme-toggle { color: #d898bc; }
[data-theme="dark"] #paws-nav > ul > li > button#theme-toggle:hover { color: #fce0f0; }


/* ═══════════════════════════════════════════════════════════════════════════
   3f. PROFILE AVATAR BUTTON  (.nav-profile-item)
   ═══════════════════════════════════════════════════════════════════════════ */

.nav-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.65rem;
    height: 100%;
    color: var(--c-text);
    font-family: inherit;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.nav-profile-btn:hover { background: rgba(255,161,177,0.12); }
.nav-profile-btn .nav-arrow { font-size: 0.65em; opacity: 0.5; }

.nav-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
/* Character sprites are tall — contain within the circle without cropping */
.nav-avatar--character {
    height: 2.5rem;
    object-fit: cover;
    background: transparent;
}
.nav-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--c-text);
}

/* Profile dropdown: right-aligned, click-based only (hover disabled via JS class) */
.nav-profile-dropdown {
    left: auto;
    right: 0;
    min-width: 195px;
    display: none;    /* closed by default; JS toggles .nav-dropdown--open */
}
.nav-profile-dropdown.nav-dropdown--open { display: block; }

/* Override CSS hover so only JS toggles the profile dropdown */
#paws-nav > ul > .nav-profile-item:hover > .nav-profile-dropdown,
#paws-nav > ul > .nav-profile-item:focus-within > .nav-profile-dropdown {
    display: none;
}
#paws-nav > ul > .nav-profile-item .nav-profile-dropdown.nav-dropdown--open {
    display: block;
}

/* Theme toggle & other buttons inside the profile dropdown */
.nav-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55rem 1rem;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-heading);
    font-family: inherit;
    text-align: left;
    transition: background 0.12s;
}
.nav-dropdown-btn:hover { background: rgba(255,161,177,0.18); }
[data-theme="dark"] .nav-dropdown-btn { color: #f0d8e8; }
[data-theme="dark"] .nav-dropdown-btn:hover { background: rgba(255,161,177,0.14); }


/* ═══════════════════════════════════════════════════════════════════════════
   4. LAYOUT - wrapper / main / footer
   ═══════════════════════════════════════════════════════════════════════════ */

#wrapper {
    padding-top: 0;           /* #paws-nav above provides spacing via margin-bottom */
    padding-bottom: 2em;
    padding-left: clamp(0.75rem, 4vw, 3rem);
    padding-right: clamp(0.75rem, 4vw, 3rem);
}

#main {
    margin-top: 0;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    border-radius: 0.75rem;
}

.box          { border-radius: 0.75rem; overflow: hidden; }
.image.featured { border-radius: 0.5rem; overflow: hidden; }
.image.featured img { border-radius: 0.5rem; display: block; }
.image img,
.image.featured img,
.image.object img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#footer {
    border-radius: 0.75rem;
    color: var(--c-footer-text);
}
#footer .copyright { color: var(--c-footer-copy); }
#footer ul.icons { list-style: none; padding: 0; margin: 0 0 0.5rem; }
#footer ul.icons li { display: inline-block; }

/* Intro panel - flex row (text left, logo right) */
#main > .panel.intro {
    height: auto;
    min-height: 14em;
    padding: 2em 1.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
}
#main > .panel.intro .inner {
    flex: 1;
    min-width: 0;
}
#main > .panel.intro .image.object {
    flex: 0 0 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 100%;
    padding-right: 1rem;
}
#main > .panel.intro .image.object img {
    max-width: 100%;
    max-height: 22rem;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    display: block;
}

.panel.intro .actions {
    text-align: left;
    margin-top: 0.25em;
    justify-content: flex-start !important;
    padding-left: 2.5em !important;
    margin-left: 0 !important;
    list-style: none;
}
.panel.intro .actions li { margin-left: 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   5. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

html { font-size: 112%; }

h1 { font-size: 1.9em; }
h2 { font-size: 1.45em; }
h3 { font-size: 1.05em; }
h4 { font-size: 0.95em; }
h5 { font-size: 0.85em; }
h6 { font-size: 0.75em; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. COLOUR BINDINGS
   ═══════════════════════════════════════════════════════════════════════════ */

#main { background: var(--c-panel); box-shadow: 0 1px 0 0 var(--c-panel-shadow); }
body, input, textarea, select { color: var(--c-text); }
strong, b, h1, h2, h3, h4, h5, h6 { color: var(--c-heading); }
hr  { border-top-color: var(--c-divider); }
blockquote { border-left-color: var(--c-divider); }
header > p { color: var(--c-subheading); }
table.default tbody tr { border-bottom-color: var(--c-divider); }
table.default thead    { border-bottom-color: var(--c-divider); }
form label { color: var(--c-heading); }

/* Community cards & layout -------------------------------------------------- */
.community-section { margin-bottom: 2rem; }
.community-cat-title {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
    opacity: 0.55; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(255,161,177,0.18); padding-bottom: 0.4rem;
}
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.community-card {
    display:flex; flex-direction:column; gap:0.35rem; background:var(--c-panel);
    border:1px solid rgba(255,161,177,0.14); border-radius:0.7rem; padding:1rem 1.1rem;
    text-decoration:none; color:inherit; transition:box-shadow 0.15s, border-color 0.15s;
}
.community-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.community-card-title { font-weight:700; font-size:0.98rem; color:var(--c-heading); }
.community-card-desc { font-size:0.82rem; opacity:0.72; line-height:1.45; }
.community-card-contrib { font-size:0.73rem; opacity:0.55; margin-top:auto; padding-top:0.35rem; }
.community-card-contrib a { text-decoration:none; color:inherit; opacity:0.9; }

/* small dropdown helper used by community contributor autocomplete */
.dropdown-popup {
    position: absolute;
    background: var(--c-panel);
    border: 1px solid rgba(255,161,177,0.12);
    border-radius: 6px;
    padding: 0.25rem;
    min-width: 220px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    z-index: 10000;
}

/* Edit button for community cards (absolute over card) */
.community-edit-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    border: none;
    background: none;
    color: var(--c-accent, inherit);
    cursor: pointer;
    z-index: 2;
}
.community-edit-btn .fa-pen { pointer-events: none; }

/* Lock background scrolling when modal open */
body.modal-open { overflow: hidden; }



/* ═══════════════════════════════════════════════════════════════════════════
   7. BUTTONS
   Add generous padding so buttons feel comfortable to click/tap.
   ═══════════════════════════════════════════════════════════════════════════ */

.button,
a.button,
button.button { border-radius: 0.35rem; }

button.button { cursor: pointer; border: none; font-family: inherit; font-size: inherit; }

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
    background-color: var(--c-btn-primary);
    color: var(--c-heading);
    /* More comfortable padding than the Astral default */
    padding: 0.6rem 1.25rem;
    /* Reduce perceived weight of button text for a lighter appearance */
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.02em;
    border-radius: 0.35rem;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover { background-color: var(--c-btn-primary-h); }

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active { background-color: var(--c-btn-primary-a); color: var(--c-heading); }

input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
button.alt,
.button.alt { background-color: var(--c-btn-alt); color: var(--c-heading); }

input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
button.alt:hover,
.button.alt:hover { background-color: var(--c-btn-alt-h); }

input[type="button"].alt:active,
input[type="submit"].alt:active,
input[type="reset"].alt:active,
button.alt:active,
.button.alt:active { background-color: var(--c-btn-alt-a); }


/* ═══════════════════════════════════════════════════════════════════════════
   8. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
    background: var(--c-field-bg);
    color: var(--c-heading);
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus { background: var(--c-field-focus); }

::-webkit-input-placeholder { color: var(--c-placeholder); }
:-moz-placeholder            { color: var(--c-placeholder); }
::-moz-placeholder           { color: var(--c-placeholder); }
:-ms-input-placeholder       { color: var(--c-placeholder); }
::placeholder                { color: var(--c-placeholder); }


/* ═══════════════════════════════════════════════════════════════════════════
   9. BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * NOTE: The overlay image URL uses a Django {% static %} tag and therefore
 * cannot be set here. It is still applied via an inline <style> in base.html.
 * Only the gradient portion is replicated below for completeness.
 */
/* body { background: linear-gradient(160deg, var(--c-bg-body-from) ... ) } */
/* ↑ left in base.html because it references {% static %} */


/*
 * Dashboard-specific styles (ID card, culvert section, profile modal, mule
 * chips, dark-mode overrides) live in:
 *   templates/partials/dashboard_styles.html
 *
 * That file is included via {% block extra_head %} in the home-page template
 * and is the right place to edit those component styles.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 736px) {
    /* Stack intro panel vertically on small screens */
    #main > .panel.intro {
        flex-direction: column;
        align-items: stretch;
    }
    #main > .panel.intro .image.object {
        width: 100%;
        margin-left: 0;
        margin-top: 1rem;
        padding-right: 0;
    }
    #main > .panel.intro .image.object img {
        max-height: 12rem;
        margin: 0 auto;
    }

    /* Hide edit label text on small screens; show icon only */
    .id-edit-label { display: none; }
}

@media (max-width: 700px) {
    .id-edit-label { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. MOBILE NAV  (hamburger menu for screens ≤ 768 px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hamburger button - hidden on desktop, shown on mobile */
#nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.3rem;
    margin-left: auto;          /* push to right side of brand row */
    background: none;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    color: var(--c-heading);
    flex-shrink: 0;
    order: 99;                  /* after brand */
}
#nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.22s, opacity 0.22s;
    transform-origin: center;
}
/* Animate into X when open */
#paws-nav.nav-open #nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#paws-nav.nav-open #nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#paws-nav.nav-open #nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    /* Show hamburger */
    #nav-hamburger { display: flex; }

    /* Nav wraps: brand on first row, menu panel below */
    #paws-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 0 clamp(0.75rem, 4vw, 1.5rem);
        align-items: center;
        /* Brand row height */
        min-height: 3.5rem;
        position: relative;
    }

    /* Brand stays on its row next to hamburger */
    #paws-nav > .nav-brand {
        flex: 1;
        padding: 0.5rem 0;
        height: 3.5rem;
        display: flex;
        align-items: center;
    }

    /* Nav list - hidden by default, shown as vertical panel when .nav-open */
    #paws-nav > ul {
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid rgba(255, 161, 177, 0.2);
        /* Ensure hamburger + brand row height scrolls through */
    }
    #paws-nav.nav-open > ul { display: flex; }

    /* Full-width list items */
    #paws-nav > ul > li {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    #paws-nav > ul > li > a,
    #paws-nav > ul > li > button#theme-toggle {
        width: 100%;
        padding: 0.65rem 1rem;
        border-bottom: none;
        justify-content: flex-start;
        font-size: 0.9rem;
    }
    /* Profile avatar button: full width on mobile */
    .nav-profile-btn {
        width: 100%;
        padding: 0.65rem 1rem;
        justify-content: flex-start;
        font-size: 0.9rem;
        height: auto;
    }
    /* Profile dropdown: left-aligned on mobile */
    .nav-profile-dropdown { left: 0; right: auto; }
    /* Hide spacer on mobile */
    #paws-nav > ul > li.nav-spacer { display: none; }

    /* Dropdowns expand inline on mobile */
    .nav-dropdown {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 1rem;
        min-width: 0;
        width: 100%;
        background: rgba(255, 161, 177, 0.05);
    }
    #paws-nav > ul > li:hover > .nav-dropdown,
    #paws-nav > ul > li:focus-within > .nav-dropdown { display: block; }

    .nav-dropdown a {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    [data-theme="dark"] #paws-nav > ul { border-top-color: rgba(255, 161, 177, 0.1); }
}

/* Dim overlay behind the open mobile nav (body class toggled via JS) */
body.nav-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 199;               /* just below #paws-nav z-index 200 */
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. SHARED MODAL + ICON-BUTTON UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Available on all pages (paws.css is global). */

.btn-icon {
    background: none;
    border: none;
    color: var(--c-text);
    opacity: 0.75;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1;
    transition: opacity 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover { opacity: 1; background: rgba(255, 161, 177, 0.15); }
[data-theme="dark"] .btn-icon { color: var(--c-text); }

.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(61, 24, 40, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1rem;
}

.modal-card {
    background: var(--c-panel);
    border: 1px solid var(--c-divider);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(61, 24, 40, 0.28);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--c-divider);
    background: rgba(255, 213, 223, 0.4);
    border-radius: 0.75rem 0.75rem 0 0;
}
.modal-header h3 { margin: 0; font-size: 1rem; color: var(--c-heading); }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    padding: 1.2rem 1.4rem 1rem;
}
.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-text);
    opacity: 0.85;
}
.form-grid .full-width { grid-column: 1 / -1; }
.form-grid input,
.form-grid textarea,
.form-grid select {
    margin-top: 0.2rem;
    padding: 0.45rem 0.7rem;
    background: var(--c-field-bg);
    border: 1px solid rgba(255, 161, 177, 0.35);
    border-radius: 0.4rem;
    color: var(--c-text);
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus { outline: none; border-color: rgba(255, 161, 177, 0.8); }
.form-grid input[type="checkbox"] {
    width: 1rem; height: 1rem; padding: 0; margin: 0;
    -webkit-appearance: checkbox; appearance: checkbox;
    background: transparent; border: none;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding-top: 0.5rem;
}
.required { color: #e07; font-weight: 700; }

[data-theme="dark"] .modal-header { background: rgba(42, 16, 24, 0.7); }
[data-theme="dark"] .modal-card { box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid textarea,
[data-theme="dark"] .form-grid select { background: var(--c-field-bg); color: var(--c-text); }