@import url('./motion.css');

/* ===== Shared dashboard interactive enhancements ===== */

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.3s ease forwards;
}

@keyframes dashboardPanelArrival {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

.dashboard-section {
    animation: dashboardPanelArrival .34s cubic-bezier(.2, .75, .25, 1) both;
}

/* Scrollable content areas */
.table-scroll {
    overflow-x: auto;
}

.list-scroll {
    overflow-y: auto;
    max-height: 500px;
}

#sidebar { max-height: 100vh; max-height: 100dvh; }
#sidebar nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#sidebar,
#sidebar nav,
.content-black-theme,
.dashboard-section .overflow-y-auto,
.content-black-theme .overflow-y-auto,
.content-black-theme .overflow-x-auto,
.table-scroll,
.list-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 207, 187, .72) transparent;
}

#sidebar::-webkit-scrollbar,
#sidebar nav::-webkit-scrollbar,
.content-black-theme::-webkit-scrollbar,
.dashboard-section .overflow-y-auto::-webkit-scrollbar,
.content-black-theme .overflow-y-auto::-webkit-scrollbar,
.content-black-theme .overflow-x-auto::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.list-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#sidebar::-webkit-scrollbar-track,
#sidebar nav::-webkit-scrollbar-track,
.content-black-theme::-webkit-scrollbar-track,
.dashboard-section .overflow-y-auto::-webkit-scrollbar-track,
.content-black-theme .overflow-y-auto::-webkit-scrollbar-track,
.content-black-theme .overflow-x-auto::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.list-scroll::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb,
#sidebar nav::-webkit-scrollbar-thumb,
.content-black-theme::-webkit-scrollbar-thumb,
.dashboard-section .overflow-y-auto::-webkit-scrollbar-thumb,
.content-black-theme .overflow-y-auto::-webkit-scrollbar-thumb,
.content-black-theme .overflow-x-auto::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.list-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(180, 207, 187, .72);
    background-clip: padding-box;
}

#sidebar::-webkit-scrollbar-thumb:hover,
#sidebar nav::-webkit-scrollbar-thumb:hover,
.content-black-theme::-webkit-scrollbar-thumb:hover,
.dashboard-section .overflow-y-auto::-webkit-scrollbar-thumb:hover,
.content-black-theme .overflow-y-auto::-webkit-scrollbar-thumb:hover,
.content-black-theme .overflow-x-auto::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.list-scroll::-webkit-scrollbar-thumb:hover {
    background: #c1d8c8;
    background-clip: padding-box;
}

#sidebar::-webkit-scrollbar-button,
#sidebar nav::-webkit-scrollbar-button,
.content-black-theme::-webkit-scrollbar-button,
.dashboard-section .overflow-y-auto::-webkit-scrollbar-button,
.content-black-theme .overflow-y-auto::-webkit-scrollbar-button,
.content-black-theme .overflow-x-auto::-webkit-scrollbar-button,
.table-scroll::-webkit-scrollbar-button,
.list-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.content-black-theme { min-width: 0; }
.content-black-theme .overflow-x-auto { max-width: 100%; overscroll-behavior-x: contain; }
.admin-harvest-log-cell { min-width: 0; }

html {
    scroll-behavior: smooth;
}

/* Progress bars: grow from zero on load */
.progress-width-bar {
    width: 0;
    transition: width .7s cubic-bezier(.25, .9, .3, .98);
}

/* Bar charts: grow from zero */
[data-bar-height] {
    transition: height .6s cubic-bezier(.25, .9, .3, .98);
}

/* Smooth transitions on interactive elements */
.dashboard-section button,
.dashboard-section a,
.dashboard-section .select,
.content-black-theme button,
.content-black-theme a[class*="bg-"] {
    transition: translate .17s ease, scale .17s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.dashboard-section button:not(:disabled):hover,
.dashboard-section a[href]:hover,
.content-black-theme button:not(:disabled):hover,
.content-black-theme a[class*="bg-"][href]:hover {
    translate: 0 -1px;
}

.dashboard-section button:not(:disabled):active,
.dashboard-section a[href]:active,
.content-black-theme button:not(:disabled):active,
.content-black-theme a[class*="bg-"][href]:active {
    translate: 0 0;
    scale: .985;
}

/* Panel / stat card hover lift */
.stat-card:hover,
.panels-card:hover,
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .08);
}

.content-black-theme .stat-card-hover,
.content-black-theme .inner-card-warm,
.content-black-theme .inner-card-green,
.content-black-theme .inner-card-blue,
.dashboard-section .panels-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.content-black-theme .stat-card-hover:hover,
.content-black-theme .inner-card-warm:hover,
.content-black-theme .inner-card-green:hover,
.content-black-theme .inner-card-blue:hover,
.dashboard-section .panels-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 64, 43, .12);
}

/* Table row hover */
.dashboard-section tbody tr:hover,
.content-black-theme tbody tr:hover {
    background-color: rgba(74, 99, 82, .04);
}

.dashboard-section tbody tr,
.content-black-theme tbody tr {
    transition: background-color .16s ease;
}

/* Tab buttons smooth state */
#seedReportTabBtn,
#fertilizerReportTabBtn,
[id$="TabBtn"] {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}

/* Focus rings for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #14532d;
    outline-offset: 2px;
}

/* Scrollbar */
.dashboard-section .overflow-y-auto::-webkit-scrollbar,
.content-black-theme .overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.dashboard-section .overflow-y-auto::-webkit-scrollbar-thumb,
.content-black-theme .overflow-y-auto::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 3px;
}

/* Click ripple */
.dash-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(74, 99, 82, .18);
    pointer-events: none;
    animation: dashRipple .55s ease-out forwards;
}

@keyframes dashRipple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* Accordion chevron smooth rotation */
.distribution-chevron,
.inventory-log-chevron {
    transition: transform .25s ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .progress-width-bar,
    [data-bar-height],
    #seedReportTabBtn,
    #fertilizerReportTabBtn,
    .distribution-chevron,
    .inventory-log-chevron {
        transition: none !important;
        animation: none !important;
    }

    .stat-card:hover,
    .panels-card:hover,
    .hover-lift:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body > .relative,
    body > .relative > main,
    body > .relative > main > .content-black-theme {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #sidebar { width: min(18rem, 88vw); }
    #sidebar nav { padding-bottom: .5rem; }
    #sidebar > div:last-child { padding: 1rem; }

    .content-black-theme {
        box-sizing: border-box;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .content-black-theme .grid,
    .content-black-theme .flex,
    .content-black-theme .grid > *,
    .content-black-theme .flex > * {
        min-width: 0;
    }

    .content-black-theme :where(img, video, canvas, svg) {
        max-width: 100%;
    }

    .content-black-theme :where(input, select, textarea) {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .content-black-theme table { min-width: 600px; }
    .content-black-theme .overflow-x-auto {
        width: 100%;
        max-width: 100%;
        border-radius: .75rem;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .content-black-theme .user-hero {
        min-height: 250px;
        padding: 1.25rem;
    }

    .content-black-theme .reference-hero {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        padding: 1.25rem !important;
        border-radius: 1.25rem !important;
    }

    .content-black-theme .reference-hero > div {
        width: 100%;
        gap: 1rem;
    }

    .content-black-theme .reference-hero button {
        width: 100%;
        justify-content: center;
    }

    .content-black-theme .dashboard-section .rounded-2xl,
    .content-black-theme .dashboard-section .rounded-3xl {
        min-width: 0;
    }

    .content-black-theme #harvestReportsSection > .mb-6:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem;
    }

    .content-black-theme #harvestReportsSection > .mb-6:first-child > a {
        width: 100%;
        justify-content: center;
    }

    .content-black-theme #harvestReportsSection .harvest-create-btn { width: 100%; justify-content: center; }

    .admin-harvest-log-row {
        margin: .75rem !important;
        padding: .35rem .5rem !important;
        border: 1px solid #d6e4d9;
        border-radius: 8px;
        background: #f3f8f4;
    }

    .admin-harvest-log-grid { gap: 0 !important; }

    .admin-harvest-log-cell {
        padding: .65rem .75rem;
        border-bottom: 1px solid #dce8df;
        background: #fff;
    }

    .admin-harvest-log-cell:last-child { border-bottom: 0; }
    .admin-harvest-log-cell p:first-child { margin-bottom: .2rem; color: #526558 !important; }

    .admin-record-detail-grid {
        gap: 0 !important;
        padding: .4rem .75rem 1rem !important;
        background: #f3f8f4 !important;
    }

    .admin-record-detail-grid > div:not([class*="col-span"]) {
        padding: .7rem .75rem !important;
        border: 0 !important;
        border-bottom: 1px solid #dce8df !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    .admin-record-detail-grid > div:not([class*="col-span"]) p:first-child { margin-bottom: .2rem; }
    .admin-record-detail-grid > div:not([class*="col-span"]) p + p { overflow-wrap: anywhere; }
    .admin-record-detail-grid > div:last-child:not([class*="col-span"]) { border-bottom: 0 !important; }
}

@media (max-width: 480px) {
    .content-black-theme .admin-harvest-log-row {
        margin: .5rem 0 !important;
    }

    .content-black-theme .admin-harvest-log-cell {
        padding: .6rem;
    }

    .content-black-theme .table-scroll {
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }

    .content-black-theme [class*="grid-cols-"] > * {
        min-width: 0;
    }
}