*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg:#071321;
  --surface:#0f223a;
  --surface-2:#132b47;
  --surface-3:#183556;
  --border:#23456a;
  --border-soft:rgba(255,255,255,.08);

  --gold:#d4b154;
  --gold-2:#ebcb72;
  --green:#41c784;
  --blue:#5aa8ff;
  --red:#ec6666;
  --amber:#f0ac4f;

  --text:#edf3fb;
  --text-soft:#c3cfdf;
  --muted:#8fa1b7;
  --muted-2:#6f829b;

  --shadow:0 16px 40px rgba(0,0,0,.28);
  --radius-xs:8px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;

  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:2rem;
  --space-8:2.5rem;

  --max-content:1440px;

  --font:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

html,body{
  height:100%;
}

body{
  font-family:var(--font);
  background:
    radial-gradient(circle at top left, rgba(90,168,255,.08), transparent 28%),
    radial-gradient(circle at top right, rgba(212,177,84,.06), transparent 22%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.45;
}

/* -------------------- LOADING -------------------- */
.loading-overlay{
  position:fixed;
  inset:0;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  z-index:9999;
}

.loading-overlay.hidden{
  display:none;
}

.spinner{
  width:34px;
  height:34px;
  border:2px solid rgba(255,255,255,.1);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .75s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.loading-text{
  font-size:13px;
  color:var(--muted);
}

/* -------------------- SCREEN -------------------- */
.screen{
  display:none;
  min-height:100vh;
  flex-direction:column;
}

.screen.active{
  display:flex;
}

/* -------------------- LOGIN -------------------- */
.login-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem, 3vw, 2rem);
}

.login-box{
  width:min(100%, 440px);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:var(--shadow);
}

.logo-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:2rem;
}

.logo-mark{
  width:46px;
  height:46px;
  background:var(--gold);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-weight:700;
  font-size:17px;
  color:#0a1628;
  flex-shrink:0;
}

.logo-mark.sm{
  width:34px;
  height:34px;
  font-size:13px;
  border-radius:9px;
}

.logo-name{
  font-size:15px;
  font-weight:600;
  color:var(--text);
}

.logo-sub{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.05em;
  margin-top:2px;
}

.field{
  margin-bottom:1rem;
}

.field label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.45rem;
}

.field input,
.field select,
.filter-bar select,
.filter-bar input[type="date"],
.filter-bar input[type="month"],
.history-date-range input[type="date"]{
  width:100%;
  background:var(--surface-3);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-xs);
  padding:.78rem .95rem;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

.field input:focus,
.field select:focus,
.filter-bar select:focus,
.filter-bar input:focus,
.history-date-range input[type="date"]:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,177,84,.12);
}

.field input:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.field select option{
  background:var(--surface);
}

.field input[type="date"],
.field input[type="time"],
.history-date-range input[type="date"]{
  color-scheme:dark;
}

.alert{
  border-radius:var(--radius-xs);
  padding:.75rem .9rem;
  font-size:13px;
  margin-bottom:1rem;
}

.alert-err{
  background:rgba(236,102,102,.08);
  border:1px solid rgba(236,102,102,.25);
  color:#ff9d9d;
}

.step-bar{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:1.5rem;
}

.step-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--surface-3);
  transition:background .3s;
}

.step-dot.done{
  background:var(--gold);
}

.step-line{
  flex:1;
  height:1px;
  background:var(--surface-3);
  transition:background .3s;
}

.step-line.done{
  background:rgba(212,177,84,.4);
}

/* -------------------- BUTTONS -------------------- */
.btn-primary,
.btn-gold,
.btn-submit{
  border:none;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.btn-primary,
.btn-gold,
.btn-submit{
  background:var(--gold);
  color:#0b1728;
  font-family:var(--font);
  font-weight:700;
  box-shadow:0 10px 24px rgba(212,177,84,.18);
}

.btn-primary{
  width:100%;
  border-radius:10px;
  padding:.82rem 1rem;
  font-size:14px;
  letter-spacing:.03em;
}

.btn-gold{
  border-radius:10px;
  padding:.7rem 1.25rem;
  font-size:13px;
}

.btn-submit{
  border-radius:10px;
  padding:.82rem 1.5rem;
  font-size:14px;
  letter-spacing:.03em;
}

.btn-primary:hover,
.btn-gold:hover,
.btn-submit:hover{
  background:var(--gold-2);
  transform:translateY(-1px);
}

.btn-primary:disabled,
.btn-gold:disabled,
.btn-submit:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.btn-outline,
.btn-export,
.btn-danger,
.btn-edit,
.btn-nav,
.period-btn{
  transition:all .2s ease;
}

.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text-soft);
  border-radius:8px;
  padding:.45rem .9rem;
  font-family:var(--font);
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}

.btn-outline:hover{
  border-color:var(--gold);
  color:var(--gold);
}

.btn-outline.sm{
  padding:.3rem .7rem;
  font-size:11px;
}

.btn-danger{
  background:transparent;
  border:1px solid rgba(236,102,102,.3);
  color:var(--red);
  border-radius:7px;
  padding:.32rem .65rem;
  font-family:var(--font);
  font-size:11px;
  cursor:pointer;
}

.btn-danger:hover{
  background:rgba(236,102,102,.08);
}

.btn-edit{
  background:transparent;
  border:1px solid rgba(90,168,255,.28);
  color:var(--blue);
  border-radius:7px;
  padding:.32rem .65rem;
  font-family:var(--font);
  font-size:11px;
  cursor:pointer;
}

.btn-edit:hover{
  background:rgba(90,168,255,.08);
}

.btn-export{
  background:transparent;
  border:1.5px solid rgba(212,177,84,.55);
  color:var(--gold);
  border-radius:8px;
  padding:.45rem 1rem;
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.btn-export:hover{
  background:rgba(212,177,84,.08);
  border-color:var(--gold);
}

.btn-nav{
  background:var(--surface-3);
  border:1px solid var(--border-soft);
  color:var(--text);
  border-radius:8px;
  width:34px;
  height:34px;
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.btn-nav:hover{
  border-color:var(--gold);
  color:var(--gold);
  transform:translateY(-1px);
}

/* -------------------- TOPBAR -------------------- */
.topbar{
  background:rgba(15,34,58,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:.9rem clamp(1rem, 2.5vw, 1.5rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:20;
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}

.topbar-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.topbar-badge{
  background:rgba(212,177,84,.1);
  border:1px solid rgba(212,177,84,.28);
  color:var(--gold);
  border-radius:999px;
  padding:.35rem .85rem;
  font-size:12px;
  white-space:nowrap;
  max-width:min(60vw, 220px);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* -------------------- MASTER LAYOUT -------------------- */
.master-layout{
  flex:1;
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  min-height:0;
}

.sidebar{
  background:rgba(15,34,58,.88);
  border-right:1px solid var(--border);
  padding:1rem 0;
  overflow-y:auto;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:.75rem 1.2rem;
  font-size:13px;
  cursor:pointer;
  color:var(--muted);
  transition:all .15s;
  border-left:3px solid transparent;
}

.nav-item:hover{
  color:var(--text);
  background:rgba(255,255,255,.025);
}

.nav-item.active{
  color:var(--gold);
  border-left-color:var(--gold);
  background:rgba(212,177,84,.06);
}

.nav-icon{
  font-size:7px;
  color:var(--surface-3);
}

.nav-item.active .nav-icon{
  color:var(--gold);
}

.nav-sep{
  height:1px;
  background:var(--border);
  margin:.9rem 1.1rem;
}

.master-content{
  min-width:0;
  overflow-y:auto;
  padding:clamp(1rem, 2vw, 1.8rem);
  max-width:var(--max-content);
  width:100%;
  margin:0 auto;
}

.page{
  display:none;
}

.page.active{
  display:block;
}

.page-header{
  margin-bottom:1.5rem;
}

.page-title{
  font-size:clamp(1.2rem, 2vw, 1.5rem);
  font-weight:700;
  color:var(--text);
  margin-bottom:.2rem;
}

.page-sub{
  font-size:13px;
  color:var(--muted);
}

/* -------------------- CARDS -------------------- */
.card,
.entry-card,
.stat-card,
.modal-box{
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.008)), var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.card{
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:1.5rem;
}

.card-head{
  padding:1rem 1.2rem;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  flex-wrap:wrap;
}

.card-title{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}

.card-meta{
  font-size:12px;
  color:var(--muted);
}

.card-body{
  padding:1.2rem;
}

.entry-card{
  border-radius:var(--radius-lg);
  padding:1.25rem;
  margin-bottom:1.25rem;
}

.entry-card-title{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.65rem;
}

.entry-card-title::before{
  content:'';
  display:inline-block;
  width:4px;
  height:18px;
  background:var(--gold);
  border-radius:99px;
}

/* -------------------- STAT CARDS -------------------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}

.stat-card{
  border-radius:var(--radius-md);
  padding:1rem 1.1rem;
  min-height:90px;
}

.stat-card.skeleton{
  animation:pulse 1.5s infinite;
}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

.stat-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.45rem;
}

.stat-val{
  font-size:clamp(1.55rem, 3vw, 2rem);
  font-weight:700;
  color:var(--text);
  font-family:var(--mono);
}

.stat-val.gold{color:var(--gold)}
.stat-val.green{color:var(--green)}
.stat-val.blue{color:var(--blue)}

/* -------------------- BADGES -------------------- */
.badge,
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:.22rem .68rem;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.badge.active{background:rgba(65,199,132,.12);color:var(--green)}
.badge.temp{background:rgba(212,177,84,.12);color:var(--gold)}
.badge.inactive{background:rgba(143,161,183,.12);color:var(--muted)}

.badge-present{background:rgba(65,199,132,.13);color:var(--green)}
.badge-halfday{background:rgba(240,172,79,.13);color:var(--amber)}
.badge-leave{background:rgba(236,102,102,.12);color:var(--red)}
.badge-holiday{background:rgba(90,168,255,.12);color:var(--blue)}
.badge-dispatch{background:rgba(212,177,84,.12);color:var(--gold)}
.badge-notask{background:rgba(143,161,183,.12);color:var(--muted)}

/* -------------------- GENERIC TABLES -------------------- */
.table-wrap{
  width:100%;
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:.8rem .9rem;
  text-align:left;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

td{
  font-size:13px;
  color:var(--text);
  padding:.8rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}

tr:last-child td{
  border-bottom:none;
}

tr:hover td{
  background:rgba(255,255,255,.02);
}

td.empty{
  color:var(--muted);
  text-align:center;
  padding:2rem;
  font-size:13px;
}

/* -------------------- FORM LAYOUT -------------------- */
.form-grid,
.entry-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1rem;
}

.entry-form-grid .field{
  margin-bottom:0;
}

.time-field{
  transition:opacity .25s;
}

.filter-bar{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:1.2rem;
}

.entry-hours-preview{
  background:rgba(65,199,132,.08);
  border:1px solid rgba(65,199,132,.18);
  border-radius:12px;
  padding:.7rem 1rem;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}

.hours-preview-label{
  font-size:12px;
  color:var(--muted);
}

.hours-preview-val{
  font-family:var(--mono);
  font-size:18px;
  font-weight:700;
  color:var(--green);
}

.lock-notice{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  background:rgba(212,177,84,.07);
  border:1px solid rgba(212,177,84,.18);
  border-radius:12px;
  padding:.85rem 1rem;
  font-size:13px;
  color:var(--text-soft);
  margin-bottom:1.2rem;
}

.lock-notice strong{
  color:var(--gold);
}

/* -------------------- EMPLOYEE PORTAL -------------------- */
.emp-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.emp-content{
  width:100%;
  max-width:var(--max-content);
  margin:0 auto;
  padding:1.25rem;
}

.emp-two-col{
  flex:1;
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:1.25rem;
  padding:1.25rem;
  min-height:0;
  width:100%;
  max-width:var(--max-content);
  margin:0 auto;
}

.emp-left{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-height:0;
}

.emp-right{
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.emp-right .card{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  margin-bottom:0;
}

.emp-right #cal-container{
  flex:1;
  overflow:auto;
}

/* -------------------- HISTORY -------------------- */
.history-filter-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.9rem 1rem;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

.period-tabs{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}

.period-btn{
  background:var(--surface-3);
  border:1px solid transparent;
  color:var(--muted);
  border-radius:999px;
  padding:.4rem .9rem;
  font-family:var(--font);
  font-size:12px;
  cursor:pointer;
}

.period-btn.active{
  background:rgba(212,177,84,.1);
  border-color:var(--gold);
  color:var(--gold);
}

.history-date-range{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.history-summary,
.cal-summary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.7rem;
  padding:.7rem 1rem;
  background:rgba(65,199,132,.06);
  border-bottom:1px solid rgba(65,199,132,.16);
  font-size:13px;
  color:var(--green);
}

.sum-dot{
  color:var(--surface-3);
  font-size:15px;
}

.day-row{
  background:var(--surface-3);
  border:1px solid rgba(255,255,255,.04);
  border-radius:12px;
  margin-bottom:.65rem;
  padding:.9rem 1rem;
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
}

.lock-icon{
  font-size:12px;
  opacity:.45;
  flex-shrink:0;
}

.day-date{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  min-width:110px;
}

.day-times{
  display:flex;
  gap:1rem 1.2rem;
  flex-wrap:wrap;
  flex:1;
}

.day-time-item{
  font-size:12px;
}

.day-time-label{
  font-size:10px;
  color:var(--muted);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:2px;
}

.day-time-val{
  font-family:var(--mono);
  color:var(--text);
  font-weight:600;
}

.day-note{
  font-size:11px;
  color:var(--muted);
  font-style:italic;
}

.day-hours{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
}

.day-hours.good{color:var(--green)}
.day-hours.low{color:var(--amber)}
.day-hours.none{color:var(--muted)}

/* -------------------- MODAL + TOAST -------------------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:1rem;
}

.modal-box{
  border-radius:var(--radius-lg);
  padding:1.5rem;
  width:min(100%, 500px);
}

.modal-title{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  margin-bottom:.5rem;
}

.modal-admin-badge{
  display:inline-block;
  background:rgba(236,102,102,.1);
  border:1px solid rgba(236,102,102,.28);
  color:var(--red);
  border-radius:999px;
  padding:.22rem .65rem;
  font-size:11px;
  font-weight:700;
  margin-bottom:1.2rem;
}

.modal-actions{
  display:flex;
  gap:.75rem;
  margin-top:1.2rem;
  flex-wrap:wrap;
}

.toast{
  position:fixed;
  right:1rem;
  bottom:1rem;
  background:var(--surface);
  border:1px solid var(--gold);
  border-radius:12px;
  padding:.85rem 1rem;
  font-size:13px;
  color:var(--gold);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:all .3s;
  max-width:min(92vw, 360px);
  box-shadow:var(--shadow);
}

.toast.show{
  opacity:1;
  transform:translateY(0);
}

.toast.err{
  border-color:var(--red);
  color:#ff9d9d;
}

.toast.ok{
  border-color:var(--green);
  color:var(--green);
}

.toast.info{
  border-color:var(--blue);
  color:var(--blue);
}

/* -------------------- MONTH NAV -------------------- */
.month-nav{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.month-nav-label{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  min-width:120px;
  text-align:center;
}

/* -------------------- WEEK SECTIONS -------------------- */
.week-section{
  margin-bottom:0;
  border-bottom:1px solid var(--border);
}

.week-section:last-child{
  border-bottom:none;
}

.week-label,
.wt-week-label{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  padding:.85rem 1rem .45rem;
  letter-spacing:.02em;
}

/* -------------------- WEEK TABLE / TIMESHEET TABLE -------------------- */
.wt-wrap{
  width:100%;
  overflow:auto;
  margin-bottom:.5rem;
}

.wt-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  table-layout:auto;
}

.wt-table thead tr{
  background:rgba(255,255,255,.035);
  border-bottom:1px solid var(--border);
}

.wt-table thead th{
  padding:.72rem .8rem;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--muted);
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}

.wt-table tbody td{
  padding:.72rem .8rem;
  font-size:13px;
  color:var(--text);
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}

.wt-table tbody tr:last-child td{
  border-bottom:none;
}

.wt-table tbody tr:hover td{
  background:rgba(255,255,255,.02);
}

.wt-date{
  min-width:220px;
  color:var(--text-soft);
}

.wt-time{
  min-width:84px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
}

.wt-hrs{
  min-width:86px;
  font-family:var(--mono);
  text-align:center;
  font-weight:700;
  color:var(--green);
}

.wt-client{
  min-width:120px;
  color:var(--text-soft);
}

.wt-status{
  min-width:120px;
}

.wt-note{
  min-width:150px;
  color:var(--muted);
  font-size:12px;
  white-space:normal;
}

.wt-table tr.wt-weekend td{
  background:rgba(255,255,255,.02);
  color:var(--muted) !important;
  opacity:.65;
}

.wt-table tr.wt-today td{
  background:rgba(212,177,84,.05);
}

.week-table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}

.week-table thead th{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:.65rem .9rem;
  text-align:left;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.week-table tbody tr{
  border-bottom:1px solid rgba(255,255,255,.04);
}

.week-table tbody tr:last-child{
  border-bottom:none;
}

.week-table tbody tr:hover td{
  background:rgba(255,255,255,.02);
}

.row-weekend td{
  background:rgba(143,161,183,.06) !important;
  color:var(--muted);
}

.row-today td{
  background:rgba(212,177,84,.05) !important;
}

.row-today td.cell-date{
  border-left:3px solid var(--gold);
}

.cell-date{
  padding:.7rem .9rem;
  font-size:13px;
  white-space:nowrap;
  min-width:200px;
}

.cell-dow{
  color:var(--muted);
  font-size:12px;
}

.cell-dd{
  color:var(--text);
  font-weight:600;
}

.row-weekend .cell-dd{
  color:var(--muted);
}

.cell-time{
  padding:.7rem .9rem;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  min-width:84px;
}

.cell-hrs{
  padding:.7rem .9rem;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  min-width:72px;
}

.cell-client{
  padding:.7rem .9rem;
  font-size:12px;
  color:var(--text-soft);
  min-width:110px;
}

.cell-status{
  padding:.7rem .9rem;
  min-width:120px;
}

.cell-note{
  padding:.7rem .9rem;
  font-size:12px;
  color:var(--muted);
  font-style:italic;
}

.cell-empty{
  padding:.45rem .9rem;
  background:transparent !important;
}

.cell-weekend{
  color:var(--muted) !important;
}

/* -------------------- HELPERS -------------------- */
.mono{
  font-family:var(--mono);
}

code{
  font-family:var(--mono);
  font-size:12px;
  color:var(--gold);
  background:rgba(212,177,84,.08);
  padding:.1rem .35rem;
  border-radius:4px;
}

/* -------------------- RESPONSIVE -------------------- */
@media (max-width:1100px){
  .master-layout{
    grid-template-columns:88px minmax(0,1fr);
  }

  .sidebar{
    padding-top:.75rem;
  }

  .nav-item{
    justify-content:center;
    padding:.85rem .5rem;
    border-left:none;
    border-right:3px solid transparent;
  }

  .nav-item.active{
    border-right-color:var(--gold);
  }

  .nav-item span:last-child{
    display:none;
  }

  .nav-sep{
    margin:.75rem .7rem;
  }

  .emp-two-col{
    grid-template-columns:320px minmax(0,1fr);
  }
}

@media (max-width:900px){
  .emp-two-col{
    grid-template-columns:1fr;
    padding:1rem;
  }

  .emp-left,
  .emp-right{
    min-height:auto;
  }

  .emp-right .card{
    min-height:520px;
  }

  .form-grid,
  .entry-form-grid{
    grid-template-columns:1fr;
  }

  .card-head,
  .history-filter-bar{
    align-items:flex-start;
  }
}

@media (max-width:768px){
  .topbar{
    padding:.85rem 1rem;
  }

  .master-layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    border-right:none;
    border-bottom:1px solid var(--border);
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
    padding:.5rem;
    overflow:visible;
  }

  .nav-item{
    border-right:none;
    border-left:none;
    border-bottom:2px solid transparent;
    border-radius:10px;
    justify-content:flex-start;
    padding:.6rem .8rem;
  }

  .nav-item.active{
    border-bottom-color:var(--gold);
  }

  .nav-item span:last-child{
    display:inline;
  }

  .master-content{
    padding:1rem;
  }

  .month-nav{
    width:100%;
    justify-content:space-between;
  }

  .month-nav-label{
    min-width:auto;
    flex:1;
  }

  .wt-table{
    min-width:680px;
  }
}

@media (max-width:560px){
  .login-box{
    padding:1.25rem;
  }

  .topbar-left,
  .topbar-right{
    width:100%;
    justify-content:space-between;
  }

  .topbar-badge{
    max-width:100%;
  }

  .entry-card,
  .card-body,
  .card-head,
  .modal-box{
    padding:1rem;
  }

  .stat-row{
    grid-template-columns:1fr 1fr;
  }

  .history-date-range,
  .modal-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .history-date-range input[type="date"],
  .btn-outline,
  .btn-gold,
  .btn-submit{
    width:100%;
  }

  .day-row{
    padding:.85rem;
  }

  .day-date{
    min-width:auto;
    width:100%;
  }

  .day-times{
    width:100%;
  }

  .toast{
    left:1rem;
    right:1rem;
    max-width:none;
  }
}

@media (max-width:420px){
  .stat-row{
    grid-template-columns:1fr;
  }

  .logo-row{
    gap:10px;
  }

  .logo-name{
    font-size:14px;
  }

  .page-title{
    font-size:1.15rem;
  }

  .card-title,
  .entry-card-title{
    font-size:15px;
  }

  .wt-table{
    min-width:620px;
  }
}