/* ============================================
   RFP Factory - Custom Styles
   ============================================ */

/* --- Base transitions --- */
* {
    transition-property: background-color, border-color, color, opacity;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable transitions on page load to prevent flash */
.preload * {
    transition: none !important;
}

/* --- Sidebar --- */
.sidebar-link.active,
.sidebar-link[aria-current="page"] {
    background-color: rgb(51, 65, 85); /* slate-700 */
    color: white;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(203, 213, 225); /* slate-300 */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148, 163, 184); /* slate-400 */
}

/* --- Toast animations --- */
@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-fade-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast {
    animation: toast-slide-in 0.3s ease-out;
}

.toast.removing {
    animation: toast-fade-out 0.3s ease-in forwards;
}

/* --- Table row hover --- */
table tbody tr {
    transition: background-color 0.15s ease;
}

/* --- Focus ring for accessibility --- */
input:focus,
select:focus,
textarea:focus,
button:focus-visible {
    outline: 2px solid rgb(59, 130, 246); /* blue-500 */
    outline-offset: 2px;
}

/* Remove outline for mouse clicks */
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* --- Modal backdrop --- */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* --- HTMX loading indicator --- */
.htmx-request {
    opacity: 0.7;
    pointer-events: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* --- Status badge colors --- */
.badge-draft { background-color: #f1f5f9; color: #475569; }
.badge-in-progress { background-color: #fef3c7; color: #92400e; }
.badge-review { background-color: #f3e8ff; color: #7c3aed; }
.badge-submitted { background-color: #dcfce7; color: #166534; }

/* --- Card hover effect --- */
.card-hover {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-hover:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transform: translateY(-1px);
}

/* --- Activity Timeline --- */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #94a3b8;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 1.2rem;
    width: 1px;
    height: calc(100% - 0.7rem);
    background-color: #e2e8f0;
}

/* --- Status pulse animation --- */
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-running {
    animation: status-pulse 2s ease-in-out infinite;
}

/* --- Progress bars --- */
.progress-bar {
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: #e2e8f0;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 0.25rem;
    transition: width 0.5s ease;
}

/* --- Table row hover enhancement --- */
table tbody tr:hover {
    background-color: rgb(248, 250, 252); /* slate-50 */
}

table tbody tr {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* --- HTMX global loading indicator --- */
#loading-indicator {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#loading-indicator.htmx-request {
    opacity: 1;
    pointer-events: auto;
}

/* --- Form input consistent styling --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* --- Better scrollbar styling --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(203, 213, 225);
    border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148, 163, 184);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(203, 213, 225) transparent;
}

/* --- Print styles --- */
@media print {
    aside,
    header,
    #toast-container,
    #loading-indicator,
    button,
    .no-print {
        display: none !important;
    }

    main {
        padding: 0 !important;
        background: white !important;
    }

    .card-hover:hover {
        transform: none;
        box-shadow: none;
    }

    a {
        text-decoration: none !important;
        color: inherit !important;
    }

    table {
        border-collapse: collapse;
    }

    table th,
    table td {
        border: 1px solid #e2e8f0;
    }
}