/**
 * BizFlow Pro - Complete Responsive Stylesheet
 * All breakpoints from 320px mobile to 2560px ultrawide
 * Covers: Dashboard, Invoice Creator, Auth, Homepage,
 * Blog, Archive, Client pages & all components
 *
 * @package BizFlow_Pro
 * @version 1.0.0
 */

/* ============================================
   BREAKPOINT REFERENCE
   ============================================
   xs:    < 480px   (small phones)
   sm:    < 640px   (phones)
   md:    < 768px   (tablets portrait)
   lg:    < 1024px  (tablets landscape / small laptop)
   xl:    < 1280px  (laptop)
   2xl:   < 1536px  (desktop)
   3xl:   < 1920px  (large desktop)
   4xl:   >= 1920px (ultrawide)
   ============================================ */

/* ============================================
   ULTRAWIDE / LARGE DESKTOP (1920px+)
   ============================================ */

@media (min-width: 1920px) {

    :root {
        --container-max: 1440px;
    }

    .hero-section { padding: 8rem 0 10rem; }
    .hero-title   { font-size: 4rem; }

    .features-grid    { grid-template-columns: repeat(4, 1fr); }
    .tools-grid       { grid-template-columns: repeat(5, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(4, 1fr); }

    .dashboard-sidebar { width: 280px; min-width: 280px; }
    .creator-layout    { grid-template-columns: 1fr 320px; }
    .doc-view-container { max-width: 1400px; }
}

/* ============================================
   LARGE DESKTOP (1280px - 1920px)
   ============================================ */

@media (min-width: 1280px) and (max-width: 1919px) {

    :root { --container-max: 1280px; }

    .features-grid     { grid-template-columns: repeat(3, 1fr); }
    .tools-grid        { grid-template-columns: repeat(3, 1fr); }
    .stats-cards-grid  { grid-template-columns: repeat(4, 1fr); }
    .pricing-grid      { grid-template-columns: repeat(4, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(3, 1fr); }

}

/* ============================================
   LAPTOP / STANDARD DESKTOP (1024px - 1280px)
   ============================================ */

@media (max-width: 1280px) {

    :root {
        --container-max: 1024px;
    }

    /* Layout */
    .creator-layout {
        grid-template-columns: 1fr 260px;
        gap: 1rem;
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .pricing-card.featured {
        transform: none;
    }

    /* Comparison table */
    .comparison-table thead th,
    .comparison-table tbody td {
        padding: .75rem .875rem;
        font-size: .8125rem;
    }

    /* Dashboard */
    .dashboard-grid { grid-template-columns: 1fr 300px; }
    .stats-cards-grid { grid-template-columns: repeat(2, 1fr); }

    /* Doc view */
    .doc-view-container {
        max-width: 1100px;
        grid-template-columns: 1fr 280px;
    }

    /* Settings layout */
    .settings-layout {
        grid-template-columns: 200px 1fr;
    }

    /* Clients */
    .client-detail-grid { grid-template-columns: 1fr 1fr; }

}

/* ============================================
   TABLET LANDSCAPE / SMALL LAPTOP (768px - 1024px)
   ============================================ */

@media (max-width: 1024px) {

    /* ---- Navigation ---- */
    .main-nav        { display: none; }
    .mega-menu       { display: none; }
    .mobile-menu-toggle { display: flex; }

    /* Mobile nav */
    .mobile-nav {
        display: block;
    }

    /* ---- Hero ---- */
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .hero-text { max-width: 100%; }
    .hero-image { display: none; }

    .hero-actions    { justify-content: center; }
    .hero-social-proof { justify-content: center; }
    .hero-stats      { justify-content: center; }

    /* ---- Features ---- */
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .tools-grid    { grid-template-columns: repeat(2, 1fr); }

    /* ---- Stats counter ---- */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---- Pricing ---- */
    .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }

    /* ---- Testimonials ---- */
    .testimonials-grid  { grid-template-columns: repeat(2, 1fr); }
    .testimonials-summary { flex-direction: column; gap: 1rem; }

    /* ---- FAQ ---- */
    .faq-list { max-width: 100%; }

    /* ---- Footer ---- */
    .footer-grid  { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .footer-brand { grid-column: 1 / -1; }

    /* ---- Dashboard ---- */
    .dashboard-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100vh;
        z-index: 400;
        transition: left .3s ease;
        box-shadow: none;
    }

    .dashboard-sidebar.mobile-open {
        left: 0;
        box-shadow: 0 0 60px rgba(0,0,0,.4);
    }

    .dashboard-main  { padding: 1rem; }
    .dashboard-grid  { grid-template-columns: 1fr; }
    .stats-cards-grid { grid-template-columns: repeat(2, 1fr); }

    .dashboard-col-side {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* ---- Creator ---- */
    .creator-layout {
        grid-template-columns: 1fr;
    }

    .creator-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* ---- Auth ---- */
    .auth-page-wrapper    { grid-template-columns: 1fr; }
    .auth-left-panel      { display: none; }
    .auth-right-panel     {
        padding: 2rem 1.5rem;
        padding-top: 3rem;
        align-items: flex-start;
        min-height: 100vh;
    }
    .auth-mobile-logo     { display: flex; }
    .register-right       { align-items: flex-start; }

    /* ---- Doc view ---- */
    .doc-view-container {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .doc-view-panel {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- Search ---- */
    .search-results-layout { grid-template-columns: 1fr; }
    .search-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- Archive ---- */
    .archive-content-layout { grid-template-columns: 1fr; }
    .archive-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        max-height: none;
    }

    /* ---- Blog ---- */
    .content-area-layout { grid-template-columns: 1fr; }
    .site-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- Page ---- */
    .page-content-layout.has-sidebar { grid-template-columns: 1fr; }
    .page-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- Settings ---- */
    .settings-layout    { grid-template-columns: 1fr; }
    .settings-nav {
        flex-direction: row;
        overflow-x: auto;
        position: static;
        padding: .375rem;
        flex-wrap: nowrap;
    }
    .settings-nav-item { white-space: nowrap; flex-shrink: 0; }

    /* ---- Single post ---- */
    .post-body-layout   { grid-template-columns: 1fr; }
    .post-sticky-share  { display: none; }
    .post-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .related-posts-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---- Profile ---- */
    .profile-header-stats {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--gray-100);
        padding-top: 1rem;
        width: 100%;
        justify-content: flex-start;
    }

    /* ---- Company switcher (header) ---- */
    .company-name { max-width: 80px; }
    .user-display-name { display: none; }

    /* ---- Clients ---- */
    .client-detail-grid { grid-template-columns: 1fr; }
    .clients-filter-form { flex-direction: column; align-items: stretch; }

    /* ---- Reports ---- */
    .reports-grid { grid-template-columns: 1fr; }

    /* ---- Plans ---- */
    .plan-cards-grid { grid-template-columns: 1fr; }
    .error-popular-grid { grid-template-columns: 1fr; }

}

/* ============================================
   TABLET PORTRAIT (640px - 768px)
   ============================================ */

@media (max-width: 768px) {

    :root {
        --header-height:  56px;
        --spacing-20:     4rem;
        --spacing-24:     5rem;
        --text-4xl:       2rem;
        --text-5xl:       2.5rem;
    }

    /* ---- Typography ---- */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    /* ---- Container ---- */
    .container { padding: 0 var(--spacing-4); }

    /* ---- Hero ---- */
    .hero-section { padding: 4rem 0 5rem; min-height: auto; }
    .hero-title   { font-size: clamp(1.75rem, 5vw, 2.5rem); }
    .hero-subtitle { font-size: 1rem; }
    .hero-actions  { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; }
    .hero-stats    { gap: 1rem; }

    /* ---- Features ---- */
    .features-grid { grid-template-columns: 1fr; }
    .tools-grid    { grid-template-columns: 1fr; }
    .feature-card  { padding: 1.5rem; }

    /* ---- How it works ---- */
    .hiw-steps { flex-direction: column; align-items: center; }
    .hiw-step  { max-width: 100%; }

    /* ---- Pricing ---- */
    .pricing-grid    { grid-template-columns: 1fr; }
    .pricing-toggle  { }
    .pricing-save-badge { }
    .guarantee-icon  { display: none; }

    /* ---- Stats ---- */
    .stats-grid      { grid-template-columns: repeat(2, 1fr); }
    .stats-section   { padding: 3rem 0; }
    .stat-counter-value { font-size: 2rem; }

    /* ---- Testimonials ---- */
    .testimonials-grid { grid-template-columns: 1fr; }
    .summary-platforms { gap: 1rem; }

    /* ---- Comparison ---- */
    .comparison-table-wrapper { border-radius: var(--radius-xl); }
    .comparison-table thead th { font-size: .6875rem; padding: .625rem .75rem; }
    .comparison-table tbody td { padding: .625rem .75rem; font-size: .8125rem; }

    /* ---- FAQ ---- */
    .faq-question { font-size: .9375rem; padding: var(--spacing-4) var(--spacing-5); }

    /* ---- CTA ---- */
    .cta-title    { font-size: 1.75rem; }
    .cta-actions  { flex-direction: column; align-items: center; width: 100%; }
    .cta-actions .btn { width: 100%; justify-content: center; }
    .cta-features-list { gap: .75rem; }

    /* ---- Footer ---- */
    .footer-grid        { grid-template-columns: 1fr; }
    .footer-brand       { grid-column: auto; }
    .footer-bottom      { flex-direction: column; text-align: center; }
    .footer-bottom-links,
    .footer-bottom-nav-list { justify-content: center; }
    .footer-payment-icons   { justify-content: center; }
    .footer-trust-grid  { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .footer-locale-inner { flex-direction: column; align-items: flex-start; }
    .app-footer-inner   { flex-direction: column; text-align: center; gap: .5rem; }

    /* ---- Newsletter (footer) ---- */
    .footer-newsletter-inner { flex-direction: column; text-align: center; }
    .footer-newsletter-form  { width: 100%; max-width: 100%; }
    .newsletter-input-group  { flex-direction: column; }
    .newsletter-btn { width: 100%; }

    /* ---- Dashboard ---- */
    .dashboard-page-header  { flex-direction: column; align-items: flex-start; }
    .stats-cards-grid       { grid-template-columns: 1fr 1fr; }
    .quick-create-grid      { grid-template-columns: repeat(4, 1fr); }
    .dashboard-col-side     { grid-template-columns: 1fr; }

    /* ---- Invoice/Creator ---- */
    .creator-header         { flex-direction: column; align-items: flex-start; }
    .creator-header-actions { width: 100%; justify-content: flex-end; }
    .creator-form-grid      { grid-template-columns: 1fr; }
    .creator-sidebar        { grid-template-columns: 1fr; }
    .totals-section         { justify-content: stretch; }
    .totals-table-wrapper   { max-width: 100%; }
    .items-table            { min-width: 600px; }
    .client-search-wrapper  { flex-direction: column; }
    .form-row               { grid-template-columns: 1fr; }

    /* ---- Auth ---- */
    .auth-right-panel   { padding: 1.5rem 1rem; padding-top: 2rem; }
    .auth-form-title    { font-size: 1.5rem; }
    .auth-social-buttons { grid-template-columns: 1fr; }
    .auth-trust-badges  { flex-direction: column; gap: .75rem; align-items: flex-start; }
    .register-right     { padding: 1.5rem 1rem; }

    /* ---- Progress steps (register) ---- */
    .progress-step-label { display: none; }

    /* ---- Doc view ---- */
    .doc-view-topbar-inner { flex-wrap: wrap; height: auto; padding: .75rem 1rem; gap: .5rem; }
    .doc-topbar-actions    { flex-wrap: wrap; width: 100%; }
    .doc-view-panel        { grid-template-columns: 1fr; }
    .document-header       { flex-direction: column; padding: 1.25rem; }
    .document-title-block  { text-align: left; }
    .document-addresses    { flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
    .document-footer-notes { grid-template-columns: 1fr; margin: 0 1rem 1rem; }
    .document-items-wrapper { padding: 0 1rem 1rem; overflow-x: auto; }
    .document-totals-section { padding: 0 1rem 1rem; }
    .document-totals-wrapper  { max-width: 100%; }
    .document-type-label   { font-size: 1.5rem; }
    .document-gst-summary  { margin: 0 1rem 1rem; overflow-x: auto; }

    /* ---- Doc header ---- */
    .document-stamp { font-size: 1.5rem; padding: .25rem .75rem; }

    /* ---- Settings ---- */
    .settings-form-grid     { grid-template-columns: 1fr; }
    .branding-grid          { grid-template-columns: 1fr; }
    .profile-companies-header { flex-wrap: wrap; }
    .company-card           { flex-direction: column; }
    .invite-form-row        { flex-direction: column; }

    /* ---- Profile ---- */
    .profile-header-content { flex-direction: column; }
    .profile-form-grid      { grid-template-columns: 1fr; }
    .security-info-grid     { grid-template-columns: 1fr; }
    .profile-danger-item    { flex-direction: column; align-items: flex-start; }
    .client-financial-stats { grid-template-columns: 1fr 1fr; }
    .profile-form-grid-narrow { max-width: 100%; }

    /* ---- Clients ---- */
    .client-form-grid     { grid-template-columns: 1fr; }
    .client-profile-card  { flex-direction: column; text-align: center; }
    .client-profile-actions { justify-content: center; }

    /* ---- Search ---- */
    .search-hero-title     { font-size: 1.5rem; }
    .search-hero-btn       { padding: .875rem 1rem; font-size: var(--text-sm); }
    .search-results-layout { grid-template-columns: 1fr; }
    .search-sidebar        { grid-template-columns: 1fr; }
    .search-type-filters   { flex-wrap: wrap; }
    .no-results-tools-grid { grid-template-columns: 1fr; }
    .suggestion-chips-grid { }

    /* ---- Single post ---- */
    .post-hero              { padding: 2.5rem 0; }
    .post-hero-title        { font-size: clamp(1.5rem, 5vw, 2.5rem); }
    .post-hero-meta         { flex-wrap: wrap; gap: .75rem; }
    .post-meta-divider      { display: none; }
    .post-entry-content     { padding: 1.25rem; }
    .post-article-footer    { padding: 0 1.25rem 1.25rem; }
    .post-comments-section  { padding: 1.5rem 1.25rem; }
    .author-bio-card        { flex-direction: column; padding: 1.25rem; gap: 1rem; }
    .author-bio-header      { flex-direction: column; }
    .related-posts-grid     { grid-template-columns: 1fr; }
    .post-sidebar           { grid-template-columns: 1fr; }
    .post-navigation        { grid-template-columns: 1fr; }
    .post-nav-link-next     { text-align: left; }
    .share-full-buttons     { flex-wrap: wrap; }
    .share-full-btn         { font-size: var(--text-xs); padding: .5rem .875rem; }
    .table-of-contents      { }

    /* ---- Page ---- */
    .page-entry-content     { padding: 1.25rem; }
    .page-entry-footer      { padding: .75rem 1.25rem; }
    .page-comments-section  { padding: 1.5rem 1.25rem; }
    .page-title-bar         { padding: 1.5rem 0; }
    .page-title-heading     { font-size: 1.5rem; }
    .comment-form-fields-row { grid-template-columns: 1fr; }

    /* ---- 404 ---- */
    .error-404-hero         { padding: 3rem 0; min-height: auto; }
    .error-404-hero-inner   { grid-template-columns: 1fr; text-align: center; }
    .error-404-illustration { order: -1; }
    .error-404-svg          { max-width: 260px; }
    .error-404-actions      { flex-direction: column; align-items: center; }
    .error-404-actions .btn { width: 100%; justify-content: center; }
    .error-tools-grid       { grid-template-columns: 1fr; }
    .error-popular-grid     { grid-template-columns: 1fr; }
    .error-register-cta     { padding: 1.5rem; }
    .error-cta-content      { flex-direction: column; text-align: center; }
    .error-cta-actions      { justify-content: center; }

    /* ---- Archive ---- */
    .archive-posts-container.view-grid { grid-template-columns: 1fr; }
    .archive-post-card.is-featured { flex-direction: column; }
    .archive-posts-container.view-list .archive-post-card { grid-template-columns: 1fr; }
    .archive-sidebar { grid-template-columns: 1fr; }
    .archive-toolbar { flex-direction: column; align-items: flex-start; }

    /* ---- Comments ---- */
    .comment-form-fields-row { grid-template-columns: 1fr; }
    .comments-header { flex-direction: column; align-items: flex-start; }
    .comments-list .children { padding-left: 1rem; margin-left: 1rem; }
    .comment-header { flex-wrap: wrap; gap: .5rem; }
    .comment-actions { width: 100%; }

    /* ---- Reports ---- */
    .reports-stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---- Pagination ---- */
    .pagination { flex-direction: column; gap: .75rem; }
    .search-pagination { flex-direction: column; align-items: flex-start; }
    .archive-pagination { flex-direction: column; align-items: flex-start; }

    /* ---- Modal ---- */
    .modal { margin: 1rem; width: calc(100% - 2rem); }

    /* ---- Toast ---- */
    .toast-container { left: 1rem; right: 1rem; }
    .toast { min-width: unset; max-width: 100%; }

    /* ---- Cookie ---- */
    .cookie-banner-inner { flex-direction: column; }
    .cookie-banner-actions { width: 100%; justify-content: flex-end; }

    /* ---- Notification panel ---- */
    .notification-panel {
        min-width: calc(100vw - 2rem);
        right: -1rem;
    }

}

/* ============================================
   PHONE (480px - 640px)
   ============================================ */

@media (max-width: 640px) {

    /* ---- Hero ---- */
    .hero-title   { font-size: 1.875rem; }
    .hero-subtitle { font-size: .9375rem; }
    .hero-badge   { font-size: .75rem; }

    /* ---- Section headers ---- */
    .section-title  { font-size: 1.75rem; }
    .section-subtitle { font-size: .9375rem; }

    /* ---- Dashboard ---- */
    .stats-cards-grid { grid-template-columns: 1fr 1fr; }
    .quick-create-grid { grid-template-columns: repeat(2, 1fr); }
    .doc-stats-row { grid-template-columns: repeat(2, 1fr); }

    /* ---- Posts ---- */
    .posts-grid { grid-template-columns: 1fr; }
    .archive-posts-container.view-list .archive-post-card { grid-template-columns: 140px 1fr; }

    /* ---- Invoice creator ---- */
    .numbering-preview-wrapper { flex-direction: column; align-items: flex-start; }
    .prefix-input-wrapper .form-control { max-width: 100%; width: 100%; }

    /* ---- Quick start grid (register) ---- */
    .quick-start-grid { grid-template-columns: 1fr; }

    /* ---- Form row ---- */
    .step-nav-buttons { flex-direction: column-reverse; gap: .625rem; }
    .step-nav-buttons .btn { width: 100%; justify-content: center; }

    /* ---- Password requirements ---- */
    .password-requirements { grid-template-columns: 1fr; }

    /* ---- Tools grid (home) ---- */
    .tools-grid { grid-template-columns: 1fr; }

    /* ---- Plans (error page) ---- */
    .error-tools-grid { grid-template-columns: 1fr; }

    /* ---- Register benefits ---- */
    .suggestion-chips-grid { }

    /* ---- Archive ---- */
    .archive-categories-grid { grid-template-columns: 1fr; }
    .archive-hero-content { flex-direction: column; gap: 1rem; }
    .author-archive-header { flex-direction: column; gap: 1rem; }

    /* ---- Doc view ---- */
    .document-type-label { font-size: 1.25rem; }
    .document-number { font-size: .9375rem; }
    .document-stamp { font-size: 1.25rem; }

    /* ---- Invoice panel ---- */
    .doc-view-panel { grid-template-columns: 1fr; }

    /* ---- Signature actions ---- */
    .signature-actions { flex-direction: column; }
    .signature-actions .btn { width: 100%; justify-content: center; }

    /* ---- Reports ---- */
    .reports-stats-grid { grid-template-columns: 1fr; }

    /* ---- Profile tabs ---- */
    .profile-tab { padding: .75rem .625rem; font-size: .75rem; }
    .profile-tab span:first-child { display: none; }
    .client-financial-stats { grid-template-columns: 1fr 1fr; }
    .client-quick-actions { grid-template-columns: 1fr 1fr; }

    /* ---- 404 ---- */
    .no-results-hero { padding: 2rem 1rem; }
    .no-results-title { font-size: 1.25rem; }

    /* ---- Comment ---- */
    .comment-body { border-radius: var(--radius-xl); }
    .comments-list .children { padding-left: .75rem; margin-left: .75rem; }

    /* ---- Search ---- */
    .search-result-item { flex-wrap: wrap; }
    .search-result-arrow { display: none; }
    .search-hero-input-wrapper { border-radius: var(--radius-xl); }

    /* ---- Single post ---- */
    .post-hero-share  { flex-wrap: wrap; gap: .5rem; }
    .inline-promo-box { flex-direction: column; text-align: center; }
    .promo-box-cta    { width: 100%; justify-content: center; }
    .post-share-buttons { justify-content: center; flex-wrap: wrap; }
    .table-of-contents {}
    .author-bio-card  { padding: 1rem; }

    /* ---- Auth ---- */
    .auth-social-buttons { gap: .5rem; }
    .btn-social { justify-content: flex-start; padding-left: 1rem; }

    /* ---- Cookie ---- */
    .cookie-banner {
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        border-bottom: none;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* ---- Modals ---- */
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer .btn { width: 100%; }

}

/* ============================================
   SMALL PHONE (< 480px)
   ============================================ */

@media (max-width: 480px) {

    :root {
        --header-height:  52px;
        --spacing-12:     2.5rem;
        --spacing-16:     3rem;
        --spacing-20:     3.5rem;
        --spacing-24:     4rem;
    }

    /* ---- Base typography ---- */
    body { font-size: .9375rem; }

    /* ---- Container ---- */
    .container { padding: 0 var(--spacing-3); }

    /* ---- Header ---- */
    .header-inner { gap: var(--spacing-2); }
    .logo-text    { font-size: 1.0625rem; }
    .logo-icon    { width: 32px; height: 32px; }

    /* ---- Hero ---- */
    .hero-section   { padding: 3rem 0 4rem; }
    .hero-title     { font-size: 1.75rem; }
    .hero-badge     { font-size: .75rem; padding: 5px 10px; }
    .hero-stats     { gap: .875rem; }
    .hero-stat-value { font-size: 1.25rem; }

    /* ---- Sections ---- */
    .features-section,
    .tools-section,
    .how-it-works-section,
    .pricing-section,
    .testimonials-section,
    .faq-section { padding: 3rem 0; }

    /* ---- Section title ---- */
    .section-title { font-size: 1.625rem; }

    /* ---- Stats ---- */
    .stats-grid       { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .stat-counter-icon { font-size: 1.75rem; }
    .stat-counter-value { font-size: 1.75rem; }

    /* ---- How it works ---- */
    .hiw-step-icon { width: 56px; height: 56px; font-size: 1.5rem; }

    /* ---- CTA ---- */
    .cta-title       { font-size: 1.5rem; }
    .cta-float-icon  { font-size: 1rem; }

    /* ---- Footer ---- */
    .footer-app-badges     { flex-direction: column; }
    .footer-trust-grid     { gap: .75rem; }
    .footer-awards         { flex-wrap: wrap; gap: .75rem; }
    .footer-locale-selectors { flex-direction: column; }
    .footer-social         { justify-content: flex-start; }

    /* ---- Dashboard ---- */
    .stats-cards-grid   { grid-template-columns: 1fr; }
    .quick-create-grid  { grid-template-columns: repeat(2, 1fr); }

    /* ---- Doc stats row ---- */
    .doc-stats-row { grid-template-columns: repeat(2, 1fr); }
    .doc-stat-chip { padding: .5rem .75rem; }
    .doc-stat-value { font-size: .9375rem; }

    /* ---- Filters ---- */
    .filter-item,
    .filter-search { width: 100%; }
    .filter-actions { width: 100%; }

    /* ---- Bulk action bar ---- */
    .bulk-action-bar { flex-wrap: wrap; }

    /* ---- Table ---- */
    .table-wrapper { border-radius: var(--radius-xl); }

    /* ---- Invoice items ---- */
    .items-table { min-width: 560px; }

    /* ---- Totals ---- */
    .totals-section { padding: .875rem; }

    /* ---- Auth ---- */
    .auth-form-title    { font-size: 1.375rem; }
    .auth-submit-btn    { height: 48px; font-size: .9375rem; }

    /* ---- Register progress ---- */
    .progress-steps { }

    /* ---- Success animation ---- */
    .success-title    { font-size: 1.625rem; }
    .success-circle   { width: 80px; height: 80px; }

    /* ---- Company card ---- */
    .company-card-logo { width: 48px; height: 48px; font-size: .875rem; }

    /* ---- Profile ---- */
    .profile-display-name    { font-size: 1.25rem; }
    .profile-avatar-wrapper  { width: 68px; height: 68px; }
    .profile-header-stat strong { font-size: 1.0625rem; }

    /* ---- Clients ---- */
    .clients-stats-row { flex-direction: column; }
    .client-stat-chip  { width: 100%; }
    .client-profile-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
    .client-profile-name   { font-size: 1.25rem; }

    /* ---- Post ---- */
    .post-hero-title      { font-size: 1.5rem; }
    .post-entry-content   { padding: 1rem; }
    .post-article-footer  { padding: 0 1rem 1rem; }
    .related-posts-title  { font-size: 1.25rem; }
    .author-bio-name      { font-size: 1.0625rem; }

    /* ---- Page ---- */
    .page-entry-content   { padding: 1rem; }
    .page-entry-content table { display: block; overflow-x: auto; }

    /* ---- Search ---- */
    .search-hero-title  { font-size: 1.375rem; }
    .search-hero-input  { font-size: .9375rem; padding-left: 2.75rem; }
    .search-hero-btn    { padding: .875rem 1rem; }
    .search-suggestions { flex-direction: column; text-align: center; }

    /* ---- 404 ---- */
    .error-404-title  { font-size: 1.5rem; }
    .error-404-svg    { max-width: 200px; }

    /* ---- Pagination ---- */
    .page-btn, .pagination-links a, .pagination-links span {
        min-width: 34px;
        height: 34px;
        font-size: var(--text-xs);
    }

    /* ---- Breadcrumbs ---- */
    .breadcrumb-link { font-size: .75rem; }
    .breadcrumb-sep  { margin: 0 .25rem; }

    /* ---- Notifications ---- */
    .notification-title  { font-size: .8125rem; }
    .notification-message { font-size: .75rem; }

    /* ---- Cookie banner ---- */
    .cookie-banner-inner { gap: .75rem; }
    .cookie-icon         { font-size: 1.25rem; }
    .cookie-text strong  { font-size: .875rem; }
    .cookie-text p       { font-size: .75rem; }

    /* ---- Report cards ---- */
    .reports-stats-grid { grid-template-columns: 1fr; }

    /* ---- Company switcher ---- */
    .company-info { display: none; }
    .company-switcher-btn { padding: 4px 8px; }

    /* ---- Error 404 tools ---- */
    .error-tools-grid { grid-template-columns: 1fr; }

    /* ---- User menu panel ---- */
    .user-menu-panel { min-width: 220px; }

}

/* ============================================
   EXTRA SMALL (< 360px)
   ============================================ */

@media (max-width: 360px) {

    :root { font-size: 14px; }

    .hero-title  { font-size: 1.5rem; }
    .logo-text   { display: none; }
    .stats-grid  { grid-template-columns: 1fr; }
    .hero-stats  { flex-direction: column; gap: .75rem; }

    .stats-cards-grid { grid-template-columns: 1fr; }
    .quick-create-grid { grid-template-columns: repeat(2, 1fr); }

    .auth-form-title { font-size: 1.25rem; }

    .profile-tab span { display: none; }
    .profile-tab      { padding: .625rem .75rem; }

    .company-switcher-btn { max-width: 120px; }

    .doc-stat-chip  { min-width: unset; }
    .doc-stats-row  { gap: .5rem; }

}

/* ============================================
   PRINT MEDIA
   ============================================ */

@media print {

    /* Hide all navigation & UI */
    .site-header,
    .site-footer,
    .dashboard-sidebar,
    .dashboard-col-side,
    .creator-header,
    .creator-sidebar,
    .doc-view-topbar,
    .doc-view-panel,
    .invoice-view-actions,
    .scroll-top-btn,
    .toast-container,
    .modal-overlay,
    .cookie-banner,
    .mobile-nav,
    .mobile-menu-toggle,
    .no-print,
    .btn:not(.print-visible),
    .filters-card,
    .bulk-action-bar,
    .doc-stats-row,
    .pagination,
    nav,
    aside {
        display: none !important;
    }

    /* Reset for print */
    body {
        font-size: 11pt;
        line-height: 1.5;
        color: #000 !important;
        background: #fff !important;
    }

    .container,
    .dashboard-main,
    .dashboard-layout,
    .doc-view-container,
    .doc-view-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Force colors */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Page breaks */
    .document-items-table { page-break-inside: auto; }
    .document-totals-section,
    .document-signature-section,
    .document-footer-bar { page-break-before: auto; }

    .page-break-before { page-break-before: always; }
    .page-break-after  { page-break-after: always; }

    /* Links */
    a[href]:after { content: none !important; }
    a { color: inherit !important; }

}

/* ============================================
   DARK MODE (System preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Dark mode is not fully implemented yet.
       Uncomment to enable when ready. */

    /*
    :root {
        --gray-50:  #1F2937;
        --gray-100: #374151;
        --gray-200: #4B5563;
        --gray-300: #6B7280;
        --gray-400: #9CA3AF;
        --gray-500: #D1D5DB;
        --gray-600: #E5E7EB;
        --gray-700: #F3F4F6;
        --gray-800: #F9FAFB;
        --gray-900: #FFFFFF;
        --white:    #111827;
    }

    body { background: #0F172A; }
    .site-header { background: #1E293B; }
    .card, .sidebar-widget { background: #1E293B; border-color: #334155; }
    */
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto !important;
    }

    /* Keep functional transitions */
    .modal-overlay         { transition: opacity .01ms; }
    .dropdown-menu         { transition: opacity .01ms; }
    .mobile-nav            { transition: transform .01ms; }
    .dashboard-sidebar     { transition: left .01ms, width .01ms; }

    /* Disable decorative animations */
    .hero-badge-dot,
    .status-dot,
    .notification-badge,
    .overdue-label::before,
    .auth-bg-circle-1,
    .auth-bg-circle-2,
    .success-circle,
    .success-checkmark,
    .confetti-piece,
    .animate-float,
    .float-card,
    .hero-image { animation: none !important; }

    /* Keep essential transforms disabled */
    .btn:hover        { transform: none !important; }
    .card:hover       { transform: none !important; }
    .tool-card:hover  { transform: none !important; }
    .error-tool-card:hover { transform: none !important; }
    .quick-start-item:hover { transform: none !important; }

    /* Logo float */
    .auth-bg-circle { animation: none !important; }
    .illustrationFloat { animation: none !important; }

}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {

    :root {
        --primary-color:   #0000CC;
        --secondary-color: #006600;
        --danger-color:    #CC0000;
        --gray-200:        #666666;
        --gray-300:        #444444;
    }

    .btn-primary {
        border: 2px solid #000 !important;
    }

    .form-control {
        border-width: 2px;
        border-color: #000;
    }

    .form-control:focus {
        border-color: #0000CC;
        box-shadow: 0 0 0 3px rgba(0,0,204,.3);
    }

    .card {
        border-width: 2px;
    }

    a { text-decoration: underline; }

    .status-badge {
        border: 2px solid currentColor;
    }

    .progress-step-circle { border-width: 3px; }

    .toggle-slider { border: 2px solid #000; }

    /* Ensure focus is visible */
    :focus-visible {
        outline: 3px solid #0000CC !important;
        outline-offset: 3px !important;
    }

}

/* ============================================
   FORCED COLORS (Windows High Contrast)
   ============================================ */

@media (forced-colors: active) {

    .btn-primary {
        forced-color-adjust: none;
        background: ButtonText;
        color: ButtonFace;
        border: 2px solid ButtonText;
    }

    .badge,
    .status-badge {
        forced-color-adjust: none;
    }

    .toggle-slider {
        forced-color-adjust: none;
    }

}

/* ============================================
   LANDSCAPE PHONE SPECIFIC
   ============================================ */

@media (max-width: 812px) and (orientation: landscape) {

    .hero-section { min-height: auto; padding: 2rem 0; }
    .auth-right-panel { min-height: auto; }
    .auth-wrapper { min-height: auto; }

    /* Signature canvas height reduction */
    .signature-canvas { height: 80px; }

    /* Less padding in modals */
    .modal-body { padding: 1rem; max-height: 60vh; }

}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .btn            { min-height: 44px; }
    .nav-link       { min-height: 44px; padding: .75rem 1rem; }
    .sidebar-nav-item { min-height: 44px; }
    .dropdown-item  { min-height: 44px; }
    .tab-item       { min-height: 44px; }
    .row-action-btn { width: 40px; height: 40px; }
    .page-btn       { min-width: 44px; height: 44px; }

    /* Remove hover effects that don't make sense on touch */
    .btn:hover      { transform: none; }
    .card:hover     { transform: none; box-shadow: var(--shadow-sm); }

    /* Better scrolling on touch */
    .table-wrapper  { -webkit-overflow-scrolling: touch; }
    .tabs           { -webkit-overflow-scrolling: touch; }
    .items-table-wrapper { -webkit-overflow-scrolling: touch; }
    .archive-posts-container.view-list { overflow-x: auto; }

    /* Show actions always on touch (not on hover) */
    .row-actions    { opacity: 1 !important; }
    .item-action-btns { opacity: 1 !important; }

    /* Larger checkboxes */
    .form-check-input { width: 20px; height: 20px; min-width: 20px; }

    /* Toggle switch bigger */
    .toggle-slider { width: 52px; height: 28px; }
    .toggle-slider::before { width: 22px; height: 22px; top: 3px; left: 3px; }
    input:checked + .toggle-slider::before { transform: translateX(24px); }

}

/* ============================================
   FINE POINTER (MOUSE) OPTIMIZATIONS
   ============================================ */

@media (hover: hover) and (pointer: fine) {

    /* Enable hover effects */
    .card:hover           { transform: translateY(-2px); }
    .tool-card:hover      { transform: translateY(-4px); }
    .feature-card:hover   { transform: translateY(-4px); }
    .archive-post-card:hover { transform: translateY(-3px); }
    .testimonial-card:hover { transform: translateY(-2px); }

    /* Show row actions only on hover */
    .row-actions { opacity: 0; }
    tr:hover .row-actions { opacity: 1; }

    .item-action-btns { opacity: 0; }
    .line-item-row:hover .item-action-btns { opacity: 1; }

}

/* ============================================
   FOCUS VISIBLE (Keyboard nav)
   ============================================ */

:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Focus for specific elements */
.btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.form-control:focus-visible {
    outline: none; /* Uses box-shadow instead */
}

.nav-link:focus-visible,
.sidebar-nav-item:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}

/* ============================================
   CUSTOM SCROLLBAR (WebKit)
   ============================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-full);
    transition: background .2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

/* ============================================
   SELECTION COLOR
   ============================================ */

::selection {
    background: var(--primary-xlight);
    color: var(--primary-dark);
}

::-moz-selection {
    background: var(--primary-xlight);
    color: var(--primary-dark);
}

/* ============================================
   PLACEHOLDER COLOR
   ============================================ */

::placeholder {
    color: var(--gray-400);
    opacity: 1;
}

:-ms-input-placeholder { color: var(--gray-400); }

/* ============================================
   UTILITY RESPONSIVE CLASSES
   ============================================ */

/* Hide on specific breakpoints */
@media (max-width: 480px)  { .hide-xs   { display: none !important; } }
@media (max-width: 640px)  { .hide-sm   { display: none !important; } }
@media (max-width: 768px)  { .hide-md   { display: none !important; } }
@media (max-width: 1024px) { .hide-lg   { display: none !important; } }
@media (max-width: 1280px) { .hide-xl   { display: none !important; } }

/* Show only on specific breakpoints */
@media (min-width: 481px)  { .show-xs-only { display: none !important; } }
@media (min-width: 641px)  { .show-sm-only { display: none !important; } }
@media (min-width: 769px)  { .show-md-only { display: none !important; } }
@media (min-width: 1025px) { .show-lg-only { display: none !important; } }

/* Text alignment responsive */
@media (max-width: 768px) {
    .text-center-md { text-align: center !important; }
    .text-left-md   { text-align: left !important; }
}

@media (max-width: 480px) {
    .text-center-sm { text-align: center !important; }
    .text-left-sm   { text-align: left !important; }
}

/* Flex responsive */
@media (max-width: 768px) {
    .flex-col-md { flex-direction: column !important; }
    .items-start-md { align-items: flex-start !important; }
}

@media (max-width: 480px) {
    .flex-col-sm { flex-direction: column !important; }
    .w-full-sm   { width: 100% !important; }
}

/* Grid responsive */
@media (max-width: 768px) {
    .grid-cols-1-md { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .grid-cols-1-sm { grid-template-columns: 1fr !important; }
    .grid-cols-2-sm { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Padding responsive */
@media (max-width: 768px) {
    .p-4-md  { padding: 1rem !important; }
    .px-4-md { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ============================================
   CONTAINER RESPONSIVE OVERRIDES
   ============================================ */

@media (max-width: 1280px) {
    .container-lg { max-width: 100%; }
}

@media (max-width: 1024px) {
    .container-md { max-width: 100%; }
}

@media (max-width: 768px) {
    .container-sm { max-width: 100%; }
    .container    { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 480px) {
    .container    { padding-left: .875rem; padding-right: .875rem; }
}

/* ============================================
   ANIMATION PERFORMANCE
   ============================================ */

/* Use transform and opacity for GPU acceleration */
.animate-fadeIn,
.animate-fadeInUp,
.animate-fadeInDown,
.animate-fadeInLeft,
.animate-fadeInRight,
.animate-float,
.animate-pending,
.animate-in {
    will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.animate-in {
    will-change: auto;
}

/* ============================================
   STICKY ELEMENTS AT DIFFERENT VIEWPORTS
   ============================================ */

@media (min-width: 1025px) {
    .creator-sidebar  { position: sticky; top: calc(var(--header-height) + 1rem); }
    .post-sidebar     { position: sticky; top: calc(var(--header-height) + 1.5rem); }
    .archive-sidebar  { position: sticky; top: calc(var(--header-height) + 1rem); max-height: calc(100vh - var(--header-height) - 2rem); overflow-y: auto; }
    .page-sidebar     { position: sticky; top: calc(var(--header-height) + 1rem); }
    .settings-nav     { position: sticky; top: calc(var(--header-height) + 1rem); }
    .profile-tabs-wrapper { position: sticky; top: var(--header-height); z-index: 50; }
}

/* ============================================
   TABLE RESPONSIVE
   ============================================ */

/* Scroll tables on small screens */
@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .document-gst-table {
        min-width: 500px;
    }
}

/* ============================================
   IMAGE RESPONSIVE
   ============================================ */

/* Ensure images don't overflow */
img,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Aspect ratio boxes */
.aspect-video  { aspect-ratio: 16/9; }
.aspect-square { aspect-ratio: 1/1; }
.aspect-4-3    { aspect-ratio: 4/3; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill    { object-fit: fill; }

/* ============================================
   FORM RESPONSIVE
   ============================================ */

/* Stack form groups on mobile */
@media (max-width: 480px) {
    .form-group { margin-bottom: .875rem; }
    .form-label { font-size: .875rem; }
    .form-control { font-size: .9375rem; padding: .5625rem .875rem; }
    .form-select { font-size: .9375rem; }
    .form-hint,
    .form-error { font-size: .75rem; }
}

/* Input groups responsive */
@media (max-width: 360px) {
    .input-group { flex-direction: column; }
    .input-group .form-control { border-radius: var(--radius-lg) !important; }
    .input-group .input-group-text { border-radius: var(--radius-lg) !important; border-left: 1.5px solid var(--gray-300) !important; }
}

/* ============================================
   DROPDOWN / TOOLTIP RESPONSIVE
   ============================================ */

@media (max-width: 768px) {

    /* Full-width dropdowns on mobile */
    .user-menu-panel {
        min-width: 240px;
        right: 0;
        left: auto;
    }

    /* Reposition dropdowns that might overflow */
    .dropdown-menu {
        left: auto;
        right: 0;
    }

    /* Disable tooltips on touch */
    [data-tooltip]:after {
        display: none;
    }

}

/* ============================================
   Z-INDEX LAYER RESPONSIVE
   ============================================ */

/* Ensure overlays cover sidebar on mobile */
@media (max-width: 1024px) {
    .modal-overlay         { z-index: 9999; }
    .dashboard-sidebar     { z-index: 500; }
    #sidebarMobileOverlay  { z-index: 499; }
    .search-live-suggestions { z-index: 600; }
    .suggestions-dropdown  { z-index: 600; }
}

/* ============================================
   OVERFLOW MANAGEMENT
   ============================================ */

/* Prevent horizontal overflow on mobile */
body {
    overflow-x: hidden;
}

/* But allow it within scroll containers */
.table-wrapper,
.items-table-wrapper,
.document-items-wrapper,
.tabs,
.doc-stats-row {
    overflow-x: auto;
}

/* ============================================
   GAP RESPONSIVE OVERRIDES
   ============================================ */

@media (max-width: 768px) {
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: 1fr; }
    .grid-cols-2 { grid-template-columns: 1fr; }
    .gap-6       { gap: 1rem; }
    .gap-8       { gap: 1.25rem; }
}