:root{
  --ink:#4C4D4F;
  --red:#EF494E;
  --blue:#6FBDDB;
  --green:#8DC63F;
  --paper:#ffffff;
  --bg:#F6F6F4;
  --mut:#9A9A9C;
  --line:#ECECEC;
  --line2:#E2E2DF;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Montserrat',-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---- top bar ---- */
.topbar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
}
.brand{display:flex;flex-direction:column;line-height:1;}
.wordmark{font-weight:700;font-size:24px;letter-spacing:-0.5px;color:var(--ink);}
.tagline{font-size:11px;font-weight:500;color:var(--mut);margin-top:3px;}
.t-red{color:var(--red);}
.t-blue{color:var(--blue);}
.topnav{display:flex;align-items:center;gap:18px;}
.topnav a{font-size:14px;font-weight:600;color:var(--ink);}
.topnav a:hover{color:var(--blue);}
.logout-form{margin:0;}
.logout-form button{
  font-family:inherit;font-size:13px;font-weight:600;
  color:var(--mut);background:none;border:none;cursor:pointer;padding:0;
}
.logout-form button:hover{color:var(--red);}

/* ---- layout ---- */
.container{max-width:640px;margin:0 auto;padding:20px 16px 60px;}
.page-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 18px;flex-wrap:wrap;gap:10px;}
.page-head h1{font-size:22px;font-weight:600;margin:0;}
.monthnav{display:flex;align-items:center;gap:14px;}
.month-label{font-size:14px;font-weight:600;min-width:96px;text-align:center;}
.navbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line2);font-size:20px;color:var(--ink);
}
.navbtn:hover{border-color:var(--blue);color:var(--blue);}

.week-label{font-size:11px;font-weight:700;color:#B4B2A9;text-transform:uppercase;letter-spacing:0.6px;margin:18px 4px 8px;}

/* ---- day cards ---- */
.day-card{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;display:flex;gap:14px;
}
.day-date{text-align:center;min-width:38px;padding-top:2px;}
.day-date .dow{display:block;font-size:10px;font-weight:700;color:#B4B2A9;text-transform:uppercase;}
.day-date .dnum{display:block;font-size:22px;font-weight:700;line-height:1;}
.cat-rows{flex:1;}
.cat-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #F4F4F2;}
.cat-row:last-child{border-bottom:none;}
.cat-info{flex:1;min-width:0;}
.cat-line{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mut);flex:none;}
.cat-name{font-size:14px;font-weight:600;}
.cat-count{font-size:13px;font-weight:500;color:var(--mut);}
.bar{height:5px;background:#F0F0EE;border-radius:3px;max-width:220px;overflow:hidden;}
.fill{height:5px;background:var(--mut);border-radius:3px;}
.cat-action{margin-left:14px;flex:none;}

/* category accent colours */
.cat-trim .dot,.cat-trim .fill{background:var(--green);}
.cat-trim .signup-btn{background:var(--green);}
.cat-cultivation .dot,.cat-cultivation .fill{background:var(--blue);}
.cat-cultivation .signup-btn{background:var(--blue);}
.cat-propagation .dot,.cat-propagation .fill{background:var(--red);}
.cat-propagation .signup-btn{background:var(--red);}

.signup-btn{
  font-family:inherit;font-size:13px;font-weight:600;color:#fff;
  background:var(--ink);border:none;border-radius:9px;padding:8px 16px;cursor:pointer;
}
.signup-btn:hover{filter:brightness(0.94);}
.signup-btn.wide{width:100%;padding:11px;font-size:15px;margin-top:6px;}

.pill{font-size:12px;font-weight:600;padding:6px 12px;border-radius:9px;display:inline-block;}
.pill.booked{color:#5b8a1b;background:#EDF6DE;}
.pill.full{color:#8a8a8a;background:#F1F1EF;}
.pill.status{color:var(--ink);background:#EAF4F9;}

/* ---- messages / empty / login ---- */
.messages{max-width:640px;margin:14px auto 0;padding:0 16px;}
.msg{font-size:14px;font-weight:500;padding:11px 14px;border-radius:10px;margin-bottom:8px;}
.msg-success{background:#EDF6DE;color:#4f7d16;}
.msg-info{background:#EAF4F9;color:#2f7693;}
.msg-error,.msg-warning{background:#FCE9E9;color:#bf3b3f;}

.empty{
  background:var(--paper);border:1px dashed var(--line2);border-radius:14px;
  padding:28px 20px;text-align:center;color:var(--mut);font-size:14px;font-weight:500;
}

.login-wrap{max-width:360px;margin:30px auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px 24px;}
.login-wrap h1{font-size:22px;font-weight:600;margin:0 0 18px;}
.login-form{display:flex;flex-direction:column;gap:14px;}
.login-form label{font-size:13px;font-weight:600;color:var(--mut);display:flex;flex-direction:column;gap:6px;}
.login-form input{
  font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line2);border-radius:10px;padding:11px 12px;background:#fff;
}
.login-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(111,189,219,0.18);}

.foot{text-align:center;color:#B4B2A9;font-size:12px;font-weight:500;padding:24px 0 40px;}

/* ---- cancellation ---- */
.cancel-link{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--red);}
.cancel-link:hover{text-decoration:underline;}
.warn{background:#FCE9E9;color:#bf3b3f;border-radius:12px;padding:14px 16px;font-size:14px;font-weight:500;margin:14px 0;}
.note{background:#EDF6DE;color:#4f7d16;border-radius:12px;padding:14px 16px;font-size:14px;font-weight:500;margin:14px 0;}
.cancel-form{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:14px;display:flex;flex-direction:column;gap:12px;}
.field-label{font-size:13px;font-weight:600;color:var(--mut);display:flex;flex-direction:column;gap:6px;}
.cancel-form textarea{font-family:inherit;font-size:15px;color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;resize:vertical;}
.cancel-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(111,189,219,0.18);}
.signup-btn.danger{background:var(--red);}
.keep-link{text-align:center;font-size:14px;font-weight:600;color:var(--mut);}
.keep-link:hover{color:var(--ink);}

/* --- Notifications --- */
.bell { position: relative; }
.bell .badge {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 .35rem;
  margin-left: .35rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  color: #fff;
  background: #EF494E;
  border-radius: 999px;
  vertical-align: middle;
}
.notif-list { display: flex; flex-direction: column; gap: .6rem; }
.notif {
  display: block;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid #e4e4e6;
  border-left: 4px solid #c9c9cc;
  border-radius: 8px;
  text-decoration: none;
  color: #4C4D4F;
}
.notif:hover { border-color: #6FBDDB; }
.notif-unread { border-left-color: #6FBDDB; background: #f4fafd; }
.notif-title { font-weight: 600; margin-bottom: .15rem; }
.notif-body { font-size: .9rem; color: #6a6a6d; }
.notif-meta { font-size: .75rem; color: #9a9a9d; margin-top: .35rem; }

/* --- Confirm shift --- */
.confirm-form { display: inline; margin-right: .5rem; }
.confirm-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: .85rem;
  padding: .3rem .8rem;
  color: #fff;
  background: #8DC63F;
  border-radius: 6px;
}
.confirm-btn:hover { filter: brightness(.95); }
.confirmed-badge {
  font-size: .8rem;
  font-weight: 600;
  color: #8DC63F;
  margin-right: .5rem;
}

/* --- Push opt-in box --- */
.push-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  background: #f4fafd;
  border: 1px solid #cfe7f2;
  border-radius: 8px;
}
.push-text { display: flex; flex-direction: column; gap: .15rem; }
.push-state { font-size: .85rem; color: #6a6a6d; }
.push-btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .85rem;
  padding: .45rem 1rem; color: #fff; background: #6FBDDB; border-radius: 6px;
  white-space: nowrap;
}
.push-btn:hover { filter: brightness(.96); }
.push-btn:disabled { opacity: .6; cursor: default; }

/* --- Staff dashboard --- */
.dash-subnav { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1.25rem; border-bottom: 2px solid #ececee; }
.dash-subnav a { padding: .55rem .9rem; text-decoration: none; color: #6a6a6d; font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.dash-subnav a:hover { color: #4C4D4F; }
.dash-subnav a.on { color: #4C4D4F; border-bottom-color: #8DC63F; }

.muted { color: #9a9a9d; font-size: .9rem; font-weight: 400; }
.sec { font-size: 1.05rem; margin: 1.6rem 0 .5rem; color: #4C4D4F; }

.stat-cards { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat-card { flex: 1 1 140px; background: #fff; border: 1px solid #e4e4e6; border-radius: 8px; padding: 1rem; text-decoration: none; color: #4C4D4F; }
.stat-card:hover { border-color: #6FBDDB; }
.stat-num { font-size: 1.8rem; font-weight: 700; }
.stat-lbl { font-size: .82rem; color: #6a6a6d; }

.dtable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e4e4e6; border-radius: 8px; overflow: hidden; }
.dtable th, .dtable td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid #eee; font-size: .9rem; }
.dtable th { background: #f7f7f8; color: #6a6a6d; font-weight: 600; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable.grid td, .dtable.grid th { text-align: center; }
.dtable.grid td:first-child, .dtable.grid th:first-child { text-align: left; }

.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .45rem; vertical-align: middle; background: #c9c9cc; }
.dot-trim { background: #8DC63F; }
.dot-cultivation { background: #6FBDDB; }
.dot-propagation { background: #EF494E; }

.btn-sm { display: inline-block; padding: .35rem .7rem; font-size: .82rem; font-weight: 600; border-radius: 6px; text-decoration: none; background: #eef1f3; color: #4C4D4F; border: 0; cursor: pointer; }
.btn-sm:hover { background: #e3e7ea; }
.btn-primary { padding: .55rem 1.2rem; font-weight: 600; border: 0; border-radius: 6px; background: #8DC63F; color: #fff; cursor: pointer; }
.btn-primary:hover { filter: brightness(.96); }
.link-danger { background: none; border: 0; color: #EF494E; cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; }

.date-bar, .range-bar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.date-form { margin: 0; }
.range-bar label { font-size: .9rem; color: #6a6a6d; }
.range-bar input[type=date], .date-bar input[type=date] { padding: .35rem .5rem; border: 1px solid #d6d6d9; border-radius: 6px; font: inherit; }

.roster-card { background: #fff; border: 1px solid #e4e4e6; border-radius: 8px; padding: .9rem 1rem; margin-bottom: 1rem; }
.roster-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.roster-head .muted { margin-left: auto; }
.att-cells { display: flex; gap: .4rem; flex-wrap: wrap; }
.att { display: inline-flex; align-items: center; gap: .25rem; font-size: .82rem; padding: .2rem .5rem; border: 1px solid #d6d6d9; border-radius: 999px; cursor: pointer; }
.att input { margin: 0; }
.att-present { color: #5a9e1f; }
.att-late { color: #b8860b; }
.att-absent { color: #c0392b; }
.assign-row { display: flex; gap: .5rem; margin-top: .7rem; }
.assign-row select { flex: 1; padding: .4rem .5rem; border: 1px solid #d6d6d9; border-radius: 6px; font: inherit; }
.save-bar { margin: 1rem 0 2rem; }
.empty-sm { color: #9a9a9d; font-size: .88rem; padding: .3rem 0; }
.cap-input { width: 3.2rem; text-align: center; padding: .3rem; border: 1px solid #d6d6d9; border-radius: 6px; font: inherit; }
.flag { color: #EF494E; font-weight: 700; }
.reason { max-width: 260px; }

/* --- Add to home screen box (green accent) --- */
.install-box {
  background: #f3faec;
  border-color: #d6ecbc;
}
.install-btn { background: #8DC63F; }

/* --- Install instructions modal --- */
.install-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(76, 77, 79, .55);
}
.install-modal[hidden] { display: none; }
.install-modal-card {
  position: relative;
  background: #fff; border-radius: 10px;
  padding: 1.4rem 1.5rem; max-width: 420px; width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.install-modal-card h2 {
  margin: 0 0 .9rem; font-size: 1.1rem; color: #4C4D4F;
}
.install-modal-close {
  position: absolute; top: .5rem; right: .65rem;
  border: 0; background: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: #9a9a9d;
}
.install-modal-close:hover { color: #4C4D4F; }
.install-steps { margin: 0; padding-left: 1.2rem; }
.install-steps li { margin-bottom: .6rem; line-height: 1.4; }