/* Custom CSS for Questionary Mobile Application */

/* Custom color variables */
:root {
    --primary-color: #C59A00;
    --dark-bg: #121212;
    --text-light: #ffffff;
    --text-muted: #6c757d;
}

/* Custom button styles */
.btn-custom-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-light) !important;
}

.btn-custom-primary:hover {
    background-color: #a37e00 !important;
    border-color: #a37e00 !important;
}

/* Custom card styles */
.card-custom-primary {
    border-color: var(--primary-color);
}

.card-custom-primary .card-header {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Mobile-specific adjustments */
@media (max-width: 767.98px) {
    /* Improved container spacing */
    .container-xxl {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
    }

    /* Better card spacing and appearance */
    .card {
        margin-bottom: 15px;
        border-radius: 12px !important;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
    }

    /* Improved font sizes for mobile */
    .fs-2hx {
        font-size: 2rem !important;
    }

    .h-md-50 {
        height: auto !important;
        min-height: 180px !important;
    }

    /* Fix row spacing */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Improve header appearance */
    #kt_header {
        box-shadow: 0 0.1rem 0.7rem rgba(0, 0, 0, 0.1) !important;
    }

    /* Adjust page title for mobile */
    .page-title h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Adjust breadcrumb for mobile */
    .breadcrumb {
        font-size: 0.8rem !important;
    }

    /* Fix symbol group spacing */
    .symbol-group .symbol {
        margin-right: -8px !important;
    }

    /* Improve card body padding */
    .card-body {
        padding: 1.5rem !important;
    }

    /* Fix progress bar height */
    .h-8px {
        height: 6px !important;
    }

    /* Adjust toolbar */
    .toolbar {
        padding: 0.5rem 0 !important;
    }
}

/* Dark mode specific styles */
[data-bs-theme="dark"] .text-dark {
    color: var(--text-light) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #a1a5b7 !important;
}

[data-bs-theme="dark"] .card {
    background-color: #1e1e2d !important;
}

[data-bs-theme="dark"] .header {
    background-color: #151521 !important;
}

/* PWA specific styles */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Fix for ApexCharts in dark mode */
.apexcharts-tooltip {
    background: var(--dark-bg) !important;
    color: var(--text-light) !important;
    border: 1px solid #3f4254 !important;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #2b2b40;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a37e00;
}

/* Hide hamburger menu */
#kt_aside_toggle {
    display: none !important;
}

/* Center logo in topbar */
.header .container-xxl {
    justify-content: space-between !important;
}

/* Adjust logo size */
.header .logo img {
    height: 32px !important;
}

/* Make Create button more visible */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Fix user menu button */
#kt_header_user_menu_toggle .btn {
    background-color: transparent !important;
    color: var(--primary-color) !important;
}

/* Improve card widget appearance */
.card[style*="background-color: #C59A00"] {
    background-color: var(--primary-color) !important;
    border: none !important;
}

/* Fix avatar circles */
.symbol-circle {
    border: 2px solid #2b2b40 !important;
}