/* moked.i-call.me : site d'administration BEDIKOT. Sobre et dense, ordinateur et telephone. */
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, "Segoe UI", Arial, sans-serif; color: #1d2430; background: #f3f5f8; }
a { color: #1a56b0; }
main { padding: 12px 16px 40px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 20px; margin: 6px 0 12px; }
h2 { font-size: 16px; margin: 18px 0 8px; }
small, .muted { color: #667085; }

nav.top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 6px 12px; background: #17324d; color: #fff; }
nav.top .brand { font-weight: 700; margin-left: 14px; }
nav.top a { color: #dfe8f3; text-decoration: none; padding: 5px 9px; border-radius: 5px; }
nav.top a.on, nav.top a:hover { background: #2a4d72; color: #fff; }
nav.top .who { margin-right: auto; font-size: 13px; color: #b7c6d8; }
nav.top .who a { padding: 0; color: #fff; text-decoration: underline; }

.flash { padding: 8px 12px; border-radius: 6px; background: #e3f4e8; border: 1px solid #a8d8b5; margin: 0 0 10px; }
.flash.err { background: #fdecec; border-color: #f0b3b3; }
.flash.warn { background: #fff4e0; border-color: #f1cf8f; }

input, select, textarea, button { font: inherit; }
input, select, textarea { width: 100%; padding: 6px 8px; border: 1px solid #c4ccd8; border-radius: 5px; background: #fff; }
textarea { resize: vertical; }
button { padding: 7px 14px; border: 0; border-radius: 5px; background: #1a56b0; color: #fff; cursor: pointer; white-space: nowrap; }
button.secondary { background: #e6ebf2; color: #1d2430; }
button.link { background: none; color: #1a56b0; padding: 0; text-decoration: underline; }
label { display: block; font-size: 13px; color: #44506a; }
label input, label select, label textarea { margin-top: 2px; color: #1d2430; }
label.check { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: #1d2430; margin-left: 14px; }
label.check input { width: auto; margin: 0; }
fieldset { border: 1px solid #d5dbe4; border-radius: 6px; padding: 6px 10px 8px; margin: 0; }
legend { font-size: 13px; color: #44506a; padding: 0 4px; }

.login { max-width: 340px; margin: 60px auto; background: #fff; padding: 22px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.08); display: grid; gap: 12px; }
.login h1 { margin: 0; }
.login p { margin: 0; color: #667085; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.filters label { min-width: 130px; }
.filters .grow { flex: 1 1 220px; }
.count { margin: 4px 0 8px; color: #44506a; font-size: 13px; }

.scroll { overflow-x: auto; background: #fff; border: 1px solid #d5dbe4; border-radius: 6px; }
table.list { border-collapse: collapse; width: 100%; font-size: 14px; }
table.list th, table.list td { padding: 5px 8px; border-bottom: 1px solid #e7ebf0; text-align: right; vertical-align: top; }
table.list th { background: #eef2f7; font-weight: 600; font-size: 13px; white-space: nowrap; position: sticky; top: 0; }
table.list tr:hover td { background: #f8fafc; }
td.num { text-align: center; white-space: nowrap; }
td.hot { color: #b42318; font-weight: 700; }
td.empty, p.empty { color: #667085; text-align: center; padding: 14px; }
tr.st-done td, tr.st-cancelled td { color: #667085; }
tr.pending td { background: #fff8e8; }

.tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 10px; background: #e6ebf2; white-space: nowrap; margin: 1px 0; }
.tag.red { background: #fde2e1; color: #a1170f; font-weight: 600; }
.tag.orange { background: #feefd6; color: #93510a; font-weight: 600; }
.tag.blue { background: #dde9fb; color: #1a4a91; }

.card { background: #fff; border: 1px solid #d5dbe4; border-radius: 8px; padding: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; align-items: end; }
.grid .full, .grid .geo { grid-column: 1 / -1; }
.geo { margin: 0; font-size: 13px; color: #44506a; }
.settings { display: grid; gap: 12px; max-width: 640px; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: #44506a; margin-bottom: 10px; }
.box { background: #fff; border: 1px solid #d5dbe4; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
audio { height: 34px; max-width: 100%; vertical-align: middle; }

form.inline { display: flex; gap: 8px; margin-bottom: 10px; }
form.inline .grow { flex: 1; }
form.mini { display: inline; }
.note { background: #fff; border: 1px solid #d5dbe4; border-right: 4px solid #e0a100; border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.note.before { background: #fffbea; }
.note.after { border-right-color: #6b4fbb; background: #f5f2fd; }
.note.done { opacity: .65; border-right-color: #9aa4b2; }
.note .meta { font-size: 12px; color: #667085; margin-bottom: 3px; }

table.texts textarea { min-height: 44px; }
table.texts tr.custom td { background: #f2f8ee; }
.orig { display: block; margin-top: 2px; }
.help { color: #44506a; font-size: 13px; max-width: 900px; }
.sticky { position: sticky; bottom: 0; background: #f3f5f8; padding: 8px 0; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.stat { background: #fff; border: 1px solid #d5dbe4; border-radius: 8px; padding: 4px 12px 10px; }

@media (max-width: 640px) {
  main { padding: 8px 8px 30px; }
  nav.top .who { margin-right: 0; width: 100%; }
  table.list { font-size: 13px; }
}