/* ═══════════════════════════════════════════════════════════════
   GLOBAL — Studio photo backdrop on every page
═══════════════════════════════════════════════════════════════ */
body {
    background-image: url("/static/studio/images/bg.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

/* Hive-style layered tint applied over the studio photo on every page. */
html body .overlay {
    background-color: transparent !important;
    background-image:
        radial-gradient(ellipse at top right,
            rgba(242, 160, 7, 0.025),
            transparent 75%),
        linear-gradient(to right,
            rgba(26, 24, 22, 0.55),
            rgba(26, 24, 22, 0.38),
            rgba(26, 24, 22, 0.28)),
        linear-gradient(to bottom,
            rgba(26, 24, 22, 0.55),
            rgba(26, 24, 22, 0.42),
            rgba(26, 24, 22, 0.75)) !important;
    min-height: 100vh !important;
}

/* ═══════════════════════════════════════════════════════════════
   WARM-YELLOW THEME — site-wide override of legacy gold tokens.
   Brings every page in line with the homepage Hive palette.
   Palette:
     #FFB627  warm amber (primary)
     #F2A007  honey (button base)
     #D48A05  darker honey (button end)
     #FFD276  light amber (highlights)
     #fff3b0  pale cream (shimmer peak)
     #bfa046  deep gold (shimmer edges)
═══════════════════════════════════════════════════════════════ */

/* Gold shimmer — match homepage warm-amber gradient */
.gold-shimmer {
    background: linear-gradient(90deg, #bfa046 0%, #FFB627 25%, #fff3b0 50%, #FFB627 75%, #bfa046 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Legacy .gold-text helper */
.gold-text { color: #FFB627 !important; }

/* Glass-card / glass borders */
.glass-card, .glass { border-color: rgba(242, 160, 7, 0.30) !important; }

/* ── Tailwind yellow utilities — solid colours ───────────────── */
.text-yellow-200 { color: #FFE38A !important; }
.text-yellow-300 { color: #FFD276 !important; }
.text-yellow-400 { color: #FFB627 !important; }
.text-yellow-500 { color: #F2A007 !important; }
.text-yellow-600 { color: #D48A05 !important; }

.bg-yellow-300 { background-color: #FFD276 !important; }
.bg-yellow-400 { background-color: #FFB627 !important; }
.bg-yellow-500 { background-color: #F2A007 !important; }
.bg-yellow-600 { background-color: #D48A05 !important; }

.border-yellow-300 { border-color: #FFD276 !important; }
.border-yellow-400 { border-color: #FFB627 !important; }
.border-yellow-500 { border-color: #F2A007 !important; }
.border-yellow-600 { border-color: #D48A05 !important; }

/* ── Tailwind yellow opacity variants — backgrounds ──────────── */
.bg-yellow-400\/5,  .bg-yellow-400\/05 { background-color: rgba(255, 182, 39, 0.05) !important; }
.bg-yellow-400\/10 { background-color: rgba(255, 182, 39, 0.10) !important; }
.bg-yellow-400\/15 { background-color: rgba(255, 182, 39, 0.15) !important; }
.bg-yellow-400\/20 { background-color: rgba(255, 182, 39, 0.20) !important; }
.bg-yellow-400\/25 { background-color: rgba(255, 182, 39, 0.25) !important; }
.bg-yellow-400\/30 { background-color: rgba(255, 182, 39, 0.30) !important; }
.bg-yellow-400\/40 { background-color: rgba(255, 182, 39, 0.40) !important; }
.bg-yellow-500\/10 { background-color: rgba(242, 160, 7, 0.10) !important; }
.bg-yellow-500\/15 { background-color: rgba(242, 160, 7, 0.15) !important; }
.bg-yellow-500\/20 { background-color: rgba(242, 160, 7, 0.20) !important; }
.bg-yellow-500\/25 { background-color: rgba(242, 160, 7, 0.25) !important; }

/* ── Tailwind yellow opacity variants — borders ──────────────── */
.border-yellow-300\/40 { border-color: rgba(255, 210, 118, 0.40) !important; }
.border-yellow-400\/10 { border-color: rgba(255, 182, 39, 0.10) !important; }
.border-yellow-400\/15 { border-color: rgba(255, 182, 39, 0.15) !important; }
.border-yellow-400\/20 { border-color: rgba(255, 182, 39, 0.20) !important; }
.border-yellow-400\/25 { border-color: rgba(255, 182, 39, 0.25) !important; }
.border-yellow-400\/30 { border-color: rgba(255, 182, 39, 0.30) !important; }
.border-yellow-400\/40 { border-color: rgba(255, 182, 39, 0.40) !important; }
.border-yellow-400\/45 { border-color: rgba(255, 182, 39, 0.45) !important; }
.border-yellow-400\/50 { border-color: rgba(255, 182, 39, 0.50) !important; }
.border-yellow-400\/60 { border-color: rgba(255, 182, 39, 0.60) !important; }
.border-yellow-500\/30 { border-color: rgba(242, 160, 7, 0.30) !important; }
.border-yellow-500\/40 { border-color: rgba(242, 160, 7, 0.40) !important; }

/* ── Tailwind yellow opacity variants — text ─────────────────── */
.text-yellow-300\/85 { color: rgba(255, 210, 118, 0.85) !important; }
.text-yellow-400\/40 { color: rgba(255, 182, 39, 0.40) !important; }
.text-yellow-400\/60 { color: rgba(255, 182, 39, 0.60) !important; }
.text-yellow-400\/70 { color: rgba(255, 182, 39, 0.70) !important; }
.text-yellow-400\/80 { color: rgba(255, 182, 39, 0.80) !important; }

/* ── Tailwind gradient stops (used in CTA buttons) ───────────── */
.from-yellow-300 { --tw-gradient-from: #FFD276 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(255, 210, 118, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-yellow-400 { --tw-gradient-from: #FFB627 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(255, 182, 39, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-yellow-500 { --tw-gradient-from: #F2A007 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(242, 160, 7, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-yellow-500 { --tw-gradient-to: rgba(242, 160, 7, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #F2A007 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-yellow-400 { --tw-gradient-to: #FFB627 var(--tw-gradient-to-position) !important; }
.to-yellow-500 { --tw-gradient-to: #F2A007 var(--tw-gradient-to-position) !important; }
.to-yellow-600 { --tw-gradient-to: #D48A05 var(--tw-gradient-to-position) !important; }

/* ── Box shadows that use the legacy yellow #FFD700 / #D4AF37 ─ */
.glow-gold, .progress-glow {
    box-shadow: 0 0 15px rgba(242, 160, 7, 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE-FIRST OVERRIDES  (applies at ≤ 640px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Base typography ─────────────────────────────────── */
    html { -webkit-text-size-adjust: 100%; }
    body { font-size: 15px !important; line-height: 1.45; }

    /* Headings */
    h1 { font-size: 1.45rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.15rem !important; line-height: 1.25 !important; }
    h3 { font-size: 1.05rem !important; }

    /* Force-larger small-text utility classes for readability */
    .text-xs { font-size: 0.82rem !important; line-height: 1.35 !important; }
    .text-sm { font-size: 0.95rem !important; line-height: 1.4 !important; }

    /* ── Tap targets ─────────────────────────────────────── */
    button, a[class*="rounded-full"], a[class*="rounded-xl"],
    a[class*="rounded-lg"], input[type="submit"],
    .tab-btn, .act-btn, .act-btn-sm, .action-card {
        min-height: 42px;
    }
    button[class*="text-xs"], a[class*="text-xs"][class*="rounded"],
    button[class*="py-1"]    , a[class*="py-1"][class*="rounded"] {
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
    }
    /* Mark all rounded buttons full-width when inside a flex column */
    form button { width: 100%; }
    form.inline-form button { width: auto; }

    /* ── Tables → stacked cards ─────────────────────────── */
    table:not(.no-stack) {
        display: block !important;
        width: 100% !important;
        border-collapse: separate;
    }
    table:not(.no-stack) thead {
        position: absolute !important;
        left: -9999px !important;
        clip: rect(0 0 0 0) !important;
    }
    table:not(.no-stack) tbody { display: block !important; width: 100%; }
    table:not(.no-stack) tr {
        display: block !important;
        margin-bottom: 0.85rem !important;
        padding: 0.85rem 1rem !important;
        background: rgba(255, 215, 0, 0.05) !important;
        border: 1px solid rgba(255, 215, 0, 0.18) !important;
        border-radius: 0.85rem !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    }
    table:not(.no-stack) td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.75rem;
        padding: 0.55rem 0 !important;
        border-bottom: 1px dashed rgba(255, 215, 0, 0.10) !important;
        text-align: right !important;
        font-size: 0.92rem !important;
        word-break: break-word;
        white-space: normal !important;
    }
    table:not(.no-stack) td:last-child { border-bottom: none !important; }

    /* Show column label before each cell using data-label */
    table:not(.no-stack) td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        color: #d4af37;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        margin-right: 0.5rem;
        flex-shrink: 0;
        text-align: left;
    }

    /* "No data" rows (colspan placeholders) */
    table:not(.no-stack) tr:has(td[colspan]) {
        background: transparent !important;
        border: none !important;
        text-align: center !important;
    }
    table:not(.no-stack) td[colspan] {
        display: block !important;
        text-align: center !important;
        border-bottom: none !important;
        padding: 1.5rem 0 !important;
    }
    table:not(.no-stack) td[colspan]::before { content: none !important; }

    /* Stack action-cell buttons vertically on phone */
    table:not(.no-stack) td .flex {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 0.4rem !important;
    }

    /* ── Cards / glass tiles ─────────────────────────────── */
    .glass, .glass-card, .tile {
        border-radius: 1rem !important;
    }
    /* Reduce excessive padding inside glass-cards */
    .glass-card.p-7, .glass-card.sm\:p-7, .glass-card.p-8, .glass-card.sm\:p-8 {
        padding: 1rem !important;
    }

    /* ── Badges / pills ─────────────────────────────────── */
    span[class*="rounded-full"][class*="text-xs"] {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.55rem !important;
    }

    /* ── Forms ──────────────────────────────────────────── */
    input, select, textarea, .input-field, .flatpickr-alt-input {
        font-size: 16px !important;   /* prevents iOS auto-zoom */
        min-height: 44px;
    }
    textarea { min-height: 72px; }
    label { font-size: 0.9rem !important; }

    /* ── Spacing fixes ──────────────────────────────────── */
    .space-y-8 > * + * { margin-top: 1.25rem !important; }
    .space-y-6 > * + * { margin-top: 1rem    !important; }

    /* ── Hide truly-decorative-only desktop columns ─────── */
    .mobile-hide { display: none !important; }
}

/* ── Always: better focus rings on touch devices ───────── */
button:focus-visible, a:focus-visible {
    outline: 2px solid #f6e27a;
    outline-offset: 2px;
}