/* Komponentlər: Bootstrap-ın mavi defoltlarını token-larla əvəz edir və
 * layihənin öz kiçik komponentlərini təyin edir. */

/* ---------- Düymələr ---------- */

.btn {
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-font-weight: 550;
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .4375rem;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.btn-sm {
    --bs-btn-font-size: var(--fs-xs);
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .3125rem;
}

.btn-lg {
    --bs-btn-font-size: var(--fs-md);
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: .625rem;
    --bs-btn-border-radius: var(--radius-md);
}

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

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

/* Neytral ikinci dərəcəli düymə — ağ fon, nazik haşiyə. */
.btn-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface-2);
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-active-bg: var(--color-surface-2);
    --bs-btn-active-border-color: var(--color-border-strong);
}

.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: color-mix(in srgb, var(--color-danger) 45%, #fff);
    --bs-btn-hover-bg: var(--color-danger);
    --bs-btn-hover-border-color: var(--color-danger);
}

.btn-danger {
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 85%, #000);
}

/* Yalnız ikonlu kvadrat düymə. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.btn-icon.btn-sm {
    width: 1.75rem;
    height: 1.75rem;
}

.btn-close:focus {
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* ---------- Formalar ---------- */

.form-label {
    margin-bottom: .3125rem;
    font-size: var(--fs-sm);
    font-weight: 550;
}

.form-text {
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

.form-control,
.form-select {
    font-size: var(--fs-base);
    border-color: var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: .4375rem .625rem;
}

.form-select {
    padding-right: 2rem;
}

.form-control-sm,
.form-select-sm {
    font-size: var(--fs-sm);
    padding: .3125rem .5rem;
}

/* Yuxarıdakı qısa `padding` sağ boşluğu da .5rem edirdi — ox ikonu (16px,
   sağdan .75rem) mətnin üstünə düşürdü. Ox yeri ayrıca saxlanır. */
.form-select-sm {
    padding-right: 1.75rem;
    background-position: right .5rem center;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.form-control::placeholder {
    color: #a3a8a2;
}

.form-check-input {
    border-color: var(--color-border-strong);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23294735'/%3e%3c/svg%3e");
}

.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--color-danger) !important;
}

.invalid-feedback {
    font-size: var(--fs-xs);
    color: var(--color-danger);
}

/* iOS Safari 16px-dən kiçik şriftli sahəyə fokusda səhifəni böyüdür.
   Mobil müştəri (qeyd sahəsi) və mobil panel üçün bunun qarşısını alır. */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* ---------- Naviqasiya / dropdown / səhifələmə ---------- */

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--color-primary);
    --bs-nav-link-color: var(--color-text);
    --bs-nav-link-hover-color: var(--color-primary);
    --bs-nav-link-font-size: var(--fs-sm);
}

.dropdown-menu {
    --bs-dropdown-font-size: var(--fs-sm);
    --bs-dropdown-link-active-bg: var(--color-primary);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-box-shadow: var(--shadow-md);
}

.pagination {
    --bs-pagination-font-size: var(--fs-sm);
    --bs-pagination-color: var(--color-text);
    --bs-pagination-hover-color: var(--color-primary);
    --bs-pagination-focus-color: var(--color-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--color-primary-ring);
    --bs-pagination-active-bg: var(--color-primary);
    --bs-pagination-active-border-color: var(--color-primary);
}

/* ---------- Səth (kart) ---------- */

.surface {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.surface-pad {
    padding: 1rem;
}

@media (min-width: 768px) {
    .surface-pad {
        padding: 1.25rem;
    }
}

/* ---------- Nişanlar (status) ---------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .125rem .5rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-muted);
    white-space: nowrap;
}

.chip-success { background: var(--color-success-soft); color: var(--color-success); }
.chip-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.chip-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.chip-info { background: var(--color-info-soft); color: var(--color-info); }
.chip-primary { background: var(--color-primary-soft); color: var(--color-primary); }

.dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- Boş vəziyyət ---------- */

.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-muted);
}

.empty-state .bi {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    color: var(--color-border-strong);
}

.empty-state h2,
.empty-state h3 {
    margin-bottom: .25rem;
    font-size: var(--fs-md);
    color: var(--color-text);
}

.empty-state p {
    margin-bottom: 1rem;
    font-size: var(--fs-sm);
}

/* ---------- Offcanvas / modal / toast ---------- */

.offcanvas {
    --bs-offcanvas-border-color: var(--color-border);
}

.offcanvas-title {
    font-size: var(--fs-md);
    font-weight: 650;
}

.modal {
    --bs-modal-border-radius: var(--radius-md);
    --bs-modal-border-color: var(--color-border);
}

.modal-title {
    font-size: var(--fs-md);
    font-weight: 650;
}

.toast-container {
    z-index: 1090;
}

.toast {
    --bs-toast-font-size: var(--fs-sm);
    --bs-toast-border-radius: var(--radius-sm);
    --bs-toast-box-shadow: var(--shadow-md);
}

/* ---------- Siyahı cədvəli ---------- */

/* position: relative olmasa, cədvəlin içindəki mütləq mövqeli elementlər
   (məs. <th>-dəki .visually-hidden) overflow kəsimindən qaçır və mobildə
   BÜTÜN səhifəni üfüqi sürüşdürür (ölçüldü: 360px-də sənəd 497px idi). */
.table-responsive {
    position: relative;
}

.table {
    --bs-table-bg: transparent;
    font-size: var(--fs-sm);
    margin-bottom: 0;
}

.table > thead th {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
    border-bottom-color: var(--color-border);
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding: .5625rem .75rem;
    border-bottom-color: var(--color-border);
    vertical-align: middle;
}

.table > tbody > tr:last-child > * {
    border-bottom: 0;
}

/* Kvadrat miniatür (siyahılarda). */
.thumb {
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}

.thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-border-strong);
}

/* ---------- «Yuxarı» düyməsi ---------- */

.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1030; /* offcanvas/modal qatından (1040+) aşağı */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.125rem;
    box-shadow: var(--shadow-md);
}

.back-to-top:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.back-to-top[hidden] {
    display: none;
}