/* ============================================================
   RESPONSIVE.CSS — Site-wide mobile responsiveness patch
   ----------------------------------------------------------
   Loaded AFTER app.css (see layouts/app.blade.php) so these
   rules extend/override it without editing the large existing
   stylesheet. Covers gaps left in the public site, the account
   area and the Artist Dashboard pages (resources/views/artist/*),
   which all render through layouts/app.blade.php.
   ============================================================ */

/* ---------- Global safety net ---------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
}

img, iframe, video, embed, object, table {
    max-width: 100%;
}

/* Prevent iOS Safari from auto-zooming into forms on focus */
@media (max-width: 767px) {
    input.form-control,
    select.form-select,
    textarea.form-control,
    .search-input {
        font-size: 16px;
    }
}

/* ---------- Inner-page header banner ----------
   Used on every account/artist-dashboard/legal/blog page via
   partials/page-header.blade.php. 140px top padding never
   shrank on mobile — huge waste of the small viewport. */
@media (max-width: 991px) {
    .page-header-small {
        padding: 110px 0 50px;
    }
}

@media (max-width: 575px) {
    .page-header-small {
        padding: 95px 0 40px;
    }

    .page-header-small h1 {
        font-size: 1.7rem;
        letter-spacing: 0.04em;
    }

    .breadcrumbs {
        font-size: 0.75rem;
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
}

/* ---------- Account / Artist Dashboard shell ---------- */
@media (max-width: 991px) {
    .account-section {
        padding: 40px 0 60px;
    }
}

@media (max-width: 575px) {
    .account-section {
        padding: 30px 0 40px;
    }

    .content-box {
        padding: 1.5rem 1.1rem;
        border-radius: 10px;
    }

    .content-box h2 {
        font-size: 1.4rem;
        margin-bottom: 1.25rem;
    }

    .account-sidebar {
        padding: 1.25rem;
        border-radius: 10px;
    }

    .user-avatar {
        width: 72px;
        height: 72px;
        font-size: 1.1rem;
    }

    .sidebar-menu a {
        padding: 0.85rem 0.75rem;
        font-size: 0.92rem;
    }
}

/* ---------- Artist Dashboard / Sales stat cards ----------
   .stat-value & .stat-label are used on artist/dashboard.blade.php
   and artist/sales/index.blade.php; only .stat-number (a different,
   unrelated class) had a mobile override before. */
@media (max-width: 767px) {
    .stat-value {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .stat-label {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 575px) {
    /* Quick-link buttons on the Artist Dashboard become full width
       and stack for easier tapping instead of wrapping awkwardly. */
    .account-section .d-flex.flex-wrap.gap-2 > .btn {
        flex: 1 1 100%;
    }

    /* Page headers like "My Artworks" + "Add New Artwork" button
       (d-flex justify-content-between) stay side-by-side on mobile
       and cramp both the heading and the button into narrow columns.
       Stack them instead, scoped to the account content area only. */
    .content-box > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .content-box > .d-flex.justify-content-between > .btn {
        width: 100%;
    }
}

/* ---------- Cards, badges & action buttons (My Artworks, Sales, Subscription) ---------- */
@media (max-width: 575px) {
    .card-footer .d-flex.gap-2 {
        flex-direction: column;
    }

    .card-footer .d-flex.gap-2 > .btn {
        width: 100%;
    }

    .card-body .display-6 {
        font-size: 1.75rem;
    }
}

/* ---------- Tables (Sales & Earnings, admin-facing tables reused on artist side) ---------- */
@media (max-width: 575px) {
    .table-responsive table {
        font-size: 0.82rem;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 0.5rem 0.5rem;
        white-space: nowrap;
    }
}

/* ---------- Navbar polish for very small phones ---------- */
@media (max-width: 380px) {
    .navbar .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar-brand img {
        height: 28px !important;
    }

    .navbar-icons {
        gap: 0.5rem;
    }

    .icon-link {
        font-size: 1.05rem;
    }
}

/* ---------- Dropdown menus must never overflow the viewport ---------- */
@media (max-width: 575px) {
    .dropdown-menu {
        max-width: calc(100vw - 2rem);
    }

    .user-dropdown {
        min-width: 260px;
    }
}

/* ---------- Footer ---------- */
@media (max-width: 767px) {
    footer {
        padding: 50px 0 30px;
        text-align: center;
    }

    footer .col-md-4,
    footer .col-md-2,
    footer .col-md-3 {
        margin-bottom: 2rem;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links {
        display: inline-block;
        text-align: left;
    }
}

/* ---------- Generic touch-target comfort on mobile ---------- */
@media (max-width: 575px) {
    .btn {
        min-height: 44px;
    }

    .sidebar-menu a,
    .nav-link {
        min-height: 44px;
    }
}