/* ============================================
   Agentino - Custom Styles
   Tailwind CSS handles most styling via CDN.
   These are supplementary styles for specific
   components that need custom CSS.
   ============================================ */

/* ----- Kanban Board ----- */

.kanban-board {
    min-height: calc(100vh - 250px);
}

.kanban-column {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.kanban-column-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

.kanban-column-body::-webkit-scrollbar {
    width: 4px;
}

.kanban-column-body::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-column-body::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
    border-radius: 9999px;
}

.kanban-column-body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6);
}

/* Job card hover / drag state */
.job-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.job-card:hover {
    transform: translateY(-1px);
}

.job-card.dragging {
    opacity: 0.7;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15),
                0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.kanban-column-body.drag-over {
    background-color: rgba(var(--brand-primary-rgb-600), 0.04);
    border: 2px dashed rgba(var(--brand-primary-rgb-600), 0.3);
    border-radius: 0.5rem;
}


/* ----- Timeline / Message History ----- */

.timeline-container {
    position: relative;
}

.timeline-item {
    position: relative;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 20px;
    bottom: 0;
    width: 1px;
    background-color: #e5e7eb;
}

.timeline-message {
    position: relative;
    padding-left: 28px;
    padding-bottom: 24px;
}

.timeline-message:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 24px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, #d1d5db, transparent);
}

.timeline-message .timeline-dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d1d5db;
}

.timeline-message .timeline-dot.sent {
    background-color: var(--brand-primary-600);
    box-shadow: 0 0 0 1px var(--brand-primary-600);
}

.timeline-message .timeline-dot.received {
    background-color: #10b981;
    box-shadow: 0 0 0 1px #10b981;
}

.timeline-message .timeline-dot.system {
    background-color: #f59e0b;
    box-shadow: 0 0 0 1px #f59e0b;
}


/* ----- Card Hover Effects ----- */

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

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


/* ----- HTMX Loading Indicator ----- */

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex;
}

/* Subtle loading bar at top */
.htmx-request::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand-primary-700), var(--brand-primary-400), var(--brand-primary-700));
    background-size: 200% 100%;
    animation: loading-bar 1.5s ease-in-out infinite;
    z-index: 9999;
}

@keyframes loading-bar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ----- Sidebar Active State ----- */

.sidebar-active {
    background-color: var(--brand-primary-50);
    color: var(--brand-primary-700);
}


/* ----- Global Transitions ----- */

button, a, input, select, textarea {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ----- Flash Messages ----- */

.flash-message {
    animation: flash-in 0.3s ease-out;
}

.flash-message.removing {
    animation: flash-out 0.3s ease-in forwards;
}

@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes flash-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
}


/* ----- Modal Transitions ----- */

#invite-modal > div:first-child {
    transition: opacity 0.2s ease;
}

#invite-modal > div:last-child > div {
    transition: transform 0.2s ease, opacity 0.2s ease;
}


/* ----- Toggle Switch ----- */

input[type="checkbox"]:checked + label::after {
    transform: translateX(1rem);
}


/* ----- Responsive Table ----- */

@media (max-width: 640px) {
    .kanban-board {
        min-height: auto;
    }

    .kanban-column {
        max-height: none;
    }

    .kanban-column-body {
        max-height: 400px;
    }
}


/* ----- Skeleton Loading Pulse ----- */

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.25rem;
}


/* ----- Line Clamp Utility ----- */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}