/* =====================================================
   RESPONSIVE / MOBILE ONLY
   Aman untuk laptop karena hanya aktif di layar kecil
   ===================================================== */
   
   /* FIX IPHONE / MOBILE - HILANGKAN RUANG KOSONG KIRI */
@media (max-width: 991.98px) {
  body,
  html,
  .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .content-wrapper,
  .main-header,
  .main-footer {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .content-wrapper .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .main-sidebar {
    left: 0 !important;
  }

  body:not(.sidebar-open) .main-sidebar {
    margin-left: -250px !important;
  }

  body.sidebar-open .main-sidebar {
    margin-left: 0 !important;
  }
}

@media (max-width:1200px){
  .login-flow{
    grid-template-columns:1fr;
  }

  .flow-arrow{
    transform:rotate(90deg);
  }

  .flow-step{
    width:100%;
  }
}

@media (max-width:991.98px){
  html,
  body,
  .wrapper{
    overflow-x:hidden;
  }

  .main-sidebar,
  .main-sidebar::before{
    width:260px !important;
  }

  body:not(.sidebar-collapse) .content-wrapper,
  body:not(.sidebar-collapse) .main-footer,
  body:not(.sidebar-collapse) .main-header,
  .content-wrapper,
  .main-header,
  .main-footer{
    margin-left:0 !important;
  }

  body.sidebar-collapse .main-sidebar,
  body.sidebar-collapse .main-sidebar::before{
    margin-left:-260px !important;
  }

  body.sidebar-open .main-sidebar,
  body.sidebar-open .main-sidebar::before{
    margin-left:0 !important;
  }

  .main-header.navbar{
    min-height:62px;
    padding-left:8px;
    padding-right:12px;
  }

  .main-header .navbar-brand{
    display:inline-block !important;
    font-size:15px !important;
    max-width:180px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .top-user-name{
    display:none !important;
  }

  .main-sidebar .user-panel{
    align-items:flex-start !important;
  }

  .main-sidebar .user-panel .info a,
  .main-sidebar .user-panel .info small{
    white-space:normal !important;
    word-break:break-word !important;
  }

  .content-wrapper .container-fluid,
  .container-fluid{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .apple-dashboard .dashboard-hero{
    padding:22px 20px;
  }

  .apple-dashboard .dashboard-hero h2{
    font-size:24px;
  }

  .apple-dashboard .stat-value{
    font-size:28px;
  }

  .apple-login-box{
    width:100%;
    max-width:390px;
  }

  .apple-login-logo .login-logo-img{
    height:88px;
  }

  .apple-login-logo .login-logo-img img{
    width:250px;
  }

  .login-info-shell{
    grid-template-columns:1fr;
    padding:28px 18px;
  }

  .login-info-left h1{
    font-size:32px;
  }

  .login-feature-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .main-sidebar,
  .main-sidebar::before{
    width:250px !important;
  }

  body.sidebar-collapse .main-sidebar,
  body.sidebar-collapse .main-sidebar::before{
    margin-left:-250px !important;
  }

  body.sidebar-open .main-sidebar,
  body.sidebar-open .main-sidebar::before{
    margin-left:0 !important;
  }

  .main-header.navbar{
    min-height:58px !important;
    padding-left:8px !important;
    padding-right:10px !important;
  }

  .main-header .navbar-brand{
    max-width:150px !important;
    font-size:14px !important;
  }

  .main-sidebar .brand-link{
    min-height:68px !important;
    padding:12px 14px !important;
  }

  .main-sidebar .brand-text{
    font-size:16px !important;
  }

  .main-sidebar .user-avatar{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    font-size:18px !important;
  }

  .main-sidebar .user-panel .info a{
    font-size:14px !important;
  }

  .main-sidebar .user-panel .info small{
    font-size:12px !important;
    line-height:1.4 !important;
  }

  .content-wrapper{
    min-height:calc(100vh - 58px) !important;
  }

  .apple-dashboard .dashboard-hero,
  .booking-page .booking-hero,
  .booking-list-page .booking-list-hero,
  .booking-detail-page .booking-detail-hero,
  .facility-page .facility-hero{
    padding:22px 20px;
  }

  .apple-dashboard .dashboard-hero h2{
    font-size:22px;
  }

  .apple-dashboard .stat-value{
    font-size:30px;
  }

  .summary-total{
    font-size:24px;
  }

  .booking-action-bar{
    gap:10px;
  }

  .booking-action-bar .btn,
  .booking-list-hero-actions .btn{
    width:100%;
    min-width:auto;
  }

  .booking-list-alert{
    align-items:flex-start;
  }

  .detail-info-table th{
    width:160px;
  }

  .survey-wizard-page{
    align-items:flex-start;
    padding:14px;
  }

  .survey-wizard-top{
    padding:26px 20px 20px;
  }

  .survey-wizard-top h2{
    font-size:26px;
  }

  .survey-step{
    padding:24px 18px;
  }

  .survey-question-box h3{
    font-size:22px;
  }

  .survey-emoji-options{
    grid-template-columns:1fr;
  }

  .survey-emoji-option span{
    min-height:auto;
    flex-direction:row;
    justify-content:flex-start;
    text-align:left;
    padding:16px;
  }

  .survey-emoji-option span b{
    font-size:30px;
    min-width:42px;
  }

  .survey-emoji-option span strong{
    min-width:24px;
  }

  .survey-wizard-actions{
    padding:18px;
    flex-wrap:wrap;
  }

  .survey-wizard-actions .btn{
    width:100%;
  }

  .survey-review-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}

@media (max-width:576px){
  .apple-login-box{
    width:100%;
    max-width:390px;
  }

  .apple-login-card .login-card-body{
    padding:24px 18px 20px !important;
  }

  .apple-login-logo .login-title{
    font-size:24px;
  }
}

@media (max-width: 991.98px) {
  body .content-wrapper,
  body .main-header,
  body .main-footer {
    margin-left: 0 !important;
  }

  body.sidebar-mini .content-wrapper,
  body.sidebar-mini .main-header,
  body.sidebar-mini .main-footer {
    margin-left: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse .content-wrapper,
  body.sidebar-mini.sidebar-collapse .main-header,
  body.sidebar-mini.sidebar-collapse .main-footer {
    margin-left: 0 !important;
  }

  .main-sidebar {

    margin-left: 0 !important;
  }

  body.sidebar-open .main-sidebar {
    transform: translateX(0) !important;
  }
}

@media (max-width: 767.98px) {
  .content-wrapper,
  .main-header,
  .main-footer {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .main-sidebar,
  .main-sidebar::before {
    width: 250px !important;
  }

  body:not(.sidebar-open) .main-sidebar {
    margin-left: -250px !important;
  }

  body.sidebar-open .main-sidebar {
    margin-left: 0 !important;
  }
}