/* ═══════════════════════════════════════════════════════════
   OKYU HRM – Mobile Responsive (≤ 900px)
   Zentrale Datei für alle mobile-spezifischen Overrides.
   Geladen NACH allen Modul-CSS.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. SIDEBAR – Overlay, Touch-Friendly Nav
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Sidebar: slides in from left */
  .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    width: 280px;
    z-index: 200;
  }
  .sidebar.open {
    transform: none;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.5);
  }

  /* Overlay behind sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .sidebar-overlay.active {
    display: block;
    animation: fadeIn 0.2s ease;
  }

  /* Touch-friendly nav items (min 48px tap target) */
  .nav-item {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 0.92rem;
  }
  .nav-item .ms {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  /* Main content: no margin */
  .main {
    margin-left: 0;
  }

  /* Show hamburger button */
  #menuBtn {
    display: inline-flex !important;
  }
}

/* ─────────────────────────────────────────────────────────
   2. HEADER – Compact on Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .header {
    padding: 0 12px;
    height: 56px;
  }
  .page-title {
    font-size: 1rem;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .location-select {
    max-width: 110px;
    font-size: 0.78rem;
    padding: 4px 8px;
  }
  /* Hide date on mobile – info available in dashboard */
  #dateDisplay {
    display: none !important;
  }
  /* Compact theme toggle */
  .header-right .theme-toggle {
    transform: scale(0.85);
    margin: 0 -4px;
  }
  .header-left {
    gap: 8px;
  }
  .header-right {
    gap: 6px;
  }
}
@media (max-width: 480px) {
  .page-title {
    max-width: 100px;
    font-size: 0.9rem;
  }
  .location-select {
    max-width: 90px;
    font-size: 0.72rem;
  }
}

/* ─────────────────────────────────────────────────────────
   3. CONTENT – Reduced Padding
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .content {
    padding: 16px 12px;
  }
}
@media (max-width: 480px) {
  .content {
    padding: 12px 8px;
  }
}

/* ─────────────────────────────────────────────────────────
   4. MODAL – Bottom Sheet on Mobile  
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .modal-overlay {
    align-items: flex-end;
  }
  .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    animation: slideUpModal 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  @keyframes slideUpModal {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
  }
  .modal-header {
    padding: 16px 20px;
    /* Drag handle */
    position: relative;
  }
  .modal-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-light);
  }
  .modal-title {
    font-size: 1rem;
    padding-top: 4px;
  }
  .modal-body {
    padding: 16px;
  }
  .modal-footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* Forms single column on mobile */
  .modal .form-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────
   5. TABS – Horizontal Scrollable on Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Generic tabs */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    flex-wrap: nowrap;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    padding: 8px 14px;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  /* Vacation tabs */
  .vac-tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .vac-tabs-bar::-webkit-scrollbar { display: none; }
  .vac-tab {
    padding: 8px 14px;
    font-size: 0.82rem;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .vac-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .vac-stats-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .vac-stat-card {
    min-width: 0;
    padding: 12px 14px;
  }
  .vac-stat-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
  .vac-stat-num {
    font-size: 1.3rem;
  }
  .vac-add-btn {
    align-self: stretch;
    justify-content: center;
  }

  /* Schedule view toggle + week nav */
  .sc2-view-toggle {
    padding: 2px;
  }
  .sc2-view-btn {
    padding: 6px 12px;
    font-size: 0.76rem;
  }
  .sc2-week-nav {
    padding: 2px;
  }
  .sc2-kw-label {
    padding: 0 8px;
    font-size: 0.78rem;
  }
  .sc2-nav-btn {
    width: 32px;
    height: 32px;
  }
  .sc2-action-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: 10px;
  }
  .sc2-title {
    font-size: 1.4rem;
  }

  /* Schedule filter bar pills scroll */
  .sc2-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
  }
  .sc2-filter-left {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .sc2-filter-left::-webkit-scrollbar { display: none; }
  .sc2-dept-pill {
    flex-shrink: 0;
  }

  /* Checklists location pills */
  .cl-loc-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .cl-loc-pills::-webkit-scrollbar { display: none; }
  .cl-loc-pill {
    flex-shrink: 0;
  }
  .cl-page-title {
    font-size: 1.6rem;
  }
  .cl-hd-actions {
    width: 100%;
  }
  .cl-new-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .vac-stats-strip {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────
   6. TABLES – Better Horizontal Scroll
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Scroll hint gradient */
  .table-wrap,
  .emp-table-scroll,
  .vac-table-card,
  .sc2-grid-wrap .table-wrap {
    position: relative;
  }
  .table-wrap::after,
  .emp-table-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, var(--bg-card), transparent);
    pointer-events: none;
    z-index: 5;
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  /* Compact table cells */
  th {
    padding: 8px 10px;
    font-size: 0.62rem;
  }
  td {
    padding: 8px 10px;
    font-size: 0.82rem;
  }
  /* Employee toolbar */
  .emp-toolbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .emp-search {
    width: 140px;
  }
  .emp-search:focus {
    width: 180px;
  }
  /* Always show emp actions on mobile (no hover available) */
  .emp-actions {
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────
   7. DASHBOARD – Mobile Optimization
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Welcome banner compact */
  .dash-welcome {
    min-height: 180px;
    padding: 24px 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-greeting {
    font-size: 1.8rem;
  }
  .dash-subtitle {
    font-size: 0.82rem;
    max-width: 100%;
  }
  .dash-clock {
    display: none;
  }
  .dash-greeting-badge {
    font-size: 0.58rem;
    padding: 3px 10px;
    margin-bottom: 8px;
  }
  .dash-upload-btn {
    padding: 7px 14px;
    font-size: 0.7rem;
  }

  /* Stats grid */
  .dash-stat {
    padding: 16px 14px;
    border-radius: 18px;
  }
  .dash-stat-icon {
    width: 38px;
    height: 38px;
  }
  .dash-stat-value {
    font-size: 2rem;
  }

  /* Bento & grid */
  .dash-bento {
    grid-template-columns: 1fr;
  }
  .dash-grid-2 {
    grid-template-columns: 1fr;
  }

  /* Card body padding */
  .dash-card-header {
    padding: 14px 16px 10px;
    font-size: 0.85rem;
  }
  .dash-card-body {
    padding: 12px 16px 16px;
  }

  /* Financial bars smaller */
  .dash-fin-bars {
    height: 100px;
  }
  .dash-fin-summary {
    min-width: 90px;
  }

  /* Donut chart smaller */
  .dash-att-pct {
    font-size: 2.4rem;
  }
}

@media (max-width: 560px) {
  .dash-welcome {
    min-height: 150px;
    padding: 20px 16px;
    border-radius: 16px;
  }
  .dash-greeting {
    font-size: 1.5rem;
  }
}

/* ─────────────────────────────────────────────────────────
   8. DEPARTMENTS – Card Header Wrap
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dept-page-title {
    font-size: 1.5rem;
  }
  .dept-card-header {
    flex-wrap: wrap;
    padding: 16px;
    gap: 12px;
  }
  .dept-stats {
    margin: 0;
    order: 10;
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
  .dept-divider {
    display: none;
  }
  .dept-cost-block {
    margin-left: auto;
  }
  .dept-body-grid {
    grid-template-columns: 1fr;
  }
  .dept-insight-grid {
    grid-template-columns: 1fr;
  }
  .dept-insight-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ─────────────────────────────────────────────────────────
   9. SCHEDULE – Page Controls Compact
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sc2-page-hd {
    gap: 12px;
  }
  .sc2-page-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sc2-conflict-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .sc2-conflict-left {
    flex-wrap: wrap;
    gap: 12px;
  }
  .sc2-conflict-divider {
    display: none;
  }
  /* Bento stats */
  .sc2-bento {
    grid-template-columns: 1fr;
  }
  .sc2-bento-card {
    padding: 20px 18px;
    min-height: 140px;
    border-radius: 18px;
  }
  .sc2-bento-big {
    font-size: 2.5rem;
  }
  /* Grid footer */
  .sc2-grid-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
}

/* ─────────────────────────────────────────────────────────
   10. MITARBEITER DETAIL – Tabs & Layout
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mit-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .mit-bottom-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .mit-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────
   11. CHECKLISTS – Bento Grid Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cl-bento-grid {
    grid-template-columns: 1fr;
  }
  .cl-hero-card,
  .cl-hygiene-card,
  .cl-mini-card {
    grid-column: span 1;
  }
  .cl-hero-name {
    font-size: 1.3rem;
  }
  .cl-card-header {
    padding: 16px 16px 10px;
  }
  .cl-items-wrap {
    padding: 6px 16px 12px;
  }
  .cl-add-row {
    padding: 10px 16px 14px;
  }
  /* FABs: closer to edge */
  .cl-fab-wrap {
    bottom: 20px;
    right: 16px;
  }
}

/* ─────────────────────────────────────────────────────────
   12. REPORTS – KPI Grid Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rep-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rep-charts-row {
    grid-template-columns: 1fr;
  }
  .rep-extra-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .rep-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────
   13. CALENDAR – Compact on Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cal-bento-grid {
    grid-template-columns: 1fr;
  }
  .vac-cal-day {
    min-height: 60px;
    padding: 4px;
  }
  .vac-cal-num {
    font-size: 0.7rem;
  }
  .vac-cal-event {
    font-size: 0.58rem;
    padding: 1px 3px;
  }
}

/* ─────────────────────────────────────────────────────────
   14. NOTIFICATIONS PANEL – Full Width on Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .notif-panel {
    width: 100vw;
    max-width: 100vw;
    right: -100vw; /* Hidden off-screen */
    border-radius: 0;
  }
  .notif-panel.open {
    right: 0;
  }
  .notif-panel-header {
    padding: 16px 20px;
  }
  /* Larger close button for touch */
  .notif-panel-header .modal-close {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .notif-overlay.open {
    display: block;
  }
}

/* ─────────────────────────────────────────────────────────
   15. VACATION – Calendar & Side Panel
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vac-bento {
    grid-template-columns: 1fr;
  }
  .vac-cal-card {
    padding: 16px;
    border-radius: 16px;
  }
  .vac-cal-toolbar {
    flex-direction: column;
    gap: 10px;
  }
  .vac-cal-month {
    font-size: 1.1rem;
  }
  .vac-panel-card {
    padding: 16px;
    border-radius: 16px;
  }
  .vac-legend {
    flex-wrap: wrap;
    gap: 10px;
  }
  /* Table scroll */
  .vac-table-card {
    border-radius: 16px;
  }
}

/* ─────────────────────────────────────────────────────────
   16. EMPLOYEES – Compact Stats & Table
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .emp-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .emp-stat-card {
    padding: 14px 16px 10px;
    border-radius: 12px;
  }
  .emp-stat-num {
    font-size: 1.6rem;
  }
  .emp-stat-micro {
    font-size: 0.55rem;
  }
}
@media (max-width: 480px) {
  .emp-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────
   17. LOGIN SCREEN – Mobile Friendly
   ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .login-box {
    padding: 32px 20px;
    border-radius: 0;
    max-width: 100vw;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .login-screen {
    align-items: stretch;
  }
  .login-logo {
    font-size: 1.5rem;
  }
}

/* ─────────────────────────────────────────────────────────
   18. SICK LEAVE – Compact on Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Sick leave using same .tabs → already handled above */
  /* Stat cards inherit from stats-row → already 1fr 1fr */
}

/* ─────────────────────────────────────────────────────────
   19. ZEITERFASSUNG CARDS – Touch-Friendly
   ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ze-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ze-day-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────
   UTILITIES – Safe Area & Touch Improvements
   ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Safe area for notch devices */
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Better touch targets everywhere */
  button, .btn, .btn-sm {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 32px;
  }

  /* Prevent text size adjust on iOS */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Smooth scrolling on overflow */
  .table-wrap,
  .emp-table-scroll {
    -webkit-overflow-scrolling: touch;
  }
}