/* ============================================================
   AG DESIGN SYSTEM — aligned with panel (Argon / admin portal)
   Source of truth: panel/tailwind.config.js + panel/resources/css/app.css
   Loaded after Argon + styles.css; before ag-responsive.css.
   ============================================================ */

:root {
  /* Primary (Argon indigo) — panel primary / accent */
  --ag-primary: #5e72e4;
  --ag-primary-50: #eef0fc;
  --ag-primary-100: #dfe3fa;
  --ag-primary-200: #c5ccf5;
  --ag-primary-300: #a0abed;
  --ag-primary-400: #7a89e6;
  --ag-primary-500: #5e72e4;
  --ag-primary-600: #4c5fd0;
  --ag-primary-700: #3b4bb0;
  --ag-primary-800: #323f8f;
  --ag-primary-900: #2c3773;
  --ag-primary-fg: #ffffff;
  --ag-gradient-primary: linear-gradient(310deg, #5e72e4 0%, #825ee4 100%);

  /* Text */
  --ag-dark: #344767;
  --ag-secondary: #8392ab;
  --ag-text: #344767;
  --ag-text-muted: #8392ab;

  /* Surfaces */
  --ag-surface: #f8f9fa;
  --ag-surface-page: #f3f4f6; /* gray-100 */
  --ag-surface-strong: #ffffff;
  --ag-border: rgba(52, 71, 103, 0.1);
  --ag-border-strong: rgba(94, 114, 228, 0.18);

  /* Semantic */
  --ag-success: #2dce89;
  --ag-info: #11cdef;
  --ag-warning: #fb6340;
  --ag-danger: #f5365c;

  /* Gradients */
  --ag-gradient-success: linear-gradient(310deg, #2dce89 0%, #2dcecc 100%);
  --ag-gradient-info: linear-gradient(310deg, #11cdef 0%, #1171ef 100%);
  --ag-gradient-warning: linear-gradient(310deg, #fb6340 0%, #fbb140 100%);
  --ag-gradient-danger: linear-gradient(310deg, #f5365c 0%, #f56036 100%);
  --ag-gradient-secondary: linear-gradient(310deg, #627594 0%, #a8b8d8 100%);

  /* Elevation / radius — panel shadow-card / soft */
  --ag-shadow-soft: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
  --ag-shadow-card: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
  --ag-shadow-strong: 0 20px 40px rgba(52, 71, 103, 0.12);
  --ag-radius-xl: 1rem;
  --ag-radius-lg: 0.75rem;
  --ag-radius-md: 0.5rem;
}

/* Portal page canvas — match panel portal-shell bg-gray-100 */
body.g-sidenav-show,
body.bg-gray-100 {
  background: var(--ag-surface-page) !important;
  color: var(--ag-dark);
}

/* ---------- Buttons (panel ag-btn parity) ---------- */
.ag-dashboard-content .btn,
.ag-shell-main .btn,
body.g-sidenav-show .btn {
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1rem;
  line-height: 1.25;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease, filter 0.15s ease;
}

.ag-dashboard-content .btn-primary,
.ag-shell-main .btn-primary,
body.g-sidenav-show .btn-primary,
.ag-dashboard-content .bg-gradient-primary.btn,
.ag-shell-main a.btn.bg-gradient-primary {
  color: #fff !important;
  border: 0 !important;
  background-color: var(--ag-primary) !important;
  background-image: var(--ag-gradient-primary) !important;
  box-shadow: var(--ag-shadow-soft) !important;
}

.ag-dashboard-content .btn-primary:hover,
.ag-shell-main .btn-primary:hover,
body.g-sidenav-show .btn-primary:hover,
.ag-dashboard-content .btn-primary:focus,
.ag-shell-main .btn-primary:focus {
  color: #fff !important;
  background-color: var(--ag-primary-600) !important;
  background-image: linear-gradient(310deg, #4c5fd0 0%, #6f4fd0 100%) !important;
  filter: brightness(1.02);
}

.ag-dashboard-content .btn-secondary,
.ag-shell-main .btn-secondary,
body.g-sidenav-show .btn-secondary {
  color: #374151 !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
}

.ag-dashboard-content .btn-secondary:hover,
.ag-shell-main .btn-secondary:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}

.ag-dashboard-content .btn-success,
.ag-shell-main .btn-success {
  color: #fff !important;
  border: 0 !important;
  background-image: var(--ag-gradient-success) !important;
}

.ag-dashboard-content .btn-info,
.ag-shell-main .btn-info {
  color: #fff !important;
  border: 0 !important;
  background-image: var(--ag-gradient-info) !important;
}

.ag-dashboard-content .btn-warning,
.ag-shell-main .btn-warning {
  color: #fff !important;
  border: 0 !important;
  background-image: var(--ag-gradient-warning) !important;
}

.ag-dashboard-content .btn-danger,
.ag-shell-main .btn-danger {
  color: #fff !important;
  border: 0 !important;
  background-image: var(--ag-gradient-danger) !important;
}

.ag-dashboard-content .btn-outline-primary,
.ag-shell-main .btn-outline-primary {
  color: var(--ag-primary) !important;
  border: 1px solid var(--ag-primary) !important;
  background: transparent !important;
}

.ag-dashboard-content .btn-outline-primary:hover {
  color: #fff !important;
  background: var(--ag-primary) !important;
}

/* Soft action chips (panel ag-btn-view / edit / delete) */
.ag-btn-view {
  background: var(--ag-primary-50) !important;
  color: var(--ag-primary-700) !important;
  border: 0 !important;
}
.ag-btn-edit {
  background: #eef2ff !important;
  color: #3730a3 !important;
  border: 0 !important;
}
.ag-btn-delete {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 0 !important;
}

/* ---------- Cards ---------- */
.ag-dashboard-content .card,
.ag-shell-main .card {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--ag-shadow-card) !important;
  overflow: hidden;
}

.ag-dashboard-content .card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(52, 71, 103, 0.06) !important;
  color: var(--ag-dark);
}

.ag-dashboard-content .card-header h6,
.ag-dashboard-content .card-header h5,
.ag-dashboard-content .card-header h4,
.ag-dashboard-content .card-title {
  color: var(--ag-dark) !important;
  font-weight: 700;
}

/* ---------- Forms ---------- */
.ag-dashboard-content .form-control,
.ag-dashboard-content .form-select,
.ag-shell-main .form-control,
.ag-shell-main .form-select {
  min-height: 2.75rem;
  border-radius: 0.5rem;
  border-color: #d1d5db;
  color: var(--ag-dark);
  box-shadow: none;
}

.ag-dashboard-content .form-control:focus,
.ag-dashboard-content .form-select:focus,
.ag-shell-main .form-control:focus,
.ag-shell-main .form-select:focus {
  border-color: var(--ag-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.18) !important;
}

.ag-dashboard-content .form-label,
.ag-dashboard-content label {
  color: var(--ag-dark);
  font-weight: 600;
  font-size: 0.875rem;
}

/* ---------- Tables ---------- */
.ag-dashboard-content .table thead th {
  background: var(--ag-primary-50) !important;
  color: var(--ag-dark) !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 0 !important;
}

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

.ag-dashboard-content .table td {
  color: var(--ag-dark);
  vertical-align: middle;
}

/* ---------- Badges / status ---------- */
.ag-dashboard-content .badge.bg-gradient-primary,
.ag-shell-main .bg-gradient-primary:not(.btn):not(.icon) {
  background-image: var(--ag-gradient-primary) !important;
}

.badge.bg-primary,
.bg-primary:not(.min-height-300):not(.position-absolute) {
  background-color: var(--ag-primary) !important;
}

.badge.bg-success,
.bg-gradient-success {
  background-image: var(--ag-gradient-success) !important;
}

.badge.bg-danger {
  background-color: var(--ag-danger) !important;
}

.badge.bg-info {
  background-color: var(--ag-info) !important;
}

.badge.bg-warning {
  background-color: var(--ag-warning) !important;
}

/* ---------- Links / icons ---------- */
.ag-dashboard-content a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--ag-primary);
}

.ag-dashboard-content a:not(.btn):not(.nav-link):hover {
  color: var(--ag-primary-600);
}

.ag-dashboard-content .icon.bg-gradient-primary,
.ag-shell-main .icon.bg-gradient-primary,
.ag-dashboard-content .bg-gradient-primary.shadow-primary {
  background-image: var(--ag-gradient-primary) !important;
}

/* ---------- Alerts ---------- */
.ag-dashboard-content .alert-info {
  background: rgba(17, 205, 239, 0.12);
  color: #0a6c7d;
  border: 0;
}

.ag-dashboard-content .alert-danger {
  background: rgba(245, 54, 92, 0.12);
  color: #9b1230;
  border: 0;
}

.ag-dashboard-content .alert-success {
  background: rgba(45, 206, 137, 0.12);
  color: #136944;
  border: 0;
}

/* ---------- Pagination ---------- */
.ag-dashboard-content .page-link {
  color: var(--ag-primary);
  border-radius: 0.45rem;
  border-color: #e5e7eb;
}

.ag-dashboard-content .page-item.active .page-link {
  background: var(--ag-primary);
  border-color: var(--ag-primary);
  color: #fff;
}

/* ---------- Utility helpers ---------- */
.bg-gradient-primary {
  background-image: var(--ag-gradient-primary) !important;
}

.text-primary {
  color: var(--ag-primary) !important;
}

.text-dark {
  color: var(--ag-dark) !important;
}

.text-secondary {
  color: var(--ag-secondary) !important;
}

/* ---------- Skeleton loaders (panel-aligned, stay inside cards) ---------- */
.ag-skel {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  background: linear-gradient(
    90deg,
    #eef0fc 0%,
    #f8f9ff 45%,
    #eef0fc 90%
  );
  background-size: 220% 100%;
  animation: ag-skel-shimmer 1.35s ease-in-out infinite;
}

.ag-table-skeleton {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0.35rem 0 0.75rem;
  box-sizing: border-box;
}

.ag-table-skeleton__head,
.ag-table-skeleton__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.85rem 1rem;
  align-items: center;
  padding: 0.85rem 0.35rem;
  min-width: 0;
}

.ag-table-skeleton__head {
  background: var(--ag-primary-50, #eef0fc);
  border-radius: 0.5rem;
  margin-bottom: 0.35rem;
}

.ag-table-skeleton__row {
  border-bottom: 1px solid rgba(52, 71, 103, 0.06);
}

.ag-table-skeleton__row:last-child {
  border-bottom: 0;
}

.ag-list-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
  max-width: 100%;
  overflow: hidden;
}

.ag-list-skeleton__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ag-list-skeleton__avatar {
  flex-shrink: 0;
}

.ag-list-skeleton__lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Centered loader that never escapes the card */
.ag-card-loader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  min-height: 9rem;
  padding: 1.75rem 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

.ag-card-loader__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ag-dark, #344767);
  letter-spacing: 0.01em;
  text-align: center;
}

/* Ensure card clipping so loaders can't spill out */
.ag-dashboard-content .card,
.ag-shell-main .card,
.ag-table-card {
  overflow: hidden !important;
  position: relative;
}

/* Date pickers must escape the card — My Payouts calendar was clipped. */
.ag-dashboard-content .card:has(.ccs-datepicker-wrap),
.ag-dashboard-content .card:has(.react-date-picker),
.ag-shell-main .card:has(.ccs-datepicker-wrap),
.ag-shell-main .card:has(.react-date-picker) {
  overflow: visible !important;
}

.ag-dashboard-content .card-body,
.ag-shell-main .card-body {
  max-width: 100%;
  overflow-x: auto;
}

.ag-dashboard-content .card-body:has(.ccs-datepicker-wrap),
.ag-dashboard-content .card-body:has(.react-date-picker),
.ag-shell-main .card-body:has(.ccs-datepicker-wrap),
.ag-shell-main .card-body:has(.react-date-picker) {
  overflow: visible !important;
}

@keyframes ag-skel-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

@media (max-width: 575.98px) {
  .ag-table-skeleton__head,
  .ag-table-skeleton__row {
    gap: 0.55rem 0.65rem;
    padding: 0.7rem 0.15rem;
  }

  .ag-card-loader {
    min-height: 7.5rem;
    padding: 1.35rem 0.75rem;
  }
}

.ag-page-skeleton {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.ag-page-skeleton .ag-cards-skeleton {
  margin-bottom: 0;
}

/* ---------- Client dashboard: property slider ---------- */
.ag-prop-count {
  background: var(--ag-primary) !important;
  color: #fff !important;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 1.4rem;
  padding: 0.35em 0.55em;
}

.ag-prop-nav-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1.5px solid var(--ag-border);
  background: #f8fafc;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease;
  padding: 0;
}

.ag-prop-nav-btn i {
  font-size: 0.72rem;
}

.ag-prop-nav-btn.is-active {
  background: var(--ag-primary);
  border-color: var(--ag-primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(94, 114, 228, 0.28);
}

.ag-prop-nav-btn.is-active:hover {
  filter: brightness(1.05);
}

.ag-prop-track {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.15rem 0.15rem 0.5rem;
  scroll-snap-type: x proximity;
}

.ag-prop-track::-webkit-scrollbar {
  display: none;
}

.ag-prop-card {
  width: min(200px, 72vw);
  border-radius: 1rem;
  background: var(--ag-gradient-primary);
  color: #fff;
  padding: 1.1rem 1rem 0.9rem;
  box-shadow: 0 8px 22px rgba(94, 114, 228, 0.22);
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  scroll-snap-align: start;
}

.ag-prop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(94, 114, 228, 0.3);
  color: #fff;
}

.ag-prop-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  color: #fff;
}

.ag-prop-card__icon i,
.ag-prop-card__icon .ni,
.ag-prop-card__icon .fas,
.ag-prop-card__icon .fa {
  position: static !important;
  top: auto !important;
  line-height: 1 !important;
  display: block;
  opacity: 1 !important;
  margin: 0;
  transform: none;
}

/* Purple property cards: force white building icons (Argon/link styles override inherit) */
.ag-prop-card:not(.ag-prop-card--add) .ag-prop-card__icon,
.ag-prop-card:not(.ag-prop-card--add) .ag-prop-card__icon i,
.ag-prop-card:not(.ag-prop-card--add) .ag-prop-card__icon .ni,
.ag-prop-card:not(.ag-prop-card--add) .ag-prop-card__icon .ni::before,
.ag-prop-card:not(.ag-prop-card--add) .ag-prop-card__icon .fas,
.ag-prop-card:not(.ag-prop-card--add) .ag-prop-card__icon .fa {
  color: #fff !important;
}

/* Argon .icon-shape i uses top:14px — breaks icon-sm / header chips */
.ag-shell-main .icon-shape,
.ag-dashboard-content .icon-shape,
.card .icon-shape.icon-sm,
.ag-card-header .icon-shape {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ag-shell-main .icon-shape i,
.ag-dashboard-content .icon-shape i,
.card .icon-shape.icon-sm i,
.ag-card-header .icon-shape i {
  position: static !important;
  top: auto !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: block;
  opacity: 1 !important;
}

.ag-list-empty__icon i,
.ag-list-empty__icon .ni,
.ag-list-empty__icon .fas {
  position: static !important;
  top: auto !important;
  line-height: 1 !important;
  opacity: 1 !important;
  display: block;
}

.ag-prop-card__title {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
}

.ag-prop-card__meta {
  font-size: 0.72rem;
  opacity: 0.85;
  margin-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}

.ag-prop-card--add {
  background: rgba(94, 114, 228, 0.04);
  border: 2px dashed rgba(94, 114, 228, 0.35);
  box-shadow: none;
  color: var(--ag-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 8.5rem;
}

.ag-prop-card--add:hover {
  background: rgba(94, 114, 228, 0.1);
  color: var(--ag-primary);
  box-shadow: none;
  transform: translateY(-2px);
}

.ag-prop-card__icon--add {
  background: rgba(94, 114, 228, 0.12);
  color: var(--ag-primary);
}

.ag-prop-card__add-label {
  font-size: 0.82rem;
  font-weight: 600;
}

.ag-prop-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.ag-prop-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #e2e8f0;
  transition: background 0.2s ease, width 0.2s ease;
}

.ag-prop-dot.is-active {
  background: var(--ag-primary);
  width: 1rem;
}

/* ---------- Upcoming pre-bookings ---------- */
.ag-prebook-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ag-prebook-item {
  border: 1px solid var(--ag-border);
  border-radius: 0.85rem;
  padding: 0.95rem 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.ag-prebook-item:hover,
.ag-prebook-item:focus-visible {
  border-color: rgba(94, 114, 228, 0.35);
  box-shadow: 0 8px 20px rgba(52, 71, 103, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.ag-prebook-item__title {
  font-size: 0.95rem;
  line-height: 1.35;
}

.ag-prebook-item__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--ag-text-muted);
  margin-top: 0.35rem;
}

.ag-prebook-item__meta i {
  color: var(--ag-primary);
  opacity: 0.85;
  font-size: 0.85rem;
}

/* Job status badges — consistent sizing in tables & cards */
.ag-dashboard-content .badge.badge-sm,
.ag-shell-main .badge.badge-sm {
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.4em 0.65em;
  border-radius: 0.45rem;
}

@media (max-width: 575.98px) {
  .ag-prop-card {
    width: min(180px, 78vw);
    padding: 1rem 0.85rem 0.8rem;
  }

  .ag-prebook-item {
    padding: 0.85rem 0.9rem;
  }
}