/* =========================================================
   TRIMEX - CLEAN UI + SMOOTH MOTION LAYER
   Visual-only enhancement. No database or business logic changes.
========================================================= */

:root{
    --trimex-motion: 180ms cubic-bezier(.2,.7,.2,1);
    --trimex-motion-slow: 360ms cubic-bezier(.2,.7,.2,1);
}

/* Smooth page entrance without changing the existing layout. */
body{
    animation: trimexPageIn var(--trimex-motion-slow) both;
}

@keyframes trimexPageIn{
    from{opacity:0;}
    to{opacity:1;}
}

/* Keep common interactive elements responsive and polished. */
button,
.btn,
button[type="submit"],
button[type="button"],
input[type="submit"],
a.button,
.menu a,
.logout a{
    transition:
        transform var(--trimex-motion),
        box-shadow var(--trimex-motion),
        background-color var(--trimex-motion),
        color var(--trimex-motion),
        border-color var(--trimex-motion),
        opacity var(--trimex-motion);
}

button:hover,
.btn:hover,
button[type="submit"]:hover,
button[type="button"]:hover,
input[type="submit"]:hover,
a.button:hover{
    transform:translateY(-1px);
}

button:active,
.btn:active,
button[type="submit"]:active,
button[type="button"]:active,
input[type="submit"]:active,
a.button:active{
    transform:translateY(0) scale(.985);
}

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible{
    outline:3px solid rgba(122,0,25,.16);
    outline-offset:2px;
}

/* Cards/panels: subtle lift, not a redesign. */
.card,
.panel,
.table-card,
.table-box,
.chart-box,
.chart-placeholder,
.warning-card,
.warning-box,
.profile,
.quick-actions{
    transition:
        transform var(--trimex-motion),
        box-shadow var(--trimex-motion),
        border-color var(--trimex-motion);
}

.card:hover,
.panel:hover,
.table-card:hover,
.table-box:hover,
.chart-box:hover,
.warning-card:hover,
.profile:hover,
.quick-actions:hover{
    transform:translateY(-2px);
}

/* Prevent the lift from becoming distracting on dense table containers. */
.table-wrap:hover,
.summary-table:hover{
    transform:none;
}

/* Table rows become easier to scan. */
tbody tr{
    transition:background-color var(--trimex-motion), transform var(--trimex-motion);
}

tbody tr:hover{
    transform:translateX(1px);
}

/* Sidebar items retain the existing maroon/white design. */
.menu a{
    position:relative;
    overflow:hidden;
}

.menu a::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:4px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    opacity:0;
    transform:scaleX(.25);
    transform-origin:center;
    transition:opacity var(--trimex-motion), transform var(--trimex-motion);
}

.menu a:hover::after,
.menu a.active::after{
    opacity:.18;
    transform:scaleX(1);
}

/* Alerts/notifications appear smoothly. */
.alert,
.warning,
.notification,
.badge-unread,
.badge-high,
.badge-read{
    animation:trimexSoftIn var(--trimex-motion-slow) both;
}

@keyframes trimexSoftIn{
    from{opacity:0;transform:translateY(4px);}
    to{opacity:1;transform:translateY(0);}
}

/* Stagger only visible dashboard groups; still very subtle. */
.cards > *:nth-child(1){animation-delay:20ms;}
.cards > *:nth-child(2){animation-delay:45ms;}
.cards > *:nth-child(3){animation-delay:70ms;}
.cards > *:nth-child(4){animation-delay:95ms;}

/* Inputs feel smoother while retaining their existing appearance. */
input,
select,
textarea{
    transition:border-color var(--trimex-motion), box-shadow var(--trimex-motion), background-color var(--trimex-motion);
}

/* Do not animate collapsed/mobile navigation height or layout. */
.sidebar,
.sidebar-overlay{
    transition:transform var(--trimex-motion-slow), opacity var(--trimex-motion-slow);
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}