/*
  YD DISTRIBUTION — Responsive Overrides (Mobile)
  - Scoped to touch devices only (html.yd-touch)
  - Designed to NOT affect desktop UI
  - Loaded separately via <link> from header.php
*/

@media (max-width: 767.98px) {
  /* Base rhythm */
  html.yd-touch body {
    font-size: 14.5px;
  }
  html.yd-touch main {
    padding: 12px !important;
  }
  html.yd-touch .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Media never overflow */
  html.yd-touch img,
  html.yd-touch video,
  html.yd-touch canvas,
  html.yd-touch svg {
    max-width: 100%;
    height: auto;
  }

  /* Navbar */
  html.yd-touch .navbar-yd .navbar-brand {
    font-size: 0.98rem;
  }
  html.yd-touch .navbar-yd .btn,
  html.yd-touch .navbar-yd .btn-yd {
    padding: 0.46rem 0.66rem;
    border-radius: 12px;
  }

  /* Header dropdowns: prevent off-screen menus (notif/profile) */
  html.yd-touch .navbar-yd .dropdown-menu {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }
  html.yd-touch .navbar-yd .dropdown-item {
    white-space: normal;
  }

  /* Cards / notes */
  html.yd-touch .card-yd {
    border-radius: 18px;
  }
  html.yd-touch .yd-note {
    padding: 10px 12px;
    border-radius: 18px;
  }
  html.yd-touch .mini-box {
    padding: 12px;
  }

  /* Buttons */
  html.yd-touch .btn-yd {
    padding: 0.52rem 0.78rem;
    border-radius: 13px;
  }
  html.yd-touch .btn-icon-yd {
    width: 40px;
    height: 40px;
  }

  /* Forms */
  html.yd-touch .form-control,
  html.yd-touch .form-select {
    padding: 0.6rem 0.75rem !important;
  }
  html.yd-touch .input-group {
    flex-wrap: wrap;
  }
  html.yd-touch .input-group > .form-control,
  html.yd-touch .input-group > .form-select {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* KPI blocks */
  html.yd-touch .kpi .k {
    min-width: 100% !important;
  }

  /* Pagination */
  html.yd-touch .pagination .page-link {
    padding: 0.42rem 0.66rem;
    border-radius: 11px;
  }

  /* Tables: allow scroll (no layout break) */
  html.yd-touch .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  html.yd-touch table.table,
  html.yd-touch table.table-yd {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  html.yd-touch table.table thead,
  html.yd-touch table.table-yd thead {
    white-space: nowrap;
  }
  html.yd-touch table.table th,
  html.yd-touch table.table td,
  html.yd-touch table.table-yd th,
  html.yd-touch table.table-yd td {
    white-space: nowrap;
  }
  html.yd-touch .table {
    font-size: 13px;
  }

  /* Long badges and pills */
  html.yd-touch .badge,
  html.yd-touch .yd-badge,
  html.yd-touch .dash-pill {
    white-space: nowrap;
  }

  /* Dashboard (common pain points on mobile) */
  html.yd-touch .yd-dash .dash-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  html.yd-touch .yd-dash .dash-hero__left {
    min-width: 0 !important;
    width: 100%;
  }
  html.yd-touch .yd-dash .dash-title {
    font-size: 22px !important;
  }

  html.yd-touch .yd-dash .dash-profile {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  html.yd-touch .yd-dash .dash-profile__right {
    width: 100%;
    align-items: flex-start !important;
  }
  html.yd-touch .yd-dash .dash-avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-radius: 20px !important;
  }
  html.yd-touch .yd-dash .dash-kpis {
    grid-template-columns: 1fr !important;
  }

  /* Admin nav/chips: hide on mobile to reduce clutter */
  html.yd-touch .yd-admin-nav,
  html.yd-touch .fin-admin-nav,
  html.yd-touch .aff-admin-nav,
  html.yd-touch .mk-admin-nav,
  .yd-admin-nav,
  .fin-admin-nav,
  .aff-admin-nav,
  .mk-admin-nav {
    display: none !important;
  }

  html.yd-touch .yd-admin-hero__chips,
  .yd-admin-hero__chips {
    display: none !important;
  }

  /* Modals / SweetAlert */
  html.yd-touch .modal-dialog {
    margin: 0.75rem !important;
  }
  html.yd-touch .swal2-popup {
    width: min(520px, calc(100vw - 24px)) !important;
  }

  /* Offcanvas: keep comfortable width */
  html.yd-touch .offcanvas {
    width: min(92vw, 360px) !important;
  }

  /* Marketplace (Beats) — keep player bar comfy */
  html.yd-touch body.mk-player-open main {
    padding-bottom: 112px !important;
  }
  html.yd-touch .mk-playerbar {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  html.yd-touch .mk-hero {
    padding: 12px;
  }
}