/* GALA KOMP - Universal responsive layer
   Optimized for desktop, laptop, tablet and Android/mobile screens. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Desktop / laptop balance */
@media (max-width: 1199.98px) {
  .dashboard-sidebar { width: 245px; flex-basis: 245px; }
  .dashboard-layout.sidebar-collapsed .dashboard-sidebar { width: 82px; flex-basis: 82px; }
  .page-content, .main-content { min-width: 0; }
  .chart-wrap { height: 290px; }
}

/* Tablet */
@media (max-width: 991.98px) {
  .dashboard-layout { display: block !important; min-height: 100vh; }
  .dashboard-main, .main-content { width: 100% !important; min-width: 0; }
  .dashboard-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(84vw, 300px) !important;
    flex-basis: auto !important;
    transform: translateX(-110%);
    z-index: 1201 !important;
    box-shadow: 18px 0 45px rgba(15,23,42,.16);
    transition: transform .25s ease;
  }
  .dashboard-layout.mobile-nav-open .dashboard-sidebar { transform: translateX(0); }
  .dashboard-layout.sidebar-hidden .dashboard-sidebar { transform: translateX(-110%); width: min(84vw, 300px) !important; }
  .dashboard-layout.sidebar-locked .dashboard-sidebar { transform: translateX(-110%) !important; }
  .dashboard-layout.sidebar-locked.mobile-nav-open .dashboard-sidebar { transform: translateX(0) !important; }
  .dashboard-layout.sidebar-collapsed .dashboard-sidebar { width: min(84vw, 300px) !important; flex-basis: auto !important; }
  .dashboard-layout.sidebar-collapsed .sidebar-copy,
  .dashboard-layout.sidebar-collapsed .nav-section,
  .dashboard-layout.sidebar-collapsed .user-panel-copy { display: block; }
  .dashboard-layout.sidebar-collapsed .nav-link { justify-content: flex-start; font-size: 1rem; }
  .dashboard-layout.sidebar-collapsed .brand-wrap { justify-content: flex-start; }

  .gk-mobile-menu {
    position: fixed;
    left: 14px;
    top: 14px;
    width: 44px;
    height: 44px;
    border: 1px solid #dbe6f3;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    color: #2563eb;
    display: grid;
    place-items: center;
    z-index: 1200;
    box-shadow: 0 10px 28px rgba(15,23,42,.10);
    font-size: 1.15rem;
  }
  .gk-mobile-menu:hover { transform: translateY(-2px); background: #eff6ff; }
  .gk-mobile-menu.is-open { left: auto; right: 14px; }
  .gk-mobile-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.20);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 1050;
    transition: opacity .25s ease;
  }
  .gk-mobile-scrim.show { opacity: 1; pointer-events: auto; }

  .topbar { padding-left: 72px !important; min-height: 72px; }
  .page-content, .main-content { padding-bottom: 1.25rem; }
  .premium-card { border-radius: 20px; }
  .chart-wrap { height: 270px; }
  .mini-chart { height: 205px; }

  /* POS: keep product list and cart usable on tablets */
  .pos-grid, .sale-grid { grid-template-columns: 1fr !important; }
  .pos-products, .pos-cart { width: 100% !important; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Prevent long headers/actions from exploding width */
  .page-header, .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: .75rem; }
}

/* Large Android / small tablet */
@media (max-width: 767.98px) {
  body { font-size: 14px; }
  .container, .container-fluid { --bs-gutter-x: 1rem; }
  .p-md-4, .p-xl-4 { padding: 1rem !important; }
  .px-md-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-md-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .page-title { font-size: 1.25rem !important; }
  .eyebrow { font-size: .64rem; }
  .btn-premium { min-height: 42px; }
  .table { min-width: 720px; }
  .table-responsive { border-radius: 14px; }
  .chart-wrap { height: 240px; }
  .mini-chart { height: 190px; }
  .welcome-card { padding: 30px 20px; }
  .welcome-progress { width: min(220px, 80%); }
  .stat-value { font-size: 1.25rem; }

  /* Stack common form rows cleanly */
  form .row.g-2 > [class*="col-"] { width: 100%; }
  .row.g-4 > [class*="col-xl-"] { width: 100%; }
  .row.g-3 > [class*="col-xl-"] { width: 100%; }
  .d-grid .btn, .w-100.btn { width: 100%; }
}

/* Android / phone */
@media (max-width: 575.98px) {
  .topbar { min-height: 66px; padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .topbar .btn-premium { padding: .58rem .75rem; font-size: .82rem; }
  .topbar .eyebrow { display: none; }
  .page-title { font-size: 1.08rem !important; }
  .gk-mobile-menu { width: 42px; height: 42px; left: 10px; top: 10px; }
  .gk-mobile-menu.is-open { right: 10px; left: auto; }
  .dashboard-sidebar { width: 88vw !important; max-width: 320px; }
  .premium-card { border-radius: 17px; }
  .stat-card { padding: .85rem !important; }
  .stat-icon { width: 40px; height: 40px; border-radius: 12px; }
  .stat-value { font-size: 1.08rem; }
  .metric-muted { font-size: .72rem; }
  .quick-action { padding: .85rem !important; }
  .quick-action .icon-wrap { width: 42px; height: 42px; }
  .chart-wrap { height: 220px; }
  .mini-chart { height: 175px; }
  .welcome-card { width: calc(100% - 24px); border-radius: 22px; padding: 26px 16px; }
  .welcome-logo { width: 62px; height: 62px; }

  /* Cards in statistic grids */
  .row > .col-6 { width: 50%; }
  .row > .col-6 .premium-card { min-height: 112px; }

  /* Compact headings/actions */
  .d-flex.flex-wrap.justify-content-between { align-items: flex-start !important; }
  .d-flex.flex-wrap.justify-content-between > * { max-width: 100%; }

  /* POS product cards */
  .product-grid { grid-template-columns: 1fr !important; }
  .cart-summary { position: static !important; }
  .sale-toolbar { display: grid !important; grid-template-columns: 1fr; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ===== Master Data Responsive UI ===== */
.master-data-page .main-content > .container-fluid {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.master-data-page .master-page-head {
  gap: 1rem;
}
.master-data-page .master-page-head > div:first-child {
  min-width: 0;
}
.master-data-page .master-page-head p {
  max-width: 760px;
}
.master-data-page .master-card {
  height: 100%;
  overflow: hidden;
}
.master-data-page .table-wrap {
  width: 100%;
  overflow-x: auto;
}
.master-data-page .responsive-master-table {
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}
.master-data-page .responsive-master-table th,
.master-data-page .responsive-master-table td {
  vertical-align: middle;
}
.master-data-page .master-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}
.master-data-page .master-actions form {
  margin: 0;
}
.master-data-page .master-actions .btn {
  white-space: nowrap;
}
.master-data-page .master-empty {
  text-align: center;
  color: #64748b;
  padding: 3rem 1rem !important;
}
.master-data-page .form-card-inner {
  position: relative;
}
.master-data-page .form-card-inner .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .65rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.master-data-page .form-card-inner h2 {
  letter-spacing: -.02em;
}
@media (max-width: 1199.98px) {
  .master-data-page .master-page-head {
    align-items: flex-start !important;
  }
  .master-data-page .master-page-head .btn-premium {
    flex: 0 0 auto;
  }
}
@media (max-width: 991.98px) {
  .master-data-page .main-content > .container-fluid {
    padding-top: 1.25rem !important;
  }
  .master-data-page .master-page-head {
    padding-left: 0;
    padding-right: 0;
  }
  .master-data-page .master-page-head h1 {
    font-size: clamp(1.35rem, 4vw, 2rem);
  }
  .master-data-page .master-card,
  .master-data-page .panel,
  .master-data-page .form-card,
  .master-data-page .table-card {
    border-radius: 18px;
  }
}
@media (max-width: 767.98px) {
  .master-data-page .master-page-head {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    margin-bottom: 1rem !important;
  }
  .master-data-page .master-page-head .btn-premium {
    width: 100%;
  }
  .master-data-page .master-page-head p {
    font-size: .9rem;
  }
  .master-data-page .panel,
  .master-data-page .form-card,
  .master-data-page .table-card {
    padding: 1rem !important;
  }
  .master-data-page .form-card-inner {
    padding: 0;
  }

  /* Replace wide tables with compact data cards on phones. */
  .master-data-page .table-wrap {
    overflow: visible;
  }
  .master-data-page .responsive-master-table {
    display: block;
    border: 0;
  }
  .master-data-page .responsive-master-table thead {
    display: none;
  }
  .master-data-page .responsive-master-table tbody,
  .master-data-page .responsive-master-table tr,
  .master-data-page .responsive-master-table td {
    display: block;
    width: 100%;
  }
  .master-data-page .responsive-master-table tbody tr {
    position: relative;
    margin-bottom: .9rem;
    padding: .95rem;
    border: 1px solid #e7edf6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.05);
  }
  .master-data-page .responsive-master-table tbody tr:last-child {
    margin-bottom: 0;
  }
  .master-data-page .responsive-master-table tbody tr:hover {
    transform: none;
    background: #fff;
  }
  .master-data-page .responsive-master-table td {
    display: grid;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .62rem 0;
    border: 0;
    border-bottom: 1px dashed #e7edf6;
    text-align: left !important;
  }
  .master-data-page .responsive-master-table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .master-data-page .responsive-master-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding-top: .15rem;
  }
  .master-data-page .responsive-master-table td.master-primary {
    display: block;
    padding-top: 0;
    padding-bottom: .8rem;
  }
  .master-data-page .responsive-master-table td.master-primary::before {
    display: none;
  }
  .master-data-page .responsive-master-table td .badge {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
  .master-data-page .master-actions {
    justify-content: stretch;
    width: 100%;
  }
  .master-data-page .master-actions .btn {
    flex: 1 1 130px;
  }
  .master-data-page .responsive-master-table td.master-actions-cell {
    display: block;
  }
  .master-data-page .responsive-master-table td.master-actions-cell::before {
    display: block;
    margin-bottom: .55rem;
  }
  .master-data-page .responsive-master-table td.master-empty {
    display: block;
  }
  .master-data-page .responsive-master-table td.master-empty::before {
    display: none;
  }

  /* Make the inline form grids single-column only where necessary. */
  .master-data-page form .row.g-2 {
    --bs-gutter-y: .2rem;
  }
  .master-data-page .form-label {
    font-size: .82rem;
    font-weight: 650;
  }
  .master-data-page .form-control,
  .master-data-page .form-select {
    min-height: 44px;
  }
}
@media (max-width: 575.98px) {
  .master-data-page .main-content > .container-fluid {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
  .master-data-page .master-page-head h1 {
    font-size: 1.35rem;
  }
  .master-data-page .responsive-master-table tbody tr {
    padding: .85rem;
    border-radius: 15px;
  }
  .master-data-page .responsive-master-table td {
    grid-template-columns: minmax(76px, 31%) minmax(0, 1fr);
    gap: .55rem;
    font-size: .86rem;
  }
  .master-data-page .responsive-master-table td.master-primary {
    font-size: .92rem;
  }
  .master-data-page .master-actions .btn {
    flex-basis: 100%;
  }
}

/* ==============================================================
   GALA KOMP - FINAL INDEPENDENT SCROLL FIX
   Sidebar benar-benar fixed terhadap viewport.
   Hanya dashboard-main yang menjadi area scroll.
   Header/topbar tetap sticky di dalam area main.
   ============================================================= */
html:has(.dashboard-layout),
html:has(.dashboard-layout) body {
  height: 100% !important;
}

@media (min-width: 992px) {
  html:has(.dashboard-layout),
  html:has(.dashboard-layout) body {
    width: 100% !important;
    overflow: hidden !important;
  }

  body:has(.dashboard-layout) .app-shell,
  body:has(.dashboard-layout) .dashboard-layout {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body:has(.dashboard-layout) .dashboard-layout {
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }

  /* Sidebar: tidak pernah ikut scroll halaman */
  body:has(.dashboard-layout) .dashboard-layout > .dashboard-sidebar,
  body:has(.dashboard-layout) .dashboard-layout > .gk-sidebar,
  body:has(.dashboard-layout) .app-shell > .container-fluid .dashboard-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 282px !important;
    min-width: 282px !important;
    max-width: 282px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    z-index: 1100 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* Main: satu-satunya area scroll */
  body:has(.dashboard-layout) .dashboard-layout > .dashboard-main,
  body:has(.dashboard-layout) .app-shell > .container-fluid .dashboard-main {
    position: relative !important;
    display: block !important;
    width: calc(100vw - 282px) !important;
    max-width: calc(100vw - 282px) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin-left: 282px !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
  }

  /* Header tidak ikut hilang saat isi main di-scroll */
  body:has(.dashboard-layout) .dashboard-main > .topbar,
  body:has(.dashboard-layout) .dashboard-main .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    flex-shrink: 0 !important;
  }

  /* Sidebar collapse */
  body:has(.dashboard-layout) .dashboard-layout.sidebar-collapsed > .dashboard-sidebar,
  body:has(.dashboard-layout) .dashboard-layout.sidebar-collapsed > .gk-sidebar {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }

  body:has(.dashboard-layout) .dashboard-layout.sidebar-collapsed > .dashboard-main {
    width: calc(100vw - 88px) !important;
    max-width: calc(100vw - 88px) !important;
    margin-left: 88px !important;
  }

  /* Sidebar hidden */
  body:has(.dashboard-layout) .dashboard-layout.sidebar-hidden > .dashboard-sidebar,
  body:has(.dashboard-layout) .dashboard-layout.sidebar-hidden > .gk-sidebar {
    transform: translateX(-110%) !important;
  }

  body:has(.dashboard-layout) .dashboard-layout.sidebar-hidden > .dashboard-main {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
  }

  /* Struktur teknisi: .container-fluid > .row */
  body:has(.dashboard-layout) .app-shell > .container-fluid {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:has(.dashboard-layout) .app-shell > .container-fluid > .row {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 991.98px) {
  /* Android/iPhone: dashboard must never be covered by the welcome blur layer.
     Mobile entry should be immediately interactive even if JS is delayed/blocked. */
  .welcome-overlay,
  body:has(.dashboard-layout) .welcome-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Mobile: sidebar tetap overlay, main tetap menjadi area scroll */
  body:has(.dashboard-layout) {
    overflow: hidden !important;
  }

  body:has(.dashboard-layout) .dashboard-layout,
  body:has(.dashboard-layout) .app-shell {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body:has(.dashboard-layout) .dashboard-layout > .dashboard-main,
  body:has(.dashboard-layout) .app-shell > .container-fluid .dashboard-main {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    margin-left: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  body:has(.dashboard-layout) .dashboard-main > .topbar,
  body:has(.dashboard-layout) .dashboard-main .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
  }
}

/* ==============================================================
   GALA KOMP - MOBILE / TABLET UX HARDENING
   Target: Android Chrome, iPhone Safari, tablet Android/iPad.
   Prinsip: touch-first, no horizontal page overflow, safe-area aware.
   ============================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
a,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Prevent Bootstrap negative margins / wide children from creating page-level
   horizontal scroll on narrow displays. */
.dashboard-main,
.main-content,
.page-content,
.dashboard-main > *,
.main-content > * {
  max-width: 100%;
  min-width: 0;
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.table-responsive > table {
  margin-bottom: 0;
}

.form-control,
.form-select,
.form-check-input,
.btn,
.btn-premium,
.quick-action,
.sidebar-tool,
.gk-mobile-menu,
.gk-nav-group-toggle,
.gk-nav-item,
.toolbar-btn {
  -webkit-tap-highlight-color: transparent;
}

.form-control,
.form-select,
textarea.form-control {
  min-height: 44px;
}

.btn,
.btn-premium,
a.btn,
button,
.toolbar-btn {
  min-height: 44px;
}

@media (max-width: 991.98px) {
  .dashboard-main {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .dashboard-main > .topbar,
  .dashboard-main .topbar {
    padding-top: max(.75rem, env(safe-area-inset-top)) !important;
    min-height: 60px;
  }

  .dashboard-main .topbar > div,
  .dashboard-main .topbar .d-flex {
    min-width: 0;
  }

  .page-title,
  .topbar .h3 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .gk-mobile-menu {
    top: max(12px, env(safe-area-inset-top));
  }

  .gk-mobile-scrim {
    z-index: 1200 !important;
    touch-action: none;
  }

  .dashboard-sidebar,
  .dashboard-sidebar.gk-sidebar {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Cards and content get compact spacing on tablet. */
  .dashboard-main .p-4 {
    padding: 1rem !important;
  }

  .dashboard-main .premium-card {
    border-radius: 18px;
  }

  /* Keep two-column desktop cards readable on tablets; stack only the
     common analytics/content rows when Bootstrap reaches tablet width. */
  .dashboard-main .row.g-4.mb-4 > [class*="col-12"] + [class*="col-12"] {
    margin-top: 0;
  }

  .dashboard-main .modal-dialog {
    margin: .75rem;
    max-width: calc(100% - 1.5rem);
  }

  .dashboard-main .modal-content {
    max-height: calc(100dvh - 1.5rem);
    overflow: hidden;
  }

  .dashboard-main .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Action clusters may wrap rather than squeeze controls below touch size. */
  .dashboard-main .btn-toolbar,
  .dashboard-main .quick-actions,
  .dashboard-main .master-actions,
  .dashboard-main .toolbar-actions {
    flex-wrap: wrap;
  }

  /* Long identifiers / URLs never widen the viewport. */
  .dashboard-main td,
  .dashboard-main th,
  .dashboard-main .text-truncate,
  .dashboard-main code,
  .dashboard-main pre,
  .dashboard-main .small,
  .dashboard-main .form-text {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 767.98px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .dashboard-main > .topbar,
  .dashboard-main .topbar {
    padding-left: max(.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(.75rem, env(safe-area-inset-right)) !important;
  }

  .dashboard-main .topbar .d-flex.align-items-center.justify-content-between,
  .dashboard-main .topbar .d-flex.justify-content-between {
    flex-wrap: wrap;
  }

  .dashboard-main .topbar .page-title,
  .dashboard-main .topbar h1 {
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
    line-height: 1.15;
  }

  .dashboard-main .topbar .eyebrow {
    font-size: .61rem;
    letter-spacing: .11em;
  }

  .dashboard-main > .p-3,
  .dashboard-main .p-3 {
    padding: .8rem !important;
  }

  .dashboard-main .p-4,
  .dashboard-main .p-md-4 {
    padding: .85rem !important;
  }

  .dashboard-main .container,
  .dashboard-main .container-fluid {
    --bs-gutter-x: 1rem;
  }

  .dashboard-main .row {
    --bs-gutter-x: .8rem;
  }

  .dashboard-main .row.g-4,
  .dashboard-main .row.g-3 {
    --bs-gutter-y: .8rem;
  }

  /* Forms: use a single-column flow for touch devices. */
  .dashboard-main .row > [class^="col-"],
  .dashboard-main .row > [class*=" col-"] {
    min-width: 0;
  }

  .dashboard-main .input-group > .form-control,
  .dashboard-main .input-group > .form-select {
    min-width: 0;
  }

  .dashboard-main .form-label {
    margin-bottom: .3rem;
    font-size: .78rem;
    font-weight: 700;
  }

  .dashboard-main .form-text {
    font-size: .72rem;
    line-height: 1.35;
  }

  /* Tables stay fully usable through horizontal touch scrolling. */
  .dashboard-main .table-responsive {
    margin-left: -.05rem;
    margin-right: -.05rem;
    border-radius: 12px;
  }

  .dashboard-main .table-responsive > table {
    min-width: 620px;
  }

  .dashboard-main .table-responsive table.table-sm {
    min-width: 560px;
  }

  /* Action buttons remain easy to press and don't collide. */
  .dashboard-main .btn-group,
  .dashboard-main .btn-toolbar {
    width: 100%;
  }

  .dashboard-main .btn-group > .btn,
  .dashboard-main .btn-toolbar > .btn,
  .dashboard-main .btn-toolbar > .btn-group {
    min-width: 0;
  }

  .dashboard-main .btn-toolbar > .btn-group {
    flex: 1 1 auto;
  }

  .dashboard-main .btn-toolbar > .btn,
  .dashboard-main .btn-toolbar > .btn-group > .btn {
    min-height: 44px;
  }

  .dashboard-main .dropdown-menu {
    max-width: calc(100vw - 24px);
  }

  .dashboard-main .alert {
    overflow-wrap: anywhere;
  }

  /* Bootstrap cards/modals on very small screens. */
  .dashboard-main .card,
  .dashboard-main .premium-card {
    overflow: hidden;
    border-radius: 16px;
  }

  .dashboard-main .card-body {
    min-width: 0;
  }

  .dashboard-main .modal-dialog {
    margin: .5rem;
    max-width: calc(100% - 1rem);
  }

  .dashboard-main .modal-header,
  .dashboard-main .modal-footer {
    gap: .5rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .gk-mobile-menu {
    left: max(10px, env(safe-area-inset-left));
    top: max(10px, env(safe-area-inset-top));
    width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .gk-mobile-menu.is-open {
    left: auto;
    right: max(10px, env(safe-area-inset-right));
  }

  .dashboard-sidebar,
  .dashboard-sidebar.gk-sidebar {
    width: min(88vw, 320px) !important;
    min-width: min(88vw, 320px) !important;
    max-width: min(88vw, 320px) !important;
  }

  .dashboard-layout.sidebar-hidden .dashboard-sidebar,
  .dashboard-layout.sidebar-collapsed .dashboard-sidebar {
    width: min(88vw, 320px) !important;
  }

  .dashboard-main .btn:not(.btn-group .btn),
  .dashboard-main a.btn:not(.btn-group .btn),
  .dashboard-main button:not(.sidebar-tool):not(.gk-mobile-menu) {
    max-width: 100%;
  }

  .dashboard-main form .d-flex.flex-wrap,
  .dashboard-main .d-flex.flex-wrap.align-items-center {
    align-items: stretch !important;
  }

  .dashboard-main form .d-flex.flex-wrap > .btn,
  .dashboard-main form .d-flex.flex-wrap > a.btn {
    flex: 1 1 100%;
  }

  .dashboard-main .btn-toolbar .btn,
  .dashboard-main .btn-toolbar .btn-group {
    flex: 1 1 100%;
  }

  .dashboard-main .btn-group > .btn {
    flex: 1 1 0;
  }

  .dashboard-main .table-responsive > table {
    min-width: 540px;
  }

  .dashboard-main .modal-dialog {
    margin: .35rem;
    max-width: calc(100% - .7rem);
  }

  .dashboard-main .modal-content {
    border-radius: 14px;
  }
}

@media (max-width: 420px) {
  .dashboard-main .topbar .eyebrow {
    font-size: .56rem;
  }

  .dashboard-main .topbar .page-title,
  .dashboard-main .topbar h1 {
    font-size: 1.05rem !important;
  }

  .dashboard-main .table-responsive > table {
    min-width: 500px;
  }
}

/* iPhone safe-area handling for fixed/overlay navigation. */
@supports (padding: env(safe-area-inset-bottom)) {
  .gk-mobile-scrim {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==============================================================
   MOBILE NAV STACKING FIX v2.2
   The scrim must sit BELOW the sidebar so sidebar dropdown buttons
   remain tappable on Android Chrome / iPhone Safari / tablets.
   ============================================================== */
@media (max-width: 991.98px) {
  body.gk-menu-open { overflow: hidden !important; }
  body.gk-menu-open .dashboard-layout .gk-mobile-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    pointer-events: auto !important;
    background: rgba(2, 8, 23, .48) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.gk-menu-open .dashboard-layout .dashboard-sidebar,
  body.gk-menu-open .dashboard-layout .gk-sidebar {
    position: fixed !important;
    z-index: 1201 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
  body.gk-menu-open .dashboard-layout .dashboard-sidebar *,
  body.gk-menu-open .dashboard-layout .gk-sidebar * {
    pointer-events: auto;
  }

  /* Touch-first dropdown groups */
  .dashboard-sidebar .gk-nav-group-toggle {
    position: relative !important;
    z-index: 2 !important;
    min-height: 50px !important;
    touch-action: manipulation !important;
    -webkit-user-select: none;
    user-select: none;
  }
  .dashboard-sidebar .gk-collapse {
    position: relative !important;
    z-index: 1 !important;
    max-height: 0 !important;
  }
  .dashboard-sidebar .gk-collapse.show {
    max-height: 600px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .dashboard-sidebar .gk-submenu {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
  }
  .dashboard-sidebar .gk-subitem {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
}

/* Android/iOS dropdown reliability: one native click event handles both touch and mouse. */
@media (max-width: 991.98px) {
  .dashboard-sidebar .gk-nav-group-toggle {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  .dashboard-sidebar .gk-collapse {
    display: block !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    transition: none !important;
  }
  .dashboard-sidebar .gk-collapse.show {
    display: block !important;
    max-height: 900px !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  .dashboard-sidebar .gk-nav-group.is-open .gk-group-chevron {
    transform: rotate(180deg);
  }
}

/* ==============================================================
   MOBILE DROPDOWN HARD RESET v3.0
   Mobile only. Desktop rules are intentionally untouched.
   ============================================================== */
@media (max-width: 991.98px) {
  .dashboard-layout.mobile-nav-open .dashboard-sidebar {
    z-index: 2300 !important;
    pointer-events: auto !important;
  }

  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-nav-group,
  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-nav-group-toggle,
  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-collapse,
  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-submenu,
  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-subitem {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-collapse {
    display: none !important;
    position: static !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-collapse.show {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  .dashboard-layout.mobile-nav-open .dashboard-sidebar .gk-nav-group-toggle {
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
}


/* ==============================================================
   MOBILE NATIVE NAVIGATION v4.0
   Mobile only. Uses native HTML <details>/<summary> so Android,
   iPhone and tablet browsers do not depend on JS for dropdowns.
   Desktop navigation remains untouched.
   ============================================================== */
.gk-mobile-native-nav { display: none; }

@media (max-width: 991.98px) {
  .dashboard-sidebar .gk-mobile-native-nav {
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 12px;
  }

  .dashboard-sidebar .gk-desktop-sidebar-nav {
    display: none !important;
  }

  .gk-mobile-native-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .gk-mobile-native-item,
  .gk-mobile-native-group > summary {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: .93rem;
    line-height: 1.2;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .gk-mobile-native-item:active,
  .gk-mobile-native-group > summary:active,
  .gk-mobile-native-item.active,
  .gk-mobile-native-group[open] > summary {
    background: rgba(255,255,255,.08);
  }

  .gk-mobile-native-group {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .gk-mobile-native-group > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
  }

  .gk-mobile-native-group > summary::-webkit-details-marker { display: none; }
  .gk-mobile-native-group > summary::marker { display: none; }

  .gk-native-chevron {
    margin-left: auto;
    font-size: 1.05rem;
    transition: transform .16s ease;
  }

  .gk-mobile-native-group[open] > summary .gk-native-chevron {
    transform: rotate(180deg);
  }

  .gk-mobile-native-submenu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 1px 0 4px 22px;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,.16);
  }

  .gk-mobile-native-subitem {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 10px 13px;
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .gk-mobile-native-subitem:active,
  .gk-mobile-native-subitem.active {
    background: rgba(255,255,255,.1);
  }

  .gk-mobile-native-item .gk-nav-icon,
  .gk-mobile-native-group .gk-nav-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .gk-mobile-account-title {
    margin-top: 12px;
    margin-bottom: -2px;
    padding-left: 8px;
  }

  .gk-mobile-logout { margin-bottom: 4px; }
}

/* Desktop safety: the body-level mobile drawer must never render on desktop.
   JavaScript may create the node early, so hide it by default. */
.gk-mobile-drawer,
.gk-mobile-drawer-scrim {
  display: none !important;
}

/* ==============================================================
   MOBILE DRAWER FINAL - BODY LEVEL
   This layer is intentionally independent from .dashboard-sidebar.
   Desktop is unaffected because every rule is mobile-only.
   ============================================================== */
@media (max-width: 991.98px) {
  body.gk-mobile-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Old sidebar mobile implementation is hidden; body-level drawer is authoritative. */
  .dashboard-layout > .dashboard-sidebar {
    transform: translate3d(-115%,0,0) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .dashboard-layout.mobile-nav-open > .dashboard-sidebar,
  .dashboard-layout.sidebar-locked.mobile-nav-open > .dashboard-sidebar {
    transform: translate3d(-115%,0,0) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .gk-mobile-drawer-scrim {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(2, 6, 23, .46) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 50000 !important;
    transition: opacity .16s ease, visibility .16s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .gk-mobile-drawer-scrim.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .gk-mobile-drawer {
    display: block !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(88vw, 340px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 18px 0 45px rgba(15,23,42,.18) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    transform: translate3d(-110%,0,0) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 50001 !important;
    transition: transform .20s ease, opacity .16s ease, visibility .16s ease !important;
  }

  .gk-mobile-drawer.is-open {
    transform: translate3d(0,0,0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .gk-mobile-drawer .gk-nav-section {
    color: #64748b !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 10px 8px 7px !important;
  }

  .gk-mobile-drawer .gk-mobile-native-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .gk-mobile-drawer .gk-mobile-native-item,
  .gk-mobile-drawer .gk-mobile-native-group > summary {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #0f172a !important;
    text-decoration: none !important;
    font-size: .93rem !important;
    font-weight: 700 !important;
    gap: 10px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
  }

  .gk-mobile-drawer .gk-mobile-native-item:active,
  .gk-mobile-drawer .gk-mobile-native-group > summary:active,
  .gk-mobile-drawer .gk-mobile-native-item.active,
  .gk-mobile-drawer .gk-mobile-native-group[open] > summary {
    background: #eef4ff !important;
    color: #1d4ed8 !important;
  }

  .gk-mobile-drawer .gk-mobile-native-group > summary::-webkit-details-marker { display:none !important; }
  .gk-mobile-drawer .gk-mobile-native-group > summary::marker { display:none !important; }
  .gk-mobile-drawer .gk-native-chevron { margin-left:auto !important; }
  .gk-mobile-drawer .gk-mobile-native-group[open] .gk-native-chevron { transform:rotate(180deg) !important; }

  .gk-mobile-drawer .gk-mobile-native-submenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 1px 0 5px 18px !important;
    padding: 2px 0 2px 12px !important;
    border-left: 2px solid #dbeafe !important;
  }

  .gk-mobile-drawer .gk-mobile-native-subitem {
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:46px !important;
    box-sizing:border-box !important;
    padding:9px 12px !important;
    border-radius:10px !important;
    color:#334155 !important;
    text-decoration:none !important;
    font-size:.86rem !important;
    font-weight:600 !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .gk-mobile-drawer .gk-mobile-native-subitem:active,
  .gk-mobile-drawer .gk-mobile-native-subitem.active {
    background:#f1f5f9 !important;
    color:#1d4ed8 !important;
  }

  .gk-mobile-drawer .gk-nav-icon {
    flex: 0 0 32px !important;
    width:32px !important;
    height:32px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .gk-mobile-drawer .gk-mobile-logout {
    color:#b91c1c !important;
  }
}