/* ════════════════════════════════════════════════════════════
   TerraPaws — style.css
   Maps Bootstrap 5's theme variables onto the brand palette from
   user.css, and adds the handful of components the original
   mockup never designed (category headers, article body, forms,
   pagination, alerts, admin layout). user.css must load first.
════════════════════════════════════════════════════════════ */

:root {
  --bs-primary:        var(--terra);
  --bs-primary-rgb:     193, 96, 58;
  --bs-secondary:       var(--forest);
  --bs-secondary-rgb:   44, 74, 62;
  --bs-body-font-family: 'DM Sans', sans-serif;
  --bs-body-color:      var(--charcoal);
  --bs-body-bg:         var(--cream);
  --bs-link-color:      var(--terra);
  --bs-link-hover-color: var(--terra-d);
  --bs-border-radius:   8px;
}

.btn-primary {
  --bs-btn-bg: var(--terra);
  --bs-btn-border-color: var(--terra);
  --bs-btn-hover-bg: var(--terra-d);
  --bs-btn-hover-border-color: var(--terra-d);
  --bs-btn-active-bg: var(--terra-d);
  --bs-btn-active-border-color: var(--terra-d);
  --bs-btn-focus-shadow-rgb: 193, 96, 58;
  font-weight: 700;
}
.btn-secondary {
  --bs-btn-bg: var(--forest);
  --bs-btn-border-color: var(--forest);
  --bs-btn-hover-bg: var(--forest-l);
  --bs-btn-hover-border-color: var(--forest-l);
  font-weight: 700;
}
.btn-outline-primary {
  --bs-btn-color: var(--terra);
  --bs-btn-border-color: var(--terra);
  --bs-btn-hover-bg: var(--terra);
  --bs-btn-hover-border-color: var(--terra);
}
a { color: var(--bs-link-color); }
.form-control:focus, .form-select:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 0.2rem rgba(193,96,58,0.15);
}
.badge.bg-primary { background-color: var(--terra) !important; }
.badge.bg-secondary { background-color: var(--forest) !important; }

/* ── Page header (used on category, shop, search pages) ── */
.page-header {
  background: var(--forest);
  color: var(--cream);
  padding: 56px 32px;
  text-align: center;
}
.page-header .page-icon { font-size: 44px; margin-bottom: 12px; }
.page-header h1 { font-family: 'Playfair Display', serif; font-size: 38px; margin-bottom: 10px; }
.page-header p { color: rgba(251,247,240,0.65); font-size: 15px; max-width: 620px; margin: 0 auto; }
.page-header .breadcrumb { justify-content: center; margin-top: 16px; margin-bottom: 0; font-size: 12px; }
.page-header .breadcrumb a { color: rgba(251,247,240,0.6); }
.page-header .breadcrumb a:hover { color: var(--yellow); }
.page-header .breadcrumb-item.active { color: var(--yellow); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(251,247,240,0.35); }

.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 768px) { .hub-grid { grid-template-columns: 1fr 1fr; } }

/* ── Pagination (also styles DataTables' pagination, which renders real
   Bootstrap .pagination/.page-item/.page-link markup via its bs5 adapter) ── */
.pagination {
  --bs-pagination-color: var(--forest);
  --bs-pagination-hover-color: var(--terra);
  --bs-pagination-hover-bg: var(--forest-xl);
  --bs-pagination-active-bg: var(--terra);
  --bs-pagination-active-border-color: var(--terra);
}

/* ── Article page ── */
.article-hero-img {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: 14px; margin-bottom: 28px;
}
.article-meta-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--mid); font-size: 13px; margin-bottom: 28px; }
.article-body { font-size: 16px; line-height: 1.85; color: var(--charcoal); max-width: 760px; margin: 0 auto; }
.article-body h2 { font-family: 'Playfair Display', serif; color: var(--forest); font-size: 26px; margin: 32px 0 14px; }
.article-body h3 { font-family: 'Playfair Display', serif; color: var(--forest); font-size: 21px; margin: 26px 0 12px; }
.article-body p { margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px 24px; }
.article-body img { border-radius: 10px; margin: 20px 0; }
.article-body a { text-decoration: underline; }

/* ── Admin area theming ──────────────────────────────────────
   The admin layout itself (sidebar, topbar, cards, tables, auth
   pages) is built entirely from predefined Bootstrap classes
   (offcanvas, nav-pills, card, table-responsive, badge, alert) so
   that Bootstrap's own tested responsive behavior applies — these
   rules only parameterize Bootstrap's documented per-component
   CSS variables with brand colors, they don't add new classes. */
table.dataTable thead th { color: var(--forest); }
.form-select:focus, .form-check-input:focus { border-color: var(--terra); box-shadow: 0 0 0 0.2rem rgba(193,96,58,0.15); }

/* ── Sidebar (desktop) ──────────────────────────────────────
   #adminSidebar is a flex item with no flex-shrink set, so by
   default it was shrinking under pressure from wide page content
   (e.g. a table needing more room) — different amounts on
   different pages, which is why nav labels wrapped under their
   icons inconsistently. flex-shrink:0 pins it to a stable width;
   any overflow is handled by each page's own .table-responsive. */
@media (min-width: 992px) {
  #adminSidebar {
    flex: 0 0 240px;
    width: 240px;
    transition: flex-basis .2s ease, width .2s ease;
  }

  #adminSidebar.sidebar-collapsed {
    flex-basis: 72px;
    width: 72px;
  }
  #adminSidebar.sidebar-collapsed .sidebar-label { display: none; }
  #adminSidebar.sidebar-collapsed .navbar-brand,
  #adminSidebar.sidebar-collapsed .nav-link { justify-content: center; }
  #adminSidebar.sidebar-collapsed .navbar-brand .logo-mark,
  #adminSidebar.sidebar-collapsed .nav-link i { margin-right: 0 !important; }

  #adminSidebar.sidebar-collapsed:hover {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px;
    z-index: 1030;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  #adminSidebar.sidebar-collapsed:hover .sidebar-label { display: inline; }
  #adminSidebar.sidebar-collapsed:hover .navbar-brand,
  #adminSidebar.sidebar-collapsed:hover .nav-link { justify-content: flex-start; }
  #adminSidebar.sidebar-collapsed:hover .navbar-brand .logo-mark,
  #adminSidebar.sidebar-collapsed:hover .nav-link i { margin-right: .5rem !important; }
}