/* =====================================================
   PUMP CMMS - Responsive Layout
   Breakpoints:
     XL Desktop : > 1280px (default styles)
     Laptop     : 1024 - 1280px
     Tablet     : 768  - 1024px
     Mobile L   : 576  - 768px
     Mobile S   : < 576px
   ===================================================== */

/* Layer mobile-specific enhancements on top */
@import url('mobile.css');

/* Universal base */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { font-size: 16px; } /* prevents iOS zoom */

/* Wrap wide tables for horizontal scroll on small screens */
.panel-body .data-table,
.content > table,
table.data-table {
  display: table;  /* keep default */
}
@media (max-width: 1024px) {
  .panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 720px; font-size: .82rem; }
  .data-table th, .data-table td { white-space: nowrap; padding: 8px 10px; }
}

/* =====================================================
   LAPTOP (1024 - 1280px)
   ===================================================== */
@media (max-width: 1280px) {
  .sidebar { width: 220px; }
  .main { margin-right: 220px; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .charts-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =====================================================
   TABLET (768 - 1024px)
   ===================================================== */
@media (max-width: 1024px) {
  /* Sidebar becomes collapsible drawer */
  .sidebar {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 260px; z-index: 1100;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -4px 0 30px rgba(0,0,0,.4);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-right: 0 !important; padding: 0; width: 100% !important; }
  .menu-btn { display: flex !important; }

  /* Backdrop */
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 1099; backdrop-filter: blur(2px);
  }

  /* KPI / charts adapt */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .charts-row { grid-template-columns: 1fr !important; }
  .chart-canvas-wrap { height: 220px !important; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr !important; }
  .specs-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Equipment header */
  .equip-hdr { grid-template-columns: 1fr !important; text-align: center; }
  .equip-hdr > div:last-child { text-align: center !important; }

  /* Topbar */
  .topbar { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .topbar-right, .topbar-left { gap: 10px; }
  .page-title { font-size: 1rem !important; }
  .page-breadcrumb { font-size: .7rem !important; }
  .ar-clock { display: none; }  /* save space */

  /* Notifications dropdown becomes wider */
  .notif-dropdown { width: calc(100vw - 40px); max-width: 380px; left: -10px; }
}

/* =====================================================
   MOBILE LARGE (576 - 768px)
   ===================================================== */
@media (max-width: 768px) {
  body { font-size: 14px; }

  .content { padding: 12px !important; }

  /* KPIs go to 2 then 1 column */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi-card { padding: 12px !important; min-height: auto !important; }
  .kpi-icon { width: 36px !important; height: 36px !important; }
  .kpi-icon svg { width: 18px !important; height: 18px !important; }
  .kpi-val { font-size: 1.4rem !important; }
  .kpi-lbl { font-size: .72rem !important; }
  .kpi-sub { font-size: .6rem !important; display: none; }

  /* Two-col layouts collapse */
  .two-col, .wo-detail-grid, .tpl-grid { grid-template-columns: 1fr !important; }

  /* Filters wrap nicely */
  .filters-bar, .f-bar { gap: 6px !important; }
  .f-inp, .search-inp, .filter-sel { min-width: 0 !important; flex: 1 1 100%; }

  /* WO stats become smaller cards */
  .wo-stats { gap: 6px !important; }
  .wo-stat { min-width: 0 !important; flex: 1 1 calc(33% - 4px); padding: 8px !important; }
  .wo-stat .sv { font-size: 1.2rem !important; }

  /* Stat mini cards */
  .stat-mini, .bk-stats, .hs-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* Action buttons stacking */
  .actions-cell { flex-wrap: wrap; gap: 4px; }

  /* Form actions stack */
  .form-actions { flex-direction: column; gap: 8px; }
  .form-actions > * { width: 100%; justify-content: center; }

  /* Color legend wrap better */
  .color-legend { font-size: .7rem !important; padding: 8px 10px !important; gap: 8px !important; }
  .legend-toggle { margin-right: 0 !important; flex: 1 1 100%; justify-content: center; }

  /* Theme picker dropdown – fit screen */
  #floatingThemeDropdown { width: calc(100vw - 32px) !important; left: 16px !important; right: 16px !important; }
  #floatingThemeBtn { bottom: 16px !important; left: 16px !important; }

  /* Tables: hide less critical columns OR make scrollable */
  .data-table { min-width: 600px; font-size: .78rem; }
}

/* =====================================================
   MOBILE SMALL (< 576px)
   ===================================================== */
@media (max-width: 576px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .stat-mini, .bk-stats, .hs-grid, .specs-grid { grid-template-columns: 1fr !important; }

  /* Topbar buttons icon-only */
  .topbar { padding: 8px 10px; }
  .page-breadcrumb { display: none; }

  /* Tabs scroll horizontally */
  .tabs, .tabs-nav { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .tab, .tab-link { flex-shrink: 0; }

  /* Buttons full-width if needed */
  .btn-primary, .btn-secondary { padding: 10px 16px; font-size: .85rem; }

  /* Login page two-panel → single column */
  .panel-left { display: none !important; }
  .panel-right { width: 100% !important; padding: 24px 18px !important; border-left: none !important; }
  .login-card { max-width: 100% !important; }

  /* Print version stays unchanged */
}

/* =====================================================
   LOGIN PAGE — special responsive treatment
   ===================================================== */
@media (max-width: 900px) {
  .page { flex-direction: column; }
  .panel-left {
    flex: 0 0 auto !important;
    padding: 30px 24px !important;
    text-align: center;
    align-items: center !important;
  }
  .panel-left .logo-row,
  .panel-left .stats-row,
  .panel-left .comp-row { justify-content: center; margin-inline: auto; }
  .panel-left .divider { margin-inline: auto; }
  .brand-desc { margin-inline: auto; }
  .panel-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 2px solid rgba(200,153,58,0.5);
    padding: 30px 24px !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,.4) !important;
  }
  .version-line { position: static !important; margin-top: 20px; text-align: center; }
}

@media (max-width: 600px) {
  .logo-text-main { font-size: 2rem !important; }
  .brand-title-ar { font-size: 1.5rem !important; }
  .brand-desc { font-size: .85rem !important; }
  .stats-row { flex-direction: column; width: 100% !important; }
  .stat-item { border-left: none !important; border-bottom: 1px solid var(--border); }
  .stat-item:last-child { border-bottom: none; }
}

/* =====================================================
   HIDE TOPBAR AR CLOCK ON SHORT SCREENS / SHOW MENU BTN
   ===================================================== */
.menu-btn { display: none; }
@media (max-width: 1024px) {
  .menu-btn { display: flex; }
}

/* =====================================================
   PERFORMANCE — respect reduced-motion + accelerate common UI
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Hardware-accelerate sidebar + topbar so they don't jank when scrolling */
.sidebar, .topbar, .main { will-change: transform; }
/* Subtle hover instead of heavy transform on slower devices */
@media (hover: none) {
  .kpi-card:hover, .nav-item:hover, .related-chip:hover {
    transform: none !important;
  }
}

/* =====================================================
   PRINT — clean output for any screen
   ===================================================== */
@media print {
  .sidebar, .topbar, #floatingThemeBtn, #floatingThemeDropdown,
  .color-legend, .filters-bar, .f-bar, .pager, .bulk-toolbar,
  .notif-wrap, .charts-row, .tabs, .tabs-nav { display: none !important; }
  .main { margin: 0 !important; padding: 8mm !important; width: 100% !important; }
  body { background: #fff !important; color: #000 !important; }
  @page { size: A4; margin: 10mm; }
}