/* ==========================================================================
   7ajtak - phone / installed-app (PWA) styling
   Loaded after site.css. Everything is inside the phone media query, so the
   desktop website is untouched. Goal: make inner pages feel like the mobile
   app - compact top bar with a back button, soft rounded cards, big touch
   targets, horizontal list cards and filters tucked behind a "Filters" button
   (see wwwroot/js/mobile.js).
   ========================================================================== */

@media (max-width: 991.98px) {

  /* ---------- Page canvas ---------- */
  body { background: #f4f7f6; -webkit-tap-highlight-color: transparent; }
  main .container { padding-left: 14px; padding-right: 14px; }
  main .container.py-4,
  main .container.py-5 { padding-top: 0.9rem !important; padding-bottom: 1.4rem !important; }
  main .container.py-3 { padding-top: 0.7rem !important; }
  img { max-width: 100%; }

  /* ---------- Top bar on inner pages: back button + logo ---------- */
  body:not(.page-home) .site-navbar { position: sticky; top: 0; z-index: 1030; padding: 0.3rem 0; padding-top: calc(0.3rem + env(safe-area-inset-top)); }
  .site-navbar .container { position: relative; }
  .app-back {
    display: none;
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.14); color: #fff;
    border: 0; border-radius: 50%;
    font-size: 1.25rem;
  }
  body:not(.page-home) .app-back { display: flex; }
  .app-back:active { background: rgba(255,255,255,0.28); }

  /* ---------- Titles ---------- */
  .section-title { font-size: 1.25rem; margin-bottom: 0.75rem; }
  .section-title.h4, .section-title.h5 { font-size: 1.1rem; }
  h1.h3 { font-size: 1.3rem; }
  main p.text-muted { font-size: 0.9rem; }

  /* ---------- Cards ---------- */
  .card-soft { border: 0; border-radius: 16px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07); }
  .card-soft.p-4 { padding: 1rem !important; }
  .card-soft[style*="max-width"] { max-width: 100% !important; }
  .alert { border: 0; border-radius: 14px; }

  /* ---------- Buttons, inputs, badges ---------- */
  .btn { border-radius: 12px; font-weight: 600; padding: 0.6rem 1rem; }
  .btn-sm { border-radius: 10px; padding: 0.4rem 0.7rem; }
  .btn-lg { padding: 0.75rem 1.25rem; }
  .btn-brand, .btn-warning, .btn-success { box-shadow: 0 2px 6px rgba(15, 118, 110, 0.18); }
  .form-control, .form-select {
    border-radius: 12px;
    border-color: #e2e8f0;
    padding: 0.65rem 0.85rem;
    font-size: 16px; /* stops iOS zooming in on focus */
    background-color: #fff;
  }
  .form-label { font-size: 0.85rem; margin-bottom: 0.25rem; }
  .badge { border-radius: 999px; font-weight: 600; padding: 0.4em 0.7em; }
  .badge-soft { background: rgba(15, 118, 110, 0.1); color: var(--brand-dark); }

  /* ---------- List cards become compact horizontal rows (like the app) ---------- */
  .row > [class*="col-"]:has(> .tech-card) { flex: 0 0 100%; max-width: 100%; }
  .row.g-3:has(> [class*="col-"] > .tech-card) { --bs-gutter-y: 0.75rem; }
  .tech-card {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    height: auto;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
  }
  .tech-card:hover { transform: none; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07); }
  .tech-card:active { transform: scale(0.99); }
  .tech-card .tech-photo,
  .tech-card .tech-photo-placeholder {
    width: 116px; min-width: 116px; height: auto; min-height: 116px;
    flex: 0 0 116px;
    border-radius: 16px 0 0 16px;
  }
  .tech-card .tech-photo-placeholder { font-size: 2rem; }
  .tech-card .tech-body { flex: 1; min-width: 0; padding: 0.7rem 0.85rem; }
  .tech-card .tech-body strong { display: block; line-height: 1.25; }
  .tech-card > .badge.position-absolute { font-size: 0.65rem; margin: 6px !important; }

  /* ---------- Filter forms: search box + "Filters" button (mobile.js) ---------- */
  .app-filter-btn { position: relative; white-space: nowrap; }
  .app-filter-btn .count {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
    border-radius: 999px; background: var(--accent); color: #1e293b;
    font-size: 0.7rem; line-height: 18px; text-align: center;
  }
  form.app-filters { background: #fff; border-radius: 16px; padding: 0.6rem; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); margin-left: 0; margin-right: 0; }
  form.app-filters > * { padding-left: 4px; padding-right: 4px; }
  form.app-filters .collapse, form.app-filters .collapsing { margin-top: 0.4rem; }

  /* ---------- Detail pages ---------- */
  .card-soft h1.h3 { line-height: 1.25; }
  .row.g-3 > [class*="col-6"] .card-soft img { height: 130px !important; }
  .carousel img, .carousel-item img { max-height: 260px; }

  /* ---------- Misc ---------- */
  .table-responsive, main .table { font-size: 0.88rem; }
  .pagination { flex-wrap: wrap; justify-content: center; }
  .modal-content { border-radius: 18px; }
  .dropdown-menu { border-radius: 14px; }
}

/* Installed-app (standalone) polish */
@media (display-mode: standalone) and (max-width: 991.98px) {
  body { overscroll-behavior-y: contain; user-select: none; -webkit-user-select: none; }
  input, textarea, select, [contenteditable], p, h1, h2, h3, .card-soft { user-select: text; -webkit-user-select: text; }
}