/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   Makes all pages mobile-friendly
   Optimized for phones in portrait mode
   ============================================ */

/* Global portrait phone constraints */
@media screen and (max-width: 767px) and (orientation: portrait) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  * {
    max-width: 100% !important;
  }
}

/* Base mobile adjustments */
@media screen and (max-width: 767px) {
  /* Theme toggle button - smaller on mobile */
  .theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    top: 70px !important;
    right: 10px !important;
    border-width: 1.5px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
    border-radius: 50% !important; /* Ensure it stays circular */
    position: fixed !important; /* Keep it fixed position */
    left: auto !important; /* Override any left positioning */
    max-width: 32px !important; /* Prevent it from expanding */
    min-width: 32px !important;
  }
  
  /* Typography - smaller text for mobile */
  body {
    font-size: 14px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
  }
  
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.15rem !important; }
  h4 { font-size: 1rem !important; }
  h5 { font-size: 0.9rem !important; }
  h6 { font-size: 0.85rem !important; }
  
  p, span, div, li, td, th {
    font-size: 14px !important;
  }
  
  /* Containers - remove max-widths, add padding */
  .wrap,
  .page-wrap,
  .container,
  .content {
    max-width: 100% !important;
    padding: var(--space-sm) var(--space-md) !important;
    margin: 0 !important;
  }
  
  /* Grids - stack on mobile */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6,
  .mk-grid-2,
  .mk-grid-3 {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }
  
  /* Form grids - stack all columns */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }
  
  .col-12,
  .col-8,
  .col-6,
  .col-4,
  .col-3,
  .col-2 {
    grid-column: span 12 !important;
  }
  
  /* Tables - make scrollable horizontally */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  
  table thead,
  table tbody,
  table tr {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  
  /* Alternative: Stack table rows on mobile */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-stack-mobile {
    display: block;
  }
  
  .table-stack-mobile thead {
    display: none;
  }
  
  .table-stack-mobile tbody,
  .table-stack-mobile tr,
  .table-stack-mobile td {
    display: block;
    width: 100%;
  }
  
  .table-stack-mobile td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--border-light);
    text-align: left !important;
  }
  
  .table-stack-mobile td:before {
    content: attr(data-label) ": ";
    font-weight: 600;
    display: inline-block;
    min-width: 120px;
    font-size: 13px !important;
  }
  
  /* Table text sizes - smaller on mobile */
  .table th,
  .table td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  
  .table th {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  
  table th,
  table td {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
  
  /* Forms - smaller inputs for mobile */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="url"],
  input[type="password"],
  select,
  textarea {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
    margin-bottom: var(--space-sm) !important;
  }
  
  /* Buttons - smaller size for mobile */
  button,
  .btn,
  .button,
  input[type="submit"],
  input[type="button"],
  a.button {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    touch-action: manipulation !important;
  }
  
  /* Small buttons - even smaller */
  .btn-sm,
  button.btn-sm,
  .button-sm {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  
  /* Cards - full width, better spacing */
  .card,
  .mk-card,
  .glass-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--space-md) 0 !important;
    padding: var(--space-md) !important;
  }
  
  /* Sidebars - stack below content */
  .sidebar,
  #sidebarSummary {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--space-md) 0 !important;
    padding: var(--space-md) !important;
  }
  
  .page-wrap {
    flex-direction: column !important;
    padding: var(--space-md) !important;
    gap: var(--space-md) !important;
  }
  
  .form-main {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Images - responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Navigation - smaller links for mobile */
  .nav-link,
  .nav-dropdown-toggle {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* Show notifications button on mobile */
  .nav-notifications-mobile {
    display: flex !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 var(--space-sm) 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 998 !important;
    z-index: 101 !important;
    flex-shrink: 0 !important;
  }
  
  .nav-notifications-btn {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 2px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
  }
  
  /* Dropdowns - full width on mobile */
  .nav-dropdown-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  
  /* Settings dropdown - fix positioning on mobile */
  #settingsDropdown {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  
  /* Modals and popups - full screen on mobile */
  .modal,
  .popup,
  .dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: var(--space-md) !important;
  }
  
  /* Action buttons - stack vertically, smaller */
  .action-buttons,
  .button-group {
    flex-direction: column !important;
    gap: var(--space-sm) !important;
  }
  
  .action-buttons button,
  .action-buttons .btn,
  .button-group button,
  .button-group .btn {
    width: 100% !important;
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
  
  /* Badge and label sizes */
  .badge,
  .label {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }
  
  /* Lists - better spacing */
  ul, ol {
    padding-left: var(--space-md) !important;
  }
  
  li {
    margin-bottom: var(--space-xs) !important;
  }
  
  /* Spacing adjustments */
  .space-lg,
  .margin-lg {
    margin: var(--space-md) 0 !important;
  }
  
  .space-xl,
  .margin-xl {
    margin: var(--space-lg) 0 !important;
  }
  
  /* Hide non-essential elements on mobile */
  .hide-mobile,
  .mobile-hide {
    display: none !important;
  }
  
  /* Show mobile-only elements */
  .show-mobile,
  .mobile-show {
    display: block !important;
  }
  
  /* Feature groups - better spacing */
  .mk-feature-group {
    margin-bottom: var(--space-xl) !important;
  }
  
  .mk-feature-group h3 {
    font-size: 1.3rem !important;
    margin-bottom: var(--space-md) !important;
  }
  
  .mk-feature-group h4 {
    font-size: 1rem !important;
  }
  
  .mk-feature-group p {
    font-size: 13px !important;
  }
  
  /* Glass panels - less padding on mobile */
  .glass-panel {
    padding: var(--space-sm) !important;
  }
  
  /* Form sections - better spacing */
  h2 {
    margin-top: var(--space-lg) !important;
    margin-bottom: var(--space-sm) !important;
    font-size: 1rem !important;
  }
  
  label {
    font-size: 13px !important;
  }
  
  /* Logo adjustments */
  .logo {
    max-width: 150px !important;
  }
  
  /* Text alignment - left on mobile for readability */
  .text-center-mobile {
    text-align: left !important;
  }
  
  /* Prevent horizontal scroll - critical for portrait phones */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure all fixed widths become flexible */
  [style*="width"]:not([style*="max-width"]):not([style*="min-width"]) {
    max-width: 100% !important;
  }
  
  /* Prevent any element from causing overflow */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Tables - prevent overflow */
  table {
    table-layout: auto !important;
    width: 100% !important;
  }
  
  /* Flex containers - prevent overflow */
  [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
  
  /* View engagement page improvements */
  .container-wide {
    padding: var(--space-sm) !important;
    padding-top: var(--space-md) !important;
  }
  
  .page-wrap {
    flex-direction: column !important;
    gap: var(--space-md) !important;
  }
  
  .page-wrap > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix inline flex containers on mobile */
  [style*="display:flex"] {
    flex-direction: column !important;
    gap: var(--space-sm) !important;
  }
  
  [style*="display:flex"][style*="gap:30px"] {
    gap: var(--space-md) !important;
  }
}

/* Small mobile devices (phones in portrait) */
@media screen and (max-width: 480px) {
  /* Theme toggle button - even smaller on small phones */
  .theme-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    top: 65px !important;
    right: 8px !important;
    border-width: 1.5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.2) !important;
    border-radius: 50% !important; /* Ensure it stays circular */
    position: fixed !important; /* Keep it fixed position */
    left: auto !important; /* Override any left positioning */
    max-width: 28px !important; /* Prevent it from expanding */
    min-width: 28px !important;
  }
  
  body {
    font-size: 13px;
    line-height: 1.5;
  }
  
  h1 { font-size: 1.35rem !important; line-height: 1.3 !important; }
  h2 { font-size: 1.2rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.1rem !important; line-height: 1.4 !important; }
  h4 { font-size: 0.95rem !important; line-height: 1.4 !important; }
  
  p, span, div, li, td, th {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  
  .wrap,
  .page-wrap,
  .container,
  .container-wide {
    padding: var(--space-xs) var(--space-sm) !important;
    margin: 0 !important;
  }
  
  .card,
  .mk-card,
  .glass-panel,
  .panel {
    padding: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
  }
  
  .card-header {
    padding: var(--space-xs) var(--space-sm) !important;
  }
  
  .card-body {
    padding: var(--space-sm) !important;
  }
  
  button,
  .btn,
  input[type="submit"],
  input[type="button"],
  a.button {
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 14px !important; /* Keep 14px to prevent iOS zoom */
  }
  
  .nav-link {
    font-size: 13px !important;
    padding: 6px 8px !important;
    min-height: 36px !important;
  }
  
  /* Navigation - compact for small phones */
  .nav-content {
    padding: var(--space-xs) var(--space-sm) !important;
    min-height: 50px !important;
    gap: var(--space-xs) !important;
  }
  
  .nav-content > .nav-logo img,
  .nav-content > div:first-child img {
    width: 40px !important;
    height: 40px !important;
  }
  
  .nav-mobile-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  
  .nav-notifications-btn {
    min-width: 36px !important;
    min-height: 36px !important;
    width: 36px !important;
    height: 36px !important;
  }
  
  /* Spacing - tighter on small phones */
  .space-md,
  .margin-md {
    margin: var(--space-sm) 0 !important;
  }
  
  .space-lg,
  .margin-lg {
    margin: var(--space-md) 0 !important;
  }
  
  .space-xl,
  .margin-xl {
    margin: var(--space-lg) 0 !important;
  }
  
  /* Tables - even more compact */
  .table th,
  .table td {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  
  /* Table responsiveness - prevent truncation */
  table {
    table-layout: auto !important;
    width: 100% !important;
  }
  
  table th,
  table td {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }
  
  /* Table headers - allow wrapping */
  table thead th {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 11px !important;
    padding: 6px 4px !important;
  }
  
  /* Table cells - smaller padding on very small screens */
  table tbody td {
    padding: 6px 4px !important;
    font-size: 11px !important;
  }
  
  /* Summary boxes - compact */
  .summary-box {
    padding: var(--space-sm) !important;
  }
  
  .summary-title {
    font-size: 1rem !important;
    margin-bottom: var(--space-sm) !important;
    padding-bottom: var(--space-xs) !important;
  }
  
  .summary-key {
    font-size: 11px !important;
  }
  
  .summary-value {
    font-size: 12px !important;
  }
  
  /* Readonly blocks - compact */
  .readonly-block label {
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  
  .readonly-block .val {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
  
  /* Feature groups - compact */
  .mk-feature-group {
    margin-bottom: var(--space-lg) !important;
  }
  
  .mk-feature-group h3 {
    font-size: 1.2rem !important;
    margin-bottom: var(--space-sm) !important;
  }
  
  .mk-feature-group h4 {
    font-size: 0.95rem !important;
  }
  
  .mk-feature-group p {
    font-size: 12px !important;
  }
  
  /* Ensure no horizontal overflow */
  * {
    box-sizing: border-box !important;
  }
  
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Remove any fixed widths that might cause overflow */
  [style*="width:"]:not([style*="max-width"]):not([style*="min-width"]) {
    max-width: 100% !important;
  }
  
  /* Flex containers - ensure they wrap */
  [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
}

/* Portrait orientation specific optimizations */
@media screen and (max-width: 767px) and (orientation: portrait) {
  /* Ensure viewport fits content */
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden !important;
  }
  
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Navigation - compact for portrait */
  .nav-content {
    padding: var(--space-xs) var(--space-sm) !important;
    min-height: 55px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Main content - ensure it fits */
  .main-content,
  .page-wrap > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Sidebar - full width in portrait */
  .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--space-sm) 0 !important;
    padding: var(--space-sm) !important;
  }
  
  /* Cards and panels - full width */
  .card,
  .panel,
  .glass-panel {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: var(--space-sm) !important;
  }
  
  /* Grids - always single column in portrait */
  .readonly-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }
  
  /* Buttons - full width for easier tapping */
  .btn,
  button,
  input[type="submit"],
  input[type="button"] {
    width: 100% !important;
    margin-bottom: var(--space-xs) !important;
  }
  
  /* Action buttons - stack vertically */
  .action-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .action-buttons .btn,
  .action-buttons button {
    width: 100% !important;
  }
  
  /* Ensure all containers fit */
  .container,
  .container-wide,
  .wrap {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Prevent any horizontal overflow */
  * {
    max-width: 100% !important;
  }
  
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Landscape orientation adjustments */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .nav-content {
    min-height: 50px !important;
    padding: var(--space-xs) var(--space-md) !important;
  }
  
  .sidebar,
  #sidebarSummary {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }
}

/* Portrait phone specific - ensure everything fits */
@media screen and (max-width: 480px) and (orientation: portrait) {
  /* Extra tight spacing for small portrait phones */
  .container-wide,
  .wrap,
  .page-wrap {
    padding: var(--space-xs) 8px !important;
  }
  
  /* Navigation - very compact */
  .nav-content {
    padding: 6px 8px !important;
    min-height: 48px !important;
    gap: 6px !important;
  }
  
  .nav-content > .nav-logo img,
  .nav-content > div:first-child img {
    width: 36px !important;
    height: 36px !important;
  }
  
  .nav-mobile-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  
  .nav-notifications-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px !important;
  }
  
  /* Typography - slightly smaller for very small phones */
  body {
    font-size: 12px;
  }
  
  h1 { font-size: 1.25rem !important; }
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 1rem !important; }
  
  /* Cards - minimal padding */
  .card,
  .panel,
  .glass-panel {
    padding: 10px !important;
    margin-bottom: var(--space-sm) !important;
  }
  
  /* Summary - very compact */
  .summary-box {
    padding: 10px !important;
  }
  
  .summary-title {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }
  
  .summary-key {
    font-size: 10px !important;
  }
  
  .summary-value {
    font-size: 11px !important;
  }
  
  /* Ensure no element causes horizontal scroll */
  * {
    max-width: 100vw !important;
  }
  
  /* Remove any margins that might push content off screen */
  body > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* View engagement - extra compact for small phones */
  .container-wide {
    padding: 6px 8px !important;
  }
  
  .page-wrap {
    gap: var(--space-sm) !important;
  }
  
  .panel {
    padding: 10px !important;
  }
  
  .readonly-grid {
    gap: 8px !important;
  }
  
  .readonly-block {
    margin-bottom: 8px !important;
  }
  
  /* Navigation menu - ensure it fits */
  .nav-links {
    width: 280px !important;
    max-width: 90vw !important;
    padding: 70px 12px var(--space-md) !important;
  }
  
  /* Dropdowns - ensure they fit */
  .nav-dropdown-menu {
    max-height: 65vh !important;
  }
  
  /* Ensure all text fits - word wrap */
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Long URLs and text - break properly */
  a, span, div, p {
    word-break: break-word !important;
  }
  
  /* Prevent any fixed positioning from causing issues */
  [style*="position: fixed"] {
    left: 0 !important;
    right: 0 !important;
    max-width: 100vw !important;
  }
  
  /* Ensure flex items don't overflow */
  [style*="display:flex"] > * {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  
  /* Bottom navigation bars - prevent overlapping content */
  [style*="position: fixed"][style*="bottom"],
  .bottom-nav,
  .fixed-bottom {
    padding-bottom: env(safe-area-inset-bottom) !important;
    margin-bottom: 0 !important;
  }
  
  /* Add padding to body when bottom nav is present */
  body:has([style*="position: fixed"][style*="bottom"]) {
    padding-bottom: 80px !important;
  }
  
  /* Ensure content doesn't get hidden behind fixed bottom elements */
  .main-content,
  .page-wrap,
  .container {
    padding-bottom: 80px !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Smaller but still touchable targets */
  a,
  button,
  .btn,
  input[type="button"],
  input[type="submit"],
  .clickable {
    min-height: 36px !important;
    min-width: 36px !important;
  }
  
  /* Small buttons can be smaller */
  .btn-sm,
  button.btn-sm {
    min-height: 32px !important;
    min-width: 32px !important;
  }
  
  /* Remove hover effects on touch devices */
  *:hover {
    transform: none !important;
  }
  
  /* Better focus states for keyboard navigation */
  *:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
  }
}

/* Print styles - hide mobile menu, show all content */
@media print {
  .nav-mobile-toggle,
  .nav-overlay {
    display: none !important;
  }
  
  .nav-links {
    display: block !important;
    position: static !important;
  }
}