/**
 * SoftMit — global mobile / responsive helpers
 * Συμπληρώνει inline styles σε όλες τις σελίδες όπου φορτώνεται.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  font-size: 16px;
  max-width: 100%;
}

button,
a.btn,
.btn,
.btn-top,
.btn-action,
.tile,
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  touch-action: manipulation;
}

table {
  width: 100%;
  max-width: 100%;
}

.table-wrap,
.table-responsive,
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  header,
  .topbar,
  .header,
  .page-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .topbar-actions,
  .header-actions,
  .actions,
  .btn-row {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .grid2,
  .grid-2,
  .two-cols {
    grid-template-columns: 1fr !important;
  }

  .sidebar,
  .side-nav {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page,
  .wrap,
  .container,
  .content {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .tile,
  .mod-card,
  .card-grid > * {
    min-width: 0;
  }

  h1 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }
  h2 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; }

  .hide-mobile { display: none !important; }
}

@media (max-width: 600px) {
  .pill,
  .btn-top {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  form .form-group,
  .field {
    margin-bottom: 14px;
  }

  .modal,
  .trial-modal {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }
}

@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
}
