/*
 * CRM Admin Panel — UI Enhancement Layer
 * Loaded automatically after style.css via assets_helper.php
 * All overrides are purely cosmetic — no structural/layout changes.
 */

/* ─────────────────────────────────────────────
   CSS Custom Properties (Design Tokens)
   ───────────────────────────────────────────── */
:root {
  --clr-primary:       #2563eb;
  --clr-primary-dark:  #1d4ed8;
  --clr-primary-light: #eff6ff;
  --clr-bg:            #f1f5f9;
  --clr-sidebar-bg:    #ffffff;
  --clr-border:        #e2e8f0;
  --clr-border-strong: #cbd5e1;
  --clr-text:          #1e293b;
  --clr-text-muted:    #64748b;
  --radius-sm:         6px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --shadow-xs:         0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-sm:         0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .05);
  --shadow-md:         0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05);
  --transition:        150ms ease;
}

/* ─────────────────────────────────────────────
   Page Background
   ───────────────────────────────────────────── */
body {
  background: var(--clr-bg) !important;
}

#wrapper {
  background: var(--clr-bg) !important;
}

/* ─────────────────────────────────────────────
   Top Header
   ───────────────────────────────────────────── */
#header {
  background: #ffffff !important;
  box-shadow: 0 1px 0 0 var(--clr-border), 0 2px 8px -2px rgb(0 0 0 / .06) !important;
}

/* ─────────────────────────────────────────────
   Sidebar
   ───────────────────────────────────────────── */
.sidebar {
  background: var(--clr-sidebar-bg) !important;
  border-right: 1px solid var(--clr-border) !important;
  box-shadow: 1px 0 0 0 var(--clr-border);
}

[dir="rtl"] .sidebar {
  border-left: 1px solid var(--clr-border) !important;
  border-right: 0 !important;
}

/* Active / hover menu item — colored left accent */
.sidebar > ul.nav > li {
  border-left: 3px solid transparent;
  transition: border-color var(--transition);
}

[dir="rtl"] .sidebar > ul.nav > li {
  border-left: 0;
  border-right: 3px solid transparent;
}

.sidebar > ul.nav > li.active {
  border-left-color: var(--clr-primary) !important;
}

[dir="rtl"] .sidebar > ul.nav > li.active {
  border-right-color: var(--clr-primary) !important;
  border-left-color: transparent !important;
}

/* Active / hover card bg */
.sidebar > ul.nav > li:hover > a:first-child,
.sidebar > ul.nav > li.active > a:first-child {
  background: var(--clr-primary-light) !important;
  border-color: #bfdbfe !important;
  box-shadow: var(--shadow-xs) !important;
  border-radius: var(--radius-sm) !important;
}

/* Active text + icon colour */
.sidebar ul.nav li.active > a,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
  color: var(--clr-primary) !important;
}

.sidebar ul.nav li.active > a .menu-icon,
.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon {
  color: var(--clr-primary) !important;
}

/* Sub-menu active */
.sidebar ul.nav li .nav-second-level li.active > a {
  color: var(--clr-primary) !important;
}

/* Sub-menu hover */
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:focus {
  color: var(--clr-primary) !important;
}

/* Setup menu active accent */
#setup-menu > li.active {
  border-left-color: var(--clr-primary) !important;
}

/* ─────────────────────────────────────────────
   Panels / Cards  (.panel_s  .panel-default etc.)
   ───────────────────────────────────────────── */
.panel_s,
.panel,
.panel-default {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--clr-border) !important;
  box-shadow: var(--shadow-sm) !important;
  background: #ffffff !important;
  overflow: hidden;
}

.panel_s > .panel-heading,
.panel > .panel-heading,
.panel-default > .panel-heading {
  background: #ffffff !important;
  border-bottom: 1px solid var(--clr-border) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  font-weight: 600;
  color: var(--clr-text);
}

/* Accent top border on panel headings */
.panel_s > .panel-heading::before,
.panel > .panel-heading::before {
  display: none; /* keep clean — no extra decoration */
}

.panel-body {
  padding: 20px !important;
}

/* Panel footer */
.panel-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--clr-border) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  padding: 10px 20px !important;
}

/* ─────────────────────────────────────────────
   Tables
   ───────────────────────────────────────────── */
.table > thead > tr > th {
  background: #f8fafc !important;
  border-bottom: 2px solid var(--clr-border) !important;
  color: var(--clr-text-muted) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
}

.table > tbody > tr > td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
  color: var(--clr-text);
}

.table > tbody > tr:last-child > td {
  border-bottom: 0 !important;
}

.table > tbody > tr:hover > td {
  background: #f8fafc !important;
}

/* Datatables wrapper */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgb(37 99 235 / .12) !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 8px !important;
}

/* ─────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition), color var(--transition) !important;
  letter-spacing: 0.01em;
}

.btn-primary {
  background-color: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--clr-primary-dark) !important;
  border-color: var(--clr-primary-dark) !important;
  box-shadow: 0 0 0 3px rgb(37 99 235 / .2) !important;
}

.btn-default {
  background: #ffffff !important;
  border: 1px solid var(--clr-border-strong) !important;
  color: var(--clr-text) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn-default:hover,
.btn-default:focus {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: var(--clr-text) !important;
}

.btn-danger {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgb(220 38 38 / .2) !important;
}

.btn-success {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #15803d !important;
  border-color: #15803d !important;
}

.btn-warning {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #b45309 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
}

/* Small utility btn */
.btn-sm,
.btn-xs {
  border-radius: 5px !important;
}

/* ─────────────────────────────────────────────
   Form Controls
   ───────────────────────────────────────────── */
.form-control {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-xs) !important;
  color: var(--clr-text) !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
  font-size: 13.5px !important;
}

.form-control:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgb(37 99 235 / .12), var(--shadow-xs) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: #94a3b8 !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color var(--transition) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgb(37 99 235 / .12) !important;
}

/* Bootstrap-select */
.bootstrap-select > .btn-default {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--transition) !important;
}

.bootstrap-select.open > .btn-default,
.bootstrap-select > .btn-default:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgb(37 99 235 / .12) !important;
}

/* Input groups */
.input-group-addon {
  background: #f8fafc !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-muted) !important;
}

/* ─────────────────────────────────────────────
   Modals
   ───────────────────────────────────────────── */
.modal-content {
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 20px 40px -8px rgb(0 0 0 / .18), 0 8px 16px -4px rgb(0 0 0 / .08) !important;
  overflow: hidden;
}

.modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--clr-border) !important;
  padding: 16px 24px !important;
  border-radius: 0 !important;
}

.modal-header .modal-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
}

.modal-header .close {
  opacity: 0.5;
  transition: opacity var(--transition);
}

.modal-header .close:hover {
  opacity: 1;
}

.modal-body {
  padding: 20px 24px !important;
}

.modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--clr-border) !important;
  padding: 14px 24px !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.modal-backdrop {
  background-color: #0f172a !important;
}

.modal-backdrop.in {
  opacity: 0.5 !important;
}

/* ─────────────────────────────────────────────
   Alerts
   ───────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md) !important;
  border: 0 !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
}

.alert-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-left: 4px solid #16a34a !important;
}

.alert-danger,
.alert-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-left: 4px solid #dc2626 !important;
}

.alert-warning {
  background: #fffbeb !important;
  color: #92400e !important;
  border-left: 4px solid #d97706 !important;
}

.alert-info {
  background: #eff6ff !important;
  color: #1e40af !important;
  border-left: 4px solid #2563eb !important;
}

/* ─────────────────────────────────────────────
   Badges & Labels
   ───────────────────────────────────────────── */
.badge {
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
}

.label {
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 7px !important;
  letter-spacing: 0.02em;
}

.label-default {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

.label-primary,
.badge-primary {
  background: var(--clr-primary-light) !important;
  color: var(--clr-primary) !important;
}

.label-success,
.badge-success {
  background: #f0fdf4 !important;
  color: #16a34a !important;
}

.label-danger,
.badge-danger {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.label-warning,
.badge-warning {
  background: #fffbeb !important;
  color: #d97706 !important;
}

.label-info,
.badge-info {
  background: #f0f9ff !important;
  color: #0284c7 !important;
}

/* ─────────────────────────────────────────────
   Tabs
   ───────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--clr-border) !important;
}

.nav-tabs > li > a {
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  color: var(--clr-text-muted) !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}

.nav-tabs > li > a:hover {
  background: transparent !important;
  color: var(--clr-text) !important;
  border-bottom-color: var(--clr-border-strong) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid var(--clr-primary) !important;
  color: var(--clr-primary) !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────
   Dropdown Menus
   ───────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
}

.dropdown-menu > li > a {
  border-radius: 5px !important;
  padding: 7px 12px !important;
  color: var(--clr-text) !important;
  font-size: 13.5px;
  transition: background-color var(--transition);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: #f1f5f9 !important;
  color: var(--clr-text) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--clr-primary-light) !important;
  color: var(--clr-primary) !important;
}

.dropdown-menu .divider {
  margin: 5px 0 !important;
  background: var(--clr-border) !important;
}

/* ─────────────────────────────────────────────
   Breadcrumb
   ───────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  margin-bottom: 4px !important;
  font-size: 12.5px !important;
}

.breadcrumb > li + li::before {
  color: #94a3b8 !important;
}

.breadcrumb > .active {
  color: var(--clr-text-muted) !important;
}

/* ─────────────────────────────────────────────
   Page headings
   ───────────────────────────────────────────── */
.page-heading,
h3.page-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────
   Notification dropdown items
   ───────────────────────────────────────────── */
.notification-wrapper .unread-notification {
  background: var(--clr-primary-light) !important;
  color: var(--clr-primary) !important;
  border-radius: 5px;
}

.notification-wrapper .unread-notification .notification-date {
  color: #1d4ed8 !important;
}

.notification-wrapper .unread-notification:hover {
  background: #dbeafe !important;
}

/* ─────────────────────────────────────────────
   Popover
   ───────────────────────────────────────────── */
.popover {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.popover-title {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   Tooltip
   ───────────────────────────────────────────── */
.tooltip-inner {
  background: #1e293b !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
}

.tooltip.top .tooltip-arrow { border-top-color: #1e293b !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #1e293b !important; }
.tooltip.left .tooltip-arrow { border-left-color: #1e293b !important; }
.tooltip.right .tooltip-arrow { border-right-color: #1e293b !important; }

/* ─────────────────────────────────────────────
   Dashboard stat boxes  (.home-stats)
   ───────────────────────────────────────────── */
.home-stats .panel_s {
  border-left: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}

.home-stats .panel_s:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Stat box colour accents via nth-child */
.home-stats .col-md-5ths:nth-child(1) .panel_s { border-left-color: #2563eb; }
.home-stats .col-md-5ths:nth-child(2) .panel_s { border-left-color: #16a34a; }
.home-stats .col-md-5ths:nth-child(3) .panel_s { border-left-color: #d97706; }
.home-stats .col-md-5ths:nth-child(4) .panel_s { border-left-color: #9333ea; }
.home-stats .col-md-5ths:nth-child(5) .panel_s { border-left-color: #0891b2; }

/* Stat number size */
.home-stats .panel-body h1,
.home-stats .panel-body h2,
.home-stats .panel-body .stat-number {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--clr-text) !important;
  line-height: 1.2;
}

/* ─────────────────────────────────────────────
   Kan-Ban Board Cards
   ───────────────────────────────────────────── */
.kan-ban-body .panel_s {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--clr-border) !important;
  transition: box-shadow var(--transition);
}

.kan-ban-body .panel_s:hover {
  box-shadow: var(--shadow-md) !important;
}

.kan-ban-content {
  background: #eef2f7 !important;
  border-radius: var(--radius-md) !important;
}

/* ─────────────────────────────────────────────
   Progress Bars
   ───────────────────────────────────────────── */
.progress {
  border-radius: 20px !important;
  background: #e2e8f0 !important;
  box-shadow: none !important;
  height: 8px !important;
}

.progress-bar {
  border-radius: 20px !important;
  transition: width .4s ease !important;
}

.progress-bar-success { background-color: #16a34a !important; }
.progress-bar-info    { background-color: #0284c7 !important; }
.progress-bar-warning { background-color: #d97706 !important; }
.progress-bar-danger  { background-color: #dc2626 !important; }

/* ─────────────────────────────────────────────
   Checkboxes & Radios  (Bootstrap custom feel)
   ───────────────────────────────────────────── */
.checkbox label,
.radio label {
  font-weight: 400 !important;
}

/* ─────────────────────────────────────────────
   Scrollbar (webkit — subtle, modern)
   ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar-thumb {
  background: #d1d5db;
}

/* ─────────────────────────────────────────────
   Misc polish
   ───────────────────────────────────────────── */

/* Table margin-top reset — panel already provides spacing */
.panel-body table.table {
  margin-top: 0 !important;
}

/* Divider  */
hr {
  border-color: var(--clr-border) !important;
}

/* Well */
.well {
  background: #f8fafc !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

/* List-group */
.list-group-item {
  border-color: var(--clr-border) !important;
  transition: background-color var(--transition);
}

.list-group-item:hover {
  background: #f8fafc !important;
}

.list-group-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }
.list-group-item:only-child  { border-radius: var(--radius-md) !important; }

/* Code blocks */
code {
  background: #f1f5f9 !important;
  color: #c026d3 !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
}

/* Smooth links */
a {
  transition: color var(--transition);
}

/* Note block */
.note {
  border-radius: var(--radius-sm) !important;
  border-left: 3px solid #d97706 !important;
  background: #fffbeb !important;
}

/* Flatpickr / datepicker inputs */
.flatpickr-input,
input[type="date"] {
  border-radius: var(--radius-sm) !important;
}

/* Screen-options button polish */
.screen-options-btn {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}