/*!
 * TrueHelpers brand-color lock.
 * Loaded LAST so it always overrides the base theme. This guarantees the
 * Iqonic "Handyman" demo purple (#5F60B9) can never replace our logo colors,
 * even if a minified theme file gets re-uploaded with the default palette.
 *
 * Brand palette:
 *   primary (logo red) : #B52926
 *   secondary (dark)   : #0D222D
 *   accent  (navy)     : #374785
 */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: #B52926 !important;
  --bs-primary-rgb: 181, 41, 38 !important;
  --bs-primary-hover-bg: #0D222D !important;
  --bs-primary-hover-border: #0D222D !important;
  --bs-primary-active-bg: #B52926 !important;
  --bs-primary-active-border: #B52926 !important;
  --bs-secondary: #0D222D !important;
  --bs-blue: #374785 !important;
  --bs-link-color: #374785 !important;
  --bs-link-color-rgb: 55, 71, 133 !important;
  --bs-link-hover-color: #0D222D !important;
  --bs-focus-ring-color: rgba(181, 41, 38, 0.25) !important;
  --bs-btn-bg: #B52926 !important;
  --bs-btn-border-color: #B52926 !important;
  --bs-btn-hover-bg: #0D222D !important;
  --bs-btn-hover-border-color: #0D222D !important;
  --bs-btn-active-bg: #B52926 !important;
  --bs-btn-active-border-color: #B52926 !important;
}

/* Hard-coded purple values used outside CSS variables in the demo theme */
.btn-primary,
.bg-primary {
  background-color: #B52926 !important;
  border-color: #B52926 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #0D222D !important;
  border-color: #0D222D !important;
}
.text-primary { color: #B52926 !important; }
a { color: #374785; }
a:hover { color: #0D222D; }
/* Card grids (services/blogs/providers) render inside Bootstrap .table (DataTables).
   A brand-red --bs-table-bg was bleeding through as red bands between cards — keep
   the table background transparent so each card shows its own background. */
.table { --bs-table-bg: transparent; }

/* ============================================================
   Modern refresh (Light Able-style tokens), 2026-07.
   Cool off-white canvas, 12px cards, soft blue-tinted shadows,
   white stat cards with tinted icon chips, soft status badges.
   ============================================================ */

/* Light-surface overrides are scoped to body:not(.dark) so the theme's
   dark-mode toggle keeps working. */
body:not(.dark) {
  background: #f4f7fa !important;
}
body:not(.dark) h1, body:not(.dark) h2, body:not(.dark) h3,
body:not(.dark) h4, body:not(.dark) h5, body:not(.dark) h6 {
  color: #1d2630;
}

.card {
  border-radius: 12px;
}
body:not(.dark) .card {
  border: 1px solid #e7eaee;
  box-shadow: 0 8px 24px rgba(27, 46, 94, 0.08);
}
.card .card-header {
  background: transparent;
  border-radius: 12px 12px 0 0;
}
body:not(.dark) .card .card-header {
  border-bottom-color: #eef0f2;
}

/* --- Dashboard stat cards: white surface instead of solid brand red --- */
body:not(.dark) .card.total-booking-card,
body:not(.dark) .card.total-service-card,
body:not(.dark) .card.total-provider-card,
body:not(.dark) .card.total-user-card,
body:not(.dark) .card.total-restaurant-card,
body:not(.dark) .card.total-revenue {
  background: #fff !important;
}
.card.total-booking-card::after,
.card.total-service-card::after,
.card.total-provider-card::after,
.card.total-user-card::after,
.card.total-restaurant-card::after,
.card.total-revenue::after {
  display: none !important;
}
h4.booking-text {
  font-size: 1.75rem;
  font-weight: 700 !important;
}
body:not(.dark) h4.booking-text {
  color: #1d2630 !important;
}
p.booking-text,
a.booking-text {
  font-weight: 500;
}
body:not(.dark) p.booking-text,
body:not(.dark) a.booking-text {
  color: #5b6b79 !important;
}

/* Icon chips: 48px tinted circles with brand-colored glyphs.
   Inline SVGs hardcode fill="white" and some chips carry .text-white,
   so recolor with explicit per-chip fills (CSS fill outranks the
   presentation attribute). */
.iq-card-icon {
  height: 48px;
  width: 48px;
  min-width: 48px;
  line-height: 48px;
}
.iq-card-icon.shadow {
  box-shadow: none !important;
}
.iq-card-icon.iq-card-icon-booking {
  background: rgba(181, 41, 38, 0.12) !important;
}
.iq-card-icon.iq-card-icon-booking svg path {
  fill: #b52926;
}
.iq-card-icon.iq-card-icon-service {
  background: rgba(55, 71, 133, 0.12) !important;
}
.iq-card-icon.iq-card-icon-service svg path {
  fill: #374785;
}
.iq-card-icon.iq-card-icon-provider {
  background: rgba(44, 168, 127, 0.15) !important;
}
.iq-card-icon.iq-card-icon-provider svg path {
  fill: #218f6c;
}
.iq-card-icon.iq-card-icon-revenue {
  background: rgba(229, 138, 0, 0.15) !important;
}
.iq-card-icon.iq-card-icon-revenue svg path {
  fill: #e58a00;
}
.iq-card-icon.iq-card-icon-user {
  background: rgba(13, 143, 199, 0.15) !important;
}
.iq-card-icon.iq-card-icon-user svg path {
  fill: #0d8fc7;
}
.iq-card-icon.iq-card-icon-restaurant {
  background: rgba(124, 77, 255, 0.15) !important;
}
.iq-card-icon.iq-card-icon-restaurant svg path {
  fill: #6c4ad0;
}

/* --- Consistent vertical rhythm between cards ---
   .h-100 equal-height cards fill 100% of the column, which pushes their
   bottom margin outside the row and rows end up touching — reserve the
   gap inside the height instead. */
.content-page .card {
  margin-bottom: 24px;
}
.content-page .card.h-100 {
  height: calc(100% - 24px) !important;
}

/* --- Small stat tiles (dashboard secondary rows) --- */
.stat-tile {
  margin-bottom: 24px;
}
a.stat-tile:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease;
}
.stat-tile-body {
  gap: 14px;
  padding: 18px 20px;
}
.stat-tile .tile-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.stat-tile .tile-value {
  font-size: 22px;
  line-height: 1.2;
}
.stat-tile .tile-label {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-amber { background: rgba(229, 138, 0, 0.15); color: #e58a00; }
.tile-green { background: rgba(44, 168, 127, 0.15); color: #218f6c; }
.tile-red   { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.tile-navy  { background: rgba(55, 71, 133, 0.12); color: #374785; }
.tile-brand { background: rgba(181, 41, 38, 0.12); color: #b52926; }
.tile-blue  { background: rgba(4, 169, 245, 0.12); color: #0d8fc7; }

/* --- Month-over-month trend chips on stat cards --- */
.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  margin-left: 8px;
  margin-bottom: 8px;
}
.trend-chip.trend-up {
  background: rgba(44, 168, 127, 0.15);
  color: #218f6c;
}
.trend-chip.trend-down {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

/* --- Soft status badges (tinted bg + saturated text) ---
   .table variants included: provide.css styles badges inside tables
   at higher specificity. */
.badge-success,
.table .badge-success {
  background: rgba(44, 168, 127, 0.15) !important;
  color: #218f6c !important;
}
.badge-danger,
.table .badge-danger {
  background: rgba(220, 53, 69, 0.12) !important;
  color: #dc3545 !important;
}
.badge-warning,
.table .badge-warning {
  background: rgba(229, 138, 0, 0.15) !important;
  color: #b56d00 !important;
}
.badge-info,
.table .badge-info {
  background: rgba(4, 169, 245, 0.12) !important;
  color: #0d8fc7 !important;
}
.badge-primary,
.table .badge-primary {
  background: rgba(181, 41, 38, 0.12) !important;
  color: #b52926 !important;
}
.badge-secondary,
.badge-dark,
.table .badge-secondary,
.table .badge-dark {
  background: rgba(13, 34, 45, 0.1) !important;
  color: #0d222d !important;
}

/* --- Minimal table header: white instead of the solid navy bar --- */
.table thead th,
.table tr th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
body:not(.dark) .table thead th,
body:not(.dark) .table tr th {
  background: #fafbfc !important;
  color: #5b6b79 !important;
  border-bottom: 1px solid #e7eaee !important;
}
.table td {
  vertical-align: middle;
}
body:not(.dark) .table td {
  border-bottom: 1px solid #f1f3f5;
}
body:not(.dark) .table tbody tr:hover td {
  background: #f8fafb;
}

/* --- DataTables chrome: rounded controls, pill pagination, compact row buttons --- */
.table .btn {
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
}
.dataTables_wrapper .form-control,
.dataTables_length .custom-select,
.dataTables_filter input {
  border-radius: 8px;
  border-color: #e7eaee;
}
.dataTables_wrapper .pagination .page-link {
  border-radius: 8px;
  margin: 0 3px;
  border-color: #e7eaee;
  color: #5b6b79;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
  background: #b52926 !important;
  border-color: #b52926 !important;
  color: #fff !important;
}

/* --- Sidebar: brand-tinted pill on active/hovered menu items --- */
body:not(.dark) .iq-sidebar-menu .side-menu > li.active > a,
body:not(.dark) .iq-sidebar-menu .side-menu li.active-menu > a {
  background: rgba(181, 41, 38, 0.08) !important;
  color: #b52926 !important;
  border-radius: 8px;
}
body:not(.dark) .iq-sidebar-menu .side-menu > li.active > a svg path,
body:not(.dark) .iq-sidebar-menu .side-menu li.active-menu > a svg path {
  fill: #b52926;
}
body:not(.dark) .sidebar-default .iq-sidebar-menu .side-menu li a:hover {
  color: #b52926;
  background: rgba(181, 41, 38, 0.06);
  border-radius: 8px;
}
body:not(.dark) .sidebar-default .iq-sidebar-menu .side-menu li a:hover svg path {
  fill: #b52926;
}
body:not(.dark) .sidebar-default .iq-sidebar-menu .side-menu li.active .submenu li.active > a {
  color: #b52926 !important;
  background: rgba(181, 41, 38, 0.08) !important;
  border-radius: 8px;
}
body:not(.dark) .sidebar-default .iq-sidebar-menu .side-menu li.active .submenu li.active > a svg path {
  fill: #b52926;
}
body:not(.dark) .sidebar-default .iq-sidebar .iq-sidebar-menu .side-menu .submenu li:before {
  background: #b52926;
}
/* Submenu pills get the same horizontal inset as top-level items
   (.side-menu>li>a has margin: 0 1rem; submenu links had none, so the
   active pill ran edge-to-edge). */
.iq-sidebar-menu .side-menu li ul.submenu li > a {
  margin: 0 1rem !important;
}

/* --- Settings page nav pills: brand tint instead of solid navy --- */
.setting-pills .nav-pills .nav-link {
  background-color: #f6f7f9;
  color: #5b6b79;
  border-radius: 8px;
}
.setting-pills .nav-pills .nav-link:hover {
  background-color: rgba(181, 41, 38, 0.06);
  color: #b52926;
}
.setting-pills .nav-pills .nav-link.active {
  background-color: rgba(181, 41, 38, 0.1);
  color: #b52926;
  font-weight: 600;
}

/* --- Header: translucent blurred bar, hairline instead of shadow --- */
body:not(.dark) .iq-top-navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: none !important;
  border-bottom: 1px solid #e7eaee;
}
body:not(.dark) .iq-top-navbar .iq-navbar-custom {
  background: transparent !important;
}

/* --- Buttons: 8px radius globally (circle/pill utilities keep their
   !important radius) --- */
.btn {
  border-radius: 8px;
}

/* --- DataTables empty state (markup injected via defaults in
   _scripts.blade.php) --- */
.dt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  color: #5b6b79;
}
.dt-empty svg {
  opacity: 0.4;
  margin-bottom: 4px;
}
.dt-empty .dt-empty-title {
  font-weight: 600;
  font-size: 15px;
  color: #1d2630;
}
.dt-empty .dt-empty-sub {
  font-size: 13px;
}
td.dataTables_empty {
  background: transparent !important;
}

/* --- Page loader: brand ring spinner (replaces the uploaded GIF) --- */
body:not(.dark) #loading {
  background: #f4f7fa;
}
/* backend.css hardcodes the old purple loader.gif on #loading-center —
   kill it so only the ring spinner shows. */
#loading-center {
  background: none !important;
}
.modern-loader-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.modern-loader {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(181, 41, 38, 0.15);
  border-top-color: #b52926;
  border-radius: 50%;
  animation: th-spin 0.8s linear infinite;
}
@keyframes th-spin {
  to {
    transform: rotate(360deg);
  }
}