:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#171717;background:#f3f4f6}*{box-sizing:border-box}body{margin:0}.app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{background:#111214;color:white;padding:22px;display:flex;flex-direction:column;gap:28px}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:46px;height:46px;border-radius:10px;background:#b71c1c;display:grid;place-items:center;font-weight:900}.brand strong,.brand span{display:block}.brand span{font-size:12px;color:#bdbdbd;margin-top:2px}nav{display:grid;gap:7px}.nav{border:0;background:transparent;color:#d6d6d6;text-align:left;padding:12px 14px;border-radius:8px;font-size:14px;cursor:pointer}.nav:hover,.nav.active{background:#b71c1c;color:white}.sidebar-footer{margin-top:auto;color:#888;font-size:12px}main{padding:28px;min-width:0}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h1,h2,h3,p{margin-top:0}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:800;color:#b71c1c;margin-bottom:6px}.header-actions{display:flex;align-items:center;gap:8px;color:#666;font-size:13px}.status-dot{width:8px;height:8px;border-radius:99px;background:#999}.hero-card{background:#171717;color:white;border-radius:16px;padding:26px;display:flex;justify-content:space-between;align-items:end}.hero-card p{color:#c8c8c8;margin-bottom:0}.hero-card .eyebrow{color:#ef9a9a}.clock{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:16px 0}.metrics article{background:white;border-radius:12px;padding:18px;border:1px solid #e5e7eb}.metrics span{display:block;color:#777;font-size:12px}.metrics strong{display:block;font-size:29px;margin-top:6px}.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.employee-grid{display:grid;grid-template-columns:minmax(380px,.85fr) minmax(420px,1.15fr);gap:16px}.panel{background:white;border:1px solid #e5e7eb;border-radius:14px;padding:20px}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}.panel-title h2,.panel-title h3{margin-bottom:0}.panel-title span{font-size:12px;color:#777}.row,.employee-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid #eee;align-items:center}.row:last-child,.employee-row:last-child{border-bottom:0}.row small,.employee-row small{display:block;color:#777;margin-top:3px}.employee-row-button{width:100%;background:transparent;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}.employee-row-button:hover{background:#fafafa}.employee-actions{display:flex;align-items:center;gap:10px}.open-record{font-size:12px;color:#777;font-weight:700}.pill{font-size:11px;font-weight:800;padding:5px 9px;border-radius:99px;background:#edf7ed;color:#2e7d32}.pill.offline{background:#fff4e5;color:#a15c00}.primary,.secondary,.danger{border:0;border-radius:8px;padding:10px 12px;font-weight:700;cursor:pointer}.primary{background:#b71c1c;color:#fff}.primary:hover{background:#971717}.secondary{background:#eceff1;color:#333}.danger{background:#fff0f0;color:#b71c1c;border:1px solid #efc4c4}.danger:hover{background:#ffe3e3}.view{display:none}.view.active{display:block}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid label{font-size:12px;font-weight:700;color:#444;display:grid;gap:6px}.form-grid input,.form-grid select,.search-row input{width:100%;border:1px solid #d6d9de;border-radius:8px;background:white;padding:10px 11px;font:inherit;color:#171717;outline:none}.form-grid input:focus,.form-grid select:focus,.search-row input:focus{border-color:#b71c1c;box-shadow:0 0 0 3px rgba(183,28,28,.08)}.form-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:3px;flex-wrap:wrap}.form-message{margin-top:12px;min-height:20px;font-size:13px}.form-message.success{color:#2e7d32;font-weight:700}.form-message.error{color:#b71c1c;font-weight:700}.search-row{margin-bottom:8px}.empty-state{padding:22px 0;color:#777;text-align:center;font-size:13px}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}.modal-card{position:relative;width:min(850px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.modal-header{display:flex;justify-content:space-between;align-items:flex-start}.icon-button{border:0;background:#eee;width:36px;height:36px;border-radius:99px;font-size:24px;cursor:pointer}.tab-bar{display:flex;gap:8px;border-bottom:1px solid #eee;margin:14px 0 18px}.tab{border:0;background:transparent;padding:10px 4px;margin-right:18px;font-weight:800;color:#777;cursor:pointer;border-bottom:3px solid transparent}.tab.active{color:#b71c1c;border-bottom-color:#b71c1c}.tab-panel{display:none}.tab-panel.active{display:block}.current-team-box{border:1px solid #e5e7eb;background:#fafafa;border-radius:10px;padding:12px;display:grid;gap:4px;align-content:center}.current-team-box span{font-size:11px;color:#777}.modal-open{overflow:hidden}@media(max-width:1100px){.employee-grid{grid-template-columns:1fr}}@media(max-width:1000px){.metrics{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:1fr}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:5;padding:12px}.brand{display:none}nav{display:flex;overflow:auto;gap:6px}.nav{white-space:nowrap;padding:10px}.sidebar-footer{display:none}main{padding:16px}.metrics{grid-template-columns:repeat(2,1fr)}.hero-card{align-items:flex-start;gap:18px;flex-direction:column}.clock{font-size:28px}.form-grid{grid-template-columns:1fr}.panel-title{align-items:flex-start;flex-direction:column}.modal{padding:8px}.modal-card{max-height:96vh}}
.device-help{background:#fff8e8;border:1px solid #f3ddb1;border-radius:10px;padding:12px 14px;margin-bottom:12px;color:#6e501b;font-size:13px;line-height:1.45}.device-row{display:grid;grid-template-columns:1fr auto;gap:14px;width:100%;padding:14px 0;border:0;border-bottom:1px solid #eee;background:transparent;text-align:left;font:inherit;color:inherit}.device-row:last-child{border-bottom:0}.device-row-button{cursor:pointer}.device-row-button:hover{background:#fafafa}.device-main small{display:block;color:#777;margin-top:4px}.device-row-actions{display:flex;align-items:center;gap:10px}.device-modal-card{width:min(900px,100%)}.full-span{grid-column:1/-1}.device-permissions{border:1px solid #e5e7eb;border-radius:10px;padding:14px;background:#fafafa;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.device-permissions h3{grid-column:1/-1;margin-bottom:2px}.check-line{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;justify-content:flex-start;gap:8px!important;font-weight:600!important}.check-line input{width:auto!important;margin:0}.team-access-box{border:1px solid #e5e7eb;border-radius:10px;padding:14px}.team-access-title{display:grid;gap:3px;margin-bottom:10px}.team-access-title span{font-size:12px;color:#777}.team-checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hidden-section{display:none!important}.activation-panel{display:grid;gap:14px}.activation-code-box{display:grid;place-items:center;text-align:center;padding:24px;border:2px dashed #b71c1c;border-radius:14px;background:#fff8f8}.activation-code-box span{font-size:12px;color:#777;text-transform:uppercase;letter-spacing:.1em}.activation-code-box strong{font-size:40px;letter-spacing:.14em;margin:8px 0;color:#b71c1c;font-variant-numeric:tabular-nums}.activation-code-box small{color:#777}.security-note{background:#f7f7f7;border:1px solid #e5e7eb;border-radius:10px;padding:12px;font-size:13px;color:#555;line-height:1.45}button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:760px){.device-permissions,.team-checkbox-grid{grid-template-columns:1fr}.activation-code-box strong{font-size:30px}}

#modal-face-status { color: #b71c1c; }
#modal-face-detail { display:block; color:#777; margin-top:4px; font-weight:400; }

.attendance-note {
  margin: 8px 0 14px;
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #f0d58c;
  border-radius: 8px;
  color: #6f5200;
  font-size: 12px;
}
.attendance-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}
.attendance-row:last-child { border-bottom: 0; }
.attendance-row small { display:block; color:#777; margin-top:4px; }
.attendance-row-right { text-align:right; }
.event-pill {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  background: #171717;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.attendance-toolbar {
  align-items: flex-end;
}
.attendance-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.attendance-toolbar-actions input {
  border: 1px solid #d6d9de;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
}
.attendance-summary-strip {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  color: #555;
  font-size: 13px;
}
.attendance-summary-strip strong {
  color: #171717;
  font-size: 17px;
}
.table-scroll {
  overflow-x: auto;
}
.attendance-control-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1080px;
  font-size: 12px;
}
.attendance-control-table th {
  text-align: left;
  color: #666;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 10px 8px;
  border-bottom: 2px solid #ececec;
  white-space: nowrap;
}
.attendance-control-table td {
  padding: 11px 8px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  white-space: nowrap;
}
.attendance-control-table td:first-child {
  min-width: 210px;
  white-space: normal;
}
.attendance-control-table td:first-child small {
  display: block;
  color: #777;
  margin-top: 3px;
}
.row-corrected {
  background: #fffdf2;
}
.correction-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff0b3;
  color: #795500;
  font-size: 10px;
  font-weight: 900;
}
.pill.warning {
  background: #fff4e5;
  color: #9a5d00;
}
.mini-button {
  padding: 7px 9px;
  font-size: 11px;
}
.compact-modal {
  max-width: 650px;
}
.full-span {
  grid-column: 1 / -1;
}
.form-grid textarea {
  width: 100%;
  border: 1px solid #d6d9de;
  border-radius: 8px;
  background: white;
  padding: 10px 11px;
  font: inherit;
  resize: vertical;
}
@media(max-width:760px) {
  .attendance-toolbar {
    align-items: flex-start;
  }
  .attendance-toolbar-actions {
    width: 100%;
  }
}

.recognition-qa-title { align-items: flex-end; }
.recognition-qa-actions { display: flex; align-items: center; gap: 8px; }
.recognition-qa-actions select {
  border: 1px solid #d6d9de;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  font: inherit;
}
.recognition-metrics { margin-top: 16px; }
.qa-rule-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 4px 0 16px;
  padding: 10px 12px;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fafafa;
  color: #666;
  font-size: 12px;
}
.qa-rule-strip strong { color: #111; }
.qa-table { min-width: 940px; }

.report-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.report-tab {
  border: 1px solid #d9dce1;
  border-radius: 9px;
  padding: 10px 14px;
  background: #fff;
  color: #555;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.report-tab.active {
  background: #171717;
  color: #fff;
  border-color: #171717;
}
.report-tab-panel {
  display: none;
}
.report-tab-panel.active {
  display: block;
}
.payroll-title {
  align-items: flex-end;
}
.payroll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.payroll-actions label {
  display: grid;
  gap: 4px;
  color: #666;
  font-size: 11px;
}
.payroll-actions input,
.payroll-config-row input {
  border: 1px solid #d6d9de;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  background: #fff;
}
.payroll-metrics {
  margin-top: 16px;
}
.payroll-config-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: end;
  margin: 4px 0 18px;
  padding: 12px;
  border: 1px solid #ececec;
  background: #fafafa;
  border-radius: 10px;
}
.payroll-config-row > div {
  display: grid;
  gap: 4px;
}
.payroll-config-row span {
  font-size: 11px;
  color: #666;
}
.payroll-config-row small {
  flex-basis: 100%;
  color: #777;
}
.report-subsection {
  margin-top: 24px;
}
.subsection-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}
.subsection-title h3 {
  margin: 0;
  font-size: 16px;
}
.subsection-title small {
  color: #777;
}
.overtime-title {
  align-items: center;
}
.payroll-summary-table {
  min-width: 1180px;
}
.team-hours-table {
  min-width: 850px;
}
.overtime-table {
  min-width: 960px;
}
.dtr-table {
  min-width: 1180px;
}
.attendance-control-table td small {
  display: block;
  color: #777;
  margin-top: 2px;
}
.wrap-cell {
  white-space: normal !important;
  min-width: 180px;
  line-height: 1.35;
}
.row-review {
  background: #fffdf2;
}
.review-text {
  color: #8b5c00;
}
.ok-text {
  color: #2e7d32;
  font-weight: 700;
}
@media(max-width:900px) {
  .payroll-title {
    align-items: flex-start;
  }
  .payroll-actions {
    width: 100%;
  }
  .report-tab-bar {
    overflow-x: auto;
  }
}

/* V9.1 payroll display hotfix */
.payroll-summary-table {
  min-width: 1450px;
}

/* V10 Deployment & Productivity */
.deployment-title,
.productivity-range-title {
  align-items: flex-end;
}
.deployment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.deployment-actions label {
  display: grid;
  gap: 4px;
  color: #666;
  font-size: 11px;
}
.deployment-actions input {
  border: 1px solid #d6d9de;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  font: inherit;
}
.deployment-metrics,
.productivity-range-metrics {
  margin-top: 16px;
}
.deployment-table {
  min-width: 1500px;
}
.productivity-range-panel {
  margin-top: 18px;
}
.productivity-range-table {
  min-width: 1350px;
}
.checkbox-line {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.checkbox-line input {
  width: auto !important;
}
@media(max-width:900px) {
  .deployment-title,
  .productivity-range-title {
    align-items: flex-start;
  }
  .deployment-actions {
    width: 100%;
  }
}

/* V11 Management Dashboard */
.management-hero {
  align-items: center;
}
.management-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.management-hero-actions input,
.management-period-actions select {
  border: 1px solid #d6d9de;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  font: inherit;
}
.management-production-metrics {
  margin-top: 12px;
}
.management-grid {
  margin-top: 16px;
}
.management-team-table {
  min-width: 760px;
}
.management-activity-list {
  display: grid;
  gap: 9px;
}
.management-activity-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 11px 12px;
  background: #fff;
}
.management-activity-card.warning {
  background: #fffaf0;
}
.management-activity-card.good {
  background: #f5fbf5;
}
.management-activity-card small {
  display: block;
  color: #777;
  margin-top: 2px;
}
.management-activity-values {
  display: flex;
  gap: 16px;
  text-align: right;
}
.management-activity-values span {
  display: grid;
  gap: 2px;
  color: #777;
  font-size: 11px;
}
.management-activity-values strong {
  color: #111;
  font-size: 13px;
}
.management-exception {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.management-exception:last-child {
  border-bottom: 0;
}
.management-exception small {
  display: block;
  color: #777;
  margin-top: 2px;
  line-height: 1.35;
}
.management-notes {
  display: grid;
  gap: 8px;
}
.management-note-item {
  border: 1px solid #ececec;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fafafa;
  line-height: 1.4;
}
.management-period-panel {
  margin-top: 16px;
}
.management-period-title {
  align-items: flex-end;
}
.management-period-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.management-period-metrics {
  margin-top: 14px;
}
.management-trend-table {
  min-width: 980px;
}
.management-team-range-table {
  min-width: 880px;
}
.management-period-panel h4 {
  margin: 10px 0 8px;
}
.management-legacy {
  display: none;
}

@media(max-width:1000px) {
  .management-activity-card {
    grid-template-columns: 1fr;
  }
  .management-activity-values {
    text-align: left;
    flex-wrap: wrap;
  }
  .management-period-title {
    align-items: flex-start;
  }
}

@media print {
  .sidebar,
  .nav,
  .header-actions,
  #refresh-management,
  #print-management,
  #refresh-management-range,
  #export-management,
  #management-date,
  #management-range-days {
    display: none !important;
  }

  main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #view-dashboard {
    display: block !important;
  }

  .panel,
  .hero-card,
  .metrics article {
    break-inside: avoid;
    box-shadow: none !important;
  }

  body {
    background: #fff !important;
  }
}

/* V12 Secure Access Control */
.auth-gate {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center; padding: 24px;
  background: #f2f3f5;
}
.auth-gate.hidden { display: none; }
.auth-card {
  width: min(480px, 100%);
  border-radius: 16px; background: #fff;
  border: 1px solid #dedfe3; padding: 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-brand > div:last-child { display: grid; gap: 2px; }
.auth-brand span { color: #666; font-size: 12px; }
.auth-panel.hidden { display: none; }
.auth-panel h1 { margin: 4px 0 6px; }
.auth-panel > p:not(.eyebrow) { color: #666; margin: 0 0 18px; line-height: 1.45; }
.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; }
.auth-form input { border: 1px solid #d4d7dc; border-radius: 9px; padding: 11px 12px; font: inherit; }
.signed-in-user { font-size: 11px; color: #555; max-width: 250px; }
.compact-button { padding: 7px 10px !important; }
.access-current-user {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.access-current-user > div {
  border: 1px solid #e7e8eb; border-radius: 10px; padding: 12px;
  display: grid; gap: 3px;
}
.access-current-user span, .access-current-user small { color: #777; font-size: 11px; }
.access-user-form { margin-bottom: 18px; }
.access-users-table { min-width: 980px; }
.access-users-table select {
  border: 1px solid #d7d9dd; border-radius: 7px; padding: 7px; background: #fff;
}
.access-user-actions { white-space: nowrap; }
.access-role-matrix { display: grid; gap: 10px; }
.access-role-card { border: 1px solid #e6e7e9; border-radius: 10px; padding: 12px; }
.access-role-card > div:first-child { margin-bottom: 9px; }
.access-role-card small { display: block; color: #777; margin-top: 2px; }
.access-permission-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.access-permission-chips span {
  border: 1px solid #dedfe2; border-radius: 999px;
  background: #f7f7f8; padding: 4px 8px; font-size: 10px;
}
.access-audit-table { min-width: 1100px; }
.muted { color: #888; font-size: 11px; }
@media(max-width:800px) {
  .access-current-user { grid-template-columns: 1fr; }
  .signed-in-user { display: none; }
}