/* ============================================================ PPShop Admin Themes — v50 with Pastel Pro (Pantone-inspired) ใช้ class บน : theme-{id} Default = Warm Brown (อยู่ใน design-system.css) หมวด CLASSIC (5): theme-ocean, theme-forest, theme-purple, theme-rose, theme-dark หมวด PASTEL PRO (7): จาก Pantone palette theme-sakura, theme-macaron, theme-seaside, theme-sherbet, theme-lilac, theme-sage, theme-butter ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@200;300;400;500;600;700;800;900&display=swap'); /* ============================================ CLASSIC THEMES (5) ============================================ */ /* THEME: Ocean Blue */ html.theme-ocean { --color-primary: #0369A1; --color-primary-dark: #075985; --color-primary-light: #BAE6FD; --color-secondary: #0891B2; --color-secondary-dark: #0E7490; --color-accent: #38BDF8; --color-bg: #F0F9FF; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #082F49; --color-ink-light: #334155; --color-muted: #64748B; --color-border: #BAE6FD; --color-border-light: #E0F2FE; } html.theme-ocean .admin-sidebar { background: linear-gradient(180deg, #082F49 0%, #075985 100%) !important; } html.theme-ocean .pos-topbar { background: linear-gradient(135deg, #082F49, #0C4A6E) !important; } /* THEME: Forest Green */ html.theme-forest { --color-primary: #15803D; --color-primary-dark: #14532D; --color-primary-light: #BBF7D0; --color-secondary: #65A30D; --color-secondary-dark: #4D7C0F; --color-accent: #4ADE80; --color-bg: #F0FDF4; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #052E16; --color-ink-light: #1F2937; --color-muted: #4B5563; --color-border: #BBF7D0; --color-border-light: #DCFCE7; } html.theme-forest .admin-sidebar { background: linear-gradient(180deg, #052E16 0%, #14532D 100%) !important; } html.theme-forest .pos-topbar { background: linear-gradient(135deg, #052E16, #166534) !important; } /* THEME: Royal Purple */ html.theme-purple { --color-primary: #6D28D9; --color-primary-dark: #5B21B6; --color-primary-light: #DDD6FE; --color-secondary: #9333EA; --color-secondary-dark: #7E22CE; --color-accent: #A78BFA; --color-bg: #FAF5FF; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #2E1065; --color-ink-light: #3730A3; --color-muted: #6B7280; --color-border: #E9D5FF; --color-border-light: #F3E8FF; } html.theme-purple .admin-sidebar { background: linear-gradient(180deg, #2E1065 0%, #4C1D95 100%) !important; } html.theme-purple .pos-topbar { background: linear-gradient(135deg, #2E1065, #4C1D95) !important; } /* THEME: Rose Gold */ html.theme-rose { --color-primary: #BE185D; --color-primary-dark: #9D174D; --color-primary-light: #FBCFE8; --color-secondary: #DB2777; --color-secondary-dark: #BE185D; --color-accent: #F472B6; --color-bg: #FFF1F2; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #500724; --color-ink-light: #831843; --color-muted: #6B7280; --color-border: #FBCFE8; --color-border-light: #FCE7F3; } html.theme-rose .admin-sidebar { background: linear-gradient(180deg, #500724 0%, #831843 100%) !important; } html.theme-rose .pos-topbar { background: linear-gradient(135deg, #500724, #9F1239) !important; } /* THEME: Midnight Dark */ html.theme-dark { --color-primary: #FBBF24; --color-primary-dark: #D97706; --color-primary-light: #422006; --color-secondary: #F59E0B; --color-secondary-dark: #D97706; --color-accent: #FDE68A; --color-bg: #0F0F0F; --color-bg-alt: #1F1F1F; --color-surface: #262626; --color-ink: #FAFAFA; --color-ink-light: #E5E5E5; --color-muted: #A3A3A3; --color-border: #404040; --color-border-light: #262626; --color-success: #4ADE80; --color-warning: #FBBF24; --color-danger: #F87171; color-scheme: dark; } html.theme-dark body { background: #0F0F0F; color: #FAFAFA; } html.theme-dark .admin-sidebar { background: linear-gradient(180deg, #000000 0%, #171717 100%) !important; } html.theme-dark .pos-topbar { background: linear-gradient(135deg, #000000, #171717) !important; } html.theme-dark .panel, html.theme-dark .card, html.theme-dark .modal, html.theme-dark .kpi-card { background: #262626 !important; border-color: #404040 !important; color: #FAFAFA; } html.theme-dark input, html.theme-dark select, html.theme-dark textarea { background: #1F1F1F !important; color: #FAFAFA !important; border-color: #525252 !important; } html.theme-dark input::placeholder { color: #737373 !important; } html.theme-dark .btn-outline { border-color: #525252; color: #E5E5E5; } html.theme-dark .btn-outline:hover { background: #404040; color: #FAFAFA; } html.theme-dark .table tr:hover td { background: #2C2C2C !important; } html.theme-dark .table th { background: #1F1F1F; color: #E5E5E5; } html.theme-dark .table td { border-color: #404040; } /* ============================================================ PASTEL PRO THEMES (7) — Pantone-inspired sync กับ customer themes (ctheme-sakura, ctheme-macaron, ...) ============================================================ */ /* THEME: Sakura Bloom — ชมพูพาสเทล Pantone */ html.theme-sakura { --color-primary: #A8345B; --color-primary-dark: #7A2342; --color-primary-light: #FFE4EC; --color-secondary: #E5638A; --color-secondary-dark: #C24A6E; --color-accent: #FFB6B9; --color-bg: #FFF5F7; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #4A1830; --color-ink-light: #7A3854; --color-muted: #9B6680; --color-border: #FFD4E0; --color-border-light: #FFE8EF; } html.theme-sakura .admin-sidebar { background: linear-gradient(180deg, #4A1830 0%, #7A2342 100%) !important; } html.theme-sakura .pos-topbar { background: linear-gradient(135deg, #4A1830, #A8345B) !important; } /* THEME: Macaron Mix — Pantone หลากสี */ html.theme-macaron { --color-primary: #A8482F; --color-primary-dark: #7A2F1F; --color-primary-light: #FCE5C8; --color-secondary: #E07B5E; --color-secondary-dark: #C25A3F; --color-accent: #95E1D3; --color-bg: #FFFCF7; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #3D2418; --color-ink-light: #6B4530; --color-muted: #9C7F66; --color-border: #F5E2D0; --color-border-light: #FAEEDE; } html.theme-macaron .admin-sidebar { background: linear-gradient(180deg, #3D2418 0%, #6B4530 100%) !important; } html.theme-macaron .pos-topbar { background: linear-gradient(135deg, #3D2418, #7A3F12) !important; } /* THEME: Seaside Calm — ฟ้าพาสเทล */ html.theme-seaside { --color-primary: #1E7A99; --color-primary-dark: #155A75; --color-primary-light: #CCEDF7; --color-secondary: #4ABBF3; --color-secondary-dark: #2A9BC8; --color-accent: #FFB5BA; --color-bg: #F2FAFD; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #0C3E50; --color-ink-light: #1F5F7A; --color-muted: #5A8BA0; --color-border: #C8E8F2; --color-border-light: #E0F2F7; } html.theme-seaside .admin-sidebar { background: linear-gradient(180deg, #0C3E50 0%, #155A75 100%) !important; } html.theme-seaside .pos-topbar { background: linear-gradient(135deg, #0C3E50, #1E7A99) !important; } /* THEME: Sherbet Sunset — ส้มพีชพาสเทล */ html.theme-sherbet { --color-primary: #B84A2A; --color-primary-dark: #8C3719; --color-primary-light: #FFE0CC; --color-secondary: #D9603D; --color-secondary-dark: #B84A2A; --color-accent: #FFB088; --color-bg: #FFF7F0; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #3D1A0A; --color-ink-light: #6B3018; --color-muted: #A06850; --color-border: #FFD6BA; --color-border-light: #FFE5D2; } html.theme-sherbet .admin-sidebar { background: linear-gradient(180deg, #3D1A0A 0%, #6B3018 100%) !important; } html.theme-sherbet .pos-topbar { background: linear-gradient(135deg, #3D1A0A, #8C3719) !important; } /* THEME: Lilac Mist — ม่วงพาสเทลละมุน */ html.theme-lilac { --color-primary: #7A4292; --color-primary-dark: #5B2E70; --color-primary-light: #EFE0F5; --color-secondary: #9B5DB8; --color-secondary-dark: #7A4292; --color-accent: #F5B8E0; --color-bg: #FAF5FB; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #2E0F3D; --color-ink-light: #5A2070; --color-muted: #8A6FA0; --color-border: #E8D4F0; --color-border-light: #F3E8F7; } html.theme-lilac .admin-sidebar { background: linear-gradient(180deg, #2E0F3D 0%, #5B2E70 100%) !important; } html.theme-lilac .pos-topbar { background: linear-gradient(135deg, #2E0F3D, #7A4292) !important; } /* THEME: Sage Garden — เซจกรีน (premium pet trend) */ html.theme-sage { --color-primary: #3F6A40; --color-primary-dark: #2D4E2E; --color-primary-light: #D8E8D5; --color-secondary: #5B8C5A; --color-secondary-dark: #3F6A40; --color-accent: #F4C4A0; --color-bg: #F5F8F3; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #1A2E1B; --color-ink-light: #2F4F30; --color-muted: #6A8068; --color-border: #D0DCC8; --color-border-light: #E5EDDD; } html.theme-sage .admin-sidebar { background: linear-gradient(180deg, #1A2E1B 0%, #2D4E2E 100%) !important; } html.theme-sage .pos-topbar { background: linear-gradient(135deg, #1A2E1B, #3F6A40) !important; } /* THEME: Butter Cream — เหลืองพาสเทลนุ่ม */ html.theme-butter { --color-primary: #7A540B; --color-primary-dark: #553905; --color-primary-light: #FCF0BB; --color-secondary: #C68C18; --color-secondary-dark: #9E6E10; --color-accent: #FFE599; --color-bg: #FFFCEC; --color-bg-alt: #FFFFFF; --color-surface: #FFFFFF; --color-ink: #3D2E08; --color-ink-light: #6A4E10; --color-muted: #998A60; --color-border: #F5E8B5; --color-border-light: #FAF1C8; } html.theme-butter .admin-sidebar { background: linear-gradient(180deg, #3D2E08 0%, #553905 100%) !important; } html.theme-butter .pos-topbar { background: linear-gradient(135deg, #3D2E08, #7A540B) !important; } /* ============================================================ READABILITY ENFORCEMENT (ALL THEMES) ห้ามตัวอักษรกลืนพื้นในธีมไหนๆ ============================================================ */ /* Panel/card/modal — เนื้อหาในกล่อง */ .panel, .card, .modal, .kpi-card, .empty-state { color: var(--color-ink); } .panel-title, .card-title, .modal-title { color: var(--color-ink); } .panel-body, .card-body { color: var(--color-ink-light); } .text-muted { color: var(--color-muted) !important; } /* Tables */ .table th { color: var(--color-ink); font-weight: 700; } .table td { color: var(--color-ink-light); } /* Inputs */ .input, input, textarea, select { color: var(--color-ink); } .input::placeholder, input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 0.7; } /* Buttons */ .btn-primary { color: white !important; } /* ============================================================ BADGE — พื้นทึบเข้ม + ตัวอักษรขาว เพื่อ contrast ที่อ่านชัดทุกธีม (แก้ปัญหาเดิม: ขาวบนพื้นพาสเทลอ่อน อ่านไม่ออก) ============================================================ */ .badge-success { background: #16A34A !important; color: #FFFFFF !important; } .badge-danger { background: #DC2626 !important; color: #FFFFFF !important; } .badge-info { background: #2563EB !important; color: #FFFFFF !important; } .badge-warning { background: #D97706 !important; color: #FFFFFF !important; } .badge-primary { background: var(--color-primary-dark) !important; color: #FFFFFF !important; } .badge-muted { background: #6B7280 !important; color: #FFFFFF !important; } /* ============================================================ DARK THEME — extra overrides for readability ============================================================ */ html.theme-dark .set-tab { background: var(--color-bg-alt) !important; color: var(--color-ink) !important; border-color: var(--color-border) !important; } html.theme-dark .set-tab.active { background: var(--color-primary) !important; color: var(--color-bg) !important; } html.theme-dark .set-tab:hover:not(.active) { border-color: var(--color-primary) !important; color: var(--color-primary) !important; } html.theme-dark .modal { background: var(--color-bg-alt) !important; color: var(--color-ink) !important; } html.theme-dark .modal-header { border-color: var(--color-border); } html.theme-dark .modal h3, html.theme-dark .modal h4 { color: var(--color-ink); } html.theme-dark .panel-title { color: var(--color-ink); } html.theme-dark .panel-body { color: var(--color-ink-light); } html.theme-dark .label { color: var(--color-ink-light); } html.theme-dark .text-muted { color: var(--color-muted) !important; } html.theme-dark .kpi-label { color: var(--color-muted); } html.theme-dark .kpi-value { color: var(--color-ink); } html.theme-dark .select, html.theme-dark select { background: var(--color-bg-alt) !important; color: var(--color-ink) !important; } html.theme-dark option { background: #1F1F1F; color: #FAFAFA; } html.theme-dark .btn-secondary { background: #404040; color: #FAFAFA; } html.theme-dark .btn-ghost { color: #E5E5E5; } html.theme-dark .btn-ghost:hover { background: #2C2C2C; } html.theme-dark .btn-icon { color: #E5E5E5; } html.theme-dark .btn-icon:hover { background: #2C2C2C; } /* Subtitle in admin header */ .admin-header .subtitle { color: var(--color-muted); } .set-tab { color: var(--color-ink); } .set-tab:not(.active) { color: var(--color-ink-light); }