/* ============================================================
   RESPONSIVE.CSS — نظام البصمة
   يغطي: جوال صغير (320px+) / جوال عادي (480px+) /
          تابلت (768px+) / لابتوب (1024px+) / ديسكتوب (1280px+)
   ============================================================ */

/* ─────────────── GLOBAL MOBILE FIXES ─────────────── */
html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  -webkit-overflow-scrolling: touch;
}
input, select, textarea, button {
  font-size: 16px !important; /* منع zoom على iOS */
  -webkit-appearance: none;
}
input[type="date"], input[type="time"] {
  font-family: 'Cairo', sans-serif;
}
* { -webkit-tap-highlight-color: transparent; }

/* ─────────────── LOGIN PAGE ─────────────── */
.login-wrap {
  padding: 16px;
}
.login-box {
  padding: 32px 24px;
  border-radius: 20px;
}

@media (max-width: 480px) {
  .login-box {
    padding: 24px 18px;
    border-radius: 16px;
  }
  .logo-ring {
    width: 68px !important;
    height: 68px !important;
    font-size: 28px !important;
    border-radius: 18px !important;
  }
  .login-company { font-size: 18px !important; }
  .role-tab { font-size: 12px !important; padding: 9px 6px !important; gap: 5px !important; }
  .role-tab i { font-size: 13px; }
  .hint-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hint-row code { font-size: 11px !important; }
}

/* ─────────────── ADMIN SIDEBAR / TOPBAR ─────────────── */

/* Overlay backdrop for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 99;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sidebar-overlay.show { display: block; }

/* Hamburger button — hidden on desktop */
.hamburger-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--trans);
  flex-shrink: 0;
}
.hamburger-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── 1280px and below: slightly narrow sidebar ── */
@media (max-width: 1280px) {
  .sidebar { width: 240px; }
  .main { margin-right: 240px; }
  .content { padding: 22px 24px; }
}

/* ── 1024px: collapse sidebar by default ── */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(110%);
    width: 270px;
    z-index: 200;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-right: 0; }
  .hamburger-btn { display: flex; }
  .topbar { padding: 0 16px; }
  .topbar-date { display: none; }
  .content { padding: 18px 16px; }

  /* Stats 2 columns on tablet */
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-7-5 { grid-template-columns: 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .form-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .fp-page-grid { grid-template-columns: 1fr !important; }
  .emp-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── 768px: tablet portrait ── */
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .emp-grid { grid-template-columns: 1fr !important; }

  .topbar { height: 60px; }
  .topbar-title { font-size: 16px !important; }
  .topbar-subtitle { display: none; }

  /* Tables: horizontal scroll */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 600px; }
  td, th { padding: 10px 12px !important; font-size: 12px !important; }

  /* Page header stack */
  .page-header { flex-direction: column; align-items: flex-start !important; gap: 12px; }
  .page-header-right { width: 100%; flex-wrap: wrap; }
  .page-header-right .form-select,
  .page-header-right input[type="date"] { flex: 1; min-width: 0; }
  .search-bar { max-width: 100% !important; width: 100% !important; }

  /* Payroll summary */
  .payroll-summary-grid { grid-template-columns: 1fr 1fr !important; }

  /* Modal */
  .modal { border-radius: 16px !important; }
  .modal-body { padding: 18px !important; }

  /* Scanner */
  .scanner-ring { width: 130px !important; height: 130px !important; }
  .scanner-icon { font-size: 52px !important; }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .stat-card { padding: 16px 14px !important; }
  .stat-value { font-size: 26px !important; }

  .content { padding: 14px 12px; }

  .page-title-block h2 { font-size: 18px !important; }

  /* Cards tighter */
  .card-header { padding: 14px 16px !important; }
  .card-body { padding: 16px !important; }

  /* Employee card */
  .emp-card { padding: 16px !important; }
  .emp-card-avatar { width: 44px !important; height: 44px !important; font-size: 16px !important; }

  /* Tabs */
  .tab-btn { font-size: 12px !important; padding: 8px 10px !important; }

  /* Modal full-screen on tiny phones */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
  }

  /* Payroll summary: stack */
  .payroll-summary-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .pay-item .pay-val { font-size: 16px !important; }

  /* Topbar */
  .topbar { padding: 0 12px; height: 56px; }
  .topbar-title { font-size: 14px !important; }
  .topbar-btn { width: 36px !important; height: 36px !important; }

  /* Table min-width smaller */
  table { min-width: 480px; }

  /* Form selects */
  .form-select, .form-input { padding: 10px 12px !important; font-size: 14px !important; }

  /* Buttons */
  .btn { padding: 9px 14px !important; font-size: 12px !important; }

  /* Scanner */
  .scanner-ring { width: 110px !important; height: 110px !important; }
  .scanner-icon { font-size: 44px !important; }
  .scanner-input-wrap { flex-direction: column !important; }

  /* Page header */
  .page-header { gap: 10px; }
  .page-header-right { gap: 8px; }

  /* Shift cards */
  .grid-3 .card-body { padding: 20px 16px !important; }
}

/* ── 360px: very small phones ── */
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat-value { font-size: 22px !important; }
  .stat-label { font-size: 11px !important; }
  .content { padding: 10px 8px; }
  .card-header { padding: 12px !important; }
  .card-body { padding: 12px !important; }
  .emp-avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
}

/* ─────────────── ADMIN TOPBAR — RESPONSIVE TOPBAR ITEMS ─────────────── */
@media (max-width: 640px) {
  .topbar-date { display: none !important; }
}

/* ─────────────── EMPLOYEE PAGE ─────────────── */

/* Fix topbar on employee mobile */
@media (max-width: 640px) {
  /* Employee topbar */
  .topbar .topbar-clock { display: none; }
  .topbar .topbar-user .user-nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .brand-sub { display: none; }
  .topbar { padding: 0 12px !important; }
}

@media (max-width: 480px) {
  /* Employee checkin hero */
  .checkin-hero { padding: 24px 16px !important; border-radius: 16px !important; }
  .hero-time { font-size: 40px !important; }
  .checkin-btn { padding: 14px 28px !important; font-size: 14px !important; }
  .hero-times { gap: 10px !important; }
  .hero-time-item { padding: 8px 12px !important; }
  .hero-time-item .t-val { font-size: 15px !important; }

  /* Employee stats row */
  .stats-row.three { grid-template-columns: repeat(3,1fr) !important; gap: 8px !important; }
  .stats-row { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .stat-mini { padding: 12px 8px !important; }
  .stat-mini .sv { font-size: 20px !important; }
  .stat-mini .si { font-size: 16px !important; }

  /* Salary card */
  .salary-card { padding: 16px !important; }
  .salary-main { font-size: 28px !important; }

  /* Bottom nav */
  .bottom-nav { padding: 6px 6px 14px !important; gap: 2px !important; }
  .bnav-item { font-size: 9px !important; padding: 6px 2px !important; }
  .bnav-item i { font-size: 17px !important; }

  /* Main content padding above bottom nav */
  .main { padding-bottom: 88px !important; }

  /* Leave items */
  .leave-item { padding: 10px !important; gap: 10px !important; }
  .leave-icon { width: 36px !important; height: 36px !important; font-size: 15px !important; }

  /* Profile */
  .profile-av { width: 68px !important; height: 68px !important; font-size: 24px !important; }
  .profile-name { font-size: 17px !important; }

  /* Payslip */
  .payslip-total .pt-v { font-size: 26px !important; }

  /* Attendance log items */
  .att-day { gap: 8px !important; padding: 10px 0 !important; }
  .att-day-date .day-num { font-size: 18px !important; }
  .att-day-times { flex-wrap: wrap !important; gap: 6px !important; }
  .att-time-chip { font-size: 11px !important; padding: 3px 8px !important; }
  .att-hours { font-size: 12px !important; }

  /* Form modal */
  .form-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Month select */
  .month-sel select { font-size: 13px !important; padding: 9px 10px !important; }
}

/* ── 360px employee ── */
@media (max-width: 360px) {
  .stats-row.three { grid-template-columns: repeat(3,1fr) !important; gap: 6px !important; }
  .stat-mini { padding: 10px 6px !important; }
  .stat-mini .sv { font-size: 18px !important; }
  .stat-mini .sl { font-size: 9px !important; }
  .bnav-item span { display: none; } /* icon only on tiny */
  .bnav-item { padding: 8px 4px !important; }
  .bnav-item i { font-size: 20px !important; }
  .bottom-nav { padding: 8px 8px 16px !important; }
  .hero-time { font-size: 36px !important; }
  .checkin-btn { padding: 12px 20px !important; font-size: 13px !important; }
}

/* ─────────────── TABLET LANDSCAPE (768px–1024px) ─────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Employee: wider layout */
  .main { max-width: 100% !important; }
  .stats-row.three { grid-template-columns: repeat(3,1fr) !important; }
  .stats-row { grid-template-columns: repeat(4,1fr) !important; }
  .checkin-hero { padding: 36px 32px !important; }
  .hero-time { font-size: 60px !important; }

  /* Admin stats */
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-7-5 { grid-template-columns: 1fr !important; }
  .fp-page-grid { grid-template-columns: 1fr 1fr !important; }
  .emp-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .form-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ─────────────── UTILITY: SAFE AREA (iPhone notch) ─────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .toast {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}

/* ─────────────── PRINT ─────────────── */
@media print {
  .sidebar, .topbar, .bottom-nav, .hamburger-btn, .sidebar-overlay { display: none !important; }
  .main { margin-right: 0 !important; }
  .page { display: block !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
}