/* BeeBooks - Custom Styles */
/* Minimal overrides for Tailwind CDN */

/* Smooth transitions */
* {
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: ease;
    transition-duration: 150ms;
}

/* Override aggressive transitions for inputs */
input, select, textarea, button {
    transition-property: border-color, box-shadow;
}

/* Print styles: sidebar (nav) and mobile UI hidden so only main content prints */
@media print {
    .no-print, nav, #toast-container {
        display: none !important;
    }
    body {
        background: white !important;
    }
    main {
        padding: 0 !important;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Product autocomplete dropdown */
.product-autocomplete {
    max-height: 200px;
    overflow-y: auto;
}

/* Table row hover cursor */
tbody tr[onclick] {
    cursor: pointer;
}

/* Dropdown animation */
@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dropdown-animate:not(.hidden) {
    animation: dropdown-in 0.15s ease-out;
}

/* Modal backdrop animation */
.modal-backdrop-animate {
    transition: opacity 0.2s ease;
}
@keyframes modal-panel-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-panel-animate {
    animation: modal-panel-in 0.2s ease-out;
}

/* Select with spaced chevron (hide native arrow, use background) */
select.select-chevron-spaced {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234B5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.25rem;
}

/* Focus ring for plum accent */
[type="text"]:focus,
[type="email"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="password"]:focus,
select:focus,
textarea:focus {
    --tw-ring-color: #532464;
    border-color: #532464;
}

/* ─── Flatpickr: plum accent theme ─────────────────────── */
/* Container */
.flatpickr-calendar {
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    border: none;
    font-family: inherit;
    width: 308px;
    padding: 4px;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none;
}

/* Month nav header */
.flatpickr-months {
    padding: 8px 4px 4px;
}
.flatpickr-months .flatpickr-month {
    height: 36px;
}
.flatpickr-current-month {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    padding-top: 4px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
}
.flatpickr-current-month input.cur-year {
    font-weight: 600;
}

/* Prev/next arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 6px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    top: 10px;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: #F3F4F6;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #6B7280;
    width: 12px;
    height: 12px;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #532464;
}

/* Weekday headers */
.flatpickr-weekdays {
    padding: 0 4px;
}
span.flatpickr-weekday {
    color: #9CA3AF;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Day cells */
.flatpickr-day {
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    line-height: 38px;
    height: 38px;
    max-width: 38px;
    margin: 1px;
    transition: all 0.1s ease;
    border: none;
}
.flatpickr-day:hover {
    background: #F8F5F9;
    border: none;
    color: #532464;
}
.flatpickr-day.today {
    border: 2px solid #E5E7EB;
    background: transparent;
    color: #374151;
}
.flatpickr-day.today:hover {
    background: #F8F5F9;
    border-color: #532464;
    color: #532464;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #532464;
    border-color: #532464;
    color: #fff;
    box-shadow: 0 2px 8px rgba(83, 36, 100, 0.3);
}
.flatpickr-day.selected.today {
    border-color: #532464;
}

/* Range in-between */
.flatpickr-day.inRange {
    background: #F8F5F9;
    border-color: #F8F5F9;
    color: #532464;
    box-shadow: -5px 0 0 #F8F5F9, 5px 0 0 #F8F5F9;
}
.flatpickr-day.inRange:hover {
    background: #EDE6EF;
    border-color: #EDE6EF;
}

/* Adjacent month days */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #D1D5DB;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    color: #9CA3AF;
    background: #F9FAFB;
}

/* Disabled */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #E5E7EB;
    background: transparent;
}

/* Input styling when flatpickr is active */
.flatpickr-input {
    cursor: pointer;
}
.flatpickr-input:read-only {
    cursor: pointer;
    background-color: #fff;
}

/* Payment progress (bar and circle) */
.payment-progress-bar {
    transition: stroke-dashoffset 0.5s ease, width 0.5s ease;
}
.payment-progress-circle svg circle.payment-progress-bar {
    transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.payment-progress-circle {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Activity timeline line */
.activity-timeline-line {
    pointer-events: none;
}

/* Inline edit group: subtle hover effect on display text */
.inline-edit-group .inline-edit-display {
    cursor: default;
}
.inline-edit-group .inline-edit-trigger {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.inline-edit-group:hover .inline-edit-trigger {
    opacity: 1;
}

/* ─── Dashboard: card entrance and hover ─────────────────── */
@keyframes dashboard-card-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dashboard-stat-value-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dashboard-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@media (prefers-reduced-motion: no-preference) {
    .dashboard-stat-card {
        opacity: 0;
        animation: dashboard-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .dashboard-stat-card:nth-child(1) { animation-delay: 0ms; }
    .dashboard-stat-card:nth-child(2) { animation-delay: 80ms; }
    .dashboard-stat-card:nth-child(3) { animation-delay: 160ms; }
    .dashboard-stat-card:nth-child(4) { animation-delay: 240ms; }
    .dashboard-stat-card:nth-child(5) { animation-delay: 320ms; }

    .dashboard-stat-card .stat-value {
        opacity: 0;
        animation: dashboard-stat-value-in 0.4s ease-out forwards;
    }
    .dashboard-stat-card:nth-child(1) .stat-value { animation-delay: 200ms; }
    .dashboard-stat-card:nth-child(2) .stat-value { animation-delay: 280ms; }
    .dashboard-stat-card:nth-child(3) .stat-value { animation-delay: 360ms; }
    .dashboard-stat-card:nth-child(4) .stat-value { animation-delay: 440ms; }
    .dashboard-stat-card:nth-child(5) .stat-value { animation-delay: 520ms; }

    .dashboard-charts-row {
        opacity: 0;
        animation: dashboard-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 320ms forwards;
    }

    .dashboard-insight-row {
        opacity: 0;
        animation: dashboard-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-stat-card,
    .dashboard-stat-card .stat-value,
    .dashboard-charts-row,
    .dashboard-insight-row {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ─── Stat card base ──────────────────────────────────── */
.dashboard-stat-card {
    position: relative;
    overflow: hidden;
}

/* Top accent strip */
.dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 12px 12px 0 0;
    background: var(--stat-accent, #E2E8F0);
}
.dashboard-stat-card[data-accent="income"]::before,
.dashboard-stat-card[data-accent="profit"]::before,
.dashboard-stat-card[data-accent="cashflow"]::before {
    --stat-accent: #059669;
}
.dashboard-stat-card[data-accent="expense"]::before {
    --stat-accent: #DC2626;
}
.dashboard-stat-card[data-accent="outstanding"]::before {
    --stat-accent: #CBD5E1;
}

/* Comparison badge */
.stat-comparison {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}
.stat-comparison--up {
    color: #059669;
}
.stat-comparison--down {
    color: #DC2626;
}
.stat-comparison--neutral {
    color: #9CA3AF;
}

/* ─── Card hover (stat, chart, section) ───────────────── */
.beebooks-stat-card,
.beebooks-chart-card,
.beebooks-section-card {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.04), 0 1px 2px -1px rgba(0,0,0,.03);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.beebooks-stat-card:hover {
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.07), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
    border-color: #E2E8F0;
}

/* Clickable stat card (e.g. Outstanding → overdue list) */
a.beebooks-stat-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: block;
}
.beebooks-chart-card:hover,
.beebooks-section-card:hover {
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.07), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
}

/* Top customer bar */
.dashboard-top-customer-bar {
    background: linear-gradient(90deg, #059669, #34D399) !important;
    border-radius: 9999px;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Overdue callout subtle animation */
.dashboard-overdue-callout {
    animation: dashboard-fade-in 0.5s ease-out 100ms both;
}