/* MyDokSat responsive layer - layout only. Existing functionality is preserved. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { max-width: 100%; }

/* Shared desktop/tablet fluid sizing */
.container, .wrap, .listing-page, .account-wrap, main, section { max-width: 100%; }
.grid, .grid2, .grid3, .grid4, .cards, .room-grid, .menu-grid, .account-grid { min-width: 0; }

/* Normal website navigation */
.site-mobile-toggle { display:none; }
.nav-links { min-width: 0; }

/* Prevent long content from creating horizontal overflow */
table { max-width: 100%; }
.table-wrap, .table-responsive, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 1100px) {
  .hero-section, .hero, .listing-page, .wrap, .account-wrap { width: min(94%, 1000px); margin-left:auto; margin-right:auto; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .account-grid { grid-template-columns: 260px minmax(0,1fr) !important; }
}

@media (max-width: 820px) {
  body { font-size: 15px; }

  /* Header / navigation */
  header, .site-header, .topbar { position: relative; z-index: 1000; }
  header .nav-links, .site-header .nav-links {
    display: none !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px !important;
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 14px 40px rgba(0,0,0,.16);
    border: 1px solid rgba(0,0,0,.08);
  }
  header .nav-links.mobile-open, .site-header .nav-links.mobile-open { display:flex !important; }
  header .nav-links a, .site-header .nav-links a {
    width:100% !important;
    min-height:46px;
    display:flex !important;
    align-items:center;
    justify-content:flex-start;
    padding:11px 14px !important;
    border-radius:10px;
  }
  .site-mobile-toggle {
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:12px;
    background:transparent;
    font-size:25px;
    cursor:pointer;
    flex:0 0 auto;
  }

  /* Header containers in common pages */
  header > div, .site-header > div, header .header-inner, .site-header .header-inner {
    min-width:0;
  }

  /* Main layouts */
  .hero-section { grid-template-columns: 1fr !important; gap:18px !important; }
  .hero-image { min-height:220px !important; }
  .hero-form-box { width:100% !important; }
  .search-bar { grid-template-columns:1fr !important; width:100% !important; }
  .search-field { min-width:0 !important; width:100% !important; }

  .listing-page { width:min(94%, 760px); }
  .listing-page .listing-hero { max-height:360px; object-fit:cover; }
  .listing-page .details, .listing-page .content, .listing-page .booking-area { width:100% !important; }

  .grid4, .grid3, .grid2, .cards, .room-grid, .menu-grid {
    grid-template-columns:1fr !important;
  }

  .account-grid { grid-template-columns:1fr !important; }
  .profile-card { position:static !important; }
  .account-hero { flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
  .tabs { overflow-x:auto; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; }
  .tabs .tab-btn { flex:0 0 auto; white-space:nowrap; }

  /* Forms and cards */
  form, .form-grid { width:100%; }
  .form-grid { grid-template-columns:1fr !important; }
  .modal-content, .modal-box, .popup, .payment-modal, .booking-modal { width:min(94vw, 620px) !important; max-height:88vh; overflow-y:auto; }
  .modal { padding:12px !important; }
  .actions, .button-row, .form-actions { flex-wrap:wrap !important; }
  .actions > *, .button-row > *, .form-actions > * { flex:1 1 160px; }

  /* Café */
  .order-section .order-grid, .order-section .content-grid { grid-template-columns:1fr !important; }
  .cart-bar { flex-wrap:wrap; gap:10px; }

  /* Avoid oversized text on phones */
  h1 { font-size:clamp(1.8rem, 8vw, 3rem) !important; }
  h2 { font-size:clamp(1.35rem, 5vw, 2.1rem) !important; }
  h3 { font-size:clamp(1.1rem, 4vw, 1.5rem) !important; }

  /* Tables */
  .table-wrap, .table-responsive, .data-table-wrap { display:block; width:100%; overflow-x:auto; }
  table { min-width:620px; }
}

@media (max-width: 520px) {
  body { font-size:14px; }
  header, .site-header { padding-left:10px !important; padding-right:10px !important; }
  .hero-section, .hero, .listing-page, .wrap, .account-wrap { width:calc(100% - 24px) !important; }
  .hero-image { min-height:180px !important; }
  .listing-page .listing-hero { max-height:240px; }
  .card, .room-card, .menu-card, .content-card, .profile-card { border-radius:16px !important; }
  .price { font-size:1.05rem !important; }
  .reserve-btn, button[type="submit"], .primary-btn, .btn-primary { width:100%; min-height:46px; }
  input, select, textarea { min-height:44px; }
  .modal-content, .modal-box, .popup, .payment-modal, .booking-modal { width:96vw !important; padding:16px !important; }
}

/* Admin responsive navigation — same compact dropdown style as the customer navigation */
.admin-mobile-toggle { display:none; }

@media (max-width: 900px) {
  body.admin-responsive {
    overflow-x:hidden;
    background:var(--bg);
  }

  /* Use the admin topbar as the mobile header. */
  body.admin-responsive .topbar {
    position:sticky !important;
    top:0 !important;
    z-index:1900 !important;
    min-height:70px !important;
    margin:0 -16px 20px !important;
    padding:12px 58px 12px 16px !important;
    background:rgba(255,255,255,.98) !important;
    border-bottom:1px solid var(--border) !important;
    box-shadow:0 5px 18px rgba(0,0,0,.07);
  }

  body.admin-responsive .topbar h1 {
    font-size:20px !important;
  }

  body.admin-responsive .topbar p {
    font-size:12px !important;
    margin-top:2px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.admin-responsive .topbar .user {
    display:none !important;
  }

  /* Hamburger — positioned exactly like the user mobile menu button. */
  body.admin-responsive .admin-mobile-toggle {
    display:flex !important;
    position:absolute !important;
    top:13px !important;
    right:14px !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:12px !important;
    align-items:center !important;
    justify-content:center !important;
    background:#ffffff !important;
    color:#5fa02e !important;
    box-shadow:0 5px 18px rgba(0,0,0,.12) !important;
    font-size:22px !important;
    line-height:1 !important;
    cursor:pointer !important;
  }

  /* Hide the desktop sidebar until the hamburger is opened. */
  /* Mobile admin menu: completely remove it from the hit area when closed.
     This prevents an invisible sidebar from sitting over the page and stealing taps. */
  body.admin-responsive .sidebar {
    position:fixed !important;
    top:76px !important;
    left:12px !important;
    right:12px !important;
    bottom:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100vh - 92px) !important;
    padding:16px !important;
    overflow-y:auto !important;
    z-index:2001 !important;
    background:#ffffff !important;
    border:1px solid var(--border) !important;
    border-radius:18px !important;
    box-shadow:0 18px 45px rgba(0,0,0,.18) !important;
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.admin-responsive.admin-menu-open .sidebar {
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* IMPORTANT: .nav is the actual menu INSIDE the admin sidebar.
     Never give it the old full-screen drawer positioning. */
  body.admin-responsive .sidebar .nav {
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
  }

  body.admin-responsive .sidebar .brand {
    padding:4px 8px 16px !important;
    margin-bottom:12px !important;
  }

  body.admin-responsive .sidebar .nav-title {
    margin:16px 8px 7px !important;
  }

  body.admin-responsive .sidebar .nav button {
    display:flex !important;
    width:100% !important;
    min-height:46px !important;
    align-items:center !important;
    padding:11px 12px !important;
    margin:2px 0 !important;
    border-radius:11px !important;
    font-size:15px !important;
  }

  body.admin-responsive .sidebar .nav button:hover,
  body.admin-responsive .sidebar .nav button.active {
    transform:none !important;
  }

  /* Never allow the closed admin menu to capture any touch/click. */
  body.admin-responsive:not(.admin-menu-open) .sidebar,
  body.admin-responsive:not(.admin-menu-open) .sidebar * {
    pointer-events:none !important;
  }

  /* Main content uses the full phone width. */
  body.admin-responsive .main,
  body.admin-responsive .content,
  body.admin-responsive .main-content {
    width:100% !important;
    margin-left:0 !important;
    padding:0 16px 24px !important;
  }

  body.admin-responsive .grid,
  body.admin-responsive .dashboard-grid,
  body.admin-responsive .stats-grid,
  body.admin-responsive .cards-grid {
    grid-template-columns:1fr !important;
  }

  body.admin-responsive .card {
    padding:16px !important;
  }

  body.admin-responsive table {
    min-width:720px;
  }

  body.admin-responsive .table-container,
  body.admin-responsive .table-wrap {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================
   MyDokSat responsive corrections
   ========================================================= */

/* The normal customer header and the admin sidebar both used `.nav` in the
   original project. Keep the two systems completely separate. */
.site-mobile-toggle {
  display: none;
  position: relative;
  z-index: 1101;
  flex: 0 0 44px;
}

@media (max-width: 820px) {
  /* Customer navigation */
  header.nav,
  header.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100%;
  }

  header.nav .nav-inner,
  header.site-header .nav-inner {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 70px;
    padding: 10px 14px !important;
  }

  header.nav .logo-link,
  header.site-header .logo-link {
    min-width: 0;
    max-width: calc(100% - 58px);
  }

  header.nav .header-logo,
  header.site-header .header-logo {
    max-height: 44px;
    width: auto;
    object-fit: contain;
  }

  .site-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    border-radius: 12px;
    background: #ffffff !important;
    color: #5fa02e !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.12);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  header.nav .nav-links,
  header.site-header .nav-links {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 18px;
    background: rgba(255,255,255,.99) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    border: 1px solid rgba(0,0,0,.08);
  }

  header.nav .nav-links.mobile-open,
  header.site-header .nav-links.mobile-open {
    display: flex !important;
  }

  header.nav .nav-links a,
  header.site-header .nav-links a {
    display: flex !important;
    width: 100% !important;
    min-height: 46px;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    border-radius: 11px;
    font-size: 15px !important;
    white-space: normal;
  }

  /* Authentication-based customer navigation.
     The generic mobile rule above uses !important, so explicitly preserve
     the desktop login-state rule here. Logged-out customers see only
     Home, Café and Login. Logged-in customers also see Homestay, Roomstay,
     Contact and Profile, while the auth link becomes Logout. */
  header.nav .nav-links a.nav-extra,
  header.site-header .nav-links a.nav-extra {
    display: none !important;
  }

  header.nav .nav-links.logged-in a.nav-extra,
  header.site-header .nav-links.logged-in a.nav-extra {
    display: flex !important;
  }

  header.nav .nav-links a:hover,
  header.site-header .nav-links a:hover {
    background: #e9f7e0;
  }

  /* Home page hero/search: one clean field per row on phones. */
  .hero-section {
    padding: 10px 12px 24px !important;
  }

  .hero-image {
    width: 100% !important;
    height: 330px !important;
    min-height: 0 !important;
    border-radius: 18px !important;
  }

  .hero-form-box {
    width: calc(100% - 8px) !important;
    max-width: none !important;
    margin: -46px auto 0 !important;
    padding: 26px 18px 22px !important;
    border-radius: 24px !important;
    position: relative;
  }

  .hero-form-box h2 {
    font-size: 1.55rem !important;
    line-height: 1.2;
  }

  .hero-form-box p {
    font-size: .95rem !important;
    margin-bottom: 18px !important;
  }

  .hero-form-box .search-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 8px !important;
    border-radius: 20px !important;
  }

  .hero-form-box .search-field {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px 8px !important;
    border-left: 0 !important;
    border-top: 1px solid #ececec;
  }

  .hero-form-box .search-field:first-child {
    border-top: 0 !important;
  }

  .hero-form-box .search-field .sf-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .hero-form-box .search-field .sf-text b,
  .hero-form-box .search-field .sf-text span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-form-box .search-field input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    padding: 3px 0 !important;
    background: transparent !important;
  }

  .hero-form-box .search-btn {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    margin: 12px auto 4px !important;
  }

  .hero-form-box .field-panel {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 16px) !important;
    z-index: 200 !important;
  }
}

@media (max-width: 520px) {
  header.nav .nav-inner,
  header.site-header .nav-inner {
    min-height: 64px;
    padding: 8px 10px !important;
  }

  header.nav .header-logo,
  header.site-header .header-logo {
    max-height: 40px;
  }

  .hero-image {
    height: 300px !important;
    border-radius: 16px !important;
  }

  .hero-form-box {
    width: calc(100% - 4px) !important;
    margin-top: -34px !important;
    padding: 22px 14px 18px !important;
    border-radius: 22px !important;
  }

  .hero-form-box .search-field {
    padding: 11px 6px !important;
  }

  .hero-form-box .search-field .sf-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
}


/* =========================================================
   FINAL ADMIN MOBILE OVERRIDE
   Keep Admin navigation visually consistent with the customer
   mobile dropdown instead of exposing the desktop sidebar.
   ========================================================= */
@media (max-width: 900px) {
  html body.admin-responsive {
    overflow-x: hidden !important;
  }

  html body.admin-responsive .layout {
    display: block !important;
    min-height: 100vh !important;
  }

  html body.admin-responsive .sidebar {
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100vh - 92px) !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    z-index: 3000 !important;
    background: rgba(255,255,255,.99) !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
    transform: translateY(-8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body.admin-responsive.admin-menu-open .sidebar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.admin-responsive .sidebar .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 8px 12px !important;
    margin: 0 0 8px !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  html body.admin-responsive .sidebar .brand h2 {
    margin: 0 !important;
    font-size: 18px !important;
  }

  html body.admin-responsive .sidebar .brand small {
    font-size: 12px !important;
  }

  html body.admin-responsive .sidebar .nav {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.admin-responsive .sidebar .nav-title {
    display: block !important;
    margin: 14px 10px 5px !important;
    font-size: 11px !important;
  }

  html body.admin-responsive .sidebar .nav button {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    border-radius: 11px !important;
    font-size: 15px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.admin-responsive .sidebar .nav button:hover,
  html body.admin-responsive .sidebar .nav button.active {
    background: #e9f7e0 !important;
    color: #4f8e27 !important;
    transform: none !important;
  }

  html body.admin-responsive .main {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
  }

  html body.admin-responsive .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 2900 !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 12px 64px 12px 16px !important;
    min-height: 64px !important;
    border-radius: 14px !important;
  }

  html body.admin-responsive .admin-mobile-toggle {
    display: flex !important;
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #5fa02e !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.12) !important;
    font-size: 22px !important;
  }
}