/**
 * ============================================================================
 * RELIANT OPS PORTAL — MOTION & INTERACTION LAYER
 * ----------------------------------------------------------------------------
 * Purposeful motion only: every animation here either confirms an action,
 * guides attention, or communicates state. No decorative movement.
 * Everything collapses to zero under prefers-reduced-motion.
 * Loaded after reliant-theme.css.
 * ============================================================================
 */

:root {
    --ease-out:    cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast:   130ms;
    --dur:        220ms;
    --dur-slow:   380ms;
}

/* ---------------------------------------------------------------------------
 * 1 · ENTRANCE — content arrives in a short, staggered cascade
 * ------------------------------------------------------------------------- */
@keyframes rs-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes rs-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Applied by ui.js once the page is ready, so content never flashes unstyled */
.rs-anim [data-rs-reveal] {
    opacity: 0;
    animation: rs-rise var(--dur-slow) var(--ease-out) forwards;
    animation-delay: var(--rs-delay, 0ms);
}

/* ---------------------------------------------------------------------------
 * 2 · CARDS & PANELS — lift on hover to signal interactivity
 * ------------------------------------------------------------------------- */
.card, .stat-card, .cc-panel, .team-card, .checkin-step, .eod-section {
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out);
    will-change: transform;
}
.stat-card:hover, .team-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow) !important;
}

/* A card that links somewhere gets a stronger affordance */
a.card:hover, .card[onclick]:hover, .task-item[onclick]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow) !important;
}

/* ---------------------------------------------------------------------------
 * 3 · BUTTONS — press feedback + ripple origin set by ui.js
 * ------------------------------------------------------------------------- */
.btn, .login-submit, .cc-tab, .topbar-btn {
    position: relative;
    overflow: hidden;
    transition:
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled), .login-submit:hover { transform: translateY(-1px); }
.btn:active:not(:disabled), .login-submit:active { transform: translateY(0); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(11,45,190,.28) !important; }
.btn-danger:hover:not(:disabled)  { box-shadow: 0 4px 14px rgba(227,24,54,.26) !important; }
.btn-success:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(15,157,88,.26) !important; }

.rs-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: .28;
    pointer-events: none;
    animation: rs-ripple-out 520ms var(--ease-out) forwards;
}
@keyframes rs-ripple-out {
    to { transform: scale(2.6); opacity: 0; }
}

/* A button waiting on the network */
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy i { animation: rs-spin 1s linear infinite; }

/* ---------------------------------------------------------------------------
 * 4 · SIDEBAR NAV — the active marker slides between items
 * ------------------------------------------------------------------------- */
.sidebar-nav { position: relative; }
.rs-nav-marker {
    position: absolute;
    left: 0; width: 3px;
    border-radius: 0 3px 3px 0;
    background: #fff;
    transition: transform var(--dur) var(--ease-out), height var(--dur) var(--ease-out), opacity var(--dur);
    pointer-events: none;
    z-index: 2;
}
.nav-item i { transition: transform var(--dur) var(--ease-spring), color var(--dur-fast); }
.nav-item:hover i { transform: translateX(1px) scale(1.08); }
.nav-item.active i { transform: none; }

/* ---------------------------------------------------------------------------
 * 5 · LIVE STATE — a working session should feel alive
 * ------------------------------------------------------------------------- */
@keyframes rs-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
.team-status-dot.working, .live-dot, .pill.working::before {
    animation: rs-breathe 2.4s var(--ease-in-out) infinite;
}
.workday-card.working .workday-timer { font-variant-numeric: tabular-nums; }

/* The running clock ticks without layout shift */
.workday-timer span { display: inline-block; animation: rs-breathe 1s steps(1) infinite; }

/* Status pills carry a leading dot */
.pill.working::before, .pill.on_break::before, .pill.finished::before, .pill.offline::before {
    content: ""; display: inline-block;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; margin-right: 5px;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * 6 · TABLES — rows respond to the pointer
 * ------------------------------------------------------------------------- */
.table tbody tr {
    transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
.table tbody tr:hover {
    box-shadow: inset 3px 0 0 var(--brand);
}
.hm-cell { transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast); }
.hm-cell:hover { transform: scale(1.18); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------------------
 * 7 · MODALS — spring in, fade the backdrop
 * ------------------------------------------------------------------------- */
.modal-overlay {
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}
.modal-overlay.show, .modal-overlay.active { opacity: 1; }
.modal-overlay .modal {
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease-out);
}
.modal-overlay.show .modal, .modal-overlay.active .modal {
    transform: none;
    opacity: 1;
}

/* ---------------------------------------------------------------------------
 * 8 · FORMS — focus grows the ring
 * ------------------------------------------------------------------------- */
.form-control, .form-input, .form-select, .form-textarea, input, select, textarea {
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background var(--dur-fast);
}
.eod-count { transition: color var(--dur-fast); }
.eod-count.ok { animation: rs-pop 320ms var(--ease-spring); }
@keyframes rs-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.14); }
    100% { transform: scale(1); }
}

/* A field that failed validation */
@keyframes rs-shake {
    10%, 90% { transform: translateX(-1.5px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}
.rs-shake { animation: rs-shake 480ms var(--ease-in-out); }

/* ---------------------------------------------------------------------------
 * 9 · TOASTS
 * ------------------------------------------------------------------------- */
.rs-toast-host {
    position: fixed; right: 20px; bottom: 20px;
    display: flex; flex-direction: column; gap: 9px;
    z-index: 9999; pointer-events: none;
}
.rs-toast {
    display: flex; align-items: center; gap: 10px;
    background: var(--ink); color: #fff;
    border-radius: var(--radius-lg);
    padding: 11px 15px;
    font-size: 13.5px; font-weight: 550;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: rs-toast-in var(--dur-slow) var(--ease-spring);
    max-width: 380px;
}
.rs-toast.out { animation: rs-toast-out var(--dur) var(--ease-out) forwards; }
.rs-toast.success { background: #0B5137; }
.rs-toast.error   { background: #8E0F22; }
.rs-toast i { font-size: 17px; flex-shrink: 0; }
@keyframes rs-toast-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes rs-toast-out {
    to { opacity: 0; transform: translateX(18px); }
}

/* ---------------------------------------------------------------------------
 * 10 · SKELETONS — shimmer while live panels load
 * ------------------------------------------------------------------------- */
.rs-skeleton {
    background: linear-gradient(90deg, var(--line-2) 25%, #E3E7F0 37%, var(--line-2) 63%);
    background-size: 400% 100%;
    animation: rs-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
}
@keyframes rs-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}
.cc-loading i { animation: rs-spin 1s linear infinite; display: inline-block; }

/* ---------------------------------------------------------------------------
 * 11 · PROGRESS RING — hours worked against the 8h target
 * ------------------------------------------------------------------------- */
.rs-ring { display: block; transform: rotate(-90deg); }
.rs-ring-track { stroke: var(--line); fill: none; }
.rs-ring-fill {
    fill: none; stroke: var(--brand); stroke-linecap: round;
    transition: stroke-dashoffset 900ms var(--ease-out);
}
.rs-ring-fill.is-full  { stroke: var(--success); }
.rs-ring-fill.is-over  { stroke: var(--warning); }
.rs-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.rs-ring-label {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 12 · NUMBERS — stat values count up, so a change is noticed
 * ------------------------------------------------------------------------- */
.stat-value, .cc-stat .v { font-variant-numeric: tabular-nums; }

/* Value that just changed on a live refresh */
@keyframes rs-flash {
    from { background: var(--brand-100); }
    to   { background: transparent; }
}
.rs-changed { animation: rs-flash 1.1s var(--ease-out); border-radius: 5px; }

/* ---------------------------------------------------------------------------
 * 13 · NOTIFICATION & DROPDOWN PANELS
 * ------------------------------------------------------------------------- */
.notifications-dropdown, .help-notif-dropdown {
    transform-origin: top right;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring);
}
/* The bell panel toggles .show; the help panel (.help-notif-dropdown) toggles .active.
   Not .help-notifications-dropdown: that is the wrapper around the Help button, and
   hiding it left the button invisible but still taking up space in the topbar. */
.notifications-dropdown:not(.show), .help-notif-dropdown:not(.active) {
    opacity: 0; transform: translateY(-6px) scale(.97); pointer-events: none;
}
.notifications-dropdown.show, .help-notif-dropdown.active {
    opacity: 1; transform: none;
}
.notification-item { transition: background var(--dur-fast), padding-left var(--dur-fast) var(--ease-out); }
.notification-item:hover { padding-left: 20px !important; }

/* ---------------------------------------------------------------------------
 * 14 · CHECK-IN FLOW — each completed step confirms itself
 * ------------------------------------------------------------------------- */
.checkin-step.completed .checkin-step-number { animation: rs-pop 420ms var(--ease-spring); }
.checkin-camera-preview.show { animation: rs-fade var(--dur-slow) var(--ease-out); }

/* Success tick drawn on check-out */
@keyframes rs-draw { to { stroke-dashoffset: 0; } }
.rs-tick path {
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: rs-draw 520ms var(--ease-out) 120ms forwards;
}

/* ---------------------------------------------------------------------------
 * 15 · PAGE TRANSITION — a thin progress bar on navigation
 * ------------------------------------------------------------------------- */
.rs-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--brand), #4F6BFF);
    z-index: 10000;
    transition: width 260ms var(--ease-out), opacity 260ms;
    box-shadow: 0 0 8px rgba(11,45,190,.5);
}

/* ---------------------------------------------------------------------------
 * 16 · REDUCED MOTION — honour the OS setting completely
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .rs-anim [data-rs-reveal] { opacity: 1 !important; animation: none !important; }
    .btn:hover, .stat-card:hover, .team-card:hover, a.card:hover { transform: none !important; }
    .rs-ripple { display: none !important; }
}