/* =========================================
   1. โหมดมืดแบบขุดรากถอนโคน (Dark Mode)
========================================= */
:root {
    --surfacePrimary: #121212 !important;
    --surfaceSecondary: #1e1e1e !important;
    --textPrimary: #e0e0e0 !important;
    --textSecondary: #aaaaaa !important;
    --divider: #333333 !important;
}

body, #app, main, .card, .dialog {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

header, #breadcrumbs, .breadcrumbs {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-bottom: 1px solid #333 !important;
}

header i, header span, header a, #breadcrumbs * {
    color: #e0e0e0 !important;
}

input, textarea, select {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #666 !important;
    border-radius: 5px !important;
    padding: 8px !important;
}

/* =========================================
   2. แก้สีเมนูด้านซ้าย (Sidebar)
========================================= */
nav .action, #nav .action {
    color: #e0e0e0 !important; 
    font-weight: normal !important;
}
nav .action:hover, #nav .action:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #bb86fc !important; 
}

/* =========================================
   3. จับแยกสีปุ่มใน Pop-up (Cancel / Create)
========================================= */
.dialog .button:first-child, .card-action .button:first-child {
    color: #ff5252 !important; /* แดงเดือด */
    font-weight: bold !important;
}
.dialog .button:first-child:hover, .card-action .button:first-child:hover {
    background-color: rgba(255, 82, 82, 0.1) !important;
}

.dialog .button:last-child, .card-action .button:last-child {
    color: #69f0ae !important; /* เขียว Hacker */
    font-weight: bold !important;
}
.dialog .button:last-child:hover, .card-action .button:last-child:hover {
    background-color: rgba(105, 240, 174, 0.1) !important;
}

.dialog .button:first-child:last-child, .card-action .button:first-child:last-child {
    color: #00e5ff !important; /* ฟ้าสว่างกรณีมีปุ่มเดียว */
}

#listing .header span, #listing .header i {
    color: #bb86fc !important; 
}
/* =========================================
   4. ปรับขนาดโลโก้เฉพาะหน้า Login (Top Secret)
========================================= */
#login img {
    width: 200px !important; /* ปรับตัวเลขตรงนี้เพื่อเพิ่ม/ลดขนาด (ค่าเดิมหน้าเว็บน่าจะประมาณ 100px) */
    height: auto !important;
    max-width: 100% !important;
    margin-bottom: 15px !important; /* เพิ่มระยะห่างด้านล่างไม่ให้ชิดข้อความเกินไป */
    
    /* หากรูปเดิมยังมีพื้นหลังขาวติดมาด้วย สามารถเอาคอมเมนต์ (/* */) ด้านล่างออกเพื่อบังคับตัดขอบกลมได้ครับ */
    /* border-radius: 50% !important; */
    /* object-fit: cover !important; */
}