/* =====================================================================================================================
   dist/css/mobile-lists.css  (2026-10-17)  --  phone layout fixes for lists, filters, tabs and cards.
   Presentation only. Loaded after hr-ui.css / ess-mobile.css. Works with dist/js/mobile-lists.js.
   ===================================================================================================================== */

/* ---- 1. Tabs never wrap or truncate: they scroll sideways inside their own strip -------------------------------- */
@media (max-width: 767.98px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item { flex: 0 0 auto; }
  .nav-tabs .nav-link { white-space: nowrap; padding: .65rem .9rem; min-height: 44px; }
}

/* ---- 2. Filter bars: one control per row on phones, so selects/dates are readable (was: two squeezed per row) ------- */
@media (max-width: 575.98px) {
  .content-wrapper .form-row:has(> [class*="col-"] > select.form-control-sm) > [class*="col-"],
  .content-wrapper .form-row:has(> [class*="col-"] > input.form-control-sm) > [class*="col-"],
  .content-wrapper .form-row.hr-filters > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .content-wrapper .form-row .form-control-sm, .content-wrapper .form-row .custom-select-sm { min-height: 44px; font-size: 16px; }
  .content-wrapper .form-row .btn-sm { min-height: 44px; }
  .content-wrapper .card-body > .btn-sm, .content-wrapper .dataTables_wrapper .btn-sm { min-height: 40px; }
  .dataTables_wrapper .dataTables_paginate .page-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- 3. Static tables on phones -> cards (the DataTables ones already use .hr-cards) ---------------------------------- */
@media screen and (max-width: 767.98px) {
  table.m-cards, table.m-cards tbody, table.m-cards tr, table.m-cards td { display: block; width: 100% !important; }
  table.m-cards { border: 0; min-width: 0; }
  table.m-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.m-cards tbody tr { margin: 0 0 .75rem; padding: .45rem .9rem; border: 1px solid var(--hr-border, rgba(0,0,0,.12)); border-radius: 12px; background: var(--hr-surface, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.06); -webkit-tap-highlight-color: transparent; }
  table.m-cards tbody td { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: .35rem 0 !important; border: 0 !important; text-align: right; font-size: .9rem; word-break: break-word; min-height: 32px; }
  table.m-cards tbody td::before { content: attr(data-label); flex: 0 0 36%; max-width: 36%; text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--hr-muted, #6c757d); }
  table.m-cards tbody td[data-label=""]::before, table.m-cards tbody td.dataTables_empty::before { content: none; }
  table.m-cards tbody td:empty { display: none; }
  table.m-cards tbody td:first-child { font-weight: 600; }
  table.m-cards tbody td[colspan] { display: block; text-align: center; }
  table.m-cards tbody td[colspan]::before { content: none; }
  table.m-cards tbody td.m-actions { justify-content: flex-end; padding-top: .55rem !important; }
  table.m-cards tbody td.m-actions::before { content: none; }
  .table-responsive:has(> table.m-cards) { overflow: visible; }
  table.m-cards tbody tr.m-tap { cursor: pointer; transition: background-color .12s, transform .08s; }
  table.m-cards tbody tr.m-tap:active { background: rgba(232,114,12,.09); transform: scale(.995); }
  /* Header row for people: photo + name side by side, everything else underneath */
  table.m-head tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; }
  table.m-head tbody td { grid-column: 1 / -1; }
  table.m-head tbody td.m-photo { grid-column: 1; grid-row: 1 / span 2; padding: .15rem 0 !important; align-self: center; }
  table.m-head tbody td.m-photo::before, table.m-head tbody td.m-primary::before, table.m-head tbody td.m-sub::before { content: none; }
  table.m-head tbody td.m-primary { grid-column: 2; grid-row: 1; justify-content: flex-start; text-align: left; font-size: 1.02rem; font-weight: 700; align-self: end; padding-bottom: 0 !important; }
  table.m-head tbody td.m-sub { grid-column: 2; grid-row: 2; justify-content: flex-start; text-align: left; color: var(--hr-muted, #6c757d); font-size: .82rem; align-self: start; padding-top: 0 !important; }
  table.m-head tbody td.m-primary + td.m-sub + td, table.m-head tbody td.m-sub + td { margin-top: .35rem; border-top: 1px solid var(--hr-border, rgba(0,0,0,.08)) !important; padding-top: .5rem !important; }
}
body.dark-mode table.m-cards tbody tr { --hr-surface: #343a40; --hr-border: rgba(255,255,255,.14); --hr-muted: #adb5bd; }
@media print { table.m-cards thead { position: static; width: auto; height: auto; clip: auto; } }

/* ---- 4. Employee cards: keep the ⋮ menu inside the card down to 280px; clear View button; employee number -------------- */
.emp-card { position: relative; align-items: flex-start; -webkit-tap-highlight-color: transparent; transition: box-shadow .15s, transform .08s, background-color .12s; }
.emp-card > div:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.emp-card .menu { flex: 0 0 auto; margin-left: 0; }
.emp-card .no { font-size: .74rem; font-weight: 700; color: var(--miedc-orange-dark, #B85700); letter-spacing: .02em; }
.emp-card .btn-view { margin-top: .4rem; }
.emp-card:active { background: rgba(232,114,12,.07); transform: scale(.995); }
.emp-card .sm { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .emp-card { padding: 10px; gap: 10px; }
  .emp-av { width: 52px; height: 52px; flex-basis: 52px; font-size: 17px; }
  .emp-card .menu .btn { min-width: 40px; min-height: 40px; }
  .emp-card .btn-view { min-height: 40px; display: inline-flex; align-items: center; gap: .4rem; }
}
@media (max-width: 340px) {
  .emp-card { flex-wrap: wrap; }
  .emp-card > div:nth-child(2) { flex-basis: calc(100% - 70px); }
}
body.dark-mode .emp-card { background: #343a40; border-color: rgba(255,255,255,.14); }
body.dark-mode .emp-card .sm { color: #adb5bd; }

/* ---- 5. Dropdown menus: never clipped by a card, table or the screen edge ------------------------------------------- */
@media (max-width: 767.98px) {
  .dropdown-menu { max-width: calc(100vw - 1.5rem); max-height: 60vh; overflow-y: auto; }
  .dropdown-menu .dropdown-item { min-height: 44px; display: flex; align-items: center; white-space: normal; }
  .card, .card-body, .emp-card, .dir-main { overflow: visible; }
  .modal-dialog { margin: .5rem; }
  .modal-content { max-height: calc(100dvh - 1rem); }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { position: sticky; bottom: 0; background: inherit; flex-wrap: wrap; gap: .4rem; }
  .modal-footer .btn { min-height: 44px; flex: 1 1 auto; }
}

/* ---- 6. Long names / numbers / e-mails wrap instead of forcing a one-word-per-line column ------------------------------ */
.content-wrapper td, .content-wrapper .card-title, .content-wrapper dd { overflow-wrap: anywhere; }
.content-wrapper table.table:not(.m-cards):not(.hr-cards) td { overflow-wrap: normal; word-break: normal; }
.content-wrapper table.table:not(.m-cards):not(.hr-cards) td.text-nowrap, .content-wrapper table.table:not(.m-cards):not(.hr-cards) th { white-space: nowrap; }

/* ---- 7. Keep the last row/buttons clear of the bottom bar + iOS home indicator ----------------------------------------- */
@media (max-width: 991.98px) {
  .content-wrapper { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- 8. Status badges: readable everywhere ---------------------------------------------------------------------------------- */
.st-badge { display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.st-pending  { background: #fff3cd; color: #664d03; }
.st-approved { background: #d1e7dd; color: #0a3622; }
.st-rejected { background: #f8d7da; color: #58151c; }
.st-none     { background: #e9ecef; color: #495057; }
body.dark-mode .st-pending  { background: #5c4a00; color: #ffe69c; }
body.dark-mode .st-approved { background: #0f3d2a; color: #a3e0c1; }
body.dark-mode .st-rejected { background: #5a1d24; color: #f1aeb5; }
body.dark-mode .st-none     { background: #495057; color: #dee2e6; }

/* ---- 9. Bottom bar on very small phones (280-340px): labels stay complete ---------------------------------------------- */
@media (max-width: 340px) {
  .bottom-nav .bottom-nav-link { padding-left: 1px !important; padding-right: 1px !important; min-width: 0; overflow: visible; }
  .bottom-nav .bottom-nav-link span { font-size: .6rem; letter-spacing: -.02em; overflow: visible; text-overflow: clip; max-width: none; }
  .bottom-nav .bottom-nav-link i { font-size: 1.05rem; }
}