/* ============================================================
   RESPONSIVE — TABLETS & MOBILE
   ============================================================ */
@media (max-width: 1200px) {
    :root {
        --sidebar-w: 260px;
    }

    .main-content {
        padding: 2rem;
    }

    .stats-row {
        gap: 1rem;
    }

    .stat-tile {
        padding: 1.5rem 1.25rem 1rem;
    }

    .stat-tile-num {
        font-size: 2.2rem;
    }

    .stat-tile-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .dash-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-card {
        max-width: 100%;
    }

    .greeting-title {
        font-size: 1.75rem;
    }

    .dash-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    :root {
        --sidebar-w: 280px;
    }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .sidebar.show {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }

    .sidebar-overlay.show {
        display: block;
    }

    .sidebar-toggle {
        display: flex;
    }

    .main-content {
        margin-left: 0;
        padding: 5rem 1.25rem 1.5rem;
    }

    /* Data table scroll wrapper */
    .content-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stats-row .stat-tile:last-child {
        grid-column: span 2;
    }

    .section-topbar {
        flex-direction: column;
        gap: 1rem;
    }

    .section-topbar .btn-primary-action,
    .section-topbar .btn-danger-action {
        width: 100%;
        justify-content: center;
    }

    .greeting-bar {
        flex-direction: column;
        gap: 1rem;
    }

    .greeting-title {
        font-size: 1.5rem;
    }

    .greeting-date {
        align-self: flex-start;
    }

    .modal-dialog {
        margin: 1rem;
    }

    .data-table thead th,
    .data-table tbody td {
        padding: 0.875rem 1rem;
    }
}

@media (max-width: 640px) {
    :root {
        --sidebar-w: 300px;
    }

    .main-content {
        padding: 5rem 1rem 1.5rem;
    }

    .stats-row {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .stats-row .stat-tile:last-child {
        grid-column: span 1;
    }

    .greeting-bar {
        margin-bottom: 1.75rem;
    }

    .greeting-title {
        font-size: 1.35rem;
    }

    .greeting-sub {
        font-size: 0.8rem;
    }

    .stat-tile {
        padding: 1.25rem;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .stat-tile-bar {
        display: none;
    }

    .stat-tile-num {
        font-size: 1.75rem;
    }

    .stat-tile-left {
        gap: 0.875rem;
    }

    .stat-tile-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* Dashboard widgets mobile */
    .section-title {
        font-size: 1.3rem;
    }

    .section-icon {
        width: 40px;
        height: 40px;
    }

    .section-sub {
        padding-left: calc(40px + 0.75rem);
        font-size: 0.8rem;
    }

    .dash-card-header {
        padding: 1rem 1.25rem;
    }

    .quick-actions {
        padding: 0.875rem;
    }

    .qa-btn {
        padding: 0.875rem 1rem;
    }

    .qa-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .flow-steps {
        padding: 1rem 1.25rem;
    }

    .flow-num {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    .flow-line {
        left: 18px;
    }

    .empty-state {
        padding: 3.5rem 1.5rem;
    }

    .empty-icon {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }

    .content-card {
        border-radius: var(--radius-lg);
    }

    .modal-content {
        border-radius: var(--radius-lg) !important;
    }

    .modal-header {
        padding: 1rem 1.25rem !important;
    }

    .modal-body {
        padding: 1.25rem !important;
    }

    .modal-footer {
        padding: 1rem 1.25rem !important;
    }

    .toast-container {
        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;
    }

    .toast {
        min-width: auto;
        width: 100%;
    }

    .product-card {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }

    .product-title-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cost-legend {
        padding: 1rem;
        gap: 0.875rem;
    }

    .product-cost-summary {
        gap: 0.75rem;
    }

    .cost-chip {
        min-width: 120px;
        padding: 0.5rem 0.75rem;
    }
}


/* ============================================================
   RESPONSIVE — Profile / Generator / Contact
   ============================================================ */
@media (max-width: 1024px) {
    .prof-main-layout {
        grid-template-columns: 1fr;
    }

    .prof-brand-card {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
        position: relative;
        top: auto;
    }

    .prof-hero-title {
        font-size: 1.35rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-hero-card {
        min-height: auto;
    }

    .gen-control-row {
        flex-direction: column;
    }

    .gen-step-connector {
        justify-content: center;
        transform: rotate(90deg);
        padding: 0.25rem 0;
    }
}

@media (max-width: 640px) {
    .prof-form-grid {
        grid-template-columns: 1fr;
    }

    .prof-save-bar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .prof-save-btn {
        width: 100%;
        justify-content: center;
    }

    .prof-save-security {
        justify-content: center;
    }

    .prof-tabs-nav {
        gap: 0.35rem;
    }

    .prof-tab {
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
    }

    .prof-stats-row {
        gap: 0.5rem;
    }

    .prof-hero-header {
        padding: 1.5rem 1.25rem;
    }

    .gen-actions-row {
        flex-direction: column;
    }

    .gen-action-btn {
        justify-content: center;
    }

    .gen-paper {
        padding: 1.5rem;
    }

    .contact-hero-stats {
        flex-direction: column;
        gap: 0.75rem;
    }

    .contact-hero-stat-sep {
        width: 80%;
        height: 1px;
        margin: 0 auto;
    }

    .section-icon.blue {
        background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.08));
        color: var(--blue);
        box-shadow: 0 3px 10px rgba(59, 130, 246, 0.15);
    }
}

.section-icon.blue {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.08));
    color: #3b82f6;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.15);
}

.badge-unit {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(145deg, var(--violet-pale) 0%, #ede9fe 100%);
    color: var(--violet);
    border: 1px solid rgba(124, 58, 237, 0.2);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3em 0.7em;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* ============================================================
   RESPONSIVE — Tables overflow scroll (all tables)
   ============================================================ */
.pv2-formula-table-wrap,
.pv2-slab-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   RESPONSIVE — 768px — Tablets & Small Laptops
   ============================================================ */
@media (max-width: 768px) {

    /* Search boxes — remove min-width so they don't overflow */
    .cl-search-box,
    .rm-search-box,
    .products-search-box {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Date range inputs */
    .cl-date-range {
        width: 100%;
        justify-content: center;
    }

    .cl-date-range input[type="date"] {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    /* Generator term chips — stack on tablet */
    .gen-terms-row {
        flex-direction: column;
    }

    .gen-term-chip {
        min-width: 0;
        width: 100%;
    }

    /* Generator checkbox grid */
    .gen-checkbox-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    /* PDF preview iframe — reduce height */
    #pdfPreviewIframe {
        height: 500px !important;
    }

    /* Product card image */
    .pv2-card-img-wrap {
        max-width: 100%;
    }

    /* Visibility grid in client modal */
    .visibility-grid {
        grid-template-columns: 1fr;
    }

    /* Forms modal — fields row */
    .rm-fields-row {
        gap: 0.75rem;
    }
}


/* ============================================================
   RESPONSIVE — 480px — Small Mobile Phones
   ============================================================ */
@media (max-width: 480px) {

    .main-content {
        padding: 4.5rem 0.75rem 1.25rem;
    }

    /* Search boxes — full width, reduce padding */
    .cl-search-box,
    .rm-search-box,
    .products-search-box {
        min-width: 0;
    }

    .products-search-shortcut {
        display: none;
    }

    /* Product tables — tighter padding */
    .pv2-formula-table thead th,
    .pv2-formula-table tbody td {
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
    }

    .pv2-slab-table thead th,
    .pv2-slab-table tbody td {
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
    }

    /* PDF preview iframe — even smaller */
    #pdfPreviewIframe {
        height: 350px !important;
    }

    /* Generator paper */
    .gen-paper {
        padding: 1rem;
    }

    /* Generator checkbox grid — single column */
    .gen-checkbox-list {
        grid-template-columns: 1fr;
    }

    /* Product images gallery — single column on very small */
    .prod-images-gallery {
        grid-template-columns: 1fr !important;
    }

    /* Client cards — tighter */
    .cl-card-header {
        padding: 1rem;
    }

    .cl-card-body {
        padding: 0 1rem;
    }

    .cl-card-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Magic link tag — allow more space */
    .cl-magic-link-tag {
        max-width: 120px;
    }

    /* Hero headers — tighter on small phones */
    .rm-hero-header,
    .products-hero-header,
    .cl-hero-header {
        padding: 1rem;
        border-radius: var(--radius-lg);
    }

    /* Section topbar buttons */
    .section-topbar {
        gap: 0.75rem;
    }

    /* Modal dialogs — fullscreen-ish on small phones */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem !important;
    }

    /* Generator actions */
    .gen-actions-row {
        gap: 0.5rem;
    }

    .gen-action-btn {
        font-size: 0.78rem;
        padding: 0.65rem 1rem;
    }

    /* Contact layout */
    .contact-hero-card {
        padding: 1.5rem;
    }

    /* Greeting */
    .greeting-title {
        font-size: 1.15rem;
    }

    /* Dash cards tighter */
    .dash-card-body {
        padding: 1rem;
    }

    /* Generator step cards */
    .gen-step-card {
        padding: 1rem;
    }

    .gen-step-header h5 {
        font-size: 0.9rem;
    }
}


/* ============================================================
   RESPONSIVE — 360px — Extra Small Phones
   ============================================================ */
@media (max-width: 360px) {

    .main-content {
        padding: 4.5rem 0.5rem 1rem;
    }

    .greeting-title {
        font-size: 1rem;
    }

    .stat-tile-num {
        font-size: 1.5rem;
    }

    .stat-tile-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    /* Sidebar toggle smaller */
    .sidebar-toggle {
        width: 40px;
        height: 40px;
    }

    /* Products hero */
    .products-hero-title,
    .rm-hero-title,
    .cl-hero-title {
        font-size: 1rem;
    }

    /* Modal full width */
    .modal-dialog {
        margin: 0.25rem;
    }
}


/* ═══ Responsive — Settings ═══ */
@media (max-width: 900px) {
    .stg-main-layout {
        grid-template-columns: 1fr;
    }

    .stg-overview-card {
        position: static;
    }

    .stg-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stg-prefs-grid {
        grid-template-columns: 1fr;
    }

    .stg-pass-rules {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .stg-hero-header {
        padding: 1.25rem;
    }

    .stg-hero-title {
        font-size: 1.35rem;
    }

    .stg-hero-icon-wrap {
        width: 44px;
        height: 44px;
    }

    .stg-hero-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .stg-tabs-nav {
        gap: 0.15rem;
    }

    .stg-tab span {
        display: none;
    }

    .stg-tab {
        padding: 0.7rem;
    }

    .stg-form-card-body {
        padding: 1rem;
    }

    .stg-overview-inner {
        padding: 1.25rem 1rem;
    }
}


/* ============================================================
   DASHBOARD — Full Responsive
   ============================================================ */

/* Stats row: 3-col → 2-col at 900px → 1-col at 640px already in earlier blocks */
/* Dash grid: 3-col → fix */
@media (max-width: 1100px) {
    .dash-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .greeting-bar {
        flex-wrap: wrap;
    }

    .greeting-date {
        white-space: normal;
        font-size: 0.72rem;
    }
}

@media (max-width: 640px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-row .stat-tile:last-child {
        grid-column: span 2;
    }

    .dash-card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .quick-actions {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

    .stats-row .stat-tile:last-child {
        grid-column: span 1;
    }
}


/* ============================================================
   PROFILE SECTION — Full Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .prof-main-layout {
        grid-template-columns: 1fr;
    }

    .prof-brand-card {
        position: static;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .prof-form-grid {
        grid-template-columns: 1fr;
    }

    .prof-hero-header {
        padding: 1.25rem;
    }

    .prof-hero-title {
        font-size: 1.3rem;
    }

    .prof-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
    }

    .prof-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 640px) {
    .prof-brand-card {
        max-width: 100%;
    }

    .prof-hero-content {
        flex-direction: column;
        gap: 0.75rem;
    }

    .prof-stats-row {
        flex-wrap: wrap;
    }

    .prof-save-bar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .prof-save-btn {
        width: 100%;
        justify-content: center;
    }

    .prof-avatar-wrap {
        width: 100px;
        height: 100px;
    }

    .prof-avatar-container {
        width: 100px;
        height: 100px;
    }

    .prof-avatar-img {
        width: 100px;
        height: 100px;
    }
}


/* ============================================================
   CONTACT SECTION — Full Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-hero-card {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .contact-hero-content {
        padding: 1.75rem 1.5rem;
    }

    .contact-hero-title {
        font-size: 1.5rem;
    }

    .contact-hero-stats {
        flex-direction: column;
        gap: 0.5rem;
    }

    .contact-hero-stat-sep {
        width: 80%;
        height: 1px;
        margin: 0 auto;
    }

    .contact-form-wrap {
        padding: 1.25rem;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .contact-hero-icon-wrap {
        width: 52px;
        height: 52px;
    }

    .contact-hero-heading {
        font-size: 1.2rem;
    }
}


/* ============================================================
   SETTINGS — Full Responsive (extends existing 900px block)
   ============================================================ */
@media (max-width: 768px) {
    .stg-main-layout {
        grid-template-columns: 1fr;
    }

    .stg-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
    }

    .stg-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .stg-main-settings-layout {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   GENERATOR — Full Responsive
   ============================================================ */
@media (max-width: 768px) {
    .gen-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gen-tpl-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .gen-hero-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .gen-step-card {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .gen-cards-grid {
        grid-template-columns: 1fr;
    }

    .gen-tpl-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .tpl-picker-row {
        gap: 0.75rem;
    }

    .tpl-card {
        width: 120px;
    }

    .gen-hero-title {
        font-size: 1.3rem;
    }

    .gen-control-row {
        flex-direction: column;
    }

    .gen-step-connector {
        justify-content: center;
        transform: rotate(90deg);
    }
}


/* ============================================================
   RAW MATERIALS (Components) — Full Responsive
   ============================================================ */
@media (max-width: 640px) {
    .rm-cards-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .rm-cards-container {
        grid-template-columns: 1fr;
    }

    .rm-search-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .rm-search-box {
        max-width: 100%;
        width: 100%;
    }

    .rm-filter-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .rm-card-inner {
        flex-wrap: wrap;
    }

    .rm-card-actions {
        opacity: 1;
        transform: none;
    }
}


/* ============================================================
   CLIENTS — Full Responsive
   ============================================================ */
@media (max-width: 640px) {
    .cl-cards-container {
        grid-template-columns: 1fr;
    }

    .cl-date-range {
        flex-wrap: wrap;
        height: auto;
        padding: 0.4rem 0.65rem;
        gap: 0.25rem;
    }

    .cl-search-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .cl-search-box {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .cl-cards-container {
        grid-template-columns: 1fr;
    }

    .cl-hero-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cl-card-header {
        padding: 1rem;
    }

    .cl-card-body {
        padding: 0 1rem;
    }

    .cl-card-footer {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        align-items: flex-start;
    }

    .cl-magic-link-group {
        width: 100%;
    }

    .cl-magic-link-tag {
        max-width: calc(100% - 60px);
    }

    .cl-link-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


/* ============================================================
   PRODUCTS — Full Responsive (fill gaps)
   ============================================================ */
@media (max-width: 640px) {
    .products-search-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .products-search-box {
        max-width: 100%;
        width: 100%;
    }

    .products-filter-pills {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .pv2-metrics-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .pv2-metrics-row {
        grid-template-columns: 1fr;
    }

    .products-hero-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .products-action-group-secondary {
        flex-wrap: wrap;
        width: 100%;
    }

    .products-add-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   FORMS & MODALS — Full Responsive
   ============================================================ */
@media (max-width: 768px) {
    .prod-images-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .custom-confirm-box {
        width: calc(100% - 2rem) !important;
        max-width: 100% !important;
        margin: 0 1rem;
    }
}

@media (max-width: 480px) {
    .prod-images-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: var(--radius-lg) !important;
    }

    .modal-header {
        padding: 1rem !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    .modal-footer {
        padding: 0.875rem 1rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        flex: 1;
        justify-content: center;
    }
}


/* ============================================================
   SIDEBAR — Ensure hidden on mobile (belt-and-suspenders)
   ============================================================ */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s ease;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: flex !important;
    }

    .main-content {
        margin-left: 0 !important;
    }
}


/* ============================================================
   GLOBAL — Prevent horizontal overflow on all screens
   ============================================================ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* All tables must scroll, not overflow page */
.content-card,
.gen-paper-bg,
.gen-paper-bg-v2,
.pv2-formula-table-wrap,
.pv2-slab-table-wrap,
.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   IOS INPUT ZOOM FIX
   All inputs must be font-size 16px on mobile to prevent
   iOS Safari from auto-zooming when focused
   ============================================================ */
@media (max-width: 900px) {
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
    }
}


/* ============================================================
   COMPREHENSIVE MOBILE FIX — 768px and below
   Full readability + usability on all mobile screens
   ============================================================ */
@media (max-width: 768px) {

    /* ── Main layout ── */
    .main-content {
        padding: 4.75rem 1rem 2rem;
    }

    /* ── Section headers ── */
    .section-title {
        font-size: 1.4rem;
    }

    .section-sub {
        font-size: 0.82rem;
    }

    /* ── Hero headers ── */
    .rm-hero-header,
    .products-hero-header,
    .cl-hero-header,
    .prof-hero-header,
    .stg-hero-header {
        padding: 1.25rem;
        border-radius: var(--radius-lg);
    }

    .rm-hero-title,
    .products-hero-title,
    .cl-hero-title {
        font-size: 1.3rem;
    }

    /* ── Nav group labels ── */
    .nav-group-label {
        font-size: 0.65rem;
    }

    /* ── Greeting ── */
    .greeting-title {
        font-size: 1.5rem;
    }

    .greeting-sub {
        font-size: 0.85rem;
    }

    /* ── Stat tiles ── */
    .stat-tile-num {
        font-size: 2rem;
    }

    .stat-tile-label {
        font-size: 0.78rem;
    }

    /* ── Dashboard quick actions ── */
    .qa-title {
        font-size: 0.85rem;
        white-space: normal;
    }

    .qa-sub {
        font-size: 0.72rem;
        white-space: normal;
    }

    /* ── Flow steps ── */
    .flow-title {
        font-size: 0.85rem;
        white-space: normal;
    }

    .flow-desc {
        font-size: 0.78rem;
        white-space: normal;
    }

    /* ── Buttons — full width on mobile ── */
    .rm-add-btn,
    .cl-add-btn,
    .products-add-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Section topbar ── */
    .section-topbar {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .section-topbar .btn-primary-action,
    .section-topbar .btn-danger-action,
    .section-topbar .btn-secondary-action {
        width: 100%;
        justify-content: center;
    }

    /* ── Product cards ── */
    .pv2-card-header {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pv2-product-name {
        font-size: 1rem;
        white-space: normal;
        overflow: visible;
    }

    /* ── Client cards ── */
    .cl-card-business-name {
        font-size: 0.95rem;
        white-space: normal;
    }

    /* ── Raw material cards ── */
    .rm-card-name {
        font-size: 0.9rem;
        white-space: normal;
        overflow: visible;
    }

    /* ── Profile tabs ── */
    .prof-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        gap: 0.25rem;
    }

    .prof-tab {
        font-size: 0.78rem;
        padding: 0.55rem 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Settings tabs ── */
    .stg-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .stg-tab {
        flex-shrink: 0;
    }

    /* ── Modals ── */
    .modal-dialog {
        margin: 0.5rem;
        max-height: 96vh;
    }

    .modal-content {
        max-height: 94vh;
        overflow-y: auto;
    }

    /* ── Footer in sections ── */
    .section-footer,
    [style*="Built with"] {
        font-size: 0.8rem;
    }
}


/* ============================================================
   COMPREHENSIVE MOBILE FIX — 480px and below
   Tighter layout for small phones
   ============================================================ */
@media (max-width: 480px) {

    /* ── Base layout ── */
    .main-content {
        padding: 4.25rem 0.875rem 2rem;
    }

    /* ── Section heading ── */
    .section-title {
        font-size: 1.2rem;
    }

    .section-icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .section-sub {
        font-size: 0.78rem;
        padding-left: calc(38px + 0.65rem);
    }

    /* ── Greeting ── */
    .greeting-bar {
        margin-bottom: 1.25rem;
    }

    .greeting-title {
        font-size: 1.2rem;
    }

    .greeting-date {
        font-size: 0.72rem;
        padding: 0.5rem 0.875rem;
        white-space: normal;
        text-align: left;
    }

    /* ── Stat tiles — horizontal row on mobile ── */
    .stat-tile {
        padding: 1rem;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .stat-tile-num {
        font-size: 1.6rem;
    }

    .stat-tile-label {
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .stat-tile-icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    /* ── Dash cards ── */
    .dash-card-header {
        padding: 0.875rem 1rem;
        font-size: 0.82rem;
    }

    .dash-card-body {
        padding: 0.875rem 1rem;
    }

    /* ── Quick actions ── */
    .qa-btn {
        padding: 0.75rem 0.875rem;
        gap: 0.75rem;
    }

    .qa-icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .qa-title {
        font-size: 0.82rem;
    }

    .qa-sub {
        font-size: 0.68rem;
    }

    /* ── Hero icons ── */
    .rm-hero-icon-wrap,
    .products-hero-icon-wrap,
    .cl-hero-icon-wrap {
        width: 44px;
        height: 44px;
    }

    .rm-hero-icon,
    .products-hero-icon,
    .cl-hero-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    /* ── Hero subtitles ── */
    .rm-hero-sub,
    .products-hero-sub,
    .cl-hero-sub {
        font-size: 0.75rem;
    }

    /* ── Search strips ── */
    .cl-search-strip,
    .rm-search-strip,
    .products-search-strip {
        flex-direction: column;
        gap: 0.5rem;
    }

    .cl-search-box,
    .rm-search-box,
    .products-search-box {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    /* ── Filter pills ── */
    .cl-filter-pills,
    .products-filter-pills {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .cl-pill-select,
    .products-pill-select {
        flex: 1;
        min-width: 120px;
    }

    .cl-pill-select select,
    .products-pill-select select {
        width: 100%;
    }

    /* ── Client hero actions ── */
    .cl-hero-actions,
    .rm-hero-actions,
    .products-hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .cl-action-chip,
    .rm-action-chip,
    .products-action-chip {
        justify-content: center;
    }

    /* ── Product card internals ── */
    .pv2-body {
        flex-direction: column;
        padding: 1rem;
        gap: 0.75rem;
    }

    .pv2-image-frame {
        width: 100%;
        height: 160px;
        border-radius: var(--radius-md);
    }

    .pv2-product-name {
        font-size: 0.95rem;
    }

    .pv2-metrics-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .pv2-metric {
        padding: 0.6rem;
    }

    .pv2-metric-value {
        font-size: 0.88rem;
    }

    .pv2-metric-label {
        font-size: 0.65rem;
    }

    /* ── Client card internals ── */
    .cl-card-header {
        padding: 0.875rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cl-card-body {
        padding: 0 1rem;
    }

    .cl-card-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .cl-magic-link-group {
        width: 100%;
    }

    .cl-magic-link-tag {
        max-width: calc(100% - 70px);
        font-size: 0.6rem;
    }

    .cl-link-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* ── Raw material card ── */
    .rm-card-inner {
        padding: 0.875rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .rm-card-name {
        font-size: 0.88rem;
        white-space: normal;
    }

    .rm-card-actions {
        opacity: 1;
        transform: none;
        flex-wrap: wrap;
    }

    /* ── Profile ── */
    .prof-hero-header {
        padding: 1rem;
    }

    .prof-hero-content {
        flex-direction: column;
        gap: 0.75rem;
    }

    .prof-hero-title {
        font-size: 1.2rem;
    }

    .prof-form-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .prof-stats-row {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .prof-save-bar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .prof-save-btn {
        width: 100%;
        justify-content: center;
    }

    /* ── Settings ── */
    .stg-main-layout {
        grid-template-columns: 1fr;
    }

    .stg-hero-content {
        flex-direction: column;
        gap: 0.75rem;
    }

    .stg-hero-title {
        font-size: 1.2rem;
    }

    .stg-form-card-body {
        padding: 0.875rem;
    }

    /* ── Contact ── */
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-hero-content {
        padding: 1.5rem 1.25rem;
    }

    /* ── Modals — nearly fullscreen ── */
    .modal-dialog {
        margin: 0.375rem;
    }

    .modal-header {
        padding: 0.875rem 1rem !important;
    }

    .modal-body {
        padding: 0.875rem 1rem !important;
    }

    .modal-footer {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 100px;
    }

    /* ── Form inputs — larger touch targets ── */
    .form-control,
    .form-select {
        padding: 0.7rem 0.875rem;
        font-size: 16px !important;
        min-height: 44px;
    }

    label.form-label {
        font-size: 0.82rem;
    }

    /* ── Buttons — minimum 44px touch target ── */
    .btn,
    button.rm-add-btn,
    button.cl-add-btn,
    button.products-add-btn,
    .rm-action-chip,
    .cl-action-chip {
        min-height: 44px;
    }

    /* ── Dashboard ── */
    .stats-row {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .stats-row .stat-tile:last-child {
        grid-column: span 1;
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   COMPREHENSIVE MOBILE FIX — 375px and below
   iPhone SE, small Android phones
   ============================================================ */
@media (max-width: 375px) {

    .main-content {
        padding: 4rem 0.625rem 2rem;
    }

    .greeting-title {
        font-size: 1.1rem;
    }

    .stat-tile-num {
        font-size: 1.4rem;
    }

    .stat-tile-icon {
        width: 38px;
        height: 38px;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .rm-hero-title,
    .products-hero-title,
    .cl-hero-title {
        font-size: 1.1rem;
    }

    .pv2-product-name {
        font-size: 0.9rem;
    }

    .modal-dialog {
        margin: 0.25rem;
    }

    /* Sidebar toggle smaller */
    .sidebar-toggle {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        top: 0.75rem;
        left: 0.75rem;
    }

    /* Remove decorative elements that clutter small screens */
    .stat-tile-bar {
        display: none;
    }

    .flow-num {
        width: 32px;
        height: 32px;
        font-size: 0.72rem;
        flex-shrink: 0;
    }
}


/* ============================================================
   PRODUCT MODAL — Full Mobile Responsive
   ============================================================ */

/* ── 767px and below ── */
@media (max-width: 767px) {

    /* Product type switcher: 4 buttons → 2×2 */
    .prod-type-switcher {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .prod-type-btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

    .prod-type-text small {
        display: none;
    }

    /* Formula header — label + button wrap */
    .formula-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Slab rows — wrap */
    .slab-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .slab-row input {
        min-width: 80px;
    }

    /* Variant row header — wrap action buttons */
    .variant-row > div:first-child {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Visibility grid in client modal */
    .visibility-grid {
        grid-template-columns: 1fr;
    }

    /* Hide section hint on mobile */
    .prod-field-section-hint {
        display: none;
    }

    /* Formula row — wrap */
    .formula-row {
        flex-wrap: wrap;
    }

    /* Modal footer — stacked buttons */
    .modal-footer {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    .modal-footer .btn-modal-save,
    .modal-footer .btn-modal-cancel,
    .modal-footer .btn-animated,
    .modal-footer .btn-secondary-animated {
        width: 100%;
        justify-content: center;
    }

    /* PDF signature strip */
    .pdf-sig-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* ── 480px and below ── */
@media (max-width: 480px) {

    /* Product type buttons → full width */
    .prod-type-btn {
        flex: 1 1 100%;
    }

    .prod-type-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .prod-type-text strong {
        font-size: 0.8rem;
    }

    /* Variant slab rows inside variant — wrap */
    .variant-slab-row {
        flex-wrap: wrap !important;
    }

    /* Sync Qty label — hide on tiny screens */
    #syncQtyLabel {
        display: none;
    }

    /* Add variant/slab buttons — full width */
    .formula-header .btn-add-row {
        width: 100%;
        justify-content: center;
    }

    .prod-field-section-label {
        font-size: 0.68rem;
    }
}

/* ── 360px and below ── */
@media (max-width: 360px) {

    .prod-type-btn {
        padding: 0.5rem;
        gap: 0.4rem;
    }

    .prod-type-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .prod-type-text strong {
        font-size: 0.75rem;
    }
}


/* ============================================================
   HERO HEADERS — All Sections Stack on Mobile
   ============================================================ */
@media (max-width: 600px) {

    .rm-hero-content,
    .products-hero-content,
    .cl-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .rm-hero-actions,
    .products-hero-actions,
    .cl-hero-actions {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .rm-add-btn,
    .cl-add-btn,
    .products-add-btn,
    .btn-secondary-action {
        width: 100%;
        justify-content: center;
    }

    .section-topbar > * {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   GENERATOR — Mobile Stack
   ============================================================ */
@media (max-width: 600px) {

    .gen-hero-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .gen-hero-actions .btn-animated,
    .gen-hero-actions .btn-secondary-animated {
        width: 100%;
        justify-content: center;
    }

    .gen-step-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tpl-card {
        width: calc(50% - 0.25rem);
        min-width: 0;
    }

    .gen-actions-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .gen-action-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   PROFILE & SETTINGS TABS — Scrollable, No Overflow
   ============================================================ */
@media (max-width: 600px) {

    .prof-tabs-nav,
    .stg-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .prof-tabs-nav::-webkit-scrollbar,
    .stg-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .prof-tab,
    .stg-tab {
        flex-shrink: 0;
    }
}


/* ============================================================
   UNIVERSAL MODAL — Near Fullscreen on Mobile
   ============================================================ */
@media (max-width: 600px) {

    .modal-dialog {
        margin: 0.25rem !important;
        max-width: calc(100vw - 0.5rem) !important;
    }

    .modal-content {
        max-height: 97vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
    }

    .modal-body {
        padding: 1rem !important;
    }

    /* iOS zoom fix for all modal inputs */
    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        font-size: 16px !important;
    }
}