/* ============================================================
   MOBILE UTILITIES — Touch Polish, Accessibility, Animations
   MSINDAHA / HLB HRM
   ============================================================
   Loaded after responsive.css. Adds mobile-specific polish:
   touch feedback, safe-area, a11y, sticky actions, RTL prep.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   TOUCH FEEDBACK (applies below desktop)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Kill desktop hover lifts on touch — no flicker */
  .btn:hover,
  .nav-item:hover,
  .stat-card:hover,
  .action-btn:hover,
  .report-card:hover,
  .topbar-btn:hover,
  .page-btn:hover {
    transform: none;
    box-shadow: inherit;
  }

  /* Active press feedback instead */
  .btn:active {
    transform: scale(0.97);
    opacity: 0.88;
    transition-duration: 0.08s;
  }
  .nav-item:active {
    background: var(--primary-light);
    color: var(--primary);
  }
  .action-btn:active {
    transform: scale(0.92);
  }

  /* Remove tap highlight everywhere */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Bigger sidebar nav items */
  .nav-item {
    padding: 0.875rem 1rem;
    min-height: 48px;
  }

  /* Bigger logout button */
  .sidebar-logout {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Sidebar footer spacing */
  .sidebar-footer {
    padding: 1rem;
    min-height: 64px;
  }

  /* Smooth sidebar scroll */
  .sidebar {
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY (mobile)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Stronger focus ring on touch devices */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* ── Minimum readable text ──────────────────────────────── */
@media (max-width: 767px) {
  body {
    line-height: 1.7;
  }

  /* Floor all text utilities */
  .text-xs { font-size: 0.8rem; }
  .text-sm { font-size: 0.875rem; }

  /* Badge floor */
  .badge { font-size: 0.75rem; }

  /* Slip rows */
  .slip-row       { font-size: 0.9rem; }
  .slip-row.total { font-size: 1rem;   }

  /* Modal title */
  .modal-title { font-size: 1rem; }

  /* Page header text */
  .page-header-info p { font-size: 0.825rem; }

  /* Activity feed */
  .activity-desc { font-size: 0.9rem; }
  .activity-time { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════
   STICKY FORM ACTIONS BAR
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Generic sticky bar class (opt-in for forms) */
  .form-sticky-actions {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--border);
    padding: 0.875rem var(--space-content, 1rem);
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 0.5rem;
    z-index: 80;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin-left: calc(-1 * var(--space-content, 1rem));
    margin-right: calc(-1 * var(--space-content, 1rem));
  }
  .form-sticky-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* Compact page header */
  .page-header-info h2 { font-size: 1.05rem; }

  /* Company badge */
  .sidebar-company-badge,
  .sidebar-viewing-badge {
    font-size: 0.72rem;
    padding: 0.4rem 0.65rem;
    margin: 0 0.75rem 0.5rem;
  }

  /* Pagination info — smaller */
  #pagination-info { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════
   iOS SAFE AREA
   ═══════════════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #toast-container {
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .form-sticky-actions {
    padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLE SCROLL HINT ANIMATION
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* JS adds .has-overflow when table scrolls */
  .table-wrap.has-overflow::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0;
    animation: swipeHint 2.2s ease-in-out 0.8s 2 forwards;
    pointer-events: none;
    z-index: 2;
  }

  @keyframes swipeHint {
    0%   { opacity: 0;    transform: translateY(-50%) translateX(0);    }
    20%  { opacity: 0.3;  transform: translateY(-50%) translateX(0);    }
    60%  { opacity: 0.3;  transform: translateY(-50%) translateX(-14px);}
    100% { opacity: 0;    transform: translateY(-50%) translateX(-14px);}
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLE CARD POLISH (mobile only)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Card tap feedback */
  .table-wrap tbody tr:active {
    background: var(--primary-light);
    transition-duration: 0.05s;
  }

  /* Badge inside card td — stays inline */
  .table-wrap tbody td .badge {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Status badge — pull to right end */
  .table-wrap tbody td[data-label="Status"],
  .table-wrap tbody td[data-label="الحالة"] {
    align-items: center;
  }

  /* Code element inside card td */
  .table-wrap tbody td code {
    font-size: 0.8rem;
    background: var(--bg);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
  }

  /* emp-cell inside card — no flex override needed */
  .table-wrap tbody td .emp-cell {
    flex: 1;
  }

  /* Table pagination — below card list */
  .table-wrap + .pagination,
  .table-wrap .pagination {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

/* ═══════════════════════════════════════════════════════════
   EMPLOYEE PORTAL — mobile-first
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* My Payroll — stat cards */
  .payroll-summary .card { padding: 0.875rem; }

  /* Attendance calendar */
  .att-day { min-height: 36px; }

  /* Leaves activity items */
  .activity-item { padding: 0.75rem 1rem; }

  /* Report cards — full row */
  .report-card { padding: 1rem; }
  .report-icon  { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════
   HIGH CONTRAST
   ═══════════════════════════════════════════════════════════ */
@media (prefers-contrast: high) {
  :root {
    --border: #8094ad;
    --border-dark: #5b7291;
  }
  .btn    { border-width: 2px; }
  .badge  { border-width: 1px; }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION (already in main.css — reinforce)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .sidebar                 { transition: none !important; }
  .sidebar-overlay         { transition: none !important; }
  .table-wrap.has-overflow::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   RTL SUPPORT (Arabic layout)
   ═══════════════════════════════════════════════════════════ */
[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  transform: translateX(100%);
  border-right: none;
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 26px rgba(15, 50, 99, 0.08);
}
[dir="rtl"] .sidebar.open {
  transform: translateX(0);
}
[dir="rtl"] .nav-item:hover {
  transform: translateX(-2px);
}
[dir="rtl"] .main-area {
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 1024px) {
  [dir="rtl"] .main-area {
    margin-left: 0 !important;
    margin-right: var(--sidebar-w) !important;
  }
}
[dir="rtl"] .nav-badge       { margin-left: 0; margin-right: auto; }
[dir="rtl"] .topbar-actions  { margin-left: 0; margin-right: auto; }
[dir="rtl"] .table-wrap::after {
  right: auto;
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
}