body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#f4f6f8;color:#1f2937}
header{background:#17365d;color:#fff;padding:14px 24px;display:flex;justify-content:space-between}
header a{color:#fff;text-decoration:none;margin-left:14px}
main{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:#fff;border:1px solid #d7dce1;border-radius:12px;padding:20px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
input,select{width:100%;padding:10px;margin:5px 0 12px;border:1px solid #cbd5e1;border-radius:7px;box-sizing:border-box}
label{font-weight:600}button,.btn{background:#17365d;color:#fff;border:0;border-radius:8px;padding:10px 14px;text-decoration:none;cursor:pointer}
.orange{background:#f47c28}.danger{background:#b91c1c}.muted{color:#64748b}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:12px}.success{background:#dcfce7}.error{background:#fee2e2}
table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
th{background:#f8fafc}.pill{background:#e2e8f0;padding:3px 8px;border-radius:999px;font-size:.8rem}.actions form{display:inline-block;margin:2px}


/* Dashboard layout */
.dashboard-shell{
  max-width:1180px;
  margin:0 auto;
  padding:4px 6px 20px;
}
.dashboard-heading{
  margin:8px 0 24px;
}
.dashboard-heading h1{
  font-size:2rem;
  margin:0 0 8px;
}
.dashboard-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
  align-items:stretch;
}
.dashboard-card{
  background:#fff;
  border:1px solid #d7dce1;
  border-radius:12px;
  min-height:330px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.dashboard-card h2{
  margin:16px 0 10px;
  font-size:1.3rem;
}
.dashboard-card p{
  max-width:280px;
  line-height:1.5;
  margin:0 auto 22px;
}
.dashboard-main-btn{
  margin-top:auto;
  min-width:110px;
}
.dashboard-icon{
  width:68px;
  height:68px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  font-weight:700;
}
.icon-blue{background:#e6f0ff;color:#1d6fdc}
.icon-green{background:#e7f6e7;color:#2f9a45}
.icon-orange{background:#fff0dd;color:#ef7c19}
.admin-dashboard-card p{
  margin-bottom:18px;
}
.admin-button-grid{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(3,max-content);
  gap:8px;
  justify-content:center;
}
.admin-button-grid .btn{
  white-space:nowrap;
}
.admin-button-grid .btn:nth-child(4){
  grid-column:1 / 2;
}
.admin-button-grid .btn:nth-child(5){
  grid-column:2 / 3;
}
.dashboard-info{
  margin-top:22px;
  padding:18px 22px;
  border:1px solid #b9d4f7;
  border-radius:10px;
  background:#eef6ff;
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.dashboard-info p{
  margin:6px 0 0;
  line-height:1.55;
}
.info-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#1d6fdc;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  flex:0 0 24px;
}
@media (max-width:900px){
  .dashboard-cards{grid-template-columns:1fr}
  .dashboard-card{min-height:unset}
  .admin-button-grid{grid-template-columns:repeat(2,max-content)}
  .admin-button-grid .btn:nth-child(4),
  .admin-button-grid .btn:nth-child(5){grid-column:auto}
}

.roster-toolbar{display:flex;justify-content:space-between;align-items:end;gap:20px}.fortnight-card{background:#fff;border:1px solid #ccd3da;border-radius:12px;margin:16px 0;overflow:hidden}.fortnight-header{padding:12px 14px;background:#f7f9fb;display:flex;justify-content:space-between;gap:15px}.roster-grid{display:grid;grid-template-columns:repeat(14,minmax(100px,1fr));overflow-x:auto}.day-cell{min-width:100px;padding:7px;border-right:1px solid #e5e7eb}.day-cell.past{background:#ececec}.day-cell.today{outline:3px solid #159447;outline-offset:-3px}.day-date{text-align:center}.shift-input{padding:6px;margin:6px 0}.mini-btn{width:100%;padding:5px;font-size:.78rem}.ot-area{border-top:1px solid #e5e7eb;margin-top:7px;padding-top:7px}.ot-area input{padding:5px;margin:0 0 5px;font-size:.8rem}.ot-list{background:#e5f5e8;padding:4px;border-radius:5px;font-size:.76rem;margin-bottom:5px}.clear-btn{background:#64748b}.roster-nav{display:flex;gap:8px;margin:18px 0}


/* ===== v0.3 desktop-prototype roster layout ===== */
.desktop-roster-page{
  max-width:1700px;
  margin:0 auto;
  padding:0 8px 30px;
}

.desktop-roster-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin:6px 0 12px;
}

.desktop-title-block h1{
  margin:0 0 4px;
  font-size:2rem;
}

.desktop-controls{
  display:flex;
  align-items:flex-end;
  gap:12px;
}

.desktop-rank-form{
  min-width:220px;
}

.desktop-rank-form label{
  display:block;
  margin-bottom:4px;
}

.desktop-rank-form select{
  margin:0;
  min-width:220px;
}

.desktop-hd-controls{
  display:flex;
  gap:6px;
  align-items:center;
}

.hd-btn,.alt-btn{
  height:38px;
  border-radius:7px;
  border:1px solid #b8bcc2;
  font-weight:700;
}

.hd-btn{
  min-width:116px;
  background:#f2f2f2;
  color:#222;
}

.alt-btn{
  min-width:54px;
  background:linear-gradient(90deg,#f6dd74 0%,#e7d98e 45%,#c7a8d8 100%);
  color:#2b2140;
}

.disabled-look{
  opacity:.95;
}

.desktop-rate-strip{
  background:#f8fafc;
  border:1px solid #d9e0e7;
  border-radius:8px;
  padding:8px 12px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:10px;
  font-size:.92rem;
}

.desktop-fortnight-card{
  background:#fff;
  border:1px solid #c8cfd7;
  border-radius:8px;
  margin:10px 0;
  overflow:hidden;
}

.desktop-fortnight-header{
  min-height:38px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#f4f5f6;
  border-bottom:1px solid #d9dee3;
}

.period-label{
  white-space:nowrap;
  font-size:.95rem;
}

.period-pay-summary{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  font-size:.86rem;
  flex-wrap:wrap;
}

.gross-value{
  font-weight:700;
}

.desktop-date-row{
  display:grid;
  grid-template-columns:repeat(14,minmax(0,1fr));
  width:100%;
}

.desktop-day{
  min-width:0;
  border-right:1px solid #d9dee3;
  background:#fff;
}

.desktop-day:last-child{
  border-right:0;
}

.desktop-day.past{
  background:#d8d8d8;
}

.desktop-day.today{
  position:relative;
  z-index:1;
  box-shadow:inset 0 0 0 3px #179447;
}

.desktop-date-box{
  height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#ececec;
  border-bottom:1px solid #c8c8c8;
  line-height:1.1;
}

.desktop-day.past .desktop-date-box{
  background:#bfbfbf;
}

.desktop-date-box .weekday{
  font-weight:700;
  font-size:.82rem;
}

.desktop-date-box .date{
  font-size:.78rem;
  margin-top:3px;
}

.desktop-roster-entry{
  padding:5px;
}

.desktop-shift-box{
  width:100%;
  height:30px;
  padding:4px 5px;
  margin:0 0 4px;
  text-align:center;
  font-weight:600;
  font-size:.84rem;
  border:1px solid #bfc8d2;
  border-radius:4px;
  background:#fff;
}

.desktop-save-btn{
  width:100%;
  padding:5px 2px;
  border-radius:4px;
  font-size:.75rem;
}

.desktop-ot-area{
  padding:5px;
  border-top:1px solid #d9dee3;
  min-height:66px;
}

.desktop-ot-display{
  padding:3px 4px;
  margin-bottom:4px;
  background:#cdebd2;
  border-radius:4px;
  font-size:.7rem;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.desktop-ot-entry input{
  width:100%;
  height:27px;
  padding:4px;
  margin:0 0 4px;
  font-size:.75rem;
  text-align:center;
}

.desktop-ot-entry button,
.desktop-clear-ot{
  width:100%;
  padding:5px 2px;
  border-radius:4px;
  font-size:.69rem;
  white-space:nowrap;
}

.desktop-clear-ot{
  margin-top:4px;
  background:#68778a;
}

.desktop-bottom-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:12px;
}

.desktop-nav-buttons{
  display:flex;
  gap:7px;
}

.desktop-adjustments{
  margin-left:auto;
}

/* Keep all 14 days visible. Shrink controls rather than introducing a horizontal scrollbar. */
@media(max-width:1450px){
  main{max-width:none}
  .desktop-roster-page{max-width:none}
  .desktop-date-box{height:44px}
  .desktop-date-box .weekday{font-size:.74rem}
  .desktop-date-box .date{font-size:.7rem}
  .desktop-shift-box{font-size:.74rem;padding:3px}
  .desktop-save-btn,.desktop-ot-entry button,.desktop-clear-ot{font-size:.62rem}
  .desktop-ot-entry input{font-size:.66rem;padding:3px}
}

@media(max-width:1100px){
  .desktop-roster-topbar{align-items:flex-start;flex-direction:column}
  .desktop-controls{width:100%;justify-content:space-between}
  .desktop-rank-form{flex:1}
  .desktop-rank-form select{width:100%}
  .period-pay-summary{font-size:.74rem;gap:8px}
  .desktop-date-box .weekday{font-size:.66rem}
  .desktop-date-box .date{font-size:.62rem}
  .desktop-shift-box{font-size:.65rem}
  .desktop-ot-entry input{font-size:.6rem}
  .desktop-ot-entry button,.desktop-clear-ot,.desktop-save-btn{font-size:.57rem}
}


/* === Desktop prototype matched roster layout === */
main{max-width:none;margin:0;padding:0 8px 18px}
.prototype-roster{font-size:13px;color:#111;background:#efefef;padding:8px}
.prototype-title-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.prototype-title-row h1{font-size:22px;margin:0}
.profile-label{color:#555}
.small-home-btn,.small-btn,.apply-ranks-btn{
  display:inline-block;background:#ececec;color:#111;border:1px solid #a7a7a7;border-radius:0;
  padding:5px 12px;text-decoration:none;cursor:pointer;font-size:12px
}
.prototype-control-row{display:flex;justify-content:space-between;align-items:flex-start;margin:4px 0 10px}
.rank-controls{display:flex;align-items:center;gap:8px}
.rank-controls select{width:135px;padding:3px;margin:0;border-radius:0}
.hd-rank-label{margin-left:12px}
.top-right-controls{display:grid;grid-template-columns:auto auto;gap:4px 8px;align-items:center}
.jump-form{display:flex;gap:5px}.jump-form input{width:130px;margin:0;padding:3px}.jump-form button{padding:5px 10px;border-radius:0}
.toil-summary{grid-column:1/3;text-align:right;color:#8a5d00}
.prototype-help{font-size:11px;color:#444;margin:6px 0 10px}
.rate-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.rate-panels fieldset{background:#f8f8f8;border:1px solid #c7c7c7;padding:8px}
.rate-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;font-size:11px}
.prototype-fortnight{background:#f6f6f6;border:1px solid #9e9e9e;margin:10px 0;padding:10px}
.prototype-fortnight-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.period-meta{display:flex;gap:36px;font-size:14px}
.line-hd-controls{display:flex;gap:8px}.line-hd-controls form{margin:0}
.hd-line-btn,.alt-line-btn{min-width:82px;background:#ececec;color:#111;border:1px solid #999;border-radius:0;padding:5px 10px}
.hd-line-btn.hd-active{background:#7a4fa3;color:#fff}.alt-line-btn{min-width:52px}.alt-line-btn.alt-active{background:linear-gradient(90deg,#f4d95b,#c19ad9)}
.prototype-days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px}
.prototype-day{min-width:0}.prototype-date-box{height:30px;background:#ececec;border:1px solid #111;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px}
.prototype-day.past .prototype-date-box{background:#bdbdbd}.prototype-day.today .prototype-date-box{outline:3px solid #008a2e;outline-offset:2px}
.prototype-shift-input{width:100%;height:22px;margin:6px 0 4px;padding:2px;border:1px solid #111;border-radius:0;background:#fff;box-sizing:border-box}
.ot-toil-open{width:100%;height:22px;padding:1px 2px;background:#ececec;color:#111;border:1px solid #aaa;border-radius:0;font-size:10px}
.ot-toil-open.has-ot{background:#cfe8d4}.ot-toil-open.has-toil{background:#f5edcf}.ot-toil-open.both{background:linear-gradient(90deg,#cfe8d4,#f5edcf)}
.prototype-fortnight-footer{display:grid;grid-template-columns:120px 160px 1fr;gap:10px;margin-top:8px;align-items:center}
.after-deductions{text-align:right;font-size:14px}
.prototype-bottom-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-backdrop.open{display:flex}.modal-window{background:#efefef;border:1px solid #888;box-shadow:0 8px 28px rgba(0,0,0,.28);width:560px;max-width:94vw}
.adjustments-window{width:760px}.modal-titlebar{background:#fff;border-bottom:1px solid #bbb;padding:7px 10px;display:flex;justify-content:space-between;align-items:center}
.modal-close{background:transparent;color:#111;border:0;font-size:22px;padding:0 6px}.modal-body{padding:12px}
.ot-toil-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ot-toil-columns fieldset{border:1px solid #c3c3c3;background:#f4f4f4;padding:10px}
.ot-toil-columns input,.ot-toil-columns select{margin:4px 0 8px;padding:5px;border-radius:0}
.check-row{display:block;font-weight:400;margin:5px 0}.check-row input{width:auto;margin-right:6px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.secondary-btn{background:#ececec;color:#111;border:1px solid #aaa}
.adjustment-list{margin-top:12px}.adjustment-row{display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid #ccc;padding:6px 0}.danger-btn{background:#b91c1c}
@media(max-width:1150px){
  .rate-panels{grid-template-columns:1fr}.rate-grid{grid-template-columns:repeat(3,1fr)}
  .prototype-control-row{flex-direction:column;gap:10px}.top-right-controls{align-self:flex-end}
  .period-meta{gap:14px;font-size:12px}.prototype-days{gap:2px}.prototype-date-box{font-size:9px}.ot-toil-open{font-size:8px}
}


/* v0.3 Phase 3: keep desktop positioning, restore browser/home-page visual styling */
body{background:#f4f7fa;color:#172033}
.prototype-roster{background:transparent;color:#172033;padding:18px 20px 24px}
.prototype-title-row h1{font-size:28px;color:#172033}
.profile-label,.prototype-help{color:#667892}
.small-home-btn,.small-btn,.apply-ranks-btn{
  background:#173f6d;color:#fff;border:0;border-radius:7px;
  padding:7px 13px;font-weight:600
}
.small-home-btn:hover,.small-btn:hover,.apply-ranks-btn:hover{background:#12345b;color:#fff}
.rank-controls select,.jump-form input{
  background:#fff;border:1px solid #cbd5e1;border-radius:7px;padding:7px
}
.jump-form button{
  background:#173f6d;color:#fff;border:0;border-radius:7px;padding:7px 12px
}
.rate-panels.browser-cards{gap:12px}
.rate-card{
  background:#fff;border:1px solid #d4dde7;border-radius:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);overflow:hidden
}
.rate-card-title{
  padding:9px 12px;background:#f7f9fb;border-bottom:1px solid #dce3ea;
  font-size:12px;font-weight:700;color:#172033
}
.desktop-rate-table{
  display:grid;grid-template-columns:1.45fr .9fr 1fr .9fr;
  gap:18px;padding:10px 12px 11px;font-size:11px
}
.rate-col{min-width:0}
.rate-heading{font-weight:700;margin-bottom:5px;color:#172033}
.rate-col>div:not(.rate-heading){
  display:flex;justify-content:flex-start;gap:10px;white-space:nowrap;
  min-height:20px;align-items:center
}
.rate-col span{color:#26364b}
.rate-col strong{color:#081a31}
.hourly-col>div:not(.rate-heading){justify-content:space-between}
.prototype-fortnight{
  background:#fff;border:1px solid #d4dde7;border-radius:9px;
  box-shadow:0 1px 2px rgba(15,23,42,.04)
}
.prototype-date-box{
  background:#f1f3f5;border:1px solid #aeb8c4;border-radius:2px;color:#172033
}
.prototype-day.past .prototype-date-box{background:#c8c8c8}
.prototype-shift-input{
  border:1px solid #aeb8c4;border-radius:3px
}
.ot-toil-open{
  background:#f7f9fb;color:#172033;border:1px solid #b7c1cc;border-radius:3px
}
.hd-line-btn,.alt-line-btn{
  border:1px solid #aeb8c4;border-radius:4px
}
.prototype-fortnight-footer{color:#172033}
.modal-window{
  background:#f7f9fb;border:1px solid #aeb8c4;border-radius:8px;overflow:hidden
}
.modal-titlebar{background:#fff}
.ot-toil-columns fieldset{background:#fff;border:1px solid #d4dde7;border-radius:6px}

@media(max-width:1150px){
  .desktop-rate-table{grid-template-columns:1.4fr .9fr .9fr .9fr;gap:8px;font-size:9px}
}

.toil-summary-button{border:0;background:transparent;padding:0;cursor:pointer;font-size:inherit}.wage-breakdown-open{background:transparent;color:inherit;border:0;padding:0;cursor:pointer;text-align:left}.after-deductions.wage-breakdown-open{text-align:right}.prototype-day.toiled .prototype-date-box,.prototype-day.toiled .prototype-shift-input{background:#f5edcf}.breakdown-window{width:430px}.breakdown-info{display:flex;gap:12px;align-items:center;margin-bottom:12px}.info-circle{width:34px;height:34px;border-radius:50%;background:#1677d2;color:white;display:flex;align-items:center;justify-content:center;font-size:20px}.breakdown-grid{display:grid;grid-template-columns:1fr auto;gap:4px 14px;max-width:330px;margin:auto}.breakdown-grid.total{margin-top:10px}.toil-summary-window{width:620px}.toil-breakdown-grid{display:grid;grid-template-columns:1fr auto;gap:8px 18px;max-width:340px}.toil-use-form{display:grid;grid-template-columns:120px 160px auto;gap:7px 10px;align-items:center}.toil-use-form input{margin:0}.toil-usage-table{margin-top:14px;border:1px solid #cbd5e1}.toil-usage-head,.toil-usage-row{display:grid;grid-template-columns:1.2fr .7fr .7fr 1fr .7fr;gap:6px;padding:7px;border-bottom:1px solid #e2e8f0}.toil-usage-head{font-weight:700;background:#f8fafc}.printable-page{max-width:none;padding:18px}.printable-toolbar{display:flex;justify-content:space-between;align-items:flex-start}.printable-toolbar>div:first-child{display:flex;align-items:center;gap:14px}.printable-toolbar h1{margin:0}.printable-actions{display:flex;gap:8px;align-items:center}.printable-actions form{display:flex;gap:5px}.printable-actions input{margin:0;width:140px}.printable-control-card{background:#fff;border:1px solid #d7dce1;border-radius:8px;padding:10px 12px;margin:8px 0}.printable-control-card h3{margin:0 0 7px}.printable-control-card>form{display:flex;gap:8px;align-items:center}.printable-control-card input,.printable-control-card select{width:auto;margin:0;padding:6px}.period-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.period-chip{display:flex;align-items:center;gap:4px;background:#eef2f7;padding:4px 7px;border-radius:5px;font-size:11px}.period-chip.purple{background:#e6d7f2}.period-chip form{display:inline}.period-chip button{padding:0 4px;background:transparent;color:#555}.print-period{background:#fff;border:1px solid #d7dce1;border-radius:7px;padding:8px;margin:10px 0;overflow:hidden}.period-caption{font-size:12px;margin-bottom:5px}.print-grid{display:grid;grid-template-columns:95px repeat(28,minmax(0,1fr));font-size:9px}.print-grid>div,.print-cell{height:26px;border:1px solid #222;border-right:0;border-bottom:0;padding:2px;text-align:center;min-width:0}.print-grid>div:last-child,.print-cell-form:last-child .print-cell{border-right:1px solid #222}.print-grid.labels>div:first-child,.editable-row>div:first-child{background:#f47c28;color:#fff;font-weight:700;text-align:left;padding-left:6px}.print-cell-form{min-width:0}.print-cell{width:100%;margin:0;border-radius:0;background:#fff;font-size:9px}.print-date.payday{box-shadow:inset 0 0 0 2px #f47c28}.print-date.today{box-shadow:inset 0 0 0 3px #159447}.print-date.leave,.print-cell.leave{background:#111;color:#f33;font-weight:700}.print-date.hd,.print-cell.hd{background:#7b4ca5;color:#fff}.print-date.toiled,.print-cell.toiled{background:#f5edcf}.print-bottom{display:flex;gap:8px;margin-top:12px}@media print{header,.printable-toolbar,.printable-control-card,.print-bottom{display:none!important}.printable-page{padding:0}.print-period{break-inside:avoid}}

/* Home page admin card reposition */
.user-dashboard-cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.admin-wide-card{
  margin-top:18px;
  background:#fff;
  border:1px solid #d7dce1;
  border-radius:12px;
  padding:18px 22px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.admin-wide-heading{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:320px;
}
.admin-wide-heading h2{
  margin:0 0 5px;
}
.admin-wide-heading p{
  margin:0;
  color:#64748b;
}
.admin-wide-actions{
  flex:1;
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:10px;
}
.admin-wide-actions .btn{
  text-align:center;
  white-space:nowrap;
}
@media(max-width:1000px){
  .user-dashboard-cards{grid-template-columns:1fr}
  .admin-wide-card{flex-direction:column;align-items:stretch}
  .admin-wide-actions{grid-template-columns:repeat(2,minmax(150px,1fr))}
}


/* Printable Roster sync/read-only notes update */
.roster-readonly-row>div:first-child,
.notes-row>div:first-child{
  background:#f47c28;
  color:#fff;
  font-weight:700;
  text-align:left;
  padding-left:6px;
}
.print-roster-cell,
.print-note-cell{
  height:26px;
  min-width:0;
  margin:0;
  padding:0;
  border:1px solid #222;
  border-right:0;
  border-bottom:0;
  border-radius:0;
  box-sizing:border-box;
}
.print-roster-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#111;
  font-size:9px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.roster-readonly-row .print-roster-cell:last-child,
.notes-row .print-note-cell:last-child{
  border-right:1px solid #222;
}
.print-roster-cell.leave{
  background:#111 !important;
  color:#f33 !important;
  font-weight:700;
}
.print-roster-cell.hd{
  background:#7b4ca5 !important;
  color:#fff !important;
}
.print-roster-cell.toiled{
  background:#f5edcf !important;
  color:#111 !important;
  font-weight:700;
}
.print-note-cell{
  position:relative;
  width:100%;
  background:#fff;
  color:#173f6d;
  cursor:pointer;
}
.print-note-cell:hover,
.print-note-cell:focus{
  background:#eef5fd;
  outline:2px solid #77a8dd;
  outline-offset:-2px;
}
.note-indicator{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:13px;
  line-height:1;
}
.note-modal-window{
  width:430px;
  max-width:92vw;
}
.note-modal-window textarea{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:120px;
  margin-top:6px;
  padding:8px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  font:inherit;
}
@media print{
  .print-note-cell{
    border-radius:0;
  }
}


/* ===== v0.3 Rank / HD / colour / leave update ===== */
.prototype-shift-input{
  text-align:center !important;
}

.inline-check{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:500;
}
.inline-check input{
  width:auto;
  margin:0;
}
.rank-move-actions{
  display:flex;
  gap:5px;
}
.rank-move-actions form{
  display:inline-block;
}
.rank-move-actions button{
  min-width:34px;
  padding:6px 8px;
}
.rank-colour-form{
  display:flex;
  align-items:center;
  gap:8px;
}
.rank-colour-form input[type=color]{
  width:48px;
  height:34px;
  padding:2px;
  margin:0;
}

/* Higher Duties visual states */
.hd-full-fortnight{
  border-color:var(--hd-color,#8f65b5);
  box-shadow:inset 0 0 0 1px var(--hd-color,#8f65b5);
}
.hd-full-fortnight .prototype-day{
  background:var(--hd-color,#8f65b5);
}
.hd-full-fortnight .prototype-date-box,
.hd-full-fortnight .prototype-shift-input,
.hd-full-fortnight .ot-toil-open{
  background:var(--hd-color,#8f65b5) !important;
  border-color:rgba(60,30,80,.55);
}
.hd-full-fortnight .prototype-shift-input,
.hd-full-fortnight .prototype-date-box,
.hd-full-fortnight .ot-toil-open{
  color:#111;
}
.hd-line-btn.hd-partial{
  background:rgba(143,101,181,.35);
  box-shadow:0 0 8px rgba(143,101,181,.7);
  color:#2e1743;
  font-weight:700;
}
.prototype-day.hd-date:not(.rec-leave){
  background:var(--cell-color,#8f65b5);
}
.prototype-day.hd-date:not(.rec-leave) .prototype-date-box,
.prototype-day.hd-date:not(.rec-leave) .prototype-shift-input,
.prototype-day.hd-date:not(.rec-leave) .ot-toil-open{
  background:var(--cell-color,#8f65b5) !important;
  color:#111;
}
.prototype-day.custom-colour-date:not(.hd-date):not(.rec-leave):not(.toiled) .prototype-shift-input{
  background:var(--cell-color,#fff) !important;
}

/* Recreational Leave has highest visual priority and is locked. */
.prototype-day.rec-leave{
  background:#111 !important;
}
.prototype-day.rec-leave .prototype-date-box,
.prototype-day.rec-leave .prototype-shift-input,
.prototype-day.rec-leave .ot-toil-open{
  background:#111 !important;
  color:#ff3333 !important;
  font-weight:700;
}
.prototype-day.rec-leave .prototype-shift-input:disabled,
.prototype-day.rec-leave .ot-toil-open:disabled{
  opacity:1;
  cursor:not-allowed;
}

/* Right-click colour modal */
.compact-modal{
  width:470px;
  max-width:94vw;
}
.date-range-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.colour-history{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:10px;
}
.history-colour{
  width:28px;
  height:28px;
  border:1px solid #738096;
  border-radius:5px;
  padding:0;
}
.hd-activate-whole-form{
  margin-top:14px;
  border-top:1px solid #d6dce4;
  padding-top:12px;
}
.hd-activate-whole-form select{
  margin:5px 0 9px;
}

/* Printable Roster complete cell fills */
.print-roster-cell.custom{
  color:#111;
}
.print-date.hd,
.print-roster-cell.hd,
.print-date.leave,
.print-roster-cell.leave{
  background-clip:border-box !important;
}
.manage-period-window{
  width:590px;
  max-width:94vw;
}
.manage-period-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:9px 0;
  border-bottom:1px solid #e1e6ec;
}
.manage-period-row:last-child{
  border-bottom:0;
}
.manage-period-row form{
  margin:0;
}


/* ===== HD display refinement: match desktop layout ===== */
/* Full-fortnight HD: colour the line and date boxes only. */
.hd-full-fortnight{
  background:var(--hd-color,#8f65b5) !important;
}
.hd-full-fortnight .prototype-day{
  background:transparent !important;
}
.hd-full-fortnight .prototype-date-box{
  background:var(--hd-color,#8f65b5) !important;
  border-color:#222 !important;
  color:#111 !important;
}

/* Keep roster entry and OT/TOIL/ALL controls unaffected by HD colour. */
.hd-full-fortnight .prototype-shift-input{
  background:#fff !important;
  color:#111 !important;
  border-color:#222 !important;
}
.hd-full-fortnight .ot-toil-open{
  background:#f7f7f7 !important;
  color:#111 !important;
  border-color:#222 !important;
}

/* Partial/date-based HD follows the same rule: date/line colour only. */
.prototype-day.hd-date:not(.rec-leave){
  background:transparent !important;
}
.prototype-day.hd-date:not(.rec-leave) .prototype-date-box{
  background:var(--cell-color,#8f65b5) !important;
  color:#111 !important;
  border-color:#222 !important;
}
.prototype-day.hd-date:not(.rec-leave) .prototype-shift-input{
  background:#fff !important;
  color:#111 !important;
  border-color:#222 !important;
}
.prototype-day.hd-date:not(.rec-leave) .ot-toil-open{
  background:#f7f7f7 !important;
  color:#111 !important;
  border-color:#222 !important;
}

/* Preserve explicit user roster-box colours even during HD. */
.hd-full-fortnight .prototype-day.custom-colour-date .prototype-shift-input,
.prototype-day.hd-date.custom-colour-date:not(.rec-leave) .prototype-shift-input{
  background:var(--cell-color,#fff) !important;
}


/* ===== Shift code visual states ===== */
.prototype-shift-input.shift-filled{
  background:linear-gradient(90deg,#eaf4ff 0%,#d7ebff 50%,#eaf4ff 100%) !important;
  color:#111 !important;
}

.prototype-shift-input.shift-night{
  background:#173f6d !important;
  color:#fff !important;
  font-weight:700;
}

/* User custom roster colour remains the highest priority except for lowercase n. */
.prototype-day.custom-colour-date .prototype-shift-input.shift-filled{
  background:var(--cell-color,#fff) !important;
}
.prototype-day.custom-colour-date .prototype-shift-input.shift-night{
  background:#173f6d !important;
  color:#fff !important;
}

/* Recreational leave still overrides everything. */
.prototype-day.rec-leave .prototype-shift-input{
  background:#111 !important;
  color:#ff3333 !important;
}


/* ===== OT / TOIL desktop-style list window ===== */
.desktop-entry-modal{
  width:650px;
  max-width:94vw;
}
.desktop-entry-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.desktop-entry-columns fieldset{
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:6px;
  padding:10px;
}
.entry-list-box{
  min-height:118px;
  max-height:180px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #c4ccd5;
  margin-bottom:10px;
}
.entry-list-empty{
  padding:10px;
  color:#7a8797;
  font-size:.85rem;
}
.entry-list-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:6px 7px;
  border-bottom:1px solid #e4e8ed;
  font-size:.85rem;
}
.entry-list-row:last-child{
  border-bottom:0;
}
.entry-list-row form{
  margin:0;
}
.entry-remove-btn{
  padding:4px 8px;
  background:#ececec;
  color:#111;
  border:1px solid #aaa;
  border-radius:3px;
}
.entry-inline{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:7px;
  align-items:center;
  margin-bottom:7px;
}
.entry-inline input{
  margin:0;
}

/* Restore OT/TOIL/ALL status colours as final priority. */
.ot-toil-open.has-ot{
  background:#cfe8d4 !important;
  color:#111 !important;
}
.ot-toil-open.has-toil{
  background:#f5edcf !important;
  color:#111 !important;
}
.ot-toil-open.both{
  background:linear-gradient(90deg,#cfe8d4 0%,#dfe7d0 50%,#f5edcf 100%) !important;
  color:#111 !important;
}

/* These status colours remain visible even on HD fortnights. */
.hd-full-fortnight .ot-toil-open.has-ot,
.prototype-day.hd-date .ot-toil-open.has-ot{
  background:#cfe8d4 !important;
}
.hd-full-fortnight .ot-toil-open.has-toil,
.prototype-day.hd-date .ot-toil-open.has-toil{
  background:#f5edcf !important;
}
.hd-full-fortnight .ot-toil-open.both,
.prototype-day.hd-date .ot-toil-open.both{
  background:linear-gradient(90deg,#cfe8d4 0%,#dfe7d0 50%,#f5edcf 100%) !important;
}

@media(max-width:700px){
  .desktop-entry-columns{grid-template-columns:1fr}
}


/* ===== Used TOIL date lock ===== */
.prototype-day.toiled{
  background:#f5edcf !important;
}
.prototype-day.toiled .prototype-date-box,
.prototype-day.toiled .prototype-shift-input,
.prototype-day.toiled .ot-toil-open{
  background:#f5edcf !important;
  color:#111 !important;
  border-color:#b9aa77 !important;
}
.prototype-day.toiled .prototype-shift-input{
  font-weight:700;
}
.prototype-day.toiled .prototype-shift-input:disabled,
.prototype-day.toiled .ot-toil-open:disabled{
  opacity:1 !important;
  cursor:not-allowed;
}

/* TOILED cream overrides HD/custom colour states. */
.hd-full-fortnight .prototype-day.toiled .prototype-date-box,
.hd-full-fortnight .prototype-day.toiled .prototype-shift-input,
.hd-full-fortnight .prototype-day.toiled .ot-toil-open,
.prototype-day.toiled.hd-date .prototype-date-box,
.prototype-day.toiled.hd-date .prototype-shift-input,
.prototype-day.toiled.hd-date .ot-toil-open{
  background:#f5edcf !important;
  color:#111 !important;
}


/* ===== Fortnight allowance summary ===== */
.allowance-aware-footer{
  display:flex !important;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.allowance-aware-footer .fortnight-allowance-item{
  white-space:nowrap;
}
.allowance-aware-footer .after-deductions{
  margin-left:auto;
}


/* ===== Colour picker preview ===== */
.roster-colour-picker-row{display:flex;align-items:center;gap:10px}
.roster-colour-picker-row input[type="color"]{width:90px;height:42px;padding:3px;cursor:pointer}
.roster-colour-preview{display:inline-block;width:42px;height:32px;border:1px solid #64748b;border-radius:5px}
#roster-colour-hex{font-family:monospace;font-weight:700}

/* ===== Effective pay-rate change marker ===== */
.prototype-date-box.rate-change-date{position:relative;border:2px solid #d11b1b!important}
.rate-change-info{
  position:absolute;right:2px;top:2px;width:18px;height:18px;padding:0!important;
  border-radius:50%;background:#d11b1b!important;color:#fff!important;
  font-weight:800;line-height:16px;border:0!important;cursor:pointer
}
.history-toggle{display:inline-block;cursor:pointer;list-style:none;margin-bottom:8px}
.history-toggle::-webkit-details-marker{display:none}

/* ===== Printable roster readability ===== */
.print-roster-cell{display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:600}
.print-roster-cell span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Browser print / Save as PDF: landscape and wider cells. */
@media print{
  @page{size:A4 landscape;margin:8mm}
  html,body{width:100%;margin:0;padding:0}
  .printable-page{width:100%;padding:0!important}
  .print-period{break-inside:avoid;margin:0 0 5mm;padding:4px;border-radius:0}
  .print-grid{grid-template-columns:78px repeat(28,minmax(20px,1fr))!important;font-size:7.5pt!important}
  .print-grid>div,.print-cell,.print-note-cell{height:27px!important;padding:2px 1px!important}
  .print-roster-cell{font-size:7.5pt!important}
  .print-roster-cell span{white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
  .period-caption{font-size:9pt!important}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}


/* ===== Clear Colour / automatic shift-colour priority fix ===== */
.prototype-shift-input{
  background:#ffffff !important;
  color:#111111 !important;
}

/* Automatic colour for any normal non-empty shift code. */
.prototype-shift-input.shift-filled{
  background:linear-gradient(90deg,#eaf4ff 0%,#d7ebff 50%,#eaf4ff 100%) !important;
  color:#111111 !important;
}

/* A user custom colour may override blank/normal-code colour while assigned. */
.prototype-day.custom-colour-date:not(.rec-leave):not(.toiled) .prototype-shift-input:not(.shift-night){
  background:var(--cell-color,#ffffff) !important;
  color:#111111 !important;
}

/* Exact lowercase n always keeps its special night-shift appearance. */
.prototype-shift-input.shift-night,
.prototype-day.custom-colour-date .prototype-shift-input.shift-night,
.hd-full-fortnight .prototype-shift-input.shift-night,
.prototype-day.hd-date .prototype-shift-input.shift-night{
  background:#173f6d !important;
  color:#ffffff !important;
  font-weight:700 !important;
}

/* Locked states remain higher priority than roster-code/custom colours. */
.prototype-day.rec-leave .prototype-shift-input{
  background:#111111 !important;
  color:#ff3333 !important;
}
.prototype-day.toiled .prototype-shift-input{
  background:#f5edcf !important;
  color:#111111 !important;
}

.recovery-card{max-width:620px;margin:40px auto}
.recovery-card form,.recovery-settings-card form{display:grid;gap:8px}
.recovery-card input,.recovery-settings-card input,.recovery-settings-card select,.auth-card select{width:100%;box-sizing:border-box}
.login-help{text-align:center;margin-top:12px}


/* ===== v0.04 Phase 1: Instructions & Help ===== */
.help-wide-card{
  margin:16px 0;
  background:#fff;
  border:1px solid #d7dce1;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  padding:16px 20px;
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:16px;
}
.help-wide-icon{
  width:48px;height:48px;border-radius:12px;background:#e8f1fb;color:#173f6d;
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800
}
.help-wide-copy h2{margin:0 0 4px}
.help-wide-copy p{margin:0;color:#64748b}

.instructions-page{max-width:1500px;margin:0 auto;padding:8px 14px 30px}
.instructions-header{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-bottom:18px
}
.instructions-header h1{margin:12px 0 3px}
.instructions-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.instructions-tools input[type=search]{
  width:280px;margin:0;padding:9px 11px;border:1px solid #cbd5e1;border-radius:7px
}
.instructions-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px}
.instructions-nav{
  position:sticky;top:14px;align-self:start;background:#fff;border:1px solid #d7dce1;
  border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:4px;
  max-height:calc(100vh - 40px);overflow:auto
}
.instructions-nav strong{padding:4px 7px 8px}
.instructions-nav a{
  text-decoration:none;color:#28435f;padding:7px;border-radius:6px;font-size:.88rem
}
.instructions-nav a:hover{background:#edf4fb}
.instructions-content{min-width:0}
.help-section{
  background:#fff;border:1px solid #d7dce1;border-radius:10px;margin-bottom:10px;overflow:hidden
}
.help-section-title{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  background:#f7f9fb;color:#172033;border:0;padding:13px 15px;text-align:left;
  font-size:1rem;font-weight:700;border-radius:0
}
.help-section.open .help-section-title{border-bottom:1px solid #e2e7ed}
.help-chevron{transition:transform .15s ease}
.help-section.open .help-chevron{transform:rotate(180deg)}
.help-section-body{display:none;padding:14px 16px 16px;line-height:1.55}
.help-section.open .help-section-body{display:block}
.help-section-body h3{margin:7px 0 5px;font-size:1rem}
.help-section-body p{margin:7px 0}
.help-section-body li{margin:4px 0}
.help-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px}
.help-visual{
  border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;padding:12px;
  align-self:start;font-size:.86rem
}
.visual-title{font-weight:800;margin-bottom:9px;border-bottom:1px solid #dce3ea;padding-bottom:6px}
.visual-row{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e1e6eb;padding:8px;margin:5px 0;border-radius:6px}
.visual-row span{width:26px;text-align:center;font-weight:800;color:#173f6d}
.visual-top{display:flex;gap:5px;flex-wrap:wrap}
.visual-top span{background:#fff;border:1px solid #cbd5e1;padding:5px;border-radius:4px}
.visual-fortnight{margin-top:8px;border:1px solid #b9c2cd;background:#fff}
.visual-period{padding:7px;background:#eef1f4;display:flex;justify-content:space-between;gap:7px}
.visual-days{padding:8px;font-size:.72rem;word-spacing:3px}
.visual-footer{padding:6px;background:#f7f9fb;border-top:1px solid #dce3ea}
.visual-two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.visual-two-col>div{border:1px solid #d8dfe6;background:#fff;padding:8px}
.fake-list{height:74px;border:1px solid #cbd5e1;margin:6px 0;padding:5px;font-size:.78rem}
.fake-entry{border:1px solid #cbd5e1;padding:5px;margin-bottom:5px}
.help-status-row{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:8px 10px;align-items:center;margin:12px 0}
.status-sample{min-width:65px;text-align:center;padding:5px 8px;border:1px solid #aeb8c4;border-radius:4px;font-weight:700}
.status-sample.blank{background:#fff}
.status-sample.normal{background:#dceeff}
.status-sample.night{background:#173f6d;color:#fff}
.status-sample.ot{background:#cfe8d4}
.status-sample.toil{background:#f5edcf}
.status-sample.both{background:linear-gradient(90deg,#cfe8d4,#f5edcf)}
.formula-box{
  display:inline-block;background:#eef4fa;border:1px solid #c9d6e3;border-radius:6px;
  padding:10px 14px;font-family:monospace;font-size:1.05rem;font-weight:700
}
.red-text{color:#b91c1c}
.admin-help{border-color:#e0c394}
.admin-help .help-section-title{background:#fff8e8}
.help-reference-table{width:100%;border-collapse:collapse}
.help-reference-table th,.help-reference-table td{border:1px solid #d9e0e7;padding:8px;text-align:left;vertical-align:top}
.help-reference-table th{background:#f4f7fa}
.help-reference-table code{font-weight:700;color:#173f6d}
.help-no-results{background:#fff;border:1px dashed #cbd5e1;border-radius:8px;padding:25px;text-align:center;color:#64748b}

@media(max-width:950px){
  .instructions-header{align-items:flex-start;flex-direction:column}
  .instructions-layout{grid-template-columns:1fr}
  .instructions-nav{position:static;display:grid;grid-template-columns:repeat(2,1fr);max-height:none}
  .help-grid{grid-template-columns:1fr}
  .help-status-row{grid-template-columns:auto 1fr}
  .help-wide-card{grid-template-columns:48px 1fr}
  .help-wide-card .btn{grid-column:1/3}
}
@media print{
  .instructions-nav,.instructions-tools,.instructions-header .btn{display:none!important}
  .instructions-layout{display:block}
  .help-section{break-inside:avoid}
  .help-section-body{display:block!important}
  .help-section-title{background:#fff!important;border-bottom:1px solid #aaa}
}

/* ===== v0.04 Phase 1a: public Getting Started ===== */
.public-help-page{max-width:1200px;margin:28px auto;padding:0 16px}
.public-help-header{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.public-help-header h1{margin:0 0 3px}
.static-help-title{cursor:default}
.login-help-link,.login-getting-started a{
  display:inline-block;margin-left:10px;color:#173f6d;font-weight:700;text-decoration:none
}
.login-help-link:hover,.login-getting-started a:hover{text-decoration:underline}
.login-getting-started{text-align:center;margin-top:12px}

/* ===== v0.04 Phase 1b: Admin recovery icon on login screen ===== */
.admin-recovery-icon{
  position:fixed;
  right:22px;
  bottom:18px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#173f6d;
  text-decoration:none;
  z-index:1000;
  line-height:1;
  transition:transform .12s ease, opacity .12s ease;
}
.admin-recovery-icon:hover{
  transform:scale(1.06);
  text-decoration:none;
}
.recovery-gear{
  position:absolute;
  font-size:48px;
  font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;
  line-height:1;
}
.recovery-check{
  position:absolute;
  top:16px;
  left:16px;
  font-size:18px;
  line-height:1;
  font-weight:900;
  color:white;
  text-shadow:0 0 1px #173f6d;
}
@media (max-width:700px){
  .admin-recovery-icon{right:12px;bottom:12px;width:42px;height:42px}
  .recovery-gear{font-size:42px}
  .recovery-check{top:14px;left:14px;font-size:16px}
}

/* ===== v0.04 Phase 2: Security hardening ===== */
.security-warning{color:#a45b00;font-weight:700}
.login-security-note{
  max-width:560px;margin:14px auto 0;text-align:center;color:#64748b;font-size:.82rem
}

/* ===== v0.04 Phase 3: Backup & Recovery ===== */
.backup-page{max-width:1450px;margin:0 auto;padding:8px 16px 30px}
.backup-header h1{margin:12px 0 3px}
.backup-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.backup-summary-card{margin:0}
.backup-stat{font-size:2rem;font-weight:800;color:#173f6d;margin:8px 0}
.restore-warning-card{border-color:#e0b0a9}
.backup-table-wrap{overflow-x:auto}
.backup-table{width:100%;border-collapse:collapse}
.backup-table th,.backup-table td{border-bottom:1px solid #dce3ea;padding:10px 8px;text-align:left;vertical-align:top}
.backup-table th{background:#f6f8fa}
.backup-ok{display:inline-block;background:#e2f4e6;color:#17662a;border-radius:999px;padding:3px 8px;font-weight:700;font-size:.8rem}
.checksum-code{font-size:.72rem;color:#64748b}
.backup-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.restore-details{position:relative}
.restore-details summary{list-style:none;cursor:pointer}
.restore-details summary::-webkit-details-marker{display:none}
.restore-confirm-form{
  width:300px;position:absolute;right:0;top:42px;z-index:50;background:#fff;
  border:1px solid #cf9c95;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.14);
  padding:12px
}
.restore-confirm-form input,.backup-upload-form input{width:100%;box-sizing:border-box;margin:5px 0 10px}
.backup-upload-form{max-width:600px;display:grid;gap:4px}
.backup-location-note{margin-top:12px;color:#64748b;font-size:.82rem}
.admin-wide-actions{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))!important}
@media(max-width:900px){
  .backup-summary-grid{grid-template-columns:1fr}
  .restore-confirm-form{position:fixed;left:50%;top:50%;right:auto;transform:translate(-50%,-50%);max-width:88vw}
}

/* ===== v0.04 Phase 4: Production / system status ===== */
.system-status-page{max-width:1350px;margin:0 auto;padding:8px 16px 30px}
.system-status-header{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.system-status-header h1{margin:0 0 3px}
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.status-card{
  display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #d7dce1;
  border-radius:10px;padding:14px
}
.status-card p{margin:4px 0 0;color:#64748b}
.status-light{width:13px;height:13px;border-radius:50%;margin-top:4px;flex:0 0 auto;background:#aab3bd}
.status-light.ok{background:#2f9e44}.status-light.warn{background:#e69f00}.status-light.bad{background:#d53030}.status-light.neutral{background:#7b8794}
.readiness-banner{padding:10px 12px;border-radius:7px;font-weight:700;margin:9px 0}
.readiness-banner.ready{background:#e2f4e6;color:#17662a}
.readiness-banner.development{background:#fff4d8;color:#795300}
.status-detail-table{width:100%;border-collapse:collapse}
.status-detail-table th,.status-detail-table td{padding:8px;border-bottom:1px solid #e1e6eb;text-align:left}
.status-detail-table th{width:190px}
.production-checklist li{margin:8px 0}
.error-page-card{max-width:620px;margin:80px auto;text-align:center;background:#fff;border:1px solid #d7dce1;border-radius:12px;padding:28px}
.error-code{font-size:3rem;font-weight:900;color:#64748b}
@media(max-width:900px){.status-grid{grid-template-columns:1fr}}


/* ==========================================================
   v0.05 Phase 1 — Login + Home artwork
   Artwork is deliberately scoped to these two screens only.
   ========================================================== */
body.artwork-page {
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(8, 18, 32, .18), rgba(8, 18, 32, .18)),
    url("/static/ntdoc_background.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.artwork-page header {
  background: rgba(18, 55, 94, .94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0,0,0,.24);
}

body.login-artwork-page main,
body.dashboard-artwork-page main {
  position: relative;
  z-index: 1;
}

/* Keep the existing login structure, but make it readable over the artwork. */
body.login-artwork-page main > .card {
  margin-top: clamp(48px, 9vh, 110px) !important;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body.login-artwork-page .login-security-note {
  display: block;
  width: fit-content;
  max-width: min(760px, calc(100vw - 40px));
  margin: 18px auto;
  padding: 8px 13px;
  border-radius: 8px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

/* Home page: preserve the approved card layout and simply lift it above artwork. */
body.dashboard-artwork-page .dashboard-shell {
  margin-top: 18px;
  padding: 22px 24px 26px;
  border-radius: 16px;
  background: rgba(247,250,253,.88);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body.dashboard-artwork-page .dashboard-card,
body.dashboard-artwork-page .help-wide-card,
body.dashboard-artwork-page .admin-wide-card {
  background: rgba(255,255,255,.94);
}

@media (max-width: 900px) {
  body.artwork-page {
    background-attachment: scroll;
    background-position: center center;
  }
  body.dashboard-artwork-page .dashboard-shell {
    padding: 14px;
    border-radius: 12px;
  }
}

@media (max-width: 600px) {
  body.artwork-page {
    /* Preserve the central shield on narrow displays. */
    background-position: center top;
  }
  body.login-artwork-page main > .card {
    margin-top: 28px !important;
  }
}

/* ==========================================================
   v0.05 Phase 2 — Full-build visual theme prototype
   VISUAL ONLY: existing page structure/positions are untouched.
   ========================================================== */
:root{
  --theme-black:rgba(8,10,12,.90);
  --theme-black-soft:rgba(13,15,18,.82);
  --theme-panel:rgba(18,19,21,.88);
  --theme-orange:#e86f0c;
  --theme-orange-soft:#f08a2b;
  --theme-silver:#aeb4bb;
  --theme-text:#f5f7fa;
  --theme-muted:#c4c9cf;
}
body.full-theme-page{
  color:var(--theme-text);
  background-color:#08090a;
  background-image:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.42)),url('/static/ntdoc_background.png');
  background-size:cover;background-position:center center;background-attachment:fixed;background-repeat:no-repeat;
}
body.full-theme-page header{
  background:linear-gradient(180deg,rgba(8,10,12,.97),rgba(13,15,18,.94));
  border-bottom:1px solid rgba(232,111,12,.75);box-shadow:0 3px 16px rgba(0,0,0,.55)
}
body.full-theme-page main{max-width:none}
body.full-theme-page .muted,body.full-theme-page .prototype-help,body.full-theme-page .profile-label{color:var(--theme-muted)}
body.full-theme-page h1,body.full-theme-page h2,body.full-theme-page h3,body.full-theme-page label{color:var(--theme-text)}
body.full-theme-page a{transition:filter .12s ease,box-shadow .12s ease}
body.full-theme-page button:not(.shift-save):not(.ot-toil-open):not(.hd-line-btn):not(.alt-line-btn):not(.rate-change-info),
body.full-theme-page .btn,body.full-theme-page .small-btn,body.full-theme-page .small-home-btn{
  background:linear-gradient(180deg,#202327,#0c0e10);color:#fff;border:1px solid #5b6066;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.35)
}
body.full-theme-page button:hover,body.full-theme-page .btn:hover{filter:brightness(1.16)}
body.full-theme-page .orange{background:linear-gradient(180deg,#f58b2c,#cf5700)!important;border-color:#ff9c45!important}
body.full-theme-page input,body.full-theme-page select,body.full-theme-page textarea{
  background:rgba(245,247,249,.96);color:#111;border-color:#70767d
}

/* Roster Calculator — skin only; grid/layout rules remain unchanged. */
body.full-theme-page .prototype-roster{background:transparent;color:var(--theme-text)}
body.full-theme-page .prototype-title-row h1{color:var(--theme-text)}
body.full-theme-page .rate-card,
body.full-theme-page .prototype-fortnight{
  background:linear-gradient(180deg,rgba(13,15,17,.92),rgba(7,9,11,.90));
  border:1px solid rgba(232,111,12,.72);box-shadow:0 5px 18px rgba(0,0,0,.36)
}
body.full-theme-page .rate-card-title,
body.full-theme-page .prototype-fortnight-header,
body.full-theme-page .prototype-fortnight-footer,
body.full-theme-page .rate-heading,
body.full-theme-page .rate-col span,
body.full-theme-page .rate-col strong{color:var(--theme-text)}
body.full-theme-page .rate-card-title{border-bottom-color:#555;background:rgba(0,0,0,.28)}
body.full-theme-page .prototype-date-box{background:rgba(31,33,36,.94);color:#fff;border-color:#6d7176}
body.full-theme-page .prototype-day.past .prototype-date-box{background:#45484c;color:#eee}
body.full-theme-page .prototype-shift-input{background:#fff;color:#111;border-color:#767b80}
body.full-theme-page .prototype-shift-input:not(.shift-filled):not(.shift-night):disabled{background:#ececec}
body.full-theme-page .ot-toil-open{background:linear-gradient(180deg,#292c30,#101214);color:#fff;border:1px solid #646970}
body.full-theme-page .hd-line-btn,body.full-theme-page .alt-line-btn{box-shadow:0 2px 5px rgba(0,0,0,.35)}
/* Do not override functional HD/shift/custom/TOIL/leave colours. */
body.full-theme-page .hd-full-fortnight,
body.full-theme-page .hd-partial-fortnight{box-shadow:0 0 0 1px rgba(255,255,255,.05),0 5px 18px rgba(0,0,0,.4)}
body.full-theme-page .wage-breakdown-open,body.full-theme-page .toil-summary-button{color:inherit!important;background:transparent!important;border:0!important;box-shadow:none!important}

/* Printable Roster — preserve the 28-day geometry exactly. */
body.full-theme-page .printable-page{background:transparent;color:var(--theme-text)}
body.full-theme-page .printable-control-card,
body.full-theme-page .print-period{
  background:linear-gradient(180deg,rgba(15,17,19,.92),rgba(8,10,12,.90));
  border-color:rgba(232,111,12,.72);box-shadow:0 4px 14px rgba(0,0,0,.32)
}
body.full-theme-page .period-caption{color:#fff;font-weight:700}
body.full-theme-page .print-grid.labels>div:not(:first-child){background:rgba(235,238,241,.96);color:#111}
body.full-theme-page .print-grid>div,body.full-theme-page .print-cell,body.full-theme-page .print-note-cell{border-color:#555}
body.full-theme-page .print-roster-cell:not(.leave):not(.toiled):not(.hd):not(.custom){color:#111}
body.full-theme-page .print-note-cell{background:#f7f7f7;color:#111}

/* Modals and admin/general cards receive the same metallic dark treatment. */
body.full-theme-page .modal-backdrop{background:rgba(0,0,0,.66)}
body.full-theme-page .modal-window,
body.full-theme-page .card,
body.full-theme-page .status-card,
body.full-theme-page .error-page-card{
  background:linear-gradient(180deg,rgba(24,26,29,.98),rgba(10,12,14,.98));color:var(--theme-text);
  border-color:rgba(232,111,12,.72);box-shadow:0 12px 34px rgba(0,0,0,.55)
}
body.full-theme-page .modal-titlebar{background:#101214;color:#fff;border-bottom-color:#e86f0c}
body.full-theme-page .modal-close{color:#fff;background:transparent!important;border:0!important;box-shadow:none!important}
body.full-theme-page table{background:rgba(10,12,14,.86);color:#fff}
body.full-theme-page th{background:#202327;color:#fff}
body.full-theme-page td,body.full-theme-page th{border-bottom-color:#494d52}
body.full-theme-page .dashboard-info{background:rgba(12,25,39,.90);border-color:#365d82;color:#fff}

/* Dashboard phase-1 white shell removal + spaced cards over central artwork. */
body.dashboard-artwork-page .dashboard-shell{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.dashboard-artwork-page .dashboard-heading{background:rgba(7,9,11,.72);border:1px solid rgba(232,111,12,.55);border-radius:12px;padding:12px 16px;width:max-content;max-width:100%}
body.dashboard-artwork-page .dashboard-cards{gap:clamp(22px,5vw,90px)}
body.dashboard-artwork-page .dashboard-card,
body.dashboard-artwork-page .help-wide-card,
body.dashboard-artwork-page .admin-wide-card{
  background:linear-gradient(180deg,rgba(20,22,24,.94),rgba(5,7,8,.94));color:#fff;
  border:1px solid rgba(232,111,12,.78);box-shadow:0 8px 25px rgba(0,0,0,.5)
}
body.dashboard-artwork-page .dashboard-card h2,body.dashboard-artwork-page .dashboard-card p{color:#fff}

/* Keep printed output clean/readable rather than printing the screen artwork. */
@media print{
 body.full-theme-page{background:#fff!important;color:#000!important;background-image:none!important}
 body.full-theme-page .print-period{background:#fff!important;color:#000!important;box-shadow:none!important;border-color:#aaa!important}
 body.full-theme-page .period-caption{color:#000!important}
}


/* ==========================================================
   v0.05 Phase 2a — Theme readability corrections
   Targets only presentation. Existing geometry and behaviour stay unchanged.
   ========================================================== */

/* ---------- OT / TOIL and Deductions / Allowances modals ---------- */
body.full-theme-page .modal-window .modal-body{
  color:#f4f6f8;
  background:linear-gradient(180deg,rgba(13,15,17,.98),rgba(7,9,11,.98));
}

body.full-theme-page .modal-window fieldset{
  background:linear-gradient(180deg,rgba(24,26,29,.97),rgba(12,14,16,.97));
  color:#f4f6f8;
  border:1px solid rgba(232,111,12,.78);
  border-radius:8px;
}

body.full-theme-page .modal-window fieldset legend{
  color:#ff7a12;
  font-weight:800;
  padding:0 7px;
}

body.full-theme-page .modal-window label,
body.full-theme-page .modal-window p,
body.full-theme-page .modal-window .check-row,
body.full-theme-page .modal-window .adjustment-row{
  color:#f4f6f8;
}

body.full-theme-page .modal-window input:not([type="checkbox"]):not([type="color"]),
body.full-theme-page .modal-window select,
body.full-theme-page .modal-window textarea{
  background:linear-gradient(180deg,#17191c,#0d0f11);
  color:#fff;
  border:1px solid #636970;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55);
}

body.full-theme-page .modal-window input::placeholder,
body.full-theme-page .modal-window textarea::placeholder{
  color:#9aa4af;
  opacity:1;
}

body.full-theme-page .modal-window input[type="checkbox"]{
  accent-color:#e86f0c;
}

body.full-theme-page .entry-list-box{
  background:linear-gradient(180deg,#17191c,#0c0e10);
  color:#f4f6f8;
  border-color:#626870;
}

body.full-theme-page .entry-list-box:empty::before{
  color:#9aa4af;
}

body.full-theme-page .entry-list-row{
  color:#f4f6f8;
  border-bottom-color:#3f444a;
}

body.full-theme-page .modal-window button:not(.modal-close):not(.danger-btn){
  background:linear-gradient(180deg,#24272b,#101214);
  color:#fff;
  border:1px solid #5d636a;
  box-shadow:0 2px 6px rgba(0,0,0,.42);
}

body.full-theme-page .modal-window button:not(.modal-close):not(.danger-btn):hover{
  border-color:#e86f0c;
  color:#ff9a4a;
}

body.full-theme-page #modal-add-ot,
body.full-theme-page #modal-add-toil,
body.full-theme-page #adjustments-modal form > button[type="submit"]{
  border-color:#e86f0c;
  color:#ff8a2b;
}

body.full-theme-page .modal-actions{
  border-top-color:#34383d;
}

body.full-theme-page .adjustment-list{
  border-top-color:#3d4248;
}

/* ---------- Instructions & Help ---------- */
body.full-theme-page .instructions-page{
  color:#f4f6f8;
}

body.full-theme-page .instructions-header h1,
body.full-theme-page .instructions-header p{
  color:#f4f6f8;
  text-shadow:0 2px 5px rgba(0,0,0,.8);
}

body.full-theme-page .instructions-tools input[type="search"]{
  background:linear-gradient(180deg,#17191c,#0d0f11);
  color:#fff;
  border:1px solid rgba(232,111,12,.72);
}

body.full-theme-page .instructions-tools input[type="search"]::placeholder{
  color:#aab2bb;
}

body.full-theme-page .instructions-nav{
  background:linear-gradient(180deg,rgba(22,24,27,.97),rgba(8,10,12,.97));
  border:1px solid rgba(232,111,12,.78);
  box-shadow:0 7px 20px rgba(0,0,0,.42);
  color:#fff;
}

body.full-theme-page .instructions-nav strong{
  color:#ff7a12;
}

body.full-theme-page .instructions-nav a{
  color:#f2f4f6;
  border:1px solid transparent;
}

body.full-theme-page .instructions-nav a:hover,
body.full-theme-page .instructions-nav a:focus{
  color:#ff8b2d;
  background:rgba(232,111,12,.09);
  border-color:rgba(232,111,12,.55);
}

body.full-theme-page .help-section{
  background:linear-gradient(180deg,rgba(20,22,24,.97),rgba(8,10,12,.97));
  border:1px solid rgba(232,111,12,.78);
  box-shadow:0 5px 17px rgba(0,0,0,.38);
  color:#f4f6f8;
}

body.full-theme-page .help-section-title{
  background:linear-gradient(180deg,#25282c,#111315);
  color:#f7f8fa;
  border-bottom-color:rgba(232,111,12,.72);
}

body.full-theme-page .help-section-title:hover{
  color:#ff8b2d;
}

body.full-theme-page .help-section.open .help-section-title{
  color:#ff8b2d;
}

body.full-theme-page .help-section-body{
  background:linear-gradient(180deg,rgba(20,22,24,.96),rgba(10,12,14,.96));
  color:#f4f6f8;
}

body.full-theme-page .help-section-body h3,
body.full-theme-page .help-section-body strong,
body.full-theme-page .help-section-body p,
body.full-theme-page .help-section-body li{
  color:#f4f6f8;
}

body.full-theme-page .help-section-body h3{
  color:#ff7a12;
}

body.full-theme-page .help-visual{
  background:linear-gradient(180deg,#17191c,#0d0f11);
  border:1px solid rgba(232,111,12,.62);
  color:#f4f6f8;
}

body.full-theme-page .visual-title{
  color:#ff7a12;
  border-bottom-color:#454a50;
}

body.full-theme-page .visual-row{
  background:#111315;
  border-color:#4c5157;
  color:#f4f6f8;
}

body.full-theme-page .visual-row span{
  color:#ff7a12;
}

body.full-theme-page .visual-top span,
body.full-theme-page .visual-fortnight{
  background:#111315;
  color:#f4f6f8;
  border-color:#50565d;
}

body.full-theme-page .visual-period,
body.full-theme-page .visual-footer{
  background:#1d2023;
  color:#f4f6f8;
  border-color:#42474d;
}

body.full-theme-page .fake-list,
body.full-theme-page .fake-entry{
  background:#101214;
  color:#f4f6f8;
  border-color:#50565d;
}

body.full-theme-page .help-reference-table{
  background:#0d0f11;
  color:#f4f6f8;
}

body.full-theme-page .help-reference-table th{
  background:#202327;
  color:#ff8b2d;
}

body.full-theme-page .help-reference-table td{
  background:#111315;
  color:#f4f6f8;
  border-color:#42474d;
}

body.full-theme-page .help-reference-table code{
  color:#ff9a4a;
}

/* Functional colour examples inside the help page remain their intended colours. */
body.full-theme-page .status-sample.blank{background:#fff!important;color:#111!important}
body.full-theme-page .status-sample.normal{background:#dceeff!important;color:#111!important}
body.full-theme-page .status-sample.night{background:#173f6d!important;color:#fff!important}
body.full-theme-page .status-sample.ot{background:#cfe8d4!important;color:#111!important}
body.full-theme-page .status-sample.toil{background:#f5edcf!important;color:#111!important}
body.full-theme-page .status-sample.both{
  background:linear-gradient(90deg,#cfe8d4,#f5edcf)!important;
  color:#111!important;
}

body.full-theme-page .formula-box{
  background:#111315;
  color:#ff8b2d;
  border-color:rgba(232,111,12,.62);
}

/* Keep instructions useful in print/PDF. */
@media print{
  body.full-theme-page .instructions-page,
  body.full-theme-page .help-section,
  body.full-theme-page .help-section-body,
  body.full-theme-page .help-visual,
  body.full-theme-page .help-reference-table,
  body.full-theme-page .help-reference-table td{
    background:#fff!important;
    color:#000!important;
    box-shadow:none!important;
  }
  body.full-theme-page .help-section-title,
  body.full-theme-page .help-reference-table th{
    background:#eee!important;
    color:#000!important;
  }
}


/* ==========================================================
   v0.05 Phase 2b — Login screen dark theme match
   Presentation only. Login behaviour remains unchanged.
   ========================================================== */
body.login-artwork-page main > .card{
  background:linear-gradient(180deg,rgba(18,20,23,.97),rgba(7,9,11,.97)) !important;
  color:#f4f6f8 !important;
  border:1px solid rgba(232,111,12,.82) !important;
  box-shadow:0 16px 45px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.025) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
body.login-artwork-page main > .card h1{
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.75);
}
body.login-artwork-page main > .card label{
  color:#f1f3f5 !important;
  font-weight:700;
}
body.login-artwork-page main > .card input{
  background:linear-gradient(180deg,#17191c,#0d0f11) !important;
  color:#fff !important;
  border:1px solid rgba(232,111,12,.75) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55);
}
body.login-artwork-page main > .card input:focus{
  outline:none;
  border-color:#ff8a2b !important;
  box-shadow:0 0 0 2px rgba(232,111,12,.18),inset 0 1px 3px rgba(0,0,0,.55);
}
body.login-artwork-page main > .card button{
  background:linear-gradient(180deg,#25282c,#101214) !important;
  color:#ff8a2b !important;
  border:1px solid #e86f0c !important;
  box-shadow:0 3px 8px rgba(0,0,0,.42) !important;
}
body.login-artwork-page main > .card button:hover{
  color:#fff !important;
  border-color:#ff9a4a !important;
}
body.login-artwork-page main > .card a{
  color:#ff8a2b !important;
  font-weight:700;
}
body.login-artwork-page main > .card .login-help-link{
  color:#f2f4f6 !important;
}
body.login-artwork-page .login-security-note{
  background:linear-gradient(180deg,rgba(18,20,23,.95),rgba(8,10,12,.95)) !important;
  color:#f4f6f8 !important;
  border:1px solid rgba(232,111,12,.62);
  box-shadow:0 6px 18px rgba(0,0,0,.36);
}
body.login-artwork-page .login-security-note::before{
  content:"🔒 ";
}
body.login-artwork-page .admin-recovery-icon{
  color:#ff8a2b !important;
}
@media(max-width:600px){
  body.login-artwork-page main > .card{
    margin-left:10px !important;
    margin-right:10px !important;
  }
}


/* ==========================================================
   v0.05 Phase 2c — System Administration action-card fit fix
   Presentation only.
   ========================================================== */

/* Give the administration action area enough room for the longest label. */
body.full-theme-page .admin-wide-card .admin-actions,
body.full-theme-page .admin-card .admin-actions,
body.full-theme-page .system-admin-card .admin-actions{
  grid-template-columns:repeat(4, minmax(150px, 1fr)) !important;
  gap:10px !important;
}

/* Prevent long labels such as Backup & Recovery from escaping the button. */
body.full-theme-page .admin-actions a,
body.full-theme-page .admin-actions button{
  min-width:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  padding-left:12px !important;
  padding-right:12px !important;
  text-align:center !important;
}

/* On narrower browser widths, allow the action grid to wrap cleanly. */
@media(max-width:1180px){
  body.full-theme-page .admin-wide-card .admin-actions,
  body.full-theme-page .admin-card .admin-actions,
  body.full-theme-page .system-admin-card .admin-actions{
    grid-template-columns:repeat(2, minmax(170px, 1fr)) !important;
  }
}


/* ==========================================================
   v0.05 Phase 2d — System Administration button width fix
   The action side receives more horizontal space so the
   "Backup & Recovery" label remains fully inside its button.
   ========================================================== */
body.dashboard-artwork-page .admin-wide-card{
  gap:18px !important;
}

body.dashboard-artwork-page .admin-wide-heading{
  flex:0 1 43% !important;
  min-width:0 !important;
}

body.dashboard-artwork-page .admin-wide-actions{
  flex:1 1 57% !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  min-width:0 !important;
}

body.dashboard-artwork-page .admin-wide-actions .btn{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:10px 8px !important;
  font-size:14px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Extra safety for the longest administration label. */
body.dashboard-artwork-page .admin-wide-actions a[href*="backups"]{
  font-size:13px !important;
  letter-spacing:-0.1px !important;
}

@media(max-width:1050px){
  body.dashboard-artwork-page .admin-wide-card{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  body.dashboard-artwork-page .admin-wide-heading{
    flex:auto !important;
  }
  body.dashboard-artwork-page .admin-wide-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body.dashboard-artwork-page .admin-wide-actions .btn,
  body.dashboard-artwork-page .admin-wide-actions a[href*="backups"]{
    font-size:14px !important;
  }
}

/* ==========================================================
   v0.05 Phase 3 — Four requested features
   ========================================================== */

/* ---- Header light/dark toggle ---- */
header{
  display:flex;
  align-items:center;
  gap:10px;
}
header nav{margin-left:auto}
.theme-toggle{
  flex:0 0 auto;
  width:42px;
  height:30px;
  padding:0;
  border:1px solid rgba(255,128,24,.78)!important;
  border-radius:999px;
  background:#101318!important;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 8px rgba(0,0,0,.7),0 2px 7px rgba(0,0,0,.35)!important;
}
.theme-toggle-disc{
  position:absolute;inset:2px;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;justify-items:center;
  border-radius:999px;
  overflow:hidden;
}
.theme-sun{color:#ffbe3d;font-size:14px}
.theme-moon{color:#d8e2ff;font-size:15px}
.theme-toggle.is-light{background:#d8f0ff!important;border-color:#2d6c9b!important}
.theme-toggle.is-light .theme-moon{opacity:.42}
.theme-toggle:not(.is-light) .theme-sun{opacity:.55}

/* ---- Mandatory login warning ---- */
.login-warning-backdrop{
  position:fixed;inset:0;z-index:5000;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.login-warning-window{
  width:min(760px,94vw);
  background:linear-gradient(180deg,rgba(21,23,26,.99),rgba(8,10,12,.99));
  color:#f5f6f7;
  border:1px solid #e86f0c;
  border-radius:12px;
  box-shadow:0 18px 55px rgba(0,0,0,.72);
  padding:24px;
  text-align:center;
}
.login-warning-title{font-size:1.45rem;font-weight:800;color:#ff8a2b;margin-bottom:14px}
.login-warning-window p{font-size:1.03rem;line-height:1.6;margin:0 auto 20px;max-width:680px;color:#f5f6f7}
.login-warning-window button{min-width:140px;border-color:#e86f0c!important;color:#ff8a2b!important}

/* ---- Home Roster Pattern button ---- */
.roster-dashboard-card{position:relative}
.roster-pattern-open{
  position:absolute!important;
  top:12px;right:12px;
  width:38px;height:34px;
  padding:0!important;
  display:flex!important;align-items:center;justify-content:center;
  font-size:20px!important;
  color:#ff8a2b!important;
  background:linear-gradient(180deg,#24272b,#101214)!important;
  border:1px solid #e86f0c!important;
  border-radius:7px!important;
  box-shadow:0 3px 8px rgba(0,0,0,.42)!important;
  z-index:2;
}
.roster-pattern-open:hover{color:#fff!important;border-color:#ff9a4a!important}

/* ---- 28 x 15 roster pattern import modal ---- */
.roster-pattern-backdrop{display:none!important}
.roster-pattern-backdrop.open{display:flex!important}
.roster-pattern-window{
  width:min(1540px,97vw)!important;
  max-width:none!important;
  max-height:94vh!important;
}
.roster-pattern-body{overflow:auto;max-height:calc(94vh - 55px)}
.pattern-controls{
  display:flex;align-items:end;gap:14px;flex-wrap:wrap;
  padding:10px 0 14px;
}
.pattern-controls label{display:flex;flex-direction:column;gap:5px;font-weight:700}
.pattern-controls .pattern-check{flex-direction:row;align-items:center;padding-bottom:8px}
.pattern-controls input[type=date],.pattern-controls input[type=number]{min-height:36px}
.pattern-start-line input{width:90px}
.pattern-start-line.hidden{display:none!important}
.pattern-tool-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.pattern-grid-wrap{
  overflow:auto;
  max-height:58vh;
  border:1px solid rgba(232,111,12,.72);
  background:#0c0e10;
}
.pattern-grid{
  border-collapse:collapse!important;
  width:max-content!important;
  min-width:100%;
  table-layout:fixed;
  background:#0c0e10!important;
}
.pattern-grid th,.pattern-grid td{
  width:43px;min-width:43px;height:30px;
  padding:0!important;
  border:1px solid #535960!important;
  text-align:center!important;
  vertical-align:middle!important;
  box-sizing:border-box;
}
.pattern-grid th{
  position:sticky;top:0;z-index:3;
  background:#202327!important;color:#ff8a2b!important;
  font-size:11px;
}
.pattern-grid tbody th{
  position:sticky;left:0;z-index:2;
  width:46px;min-width:46px;
  background:#202327!important;color:#ff8a2b!important;
}
.pattern-grid .line-head{left:0;z-index:4;width:46px;min-width:46px}
.pattern-grid td{
  background:#f9fbfc!important;color:#111!important;
  font-weight:700;font-size:12px;
  outline:none;
}
.pattern-grid tbody tr:nth-child(odd) td{background:#12add5!important;color:#091117!important}
.pattern-grid td:focus{box-shadow:inset 0 0 0 2px #ff7a12!important;background:#fff5e9!important}
.pattern-help-row{display:grid;gap:4px;margin:10px 0;color:#d7dce1;font-size:.85rem}

/* ---- Facilities remove ---- */
body.full-theme-page .card form .danger-btn{white-space:nowrap}

/* ==========================================================
   LIGHT VIEW
   Applied after dark-theme rules so layout remains identical.
   Functional roster/HD/leave/TOIL/custom colours are not changed.
   ========================================================== */
body.light-theme{
  color:#172033!important;
  background-image:
    linear-gradient(rgba(245,249,253,.70),rgba(245,249,253,.70)),
    url('/static/ntdoc_background.png')!important;
}
body.light-theme header{
  background:rgba(244,248,252,.95)!important;
  color:#172033!important;
  border-bottom:1px solid #b9c8d6!important;
  box-shadow:0 2px 12px rgba(31,52,71,.16)!important;
}
body.light-theme header strong,body.light-theme header a{color:#173f6d!important}
body.light-theme .dashboard-heading,
body.light-theme .dashboard-card,
body.light-theme .help-wide-card,
body.light-theme .admin-wide-card,
body.light-theme .dashboard-info,
body.light-theme .card,
body.light-theme .status-card,
body.light-theme .error-page-card,
body.light-theme .rate-card,
body.light-theme .prototype-fortnight,
body.light-theme .printable-control-card,
body.light-theme .print-period,
body.light-theme .help-section,
body.light-theme .instructions-nav,
body.light-theme .help-visual,
body.light-theme .modal-window{
  background:rgba(251,253,255,.96)!important;
  color:#172033!important;
  border-color:#b7c6d4!important;
  box-shadow:0 6px 20px rgba(39,61,80,.16)!important;
}
body.light-theme .dashboard-card h2,body.light-theme .dashboard-card p,
body.light-theme .admin-wide-card h2,body.light-theme .admin-wide-card p,
body.light-theme .help-wide-card h2,body.light-theme .help-wide-card p,
body.light-theme .dashboard-info,body.light-theme .dashboard-info p,
body.light-theme .rate-card-title,body.light-theme .prototype-fortnight-header,
body.light-theme .prototype-fortnight-footer,body.light-theme .rate-heading,
body.light-theme .rate-col span,body.light-theme .rate-col strong,
body.light-theme .instructions-header h1,body.light-theme .instructions-header p,
body.light-theme .help-section-body,body.light-theme .help-section-body p,
body.light-theme .help-section-body li,body.light-theme .help-section-body strong{
  color:#172033!important;
  text-shadow:none!important;
}
body.light-theme .help-section-title,
body.light-theme .modal-titlebar,
body.light-theme th{
  background:#e8eef4!important;
  color:#173f6d!important;
  border-color:#b7c6d4!important;
}
body.light-theme .help-section.open .help-section-title,
body.light-theme .help-section-title:hover,
body.light-theme .help-section-body h3,
body.light-theme .instructions-nav strong,
body.light-theme .visual-title{
  color:#d86508!important;
}
body.light-theme .instructions-nav a{color:#254b6d!important}
body.light-theme .instructions-nav a:hover{background:#edf4fa!important;color:#d86508!important}
body.light-theme .help-section-body,
body.light-theme .modal-window .modal-body,
body.light-theme .help-visual,
body.light-theme .visual-row,
body.light-theme .visual-top span,
body.light-theme .visual-fortnight,
body.light-theme .fake-list,
body.light-theme .fake-entry,
body.light-theme table{
  background:#fff!important;color:#172033!important;
}
body.light-theme td{color:#172033}
body.light-theme input:not([type=checkbox]):not([type=color]),
body.light-theme select,body.light-theme textarea{
  background:#fff!important;color:#172033!important;border-color:#8fa5b8!important;
}
body.light-theme button:not(.roster-pattern-open):not(.theme-toggle),
body.light-theme .btn{
  background:linear-gradient(180deg,#f8fafc,#e5ebf1)!important;
  color:#173f6d!important;
  border-color:#8fa5b8!important;
}
body.light-theme button.orange,body.light-theme .btn.orange{
  background:linear-gradient(180deg,#ff9c46,#ed7413)!important;color:#fff!important;border-color:#d65d00!important;
}
body.light-theme .modal-window fieldset{
  background:#f7fafc!important;color:#172033!important;border-color:#b7c6d4!important;
}
body.light-theme .modal-window fieldset legend{color:#d86508!important}
body.light-theme .modal-window label,body.light-theme .modal-window p,body.light-theme .modal-window .check-row{color:#172033!important}
body.light-theme .entry-list-box{background:#fff!important;color:#172033!important;border-color:#a6b7c5!important}
body.light-theme .login-warning-window{
  background:rgba(252,253,255,.99)!important;color:#172033!important;border-color:#d86508!important;
}
body.light-theme .login-warning-title{color:#d86508!important}
body.light-theme .login-warning-window p{color:#172033!important}
body.light-theme.login-artwork-page main>.card,
body.light-theme .login-security-note{
  background:rgba(252,253,255,.97)!important;color:#172033!important;border-color:#b7c6d4!important;
}
body.light-theme.login-artwork-page main>.card h1,
body.light-theme.login-artwork-page main>.card label{color:#172033!important;text-shadow:none!important}
body.light-theme.login-artwork-page main>.card input{background:#fff!important;color:#172033!important;border-color:#8fa5b8!important}
body.light-theme.login-artwork-page main>.card a{color:#b44d00!important}
body.light-theme.login-artwork-page main>.card .login-help-link{color:#173f6d!important}

/* Preserve special functional colours in light mode. */
body.light-theme .prototype-shift-input.shift-night,
body.light-theme .prototype-day.custom-colour-date .prototype-shift-input.shift-night{background:#173f6d!important;color:#fff!important}
body.light-theme .prototype-day.rec-leave .prototype-shift-input{background:#111!important;color:#f33!important}
body.light-theme .prototype-day.toiled .prototype-shift-input{background:#f5edcf!important;color:#111!important}
body.light-theme .status-sample.blank{background:#fff!important;color:#111!important}
body.light-theme .status-sample.normal{background:#dceeff!important;color:#111!important}
body.light-theme .status-sample.night{background:#173f6d!important;color:#fff!important}
body.light-theme .status-sample.ot{background:#cfe8d4!important;color:#111!important}
body.light-theme .status-sample.toil{background:#f5edcf!important;color:#111!important}
body.light-theme .status-sample.both{background:linear-gradient(90deg,#cfe8d4,#f5edcf)!important;color:#111!important}

@media(max-width:900px){
  .pattern-tool-buttons{margin-left:0}
  .roster-pattern-window{width:99vw!important}
}


/* ==========================================================
   v0.05 Phase 3a — Light theme readability + grid enhancements
   ========================================================== */

/* General light-theme readability outside the two screens already approved. */
body.light-theme:not(.login-artwork-page) main,
body.light-theme:not(.login-artwork-page) main p,
body.light-theme:not(.login-artwork-page) main label,
body.light-theme:not(.login-artwork-page) main li,
body.light-theme:not(.login-artwork-page) main td,
body.light-theme:not(.login-artwork-page) main th,
body.light-theme:not(.login-artwork-page) main span{
  color:#172033;
}

body.light-theme:not(.login-artwork-page) main h1,
body.light-theme:not(.login-artwork-page) main h2,
body.light-theme:not(.login-artwork-page) main h3,
body.light-theme:not(.login-artwork-page) main strong{
  color:#102a4c;
  text-shadow:none;
}

body.light-theme .muted{
  color:#53677f !important;
}

/* White/translucent cards need dark text in light mode. */
body.light-theme .card,
body.light-theme .dashboard-card,
body.light-theme .help-wide-card,
body.light-theme .admin-wide-card,
body.light-theme .dashboard-info,
body.light-theme .printable-control-card,
body.light-theme .print-period,
body.light-theme .backup-summary-card,
body.light-theme .readiness-summary,
body.light-theme .status-card,
body.light-theme .restore-warning-card{
  color:#172033 !important;
}

body.light-theme .card h1,
body.light-theme .card h2,
body.light-theme .card h3,
body.light-theme .dashboard-card h2,
body.light-theme .help-wide-card h2,
body.light-theme .admin-wide-card h2,
body.light-theme .backup-summary-card h2,
body.light-theme .readiness-summary h2{
  color:#102a4c !important;
}

/* Printable Roster heading/control text. */
body.light-theme .printable-page,
body.light-theme .printable-page p,
body.light-theme .printable-page label,
body.light-theme .period-caption{
  color:#102a4c !important;
}

/* Shared Pay Rates tables. */
body.light-theme .user-rates-page,
body.light-theme .user-rates-page p,
body.light-theme .user-rates-page td,
body.light-theme .user-rates-page th{
  color:#172033 !important;
}

/* Backup / Recovery and System Status pages. */
body.light-theme .backup-page h1,
body.light-theme .backup-page h2,
body.light-theme .system-status-page h1,
body.light-theme .system-status-page h2{
  color:#102a4c !important;
}
body.light-theme .backup-page p,
body.light-theme .backup-page label,
body.light-theme .backup-page td,
body.light-theme .backup-page th,
body.light-theme .system-status-page p,
body.light-theme .system-status-page li,
body.light-theme .system-status-page td,
body.light-theme .system-status-page th{
  color:#172033 !important;
}
body.light-theme .backup-location-note,
body.light-theme .checksum-code{
  color:#425a73 !important;
}

/* Preserve approved Roster Calculator and Instructions contrast rules. */
body.light-theme .prototype-roster .prototype-title-row h1{color:#fff !important}
body.light-theme .instructions-page .instructions-header h1{color:#172033 !important}

/* Grid additions */
.pattern-hd-rank{
  display:flex;
  align-items:center;
  gap:7px;
}
.pattern-hd-rank select{
  min-width:130px;
}
.pattern-clear-from-box{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(232,111,12,.58);
  border-radius:8px;
  background:rgba(10,12,14,.65);
}
.pattern-clear-from-box strong{color:#ff8a2b}
.pattern-clear-from-box p{margin:5px 0 10px}
.pattern-clear-from-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.pattern-clear-from-row input[type=date]{min-width:170px}
body.light-theme .pattern-clear-from-box{
  background:#f7fafc;
  border-color:#b7c6d4;
}
body.light-theme .pattern-clear-from-box strong{color:#b44d00 !important}

/* Ensure hidden helper labels remain hidden despite display rules. */
.pattern-hd-rank.hidden,
.pattern-start-line.hidden{display:none !important}


/* ==========================================================
   v0.05 Phase 3b — Roster Pattern HD selector readability
   ========================================================== */

/* Keep the Higher Duties rank selector readable in both themes. */
.roster-pattern-window #pattern-hd-rank,
.roster-pattern-window #pattern-hd-rank option {
  background:#ffffff !important;
  color:#172033 !important;
}

.roster-pattern-window #pattern-hd-rank {
  border-color:#8fa5b8 !important;
}

body.light-theme .roster-pattern-window #pattern-hd-rank,
body.light-theme .roster-pattern-window #pattern-hd-rank option {
  background:#ffffff !important;
  color:#172033 !important;
}