/* ── VARIABLES THÈME ───────────────────────────────────────────────────────── */
:root {
  --accent:      #e8003d;
  --accent-soft: rgba(232,0,61,0.12);
  --blue:        #3a86ff;
  --orange:      #fb8500;
  --red:         #e63946;
  --radius:      14px;
}

/* DARK (défaut) */
[data-theme="dark"] {
  --bg:          #0d0d0d;
  --bg2:         #1a1a1a;
  --card:        #1e1e1e;
  --card2:       #2a2a2a;
  --navbar-bg:   #111111;
  --border:      rgba(255,255,255,0.07);
  --text:        #f0f0f0;
  --text2:       #aaaaaa;
  --shadow:      0 2px 16px rgba(0,0,0,0.5);
  --green-dark:  #e8003d;
  --green-mid:   #ff4d74;
  --green-light: rgba(232,0,61,0.12);
  --grey:        #888888;
}

/* LIGHT */
[data-theme="light"] {
  --bg:          #f5f5f5;
  --bg2:         #ebebeb;
  --card:        #ffffff;
  --card2:       #f0f0f0;
  --navbar-bg:   #ffffff;
  --border:      rgba(0,0,0,0.08);
  --text:        #111111;
  --text2:       #555555;
  --shadow:      0 2px 12px rgba(0,0,0,0.09);
  --green-dark:  #e8003d;
  --green-mid:   #ff4d74;
  --green-light: rgba(232,0,61,0.08);
  --grey:        #6c757d;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .25s,color .25s;}

/* ── NAVBAR ─────────────────────────────────────────────────────────────────── */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--navbar-bg);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
#navbar-inner{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px 8px;
  padding-top:max(12px,env(safe-area-inset-top));
}
#navbar-title{flex:1;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.3px;}
#back-btn{
  background:none;border:none;font-size:26px;color:var(--accent);
  cursor:pointer;padding:0 8px 0 0;line-height:1;font-weight:300;
}
#add-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;
  border:none;font-size:20px;cursor:pointer;font-weight:300;
}
#tc-logo{height:32px;width:auto;object-fit:contain;flex-shrink:0;}
[data-theme="dark"] #tc-logo{filter:brightness(0) invert(1);}
[data-theme="light"] #tc-logo{filter:none;}

/* Theme toggle */
#theme-toggle{
  background:none;border:none;font-size:20px;cursor:pointer;
  padding:4px;border-radius:8px;transition:background .15s;
  color:var(--text2);
}
#theme-toggle:hover{background:var(--card2);}

/* Search */
#search-bar{padding:0 16px 10px;}
#search-input{
  width:100%;padding:9px 14px;border-radius:10px;
  border:1.5px solid var(--border);
  background:var(--card2);color:var(--text);font-size:15px;
}
#search-input:focus{outline:none;border-color:var(--accent);}

/* ── CONTENT ────────────────────────────────────────────────────────────────── */
#content{padding:16px;padding-bottom:100px;}

/* ── SECTION HEADER ─────────────────────────────────────────────────────────── */
.section-header{
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--text2);margin:20px 0 10px;
}

/* ── CARDS ──────────────────────────────────────────────────────────────────── */
.card-list{display:flex;flex-direction:column;gap:10px;}
.card-wrapper{position:relative;display:flex;align-items:center;gap:8px;}
.card-wrapper .card{flex:1;}
.card{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border-radius:var(--radius);
  padding:14px;box-shadow:var(--shadow);
  border:1px solid var(--border);cursor:pointer;
  transition:transform .12s,box-shadow .12s;
  -webkit-user-select:none;user-select:none;
}
.card:active{transform:scale(.98);box-shadow:none;}
.card-abbr{
  font-size:11px;font-weight:800;color:var(--accent);
  background:var(--accent-soft);padding:6px 8px;border-radius:8px;
  min-width:48px;text-align:center;letter-spacing:.3px;
}
.card-info{flex:1;min-width:0;}
.card-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.card-right{display:flex;align-items:center;gap:8px;}
.badge-count{
  background:var(--card2);color:var(--text2);
  font-size:12px;font-weight:700;padding:3px 8px;border-radius:10px;
}

/* Dot état */
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.dot.excellent{background:#2ecc71;}
.dot.bon{background:#3a86ff;}
.dot.moyen{background:#fb8500;}
.dot.mauvais{background:#e63946;}

/* ── STATS ROW ──────────────────────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;}
.stat-card{
  background:var(--card);border-radius:var(--radius);
  padding:16px;text-align:center;box-shadow:var(--shadow);
  border:1px solid var(--border);
}
.stat-card.blue .stat-val{color:var(--accent);}
.stat-card.orange .stat-val{color:var(--orange);}
.stat-val{font-size:28px;font-weight:800;}
.stat-lbl{font-size:12px;color:var(--text2);margin-top:2px;}

/* ── FILTER ROW ─────────────────────────────────────────────────────────────── */
.filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px;scrollbar-width:none;}
.filter-row::-webkit-scrollbar{display:none;}
.chip{
  padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--card);color:var(--text2);font-size:13px;
  white-space:nowrap;cursor:pointer;transition:all .15s;
}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}

/* ── PLANTE THUMB ───────────────────────────────────────────────────────────── */
.plante-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.plante-thumb-placeholder{
  width:52px;height:52px;border-radius:10px;
  background:var(--card2);display:flex;align-items:center;
  justify-content:center;font-size:22px;flex-shrink:0;
}

/* ── DELETE BTN ─────────────────────────────────────────────────────────────── */
.delete-btn{
  background:none;border:none;font-size:18px;cursor:pointer;
  padding:8px;border-radius:8px;color:var(--text2);transition:background .15s;
}
.delete-btn:hover{background:var(--card2);}
.delete-icon-btn{
  background:none;border:none;font-size:16px;cursor:pointer;
  padding:4px 6px;border-radius:6px;color:var(--text2);
}

/* ── PHOTO SECTION ──────────────────────────────────────────────────────────── */
.photo-main-wrap{margin-bottom:8px;text-align:center;}
.photo-main{width:100%;max-height:260px;object-fit:cover;border-radius:var(--radius);cursor:zoom-in;}
.photo-placeholder{
  width:100%;height:160px;border-radius:var(--radius);
  background:var(--card2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:36px;color:var(--text2);
}
.photo-change-btn{
  margin-top:10px;padding:9px 20px;border-radius:20px;
  background:var(--card2);color:var(--text);border:1.5px solid var(--border);
  font-size:13px;cursor:pointer;
}

/* ── INFO SECTION ───────────────────────────────────────────────────────────── */
.info-section{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:8px;}
.info-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);}
.info-row:last-child{border-bottom:none;}
.info-label{font-size:14px;color:var(--text2);}
.info-value{font-size:14px;font-weight:600;color:var(--text);text-align:right;}

/* ── ÉTAT BADGE ─────────────────────────────────────────────────────────────── */
.etat-badge{font-size:13px;font-weight:700;padding:4px 10px;border-radius:12px;}
.etat-badge.excellent{background:rgba(46,204,113,.15);color:#2ecc71;}
.etat-badge.bon{background:rgba(58,134,255,.15);color:#3a86ff;}
.etat-badge.moyen{background:rgba(251,133,0,.15);color:#fb8500;}
.etat-badge.mauvais{background:rgba(230,57,70,.15);color:#e63946;}

/* ── HISTORIQUE ─────────────────────────────────────────────────────────────── */
.hist-item{padding:14px 16px;border-bottom:1px solid var(--border);}
.hist-item:last-child{border-bottom:none;}
.hist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.hist-type{font-size:14px;font-weight:700;color:var(--text);}
.hist-date{font-size:12px;color:var(--text2);}
.hist-obs{font-size:13px;color:var(--text2);line-height:1.5;margin-top:4px;}
.hist-photo{width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin-top:10px;cursor:zoom-in;}

/* ── EMPTY STATE ────────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:48px 24px;color:var(--text2);}
.empty-icon{font-size:48px;margin-bottom:12px;}
.empty p{font-size:15px;}

/* ── FAB ────────────────────────────────────────────────────────────────────── */
#fab{
  position:fixed;bottom:28px;right:20px;
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;
  border:none;font-size:28px;cursor:pointer;
  box-shadow:0 4px 20px rgba(232,0,61,.4);
  display:none;align-items:center;justify-content:center;z-index:90;
}
#fab.visible{display:flex;}

/* ── MODAL OVERLAY ──────────────────────────────────────────────────────────── */
.overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
.overlay.open{display:flex;}
.sheet{
  background:var(--card);width:100%;max-width:520px;
  border-radius:20px 20px 0 0;padding:24px 20px 36px;
  max-height:90vh;overflow-y:auto;
}
.sheet-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:20px;text-align:center;}

/* ── FORM ───────────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--bg2);
  color:var(--text);font-size:15px;
}
.form-group textarea{min-height:80px;resize:vertical;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);}

/* ── SEGMENTED ──────────────────────────────────────────────────────────────── */
.segmented{display:flex;gap:6px;flex-wrap:wrap;}
.segmented button{
  padding:8px 12px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--bg2);color:var(--text2);font-size:13px;cursor:pointer;
}
.segmented button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}

/* ── BUTTONS ────────────────────────────────────────────────────────────────── */
.btn-primary{
  width:100%;padding:14px;border-radius:12px;
  background:var(--accent);color:#fff;border:none;
  font-size:16px;font-weight:700;cursor:pointer;margin-bottom:10px;
}
.btn-danger{
  width:100%;padding:14px;border-radius:12px;
  background:#e63946;color:#fff;border:none;
  font-size:16px;font-weight:700;cursor:pointer;margin-bottom:10px;
}
.btn-cancel{
  width:100%;padding:12px;border-radius:12px;
  background:var(--card2);color:var(--text2);border:none;
  font-size:15px;cursor:pointer;
}

/* ── PHOTO VIEWER ───────────────────────────────────────────────────────────── */
.photo-viewer{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.92);align-items:center;justify-content:center;
}
.photo-viewer img{max-width:95vw;max-height:90vh;border-radius:10px;object-fit:contain;}

/* ── PLANT.ID ───────────────────────────────────────────────────────────────── */
.identify-btn{display:block;width:100%;margin-top:10px;padding:10px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;}
.identify-btn:disabled{opacity:.6;cursor:default;}
.identify-label{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.identify-result-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;margin-bottom:6px;background:var(--bg2);border:2px solid var(--border);border-radius:10px;cursor:pointer;text-align:left;transition:border-color .15s;}
.identify-result-btn:hover,.identify-result-btn.selected{border-color:var(--accent);background:var(--accent-soft);}
.identify-name{font-size:14px;font-weight:700;flex:1;color:var(--text);}
.identify-sci{font-size:12px;color:var(--text2);flex:1;font-style:italic;}
.identify-conf{font-size:13px;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:10px;white-space:nowrap;}

/* ── LOGIN ──────────────────────────────────────────────────────────────────── */
.login-wrap{max-width:400px;margin:0 auto;padding:48px 24px;}
.login-logo{display:block;height:90px;margin:0 auto 20px;}
.login-title{font-size:28px;font-weight:900;text-align:center;color:var(--text);margin-bottom:4px;}
.login-sub{font-size:15px;color:var(--text2);text-align:center;margin-bottom:32px;}

/* ── BOTTOM NAV ─────────────────────────────────────────────────────────────── */
#bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  display:flex;background:var(--navbar-bg);
  border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.bnav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:10px 0;background:none;border:none;
  font-size:20px;color:var(--text2);cursor:pointer;
}
.bnav-btn span{font-size:10px;font-weight:600;}
.bnav-btn.active{color:var(--accent);}

/* ── ROLE BADGE ─────────────────────────────────────────────────────────────── */
.role-chip{padding:4px 10px;border-radius:10px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.role-superadmin{background:rgba(232,0,61,.2);color:var(--accent);}
.role-admin{background:rgba(58,134,255,.2);color:#3a86ff;}
.role-user{background:rgba(108,117,125,.2);color:var(--text2);}

/* ── DASHBOARD ──────────────────────────────────────────────────────────────── */
.etat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;}
.etat-block{background:var(--card);border-radius:12px;padding:12px 8px;text-align:center;border:1px solid var(--border);}
.etat-block.excellent .etat-val{color:#2ecc71;}
.etat-block.bon .etat-val{color:#3a86ff;}
.etat-block.moyen .etat-val{color:#fb8500;}
.etat-block.mauvais .etat-val{color:#e63946;}
.etat-val{font-size:26px;font-weight:900;}
.etat-lbl{font-size:10px;color:var(--text2);margin-top:2px;}

/* ── BOUTON DASHBOARD ───────────────────────────────────────────────────────── */
.btn-dashboard{
  width:100%;padding:11px;border-radius:12px;
  background:var(--card2);color:var(--text);border:1px solid var(--border);
  font-size:14px;font-weight:600;cursor:pointer;margin:8px 0;
  display:flex;align-items:center;justify-content:center;gap:6px;
}

/* ── EDIT BTN ────────────────────────────────────────────────────────────────── */
.edit-btn{
  background:none;border:none;font-size:16px;cursor:pointer;
  padding:8px;border-radius:8px;color:var(--text2);transition:background .15s;
}
.edit-btn:hover{background:var(--card2);}