/**
 * Theme Variables - Telesales System
 * ใช้ CSS Variables เพื่อให้เปลี่ยน theme ได้ง่าย
 */

/* ========== Dark Mode (Default) ========== */
:root {
    /* Background Colors */
    --bg-primary: #1a1d24;
    --bg-secondary: #242930;
    --bg-tertiary: #2d3139;
    --bg-card: #242930;
    --bg-input: #2d3139;
    --bg-navbar: #242930;
    --bg-sidebar: #242930;

    /* Text Colors */
    --text-primary: #e4e6eb;
    --text-secondary: #b0b3b8;
    --text-muted: #8a8d91;

    /* Border Colors */
    --border-color: #3a3f47;
    --border-light: #2d3139;

    /* Accent Colors */
    --color-blue: #4a9eff;
    --color-green: #51cf66;
    --color-red: #ff6b6b;
    --color-yellow: #ffd43b;
    --color-orange: #ff922b;
    --color-purple: #cc5de8;

    /* Button Colors */
    --btn-primary-bg: #0d6efd;
    --btn-primary-text: #ffffff;
    --btn-success-bg: #198754;
    --btn-success-text: #ffffff;
    --btn-danger-bg: #dc3545;
    --btn-danger-text: #ffffff;
    --btn-warning-bg: #ffc107;
    --btn-warning-text: #000000;
    --btn-info-bg: #0dcaf0;
    --btn-info-text: #000000;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ========== Light Mode ========== */
body.light-mode {
    /* Background Colors */
    --bg-primary: #f4f6f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-navbar: #ffffff;
    --bg-sidebar: #242930; /* Sidebar ยังคงเป็นสีเข้มใน Light Mode */

    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;

    /* Border Colors */
    --border-color: #dee2e6;
    --border-light: #e9ecef;

    /* Accent Colors */
    --color-blue: #0d6efd;
    --color-green: #198754;
    --color-red: #dc3545;
    --color-yellow: #ffc107;
    --color-orange: #fd7e14;
    --color-purple: #6f42c1;

    /* Button Colors - Same as dark */
    --btn-primary-bg: #0d6efd;
    --btn-primary-text: #ffffff;
    --btn-success-bg: #198754;
    --btn-success-text: #ffffff;
    --btn-danger-bg: #dc3545;
    --btn-danger-text: #ffffff;
    --btn-warning-bg: #ffc107;
    --btn-warning-text: #000000;
    --btn-info-bg: #0dcaf0;
    --btn-info-text: #000000;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ========== Apply Variables to All Components ========== */

/* Body & Layout */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.content-wrapper {
    background-color: var(--bg-primary) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

/* ลบออก - มันกว้างเกินไป ทับทุกอย่าง */

.text-muted {
    color: var(--text-muted) !important;
}

/* Navbar */
.main-header.navbar {
    background-color: var(--bg-navbar) !important;
    border-bottom: 1px solid var(--border-color);
}

.main-header .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.main-header .navbar-nav .nav-link:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Dropdown */
.dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary) !important;
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* Sidebar - คงสีเข้มไว้เสมอ, ตัวอักษรสีขาวทั้ง Dark และ Light Mode */
.main-sidebar {
    background-color: #242930 !important;
}

.main-sidebar * {
    color: #ffffff !important;
}

.brand-link {
    background-color: #2d3139 !important;
    border-bottom: 1px solid #3a3f47;
    color: #ffffff !important;
}

.brand-text {
    color: #ffffff !important;
}

.user-panel {
    border-bottom: 1px solid #3a3f47;
}

.user-panel .info a {
    color: #ffffff !important;
}

.user-panel .info a small {
    color: #b0b3b8 !important;
}

.nav-header {
    color: #b0b3b8 !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    color: #ffffff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link p {
    color: #ffffff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: #2d3139 !important;
    color: #ffffff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--btn-primary-bg) !important;
    color: #ffffff !important;
}

.nav-treeview > .nav-item > .nav-link {
    color: #e4e6eb !important;
}

.nav-treeview > .nav-item > .nav-link p {
    color: #e4e6eb !important;
}

.nav-treeview > .nav-item > .nav-link:hover {
    background-color: #2d3139 !important;
    color: #ffffff !important;
}

.nav-treeview > .nav-item > .nav-link:hover p {
    color: #ffffff !important;
}

.nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(13, 110, 253, 0.2) !important;
    color: #4a9eff !important;
}

.nav-treeview > .nav-item > .nav-link.active p {
    color: #4a9eff !important;
}

/* Sidebar Icons */
.sidebar .nav-icon {
    color: #b0b3b8 !important;
}

.sidebar .nav-link:hover .nav-icon,
.sidebar .nav-link.active .nav-icon {
    color: #ffffff !important;
}

/* เปลี่ยน far fa-circle เป็นวงกลมทึบเมื่อ active */
.nav-treeview > .nav-item > .nav-link.active .fa-circle {
    font-weight: 900 !important;
    font-family: "Font Awesome 6 Free" !important;
}

.nav-treeview > .nav-item > .nav-link.active .far.fa-circle::before {
    content: "\f111" !important; /* ใช้ icon วงกลมทึบ */
}

/* เวลา hover ให้ค่อยๆ ทึบขึ้น */
.nav-treeview > .nav-item > .nav-link:hover .fa-circle {
    opacity: 0.8;
}

/* Override for all sidebar text elements */
.main-sidebar p,
.main-sidebar span,
.main-sidebar label,
.main-sidebar small,
.main-sidebar div {
    color: inherit !important;
}

/* Cards */
.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

.card-title {
    color: var(--text-primary) !important;
}

.card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

.card-footer {
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color);
}

/* Info Boxes */
.info-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.info-box-text {
    color: var(--text-secondary) !important;
}

.info-box-number {
    color: var(--text-primary) !important;
}

/* Forms */
.form-control {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

.form-control:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--color-blue);
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25);
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-group label {
    color: var(--text-primary) !important;
}

.input-group-text {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

/* Tables */
.table {
    color: var(--text-secondary) !important;
}

.table thead th {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

.table td {
    border-color: var(--border-color);
    color: var(--text-secondary) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(74, 158, 255, 0.1) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

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

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

.btn-warning {
    background-color: var(--btn-warning-bg) !important;
    border-color: var(--btn-warning-bg) !important;
    color: var(--btn-warning-text) !important;
}

.btn-info {
    background-color: var(--btn-info-bg) !important;
    border-color: var(--btn-info-bg) !important;
    color: var(--btn-info-text) !important;
}

/* Modals */
.modal-content {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

.modal-header {
    background-color: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

.modal-body {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

.modal-footer {
    background-color: var(--bg-tertiary) !important;
    border-top: 1px solid var(--border-color);
}

/* Pagination */
.pagination .page-link {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
    color: var(--color-blue) !important;
}

.pagination .page-link:hover {
    background-color: var(--bg-tertiary) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: white !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

.breadcrumb-item {
    color: var(--text-secondary) !important;
}

.breadcrumb-item a {
    color: var(--color-blue) !important;
}

/* Alerts */
.alert {
    border: 1px solid var(--border-color);
}

/* Footer */
.main-footer {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary) !important;
}

/* Links */
a {
    color: var(--color-blue) !important;
}

a:hover {
    color: var(--btn-primary-bg) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg-tertiary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-color);
}

/* Smooth Transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card, .form-control, .btn, .table, .modal-content {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}