/*
 * Phase 2 reusable component library. Every rule here reads var(--kt-*)
 * tokens (declared by ThemeService::cssVariables()'s generated <style>
 * tag) with a Bootstrap variable as fallback, so these components render
 * sensibly even on a page where the theme <style> tag hasn't loaded yet.
 * Built ON TOP OF Bootstrap 5.3 (cards/modals/dropdowns/tabs/accordions/
 * toasts keep using Bootstrap's own JS for behavior) — this restyles,
 * it does not replace, Bootstrap's component set.
 */

:root {
    --kt-primary: var(--bs-primary);
    --kt-secondary: var(--bs-secondary);
    --kt-accent: #6610f2;
    --kt-success: var(--bs-success);
    --kt-warning: var(--bs-warning);
    --kt-danger: var(--bs-danger);
    --kt-sidebar-bg: var(--bs-body-bg);
    --kt-header-bg: var(--bs-body-bg);
    --kt-footer-bg: var(--bs-body-bg);
    --kt-radius: 0.5rem;
    --kt-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    --kt-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Card ---------- */

.kt-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow);
}

.kt-card-header {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kt-card-body {
    padding: 1.1rem;
}

.kt-card-footer {
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Theme Customizer: Card Style token. Set via body[data-kt-card-style] in
   layouts/main.php (storefront only — layouts/admin.php never sets this
   attribute, so these rules are naturally inert on the rest of the admin
   panel). Deliberately NOT scoped to `body[...]` specifically (unlike
   data-kt-container/data-kt-sticky-header above) — the Theme Customizer's
   own live preview panel toggles this same attribute on a plain wrapper
   div to demo the card style before saving, so the selector needs to
   match on any ancestor, not only <body>. 'elevated' needs no override —
   it's .kt-card's existing shadow-based default above. */
[data-kt-card-style="flat"] .kt-card {
    box-shadow: none;
}

[data-kt-card-style="bordered"] .kt-card {
    box-shadow: none;
    border-width: 2px;
    border-color: color-mix(in srgb, var(--kt-primary) 30%, var(--bs-border-color));
}

/* ---------- Button ---------- */

.kt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--kt-btn-radius, var(--kt-radius));
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.kt-btn:hover { filter: brightness(0.92); transform: translateY(-1px); }
.kt-btn:active { transform: translateY(0); }

.kt-btn-primary { background: var(--kt-primary); color: #fff; }
.kt-btn-secondary { background: var(--kt-secondary); color: #fff; }
.kt-btn-success { background: var(--kt-success); color: #fff; }
.kt-btn-warning { background: var(--kt-warning); color: #1a1a1a; }
.kt-btn-danger { background: var(--kt-danger); color: #fff; }

.kt-btn-outline-primary { background: transparent; color: var(--kt-primary); border-color: var(--kt-primary); }
.kt-btn-outline-primary:hover { background: var(--kt-primary); color: #fff; }

.kt-btn-outline-secondary { background: transparent; color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.kt-btn-outline-secondary:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }

.kt-btn-outline-success { background: transparent; color: var(--kt-success); border-color: var(--kt-success); }
.kt-btn-outline-success:hover { background: var(--kt-success); color: #fff; }

.kt-btn-outline-warning { background: transparent; color: #92650a; border-color: var(--kt-warning); }
.kt-btn-outline-warning:hover { background: var(--kt-warning); color: #1a1a1a; }

.kt-btn-outline-danger { background: transparent; color: var(--kt-danger); border-color: var(--kt-danger); }
.kt-btn-outline-danger:hover { background: var(--kt-danger); color: #fff; }

.kt-btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.kt-btn-lg { padding: 0.65rem 1.2rem; font-size: 1rem; }

.kt-btn:disabled, .kt-btn.disabled { opacity: 0.55; cursor: not-allowed; filter: none; transform: none; }

/* ---------- Badge ---------- */

.kt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--kt-radius);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.kt-badge-primary { background: color-mix(in srgb, var(--kt-primary) 15%, transparent); color: var(--kt-primary); }
.kt-badge-success { background: color-mix(in srgb, var(--kt-success) 15%, transparent); color: var(--kt-success); }
.kt-badge-warning { background: color-mix(in srgb, var(--kt-warning) 20%, transparent); color: #92650a; }
.kt-badge-danger { background: color-mix(in srgb, var(--kt-danger) 15%, transparent); color: var(--kt-danger); }
.kt-badge-secondary { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }

/* ---------- Table ---------- */

.kt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.kt-table th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.6rem 0.9rem;
    border-bottom: 2px solid var(--bs-border-color);
}

.kt-table td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.kt-table tbody tr:hover {
    background: var(--bs-tertiary-bg);
}

/* ---------- Pagination (restyles Bootstrap's native .pagination — shared by admin and storefront) ---------- */

.pagination .page-link {
    color: var(--kt-primary);
    border-color: var(--bs-border-color);
}

.pagination .page-item.active .page-link {
    background: var(--kt-primary);
    border-color: var(--kt-primary);
}

.pagination .page-link:hover {
    background: color-mix(in srgb, var(--kt-primary) 10%, transparent);
    color: var(--kt-primary);
}

.pagination .page-item.disabled .page-link {
    color: var(--bs-secondary-color);
}

/* ---------- Form / Input ---------- */

.kt-form-group {
    margin-bottom: 1rem;
}

.kt-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.kt-form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--kt-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.9rem;
}

.kt-form-control:focus {
    outline: none;
    border-color: var(--kt-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--kt-primary) 20%, transparent);
}

.kt-form-control-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
}

.kt-form-error {
    color: var(--kt-danger);
    font-size: 0.78rem;
    margin-top: 0.3rem;
}

/* ---------- Dropdown (restyles Bootstrap's .dropdown-menu) ---------- */

.kt-dropdown .dropdown-menu {
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow);
    border-color: var(--bs-border-color);
}

/* ---------- Modal (restyles Bootstrap's .modal-content) ---------- */

.kt-modal .modal-content {
    border-radius: var(--kt-radius);
    border: none;
    box-shadow: var(--kt-shadow);
}

.kt-modal .modal-header {
    border-bottom: 1px solid var(--bs-border-color);
}

/* ---------- Timeline ---------- */

.kt-timeline {
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
}

.kt-timeline::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: var(--bs-border-color);
}

.kt-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}

.kt-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 0.15rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--kt-primary);
}

.kt-timeline-time {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

/* ---------- Alert ---------- */

.kt-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--kt-radius);
    border: 1px solid transparent;
    font-size: 0.9rem;
}

.kt-alert-success { background: color-mix(in srgb, var(--kt-success) 12%, transparent); border-color: color-mix(in srgb, var(--kt-success) 30%, transparent); color: var(--kt-success); }
.kt-alert-warning { background: color-mix(in srgb, var(--kt-warning) 18%, transparent); border-color: color-mix(in srgb, var(--kt-warning) 35%, transparent); color: #92650a; }
.kt-alert-danger { background: color-mix(in srgb, var(--kt-danger) 12%, transparent); border-color: color-mix(in srgb, var(--kt-danger) 30%, transparent); color: var(--kt-danger); }
.kt-alert-info { background: color-mix(in srgb, var(--bs-info) 12%, transparent); border-color: color-mix(in srgb, var(--bs-info) 30%, transparent); color: var(--bs-info); }

/* ---------- Toast (container positioning; Bootstrap JS drives show/hide) ---------- */

#kt-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kt-toast {
    border-radius: var(--kt-radius);
    box-shadow: var(--kt-shadow);
    border: none;
    min-width: 260px;
}

/* ---------- Tabs (restyles Bootstrap's .nav-tabs) ---------- */

.kt-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: 0.88rem;
}

.kt-tabs .nav-link.active {
    color: var(--kt-primary);
    border-bottom-color: var(--kt-primary);
    background: none;
}

/* ---------- Accordion (restyles Bootstrap's .accordion) ---------- */

.kt-accordion .accordion-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--kt-radius);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.kt-accordion .accordion-button {
    font-weight: 600;
    font-size: 0.9rem;
}

.kt-accordion .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--kt-primary) 8%, transparent);
    color: var(--kt-primary);
}

/* ---------- Loader ---------- */

.kt-loader {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 0.2rem solid var(--bs-border-color);
    border-top-color: var(--kt-primary);
    border-radius: 50%;
    animation: kt-spin 0.7s linear infinite;
}

.kt-loader-sm { width: 1rem; height: 1rem; border-width: 0.15rem; }

@keyframes kt-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Skeleton Loader ---------- */

.kt-skeleton {
    background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-border-color) 37%, var(--bs-tertiary-bg) 63%);
    background-size: 400% 100%;
    animation: kt-skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--kt-radius);
    display: block;
}

.kt-skeleton-text { height: 0.85rem; margin-bottom: 0.5rem; width: 100%; }
.kt-skeleton-title { height: 1.25rem; width: 60%; margin-bottom: 0.75rem; }
.kt-skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }

@keyframes kt-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .kt-loader, .kt-skeleton { animation: none; }
}

/* ---------- Layout engine: breadcrumb / page-title / footer ---------- */

.kt-breadcrumb .breadcrumb {
    font-size: 0.82rem;
}

.kt-page-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.kt-page-title-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* ---------- Theme Customizer: preset swatch picker ---------- */

.theme-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}

.theme-preset-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--bs-border-color);
    border-radius: var(--kt-radius);
    cursor: pointer;
    font-size: 0.78rem;
    text-align: center;
    transition: border-color 0.15s ease;
}

.theme-preset-option:hover {
    border-color: var(--kt-primary);
}

.theme-preset-option.is-selected {
    border-color: var(--kt-primary);
    background: color-mix(in srgb, var(--kt-primary) 8%, transparent);
}

/* ---------- Drag-and-drop sortable rows (Homepage Sections + items) ---------- */

tr[draggable="true"] {
    transition: opacity 0.15s ease;
}

tr[draggable="true"].is-dragging {
    opacity: 0.4;
}

.drag-handle:hover {
    color: var(--kt-primary, var(--bs-primary));
}

.theme-preset-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color);
}
