/* Employee portal & time clock. Builds on style-v47.css tokens and components. */
.emp-head{padding-bottom:20px}
.emp-head h1{margin-bottom:12px}
.emp-head .emp-today{font-size:17px;margin:0}
.emp-section{padding-top:10px!important;max-width:1180px}
.emp-narrow{max-width:640px}
.emp-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 28px}
.emp-toolbar a,.emp-toolbar button{font:600 14px Arial,sans-serif;color:var(--teal);background:transparent;border:1px solid #d8ccba;border-radius:28px;padding:11px 18px;cursor:pointer;text-decoration:none}
.emp-toolbar a[aria-current=page]{background:var(--teal);border-color:var(--teal);color:#fff}
.emp-toolbar .emp-logout{margin-left:auto}
.emp-role{display:inline-block;font:bold 11px Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#8a6530;border:1px solid var(--frame-gold-line);border-radius:20px;padding:4px 10px;vertical-align:middle}

.clock-card{position:relative;background:#fffdf8;border:1px solid var(--frame-gold-line);border-radius:14px;padding:34px;outline:1px solid var(--frame-gold-faint);outline-offset:-8px;margin-bottom:34px;display:grid;grid-template-columns:1fr minmax(260px,360px);gap:28px;align-items:center}
.clock-state{display:flex;align-items:center;gap:10px;font:30px Georgia,serif;color:var(--teal);margin:6px 0 10px}
.clock-state:before{content:"";width:14px;height:14px;border-radius:50%;background:#a3a39a;flex-shrink:0}
.clock-state.in:before{background:#2e8b57;box-shadow:0 0 0 6px rgba(46,139,87,.16)}
.clock-detail{margin:4px 0;font-size:17px}
.clock-detail strong{color:var(--teal)}
.clock-elapsed{font:44px Georgia,serif;color:var(--teal);letter-spacing:-1px;margin:6px 0 0;font-variant-numeric:tabular-nums}
.clock-button{width:100%;min-height:84px;border:0;border-radius:12px;font:bold 24px Arial,sans-serif;color:#fff;background:var(--teal);cursor:pointer;letter-spacing:.3px;box-shadow:0 10px 24px rgba(7,63,62,.18);touch-action:manipulation}
.clock-button.out{background:#b3566a}
.clock-button:hover{filter:brightness(1.08)}
.clock-button:disabled{opacity:.65;cursor:wait;filter:none}
.clock-button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.clock-card .form-feedback{grid-column:1/-1;margin:0;font-size:16px;border-radius:8px}
.form-feedback.error,.form-feedback.success{border-radius:8px}
.form-feedback strong{display:block;font-size:17px;margin-bottom:2px}

.week-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.week-nav h2{font-size:clamp(28px,3.4vw,40px);margin:0 auto 0 0}
.week-nav button,.chip-button{font:600 14px Arial,sans-serif;color:var(--teal);background:#fff;border:1px solid #d8ccba;border-radius:28px;padding:10px 16px;cursor:pointer}
.week-nav button:disabled{opacity:.4;cursor:default}
.emp-stats{grid-template-columns:repeat(3,1fr)!important}
.emp-stats span{font-size:13px}

.shift-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.shift-item{background:#fffdf8;border:1px solid var(--frame-gold-faint);border-radius:12px;padding:18px 20px;display:grid;grid-template-columns:150px 1fr auto;gap:6px 18px;align-items:center}
.shift-date{font:20px Georgia,serif;color:var(--teal)}
.shift-times{font-size:16px;font-variant-numeric:tabular-nums}
.shift-hours{font:22px Georgia,serif;color:var(--teal);text-align:right;white-space:nowrap}
.shift-notes{grid-column:1/-1}
.badge{display:inline-block;font:bold 11px Arial,sans-serif;letter-spacing:.8px;text-transform:uppercase;border-radius:20px;padding:5px 10px;margin:4px 6px 0 0}
.badge.open{background:#fff1d6;color:#7a4b00}
.badge.warn{background:#ffe1e1;color:#8b2739}
.badge.adjusted{background:var(--blush);color:#8b2f4c}
.badge.added{background:#e7ece3;color:var(--teal)}
.badge.in{background:#e4f3e9;color:#1d6b42}
.badge.muted{background:#eeeae2;color:#5f6461}
.adjust-note{font-size:14px;background:#fbf3f4;border-left:3px solid var(--pink);padding:10px 14px;border-radius:0 8px 8px 0;margin-top:8px}
.adjust-note p{margin:2px 0}

.emp-form{max-width:560px}
.emp-form .button{margin-top:10px;width:100%;font-size:16px;padding:17px}
.emp-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:14px}
.emp-links a{color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.emp-hint{font-size:13px;color:#5f6461;margin:-6px 0 12px}
.copy-box{display:flex;gap:8px;margin:12px 0}
.copy-box input{margin:0;font-size:13px}
.copy-box button{white-space:nowrap}

.emp-panel{background:#fffdf8;border:1px solid var(--frame-gold-faint);border-radius:14px;padding:26px;margin-bottom:26px}
.emp-panel h3{margin-top:0}
.emp-filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:0 14px;align-items:end}
.emp-filters .button{margin:15px 0;padding:13px 20px}
.quick-ranges{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 6px}
.export-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 0}
.export-row a{gap:10px}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e6ded0;border-radius:12px;background:#fff;margin:8px 0 26px}
.emp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.emp-table th{text-align:left;font:bold 11px Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#8a6530;background:#fbf8f1;padding:12px 14px;border-bottom:1px solid #e6ded0}
.emp-table td{padding:12px 14px;border-bottom:1px solid #f0ebe1;vertical-align:top;font-variant-numeric:tabular-nums}
.emp-table tr:last-child td{border-bottom:0}
.emp-table .num{text-align:right;white-space:nowrap}
.emp-table tr.flagged td{background:#fffaf0}
.row-actions{display:flex;flex-wrap:wrap;gap:6px}
.row-actions button,.row-actions select{font:600 12px Arial,sans-serif;padding:7px 11px;border-radius:20px;border:1px solid #d8ccba;background:#fff;color:var(--teal);cursor:pointer;width:auto;margin:0}
.row-actions button.danger{color:#8b2739;border-color:#e3b9c1}

.compare{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:14px 0}
.compare>div{background:#fff;border:1px solid #e6ded0;border-radius:12px;padding:16px 18px}
.compare>div.proposed{border-color:var(--pink);background:#fffafb}
.compare h4{margin:0 0 6px;font:bold 11px Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#8a6530}
.compare p{margin:4px 0}
.compare .hours{font:26px Georgia,serif;color:var(--teal)}
.code-input{display:block;letter-spacing:6px;font-size:22px!important;max-width:240px}
.selected-shift{background:#f6f2ea;border-radius:10px;padding:12px 16px;margin:10px 0;font-size:15px}
.audit-item{border-bottom:1px solid #eee5d6;padding:14px 0;font-size:14px}
.audit-item:last-child{border-bottom:0}
.audit-item strong{color:var(--teal)}
.emp-loading{opacity:.6}

@media(max-width:760px){
  .clock-card{grid-template-columns:1fr;padding:24px 20px;gap:18px}
  .clock-state{font-size:27px}
  .clock-elapsed{font-size:38px}
  .clock-button{min-height:92px;font-size:26px}
  .emp-stats{grid-template-columns:1fr 1fr!important}
  .emp-stats>div:last-child{grid-column:1/-1}
  .shift-item{grid-template-columns:1fr auto}
  .shift-date{grid-column:1/-1}
  .emp-filters{grid-template-columns:1fr 1fr}
  .emp-filters label:first-child,.emp-filters .button{grid-column:1/-1}
  .compare{grid-template-columns:1fr}
  .emp-toolbar .emp-logout{margin-left:0}
  .emp-panel{padding:20px 16px}
  .week-nav h2{width:100%}
}