/* Custom overrides for CRM using the provided theme */
:root {
  --crm-primary: #0d6efd;
  --crm-accent: #00bcd4;
}

body {
  background: var(--bs-body-bg, #f8f9fa);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.4px;
}

.form-control:focus{
  background-color: #000;
}

.sidebar {
  width: 260px;
  min-height: 100vh;
  background: #0b1727;
  color: #cbd5e1;
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
}

.sidebar a {
  color: #cbd5e1;
  text-decoration: none;
  display: block;
  padding: .5rem .75rem;
  border-radius: .5rem;
  margin-bottom: .25rem;
}

.sidebar a.active, .sidebar a:hover {
  background: rgba(13, 110, 253, 0.15);
  color: #fff;
}

.main {
  margin-left: 260px;
  min-height: 100vh;
}

.content {
  padding: 1.25rem;
}

.card {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.kpi {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 1rem;
}

@media (max-width: 1200px) {
  .kpi { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .kpi { grid-template-columns: repeat(2, 1fr); }
}

.kpi .card-title {
  font-size: .9rem;
  color: #64748b;
  margin-bottom: .25rem;
}

.kpi .value {
  font-size: 1.75rem;
  font-weight: 800;
}

.badge-channel {
  font-size: .75rem;
  border-radius: 999px;
  padding: .25rem .5rem;
}

.table thead th {
  white-space: nowrap;
}

#kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.kanban-col {
  background: #0f1b2f;
  color: #cbd5e1;
  border-radius: .75rem;
  padding: .75rem;
  min-height: 360px;
}
.kanban-col h6 { color: #94a3b8; letter-spacing: .4px; }
.kanban-drop {
  min-height: 280px;
  background: rgba(255,255,255,.03);
  border-radius: .5rem;
  padding: .5rem;
}
.card.lead {
  background: #13233f;
  color: #e2e8f0;
  box-shadow: none;
  border: 1px solid rgba(255,255,255,.06);
}
.lead small { color: #94a3b8; }

.points-pill {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
  border-radius: 999px;
  padding: .25rem .5rem;
  font-size: .8rem;
}

.redeem-card .btn {
  width: 100%;
}

body, .btn, .form-control, .table, h1,h2,h3,h4,h5,h6 { font-family: 'Kanit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif; }

.card canvas{display:block;width:100%!important;height:100%!important;min-height:140px}


/* ==== Visual Refresh v2 ==== */
:root{
  --crm-primary:#2563eb;
  --crm-accent:#22d3ee;
  --crm-bg:#0b1220;
  --crm-card:#0f1b2f99; /* translucent glass */
  --crm-card-solid:#0f1b2f;
  --crm-muted:#94a3b8;
  --crm-text:#e2e8f0;
  --crm-shadow:0 12px 30px rgba(2,8,23,.25);
  --crm-radius:18px;
}

/* Background gradient */
.main{
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(var(--crm-bg), var(--crm-bg));
}

/* Sidebar glass + accent bar */
.sidebar{
  width: 270px;
  background: linear-gradient(180deg, #0b1727 0%, #0a1320 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}
.sidebar .navbar-brand{
  color:#fff;
  font-weight:800;
  letter-spacing:.3px;
}
.sidebar nav a{
  position: relative;
  padding:.65rem .75rem .65rem 1rem;
  border-radius: 12px;
  opacity:.85;
  transition:.25s ease;
}
.sidebar nav a:hover{opacity:1; transform:translateX(2px);}
.sidebar nav a.active{
  background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(34,211,238,.18));
  color:#fff;
}
.sidebar nav a.active::before{
  content:"";
  position:absolute;
  left:-12px; top:8px; bottom:8px; width:4px;
  background:linear-gradient(180deg, #60a5fa, #22d3ee);
  border-radius:10px;
}

/* Content spacing */
.content{ padding: 1.75rem; }

/* Cards – glassmorphism */
.card{
  border-radius: var(--crm-radius);
  border: 1px solid rgba(255,255,255,.06);
  background: var(--crm-card);
  color: var(--crm-text);
  box-shadow: var(--crm-shadow);
  backdrop-filter: blur(10px);
}
.card .card-title{ color: var(--crm-muted); }

/* KPI cards */
.kpi .card{
  background:
    linear-gradient(180deg, rgba(37,99,235,.20), rgba(37,99,235,.08)),
    var(--crm-card);
  border: 1px solid rgba(96,165,250,.25);
  transition:.25s ease;
}
.kpi .card:hover{ transform: translateY(-3px); }
.kpi .value{ font-size:2.1rem; font-weight:900; letter-spacing:.2px; }

/* Buttons */
.btn{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 16px rgba(2,8,23,.18);
}
.btn-primary{
  background: linear-gradient(135deg, #2563eb, #22d3ee);
  border-color: transparent;
}
.btn-outline-secondary{ border-color: rgba(255,255,255,.12); color:#cbd5e1; }
.btn-outline-secondary:hover{ background:rgba(148,163,184,.15); color:#fff; }

/* Tables */
.table{ color:#e2e8f0; }
.table thead th{
  color:#c7d2fe;
  background: rgba(37,99,235,.15);
  border-bottom-color: rgba(96,165,250,.25);
}
.table tbody tr{ transition:.2s ease; }
.table tbody tr:hover{ background: rgba(255,255,255,.03); }

/* Badges */
.badge{ border-radius:999px; padding:.45rem .6rem; font-weight:700; letter-spacing:.2px; }

/* Kanban columns */
.kanban-col{
  background: linear-gradient(180deg, rgba(2,8,23,.8), rgba(2,8,23,.5));
  border: 1px solid rgba(255,255,255,.06);
}
.kanban-drop{ border:1px dashed rgba(255,255,255,.15); }
.card.lead{ border:1px solid rgba(255,255,255,.12); background:rgba(15,27,47,.85); }

/* Inputs */
.form-control, .form-select{
  background: rgba(255,255,255,.07);
  color:#e2e8f0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
}
.form-control::placeholder{ color:#94a3b8; }

/* Charts container */
.card .chart-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding:.5rem;
}

/* Scrollbar */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(#2563eb,#22d3ee); border-radius:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:10px; }

/* Typography */
body, .btn, .form-control, .table, h1,h2,h3,h4,h5,h6{
  font-family: 'Kanit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Thai', sans-serif;
  letter-spacing:.2px;
}
h4, h5, h6{ color:#eef2ff; }


/* ==== Themed Modals & Offcanvas (dark/glass) ==== */
.modal{
  --bs-modal-bg: transparent; /* we'll style .modal-content */
  --bs-modal-color: var(--crm-text);
  --bs-modal-header-border-color: rgba(255,255,255,.08);
  --bs-modal-footer-border-color: rgba(255,255,255,.08);
}
.modal-backdrop.show{ background:#000; opacity:.6; }
.modal-content{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    var(--crm-card-solid);
  color: var(--crm-text);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--crm-shadow);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}
.modal-header, .modal-footer{ border-color: rgba(255,255,255,.08); }
.modal-title{ color:#eef2ff; font-weight:700; letter-spacing:.2px; }
.btn-close{
  filter: invert(1) grayscale(100%);
  opacity:.9;
}
.modal-content .form-control,
.modal-content .form-select,
.modal-content .input-group-text{
  background: rgba(255,255,255,.07) !important;
  color: var(--crm-text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.modal-content .form-control::placeholder{ color:#94a3b8; }

/* Offcanvas panel (e.g., member detail) */
.offcanvas{
  --bs-offcanvas-bg: transparent;
  color: var(--crm-text);
  border-left: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    #0f1b2f;
  backdrop-filter: blur(10px);
}
.offcanvas-header{ border-bottom: 1px solid rgba(255,255,255,.08); }
.offcanvas .form-control, .offcanvas .form-select{
  background: rgba(255,255,255,.07);
  color: var(--crm-text);
  border: 1px solid rgba(255,255,255,.14);
}

/* Light mode tweaks */
.mode-light .main{
  background: linear-gradient(var(--crm-bg), var(--crm-bg));
}
.mode-light .card{ background: rgba(255,255,255,.9); color:#0b1220; }
.mode-light .table{ color:#0b1220; }
.mode-light .table thead th{ color:#1e293b; background: rgba(37,99,235,.12); }
.mode-light .form-control,.mode-light .form-select{ background:#fff; color:#0b1220; border-color:#cbd5e1; }
.mode-light .sidebar{ background: linear-gradient(180deg, #f1f5f9, #e2e8f0); color:#0b1220; }
.mode-light .sidebar a{ color:#0b1220; }
.mode-light .sidebar a.active{ color:#0b1220; }

/* Themed selects fix */
select, .form-select{
  background: rgba(255,255,255,.07) !important;
  color: var(--crm-text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  appearance: none;
}
select:focus, .form-select:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(34,211,238,.35);
  border-color: rgba(34,211,238,.5);
}
select option, .form-select option{
  background: #0f1b2f !important;
  color: var(--crm-text) !important;
}

/* pager fix */
.btn.disabled, .btn:disabled { opacity: .45; pointer-events: none; }