/**
 * App Theme - โทนสีหลักของระบบ (Teal)
 * โหลดหลัง backend.css เพื่อ override สีเดิมให้เป็น theme นี้ทั้งระบบ
 */
:root {
    /* === สีหลัก (Primary) === */
    --app-primary: #14b8a6;
    --app-primary-dark: #0d9488;
    --app-primary-light: #5eead4;
    --app-primary-rgb: 20, 184, 166;
    --app-primary-bg-subtle: #f0fdfa;

    /* === ข้อความ === */
    --app-text: #2d3748;
    --app-text-muted: #718096;

    /* === พื้นหลัง & ขอบ === */
    --app-border: #e2e8f0;
    --app-bg-subtle: #f8fafc;

    /* === Bootstrap override (ถ้า backend ใช้ Bootstrap) === */
    --primary: var(--app-primary);
    --bs-primary: var(--app-primary);
}

/* -------------------------------------------------------------------------
   ลิงก์ (tag a) - ใช้สี theme แทนสีฟ้าเดิม
   ------------------------------------------------------------------------- */
a:not(.sidebar-link):not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item-action):not([class*="navbar"]):not([class*="breadcrumb"]) {
    color: var(--app-primary);
}
a:not(.sidebar-link):not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item-action):not([class*="navbar"]):not([class*="breadcrumb"]):hover {
    color: var(--app-primary-dark);
}

/* ลิงก์ใน dropdown / nav ที่อยากให้ใช้ theme (เลือกเฉพาะที่ต้องการ) */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--app-primary-bg-subtle);
    color: var(--app-primary-dark);
}

/* -------------------------------------------------------------------------
   ปุ่มหลัก (btn-primary)
   ------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--app-primary-dark) !important;
    border-color: var(--app-primary-dark) !important;
    color: #fff !important;
}

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

/* -------------------------------------------------------------------------
   สีตัวอักษร / พื้นหลัง (utility)
   ------------------------------------------------------------------------- */
.text-primary {
    color: var(--app-primary) !important;
}
.bg-primary {
    background-color: var(--app-primary) !important;
}
.border-primary {
    border-color: var(--app-primary) !important;
}

/* -------------------------------------------------------------------------
   Form controls - focus ring
   ------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus,
.custom-select:focus,
.input-group-text:focus-within {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--app-primary-rgb), 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */
.page-item.active .page-link {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.page-link {
    color: var(--app-primary);
}
.page-link:hover {
    color: var(--app-primary-dark);
    background-color: var(--app-primary-bg-subtle);
    border-color: var(--app-border);
}

/* -------------------------------------------------------------------------
   Badge / Alert primary
   ------------------------------------------------------------------------- */
.badge-primary,
.bg-primary.badge {
    background-color: var(--app-primary) !important;
}
.alert-primary {
    background-color: var(--app-primary-bg-subtle);
    border-color: var(--app-primary-light);
    color: var(--app-text);
}

/* -------------------------------------------------------------------------
   Card / List ที่ใช้สี primary (เช่น border-left)
   ------------------------------------------------------------------------- */
.content-card,
.reply-card {
    border-left-color: var(--app-primary) !important;
}

/* ปุ่มหรือลิงก์ใน custom ที่ใช้สีม่วงเดิม */
.btn-view-all {
    color: var(--app-primary) !important;
}
.btn-view-all:hover {
    color: var(--app-primary-dark) !important;
}

/* -------------------------------------------------------------------------
   Navbar profile - ลิงก์ใน greeting
   ------------------------------------------------------------------------- */
.navbar-profile-greeting a:hover {
    color: var(--app-primary) !important;
}

/* -------------------------------------------------------------------------
   DataTables / สารบบ - ปุ่มและสถานะที่ใช้ primary
   ------------------------------------------------------------------------- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--app-primary-bg-subtle) !important;
    border-color: var(--app-primary) !important;
    color: var(--app-primary-dark) !important;
}

/* Modal เลือกผู้รับผิดชอบ - ไทม์ไลน์งานสัปดาห์ */
.assignee-timeline-panel {
    max-height: 280px;
    overflow-y: auto;
}
.assignee-timeline-item {
    border-left-color: var(--app-primary) !important;
}
.assignee-timeline-item a:hover {
    color: var(--app-primary) !important;
}