/* ═══════════════════════════════════════════════════════════════════
   HomeTechnify — Universal Responsive System
   Supports: iPhone SE (375), iPhone 13/14/15/16, Pro Max (430),
             Android (360-414), iPad (768), Desktop (1024+)
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── GLOBAL RESET ───────── */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

/* iPhone notch + bottom bar safe areas */
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ───────── PREVENT iOS INPUT ZOOM ───────── */
input, textarea, select {
  font-size: 16px !important;  /* iOS won't zoom when font-size >= 16px */
}
@media (min-width: 768px) {
  input, textarea, select { font-size: 14px !important; }
}

/* ───────── TOUCH TARGETS (44×44 minimum on mobile) ───────── */
@media (max-width: 768px) {
  button, .btn, a.btn, .btn-sm, .icon-btn, [role="button"] {
    min-height: 40px;
    touch-action: manipulation;
  }
  button.btn-sm { min-height: 32px; }
}

/* ───────── PREVENT HORIZONTAL OVERFLOW ───────── */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ───────── DYNAMIC VIEWPORT HEIGHT (iOS Safari fix) ───────── */
.full-height { height: 100vh; height: 100dvh; }

/* ═══════════════════════════════════════════════════════════════════
   ADMIN PANEL RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  .admin-wrapper { flex-direction: column !important; }
  .admin-sidebar {
    width: 100% !important;
    height: auto !important;
    position: sticky !important;
    top: 0 !important;
    padding: 10px 14px !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 6px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(174,184,207,0.2) !important;
    z-index: 100;
    -webkit-overflow-scrolling: touch;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-sidebar img,
  .admin-sidebar > div:last-child { display: none !important; }
  .admin-nav { flex-direction: row !important; gap: 4px !important; width: auto !important; }
  .admin-nav-item {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .admin-nav-item svg,
  .admin-nav-item img { width: 16px !important; height: 16px !important; }
  .admin-main { padding: 22px 16px !important; max-width: 100% !important; }
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .page-header h1 { font-size: 22px !important; }
  .page-header > div { width: 100%; flex-wrap: wrap; }
  .page-header button { flex: 1; min-width: 130px; font-size: 12.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   USER PORTAL & PROVIDER PORTAL RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .main, .pc {
    padding: 18px 14px 80px !important;
    max-width: 100% !important;
  }
  .top-nav, .pnav {
    padding: 10px 14px !important;
  }
  .top-nav img, .pnav img, .experts-nav img {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    transform: scale(1.35) !important;
    transform-origin: left center !important;
  }
  .nav-right { gap: 6px !important; }
  .notif-btn, .user-avt { width: 36px !important; height: 36px !important; }
  .btn-logout { padding: 6px 10px !important; font-size: 12px !important; }
  .prov-name-badge { display: none !important; }

  /* Hero cards */
  .hero-premium, .hero-card, .greeting-card {
    padding: 22px 20px !important;
    border-radius: 22px !important;
  }
  .hero-premium h1, .hero-card h1, .greeting-card h1 {
    font-size: 22px !important;
    line-height: 1.3;
  }
  .hero-premium p, .hero-card p, .greeting-card p {
    font-size: 13.5px !important;
    margin-bottom: 14px !important;
  }
  .hero-premium .hero-3d-decor,
  .hero-card .hero-3d-decor {
    width: 80px !important;
    height: 80px !important;
    right: 10px !important;
    opacity: 0.7;
  }
  .quick-btns { gap: 6px !important; }
  .quick-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* Stats grids */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .stat-card, .stat-premium {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }
  .stat-card .ico, .stat-premium .icon-3d {
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important;
  }
  .stat-card .ico img, .stat-premium .icon-3d img,
  .stat-card .ico span, .stat-premium .icon-3d span { width: 24px !important; height: 24px !important; }
  .stat-card h3, .stat-premium .stat-num { font-size: 19px !important; }
  .stat-card p, .stat-premium .stat-label { font-size: 11px !important; }

  /* Category grid */
  .cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .cat-tile, .cat-tile-premium {
    padding: 12px 8px !important;
    border-radius: 16px !important;
  }
  .cat-tile-premium .cat-3d, .cat-tile .cat-ico {
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
    margin-bottom: 4px;
  }
  .cat-tile-premium .cat-3d img { width: 100% !important; height: 100% !important; }
  .cat-tile-premium .cat-name, .cat-tile .cat-name { font-size: 11.5px !important; }
  .cat-tile-premium .cat-sub, .cat-tile .cat-price { font-size: 10px !important; }

  /* Cards */
  .card, .post-card, .bookings-card, .fav-card, .notif-card, .data-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }
  .card h2, .post-card h2 {
    font-size: 15.5px !important;
    margin-bottom: 12px !important;
  }
  .section-head h2 { font-size: 16px !important; }

  /* Forms */
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .fg label { font-size: 11px !important; }
  .fg input, .fg select, .fg textarea {
    padding: 11px 13px !important;
    border-radius: 12px !important;
  }

  /* Booking items */
  .booking-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .bi-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .btn-detail, .btn-cancel, .btn-rate, .btn-wa, .btn-reschedule {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Favorites grid */
  .fav-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Tabs */
  .tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 6px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  .tabs::-webkit-scrollbar {
    display: none !important;
  }
  .tab {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
  }
  .tab svg, .tab img { width: 14px !important; height: 14px !important; }

  /* ───────── MOBILE BOTTOM NAVBAR ───────── */
  .nav-right .btn-logout, .nav-right .user-avt, .nav-right .notif-btn[title="Messages"] { display: none !important; }
  
  .mob-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 16px !important; 
    left: 16px !important; 
    right: 16px !important;
    width: calc(100% - 32px) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 12px 40px rgba(0, 149, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-radius: 24px !important;
    z-index: 9999 !important;
    padding: 10px 8px !important;
    justify-content: space-around;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.admin-portal-body:not(.logged-in) .mob-bottom-nav {
    display: none !important;
  }
  .mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #8e9bb3;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    flex: 1;
    position: relative;
    padding: 4px 0;
    transition: all 0.25s ease;
  }
  .mob-nav-item.active {
    color: var(--blue, #0095FF) !important;
  }
  .mob-nav-item svg {
    width: 22px; height: 22px;
    fill: currentColor;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .mob-nav-item.active svg {
    transform: translateY(-4px) scale(1.15);
    fill: var(--blue, #0095FF) !important;
    filter: drop-shadow(0 2px 8px rgba(0, 149, 255, 0.35));
  }
  .mob-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 5px; height: 5px;
    background: var(--blue, #0095FF);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 149, 255, 0.6);
    animation: scaleIn 0.2s forwards;
  }
  @keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  body {
    padding-bottom: 96px !important; /* give space for floating bottom nav */
  }
  /* Container mobile padding */
  .container {
    padding: 0 16px !important;
  }
}

@media (max-width: 480px) {
  /* Container mobile padding */
  .container {
    padding: 0 12px !important;
  }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .cat-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .fav-grid { grid-template-columns: 1fr !important; }
  
  /* Heading responsiveness */
  .hero-premium h1, .hero-card h1, .greeting-card h1, h1 { font-size: 38px !important; }
  .hero-h1 { font-size: 38px !important; line-height: 1.15 !important; }
  .hero-h1 em { font-weight: 700 !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  
  /* Prevent global span rules from shrinking header spans */
  h1 span, h2 span, h3 span,
  h1 em, h2 em, h3 em,
  .word3d {
    font-size: inherit !important;
  }

  p, .subtitle, .description, .hero-para { font-size: 18px !important; line-height: 1.7 !important; }
  span, a, li, label { font-size: 15.5px; }
  .mob-nav-item span { font-size: 11px !important; }
  
  .hero-premium .hero-3d-decor, .hero-card .hero-3d-decor { display: none !important; }

  /* Compact button styling on mobile */
  .btn, .btn-main, .btn-ghost, .btn-premium, .quick-btn, .p-btn, .btn-submit, .btn-book, .btn-profile {
    padding: 13px 20px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    min-height: unset !important;
    height: auto !important;
  }
  
  /* Compact Inputs */
  .fg input, .fg select, .fg textarea, .form-group input, .form-group select, .form-group textarea {
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* Padding adjustments to maximize screen space */
  .main, .pc, .admin-main {
    padding: 10px 10px 100px !important;
  }
  .card, .post-card, .bookings-card, .fav-card, .notif-card, .data-card, .hero-card, .greeting-card, .hero-premium {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Search Bar responsiveness */
  .search-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .search-bar input {
    font-size: 13px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .search-bar .city-select {
    font-size: 12.5px !important;
    padding: 0 !important;
    max-width: 85px !important;
    flex-shrink: 0 !important;
  }

  /* Footer & Logo responsiveness */
  .site-footer {
    overflow: visible !important;
    padding-bottom: 120px !important;
  }
  .footer-logo {
    width: 250px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 20px !important;
    display: block !important;
  }
  .logo-img {
    height: 90px !important;
  }
  .mob-logo {
    width: 240px !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 380px) {
  /* Container mobile padding */
  .container {
    padding: 0 10px !important;
  }
  /* iPhone SE / Galaxy S8 */
  .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-card h3, .stat-premium .stat-num { font-size: 16px !important; }
  .hero-premium h1, .hero-card h1, .greeting-card h1 { font-size: 26px !important; }
  .hero-h1 { font-size: 32px !important; line-height: 1.2 !important; }
  .page-header h1 { font-size: 18px !important; }
  
  .btn, .btn-main, .btn-ghost, .btn-premium, .quick-btn, .p-btn, .btn-submit, .btn-book, .btn-profile {
    padding: 12px 18px !important;
    font-size: 14.5px !important;
  }

  .search-bar {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .search-bar input {
    font-size: 14px !important;
  }
  .search-bar .city-select {
    font-size: 13px !important;
    max-width: 90px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES — Horizontal scroll wrapper
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .data-card table,
  .tbl-wrap table,
  table[id$="-table"] {
    min-width: 700px;
  }
  .data-card, .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  td, th {
    padding: 12px 10px !important;
    font-size: 12.5px !important;
  }
  .btn-sm {
    padding: 5px 9px !important;
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MODALS — Mobile full-screen / sheet-style
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .modal-overlay, .modal-ov {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-box, .modal-ov > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 22px 20px !important;
    animation: slideUp .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .modal-box h2, .modal-ov h2 { font-size: 18px !important; }
  .modal-box .form-group { margin-bottom: 14px !important; }
  .modal-box input, .modal-box textarea, .modal-box select {
    padding: 11px 13px !important;
  }
  /* Modal action buttons stack */
  .modal-box [style*="display:flex"][style*="gap:12px"][style*="margin-top:20px"],
  .modal-box [style*="display: flex"][style*="gap: 12px"][style*="margin-top: 20px"] {
    flex-direction: column !important;
  }
  .modal-box [style*="display:flex"][style*="gap:12px"][style*="margin-top:20px"] button,
  .modal-box [style*="display: flex"][style*="gap: 12px"][style*="margin-top: 20px"] button {
    width: 100% !important;
    padding: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .chat-layout { height: calc(100dvh - 62px); }
  .sidebar {
    width: 100% !important;
    position: absolute !important;
    z-index: 20;
    transform: translateX(0);
    transition: transform .3s;
  }
  .sidebar.slide-out { transform: translateX(-100%); }
  .back-btn { display: flex !important; }
  .chat-window { width: 100%; }
  .msg-col { max-width: 82% !important; }
  .bubble { font-size: 14px !important; padding: 10px 14px !important; }
  .input-area { padding: 10px 12px !important; }
  .msg-inp { font-size: 16px !important; padding: 10px 14px !important; }
  .send-btn, .attach-btn, .mic-btn { width: 38px !important; height: 38px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .auth-wrap { padding: 20px 16px !important; }
  .auth-card { padding: 24px 20px !important; border-radius: 20px !important; }
  .auth-card h2 { font-size: 22px !important; }
  .auth-card .subtitle { font-size: 13px !important; margin-bottom: 18px !important; }
  .role-tabs { margin-bottom: 18px !important; }
  .role-tab { padding: 10px !important; font-size: 13px !important; }
  .otp-wrap input { width: 40px !important; height: 48px !important; font-size: 20px !important; }
  .btn-auth { padding: 13px !important; font-size: 14.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   BOOKING / BOOKING-DETAIL RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .info-grid { grid-template-columns: 1fr !important; }
  .booking-form { padding: 18px !important; }
  .price-box { flex-direction: column !important; align-items: flex-start !important; }
  .otp-code { font-size: 36px !important; letter-spacing: 8px !important; }
  .quick-actions .qa-btn { flex: 1 1 100% !important; padding: 11px !important; font-size: 13px !important; }
  .provider-block { flex-wrap: wrap !important; }
  .prov-actions { margin-left: 0 !important; width: 100%; justify-content: flex-end; margin-top: 8px; }
  .tl-content h4 { font-size: 13px !important; }
  .tl-content p { font-size: 11.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE (index.html) RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .contact-form-wrap { padding: 0 !important; }
  .booking-form { padding: 22px !important; border-radius: 18px !important; }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-group label { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   EXPERTS PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .experts-list, .providers-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .filter-row { gap: 6px !important; padding: 4px 0 !important; }
  .filter-pill, .f-pill, .cat-pill {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .hero-section { padding: calc(var(--nav-h) + 30px) 18px 48px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROVIDER REGISTER RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .form-wrapper {
    padding: 26px 20px !important;
    border-radius: 20px !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .form-header h1 { font-size: 22px !important; }
  .form-header p { font-size: 13px !important; }
  .upload-area { padding: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROFILE PAGES RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .profile-card, .hero-card-profile {
    padding: 20px !important;
  }
  .info-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .info-item { padding: 12px !important; }
  .stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    border-right: none !important;
  }
  .stats-bar .stat-cell:nth-child(n+3) { border-top: 1px solid rgba(174,184,207,0.2); }
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions button {
    width: 100%;
    justify-content: center;
  }
  .review-summary {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .big-rating { font-size: 36px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROVIDER EARNINGS RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .balance-card {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .balance-amount { font-size: 32px !important; }
  .withdraw-modal .modal-content {
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: fixed !important;
    bottom: 0;
    left: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CALL OVERLAY MOBILE FIXES
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .call-overlay { padding: max(40px, env(safe-area-inset-top)) 20px max(30px, env(safe-area-inset-bottom)) !important; }
}

/* iPhone notch — push down content */
@supports (padding: max(0px)) {
  .top-nav, .pnav, .chat-nav, .dnav {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN MODAL POSITIONING (override absolute centered)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  #adminConfirmOverlay,
  #adminPromptOverlay,
  #approve-modal,
  #ann-modal,
  #cat-modal,
  #job-modal,
  #reg-modal,
  #reg-detail-modal,
  #promo-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #adminConfirmOverlay > div,
  #adminPromptOverlay > div,
  #approve-modal .modal-box,
  #ann-modal .modal-box,
  #cat-modal .modal-box,
  #job-modal .modal-box,
  #reg-modal .modal-box,
  #reg-detail-modal .modal-box,
  #promo-modal .modal-box {
    border-radius: 24px 24px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   3D ICON CONTAINERS — responsive sizing
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .icon-3d { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  .icon-3d.lg { width: 52px !important; height: 52px !important; }
  .icon-3d.xl { width: 72px !important; height: 72px !important; }
  .icon-3d.sm { width: 32px !important; height: 32px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .btn-main, .btn-ghost, .btn-premium {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
  .btn-submit { padding: 13px !important; font-size: 14.5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   IPAD / TABLET (768-1024)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .fav-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .admin-main { padding: 28px 24px !important; }
  .admin-sidebar { width: 220px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LARGE DESKTOP (1440+)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {
  .main, .pc, .admin-main { max-width: 1400px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT (just in case admin wants to print reports)
   ═══════════════════════════════════════════════════════════════════ */

@media print {
  .admin-sidebar, .page-header button, .modal-overlay { display: none !important; }
  body { background: white !important; }
  .data-card, .card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
}