/* Blue Studio Mobile Optimization
   نسخة محسنة للموبايل بدون تغيير منطق الصفحات.
*/

@media(max-width: 980px){

    html, body{
        overflow-x:hidden !important;
        font-size:14px !important;
    }

    body{
        background:#f4f7fb !important;
    }

    .shell{
        display:block !important;
        min-height:100vh !important;
    }

    /* Sidebar يتحول لهيدر موبايل */
    .sidebar{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        width:100% !important;
        height:auto !important;
        min-height:auto !important;
        overflow:visible !important;
        padding:14px !important;
        box-shadow:0 12px 30px rgba(15,23,42,.14) !important;
        border-radius:0 0 26px 26px !important;
        z-index:50 !important;
    }

    .brand{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:12px !important;
        text-align:right !important;
        padding:10px 12px !important;
        border-radius:20px !important;
        margin-bottom:12px !important;
    }

    .brand img{
        width:92px !important;
        max-width:92px !important;
        margin:0 !important;
        padding:6px !important;
        border-radius:14px !important;
        flex-shrink:0 !important;
    }

    .brand h2{
        font-size:16px !important;
        line-height:1.4 !important;
    }

    .brand p{
        font-size:11px !important;
        line-height:1.5 !important;
    }

    /* منيو أفقي Scroll */
    .nav{
        display:flex !important;
        gap:8px !important;
        overflow-x:auto !important;
        padding:2px 0 8px !important;
        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch !important;
    }

    .nav::-webkit-scrollbar{
        display:none !important;
    }

    .nav a{
        flex:0 0 auto !important;
        white-space:nowrap !important;
        padding:10px 12px !important;
        border-radius:14px !important;
        font-size:13px !important;
        min-height:42px !important;
        transform:none !important;
    }

    .nav a.active{
        box-shadow:inset 0 -3px 0 var(--bs-cyan, #26a7df) !important;
    }

    .note,
    .wallet-note{
        display:none !important;
    }

    .logout{
        margin-top:4px !important;
        justify-content:center !important;
        min-height:42px !important;
        padding:9px 12px !important;
        border-radius:14px !important;
        font-size:13px !important;
    }

    .main{
        margin-right:0 !important;
        width:100% !important;
    }

    /* Topbar يتحول لبلوك موبايل */
    .topbar{
        position:sticky !important;
        top:0 !important;
        height:auto !important;
        padding:12px 14px !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
        z-index:40 !important;
        background:rgba(255,255,255,.94) !important;
    }

    .topbar strong{
        font-size:18px !important;
        line-height:1.4 !important;
    }

    .topbar span{
        font-size:11px !important;
    }

    .top-actions{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
    }

    .top-actions .top-link,
    .top-actions .user,
    .top-actions .wallet-pill{
        width:100% !important;
        justify-content:center !important;
        text-align:center !important;
        padding:10px 9px !important;
        border-radius:13px !important;
        font-size:12px !important;
        min-height:42px !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .top-actions .user{
        grid-column:1 / -1 !important;
    }

    .page{
        padding:14px !important;
    }

    /* Hero */
    .hero,
    .hero-copy{
        border-radius:24px !important;
        padding:22px !important;
        min-height:auto !important;
    }

    .hero h1,
    .hero-copy h1{
        font-size:28px !important;
        line-height:1.25 !important;
        letter-spacing:0 !important;
    }

    .hero p,
    .hero-copy p{
        font-size:13px !important;
        line-height:1.8 !important;
    }

    .hero-grid,
    .hero{
        grid-template-columns:1fr !important;
    }

    .hero-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .hero-btn,
    .btn,
    button,
    .top-link{
        min-height:44px !important;
        font-size:13px !important;
    }

    /* Cards */
    .metrics{
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
        margin-bottom:14px !important;
    }

    .metric{
        border-radius:18px !important;
        padding:16px !important;
        min-height:112px !important;
    }

    .metric strong{
        font-size:21px !important;
        line-height:1.35 !important;
        word-break:break-word !important;
    }

    .metric span,
    .metric small{
        font-size:11px !important;
    }

    .panel,
    .search-card,
    .today-card,
    .wallet-card{
        border-radius:22px !important;
        padding:16px !important;
        margin-bottom:14px !important;
    }

    .panel-head{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:6px !important;
        margin-bottom:14px !important;
    }

    .panel-head h2{
        font-size:20px !important;
    }

    .panel-head span{
        font-size:11px !important;
    }

    .grid2,
    .grid3,
    .grid4,
    .rooms-grid,
    .calendar-grid,
    .week-grid,
    .month-grid,
    .quick-grid,
    .form-grid,
    .form-grid.two{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .quick-card,
    .room-card,
    .card{
        border-radius:18px !important;
        padding:14px !important;
    }

    .wallet-card .balance,
    .balance{
        font-size:30px !important;
    }

    /* Forms */
    label{
        font-size:13px !important;
        margin-bottom:7px !important;
    }

    input,
    select,
    textarea{
        height:46px !important;
        border-radius:14px !important;
        font-size:14px !important;
        padding:0 12px !important;
    }

    textarea{
        height:auto !important;
        padding:12px !important;
    }

    .full{
        grid-column:1 / -1 !important;
    }

    /* Tables mobile */
    .table-wrap{
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        border-radius:18px !important;
    }

    table{
        min-width:760px !important;
        border-radius:18px !important;
    }

    th, td{
        padding:11px 12px !important;
        font-size:12px !important;
        white-space:nowrap !important;
    }

    /* Booking / calendar cards */
    .slot-card,
    .day-card,
    .month-cell{
        border-radius:18px !important;
        padding:14px !important;
        min-height:auto !important;
    }

    .slot-time{
        font-size:14px !important;
    }

    .slot-actions,
    .actions,
    .date-nav,
    .view-tabs,
    .room-tabs,
    .legend{
        display:flex !important;
        gap:8px !important;
        overflow-x:auto !important;
        flex-wrap:nowrap !important;
        padding-bottom:6px !important;
        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch !important;
    }

    .slot-actions::-webkit-scrollbar,
    .actions::-webkit-scrollbar,
    .date-nav::-webkit-scrollbar,
    .view-tabs::-webkit-scrollbar,
    .room-tabs::-webkit-scrollbar,
    .legend::-webkit-scrollbar{
        display:none !important;
    }

    .slot-actions > *,
    .actions > *,
    .date-nav > *,
    .view-tabs > *,
    .room-tabs > *,
    .legend > *{
        flex:0 0 auto !important;
    }

    .room-tab,
    .view-tabs a{
        padding:10px 12px !important;
        border-radius:13px !important;
        font-size:12px !important;
        white-space:nowrap !important;
    }

    .month-head{
        display:none !important;
    }

    .month-cell.empty{
        display:none !important;
    }

    .month-cell{
        min-height:100px !important;
    }

    .booking-item{
        grid-template-columns:1fr !important;
        gap:8px !important;
        border-radius:16px !important;
    }

    .booking-item .time{
        font-size:16px !important;
    }

    /* Modals */
    .modal-overlay{
        padding:10px !important;
        align-items:flex-end !important;
    }

    .booking-modal,
    .modal{
        width:100% !important;
        max-height:90vh !important;
        border-radius:24px 24px 0 0 !important;
    }

    .modal-head{
        padding:14px 16px !important;
    }

    .modal-head h3{
        font-size:20px !important;
    }

    .modal-body{
        padding:16px !important;
    }

    .booking-modal .form-grid,
    .modal .form-grid{
        grid-template-columns:1fr !important;
    }

    .quick-client-grid{
        grid-template-columns:1fr !important;
    }

    /* Charts */
    .chart-box{
        height:260px !important;
    }
}

@media(max-width: 520px){
    .metrics{
        grid-template-columns:1fr !important;
    }

    .brand img{
        width:78px !important;
        max-width:78px !important;
    }

    .brand h2{
        font-size:15px !important;
    }

    .top-actions{
        grid-template-columns:1fr !important;
    }

    .hero h1,
    .hero-copy h1{
        font-size:24px !important;
    }

    .metric{
        min-height:auto !important;
    }

    .btn,
    button,
    .hero-btn{
        width:100% !important;
    }

    .balance-form{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .balance-form input{
        width:100% !important;
    }

    .room-image{
        height:150px !important;
    }
}

/* تحسين صفحة login/register على الموبايل */
@media(max-width: 780px){
    .auth-shell{
        display:block !important;
    }

    .auth-visual{
        min-height:auto !important;
        padding:18px !important;
        border-radius:0 0 28px 28px !important;
    }

    .back-home{
        position:static !important;
        margin-bottom:12px !important;
        width:max-content !important;
    }

    .logo-box{
        width:100% !important;
        justify-content:flex-start !important;
        padding:10px !important;
        border-radius:20px !important;
    }

    .logo-box img{
        width:98px !important;
        max-width:98px !important;
    }

    .visual-content{
        margin-top:32px !important;
    }

    .visual-content h1{
        font-size:28px !important;
        line-height:1.25 !important;
    }

    .visual-content p{
        font-size:13px !important;
    }

    .visual-cards{
        grid-template-columns:1fr !important;
        gap:8px !important;
        margin-top:16px !important;
    }

    .auth-card{
        padding:16px !important;
    }

    .form-card{
        width:100% !important;
        padding:20px !important;
        border-radius:24px !important;
        margin-top:-8px !important;
    }

    .form-card h2{
        font-size:25px !important;
    }

    .form-logo{
        width:130px !important;
    }

    .auth-row{
        display:grid !important;
        grid-template-columns:1fr !important;
    }
}