/**
 * PE Design System ↔ Bootstrap 5 Bridge
 * Makes Bootstrap components respect PE dark theme tokens.
 * Loaded AFTER pe-theme.css and Bootstrap.
 */

/* ============================================
   BODY & GENERAL
   ============================================ */
body {
  background-color: var(--pe-bg-primary) !important;
  color: var(--pe-text-primary) !important;
  font-family: var(--pe-font-family) !important;
}

a {
  color: var(--pe-accent);
}
a:hover {
  color: var(--pe-accent-hover);
}

hr {
  border-color: var(--pe-border);
  opacity: 1;
}

/* ============================================
   NAVBAR (replaced by .pe-header in base.html)
   ============================================ */

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  background-color: var(--pe-bg-secondary) !important;
  border-right-color: var(--pe-border) !important;
}

.sidebar .nav-link {
  color: var(--pe-text-secondary) !important;
  border-radius: var(--pe-radius-sm);
  transition: all 0.2s;
}

.sidebar .nav-link:hover {
  background-color: var(--pe-hover) !important;
  color: var(--pe-text-primary) !important;
}

.sidebar .nav-link.active {
  background-color: var(--pe-accent-bg) !important;
  color: var(--pe-accent) !important;
}

.sidebar .nav-link i {
  opacity: 0.7;
}

.sidebar .nav-link.active i {
  opacity: 1;
}

.sidebar-heading {
  color: var(--pe-text-tertiary) !important;
  font-size: var(--pe-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--pe-font-semibold);
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background-color: var(--pe-bg-secondary) !important;
  border-color: var(--pe-border) !important;
  border-radius: var(--pe-radius-lg) !important;
  color: var(--pe-text-primary);
}

.card-header {
  background-color: var(--pe-bg-tertiary) !important;
  border-bottom-color: var(--pe-border) !important;
  color: var(--pe-text-primary) !important;
}

.card-footer {
  background-color: transparent !important;
  border-top-color: var(--pe-border) !important;
}

.card-dashboard {
  border-left: 4px solid var(--pe-accent) !important;
}

.card.border-danger {
  border-color: var(--pe-error) !important;
}

.card-header.bg-danger {
  background-color: var(--pe-error) !important;
}

.card-header.bg-light,
.card-header.text-center.bg-light {
  background-color: var(--pe-bg-tertiary) !important;
}

/* ============================================
   TABLES
   ============================================ */
.table {
  color: var(--pe-text-secondary) !important;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: var(--pe-hover);
  --bs-table-border-color: var(--pe-border);
}

.table th {
  background-color: var(--pe-bg-tertiary) !important;
  color: var(--pe-text-primary) !important;
  font-weight: var(--pe-font-semibold);
  border-bottom-color: var(--pe-border) !important;
}

.table td {
  border-bottom-color: var(--pe-border) !important;
  color: var(--pe-text-secondary);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--pe-border) !important;
}

.table tbody tr:hover {
  background-color: var(--pe-hover) !important;
  color: var(--pe-text-primary);
}

.table-light,
.table-light > td,
.table-light > th {
  background-color: var(--pe-bg-tertiary) !important;
  color: var(--pe-text-primary) !important;
}

.table-warning,
.table-warning > td {
  background-color: var(--pe-warning-bg) !important;
  color: var(--pe-warning) !important;
}

.table-success,
.table-success > td {
  background-color: var(--pe-success-bg) !important;
  color: var(--pe-success) !important;
}

.table-danger,
.table-danger > td {
  background-color: var(--pe-error-bg) !important;
  color: var(--pe-error) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  font-family: var(--pe-font-family);
  border-radius: var(--pe-radius-md);
  transition: all 0.2s;
}

.btn-primary {
  background-color: var(--pe-accent) !important;
  border-color: var(--pe-accent) !important;
  color: var(--pe-accent-text, white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--pe-accent-hover) !important;
  border-color: var(--pe-accent-hover) !important;
}

.btn-outline-primary {
  color: var(--pe-accent) !important;
  border-color: var(--pe-accent) !important;
}

.btn-outline-primary:hover {
  background-color: var(--pe-accent) !important;
  color: white !important;
}

.btn-outline-secondary {
  color: var(--pe-text-secondary) !important;
  border-color: var(--pe-border) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--pe-hover) !important;
  color: var(--pe-text-primary) !important;
  border-color: var(--pe-border-hover) !important;
}

.btn-secondary {
  background-color: var(--pe-bg-tertiary) !important;
  border-color: var(--pe-border) !important;
  color: var(--pe-text-primary) !important;
}

.btn-success {
  background-color: var(--pe-success) !important;
  border-color: var(--pe-success) !important;
}

.btn-danger {
  background-color: var(--pe-error) !important;
  border-color: var(--pe-error) !important;
}

.btn-outline-danger {
  color: var(--pe-error) !important;
  border-color: var(--pe-error) !important;
}

.btn-outline-danger:hover {
  background-color: var(--pe-error) !important;
  color: white !important;
}

.btn-outline-success {
  color: var(--pe-success) !important;
  border-color: var(--pe-success) !important;
}

.btn-outline-success:hover {
  background-color: var(--pe-success) !important;
  color: white !important;
}

.btn-outline-warning {
  color: var(--pe-warning) !important;
  border-color: var(--pe-warning) !important;
}

.btn-outline-warning:hover {
  background-color: var(--pe-warning) !important;
  color: white !important;
}

.btn-warning {
  background-color: var(--pe-warning) !important;
  border-color: var(--pe-warning) !important;
  color: #000 !important;
}

/* ============================================
   FORMS
   ============================================ */
.form-control,
.form-select {
  background-color: var(--pe-bg-tertiary) !important;
  border-color: var(--pe-border) !important;
  color: var(--pe-text-primary) !important;
  font-family: var(--pe-font-family);
  border-radius: var(--pe-radius-sm);
}

.form-control::placeholder {
  color: var(--pe-text-tertiary) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pe-accent) !important;
  box-shadow: 0 0 0 3px var(--pe-accent-bg) !important;
  background-color: var(--pe-bg-tertiary) !important;
}

.form-label {
  color: var(--pe-text-primary) !important;
  font-weight: var(--pe-font-medium);
}

.form-check-input {
  background-color: var(--pe-bg-tertiary) !important;
  border-color: var(--pe-border) !important;
}

.form-check-input:checked {
  background-color: var(--pe-accent) !important;
  border-color: var(--pe-accent) !important;
}

.form-check-label {
  color: var(--pe-text-primary) !important;
}

/* Crispy forms overrides */
.textinput,
.numberinput,
.select,
.emailinput,
.dateinput,
.textarea,
.urlinput,
.passwordinput {
  background-color: var(--pe-bg-tertiary) !important;
  border-color: var(--pe-border) !important;
  color: var(--pe-text-primary) !important;
}

/* ============================================
   BADGES
   ============================================ */
.badge.bg-success {
  background-color: var(--pe-success) !important;
}

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

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

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

.badge.bg-primary {
  background-color: var(--pe-accent) !important;
}

.badge.bg-secondary {
  background-color: var(--pe-bg-tertiary) !important;
  color: var(--pe-text-secondary) !important;
}

/* ============================================
   ALERTS
   ============================================ */
.alert-warning {
  background-color: var(--pe-warning-bg) !important;
  border-color: var(--pe-warning) !important;
  color: var(--pe-warning) !important;
}

.alert-danger {
  background-color: var(--pe-error-bg) !important;
  border-color: var(--pe-error) !important;
  color: var(--pe-error) !important;
}

.alert-success {
  background-color: var(--pe-success-bg) !important;
  border-color: var(--pe-success) !important;
  color: var(--pe-success) !important;
}

.alert-info {
  background-color: var(--pe-info-bg) !important;
  border-color: var(--pe-info) !important;
  color: var(--pe-info) !important;
}

.alert .btn-close {
  filter: invert(1);
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumb {
  background-color: transparent;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--pe-text-tertiary);
}

.breadcrumb-item a {
  color: var(--pe-accent);
}

.breadcrumb-item.active {
  color: var(--pe-text-tertiary);
}

/* ============================================
   PAGINATION
   ============================================ */
.page-link {
  background-color: var(--pe-bg-secondary) !important;
  border-color: var(--pe-border) !important;
  color: var(--pe-text-secondary) !important;
}

.page-link:hover {
  background-color: var(--pe-bg-tertiary) !important;
  color: var(--pe-text-primary) !important;
}

.page-item.disabled .page-link {
  background-color: var(--pe-bg-secondary) !important;
  color: var(--pe-text-tertiary) !important;
}

.page-item.active .page-link {
  background-color: var(--pe-accent) !important;
  border-color: var(--pe-accent) !important;
  color: white !important;
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
  background-color: var(--pe-bg-secondary) !important;
  border-color: var(--pe-border) !important;
  color: var(--pe-text-primary) !important;
}

.modal-header {
  border-bottom-color: var(--pe-border) !important;
}

.modal-footer {
  border-top-color: var(--pe-border) !important;
}

.btn-close {
  filter: invert(1);
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
  background-color: var(--pe-bg-secondary) !important;
  border-color: var(--pe-border) !important;
}

.dropdown-item {
  color: var(--pe-text-secondary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--pe-hover) !important;
  color: var(--pe-text-primary) !important;
}

.dropdown-divider {
  border-top-color: var(--pe-border) !important;
}

/* ============================================
   TEXT UTILITIES
   ============================================ */
.text-muted {
  color: var(--pe-text-tertiary) !important;
}

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

.text-success {
  color: var(--pe-success) !important;
}

.text-danger {
  color: var(--pe-error) !important;
}

.text-warning {
  color: var(--pe-warning) !important;
}

.text-info {
  color: var(--pe-info) !important;
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */
.bg-light {
  background-color: var(--pe-bg-tertiary) !important;
}

.bg-primary {
  background-color: var(--pe-accent) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

/* ============================================
   MISC
   ============================================ */
code {
  color: var(--pe-accent);
  background-color: var(--pe-bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--pe-radius-sm);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--pe-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--pe-bg-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--pe-accent);
  outline-offset: 2px;
}

/* Print overrides - keep light for printing */
@media print {
  body {
    background-color: white !important;
    color: #333 !important;
  }
  .card {
    background-color: white !important;
    border-color: #ddd !important;
  }
  .table th {
    background-color: #f8f9fa !important;
    color: #333 !important;
  }
  .table td {
    color: #333 !important;
  }
}

/* --- App additions (not part of vendored PE bridge) ------------------- */
/* Touch targets: pe-theme enforces 44px min-height on .pe-btn but the
   bridge never applies it to Bootstrap's .btn-sm icon buttons (~31px) used
   in list-view tables. On touch devices, bring them up to the 44px minimum. */
@media (pointer: coarse) {
  .table .btn-sm {
    min-height: 44px;
    min-width: 44px;
  }
}

/* --- Mobile bottom navigation (base.html, below md) -------------------- */
/* Fixed bar with the 5 daily destinations; hidden on md+ via d-md-none. */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  background-color: var(--pe-bg-secondary);
  border-top: 1px solid var(--pe-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav-link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px; /* comfortably above the 44px touch minimum */
  padding: 0.375rem 0.25rem;
  font-size: var(--pe-text-xs);
  font-weight: var(--pe-font-medium);
  color: var(--pe-text-tertiary);
  text-decoration: none;
}

.mobile-bottom-nav-link i {
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-bottom-nav-link:hover,
.mobile-bottom-nav-link:focus-visible {
  color: var(--pe-text-primary);
  background-color: var(--pe-hover);
}

.mobile-bottom-nav-link.active {
  color: var(--pe-accent);
}

/* Keep the fixed bar from covering the bottom of the page content */
@media (max-width: 767.98px) {
  main.has-mobile-bottom-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* --- Mobile card list views (list templates, below md) ------------------ */
/* Tables render on md+ (d-none d-md-block); phones get one tappable card
   per row (stretched-link on the title anchor). */
.mobile-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-card {
  position: relative; /* anchor for Bootstrap's .stretched-link */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
}

.mobile-card + .mobile-card {
  border-top: 1px solid var(--pe-border);
}

.mobile-card:active {
  background-color: var(--pe-active);
}

.mobile-card-title {
  color: var(--pe-text-primary);
  font-weight: var(--pe-font-medium);
  text-decoration: none;
}

.mobile-card-sub {
  color: var(--pe-text-tertiary);
  font-size: var(--pe-text-sm);
}

.mobile-card-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  text-align: right;
}

.mobile-card-figure {
  font-weight: var(--pe-font-semibold);
}

/* Buttons inside a card must stay tappable above the stretched-link */
.mobile-card-action {
  position: relative;
  z-index: 2;
}

/* ============================================
   BUTTON HIERARCHY CONVENTION (documentation only — no rules below)
   ============================================
   btn-primary          Create / edit / navigate-forward actions (Save,
                         New X, Edit). Neutral "do the main thing" affordance.
   btn-success          Status-advance / completion / money-positive actions
                         (Record Payment, Receive, Mark as Ordered, Convert
                         to Sale, Create Invoice, Mark Complete). These move
                         a record forward in its lifecycle.
   btn-outline-primary  Secondary structural actions (Filter/Search, Add
                         Line) and repeatable non-destructive notifications
                         (Email Invoice) that shouldn't read as "money".
   btn-outline-secondary Neutral/informational actions (View PDF, Download,
                         Cancel).
   btn-outline-danger   Destructive actions (Delete). Always paired with a
                         confirm (native confirm() or hx-confirm).
   Keep new buttons within this convention rather than picking colors ad hoc.
   ============================================ */