/* ==========================================================
   Loaded LAST on every page (after the page's own <style>), so these
   rules win over page styles of equal specificity.
   1) Shared component polish   2) Phone layouts
   ========================================================== */

/* ---------- 1) Shared component polish ---------- */

/* Cards and panels */
.profile-container, .dashboard-card, .settings-panel, .auth-container, .auth-card,
.profile-card, .card, .stylist-result-card, .calendar-wrapper {
    border-radius: var(--radius-lg);
    border-color: var(--line);
    box-shadow: var(--shadow);
}
.stylist-result-card:hover { box-shadow: var(--shadow-lg); }

/* Modals */
.modal-overlay { background: rgba(28, 31, 35, 0.45); backdrop-filter: blur(4px); }
.modal-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Buttons: consistent weight and rounding */
.btn, .btn-submit, .edit-profile-btn, .back-btn, .search-action-btn, .btn-base, .btn-booking-confirm,
.btn-booking-cancel, .service-book-btn, .view-profile-action-btn, .action-decision-btn, .auth-container button,
.action-container button, .action-container a {
    border-radius: 10px;
    font-weight: 700;
}

/* Inputs: roomier and rounder */
.auth-container input, .auth-card input, .settings-panel input, .settings-panel select, .settings-panel textarea,
.booking-form-group input, .booking-form-group select {
    border-radius: 10px;
}

/* Tabs */
.tab-menu { background: var(--surface-2); }
.tab-btn { font-weight: 700; }

/* Tags and pills */
.tag, .result-tag, .work-type-badge { border-radius: 999px; }

/* Calendar */
.calendar-cell { border-radius: 10px; }

/* ---------- 2) Phone layouts ---------- */
@media (max-width: 640px) {
    body { padding: 12px !important; }

    /* Cards take the full width with smaller padding */
    .dashboard-card, .settings-panel, .auth-container, .auth-card, .profile-card, .card {
        margin: 12px auto !important;
        padding: 24px 18px !important;
    }
    .profile-container { margin: 0 auto; border-radius: var(--radius); }

    /* Client dashboard header sits above the content instead of floating */
    .dashboard-brand { position: absolute; top: 22px; left: 16px; }
    .dashboard-header { position: static; justify-content: flex-end; margin-bottom: 4px; }
    .dashboard-card h1 { font-size: 1.6rem; }
    .client-verify-banner, .stylist-verify-banner { margin: 8px auto 12px auto; }

    /* Profile headers stack: avatar, then details, then actions */
    .profile-header { flex-direction: column; align-items: center; text-align: center; padding: 28px 18px; }
    .avatar-container { width: 112px; height: 112px; min-width: 112px; min-height: 112px; margin: 0 0 16px 0; font-size: 2.4rem; }
    .profile-info h1 { font-size: 1.7rem; }
    .name-action-row { flex-direction: column; gap: 12px; }
    .stats-bar, .tag-container { justify-content: center; }
    .specialties-wrapper { text-align: center; }
    .header-actions { position: static; justify-content: center; margin-top: 18px; }
    .hours-setup-banner { padding: 12px 18px; }

    /* Tabs scroll sideways instead of squashing */
    .tab-menu { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { flex: 1 0 auto; white-space: nowrap; padding: 14px 16px; font-size: 0.92rem; }
    .tab-content { padding: 20px 14px; }

    .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Services */
    .service-row-item { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
    .form-fields-flex { flex-direction: column; align-items: stretch; }
    .input-group-element, .input-group-element.price-flex-width { flex: none; width: 100%; }

    /* Calendar */
    .calendar-wrapper { padding: 14px; }
    .calendar-grid { gap: 4px; }
    .calendar-cell { padding: 8px 2px; font-size: 0.85rem; min-height: 40px; }
    .calendar-day-name { font-size: 0.7rem; }
    .appointment-chip { flex-wrap: wrap; border-radius: var(--radius); gap: 8px 12px; }
    .chip-actions { margin-left: auto; }
    .pending-card { flex-direction: column; align-items: stretch; gap: 12px; }
    .pending-actions-wrapper { justify-content: flex-end; }

    /* Working hours */
    .weekday-row label.weekday-toggle { width: 100%; }
    .breaks-list { margin-left: 0; }
    .add-break-btn { margin-left: 0; }
    .days-off-add-row { flex-direction: column; }

    /* Client search */
    .search-control-row { flex-direction: column; align-items: stretch; }
    .search-action-btn { width: 100%; }
    .mobility-filters-box { grid-template-columns: 1fr; }
    .stylist-result-card { flex-direction: column; align-items: flex-start; padding: 18px; gap: 14px; }
    .result-header-row { flex-direction: column; gap: 10px; }

    /* Forms */
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full-width { grid-column: auto; }
    .form-row { flex-direction: column; gap: 0; }
    .action-container { flex-direction: column; }

    /* Modals become bottom sheets */
    .modal-overlay.active { align-items: flex-end; }
    .modal-card { max-width: 100%; max-height: 92vh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .modal-card:not(.booking-modal-card) { padding: 24px 18px; }
    .modal-tab-menu { overflow-x: auto; }
    .modal-tab-btn { white-space: nowrap; }
}