@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* Same design tokens as bookings.oldcrownuley.co.uk (the table-reservations
   app) — this is the same pub, same brand, just a second admin tool, and it
   should read as one system with two tabs open, not two different products. */
:root{
  --navy:#144a70; --navy-d:#103b59; --navy-l:#1a6091; --navy-pale:#eef4f8;
  --gold:#c8963e; --gold-l:#e8c07a;
  --ch:#1e2a35; --mu:#5a6a78; --br:#ccd8e0; --wh:#ffffff;
  --sh:0 2px 12px rgba(20,74,112,.10); --shl:0 8px 36px rgba(20,74,112,.18);
}

*{box-sizing:border-box}
body{margin:0;padding:0;background:#f0f5f8;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ch)}
h1,h2,h3,h4{font-family:'Crimson Pro',serif}

.devbar{background:#7b3f00;color:#fff;text-align:center;font-size:.78rem;padding:5px 10px;letter-spacing:.02em}

.load-error{max-width:960px;margin:14px auto 0;padding:12px 16px;background:#fbeae7;border:1px solid #e8b4ab;border-radius:8px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;color:#8a3226;font-size:.85rem}
.load-error button{background:#a13d31;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer}
.load-error button:hover{background:#8a3226}

.nav{display:flex;align-items:center;justify-content:space-between;background:var(--navy);padding:0 22px;height:64px;box-shadow:0 2px 16px rgba(0,0,0,.25)}
.nbrand{display:flex;align-items:center;gap:12px}
.nlogo{height:38px;width:auto;background:var(--wh);border-radius:6px;padding:3px 8px;display:block}
.nbrand h1{font-size:1.05rem;margin:0;color:#fff;font-weight:600;line-height:1.2}
.nbrand span{font-size:.62rem;font-weight:400;color:rgba(255,255,255,.6);letter-spacing:.12em;text-transform:uppercase;display:block}
.nav button{background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:7px 14px;font-size:.85rem;color:#fff;cursor:pointer}
.nav button:hover{background:rgba(255,255,255,.1)}

.page{max-width:960px;margin:0 auto;padding:20px 16px 60px}

.tabbar-wrap{position:relative;background:var(--navy-d)}
.tabbar-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:18px;pointer-events:none;background:linear-gradient(to right,rgba(16,59,89,0),var(--navy-d))}
.tabbar{max-width:960px;margin:0 auto;padding:8px 16px;display:flex;gap:3px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{background:transparent;border:none;border-radius:6px;padding:8px 15px;font-size:.85rem;font-weight:500;font-family:'DM Sans',sans-serif;color:rgba(255,255,255,.62);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .14s}
.tab:hover{background:rgba(255,255,255,.1);color:#fff}
.tab.active{background:var(--gold);color:#fff;font-weight:600}

.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-head h2{margin:0}
.card-head button{background:#144a70;color:#fff;border:none;border-radius:7px;padding:8px 14px;font-size:.85rem;font-weight:600;cursor:pointer}
.card-head button:hover{background:var(--navy-d)}

.season-list{display:flex;flex-direction:column;gap:0}
.season-row{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 0;border-top:1px solid #f0f2f4}
.season-row:first-child{border-top:none}
.season-name{font-weight:600;font-size:.92rem}
.season-dates{color:#7b8794;font-size:.8rem;margin:2px 0 8px}
.season-chips{display:flex;flex-wrap:wrap;gap:6px}
.rate-chip{background:#e9f1f7;color:#144a70;border-radius:6px;padding:3px 9px;font-size:.76rem;font-weight:600}
.season-room-label{display:flex;align-items:center;font-size:.88rem;color:#41505e}

/* Rooms admin */
.admin-room-list{display:flex;flex-direction:column;gap:0}
.admin-room{padding:16px 0;border-top:1px solid #f0f2f4}
.admin-room:first-child{border-top:none;padding-top:4px}
.admin-room.admin-retired{opacity:.6}
.admin-room-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px}
.admin-room-name{font-weight:700;font-size:1rem}
.admin-config-sub{color:#7b8794;font-size:.8rem;margin-top:2px}
.admin-actions{display:flex;gap:14px;flex-wrap:wrap}
.admin-actions .link{background:none;border:none;color:#144a70;font-size:.8rem;font-weight:600;cursor:pointer;padding:0}
.admin-actions .link:hover{text-decoration:underline}
.admin-actions .link.admin-danger{color:#a13d31}
.admin-config-list{margin:10px 0 0;padding-left:2px}
.admin-config-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid #f5f7f8}
.admin-config-row.admin-retired{opacity:.6}
.admin-config-name{font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.admin-retired-chip{background:#f0f2f4;color:#7b8794}
.admin-add-config{margin-top:10px;padding:6px 12px;font-size:.8rem}

/* Overview */
.overview-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:4px}
.overview-date{margin:0;font-size:1.4rem}
.overview-head .btn-primary{padding:9px 18px;font-size:.85rem;border-radius:8px;flex-shrink:0}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 22px}
.stat-tile{border-radius:10px;padding:16px 18px 16px;border-top:4px solid transparent;box-shadow:0 1px 2px rgba(20,30,40,.06),0 2px 8px rgba(20,30,40,.04);transition:transform .12s ease,box-shadow .12s ease}
.stat-tile:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(20,30,40,.08),0 6px 14px rgba(20,30,40,.07)}
.stat-top{display:flex;align-items:baseline;gap:8px}
.stat-icon{font-size:1.3rem;font-weight:700;line-height:1}
.stat-n{font-family:'Crimson Pro',serif;font-size:2.2rem;font-weight:700;line-height:1.05}
.stat-l{font-size:.8rem;font-weight:600;margin-top:5px;opacity:.85}
.stat-sub{font-size:.74rem;font-weight:600;margin-top:7px;opacity:.75}
.stat-arriving{background:#fdf3e3;color:#8a5a00;border-top-color:#c8963e}
.stat-departing{background:#fbeae7;color:#a13d31;border-top-color:#a13d31}
.stat-staying{background:#e6effa;color:#144a70;border-top-color:#144a70}
.stat-booked{background:#e5f4ea;color:#217a3e;border-top-color:#217a3e}

.room-strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.room-chip{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:20px;font-size:.8rem;font-weight:600;border:1px solid transparent}
.room-chip-name{font-weight:700}
.room-chip-status{font-size:.72rem;font-weight:600;opacity:.8}
.room-chip-free{background:#eef6ea;color:#217a3e;border-color:#cfe8c4}
.room-chip-occupied{background:#e6effa;color:#144a70;border-color:#c3d7ee}
.room-chip-blocked{background:#fdf3e3;color:#8a5a00;border-color:#eed8ac}

.overview-sub-head{color:#144a70;font-size:.95rem;margin:22px 0 4px}
.overview-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #f0f2f4;flex-wrap:wrap}
.overview-row:first-child{border-top:none}
.overview-guest{font-weight:600;font-size:.9rem}
.overview-room{color:#7b8794;font-weight:400;font-size:.8rem}
.overview-row button{padding:6px 14px;font-size:.8rem;flex-shrink:0}

.grid-scroll{overflow-x:auto;margin-top:14px}
.archive-toggle{display:block;margin-top:14px;font-size:.82rem}
.archive-table{opacity:.85}
.archive-table table{border-top:2px dashed #e2e9ee}
.rates-grid{border-collapse:collapse;font-size:.82rem;white-space:nowrap}
.rates-grid th,.rates-grid td{padding:7px 10px;border-bottom:1px solid #f0f2f4;text-align:right}
.rates-grid th:first-child,.rates-grid td:first-child{text-align:left;position:sticky;left:0;background:#fff}
.rates-grid th{color:#7b8794;font-weight:600;font-size:.74rem}
.rate-cell-season{background:#e9f1f7;color:#144a70;font-weight:600;border-radius:4px}

/* Calendar */
.cal-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;flex:1 1 auto}
.cal-nav-group{display:flex;gap:6px;align-items:center}
.cal-nav button{padding:7px 12px;font-size:.82rem}
.cal-nav-group button{padding:7px 11px;min-width:34px}
.cal-jump{flex:0 0 auto}
.cal-jump .df-display{width:145px}

/* Custom date picker — replaces <input type="date"> everywhere so every date
   field in the app looks and behaves the same, matching the branded popup
   style the table-reservations app uses instead of the bare native one. */
.df{display:inline-block;position:relative}
.df-display{width:150px;padding:9px 11px;border:1px solid #ccd8e0;border-radius:7px;font-size:.9rem;font-family:inherit;color:var(--ch);background:#fff;cursor:pointer}
.df-display:focus{outline:2px solid var(--navy-pale);outline-offset:1px}
.modal .df,.datebar .df{width:100%}
.modal .df-display,.datebar .df-display{width:100%;box-sizing:border-box}
.df-popup{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:#fff;border-radius:10px;box-shadow:var(--shl);overflow:hidden;width:264px}
.df-head{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 8px 10px 14px}
.df-head button{background:none;border:none;color:#fff;font-size:1.05rem;cursor:pointer;padding:3px 10px;border-radius:5px;line-height:1}
.df-head button:hover{background:rgba(255,255,255,.15)}
.df-month{font-family:'Crimson Pro',serif;font-weight:700;font-size:1.02rem}
.df-grid{padding:10px 10px 4px;display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.df-dow{text-align:center;font-size:.66rem;font-weight:600;color:var(--mu);padding:4px 0;text-transform:uppercase}
.df-day{text-align:center;padding:7px 0;font-size:.82rem;border-radius:6px;cursor:pointer;color:var(--ch)}
.df-day:hover{background:var(--navy-pale)}
.df-day.df-muted{color:#c9d0d6;cursor:default}
.df-day.df-today{box-shadow:inset 0 0 0 1.5px var(--gold)}
.df-day.df-selected{background:var(--navy);color:#fff;font-weight:700}
.df-foot{text-align:center;padding:6px 8px 10px;border-top:1px solid #eef1f4;margin-top:4px}
.df-foot button{background:none;border:none;color:var(--navy);font-size:.82rem;font-weight:600;cursor:pointer;padding:4px 10px}
.df-foot button:hover{text-decoration:underline}
.grid-scroll{position:relative}
.grid-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:18px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),rgba(0,0,0,.05))}
.cal-grid{border-collapse:collapse;font-size:.82rem}
.cal-grid th,.cal-grid td{border:1px solid #e2ecdf;padding:0;height:42px}
.cal-grid th{padding:5px 6px;background:var(--navy);font-weight:600;color:rgba(255,255,255,.88);min-width:40px;border-color:var(--navy-l)}
.cal-grid th.cal-corner{background:var(--navy-d);text-align:left;padding:6px 10px;position:sticky;left:0;z-index:2;color:#fff}
.cal-grid th.cal-month{text-align:left;color:rgba(255,255,255,.7);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;background:var(--navy-d);border-color:var(--navy-l)}
.cal-grid th.cal-weekend{background:var(--navy-l)}
.cal-grid th.cal-today{background:var(--gold);color:#fff}
.cal-grid th.cal-today .cal-dow{color:rgba(255,255,255,.85)}
.cal-dow{font-size:.64rem;color:rgba(255,255,255,.65);font-weight:600;text-transform:uppercase}
.cal-dom{font-size:.86rem}
.cal-room{padding:6px 8px;position:sticky;left:0;background:#fff;z-index:1}
.cal-room-name{display:inline-block;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-weight:700;font-size:.85rem;color:var(--navy);font-family:'Crimson Pro',serif}
/* Pale green = available, matching the convention the real system uses so a
   free room reads as "free" at a glance rather than just "not coloured". */
.cal-empty{background:#eef6ea}
.cal-empty.cal-weekend{background:#e4f0de}
.cal-empty.cal-today{background:#fdf3e3;box-shadow:inset 0 0 0 1px var(--gold-l)}
.cal-empty{cursor:pointer}
.cal-empty:hover{background:#cfe6c6;box-shadow:inset 0 0 0 1px #8fbf7f}
.cal-bar{cursor:pointer;padding:2px 8px;overflow:hidden;color:#fff;font-weight:600;font-size:.78rem;border-radius:4px;transition:filter .12s,transform .12s;vertical-align:middle}
.cal-bar:hover{filter:brightness(.93)}
.cal-bar-line1{display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap}
.cal-bar span{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.cal-bar .cal-guest{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cal-bar-config{font-size:.66rem;font-weight:500;opacity:.82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;letter-spacing:.01em}
.cal-bar-confirmed{background:#2f7ab8}
.cal-bar-checked_in{background:#217a3e}
.cal-bar-checked_out{background:#8a97a3}
.cal-bar-no_show{background:#a13d31}
.cal-bar-blocked{
  color:#7a5300;background:repeating-linear-gradient(45deg,rgba(184,144,0,.18),rgba(184,144,0,.18) 4px,rgba(184,144,0,.07) 4px,rgba(184,144,0,.07) 8px);
  border:1px solid #c8963e;cursor:pointer;
}
.cal-paid{margin-right:4px;font-size:.7rem}
.cal-paid-paid{color:#b6e2c4}
.cal-paid-deposit{color:#ffe6a8}
.cal-paid-unpaid{color:#f5c6c0}

.cal-key-toggle{display:block;margin-top:12px;font-size:.8rem}
.cal-key{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid #f0f2f4}
.cal-key-item{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#41505e}
.cal-key-swatch{width:14px;height:14px;border-radius:3px;display:inline-block}
.cal-key-glyph{font-size:.8rem;color:#41505e;width:14px;text-align:center;display:inline-block}

.detail-rows{margin:14px 0}
.detail-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px solid #f0f2f4;font-size:.87rem}
.detail-row:first-child{border-top:none}
.detail-row>span:first-child{color:#7b8794;flex-shrink:0}
.detail-row>span:last-child{text-align:right}
.detail-long{flex-direction:column;gap:3px}
.detail-long>span:last-child{text-align:left;white-space:pre-wrap;line-height:1.5}
.payment-value{display:flex;align-items:center;gap:6px;font-weight:600}
.payment-value .cal-paid-paid{color:#217a3e}
.payment-value .cal-paid-deposit{color:#8a5a00}
.payment-value .cal-paid-unpaid{color:#a13d31}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{background:#fff;border-radius:12px;padding:36px 32px;box-shadow:0 2px 10px rgba(0,0,0,.1);max-width:340px;width:100%}
.login-logo{display:block;height:44px;width:auto;margin:0 0 18px}
.login-card h1{color:#144a70;font-size:1.3rem;margin:0 0 4px}
.login-card p{color:#7b8794;font-size:.85rem;margin:0 0 22px}
.login-card label{display:block;font-size:.8rem;color:#41505e;margin:14px 0 6px;font-weight:600}
.login-card input{width:100%;padding:10px 12px;border:1px solid #ccd8e0;border-radius:8px;font-size:.95rem}
.login-card button{width:100%;margin-top:20px;background:#144a70;color:#fff;border:none;border-radius:8px;padding:11px;font-size:.95rem;font-weight:600;cursor:pointer}
.login-card button:hover{background:var(--navy-d)}
.login-err{color:#c0392b;font-size:.83rem;margin-top:10px}

/* Cards & sections */
.card{background:#fff;border-radius:10px;padding:22px 24px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:20px}
.card h2{margin:0 0 14px;color:#144a70;font-size:1.15rem}

.datebar{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.datebar .field{display:flex;flex-direction:column;gap:5px}
.datebar label{font-size:.78rem;color:#41505e;font-weight:600}
.datebar input{padding:9px 10px;border:1px solid #ccd8e0;border-radius:7px;font-size:.9rem}
.datebar button{background:#144a70;color:#fff;border:none;border-radius:7px;padding:10px 18px;font-size:.88rem;font-weight:600;cursor:pointer;height:38px}
.datebar button:hover{background:var(--navy-d)}
.nights-note{color:#7b8794;font-size:.8rem;margin-top:10px}

.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
.room-card{border:1px solid #e2e9ee;border-radius:10px;padding:16px}
.room-card h3{margin:0 0 4px;font-size:1rem;color:#1c2733}
.room-card .rate{color:#144a70;font-weight:700;font-size:1.05rem;margin-bottom:10px}
.room-card .rate small{color:#7b8794;font-weight:400;font-size:.78rem}
.room-card-warn{border-color:#eed8ac;background:#fffcf6}
.room-card-blocked{background:#fdf3e3;color:#8a5a00;font-size:.76rem;font-weight:600;padding:6px 9px;border-radius:6px;margin-bottom:10px}
.block-warning{background:#fdf3e3;color:#8a5a00;border:1px solid #eed8ac;border-radius:8px;padding:10px 12px;font-size:.82rem;margin-bottom:4px;line-height:1.4}
.config-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid #f0f2f4}
.config-row .cname{font-size:.88rem}
.config-row .csleeps{color:#7b8794;font-size:.76rem}
.config-row button{background:#e9f1f7;color:#144a70;border:none;border-radius:6px;padding:6px 12px;font-size:.8rem;font-weight:600;cursor:pointer}
.config-row button:hover{background:#d5e5f0}
.empty-note{color:#7b8794;font-size:.88rem}

/* Bookings table */
table{width:100%;border-collapse:collapse;font-size:.87rem}
th{text-align:left;color:#7b8794;font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid #e2e9ee}
td{padding:10px;border-bottom:1px solid #f0f2f4}
.status-pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.74rem;font-weight:600}
.status-confirmed{background:#e5f4ea;color:#217a3e}
.status-cancelled{background:#f7e6e4;color:#a13d31;text-decoration:line-through}
.status-checked_in{background:#e6effa;color:#144a70}
.status-checked_out{background:#eee;color:#666}
.status-no_show{background:#f7e6e4;color:#a13d31}
td button.link{background:none;border:none;color:#a13d31;font-size:.8rem;cursor:pointer;padding:0}
td button.link:hover{text-decoration:underline}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(20,30,40,.4);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:12px;padding:26px 28px;max-width:420px;width:100%;max-height:90vh;overflow:auto}
.modal-wide{max-width:780px}
@media(min-width:720px){
  .modal-wide .detail-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .modal-wide .detail-row:nth-child(2):not(.detail-long){border-top:none}
  .modal-wide .detail-long{grid-column:1/-1}
}
.modal h2{margin:0 0 4px;color:#144a70;font-size:1.1rem}
.modal .sub{color:#7b8794;font-size:.83rem;margin:0 0 18px}
.modal label{display:block;font-size:.8rem;color:#41505e;margin:12px 0 5px;font-weight:600}
.modal input,.modal textarea{width:100%;padding:9px 11px;border:1px solid #ccd8e0;border-radius:7px;font-size:.9rem;font-family:inherit}
.modal textarea{resize:vertical;line-height:1.45}
.modal .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.modal input[type=checkbox]{width:auto}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-top:16px!important;font-weight:500!important;cursor:pointer}
.modal-actions{display:flex;gap:10px;margin-top:22px}
.modal-actions button{flex:1;padding:10px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:none}
.btn-primary{background:#144a70;color:#fff}
.btn-primary:hover{background:var(--navy-d)}
.btn-secondary{background:#f0f2f4;color:#41505e}
.btn-secondary:hover{background:#e2e6ea}
.modal-err{color:#c0392b;font-size:.83rem;margin-top:10px}

@media(max-width:480px){
  .nav{height:auto;padding:10px 14px;flex-wrap:wrap;gap:8px}
  .nlogo{height:30px}
  .nbrand h1{font-size:.92rem}
  .nbrand span{font-size:.58rem}
  .nav button{padding:6px 11px;font-size:.8rem}
  .datebar{flex-direction:column;align-items:stretch}
  .datebar button{width:100%}
  .card{padding:16px 14px}
  .cal-nav{justify-content:flex-start;width:100%}
  .cal-jump .df-display{width:140px}
  .df-popup{width:calc(100vw - 32px);max-width:264px}
  .cal-grid th{min-width:32px;padding:4px 3px}
  .cal-dow{font-size:.6rem}
  .cal-dom{font-size:.8rem}
  .cal-room-name{max-width:64px;font-size:.8rem}
  .cal-bar{font-size:.72rem;padding:2px 5px}
  .cal-bar-config{font-size:.6rem}
  .modal .row4{grid-template-columns:repeat(2,1fr)}
  .admin-room-head,.admin-config-row{flex-direction:column;align-items:stretch}
  .overview-head{flex-direction:column;align-items:stretch}
  .overview-date{font-size:1.15rem}
  .overview-head .btn-primary{width:100%}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-n{font-size:1.7rem}
}

/* Guest booking widget preview */
.widget-preview{max-width:640px;margin:0 auto}
.widget-preview-label{background:#fdf3e3;color:#8a5a00;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:5px;border-radius:6px;margin-bottom:18px}
.widget-brand{text-align:center;margin-bottom:2px;font-size:1.5rem}
.widget-tagline{text-align:center;color:#7b8794;font-size:.82rem;margin:0 0 22px}

.widget-steps{display:flex;justify-content:center;gap:0;margin-bottom:24px}
.widget-step{display:flex;align-items:center;gap:7px;font-size:.78rem;color:#b3bcc4;padding:0 14px;position:relative}
.widget-step:not(:last-child)::after{content:"";position:absolute;right:-2px;top:50%;width:28px;height:1px;background:#e2e9ee}
.widget-step-n{width:22px;height:22px;border-radius:50%;background:#eef1f4;color:#7b8794;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0}
.widget-step-active{color:var(--navy);font-weight:700}
.widget-step-active .widget-step-n{background:var(--navy);color:#fff}
.widget-step-done{color:#217a3e}
.widget-step-done .widget-step-n{background:#217a3e;color:#fff}

.widget-search{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:18px;background:#f5f9fb;border-radius:10px;margin-bottom:22px}
.widget-search .field{display:flex;flex-direction:column;gap:5px}
.widget-search label{font-size:.78rem;color:#41505e;font-weight:600}
.widget-search input{padding:9px 10px;border:1px solid #ccd8e0;border-radius:7px;font-size:.9rem}
.widget-search .btn-primary{padding:10px 18px;border:none;border-radius:7px;font-size:.88rem;font-weight:600;cursor:pointer;height:38px}

.widget-room-list{display:flex;flex-direction:column;gap:16px}
.widget-room-card{border:1px solid #e2e9ee;border-radius:12px;overflow:hidden}
.widget-room-photo{background:linear-gradient(135deg,var(--navy),var(--navy-l));color:#fff;font-family:'Crimson Pro',serif;font-size:1.3rem;font-weight:700;padding:28px 20px;text-align:center}
.widget-room-body{padding:16px 18px}
.widget-room-body h3{margin:0 0 4px;font-size:1.05rem;color:#1c2733}
.widget-room-desc{color:#7b8794;font-size:.85rem;margin:0 0 14px}
.widget-config-list{display:flex;flex-direction:column}
.widget-config-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid #f0f2f4}
.widget-config-row:first-child{border-top:none}
.widget-config-name{font-weight:600;font-size:.92rem}
.widget-config-sub{color:#7b8794;font-size:.78rem}
.widget-config-price{text-align:right;font-weight:700;color:var(--navy);flex-shrink:0}
.widget-config-price small{display:block;color:#7b8794;font-weight:400;font-size:.72rem}
.widget-config-row .btn-primary{padding:8px 18px;border:none;border-radius:7px;font-size:.85rem;font-weight:600;cursor:pointer;flex-shrink:0}

.widget-details h3{margin:0 0 4px}
.widget-details .sub{color:#7b8794;font-size:.85rem;margin:0 0 18px}
.widget-details form label{display:block;font-size:.8rem;color:#41505e;margin:12px 0 5px;font-weight:600}
.widget-details form input,.widget-details form textarea{width:100%;padding:9px 11px;border:1px solid #ccd8e0;border-radius:7px;font-size:.9rem;font-family:inherit;box-sizing:border-box}

.widget-confirm{text-align:center;padding:10px 0}
.widget-confirm-icon{width:48px;height:48px;border-radius:50%;background:#e5f4ea;color:#217a3e;font-size:1.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.widget-confirm h3{margin:0 0 4px}
.widget-confirm .sub{color:#7b8794;font-size:.85rem;margin:0 0 18px}
.widget-confirm .detail-rows{text-align:left;max-width:320px;margin:0 auto 18px}
.widget-confirm-note{color:#7b8794;font-size:.82rem;max-width:380px;margin:0 auto 20px;line-height:1.5}

@media(max-width:480px){
  .widget-config-row{flex-direction:column;align-items:stretch;gap:8px}
  .widget-config-price{text-align:left}
}

/* Guest details sections (booking forms + widget) */
.form-section{margin:20px 0 2px;padding-top:12px;border-top:1px solid #e4ebf0;color:#144a70;font-size:.95rem}
.modal select,.widget-details form select{width:100%;padding:9px 11px;border:1px solid #ccd8e0;border-radius:7px;font-size:.9rem;font-family:inherit;background:#fff;box-sizing:border-box}
.widget-details .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:400px){.widget-details .row2{grid-template-columns:1fr}}

/* Payments (Pay by Link) */
.paylink-days{padding:7px 10px;border:1px solid #ccd8e0;border-radius:7px;font-size:.85rem;font-family:inherit;background:#fff}
.sub-note{color:#7b8794;font-size:.82rem;margin:4px 0 14px}
.paylink-summary{font-weight:600;color:#144a70;font-size:.9rem;margin:0 0 10px}
.paylink-amount{font-weight:600;white-space:nowrap}
.paylink-none{color:#a0aab4;font-style:italic}

/* Extras */
.extras-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.extra-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 0;border-bottom:1px solid #f0f2f4}
.modal .extra-main,.widget-details .extra-main{display:flex;align-items:flex-start;gap:9px;margin:0;font-weight:400;cursor:pointer;flex:1;min-width:180px}
.modal .extra-main input[type=checkbox],.widget-details .extra-main input[type=checkbox]{width:auto;margin-top:3px}
.extra-name{display:block;font-weight:600;color:#1f2d3a;font-size:.88rem}
.extra-price{display:block;color:#7b8794;font-size:.8rem}
.extra-desc{color:#7b8794;font-size:.78rem;margin-top:2px}
.extra-side{display:flex;align-items:center;gap:12px}
.modal input.extra-qty,.widget-details input.extra-qty{width:70px}
.extra-line-total{min-width:60px;text-align:right;font-weight:600;font-size:.88rem;color:#144a70}
.extra-warn{flex-basis:100%;color:#8a5a00;font-size:.8rem}
.extra-warn:empty{display:none}
.total-line{margin-top:10px;font-weight:700;color:#144a70;font-size:.95rem}
.detail-total{font-weight:700}
.extra-retired{opacity:.55}
.cal-walker{margin-right:3px;font-size:.85em}
.extra-room-list{display:flex;flex-wrap:wrap;gap:0 16px}
.modal .extra-room-box{margin-top:4px!important}
.modal input[readonly].extra-qty,.widget-details input[readonly].extra-qty{background:#f3f6f8;color:#41505e}

/* Calendar uses the full width of a laptop screen, with tighter padding,
   so more days fit on screen. Phones are unchanged. */
.page.page-cal,.tabbar.tabbar-wide{max-width:none}
@media(min-width:700px){
  .page.page-cal{padding:12px 20px 30px}
  .page-cal .card{padding:14px 16px;margin-bottom:12px}
  .page-cal .card-head{margin-bottom:6px}
  .page-cal .grid-scroll{margin-top:8px}
  .tabbar.tabbar-wide{padding-left:20px;padding-right:20px}
  /* Taller room rows, days twice the phone width so bars are easy to read and click. */
  .page-cal .cal-grid th,.page-cal .cal-grid td{height:56px}
  .page-cal .cal-grid thead th{height:auto}
  .page-cal .cal-grid{--cal-day:72px;--cal-room:96px}
  .page-cal .cal-grid th:not(.cal-corner):not(.cal-month){padding:4px 2px}
  .page-cal .cal-bar{font-size:.8rem}
}

/* Every day column the same width; long names get "…" instead of widening it. */
.cal-grid{table-layout:fixed;--cal-day:38px;--cal-room:76px}
.cal-col-room{width:var(--cal-room)}
.cal-col-day{width:var(--cal-day)}
.cal-grid th,.cal-grid td{overflow:hidden}
.cal-bar .cal-bar-line1,.cal-bar .cal-bar-config{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-bar .cal-bar-line1{display:flex;align-items:center;gap:3px}
.cal-bar .cal-guest{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media(max-width:480px){.cal-grid{--cal-day:36px;--cal-room:64px}}
/* The paid circle and walker boot keep their full size; only the name shrinks. */
.cal-bar .cal-paid,.cal-bar .cal-walker{flex:none}
/* Narrow room column: names wrap onto two lines rather than being cut off. */
.cal-grid td.cal-room{padding:4px 6px}
.cal-grid .cal-room-name{max-width:none;white-space:normal;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}
@media(max-width:480px){.cal-grid .cal-room-name{max-width:none;font-size:.78rem}}
/* Month name stays in view when its first days are scrolled under the room column. */
.cal-grid th.cal-month{overflow:visible}
.cal-month-label{position:sticky;left:calc(var(--cal-room) + 8px)}

/* ── Calendar redesign (2026-11-02). Roll back: git checkout calendar-before-redesign -- admin/public ── */
/* Rows fill the screen height (--cal-row is set by fitCalendarRows in app.js). */
.cal-grid tbody td{height:var(--cal-row,42px)}
.page-cal .cal-grid tbody td{height:var(--cal-row,56px)}
/* Plain day numbers: "Fri" over "20". */
.cal-grid th[data-date]{text-align:center}
.cal-dom{font-weight:700}
/* Background: see below. */
/* Original pale green, weekends a shade darker to break the weeks up. */
.cal-empty{background:#eef6ea}
.cal-empty.cal-weekend{background:#dfecd8}
.cal-empty:hover{background:#cfe6c6;box-shadow:inset 0 0 0 1px #8fbf7f}
/* A white gap around every bar, so back-to-back stays read as separate. */
.cal-grid td.cal-bar{border:solid #eef6ea;border-width:4px 2px}
.cal-grid td.cal-bar-blocked{border-color:#eef6ea}
/* Names may wrap onto two lines; the make-up sits underneath. */
.cal-bar{vertical-align:middle;padding:4px 6px}
.cal-bar .cal-bar-line1{align-items:flex-start;white-space:normal}
.cal-bar .cal-guest{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2;word-break:normal;overflow-wrap:normal}
.cal-bar .cal-paid,.cal-bar .cal-walker{line-height:1.5}
.cal-bar .cal-paid{font-size:.85rem;font-weight:700;text-shadow:0 0 1px rgba(0,0,0,.35)}
.cal-bar .cal-bar-config{margin-top:2px}
/* Key link sits beside the title instead of taking a line at the bottom. */
.cal-title{display:flex;align-items:baseline;gap:10px}
.card-head .cal-key-toggle,.card-head .cal-key-toggle:hover{display:inline;margin:0;padding:0;background:none;border:none;color:#5b7186;font-size:.78rem;font-weight:500;text-decoration:underline;cursor:pointer}
.page-cal .cal-key{margin:0 0 8px;padding:0 0 8px;border-top:none;border-bottom:1px solid #f0f2f4}
/* Slimmer header bars on the Calendar tab. */
.view-calendar .devbar{padding:2px 10px;font-size:.7rem}
@media(min-width:700px){
  .view-calendar .nav{height:48px}
  .view-calendar .nlogo{height:30px}
}
/* The "more to scroll" fade drifts with the content in the calendar's scroller
   and shows as a stray grey stripe mid-grid — the calendar doesn't need it. */
.page-cal .grid-scroll::after{display:none}
/* One-night bars: paid circle on top, initials, short make-up — all centred. */
.cal-bar.cal-bar-short{padding:3px 1px;text-align:center}
.cal-bar-short .cal-bar-line1{flex-direction:column;align-items:center;gap:0}
.cal-bar-short .cal-paid,.cal-bar-short .cal-walker{margin:0;line-height:1.1}
.cal-bar-short .cal-guest{font-size:.78rem;letter-spacing:.02em}
.cal-bar-short .cal-bar-config{text-overflow:clip}

/* ── Booking pop-up redesign (2026-11-02). Roll back: git checkout details-before-redesign -- admin/public ── */
.detail-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.detail-head h2{margin:0}
.booking-detail .sub{margin-bottom:10px}
.detail-sections{display:grid;grid-template-columns:1fr;gap:4px 28px;margin:6px 0 4px}
@media(min-width:720px){.detail-sections{grid-template-columns:1fr 1fr}}
.detail-section h4{margin:12px 0 2px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#7b8794;font-weight:700}
/* Inside a section it's one tidy column, label close to value. */
.booking-detail .detail-rows,.modal-wide.booking-detail .detail-rows{display:block;margin:0}
.booking-detail .detail-row:nth-child(2),.modal-wide.booking-detail .detail-row:nth-child(2):not(.detail-long){border-top:1px solid #f0f2f4}
.booking-detail .detail-row:first-child{border-top:none}
.booking-detail .detail-row a{color:#144a70;font-weight:600;text-decoration:none}
.booking-detail .detail-row a:hover{text-decoration:underline}
.detail-due>span:last-child{color:#a13d31}
.detail-meta{color:#a0aab4;font-size:.75rem;margin:10px 0 0}
.detail-actions{justify-content:space-between;align-items:center;flex-wrap:wrap}
.detail-actions .detail-actions-right{display:flex;gap:10px;flex:1;justify-content:flex-end;flex-wrap:wrap}
.detail-actions .detail-actions-right button{flex:0 1 auto;min-width:96px}
.modal-actions .danger-link{flex:none;background:none;border:none;color:#b03a2e;font-size:.85rem;font-weight:600;padding:8px 0;cursor:pointer;text-decoration:underline}
/* Phones: Close | Edit | main action in one row, Cancel link on its own line below. */
@media(max-width:600px){
  .detail-actions .detail-actions-right{flex-basis:100%;flex-wrap:nowrap;gap:8px}
  .detail-actions .detail-actions-right button{flex:1;min-width:0;padding:10px 6px}
  .detail-actions .danger-link{order:2;flex-basis:100%;text-align:center;padding:6px 0 0;font-size:.8rem}
}

/* Long forms: Save/Cancel stay at the bottom of the pop-up while scrolling. */
.sticky-actions{position:sticky;bottom:-26px;background:#fff;padding:12px 0 14px;margin-bottom:-14px;border-top:1px solid #e4ebf0;flex-wrap:wrap;z-index:2}
.sticky-actions .modal-err{flex-basis:100%;margin:0}
.sticky-actions .modal-err:empty{display:none}

/* Folded guest address on staff forms. */
.form-fold summary{cursor:pointer;list-style:revert}
.form-fold .fold-preview{color:#7b8794;font-weight:400;font-size:.82rem;font-family:inherit}
.form-fold[open] .fold-preview{display:none}

/* Summary under the name: dates, nights, guests, arrival. */
.detail-summary{background:#f3f7fa;border-radius:10px;padding:10px 14px;margin:4px 0 6px}
.detail-summary-dates{font-weight:700;color:#144a70;font-size:1.02rem}
.detail-summary-sub{color:#41505e;font-size:.86rem;margin-top:2px}
/* Section headings in the plain font, not the serif. */
.booking-detail .detail-section h4{font-family:inherit;font-variant:normal}
/* Phones: tighter rows so most bookings fit on one screen. */
@media(max-width:480px){
  .booking-detail{padding:18px 16px}
  .booking-detail .detail-row{padding:5px 0;font-size:.84rem}
  .booking-detail .detail-section h4{margin-top:10px}
  .booking-detail .sticky-actions{bottom:-18px}
}

/* ── Several rooms, one booking (2026-11-03) ── */
.modal .row3{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px}
.room-line{border-top:1px solid #e3e7ec;margin-top:14px;padding-top:10px}
.room-line-remove{background:none;border:none;color:#b03a2e;font-size:.82rem;font-weight:600;padding:6px 0 0;cursor:pointer;text-decoration:underline}
.add-room-btn{display:block;margin:14px 0 4px}
.cal-bar .cal-linked{flex:none;font-size:.75rem}
.cal-grid td.cal-bar.cal-bar-hl{box-shadow:inset 0 0 0 3px #c8963e}
.detail-cancelled span:first-child{text-decoration:line-through;opacity:.6}
.detail-add-room{margin:10px 0 0}
.detail-add-room .link,.detail-rows .link{background:none;border:none;padding:0;color:var(--navy);font-weight:600;text-decoration:underline;cursor:pointer;font-size:inherit}
.detail-cancel-links{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:480px){
  .modal .row3{grid-template-columns:1fr 1fr}
  .modal .row3 > div:last-child{grid-column:1 / -1}
  .detail-actions .detail-cancel-links{order:2;flex-basis:100%;justify-content:center}
  .detail-actions .detail-cancel-links .danger-link{flex-basis:auto}
}
/* Running total on the new-booking form. */
.form-total{margin-top:12px;padding:10px 12px;background:#f4f7fa;border-radius:8px;font-size:.9rem;color:#41505e}
.form-total-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.form-total-sum{font-weight:700;color:#144a70;font-size:.98rem;border-top:1px solid #dde3ea;margin-top:4px;padding-top:6px}
.form-total-warn{color:#b03a2e}
.modal .add-room-btn{padding:9px 14px;border:1px solid #cfd6de;border-radius:7px;font-size:.88rem;font-weight:600;cursor:pointer}

/* One-night bars: the full name in smaller type, not initials. */
.cal-bar-short .cal-guest-full{font-size:.68rem;line-height:1.15;letter-spacing:0;overflow-wrap:anywhere;text-align:center}
.cal-bar-short .cal-config-full{font-size:.6rem;text-overflow:ellipsis;max-width:100%}
/* Phones show names too: day columns a bit wider (36px → 52px) and the
   name smaller, so "Heather" / "O'Neill" fits on two lines. */
@media(max-width:480px){
  .cal-grid{--cal-day:52px}
  .cal-bar-short .cal-guest-full{font-size:.6rem}
  .cal-bar-short .cal-config-full{font-size:.55rem}
}

/* ── Mailbox (temporary, read-only) ── */
.mail-search{padding:7px 10px;border:1px solid var(--br);border-radius:7px;font-size:.85rem;font-family:inherit;min-width:0;width:200px}
.mail-folder{max-width:220px}
.mail-panes{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:14px;align-items:start}
.mail-list{border:1px solid var(--br);border-radius:8px;max-height:75vh;overflow-y:auto;background:var(--wh)}
.mail-row{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #e6edf2;border-radius:0;padding:10px 12px;cursor:pointer;color:var(--ch);font:inherit}
.mail-row:hover{background:var(--navy-pale)}
.mail-row.mail-active{background:#dde9f2;box-shadow:inset 3px 0 0 var(--navy)}
.mail-row-top{display:flex;justify-content:space-between;gap:8px;font-size:.85rem}
.mail-from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-date{color:var(--mu);white-space:nowrap;font-size:.78rem}
.mail-subj{font-size:.85rem;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-prev{font-size:.78rem;color:var(--mu);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-unread .mail-from,.mail-unread .mail-subj{font-weight:700}
.mail-more{display:block;margin:10px auto}
.mail-reader{border:1px solid var(--br);border-radius:8px;padding:14px;min-width:0;background:var(--wh)}
.mail-empty{display:flex;align-items:center;justify-content:center;min-height:200px}
.mail-back{display:none;margin-bottom:8px}
.mail-subject{margin:0 0 8px;color:var(--navy);font-size:1.05rem}
.mail-meta{font-size:.82rem;color:var(--mu);display:grid;gap:2px;margin-bottom:10px;word-break:break-word}
.mail-meta strong{color:var(--ch)}
.mail-atts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mail-att{background:var(--navy-pale);color:var(--navy);border:1px solid var(--br);border-radius:6px;padding:5px 9px;font-size:.8rem;cursor:pointer}
.mail-att span{color:var(--mu)}
.mail-frame{width:100%;height:65vh;border:1px solid #e6edf2;border-radius:6px;background:#fff}
@media(max-width:760px){
  .mail-panes{grid-template-columns:1fr}
  .mail-search,.mail-folder{width:100%;max-width:none}
  .mail-has-open .mail-list{display:none}
  .mail-card:not(.mail-has-open) .mail-reader{display:none}
  .mail-back{display:inline-block}
  .mail-list{max-height:none}
}