/*
 * SBDental – Modern UI Override
 * Loaded last via template_helper.php, so these rules take precedence.
 */

/* ─── Custom Font ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ─── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  /* Brand / accent */
  --mint:          #3898f2;
  --mint-dim:      rgba(0, 229, 160, 0.12);
  --mint-glow:     rgba(0, 229, 160, 0.25);
  --mint-text:     #3898f2;

  /* Blue brand (for content area) */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;

  /* Sidebar palette */
  --sb-bg:          #0d1117;
  --sb-surface:     #161b22;
  --sb-border:      rgba(255,255,255,.06);
  --sb-text:        #8b949e;
  --sb-text-hover:  #cdd9e5;
  --sb-text-active: #ffffff;
  --sb-icon:        #6e7681;
  --sb-hover-bg:    rgba(255,255,255,.05);
  --sb-active-bg:   rgba(0, 229, 160, .10);
  --sb-accent-bar:  3px;

  /* Content area */
  --header-bg:  #ffffff;
  --body-bg:    #f1f5f9;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
}

/* ─── Sidebar Font ───────────────────────────────────────────────────────── */
/* Apply DM Sans only to text elements, NOT to icon elements (i, svg, span.fa-*) */
.sidebar,
.sidebar a,
.sidebar span,
.sidebar li,
.sidebar ul,
.sidebar div {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ─── Sidebar Shell ──────────────────────────────────────────────────────── */
.sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-border) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Thin, dark scrollbar inside sidebar */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16); }

/* ─── Logo / header area color ───────────────────────────────────────────── */
#logo-wrapper,
.sidebar-logo,
.logo-area {
  background: var(--sb-bg) !important;
  border-bottom: 1px solid var(--sb-border) !important;
}

/* ─── User Profile Card ──────────────────────────────────────────────────── */
.sidebar-user-profile > a.profile {
  background: var(--sb-surface) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s !important;
}

.sidebar-user-profile > a.profile:hover,
.sidebar-user-profile > a.profile:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Name & email inside profile */
.sidebar-user-profile .tw-font-semibold {
  color: var(--sb-text-hover) !important;
}

.sidebar-user-profile .tw-font-normal {
  color: var(--sb-text) !important;
}

/* ─── Slide-in animation for nav items ───────────────────────────────────── */
@keyframes sb-fadein {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sidebar > ul.nav > li {
  animation: sb-fadein .3s cubic-bezier(.22,.68,0,1.2) both;
  border-left: var(--sb-accent-bar) solid transparent !important;
  margin-bottom: 1px !important;
}

/* staggered delay for first 16 items */
.sidebar > ul.nav > li:nth-child(1)  { animation-delay: .03s; }
.sidebar > ul.nav > li:nth-child(2)  { animation-delay: .06s; }
.sidebar > ul.nav > li:nth-child(3)  { animation-delay: .09s; }
.sidebar > ul.nav > li:nth-child(4)  { animation-delay: .12s; }
.sidebar > ul.nav > li:nth-child(5)  { animation-delay: .15s; }
.sidebar > ul.nav > li:nth-child(6)  { animation-delay: .18s; }
.sidebar > ul.nav > li:nth-child(7)  { animation-delay: .21s; }
.sidebar > ul.nav > li:nth-child(8)  { animation-delay: .24s; }
.sidebar > ul.nav > li:nth-child(9)  { animation-delay: .27s; }
.sidebar > ul.nav > li:nth-child(10) { animation-delay: .30s; }
.sidebar > ul.nav > li:nth-child(11) { animation-delay: .33s; }
.sidebar > ul.nav > li:nth-child(12) { animation-delay: .35s; }
.sidebar > ul.nav > li:nth-child(13) { animation-delay: .37s; }
.sidebar > ul.nav > li:nth-child(14) { animation-delay: .39s; }
.sidebar > ul.nav > li:nth-child(15) { animation-delay: .41s; }
.sidebar > ul.nav > li:nth-child(16) { animation-delay: .43s; }

/* ─── Menu Item — Base ───────────────────────────────────────────────────── */
.sidebar ul.nav li a {
  color: var(--sb-text) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  letter-spacing: .01em !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  transition:
    background .18s cubic-bezier(.4,0,.2,1),
    color .18s,
    transform .15s cubic-bezier(.4,0,.2,1) !important;
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--sb-icon) !important;
  font-size: 16px !important;
  width: 20px !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  transition: color .18s, transform .2s cubic-bezier(.4,0,.2,1) !important;
}

/* Arrow chevron */
.sidebar ul.nav li a .fa.arrow {
  margin-left: auto !important;
  font-size: 11px !important;
  opacity: .45 !important;
  transition: transform .2s, opacity .18s !important;
}

/* ─── Hover ──────────────────────────────────────────────────────────────── */
.sidebar > ul.nav > li:hover > a:first-child {
  background: var(--sb-hover-bg) !important;
  color: var(--sb-text-hover) !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
  color: var(--sb-text-hover) !important;
  background: var(--sb-hover-bg) !important;
}

.sidebar ul.nav > li > a:hover i.menu-icon,
.sidebar ul.nav > li > a:focus i.menu-icon {
  color: var(--sb-text-hover) !important;
  transform: translateX(1px) !important;
}

/* ─── Active ─────────────────────────────────────────────────────────────── */
.sidebar > ul.nav > li.active {
  border-left-color: var(--mint) !important;
}

.sidebar > ul.nav > li.active > a:first-child {
  background: var(--sb-active-bg) !important;
  box-shadow: none !important;
  border: none !important;
}

.sidebar ul.nav li.active > a {
  color: var(--sb-text-active) !important;
}

.sidebar ul.nav li.active > a i.menu-icon {
  color: var(--mint-text) !important;
}

/* Expanded arrow rotation */
.sidebar ul.nav li.active > a .fa.arrow,
.sidebar ul.nav li > a[aria-expanded="true"] .fa.arrow {
  transform: rotate(90deg) !important;
  opacity: .7 !important;
}

/* ─── Second-level nav ───────────────────────────────────────────────────── */
.sidebar ul.nav li .nav-second-level {
  padding-left: 6px !important;
}

.sidebar ul.nav li .nav-second-level li a {
  color: var(--sb-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 5px 10px 5px 36px !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: relative !important;
}

/* Dot indicator for sub-items */
.sidebar ul.nav li .nav-second-level li a::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sb-icon);
  transition: background .18s, transform .18s;
}

.sidebar ul.nav li .nav-second-level li a:hover::before,
.sidebar ul.nav li .nav-second-level li.active a::before {
  background: var(--mint);
  transform: translateY(-50%) scale(1.4);
}

.sidebar ul.nav li .nav-second-level li.active a {
  color: #e6edf3 !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.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(--sb-text-hover) !important;
  background: var(--sb-hover-bg) !important;
}

.sidebar ul.nav li .nav-second-level a .menu-icon {
  color: var(--sb-icon) !important;
}

/* ─── Badge inside menu ──────────────────────────────────────────────────── */
.sidebar .badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  margin-left: auto !important;
  line-height: 1.4 !important;
}

/* ─── Setup menu item ────────────────────────────────────────────────────── */
#setup-menu-item > a {
  color: var(--sb-text) !important;
}

#setup-menu-item > a:hover {
  color: var(--sb-text-hover) !important;
  background: var(--sb-hover-bg) !important;
}

#setup-menu-wrapper {
  background: var(--sb-bg) !important;
}

#setup-menu > li:first-child {
  border-bottom-color: var(--sb-border) !important;
  color: #cdd9e5 !important;
}

#setup-menu > li > a,
#setup-menu li a {
  color: var(--sb-text) !important;
}

#setup-menu > li > a:hover,
#setup-menu li a:hover {
  background: var(--sb-hover-bg) !important;
  color: var(--sb-text-hover) !important;
}

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

#wrapper {
  background: var(--body-bg);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
#header {
  background: var(--header-bg) !important;
  box-shadow: 0 1px 0 #e2e8f0 !important;
  border-bottom: none !important;
}

/* ─── Content Area ───────────────────────────────────────────────────────── */
#content-wrapper,
.content-wrapper,
#page-content {
  background: var(--body-bg) !important;
}

/* ─── Cards / Panels ─────────────────────────────────────────────────────── */
.panel,
.panel-default,
.box {
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

.panel-heading {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  padding: 14px 18px !important;
}

.panel-body {
  background: #ffffff !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* panel_s (used in invoice/estimate creation) */
.panel_s {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid #e2e8f0 !important;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  transition: filter .15s, transform .1s, box-shadow .15s !important;
  font-size: 13.5px !important;
}

.btn:hover {
  filter: brightness(1.06) !important;
}

.btn:active {
  transform: translateY(1px) !important;
}

.btn-primary,
.btn-info {
  background: var(--brand-600) !important;
  border-color: var(--brand-700) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-info:focus {
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  color: #ffffff !important;
}

.btn-default {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}

.btn-default:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

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

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

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

/* ─── Form Controls ──────────────────────────────────────────────────────── */
.form-control {
  border-radius: var(--radius-sm) !important;
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  color: #111827 !important;
  transition: border-color .15s, box-shadow .15s !important;
}

.form-control:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
  outline: none !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: #d1d5db !important;
  border-radius: var(--radius-sm) !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 {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-600) !important;
}

/* Bootstrap-select */
.bootstrap-select > .btn-default {
  border-color: #d1d5db !important;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table > thead > tr > th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
}

.table > tbody > tr > td {
  border-color: #f1f5f9 !important;
  vertical-align: middle !important;
  color: #374151 !important;
}

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

.table-striped > tbody > tr:nth-child(odd) > td {
  background: #fafbfc !important;
}

/* DataTables wrapper */
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--radius-sm) !important;
  border: 1px solid #d1d5db !important;
  padding: 5px 10px !important;
}

/* ─── Modals ─────────────────────────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
}

.modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  background: #ffffff !important;
}

.modal-header .modal-title {
  font-weight: 700 !important;
  color: #0f172a !important;
}

.modal-footer {
  border-top: 1px solid #f1f5f9 !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* ─── Alert / Notifications ──────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-weight: 500 !important;
}

.alert-success { background: #dcfce7 !important; color: #166534 !important; }
.alert-danger,
.alert-error   { background: #fee2e2 !important; color: #991b1b !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; }
.alert-info    { background: #dbeafe !important; color: #1e40af !important; }

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

.breadcrumb > li + li::before {
  color: #9ca3af !important;
}

/* ─── Page Title ─────────────────────────────────────────────────────────── */
.page-header,
.page-title h3,
.content-heading {
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -.01em !important;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.nav-tabs > li > a {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--brand-600) !important;
  border-bottom-color: transparent !important;
  font-weight: 600 !important;
}

.nav-tabs {
  border-bottom-color: #e2e8f0 !important;
}

/* ─── Badges / Labels ────────────────────────────────────────────────────── */
.badge,
.label {
  border-radius: 20px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}

/* ─── Dropdowns ──────────────────────────────────────────────────────────── */
.dropdown-menu {
  border-radius: var(--radius-md) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  padding: 4px !important;
}

.dropdown-menu > li > a {
  border-radius: var(--radius-sm) !important;
  color: #374151 !important;
  font-weight: 500 !important;
  padding: 7px 12px !important;
  transition: background .12s !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--brand-50) !important;
  color: var(--brand-700) !important;
}

/* ─── Scrollbar (Webkit) ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

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

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

/* ─── Misc utility tweaks ────────────────────────────────────────────────── */
/* Slightly softer text for muted/secondary elements */
.text-muted,
small.text-muted {
  color: #6b7280 !important;
}

/* Input groups */
.input-group-addon {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #6b7280 !important;
  border-radius: var(--radius-sm) !important;
}

/* Checkbox / radio accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-600);
}

/* Smooth link hover */
a {
  transition: color .15s !important;
}

a:hover {
  text-decoration: none !important;
}