/* ============================================================
   MICRO-INTERACTIONS & TRANSITIONS  — Skill Bridge India
   Applied globally to both admin panel and public site.
   ============================================================ */

/* ---- 1. Page Fade-In ---- */
body {
    animation: pageFadeIn 0.35s ease both;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 2. Top Loading Bar ---- */
#nprogress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #F26522, #f97316, #fb923c);
    z-index: 99999;
    border-radius: 0 2px 2px 0;
    transition: width 0.2s ease, opacity 0.4s ease;
    box-shadow: 0 0 8px rgba(242, 101, 34, 0.6);
}
#nprogress-bar.done {
    width: 100% !important;
    opacity: 0;
}

/* ---- 3. Global Button Micro-Interactions ---- */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    will-change: transform;
}

button:hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

button:active,
.btn:active,
a.btn:active,
input[type="submit"]:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: none !important;
    transition-duration: 0.07s !important;
}

/* ---- 4. Form Inputs ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select,
.form-control,
.form-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* ---- 5. Cards ---- */
.card,
.admin-card,
.student-card,
.course-card,
.training-card,
.placement-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    will-change: transform;
}

.card:hover,
.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

/* ---- 6. Table Rows ---- */
.table tbody tr {
    transition: background-color 0.15s ease;
    cursor: default;
}
.table tbody tr:hover {
    background-color: rgba(242, 101, 34, 0.04) !important;
}

/* ---- 7. Navigation Links (public) ---- */
.nav-link,
a.nav-link,
.dropdown-item,
.dropdown-item-custom {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease !important;
}

/* ---- 8. Filter Pills / Badges ---- */
.filter-pill,
.badge,
.badge-tag,
[class*="pill"],
[class*="filter-btn"] {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.filter-pill:hover,
[class*="filter-btn"]:hover {
    transform: translateY(-1px);
}

/* ---- 9. Images ---- */
img {
    transition: opacity 0.3s ease;
}

/* ---- 10. Links ---- */
a {
    transition: color 0.18s ease, opacity 0.18s ease;
}

/* ---- 11. Alert Banners ---- */
.alert {
    animation: slideInDown 0.3s ease both;
}
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 12. Modal Dialogs ---- */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    transform: translateY(-20px) scale(0.98);
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

/* ---- 13. Sidebar accordion toggle chevron (admin) ---- */
.nav-group-title .toggle-icon {
    transition: transform 0.3s ease !important;
}

/* ---- 14. Offcanvas sidebar (mobile) ---- */
.offcanvas {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ---- 15. Admin Stat Cards lift ---- */
.stat-card,
[class*="stat-"] {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.stat-card:hover,
[class*="stat-"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1) !important;
}

/* ---- 16. Gallery Images ---- */
.gallery-item img,
.gallery-img {
    transition: transform 0.35s ease !important;
}
.gallery-item:hover img,
.gallery-item:hover .gallery-img {
    transform: scale(1.04);
}

/* ---- 17. Partner/Company Logos ---- */
.partner-logo,
.company-logo {
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.partner-logo:hover,
.company-logo:hover {
    transform: scale(1.05);
    opacity: 1 !important;
}

/* ---- 18. Focus visible ring (accessibility + brand) ---- */
:focus-visible {
    outline: 2px solid #F26522;
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- 19. Checkbox & Radio ---- */
input[type="checkbox"],
input[type="radio"] {
    transition: transform 0.15s ease !important;
    cursor: pointer;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    transform: scale(1.1);
}

/* ---- 20. Scroll to top button (if present) ---- */
#scrollTop,
.scroll-to-top {
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease !important;
}