/* =========================================================
   HR System Phase 2 — Responsive hardening
   Works with Bootstrap RTL, legacy _ui pages, and modern layout pages.
   ========================================================= */

:root{
  --hr-safe-x: clamp(.75rem, 2vw, 1.5rem);
  --hr-mobile-radius: 14px;
}

html{scroll-padding-top:76px}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
pre,code,.audit-meta{max-width:100%;overflow:auto}

/* Consistent readable containers across legacy pages. */
.container,
.container-fluid{
  width:100%;
}
body > .container,
body > main > .container{
  max-width:1440px;
}

/* Top navigation survives small screens instead of overflowing horizontally. */
.navbar .container-fluid{
  gap:.75rem;
  flex-wrap:wrap;
}
.navbar-brand{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.navbar-brand span,
.navbar-brand{
  white-space:nowrap;
  text-overflow:ellipsis;
}
.nav-quick,
.navbar .d-flex.align-items-center{
  min-width:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Page titles and toolbars stack predictably on phones. */
.page-head{
  min-width:0;
}
.page-head > *,
.toolbar,
.search-panel{
  min-width:0;
}
.toolbar .form-control,
.toolbar .form-select{
  min-width:0 !important;
}

/* Forms: prevent compressed fields and make action buttons usable on touch. */
.form-control,
.form-select,
.btn,
.btn-hr{
  max-width:100%;
}
textarea.form-control{min-height:112px}
.btn,
.btn-hr{
  touch-action:manipulation;
}
.row > [class*="col-"]{
  min-width:0;
}

/* Tables: keep desktop behavior, but make mobile scanning much easier. */
.table-responsive,
.hr-table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--hr-mobile-radius);
}
.table,
.hr-table{
  vertical-align:middle;
}
.table th,
.table td,
.hr-table th,
.hr-table td{
  overflow-wrap:anywhere;
}
.table .btn,
.hr-table .btn,
.table .btn-hr,
.hr-table .btn-hr{
  white-space:nowrap;
}

/* Data-density fallback: no markup changes required. */
@media (max-width: 768px){
  body{font-size:.95rem}
  body > .container{padding-inline:var(--hr-safe-x)!important;padding-block:1rem!important}
  .hr-content{padding:1rem!important}

  .navbar{position:sticky;top:0;z-index:1020}
  .navbar .container-fluid{align-items:flex-start}
  .navbar-brand{font-size:1rem;max-width:calc(100vw - 2rem)}
  .nav-quick{width:100%;justify-content:space-between;gap:.45rem}
  .nav-quick .btn{flex:1 1 auto}
  .nav-quick .pill{display:none}

  .page-head{
    display:flex!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    flex-direction:column;
    gap:.75rem!important;
  }
  .page-head h1,
  .page-head .h5{line-height:1.45}
  .toolbar{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr;
  }
  .toolbar > *,
  .search-panel,
  .search-panel input{
    width:100%!important;
  }

  .card,
  .hr-card,
  .card-soft{
    border-radius:var(--hr-mobile-radius)!important;
  }
  .card-body,
  .hr-card{padding:1rem!important}

  .row.g-4{--bs-gutter-y:1rem}
  dl.row dt,
  dl.row dd{
    width:100%;
    max-width:100%;
    flex:0 0 100%;
  }
  dl.row dt{margin-top:.7rem;color:#6c757d}
  dl.row dd{margin-bottom:.2rem}

  .nav-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.35rem;
  }
  .nav-tabs .nav-link{white-space:nowrap}

  .table,
  .hr-table{
    min-width:720px;
  }
  .table.table-sm{min-width:640px}

  .modal-dialog{margin:.75rem}
  .dropdown-menu{max-width:calc(100vw - 1.5rem)}
}

@media (max-width: 576px){
  .btn,
  .btn-hr{
    min-height:42px;
  }
  .btn-group,
  .btn-toolbar{
    flex-wrap:wrap;
  }
  .page-head .pill{
    width:100%;
    justify-content:center;
  }
  .table-responsive::after,
  .hr-table-responsive::after{
    content:'اسحب الجدول يميناً ويساراً';
    display:block;
    padding:.45rem .75rem;
    font-size:.78rem;
    color:#6c757d;
    background:rgba(108,117,125,.08);
    border-top:1px solid rgba(108,117,125,.14);
  }
}

/* Modern shell refinements. */
@media (max-width: 992px){
  .hr-topbar{height:auto;min-height:64px;flex-wrap:wrap;padding:.75rem 1rem}
  .hr-topbar .search{order:3;flex:1 0 100%;max-width:none}
  .hr-topbar .actions{margin-inline-start:0}
  .hr-sidebar{max-width:min(86vw, var(--hr-sidebar-w))}
}

@media (min-width: 993px){
  .hr-sidebar-backdrop{display:none!important}
}

.hr-sidebar-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.42);
  z-index:45;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.hr-sidebar-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

/* Print-friendly fallback for HR documents. */
@media print{
  .navbar,.toolbar,.nav-tabs,.hr-topbar,.hr-sidebar,.hr-sidebar-backdrop{display:none!important}
  .container,.hr-content{max-width:none!important;padding:0!important}
  .table,.hr-table{min-width:0!important;font-size:11px}
}


/* Phase 4 hotfix: mobile shell + attendance page.
   These rules intentionally override inline-heavy legacy markup without changing PHP logic. */
html, body { max-width: 100%; }
.hr-shell, .hr-main, .hr-content { min-width: 0; }
.hr-topbar > * { min-width: 0; }
.hr-topbar .actions { flex: 0 0 auto; }
.hr-topbar .search input { min-width: 0; }

@media (max-width: 768px){
  .hr-topbar{
    min-height: auto !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "menu actions"
      "search search";
    gap: .6rem !important;
    padding: .65rem .75rem !important;
  }
  .hr-topbar .hr-toggle{ grid-area: menu; }
  .hr-topbar .actions{
    grid-area: actions;
    width: 100%;
    justify-content: flex-end;
    gap: .25rem !important;
  }
  .hr-topbar .search{
    grid-area: search;
    width: 100%;
    max-width: none !important;
    flex: none !important;
    order: initial !important;
    padding: .45rem .7rem;
  }
  .hr-icon-btn{ width: 38px; height: 38px; }
  .hr-content{ padding: .85rem !important; }
  .page-head h1{
    font-size: clamp(1.25rem, 8vw, 1.8rem) !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .attendance-page-head{
    align-items: flex-start !important;
    text-align: start;
  }
  .attendance-mark-page{ --bs-gutter-x: 0; }
  .attendance-mark-page > [class*="col-"]{
    padding-inline: 0 !important;
  }
  .attendance-punch-card{
    padding: 1rem !important;
    overflow: hidden;
  }
  .attendance-status{
    font-size: clamp(1.35rem, 10vw, 2rem) !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .attendance-punch-btn{
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
    padding: .9rem 1rem !important;
  }
  .attendance-map{
    height: 260px !important;
  }
}

@media (max-width: 420px){
  .hr-topbar .actions .hr-icon-btn{ width: 34px; height: 34px; }
  .hr-topbar .actions .dropdown > .btn{
    max-width: 54px;
    overflow: hidden;
  }
  .hr-topbar .actions .dropdown > .btn img{
    width: 30px; height: 30px;
  }
  .page-head{ margin-bottom: .9rem !important; }
  .attendance-map{ height: 220px !important; }
}