/* =====================================================
   SahiHisab — Desktop & Tablet Responsive Enhancements
   Optimized for 768px+ screens. Mobile-first overrides.
   ===================================================== */

/* ─────────────────────────────────────────────────────
   LARGE DESKTOP (1440px+)
   Wider sidebar, more content space
   ───────────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --content-max-width: 1280px;
  }

  .sidebar {
    width: 280px;
  }

  .main-content {
    margin-left: 280px;
  }

  .total-bar {
    left: 280px;
  }
}

/* ─────────────────────────────────────────────────────
   WIDE DESKTOP (1200px+)
   Content padding, typography, modal sizing
   ───────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .page-content {
    max-width: var(--content-max-width);
    padding: var(--space-3xl) var(--space-4xl);
  }

  .wizard-section-title {
    font-size: 1.4rem;
  }

  .stat-value {
    font-size: 1.8rem;
  }

  .header-left .page-title {
    font-size: 1.25rem;
  }

  .modal-panel {
    max-width: 580px;
  }
}


/* ─────────────────────────────────────────────────────
   DESKTOP (1024px+)
   Grid layouts, card widths
   ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .package-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .addon-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}


/* ─────────────────────────────────────────────────────
   TABLET+ (768px+)
   Quick create as centered modal, not bottom sheet
   ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .quick-create-sheet {
    left: 50%;
    right: auto;
    width: 420px;
    transform: translate(-50%, 100%);
    border-radius: var(--radius-xl, 20px);
    bottom: auto;
    top: 50%;
    margin-top: -140px;
  }

  .quick-create-sheet.open {
    transform: translate(-50%, 0);
  }
}


/* ─────────────────────────────────────────────────────
   HOVER STATES
   Desktop users expect hover feedback on interactive
   elements. Only applies when hover is supported.
   ───────────────────────────────────────────────────── */
@media (hover: hover) {

  /* Form controls — subtle border color on hover */
  .form-control:hover:not(:focus) {
    border-color: var(--primary-300);
  }

  /* Toggle switch hover hint */
  .toggle-switch:hover .toggle-track {
    box-shadow: 0 0 0 2px var(--primary-100);
  }

  /* Quick create action cards */
  .quick-create-action:hover {
    background: var(--primary-50);
    border-color: var(--primary-300);
    transform: translateY(-1px);
  }

  /* Bottom nav FAB — grow on hover */
  .bottom-nav-fab:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 20px hsla(200, 80%, 44%, 0.4);
  }

  /* Wizard step items */
  .step-item:hover .step-number {
    background: var(--primary-200);
    color: var(--primary-700);
  }

  .step-item.active:hover .step-number {
    background: var(--primary);
    color: white;
  }

  .step-item.completed:hover .step-number {
    background: var(--success);
    color: white;
  }

  /* Plan card — lift effect */
  .plan-card:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  /* Addon card — lift effect */
  .addon-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  /* Client row */
  .client-row:hover {
    background: var(--muted);
  }

  /* Calendar day */
  .calendar-day:hover {
    background: var(--primary-50);
  }

  /* Notification card */
  .notif-card:hover {
    background: var(--primary-50);
  }

  /* Search result row */
  .search-result-row:hover {
    background: var(--primary-50);
  }
}


/* ─────────────────────────────────────────────────────
   ORDERS PAGE — Desktop Grid & Enhancements
   ───────────────────────────────────────────────────── */

/* Skeleton loading animation */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Desktop-only utility */
.desktop-only { display: none; }
@media (min-width: 768px) {
  .desktop-only { display: flex; }
}

/* Orders grid — 2 cols at 1024, 3 cols at 1200+ */
@media (min-width: 1024px) {
  .orders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .orders-grid > .card.mb-md {
    margin-bottom: 0;
  }

  .orders-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .orders-search {
    flex: 1;
    max-width: 400px;
  }
}

@media (min-width: 1200px) {
  .orders-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .modal-panel {
    max-width: 700px;
  }
}

/* Card hover effect — desktop only */
@media (hover: hover) {
  .order-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
}


/* ─────────────────────────────────────────────────────
   CURSOR: POINTER
   Ensure all clickable elements show pointer cursor.
   ───────────────────────────────────────────────────── */
[role="button"],
[onclick],
.nav-item,
.bottom-nav-item,
.bottom-nav-fab,
.header-icon-btn,
.header-avatar,
.header-nav-btn:not(:disabled),
.modal-close,
.calendar-day,
.client-row,
.stat-card[role="button"],
.quick-action-btn,
.quick-create-action,
.package-card,
.addon-card,
.plan-card,
.step-item,
.toggle-switch {
  cursor: pointer;
}