:root{
  --green:#006344;--green2:#0b7959;--soft:#e9f4ef;--dark:#17231f;--bg:#f3f6f5;
  --line:#d7e0dc;--muted:#66736d;--red:#b53d3d;--amber:#a66a00;--blue:#245b88;
  --white:#fff;--shadow:0 8px 24px rgba(18,42,33,.08)
}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 Arial,sans-serif;background:var(--bg);color:#1e2925}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.app{display:grid;grid-template-columns:255px 1fr;min-height:100vh}
.side{background:var(--dark);color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px}.brand img{width:145px;max-height:44px;object-fit:contain;background:#fff;border-radius:8px;padding:5px}
.brand-fallback{font-size:18px;font-weight:800}.role-box{border:1px solid #33483f;background:#20332b;padding:12px;border-radius:12px;margin-bottom:15px}
.role-box label{font-size:11px;text-transform:uppercase;color:#b9c7c1}.role-box select{width:100%;margin-top:6px;background:#fff;border:0;border-radius:8px;padding:9px}
.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;color:#d7e0dc;text-align:left;padding:11px 12px;border-radius:9px;font-weight:700}
.nav button:hover,.nav button.active{background:#0b6d50;color:#fff}.side-note{font-size:12px;color:#9eb0a8;margin:18px 8px}
.main{min-width:0}.top{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:5}
.top h1{font-size:22px;margin:0}.top p{margin:2px 0 0;color:var(--muted)}.top-actions{display:flex;gap:8px}
.content{padding:24px;max-width:1500px;margin:auto}.view{display:none}.view.active{display:block}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.stat{padding:18px}.stat small{color:var(--muted);display:block}.stat strong{font-size:29px;display:block;margin-top:5px}
.panel{padding:18px;margin-top:16px}.panel-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:14px}.panel-head h2,.panel-head h3{margin:0}.panel-head p{margin:3px 0 0;color:var(--muted)}
.primary,.secondary,.danger,.ghost,.small{border-radius:9px;padding:9px 13px;border:1px solid transparent;font-weight:700}
.primary{background:var(--green);color:#fff}.primary:hover{background:var(--green2)}.secondary{background:#fff;border-color:var(--line);color:var(--dark)}
.danger{background:var(--red);color:#fff}.ghost{background:transparent;border-color:var(--line)}.small{padding:6px 9px;font-size:12px;background:#fff;border-color:var(--line)}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:13px}.filters input,.filters select{min-width:170px}
input,select,textarea{border:1px solid #cbd7d2;border-radius:9px;padding:10px;background:#fff;width:100%}select:disabled,input:disabled{background:#eef2f0;color:#7b8781}textarea{resize:vertical}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:11px}table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:12px;text-transform:uppercase;color:var(--muted);background:#f7f9f8}
tr:last-child td{border-bottom:0}.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}
.badge.draft{background:#fff1d6;color:#815100}.badge.submitted{background:#e4f2ff;color:#245b88}.badge.current{background:#e4f5ec;color:#08704f}
.badge.expiring{background:#fff1d6;color:#815100}.badge.expired{background:#ffe5e5;color:#9e2929}.badge.missing{background:#eee;color:#555}
.employee-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.employee-card{padding:16px;background:#fff;border:1px solid var(--line);border-radius:13px}
.employee-top{display:flex;align-items:center;gap:11px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--green);font-weight:800}
.employee-card h3{margin:0}.employee-card p{margin:2px 0;color:var(--muted)}.employee-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.quick-list{display:grid;gap:9px}.quick-item{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.week-grid{display:grid;gap:12px}.day-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfcfc}
.day-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.day-head h4{margin:0}.job-line{display:grid;grid-template-columns:80px 105px 1.6fr 1fr 1fr 1.5fr 42px;gap:8px;margin-top:8px;align-items:end}
.job-line label{font-size:11px;color:var(--muted)}.remove-line{height:40px;border:1px solid #f0caca;background:#fff4f4;color:var(--red);border-radius:8px}
.total-line{text-align:right;font-size:16px;font-weight:800;padding-top:10px}
.embedded-expenses{margin-top:20px;border-top:2px solid var(--line);padding-top:18px}
.expense-line{
    display:grid;
    grid-template-columns:
        140px      /* Date */
        180px      /* Job Type */
        2fr        /* Job */
        1.4fr      /* Description */
        100px      /* Amount */
        42px;      /* Delete */

    gap:8px;
    margin-top:8px;
    align-items:end;
}
.expense-line label{font-size:11px;color:var(--muted)}
@media (max-width: 720px) {

    .expense-line{
        grid-template-columns:1fr;
        gap:10px;
    }

    .expense-line label{
        grid-column:auto;
    }

}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{grid-column:1/-1}
dialog{border:0;border-radius:16px;padding:0;width:min(1040px,96vw);max-height:92vh;box-shadow:0 24px 80px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(10,20,16,.58)}.dialog-inner{padding:20px;max-height:92vh;overflow:auto}.dialog-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px}.dialog-head h2{margin:0}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}.doc-card{border:1px solid var(--line);border-radius:12px;padding:13px}
.docs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.doc-card h4{margin:0 0 5px}.doc-card p{margin:3px 0;color:var(--muted)}
.notice{border-left:4px solid var(--green);background:var(--soft);padding:12px;border-radius:8px;margin-bottom:14px}
.warning{border-left-color:var(--amber);background:#fff8e8}.empty{padding:25px!important;text-align:center;color:var(--muted)}
.mobile-nav{display:none}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.employee-cards,.docs-grid{grid-template-columns:repeat(2,1fr)}.job-line{grid-template-columns:70px 105px 1.4fr}.job-line .wide-mobile{grid-column:span 1}}
@media(max-width:720px){
 .app{display:block}.side{display:none}.top{padding:0 14px;height:66px}.top h1{font-size:18px}.content{padding:14px 12px 86px}
 .grid,.employee-cards,.docs-grid{grid-template-columns:1fr}.panel-head{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}
 .job-line{grid-template-columns:1fr 1fr}.job-line label:nth-child(3),.job-line label:nth-child(6){grid-column:1/-1}.remove-line{align-self:end}
 .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:20;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
 .mobile-nav button{min-width:82px;border:0;background:#fff;padding:11px 8px;font-size:11px;color:var(--muted)}.mobile-nav button.active{color:var(--green);font-weight:800}
 .top-actions .secondary{display:none}
}
/* Microsoft 365 authentication screen */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at top, #ffffff 0%, #f3f6f5 52%, #e7efeb 100%);
}

.auth-card {
  width: min(440px, 100%);
  padding: 30px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(18, 42, 33, 0.18);
}

.auth-card img {
  display: block;
  width: min(280px, 90%);
  max-height: 105px;
  object-fit: contain;
  margin: 0 auto 20px;
}

.auth-card h1 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
}

.auth-card p {
  margin: 0 0 22px;
  color: var(--muted);
}

.auth-card .primary {
  width: 100%;
  padding: 12px 16px;
}

.auth-message {
  min-height: 20px;
  margin-top: 13px;
  font-size: 13px;
  color: var(--muted);
}

.auth-message.error {
  color: var(--red);
}

.auth-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.auth-user-text {
  max-width: 240px;
  text-align: right;
}

.auth-user-text strong,
.auth-user-text small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.auth-user-text small {
  color: var(--muted);
}

@media (max-width: 720px) {
  .auth-gate {
    padding: 14px;
  }

  .auth-card {
    padding: 24px 18px;
  }

  .auth-card h1 {
    font-size: 22px;
  }

  .auth-user-text {
    max-width: 145px;
  }

  .auth-user .small {
    display: none;
  }
}
/* ===========================================
   Hide spinner arrows on Hours input
=========================================== */

/* Chrome, Edge, Safari */
.line-hours::-webkit-outer-spin-button,
.line-hours::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.line-hours {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Timesheet bottom action buttons */
.timesheet-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line, #d8dde3);
}

.timesheet-actions button {
    min-width: 150px;
}
.timesheet-save-status {
  margin-top: 18px;
  text-align: center;
  min-height: 20px;
}

#timesheetSaveStatus {
  font-size: 13px;
  color: var(--muted, #667085);
}
.leave-balance-summary {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .leave-balance-summary {
    justify-content: flex-start;
    gap: 12px;
  }
}
/* Employee Home dashboard */

.employee-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.employee-home-header h2 {
  margin: 0 0 4px;
}

.employee-home-header p {
  margin: 0;
  color: var(--muted, #667085);
}

.employee-dashboard-grid {
  margin-bottom: 18px;
}

.employee-dashboard-grid .stat {
  min-height: 125px;
}

.dashboard-status-text {
  font-size: 22px;
}

.employee-timesheet-panel {
  margin-top: 18px;
}

.employee-timesheet-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.employee-timesheet-summary > div {
  padding: 14px;
  border: 1px solid var(--line, #d8dde3);
  border-radius: 10px;
  background: var(--soft, #f7f8fa);
}

.employee-timesheet-summary small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted, #667085);
}

.employee-timesheet-summary strong {
  font-size: 21px;
}

.employee-dashboard-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .employee-home-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-timesheet-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .employee-dashboard-actions button {
    width: 100%;
  }
}

/* === JEC production UI polish === */

:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

html{
  background:var(--dark);
}

body{
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}

button,
input,
select,
textarea{
  min-height:40px;
}

button{
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease;
}

button:active{
  transform:scale(.98);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(0,99,68,.18);
  outline-offset:2px;
  border-color:var(--green);
}

.top{
  height:calc(72px + var(--safe-top));
  padding-top:var(--safe-top);
  padding-right:calc(24px + var(--safe-right));
  padding-left:calc(24px + var(--safe-left));
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(12px);
}

.side{
  padding-left:calc(14px + var(--safe-left));
}

.card,
.panel,
.employee-card,
.doc-card,
.day-card,
.quick-item{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.card:hover,
.employee-card:hover,
.doc-card:hover{
  border-color:rgba(0,99,68,.24);
  box-shadow:0 14px 30px rgba(18,42,33,.11);
  transform:translateY(-2px);
}

.panel{
  border-radius:16px;
}

.table-wrap{
  border-radius:12px;
}

tbody tr{
  transition:background-color .14s ease;
}

tbody tr:hover{
  background:#f5faf8;
}

/* Timesheet work-entry rows */
.job-line{
  display:grid;
  grid-template-columns:
    90px
    135px
    minmax(220px,2fr)
    125px
    minmax(150px,1fr)
    minmax(180px,1.5fr)
    42px;
  gap:10px;
  margin-top:10px;
  align-items:end;
}

.job-line label,
.expense-line label{
  min-width:0;
}

.job-line input,
.job-line select,
.expense-line input,
.expense-line select{
  min-width:0;
}

/* Embedded expense rows */
.expense-line{
  display:grid;
  grid-template-columns:
    140px
    180px
    minmax(220px,2fr)
    minmax(180px,1.4fr)
    110px
    42px;
  gap:10px;
  margin-top:10px;
  align-items:end;
}

.week-exp-amount{
  min-width:110px;
  text-align:right;
}

.remove-line{
  width:42px;
  min-width:42px;
  padding:0;
}

/* Keep save controls visible on long timesheets */
.timesheet-actions{
  position:sticky;
  bottom:0;
  z-index:6;
  margin:22px -20px -20px;
  padding:
    14px 20px
    calc(14px + var(--safe-bottom));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);
  backdrop-filter:blur(12px);
}

.timesheet-save-status{
  margin-bottom:4px;
}

dialog{
  max-height:calc(100dvh - 24px);
}

.dialog-inner{
  max-height:calc(100dvh - 32px);
  padding-bottom:calc(20px + var(--safe-bottom));
}

/* Dashboard polish */
.employee-home-header{
  position:relative;
  overflow:hidden;
  padding:24px;
  border-radius:18px;
  color:#fff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(255,255,255,.16),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #00543a,
      #0b7959
    );
  box-shadow:0 14px 34px rgba(0,99,68,.18);
}

.employee-home-header h2{
  font-size:clamp(23px,3vw,34px);
}

.employee-home-header p{
  color:rgba(255,255,255,.8);
}

.employee-dashboard-grid .stat{
  position:relative;
  overflow:hidden;
}

.employee-dashboard-grid .stat::after{
  content:"";
  position:absolute;
  right:-32px;
  bottom:-36px;
  width:92px;
  height:92px;
  border-radius:999px;
  background:rgba(0,99,68,.055);
}

/* Tablet layout */
@media(max-width:1180px){
  .job-line{
    grid-template-columns:
      90px
      130px
      minmax(190px,1.8fr)
      120px
      minmax(150px,1fr)
      minmax(170px,1.3fr)
      42px;
    gap:8px;
  }

  .expense-line{
    grid-template-columns:
      135px
      165px
      minmax(190px,1.8fr)
      minmax(170px,1.3fr)
      105px
      42px;
    gap:8px;
  }
}

@media(max-width:980px){
  .job-line{
    grid-template-columns:
      90px
      130px
      minmax(0,1fr)
      minmax(0,1fr);
  }

  .job-line label:nth-child(3),
  .job-line label:nth-child(6){
    grid-column:span 2;
  }

  .job-line .remove-line{
    grid-column:4;
  }

  .expense-line{
    grid-template-columns:
      140px
      minmax(160px,1fr)
      minmax(0,1.5fr)
      110px
      42px;
  }

  .expense-line label:nth-child(4){
    grid-column:1 / 4;
  }
}

/* Phone / PWA layout */
@media(max-width:720px){
  .top{
    height:calc(66px + var(--safe-top));
    padding-top:var(--safe-top);
    padding-right:calc(14px + var(--safe-right));
    padding-left:calc(14px + var(--safe-left));
  }

  .content{
    padding:
      14px
      calc(12px + var(--safe-right))
      calc(92px + var(--safe-bottom))
      calc(12px + var(--safe-left));
  }

  .mobile-nav{
    padding-right:var(--safe-right);
    padding-bottom:var(--safe-bottom);
    padding-left:var(--safe-left);
  }

  .panel{
    padding:14px;
    margin-top:12px;
  }

  .panel-head{
    gap:10px;
  }

  .panel-head > div:last-child{
    width:100%;
  }

  .employee-home-header{
    padding:20px;
    border-radius:16px;
  }

  .job-line,
  .expense-line{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
  }

  .job-line label,
  .expense-line label,
  .job-line label:nth-child(3),
  .job-line label:nth-child(6),
  .expense-line label:nth-child(4){
    grid-column:auto;
  }

  .job-line .remove-line,
  .expense-line .remove-line{
    width:100%;
    min-width:0;
    grid-column:auto;
  }

  .week-exp-amount{
    width:100%;
    min-width:0;
  }

  dialog{
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-radius:0;
  }

  .dialog-inner{
    min-height:100dvh;
    max-height:100dvh;
    border-radius:0;
    padding:
      16px
      calc(14px + var(--safe-right))
      calc(18px + var(--safe-bottom))
      calc(14px + var(--safe-left));
  }

  .dialog-head{
    position:sticky;
    top:0;
    z-index:7;
    margin:
      -16px
      calc(-14px - var(--safe-right))
      16px
      calc(-14px - var(--safe-left));
    padding:
      calc(14px + var(--safe-top))
      calc(14px + var(--safe-right))
      14px
      calc(14px + var(--safe-left));
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
  }

  .timesheet-actions{
    margin:
      22px
      calc(-14px - var(--safe-right))
      calc(-18px - var(--safe-bottom))
      calc(-14px - var(--safe-left));
    padding:
      14px
      calc(14px + var(--safe-right))
      calc(14px + var(--safe-bottom))
      calc(14px + var(--safe-left));
  }

  .timesheet-actions button{
    flex:1 1 140px;
    min-width:0;
  }
}

@media(max-width:430px){
  .top-actions{
    gap:6px;
  }

  .top-actions button{
    padding-inline:10px;
  }

  .employee-timesheet-summary{
    grid-template-columns:1fr 1fr;
  }

  .timesheet-actions{
    gap:8px;
  }

  .timesheet-actions button{
    flex-basis:100%;
  }
}

@media(display-mode:standalone){
  .side,
  .top{
    user-select:none;
  }
}

/* Hide spinner arrows on expense amount inputs */
.week-exp-amount::-webkit-outer-spin-button,
.week-exp-amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.week-exp-amount {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Payroll report selection checkboxes */
#reportsView input[type="checkbox"],
.payroll-export-table input[type="checkbox"],
.payroll-timesheet-check {
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  margin:0;
  padding:0;
  border-radius:4px;
  accent-color:var(--green);
  transform:none;
  cursor:pointer;
}