/* =============================================
   DASHBOARD V4 - STANDARDIZED TYPOGRAPHY
   Consistent styling across all page elements
   ============================================= */

/* Base font family for entire dashboard - only apply to content area */
.student-layout-content .v-dashboard-v4,
main .v-dashboard-v4 {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fallback for pages that don't use student-layout-content */
.v-dashboard-v4 {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure header and footer are never affected */
header .v-dashboard-v4,
footer .v-dashboard-v4,
header.v-dashboard-v4,
footer.v-dashboard-v4 {
    font-family: inherit !important;
    -webkit-font-smoothing: inherit !important;
    -moz-osx-font-smoothing: inherit !important;
}

/* ALL HEADINGS - Consistent styling - only in content area */
.student-layout-content .v-dashboard-v4 h1,
.student-layout-content .v-dashboard-v4 h2,
.student-layout-content .v-dashboard-v4 h3,
.student-layout-content .v-dashboard-v4 h4,
.student-layout-content .v-dashboard-v4 h5,
.student-layout-content .v-dashboard-v4 h6,
main .v-dashboard-v4 h1,
main .v-dashboard-v4 h2,
main .v-dashboard-v4 h3,
main .v-dashboard-v4 h4,
main .v-dashboard-v4 h5,
main .v-dashboard-v4 h6 {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
    color: #0f172a;
}

/* Fallback for pages that don't use student-layout-content */
.v-dashboard-v4 h1,
.v-dashboard-v4 h2,
.v-dashboard-v4 h3,
.v-dashboard-v4 h4,
.v-dashboard-v4 h5,
.v-dashboard-v4 h6 {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
    color: #0f172a;
}

/* Ensure header and footer headings are never affected */
header h1,
header h2,
header h3,
header h4,
header h5,
header h6,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    font-weight: unset;
    letter-spacing: unset;
    color: unset;
    font-family: unset;
}

/* Standard text/paragraph styling - only in content area */
.student-layout-content .v-dashboard-v4 p,
main .v-dashboard-v4 p {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Fallback */
.v-dashboard-v4 p {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Tab section animation */
.v-dashboard-v4 .tab-section {
    animation: fadeIn 0.35s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CRITICAL: Hero card with dark bg needs WHITE text */
.v-dashboard-v4 .text-white h3,
.v-dashboard-v4 [class*="from-slate-900"] h3,
.v-dashboard-v4 [class*="to-blue-950"] h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

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

/* Ensure font-black works correctly */
.v-dashboard-v4 .font-black {
    font-weight: 900 !important;
}

/* Standard button text - only in content area */
.student-layout-content .v-dashboard-v4 button,
main .v-dashboard-v4 button {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Fallback */
.v-dashboard-v4 button {
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Ensure header and footer buttons are never affected */
header button,
footer button {
    font-family: inherit !important;
}

/* Card title standardization */
.v-dashboard-v4 .t-card-title,
.v-dashboard-v4 h4 {
    font-weight: 900 !important;
    letter-spacing: -0.01em;
}

/* =============================================
   COVER-CUSTOM STYLES (Trainings.cshtml ile uyumlu)
   ============================================= */
.v-dashboard-v4 .cover.cover-custom {
    height: 140px;
    min-height: 140px;
    width: 100%;
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f8f8f8;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.v-dashboard-v4 .cover.cover-custom img.cover-img-custom {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-position: center center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* =============================================
   MOBILE RESPONSIVE - HOMEPAGE SECTION HEADERS
   Fix horizontal overflow for "TÜMÜNÜ GÖR" buttons
   ============================================= */

/* Prevent horizontal overflow on mobile */
.v-dashboard-v4 {
    overflow-x: hidden;
}

/* Section header flex container - prevent overflow */
.v-dashboard-v4 section>.flex.items-center.gap-4 {
    flex-wrap: wrap;
    gap: 8px 16px;
}

/* Mobile: Section headers with icon + title + divider + button */
@media (max-width: 640px) {

    /* Main container should not overflow */
    .v-dashboard-v4 .max-w-7xl {
        overflow-x: hidden;
    }

    /* Section header row - stack on mobile */
    .v-dashboard-v4 section>.flex.items-center.gap-4 {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Icon and title group should shrink */
    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex.items-center.gap-3.shrink-0 {
        flex-shrink: 1;
        min-width: 0;
    }

    /* Title text should truncate if needed */
    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex.items-center.gap-3 h2 {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Subtitle text smaller on mobile */
    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex.items-center.gap-3 p {
        font-size: 9px;
    }

    /* Hide the divider line on mobile - it causes overflow */
    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex-1.h-px {
        display: none;
    }

    /* "TÜMÜNÜ GÖR" button - should not cause overflow */
    .v-dashboard-v4 section>.flex.items-center.gap-4>a.group {
        flex-shrink: 0;
        margin-left: auto;
        padding: 6px 10px;
        font-size: 8px;
        white-space: nowrap;
    }

    /* Icon inside section header should be smaller */
    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex.items-center.gap-3>.w-9.h-9 {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
    }

    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex.items-center.gap-3>.w-9.h-9 i {
        font-size: 12px;
    }
}

/* Extra small devices */
@media (max-width: 400px) {

    /* Even smaller section headers */
    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex.items-center.gap-3 h2 {
        font-size: 0.85rem;
    }

    .v-dashboard-v4 section>.flex.items-center.gap-4>a.group {
        padding: 5px 8px;
        font-size: 7px;
    }

    .v-dashboard-v4 section>.flex.items-center.gap-4>.flex.items-center.gap-3>.w-9.h-9 {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px;
    }
}

/* Hero section mobile fixes */
@media (max-width: 1024px) {

    /* Hero grid should stack properly */
    .v-dashboard-v4 section.relative.grid {
        gap: 16px;
    }
}

@media (max-width: 640px) {

    /* Hero text adjustments */
    .v-dashboard-v4 section.relative h1 {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }

    /* Hero buttons should wrap nicely */
    .v-dashboard-v4 section.relative .flex.flex-wrap.gap-2 {
        gap: 8px;
    }

    .v-dashboard-v4 section.relative .flex.flex-wrap.gap-2 a {
        font-size: 9px;
        padding: 10px 14px;
    }
}

/* =============================================
   MOBILE RESPONSIVE - FILTER BARS
   Fix filter bar layout on Trainings and Certificates pages
   ============================================= */

/* Filter bar container - stack on mobile */
@media (max-width: 768px) {

    /* Main filter bar container - stack vertically */
    .v-dashboard-v4 .flex.items-center.justify-between.gap-4.mb-3.pb-3.border-b {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Left side filters - wrap */
    .v-dashboard-v4 .flex.items-center.justify-between.gap-4>.flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    /* Filter toggle buttons - smaller on mobile */
    .v-dashboard-v4 .filter-toggle {
        padding: 6px 10px;
        font-size: 10px;
    }

    .v-dashboard-v4 .filter-toggle i:first-child {
        font-size: 9px;
    }

    .v-dashboard-v4 .filter-toggle .text-slate-400 {
        font-size: 9px;
    }

    .v-dashboard-v4 .filter-toggle .filter-value {
        font-size: 10px;
    }

    /* Right side - search and result count */
    .v-dashboard-v4 .flex.items-center.justify-between.gap-4>.flex.items-center.gap-3 {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Search input - full width on mobile */
    .v-dashboard-v4 .flex.items-center.gap-3>.relative.w-64 {
        width: 100%;
        flex: 1 1 100%;
    }

    .v-dashboard-v4 .flex.items-center.gap-3>.relative.w-64 input {
        width: 100%;
    }

    /* Hide divider on mobile */
    .v-dashboard-v4 .flex.items-center.gap-3>.h-6.w-px {
        display: none;
    }

    /* Sort dropdown and result count - single row */
    .v-dashboard-v4 .flex.items-center.gap-3>.relative.group,
    .v-dashboard-v4 .flex.items-center.gap-3>#result-count {
        flex-shrink: 0;
    }

    /* Filter dropdowns - full width and positioned correctly */
    .v-dashboard-v4 .filter-dropdown {
        width: 100vw;
        max-width: 280px;
        left: 0;
        right: auto;
    }

    /* Make dropdowns appear above on mobile if needed */
    .v-dashboard-v4 .relative.group>div[class*="absolute top-full"] {
        max-width: 200px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {

    /* Even smaller filter buttons */
    .v-dashboard-v4 .filter-toggle {
        padding: 5px 8px;
        font-size: 9px;
        gap: 4px;
    }

    /* Hide "Yazılım:", "Tür:", "Durum:" labels on very small screens */
    .v-dashboard-v4 .filter-toggle>.text-slate-400 {
        display: none;
    }

    /* Search input placeholder smaller */
    .v-dashboard-v4 input[type="text"]::placeholder {
        font-size: 11px;
    }

    /* Filter dropdown content smaller */
    .v-dashboard-v4 .filter-option {
        padding: 6px 10px;
        font-size: 10px;
    }

    /* Result count smaller */
    #result-count {
        font-size: 9px !important;
    }

    /* Clear filters button smaller */
    #clear-filters {
        padding: 4px 8px;
        font-size: 9px;
    }
}

/* =============================================
   MOBILE RESPONSIVE - TRAINING DETAIL PAGE
   Fix detail cards and software ecosystem
   ============================================= */

@media (max-width: 640px) {

    /* Training detail info cards - make them smaller on mobile */
    .v-dashboard-v4 .grid.grid-cols-2>div.bg-white.rounded-lg.border {
        padding: 10px;
    }

    .v-dashboard-v4 .grid.grid-cols-2>div .text-\[10px\] {
        font-size: 8px;
        letter-spacing: 0.03em;
    }

    .v-dashboard-v4 .grid.grid-cols-2>div .w-7.h-7 {
        width: 24px;
        height: 24px;
    }

    .v-dashboard-v4 .grid.grid-cols-2>div .text-xs.font-black {
        font-size: 10px;
    }

    /* Software ecosystem cards - smaller on mobile */
    .v-dashboard-v4 .grid.grid-cols-3>a.group {
        padding: 8px;
    }

    .v-dashboard-v4 .grid.grid-cols-3>a.group .w-10.h-10 {
        width: 32px;
        height: 32px;
    }

    .v-dashboard-v4 .grid.grid-cols-3>a.group span {
        font-size: 8px;
    }

    /* Training detail left column - adjust for mobile */
    .v-dashboard-v4 .lg\:col-span-4.space-y-3>div {
        padding: 10px;
    }
}