/*
 * Zibuu compatibility layer for Bootstrap and Azuriom plugin views.
 * Loaded after plugin styles and scoped to the public Zibuu layout.
 */

.zibuu-body {
    --bs-border-color: var(--zibuu-line);
    --bs-border-color-translucent: color-mix(in srgb, var(--zibuu-ink) 12%, transparent);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.6rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-xxl: 1.5rem;
    --bs-focus-ring-color: color-mix(in srgb, var(--zibuu-primary) 38%, transparent);
    --bs-focus-ring-opacity: 1;
    --bs-focus-ring-width: 0.2rem;
    --bs-link-color: color-mix(in srgb, var(--zibuu-primary) 48%, var(--zibuu-ink));
    --bs-link-hover-color: color-mix(in srgb, var(--zibuu-secondary) 55%, var(--zibuu-ink));
    --bs-code-color: color-mix(in srgb, var(--zibuu-secondary) 55%, var(--zibuu-ink));
    --bs-highlight-bg: color-mix(in srgb, var(--zibuu-bs-warning) 48%, white);
}

/* Typography and small content primitives */
.zibuu-content :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--zibuu-ink);
}

.zibuu-content :is(h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6) {
    font-weight: 800;
    letter-spacing: -0.025em;
}

.zibuu-content a:not(.btn, .nav-link, .dropdown-item, .list-group-item, .page-link) {
    color: var(--bs-link-color);
    text-decoration-color: color-mix(in srgb, currentcolor 34%, transparent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.zibuu-content a:not(.btn, .nav-link, .dropdown-item, .list-group-item, .page-link):hover {
    color: var(--bs-link-hover-color);
    text-decoration-color: currentcolor;
}

.zibuu-content :is(code, kbd) {
    border-radius: 0.45rem;
}

.zibuu-content code {
    padding: 0.14em 0.35em;
    color: var(--bs-code-color);
    background: color-mix(in srgb, var(--zibuu-secondary) 11%, var(--zibuu-surface));
}

.zibuu-content kbd {
    color: white;
    background: var(--zibuu-ink);
    box-shadow: inset 0 -2px 0 rgb(255 255 255 / 0.16);
}

.zibuu-content hr,
.zibuu-body .dropdown-divider {
    border-color: var(--zibuu-line);
    opacity: 1;
}

.zibuu-content .img-thumbnail {
    padding: 0.35rem;
    border-color: var(--zibuu-line);
    border-radius: 1rem;
    background: var(--zibuu-body);
    box-shadow: var(--zibuu-shadow-soft);
}

/* Cards */
.zibuu-content .card {
    --bs-card-color: var(--zibuu-copy);
    --bs-card-cap-color: var(--zibuu-ink);
    --bs-card-border-color: var(--zibuu-line);
    --bs-card-bg: color-mix(in srgb, var(--zibuu-body) 96%, transparent);
}

.zibuu-content .card-header {
    padding: 1rem 1.25rem;
    color: var(--zibuu-ink);
    font-weight: 750;
}

.zibuu-content .card-footer {
    padding: 0.9rem 1.25rem;
}

.zibuu-content .card-title {
    color: var(--zibuu-ink);
    font-weight: 850;
}

.zibuu-content .card-subtitle,
.zibuu-content .card-text {
    color: var(--zibuu-copy);
}

/* Buttons */
.zibuu-content .btn {
    min-height: 42px;
    border-radius: 0.75rem;
    font-weight: 750;
    box-shadow: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.zibuu-content .btn:not(:disabled, .disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--zibuu-ink) 10%, transparent);
}

.zibuu-content .btn-group > .btn:hover {
    transform: none;
}

.zibuu-content .btn-primary {
    --bs-btn-color: var(--zibuu-ink);
    --bs-btn-bg: var(--zibuu-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--zibuu-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--zibuu-primary) 78%, var(--zibuu-accent));
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--zibuu-ink);
    --bs-btn-active-bg: color-mix(in srgb, var(--zibuu-primary) 68%, var(--zibuu-accent));
    --bs-btn-active-border-color: transparent;
}

.zibuu-content .btn:focus-visible {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.zibuu-content .btn-sm,
.zibuu-content .btn-group-sm > .btn {
    min-height: 34px;
    border-radius: 0.6rem;
}

.zibuu-content .btn-lg {
    min-height: 50px;
    border-radius: 0.9rem;
}

.zibuu-content .btn-link {
    min-height: auto;
    color: var(--bs-link-color);
    box-shadow: none !important;
    transform: none !important;
}

.zibuu-content .btn-link:hover {
    color: var(--bs-link-hover-color);
}

.zibuu-content .btn:disabled,
.zibuu-content .btn.disabled {
    opacity: 0.58;
}

.zibuu-body .btn-close {
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--zibuu-primary) 12%, var(--zibuu-body));
    background-size: 0.72rem;
    opacity: 0.72;
}

.zibuu-body .btn-close:hover {
    background-color: color-mix(in srgb, var(--zibuu-secondary) 17%, var(--zibuu-body));
    opacity: 1;
}

.zibuu-body .btn-close:focus {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Forms */
.zibuu-content .form-label,
.zibuu-content .form-check-label,
.zibuu-content legend {
    color: var(--zibuu-copy);
    font-weight: 700;
}

.zibuu-content :is(.form-control, .form-select, .input-group-text) {
    color: var(--zibuu-copy);
    background-color: color-mix(in srgb, var(--zibuu-body) 96%, var(--zibuu-surface));
}

.zibuu-content :is(.form-control, .form-select)::placeholder {
    color: color-mix(in srgb, var(--zibuu-muted) 72%, white);
    opacity: 1;
}

.zibuu-content :is(.form-control, .form-select):hover:not(:disabled, [readonly]) {
    border-color: color-mix(in srgb, var(--zibuu-primary) 54%, var(--zibuu-line));
}

.zibuu-content :is(.form-control, .form-select):disabled,
.zibuu-content :is(.form-control, .form-select)[readonly] {
    color: var(--zibuu-muted);
    background-color: color-mix(in srgb, var(--zibuu-surface) 82%, var(--zibuu-body));
    opacity: 0.82;
}

.zibuu-content .input-group-text {
    color: var(--zibuu-ink);
    background: color-mix(in srgb, var(--zibuu-primary) 12%, var(--zibuu-surface));
    font-weight: 700;
}

.zibuu-content .form-control[type="file"]::file-selector-button {
    color: var(--zibuu-ink);
    background: color-mix(in srgb, var(--zibuu-primary) 15%, var(--zibuu-surface));
}

.zibuu-content .form-control[type="file"]:hover::file-selector-button {
    background: color-mix(in srgb, var(--zibuu-primary) 24%, var(--zibuu-surface));
}

.zibuu-content .form-check-input {
    border-color: color-mix(in srgb, var(--zibuu-primary) 55%, var(--zibuu-line));
    background-color: var(--zibuu-body);
    box-shadow: none;
}

.zibuu-content .form-check-input:checked,
.zibuu-content .form-check-input[type="checkbox"]:indeterminate {
    border-color: color-mix(in srgb, var(--zibuu-primary) 56%, var(--zibuu-ink));
    background-color: color-mix(in srgb, var(--zibuu-primary) 56%, var(--zibuu-ink));
}

.zibuu-content .form-check-input:focus {
    border-color: var(--zibuu-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.zibuu-content .form-switch .form-check-input {
    width: 2.5em;
    background-color: color-mix(in srgb, var(--zibuu-muted) 20%, var(--zibuu-body));
}

.zibuu-content .form-switch .form-check-input:checked {
    background-color: color-mix(in srgb, var(--zibuu-primary) 56%, var(--zibuu-ink));
}

.zibuu-content .form-floating > label {
    color: var(--zibuu-muted);
}

.zibuu-content .form-floating > :is(.form-control, .form-select):focus ~ label,
.zibuu-content .form-floating > :is(.form-control, .form-select):not(:placeholder-shown) ~ label {
    color: color-mix(in srgb, var(--zibuu-primary) 48%, var(--zibuu-ink));
}

.zibuu-content .form-range::-webkit-slider-thumb {
    background: var(--zibuu-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--zibuu-primary) 38%, transparent);
}

.zibuu-content .form-range::-moz-range-thumb {
    border: 0;
    background: var(--zibuu-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--zibuu-primary) 38%, transparent);
}

.zibuu-content .form-range::-webkit-slider-runnable-track,
.zibuu-content .form-range::-moz-range-track {
    background: color-mix(in srgb, var(--zibuu-primary) 22%, var(--zibuu-surface));
}

.zibuu-content .is-valid,
.zibuu-content .was-validated :valid {
    border-color: var(--zibuu-bs-success);
}

.zibuu-content .is-invalid,
.zibuu-content .was-validated :invalid {
    border-color: var(--zibuu-bs-danger);
}

.zibuu-content .valid-feedback { color: var(--zibuu-bs-success-ink); }
.zibuu-content .invalid-feedback { color: var(--zibuu-bs-danger-ink); }

/* Alerts and badges */
.zibuu-content .alert {
    padding: 1rem 1.1rem;
    border-width: 1px;
    border-radius: 1rem;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--zibuu-ink) 6%, transparent);
}

.zibuu-content .alert-heading {
    color: inherit;
    font-weight: 850;
}

.zibuu-content .alert-link {
    color: inherit;
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.16em;
}

.zibuu-content .badge {
    padding: 0.42em 0.68em;
    border: 1px solid color-mix(in srgb, currentcolor 14%, transparent);
    font-weight: 750;
    letter-spacing: 0.01em;
}

/* Lists, dropdowns and navigation */
.zibuu-content .list-group {
    --bs-list-group-border-color: var(--zibuu-line);
    --bs-list-group-color: var(--zibuu-copy);
    --bs-list-group-bg: color-mix(in srgb, var(--zibuu-body) 96%, transparent);
    --bs-list-group-action-hover-color: var(--zibuu-ink);
    --bs-list-group-action-hover-bg: color-mix(in srgb, var(--zibuu-primary) 9%, var(--zibuu-body));
}

.zibuu-content .list-group:not(.list-group-flush) {
    gap: 0.35rem;
}

.zibuu-content .list-group-item {
    padding: 0.85rem 1rem;
}

.zibuu-body .dropdown-menu {
    --bs-dropdown-color: var(--zibuu-copy);
    --bs-dropdown-bg: color-mix(in srgb, var(--zibuu-body) 97%, transparent);
    --bs-dropdown-border-color: var(--zibuu-line);
    --bs-dropdown-link-color: var(--zibuu-copy);
    --bs-dropdown-link-hover-color: var(--zibuu-ink);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--zibuu-primary) 11%, var(--zibuu-body));
    --bs-dropdown-link-active-color: var(--zibuu-ink);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--zibuu-primary) 22%, var(--zibuu-body));
    padding: 0.55rem;
    border-radius: 1rem;
    box-shadow: var(--zibuu-shadow);
}

.zibuu-body .dropdown-item {
    padding: 0.62rem 0.75rem;
    border-radius: 0.65rem;
    font-weight: 650;
}

.zibuu-body .dropdown-header {
    color: var(--zibuu-ink);
    font-weight: 850;
    letter-spacing: 0.01em;
}

.zibuu-content :is(.nav-tabs, .nav-pills) {
    gap: 0.4rem;
}

.zibuu-content .nav-tabs {
    padding: 0.35rem;
    border: 1px solid var(--zibuu-line);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--zibuu-surface) 70%, var(--zibuu-body));
}

.zibuu-content .nav-tabs .nav-link {
    margin: 0;
    border: 0;
    border-radius: 0.65rem;
    color: var(--zibuu-muted);
    font-weight: 750;
}

.zibuu-content .nav-tabs .nav-link:hover {
    color: var(--zibuu-ink);
    background: color-mix(in srgb, var(--zibuu-primary) 9%, var(--zibuu-body));
}

.zibuu-content .nav-tabs .nav-link.active {
    color: var(--zibuu-ink);
    background: var(--zibuu-body);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--zibuu-ink) 8%, transparent);
}

.zibuu-content .nav-pills .nav-link {
    border-radius: 999px;
    color: var(--zibuu-muted);
    font-weight: 750;
}

.zibuu-content .nav-pills .nav-link:hover {
    color: var(--zibuu-ink);
    background: color-mix(in srgb, var(--zibuu-primary) 10%, var(--zibuu-body));
}

.zibuu-content .nav-pills .nav-link.active {
    color: var(--zibuu-ink);
    background: color-mix(in srgb, var(--zibuu-primary) 28%, var(--zibuu-body));
}

.zibuu-content .breadcrumb {
    gap: 0.15rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--zibuu-line);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--zibuu-surface) 72%, var(--zibuu-body));
}

.zibuu-content .breadcrumb-item,
.zibuu-content .breadcrumb-item.active {
    color: var(--zibuu-muted);
}

.zibuu-content .breadcrumb-item + .breadcrumb-item::before {
    color: color-mix(in srgb, var(--zibuu-primary) 62%, var(--zibuu-muted));
}

/* Tables and pagination */
.zibuu-content .table-responsive {
    border: 1px solid var(--zibuu-line);
    border-radius: 1rem;
    box-shadow: var(--zibuu-shadow-soft);
}

.zibuu-content .table-responsive > .table {
    margin-bottom: 0;
}

.zibuu-content .table > :not(caption) > * > * {
    padding: 0.85rem 0.9rem;
    color: var(--zibuu-copy);
    border-bottom-color: var(--zibuu-line);
}

.zibuu-content .table > thead > tr > * {
    color: var(--zibuu-ink);
    font-weight: 800;
    vertical-align: middle;
}

.zibuu-content thead.table-light {
    --bs-table-color: var(--zibuu-ink);
    --bs-table-bg: color-mix(in srgb, var(--zibuu-secondary) 13%, var(--zibuu-surface));
    --bs-table-border-color: var(--zibuu-line-pink);
}

.zibuu-content .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: color-mix(in srgb, var(--zibuu-primary) 9%, var(--zibuu-body));
    color: var(--zibuu-ink);
}

.zibuu-content .table caption {
    padding-inline: 0.9rem;
    color: var(--zibuu-muted);
}

.zibuu-content .pagination {
    gap: 0.35rem;
    flex-wrap: wrap;
}

.zibuu-content .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 0.7rem !important;
    color: var(--zibuu-copy);
    background: var(--zibuu-body);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--zibuu-ink) 5%, transparent);
}

.zibuu-content .page-link:hover {
    border-color: var(--zibuu-primary);
    color: var(--zibuu-ink);
    background: color-mix(in srgb, var(--zibuu-primary) 12%, var(--zibuu-body));
}

.zibuu-content .page-link:focus {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.zibuu-content .page-item.active .page-link {
    border-color: var(--zibuu-primary);
    color: var(--zibuu-ink);
    background: var(--zibuu-primary);
}

.zibuu-content .page-item.disabled .page-link {
    color: var(--zibuu-muted);
    background: color-mix(in srgb, var(--zibuu-surface) 72%, var(--zibuu-body));
    opacity: 0.7;
}

/* Progress and loading states */
.zibuu-content :is(.progress, .progress-stacked) {
    --bs-progress-height: 0.8rem;
    --bs-progress-bg: color-mix(in srgb, var(--zibuu-primary) 12%, var(--zibuu-surface));
    --bs-progress-bar-color: var(--zibuu-ink);
    --bs-progress-bar-bg: var(--zibuu-primary);
    overflow: hidden;
    border-radius: 999px;
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--zibuu-ink) 10%, transparent);
}

.zibuu-content .progress-bar {
    font-weight: 800;
}

.zibuu-content :is(.spinner-border, .spinner-grow):not([class*="text-"]) {
    color: color-mix(in srgb, var(--zibuu-primary) 72%, var(--zibuu-ink));
}

/* Dialogs and overlays */
.zibuu-body .modal-content,
.zibuu-body .offcanvas,
.zibuu-body .toast {
    border: 1px solid var(--zibuu-line);
    color: var(--zibuu-copy);
    background: color-mix(in srgb, var(--zibuu-body) 97%, transparent);
    box-shadow: var(--zibuu-shadow);
    backdrop-filter: blur(18px);
}

.zibuu-body .modal-content {
    overflow: hidden;
    border-radius: min(var(--zibuu-radius), 22px);
}

.zibuu-body :is(.modal-header, .modal-footer, .offcanvas-header, .toast-header) {
    border-color: var(--zibuu-line);
    background: color-mix(in srgb, var(--zibuu-surface) 74%, var(--zibuu-body));
}

.zibuu-body :is(.modal-title, .offcanvas-title) {
    color: var(--zibuu-ink);
    font-weight: 850;
}

.zibuu-body .modal-backdrop.show {
    opacity: 0.32;
}

.zibuu-body .toast {
    border-radius: 1rem;
}

.zibuu-body .popover {
    --bs-popover-border-color: var(--zibuu-line);
    --bs-popover-header-color: var(--zibuu-ink);
    --bs-popover-header-bg: color-mix(in srgb, var(--zibuu-primary) 13%, var(--zibuu-surface));
    --bs-popover-body-color: var(--zibuu-copy);
    --bs-popover-bg: var(--zibuu-body);
    border-radius: 0.9rem;
    box-shadow: var(--zibuu-shadow-soft);
}

.zibuu-body .tooltip {
    --bs-tooltip-color: white;
    --bs-tooltip-bg: var(--zibuu-ink);
    --bs-tooltip-opacity: 0.96;
}

.zibuu-body .tooltip-inner {
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
}

/* Native Bootstrap carousel controls */
.zibuu-content .carousel-indicators [data-bs-target] {
    width: 0.65rem;
    height: 0.65rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--zibuu-primary);
}

.zibuu-content :is(.carousel-control-prev-icon, .carousel-control-next-icon) {
    padding: 1.25rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--zibuu-ink) 72%, transparent);
    background-size: 55%;
}

@media (prefers-reduced-motion: reduce) {
    .zibuu-content .btn,
    .zibuu-content .form-control,
    .zibuu-content .form-select,
    .zibuu-body .dropdown-item {
        transition: none;
    }
}