/* SmartMonica Design System
 * Based on work-schedule.php professional design
 */

/* Cards */
.sm-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 1rem;
}

.sm-card-header {
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
}

.sm-card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.sm-card-body {
    padding: 20px;
}

/* Tables */
.sm-table {
    width: 100%;
    border-collapse: collapse;
}

.sm-table th,
.sm-table td {
    border: 1px solid #dee2e6;
    padding: 10px 12px;
    text-align: right;
}

.sm-table thead th {
    background: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sm-table tbody tr:hover {
    background: #f8f9fa;
}

/* Forms */
.sm-form-control {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
}

.sm-form-control:focus {
    border-color: var(--bs-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.1);
}

/* Header bar */
.sm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Interactive states */
.sm-clickable {
    cursor: pointer;
    transition: background 0.15s;
}

.sm-clickable:hover {
    background: #f8f9fa;
}

/* Backwards compatibility: apply same styles to panel classes */
.panel.panel-inverse {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.panel.panel-inverse .panel-heading {
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.panel.panel-inverse .panel-heading .panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.panel.panel-inverse .panel-body {
    padding: 20px;
}

/* Enhanced table styles within panels */
.panel.panel-inverse .table {
    margin-bottom: 0;
}

.panel.panel-inverse .table th {
    background: #f8f9fa;
    font-weight: 600;
    border-color: #dee2e6;
}

.panel.panel-inverse .table td {
    border-color: #dee2e6;
}

.panel.panel-inverse .table tbody tr:hover {
    background: #f8f9fa;
}

/* Sticky table headers */
.panel.panel-inverse .table-responsive .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8f9fa;
}

/* ========================================
 * Mobile Responsive Styles (max-width: 767px)
 * ======================================== */

@media (max-width: 767.98px) {

    /* ---- Global: card body padding reduction ---- */
    .sm-card-body,
    .panel.panel-inverse .panel-body {
        padding: 12px;
    }

    /* ---- Global: project selector (all screens) ---- */
    #placement-workers-project-select {
        width: 100% !important;
    }

    /* ---- Employee screen: save availability button ---- */
    #save-days {
        width: 100% !important;
    }

    /* ---- Salary Report: form filter selects and buttons ---- */
    #salary-report-page .d-flex.flex-wrap > .w-200px,
    #salary-report-page .d-flex.flex-wrap > div,
    #salary-report-page .d-flex.flex-wrap > div > .form-select,
    #salary-report-page .d-flex.flex-wrap > button {
        width: 100% !important;
    }

    /* ---- Chief Producer: override inline style padding ---- */
    .app-content {
        padding: 0 15px !important;
    }

    /* ---- Table cells: tighter on mobile ---- */
    .sm-table th,
    .sm-table td {
        padding: 6px 8px;
        font-size: 13px;
    }

    /* ---- FullCalendar: scale down for small screens ---- */
    .fc {
        font-size: 12px;
    }

    .fc .fc-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    .fc .fc-button {
        padding: 0.2em 0.5em;
        font-size: 0.8em;
    }

    .fc .fc-daygrid-day-number {
        font-size: 12px;
        padding: 2px 4px;
    }

    /* ---- Swiper cards: adjust for very small screens ---- */
    .swiper .widget.widget-stats {
        padding: 0.5rem !important;
    }

    /* ---- DataTable: reduce font size slightly ---- */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 12px;
    }

    /* ---- Job report: date input group on mobile ---- */
    #job-report-form .input-group {
        flex-wrap: nowrap;
    }
}