/* Employee check-in and attendance management share records, with separate entry layouts. */
.attendance-personal-page #attForm {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:900px;margin:12px 0}
.attendance-personal-page #attForm .attendance-submit-state {grid-column:1/-1;margin:0}
.attendance-personal-page #attForm .attendance-submit-state:empty {display:none}
.attendance-personal-page .attendance-mobile-actions {grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.attendance-personal-page .attendance-mobile-action {display:grid;gap:4px;min-height:64px;padding:10px;border:1px solid #d5e1ef;border-radius:6px;background:#f7f9fc;color:#23466c;text-align:left}
.attendance-personal-page .attendance-mobile-action small {color:#637991;font-weight:400}
.attendance-personal-page .attendance-mobile-action.selected {border-color:#175fc6;background:#edf4ff;box-shadow:inset 0 0 0 1px #175fc6}
.attendance-personal-page #attForm .attendance-project-wrap {grid-column:1/-1;display:grid;gap:6px}
.attendance-personal-page #attForm .attendance-project-wrap.hidden {display:none}
.attendance-personal-page #attForm .attendance-photo-picker {grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.attendance-personal-page #attForm .attendance-photo-picker input {flex:1;min-width:160px}
.attendance-personal-page #attForm > input {min-width:0}
.attendance-personal-page #attForm > button[type=submit] {grid-column:1/-1;justify-self:end;min-width:160px;width:auto}
.attendance-personal-page .attendance-personal-summary {display:flex;gap:10px 24px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid #dce5ef;border-radius:6px;background:#f7f9fc;font-size:13px}
.attendance-personal-page .attendance-personal-summary strong {margin-left:5px;color:#175fc6;font-size:18px}
.attendance-personal-page .attendance-photo-preview:empty {display:none}
.attendance-personal-page :is(.attendance-photo-state,.attendance-geo-note,.attendance-site-note) {margin:8px 0;font-size:12px}
.attendance-personal-page .attendance-filter-strip {grid-template-columns:repeat(2,minmax(130px,1fr)) repeat(2,minmax(100px,1fr)) repeat(3,auto)}
.attendance-personal-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.attendance-personal-header h3{margin:0}
.attendance-personal-header #attendanceRecordsOpen{margin-left:auto;width:auto;flex:none}
.attendance-today-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0}
.attendance-today-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 12px;padding:10px 12px;border:1px solid #dce5ef;border-radius:6px;background:#f7f9fc;font-size:13px;min-width:0}
.attendance-today-item>strong{grid-row:1/3;color:#23466c}
.attendance-today-item small{font-size:12px;color:#637991}
.attendance-today-status{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px}
.attendance-today-item .attendance-today-exception{color:#a33a24}
.attendance-records-modal{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.55);box-sizing:border-box}
.attendance-records-modal[hidden]{display:none!important}
#attendanceRecordsModal .attendance-records-panel{display:flex;flex-direction:column;width:min(1200px,100%);height:calc(100vh - 48px);height:calc(100dvh - 48px);min-height:0;min-width:0;margin:0;padding:16px;gap:10px;overflow:hidden;background:#fff;border-radius:10px;box-sizing:border-box}
#attendanceRecordsModal .attendance-records-panel>*{flex-shrink:0;min-width:0}
.attendance-records-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.attendance-records-header h3{margin:0;font-size:18px}
.attendance-records-header p{margin:4px 0 0;font-size:12px}
.attendance-records-header button{width:auto;flex:none}
#attendanceRecordsModal .attendance-filter-strip{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr)) repeat(2,minmax(105px,1fr)) repeat(3,auto);align-items:end;gap:8px;padding:0;margin:0}
#attendanceRecordsModal .attendance-filter-strip>*{min-width:0;width:auto;margin:0;box-sizing:border-box}
#attendanceRecordsModal .attendance-filter-divider{display:none}
#attendanceRecordsModal .attendance-list-toolbar{margin:0}
#attendanceRecordsModal .app-list-sort-summary{flex-wrap:wrap;margin:0}
#attendanceRecordsModal .attendance-records-panel>.table-scroll{flex:1;min-height:70px!important;height:auto!important;max-height:none;overflow:auto;overscroll-behavior:contain}
#attendanceRecordsModal #attendanceMainTable{table-layout:fixed;width:100%;min-width:820px;max-width:none;margin:0}
#attendanceRecordsModal #attendanceMainTable th{position:sticky;top:0;z-index:1;background:#f7f9fc}
#attendanceRecordsModal #attendanceMainTable th:nth-child(1){width:22%}
#attendanceRecordsModal #attendanceMainTable th:nth-child(2){width:15%}
#attendanceRecordsModal #attendanceMainTable th:nth-child(3){width:30%}
#attendanceRecordsModal #attendanceMainTable :is(td,th){white-space:normal;overflow-wrap:anywhere}
#attendanceRecordsModal .customer-fixed-pagination{flex:none;margin:0;padding-top:0}
#content>#attendancePhotoModal{z-index:1260}
@media screen and (max-width:1100px){
  .attendance-today-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attendance-records-modal{padding:12px}
  #attendanceRecordsModal .attendance-records-panel{height:calc(100vh - 24px);height:calc(100dvh - 24px);padding:12px;gap:8px}
  #attendanceRecordsModal .attendance-filter-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media screen and (max-width:768px){
  .attendance-today-item{padding:8px;font-size:12px;gap:4px 8px}
  .attendance-personal-header #attendanceRecordsOpen{margin-left:0}
  #attendanceRecordsModal .attendance-filter-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #attendanceRecordsModal .attendance-filter-strip :is(input,select,button){min-height:38px}
  #attendanceRecordsModal #attendanceMainTable{min-width:0;table-layout:auto}
}
/* Personal desktop check-in stays within the window; management and mobile retain their layout. */
@media screen and (min-width:769px) {
  body.pc-ui-preview:not(.mobile-ui-active):has(#content > .attendance-personal-page) {overflow:hidden}
  body.pc-ui-preview:not(.mobile-ui-active) .main-view:has(> #content > .attendance-personal-page) {height:100vh;height:100dvh;min-height:0;grid-template-rows:64px minmax(0,1fr)}
  body.pc-ui-preview:not(.mobile-ui-active) .main-view > #content:has(> .attendance-personal-page) {display:flex;flex-direction:column;min-height:0;overflow:hidden;padding-top:12px;padding-bottom:16px;gap:10px}
  body.pc-ui-preview:not(.mobile-ui-active) #content:has(> .attendance-personal-page) > .cw-attendance-toolbar {flex:none;margin:0}
  body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-personal-page {display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;margin:0;gap:8px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page > * {flex-shrink:0}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page .attendance-personal-header {display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-header > h3 {margin:0;font-size:16px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-header .attendance-personal-summary {padding:5px 10px;gap:8px 16px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-header .attendance-summary-line {margin:0;font-size:12px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page .attendance-checkin-workspace {flex:1;min-height:90px;overflow:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:4px;padding-right:4px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page #attForm {grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;max-width:none;margin:0;gap:8px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page .attendance-mobile-action {min-height:52px;padding:6px 10px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page #attForm .attendance-photo-picker {padding:5px 10px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page #attForm > button[type=submit] {grid-column:auto;margin:0;min-height:34px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page :is(.attendance-photo-state,.attendance-geo-note,.attendance-site-note) {margin:0;line-height:1.5}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page .attendance-site-note {padding:5px 10px}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page > .table-scroll {flex:1;min-height:76px!important;height:auto!important;max-height:none;overflow:auto;overscroll-behavior:contain}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page #attendanceMainTable th {position:sticky;top:0;z-index:1;background:#f7f9fc}
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page > .customer-fixed-pagination {margin:0;padding-top:0}
}
@media(max-width:768px), (hover:none) and (pointer:coarse) and (max-width:1024px) {
  body.mobile-ui-active .attendance-personal-page #attForm {grid-template-columns:minmax(0,1fr);gap:10px;max-width:none}
  body.mobile-ui-active .attendance-personal-page .attendance-mobile-actions {grid-template-columns:repeat(2,minmax(0,1fr))}
  body.mobile-ui-active .attendance-personal-page #attForm > button[type=submit] {width:100%;min-height:44px}
  body.mobile-ui-active .attendance-personal-page .attendance-personal-summary {gap:8px 14px;font-size:12px;padding:10px}
  body.mobile-ui-active .attendance-personal-page .attendance-personal-summary strong {font-size:16px}
  body.mobile-ui-active .attendance-personal-page #attForm .attendance-photo-clear {width:auto;min-height:36px;padding:6px 10px}
  body.mobile-ui-active .attendance-management-page .attendance-filter-strip {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.mobile-ui-active .attendance-management-page .attendance-filter-strip>* {min-width:0;width:100%;box-sizing:border-box}
  body.mobile-ui-active .attendance-management-page .attendance-filter-divider {display:none}
  body.mobile-ui-active #content .attendance-page #attendanceMainTable,
  body.mobile-ui-active #content .attendance-page #attendanceMainTable > tbody {width:100%;min-width:0;max-width:100%}
  body.mobile-ui-active .mobile-system-shell .attendance-page .table-scroll > table tbody > tr:not(.attendance-empty-row) {grid-template-columns:repeat(2,minmax(0,1fr))}
  body.mobile-ui-active .mobile-system-shell .attendance-page .table-scroll > table tbody > tr:not(.attendance-empty-row) > td {width:auto;max-width:100%;min-width:0;white-space:normal}
  body.mobile-ui-active .mobile-system-shell .attendance-page .table-scroll > table tbody > tr:not(.attendance-empty-row) > td:nth-child(8) {white-space:normal;overflow-wrap:anywhere}
  body.mobile-ui-active .cw-toolbar.cw-attendance-toolbar {display:flex!important;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;margin-bottom:10px;border:1px solid #dce5ef;background:#fff;border-radius:8px}
  body.mobile-ui-active .cw-attendance-toolbar button {min-height:44px}
  body.mobile-ui-active:has(.attendance-page) .cw-modal[data-workflow-kind="hrRequests"],
  body.mobile-ui-active:has(.attendance-page) .cw-modal[data-workflow-kind="attendanceMonths"] {display:flex!important;position:fixed;inset:0;z-index:160;align-items:center;justify-content:center;padding:8px;background:#15263b88;box-sizing:border-box;color:#172c43}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-shell {width:100%;max-height:calc(100dvh - 16px);display:flex;flex-direction:column;background:#fff;border-radius:10px;min-width:0;overflow:hidden}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-header {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid #dce5ef}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-header h2 {font-size:18px;margin:0}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-header > button {flex:0 0 auto;width:auto;min-width:60px;background:#fff;border:1px solid #d4e0ee;color:#175fc6}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-kicker {display:none}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-body {min-height:0;min-width:0;overflow:auto;padding:12px;overscroll-behavior:contain}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-message:not(:empty) {padding:10px 12px;flex-shrink:0}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-error {color:#b42318;background:#fff5f3}
  body.mobile-ui-active:has(.attendance-page) .cw-modal :is(.cw-form,.cw-detail) {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:12px 0}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-field {display:grid;gap:6px;min-width:0;font-size:14px;margin:0}
  body.mobile-ui-active:has(.attendance-page) .cw-modal :is(input:not([type=checkbox]),select,textarea) {box-sizing:border-box;width:100%;min-width:0;min-height:44px;font-size:16px}
  body.mobile-ui-active:has(.attendance-page) .cw-modal :is(.cw-actions,.cw-footer) {display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
  body.mobile-ui-active:has(.attendance-page) .cw-modal :is(.cw-actions,.cw-footer) button {width:auto}
  body.mobile-ui-active:has(.attendance-page) .cw-modal button {min-height:44px;white-space:normal}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-table-wrap {max-width:100%;overflow:auto}
  body.mobile-ui-active:has(.attendance-page) .cw-modal :is(td,th) {padding:8px;white-space:normal;overflow-wrap:anywhere}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-filters {display:flex;flex-wrap:wrap;gap:8px}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-filters>* {flex:1 1 120px;min-width:0}
  body.mobile-ui-active:has(.attendance-page) .cw-modal .cw-detail dd {margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
}

/* Short desktop windows reserve space for every paging control. */
@media screen and (min-width:769px) and (max-height:700px) {
  body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-personal-page {
    padding:12px;
    gap:6px;
  }
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-page .attendance-checkin-workspace {
    min-height:72px;
  }
  body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-personal-page .attendance-filter-strip {
    padding:4px 8px;
    gap:6px;
  }
  body.pc-ui-preview:not(.mobile-ui-active) .attendance-personal-header .attendance-personal-summary {
    padding:4px 8px;
  }
}

/* Desktop personal attendance opens records directly; check-in remains in the mobile view. */
@media screen and (min-width:769px) {
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline .attendance-desktop-note {margin-left:auto;font-size:12px;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline .attendance-filter-strip {display:grid;grid-template-columns:repeat(2,minmax(120px,1fr)) repeat(2,minmax(100px,1fr)) repeat(3,auto);align-items:end;gap:8px;padding:0;margin:0;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline .attendance-filter-strip>* {min-width:0;width:auto;margin:0;box-sizing:border-box;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline .attendance-filter-divider {display:none;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline .attendance-list-toolbar {margin:0;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline #attendanceMainTable {table-layout:fixed;width:100%;min-width:700px;max-width:none;margin:0;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline #attendanceMainTable th:nth-child(1) {width:22%;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline #attendanceMainTable th:nth-child(2) {width:15%;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline #attendanceMainTable th:nth-child(3) {width:30%;}
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline #attendanceMainTable :is(td,th) {white-space:normal;overflow-wrap:anywhere;}
}
@media screen and (min-width:769px) and (max-width:1200px) {
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline .attendance-filter-strip {grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media screen and (min-width:769px) {
 body.pc-ui-preview:not(.mobile-ui-active) #content > .attendance-records-inline .attendance-today-summary {grid-template-columns:repeat(4,minmax(0,1fr));}
}