/*
 * Custom UI enhancements layer.
 * Loaded after custom.css so it can refine the base theme without modifying it.
 * Uses the existing CSS variables (--primary, --gray-*, --white, ...) for consistency.
 * Safe to remove: just delete this file and the reference in wrapper.php.
 */

/* ---------- Smooth, consistent transitions ---------- */
a,
.btn,
.card,
.nav-link,
.dropdown-item,
.form-control,
.custom-radio-box .card,
.badge {
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, box-shadow .18s ease,
                transform .18s ease;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}

/* ---------- Buttons: softer, more tactile ---------- */
.btn {
    border-radius: .5rem;
    font-weight: 600;
    letter-spacing: .1px;
}

.btn-primary {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}

.btn-block {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

/* ---------- Cards: gentler corners & elevation ---------- */
.card {
    border-radius: .75rem;
}

.card:not(.h-100):hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* ---------- Form controls: clearer focus state ---------- */
.form-control {
    border-radius: .5rem;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .15);
}

/* ---------- Selectable option boxes (plans, payment, themes) ---------- */
.custom-radio-box .card {
    border-radius: .75rem;
    cursor: pointer;
}

.custom-radio-box:hover .card {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .10);
}

.custom-radio-box .custom-control-input:checked ~ .card,
.custom-radio-box input[type="radio"]:checked + .card {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary) inset;
}

/* ---------- Navbar / dropdown polish ---------- */
.dropdown-menu {
    border: 0;
    border-radius: .65rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.dropdown-item {
    border-radius: .4rem;
    padding: .5rem .85rem;
}

.navbar-logo,
.footer-logo {
    transition: opacity .18s ease;
}

.navbar-logo:hover {
    opacity: .85;
}

/* ---------- Tables: easier scanning ---------- */
.table thead th {
    border-top: 0;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .4px;
}

.table-hover tbody tr {
    transition: background-color .15s ease;
}

/* ---------- Custom scrollbar (desktop) ---------- */
@media (min-width: 992px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--gray-400) transparent;
    }
    *::-webkit-scrollbar { width: 9px; height: 9px; }
    *::-webkit-scrollbar-thumb {
        background-color: var(--gray-400);
        border-radius: 8px;
    }
    *::-webkit-scrollbar-thumb:hover { background-color: var(--gray-600); }
}

/* ---------- Dark mode: lighten shadows so they aren't harsh ---------- */
.c_darkmode .btn-primary:hover,
.c_darkmode .card:not(.h-100):hover,
.c_darkmode .custom-radio-box:hover .card,
.c_darkmode .dropdown-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* =====================================================
   Responsive refinements
   ===================================================== */

/* Tablets and below */
@media (max-width: 991.98px) {
    .card-body { padding: 1rem; }

    h1, .h1 { font-size: 1.7rem; }
    h2, .h2 { font-size: 1.4rem; }

    /* Keep dropdowns from overflowing the viewport */
    .dropdown-menu { max-width: calc(100vw - 2rem); }
}

/* Phones */
@media (max-width: 575.98px) {
    .container,
    .container-fluid { padding-left: 1rem; padding-right: 1rem; }

    .card-body { padding: .85rem; }

    /* Stat / metric boxes stack comfortably */
    .btn-block + .btn-block { margin-top: .5rem; }

    /* Make tables scroll horizontally instead of breaking layout */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    h1, .h1 { font-size: 1.45rem; }

    /* Tighter modal on small screens */
    .modal-dialog { margin: .5rem; }
}

/* Avoid iOS zoom-on-focus by keeping inputs at >=16px on phones */
@media (max-width: 575.98px) {
    .form-control,
    .custom-select { font-size: 16px; }
}

/* =====================================================
   RTL refinements (Arabic) — applied when dir is rtl
   ===================================================== */
[dir="rtl"] .dropdown-menu-right {
    right: auto;
    left: 0;
}

[dir="rtl"] .btn i.mr-1,
[dir="rtl"] .nav-link i.mr-1 {
    margin-right: 0 !important;
    margin-left: .25rem !important;
}