/* ========================================================================== Municipality CMS — Admin Stylesheet ใช้กลไกธีมชุดเดียวกับหน้าเว็บสาธารณะ: โทเคนดิบ (--brand*, --accent*) ถูกฉีดเข้า โดย App\Helpers\Theme แล้วไฟล์นี้แปลงเป็นโทเคน เชิงความหมายของหลังบ้าน พร้อมรองรับโหมดมืด/คอนทราสต์สูง ========================================================================== */ :root { --primary: var(--brand, #1e3a8a); --primary-dark: var(--brand-700, #172554); --primary-soft: var(--brand-100, #e8edf9); --on-primary: var(--brand-on, #ffffff); --accent: var(--accent, #d97706); --admin-sidebar-bg: #0f172a; --admin-sidebar-brand-bg: #090d16; --admin-sidebar-text: #94a3b8; --admin-sidebar-head: #475569; --admin-sidebar-hover-bg: rgba(var(--brand-rgb, 30, 58, 138), 0.30); --admin-sidebar-active-text: #ffffff; --admin-bg: #f1f5f9; --admin-header-bg: #ffffff; --admin-card-bg: #ffffff; --admin-card-head-bg: #fcfcfd; --admin-inset: #f8fafc; --text-dark: #0f172a; --text-muted: #64748b; --border: #e2e8f0; --ok: #16a34a; --warn: #d97706; --danger: #dc2626; --stat-blue-bg: #dbeafe; --stat-blue-fg: #1d4ed8; --stat-green-bg: #dcfce7; --stat-green-fg: #15803d; --stat-yellow-bg: #fef3c7; --stat-yellow-fg: #b45309; --stat-purple-bg: #f3e8ff; --stat-purple-fg: #7e22ce; --badge-warn-bg: #fef3c7; --badge-warn-fg: #92400e; --badge-info-bg: #e0f2fe; --badge-info-fg: #075985; --badge-ok-bg: #dcfce7; --badge-ok-fg: #166534; --badge-danger-bg: #fee2e2; --badge-danger-fg: #991b1b; --badge-muted-bg: #f1f5f9; --badge-muted-fg: #475569; --radius: calc(8px * var(--radius-scale, 1)); --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06); --font-base: var(--font-base-family, 'Sarabun'), -apple-system, 'Segoe UI', sans-serif; --font-heading: var(--font-head-family, 'Prompt'), var(--font-base-family, 'Sarabun'), sans-serif; } [data-theme="dark"] { --primary: var(--brand-300, #7ea2f5); --primary-dark: var(--brand, #1e3a8a); --primary-soft: rgba(var(--brand-rgb, 30, 58, 138), 0.25); --on-primary: #0b1120; --admin-sidebar-bg: #0a1020; --admin-sidebar-brand-bg: #050912; --admin-sidebar-text: #94a3b8; --admin-sidebar-head: #4b5a75; --admin-bg: #0b1120; --admin-header-bg: #141d2f; --admin-card-bg: #141d2f; --admin-card-head-bg: #182132; --admin-inset: #1c2739; --text-dark: #e6ecf7; --text-muted: #9aa8bd; --border: #27334a; --stat-blue-bg: rgba(59, 130, 246, 0.18); --stat-blue-fg: #93c5fd; --stat-green-bg: rgba(22, 163, 74, 0.18); --stat-green-fg: #86efac; --stat-yellow-bg: rgba(217, 119, 6, 0.18); --stat-yellow-fg: #fcd34d; --stat-purple-bg: rgba(126, 34, 206, 0.20); --stat-purple-fg: #d8b4fe; --badge-warn-bg: rgba(217, 119, 6, 0.20); --badge-warn-fg: #fbbf24; --badge-info-bg: rgba(56, 189, 248, 0.18); --badge-info-fg: #7dd3fc; --badge-ok-bg: rgba(22, 163, 74, 0.20); --badge-ok-fg: #86efac; --badge-danger-bg: rgba(220, 38, 38, 0.20); --badge-danger-fg: #fca5a5; --badge-muted-bg: #1c2739; --badge-muted-fg: #9aa8bd; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45); } [data-theme="contrast"] { --primary: #ffd400; --primary-dark: #ffd400; --primary-soft: #262600; --on-primary: #000000; --admin-sidebar-bg: #000000; --admin-sidebar-brand-bg: #000000; --admin-sidebar-text: #ffffff; --admin-sidebar-head: #ffd400; --admin-bg: #000000; --admin-header-bg: #0d0d0d; --admin-card-bg: #0d0d0d; --admin-card-head-bg: #1a1a1a; --admin-inset: #141414; --text-dark: #ffffff; --text-muted: #e0e0e0; --border: #ffffff; --stat-blue-bg: #002633; --stat-blue-fg: #66e0ff; --stat-green-bg: #00330f; --stat-green-fg: #6bff9e; --stat-yellow-bg: #332b00; --stat-yellow-fg: #ffd400; --stat-purple-bg: #1f0033; --stat-purple-fg: #e0b3ff; --badge-warn-bg: #332b00; --badge-warn-fg: #ffd400; --badge-info-bg: #002633; --badge-info-fg: #66e0ff; --badge-ok-bg: #00330f; --badge-ok-fg: #6bff9e; --badge-danger-bg: #330000; --badge-danger-fg: #ff8a8a; --badge-muted-bg: #1a1a1a; --badge-muted-fg: #e0e0e0; --shadow-card: none; } * { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: light; } [data-theme="dark"], [data-theme="contrast"] { color-scheme: dark; } body { font-family: var(--font-base); background-color: var(--admin-bg); color: var(--text-dark); display: flex; min-height: 100vh; } h1, h2, h3, h4 { color: var(--text-dark); } a { color: var(--primary); text-decoration: none; } /* -------------------------------------------------------------------------- แถบเมนูด้านข้าง -------------------------------------------------------------------------- */ .admin-sidebar { width: 260px; background: var(--admin-sidebar-bg); color: var(--admin-sidebar-text); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { padding: 20px; background: var(--admin-sidebar-brand-bg); display: flex; align-items: center; gap: 12px; color: #ffffff; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sidebar-menu { list-style: none; padding: 15px 0; flex-grow: 1; } .sidebar-header { padding: 12px 20px 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--admin-sidebar-head); font-weight: 600; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 11px 20px; color: var(--admin-sidebar-text); text-decoration: none; font-size: 0.92rem; border-left: 3px solid transparent; transition: all 0.2s ease; } .sidebar-link:hover, .sidebar-link.active { color: var(--admin-sidebar-active-text, #ffffff); background: var(--admin-sidebar-hover-bg, rgba(59, 130, 246, 0.15)); border-left-color: var(--primary); } .sidebar-badge { margin-left: auto; background: var(--accent, #d97706); color: #ffffff; font-size: 0.7rem; font-weight: 700; border-radius: 10px; padding: 1px 7px; } /* -------------------------------------------------------------------------- พื้นที่หลัก -------------------------------------------------------------------------- */ .admin-main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; } .admin-topbar { min-height: 65px; background: var(--admin-header-bg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 30px; flex-wrap: wrap; } .admin-topbar-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; } .admin-user-profile { display: flex; align-items: center; gap: 12px; } .admin-user-name { font-size: 0.9rem; font-weight: 500; text-align: right; } .admin-user-role { font-size: 0.75rem; color: var(--text-muted); } .admin-content { padding: 30px; flex-grow: 1; } /* ปุ่มสลับโหมดแสดงผลบนแถบด้านบน */ .admin-theme-toggle { display: flex; align-items: center; gap: 4px; background: var(--admin-inset); border: 1px solid var(--border); border-radius: 20px; padding: 3px 5px; } .admin-theme-toggle .theme-btn { background: none; border: none; cursor: pointer; font-size: 0.82rem; padding: 4px 9px; border-radius: 14px; color: var(--text-muted); font-family: var(--font-base); } .admin-theme-toggle .theme-btn:hover { color: var(--text-dark); } .admin-theme-toggle .theme-btn.active { background: var(--primary); color: var(--on-primary); font-weight: 600; } /* -------------------------------------------------------------------------- การ์ดสถิติ -------------------------------------------------------------------------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: var(--admin-card-bg); padding: 22px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; } /* การ์ดสถิติที่กดเข้าไปยังหน้าจัดการได้ */ a.stat-card-link { text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } a.stat-card-link:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 6px 18px rgba(var(--brand-rgb, 30, 58, 138), 0.18); } a.stat-card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } a.stat-card-link::after { content: '›'; position: absolute; right: 14px; bottom: 8px; font-size: 1.3rem; line-height: 1; color: var(--text-muted); opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; } a.stat-card-link:hover::after { opacity: 1; transform: translateX(3px); } .stat-value { font-size: 1.8rem; font-weight: 700; font-family: var(--font-heading); color: var(--text-dark); margin-top: 4px; } .stat-label { font-size: 0.85rem; color: var(--text-muted); } .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .stat-icon.blue { background: var(--stat-blue-bg); color: var(--stat-blue-fg); } .stat-icon.green { background: var(--stat-green-bg); color: var(--stat-green-fg); } .stat-icon.yellow { background: var(--stat-yellow-bg); color: var(--stat-yellow-fg); } .stat-icon.purple { background: var(--stat-purple-bg); color: var(--stat-purple-fg); } /* -------------------------------------------------------------------------- การ์ดและตาราง -------------------------------------------------------------------------- */ .admin-card { background: var(--admin-card-bg); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-card); margin-bottom: 25px; overflow: hidden; } .admin-card-header { padding: 16px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--admin-card-head-bg); } .admin-card-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; } .admin-card-body { padding: 22px; } .table-responsive { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } .admin-table th { padding: 12px 18px; background: var(--admin-inset); color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table tr:hover { background: var(--admin-inset); } /* -------------------------------------------------------------------------- ฟอร์มหลังบ้าน -------------------------------------------------------------------------- */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-dark); } .form-control { width: 100%; padding: 9px 13px; font-family: var(--font-base); font-size: 0.92rem; color: var(--text-dark); background: var(--admin-card-bg); border: 1px solid var(--border); border-radius: 6px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 59, 130, 246), 0.18); } textarea.form-control { min-height: 110px; resize: vertical; } .form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } /* -------------------------------------------------------------------------- ปุ่ม -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 0.88rem; font-weight: 500; font-family: var(--font-heading); cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: filter 0.2s ease; } .btn:hover { filter: brightness(1.08); } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-dark); color: var(--on-primary); } .btn-success { background: var(--ok); color: #ffffff; } .btn-danger { background: var(--danger); color: #ffffff; } .btn-warning { background: var(--warn); color: #ffffff; } .btn-secondary { background: var(--admin-inset); color: var(--text-dark); border-color: var(--border); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-sm { padding: 4px 10px; font-size: 0.8rem; } /* -------------------------------------------------------------------------- ป้ายสถานะและข้อความแจ้งเตือน -------------------------------------------------------------------------- */ .badge { display: inline-block; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; border-radius: 12px; } .badge-warning { background: var(--badge-warn-bg); color: var(--badge-warn-fg); } .badge-info { background: var(--badge-info-bg); color: var(--badge-info-fg); } .badge-success { background: var(--badge-ok-bg); color: var(--badge-ok-fg); } .badge-danger { background: var(--badge-danger-bg); color: var(--badge-danger-fg); } .badge-secondary { background: var(--badge-muted-bg); color: var(--badge-muted-fg); } .alert { padding: 12px 18px; border-radius: 6px; margin-bottom: 20px; font-size: 0.9rem; border: 1px solid transparent; } .alert-success { background: var(--badge-ok-bg); color: var(--badge-ok-fg); border-color: var(--badge-ok-fg); } .alert-error { background: var(--badge-danger-bg); color: var(--badge-danger-fg); border-color: var(--badge-danger-fg); } .alert-info { background: var(--badge-info-bg); color: var(--badge-info-fg); border-color: var(--badge-info-fg); } /* -------------------------------------------------------------------------- หน้าเข้าสู่ระบบ -------------------------------------------------------------------------- */ .auth-wrapper { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-700, #0f172a) 0%, var(--brand, #1e3a8a) 100%); padding: 20px; } .auth-box { background: var(--admin-card-bg); width: 100%; max-width: 420px; padding: 35px; border-radius: 12px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); } .auth-header { text-align: center; margin-bottom: 25px; } .auth-header h2 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--text-dark); } /* -------------------------------------------------------------------------- จอขนาดเล็ก -------------------------------------------------------------------------- */ @media (max-width: 900px) { body { flex-direction: column; } .admin-sidebar { width: 100%; height: auto; position: static; } .admin-content { padding: 18px; } .admin-topbar { padding: 10px 18px; } } @media print { .admin-sidebar, .admin-topbar, .btn, .no-print { display: none !important; } body { display: block; background: #ffffff; } }