/* Seeded from aws-app/frontend/css/style.css's custom-property palette for
   visual consistency across SwiftCheck products — no runtime dependency
   between the two apps, this file is just a copy of the token values. */
:root{
  --bg:#33A6D6; --surface:#f4fafd; --surface-2:#e1f0f8;
  --ink:#0e2738; --ink-soft:#23516c; --ink-faint:#2c5470;
  --rule:#bfe0ee; --accent:#0f5c86; --accent-ink:#0b4763; --accent-soft:#d3edf7;
  --present:#0f5c86; --departed:#4c7891; --departed-soft:#dceaf2;
  --error:#b6473c; --error-soft:#f6ddd9;
  --success:#2f7d52;
  --shadow: 0 1px 2px rgba(10,40,60,.14), 0 8px 24px rgba(10,40,60,.12);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Avenir Next","Avenir Next LT Pro",Avenir,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5; font-weight:400;
}
h1,h2,h3{font-weight:500; margin:0;}

.dash-page{max-width:1000px; margin:0 auto; padding:32px 24px 80px;}
.dash-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px;}
.dash-header h1{font-size:1.5rem;}
.dash-user{font-size:.85rem; color:var(--ink-faint);}

nav.dash-tabs{display:flex; gap:8px; margin:20px 0 28px; border-bottom:1px solid var(--rule); flex-wrap:wrap;}
nav.dash-tabs button{
  background:none; border:none; padding:10px 4px; margin-right:16px; font-size:.95rem;
  color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; border-radius:6px 6px 0 0;
  transition:color .12s ease, border-color .12s ease, background-color .1s ease, transform .08s ease;
}
nav.dash-tabs button:hover{color:var(--accent-ink);}
nav.dash-tabs button.active{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600;}
.dash-section{display:none;}
.dash-section.active{display:block;}

.table-wrap{overflow-x:auto; border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); margin-top:16px;}
table{width:100%; border-collapse:collapse; background:var(--surface); font-size:.92rem; min-width:480px;}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule);}
thead th{background:var(--surface-2); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
tbody tr:last-child td{border-bottom:none;}
tfoot td{background:var(--surface-2); border-top:2px solid var(--rule); border-bottom:none;}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:8px;}
.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:.78rem; color:var(--ink-soft);}
input,select{padding:9px 12px; border-radius:8px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); font-size:.92rem;}

.btn-sm{
  padding:9px 16px; border-radius:8px; border:none; background:var(--accent); color:#fff;
  font-weight:600; cursor:pointer; font-size:.88rem;
  transition:filter .12s ease, transform .08s ease, background-color .15s ease, opacity .15s ease;
}
.btn-sm.outline{background:transparent; border:1px solid var(--rule); color:var(--ink-soft);}
.btn-sm.danger{background:var(--error);}

.btn-sm, nav.dash-tabs button{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn-sm:hover:not(:disabled), nav.dash-tabs button:hover{filter:brightness(1.08);}
.btn-sm.pressed, .btn-sm:active:not(:disabled){transform:scale(0.94); filter:brightness(0.85);}
nav.dash-tabs button.pressed, nav.dash-tabs button:active{background:var(--surface-2); transform:scale(0.97);}
.btn-sm:disabled, .btn-sm.is-loading{opacity:.55; cursor:wait; pointer-events:none;}
.btn-sm.flash-success{background:var(--success) !important; color:#fff !important; filter:none !important;}
.btn-sm.flash-error{background:var(--error) !important; color:#fff !important; filter:none !important;}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:20px; box-shadow:var(--shadow); margin-bottom:20px; max-width:480px;}
.card.wide{max-width:100%;}
.card h3{font-size:1rem; margin-bottom:14px;}
.card .field{margin-bottom:12px;}
.card input, .card select{width:100%;}

.pill{display:inline-block; font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:999px;}
.pill.present{background:var(--accent-soft); color:var(--accent-ink);}
.pill.departed{background:var(--departed-soft); color:var(--departed);}

.hidden{display:none !important;}
a{color:var(--accent-ink);}

/* Custom period-start calendar (report-calendar-popup) - the native date
   input can't grey out an irregular pattern like semi-monthly's 1st/16th,
   so non-"plain monthly" pay periods use this instead. */
.mini-cal-popup{background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow); padding:12px; width:260px; margin-bottom:16px;}
.mini-cal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:.85rem;}
.mini-cal-header button{padding:4px 10px;}
.mini-cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;}
.mini-cal-dow{font-size:.7rem; text-align:center; color:var(--ink-faint); font-weight:600; padding:2px 0;}
.mini-cal-day{padding:7px 0; border:none; border-radius:6px; background:transparent; cursor:pointer; font-size:.85rem; color:var(--ink);}
.mini-cal-day:hover:not(:disabled){background:var(--surface-2);}
.mini-cal-day.selected{background:var(--accent); color:#fff; font-weight:700;}
.mini-cal-day:disabled{color:var(--rule); cursor:not-allowed;}

/* Clock in/out card on employee.html */
.clock-card{text-align:center; max-width:420px; margin:0 auto 24px;}
.clock-status{font-size:1.4rem; font-weight:600; margin-bottom:4px;}
.clock-status.in{color:var(--accent-ink);}
.clock-status.out{color:var(--ink-faint);}
.clock-since{font-size:.85rem; color:var(--ink-faint); margin-bottom:20px;}
.clock-toggle{
  font-size:1.3rem; font-weight:600; padding:20px 32px; border-radius:14px; border:none;
  cursor:pointer; width:100%; color:#fff; background:var(--accent);
  transition:filter .12s ease, transform .08s ease, opacity .15s ease;
}
.clock-toggle.out{background:var(--departed);}
.clock-toggle:hover:not(:disabled){filter:brightness(1.08);}
.clock-toggle:active:not(:disabled){transform:scale(0.98);}
.clock-toggle:disabled{opacity:.55; cursor:wait;}
.manual-entry summary{cursor:pointer; font-size:.85rem; color:var(--ink-soft); margin-top:16px;}
.manual-entry .field{margin-top:12px;}

/* Time-of-day entry rendered as one visual control: a plain text box for
   H:MM plus an AM/PM dropdown, instead of a native <input type="time">
   (whose AM/PM segment silently leaves the field empty until explicitly
   set, which was blocking shift submission without any visible error). */
.time-input{display:flex; border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--surface);}
/* .card input/select both get width:100% from the rule above — without an
   explicit override here the <select> also tries to fill the whole row,
   squeezing the text box down to nothing. flex:0 0 auto + width:auto sizes
   it to its own content (AM/PM) instead. */
.time-input input{border:none; border-radius:0; flex:1 1 auto; width:auto; min-width:0; background:transparent;}
.time-input input:focus{outline:none;}
.time-input select{border:none; border-left:1px solid var(--rule); border-radius:0; background:var(--surface-2); padding:9px 8px; flex:0 0 auto; width:auto;}

/* Shown only when window.APP_CONFIG.isTestEnvironment is true (env-banner.js) */
.env-banner{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:var(--error); color:#fff; text-align:center;
  font-weight:700; letter-spacing:.04em; font-size:.8rem;
  padding:7px 12px;
}
body.has-env-banner{padding-top:34px;}