@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Sora', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Brand Colors */
    --color-orange: #FF6B00;
    --color-orange-50: #FFF7ED;
    --color-orange-100: #FFEDD5;
    --color-orange-200: #FED7AA;
    --color-orange-300: #FDBA74;
    --color-orange-400: #FB923C;
    --color-orange-500: #FF6B00;
    --color-orange-600: #EA5800;
    --color-orange-700: #C2410C;
    --color-orange-800: #9A3412;
    --color-orange-900: #7C2D12;

    --color-yellow: #FFD233;
    --color-yellow-50: #FFFBEB;
    --color-yellow-100: #FEF3C7;
    --color-yellow-200: #FDE68A;
    --color-yellow-300: #FFD233;
    --color-yellow-400: #FBBF24;
    --color-yellow-500: #F59E0B;

    --color-dark: #111318;
    --color-dark-50: #1A1D24;
    --color-dark-100: #23262F;
    --color-dark-200: #2C303A;
    --color-dark-300: #363A45;

    --color-bg: #F7F8FA;
    --color-bg-card: #FFFFFF;
    --color-border: #E5E7EB;
    --color-muted: #6B7280;

    --color-success: #22C55E;
    --color-success-light: #DCFCE7;
    --color-danger: #EF4444;
    --color-danger-light: #FEE2E2;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;
    --color-info: #3B82F6;
    --color-info-light: #DBEAFE;
}

/* Base Layer */
@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-family: 'Sora', sans-serif;
        color: var(--color-dark);
        background-color: var(--color-bg);
    }
}

/* Component Layer */
@layer components {
    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.625rem 1.5rem;
        font-weight: 600;
        font-size: 0.875rem;
        border-radius: 9999px;
        transition: all 0.2s ease;
        cursor: pointer;
        text-decoration: none;
        border: 2px solid transparent;
    }

    .btn:focus-visible {
        outline: 2px solid var(--color-orange);
        outline-offset: 2px;
    }

    .btn-primary {
        background-color: var(--color-orange);
        color: white;
    }

    .btn-primary:hover {
        background-color: var(--color-orange-600);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
    }

    .btn-secondary {
        background-color: white;
        color: var(--color-dark);
        border-color: var(--color-border);
    }

    .btn-secondary:hover {
        border-color: var(--color-orange);
        color: var(--color-orange);
        transform: translateY(-1px);
    }

    .btn-outline {
        background-color: transparent;
        color: white;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .btn-outline:hover {
        border-color: white;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .btn-danger {
        background-color: var(--color-danger);
        color: white;
    }

    .btn-danger:hover {
        background-color: #DC2626;
        transform: translateY(-1px);
    }

    .btn-success {
        background-color: var(--color-success);
        color: white;
    }

    .btn-success:hover {
        background-color: #16A34A;
        transform: translateY(-1px);
    }

    .btn-sm {
        padding: 0.375rem 1rem;
        font-size: 0.8125rem;
    }

    .btn-lg {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    .btn-icon {
        padding: 0.5rem;
        border-radius: 0.5rem;
    }

    /* Cards */
    .card {
        background-color: white;
        border-radius: 0.75rem;
        border: 1px solid var(--color-border);
        overflow: hidden;
    }

    .card-hover {
        transition: all 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    /* Badges / Pills */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 9999px;
    }

    .badge-orange { background-color: var(--color-orange-100); color: var(--color-orange-700); }
    .badge-green { background-color: var(--color-success-light); color: #15803D; }
    .badge-red { background-color: var(--color-danger-light); color: #B91C1C; }
    .badge-yellow { background-color: var(--color-warning-light); color: #92400E; }
    .badge-blue { background-color: var(--color-info-light); color: #1D4ED8; }
    .badge-gray { background-color: #F3F4F6; color: var(--color-muted); }
    .badge-dark { background-color: var(--color-dark); color: white; }

    /* Form Inputs */
    .form-input {
        display: block;
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
        font-family: 'Sora', sans-serif;
        border: 1px solid var(--color-border);
        border-radius: 0.5rem;
        background-color: white;
        color: var(--color-dark);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--color-orange);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
    }

    .form-input::placeholder {
        color: #9CA3AF;
    }

    .form-label {
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--color-dark);
        margin-bottom: 0.375rem;
    }

    .form-help {
        font-size: 0.75rem;
        color: var(--color-muted);
        margin-top: 0.25rem;
    }

    .form-error {
        font-size: 0.75rem;
        color: var(--color-danger);
        margin-top: 0.25rem;
    }

    /* Phone Input */
    .phone-prefix {
        display: flex;
        align-items: center;
        padding: 0.625rem 0.875rem;
        background-color: #F9FAFB;
        border: 1px solid var(--color-border);
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-muted);
        white-space: nowrap;
    }

    .phone-input {
        border-radius: 0 0.5rem 0.5rem 0;
        border-left: 0;
    }

    /* Tables */
    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

    .data-table thead th {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-muted);
        background-color: #F9FAFB;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
    }

    .data-table tbody td {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--color-border);
        color: var(--color-dark);
    }

    .data-table tbody tr {
        transition: background-color 0.15s;
    }

    .data-table tbody tr:hover {
        background-color: #F9FAFB;
    }

    /* Stat Cards */
    .stat-card {
        padding: 1.5rem;
        background: white;
        border-radius: 0.75rem;
        border: 1px solid var(--color-border);
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--color-dark);
        line-height: 1;
    }

    .stat-label {
        font-size: 0.8125rem;
        color: var(--color-muted);
        font-weight: 500;
        margin-top: 0.25rem;
    }

    /* Pipeline Stepper */
    .pipeline-stepper {
        display: flex;
        align-items: flex-start;
        gap: 0;
    }

    .pipeline-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
    }

    .pipeline-dot {
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        position: relative;
        z-index: 1;
    }

    .pipeline-dot-completed {
        background-color: var(--color-orange);
        color: white;
    }

    .pipeline-dot-current {
        background-color: white;
        border: 3px solid var(--color-orange);
        color: var(--color-orange);
        animation: pulse-dot 2s infinite;
    }

    .pipeline-dot-future {
        background-color: #E5E7EB;
        color: var(--color-muted);
    }

    .pipeline-dot-hired {
        background-color: var(--color-success);
        color: white;
    }

    .pipeline-dot-rejected {
        background-color: var(--color-danger);
        color: white;
    }

    .pipeline-line {
        position: absolute;
        top: 1rem;
        left: calc(50% + 1rem);
        right: calc(-50% + 1rem);
        height: 2px;
        background-color: #E5E7EB;
    }

    .pipeline-line-completed {
        background-color: var(--color-orange);
    }

    .pipeline-step-label {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        text-align: center;
        color: var(--color-muted);
    }

    /* Kanban */
    .kanban-column {
        min-width: 280px;
        max-width: 320px;
        background: #F3F4F6;
        border-radius: 0.75rem;
        flex-shrink: 0;
    }

    .kanban-card {
        background: white;
        border-radius: 0.5rem;
        padding: 0.875rem;
        margin: 0.5rem;
        border: 1px solid var(--color-border);
        cursor: grab;
        transition: all 0.2s;
    }

    .kanban-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .kanban-card.dragging {
        opacity: 0.8;
        transform: rotate(2deg);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    /* Chat Bubbles */
    .chat-bubble {
        max-width: 80%;
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .chat-outbound {
        background-color: var(--color-orange-100);
        color: var(--color-orange-800);
        border-bottom-right-radius: 0.25rem;
        margin-left: auto;
    }

    .chat-inbound {
        background-color: #F3F4F6;
        color: var(--color-dark);
        border-bottom-left-radius: 0.25rem;
    }

    /* Score Stars */
    .star-filled { color: var(--color-orange); }
    .star-empty { color: #D1D5DB; }

    /* App Number */
    .app-number {
        font-family: 'Courier New', monospace;
        font-weight: 700;
        padding: 0.25rem 0.75rem;
        background-color: var(--color-orange-100);
        color: var(--color-orange-700);
        border-radius: 9999px;
        font-size: 0.8125rem;
    }

    /* Sidebar */
    .sidebar-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #9CA3AF;
        transition: all 0.2s;
    }

    .sidebar-link:hover {
        color: white;
        background-color: rgba(255, 255, 255, 0.05);
    }

    .sidebar-link-active {
        color: white;
        background-color: var(--color-orange);
    }

    .sidebar-link-active:hover {
        background-color: var(--color-orange-600);
    }

    /* Dropdown */
    .dropdown-menu {
        position: absolute;
        right: 0;
        top: 100%;
        margin-top: 0.5rem;
        min-width: 12rem;
        background: white;
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        z-index: 50;
        overflow: hidden;
    }

    .dropdown-item {
        display: block;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        color: var(--color-dark);
        transition: background-color 0.15s;
    }

    .dropdown-item:hover {
        background-color: #F9FAFB;
    }

    /* Modal */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        backdrop-filter: blur(4px);
    }

    .modal-content {
        background: white;
        border-radius: 1rem;
        width: 100%;
        max-width: 32rem;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    /* Tab navigation */
    .tab-nav {
        display: flex;
        gap: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .tab-button {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-muted);
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
        cursor: pointer;
        background: none;
        border-top: none;
        border-left: none;
        border-right: none;
    }

    .tab-button:hover {
        color: var(--color-dark);
    }

    .tab-button-active {
        color: var(--color-orange);
        border-bottom-color: var(--color-orange);
    }
}

/* Animations */
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(255, 107, 0, 0); }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes check-draw {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in { animation: fade-in 0.4s ease forwards; }
.animate-slide-in { animation: slide-in-right 0.3s ease forwards; }
.animate-slide-up { animation: slide-up 0.5s ease forwards; }
.animate-scale-in { animation: scale-in 0.3s ease forwards; }

/* 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; }

/* Rich text content */
.prose-content h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--color-dark); }
.prose-content h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--color-dark); }
.prose-content h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-dark); }
.prose-content p { margin-bottom: 0.75rem; line-height: 1.7; color: #374151; }
.prose-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.prose-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.prose-content li { margin-bottom: 0.25rem; line-height: 1.6; color: #374151; }
.prose-content strong { font-weight: 700; }
