/*
 * BorThong Brand Theme — MyTask
 * โทนสีเหลือง-เขียว บ่อทอง 33
 * ใช้ร่วมกับ theme.css ทุกเพจใน /MyTask/
 */

:root {
  --bt-yellow: #F5C518;
  --bt-yellow-light: #FFF8DC;
  --bt-yellow-dark: #D4A017;
  --bt-green: #2E8B57;
  --bt-green-light: #4CAF50;
  --bt-green-dark: #1B5E3B;
  --bt-green-muted: #3d6b4f;
  --bt-bg: #F4F7F0;
  --bt-bg-soft: #EAF5E8;
  --bt-surface: #ffffff;
  --bt-text: #1a2e1a;
  --bt-text-muted: #5a6b5a;
  --bt-border: rgba(46, 139, 87, 0.15);
  --bt-gradient: linear-gradient(135deg, #F5C518 0%, #4CAF50 55%, #2E8B57 100%);
  --bt-gradient-header: linear-gradient(135deg, #1B5E3B 0%, #2E8B57 45%, #4CAF50 100%);
  --bt-gradient-btn: linear-gradient(135deg, #D4A017, #2E8B57);
  --bt-shadow: 0 2px 12px rgba(27, 94, 59, 0.1);
  --bt-shadow-lg: 0 8px 24px rgba(27, 94, 59, 0.15);

  /* Map legacy app variables → BorThong */
  --bg: var(--bt-bg);
  --primary: var(--bt-green);
  --primary-dark: var(--bt-green-dark);
  --primary-light: var(--bt-green-light);
  --color-primary: var(--bt-green);
  --color-primary-dark: var(--bt-green-dark);
  --color-primary-light: var(--bt-green-light);
}

/* ── Base ── */
body {
  background-color: var(--bt-bg) !important;
  color: var(--bt-text);
}

.theme-page {
  background-color: var(--bt-bg) !important;
  color: var(--bt-text) !important;
}

/* ── Navbar / Top bar ── */
.navbar {
  background: var(--bt-gradient-header) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(27, 94, 59, 0.25) !important;
}

.navbar-brand span {
  color: var(--bt-yellow) !important;
}

.avatar {
  background: var(--bt-yellow) !important;
  color: var(--bt-green-dark) !important;
}

.header-bar,
.greeting {
  background: var(--bt-gradient-header) !important;
  color: #fff !important;
}

.theme-topbar {
  background: var(--bt-gradient-header) !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-topbar-title,
.theme-topbar-time,
.theme-topbar-name {
  color: #fff !important;
}

.theme-topbar-date,
.theme-topbar-email {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ── Page title accent ── */
.theme-page-title-border {
  border-left-color: var(--bt-yellow) !important;
}

/* ── Buttons primary ── */
.theme-btn-primary {
  background: var(--bt-gradient-btn) !important;
  box-shadow: 0 4px 14px rgba(46, 139, 87, 0.35) !important;
}

.theme-filter-active-cyan,
.theme-filter-active-violet {
  background: var(--bt-gradient-btn) !important;
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.3) !important;
}

/* ── Inputs focus ── */
.theme-input:focus {
  border-color: var(--bt-green) !important;
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15) !important;
}

.theme-table-body tr:hover {
  background-color: var(--bt-bg-soft) !important;
}

.theme-step-active,
.theme-step-label-active,
.theme-step-line-active {
  background-color: var(--bt-green) !important;
  color: #fff !important;
}

.theme-step-label-active {
  color: var(--bt-green-dark) !important;
  background: transparent !important;
}

.theme-badge-info {
  background-color: var(--bt-bg-soft) !important;
  color: var(--bt-green-dark) !important;
  border-color: rgba(46, 139, 87, 0.25) !important;
}

.theme-multiselect:focus-within {
  border-color: var(--bt-green) !important;
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.15) !important;
}

.theme-multiselect-option:hover {
  background-color: var(--bt-bg-soft) !important;
}

.theme-multiselect-option-selected {
  background-color: rgba(245, 197, 24, 0.15) !important;
}

.theme-multiselect-tag {
  background-color: rgba(245, 197, 24, 0.2) !important;
  color: var(--bt-green-dark) !important;
  border-color: rgba(245, 197, 24, 0.4) !important;
}

.theme-bg-blob-1 {
  background: radial-gradient(circle, rgba(245, 197, 24, 0.15) 0%, transparent 70%) !important;
}

.theme-bg-blob-2 {
  background: radial-gradient(circle, rgba(46, 139, 87, 0.12) 0%, transparent 70%) !important;
}

/* ── Module card accent bars (MyTask index) ── */
.module-card.pm::before { background: var(--bt-green) !important; }
.module-card.cm::before { background: var(--bt-yellow-dark) !important; }
.module-card.tk::before { background: var(--bt-green-light) !important; }
.module-card.po::before,
.module-card.prpo::before { background: var(--bt-green) !important; }
.module-card.hr::before { background: var(--bt-yellow) !important; }
.module-card.it::before { background: var(--bt-green-muted) !important; }
.module-card.do::before { background: var(--bt-green-dark) !important; }

/* ── Login icon gradient (Tailwind pages) ── */
.from-cyan-400.to-blue-600,
[class*="from-cyan"][class*="to-blue"] {
  background: var(--bt-gradient) !important;
  --tw-gradient-from: #F5C518 !important;
  --tw-gradient-to: #2E8B57 !important;
}

/* ── Tailwind blue → BorThong green (structural only) ── */
.bg-blue-600, .bg-blue-500, .bg-blue-700 {
  background-color: var(--bt-green) !important;
}

.bg-blue-50, .bg-sky-50 {
  background-color: var(--bt-bg-soft) !important;
}

.text-blue-600, .text-blue-500, .text-blue-700, .text-sky-600 {
  color: var(--bt-green-dark) !important;
}

.border-blue-500, .border-blue-600, .border-sky-500 {
  border-color: var(--bt-green) !important;
}

.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover {
  background-color: var(--bt-green-dark) !important;
}

.bg-gradient-to-r.from-blue-600, .bg-gradient-to-br.from-blue-600,
.bg-gradient-to-r.from-indigo-600, .bg-gradient-to-br.from-indigo-600 {
  background: var(--bt-gradient-header) !important;
}

/* ── Indigo/violet nav accents → green ── */
.bg-indigo-600, .bg-indigo-500, .bg-violet-600 {
  background-color: var(--bt-green) !important;
}

.text-indigo-600, .text-violet-600 {
  color: var(--bt-green-dark) !important;
}

/* ── PR/PO & App topbar / sidebar — ตัวอักษรขาวบนพื้นเขียว ── */
.app-topbar {
  color: #fff !important;
}

.app-topbar .topbar-logo,
.app-topbar .topbar-icon-btn,
.app-topbar .topbar-hamburger,
.app-topbar .topbar-hamburger .material-icons,
.app-topbar .topbar-icon-btn .material-icons {
  color: #fff !important;
}

.app-topbar .topbar-username {
  color: rgba(255, 255, 255, 0.92) !important;
}

.sidebar,
nav.sidebar,
.app-sidebar {
  color: rgba(255, 255, 255, 0.88) !important;
}

.sidebar .nav-item,
.sidebar a.nav-item {
  color: rgba(255, 255, 255, 0.78) !important;
}

.sidebar .nav-item .material-icons,
.sidebar .nav-subitem .material-icons {
  color: inherit !important;
}

.sidebar .nav-item:hover,
.sidebar .nav-item.active,
.sidebar .nav-group-toggle.active {
  color: #fff !important;
}

.sidebar .sidebar-zone-header {
  color: rgba(255, 255, 255, 0.55) !important;
}

.sidebar .sidebar-zone-header.zone-blue {
  color: #F5C518 !important;
}

.sidebar .sidebar-zone-header.zone-green {
  color: #86efac !important;
}

.sidebar .sidebar-zone-header.zone-purple {
  color: #bbf7d0 !important;
}

.sidebar .sidebar-zone-header.zone-orange {
  color: #fdba74 !important;
}

.sidebar,
.app-sidebar,
nav.sidebar {
  background: linear-gradient(180deg, #1B5E3B 0%, #0f2418 100%) !important;
}

.sidebar .nav-link.active,
.sidebar a.active {
  background: rgba(245, 197, 24, 0.2) !important;
  border-left-color: var(--bt-yellow) !important;
}


/* ── PR/PO primary buttons ── */
.btn-primary,
button.primary,
[class*="btn-primary"] {
  --color-primary: var(--bt-green);
}

.btn-primary:not(.theme-btn-secondary) {
  background: var(--bt-gradient-btn) !important;
  border-color: var(--bt-green-dark) !important;
}

  /* HR sidebar slate → BorThong green */
  .bg-slate-900 { background-color: #1B5E3B !important; }
  .border-slate-800 { border-color: rgba(46, 139, 87, 0.4) !important; }
  .bg-green-700 { background-color: #2E8B57 !important; }
  .bg-green-900 { background-color: #1B5E3B !important; }
  .from-green-900 { --tw-gradient-from: #1B5E3B !important; }
  .to-green-950 { --tw-gradient-to: #0f2418 !important; }

::-webkit-scrollbar-thumb {
  background: rgba(46, 139, 87, 0.35);
  border-radius: 4px;
}