/* v19 styles (same base as v18, adds Position chip) */
:root{
  --bg:#f7f3ef; --paper:#fff; --ink:#3a2f27; --muted:#8b7e74; --line:#e7dfd8;
  --chip:#efe7df; --accent:#b58b63; --accent2:#c6a27e;
  --radius:14px; --shadow:0 10px 30px rgba(128,98,72,.15);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Saraban", sans-serif; }

.page{ padding:24px; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

.topbar{ display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:18px; }
.brand{ display:flex; align-items:center; gap:10px; }
.dot{ width:12px; height:12px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 6px rgba(181,139,99,.15); }
.search{ flex:1; display:flex; justify-content:flex-end; }
.search-wrap{ position:relative; width:100%; max-width:560px; }
.search-input{ width:100%; background:#f6efe7; border:1px solid var(--line); border-radius:999px; padding:12px 16px; min-height:44px; outline:none; }
.suggestions{ position:absolute; left:0; right:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); max-height:320px; overflow:auto; display:none; z-index:20; }
.suggestions li{ padding:10px 12px; border-radius:8px; cursor:pointer; }
.suggestions li:hover{ background:#fbf7f3; }

.grid{ display:grid; grid-template-columns:400px 1fr; gap:18px; }
.card-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.muted{ color:#8b7e74; font-size:12px; }

.list{ padding:8px; }
.row{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; cursor:pointer; min-height:48px; }
.row:hover{ background:#fbf7f3; }
.row + .row{ margin-top:4px; }
.avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(180deg,#efe7df,#f8f1e9); display:grid; place-items:center; font-weight:700; overflow:hidden; }
/* Class-based avatar images (use in <img> tags) */
.avatar-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center center; }
.name{ font-weight:700; }
.dept{ color:#8b7e74; font-size:12px; }
.badge{ margin-left:auto; padding:6px 12px; border-radius:999px; font-size:12px; border:1px solid; min-height:28px; display:grid; place-items:center; }
.badge.warn{ background:#fff4e5; border-color:#ffe7c8; color:#9a6219; }
.badge.ok{ background:#e9f6ed; border-color:#d6eadc; color:#2e6e43; }
.badge.off{ background:#f1f1f1; border-color:#e5e5e5; color:#6b6b6b; }

.detail{ padding:12px 16px; min-height:240px; }
.detail.empty{ color:#8b7e74; }

.pager{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-top:1px solid var(--line); flex-wrap:wrap; }
.page-btn{ border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 10px; min-height:36px; cursor:pointer; }
.page-select{ border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 10px; min-height:36px; }
.page-input{ width:84px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; min-height:36px; }

.history-card{ margin-top:12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.history-head{ display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid var(--line); }
.history-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.segment{ display:flex; background:#f1ebe4; border-radius:999px; padding:4px; gap:4px; }
.segment button{ border:none; background:transparent; padding:8px 12px; border-radius:999px; cursor:pointer; min-height:36px; }
.segment .is-active{ background:#fff; border:1px solid var(--line); }

.profile{ display:flex; align-items:center; gap:18px; padding:14px; }
.profile .avatar{ width:72px; height:72px; border-radius:12px; flex-shrink:0; }
.profile .name{ font-size:22px; font-weight:800; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.chip{ background:#efe7df; border:1px solid var(--line); border-radius:999px; padding:6px 10px; font-size:12px; }

.overview-card{ margin:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.overview-card .title{ font-weight:700; margin-bottom:6px; }
.overview-list{ margin:8px 0 0 18px; }

.logs{ display:grid; gap:8px; margin:12px; }
.logs .log-row{
  display:grid; grid-template-columns: 96px 1fr; gap:10px;
  border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fff; cursor:pointer; min-height:44px;
  width:100%; min-width:0;
}
.logs .log-row > *{ min-width:0; }
.logs .date{ font-weight:600; color:#5a4e45; font-size:14px; white-space:nowrap; }
.logs .title{ line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; box-orient:vertical; word-break:break-word; }

/* Make log rows hover like employee rows (brown-ish background) */
.logs .log-row{ transition: background .18s ease; }
.logs .log-row:hover{ background:#fbf7f3; }

/* Hours table styling */
.hours-table{ width:100%; border-collapse:collapse; background:#fff; }
.hours-table thead th{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-weight:700; }
.hours-table tbody td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.hours-table tr:last-child td{ border-bottom: none; }

.logs-pager{ display:flex; justify-content:center; align-items:center; gap:8px; padding:8px 0 4px; flex-wrap:wrap; }
.logs-pager .page-btn{ min-height:32px; padding:4px 10px; }
.logs-pager .page-input{ width:74px; min-height:32px; padding:4px 8px; }
.logs-pager .go-btn{ min-height:32px; padding:4px 10px; }

.report-frame{ width:100%; height:72dvh; border:1px solid var(--line); border-radius:8px; background:#fff; }
.fallback{ padding:16px; border:1px dashed var(--line); border-radius:8px; background:#fff; }

/* Centered spinner refined for modal report loading */
.spinner{ width:44px; height:44px; border-radius:50%; border:4px solid rgba(181,139,99,0.12); border-top-color:#b58b63; animation:spin .9s linear infinite; margin:36px auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.loader{ height:4px; background:#efe7df; border-radius:999px; overflow:hidden; position:relative; }
.loader::before{ content:""; position:absolute; left:-40%; top:0; width:40%; height:100%; background:#b58b63; animation:load 1s linear infinite; border-radius:999px; }
@keyframes load{ from{left:-40%;} to{left:100%} }

.btn{ background:#b58b63; color:#fff; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; min-height:44px; }
.btn.small{ min-height:36px; padding:8px 12px; }
.btn.large{ width:100%; padding:12px 16px; border-radius:999px; }
.btn.ghost{ background:transparent; color:#3a2f27; border:1px solid var(--line); }
.btn.icon{ width:36px; height:36px; border-radius:10px; font-size:20px; line-height:1; display:grid; place-items:center; padding:0; }
.btn.icon.dark{ color:#3a2f27; border-color:#d8cec6; }

.content-head{ padding:12px 16px; display:none; }

/* Hide the pick button on desktop explicitly; it should only show on small screens */
#pickBtn{ display:none; }

.picker, .modal{ border:none; border-radius:16px; width:min(920px, 92vw); padding:0; max-height:90dvh; overflow:hidden; }
.modal-header{ position:sticky; top:0; background:#fff; padding:12px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-body{ padding:16px; background:linear-gradient(#f6efe7, #f3ece4); }
/* Reserve space for report iframe while loading to avoid modal shrinking/flicker */
.modal-body .a4-wrap{ min-height:72dvh; display:flex; align-items:flex-start; justify-content:center; }

.picker .modal-body{ max-height:70dvh; padding:12px 16px; }
.picker .scroll-area{ max-height:calc(70dvh - 0px); overflow:auto; -webkit-overflow-scrolling:touch; }

.picker::backdrop, .modal::backdrop{ background:rgba(60,46,35,.22); backdrop-filter: blur(1.5px); }
.scroll-area{ overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

@media (max-width:980px){
  .page{ padding:12px; }
  .grid{ grid-template-columns:1fr; gap:12px; }
  .sidebar{ display:none; }
  .content-head{ display:block; padding:12px 16px 0 16px; }
  /* On mobile make the pick button visible */
  #pickBtn{ display:inline-flex; }
  .card-header{ padding:12px 16px; }
  .row{ padding:12px; min-height:52px; }
  .avatar{ width:40px; height:40px; border-radius:50%; }
  .profile .avatar{ width:56px; height:56px; }
  .topbar{ flex-direction:column; align-items:stretch; gap:8px; position: static; }
  .search{ justify-content:stretch; }
  .search-wrap{ max-width:none; width:100%; }
  .search-input{ max-width:none; width:100%; }
  .modal-body{ padding:12px; }
}

/* Mobile: prevent horizontal scrolling inside modal and left-align iframe */
@media (max-width:980px){
  .modal-body { padding-left:10px; padding-right:10px; }
  .a4-wrap{
    overflow-x: hidden; /* no horizontal scroll */
    overflow-y: auto;   /* allow vertical scroll */
    -webkit-overflow-scrolling: touch;
    display:flex;
    align-items:flex-start; /* top align content */
    justify-content:flex-start; /* left align to remove big left whitespace */
    padding-left:0; padding-right:0;
  }
  .report-frame{
    width:100%;
    min-width:0; /* prevent min-width from forcing overflow */
    box-sizing:border-box;
    display:block;
    margin:0; /* remove auto centering */
    height:72dvh;
  }
}

/* Center the pick button label on narrow screens */
@media (max-width:640px){
  #pickBtn{ justify-content:center; align-items:center; text-align:center; }
  #pickBtn .label{ display:inline-block; }
}

/* On narrow phones hide department and position chips in the history/profile card */
@media (max-width:640px){
  .history-card .chip-dept,
  .history-card .chip-pos{
    display:none;
  }
}

/* Accessibility helper: visually hide but keep readable by screen readers */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }