/* Styles de l'application. Les COULEURS sont dans theme.css — modifiez-les là. */

* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font);
  line-height:1.55; font-size:15px;
}
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; }
.num { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* Layout */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand { font-weight:600; letter-spacing:-.01em; }
.brand small { display:block; font-weight:400; color:var(--muted); font-size:12px; letter-spacing:0; }
.topnav { display:flex; align-items:center; gap:18px; font-size:14px; }
.topnav .who { color:var(--muted); }
.wrap { max-width:900px; margin:0 auto; padding:28px 24px 64px; }
.wrap.narrow { max-width:460px; }

h1 { font-size:22px; letter-spacing:-.015em; margin:0 0 4px; }
h2 { font-size:16px; letter-spacing:-.01em; margin:28px 0 10px; }
.sub { color:var(--muted); margin:0 0 20px; }

/* Cards & tables */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
tbody tr:last-child td { border-bottom:none; }
tfoot td { border-top:2px solid var(--ink); font-weight:600; border-bottom:none; }

/* Inputs */
label { display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }
input[type=text], input[type=email], input[type=date], input[type=number], select, textarea {
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font:inherit; background:var(--surface); color:var(--ink);
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--green); outline-offset:-1px; border-color:var(--green); }
input[readonly] { background:#FAFAF8; color:var(--muted); }
.money-input { text-align:right; font-variant-numeric:tabular-nums; }
.field { margin-bottom:14px; }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.row > * { flex:1; min-width:140px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:8px;
  border:1px solid var(--green); background:var(--green); color:#fff; font:inherit; font-weight:500; cursor:pointer; }
.btn:hover { background:var(--green-ink); text-decoration:none; }
.btn.ghost { background:transparent; color:var(--green); }
.btn.ghost:hover { background:var(--green-bg); }
.btn.slate { background:var(--slate); border-color:var(--slate); }
.btn.small { padding:6px 11px; font-size:13px; }

/* Pills / banners */
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:500; }
.pill.modifiable { background:var(--amber-bg); color:var(--amber); }
.pill.verrouillee { background:var(--slate-bg); color:var(--slate); }
.banner { padding:12px 14px; border-radius:8px; margin-bottom:18px; font-size:14px; }
.banner.ok { background:var(--green-bg); color:var(--green-ink); }
.banner.warn { background:var(--amber-bg); color:var(--amber); }
.banner.err { background:var(--danger-bg); color:var(--danger); }

/* Balance indicator */
.balance { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border-radius:8px; background:var(--slate-bg); margin-top:6px; }
.balance.ok { background:var(--green-bg); }
.balance.off { background:var(--amber-bg); }
.balance b { font-variant-numeric:tabular-nums; }

.muted { color:var(--muted); }
.small { font-size:13px; }
.mono { font-variant-numeric:tabular-nums; }
.right { text-align:right; }
.entry-line td:first-child { color:var(--muted); }

/* Invitations & administration */
.copybox { display:flex; gap:8px; margin-top:10px; }
.copybox input { font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.copybox .btn { flex:0 0 auto; }
td.actions { white-space:nowrap; }
td.actions form { display:inline-block; margin-left:6px; }
.btn.ghost.danger { color:var(--danger); border-color:var(--danger); }
.btn.ghost.danger:hover { background:var(--danger-tint); }

/* Identité OMEX */
.topbar { border-bottom:2px solid var(--brand); }
.brand .logo-img { display:block; height:34px; width:auto; }
.brand small { display:block; font-weight:400; color:var(--muted); font-size:12px; letter-spacing:0; }
h1 { color:var(--brand); }
h2 { color:var(--brand); }
h2::after { content:""; display:block; width:34px; height:2px; background:var(--accent); margin-top:6px; }
.site-footer {
  text-align:center; padding:26px 24px 34px; color:var(--footer-ink);
  font-size:12.5px; line-height:1.7; border-top:1px solid var(--line); background:var(--surface);
}
.site-footer b { color:var(--brand); letter-spacing:1px; }

/* --- Sélecteur de compte avec recherche ------------------------------------ */
.acct-picker { position: relative; }
.acct-hidden { display: none !important; }

.acct-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.acct-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.acct-input.acct-empty { color: var(--muted); }
.acct-input.acct-empty::placeholder { color: var(--muted); }

.acct-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.acct-opt {
  padding: 8px 11px;
  font-size: 14px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line);
}
.acct-opt:last-child { border-bottom: none; }
.acct-opt:hover, .acct-opt.on { background: var(--brand-tint); color: var(--brand-dark); }
.acct-none { padding: 10px 11px; font-size: 13px; color: var(--muted); }

/* --- Chiffre d'affaires ----------------------------------------------------- */
.kpi { flex: 1; min-width: 190px; margin-bottom: 0; }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--brand); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }

.up { color: var(--brand); font-weight: 600; }
.down { color: var(--accent); font-weight: 600; }

.chart {
  display: flex; align-items: flex-end; gap: 10px;
  overflow-x: auto; padding: 20px 2px 0;
}
.bar-col { flex: 1; min-width: 42px; display: flex; flex-direction: column; align-items: center; }
.bar {
  width: 100%; max-width: 46px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: 5px 5px 0 0;
  transition: opacity .15s;
}
.bar-col:hover .bar { opacity: .78; }
.bar-val { font-size: 11px; color: var(--muted); margin-bottom: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-lbl { font-size: 11px; text-align: center; margin-top: 7px; line-height: 1.3; }

/* --- Accueil magasin & droits ---------------------------------------------- */
.home-actions { margin-bottom: 18px; }
.action {
  flex: 1; min-width: 240px; margin-bottom: 0;
  text-decoration: none; color: inherit; display: block;
  border: 1px solid var(--line); transition: border-color .15s, transform .15s;
}
.action:hover { border-color: var(--brand); transform: translateY(-2px); }
.action-title { font-size: 18px; font-weight: 700; color: var(--brand); margin-bottom: 4px; }
.action-go { margin-top: 12px; font-weight: 600; color: var(--accent); font-size: 14px; }

.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 18px; margin-top: 12px; }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; cursor: pointer; }
label.inline input { width: auto; margin: 0; }