/* ============================================================
   app.css — CallSophie shared stylesheet (dashboard, historique, parametres)
   ============================================================ */

/* ── 1. CSS RESET + VARIABLES ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#dedad4;--bg2:#d4d0c9;--bg-rgb:222,218,212;
  --cream:#1c1c1c;--text-rgb:28,28,28;
  --accent:#2d8b45;--accent-l:#4a9b5c;--accent-dim:rgba(45,139,69,0.12);
  --dim:#4a7a52;--dim2:#c4c0b8;
  --border:rgba(0,0,0,0.12);--border-strong:rgba(0,0,0,0.25);
  --panel-bg:#e5e2dc;--card-bg:#dedad4;
  --input-bg:rgba(0,0,0,.06);--input-border-col:rgba(0,0,0,.12);
  --sidebar-bg:#e2dfd9;
  --toggle-off:#b8b4ac;
  color-scheme:light;
}

html.dark{
  --bg:#1c1c1c;--bg2:#252525;--bg-rgb:28,28,28;
  --cream:#f0f0f0;--text-rgb:240,240,240;
  --accent:#4a9b5c;--accent-l:#6ab877;--accent-dim:rgba(74,155,92,0.1);
  --dim:#8aaa90;--dim2:#383838;
  --border:rgba(74,155,92,0.16);--border-strong:rgba(74,155,92,0.42);
  --panel-bg:#2a2a2e;--card-bg:#282828;
  --input-bg:rgba(255,255,255,.04);--input-border-col:rgba(255,255,255,.08);
  --sidebar-bg:#0d150e;
  --toggle-off:#4a4a4e;
  color-scheme:dark;
}

/* ── 2. BASE STYLES ─────────────────────────────────────────── */
html{scroll-behavior:smooth}

body{
  font-family:'Work Sans',sans-serif;
  background:var(--bg);
  color:var(--cream);
  min-height:100vh;
  line-height:1.6;
}

body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.018;background-size:200px 200px;
}

/* ── 3. APP LAYOUT ──────────────────────────────────────────── */
.app-layout{
  display:flex;
  min-height:100vh;
}

/* ── 4. SIDEBAR ─────────────────────────────────────────────── */
.sidebar{
  position:fixed;
  left:0;top:0;
  width:240px;
  height:100vh;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border-strong);
  display:flex;
  flex-direction:column;
  z-index:100;
  overflow-y:auto;
  transition:transform .3s ease;
}

/* Logo */
.sidebar-logo{
  display:flex;
  flex-direction:column;
  line-height:1;
  text-decoration:none;
  padding:1.4rem 1.4rem 1rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.6rem;
}

.logo-name{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  font-size:1.25rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream);
}

.logo-name span{color:var(--accent)}

.logo-sub{
  font-weight:400;
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  margin-top:2px;
  font-family:'Work Sans',sans-serif;
}

/* Navigation */
.sidebar-nav{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:.4rem 0;
  gap:.2rem;
}

.nav-section{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  margin-bottom:.6rem;
}

.nav-section-label{
  font-family:'Work Sans',sans-serif;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  padding:.5rem 1.4rem .3rem;
  opacity:.6;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem 1.4rem;
  text-decoration:none;
  color:var(--dim);
  font-family:'Work Sans',sans-serif;
  font-size:.82rem;
  font-weight:400;
  transition:color .2s, background .2s, border-color .2s;
  border-left:2px solid transparent;
  position:relative;
}

.nav-link svg{
  width:15px;height:15px;
  flex-shrink:0;
  opacity:.7;
  transition:opacity .2s;
}

.nav-link:hover{
  color:var(--cream);
  background:var(--accent-dim);
  border-left-color:var(--border-strong);
}

.nav-link:hover svg{opacity:1}

.nav-link.active{
  color:var(--accent);
  background:var(--accent-dim);
  border-left-color:var(--accent);
  font-weight:500;
}

.nav-link.active svg{opacity:1;color:var(--accent)}

/* Sidebar bottom */
.sidebar-bottom{
  border-top:1px solid var(--border);
  padding:.9rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

/* Carte utilisateur cliquable */
.user-card{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem .7rem;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  min-width:0;
}
.user-card:hover{
  border-color:var(--border-strong);
  background:rgba(255,255,255,.04);
}

.user-avatar{
  width:30px;height:30px;
  border-radius:50%;
  background:var(--accent-dim);
  border:1px solid var(--border-strong);
  font-family:'Work Sans',sans-serif;
  font-size:.65rem;
  letter-spacing:0;
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  text-transform:uppercase;
}

.user-info{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
  flex:1;
}

.user-email{
  font-family:'Work Sans',sans-serif;
  font-size:.58rem;
  letter-spacing:.03em;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-plan{
  font-family:'Work Sans',sans-serif;
  font-size:.5rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-dim);
  border:1px solid var(--border-strong);
  border-radius:50px;
  display:inline-flex;
  padding:.12rem .4rem;
  align-self:flex-start;
}
.user-plan.demo{color:var(--dim);background:transparent;border-color:var(--border)}
.user-plan.bronze{color:#b87333;background:rgba(184,115,51,.10);border-color:rgba(184,115,51,.4)}
.user-plan.silver{color:#a8aab8;background:rgba(168,170,184,.10);border-color:rgba(168,170,184,.4)}
.user-plan.gold{color:#d4af37;background:rgba(212,175,55,.10);border-color:rgba(212,175,55,.4)}
.user-plan.or{color:#b8952a;background:rgba(184,149,42,.10);border-color:rgba(184,149,42,.4)}
.user-plan.argent{color:#a8aab8;background:rgba(168,170,184,.10);border-color:rgba(168,170,184,.4)}
.user-plan.pause    { opacity: .75; border-color: rgba(192,120,32,.5); color: #c07020; }
.user-plan.suspendu { opacity: .75; border-color: rgba(192,64,64,.5);  color: #c04040; }
.user-plan.resilie  { opacity: .5;  border-color: var(--border);        color: var(--dim); text-decoration: line-through; }
.user-plan.dette    { border-color: rgba(192,64,64,.4); color: #e05252; background: rgba(192,64,64,.08); font-weight: 600; }
.badge-statut.dette { border-color: rgba(192,64,64,.4); color: #e05252; background: rgba(192,64,64,.08); font-weight: 600; }

/* ── Widget Crédit ──────────────────────────────────────────────────── */
.credit-widget{
  display:none;
  align-items:center;justify-content:space-between;
  padding:.32rem .75rem;
  border:1px solid rgba(192,120,32,.3);
  border-radius:50px;
  background:rgba(192,120,32,.06);
  margin:.25rem 0;
}
.credit-widget-label{
  font-family:'Work Sans',sans-serif;
  font-size:.48rem;letter-spacing:.13em;text-transform:uppercase;color:#c07020;
}
.credit-widget-amount{
  font-family:'Work Sans',sans-serif;
  font-size:.52rem;font-weight:600;color:#c07020;
}

/* ── Options modal pause ────────────────────────────────────────────── */
.pause-option{
  border:1px solid var(--border);padding:1rem 1.2rem;cursor:pointer;
  transition:border-color .15s,background .15s;position:relative;
  display:flex;flex-direction:column;gap:.3rem;
}
.pause-option + .pause-option{margin-top:.8rem}
.pause-option:hover{border-color:rgba(192,120,32,.4);background:rgba(192,120,32,.03)}
.pause-option.selected{border-color:#c07020;background:rgba(192,120,32,.06)}
.pause-option-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.pause-option-radio{
  width:.75rem;height:.75rem;border-radius:50%;
  border:1.5px solid var(--border);flex-shrink:0;
  transition:border-color .15s,background .15s;
}
.pause-option.selected .pause-option-radio{border-color:#c07020;background:#c07020}
.pause-option-body{font-family:'Work Sans',sans-serif;font-size:.65rem;color:rgba(var(--text-rgb),.6);line-height:1.6}

/* ── Widget IBAN — 15 min gratuites ────────────────────────────────── */
.iban-widget{border:1px solid rgba(184,149,42,.3);border-radius:12px;padding:1.1rem 1.3rem;display:flex;align-items:center;gap:1rem;background:rgba(184,149,42,.04);margin-bottom:1.2rem}
.iban-widget.locked{border-color:rgba(128,128,128,.2);background:rgba(128,128,128,.03);opacity:.75}
.iban-widget-icon{font-size:1.4rem;flex-shrink:0}
.iban-widget-body{flex:1;min-width:0}
.iban-widget-title{font-family:'Work Sans',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#b8952a;margin-bottom:.2rem}
.iban-widget.locked .iban-widget-title{color:#888}
.iban-widget-bar-bg{height:5px;border-radius:3px;background:rgba(184,149,42,.15);margin:.35rem 0;overflow:hidden}
.iban-widget-bar-fill{height:100%;border-radius:3px;background:#b8952a;transition:width .4s}
.iban-widget-sub{font-size:.68rem;color:#888;margin-top:.1rem}
.iban-widget-cta{font-family:'Work Sans',sans-serif;font-size:.7rem;font-weight:600;padding:.38rem .8rem;border-radius:6px;border:1px solid rgba(184,149,42,.4);background:transparent;color:#b8952a;cursor:pointer;white-space:nowrap;text-decoration:none;flex-shrink:0}
.iban-widget.locked .iban-widget-cta{border-color:rgba(128,128,128,.3);color:#888}

/* Flèche droite dans user-card */
.user-card-arrow{
  color:var(--border-strong);
  flex-shrink:0;
  transition:color .2s;
}
.user-card:hover .user-card-arrow{color:var(--dim);}

/* Rangée actions */
.sidebar-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.btn-logout{
  font-family:'Work Sans',sans-serif;
  font-size:.56rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--border);
  color:var(--dim);
  height:32px;
  padding:0 .8rem;
  cursor:pointer;
  transition:border-color .2s, color .2s;
  border-radius:50px;
  display:flex;align-items:center;gap:.35rem;
  flex:1;
}

.btn-logout:hover{
  border-color:rgba(224,82,82,.4);
  color:#e05252;
}

.theme-toggle{
  background:var(--accent-dim);
  border:1px solid var(--border-strong);
  color:var(--accent);
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .3s, border-color .3s;
  border-radius:50%;
  flex-shrink:0;
}

.theme-toggle:hover{background:var(--dim2)}

.icon-sun{display:none}
html.dark .icon-sun{display:block}
html.dark .icon-moon{display:none}

/* ── 5. MAIN CONTENT ────────────────────────────────────────── */
.main-content{
  margin-left:240px;
  flex:1;
  min-width:0;
  min-height:100vh;
  padding:2rem 2.5rem 4rem;
}

/* ── 6. PAGE HEADER ─────────────────────────────────────────── */
.page-header{
  margin-bottom:2rem;
}

.page-tag{
  font-family:'Work Sans',sans-serif;
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.8rem;
}

.page-tag::after{
  content:'';
  width:40px;height:1px;
  background:linear-gradient(90deg,rgba(74,155,92,.4),transparent);
}

.page-title{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  font-size:2.6rem;
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:-.02em;
  margin-bottom:.4rem;
}

.page-sub{
  font-size:.92rem;
  font-weight:500;
  color:rgba(var(--text-rgb),.6);
  line-height:1.6;
}

/* ── 7. STAT CARDS ──────────────────────────────────────────── */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-bottom:2rem;
}

.stat-card{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.2rem 1.4rem;
  position:relative;
  overflow:hidden;
}

.stat-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.stat-label{
  font-family:'Work Sans',sans-serif;
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:.5rem;
}

.stat-value{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;
  font-size:2.4rem;
  line-height:1;
  color:var(--cream);
}

.stat-unit{
  font-family:'Work Sans',sans-serif;
  font-size:.65rem;
  color:var(--dim);
  margin-top:.25rem;
}

/* ── 8. UPSELL BANNER ───────────────────────────────────────── */
.upsell-banner{
  background:var(--card-bg);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:1.2rem 1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}

.upsell-text{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.upsell-text strong{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.upsell-text p{
  font-size:.78rem;
  font-weight:300;
  color:rgba(var(--text-rgb),.55);
  line-height:1.5;
}

.btn-upgrade{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:transparent;
  color:var(--accent);
  padding:.75rem 1.8rem;
  border:1.5px solid var(--accent);
  border-radius:50px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .2s,color .2s,transform .2s;
  white-space:nowrap;
}

.btn-upgrade:hover{background:var(--accent);color:#f4f8f5;transform:translateY(-1px)}

/* ── 9. FEATURE GATING ──────────────────────────────────────── */
.gated{position:relative;pointer-events:none;user-select:none}
.gated > *{opacity:.35}

.gate-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;z-index:2;
}

.gate-badge{
  background:var(--panel-bg);
  border:1.5px solid var(--border-strong);
  border-radius:50px;
  padding:.6rem 1.2rem;
  display:flex;align-items:center;gap:.55rem;
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}

.gate-badge svg{color:var(--accent);width:15px;height:15px;flex-shrink:0}
.gate-badge a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(74,155,92,.35);
  transition:border-color .15s,color .15s;
}
.gate-badge a:hover{color:var(--accent-l);border-color:var(--accent)}

/* ── 10. TABLE STYLES ───────────────────────────────────────── */
.table-wrap{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:12px;
  overflow-x:auto;
  overflow-y:auto;
  max-height:calc(20 * 36px + 36px);
  margin-bottom:2rem;
}

.table-wrap table{
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
}

.table-wrap thead{
  border-bottom:1px solid var(--border);
}

.table-wrap th{
  font-family:'Work Sans',sans-serif;
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
  padding:.7rem 1rem;
  text-align:left;
  font-weight:500;
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:1;
  background:var(--panel-bg);
}

.table-wrap td{
  padding:.72rem 1rem;
  font-size:.82rem;
  font-weight:300;
  color:var(--cream);
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}

.table-wrap tr:last-child td{border-bottom:none}

.table-wrap tbody tr:hover td{
  background:var(--accent-dim);
}

/* ── 11. STATUS BADGES ──────────────────────────────────────── */
.badge{
  font-family:'Work Sans',sans-serif;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.18rem .55rem;
  border:1px solid;
  border-radius:50px;
  white-space:nowrap;
}

.badge-intercepte{
  color:#2d8b45;
  border-color:rgba(45,139,69,.35);
  background:rgba(45,139,69,.07);
}

.badge-rdv{
  color:#1a6b32;
  border-color:rgba(26,107,50,.4);
  background:rgba(26,107,50,.1);
}

.badge-blacklist{
  color:#c07020;
  border-color:rgba(192,112,32,.35);
  background:rgba(192,112,32,.07);
}

.badge-hors_plage{
  color:var(--dim);
  border-color:var(--border);
  background:transparent;
}

/* ── 12. FILTERS ────────────────────────────────────────────── */
.filters{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
  margin-bottom:1.2rem;
}

.filter-input{
  background:var(--input-bg);
  border:1px solid var(--input-border-col);
  border-bottom:1px solid var(--border);
  padding:.62rem .9rem;
  color:var(--cream);
  font-family:'Work Sans',sans-serif;
  font-size:.82rem;
  font-weight:300;
  outline:none;
  transition:border-color .2s,background .2s;
  border-radius:0;
}

.filter-input:focus{
  border-color:var(--accent);
  background:rgba(45,139,69,.04);
}

.filter-input::placeholder{color:rgba(var(--text-rgb),.3)}

.btn-filter{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--accent);
  color:#f4f8f5;
  border:none;
  border-radius:50px;
  padding:.62rem 1.2rem;
  cursor:pointer;
  transition:opacity .2s;
}

.btn-filter:hover{opacity:.85}

.btn-filter-reset{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:transparent;
  color:var(--dim);
  border:1px solid var(--border);
  border-radius:50px;
  padding:.62rem 1.2rem;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}

.btn-filter-reset:hover{
  border-color:var(--border-strong);
  color:var(--cream);
}

/* ── 13. FORM SECTION ───────────────────────────────────────── */
.form-section{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.6rem;
  margin-bottom:1.5rem;
}

.form-section-title{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cream);
  padding-bottom:.7rem;
  border-bottom:1px solid var(--border);
  margin-bottom:1.2rem;
}

.form-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.8rem;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  flex:1;
  min-width:180px;
}

.form-label{
  font-family:'Work Sans',sans-serif;
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim);
}

.form-input{
  background:var(--input-bg);
  border:1px solid var(--input-border-col);
  border-bottom:1px solid var(--border);
  padding:.82rem 1rem;
  color:var(--cream);
  font-family:'Work Sans',sans-serif;
  font-size:.9rem;
  font-weight:300;
  outline:none;
  transition:border-color .2s,background .2s;
  border-radius:0;
  width:100%;
}

.form-input:focus{
  border-color:var(--accent);
  background:rgba(45,139,69,.04);
}

.form-input::placeholder{color:rgba(var(--text-rgb),.3)}

select.form-input{cursor:pointer}

textarea.form-input{resize:vertical;min-height:90px}

/* ── 14. DAY ROWS (time slots) ──────────────────────────────── */
.day-row{
  display:grid;
  grid-template-columns:80px 1fr 1fr 80px;
  gap:.8rem;
  align-items:center;
  padding:.6rem 0;
  border-bottom:1px solid var(--border);
}

.day-row:last-child{border-bottom:none}

.day-label{
  font-family:'Work Sans',sans-serif;
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cream);
}

.day-toggle{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* CSS Toggle Switch — style iOS */
.toggle-switch{
  position:relative;
  display:inline-block;
  width:44px;
  height:26px;
  flex-shrink:0;
}

.toggle-switch input{opacity:0;width:0;height:0;position:absolute}

.toggle-slider{
  position:absolute;inset:0;
  background:var(--toggle-off);
  cursor:pointer;
  border-radius:999px;
  border:none;
  transition:background .25s;
}

.toggle-slider::before{
  content:'';
  position:absolute;
  width:20px;height:20px;
  left:3px;top:3px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  transition:transform .25s;
}

.toggle-switch input:checked + .toggle-slider{
  background:var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before{
  transform:translateX(18px);
  background:#fff;
}

/* ── 15. BLACKLIST ──────────────────────────────────────────── */
.blacklist-add{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.blacklist-list{
  display:flex;
  flex-direction:column;
}

.blacklist-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem 0;
  border-bottom:1px solid var(--border);
}

.blacklist-item:last-child{border-bottom:none}

.blacklist-numero{
  font-family:'Work Sans',sans-serif;
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--cream);
}

.blacklist-label{
  font-size:.78rem;
  font-weight:300;
  color:var(--dim);
  flex:1;
}

.btn-delete{
  background:transparent;
  border:none;
  color:var(--dim);
  cursor:pointer;
  padding:.25rem .4rem;
  display:flex;align-items:center;
  transition:color .2s;
}

.btn-delete:hover{color:#e05252}
.btn-delete svg{width:14px;height:14px}

/* ── 16. PROGRESS BAR ───────────────────────────────────────── */
.progress-wrap{
  border:1px solid var(--border);
  background:var(--input-bg);
  height:6px;
  overflow:hidden;
  margin:.5rem 0;
}

.progress-bar{
  height:100%;
  background:var(--accent);
  transition:width .4s ease;
  min-width:2px;
}

/* ── 17. SAVE / ACTION BUTTONS ──────────────────────────────── */
.btn-save{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:transparent;
  color:var(--accent);
  padding:.85rem 2rem;
  border:1.5px solid var(--accent);
  border-radius:50px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  transition:background .2s,color .2s,transform .2s;
}

.btn-save:hover{background:var(--accent);color:#f4f8f5;transform:translateY(-1px)}

.btn-save:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

/* ── 18. AUTOSAVE BAR ───────────────────────────────────────── */
.autosave-bar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  padding:.38rem 1rem;
  font-family:'Work Sans',sans-serif;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;pointer-events:none;
  transform:translateY(-100%);transition:transform .18s,background .18s,color .18s;
}
.autosave-bar.saving{transform:translateY(0);background:var(--panel-bg);border-bottom:1px solid var(--border);color:var(--dim)}
.autosave-bar.saved{transform:translateY(0);background:var(--accent-dim);border-bottom:1px solid var(--border-strong);color:var(--accent)}
.autosave-bar.error{transform:translateY(0);background:rgba(224,82,82,.08);border-bottom:1px solid rgba(224,82,82,.2);color:#e05252}

/* ── 19. ALERTS ─────────────────────────────────────────────── */
.alert{
  position:relative;
  padding:.7rem 2.2rem .7rem 1rem;
  font-family:'Work Sans',sans-serif;
  font-size:.6rem;
  letter-spacing:.06em;
  border:1px solid;
  margin-bottom:1rem;
  display:none;
}

.alert.visible{display:block}

.alert-close{
  position:absolute;top:50%;right:.55rem;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  font-size:.9rem;line-height:1;color:inherit;opacity:.55;padding:0;
  transition:opacity .15s;
}
.alert-close:hover{opacity:1}

.alert-success{
  color:var(--accent);
  background:var(--accent-dim);
  border-color:var(--border-strong);
}

.alert-error{
  color:#c07020;
  background:rgba(192,112,32,.08);
  border-color:rgba(192,112,32,.3);
}

/* ── 19. EMPTY STATE ────────────────────────────────────────── */
.empty-state{
  text-align:center;
  padding:3rem 1.5rem;
  color:rgba(var(--text-rgb),.4);
  font-size:.82rem;
  font-weight:300;
  line-height:1.7;
}

.empty-state strong{
  display:block;
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:.4rem;
}

.pending-banner{
  background:var(--card-bg);
  border:1px solid var(--border-strong);
  border-radius:12px;
  text-align:center;
  padding:1.6rem;
  margin-top:2rem;
  font-size:.82rem;
  font-weight:300;
  color:rgba(var(--text-rgb),.6);
  line-height:1.7;
}

.pending-banner strong{
  font-family:'Work Sans',sans-serif;
  font-size:.65rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  margin-bottom:.4rem;
}

/* ── 20. RESPONSIVE / HAMBURGER ─────────────────────────────── */
.hamburger{
  display:none;
  background:var(--accent-dim);
  border:1px solid var(--border-strong);
  border-radius:50%;
  color:var(--accent);
  width:38px;height:38px;
  align-items:center;justify-content:center;
  cursor:pointer;
  position:fixed;
  top:1rem;left:1rem;
  z-index:200;
  transition:background .2s;
}

.hamburger:hover{background:var(--dim2)}
.hamburger svg{width:18px;height:18px}

.overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:99;
  opacity:0;
  transition:opacity .3s;
}

.overlay.visible{
  opacity:1;
}

@media(max-width:768px){
  .hamburger{display:flex}

  .sidebar{
    transform:translateX(-100%);
    box-shadow:4px 0 24px rgba(0,0,0,.18);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .overlay{display:block}

  .main-content{
    margin-left:0;
    padding:1.5rem 1.2rem;
    padding-top:4rem;
    max-width:100%;
  }

  .page-title{font-size:2rem}

  .cards-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

  .upsell-banner{flex-direction:column;align-items:flex-start}

  .day-row{
    grid-template-columns:60px 1fr 1fr 50px;
    gap:.4rem;
  }

  .form-row{flex-direction:column}

  .filters{flex-direction:column;align-items:stretch}
  .filter-input,.btn-filter,.btn-filter-reset{width:100%}
}

/* ── Feature tooltip ─────────────────────────────────────── */
.feat-info{
  font-size:.65rem;color:rgba(var(--text-rgb),.3);
  cursor:help;margin-left:.25rem;
  position:relative;display:inline-block;
  flex-shrink:0;line-height:1;vertical-align:middle;
  user-select:none;
}
.feat-info::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#1a1a1a;
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  padding:8px 12px;
  font-family:'Work Sans',sans-serif;
  font-size:.76rem;font-weight:300;line-height:1.5;
  max-width:240px;width:max-content;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease,transform .15s ease;
  z-index:300;
  text-align:left;text-transform:none;letter-spacing:0;
}
.feat-info:hover::after,
.feat-info.active::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── Period selector (dashboard) ─────────────────────────── */
.period-tab{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;border:none;border-radius:4px;
  padding:.3rem .75rem;cursor:pointer;
  color:rgba(var(--text-rgb),.45);
  transition:background .15s,color .15s;
}
.period-tab:hover{color:var(--cream)}
.period-tab.active{
  background:var(--panel-bg);
  color:var(--cream);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.period-nav{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  background:var(--input-bg);border:1px solid var(--input-border-col);border-radius:6px;
  cursor:pointer;color:var(--cream);
  transition:background .15s,opacity .15s;
  flex-shrink:0;
}
.period-nav:hover{background:var(--panel-bg)}
.period-nav:disabled{opacity:.3;cursor:default;pointer-events:none}

/* ── Password visibility toggle ──────────────────────────── */
.pwd-wrap{position:relative}
.pwd-wrap .form-input{padding-right:2.6rem}
.pwd-toggle{
  position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:.2rem;
  color:rgba(var(--text-rgb),.35);transition:color .2s;line-height:0;display:flex;
}
.pwd-toggle:hover{color:var(--cream)}
.pwd-toggle .icon-eye-off{display:none}
.pwd-toggle.revealed .icon-eye{display:none}
.pwd-toggle.revealed .icon-eye-off{display:flex}

/* ── Payment failure banner ───────────────────────────────── */
.payment-banner{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:#2a0d0d;border-bottom:1px solid rgba(192,64,64,.4);
  color:#e05252;padding:.7rem 1.2rem;
  display:flex;align-items:center;gap:.75rem;
  font-family:'Work Sans',sans-serif;font-size:.8rem;font-weight:500;
}
.payment-banner-text{flex:1}
.payment-banner-cta{
  color:#e05252;font-weight:700;text-decoration:underline;cursor:pointer;white-space:nowrap;
}
.payment-banner-close{
  background:none;border:none;color:#e05252;cursor:pointer;font-size:1rem;padding:0 .3rem;opacity:.7;
}
.payment-banner-close:hover{opacity:1}