/* ════════════════════════════════════════
   RECEPTION HUB — Styles partagés
   Club Med Opio © 2026
   ════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css');

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

:root {
  --bg:       #f4f2ee;
  --bg2:      #eeeae4;
  --bg3:      #ffffff;
  --text:     #2a2520;
  --text2:    #6a6058;
  --text3:    #b0a898;
  --border:   #d8d2c8;
  --border2:  #c0b8ae;
  --gold:     #8a7560;
  --gold-bg:  #f5ede0;
  --gold-text:#8a6a3a;
  --success:  #1d9e75;
  --success-bg:#e6f4ea;
  --danger:   #e24b4a;
  --danger-bg:#fff1f0;
  --warning:  #ef9f27;
  --warning-bg:#fff8e6;
  --info:     #2a5a7a;
  --info-bg:  #e6eff5;
  --radius:   12px;
  --radius-sm:8px;
  --radius-lg:16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { background: var(--bg); color: var(--text); min-height: 100vh; }
a    { text-decoration: none; color: inherit; }

/* ── Buttons ── */
.btn { display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:0.5px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);font-size:12px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .1s }
.btn:hover { background: var(--bg2); }
.btn.pri  { background:var(--text);color:#fff;border-color:var(--text); }
.btn.pri:hover { opacity:.85; }
.btn.danger { background:var(--danger-bg);color:var(--danger);border-color:var(--danger); }

/* ── Forms ── */
.nf { padding:10px 14px;border-bottom:0.5px solid var(--border);background:var(--bg2);display:none; }
.nf.open { display:block; }
.fg { display:flex;gap:7px;flex-wrap:wrap;margin-bottom:7px; }
.fl { flex:1;min-width:90px;display:flex;flex-direction:column;gap:3px; }
.fl.w { flex:3; }
.fl label { font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em; }
.fl input, .fl select, .fl textarea {
  font-size:12px;padding:5px 7px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:#fff;color:var(--text);font-family:inherit;width:100%;
}
.fl input::placeholder, .fl textarea::placeholder { color:var(--text3); }
.fl input:focus, .fl select:focus, .fl textarea:focus { outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(138,117,96,.12); }
.fl textarea { resize:vertical;min-height:48px; }
.fa { display:flex;gap:7px;justify-content:flex-end;margin-top:6px; }

/* ── Toolbar ── */
.toolbar { display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:0.5px solid var(--border);background:var(--bg2);flex-wrap:wrap; }
.toolbar select, .toolbar input[type=text] {
  font-size:12px;padding:4px 7px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:#fff;color:var(--text);font-family:inherit;
}
.toolbar select:focus, .toolbar input[type=text]:focus { outline:none;border-color:var(--gold); }
.tsep { flex:1; }

/* ── Counters ── */
.ctrs { display:flex;gap:6px;padding:7px 12px;border-bottom:0.5px solid var(--border);flex-wrap:wrap; }
.ct { display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;border-radius:20px;border:0.5px solid var(--border); }
.ct .n { font-weight:500;font-size:13px; }
.ct.ok     { border-color:var(--success);background:var(--success-bg);color:var(--success); }
.ct.att    { border-color:var(--warning);background:var(--warning-bg);color:var(--warning); }
.ct.danger { border-color:var(--danger);background:var(--danger-bg);color:var(--danger); }
.ct.info   { border-color:var(--info);background:var(--info-bg);color:var(--info); }
.ct.gold   { background:#fef9e7;border-color:#f9e79f;color:#9a7d0a; }
.ct.plat   { background:#f4f6f7;border-color:#bdc3c7;color:#5d6d7e; }
.ct.vip    { background:#fdedec;border-color:#f5b7b1;color:#c0392b; }

/* ── Tables ── */
.tw { overflow-x:auto;max-height:460px;overflow-y:auto; }
table { width:100%;border-collapse:collapse;font-size:12px; }
thead { position:sticky;top:0;z-index:2; }
thead tr { background:var(--bg2); }
th { padding:6px 8px;text-align:left;font-size:10px;font-weight:500;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;border-bottom:0.5px solid var(--border);white-space:nowrap; }
td { padding:5px 7px;border-bottom:0.5px solid var(--border);vertical-align:middle;background:#fff; }
tr:hover td { filter:brightness(.97); }
td input[type=text], td input[type=number] {
  width:100%;border:none;background:transparent;font-size:12px;color:var(--text);padding:2px 3px;border-radius:3px;outline:none;font-family:inherit;
}
td input[type=text]:focus, td input[type=number]:focus { background:var(--bg2);outline:1px solid var(--border2); }
td select { width:100%;border:none;background:transparent;font-size:12px;color:var(--text);padding:2px 3px;border-radius:3px;outline:none;cursor:pointer;font-family:inherit; }
td select:focus { background:var(--bg2);outline:1px solid var(--border2); }
td input[type=checkbox] { width:15px;height:15px;cursor:pointer;accent-color:var(--success); }
.del-btn { background:none;border:none;cursor:pointer;color:var(--text3);padding:2px;display:flex;align-items:center; }
.del-btn:hover { color:var(--danger); }

/* ── Badges ── */
.badge { display:inline-block;font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px;white-space:nowrap; }
.b-gold   { background:#fef9e7;color:#9a7d0a;border:0.5px solid #f9e79f; }
.b-plat   { background:#f4f6f7;color:#5d6d7e;border:0.5px solid #bdc3c7; }
.b-vip    { background:#fdedec;color:#c0392b;border:0.5px solid #f5b7b1; }
.b-info   { background:var(--info-bg);color:var(--info); }
.b-ok     { background:var(--success-bg);color:var(--success); }
.b-warn   { background:var(--warning-bg);color:var(--warning); }
.b-danger { background:var(--danger-bg);color:var(--danger); }
.b-stat   { font-size:10px;padding:2px 6px;border-radius:8px;background:var(--bg2);color:var(--text2); }

/* ── App tabs ── */
.app-tabs { display:flex;border-bottom:0.5px solid var(--border);background:var(--bg2);overflow-x:auto;scrollbar-width:none;align-items:center; }
.app-tab  { padding:9px 14px;font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:5px;font-family:inherit;transition:color .1s; }
.app-tab.active { color:var(--text);border-bottom-color:var(--text);background:#fff; }
.app-tab:hover:not(.active) { background:#fff; }

/* ── PIN modal ── */
.pin-wrap { display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border:0.5px solid var(--border);border-radius:18px;padding:24px 30px;box-shadow:0 4px 24px rgba(0,0,0,.1); }
.pin-title { font-size:13px;font-weight:500;color:var(--text); }
.pin-sub   { font-size:11px;color:#8a8078; }
.pin-dots  { display:flex;gap:10px; }
.pin-dot   { width:10px;height:10px;border-radius:50%;background:#e8e4de;border:0.5px solid var(--border);transition:background .1s; }
.pin-dot.filled { background:var(--text);border-color:var(--text); }
.pin-err   { font-size:11px;color:var(--danger);min-height:14px;text-align:center; }
.pin-grid  { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:200px; }
.pin-key   { background:#fff;border:0.5px solid var(--border);border-radius:10px;color:var(--text);font-size:17px;font-weight:600;cursor:pointer;padding:10px;font-family:inherit;transition:background .1s; }
.pin-key:hover  { background:var(--bg); }
.pin-key:active { background:var(--bg2); }
.pin-key.secondary { font-size:11px;color:#8a8078;font-weight:400; }
.pin-cancel { font-size:11px;color:#8a8078;background:none;border:none;cursor:pointer;font-family:inherit; }
.pin-cancel:hover { color:var(--text2); }

/* ── Params modal ── */
.modal { background:#fff;border:0.5px solid var(--border);border-radius:18px;padding:22px 26px;width:360px;box-shadow:0 4px 24px rgba(0,0,0,.1); }
.modal-title { font-size:13px;font-weight:500;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:8px; }
.fields-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.fg-m { display:flex;flex-direction:column;gap:3px; }
.fl-m { font-size:10px;color:#8a8078;text-transform:uppercase;letter-spacing:.08em;font-weight:500;margin-bottom:2px; }
.fi   { background:#fff;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:7px 9px;font-family:inherit;width:100%; }
.fi::placeholder { color:var(--text3); }
.fi:focus { outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(138,117,96,.1); }
.field-full { grid-column:1/-1; }
.modal-actions { display:flex;gap:8px;margin-top:14px; }
.btn-save { flex:1;background:var(--text);border:none;border-radius:9px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;padding:9px;font-family:inherit;transition:opacity .1s; }
.btn-save:hover { opacity:.85; }
.btn-cls { background:#fff;border:0.5px solid var(--border);border-radius:9px;color:#6a6058;font-size:12px;cursor:pointer;padding:9px 14px;font-family:inherit; }
.btn-cls:hover { background:var(--bg);color:var(--text); }

/* ── Post-it ── */
.postit-tab     { position:fixed;bottom:18px;right:18px;z-index:50; }
.postit-trigger { display:flex;align-items:center;gap:5px;padding:5px 12px;background:#fff;border:0.5px solid var(--border);border-radius:20px;cursor:pointer;font-size:11px;color:var(--text2);box-shadow:0 2px 8px rgba(0,0,0,.07);position:relative;font-family:inherit; }
.postit-trigger:hover { box-shadow:0 3px 12px rgba(0,0,0,.12); }
.postit-badge   { position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:8px;padding:0 4px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;border:1.5px solid var(--bg); }
.postit-badge.show { display:flex; }
.postit-panel   { position:absolute;bottom:calc(100% + 8px);right:0;width:280px;background:#fffde7;border:0.5px solid #f0d060;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.13);display:none;overflow:visible; }
.postit-panel.open { display:block; }
.postit-header  { padding:10px 12px 7px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid #f0e060;border-radius:14px 14px 0 0; }
.postit-title   { font-size:11px;font-weight:600;color:#9a7d0a;letter-spacing:.06em;text-transform:uppercase; }
.postit-close   { background:none;border:none;cursor:pointer;color:#c9a820;font-size:14px;padding:0;line-height:1; }
.postit-msg-count { font-size:10px;color:#7a5a0a;background:rgba(249,231,159,.6);padding:1px 6px;border-radius:10px;font-weight:500; }
.postit-messages { max-height:190px;overflow-y:auto;padding:8px 10px 4px; }
.postit-msg     { padding:7px 32px 7px 9px;border-radius:9px;background:rgba(255,255,255,.85);margin-bottom:5px;border:0.5px solid rgba(240,220,80,.4);position:relative; }
.postit-msg-meta { display:flex;justify-content:space-between;margin-bottom:2px; }
.postit-msg-author { font-size:10px;font-weight:700;color:#9a7d0a; }
.postit-msg-time   { font-size:10px;color:#b89820; }
.postit-msg-text   { color:#2a2520;font-size:12px;line-height:1.4;word-break:break-word;margin-bottom:3px; }
.postit-msg-footer { display:flex;align-items:center;justify-content:space-between; }
.postit-msg-expire { font-size:10px;color:#c9a820;font-style:italic; }
.postit-dur-badge  { font-size:9px;padding:1px 6px;border-radius:8px;font-weight:500; }
.db-1h   { background:#e8f4ff;color:#1a4a6a; }
.db-half { background:#fff0e8;color:#7a3a08; }
.db-day  { background:#e8fff0;color:#0a5a2a; }
.db-pin  { background:#2a2520;color:#fff; }
.postit-del { position:absolute;top:50%;right:7px;transform:translateY(-50%);background:#ffe8e8;border:0.5px solid #f09595;border-radius:6px;cursor:pointer;color:var(--danger);font-size:11px;padding:4px 5px;display:flex;align-items:center;justify-content:center; }
.postit-del:hover { background:#ffd0d0; }
.postit-empty { font-size:12px;color:#b89820;text-align:center;padding:16px;font-style:italic; }
.postit-form  { padding:8px 10px 10px;border-top:0.5px solid #f0e060; }
.postit-input { width:100%;border:0.5px solid var(--border);border-radius:8px;padding:7px 9px;font-size:12px;background:#fff;font-family:inherit;color:var(--text);resize:none;outline:none;min-height:38px;display:block;margin-bottom:7px; }
.postit-input::placeholder { color:var(--text3); }
.postit-input:focus { border-color:#c9a820;box-shadow:0 0 0 2px rgba(201,168,32,.1); }
.send-dropdown-wrap { position:relative; }
.send-dropdown-btn  { width:100%;background:var(--text);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;padding:8px 12px;font-family:inherit;display:flex;align-items:center;justify-content:space-between; }
.send-dropdown-btn:hover { background:#3d3830; }
.send-menu { position:absolute;bottom:calc(100% + 4px);left:0;right:0;background:var(--text);border-radius:10px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.25);display:none;z-index:30; }
.send-menu.open { display:block; }
.send-opt  { padding:9px 14px;font-size:12px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:inherit;border-bottom:0.5px solid rgba(255,255,255,.07); }
.send-opt:last-child { border:none; }
.send-opt:hover { background:#3d3830; }
.send-opt .dur-name { font-weight:500; }
.send-opt .dur-desc { font-size:10px;color:rgba(255,255,255,.5);margin-left:auto; }

/* PIN post-it */
.pin-modal-pt { display:none;position:absolute;inset:0;background:rgba(255,253,231,.96);border-radius:14px;z-index:40;align-items:center;justify-content:center;flex-direction:column;gap:10px;backdrop-filter:blur(2px); }
.pin-modal-pt.open { display:flex; }
.pin-modal-title { font-size:12px;font-weight:600;color:var(--text); }
.pin-modal-sub   { font-size:10px;color:#8a8078; }
.pin-dots-sm  { display:flex;gap:8px; }
.pin-dot-sm   { width:9px;height:9px;border-radius:50%;background:#e8e4de;border:0.5px solid var(--border);transition:background .1s; }
.pin-dot-sm.filled { background:var(--text);border-color:var(--text); }
.pin-err-sm   { font-size:10px;color:var(--danger);min-height:13px;text-align:center; }
.pin-grid-sm  { display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:160px; }
.pin-k { background:#fff;border:0.5px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;padding:8px;font-family:inherit;transition:background .1s; }
.pin-k:hover  { background:var(--bg); }
.pin-k:active { background:var(--bg2); }
.pin-cancel-sm { font-size:10px;color:#8a8078;background:none;border:none;cursor:pointer;font-family:inherit; }

/* ── Row colors ── */
tr.r-gold td  { background:#fefdf5!important; } tr.r-gold td:first-child  { border-left:3px solid #f1c40f; }
tr.r-plat td  { background:#f8f9fa!important; } tr.r-plat td:first-child  { border-left:3px solid #95a5a6; }
tr.r-vip  td  { background:#fdf2f8!important; } tr.r-vip  td:first-child  { border-left:3px solid #e91e8c; }
tr.r-ok   td:first-child { border-left:3px solid var(--success); }
tr.r-warn td  { background:var(--warning-bg)!important; } tr.r-warn td:first-child { border-left:3px solid var(--warning); }
tr.r-err  td  { background:var(--danger-bg)!important;  } tr.r-err  td:first-child { border-left:3px solid var(--danger); }
tr.r-done td  { opacity:.45; } tr.r-done td:first-child { border-left:3px solid var(--success); }
tr.r-ins  td  { background:#f8f9ff!important; } tr.r-ins  td:first-child { border-left:3px solid var(--border); }
tr.r-ins-urgent  td { background:var(--danger-bg)!important; }  tr.r-ins-urgent  td:first-child { border-left:3px solid var(--danger); }
tr.r-ins-relance td { background:var(--warning-bg)!important; } tr.r-ins-relance td:first-child { border-left:3px solid var(--warning); }
tr.r-present td { background:#f0faf2!important; } tr.r-present td:first-child { border-left:3px solid var(--success); }
tr.r-lettre td  { opacity:.55; } tr.r-lettre td:first-child { border-left:3px solid var(--success)!important; }

/* ── Overlay ── */
.overlay { display:none;position:fixed;inset:0;background:rgba(244,242,238,.93);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(2px); }
.overlay.active { display:flex; }

/* ── Sync indicator ── */
.sync-dot { position:fixed;bottom:12px;left:12px;width:8px;height:8px;border-radius:50%;background:var(--success);z-index:99;transition:background .3s; }
.sync-dot.syncing { background:var(--warning); animation:pulse .8s infinite; }
.sync-dot.error   { background:var(--danger); }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:4px;height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2);border-radius:4px; }