/* ========================================================
   RESPONSIVE DESIGN SYSTEM (IPAD, TABLETS & MOBILE)
   ======================================================== */

/* Touch accessibility & global viewport bounds */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Breakpoint: Tablets & iPads (<= 1024px) */
@media (max-width: 1024px) {
  .admin-content {
    padding: 20px 18px;
  }

  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }


  .viral-studio-card {
    padding: 20px;
  }

  .viral-controls-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* Breakpoint: Mobile Drawer Switch (<= 900px) */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    width: min(300px, 86vw);
    box-shadow: none;
    z-index: 1000;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.88);
  }

  .mobile-sidebar-close-btn {
    display: flex;
  }

  .main-wrapper {
    margin-left: 0 !important;
    width: 100%;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .viral-controls-grid {
    grid-template-columns: 1fr;
  }

  .viral-metric-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .viral-metric-right {
    max-width: 100%;
  }
}

/* Breakpoint: Mobile Devices & iPad Portrait (<= 768px) */
@media (max-width: 768px) {
  /* Prevent iOS Safari auto-zoom on input focus */
  input, textarea, select {
    font-size: 16px !important;
  }

  .admin-topbar {
    padding: 0 16px;
    padding-top: var(--safe-top);
    min-height: calc(var(--topbar-height) + var(--safe-top));
  }

  .topbar-right .topbar-pill {
    display: none;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Balanced layout for 5 cards: 5th card spans 2 columns */
  .kpi-card:last-child {
    grid-column: 1 / -1;
  }

  .kpi-card {
    padding: 12px 14px;
    gap: 10px;
  }

  .kpi-icon {
    width: 36px;
    height: 36px;
  }

  .kpi-val {
    font-size: 19px;
  }

  .kpi-label {
    font-size: 11px;
  }

  .workflow-banner {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .workflow-status-pills {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  #openIgPreviewBtnTop {
    width: 100%;
    text-align: center;
    padding: 8px 12px !important;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .card-header > .row {
    width: 100%;
    justify-content: flex-start;
  }

  .step-badge-title {
    width: 100%;
  }

  .card-subtitle {
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Instagram Live Device Preview Modal for Mobile */
  .ig-modal-backdrop {
    padding: 10px;
    align-items: flex-start;
    padding-top: max(10px, var(--safe-top));
    padding-bottom: max(10px, var(--safe-bottom));
  }

  .ig-modal-container {
    max-height: 96dvh;
    border-radius: 16px;
  }

  .ig-modal-header {
    padding: 12px 14px;
    gap: 10px;
  }

  .ig-view-toggle-nav {
    width: 100%;
    order: 3;
  }

  .ig-toggle-btn {
    flex: 1;
    padding: 7px 6px;
    font-size: 11px;
    text-align: center;
  }

  .ig-modal-title-wrap {
    flex: 1;
    min-width: 0;
  }

  .ig-modal-title {
    font-size: 14px;
  }

  .ig-modal-subtitle {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ig-modal-body {
    padding: 14px 10px;
  }

  .ig-phone-frame {
    width: min(340px, 100%);
    height: min(640px, calc(86dvh - 80px));
    border-width: 6px;
    border-radius: 36px;
  }

  /* Idea Card Actions Row */
  .idea {
    padding: 14px 12px;
  }

  .idea-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .idea-top-row > button {
    align-self: flex-end;
  }

  .idea .row {
    gap: 8px;
  }

  .idea .row > button, .idea .row > select {
    flex: 1 1 auto;
  }

  .shotlist {
    padding-left: 18px;
  }

  .script {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
  }
}

/* Breakpoint: Small Mobile Phones (<= 480px) */
@media (max-width: 480px) {
  .admin-content {
    padding: 12px 10px;
  }

  .breadcrumb-root, .breadcrumb-sep {
    display: none;
  }

  .breadcrumb-active {
    font-size: 13px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #topbarAddIdeaBtn {
    padding: 6px 9px;
    font-size: 11px;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .kpi-card {
    padding: 10px 10px;
    gap: 8px;
  }

  .kpi-icon {
    width: 32px;
    height: 32px;
  }

  .kpi-icon svg {
    width: 16px;
    height: 16px;
  }

  .kpi-val {
    font-size: 17px;
  }

  .kpi-label {
    font-size: 9px;
  }

  .card {
    padding: 16px 12px;
    border-radius: var(--radius-md);
  }

  .dropzone {
    padding: 18px 10px;
  }

  .dropzone-title {
    font-size: 13px;
  }

  .dropzone-hint {
    font-size: 11px;
  }

  .preset-chip {
    font-size: 11px;
    padding: 4px 10px;
  }

  .ig-phone-frame {
    width: 100%;
    max-width: 320px;
    height: min(580px, calc(86dvh - 90px));
    border-width: 5px;
    border-radius: 30px;
  }

  .hashtag-section-header .row {
    width: 100%;
    flex-direction: column;
  }

  .hashtag-section-header .row button {
    width: 100%;
  }
}