/* SaraHome / 莎拉家 — Global Base Layer (tokens + reset + components)
   §R-N+400 (2026-08-10): CSS 架構重構 Phase 2a
   對位 §R-N+62 KISS + §R-N+138 disk-truth
   目的: 打破 style.css God File，建立可維護嘅 CSS 架構
   
   包含:
   - :root tokens (8-dim semantic + spacing + radius + motion + z-index)
   - CSS reset (box-sizing, margin, padding)
   - Global components (body, links, container, header, footer, buttons, forms, flash)
   
   載入順序 (base.html):
   1. pages/_base.css (global base)
   2. style.css (page-specific content + @media overrides)
   3. mobile.css (mobile-first overrides)
   
   對位 P131-G8 source-order: _base.css → style.css → mobile.css
*/

/* ================================================================
   SECTION 1: Tokens (:root)
   ================================================================ */

:root {
    /* === Color tokens (8-dim semantic) === */
    --sarahome-v3-color-bg: #FAFAFA;              /* 暖白底 (SPEC §7 mood B) */
    --sarahome-v3-color-fg: #1F2937;              /* 深灰文字 (SPEC §3 D4) */
    --sarahome-v3-color-accent: #FF8C42;          /* 暖橙強調 (§R-N+288 brand refresh, Option A, 砍藍) */
    --sarahome-v3-color-cta: #FF6B35;             /* 橙紅 CTA (SPEC §3 D4 ✅) */
    --sarahome-v3-color-warm: #FF8C42;            /* 暖橙強調 (SPEC §3 D4 ✅) */
    /* P2-4 a11y AA 深色版 (2026-08-04): 原色只做裝飾/背景, 文字/按鈕用深色版達 WCAG AA 4.5:1 */
    --sarahome-v3-color-accent-aa: #C2410C;       /* 深暖橙 (accent 文字/白字按鈕, 5.19:1 on white) */
    --sarahome-v3-color-cta-aa: #C2410C;          /* 深橙紅 CTA (白字按鈕, 5.19:1) */
    --sarahome-v3-color-text-secondary-aa: #4B5563; /* 次要文字灰 AA (6.9:1 on var(--sarahome-v3-surface-section-alt)) */
    --sarahome-v3-color-success: #10B981;         /* 薄荷綠 (SPEC §3 D4 ✅) */
    --sarahome-v3-color-error: #DC2626;           /* 紅色 error */
    --sarahome-v3-color-info: #2563EB;            /* 藍色 info (§R-N+202 Ship H undo action) */
    --sarahome-v3-color-text-secondary: #6B7280;  /* 次要文字灰 */
    --sarahome-v3-color-text-tertiary: var(--sarahome-v3-color-text-secondary); /* 更淡文字 (specs) — P2-4 AA: 原 #9CA3AF 2.53:1 → var(--sarahome-v3-color-text-secondary) 4.83:1 */
    
    /* === Surface tokens === */
    --sarahome-v3-surface-card: #FFFFFF;
    --sarahome-v3-surface-input: #FFFFFF;
    --sarahome-v3-surface-overlay: #FFFFFF;
    --sarahome-v3-surface-alt: #FFFFFF;
    --sarahome-v3-surface-section-alt: #F3F4F6;
    
    /* === Border + shadow === */
    --sarahome-v3-border: #E5E7EB;
    --sarahome-v3-border-dark: #D1D5DB;
    --sarahome-v3-shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --sarahome-v3-shadow-hover: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
    
    /* === Status tokens === */
    --sarahome-v3-status-success-bg: var(--sarahome-v3-status-success-bg);
    --sarahome-v3-status-success-text: var(--sarahome-v3-status-success-text);
    --sarahome-v3-status-info-bg: var(--sarahome-v3-status-info-bg);
    --sarahome-v3-status-info-text: var(--sarahome-v3-status-info-text);
    --sarahome-v3-status-warning-bg: var(--sarahome-v3-status-warning-bg);
    --sarahome-v3-status-warning-text: var(--sarahome-v3-status-warning-text);
    --sarahome-v3-status-error-bg: var(--sarahome-v3-status-error-bg);
    --sarahome-v3-status-error-text: var(--sarahome-v3-status-error-text);
    --sarahome-v3-status-error-border: #FECACA;
    
    /* === Footer tokens === */
    --sarahome-v3-footer-bg: var(--sarahome-v3-color-fg);
    --sarahome-v3-footer-border: #374151;
    --sarahome-v3-footer-heading: #F9FAFB;
    --sarahome-v3-footer-text: #9CA3AF;
    --sarahome-v3-footer-muted: #9CA3AF;          /* P2-4 AA: 原 var(--sarahome-v3-color-text-secondary) 3.03:1 on var(--sarahome-v3-color-fg) → #9CA3AF 5.87:1 */
    
    /* === Hero gradient === */
    --sarahome-v3-hero-gradient-from: rgba(255, 247, 237, 0.95);
    --sarahome-v3-hero-gradient-to: rgba(254, 226, 226, 0.9);
    
    /* === Modal backdrop === */
    --sarahome-v3-modal-backdrop: rgba(0, 0, 0, 0.5);
    
    /* === Typography === */
    --sarahome-v3-font-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    --sarahome-v3-font-en: 'Inter', 'Source Sans Pro', sans-serif;

    /* §R-N+432 (2026-08-11) P0.1 typography 6 級 hierarchy (對位 §R-N+290 typography 3 級 chain)
       _base.css + style.css 雙邊 ship token def, 對位 P131-G8 source-order (_base 先載入). */
    --sarahome-v3-font-xs:   0.75rem;
    --sarahome-v3-font-sm:   0.875rem;
    --sarahome-v3-font-base: 1rem;
    --sarahome-v3-font-md:   1.125rem;
    --sarahome-v3-font-lg:   1.25rem;
    --sarahome-v3-font-xl:   1.5rem;

    /* §R-N+432 mobile ≤768 typography override (3 級 chain, §P-MD-06) */
    @media (max-width: 768px) {
        :root {
            --sarahome-v3-font-md:  1rem;
            --sarahome-v3-font-lg:  1.125rem;
            --sarahome-v3-font-xl:  1.375rem;
        }
    }

    /* §R-N+435 (2026-08-11) P0.4 touch target token (對位 §P-MD-05 Apple HIG 44px)
       _base.css + style.css 雙邊 ship token def, 對位 P131-G8 source-order. */
    --sarahome-v3-touch-target:    44px;
    --sarahome-v3-touch-target-sm: 36px;
    --sarahome-v3-touch-target-lg: 52px;

    /* §R-N+435 mobile ≤768 touch target override */
    @media (max-width: 768px) {
        :root {
            --sarahome-v3-touch-target-sm: 36px;
            --sarahome-v3-touch-target-lg: 52px;
        }
    }

    /* === Spacing scale (4/8/12/16/24/32/48/64) === */
    /* §R-N+400 (2026-08-10): Space tokens 修正 — 消除重複 + 符合 4/8 scale */
    --sarahome-v3-space-1: 0.25rem;   /* 4px */
    --sarahome-v3-space-2: 0.5rem;    /* 8px */
    --sarahome-v3-space-3: 0.75rem;   /* 12px — 修正：原 0.5rem 重複 */
    --sarahome-v3-space-4: 0.8rem;    /* 12.8px — 收緊 */
    --sarahome-v3-space-5: 1.25rem;   /* 20px — 新增（top hardcoded 值） */
    --sarahome-v3-space-6: 1.5rem;    /* 24px — 修正：原 1rem 重複 */
    --sarahome-v3-space-8: 2rem;      /* 32px — 修正：原 1rem 重複 */
    --sarahome-v3-space-12: 3rem;     /* 48px — 修正：原 1rem 重複 */
    --sarahome-v3-space-16: 4rem;     /* 64px — 保持 */
    
    /* === Radius === */
    --sarahome-v3-radius-sm: 8px;
    --sarahome-v3-radius-md: 12px;
    --sarahome-v3-radius-lg: 16px;
    --sarahome-v3-radius-xl: 24px;
    
    /* === Motion === */
    --sarahome-v3-duration-fast: 0.15s;
    --sarahome-v3-duration-base: 0.3s;
    --sarahome-v3-duration-slow: 0.5s;
    --sarahome-v3-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === Z-index === */
    --sarahome-v3-z-drawer: 1000;
    --sarahome-v3-z-modal: 2000;
    --sarahome-v3-z-toast: 3000;
}

/* ================================================================
   SECTION 2: Reset
   ================================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Skip Navigation Link (WCAG 2.4.1) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 12px 24px;
    background: var(--sarahome-v3-color-cta);
    color: #fff;
    font-weight: 600;
    font-size: var(--sarahome-v3-font-sm, 0.875rem);
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}

/* ================================================================
   SECTION 3: Global Base (body, links, container)
   ================================================================ */

/* §R-N+137 Airbnb 呼吸感: line-height 1.7 + 字距微調 */
body {
    font-family: var(--sarahome-v3-font-zh);
    background-color: var(--sarahome-v3-color-bg);
    color: var(--sarahome-v3-color-fg);
    line-height: 1.7;               /* §R-N+137 放大行高 (原 1.6) */
    letter-spacing: 0.01em;         /* §R-N+137 微調字距 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--sarahome-v3-color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1280px;  /* §R-N+164 — 對位 .featured-listings / .quick-actions-grid 1280px chain 統一 */
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ================================================================
   SECTION 4: Header
   ================================================================ */

.site-header {
    background: var(--sarahome-v3-surface-section-alt);   /* §R-N+140: 統一 var(), light=#FFFFFF / dark=#2D2D2D 自動切 */
    border-bottom: 1px solid var(--sarahome-v3-border);
    padding: 0.5rem 0;
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* V10 — Logo3 img (SaraHomeLogo3.png 500x500, 1:1 square icon, 純 icon + 旁邊 wordmark lockup) */
.brand-logo-img {
    display: block;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.logo-cube {
    font-size: 2rem;
    color: var(--sarahome-v3-color-accent);
    line-height: 1;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-text strong {
    font-size: 1.25rem;
    color: var(--sarahome-v3-color-fg);
}

.logo-text em {
    font-style: normal;
    font-size: 0.875rem;
    color: var(--sarahome-v3-color-accent);
}

.site-nav {
    display: flex;
    gap: 1.5rem;
    flex: 1;
}

.site-nav a {
    color: var(--sarahome-v3-color-fg);
    font-weight: 500;
}

.user-menu {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.mobile-header-actions,
.mobile-bottom-nav,
.mobile-district-sheet-tools {
     display: none;
}

.user-email {
    color: var(--sarahome-v3-color-text-secondary);
    font-size: 0.875rem;
}

/* 2026-09-09 (CEO): 帳戶名稱 (email) = clickable → /auth/account 帳號狀態
   specificity 對位: 要贏過 style.css 嘅 .user-email (0,1,0)
   + .mobile-user-menu .user-email (0,2,0) → 用 (0,2,1) */
.user-menu a.user-email,
.mobile-user-menu a.user-email {
    color: var(--sarahome-v3-color-text-secondary);
    text-decoration: none;
    cursor: pointer;
}

.user-menu a.user-email:hover,
.mobile-user-menu a.user-email:hover {
    color: var(--sarahome-v3-color-text);
    text-decoration: underline;
}

/* ================================================================
   SECTION 5: Auth buttons
   ================================================================ */

.btn-login, .btn-register, .btn-logout {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.btn-login {
    color: var(--sarahome-v3-color-accent);
    border: 1px solid var(--sarahome-v3-color-accent);
}

.btn-register {
    background: var(--sarahome-v3-color-accent-aa);
    color: white;
    transition: background var(--sarahome-v3-duration-fast) ease;
}
.btn-register:hover {
    background: #A83A0A;
}

.btn-logout {
    color: var(--sarahome-v3-color-text-secondary);
    border: 1px solid var(--sarahome-v3-border);
}

.super-admin-link {
    background: var(--sarahome-v3-color-error);
    color: white !important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: bold;
}

/* ================================================================
   SECTION 6: Site main
   ================================================================ */

.site-main {
    flex: 1;
    padding: 0;  /* §R-N+135.12 (2026-07-22) — 2rem 0 → 0 (CEO: site-main padding 改為0) */
}

/* ================================================================
   SECTION 7: Footer
   ================================================================ */

.site-footer {
    background: var(--sarahome-v3-footer-bg);   /* §R-N+140: var() 統一控制, dark=更炭 */
    color: var(--sarahome-v3-footer-text);
    padding: 1rem 0 1rem;
    margin-top: 4rem;
    font-size: 0.875rem;
}

.site-footer .container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-services {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;

}

.footer-services strong {
    color: var(--sarahome-v3-footer-heading);
    font-size: 0.9375rem;
}

/* §R-N+159 (CEO 2026-07-27) — footer-brand-summary 對齊 (§R-N+62 KISS + §R-N+138  audit)
   根因: footer-brand-summary 入面 <strong> + <span> 兩行, brand summary 嘅 vertical center 對住 services links
   用 align-items: center 對齊 */
.footer-brand-summary {
    display: grid;
    gap: 0.25rem;
    align-self: center;
}

.footer-brand-summary span {
    color: var(--sarahome-v3-footer-text);
    font-size: 0.8125rem;
}

.footer-services-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.footer-services a {
    color: var(--sarahome-v3-footer-text);
    font-weight: 600;
    text-decoration: none;
}

.footer-services a:hover {
    color: var(--sarahome-v3-color-warm);
}

.disclaimer {
    /* §R-N+365 (2026-08-05): D6 disclaimer line-height 微調
       對位 §R-N+137 Airbnb typography: line-height 1.8 → 1.7
       (dark band 細字 0.875rem * 1.8 過鬆, 1.7 視覺密度更舒適). */
    line-height: 1.7;
    color: var(--sarahome-v3-footer-text);
}

.disclaimer a {
    color: var(--sarahome-v3-color-warm);
}

.mascot-credit {
    color: var(--sarahome-v3-color-warm);
    font-size: 1rem;
}

.copyright {
    color: var(--sarahome-v3-footer-muted);
    font-size: 0.8125rem;
    border-top: 1px solid var(--sarahome-v3-footer-border);
    padding-top: 1rem;
}

/* §R-N+252 — Dark mode 完全移除, footer 用 .site-footer 自身 base style */

/* ================================================================
   SECTION 8: Flash messages
   ================================================================ */

/* Flash messages (對位 §7.1 溫馨) */
.flash-messages {
    max-width: 1280px;  /* §R-N+164 — 對位 .container 1280px chain */
    margin: 1rem auto;
    padding: 0 1.25rem;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.flash-success {
    background: #DCFCE7;
    color: #166534;
    border-left: 4px solid var(--sarahome-v3-color-success);
}

.flash-error {
    background: var(--sarahome-v3-status-error-bg);
    color: var(--sarahome-v3-status-error-text);
    border-left: 4px solid var(--sarahome-v3-color-error);
}

.flash-warning {
    background: var(--sarahome-v3-status-warning-bg);
    color: var(--sarahome-v3-status-warning-text);
    border-left: 4px solid var(--sarahome-v3-color-warning-amber-light);
}

/* ================================================================
   SECTION 9: Buttons (WCAG AA compliant)
   ================================================================ */

/* Buttons — v0.56.1 (2026-08-08, CEO feedback 8/8: 白字 contrast 並沒有實現):
   預設 background + hover + active + focus 統一用 cta-aa 深色版 #C2410C (5.19:1)
   守住 WCAG AA 4.5:1. 根因: 多個 scoped rule (.listing-actions .btn-primary /
   .error-actions .btn-primary / .offline-actions .btn-primary) 同 PlanD V3
   重複 .btn-primary 都寫 background: cta (#FF6B35), 跌穿 AA 3.36:1.
   對位 §R-N+62 KISS: 全部同 cascade 級別, 後寫後贏. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary:focus {
    background: var(--sarahome-v3-color-cta-aa);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background var(--sarahome-v3-duration-fast, 0.15s) ease;
}

/* v0.56.1: override scoped rules (specificity 對齊 — 同 selector 結構, 後寫後贏) */
.listing-actions .btn-primary,
.listing-actions .btn-primary:hover,
.listing-actions .btn-primary:focus-visible,
.listing-actions .btn-primary:active,
.error-actions .btn-primary,
.error-actions .btn-primary:hover,
.error-actions .btn-primary:focus-visible,
.error-actions .btn-primary:active,
.offline-actions .btn-primary,
.offline-actions .btn-primary:hover,
.offline-actions .btn-primary:focus-visible,
.offline-actions .btn-primary:active {
    background: var(--sarahome-v3-color-cta-aa);
}

/* v0.56.1: override PlanD V3 component .btn-primary 重複 (line 9164 寫 background cta) */
.btn-primary {
    background: var(--sarahome-v3-color-cta-aa);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--sarahome-v3-surface-card);
    color: var(--sarahome-v3-color-accent-aa);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--sarahome-v3-color-accent-aa);
    cursor: pointer;
    font-size: 1rem;
    transition: background var(--sarahome-v3-duration-fast, 0.15s) ease;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: rgba(194, 65, 12, 0.06);
    color: var(--sarahome-v3-color-accent-aa);
    border-color: var(--sarahome-v3-color-accent-aa);
}

/* ================================================================
   SECTION 10: Forms (base)
   ================================================================ */

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 0.375rem;
    font-size: 1rem;
    font-family: var(--sarahome-v3-font-zh);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--sarahome-v3-color-accent);
}

/* ================================================================
   SECTION 9: Status Pill (§R-N+4xx+14 Plan D D4.1)
   ================================================================ */

/* §R-N+4xx+14 (2026-08-10): 補齊 6 個 status-pill CSS variant 對位 template 真値
   對位 §R-N+62 KISS: 1 commit 1 concern (D4.1 CSS completion), 0 template change
   對位 §R-N+138 disk-truth: 0 對 partner-invite.css 改動, 純 forward-only CSS token
   對位 §R-N+290 style consistency: 100% token-based, 0 hardcoded color
   對位 master plan v0.88 §Category D4: status pill DRY macro (1-2 commits)

   :
   - §R-N+79 selective narrative: 0 改 partner-invite.css 已 ship CSS (5 variants)
   - §R-N+283 source-order: _base.css 喺 style.css 之前, 新 rules 自動被 style.css 覆蓋 (後寫後贏)
   - §R-N+251 mirror SOP: 對位 partner-invite.css L167-195 嘅 pattern

   已 ship (partner-invite.css L167-195):
   - .status-pill base class
   - .status-pill.active, .used, .expired, .revoked, .frozen (5 variants)

   D4.1 補 (6 variants):
   - .status-pill.churned (partner L2 已流失)
   - .status-pill.sold (sales listing 已售)
   - .status-pill.rented (rental listing 已租)
   - .status-pill.withdrawn (listing 已下架)
   - .status-pill.pending (待覆核)
   - .status-pill.warning, .info, .active, .suspended, .pending_audit (L4 admin 對位 R69)
*/

.status-pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Sales listing 4 status (對位 l2_detail L90-103) */
.status-pill.active {
    background: var(--sarahome-v3-status-success-bg);
    color: var(--sarahome-v3-status-success-text);
}

.status-pill.frozen {
    background: var(--sarahome-v3-status-error-bg);
    color: var(--sarahome-v3-status-error-text);
}

.status-pill.sold {
    background: var(--sarahome-v3-surface-section-alt);
    color: var(--sarahome-v3-color-text-secondary);
}

.status-pill.withdrawn {
    background: var(--sarahome-v3-surface-section-alt);
    color: var(--sarahome-v3-color-text-secondary);
}

/* Rental listing 4 status (對位 l2_detail L132-145) */
.status-pill.rented {
    background: var(--sarahome-v3-status-info-bg);
    color: var(--sarahome-v3-status-info-text);
}

/* L2 user status (對位 l2_list L44-49) */
.status-pill.churned {
    background: var(--sarahome-v3-status-error-bg);
    color: var(--sarahome-v3-status-error-text);
}

.status-pill.pending {
    background: var(--sarahome-v3-shadow-color-warning);
    color: #B45309;
}

/* L4 admin extra status (對位 super_admin users dashboard R69) */
.status-pill.warning {
    background: var(--sarahome-v3-shadow-color-warning);
    color: #B45309;
}

.status-pill.info {
    background: var(--sarahome-v3-shadow-color-brand-blue-strong);
    color: var(--sarahome-v3-status-info-text);
}

.status-pill.suspended {
    background: rgba(239, 68, 68, 0.12);
    color: var(--sarahome-v3-status-error-text-strong);
}

.status-pill.pending_audit {
    background: rgba(167, 139, 250, 0.15);
    color: #6D28D9;
}