:root{
  --bg:#f7efe6;
  --bg-grad-1:#fbf4ec;
  --bg-grad-2:#f5eadf;
  --surface:#fffdf9;
  --surface-2:#fff8f1;
  --line:#ead8c7;
  --line-soft:#f1e5d9;
  --text:#56473f;
  --muted:#8f7b6f;
  --primary:#e97b2d;
  --primary-2:#f3a25d;
  --accent:#fff0df;
  --green:#77a66c;
  --green-2:#90bb86;
  --yellow:#f4b858;
  --red:#d96a64;
  --shadow:0 18px 42px rgba(172,128,88,.12);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",sans-serif;background:linear-gradient(180deg,var(--bg-grad-1) 0%,var(--bg-grad-2) 100%);color:var(--text);min-height:100vh}
a{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:280px 1fr}
.side-brand{background:linear-gradient(180deg,#fff7ee 0%,#f8ebdd 100%);padding:26px 22px;color:var(--text);display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--line);box-shadow:8px 0 24px rgba(172,128,88,.06)}
.brand-panel{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 8px 18px rgba(190,150,115,.08)}
.brand-logo-wrap{width:58px;height:58px;border-radius:18px;background:#fff;display:grid;place-items:center;border:1px solid var(--line-soft);overflow:hidden;flex:0 0 auto}
.brand-logo{max-width:92%;max-height:92%;object-fit:contain;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.04))}
.brand-mark{display:none}
.brand-name{font-weight:900;font-size:18px;margin-top:1px;color:#5f4b3f}
.brand-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.side-nav{display:grid;gap:9px;margin-top:6px}
.side-nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid var(--line-soft);font-weight:800;color:#7f6d62}
.side-nav-item.active{background:linear-gradient(135deg,#fff 0%,#fff5ea 100%);color:#5d4a3f;border-color:#e9c9a8;box-shadow:0 10px 18px rgba(233,123,45,.10)}
.side-nav-icon{width:22px;text-align:center;font-size:18px}
.side-note{margin-top:auto;background:rgba(255,255,255,.55);border:1px solid var(--line-soft);border-radius:18px;padding:14px 14px 15px;font-size:12px;line-height:1.65;color:var(--muted)}
.main{padding:30px;max-width:1500px;width:100%;margin:0 auto}
.topbar{background:rgba(255,253,249,.96);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:28px;padding:28px 30px;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:#c38349}
.topbar h1{font-size:31px;margin:5px 0 6px;color:#604b3f}
.topbar p{margin:0;color:var(--muted)}
.admin-link{padding:11px 18px;border-radius:999px;background:#fff4e8;border:1px solid #efcfb2;text-decoration:none;color:#9a5d27;font-weight:900;white-space:nowrap;box-shadow:0 6px 14px rgba(233,123,45,.10)}
.card,.stat{background:rgba(255,253,250,.97);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 24px rgba(177,136,97,.08)}
.card{padding:22px;margin-bottom:18px}.login-card{max-width:760px}.section-title{font-size:18px;font-weight:900;color:#6e5748;margin-bottom:12px}.helper{color:var(--muted);font-size:13px;line-height:1.6}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid label,label{font-size:13px;font-weight:800;color:#7e6a5e;display:flex;flex-direction:column;gap:7px}
input,select,textarea{width:100%;border:1px solid #e8d9ca;background:#fffdfa;color:var(--text);border-radius:14px;padding:12px 13px;font:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:#efae77;box-shadow:0 0 0 3px rgba(233,123,45,.10)}textarea{resize:vertical}
.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;font-size:14px}
.btn.primary{background:linear-gradient(135deg,var(--primary-2),var(--primary));color:#fff;box-shadow:0 10px 20px rgba(233,123,45,.20)}
.btn.secondary{background:#fff3e6;color:#ab662d;border:1px solid #edceaf}.btn.ghost{background:#fffdfa;color:#7a675b;border:1px solid var(--line)}.btn:disabled{opacity:.5;cursor:not-allowed}.wide{width:100%;margin-top:14px}
.message{min-height:22px;margin-top:10px;font-size:13px;font-weight:700}.message.ok{color:#4f8c50}.message.error{color:#c95a56}.hidden{display:none!important}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.stat{padding:18px 20px}.stat span{font-size:12px;color:var(--muted);font-weight:800}.stat strong{display:block;font-size:24px;margin-top:6px;color:#6b5447}
.section-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.type-buttons{display:flex;gap:8px;flex-wrap:wrap}.type-btn{border:1px solid var(--line);background:#fffbf7;color:#78655a;border-radius:14px;padding:10px 14px;font-weight:900;cursor:pointer}.type-btn.active{background:#fff0df;border-color:#efb074;color:#9f5c26}
.legend{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.8}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin:0 5px 0 10px}.dot.h{background:#5fa8ff}.dot.o{background:#b46ee0}.dot.n{background:#5f6f86}.dot.y{background:#78a96a}.dot.u{background:#f0b44d}
.week-head,.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.week-head{margin-bottom:8px;color:#947f73;font-size:12px;font-weight:900;text-align:center}
.day{min-height:84px;border:1px solid #eedfce;border-radius:16px;background:#fffdf9;padding:8px;cursor:pointer;position:relative;transition:.15s}.day:hover{border-color:#efae77;box-shadow:0 6px 14px rgba(233,123,45,.08)}.day.empty{visibility:hidden}.day .num{font-weight:900}.day.sun .num{color:#d35d59}.day.sat .num{color:#7d8ec3}.day .code{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:900}.day.code-H{background:#eef6ff;border-color:#c9ddfb}.day.code-O{background:#f7efff;border-color:#dcc8f5}.day.code-N{background:#edf0f4;border-color:#ced5df}.day.code-Y{background:#f4fcf3;border-color:#cfe3cb}.day.code-U{background:#fff7e9;border-color:#efd4a5}.day.code-H .code{background:#67a7f3}.day.code-O .code{background:#b46ee0}.day.code-N .code{background:#6d7d92}.day.code-Y .code{background:#79a96b}.day.code-U .code{background:#efb54d}
.request-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.request-list.empty{display:block;color:var(--muted)}.request-pill{background:#fff8f1;border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}.alert{padding:13px 16px;border-radius:16px;margin-bottom:16px;font-weight:800}.alert.warning{background:#fff8ea;border:1px solid #f0ddb6;color:#916c20}
.admin-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}.check-row,.action-row,.member-chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}.check-row label,.switch-row{flex-direction:row;align-items:center;font-weight:800}.check-row input,.switch-row input{width:auto}.switch-row.small{white-space:nowrap}.member-edit-row{display:grid;grid-template-columns:1.4fr 1fr .6fr auto auto;gap:10px;align-items:center}.member-chip{padding:8px 11px;border-radius:999px;background:#fff7ef;border:1px solid var(--line);font-size:12px;font-weight:800}.member-chip.off{opacity:.5;text-decoration:line-through}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.matrix{border-collapse:separate;border-spacing:0;min-width:100%;font-size:12px;background:#fff}.matrix th,.matrix td{border-right:1px solid #f0e7de;border-bottom:1px solid #f0e7de;padding:8px;text-align:center;white-space:nowrap}.matrix th{position:sticky;top:0;background:#fdf4eb;z-index:2;color:#7c6658}.matrix th:first-child,.matrix td:first-child{position:sticky;left:0;background:#fffdfa;z-index:1;text-align:left;font-weight:900}.matrix th:first-child{z-index:3}.cell-H{background:#eef6ff;color:#3168a8;font-weight:900}.cell-O{background:#f7efff;color:#7a47a5;font-weight:900}.cell-N{background:#eef1f5;color:#445468;font-weight:900}.cell-Y{background:#effaf0;color:#4a8a4b;font-weight:900}.cell-U{background:#fff7e7;color:#9d6f1e;font-weight:900}
small{font-weight:500;color:var(--muted)}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.side-brand{padding:18px 20px;position:sticky;top:0;z-index:20}.brand-panel{padding:10px 12px;border-radius:18px}.brand-logo-wrap{width:48px;height:48px;border-radius:14px}.main{padding:16px}.topbar{padding:20px;border-radius:18px}.topbar h1{font-size:23px}.topbar p{font-size:13px}.stats-row{grid-template-columns:1fr 1fr 1fr;gap:8px}.stat{padding:13px}.stat strong{font-size:17px}.form-grid,.form-grid.two,.admin-grid{grid-template-columns:1fr}.calendar-card{padding:12px}.week-head,.calendar{gap:4px}.day{min-height:64px;padding:6px;border-radius:12px}.day .code{width:24px;height:24px;border-radius:8px}.member-edit-row{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.admin-link{font-size:12px}.side-nav{grid-template-columns:1fr 1fr}.side-note{margin-top:12px}}
@media(max-width:520px){.topbar{align-items:flex-start}.topbar p{display:none}.stats-row{grid-template-columns:1fr}.card{padding:16px}.day{min-height:58px}.day .num{font-size:13px}.side-nav{grid-template-columns:1fr}}


/* =========================================================
   v1.0.6 — Clear shift colors + mobile-first staff UI
   ========================================================= */

/* Shift selector buttons */
.type-buttons{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(92px,1fr));
  gap:10px;
}
.type-btn{
  min-height:52px;
  border-width:2px;
  font-size:14px;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 5px 12px rgba(91,70,53,.06);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.type-btn:hover{transform:translateY(-1px)}
.type-btn.active{
  color:#fff !important;
  box-shadow:0 10px 20px rgba(80,65,52,.18);
  transform:translateY(-1px);
}

/* Match selector button color by shift code using data-code attribute */
.type-btn[data-code="H"]{background:#edf6ff;border-color:#8fc3ff;color:#2768aa}
.type-btn[data-code="H"].active{background:linear-gradient(135deg,#6eb3ff,#3e89db);border-color:#3e89db}

.type-btn[data-code="O"]{background:#faf0ff;border-color:#d5a8ef;color:#854aa6}
.type-btn[data-code="O"].active{background:linear-gradient(135deg,#c985eb,#9a56c0);border-color:#9a56c0}

.type-btn[data-code="N"]{background:#eef1f5;border-color:#aeb8c7;color:#48586d}
.type-btn[data-code="N"].active{background:linear-gradient(135deg,#7d8ca1,#4d5c70);border-color:#4d5c70}

.type-btn[data-code="Y"]{background:#f0faef;border-color:#a9d49f;color:#4d8447}
.type-btn[data-code="Y"].active{background:linear-gradient(135deg,#95c889,#6fa762);border-color:#6fa762}

.type-btn[data-code="U"]{background:#fff7e7;border-color:#f1cc83;color:#9a6a19}
.type-btn[data-code="U"].active{background:linear-gradient(135deg,#f7c55e,#e8a72f);border-color:#e8a72f}

/* Request summary pills carry shift color */
.request-pill[data-code="H"]{background:#edf6ff;border-color:#b8d7fb;color:#316da9}
.request-pill[data-code="O"]{background:#f8efff;border-color:#ddc2ee;color:#7e4a9e}
.request-pill[data-code="N"]{background:#eef1f5;border-color:#c7ced8;color:#4a5a6e}
.request-pill[data-code="Y"]{background:#eff9ee;border-color:#c4dfbf;color:#4f824a}
.request-pill[data-code="U"]{background:#fff6e3;border-color:#ebd09a;color:#94691f}

/* Mobile header */
.mobile-shift-note{
  display:none;
}

/* Mobile-first improvements */
@media(max-width:900px){
  body{background:#f8efe5}
  .side-brand{
    position:relative;
    top:auto;
    padding:10px 12px 0;
    background:transparent;
    border-right:0;
    box-shadow:none;
    gap:0;
  }
  .brand-panel{
    padding:10px 12px;
    border-radius:18px;
    box-shadow:0 6px 16px rgba(177,136,97,.08);
  }
  .brand-logo-wrap{
    width:48px;
    height:48px;
    background:transparent;
    border:0;
  }
  .brand-name{font-size:15px}
  .brand-sub{font-size:11px}
  .side-nav,.side-note{display:none}

  .main{
    padding:12px;
    max-width:none;
  }

  .topbar{
    padding:15px 16px;
    margin-bottom:12px;
    border-radius:18px;
    align-items:flex-start;
  }
  .eyebrow{font-size:9px}
  .topbar h1{
    font-size:20px;
    line-height:1.25;
    margin:3px 0 3px;
  }
  .topbar p{
    display:block;
    font-size:12px;
    line-height:1.45;
  }
  .admin-link{
    padding:9px 11px;
    font-size:11px;
  }

  .login-card{
    max-width:none;
  }
  .card{
    padding:16px;
    border-radius:18px;
    margin-bottom:12px;
  }
  .form-grid,.form-grid.two{
    grid-template-columns:1fr;
    gap:12px;
  }
  input,select,textarea{
    min-height:50px;
    font-size:16px; /* avoids iOS zoom */
    border-radius:13px;
  }
  .btn{
    min-height:50px;
    font-size:15px;
    border-radius:14px;
  }
  .wide{margin-top:12px}

  .stats-row{
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-bottom:12px;
  }
  .stat{
    padding:11px 9px;
    border-radius:16px;
  }
  .stat span{
    font-size:10px;
    white-space:nowrap;
  }
  .stat strong{
    font-size:15px;
    margin-top:5px;
    line-height:1.3;
  }

  .section-title{
    font-size:17px;
    margin-bottom:8px;
  }
  .helper{
    font-size:12px;
  }

  .section-head{
    gap:10px;
  }

  .type-buttons{
    grid-template-columns:repeat(5,1fr);
    gap:6px;
  }
  .type-btn{
    min-width:0;
    min-height:58px;
    padding:7px 3px;
    font-size:13px;
    border-radius:14px;
    flex-direction:column;
    line-height:1.05;
  }

  .legend{
    display:none;
  }
  .mobile-shift-note{
    display:block;
    font-size:11px;
    line-height:1.55;
    color:var(--muted);
    margin-top:10px;
    background:#fff9f2;
    border:1px solid var(--line-soft);
    border-radius:12px;
    padding:9px 10px;
  }

  .calendar-card{
    padding:10px;
    overflow:hidden;
  }
  .week-head,.calendar{
    gap:4px;
  }
  .week-head{
    font-size:11px;
    margin-bottom:5px;
  }
  .day{
    min-height:64px;
    padding:6px 5px;
    border-radius:12px;
    touch-action:manipulation;
  }
  .day .num{
    font-size:13px;
  }
  .day .code{
    width:26px;
    height:26px;
    right:5px;
    bottom:5px;
    border-radius:9px;
    font-size:13px;
  }

  .summary-card{
    padding-bottom:96px;
  }
  .request-list{
    gap:6px;
  }
  .request-pill{
    font-size:11px;
    padding:7px 9px;
  }

  /* Sticky save action only on staff page */
  #saveBtn{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto;
    z-index:50;
    min-height:56px;
    margin:0;
    box-shadow:0 12px 28px rgba(233,123,45,.30);
    border:1px solid rgba(255,255,255,.55);
  }
  #logoutBtn{
    margin-top:10px;
  }

  /* Admin shouldn't have sticky staff save behavior */
  .admin-shell .main{padding-bottom:18px}
}

@media(max-width:520px){
  .stats-row{
    grid-template-columns:repeat(3,1fr);
  }
  .topbar p{
    display:none;
  }
  .type-btn{
    min-height:56px;
    font-size:12px;
  }
  .day{
    min-height:58px;
  }
  .calendar-card{
    margin-left:-2px;
    margin-right:-2px;
  }
}

@media(max-width:390px){
  .type-buttons{
    grid-template-columns:repeat(5,1fr);
    gap:4px;
  }
  .type-btn{
    padding:6px 1px;
    font-size:11px;
  }
  .day{
    min-height:54px;
    padding:5px 4px;
  }
  .day .code{
    width:23px;
    height:23px;
    font-size:11px;
  }
}