/* ============================================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ============================================================ */

/* ============================================================
   Mobile Navbar & Sidebar Fix
   ============================================================ */
@media (max-width: 1199px) {
  /* Collapse sidebar otomatis di mobile */
  .layout-menu {
    width: 100% !important;
  }
  
  /* Navbar padding di mobile */
  .layout-navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Content wrapper spacing */
  .content-wrapper {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@media (max-width: 768px) {
  /* Very small devices */
  .container-p-y {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Reduce font sizes di mobile */
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.25rem !important;
  }
  
  h2 {
    font-size: 1.1rem !important;
  }
  
  h3 {
    font-size: 1rem !important;
  }
  
  /* Navigation adjust */
  .layout-navbar {
    height: auto !important;
    min-height: 50px;
  }
  
  /* Card spacing mobile */
  .card {
    margin-bottom: 0.75rem !important;
  }
  
  /* Form control sizing */
  .form-control,
  .form-select {
    font-size: 16px;
    padding: 0.5rem 0.75rem !important;
    height: auto;
  }
  
  /* Table responsive */
  .table {
    font-size: 13px;
  }
  
  .table th,
  .table td {
    padding: 0.5rem !important;
  }
  
  /* Button sizing */
  .btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 14px !important;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 12px !important;
  }
  
  /* Modal improvements */
  .modal-content {
    border-radius: 0.5rem;
  }
  
  .modal-header {
    padding: 0.75rem !important;
  }
  
  .modal-body {
    padding: 1rem !important;
  }
  
  /* Offcanvas nav toggle */
  .navbar-toggler {
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Badge sizing */
  .badge {
    font-size: 11px !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Alert sizing */
  .alert {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  /* Extra small devices */
  .container-p-y {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Hide breadcrumb di very small screens */
  .breadcrumb {
    font-size: 12px;
  }
  
  /* Column full width */
  [class*="col-"] {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
  
  /* Remove horizontal scrolling */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Dropdown full width */
  .dropdown-menu {
    width: 100%;
    max-width: calc(100vw - 1rem);
  }
  
  /* Navbar items */
  .navbar-nav {
    gap: 0.25rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Input group */
  .input-group {
    margin-bottom: 0.5rem !important;
  }
  
  /* Row margin */
  .row {
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ============================================================
   Tablet (768px - 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .container-p-y {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Sidebar width tablet */
  .layout-menu {
    width: 250px !important;
  }
  
  /* Column adjustments */
  [class*="col-md-"] {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
   Login & Register Page Mobile
   ============================================================ */
@media (max-width: 768px) {
  .authentication-wrapper {
    padding: 0 !important;
  }
  
  .authentication-inner {
    padding: 1rem !important;
  }
  
  .card {
    border-radius: 0.5rem !important;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  .app-brand-text {
    font-size: 1rem !important;
  }
  
  .form-label {
    margin-bottom: 0.5rem !important;
    font-size: 13px;
  }
  
  .form-text {
    font-size: 12px !important;
  }
  
  /* Link styling */
  a {
    font-size: 13px;
  }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
  .layout-navbar,
  .layout-menu,
  .content-footer,
  .navbar-toggler,
  button {
    display: none !important;
  }
  
  .content-wrapper {
    padding: 0 !important;
  }
}

/* ============================================================
   Touch Device Improvements
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  button,
  a,
  .btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* More padding for touch */
  .nav-link,
  .menu-link {
    padding: 0.75rem !important;
  }
  
  /* Remove hover effects */
  button:hover,
  a:hover {
    background-color: transparent !important;
  }
}

/* ============================================================
   Landscape Mode Fix
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .layout-navbar {
    height: 50px !important;
  }
  
  .content-wrapper {
    overflow-y: auto;
  }
}

/* ============================================================
   High DPI / Retina Displays
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper text on retina */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================================
   Dark Mode Support
   ============================================================ */
@media (prefers-color-scheme: dark) {
  /* Optional: Add dark mode improvements if needed */
  body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
}