@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* Brand tokens — sourced from Lettestly brand identity (Scheme.html / catalog) */
:root {
  --lt-teal-600: #0F6E56;
  --lt-teal-400: #1D9E75;
  --lt-teal-200: #5DCAA5;
  --lt-teal-100: #9FE1CB;
  --lt-teal-50:  #E1F5EE;

  --lt-purple-600: #534AB7;
  --lt-purple-400: #7F77DD;
  --lt-purple-100: #CECBF6;
  --lt-purple-50:  #EEEDFE;

  --lt-amber-600: #854F0B;
  --lt-amber-400: #BA7517;
  --lt-amber-50:  #FAEEDA;

  --lt-coral-400: #D85A30;
  --lt-coral-50:  #FAECE7;

  --lt-gray-900: #2C2C2A;
  --lt-gray-700: #444441;
  --lt-gray-600: #5F5E5A;
  --lt-gray-400: #888780;
  --lt-gray-200: #B4B2A9;
  --lt-gray-100: #D3D1C7;
  --lt-gray-50:  #F1EFE8;

  /* Semantic aliases used throughout the admin */
  --lt-primary: var(--lt-teal-600);
  --lt-primary-dark: #085041;
  --lt-secondary: var(--lt-purple-600);
  --lt-success: var(--lt-teal-400);
  --lt-warning: var(--lt-amber-400);
  --lt-danger: var(--lt-coral-400);
  --lt-info: var(--lt-purple-400);

  --lt-sidebar-bg: var(--lt-gray-900);
  --lt-sidebar-active: #3a3a37;
  --lt-sidebar-text: var(--lt-gray-200);
  --lt-sidebar-text-active: #ffffff;

  --lt-bg: var(--lt-gray-50);
  --lt-card-bg: #ffffff;
  --lt-border: var(--lt-gray-100);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --lt-sidebar-width: 260px;
  --lt-topbar-height: 64px;
}

body {
  background: var(--lt-bg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--lt-gray-900);
}

h1, h2, h3, h4, h5, .lt-page-header h1, .lt-kpi__value, .fs-5 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

a { text-decoration: none; }

/* ---------- Layout shell ---------- */
.lt-shell { display: flex; min-height: 100vh; }

.lt-sidebar {
  width: var(--lt-sidebar-width);
  background: var(--lt-sidebar-bg);
  color: var(--lt-sidebar-text);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  transition: transform .2s ease;
  z-index: 1030;
}

.lt-sidebar__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1.1rem 1.25rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lt-brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--lt-teal-600);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .95rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.lt-brand-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
}
.lt-brand-wordmark .lt-brand-tag {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: .7rem;
  color: var(--lt-gray-200);
  margin-left: .25rem;
}

.lt-nav { padding: .75rem .75rem 2rem; }
.lt-nav__section-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lt-gray-400);
  padding: 1rem .75rem .35rem;
}
.lt-nav__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--lt-sidebar-text);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: .15rem;
}
.lt-nav__link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.lt-nav__link:hover { background: var(--lt-sidebar-active); color: var(--lt-sidebar-text-active); }
.lt-nav__link.active { background: var(--lt-teal-600); color: #fff; }
.lt-nav__badge { margin-left: auto; }

.lt-main { margin-left: var(--lt-sidebar-width); width: 100%; transition: margin .2s ease; }
body.lt-sidebar-collapsed .lt-sidebar { transform: translateX(-100%); }
body.lt-sidebar-collapsed .lt-main { margin-left: 0; }

.lt-topbar {
  height: var(--lt-topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--lt-border);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 1020;
  gap: 1rem;
}
.lt-topbar .form-search { max-width: 320px; }

.lt-content { padding: 1.5rem; }

.lt-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.lt-page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.lt-page-header p { color: var(--lt-gray-600); margin: .15rem 0 0; font-size: .9rem; }

/* ---------- Cards / KPI ---------- */
.lt-card {
  background: var(--lt-card-bg);
  border: 1px solid var(--lt-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(44,44,42,.04);
}
.lt-card__body { padding: 1.25rem; }

.lt-kpi { display: flex; align-items: center; gap: 1rem; }
.lt-kpi__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.lt-kpi__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.lt-kpi__label { font-size: .8rem; color: var(--lt-gray-600); }
.lt-kpi__delta { font-size: .78rem; font-weight: 600; }
.lt-kpi__delta.up { color: var(--lt-teal-400); }
.lt-kpi__delta.down { color: var(--lt-coral-400); }

.bg-soft-primary { background: var(--lt-teal-50); color: var(--lt-teal-600); }
.bg-soft-success { background: var(--lt-teal-50); color: var(--lt-teal-400); }
.bg-soft-warning { background: var(--lt-amber-50); color: var(--lt-amber-600); }
.bg-soft-info { background: var(--lt-purple-50); color: var(--lt-purple-600); }
.bg-soft-danger { background: var(--lt-coral-50); color: var(--lt-coral-400); }

/* ---------- Tables ---------- */
.table-card .table { margin-bottom: 0; }
.table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lt-gray-400);
  border-bottom-width: 1px;
  white-space: nowrap;
}
.table td, .table th { vertical-align: middle; }
.lt-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lt-teal-600); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem;
}

/* Status pills */
.status-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 999px;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pending { background: var(--lt-amber-50); color: var(--lt-amber-600); }
.status-approved, .status-active, .status-paid, .status-verified { background: var(--lt-teal-50); color: var(--lt-teal-600); }
.status-rejected, .status-suspended, .status-failed { background: var(--lt-coral-50); color: var(--lt-coral-400); }
.status-review, .status-processing { background: var(--lt-purple-50); color: var(--lt-purple-600); }
.status-draft { background: var(--lt-gray-100); color: var(--lt-gray-600); }

.tier-pill { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--radius-sm); }
.tier-starter { background: var(--lt-gray-100); color: var(--lt-gray-700); }
.tier-trusted { background: var(--lt-teal-50); color: var(--lt-teal-400); }
.tier-expert { background: var(--lt-teal-50); color: var(--lt-teal-600); }
.tier-elite { background: var(--lt-amber-50); color: var(--lt-amber-600); }

.lt-btn-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }

/* Bootstrap control overrides to match brand */
.btn-primary { background: var(--lt-teal-600); border-color: var(--lt-teal-600); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: var(--lt-teal-400) !important; border-color: var(--lt-teal-400) !important; }
.btn-outline-primary { color: var(--lt-teal-600); border-color: var(--lt-teal-600); }
.btn-outline-primary:hover { background: var(--lt-teal-600); border-color: var(--lt-teal-600); }
.btn-success { background: var(--lt-teal-400); border-color: var(--lt-teal-400); }
.btn-success:hover { background: var(--lt-teal-600); border-color: var(--lt-teal-600); }
.form-control:focus, .form-select:focus { border-color: var(--lt-teal-400); box-shadow: 0 0 0 .2rem rgba(15,110,86,.12); }
.nav-pills .nav-link.active { background: var(--lt-teal-600); }
.form-check-input:checked { background-color: var(--lt-teal-600); border-color: var(--lt-teal-600); }
.text-primary { color: var(--lt-teal-600) !important; }
.bg-danger { background-color: var(--lt-coral-400) !important; }
.bg-warning { background-color: var(--lt-amber-400) !important; }
.bg-success { background-color: var(--lt-teal-400) !important; }
.text-danger { color: var(--lt-coral-400) !important; }

/* ---------- Login ---------- */
.lt-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--lt-teal-600) 0%, var(--lt-teal-400) 100%); }
.lt-auth__card { max-width: 400px; width: 100%; background: #fff; border-radius: var(--radius-xl); padding: 2.25rem; box-shadow: 0 20px 40px rgba(15,110,86,.18); }

/* ---------- DataTables ---------- */
.table-card .dataTables_wrapper { padding: 0 1.25rem 1.25rem; }
.table-card .dataTables_length,
.table-card .dataTables_filter,
.table-card .dataTables_info,
.table-card .dataTables_paginate { padding: .75rem 0 0; font-size: .82rem; color: var(--lt-gray-600); }
.table-card .dataTables_filter input,
.table-card .dataTables_length select {
  border: 1px solid var(--lt-border);
  border-radius: var(--radius-sm);
  padding: .25rem .5rem;
  font-size: .82rem;
}
.table-card .dataTables_filter input:focus,
.table-card .dataTables_length select:focus { outline: none; border-color: var(--lt-teal-400); }
.table-card .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  padding: .25rem .55rem !important;
  margin-left: .2rem;
  border: 1px solid transparent !important;
}
.table-card .dataTables_paginate .paginate_button.current {
  background: var(--lt-teal-600) !important;
  border-color: var(--lt-teal-600) !important;
  color: #fff !important;
}
.table-card .dataTables_paginate .paginate_button:hover:not(.current) {
  background: var(--lt-bg) !important;
  border-color: var(--lt-border) !important;
}
.table-card table.dataTable thead th { position: relative; }
.table-card table.dataTable thead th.sorting::after,
.table-card table.dataTable thead th.sorting_asc::after,
.table-card table.dataTable thead th.sorting_desc::after {
  font-family: "bootstrap-icons";
  font-size: .65rem;
  position: absolute;
  right: .4rem;
  opacity: .5;
}
.table-card table.dataTable thead th.sorting::after { content: "\f1ce"; }
.table-card table.dataTable thead th.sorting_asc::after { content: "\f148"; opacity: 1; }
.table-card table.dataTable thead th.sorting_desc::after { content: "\f12a"; opacity: 1; }

/* Scrollbar */
.lt-sidebar::-webkit-scrollbar { width: 6px; }
.lt-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

@media (max-width: 991.98px) {
  .lt-sidebar { transform: translateX(-100%); }
  body.lt-sidebar-mobile-open .lt-sidebar { transform: translateX(0); }
  .lt-main { margin-left: 0; }
}