/* ===== Adaptive / Responsive Styles ===== */

/* --- Base: fluid root font size --- */
html {
    font-size: 16px;
}

/* --- Page header: title + buttons --- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.page-header .page-title {
    font-size: 1.5rem;
    margin: 0;
}

/* --- Card spacing on mobile --- */
.card {
    margin-bottom: 1rem;
}

.card-header h3,
.card-header h5 {
    font-size: 1.1rem;
    margin: 0;
}

/* --- Tables: tighter on mobile --- */
.table > :not(caption) > * > * {
    padding: 0.5rem;
}

.table th {
    white-space: nowrap;
}

/* ===================================================
   Breakpoint: tablets and below (< 768px)
   =================================================== */
@media (max-width: 767.98px) {
    html {
        font-size: 15px;
    }

    /* Container: less horizontal padding */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Navbar */
    .navbar .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar-brand {
        font-size: 1rem !important;
        max-width: 70%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Page header stacks */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .page-header .page-title {
        font-size: 1.25rem;
    }

    .page-header .btn-group,
    .page-header .btn {
        width: 100%;
    }

    .page-header .btn-group .btn {
        flex: 1;
    }

    /* Card headers compact */
    .card-header {
        padding: 0.5rem 0.75rem;
    }

    .card-header .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }

    .card-header .input-group {
        width: 100% !important;
    }

    .card-body {
        padding: 0.5rem;
    }

    /* Table cells: smaller text */
    .table {
        font-size: 0.85rem;
    }

    .table > :not(caption) > * > * {
        padding: 0.35rem 0.4rem;
    }

    /* Badges inside tables */
    .table .badge {
        font-size: 0.7rem;
        padding: 0.2em 0.45em;
    }

    /* Action buttons column: compact */
    .btn-group-sm > .btn,
    .btn-group .btn-sm,
    .table .btn-sm {
        padding: 0.2rem 0.35rem;
        font-size: 0.75rem;
    }

    /* Dropdown menus */
    .dropdown-menu {
        font-size: 0.85rem;
    }

    /* Filter card forms */
    .card-body .row.g-3 {
        gap: 0.5rem !important;
    }

    .card-body .row.g-3 > .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .card-body .row.g-3 label {
        font-size: 0.85rem;
    }

    /* Search input in thead */
    thead .form-control-sm {
        font-size: 0.8rem;
    }

    /* Stat cards */
    .card.bg-danger .card-body h3,
    .card.bg-success .card-body h3,
    .card.bg-primary .card-body h3,
    .card.bg-warning .card-body h3,
    .card.bg-info .card-body h3 {
        font-size: 1.1rem;
    }

    .card.bg-danger .card-body .fa-2x,
    .card.bg-success .card-body .fa-2x,
    .card.bg-primary .card-body .fa-2x,
    .card.bg-warning .card-body .fa-2x,
    .card.bg-info .card-body .fa-2x {
        font-size: 1.3rem;
    }

    /* Footer */
    footer {
        font-size: 0.8rem;
        padding: 0.75rem 0 !important;
    }

    footer p {
        font-size: 0.8rem;
    }

    /* Alert banners */
    .alert {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    /* Modal dialogs */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 0.75rem;
    }

    /* Form sections (add/edit pages) */
    .form-section {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Collapsed nav: bigger tap targets */
    .navbar-nav .nav-link {
        padding: 0.6rem 0.5rem;
        font-size: 0.95rem;
    }

    /* Text amount columns */
    .text-end strong.fs-5 {
        font-size: 0.95rem !important;
    }

    /* Workers icon smaller on mobile */
    .fa-2x {
        font-size: 1.3em;
    }

    /* Scroll loader */
    #scroll-loader {
        font-size: 0.85rem;
    }

    /* Select2 */
    .select2-container {
        width: 100% !important;
    }

    /* Form field-group (add/edit pages) */
    .field-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    /* Custom modals in add/edit */
    .modal-content {
        width: 95% !important;
        margin: 3% auto !important;
        padding: 15px !important;
    }

    /* Cookie consent */
    #cookie-consent {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }

    /* ===== Login / Register / Profile pages ===== */
    .row.justify-content-center.mt-5 {
        margin-top: 1rem !important;
    }

    .row.justify-content-center.mt-4 {
        margin-top: 0.75rem !important;
    }

    .row.justify-content-center .col-md-5,
    .row.justify-content-center .col-md-6 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .row.justify-content-center .card-body.p-4 {
        padding: 1rem !important;
    }

    .row.justify-content-center .form-control-lg {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .row.justify-content-center .btn-lg {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    .row.justify-content-center h3 {
        font-size: 1.2rem;
    }

    /* ===== Statistics page ===== */
    /* Stat cards: 2 columns on tablet */
    .col-md-3 .card.border-0 .card-body .d-flex .rounded-circle {
        width: 36px !important;
        height: 36px !important;
    }

    .col-md-3 .card.border-0 .fw-bold.fs-5 {
        font-size: 0.95rem !important;
    }

    /* Middle row cards stack full width */
    .col-md-4 .card .table td,
    .col-md-4 .card .table th {
        font-size: 0.8rem;
        padding: 0.3rem 0.5rem;
    }

    /* Workers stats table — horizontal scroll always */
    .table-hover .fa-2x {
        font-size: 1.2em;
    }

    /* Chart canvas containers */
    .card-body canvas {
        max-height: 200px;
    }

    /* ===== Appointments scheduler ===== */
    .scheduler-header {
        flex-direction: column !important;
        gap: 0.5rem;
        align-items: flex-start !important;
    }

    .scheduler-header h1 {
        font-size: 1.2rem !important;
    }

    .scheduler-header .btn-lg {
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem;
    }

    .month-nav {
        flex-wrap: wrap;
        gap: 8px !important;
        justify-content: center;
    }

    .month-nav h3 {
        min-width: unset !important;
        font-size: 1.1rem !important;
        order: -1;
        width: 100%;
        text-align: center;
    }

    .calendar-container {
        padding: 10px !important;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 1px !important;
    }

    .calendar-day-header {
        padding: 4px 2px !important;
        font-size: 0.65rem !important;
    }

    .calendar-day {
        min-height: 60px !important;
        padding: 3px !important;
        font-size: 0.7rem;
    }

    .day-number {
        font-size: 0.8rem !important;
    }

    .appointment-item {
        font-size: 0.6rem !important;
        padding: 2px 3px !important;
        margin-bottom: 2px !important;
    }

    .add-day-btn {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
    }

    .legend {
        gap: 10px !important;
    }

    .legend-item {
        font-size: 0.75rem !important;
    }

    .legend-dot {
        width: 10px !important;
        height: 10px !important;
    }

    /* Appointment popup */
    .popup-content {
        margin: 5% auto !important;
        padding: 16px !important;
        width: 95% !important;
    }

    /* ===== Payment page ===== */
    .row.justify-content-center .col-md-10.col-lg-8 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .card.bg-light.mx-auto .table td {
        font-size: 0.8rem;
        word-break: break-all;
    }

    .card.bg-light.mx-auto .table td.text-muted {
        width: auto !important;
        white-space: nowrap;
        font-size: 0.75rem;
    }

    .card.bg-light.mx-auto {
        max-width: 100% !important;
    }

    .alert.mx-auto {
        max-width: 100% !important;
    }

    .display-6 {
        font-size: 1.4rem !important;
    }

    /* ===== Options / Settings pages ===== */
    .col-md-8 > .card .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ===== Generic forms: field-with-btn (add/edit) ===== */
    .field-with-btn {
        flex-wrap: wrap;
    }

    .field-with-btn .form-control,
    .field-with-btn .form-select {
        min-width: 0;
    }

    /* Input groups full width */
    .input-group {
        flex-wrap: nowrap;
    }

    /* d-flex justify-content-between buttons — stack on mobile */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Client order view: tabs compact */
    .nav-tabs .nav-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }

}

/* ===================================================
   Breakpoint: phones (< 576px)
   =================================================== */
@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }

    .container-fluid {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .page-header .page-title {
        font-size: 1.15rem;
    }

    /* Even tighter table */
    .table {
        font-size: 0.8rem;
    }

    .table > :not(caption) > * > * {
        padding: 0.25rem 0.3rem;
    }

    .table .badge {
        font-size: 0.65rem;
    }

    .btn-group-sm > .btn,
    .btn-group .btn-sm,
    .table .btn-sm {
        padding: 0.15rem 0.3rem;
        font-size: 0.7rem;
    }

    /* Card headers */
    .card-header h3,
    .card-header h5 {
        font-size: 0.95rem;
    }

    /* Navbar brand even smaller */
    .navbar-brand {
        font-size: 0.9rem !important;
    }

    .navbar-toggler {
        padding: 0.2rem 0.4rem;
        font-size: 0.85rem;
    }

    /* Collapsed nav */
    .navbar-nav .nav-link {
        font-size: 0.9rem;
    }

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

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

    /* Modals on smallest screens */
    .modal-title {
        font-size: 1rem;
    }

    .modal-body .form-label {
        font-size: 0.85rem;
    }

    .modal-body .form-control {
        font-size: 0.85rem;
    }

    /* Footer minimal */
    footer {
        font-size: 0.75rem;
    }

    /* ===== Login / Register — smallest screens ===== */
    .row.justify-content-center.mt-5 {
        margin-top: 0.5rem !important;
    }

    .row.justify-content-center .card-body.p-4 {
        padding: 0.75rem !important;
    }

    .row.justify-content-center .form-control-lg {
        font-size: 0.9rem;
        padding: 0.4rem 0.6rem;
    }

    .row.justify-content-center .btn-lg {
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem;
    }

    .row.justify-content-center h3 {
        font-size: 1.05rem;
    }

    .row.justify-content-center .text-muted {
        font-size: 0.8rem;
    }

    /* ===== Statistics ===== */
    .col-md-3 .card.border-0 .fw-bold.fs-5 {
        font-size: 0.85rem !important;
    }

    .col-md-3 .card.border-0 .text-muted.small {
        font-size: 0.7rem !important;
    }

    /* ===== Appointments — smallest ===== */
    .scheduler-header h1 {
        font-size: 1rem !important;
    }

    .calendar-day {
        min-height: 48px !important;
        padding: 2px !important;
    }

    .day-number {
        font-size: 0.7rem !important;
    }

    .appointment-item {
        font-size: 0.55rem !important;
        padding: 1px 2px !important;
    }

    .calendar-day-header {
        font-size: 0.55rem !important;
        padding: 3px 1px !important;
    }

    .month-nav h3 {
        font-size: 0.95rem !important;
    }

    /* ===== Payment — smallest ===== */
    .display-6 {
        font-size: 1.2rem !important;
    }

    .badge.fs-5 {
        font-size: 0.95rem !important;
    }
}

/* ===================================================
   Mobile card list (replaces tables on < 768px)
   =================================================== */

/* Desktop table: hidden on mobile */
.desktop-table {
    display: block;
}

/* Mobile cards container: hidden on desktop */
.mobile-cards {
    display: none;
}

@media (max-width: 767.98px) {
    .desktop-table {
        display: none !important;
    }

    .mobile-cards {
        display: block !important;
    }

    /* --- Individual card --- */
    .mobile-card {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        position: relative;
    }

    .mobile-card:last-child {
        margin-bottom: 0;
    }

    /* Card header: key fields + kebab menu */
    .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
        cursor: pointer;
    }

    .mobile-card-header:active {
        background-color: #f8f9fa;
    }

    .mobile-card-summary {
        flex: 1;
        min-width: 0;
    }

    .mobile-card-summary .mc-title {
        font-weight: 600;
        font-size: 0.95rem;
        color: #212529;
        margin: 0 0 0.15rem 0;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }

    .mobile-card-summary .mc-sub {
        font-size: 0.82rem;
        color: #6c757d;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .mobile-card-summary .mc-sub span {
        white-space: nowrap;
    }

    /* Kebab dropdown */
    .mobile-card-actions {
        flex-shrink: 0;
    }

    .mobile-card-actions .btn-kebab {
        background: none;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        color: #6c757d;
        padding: 0.3rem 0.5rem;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-card-actions .btn-kebab:hover,
    .mobile-card-actions .btn-kebab:focus {
        background-color: #f8f9fa;
        color: #212529;
    }

    .mobile-card-actions .dropdown-menu {
        font-size: 0.85rem;
        min-width: 10rem;
    }

    .mobile-card-actions .dropdown-menu .dropdown-item {
        padding: 0.45rem 0.75rem;
    }

    .mobile-card-actions .dropdown-divider {
        margin: 0.25rem 0;
    }

    /* Expand chevron */
    .mc-chevron {
        display: inline-block;
        transition: transform 0.2s ease;
        font-size: 0.7rem;
        color: #adb5bd;
        margin-left: auto;
        padding-left: 0.5rem;
    }

    .mobile-card.expanded .mc-chevron {
        transform: rotate(180deg);
    }

    /* Expanded details */
    .mobile-card-details {
        display: none;
        padding: 0 0.75rem 0.6rem;
        border-top: 1px solid #f0f0f0;
    }

    .mobile-card.expanded .mobile-card-details {
        display: block;
    }

    .mobile-card-details dl {
        margin: 0.5rem 0 0;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.2rem 0.75rem;
        font-size: 0.82rem;
    }

    .mobile-card-details dt {
        font-weight: 500;
        color: #6c757d;
        white-space: nowrap;
    }

    .mobile-card-details dd {
        margin: 0;
        color: #212529;
        word-break: break-word;
    }
}