/*
  Global Hospitality Sukabumi — Responsive UI Patch
  TARGET: v5.0 NOTULEN COMPLETE IP
  PURPOSE: presentation/layout only. No business logic, API, auth, CRUD, finance,
           academic, internship, marketing, student, or storage functions are changed.
*/

/* Base hardening.
   IMPORTANT: do NOT make html/body an overflow-x:hidden scroll container.
   On Chrome Android/PWA and some WebView builds that can trap the root scroller
   and make the page look frozen vertically. Horizontal clipping uses `clip`
   while vertical scrolling stays on the document root. */
html{
  width:100%;max-width:100%;min-height:100%;height:auto!important;
  overflow-x:clip!important;overflow-y:auto!important;
  -webkit-text-size-adjust:100%;
}
body{
  width:100%;max-width:100%;min-height:100vh;min-height:100dvh;height:auto!important;
  overflow-x:clip!important;overflow-y:visible!important;
  position:static;
}
.wrap{
  min-height:100vh;min-height:100dvh;height:auto!important;
  overflow:visible!important;
}
.division.active,.panel.active{
  height:auto!important;max-height:none!important;
  overflow-y:visible!important;
}
img,svg,video,canvas{max-width:100%;height:auto;}
button,input,select,textarea{touch-action:manipulation;}
.tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{min-width:max-content;}
.modal-bg{padding:18px;}
.modal{max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* Large desktop: intentionally do almost nothing. Existing layout remains primary. */
@media (min-width:1101px){
  .wrap{width:100%;}
}

/* Tablet / compact laptop */
/* GHS V6 PHASE 1B.1A RESPONSIVE SHELL CONSOLIDATION */
@media (min-width:769px) and (max-width:1100px){
  .dash-hero{gap:14px;}
  .div-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Phone / small tablet */
@media (max-width:768px){
  body{font-size:13px!important;background:var(--BG,#EEF5FB);}
  .wrap{padding:0 10px calc(84px + env(safe-area-inset-bottom))!important;}

  /* Header stays familiar, becomes compact. */
  .hdr{margin:0 -10px!important;padding:0 12px!important;position:sticky;top:0;z-index:80;box-shadow:0 3px 14px rgba(13,62,120,.15);}
  .hdr-inner{min-height:72px!important;padding:10px 0!important;display:flex!important;align-items:center!important;gap:10px!important;}
  .hdr-brand{min-width:0;flex:1;}
  .hdr-brand .eyebrow{font-size:8px!important;letter-spacing:.12em!important;}
  .hdr-brand h1{font-size:18px!important;line-height:1.15!important;white-space:normal!important;}
  .hdr-brand .sub-title{font-size:10px!important;line-height:1.2!important;}
  .role-wrap{max-width:126px!important;min-width:108px!important;}
  .role-wrap label{font-size:8px!important;}
  .role-wrap select{font-size:11px!important;padding:7px 26px 7px 8px!important;margin:0!important;min-height:36px;}

  /* GHS V6 PHASE 1B.1B MOBILE DRAWER - memakai #divBar yang sama */
  .ghs-nav-toggle{flex:0 0 auto!important;width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;margin:0!important;border:1px solid rgba(255,255,255,.30)!important;border-radius:9px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:20px!important;}
  .divnav{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:min(82vw,320px)!important;height:100dvh!important;margin:0!important;padding:calc(84px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom))!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:5px!important;overflow-x:hidden!important;overflow-y:auto!important;background:linear-gradient(180deg,#0d3e78 0%,#12345a 100%)!important;border:0!important;box-shadow:8px 0 28px rgba(13,42,72,.28)!important;transform:translateX(-105%);transition:transform .22s ease!important;z-index:130!important;}
  .divnav .div-btn{width:100%!important;min-width:0!important;flex:0 0 auto!important;justify-content:flex-start!important;text-align:left!important;padding:12px 13px!important;border-radius:9px!important;font-size:12px!important;font-weight:800!important;line-height:1.25!important;color:rgba(255,255,255,.80)!important;background:transparent!important;white-space:normal!important;text-shadow:none!important;}
  .divnav .div-btn.active{color:#fff!important;background:rgba(255,255,255,.15)!important;box-shadow:inset 3px 0 0 var(--Pa,#4A9FD4)!important;}
  html.gh-drawer-open .divnav{transform:translateX(0)!important;}
  .ghs-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(10,30,50,.42);opacity:0;visibility:hidden;pointer-events:none;transition:.2s;z-index:120;}
  html.gh-drawer-open .ghs-nav-backdrop{opacity:1;visibility:visible;pointer-events:auto;}

  /* Dashboard */
  .dash-hero{display:block!important;padding:16px!important;border-radius:14px!important;}
  .dash-time{font-size:42px!important;line-height:1!important;letter-spacing:-.035em;}
  .dash-date{font-size:12px!important;margin-top:6px!important;}
  .dash-greeting{font-size:14px!important;line-height:1.35!important;margin-top:12px!important;}
  .dash-quick{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:14px!important;}
  .dash-quick button{width:100%!important;justify-content:center!important;min-height:42px!important;font-size:10px!important;padding:8px!important;white-space:normal!important;}
  .gh-hero-brand{display:none!important;}

  .div-cards,.g2,.g3,.g4,.stat-grid,.report-kpi-grid{grid-template-columns:1fr!important;gap:10px!important;}
  .card{padding:14px!important;border-radius:12px!important;margin-bottom:10px!important;}
  .card h2{font-size:14px!important;line-height:1.3!important;margin-bottom:12px!important;}
  .div-card{min-height:104px!important;padding:14px!important;}
  .stat{min-height:86px!important;padding:12px!important;}
  .sval,.dc-val{font-size:24px!important;}

  /* Tabs and toolbars remain complete, but scroll instead of overflowing. */
  nav.tabs,.tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:4px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  nav.tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar,.divnav::-webkit-scrollbar{display:none;}
  nav.tabs button,.tab-btn{flex:0 0 auto!important;min-height:42px!important;padding:9px 12px!important;font-size:10px!important;white-space:nowrap!important;}
  .toolbar{display:flex!important;flex-wrap:wrap!important;gap:7px!important;align-items:stretch!important;}
  .toolbar .btn,.toolbar button{flex:1 1 auto;justify-content:center;min-height:42px;}

  /* Forms: full-width inputs, comfortable touch targets. */
  .row{display:grid!important;grid-template-columns:1fr!important;gap:0!important;}
  input,select,textarea{font-size:16px!important;min-height:44px!important;padding:10px 12px!important;}
  textarea{min-height:88px!important;}
  .btn{min-height:42px!important;padding:9px 13px!important;}
  .btn-sm{min-height:36px!important;padding:7px 10px!important;}

  /* Tables stay as tables. They scroll horizontally so no columns/functions disappear. */
  .tbl-wrap{margin-left:-4px;margin-right:-4px;padding:0 4px;}
  table{font-size:12px!important;}
  th{font-size:9px!important;white-space:nowrap!important;padding:8px!important;}
  td{padding:9px 8px!important;white-space:nowrap;}

  /* Modals fill phone safely; all actions remain reachable. */
  .modal-bg{padding:8px!important;align-items:flex-end!important;}
  .modal{width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:16px 16px 10px 10px!important;padding:16px!important;overflow-y:auto!important;}
  .modal .btn{margin-top:6px;}

  /* Calendar / timeline / task items */
  .cal-grid{min-width:680px;}
  .jadwal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .jadwal-grid{min-width:720px;}
  .task-item,.ann-card{padding:12px!important;}

  /* Footer and global search */
  .note{font-size:9px!important;line-height:1.4!important;padding:12px 8px!important;}
  .gs-overlay{padding:8px!important;}
  .gs-box{width:100%!important;max-width:none!important;max-height:92dvh!important;}
}

/* Very narrow phones */
@media (max-width:390px){
  .hdr-brand h1{font-size:16px!important;}
  .role-wrap{max-width:112px!important;}
  .dash-time{font-size:36px!important;}
  .dash-quick{grid-template-columns:1fr!important;}
  .div-cards{grid-template-columns:1fr!important;}
}

/* Standalone installed-app adjustments */
@media (display-mode:standalone){
  html,body{overscroll-behavior-y:auto!important;}
  .hdr{padding-top:env(safe-area-inset-top)!important;}
}

/* Vertical-scroll safety for phone/PWA. These selectors are UI-only and do not
   touch business functions, API, database, permissions or module logic. */
@media (max-width:768px){
  html{scrollbar-gutter:auto;}
  body,.wrap,.division.active,.panel.active{overflow-y:visible!important;}
  body{min-height:100dvh!important;}
  .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;}
  .modal-bg.show,.gs-overlay.show{overscroll-behavior:contain;}
  .modal,.gs-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
}



/* ================================================================
   v5.0 — INSTALLED APP / WEBVIEW SCROLL ENGINE
   Web browser continues using normal document-root scrolling.
   Installed PWA / app mode uses .wrap as an explicit vertical scroller.
   This avoids Android standalone/WebView builds where root scrolling can
   be disabled even though the same page scrolls normally in Chrome.
   ================================================================ */
html.gh-app-mode{
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
html.gh-app-mode body{
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  position:static!important;
  overscroll-behavior:none!important;
}
html.gh-app-mode body > .wrap,
html.gh-app-mode .wrap{
  width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100dvh!important;
  overflow-x:clip!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y pinch-zoom!important;
  scroll-behavior:auto!important;
  position:relative!important;
  contain:none!important;
  padding-bottom:calc(110px + env(safe-area-inset-bottom))!important;
}
html.gh-app-mode .division.active,
html.gh-app-mode .panel.active{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}
html.gh-app-mode .hdr{
  top:0!important;
}
html.gh-app-mode .divnav{
  /* GHS V6 drawer owns full viewport; internal padding clears header. */
  top:0!important;
}

/* WebView fallback: JS also adds gh-app-mode when Android's `wv` token is present. */
@media (display-mode:standalone), (display-mode:fullscreen), (display-mode:minimal-ui){
  html:not(.gh-web-mode){
    overscroll-behavior:none!important;
  }
}


/* =========================================================
   GHS v5.4 — CONTENT OPS + SMART STUDENT SEARCH
   ========================================================= */

.content-flow{padding:14px;border-radius:10px;background:linear-gradient(90deg,#eef7ff,#f5fbff);font-weight:800;color:var(--P);line-height:1.8;text-align:center;}
.small-meta{font-size:11px;color:var(--INK2);margin-top:5px}.content-note{font-size:11px;background:#f5f9fd;border-left:3px solid var(--Pa);padding:7px 9px;margin-top:6px;border-radius:4px}.action-row,.link-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.link-row a{font-size:11px;font-weight:800;color:var(--P);text-decoration:none;background:#edf6ff;padding:4px 8px;border-radius:6px}.campaign-card{border:1px solid var(--LINE);border-radius:10px;padding:12px;margin:8px 0;background:#fff}.campaign-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.campaign-kpis{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}.campaign-kpis span{background:var(--BG);border-radius:8px;padding:6px 8px;font-size:11px}.approval-row,.queue-item{border-bottom:1px dashed var(--LINE);padding:9px 4px}.approval-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.student-smart{position:relative;width:100%;margin-top:2px}.student-smart-input-wrap{display:flex;align-items:center;gap:7px;border:1px solid var(--LINE);background:#fff;border-radius:7px;padding:0 10px;min-height:42px}.student-smart-input-wrap:focus-within{border-color:var(--Pa);box-shadow:0 0 0 2px rgba(45,145,210,.12)}.student-smart-input-wrap input{border:0!important;outline:0!important;box-shadow:none!important;min-width:0;flex:1;padding:10px 0!important;background:transparent!important}.student-smart-clear{border:0;background:transparent;font-size:20px;color:var(--INK2);cursor:pointer}.student-smart-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:9999;background:#fff;border:1px solid var(--LINE);border-radius:9px;box-shadow:0 12px 28px rgba(21,50,80,.18);max-height:330px;overflow:auto}.student-smart-results.open{display:block}.student-smart-item{display:block;width:100%;border:0;border-bottom:1px solid #edf2f6;background:#fff;text-align:left;padding:10px 12px;cursor:pointer;color:var(--INK)}.student-smart-item:hover,.student-smart-item:focus{background:#eef7ff}.student-smart-item b{display:block;font-size:13px}.student-smart-item span{display:block;font-size:11px;color:var(--INK2);margin-top:2px}.student-smart-hint{padding:12px;color:var(--INK2);font-size:12px}.student-smart-selected{font-size:10px;color:var(--OK);font-weight:700;margin:4px 2px 0}