/* =============================================================
   PressOne AI — Design System
   Customer UI: Outfit font · dark navy sidebar · sky-blue accent
   Admin UI:    DM Sans font · slate-900 sidebar · emerald accent
   ============================================================= */

/* ── Customer UI tokens ──────────────────────────────────────── */
:root {
  --p-sidebar-bg:          #111827;
  --p-sidebar-border:      rgba(255,255,255,0.06);
  --p-sidebar-text:        #9ca3af;
  --p-sidebar-text-hover:  #f9fafb;
  --p-sidebar-active-bg:   rgba(56,189,248,0.12);
  --p-sidebar-active-text: #38bdf8;
  --p-sidebar-icon-muted:  #6b7280;

  --p-navbar-bg:           #ffffff;
  --p-navbar-shadow:       0 1px 0 #e5e7eb;

  --p-content-bg:          #f8fafc;
  --p-card-bg:             #ffffff;
  --p-card-shadow:         0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --p-card-shadow-hover:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --p-card-radius:         10px;

  --p-primary:             #0ea5e9;
  --p-primary-dark:        #0284c7;
  --p-primary-light:       #e0f2fe;
  --p-primary-rgb:         14, 165, 233;

  --p-text:                #0f172a;
  --p-text-muted:          #64748b;
  --p-border:              #e2e8f0;

  /* Admin overrides applied via .admin-shell */
  --a-sidebar-bg:          #0f172a;
  --a-sidebar-border:      rgba(255,255,255,0.05);
  --a-sidebar-text:        #64748b;
  --a-sidebar-text-hover:  #f1f5f9;
  --a-sidebar-active-bg:   rgba(129,140,248,0.14);
  --a-sidebar-active-text: #818cf8;
  --a-primary:             #6366f1;
  --a-primary-dark:        #4f46e5;
}

/* ── Base ────────────────────────────────────────────────────── */
body {
  background-color: var(--p-content-bg);
  color: var(--p-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Customer sidebar ────────────────────────────────────────── */
.sidebar {
  background-color: var(--p-sidebar-bg) !important;
  border-right: 1px solid var(--p-sidebar-border) !important;
  box-shadow: none;
}

.sidebar-nav-item {
  color: var(--p-sidebar-text) !important;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.sidebar-nav-item:hover {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--p-sidebar-text-hover) !important;
}
.sidebar-nav-item.active {
  background-color: var(--p-sidebar-active-bg) !important;
  color: var(--p-sidebar-active-text) !important;
}
.sidebar-nav-item i {
  color: inherit;
  opacity: 0.85;
}
.sidebar-nav-item.active i {
  opacity: 1;
}

/* ── Customer navbar ─────────────────────────────────────────── */
.top-navbar {
  background-color: var(--p-navbar-bg) !important;
  box-shadow: var(--p-navbar-shadow) !important;
  border-bottom: none !important;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-border) !important;
  box-shadow: var(--p-card-shadow) !important;
  border-radius: var(--p-card-radius) !important;
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: var(--p-card-shadow-hover) !important;
}
/* Flat cards in tables / inner content shouldn't lift */
.card .card,
.modal .card {
  box-shadow: none !important;
}
.card.border-0 {
  border: 1px solid var(--p-border) !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--p-primary) !important;
  border-color: var(--p-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--p-primary-dark) !important;
  border-color: var(--p-primary-dark) !important;
}
.btn-outline-primary {
  color: var(--p-primary) !important;
  border-color: var(--p-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--p-primary) !important;
  color: #fff !important;
}

/* ── Form focus ──────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--p-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--p-primary-rgb), 0.15) !important;
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge.bg-primary { background-color: var(--p-primary) !important; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination-sm .page-link {
  color: var(--p-primary);
  border-color: var(--p-border);
  border-radius: 6px;
  margin: 0 2px;
}
.pagination-sm .page-item.active .page-link {
  background-color: var(--p-primary);
  border-color: var(--p-primary);
}
.pagination-sm .page-link:hover {
  background-color: var(--p-primary-light);
  border-color: var(--p-primary);
  color: var(--p-primary-dark);
}

/* ── Tables ──────────────────────────────────────────────────── */
.table thead th {
  background-color: #f8fafc;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--p-text-muted);
  border-bottom: 1px solid var(--p-border) !important;
  border-top: none !important;
  padding: 10px 12px;
}
.table tbody td {
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: var(--p-text);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background-color: #f8fafc; }

/* ── Alerts (flash messages) ─────────────────────────────────── */
.alert {
  border: none;
  border-radius: 8px;
  font-size: 0.825rem;
  border-left: 3px solid transparent;
}
.alert-success  { background: #f0fdf4; color: #166534; border-left-color: #22c55e; }
.alert-danger   { background: #fef2f2; color: #991b1b; border-left-color: #ef4444; }
.alert-warning  { background: #fffbeb; color: #92400e; border-left-color: #f59e0b; }
.alert-info     { background: #eff6ff; color: #1e40af; border-left-color: #3b82f6; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-header {
  background-color: #f8fafc !important;
  color: var(--p-text) !important;
  border-bottom: 1px solid var(--p-border);
  border-radius: calc(var(--p-card-radius) - 1px) calc(var(--p-card-radius) - 1px) 0 0;
}
.modal-header .btn-close { filter: none !important; }
.modal-content {
  border: 1px solid var(--p-border);
  border-radius: var(--p-card-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* ── Nav pills (settings tabs) ───────────────────────────────── */
.nav-pills .nav-link {
  color: var(--p-text-muted);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 14px;
}
.nav-pills .nav-link:hover { background-color: var(--p-primary-light); color: var(--p-primary-dark); }
.nav-pills .nav-link.active {
  background-color: var(--p-primary) !important;
  color: #fff !important;
}

/* ── Offcanvas mobile sidebar ────────────────────────────────── */
.offcanvas {
  background-color: var(--p-sidebar-bg) !important;
  color: var(--p-sidebar-text) !important;
}
.offcanvas-header { border-bottom: 1px solid var(--p-sidebar-border); }
.offcanvas-title { color: #f9fafb !important; }
.offcanvas .btn-close { filter: invert(1) brightness(0.6); }
.offcanvas .nav-link {
  color: var(--p-sidebar-text) !important;
  border-radius: 8px;
  margin: 2px 8px;
  padding: 10px 12px !important;
  font-size: 0.875rem;
  font-weight: 500;
}
.offcanvas .nav-link:hover {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--p-sidebar-text-hover) !important;
}
.offcanvas .nav-link.text-primary,
.offcanvas .nav-link.fw-semibold {
  background-color: var(--p-sidebar-active-bg) !important;
  color: var(--p-sidebar-active-text) !important;
}

/* ── Credit balance ──────────────────────────────────────────── */
.credit-balance {
  background-color: #f8fafc !important;
  border-color: var(--p-border) !important;
}
.credit-balance i { color: var(--p-primary) !important; }

/* ── User avatar ─────────────────────────────────────────────── */
.user-avatar { background: var(--p-primary) !important; }

/* ── Content area ────────────────────────────────────────────── */
.main-content-wrapper { background-color: var(--p-content-bg) !important; }

/* ── Form labels ─────────────────────────────────────────────── */
.form-label { font-weight: 600; color: var(--p-text); margin-bottom: 0.4rem; }

/* ── Code ────────────────────────────────────────────────────── */
code {
  background: #f1f5f9;
  color: #0369a1;
  padding: 0.15em 0.45em;
  border-radius: 4px;
  font-size: 0.82em;
  border: 1px solid #e2e8f0;
}

/* ── Drag / hover utility ────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Spinner wrapper ─────────────────────────────────────────── */
.spinner-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--p-text-muted); }
.empty-state i { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.25; display: block; }

/* ================================================================
   ADMIN UI — .admin-shell scoped overrides
   Applied by adding class="admin-shell" to <body> in admin base
   ================================================================ */

.admin-shell body,
body.admin-shell {
  background-color: #f1f5f9;
}

/* Admin sidebar */
.admin-shell .sidebar {
  background-color: var(--a-sidebar-bg) !important;
  border-right: 1px solid var(--a-sidebar-border) !important;
}
.admin-shell .sidebar-nav-item {
  color: var(--a-sidebar-text) !important;
}
.admin-shell .sidebar-nav-item:hover {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--a-sidebar-text-hover) !important;
}
.admin-shell .sidebar-nav-item.active {
  background-color: var(--a-sidebar-active-bg) !important;
  color: var(--a-sidebar-active-text) !important;
}
.admin-shell .offcanvas {
  background-color: var(--a-sidebar-bg) !important;
}
.admin-shell .offcanvas .nav-link {
  color: var(--a-sidebar-text) !important;
}
.admin-shell .offcanvas .nav-link:hover {
  background-color: rgba(255,255,255,0.05) !important;
  color: var(--a-sidebar-text-hover) !important;
}
.admin-shell .offcanvas .nav-link.text-primary,
.admin-shell .offcanvas .nav-link.fw-semibold {
  background-color: var(--a-sidebar-active-bg) !important;
  color: var(--a-sidebar-active-text) !important;
}

/* Admin buttons */
.admin-shell .btn-primary {
  background-color: var(--a-primary) !important;
  border-color: var(--a-primary) !important;
}
.admin-shell .btn-primary:hover { background-color: var(--a-primary-dark) !important; }
.admin-shell .btn-outline-primary { color: var(--a-primary) !important; border-color: var(--a-primary) !important; }
.admin-shell .btn-outline-primary:hover { background-color: var(--a-primary) !important; color: #fff !important; }
.admin-shell .btn-manage,
.admin-shell .btn-filter { background-color: var(--a-primary) !important; border-color: var(--a-primary) !important; }
.admin-shell .btn-manage:hover,
.admin-shell .btn-filter:hover { background-color: var(--a-primary-dark) !important; }
.admin-shell .btn-review { color: var(--a-primary) !important; border-color: rgba(129,140,248,0.35) !important; background-color: rgba(129,140,248,0.06) !important; }
.admin-shell .btn-review:hover { background-color: var(--a-primary) !important; color: #fff !important; border-color: var(--a-primary) !important; }

/* Admin pagination */
.admin-shell .pagination-sm .page-link { color: var(--a-primary); }
.admin-shell .pagination-sm .page-item.active .page-link { background-color: var(--a-primary); border-color: var(--a-primary); }

/* Admin form focus */
.admin-shell .form-control:focus,
.admin-shell .form-select:focus {
  border-color: var(--a-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
}

/* Admin nav-pills */
.admin-shell .nav-pills .nav-link.active { background-color: var(--a-primary) !important; }

/* Admin badge type refinements */
.admin-shell .badge-verified-light { background-color: rgba(129,140,248,0.12); color: var(--a-primary-dark); border: 1px solid rgba(129,140,248,0.3); }

/* Admin avatar */
.admin-shell .user-avatar { background: var(--a-primary) !important; }

/* Admin table header */
.admin-shell .modern-table thead th {
  background-color: #f8fafc;
  color: #64748b;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .table { font-size: 0.85rem; }
  .table th, .table td { padding: 0.5rem !important; }
  .card-body { padding: 0.875rem !important; }
  .content-area { font-size: 0.9rem; padding: 16px !important; }
  .content-area h4 { font-size: 1.1rem; }
  .btn-sm { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
}