/* ========================================================================
   KarPayı — Foundation Styles
   Component base styles that bridge design tokens to Bootstrap 5.3.
   Load AFTER design-tokens.css, BEFORE app.css.

   Purpose: Make Bootstrap components look premium without per-component
   hacking. Covers body, links, focus, cards, tables, badges, alerts.
   ======================================================================== */

/* =====================================================================
   1. BASE
   ===================================================================== */

html {
  color-scheme: light dark;
}

/* Alpine.js cloak — hides elements until Alpine initializes */
[x-cloak] {
  display: none !important;
}

/* Alpine.js + Bootstrap dropdown/offcanvas integration notes:
   - Dropdown: Use :class="{ 'show': open }" on .dropdown-menu
     (BS CSS: .dropdown-menu.show { display: block })
   - Offcanvas: Use :class="{ 'show': drawerOpen }" on .offcanvas
     (BS CSS: .offcanvas.show { visibility: visible })
   No custom CSS overrides needed — Bootstrap's own .show class handles it. */

body {
  background-color: var(--bg);
  color: var(--text-1);
  transition: background-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}

/* --- Heading rhythm — more generous spacing for larger headings --- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--text-1);
  margin-top: 0;
}
h1, .h1 { margin-bottom: var(--space-4); }
h2, .h2 { margin-bottom: var(--space-4); }
h3, .h3 { margin-bottom: var(--space-3); }
h4, .h4, h5, .h5, h6, .h6 { margin-bottom: var(--space-2); }

/* Paragraph spacing */
p {
  margin-bottom: var(--space-4);
  color: var(--text-1);
}

/* Immediate heading after paragraph — add some top spacing */
p + h2, p + .h2,
p + h3, p + .h3,
p + h4, p + .h4 {
  margin-top: var(--space-5);
}

/* Muted / secondary text */
.text-muted {
  color: var(--muted) !important;
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   2. LINKS
   ===================================================================== */

a {
  color: var(--primary);
  text-decoration-color: transparent;
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--primary-hover);
  text-decoration-color: var(--primary-hover);
}

/* =====================================================================
   3. FOCUS VISIBLE — Consistent ring for all interactive elements
   ===================================================================== */

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

/* Remove default Bootstrap focus ring to avoid double ring */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Keep border-color change for form inputs on focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
}

/* =====================================================================
   4. CARDS / SURFACES
   ===================================================================== */

/* Default card: clean, subtle border, elevated on hover */
.card {
  --bs-card-bg: var(--surface-1);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-3);
  --bs-card-cap-bg: var(--surface-2);
  --bs-card-color: var(--text-1);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

/* Interactive card — lifts on hover */
.card[role="button"],
.card.kp-card,
a.card {
  cursor: pointer;
}

.card[role="button"]:hover,
.card.kp-card:hover,
a.card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* Elevated surface for dropdowns, modals, popovers */
.kp-elevated {
  background-color: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

/* Inset / recessed surface */
.kp-inset {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
}

/* =====================================================================
   5. TABLES — Fintech data density
   ===================================================================== */

.table {
  --bs-table-bg: var(--surface-1);
  --bs-table-color: var(--text-1);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-hover-bg: var(--primary-subtle);
  --bs-table-hover-color: var(--text-1);
  border-collapse: separate;
  border-spacing: 0;
}

/* Tight header for data tables */
.table > thead > tr > th {
  background-color: var(--surface-2);
  color: var(--text-2);
  border-bottom: 2px solid var(--border-strong);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Cleaner row borders */
.table > tbody > tr > td {
  border-bottom-color: var(--border);
}

/* Last row: no border */
.table > tbody > tr:last-child > td {
  border-bottom-color: transparent;
}

/* Selected row */
.table > tbody > tr.is-selected {
  background-color: var(--primary-subtle);
  border-inline-start: 3px solid var(--primary);
}

/* Responsive wrapper */
.table-responsive {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
}

/* =====================================================================
   6. BADGES / CHIPS
   ===================================================================== */

.badge {
  --bs-badge-border-radius: var(--radius-2);
}

/* Semantic status badges */
.badge-success {
  background-color: var(--success-subtle);
  color: var(--success);
}
.badge-warning {
  background-color: var(--warning-subtle);
  color: var(--warning);
}
.badge-danger {
  background-color: var(--danger-subtle);
  color: var(--danger);
}
.badge-info {
  background-color: var(--info-subtle);
  color: var(--info);
}
.badge-primary {
  background-color: var(--primary-subtle);
  color: var(--primary);
}
.badge-neutral {
  background-color: var(--surface-2);
  color: var(--text-2);
}

/* =====================================================================
   7. ALERTS — Softer, fintech-appropriate
   ===================================================================== */

.alert {
  --bs-alert-border-radius: var(--radius-2);
  border-width: 1px;
  border-left-width: 4px;
}

.alert-success {
  --bs-alert-bg: var(--success-subtle);
  --bs-alert-color: var(--success);
  --bs-alert-border-color: var(--success);
}

.alert-warning {
  --bs-alert-bg: var(--warning-subtle);
  --bs-alert-color: var(--warning);
  --bs-alert-border-color: var(--warning);
}

.alert-danger {
  --bs-alert-bg: var(--danger-subtle);
  --bs-alert-color: var(--danger);
  --bs-alert-border-color: var(--danger);
}

.alert-info {
  --bs-alert-bg: var(--info-subtle);
  --bs-alert-color: var(--info);
  --bs-alert-border-color: var(--info);
}

/* =====================================================================
   8. BUTTONS — Premium override via CSS vars
   ===================================================================== */

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-disabled-opacity: 0.5;
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary-contrast);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--primary-contrast);
}

/* Ghost button — no border, text-only */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover {
  background-color: var(--surface-2);
  color: var(--text-1);
}

/* Active state press effect */
.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* =====================================================================
   9. FORM CONTROLS — Token-aware
   ===================================================================== */

.form-control,
.form-select {
  --bs-border-color: var(--border);
  background-color: var(--surface-1);
  color: var(--text-1);
}

.form-control::placeholder {
  color: var(--text-3);
}

.form-label {
  color: var(--text-2);
}

/* =====================================================================
   10. NAV / TOPBAR — Token-aware
   ===================================================================== */

.nav-link {
  color: var(--text-2);
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-link:hover,
.nav-link:focus {
  color: var(--primary);
}
.nav-link.active {
  color: var(--primary) !important;
  font-weight: 600;
}

/* =====================================================================
   11. DROPDOWN — Token-aware
   ===================================================================== */

.dropdown-menu {
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--text-1);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-hover-color: var(--text-1);
  --bs-dropdown-link-active-bg: var(--primary-subtle);
  --bs-dropdown-link-active-color: var(--primary);
  --bs-dropdown-divider-bg: var(--border);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-2);
}

/* =====================================================================
   12. MODAL / OFFCANVAS — Token-aware
   ===================================================================== */

.modal-content {
  --bs-modal-bg: var(--surface-1);
  --bs-modal-border-color: var(--border);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
}

.offcanvas {
  --bs-offcanvas-bg: var(--surface-1);
  --bs-offcanvas-border-color: var(--border);
  --bs-offcanvas-color: var(--text-1);
}

/* =====================================================================
   13. TOAST — Token-aware
   ===================================================================== */

.toast {
  --bs-toast-bg: var(--surface-1);
  --bs-toast-border-color: var(--border);
  --bs-toast-header-bg: var(--surface-2);
  --bs-toast-header-color: var(--text-2);
  --bs-toast-color: var(--text-1);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-2);
}

/* =====================================================================
   14. TOOLTIP — Token-aware
   ===================================================================== */

.tooltip {
  --bs-tooltip-bg: var(--text-1);
  --bs-tooltip-color: var(--bg);
}

/* =====================================================================
   15. PAGINATION — Token-aware
   ===================================================================== */

.pagination {
  --bs-pagination-bg: var(--surface-1);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-color: var(--text-2);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-color: var(--text-1);
  --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-active-color: var(--primary-contrast);
  --bs-pagination-disabled-bg: var(--surface-2);
  --bs-pagination-disabled-color: var(--text-3);
}

/* =====================================================================
   16. LIST GROUP — Token-aware
   ===================================================================== */

.list-group {
  --bs-list-group-bg: var(--surface-1);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-color: var(--text-1);
  --bs-list-group-action-hover-bg: var(--surface-2);
  --bs-list-group-action-hover-color: var(--text-1);
  --bs-list-group-action-active-bg: var(--primary-subtle);
  --bs-list-group-action-active-color: var(--primary);
  --bs-list-group-active-bg: var(--primary);
  --bs-list-group-active-border-color: var(--primary);
  --bs-list-group-active-color: var(--primary-contrast);
}

/* =====================================================================
   17. BREADCRUMB — Token-aware
   ===================================================================== */

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--text-3);
  --bs-breadcrumb-item-active-color: var(--text-2);
}

/* =====================================================================
   18. PROGRESS — Token-aware
   ===================================================================== */

.progress {
  --bs-progress-bg: var(--surface-2);
  --bs-progress-bar-bg: var(--primary);
  --bs-progress-border-radius: var(--radius-full);
  --bs-progress-height: 0.5rem;
}

/* =====================================================================
   19. SCROLLBAR — Subtle, matches theme
   ===================================================================== */

/* Thin scrollbar for WebKit */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* =====================================================================
   20. UTILITY CLASSES
   ===================================================================== */

/* Text semantic colors */
.text-1    { color: var(--text-1) !important; }
.text-2    { color: var(--text-2) !important; }
.text-3    { color: var(--text-3) !important; }
.text-muted-custom { color: var(--muted) !important; }

/* Surface colors */
.bg-surface-1 { background-color: var(--surface-1) !important; }
.bg-surface-2 { background-color: var(--surface-2) !important; }
.bg-surface-3 { background-color: var(--surface-3) !important; }

/* Semantic state backgrounds */
.bg-primary-subtle { background-color: var(--primary-subtle) !important; }
.bg-success-subtle { background-color: var(--success-subtle) !important; }
.bg-warning-subtle { background-color: var(--warning-subtle) !important; }
.bg-danger-subtle  { background-color: var(--danger-subtle) !important; }
.bg-info-subtle    { background-color: var(--info-subtle) !important; }

/* Border using tokens */
.border-token { border-color: var(--border) !important; }
.border-strong { border-color: var(--border-strong) !important; }

/* Skeleton loading animation */
.kp-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: kp-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-1);
}

@keyframes kp-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================================
   HTMX INDICATORS
   .htmx-indicator   — hidden by default, shown during request
   .htmx-request     — added to trigger element (or hx-indicator target's parent)
   ===================================================================== */

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request { display: inline-block; }

/* Dim swap target during request — use hx-indicator on the target container.
   HTMX adds .htmx-request to the indicator target during flight. */
.kp-htmx-dim { transition: opacity 150ms ease; }
.kp-htmx-dim.htmx-request { opacity: 0.45; pointer-events: none; }

/* Utility: cursor pointer (BS 5.3 dropped .cursor-pointer) */
.cursor-pointer { cursor: pointer; }

/* =====================================================================
   SUB-BOOTSTRAP FONT SIZE UTILITIES (v0.66.x hygiene)
   BS .fs-6 = 1rem. These cover the sub-1rem admin/component scale.
   ===================================================================== */
.kp-fs-xs  { font-size: .6rem; }
.kp-fs-sm  { font-size: .65rem; }
.kp-fs-md  { font-size: .7rem; }
.kp-fs-base { font-size: .75rem; }
.kp-fs-lg  { font-size: .85rem; }
.kp-select-narrow { max-width: 160px; }
.kp-surface-2-bg  { background: var(--surface-2); }