/**
 * HRBypass Core - Responsive Design Overrides
 *
 * Complete responsive optimization for all frontend-facing pages.
 * This file adds mobile-first responsive styles that work alongside
 * the existing hrbypass-frontend.css without breaking existing functionality.
 *
 * Breakpoints:
 *   Desktop      ≥ 1200px
 *   Laptop       992px – 1199px
 *   Tablet Land  768px – 991px
 *   Tablet Port  576px – 767px
 *   Mobile       375px – 575px
 *   Small Mobile ≤ 374px
 *
 * @package HRBypass_Core
 * @since 1.0.0
 */

/* =============================================================================
   RESPONSIVE CSS VARIABLES
   ============================================================================= */

:root {
    --hrb-rsp-container-padding: 20px;
    --hrb-rsp-gap-sm: 8px;
    --hrb-rsp-gap-md: 16px;
    --hrb-rsp-gap-lg: 24px;
    --hrb-rsp-touch-target: 44px;
    --hrb-rsp-font-xs: 11px;
    --hrb-rsp-font-sm: 12px;
    --hrb-rsp-font-base: 13px;
    --hrb-rsp-font-md: 14px;
    --hrb-rsp-font-lg: 16px;
    --hrb-rsp-font-xl: 18px;
    --hrb-rsp-font-2xl: 20px;
    --hrb-rsp-avatar-sm: 40px;
    --hrb-rsp-avatar-md: 50px;
    --hrb-rsp-avatar-lg: 60px;
}

/* Tablet Portrait & below */
@media (max-width: 767px) {
    :root {
        --hrb-rsp-container-padding: 15px;
        --hrb-rsp-gap-sm: 6px;
        --hrb-rsp-gap-md: 12px;
        --hrb-rsp-gap-lg: 16px;
    }
}

/* Small Mobile */
@media (max-width: 374px) {
    :root {
        --hrb-rsp-container-padding: 10px;
        --hrb-rsp-gap-sm: 4px;
        --hrb-rsp-gap-md: 8px;
        --hrb-rsp-gap-lg: 12px;
    }
}

/* =============================================================================
   CONTAINER FIXES - Ensure all main containers are responsive
   ============================================================================= */

.hrbypass-dashboard,
.hrbypass-find-providers,
.hrbypass-my-bookings,
.hrbypass-public-profile,
.hrbypass-sr-profile,
.hrbypass-matching-results {
    max-width: 100%;
    padding: 0 var(--hrb-rsp-container-padding);
    margin: 0 auto;
    box-sizing: border-box;
}

/* =============================================================================
   DASHBOARD HEADER - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-dashboard-header {
        flex-direction: column;
        gap: 15px;
        padding: 15px 20px;
    }

    .hrbypass-header-content {
        text-align: center;
    }

    .hrbypass-header-actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .hrbypass-header-actions .hrbypass-btn {
        font-size: 13px;
        padding: 10px 16px;
    }
}

@media (max-width: 767px) {
    .hrbypass-dashboard-header {
        padding: 12px 15px;
    }

    .hrbypass-dashboard-title {
        font-size: var(--hrb-rsp-font-xl);
    }

    .hrbypass-dashboard-subtitle {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-header-actions .hrbypass-btn {
        width: 100%;
        justify-content: center;
        min-height: var(--hrb-rsp-touch-target);
    }
}

/* =============================================================================
   STATS CARDS - Responsive Grid (4 cols → 2 cols → 1 col)
   ============================================================================= */

.hrbypass-stats-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

/* Default: auto-fit with min-width for flexibility */
.hrbypass-stats-grid:not(.hrbypass-stats-grid-5col) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.hrbypass-stats-grid-5col {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1199px) {
    .hrbypass-stats-grid-5col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .hrbypass-stats-grid-5col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hrbypass-stats-grid:not(.hrbypass-stats-grid-5col) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .hrbypass-stats-grid-5col,
    .hrbypass-stats-grid:not(.hrbypass-stats-grid-5col) {
        grid-template-columns: 1fr;
    }
}

/* Stat Card responsive adjustments */
@media (max-width: 767px) {
    .hrbypass-stat-card {
        padding: 15px;
    }

    .hrbypass-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin-right: 12px;
    }

    .hrbypass-stat-content h3 {
        font-size: var(--hrb-rsp-font-xl);
    }

    .hrbypass-stat-content p {
        font-size: var(--hrb-rsp-font-xs);
    }
}

/* =============================================================================
   BALANCE CARDS - Responsive
   ============================================================================= */

.hrbypass-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 575px) {
    .hrbypass-balance-grid {
        grid-template-columns: 1fr;
    }
}

.hrbypass-balance-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.hrbypass-balance-icon {
    flex-shrink: 0;
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hrbypass-balance-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hrbypass-balance-label {
    font-size: 14px;
    color: var(--hrbypass-gray-600, #6c757d);
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    display: block;
    width: 100%;
}

.hrbypass-balance-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--hrbypass-gray-900, #212529);
    display: block;
    width: 100%;
}

@media (max-width: 767px) {
    .hrbypass-balance-card {
        padding: 12px;
        flex-wrap: wrap;
    }

    .hrbypass-balance-amount {
        font-size: var(--hrb-rsp-font-lg);
    }

    .hrbypass-balance-label {
        font-size: var(--hrb-rsp-font-sm);
    }
}

/* CRITICAL FIX: Prevent "AVAILABLE BALANCE" from breaking into individual letters */
.hrbypass-balance-label {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    letter-spacing: normal !important;
    text-rendering: auto !important;
}


/* =============================================================================
   DASHBOARD GRID - Two-column layout → Single column
   ============================================================================= */

.hrbypass-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 991px) {
    .hrbypass-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.hrbypass-dashboard-column {
    min-width: 0; /* Prevent grid overflow */
}

/* =============================================================================
   JOB ITEMS - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-job-item {
        flex-direction: column;
        padding: 12px;
    }

    .hrbypass-job-time {
        width: 100%;
        margin-bottom: 10px;
        text-align: left;
    }

    .hrbypass-job-datetime {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .hrbypass-job-date {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-job-time-range {
        font-size: var(--hrb-rsp-font-xs);
    }

    .hrbypass-job-details {
        width: 100%;
        margin-bottom: 10px;
    }

    .hrbypass-job-title {
        font-size: var(--hrb-rsp-font-md);
    }

    .hrbypass-job-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hrbypass-job-meta span {
        font-size: var(--hrb-rsp-font-xs);
    }

    .hrbypass-job-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    .hrbypass-job-actions .hrbypass-btn {
        flex: 1;
        min-width: 120px;
        min-height: var(--hrb-rsp-touch-target);
        justify-content: center;
        font-size: var(--hrb-rsp-font-sm);
    }
}

@media (max-width: 575px) {
    .hrbypass-job-item {
        padding: 10px;
    }

    .hrbypass-job-actions .hrbypass-btn {
        width: 100%;
        flex: none;
    }

    .hrbypass-job-badge {
        font-size: var(--hrb-rsp-font-xs);
        padding: 3px 8px;
    }
}

/* =============================================================================
   JOB DETAILS GRID (3-column detail grid) - Responsive
   ============================================================================= */

.hrbypass-job-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 767px) {
    .hrbypass-job-details {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* =============================================================================
   QUICK ACTIONS - Responsive
   ============================================================================= */

.hrbypass-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 991px) {
    .hrbypass-quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .hrbypass-quick-actions-grid {
        grid-template-columns: 1fr;
    }
}

.hrbypass-quick-action {
    padding: 16px;
    min-height: var(--hrb-rsp-touch-target);
}

@media (max-width: 767px) {
    .hrbypass-quick-action {
        padding: 12px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .hrbypass-quick-icon {
        font-size: 20px;
    }

    .hrbypass-quick-label {
        font-size: var(--hrb-rsp-font-sm);
    }
}

/* Quick Actions Bar (SR Dashboard) */
.hrbypass-quick-actions-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 991px) {
    .hrbypass-quick-actions-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .hrbypass-quick-actions-bar {
        grid-template-columns: 1fr;
    }
}

.hrbypass-quick-action-item {
    padding: 16px;
    min-height: var(--hrb-rsp-touch-target);
}

@media (max-width: 767px) {
    .hrbypass-quick-action-item {
        padding: 12px;
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    .hrbypass-quick-action-item .quick-icon {
        font-size: 20px;
    }

    .hrbypass-quick-action-item .quick-text {
        font-size: var(--hrb-rsp-font-sm);
    }
}

/* =============================================================================
   ACTIONS & TIPS ROW - Responsive
   ============================================================================= */

.hrbypass-actions-tips-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 991px) {
    .hrbypass-actions-tips-row {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   CALENDAR - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-calendar-card .hrbypass-card-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .hrbypass-calendar-nav-btns {
        width: 100%;
        justify-content: space-between;
    }

    .hrbypass-calendar-weekdays span {
        font-size: var(--hrb-rsp-font-xs);
    }

    .hrbypass-calendar-day {
        min-height: 40px;
        font-size: var(--hrb-rsp-font-sm);
    }
}

@media (max-width: 767px) {
    .hrbypass-calendar-day {
        min-height: var(--hrb-rsp-touch-target);
        font-size: var(--hrb-rsp-font-sm);
        padding: 2px;
    }

    .hrbypass-calendar-day .day-number {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-calendar-day .day-bookings {
        display: none; /* Hide booking text on small screens, show only dots */
    }

    .hrbypass-calendar-legend-bar {
        flex-wrap: wrap;
        gap: 6px;
        font-size: var(--hrb-rsp-font-xs);
    }

    .hrbypass-calendar-legend-bar .legend-item {
        font-size: var(--hrb-rsp-font-xs);
    }

    .hrbypass-current-month-label {
        font-size: var(--hrb-rsp-font-md);
    }
}

@media (max-width: 575px) {
    .hrbypass-calendar-weekdays span {
        font-size: 10px;
    }

    .hrbypass-calendar-day {
        min-height: 36px;
        padding: 1px;
    }

    .hrbypass-calendar-day .day-number {
        font-size: 11px;
    }
}

/* =============================================================================
   CARD COMPONENTS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-card {
        padding: 15px;
        margin-bottom: 15px;
    }

    .hrbypass-card-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .hrbypass-card-header h3 {
        font-size: var(--hrb-rsp-font-lg);
    }

    .hrbypass-card-body {
        padding: 0;
    }

    .hrbypass-card-footer {
        padding: 12px 0 0;
    }

    .hrbypass-view-all {
        font-size: var(--hrb-rsp-font-sm);
    }
}

/* =============================================================================
   REVIEWS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-review-item {
        padding: 12px 0;
    }

    .hrbypass-review-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .hrbypass-reviewer {
        gap: 8px;
    }

    .hrbypass-reviewer-name {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-review-rating .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

    .hrbypass-review-content {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-review-date {
        font-size: var(--hrb-rsp-font-xs);
    }
}

/* =============================================================================
   EMPTY STATES - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-empty-state {
        padding: 24px 16px;
    }

    .hrbypass-empty-state .dashicons {
        font-size: 36px;
        width: 36px;
        height: 36px;
    }

    .hrbypass-empty-state p {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-empty-subtext {
        font-size: var(--hrb-rsp-font-xs);
    }
}

/* =============================================================================
   PROFILE COMPLETION BANNER - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-alert-content {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .hrbypass-alert-text {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-progress-bar {
        height: 6px;
    }
}

/* =============================================================================
   TIPS LIST - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-tip-item {
        font-size: var(--hrb-rsp-font-sm);
        padding: 10px 12px;
    }

    .hrbypass-tip-item span:first-child {
        font-size: 16px;
    }
}

/* =============================================================================
   BUSINESS PROFILE (SR Dashboard) - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-business-row {
        flex-direction: column;
        gap: 4px;
        padding: 8px 0;
    }

    .hrbypass-business-label {
        font-size: var(--hrb-rsp-font-xs);
    }

    .hrbypass-business-value {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-completion-header {
        flex-direction: column;
        gap: 4px;
    }
}

/* =============================================================================
   HISTORY TABLE - Responsive (Card layout on mobile)
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-history-table table,
    .hrbypass-history-table thead,
    .hrbypass-history-table tbody,
    .hrbypass-history-table th,
    .hrbypass-history-table td,
    .hrbypass-history-table tr {
        display: block;
    }

    .hrbypass-history-table thead {
        display: none; /* Hide table headers on mobile */
    }

    .hrbypass-history-table tr {
        margin-bottom: 12px;
        border: 1px solid var(--hrbypass-gray-300);
        border-radius: 8px;
        padding: 12px;
        background: #fff;
    }

    .hrbypass-history-table td {
        padding: 6px 0;
        border: none;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .hrbypass-history-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--hrbypass-gray-600);
        font-size: var(--hrb-rsp-font-xs);
        text-align: left;
    }

    .hrbypass-history-table td:last-child {
        border-bottom: none;
    }
}

/* =============================================================================
   NOTIFICATION PANEL - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-notification-panel {
        width: 100%;
        max-width: 100%;
        right: 0;
        border-radius: 0;
    }

    .hrbypass-notification-item {
        padding: 12px;
    }

    .hrbypass-notification-content p {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-notification-time {
        font-size: var(--hrb-rsp-font-xs);
    }
}

/* =============================================================================
   MODALS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-modal-content {
        width: 95%;
        margin: 20px auto;
        max-height: 90vh;
    }

    .hrbypass-modal-header {
        padding: 15px 20px;
    }

    .hrbypass-modal-header h2,
    .hrbypass-modal-header h3 {
        font-size: var(--hrb-rsp-font-lg);
    }

    .hrbypass-modal-body {
        padding: 15px 20px;
        max-height: 60vh;
    }

    .hrbypass-modal-footer {
        padding: 12px 20px;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .hrbypass-modal-footer .hrbypass-btn {
        width: 100%;
        justify-content: center;
        min-height: var(--hrb-rsp-touch-target);
    }
}

@media (max-width: 575px) {
    .hrbypass-modal-content {
        width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .hrbypass-modal-body {
        flex: 1;
        max-height: none;
    }
}

/* =============================================================================
   CANCEL MODAL - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    #hrbypass-cancel-modal .hrbypass-form-group select {
        width: 100%;
        min-height: var(--hrb-rsp-touch-target);
    }

    .hrbypass-refund-note {
        font-size: var(--hrb-rsp-font-sm);
    }
}

/* =============================================================================
   USER MENU DROPDOWN - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-header-menu {
        position: static;
    }

    .hrbypass-menu-dropdown {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        border-radius: 12px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
        z-index: 10000;
    }

    .hrbypass-menu-dropdown.active {
        display: block;
    }

    .hrbypass-menu-dropdown a {
        padding: 14px 16px;
        font-size: var(--hrb-rsp-font-md);
        min-height: var(--hrb-rsp-touch-target);
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

/* =============================================================================
   HEADER USER GREETING (SR Dashboard) - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-header-left,
    .hrbypass-header-right {
        width: 100%;
    }

    .hrbypass-user-greeting {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .hrbypass-user-avatar img {
        width: 50px;
        height: 50px;
    }

    .hrbypass-greeting-text h1 {
        font-size: var(--hrb-rsp-font-xl);
    }

    .hrbypass-greeting-text p {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-header-right {
        display: flex;
        justify-content: center;
    }
}

/* =============================================================================
   PUBLIC PROFILE PAGE - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-public-profile {
        margin: 20px auto;
    }

    .hrbypass-profile-header {
        flex-direction: column;
        text-align: center;
        padding: 24px;
        gap: 16px;
    }

    .hrbypass-profile-avatar img {
        width: 80px;
        height: 80px;
    }

    .hrbypass-profile-title h1 {
        font-size: 24px;
    }

    .hrbypass-profile-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .hrbypass-profile-header {
        padding: 16px;
    }

    .hrbypass-profile-avatar img {
        width: 60px;
        height: 60px;
    }

    .hrbypass-profile-title h1 {
        font-size: 20px;
    }

    .hrbypass-profile-section {
        padding: 16px;
    }

    .hrbypass-profile-section h3 {
        font-size: var(--hrb-rsp-font-lg);
    }
}

/* =============================================================================
   PROVIDER SEARCH PAGE - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-search-form {
        padding: 16px;
    }

    .hrbypass-search-filters {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hrbypass-filter-group label {
        font-size: var(--hrb-rsp-font-sm);
    }

    .hrbypass-filter-group select,
    .hrbypass-filter-group input {
        min-height: var(--hrb-rsp-touch-target);
    }
}

/* =============================================================================
   PROVIDER GRID (Search Results) - Responsive
   ============================================================================= */

.hrbypass-provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width: 1199px) {
    .hrbypass-provider-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 767px) {
    .hrbypass-provider-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Provider Card responsive */
@media (max-width: 767px) {
    .hrbypass-provider-card {
        padding: 16px;
    }

    .hrbypass-provider-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .hrbypass-provider-avatar {
        width: 50px;
        height: 50px;
    }

    .hrbypass-provider-info h4 {
        font-size: var(--hrb-rsp-font-md);
    }

    .hrbypass-provider-metrics {
        flex-direction: column;
        gap: 8px;
    }

    .hrbypass-metric {
        text-align: center;
    }

    .hrbypass-provider-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .hrbypass-provider-footer .hrbypass-btn {
        width: 100%;
        min-height: var(--hrb-rsp-touch-target);
    }

    .hrbypass-hourly-rate {
        font-size: var(--hrb-rsp-font-lg);
    }
}

/* =============================================================================
   BOOKING FORM (hrbypass-frontend.css section) - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-booking-form {
        padding: 20px;
        max-width: 100%;
    }

    .hrbypass-booking-grid {
        grid-template-columns: 1fr;
    }

    .hrbypass-booking-fields {
        border-right: none;
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .hrbypass-booking-form {
        padding: 16px;
        border-radius: 8px;
    }

    .hrbypass-booking-form h2 {
        font-size: var(--hrb-rsp-font-xl);
    }

    .hrbypass-booking-form .form-subtitle {
        font-size: var(--hrb-rsp-font-sm);
        margin-bottom: 20px;
    }

    .hrbypass-time-slots {
        grid-template-columns: repeat(2, 1fr);
    }

    .hrbypass-time-slot {
        min-height: var(--hrb-rsp-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .hrbypass-time-slots {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   FOOTER - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-footer {
        padding: 40px 0 20px;
        margin-top: 40px;
    }

    .hrbypass-footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 575px) {
    .hrbypass-footer {
        padding: 30px 0 16px;
        margin-top: 30px;
    }

    .hrbypass-footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hrbypass-footer-section h4 {
        font-size: var(--hrb-rsp-font-md);
        margin-bottom: 12px;
    }

    .hrbypass-footer-section ul li {
        font-size: var(--hrb-rsp-font-sm);
    }
}

/* =============================================================================
   HERO SECTION - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-hero {
        padding: 60px 0;
    }

    .hrbypass-hero h1 {
        font-size: 36px;
    }

    .hrbypass-hero p {
        font-size: var(--hrb-rsp-font-lg);
    }
}

@media (max-width: 767px) {
    .hrbypass-hero {
        padding: 40px 0;
    }

    .hrbypass-hero h1 {
        font-size: 28px;
    }

    .hrbypass-hero p {
        font-size: var(--hrb-rsp-font-md);
    }

    .hrbypass-hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hrbypass-hero-buttons .hrbypass-btn {
        width: 100%;
        max-width: 280px;
        min-height: var(--hrb-rsp-touch-target);
    }
}

/* =============================================================================
   HEADER & NAVIGATION - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-header {
        padding: 12px 0;
    }

    .hrbypass-nav {
        gap: 12px;
    }

    .hrbypass-user-name {
        display: none; /* Hide text label, keep icon */
    }

    .hrbypass-user-dropdown-toggle {
        padding: 5px;
    }
}

@media (max-width: 767px) {
    .hrbypass-mobile-toggle {
        display: block;
    }

    .hrbypass-nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .hrbypass-nav-menu.active {
        display: flex;
    }

    .hrbypass-nav-menu li a {
        padding: 12px 0;
        min-height: var(--hrb-rsp-touch-target);
        display: flex;
        align-items: center;
    }
}

/* =============================================================================
   DASHBOARD SIDEBAR - Responsive
   ============================================================================= */

@media (max-width: 991px) {
    .hrbypass-dashboard-sidebar {
        width: 240px;
    }

    .hrbypass-dashboard-main {
        margin-left: 240px;
    }
}

@media (max-width: 767px) {
    .hrbypass-dashboard-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    .hrbypass-dashboard-sidebar.active {
        transform: translateX(0);
    }

    .hrbypass-dashboard-main {
        margin-left: 0;
    }

    .hrbypass-sidebar-menu li a {
        padding: 14px 20px;
        min-height: var(--hrb-rsp-touch-target);
    }
}

/* =============================================================================
   EARNINGS CHART - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-chart-container {
        height: 200px;
    }

    #hrbypass-earnings-period {
        width: 100%;
        min-height: var(--hrb-rsp-touch-target);
    }
}

/* =============================================================================
   ALERT / NOTICE COMPONENTS - Responsive
   ============================================================================= */

@media (max-width: 767px) {
    .hrbypass-alert {
        padding: 12px 16px;
    }

    .hrbypass-alert .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
}

/* =============================================================================
   BUTTONS - Touch target improvements
   ============================================================================= */

/* Ensure all interactive elements meet 44px minimum touch target */
.hrbypass-btn,
.hrbypass-button,
button.hrbypass-btn,
a.hrbypass-btn {
    min-height: var(--hrb-rsp-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Remove hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .hrbypass-stat-card:hover,
    .hrbypass-job-item:hover,
    .hrbypass-job-card:hover,
    .hrbypass-provider-card:hover,
    .hrbypass-quick-action:hover,
    .hrbypass-quick-action-item:hover {
        transform: none;
        box-shadow: var(--hrbypass-shadow);
    }

    .hrbypass-btn:hover,
    .hrbypass-button:hover {
        transform: none;
    }

    .hrbypass-user-dropdown-toggle:hover {
        background: none;
    }

    .hrbypass-nav-menu li a:hover {
        color: var(--hrbypass-gray-700);
    }

    .hrbypass-sidebar-menu li a:hover {
        background: none;
        color: var(--hrbypass-gray-700);
    }
}

/* Active/focus states for touch feedback */
.hrbypass-btn:active,
.hrbypass-button:active {
    transform: scale(0.97);
}

.hrbypass-btn:focus-visible,
.hrbypass-button:focus-visible,
.hrbypass-form-control:focus-visible,
a:focus-visible {
    outline: 2px solid var(--hrbypass-primary);
    outline-offset: 2px;
}

/* =============================================================================
   TEXT OVERFLOW PROTECTION
   ============================================================================= */

.hrbypass-card,
.hrbypass-stat-card,
.hrbypass-job-item,
.hrbypass-provider-card,
.hrbypass-balance-card {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* =============================================================================
   TYPOGRAPHY SCALING
   ============================================================================= */

@media (max-width: 767px) {
    body {
        font-size: var(--hrb-rsp-font-md);
    }

    h1 { font-size: clamp(22px, 5vw, 28px); }
    h2 { font-size: clamp(18px, 4vw, 24px); }
    h3 { font-size: clamp(16px, 3.5vw, 20px); }
    h4 { font-size: clamp(14px, 3vw, 18px); }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .hrbypass-dashboard-header,
    .hrbypass-header-actions,
    .hrbypass-quick-actions-grid,
    .hrbypass-quick-actions-bar,
    .hrbypass-job-actions,
    .hrbypass-notification-panel,
    .hrbypass-notification-toggle,
    .hrbypass-menu-toggle,
    .hrbypass-menu-dropdown,
    .hrbypass-calendar-nav-btns {
        display: none !important;
    }
}

/* =============================================================================
   UTILITY CLASSES FOR RESPONSIVE HIDING/SHOWING
   ============================================================================= */

.hrb-hide-desktop { display: none; }
.hrb-hide-tablet { display: block; }
.hrb-hide-mobile { display: block; }

@media (min-width: 992px) {
    .hrb-hide-desktop { display: none; }
    .hrb-show-desktop { display: block; }
}

@media (max-width: 991px) and (min-width: 768px) {
    .hrb-hide-tablet { display: none; }
    .hrb-show-tablet { display: block; }
}

@media (max-width: 767px) {
    .hrb-hide-mobile { display: none; }
    .hrb-show-mobile { display: block; }
}

/* =============================================================================
   ACCESSIBILITY - Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .hrbypass-job-item,
    .hrbypass-stat-card,
    .hrbypass-provider-card,
    .hrbypass-quick-action,
    .hrbypass-quick-action-item {
        transition: none;
        animation: none;
    }
    
    .hrbypass-btn,
    .hrbypass-button {
        transition: none;
    }
}