/* ==========================================================================
   Dashboard Universal Styles & Button Redesigns — Wellbeing Design
   ========================================================================== */

/* 
   CSS Variables for Clean White & Green theme.
   This file can be easily edited to completely shift the color palette.
*/
:root {
    --primary-color: #3e522d;         /* เขียวเข้มป่าธรรมชาติอันทรงเกียรติ (Forest Green) */
    --primary-hover: #293d1c;         /* เขียวเข้มระดับขึ้นทรงเมื่อนำเมาส์ไปสัมผัส */
    --accent-color: #799f5c;          /* เขียวสว่างพาสเทลนำสายตา (Light Moss Green) */
    --accent-hover: #5d8242;          /* สีเขียวใบไม้อ่อนตอน Hover */
    --bg-white-lux: #fffcf9;          /* ขาวครีมไข่มุกเรียบหรูอบอุ่น (Pearl Cream) */
    --bg-card-pure: #ffffff;          /* การ์ดสีขาวบริสุทธิ์สะอาดตา */
    --border-soft-green: rgba(62, 82, 45, 0.08); /* เส้นขอบสีเขียวอ่อนนุ่มนวลป้องกันภาพเดดแอร์ */
    
    --danger-color: #d9534f;
    --danger-hover: #c9302c;
    --success-color: #198754;
    --success-hover: #157347;
    --info-color: #33b5e5;
    --warning-color: #ffbb33;
    
    --text-dark: #1b2612;             /* ตัวอักษรสีดำครามอมเขียวเข้มอ่านง่ายถนอมสายตา */
    --text-muted: #6b7565;            /* ตัวอักษรสีเทาพาสเทลเขียวอมเทาสวยงาม */
    --shadow-soft: 0 10px 30px rgba(62, 82, 45, 0.04), 0 2px 8px rgba(62, 82, 45, 0.02);
    --shadow-luxury: 0 20px 45px rgba(62, 82, 45, 0.08), 0 4px 12px rgba(62, 82, 45, 0.03);
}

/* Base Body & Layout refinement */
body {
    background-color: var(--bg-white-lux) !important;
    color: var(--text-dark) !important;
    font-family: 'Prompt', sans-serif !important;
}

/* Beautiful Button Redesign - Luxury Modern Rounded Square */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    border-radius: 12px !important; /* Elegant rounded square */
    padding: 10px 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 6px rgba(62, 82, 45, 0.05) !important;
    text-transform: none !important;
}

/* Button hover micro-animations */
.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(62, 82, 45, 0.12) !important;
}

.btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 5px rgba(62, 82, 45, 0.08) !important;
}

/* Specific colors based on variable tree */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}
.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}
.btn-success:hover {
    background-color: var(--success-hover) !important;
    border-color: var(--success-hover) !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}
.btn-danger:hover {
    background-color: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
}

/* Cards & Layout containers beautification */
.card,
.dashboard-card,
.stat-card {
    border-radius: 20px !important;
    border: 1px solid var(--border-soft-green) !important;
    background-color: var(--bg-card-pure) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all 0.3s ease !important;
}

.card:hover,
.dashboard-card:hover {
    box-shadow: var(--shadow-luxury) !important;
    border-color: rgba(62, 82, 45, 0.15) !important;
}

/* Rounded-pill replacements inside lists */
.rounded-pill {
    border-radius: 8px !important; /* Premium rounded corner instead of oval */
}

/* Sidebar luxury customization */
.sidebar {
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
    background-color: var(--primary-color) !important;
    border-right: 1px solid var(--border-soft-green) !important;
}

.sidebar-menu li a.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-left: 4px solid var(--accent-color) !important;
    color: #ffffff !important;
}

.sidebar-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}