/* ============================================
   ADMIN MOBILE RESPONSIVE STYLES
   Version: 1.0.0
   
   This file contains ONLY admin-specific mobile styles.
   It works alongside mobile-responsive.css which handles
   header, drawer, and general mobile navigation.
   
   File location: public/css/admin-mobile-responsive.css
   ============================================ */

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {
  /* Main Content */
  .main-content {
    padding: 30px 15px !important;
    margin: 20px auto !important;
  }

  /* Page Header */
  .page-header {
    margin-bottom: 30px !important;
  }

  .page-title {
    font-size: 32px !important;
  }

  .page-subtitle {
    font-size: 15px !important;
  }

  /* Statistics Cards */
  .stats-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .stat-card {
    padding: 20px !important;
    gap: 15px !important;
  }

  .stat-icon {
    width: 55px !important;
    height: 55px !important;
    font-size: 32px !important;
  }

  .stat-value {
    font-size: 24px !important;
  }

  /* Upload/Create Sections */
  .upload-section,
  .create-topic-section,
  .list-section,
  .topics-management {
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 25px !important;
  }

  .section-title {
    font-size: 20px !important;
    margin-bottom: 20px !important;
  }

  .section-header {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }

  /* Tables */
  .exercises-table th,
  .exercises-table td,
  .topics-table th,
  .topics-table td {
    padding: 12px 10px !important;
    font-size: 13px !important;
  }

  .topic-title-cell {
    max-width: 200px !important;
  }

  /* Tier Cards */
  .tier-selection,
  .tier-selection-container {
    gap: 15px !important;
  }

  .tier-card {
    padding: 20px 15px !important;
  }

  .tier-icon {
    font-size: 36px !important;
  }

  .tier-name {
    font-size: 16px !important;
  }

  /* Action Buttons */
  .action-buttons,
  .table-actions {
    gap: 6px !important;
  }

  .btn-view,
  .btn-close,
  .btn-open,
  .btn-delete,
  .action-btn,
  .action-icon-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* Filter Tabs */
  .filter-tabs {
    gap: 10px !important;
  }

  .filter-tab {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  /* Admin Panel Cards */
  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .card {
    padding: 25px 20px !important;
  }

  .card-icon {
    font-size: 42px !important;
    margin-bottom: 15px !important;
  }

  .card-title {
    font-size: 18px !important;
  }

  .card-description {
    font-size: 13px !important;
  }

  /* Admin Header Section */
  .admin-header {
    margin-bottom: 40px !important;
  }

  .admin-title {
    font-size: 36px !important;
  }

  .admin-subtitle {
    font-size: 15px !important;
  }

  /* Pagination */
  .pagination-container {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }

  .pagination-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
  /* Main Content */
  .main-content {
    padding: 20px 12px !important;
    margin: 15px auto !important;
  }

  /* Page Header */
  .page-header {
    margin-bottom: 25px !important;
    text-align: center !important;
  }

  .page-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .page-subtitle {
    font-size: 14px !important;
  }

  /* Statistics Cards - 2 column grid */
  .stats-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .stat-card {
    padding: 15px 12px !important;
    gap: 10px !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  .stat-icon {
    width: 45px !important;
    height: 45px !important;
    font-size: 26px !important;
    margin: 0 auto !important;
  }

  .stat-label {
    font-size: 11px !important;
  }

  .stat-value {
    font-size: 20px !important;
  }

  /* Upload/Create Sections */
  .upload-section,
  .create-topic-section,
  .list-section,
  .topics-management {
    padding: 15px !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
  }

  .section-title {
    font-size: 18px !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
  }

  .section-header {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Form Layout */
  .form-row {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .form-group {
    margin-bottom: 15px !important;
  }

  .form-label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .form-input,
  .form-select,
  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 12px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    border-radius: 8px !important;
  }

  .form-hint {
    font-size: 12px !important;
  }

  /* Submit Buttons */
  .submit-btn,
  .btn-create {
    width: 100% !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  .form-actions {
    justify-content: center !important;
    margin-top: 20px !important;
  }

  /* Filter Tabs */
  .filter-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  .filter-tab {
    padding: 10px 16px !important;
    font-size: 13px !important;
    flex: 1 1 auto !important;
    min-width: 80px !important;
    text-align: center !important;
  }

  /* ===================================
     TABLES → CARDS TRANSFORMATION
     =================================== */

  /* Table container */
  .table-container,
  .topics-table-container {
    overflow: visible !important;
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
    background: transparent !important;
  }

  /* Hide table header on mobile */
  .exercises-table thead,
  .topics-table thead,
  .videos-table thead {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Transform table to stacked cards */
  .exercises-table,
  .topics-table,
  .videos-table {
    display: block !important;
    min-width: unset !important;
    width: 100% !important;
    border-collapse: separate !important;
  }

  .exercises-table tbody,
  .topics-table tbody,
  .videos-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .exercises-table tbody tr,
  .topics-table tbody tr,
  .videos-table tbody tr {
    display: block !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 140, 0, 0.3) !important;
    border-left: 4px solid #ff8c00 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  }

  .exercises-table tbody tr:hover,
  .topics-table tbody tr:hover,
  .videos-table tbody tr:hover {
    background: rgba(15, 23, 42, 1) !important;
    border-color: rgba(255, 140, 0, 0.5) !important;
    transform: none !important;
  }

  .exercises-table td,
  .topics-table td,
  .videos-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 140, 0, 0.15) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    font-size: 14px !important;
    color: #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    text-align: left !important;
    min-height: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: normal !important;
  }

  /* Ensure cell content text is visible */
  .exercises-table td > *,
  .topics-table td > *,
  .videos-table td > * {
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
  }

  .exercises-table td:last-child,
  .topics-table td:last-child,
  .videos-table td:last-child {
    border-bottom: none !important;
    padding-top: 16px !important;
  }

  /* Data labels for mobile cards */
  .exercises-table td::before,
  .topics-table td::before,
  .videos-table td::before {
    content: attr(data-label);
    font-weight: 700 !important;
    color: #ff8c00 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    min-width: 80px !important;
    letter-spacing: 0.5px !important;
  }

  /* Title cell specific styling */
  .topic-title-cell {
    max-width: none !important;
    white-space: normal !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    display: block !important;
    margin-bottom: 5px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 140, 0, 0.2) !important;
  }

  .topic-title-cell::before {
    display: none !important;
  }

  /* Videos table - Row number cell - hide it completely */
  .videos-table td:first-child {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Videos table - Title cell as header on mobile */
  .videos-table td[data-label="Title"] {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding-bottom: 14px !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid rgba(255, 140, 0, 0.4) !important;
    display: block !important;
  }

  .videos-table td[data-label="Title"]::before {
    display: none !important;
  }

  /* Exercises table - Title cell as header on mobile */
  .exercises-table td[data-label="Title"] {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding-bottom: 14px !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid rgba(255, 140, 0, 0.4) !important;
    display: block !important;
  }

  .exercises-table td[data-label="Title"]::before {
    display: none !important;
  }

  /* Hide row number on exercises table too */
  .exercises-table td:first-child {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Actions cell - special handling */
  .exercises-table td[data-label="Actions"],
  .topics-table td[data-label="Actions"],
  .videos-table td[data-label="Actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255, 140, 0, 0.25) !important;
    border-bottom: none !important;
  }

  .exercises-table td[data-label="Actions"]::before,
  .topics-table td[data-label="Actions"]::before,
  .videos-table td[data-label="Actions"]::before {
    display: none !important;
  }

  /* Action buttons row */
  .action-buttons,
  .table-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 140, 0, 0.1) !important;
    gap: 8px !important;
  }

  .action-buttons::before,
  .table-actions::before {
    display: none !important;
  }

  .btn-view,
  .btn-close,
  .btn-open,
  .btn-delete,
  .action-btn,
  .action-icon-btn {
    flex: 1 1 45% !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  /* Status badges */
  .topic-status-badge,
  .status-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  /* Tier badges */
  .tier-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  /* Mobile override for row status (processing/failed) */
  .videos-table tbody tr.row-processing,
  .videos-table tbody tr.row-failed {
    background: rgba(15, 23, 42, 0.95) !important;
    border-left: 4px solid #ff8c00 !important;
  }

  .videos-table tbody tr.row-failed {
    border-left-color: #ef4444 !important;
  }

  .videos-table tbody tr.row-processing {
    border-left-color: #f59e0b !important;
  }

  /* Ensure action buttons display properly on mobile */
  .videos-table .action-btn,
  .exercises-table .action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    min-width: 80px !important;
    flex: 0 1 auto !important;
  }

  .videos-table .action-edit,
  .exercises-table .action-edit {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
  }

  .videos-table .action-toggle,
  .exercises-table .action-toggle {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
  }

  .videos-table .action-delete,
  .exercises-table .action-delete {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
  }

  /* ===================================
     ADMIN PANEL MAIN PAGE
     =================================== */

  .admin-header {
    margin-bottom: 30px !important;
    padding-top: 10px !important;
  }

  .admin-badge {
    font-size: 12px !important;
    padding: 6px 14px !important;
    margin-bottom: 15px !important;
  }

  .admin-title {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }

  .admin-subtitle {
    font-size: 14px !important;
    padding: 0 15px !important;
  }

  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    padding: 0 !important;
  }

  .card {
    padding: 25px 20px !important;
    border-radius: 14px !important;
  }

  .card-icon {
    font-size: 40px !important;
    margin-bottom: 15px !important;
  }

  .card-title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  .card-description {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ===================================
     TIER SELECTION (PGN Page)
     =================================== */

  .tier-selection,
  .tier-selection-container {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .tier-card {
    padding: 15px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
  }

  .tier-icon {
    font-size: 32px !important;
    margin-bottom: 0 !important;
  }

  .tier-info {
    flex: 1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
  }

  .tier-name {
    font-size: 16px !important;
  }

  .tier-count span:first-child {
    font-size: 24px !important;
  }

  .tier-checkbox-group {
    gap: 8px !important;
  }

  .tier-checkbox-label {
    padding: 10px 12px !important;
  }

  /* ===================================
     UPLOAD PROGRESS
     =================================== */

  .upload-progress {
    padding: 20px 15px !important;
    margin-top: 20px !important;
  }

  .progress-bar {
    height: 15px !important;
    margin-bottom: 10px !important;
  }

  .progress-text {
    font-size: 14px !important;
  }

  /* ===================================
     ADMIN MODALS
     =================================== */

  .confirm-modal-content,
  .alert-modal-content,
  .custom-alert-content,
  .delete-modal-content,
  .custom-modal-box {
    width: 95% !important;
    max-width: 400px !important;
    padding: 25px 20px !important;
    margin: 15px !important;
    border-radius: 16px !important;
  }

  .custom-modal-header {
    padding: 15px !important;
    gap: 10px !important;
  }

  .custom-modal-title,
  .confirm-modal-title,
  .alert-modal-title,
  .alert-title,
  .delete-title {
    font-size: 20px !important;
  }

  .custom-modal-icon,
  .confirm-modal-icon,
  .alert-modal-icon,
  .alert-icon,
  .delete-icon {
    font-size: 48px !important;
    margin-bottom: 15px !important;
  }

  .confirm-modal-message,
  .alert-modal-message,
  .alert-message,
  .delete-message {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  .custom-modal-footer,
  .confirm-modal-actions,
  .alert-modal-actions,
  .delete-modal-actions {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 15px !important;
  }

  .custom-modal-btn,
  .confirm-btn,
  .alert-btn,
  .btn-cancel,
  .btn-delete {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* ===================================
     PAGINATION
     =================================== */

  .pagination-container {
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center !important;
  }

  .pagination-info {
    font-size: 13px !important;
  }

  .pagination-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  .pagination-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-width: 36px !important;
  }

  /* ===================================
     PGN EDITOR
     =================================== */

  .pgn-editor-container {
    padding: 15px !important;
  }

  .editor-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .editor-tab {
    flex: 1 1 45% !important;
    padding: 10px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  .pgn-textarea,
  .preview-area {
    min-height: 200px !important;
    font-size: 14px !important;
  }

  /* ===================================
     VIDEOS ADMIN
     =================================== */

  .videos-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .video-card {
    padding: 15px !important;
  }

  .video-thumbnail {
    height: 180px !important;
  }

  .video-title {
    font-size: 15px !important;
  }

  .video-meta {
    font-size: 12px !important;
  }

  /* ===================================
     ACCESS DENIED PAGE
     =================================== */

  .access-denied {
    padding: 60px 20px !important;
  }

  .access-denied-icon {
    font-size: 60px !important;
    margin-bottom: 20px !important;
  }

  .access-denied h2 {
    font-size: 24px !important;
  }

  .access-denied p {
    font-size: 14px !important;
    margin-bottom: 25px !important;
  }

  /* Footer */
  .footer {
    padding: 25px 15px !important;
    margin-top: 40px !important;
  }

  .footer-italic {
    font-size: 14px !important;
  }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
  /* Main Content */
  .main-content {
    padding: 15px 10px !important;
  }

  /* Page Title */
  .page-title {
    font-size: 22px !important;
  }

  .page-subtitle {
    font-size: 13px !important;
  }

  /* Stats - single column */
  .stats-container {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .stat-card {
    flex-direction: row !important;
    text-align: left !important;
    padding: 12px 15px !important;
  }

  .stat-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
    margin: 0 !important;
  }

  .stat-value {
    font-size: 18px !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  /* Sections */
  .upload-section,
  .create-topic-section,
  .list-section,
  .topics-management {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .section-title {
    font-size: 16px !important;
  }

  /* Filter tabs - full width */
  .filter-tabs {
    flex-direction: column !important;
  }

  .filter-tab {
    width: 100% !important;
    text-align: center !important;
  }

  /* Action buttons - stack vertically */
  .action-buttons,
  .table-actions {
    flex-direction: column !important;
  }

  .btn-view,
  .btn-close,
  .btn-open,
  .btn-delete,
  .action-icon-btn {
    width: 100% !important;
    flex: none !important;
  }

  /* action-btn in general form contexts goes full width, but table icon buttons stay compact */
  .upload-section .action-btn,
  .create-section .action-btn,
  .form-actions .action-btn {
    width: 100% !important;
    flex: none !important;
  }

  /* Admin Panel */
  .admin-title {
    font-size: 24px !important;
  }

  .admin-subtitle {
    font-size: 13px !important;
  }

  .card {
    padding: 20px 15px !important;
  }

  .card-icon {
    font-size: 36px !important;
  }

  .card-title {
    font-size: 16px !important;
  }

  /* Modals */
  .confirm-modal-content,
  .alert-modal-content,
  .custom-alert-content,
  .delete-modal-content,
  .custom-modal-box {
    width: 100% !important;
    max-width: none !important;
    margin: 10px !important;
    border-radius: 12px !important;
  }

  /* Pagination */
  .pagination-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 32px !important;
  }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
  .stats-container {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .stat-card {
    flex-direction: column !important;
    padding: 12px !important;
  }

  .stat-icon {
    width: 35px !important;
    height: 35px !important;
    font-size: 20px !important;
  }

  .stat-value {
    font-size: 16px !important;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn-view,
  .btn-close,
  .btn-open,
  .btn-delete,
  .action-btn,
  .action-icon-btn,
  .filter-tab,
  .pagination-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Remove hover effects */
  .card:hover,
  .stat-card:hover,
  .tier-card:hover {
    transform: none !important;
  }

  /* Active states */
  .card:active,
  .stat-card:active,
  .tier-card:active {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
  }
}

/* ============================================
   HIDE BOTTOM NAV ON ADMIN PAGES
   Add class="admin-page" to <body>
   ============================================ */

body.admin-page .bottom-nav,
body.admin-page #bottomNav {
  display: none !important;
}

/* ============================================
   ADMIN FORUM SPECIFIC RESPONSIVE STYLES
   (Migrated from admin-forum.css)
   ============================================ */

@media (max-width: 480px) {
  .confirm-modal-content,
  .alert-modal-content {
    padding: 25px 20px !important;
    margin: 0 15px !important;
  }
}

/* ============================================
   ADMIN VIDEOS SPECIFIC RESPONSIVE STYLES
   (Migrated from admin-videos.css)
   ============================================ */

@media (max-width: 1024px) {
  .admin-videos .table-container {
    overflow-x: auto !important;
  }
  
  .admin-videos .filters {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .admin-videos .filters {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .admin-videos .search-input,
  .admin-videos .filter-select {
    width: 100% !important;
  }
}

/* ============================================
   ADMIN PANEL SPECIFIC RESPONSIVE STYLES
   (Consolidated from admin-panel.html inline styles)
   ============================================ */

@media (max-width: 768px) {
  body.admin-panel-page .admin-title {
    font-size: 32px !important;
  }
  
  body.admin-panel-page .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 480px) {
  body.admin-panel-page .admin-title {
    font-size: 26px !important;
  }
  
  body.admin-panel-page .admin-badge {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }
}

/* ============================================
   ADMIN PGN - DATA TABLE MOBILE CARD TRANSFORM
   (.data-table is unique to admin-pgn page)
   ============================================ */

@media (max-width: 768px) {
  .data-table thead {
    display: none !important;
  }

  .data-table,
  .data-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .data-table tbody tr {
    display: block !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 140, 0, 0.3) !important;
    border-left: 4px solid #ff8c00 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  }

  .data-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 140, 0, 0.12) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 13px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    vertical-align: unset !important;
  }

  .data-table td:last-child {
    border-bottom: none !important;
    justify-content: center !important;
    padding-top: 12px !important;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: rgba(255, 140, 0, 0.7);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    margin-right: 8px;
  }

  .data-table td:last-child::before {
    display: none !important;
  }

  /* Action buttons stay in a row */
  .data-table td:last-child .action-btns {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .data-table .action-btn {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ============================================
   ADMIN VIDEOS - PGN SELECTOR MOBILE
   ============================================ */

@media (max-width: 768px) {
  .pgn-selector {
    max-height: 200px !important;
  }

  .pgn-selector-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  .pgn-selector-title {
    font-size: 13px !important;
  }
}