/*
 * DigiPOS Brand Theme
 * Green: #159447 | Blue: #0878c9
 * Applied on top of vendor.css and app.css
 */

/* ── 1. CSS CUSTOM PROPERTIES ───────────────────────────── */
:root {
  --df-green:   #159447;
  --df-green-2: #0b6f3a;
  --df-deep:    #063d27;
  --df-blue:    #0878c9;
  --df-blue-2:  #0a4e91;
  --df-mint:    #f0fbf4;
  --df-mint-2:  #e7f8ee;
  --df-amber:   #f59e0b;
  --df-red:     #dc2626;
  --df-text:    #17212b;
  --df-muted:   #667085;
  --df-line:    #e6edf0;
  --df-shadow:  0 18px 55px rgba(11, 95, 52, 0.12);
}

/* ── 2. TAILWIND PRIMARY SCALE ──────────────────────────────
 * primary-900 = #0878c9 (blue) so the header gradient
 * from-primary-800 → to-primary-900 = deep-green → blue
 * ──────────────────────────────────────────────────────── */

/* background */
.tw-bg-primary-50  { background-color: #f0fbf4 !important; }
.tw-bg-primary-100 { background-color: #e7f8ee !important; }
.tw-bg-primary-200 { background-color: #c5efd5 !important; }
.tw-bg-primary-300 { background-color: #90d9b3 !important; }
.tw-bg-primary-400 { background-color: #53c087 !important; }
.tw-bg-primary-500 { background-color: #159447 !important; }
.tw-bg-primary-600 { background-color: #0b6f3a !important; }
.tw-bg-primary-700 { background-color: #0a5f31 !important; }
.tw-bg-primary-800 { background-color: #063d27 !important; }
.tw-bg-primary-900 { background-color: #0878c9 !important; }
.tw-bg-primary-950 { background-color: #0a4e91 !important; }

/* hover backgrounds */
.hover\:tw-bg-primary-700:hover { background-color: #0a5f31 !important; }
.hover\:tw-bg-primary-800:hover { background-color: #063d27 !important; }

/* gradient FROM */
.tw-from-primary-50  { --tw-gradient-from: #f0fbf4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(240 251 244 / 0)); }
.tw-from-primary-100 { --tw-gradient-from: #e7f8ee; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(231 248 238 / 0)); }
.tw-from-primary-500 { --tw-gradient-from: #159447; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(21 148 71 / 0)); }
.tw-from-primary-600 { --tw-gradient-from: #0b6f3a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(11 111 58 / 0)); }
.tw-from-primary-700 { --tw-gradient-from: #0a5f31; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(10 95 49 / 0)); }
.tw-from-primary-800 { --tw-gradient-from: #063d27; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(6 61 39 / 0)); }
.tw-from-primary-900 { --tw-gradient-from: #0878c9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(8 120 201 / 0)); }

/* gradient TO */
.tw-to-primary-100 { --tw-gradient-to: #e7f8ee; }
.tw-to-primary-500 { --tw-gradient-to: #159447; }
.tw-to-primary-600 { --tw-gradient-to: #0b6f3a; }
.tw-to-primary-700 { --tw-gradient-to: #0a5f31; }
.tw-to-primary-800 { --tw-gradient-to: #063d27; }
.tw-to-primary-900 { --tw-gradient-to: #0878c9; }  /* ← blue: the gradient end-stop */
.tw-to-primary-950 { --tw-gradient-to: #0a4e91; }

/* gradient VIA */
.tw-via-primary-500 { --tw-gradient-stops: var(--tw-gradient-from), #159447, var(--tw-gradient-to, rgb(21 148 71 / 0)); }
.tw-via-primary-700 { --tw-gradient-stops: var(--tw-gradient-from), #0a5f31, var(--tw-gradient-to, rgb(10 95 49 / 0)); }

/* text */
.tw-text-primary-50  { color: #f0fbf4 !important; }
.tw-text-primary-100 { color: #e7f8ee !important; }
.tw-text-primary-400 { color: #53c087 !important; }
.tw-text-primary-500 { color: #159447 !important; }
.tw-text-primary-600 { color: #0b6f3a !important; }
.tw-text-primary-700 { color: #0a5f31 !important; }
.tw-text-primary-800 { color: #063d27 !important; }
.hover\:tw-text-primary-500:hover { color: #159447 !important; }

/* border */
.tw-border-primary-200 { border-color: #c5efd5 !important; }
.tw-border-primary-300 { border-color: #90d9b3 !important; }
.tw-border-primary-500 { border-color: #159447 !important; }
.tw-border-primary-600 { border-color: #0b6f3a !important; }

/* opacity border variants (e.g. tw-border-primary-500/30) */
.tw-border-primary-500\/30 { border-color: rgba(21, 148, 71, 0.30) !important; }
.tw-border-primary-500\/20 { border-color: rgba(21, 148, 71, 0.20) !important; }

/* ring */
.tw-ring-primary-500 { --tw-ring-color: #159447; }
.focus\:tw-ring-primary-500:focus { --tw-ring-color: #159447; }

/* ── 3. REMAP COMPILED INDIGO→GREEN, OLD-BLUE→BRAND-BLUE ── */

/* The app uses tw-from-indigo-* / tw-to-blue-* for the
 * main CTA gradient. Remap to brand green→blue.          */
.tw-from-indigo-500,
.tw-from-indigo-600,
.tw-from-indigo-700 {
  --tw-gradient-from: #159447 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(21 148 71 / 0)) !important;
}
.hover\:tw-from-indigo-600:hover,
.active\:tw-from-indigo-700:active {
  --tw-gradient-from: #0b6f3a !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(11 111 58 / 0)) !important;
}
.tw-to-blue-500,
.tw-to-blue-600,
.tw-to-blue-700 {
  --tw-gradient-to: #0878c9 !important;
}
.hover\:tw-to-blue-600:hover,
.active\:tw-to-blue-700:active {
  --tw-gradient-to: #0a4e91 !important;
}

/* Remap compiled blue Tailwind background utilities */
.tw-bg-blue-500 { background-color: #0878c9 !important; }
.tw-bg-blue-600 { background-color: #0a5ea8 !important; }
.tw-bg-blue-700 { background-color: #0a4e91 !important; }
.tw-text-blue-700 { color: #0a4e91 !important; }
.tw-border-blue-200 { border-color: #bee3fa !important; }
.tw-bg-blue-100 { background-color: #ddf0fd !important; }

/* Remap existing green utilities to brand green */
.tw-bg-green-400 { background-color: #53c087 !important; }
.tw-text-green-500 { color: #159447 !important; }
.tw-text-green-900 { color: #063d27 !important; }
.tw-bg-green-100 { background-color: #e7f8ee !important; }

/* Reset ring colour to brand green */
:root {
  --tw-ring-color: rgba(21, 148, 71, 0.5);
}
.focus\:tw-ring-blue-500:focus {
  --tw-ring-color: rgba(21, 148, 71, 0.5);
}

/* ── 4. BOOTSTRAP / ADMINLTE OVERRIDES ──────────────────── */

/* Primary buttons */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--df-green) !important;
  border-color: var(--df-green-2) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--df-green-2) !important;
  border-color: var(--df-deep) !important;
}

/* Success = brand green */
.btn-success,
.btn-success:hover,
.btn-success:active {
  background-color: var(--df-green) !important;
  border-color: var(--df-green-2) !important;
}

/* Info = brand blue */
.btn-info,
.btn-info:hover,
.btn-info:active {
  background-color: var(--df-blue) !important;
  border-color: var(--df-blue-2) !important;
  color: #fff !important;
}

/* Primary badges & labels */
.label-primary,
.badge-primary { background-color: var(--df-green) !important; }
.label-info,
.badge-info { background-color: var(--df-blue) !important; }

/* Text and bg helpers */
.text-primary { color: var(--df-green) !important; }
.bg-primary { background-color: var(--df-green) !important; }
.text-info { color: var(--df-blue) !important; }
.bg-info { background-color: var(--df-blue) !important; }

/* Links */
a { color: var(--df-green); }
a:hover { color: var(--df-green-2); }

/* Form focus */
.form-control:focus {
  border-color: var(--df-green) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 3px rgba(21,148,71,0.15) !important;
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--df-green) !important;
  outline: none;
}

/* Nav pills & tabs active */
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background-color: var(--df-green) !important;
  color: #fff !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-bottom-color: var(--df-green) !important;
  color: var(--df-green) !important;
}

/* Panels */
.panel-primary { border-color: var(--df-green) !important; }
.panel-primary > .panel-heading {
  background-color: var(--df-green) !important;
  border-color: var(--df-green) !important;
}
.panel-info { border-color: var(--df-blue) !important; }
.panel-info > .panel-heading {
  background-color: var(--df-blue) !important;
  border-color: var(--df-blue) !important;
}

/* Progress bars */
.progress-bar { background-color: var(--df-green) !important; }
.progress-bar-info { background-color: var(--df-blue) !important; }

/* ── 5. ADMINLTE SKIN OVERRIDE (skin-blue-light) ─────────── */

.skin-blue-light .main-header .navbar { background-color: var(--df-green) !important; }
.skin-blue-light .main-header .logo { background-color: var(--df-green-2) !important; }
.skin-blue-light .main-header .logo:hover { background-color: var(--df-deep) !important; }
.skin-blue-light .main-sidebar { background-color: #fff !important; }
.skin-blue-light .sidebar-menu > li.active > a {
  border-left-color: var(--df-green) !important;
  color: var(--df-green) !important;
}
.skin-blue-light .sidebar-menu > li > a:hover {
  color: var(--df-green) !important;
  background: var(--df-mint) !important;
}
.skin-blue-light .sidebar-menu > li.active > .treeview-menu {
  border-left-color: var(--df-green) !important;
}
.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--df-green) !important;
}

/* ── 6. SIDEBAR NAV MENU (adminltecustom renderer) ───────── */

.side-bar .sidebar-menu li a {
  transition: background 0.18s ease, color 0.18s ease;
}

.side-bar .sidebar-menu li.active > a,
.side-bar .sidebar-menu li.active > a:hover {
  color: var(--df-green) !important;
  background: rgba(21,148,71,0.10) !important;
  border-right: 3px solid var(--df-green);
}

.side-bar .sidebar-menu li > a:hover {
  color: var(--df-green-2) !important;
  background: var(--df-mint) !important;
}

/* Sidebar logo/brand bar */
.side-bar [class*="tw-bg-"][class*="-800"] {
  background: var(--df-deep) !important;
}

/* ── 7. HEADER (topbar) ──────────────────────────────────── */

/* Header uses tw-bg-primary-800 (solid). No gradient override needed. */

/* ── 8. CONTENT AREA ACCENTS ─────────────────────────────── */

/* DataTables / table headers */
table.dataTable thead th,
.table thead th {
  border-bottom-color: var(--df-line) !important;
}

/* Pagination */
.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: var(--df-mint-2) !important;
  border-color: var(--df-green) !important;
  color: var(--df-green) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:focus,
.pagination > .active > a:hover {
  background-color: var(--df-green) !important;
  border-color: var(--df-green-2) !important;
}

/* Checkboxes (iCheck) */
.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
  background-color: var(--df-green) !important;
  border-color: var(--df-green-2) !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--df-green) !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--df-green) !important;
}

/* Datepicker */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background-color: var(--df-green) !important;
  border-color: var(--df-green-2) !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
  background-color: var(--df-mint-2) !important;
  border-color: var(--df-green) !important;
}

/* ── 9. MISC UTILITY ALIASES ─────────────────────────────── */

.bg-df-green      { background-color: var(--df-green) !important; }
.bg-df-blue       { background-color: var(--df-blue) !important; }
.bg-df-deep       { background-color: var(--df-deep) !important; }
.bg-df-mint       { background-color: var(--df-mint) !important; }
.text-df-green    { color: var(--df-green) !important; }
.text-df-blue     { color: var(--df-blue) !important; }
.text-df-deep     { color: var(--df-deep) !important; }
.text-df-muted    { color: var(--df-muted) !important; }
.border-df-green  { border-color: var(--df-green) !important; }

/* Gradient utility class usable on any element */
.df-gradient {
  background: linear-gradient(135deg, var(--df-green), var(--df-blue)) !important;
  color: white !important;
}
.df-gradient-subtle {
  background: linear-gradient(135deg, rgba(21,148,71,0.10), rgba(8,120,201,0.08)) !important;
}

/* ── 10. HEADER GLASS BUTTONS ─────────────────────────────
 * Used on dark gradient header so every control is visible.
 * Glass style works on any primary color gradient.
 * ──────────────────────────────────────────────────────── */
.df-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #fff !important;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  line-height: 1.4;
  vertical-align: middle;
  font-family: inherit;
}
.df-header-btn:hover,
.df-header-btn:focus {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.38) !important;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  outline: none;
}
.df-header-btn:active {
  background: rgba(255,255,255,0.28) !important;
}

/* POS sale button gets a solid green accent to stand out */
.df-header-btn--accent {
  background: rgba(21,148,71,0.80) !important;
  border-color: rgba(21,148,71,0.90) !important;
}
.df-header-btn--accent:hover {
  background: var(--df-green) !important;
  border-color: var(--df-green-2) !important;
}

/* Notification badge on glass button */
.df-header-btn .notifications_count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 900;
  line-height: 17px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  border: 2px solid rgba(6,61,39,0.6);
}
.df-header-btn.dropdown-toggle {
  position: relative;
}

/* Date chip — monospace read-only pill */
.df-header-date {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  opacity: 0.90;
  pointer-events: none;
  letter-spacing: 0.02em;
}

/* Back-to-user danger link — keep Bootstrap red, just fix visibility */
.df-header-back-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220,38,38,0.85) !important;
  border: 1px solid rgba(220,38,38,0.60) !important;
  color: #fff !important;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}
.df-header-back-user:hover {
  background: #dc2626 !important;
  color: #fff !important;
}