/* ============================================================================
 * Point2Web shared design system.
 *
 * Loaded as the LAST stylesheet on every page so its rules win cascade
 * fights with each template's inline <style> block (those use legacy
 * 5px corners / non-themed colours from the pre-design-system days).
 *
 * Three sections:
 *   1. Theme tokens — CSS variables, light + dark via [data-theme]
 *   2. Pill button styles — apply to every <button>, .btn, button.delete
 *   3. Theme toggle widget — fixed top-right circle, sun/moon icons
 * ============================================================================ */


/* ─── 1. Theme tokens ────────────────────────────────────────────────────── */

/* Default = dark theme. Old templates were designed for dark; we keep that
   as the fallback so a page that fails to read [data-theme] still looks OK. */
:root {
    --p2w-bg:           #1C1C24;
    --p2w-card-bg:      #2C2C34;
    --p2w-text:         #FFFFFF;
    --p2w-text-muted:   #9aa0aa;
    --p2w-border:       rgba(255, 255, 255, 0.18);
    --p2w-input-bg:     #1C1C24;
    --p2w-input-border: rgba(255, 255, 255, 0.18);
    --p2w-accent:       #fd6f17;
    --p2w-accent-hover: #ff873c;
    --p2w-accent-text:  #ffffff;     /* contrast against orange */
    --p2w-danger:       #d9534f;
    --p2w-danger-hover: #c9302c;
    --p2w-shadow:       rgba(0, 0, 0, 0.4);
    --p2w-link:         #5fa8ff;
    color-scheme: dark;
}

/* Explicit light theme — applied when [data-theme="light"] on <html>. */
:root[data-theme="light"] {
    --p2w-bg:           #f5f5f7;
    --p2w-card-bg:      #ffffff;
    --p2w-text:         #1a1a1f;
    --p2w-text-muted:   #6a6a72;
    --p2w-border:       rgba(0, 0, 0, 0.12);
    --p2w-input-bg:     #ffffff;
    --p2w-input-border: rgba(0, 0, 0, 0.18);
    --p2w-accent:       #fd6f17;
    --p2w-accent-hover: #e35e0a;
    --p2w-accent-text:  #ffffff;
    --p2w-danger:       #d9534f;
    --p2w-danger-hover: #c9302c;
    --p2w-shadow:       rgba(0, 0, 0, 0.10);
    --p2w-link:         #0c66dd;
    color-scheme: light;
}

/* OS preference picks light only if the user hasn't explicitly opted into
   either via the theme toggle. The toggle writes [data-theme] to <html>;
   we check :not([data-theme]) so OS preference yields when user picks. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --p2w-bg:           #f5f5f7;
        --p2w-card-bg:      #ffffff;
        --p2w-text:         #1a1a1f;
        --p2w-text-muted:   #6a6a72;
        --p2w-border:       rgba(0, 0, 0, 0.12);
        --p2w-input-bg:     #ffffff;
        --p2w-input-border: rgba(0, 0, 0, 0.18);
        --p2w-accent-hover: #e35e0a;
        --p2w-shadow:       rgba(0, 0, 0, 0.10);
        --p2w-link:         #0c66dd;
        color-scheme: light;
    }
}

/* Apply tokens to body / generic surfaces. Templates inherit via their
   inline body { background-color: #1C1C24 } rule getting overridden by
   :where()-protected rules below. */
html, body {
    background-color: var(--p2w-bg);
    color: var(--p2w-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Catch-all for legacy templates that hard-code body color (e.g.,
   `color: #FFFFFF` inline). The selector targets common containers
   where username greetings, headings, and labels live. We use !important
   sparingly — only on COLOR, not background, so inline backgrounds in
   blocks like .container can still customise themselves. Without this
   rule, switching to light theme leaves white text on a white card
   = invisible. */
.container,
.container *:not(input):not(button):not(.btn):not(.button):not(a):not([class*="wallet"]):not(svg):not(svg *) {
    color: inherit;
}
.container { color: var(--p2w-text); }

/* Common card containers used in legacy templates. We use attribute
   selectors so the rules apply only to elements with these legacy classes;
   profile.html's `.profile-card` keeps its own theming and is unaffected. */
.block,
.card-container,
.audit-block,
.qr-block,
.notfound-block {
    background-color: var(--p2w-card-bg) !important;
    color: var(--p2w-text) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.container {
    background-color: var(--p2w-card-bg) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Legacy logout/header containers in find.html, show_all.html,
   visit_stats.html etc. hardcode `color: #FFFFFF` on the username
   span (e.g. `<div class="logout-container"><span>admin</span> ...`).
   On light theme that becomes invisible (white-on-white). Force
   theme-aware text colour on those spans. The links inside also
   hard-code white-on-grey button styling — leave those alone, they
   read fine in both themes. */
.logout-container span,
.back-container span {
    color: var(--p2w-text) !important;
}

/* Form inputs across the app. */
input[type="text"]:not([data-p2w-skip]),
input[type="password"]:not([data-p2w-skip]),
input[type="email"]:not([data-p2w-skip]),
input[type="tel"]:not([data-p2w-skip]),
input[type="url"]:not([data-p2w-skip]),
input[type="date"]:not([data-p2w-skip]),
input[type="search"]:not([data-p2w-skip]),
input[type="number"]:not([data-p2w-skip]),
textarea:not([data-p2w-skip]),
select:not([data-p2w-skip]) {
    background-color: var(--p2w-input-bg);
    color: var(--p2w-text);
    border: 1px solid var(--p2w-input-border);
    border-radius: 999px;       /* pill */
    padding: 10px 16px;
    font-size: 15px;
    /* Legacy templates set things like `width: 94%` on inputs (which
       was a hand-tuned fudge for the original 5px-corner padding).
       Combined with our 10px+16px padding here, content-box sizing
       made inputs render WIDER than the button below them — input
       overflowed its container's padding-right by ~10px and looked
       offset to the left.
       Forcing border-box makes the declared `width: 94%` (or whatever
       the legacy rule says) include our padding+border, so the input
       sits exactly within its container's content area instead of
       overflowing. */
    box-sizing: border-box;
    /* Force full width inside the parent. Several legacy templates
       set `width: 94%` (or 90%, etc.) on inputs as a hand-tuned
       fudge for the original 5px corners — under that scheme the
       input stayed narrower than the buttons below, which pinned
       at `width: 100%`. After unifying the geometry here we want
       inputs and buttons to share the same width: visually they
       should look like a vertical stack of equal-width pills. The
       !important wins over per-template legacy width declarations. */
    width: 100% !important;
    transition: border-color 0.15s ease, background-color 0.2s ease,
                color 0.2s ease;
}
textarea:not([data-p2w-skip]) {
    /* Multiline inputs can't be a strict pill — round the corners
       generously instead. 12px reads as "matching pill spirit"
       without the half-circle ends pinching multi-line text. */
    border-radius: 12px;
}
input:focus:not([data-p2w-skip]),
textarea:focus:not([data-p2w-skip]),
select:focus:not([data-p2w-skip]) {
    outline: 2px solid var(--p2w-accent);
    outline-offset: 1px;
    border-color: var(--p2w-accent);
}

/* Links inside the body content (not buttons/badges). */
a:not(.btn):not(.button):not([class*="wallet"]):not([data-p2w-skip]) {
    color: var(--p2w-link);
}


/* ─── 2. Pill buttons ────────────────────────────────────────────────────── */

/* The legacy templates use a mix of `<button>`, `.btn`, `button.delete`,
   `button.edit`, etc. We unify them all to pill shape with consistent
   spacing. Per-template styles can still override colours via standard
   cascade — we only enforce SHAPE here, not background/foreground.

   Selector :where() keeps specificity at 0 so per-template styles still win
   for things like background-color. But for border-radius we use a
   non-:where() selector with !important so legacy 5px corners can't beat us
   — the whole point of this patch is consistent pill geometry. */
:where(button, .btn, .button, input[type="submit"], input[type="button"],
       .toggle-btn) {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 22px;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.18s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
}
button,
.btn,
input[type="submit"],
input[type="button"],
.toggle-btn {
    /* Pill geometry — wins over legacy 5px corners via !important.
       This is the core promise of this patch: every button on every page
       has the same pill shape. */
    border-radius: 999px !important;
}
/* Default colour: orange CTA. Per-template styles can override. */
:where(button:not([type="reset"]):not(.delete):not(.btn-secondary),
       .btn:not(.delete):not(.btn-secondary),
       input[type="submit"]) {
    background-color: var(--p2w-accent);
    color: var(--p2w-accent-text);
}
:where(button:not([type="reset"]):not(.delete):not(.btn-secondary):hover,
       .btn:not(.delete):not(.btn-secondary):hover,
       input[type="submit"]:hover) {
    background-color: var(--p2w-accent-hover);
    transform: translateY(-1px);
}

/* Destructive action — red. Templates use `.delete` class on Delete buttons. */
:where(.btn.delete, button.delete) {
    background-color: var(--p2w-danger);
    color: #fff;
}
:where(.btn.delete:hover, button.delete:hover) {
    background-color: var(--p2w-danger-hover);
    transform: translateY(-1px);
}

/* Secondary / cancel button — bordered, transparent fill. */
:where(.btn-secondary, button[type="reset"]) {
    background-color: transparent;
    color: var(--p2w-text);
    border: 1px solid var(--p2w-border);
}
:where(.btn-secondary:hover, button[type="reset"]:hover) {
    background-color: var(--p2w-border);
}

/* Disabled state (greyed out, no hover lift). */
button:disabled,
.btn:disabled,
input[type="submit"]:disabled {
    background-color: var(--p2w-text-muted) !important;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none !important;
}


/* ─── 3. Theme toggle ────────────────────────────────────────────────────── */

/* Fixed circle in the top-right corner, like profile.html's existing one
   but scoped to a different class so we can use a single shared widget
   on every page. The button toggles [data-theme] on <html>; theme.js
   handles the JS, this just styles. */
/* Fixed circle in the bottom-right corner. We chose bottom-right
   (rather than top-right) because most legacy templates already have
   logout / settings buttons clustered top-right, and putting the
   toggle there caused visual overlap. Bottom-right is consistently
   empty across all 20 templates and stays out of the user's primary
   reading flow.

   On mobile we also respect the iPhone home-bar safe area so the
   button doesn't sit on top of the home indicator. */
.p2w-theme-toggle {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--p2w-border) !important;
    background: var(--p2w-card-bg);
    color: var(--p2w-text);
    border-radius: 50% !important;   /* circle, not pill — overrides the 999px above */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: background-color 0.2s ease, transform 0.18s ease;
    /* Touch target meets Apple HIG minimum (44×44). */
    padding: 0;
}
.p2w-theme-toggle:hover {
    background: var(--p2w-border);
    transform: scale(1.05);
}
/* Show only the appropriate icon for the current theme. The .icon-sun
   shows when the page is in DARK mode (clicking it goes to light = sun
   the user is "moving toward"); .icon-moon shows when in LIGHT mode
   (clicking goes to dark). Identical metaphor to profile.html's existing
   toggle so users get one unified mental model across the app. */
.p2w-theme-toggle .icon-sun  { display: none; }
.p2w-theme-toggle .icon-moon { display: inline; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .p2w-theme-toggle .icon-sun  { display: inline; }
    :root:not([data-theme]) .p2w-theme-toggle .icon-moon { display: none; }
}
[data-theme="light"] .p2w-theme-toggle .icon-sun  { display: inline; }
[data-theme="light"] .p2w-theme-toggle .icon-moon { display: none; }
[data-theme="dark"]  .p2w-theme-toggle .icon-sun  { display: none; }
[data-theme="dark"]  .p2w-theme-toggle .icon-moon { display: inline; }

/* Hide on touch devices in idle state — same auto-hide behaviour as
   profile.html (user complained earlier about chrome icons covering
   the photo on phones). The .chrome-revealed class is added by
   theme.js on first interaction, removed 2s after idle. */
@media (hover: none) and (pointer: coarse) {
    .p2w-theme-toggle {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, background-color 0.2s ease,
                    transform 0.18s ease;
    }
    html.chrome-revealed .p2w-theme-toggle {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Mobile responsive — shrink to fit small screens. */
@media (max-width: 480px) {
    .p2w-theme-toggle {
        bottom: max(12px, env(safe-area-inset-bottom, 12px));
        right: 12px;
        width: 40px;
        height: 40px;
    }
}
