/**
 * /assets/css/dark-mode.css
 * ไฟล์ CSS สำหรับโหมดมืดของระบบ Smart Factory 360°
 */

/* สไตล์พื้นฐานสำหรับโหมดมืด */
:root {
    --dark-bg-color: #121212;
    --dark-text-color: #e0e0e0;
    --dark-border-color: #2c2c2c;
    --dark-hover-color: #1f1f1f;
    --dark-input-bg: #1e1e1e;
    --dark-input-text: #d0d0d0;
}

html.dark body {
    background-color: var(--dark-bg-color);
    color: var(--dark-text-color);
}

/* ปรับสีของลิงก์ในโหมดมืด */
html.dark a {
    color: #4dabf7;
}

html.dark a:hover {
    color: #74c0fc;
}

/* การ์ดและคอนเทนเนอร์ในโหมดมืด */
html.dark .card,
html.dark .container-fluid {
    background-color: #1e1e1e;
    border-color: var(--dark-border-color);
}

html.dark .card-header,
html.dark .card-footer {
    background-color: #252525;
    border-color: var(--dark-border-color);
}

/* ปรับสีตารางในโหมดมืด */
html.dark .table {
    color: var(--dark-text-color);
}

html.dark .table th,
html.dark .table td {
    border-color: var(--dark-border-color);
}

html.dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ปรับสีฟอร์มในโหมดมืด */
html.dark .form-control {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border-color);
    color: var(--dark-input-text);
}

html.dark .form-control:focus {
    border-color: #4dabf7;
    box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25);
}

/* ปรับสีนำทางในโหมดมืด */
html.dark .bg-light {
    background-color: #1e1e1e !important;
}

html.dark .navbar-light .navbar-brand,
html.dark .navbar-light .navbar-nav .nav-link {
    color: var(--dark-text-color);
}

html.dark .navbar-light .navbar-nav .nav-link:hover {
    color: #4dabf7;
}

/* ปรับสีของแถบข้างในโหมดมืด */
html.dark .sidebar {
    background-color: #1e1e1e;
    border-color: var(--dark-border-color);
}

html.dark .sidebar .nav-link {
    color: var(--dark-text-color);
}

html.dark .sidebar .nav-link:hover {
    background-color: var(--dark-hover-color);
}

/* ปรับสีปุ่มในโหมดมืด */
html.dark .btn-light {
    background-color: #2c2c2c;
    border-color: #2c2c2c;
    color: var(--dark-text-color);
}

html.dark .btn-light:hover {
    background-color: #3c3c3c;
    border-color: #3c3c3c;
}

/* ปรับสีรายการแบบดรอปดาวน์ในโหมดมืด */
html.dark .dropdown-menu {
    background-color: #1e1e1e;
    border-color: var(--dark-border-color);
}

html.dark .dropdown-item {
    color: var(--dark-text-color);
}

html.dark .dropdown-item:hover {
    background-color: var(--dark-hover-color);
    color: var(--dark-text-color);
}

/* ปรับสีแจ้งเตือนในโหมดมืด */
html.dark .alert-info {
    background-color: #0d2f3a;
    border-color: #0c3a4b;
    color: #8adeed;
}

html.dark .alert-success {
    background-color: #0e301e;
    border-color: #103c24;
    color: #8adfb1;
}

html.dark .alert-warning {
    background-color: #312a0c;
    border-color: #3d350f;
    color: #ffd866;
}

html.dark .alert-danger {
    background-color: #300e0c;
    border-color: #3d100f;
    color: #ff8a8a;
}

/* ปรับสีแถบค้นหาในโหมดมืด */
html.dark .search-bar {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border-color);
}

/* ระบบปฏิทินในโหมดมืด */
html.dark .datepicker {
    background-color: #1e1e1e;
    border-color: var(--dark-border-color);
    color: var(--dark-text-color);
}

html.dark .datepicker table tr td,
html.dark .datepicker table tr th {
    color: var(--dark-text-color);
}

/* ปรับสี modal ในโหมดมืด */
html.dark .modal-content {
    background-color: #1e1e1e;
    border-color: var(--dark-border-color);
}

html.dark .modal-header,
html.dark .modal-footer {
    border-color: var(--dark-border-color);
}

html.dark .close {
    color: var(--dark-text-color);
    text-shadow: none;
}