/* =========================================
   THEME: PURPLE PRO (โทนสีม่วง ทันสมัย)
   ========================================= */
:root {
    /* Palette */
    --color-purple-main: #6f42c1;   /* ม่วงหลัก (Bootstrap Purple) */
    --color-purple-dark: #4c2f85;   /* ม่วงเข้ม */
    --color-purple-light: #e0cffc;  /* ม่วงอ่อน (ลาเวนเดอร์) */
    --color-accent: #d63384;        /* ชมพูเข้ม (ไว้ตัดขอบให้เด่น) */
    --color-gold: #ffc107;          /* สีทอง (สำหรับจุดสำคัญ) */
    
    /* System Mapping */
    --primary-color: var(--color-purple-main);
    --primary-dark: var(--color-purple-dark);
    --secondary-color: #6c757d;
    --bg-body: #f3f0fa;             /* พื้นหลังเว็บสีม่วงจางๆ */
    --text-main: #2d2d2d;
    --card-bg: #ffffff;
}

/* Override Bootstrap Colors */
.bg-primary, .btn-primary { 
    background-color: var(--primary-color) !important; 
    border-color: var(--primary-color) !important; 
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4); /* เงาสีม่วง */
}
.text-primary { color: var(--primary-color) !important; }

/* ปุ่ม Info ให้เป็นสีม่วงอ่อนแต่ตัวหนังสือเข้ม */
.bg-info, .btn-info {
    background-color: #0dcaf0 !important;
    color: #fff !important;
}

body {
    box-sizing: border-box;
    font-family: 'Sarabun', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

html { height: 100%; }

/* Navbar - ไล่เฉดสีม่วงสวยงาม */
.navbar {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 4px 15px rgba(76, 47, 133, 0.3);
    padding: 0.7rem 0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.3rem;
    color: #fe5dfe !important;
    text-transform: uppercase;
}

.nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    border-radius: 50px; /* ปุ่มมนรี */
    transition: all 0.3s;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff !important;
    transform: translateY(-1px);
}

/* Dropdown */
.dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}
.dropdown-item { padding: 0.7rem 1.2rem; }
.dropdown-item:hover {
    background-color: var(--color-purple-light);
    color: var(--primary-dark);
}

.content-wrapper { flex: 1; padding: 2rem 0; }

/* Welcome Section */
.welcome-section {
    background: linear-gradient(120deg,  #fca902, #fce354);
    color: rgb(3, 3, 3);
    padding: 3rem 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    box-shadow: 0 10px 25px rgba(111, 66, 193, 0.3);
    position: relative;
    overflow: hidden;
}
/* ลวดลายวงกลมจางๆ ตกแต่ง */
.welcome-section::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 150px; height: 150px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.welcome-section h1 { font-weight: 800; margin-bottom: 0.5rem; }
.welcome-section p { opacity: 0.9; font-size: 1.1rem; }

/* Cards */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    background: var(--card-bg);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: #fff;
    border-bottom: 2px solid var(--color-purple-light);
    font-weight: 700;
    color: var(--primary-color);
    padding: 1rem 1.5rem;
}

.card .nav-link {
    color: #333333 !important;
}

.card .nav-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(0,0,0,0.05);
}

.card .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 800;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    border-top: 4px solid var(--primary-color) !important;
}

/* Stats Card */
.stats-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    border-left: 5px solid; /* เส้นสีด้านซ้าย */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.stats-card:hover { transform: translateY(-5px); }

/* สีเส้นด้านซ้าย */
.stats-card:nth-child(1) { border-left-color: var(--primary-color); } /* ม่วง */
.stats-card:nth-child(2) { border-left-color: var(--color-accent); }  /* ชมพู */
.stats-card:nth-child(3) { border-left-color: var(--color-gold); }    /* ทอง */

.stats-card h3 { 
    font-size: 2.5rem; 
    font-weight: 700; 
    margin: 0; 
    color: var(--primary-dark); 
}
.stats-card p { color: #666; margin: 0; }
.stats-card i { 
    position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); 
    font-size: 2.8rem; opacity: 0.15; 
    color: var(--primary-color) !important;
}

/* Buttons & Inputs */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #d1d3e2;
    padding: 0.6rem 1rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.2);
}

.btn { border-radius: 8px; font-weight: 600; }

/* Login Button - สีขาว ตัดขอบม่วง */
.btn-login {
    background-color: #0394fc;
    color: var(--primary-color);
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-login:hover { 
    background-color: var(--color-gold);
    color: var(--text-main); 
    transform: translateY(-2px);
}

/* =========================================
   Footer Adjustment (ปรับระยะห่างและขนาดตัวอักษร)
   ========================================= */
footer {
    background-color: #2a2929; /* สีพื้นหลังเดิม */
    color: #e0cffc;            /* สีตัวหนังสือเดิม */
    text-align: center;
    padding: 1.5rem 1rem;      /* ลด Padding บนล่างลงเล็กน้อย (จาก 2rem) */
    margin-top: auto;
}

/* ปรับระยะห่างของทั้ง 2 บรรทัด */
footer p {
    margin: 0;                 /* ลบระยะห่างมาตรฐานของ Paragraph ออก */
    line-height: 1.4;          /* กำหนดความสูงบรรทัดให้กระชับ */
}

/* บรรทัดที่ 1: ชื่อหน่วยงาน */
footer .main-text {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.3rem;     /* เว้นระยะห่างจากบรรทัดล่างนิดเดียวพอ */
}

/* บรรทัดที่ 2: เครดิต (เล็กและจางลง) */
footer .credit-text {
    font-size: 0.75rem;        /* ปรับตัวหนังสือให้เล็กลง */
    opacity: 0.6;              /* ปรับให้จางลง (โปร่งแสง 60%) */
    font-weight: 300;
}

/* Tab Navigation */
.nav-tabs { color: #fe0202; }
.nav-tabs .nav-link.active {
    color: #c40b0b;
    font-weight: 700;
}

/* Utilities */
.hidden { display: none !important; }
.badge { padding: 0.5em 0.8em; font-weight: 500; }

/* =========================================
   Selectable Cards (เลือกอุปกรณ์แบบคลิกการ์ด)
   ========================================= */
.equipment-select-card {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 2px solid #e0e0e0 !important; /* ขอบปกติ */
    position: relative;
}

.equipment-select-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* สถานะเมื่อถูกเลือก (Active) */
.equipment-select-card.active {
    border-color: var(--primary-color) !important; /* สีขอบตามธีม */
    background-color: rgba(111, 66, 193, 0.05); /* พื้นหลังสีม่วงจางๆ */
}

/* ตัว Checkbox จริงๆ (ซ่อนการคลิก เพื่อให้ JS จัดการแทน) */
.equipment-select-card input[type="checkbox"] {
    pointer-events: none; /* ห้ามคลิกที่ checkbox โดยตรง (กันบั๊กคลิกซ้อน) */
    transform: scale(1.2); /* ขยาย checkbox ให้ใหญ่ขึ้นนิดนึง */
}

/* =========================================
   Sliding Toggle Buttons (ปุ่มสลับกราฟแบบสไลด์)
   ========================================= */
.chart-toggle-container {
    background-color: rgba(0, 0, 0, 0.2); /* สีพื้นหลังรางจางๆ */
    border-radius: 50px;
    padding: 2px;
    display: inline-flex;
    position: relative;
}

.chart-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.6rem;
    font-weight: 500;
    padding: 4px 15px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chart-toggle-btn:hover {
    color: #fff;
}

/* สถานะ Active (ปุ่มที่ถูกเลือก) */
.chart-toggle-btn.active {
    background-color: #fff;
    color: var(--primary-color); /* สีตัวหนังสือตามธีม */
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* =========================================
   Toast Notification (แจ้งเตือนมุมขวาบน)
   ========================================= */
.toast-container {
    position: fixed; /* ลอยอยู่เหนือเนื้อหา */
    top: 20px;       /* ห่างจากขอบบน 20px */
    right: 20px;     /* ห่างจากขอบขวา 20px */
    z-index: 9999;   /* อยู่ชั้นบนสุดเสมอ */
}

/* ตกแต่งตัวกล่องแจ้งเตือน */
.toast {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    margin-bottom: 10px; /* ระยะห่างระหว่างกล่อง (กรณีมาหลายอัน) */
    min-width: 300px;
    border: none;
    overflow: hidden;
}

/* ส่วนหัวของแจ้งเตือน (สีตามธีม) */
.toast-header {
    background-color: #217d1b;
    color: #fff;
    border-bottom: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
}

/* ส่วนเนื้อหา */
.toast-body {
    padding: 1rem;
    color: #333;
    font-size: 0.95rem;
}

/* ปรับปุ่มกากบาทให้เป็นสีขาว (เพื่อให้เห็นชัดบนพื้นสีเข้ม) */
.toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}