/*
 * Native App Stylesheet
 * Styling khusus untuk Turbo Native mobile app
 * File ini hanya dimuat saat aplikasi diakses dari native app
 */

/* ================================================
   LEGACY VISIBILITY CONTROLS
   ================================================ */
.d-hotwire-native-hidden {
  display: none !important;
}

.d-hotwire-native-block {
  display: block !important;
}

/* Hide title tag content (though this won't affect Android title bar) */
title {
  display: none !important;
}

/* ================================================
   VISIBILITY CONTROLS
   ================================================ */

/* Hide elements in native app that should only appear in web browser */
.web-only {
  display: none !important;
}

/* Show elements only in native app */
.native-only {
  display: block;
}

/* Hide web header (gradient with search) in native app */
body.native-app header.gradient-primary {
  display: none !important;
}

/* Alternative: hide all headers with gradient in native */
.native-app header {
  display: none !important;
}

/* ================================================
   NATIVE HEADER STYLING
   ================================================ */

.native-header {
  /* Clean white background for native app */
  background: white;
  color: #1f2937;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  /* Support for edge-to-edge display on Android */
  padding-top: env(safe-area-inset-top);
}

.native-header .native-back-btn {
  /* Tombol back dengan styling native-like */
  background: transparent;
  color: #374151;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.native-header .native-back-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.native-header .native-back-btn:active {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.95);
}

.native-header .native-back-btn i {
  color: #374151;
}

.native-header h1 {
  color: #1f2937;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Header spacer untuk fixed positioning */
.native-header-spacer {
  /* Tinggi header + safe area */
  height: calc(3.5rem + env(safe-area-inset-top));
}

/* ================================================
   NATIVE-SPECIFIC ADJUSTMENTS
   ================================================ */

/* Hide web browser elements in native app */
.native-only ~ .bottom-nav {
  /* Adjust bottom navigation for native app if needed */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Adjust content padding for native safe areas */
body.native-app {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  position: relative;
}

/* Hide WebView title bar by covering it with white overlay */
body.native-app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: white;
  z-index: 10000;
  pointer-events: none;
}

/* ================================================
   NATIVE NAVIGATION TRANSITIONS
   ================================================ */

.native-header {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.native-header.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* ================================================
   ANDROID MATERIAL DESIGN STYLING
   ================================================ */

/* Material Design ripple effect for buttons */
.native-back-btn {
  position: relative;
  overflow: hidden;
}

.native-back-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.native-back-btn:active::after {
  width: 100%;
  height: 100%;
}

/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */

/* Untuk layar kecil */
@media (max-width: 375px) {
  .native-header h1 {
    font-size: 1rem;
  }
}

/* Untuk layar besar (tablet) */
@media (min-width: 768px) {
  .native-header {
    max-width: 768px;
    margin: 0 auto;
  }
}

/* ================================================
   DARK MODE SUPPORT
   ================================================ */

@media (prefers-color-scheme: dark) {
  .native-header {
    background: #1f2937;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .native-header h1,
  .native-header .native-back-btn i {
    color: white;
  }
}