/* Dashboard Responsive CSS - Job Platform */

/* ==== Mobile First Approach ==== */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    /* Container padding for mobile */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Dashboard header adjustments */
    .dashboard-header h4 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .dashboard-header i {
        font-size: 1rem;
    }

    /* Card improvements for mobile */
    .custom-card .card-body {
        padding: 0.75rem !important;
    }

    /* Avatar size adjustments */
    .avatar-sm {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    /* Typography adjustments */
    .fs-mobile-12 {
        font-size: 0.75rem !important;
    }

    .fs-mobile-14 {
        font-size: 0.875rem !important;
    }

    .fs-mobile-16 {
        font-size: 1rem !important;
    }

    /* Card title adjustments */
    .card-title {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    /* Hide unnecessary elements on very small screens */
    .mobile-hide {
        display: none !important;
    }

    /* Compact table for mobile */
    .table-responsive {
        font-size: 0.8rem;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }

    /* Financial cards stack better */
    .financial-card-mobile {
        margin-bottom: 0.75rem;
    }

    /* Timeline adjustments */
    .crm-recent-activity .crm-timeline-content {
        font-size: 0.8rem;
    }

    .crm-recent-activity .avatar {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Dropdown adjustments */
    .dropdown-toggle {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    /* Button adjustments */
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .btn-xs {
        padding: 0.125rem 0.25rem;
        font-size: 0.65rem;
        line-height: 1.2;
    }

    /* Improved button spacing and sizing */
    .btn-outline-primary, 
    .btn-outline-secondary, 
    .btn-primary, 
    .btn-success, 
    .btn-info, 
    .btn-warning {
        min-width: auto;
        white-space: nowrap;
    }

    /* Statistics cards overflow protection */
    .stats-card-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Flex adjustments for mobile */
    .mobile-flex-column {
        flex-direction: column !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    /* Row spacing adjustments */
    .row.mb-4 {
        margin-bottom: 1rem !important;
    }

    /* Card header adjustments */
    .card-header {
        padding: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .card-header .card-title {
        margin-bottom: 0;
        flex-grow: 1;
        min-width: 0;
    }

    .card-header .btn,
    .card-header .dropdown {
        flex-shrink: 0;
    }

    /* Improved flex layout for card headers */
    .card-header.d-flex {
        align-items: flex-start;
    }

    /* Better button alignment */
    .card-header .btn-sm {
        white-space: nowrap;
        min-width: auto;
    }

    /* Badge improvements for mobile */
    .badge {
        font-size: 0.65rem;
        padding: 0.25em 0.4em;
    }

    /* Avatar improvements */
    .avatar.avatar-xs {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6rem;
    }

    /* Table mobile cards */
    .table-mobile-card {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }

    /* Responsive text truncation */
    .text-mobile-truncate {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Flex improvements for mobile */
    .d-flex.align-items-start {
        gap: 0.5rem;
    }

    /* Card responsiveness */
    .card-responsive {
        margin-bottom: 1rem;
    }

    /* Dropdown menu improvements */
    .dropdown-menu {
        font-size: 0.8rem;
    }

    .dropdown-item {
        padding: 0.375rem 0.75rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .custom-card .card-body {
        padding: 1rem !important;
    }

    /* Better spacing for small tablets */
    .avatar-sm {
        width: 2.25rem;
        height: 2.25rem;
    }

    .card-title {
        font-size: 1rem;
    }

    /* Table adjustments for small tablets */
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
    }

    /* Button improvements */
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Ensure proper spacing on tablets */
    .custom-card .card-body {
        padding: 1.25rem !important;
    }

    /* Revenue cards side by side on tablets */
    .financial-cards-tablet .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Table responsive improvements */
    .table-responsive {
        font-size: 0.9rem;
    }

    /* Better button sizing for tablets */
    .btn-sm {
        padding: 0.375rem 0.875rem;
        font-size: 0.875rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Full desktop experience */
    .custom-card .card-body {
        padding: 1.5rem !important;
    }

    /* Restore full functionality on desktop */
    .desktop-show {
        display: block !important;
    }

    .desktop-hide {
        display: none !important;
    }

    /* Desktop button styling */
    .btn-sm {
        padding: 0.375rem 1rem;
        font-size: 0.875rem;
    }
}

/* ==== Utility Classes for Responsive Design ==== */

/* Text truncation for long content */
.text-truncate-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

@media (min-width: 576px) {
    .text-truncate-mobile {
        max-width: 200px;
    }
}

@media (min-width: 768px) {
    .text-truncate-mobile {
        max-width: none;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }
}

/* Responsive spacing */
.p-responsive {
    padding: 0.5rem;
}

@media (min-width: 576px) {
    .p-responsive {
        padding: 0.75rem;
    }
}

@media (min-width: 768px) {
    .p-responsive {
        padding: 1rem;
    }
}

@media (min-width: 992px) {
    .p-responsive {
        padding: 1.25rem;
    }
}

/* Responsive margins */
.mb-responsive {
    margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
    .mb-responsive {
        margin-bottom: 0.75rem;
    }
}

@media (min-width: 768px) {
    .mb-responsive {
        margin-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    .mb-responsive {
        margin-bottom: 1.5rem;
    }
}

/* Responsive font sizes */
.fs-responsive-sm {
    font-size: 0.75rem;
}

@media (min-width: 576px) {
    .fs-responsive-sm {
        font-size: 0.875rem;
    }
}

@media (min-width: 768px) {
    .fs-responsive-sm {
        font-size: 1rem;
    }
}

.fs-responsive-lg {
    font-size: 1rem;
}

@media (min-width: 576px) {
    .fs-responsive-lg {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .fs-responsive-lg {
        font-size: 1.25rem;
    }
}

/* Avatar responsive sizing */
.avatar-responsive {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.7rem;
}

@media (min-width: 576px) {
    .avatar-responsive {
        width: 2rem;
        height: 2rem;
        font-size: 0.8rem;
    }
}

@media (min-width: 768px) {
    .avatar-responsive {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* Card responsive improvements */
.card-responsive {
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .card-responsive {
        margin-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    .card-responsive {
        margin-bottom: 1.5rem;
    }
}

/* Responsive button utilities */
.btn-responsive {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

@media (min-width: 576px) {
    .btn-responsive {
        font-size: 0.8rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (min-width: 768px) {
    .btn-responsive {
        font-size: 0.875rem;
        padding: 0.375rem 1rem;
    }
}

/* Responsive gap utilities */
.gap-responsive {
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .gap-responsive {
        gap: 0.75rem;
    }
}

@media (min-width: 768px) {
    .gap-responsive {
        gap: 1rem;
    }
}

/* Flex utilities for better alignment */
.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.min-w-0 {
    min-width: 0 !important;
}

/* Button alignment improvements */
@media (max-width: 575.98px) {
    .card-header.d-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .card-header .card-title {
        order: 1;
        width: 100%;
    }
    
    .card-header .btn,
    .card-header .dropdown {
        order: 2;
        align-self: flex-end;
    }
}