/* ==========================================================================
   DeliTMS THEME (colors + tokens)
   - File: style.css (rename this file to style.css in your project)
   - Purpose: palette, CSS variables, status colors
   - Load order: include THIS file BEFORE delitms.css
   ========================================================================== */
/* ==========================================================================
   1) CSS VARIABLES / THEME TOKENS
   ========================================================================== */
:root {
  --bg: #0e1420;
  --card: #151a26;
  --border: #223047;
  --cyan: #00d1d1;
  --orange: #ff9d2e;
  --green: #1bd678;
  --yellow: #efb456;
  --gray: #64748b;
  --red: #ff6868;
  --muted: #94a3b8;
  --ok: var(--green);
  --warn: var(--yellow);
  --err: var(--red);
  --info: #38bdf8;
  --bs-dropdown-zindex: 9999;
  --navH: 64px; /* approx navbar height */
  --pagePad: 24px;
}


/* ==========================================================================
   2) BASE LAYOUT / PAGE
   ========================================================================== */
body {
  background: var(--bg);
}


.status-badge {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.1);
}

.status-active, .st-assigned, .st-done, .status-working {
  color: #22c55e;
  border-color: #22c55e55;
  background: #22c55e14;
}

.status-inactive, .status-absent {
  color: #f97316;
  border-color: #f9731655;
  background: #f9731614;
}

.status-prospect, .st-planned, .status-done {
  color: #60a5fa;
  border-color: #60a5fa55;
  background: #60a5fa14;
}

.status-notyet   { 
  color:#a5b4fc; 
  border-color:#a5b4fc55; 
  background:#a5b4fc14; 
}

.status-off      { 
  color:#eab308; 
  border-color:#eab30855; 
  background:#eab30814; 
}

.table-hover tbody tr:hover {
  background: rgba(96, 165, 250, 0.06);
}

.pagination .page-link {
  background: transparent;
  border-color: var(--gray);
}

.pagination .page-item.active .page-link {
  background: #0ea5e9;
  border-color: #0ea5e9;
}

.mailto, .tel {
  color: #93c5fd;
}

.st-draft {
  color: var(--muted);
  border-color: #94a3b855;
  background: #94a3b814;
}

.st-live {
  color: #f59e0b;
  border-color: #f59e0b55;
  background: #f59e0b14;
}

.st-cancel {
  color: #f43f5e;
  border-color: #f43f5e55;
  background: #f43f5e14;
}


.brand .dot {
  color: var(--red);
}

.brand-lg .dot {
  color: var(--red);
}

.dot-green,
.bg-green {
  background: var(--green) !important;
}

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

.dot-yellow,
.bg-yellow {
  background: var(--yellow) !important;
}

.dot-red,
.bg-red {
  background: var(--red) !important;
}

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

.dot-orange,
.bg-orange {
  background: var(--orange) !important;
}

.dot-gray,
.bg-gray {
  background: var(--gray) !important;
}

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


/* Badge mềm dùng chung */
.badge-soft {
  background: #0f1626;
  border: 1px solid var(--border);
  color: #e5edf7;
  border-radius: 12px;
  padding: 0.25rem 0.5rem;
  font-weight: 700;
}


/* Delta màu tăng/giảm */
.delta-up {
  color: var(--green);
}

.delta-down {
  color: var(--red);
}

.badge-red {
  background: rgba(255, 104, 104, 0.1);
  border: 1px solid rgba(255, 104, 104, 0.4);
  color: #ff9b9b;
  border-radius: 10px;
  padding: 0.1rem 0.45rem;
  font-weight: 800;
}


/* GPS status badges */
.badge-gps {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: 12px;
}

.badge-gps.active {
  color: #12cc72;
  background: rgba(18, 204, 114, 0.12);
  border-color: rgba(18, 204, 114, 0.28);
}

.badge-gps.idle {
  color: #efb456;
  background: rgba(239, 180, 86, 0.12);
  border-color: rgba(239, 180, 86, 0.28);
}

.badge-gps.offline {
  color: #ff6868;
  background: rgba(255, 104, 104, 0.12);
  border-color: rgba(255, 104, 104, 0.28);
}

.badge-gps.maint {
  color: #b0b7c3;
  background: rgba(176, 183, 195, 0.12);
  border-color: rgba(176, 183, 195, 0.28);
}

.badge-sla.ok {
  color: #12cc72;
  background: rgba(18, 204, 114, 0.12);
  border: 1px solid rgba(18, 204, 114, 0.28);
  border-radius: 999px;
  padding: 0 6px;
}

.badge-sla.risk {
  color: #ff6868;
  background: rgba(255, 104, 104, 0.12);
  border: 1px solid rgba(255, 104, 104, 0.28);
  border-radius: 999px;
  padding: 0 6px;
}

.badge-risk {
  background: #dc2626;
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
}