/* ==================== FLEX HELPERS ==================== */
.j-lich-card .flex, .j-lich-scroll .flex, .j-lich-accordion .flex { display: flex; }
.j-lich-card .flex-wrap, .j-lich-scroll .flex-wrap, .j-lich-accordion .flex-wrap { flex-wrap: wrap; }

.j-lich-card .items-center, .j-lich-scroll .items-center, .j-lich-accordion .items-center { align-items: center; }
.j-lich-card .justify-center, .j-lich-scroll .justify-center, .j-lich-accordion .justify-center { justify-content: center; }
.j-lich-card .justify-start, .j-lich-scroll .justify-start, .j-lich-accordion .justify-start { justify-content: flex-start; }
.j-lich-card .justify-end, .j-lich-scroll .justify-end, .j-lich-accordion .justify-end { justify-content: flex-end; }
.j-lich-card .justify-between, .j-lich-scroll .justify-between, .j-lich-accordion .justify-between { justify-content: space-between; }
.j-lich-card .letter-space, .j-lich-scroll .letter-space, .j-lich-accordion .letter-space{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%;}

/* ==================== GRID SYSTEM ==================== */
.j-lich-card .grid-cols-12, 
.j-lich-scroll .grid-cols-12, 
.j-lich-accordion .grid-cols-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: center;
}

.j-lich-card .col-span-2, .j-lich-scroll .col-span-2, .j-lich-accordion .col-span-2 { grid-column: span 2; }
.j-lich-card .col-span-3, .j-lich-scroll .col-span-3, .j-lich-accordion .col-span-3 { grid-column: span 3; }
.j-lich-card .col-span-4, .j-lich-scroll .col-span-4, .j-lich-accordion .col-span-4 { grid-column: span 4; }
.j-lich-card .col-span-5, .j-lich-scroll .col-span-5, .j-lich-accordion .col-span-5 { grid-column: span 5; }

/* ==================== GAP, MARGIN, PADDING ==================== */
.j-lich-card .gap-2, .j-lich-scroll .gap-2, .j-lich-accordion .gap-2 { gap: 8px; }
.j-lich-card .gap-3, .j-lich-scroll .gap-3, .j-lich-accordion .gap-3 { gap: 12px; }
.j-lich-card .gap-4, .j-lich-scroll .gap-4, .j-lich-accordion .gap-4 { gap: 16px; }
.j-lich-card .gap-6, .j-lich-scroll .gap-6, .j-lich-accordion .gap-6 { gap: 20px; }

.j-lich-card .mb-5, .j-lich-scroll .mb-5, .j-lich-accordion .mb-5 { margin-bottom: 20px; }
.j-lich-card .mb-6, .j-lich-scroll .mb-6, .j-lich-accordion .mb-6 { margin-bottom: 24px; }
.j-lich-card .mb-8, .j-lich-scroll .mb-8, .j-lich-accordion .mb-8 { margin-bottom: 32px; }

.j-lich-card .py-3\.5, .j-lich-scroll .py-3\.5, .j-lich-accordion .py-3\.5{padding-top: 0.875rem; padding-bottom: 0.875rem;}
.j-lich-card .p-4, .j-lich-scroll .p-4, .j-lich-accordion .p-4 { padding: 16px; }
.j-lich-card .p-5, .j-lich-scroll .p-5, .j-lich-accordion .p-5 { padding: 20px; }
.j-lich-card .px-5, .j-lich-scroll .px-5, .j-lich-accordion .px-5 { padding-left: 20px; padding-right: 20px; }
.j-lich-card .px-6, .j-lich-scroll .px-6, .j-lich-accordion .px-6 { padding-left: 24px; padding-right: 24px; }
.j-lich-card .py-5, .j-lich-scroll .py-5, .j-lich-accordion .py-5 { padding-top: 20px; padding-bottom: 20px; }

/* Width & Height */
.j-lich-card .w-full, .j-lich-scroll .w-full, .j-lich-accordion .w-full { width: 100%; }
.j-lich-card .w-6, .j-lich-scroll .w-6, .j-lich-accordion .w-6 { width: 24px; }
.j-lich-card .w-7, .j-lich-scroll .w-7, .j-lich-accordion .w-7 { width: 28px; }
.j-lich-card .w-8, .j-lich-scroll .w-8, .j-lich-accordion .w-8 { width: 32px; }
.j-lich-card .w-14, .j-lich-scroll .w-14, .j-lich-accordion .w-14 { width: 56px; }

.j-lich-card .h-6, .j-lich-scroll .h-6, .j-lich-accordion .h-6 { height: 24px; }
.j-lich-card .h-7, .j-lich-scroll .h-7, .j-lich-accordion .h-7 { height: 28px; }
.j-lich-card .h-8, .j-lich-scroll .h-8, .j-lich-accordion .h-8 { height: 32px; }
.j-lich-card .h-14, .j-lich-scroll .h-14, .j-lich-accordion .h-14 { height: 56px; }

.j-lich-card .max-w-380px, 
.j-lich-scroll .max-w-380px, 
.j-lich-accordion .max-w-380px { max-width: 380px; }

/* Typography */
.j-lich-card .text-xs, .j-lich-scroll .text-xs, .j-lich-accordion .text-xs { font-size: 12px; line-height: 1.5; }
.j-lich-card .text-sm, .j-lich-scroll .text-sm, .j-lich-accordion .text-sm { font-size: 13px; line-height: 1.5; }
.j-lich-card .text-lg, .j-lich-scroll .text-lg, .j-lich-accordion .text-lg { font-size: 18px; line-height: 1.5; }
.j-lich-card .text-xl, .j-lich-scroll .text-xl, .j-lich-accordion .text-xl { font-size: 20px; line-height: 1.5; }
.j-lich-card .text-2xl, .j-lich-scroll .text-2xl, .j-lich-accordion .text-2xl { font-size: 24px; line-height: 1.25; }
.j-lich-card .text-3xl, .j-lich-scroll .text-3xl, .j-lich-accordion .text-3xl { font-size: 30px; line-height: 1.2; }

.j-lich-card .font-medium, .j-lich-scroll .font-medium, .j-lich-accordion .font-medium { font-weight: 500; }
.j-lich-card .font-semibold, .j-lich-scroll .font-semibold, .j-lich-accordion .font-semibold { font-weight: 600; }
.j-lich-card .font-bold, .j-lich-scroll .font-bold, .j-lich-accordion .font-bold { font-weight: 700; }

/* ====================== LIGHT & DARK MODE ====================== */
.j-lich-card:not([data-mode="dark"]),
.j-lich-scroll:not([data-mode="dark"]),
.j-lich-accordion:not([data-mode="dark"]) {
    --card: #ffffff;
    --text: #1e2937;
    --text-light: #64748b;
    --border: #e2e8f0;
    color:#000;
}

.j-lich-card[data-mode="dark"],
.j-lich-scroll[data-mode="dark"],
.j-lich-accordion[data-mode="dark"] {
    --card: #1b1b1b4f;
    --text: #f8fafc;
    --text-light: #cbd5e1;
    --border: #272829;
    color: #FFF;
}

/* ====================== MATCH CARD ====================== */
.j-lich-card .match-card {
    border-radius: 15px;
    padding: 15px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.j-lich-card[data-mode="dark"] .match-card,
.j-lich-scroll[data-mode="dark"] .match-card,
.j-lich-accordion[data-mode="dark"] .match-card {
    background: linear-gradient(to bottom right, #0b100b, #434343);
}

.j-lich-card .match-card .team-name,
.j-lich-scroll .match-card .team-name,
.j-lich-accordion .match-card .team-name { color: var(--text); }

.j-lich-card .match-card .score,
.j-lich-scroll .match-card .score,
.j-lich-accordion .match-card .score { color: var(--text); }

.j-lich-card .match-card .text-slate-400,
.j-lich-scroll .match-card .text-slate-400,
.j-lich-accordion .match-card .text-slate-400 { color: var(--text-light); }

/* Date Tabs */
.j-lich-card .date-tab,
.j-lich-scroll .date-tab,
.j-lich-accordion .date-tab {
    padding: 12px 24px;
    border-radius: 15px;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 78px;
}

.j-lich-card .date-tab.active,
.j-lich-scroll .date-tab.active,
.j-lich-accordion .date-tab.active {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

/* Accordion & Scroll */
.j-lich-accordion .accordion-header {
    padding: 20px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}

.j-lich-scroll .matches-scroll, .j-lich-card .matches-scroll {
    max-height: 680px;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 15px;
    border-radius: 15px;
}
.j-lich-container select{
    max-width: 380px;
}
/* Gradient */
.j-lich-card .bg-gradient-to-r,
.j-lich-scroll .bg-gradient-to-r,
.j-lich-accordion .bg-gradient-to-r {
    background: linear-gradient(to right, #1e40af, #3b82f6);
    color: white;
}

/* Responsive */
@media (max-width: 640px) {
    .j-lich-card .match-card,
    .j-lich-scroll .match-card,
    .j-lich-accordion .match-card {
        max-width: 100% !important;
        padding-left:10px;
        padding-right: 10px;
    }
    .j-lich-card .sm-justify-start, .j-lich-scroll .sm-justify-start, .j-lich-accordion .sm-justify-start { justify-content: flex-start; }
}

/* ====================== SHADOW CLASSES (TÁCH RIÊNG) ====================== */

/* Shadow mặc định Tailwind */
.j-lich-card .shadow,
.j-lich-scroll .shadow,
.j-lich-accordion .shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Shadow-md */
.j-lich-card .shadow-md,
.j-lich-scroll .shadow-md,
.j-lich-accordion .shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Shadow-lg (thường dùng cho card) */
.j-lich-card .shadow-lg,
.j-lich-scroll .shadow-lg,
.j-lich-accordion .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Shadow-xl */
.j-lich-card .shadow-xl,
.j-lich-scroll .shadow-xl,
.j-lich-accordion .shadow-xl {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Shadow-2xl */
.j-lich-card .shadow-2xl,
.j-lich-scroll .shadow-2xl,
.j-lich-accordion .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Shadow-inner */
.j-lich-card .shadow-inner,
.j-lich-scroll .shadow-inner,
.j-lich-accordion .shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
}

/* Dark mode shadow adjustment */
.j-lich-card[data-mode="dark"] .shadow,
.j-lich-scroll[data-mode="dark"] .shadow,
.j-lich-accordion[data-mode="dark"] .shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
}

.j-lich-card[data-mode="dark"] .shadow-lg,
.j-lich-scroll[data-mode="dark"] .shadow-lg,
.j-lich-accordion[data-mode="dark"] .shadow-lg {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* Spinner */
.j-lich-card .fa-spinner,
.j-lich-scroll .fa-spinner,
.j-lich-accordion .fa-spinner {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Date Tabs */
.j-lich-card .date-tab,
.j-lich-scroll .date-tab,
.j-lich-accordion .date-tab {
    padding: 10px 12px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 68px;
    flex-shrink: 0; /* Ngăn co lại */
}

.j-lich-card .date-tab .text-xs,
.j-lich-scroll .date-tab .text-xs,
.j-lich-accordion .date-tab .text-xs {
    font-size: 11px;
    line-height: 1.2;
}

/* Active state */
.j-lich-card .date-tab.active,
.j-lich-scroll .date-tab.active,
.j-lich-accordion .date-tab.active {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

/* ==================== RESPONSIVE - MOBILE DATE TABS ==================== */
@media (max-width: 640px) {
    
    /* Target tất cả date-tabs dù có unique ID */
    .j-lich-card [id^="date-tabs-"],
    .j-lich-scroll [id^="date-tabs-"],
    .j-lich-accordion [id^="date-tabs-"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 12px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    
    .j-lich-scroll .matches-scroll{font-size: 12px;}

    /* Date tab trên mobile */
    .j-lich-card .date-tab,
    .j-lich-scroll .date-tab,
    .j-lich-accordion .date-tab {
        min-width: 58px !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        flex-shrink: 0;
    }

    .j-lich-card .date-tab .text-xs,
    .j-lich-scroll .date-tab .text-xs,
    .j-lich-accordion .date-tab .text-xs {
        font-size: 10.5px !important;
    }

    /* Scrollbar đẹp */
    .j-lich-card [id^="date-tabs-"]::-webkit-scrollbar,
    .j-lich-scroll [id^="date-tabs-"]::-webkit-scrollbar,
    .j-lich-accordion [id^="date-tabs-"]::-webkit-scrollbar {
        height: 5px;
    }

    .j-lich-card [id^="date-tabs-"]::-webkit-scrollbar-thumb,
    .j-lich-scroll [id^="date-tabs-"]::-webkit-scrollbar-thumb,
    .j-lich-accordion [id^="date-tabs-"]::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 10px;
    }
}