/* ============================================================
   PMS Modern Skin — custom.css
   Loaded automatically by template_helper / themes_helper.
   Overrides Bootstrap 3 + app defaults with a fresh modern UI.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --pms-primary:      #002087;
  --pms-primary-dk:   #001a6e;
  --pms-primary-lt:   #e3e8f6;
  --pms-accent:       #06b6d4;
  --pms-success:      #10b981;
  --pms-warning:      #f59e0b;
  --pms-danger:       #ef4444;
  --pms-info:         #3b82f6;
  --pms-gray-50:      #f8fafc;
  --pms-gray-100:     #f1f5f9;
  --pms-gray-200:     #e2e8f0;
  --pms-gray-300:     #cbd5e1;
  --pms-gray-400:     #94a3b8;
  --pms-gray-500:     #64748b;
  --pms-gray-700:     #334155;
  --pms-gray-900:     #0f172a;
  --pms-radius:       12px;
  --pms-radius-sm:    8px;
  --pms-radius-xs:    6px;
  --pms-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --pms-shadow-md:    0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --pms-shadow-lg:    0 10px 30px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --pms-transition:   all .18s ease;
}

/* ── Global base ────────────────────────────────────────────── */
body {
  background: #f0f4f8 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--pms-gray-700) !important;
}

/* ── Top navbar — dark ──────────────────────────────────────── */
.navbar,
.navbar-default,
#header,
#header nav {
  background: var(--pms-primary) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  min-height: 58px !important;
  border-radius: 0 !important;
}
/* hamburger / hide-menu button */
/* #header nav is forced position:relative (see .pms-header-propname rule below),
   which paints it above this static-positioned button — lift the button above it */
.hide-menu {
  position: relative !important;
  z-index: 10 !important;
  padding: .5rem !important;
}
.hide-menu svg {
  width: 22px !important;
  height: 22px !important;
}
.hide-menu,
.navbar-toggle { color: rgba(255,255,255,.7) !important; }
.hide-menu:hover,
.navbar-toggle:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }

/* search input on dark header */
#search_input {
  background: rgba(255,255,255,.12) !important;
  border-color: transparent !important;
  color: #fff !important;
}
#search_input::placeholder { color: rgba(255,255,255,.5) !important; }
#search_input:focus { background: rgba(255,255,255,.18) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.2) !important; }
#top_search_button button { color: rgba(255,255,255,.6) !important; }

/* logo text on dark */
.navbar a.navbar-brand,
.navbar .logo-text { color: #fff !important; }

/* notification bell */
.navbar-right .notifications-icon i,
.navbar-right .fa-bell { color: rgba(255,255,255,.8) !important; }
.navbar-right .notifications-icon:hover i { color: #fff !important; }

/* mobile chevron */
.mobile-menu-toggle { color: rgba(255,255,255,.7) !important; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar, aside#menu {
  background: #fff !important;
  border-right: 1px solid var(--pms-gray-200) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.04) !important;
}
.sidebar ul.nav > li > a {
  color: var(--pms-gray-500) !important;
  border-radius: var(--pms-radius-sm) !important;
  margin: 1px 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 500;
  transition: var(--pms-transition);
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li.active > a,
.sidebar ul.nav > li > a:focus {
  background: var(--pms-primary-lt) !important;
  color: var(--pms-primary) !important;
}
.sidebar ul.nav > li > a i {
  width: 18px;
  text-align: center;
  font-size: 14px;
}
.sidebar ul.nav li ul.nav-second-level li a {
  padding-left: 38px !important;
  font-size: 12.5px !important;
  border-radius: var(--pms-radius-xs) !important;
  margin: 1px 8px !important;
  color: var(--pms-gray-500) !important;
}
.sidebar ul.nav li ul.nav-second-level li.active a,
.sidebar ul.nav li ul.nav-second-level li a:hover {
  background: var(--pms-primary-lt) !important;
  color: var(--pms-primary) !important;
}

/* ── Content area ────────────────────────────────────────────── */
.content { padding: 24px !important; }

/* ── Cards / Panels ─────────────────────────────────────────── */
.panel_s,
.panel.panel-default,
.panel.panel-white {
  background: #fff !important;
  border: 1px solid var(--pms-gray-200) !important;
  border-radius: var(--pms-radius) !important;
  box-shadow: var(--pms-shadow) !important;
  overflow: visible;
}

/* Ensure bootstrap-select dropdowns always render above everything */
.bootstrap-select .dropdown-menu {
  z-index: 9999 !important;
}
.bootstrap-select .dropdown-menu .inner {
  max-height: 280px !important;
  overflow-y: auto !important;
}
/* table-responsive must not clip dropdowns */
.table-responsive { overflow: visible !important; }
/* Dropdowns appended to body still need high z-index */
body > .bootstrap-select.open .dropdown-menu {
  z-index: 99999 !important;
}
.panel-body { padding: 20px !important; }
.panel-heading {
  background: #fff !important;
  border-bottom: 1px solid var(--pms-gray-200) !important;
  border-radius: var(--pms-radius) var(--pms-radius) 0 0 !important;
  padding: 14px 20px !important;
  font-weight: 600;
  color: var(--pms-gray-700);
}
.hr-panel-heading {
  border-color: var(--pms-gray-200) !important;
  margin: 12px 0 !important;
}
.panel-footer {
  background: var(--pms-gray-50) !important;
  border-top: 1px solid var(--pms-gray-200) !important;
  border-radius: 0 0 var(--pms-radius) var(--pms-radius) !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  border-radius: var(--pms-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  transition: var(--pms-transition) !important;
  border: none !important;
  letter-spacing: .01em;
}
.btn-primary {
  background: var(--pms-primary) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(79,70,229,.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--pms-primary-dk) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,.35) !important;
  transform: translateY(-1px);
}
.btn-success {
  background: var(--pms-success) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(16,185,129,.3) !important;
}
.btn-success:hover { background: #059669 !important; transform: translateY(-1px); }
.btn-danger {
  background: var(--pms-danger) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(239,68,68,.25) !important;
}
.btn-danger:hover { background: #dc2626 !important; transform: translateY(-1px); }
.btn-warning {
  background: var(--pms-warning) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(245,158,11,.25) !important;
}
.btn-warning:hover { background: #d97706 !important; transform: translateY(-1px); }
.btn-info {
  background: var(--pms-info) !important;
  color: #fff !important;
}
.btn-info:hover { background: #2563eb !important; transform: translateY(-1px); }
.btn-default {
  background: #fff !important;
  color: var(--pms-gray-700) !important;
  border: 1px solid var(--pms-gray-300) !important;
  box-shadow: var(--pms-shadow) !important;
}
.btn-default:hover {
  background: var(--pms-gray-50) !important;
  border-color: var(--pms-gray-400) !important;
  transform: translateY(-1px);
}

/* Small & XS buttons */
.btn-sm, .btn-group-sm > .btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: var(--pms-radius-xs) !important;
}
.btn-xs, .btn-group-xs > .btn {
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
}

/* Table action buttons — icon-only pill style */
.btn-icon,
td .btn.btn-xs,
td .btn.btn-sm {
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 11.5px !important;
  line-height: 1.4;
}
td .btn + .btn { margin-left: 3px; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge,
span.badge {
  border-radius: 20px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  letter-spacing: .02em;
  line-height: 1.5;
}

/* Status-colored label badges */
.label { border-radius: 20px !important; font-size: 11px !important; padding: 3px 9px !important; font-weight: 600 !important; }
.label-default, .label-secondary { background: var(--pms-gray-200) !important; color: var(--pms-gray-700) !important; }
.label-primary { background: var(--pms-primary-lt) !important; color: var(--pms-primary) !important; }
.label-success { background: #d1fae5 !important; color: #065f46 !important; }
.label-warning { background: #fef3c7 !important; color: #92400e !important; }
.label-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.label-info    { background: #dbeafe !important; color: #1e40af !important; }

/* Bootstrap badge overrides */
.badge-primary { background: var(--pms-primary) !important; }
.badge-success { background: var(--pms-success) !important; }
.badge-warning { background: var(--pms-warning) !important; }
.badge-danger  { background: var(--pms-danger) !important; }
.badge-info    { background: var(--pms-info) !important; }

/* Sidebar nav badges */
.sidebar .badge {
  background: var(--pms-primary) !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
}

/* ── DataTables / Tables ─────────────────────────────────────── */
.table,
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  font-size: 13px !important;
}
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  background: var(--pms-gray-50) !important;
  color: var(--pms-gray-500) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--pms-gray-200) !important;
  border-top: none !important;
  white-space: nowrap;
}
.table thead th:first-child,
table.dataTable thead th:first-child { border-radius: var(--pms-radius-sm) 0 0 0 !important; }
.table thead th:last-child,
table.dataTable thead th:last-child  { border-radius: 0 var(--pms-radius-sm) 0 0 !important; }

.table tbody tr,
table.dataTable tbody tr {
  transition: background .12s ease;
}
.table tbody tr:hover,
table.dataTable tbody tr:hover {
  background: #f8f6ff !important;
}
.table tbody tr:nth-child(even),
table.dataTable tbody tr.even {
  background: var(--pms-gray-50);
}
.table > tbody > tr > td,
table.dataTable tbody td {
  padding: 11px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--pms-gray-100) !important;
  border-top: none !important;
  color: var(--pms-gray-700);
}

/* DataTable wrapper styling */
.dataTables_wrapper {
  padding: 0 !important;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--pms-gray-300) !important;
  border-radius: var(--pms-radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  outline: none;
  transition: var(--pms-transition);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--pms-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--pms-gray-300) !important;
  border-radius: var(--pms-radius-xs) !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}
.dataTables_wrapper .dataTables_info {
  color: var(--pms-gray-400) !important;
  font-size: 12px !important;
  padding-top: 10px !important;
}
/* DataTables sort icons */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  color: var(--pms-gray-400) !important;
  opacity: .8;
}
table.dataTable thead .sorting_asc:after  { color: var(--pms-primary) !important; }
table.dataTable thead .sorting_desc:after { color: var(--pms-primary) !important; }

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--pms-radius-xs) !important;
  margin: 0 2px !important;
  padding: 4px 10px !important;
  font-size: 12.5px !important;
  color: var(--pms-gray-500) !important;
  border: 1px solid transparent !important;
  transition: var(--pms-transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--pms-primary-lt) !important;
  color: var(--pms-primary) !important;
  border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--pms-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 6px rgba(79,70,229,.3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--pms-gray-300) !important;
  cursor: not-allowed;
}

/* Table container */
.table-responsive {
  border-radius: var(--pms-radius) !important;
  border: 1px solid var(--pms-gray-200) !important;
  overflow: hidden;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-control {
  border: 1px solid var(--pms-gray-300) !important;
  border-radius: var(--pms-radius-xs) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--pms-gray-700) !important;
  transition: var(--pms-transition) !important;
  box-shadow: none !important;
  height: auto !important;
}
.form-control:focus {
  border-color: var(--pms-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
  outline: none !important;
}
.form-group label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--pms-gray-700) !important;
  margin-bottom: 5px !important;
}

/* ── Input groups ────────────────────────────────────────────── */
.input-group-addon {
  background: var(--pms-gray-50) !important;
  border: 1px solid var(--pms-gray-300) !important;
  border-radius: var(--pms-radius-xs) !important;
  color: var(--pms-gray-500) !important;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--pms-gray-200) !important;
  gap: 4px;
}
.nav-tabs > li > a {
  border: none !important;
  border-radius: var(--pms-radius-sm) var(--pms-radius-sm) 0 0 !important;
  color: var(--pms-gray-500) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  transition: var(--pms-transition) !important;
  margin-bottom: -2px !important;
}
.nav-tabs > li > a:hover {
  background: var(--pms-gray-100) !important;
  color: var(--pms-gray-700) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: none !important;
  border-bottom: 3px solid var(--pms-primary) !important;
  color: var(--pms-primary) !important;
  background: transparent !important;
  font-weight: 600 !important;
}
.tab-content { padding-top: 16px !important; }

/* ── Modals ──────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--pms-radius) !important;
  border: none !important;
  box-shadow: var(--pms-shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  background: #fff !important;
  border-bottom: 1px solid var(--pms-gray-200) !important;
  padding: 16px 20px !important;
}
.modal-header .modal-title { font-weight: 600 !important; font-size: 16px !important; color: var(--pms-gray-900) !important; }
.modal-footer {
  background: var(--pms-gray-50) !important;
  border-top: 1px solid var(--pms-gray-200) !important;
  padding: 12px 20px !important;
}
.modal-body { padding: 20px !important; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
  border-radius: var(--pms-radius-sm) !important;
  border: none !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}
.alert-success { background: #d1fae5 !important; color: #065f46 !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; }
.alert-danger  { background: #fee2e2 !important; color: #991b1b !important; }
.alert-info    { background: #dbeafe !important; color: #1e40af !important; }

/* ── Dropdowns ───────────────────────────────────────────────── */
.dropdown-menu {
  border-radius: var(--pms-radius-sm) !important;
  border: 1px solid var(--pms-gray-200) !important;
  box-shadow: var(--pms-shadow-md) !important;
  padding: 6px !important;
  font-size: 13px !important;
}
.dropdown-menu > li > a {
  border-radius: var(--pms-radius-xs) !important;
  padding: 7px 12px !important;
  color: var(--pms-gray-700) !important;
  transition: var(--pms-transition);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--pms-primary-lt) !important;
  color: var(--pms-primary) !important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--pms-primary) !important;
  color: #fff !important;
  border-radius: var(--pms-radius-xs) !important;
}

/* ── Select picker (bootstrap-select) ───────────────────────── */
.bootstrap-select .btn.dropdown-toggle {
  border: 1px solid var(--pms-gray-300) !important;
  border-radius: var(--pms-radius-xs) !important;
  background: #fff !important;
  color: var(--pms-gray-700) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
}
.bootstrap-select.open .btn.dropdown-toggle,
.bootstrap-select .btn.dropdown-toggle:focus {
  border-color: var(--pms-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important;
}

/* ── Page headings ───────────────────────────────────────────── */
.customer-profile-group-heading,
h4.no-margin {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--pms-gray-900) !important;
  letter-spacing: -.01em;
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}
.breadcrumb > li + li:before { color: var(--pms-gray-400) !important; }

/* ── Stat / summary cards ────────────────────────────────────── */
.widget-stat-block,
.stats-summary,
.summary-block {
  border-radius: var(--pms-radius) !important;
  border: none !important;
  box-shadow: var(--pms-shadow) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pms-gray-100); }
::-webkit-scrollbar-thumb { background: var(--pms-gray-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--pms-gray-400); }

/* ── Float alerts (app toasts) ───────────────────────────────── */
#float-alerts-area .alert,
.alert-float {
  border-radius: var(--pms-radius-sm) !important;
  box-shadow: var(--pms-shadow-md) !important;
  border: none !important;
  font-size: 13px !important;
}

/* ── Popovers ────────────────────────────────────────────────── */
.popover {
  border-radius: var(--pms-radius-sm) !important;
  border: 1px solid var(--pms-gray-200) !important;
  box-shadow: var(--pms-shadow-md) !important;
}

/* ── Checkboxes / Radios modernize ──────────────────────────── */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--pms-primary);
}

/* ── Text utilities ──────────────────────────────────────────── */
.text-muted { color: var(--pms-gray-400) !important; font-size: 12px; }

/* ── Section headings in views ───────────────────────────────── */
h5.text-info, h5.text-success, h5.text-primary, h5.text-danger {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
h5.text-info    { color: var(--pms-info) !important; }
h5.text-success { color: var(--pms-success) !important; }
h5.text-primary { color: var(--pms-primary) !important; }
h5.text-danger  { color: var(--pms-danger) !important; }

/* ── Occupancy status badges ─────────────────────────────────── */
.occupancy-badge,
td .label[class*="Vacant"],
td span:contains("Vacant"),
td span:contains("Owner"),
td span:contains("Tenant") {
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ── Specific occupancy status colors (applied via JS below) ─── */
.status-vacant  { background: #f1f5f9 !important; color: #475569 !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-owner   { background: #dbeafe !important; color: #1e40af !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-tenant  { background: #d1fae5 !important; color: #065f46 !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-draft   { background: #f1f5f9 !important; color: #475569 !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-sent    { background: #dbeafe !important; color: #1e40af !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-paid    { background: #d1fae5 !important; color: #065f46 !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-overdue { background: #fee2e2 !important; color: #991b1b !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-active  { background: #d1fae5 !important; color: #065f46 !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.status-ended   { background: #f1f5f9 !important; color: #475569 !important; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; }

/* ── Sub-menu item icon — fa-solid fa-caret-right on every child ── */
/* Hide any per-item custom icon so the caret is the only prefix */
.sidebar .nav-second-level a i.menu-icon,
.sidebar .nav-third-level  a i.menu-icon {
  display: none !important;
}
/* Inject fa-caret-right before every child menu link text */
.sidebar .nav-second-level a::before,
.sidebar .nav-third-level  a::before {
  content: "\f0da";                        /* fa-caret-right */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 10px;
  color: rgba(100,116,139,.6);
  margin-right: 8px;
  flex-shrink: 0;
  transition: color .15s ease;
}
.sidebar .nav-second-level li.active > a::before,
.sidebar .nav-second-level li:hover  > a::before,
.sidebar .nav-third-level  li.active > a::before,
.sidebar .nav-third-level  li:hover  > a::before {
  color: var(--pms-primary);
}

/* ── Sidebar sub-menu indicator — pure CSS rotating chevron ─── */
/* No font-icon dependency. A small border-based chevron that
   rotates 90° smoothly when the submenu opens.                  */

/* Reset the FA icon entirely */
.sidebar .fa.arrow,
#side-menu  .fa.arrow,
#setup-menu .fa.arrow {
  float: none !important;
  margin-left: auto !important;
  padding: 0 !important;
  font-size: 0 !important;          /* hide any glyph */
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  opacity: .5;
  transition: transform .2s ease, opacity .2s ease !important;
}

/* Draw chevron with CSS borders — points right (closed) */
.sidebar .fa.arrow::before,
#side-menu  .fa.arrow::before,
#setup-menu .fa.arrow::before {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid var(--pms-gray-500) !important;
  border-bottom: 1.5px solid var(--pms-gray-500) !important;
  transform: rotate(-45deg) !important;    /* → points right */
  transition: transform .2s ease !important;
  font-family: inherit !important;
}

/* Active/open — rotate chevron 90° to point down */
.sidebar .active > a > .fa.arrow,
.sidebar li.open  > a > .fa.arrow,
.sidebar li.mm-active > a > .fa.arrow {
  opacity: .8 !important;
}
.sidebar .active > a > .fa.arrow::before,
.sidebar li.open  > a > .fa.arrow::before,
.sidebar li.mm-active > a > .fa.arrow::before {
  transform: rotate(45deg) !important;     /* ↓ points down */
  border-color: var(--pms-primary) !important;
}

/* Active parent link: chevron uses primary colour */
.sidebar ul.nav > li.active > a > .fa.arrow::before {
  border-color: var(--pms-primary) !important;
}

/* Ensure parent nav links stay flex so chevron sits at far right */
.sidebar ul.nav > li > a {
  display: flex !important;
  align-items: center !important;
}

/* ── HR dividers ─────────────────────────────────────────────── */
hr { border-color: var(--pms-gray-200) !important; }

/* ── Responsive table wrapper fix ───────────────────────────── */
.dataTables_wrapper .row { margin: 0; }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length { padding: 0 0 12px 0; }

/* ══════════════════════════════════════════════════════════════════════
   UNIT DASHBOARD — Modern redesign
   ══════════════════════════════════════════════════════════════════════ */

/* ── Account Summary KPI card ───────────────────────────────────────── */
.ud-kpi-card { height: 100%; }
.ud-kpi-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ud-kpi-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #f1f5f9;
}
.ud-kpi-item:last-child { border-bottom: none; }
.ud-kpi-item--sm .ud-kpi-value { font-size: 18px !important; }
.ud-kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ud-kpi-value {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #1e293b;
}
.ud-kpi-success { color: #10b981 !important; }
.ud-kpi-danger  { color: #ef4444 !important; }
.ud-kpi-neutral { color: #4f46e5 !important; }

/* ── Hero enhancements ───────────────────────────────────────────────── */
.ud-hero {
  border-radius: 20px !important;
  padding: 32px 36px !important;
  margin-bottom: 24px !important;
}
.ud-kicker {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  padding: 6px 14px !important;
}
.ud-title-block h1 {
  font-size: clamp(28px, 3.5vw, 48px) !important;
  margin: 12px 0 8px !important;
}
/* Hero stat grid hidden — stats moved to KPI card below */
.ud-hero-stats { display: none !important; }

/* ── Summary cards — modern info cards ──────────────────────────────── */
.unit-dashboard .row > [class*="col-"] > .panel_s {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04) !important;
  overflow: hidden;
  height: 100%;
}
/* Coloured top-border accent per card */
.unit-dashboard .row > [class*="col-"]:nth-child(1) > .panel_s { border-top: 3px solid #4f46e5 !important; }
.unit-dashboard .row > [class*="col-"]:nth-child(2) > .panel_s { border-top: 3px solid #10b981 !important; }
.unit-dashboard .row > [class*="col-"]:nth-child(3) > .panel_s { border-top: 3px solid #f59e0b !important; }

/* Card heading row */
.unit-dashboard .panel-body h5 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.unit-dashboard .panel-body h5 .fa {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.unit-dashboard h5.text-success .fa { background: #d1fae5; color: #059669; }
.unit-dashboard h5.text-info    .fa { background: #dbeafe; color: #2563eb; }
.unit-dashboard h5.text-primary .fa { background: #ede9fe; color: #4f46e5; }

/* Kill the old hr separator under headings */
.unit-dashboard .panel-body h5 + hr { display: none !important; }

/* Info table rows — modern key/value layout */
.unit-dashboard .table-borderless > tbody > tr > td {
  padding: 8px 0 !important;
  border: none !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.unit-dashboard .table-borderless > tbody > tr > td:first-child {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  width: 42% !important;
}
.unit-dashboard .table-borderless > tbody > tr > td:last-child {
  color: #1e293b !important;
  font-weight: 600 !important;
}
/* Separator between rows */
.unit-dashboard .table-borderless > tbody > tr + tr > td {
  border-top: 1px solid #f8fafc !important;
}

/* ── Financial snapshot card — big numbers ───────────────────────────── */
.unit-dashboard .row > [class*="col-"]:nth-child(3) .table-borderless td:last-child {
  font-size: 14px !important;
  font-weight: 700 !important;
}
/* Balance due / Total paid highlight */
.unit-dashboard .table-borderless tr.text-danger td { color: #ef4444 !important; }
.unit-dashboard .table-borderless tr.text-success td { color: #10b981 !important; }

/* ── Owner/tenant card — profile style ───────────────────────────────── */
.unit-dashboard .table-borderless td a.text-primary {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #4f46e5 !important;
}

/* ── Tabs — improved pill tabs ───────────────────────────────────────── */
.unit-dashboard .nav-tabs {
  gap: 6px !important;
  padding-bottom: 16px !important;
}
.unit-dashboard .nav-tabs > li > a {
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  transition: all .15s ease !important;
}
.unit-dashboard .nav-tabs > li > a:hover {
  background: #f1f5f9 !important;
  color: #334155 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}
.unit-dashboard .nav-tabs > li.active > a,
.unit-dashboard .nav-tabs > li.active > a:hover,
.unit-dashboard .nav-tabs > li.active > a:focus {
  background: #4f46e5 !important;
  color: #fff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.28) !important;
  transform: translateY(-1px);
}

/* ── Tab pane inner tables ───────────────────────────────────────────── */
.unit-dashboard .tab-pane h5 {
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #64748b !important;
  border-left: 3px solid #4f46e5;
  padding-left: 10px !important;
  margin: 20px 0 14px !important;
}
.unit-dashboard .tab-pane h5.text-info    { border-color: #3b82f6; color: #3b82f6 !important; }
.unit-dashboard .tab-pane h5.text-success { border-color: #10b981; color: #10b981 !important; }
.unit-dashboard .tab-pane h5.text-danger  { border-color: #ef4444; color: #ef4444 !important; }
.unit-dashboard .tab-pane h5.text-warning { border-color: #f59e0b; color: #f59e0b !important; }

/* ── Wells in Finance tab — KPI boxes ───────────────────────────────── */
.unit-dashboard .well, .unit-dashboard .well-sm {
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  background: linear-gradient(160deg, #fff 0%, #f8fafc 100%) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  padding: 16px !important;
  text-align: center;
}
.unit-dashboard .well h4 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 4px !important;
}
.unit-dashboard .well p, .unit-dashboard .well small {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #94a3b8 !important;
  margin: 0;
}

/* ── Action buttons in tab content ───────────────────────────────────── */
.unit-dashboard .tab-pane .btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ── Login page — handled entirely in login_admin.php inline styles ── */
body.login_admin { background: #f0f4f8 !important; }

/* ── Tooltip ─────────────────────────────────────────────────── */
.tooltip-inner {
  border-radius: var(--pms-radius-xs) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  background: var(--pms-gray-900) !important;
}

/* ── Well (Bootstrap) ───────────────────────────────────────── */
.well {
  background: var(--pms-gray-50) !important;
  border: 1px solid var(--pms-gray-200) !important;
  border-radius: var(--pms-radius-sm) !important;
  box-shadow: none !important;
}

/* ── _buttons wrapper ───────────────────────────────────────── */
._buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Hide sidebar profile block (moved to header) ───────────── */
.sidebar-user-profile {
  display: none !important;
}
/* Compensate for removed 80px spacer so menu clears the fixed navbar */
ul#side-menu {
  padding-top: 72px !important;
  margin-top: 0 !important;
}

/* ── Navbar-right — vertically center all items ──────────────── */
.navbar-right.navbar-nav,
ul.nav.navbar-nav.navbar-right {
  display: flex !important;
  align-items: center !important;
  height: 58px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.navbar-right.navbar-nav > li,
ul.nav.navbar-nav.navbar-right > li {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Property name needs the nav to be position:relative */
#header nav { position: relative !important; }

/* Shrink property name on small/medium screens so it keeps fitting centred */
@media (max-width: 992px) {
  .pms-header-propname span:last-child { display: none !important; }
}

/* ── Header profile dropdown ─────────────────────────────────── */
.pms-header-profile > a { opacity: 1; transition: opacity .15s; }
.pms-header-profile > a:hover { opacity: .85; }
.pms-header-profile .dropdown-menu { box-shadow: 0 8px 24px rgba(0,0,0,.15) !important; }
.pms-header-profile-icon { display: none; }

/* ── Mobile header: simplify to hamburger / centred title / notification / profile icon ──
   Matches the 991px breakpoint where Bootstrap's .visible-sm/.visible-xs (and so
   .mobile-menu-toggle / #mobile-collapse) start showing, so we fully replace them. */
@media (max-width: 991px) {
  #logo,
  #top_search,
  .mobile-menu,
  .pms-header-clock {
    display: none !important;
  }

  .pms-header-propname span:first-child { font-size: 14px !important; }

  /* Collapse profile block to an icon-only trigger */
  .pms-header-profile { padding: 0 8px !important; }
  .pms-header-profile > a > span,
  .pms-header-profile > a > .fa-chevron-down {
    display: none !important;
  }
  .pms-header-profile-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: rgba(255,255,255,.85);
  }
}