/* ==========================================================================
   RIWAQ INBOX — interface agent
   Outil utilisé 8 heures par jour : densité d'information élevée, contrastes
   francs, aucune animation décorative. Chaque pixel sert à traiter une commande
   plus vite.
   ========================================================================== */

:root {
    --bg:            #f4f5f7;
    --surface:       #ffffff;
    --surface-2:     #fafbfc;
    --border:        #dfe3e8;
    --border-strong: #c4cbd4;

    --text:          #1a1f27;
    --text-soft:     #5c6773;
    --text-faint:    #8b95a1;

    --accent:        #0f7b6c;
    --accent-soft:   #e6f4f1;
    --accent-text:   #ffffff;

    --success:       #167a3d;
    --success-soft:  #e6f4ea;
    --warn:          #a86800;
    --warn-soft:     #fdf3e2;
    --danger:        #b42318;
    --danger-soft:   #fdeceb;
    --info-soft:     #eef2ff;

    --radius:        7px;
    --radius-sm:     5px;
    --shadow:        0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
    --shadow-lg:     0 8px 28px rgba(16, 24, 40, .16);

    --topbar-h:      52px;
    --font:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:          ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #14171c;
        --surface:       #1c2027;
        --surface-2:     #22272f;
        --border:        #2f3540;
        --border-strong: #414a58;

        --text:          #e8eaed;
        --text-soft:     #a3adba;
        --text-faint:    #78828f;

        --accent:        #2ea88f;
        --accent-soft:   #163029;
        --accent-text:   #06120f;

        --success:       #4ac07a;
        --success-soft:  #14291c;
        --warn:          #dba22c;
        --warn-soft:     #2b2312;
        --danger:        #e5675c;
        --danger-soft:   #2e1917;
        --info-soft:     #1b2138;

        --shadow:        0 1px 2px rgba(0, 0, 0, .4);
        --shadow-lg:     0 8px 28px rgba(0, 0, 0, .55);
    }
}

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

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }

/* ── Barre supérieure ───────────────────────────────────────────────────── */

.topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }

.brand-mark {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: var(--accent); color: var(--accent-text);
    border-radius: var(--radius-sm);
    font-weight: 700; font-size: 14px;
}

.brand-text { font-weight: 650; letter-spacing: .2px; font-size: 14px; }

.topnav { display: flex; gap: 4px; }

.topnav a {
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 500;
}
.topnav a:hover { background: var(--surface-2); color: var(--text); }
.topnav a.is-active { background: var(--accent-soft); color: var(--accent); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.wa-state {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12px; color: var(--text-soft);
}
.wa-state .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-faint);
}
.wa-state.is-ok    .dot { background: var(--success); }
.wa-state.is-warn  .dot { background: var(--warn); }
.wa-state.is-down  .dot { background: var(--danger); }
.wa-state.is-down  { color: var(--danger); border-color: var(--danger); }

.agent-chip { font-size: 13px; color: var(--text-soft); }
.logout { font-size: 13px; color: var(--text-faint); text-decoration: none; }
.logout:hover { color: var(--danger); }

/* ── Espace de travail : trois colonnes ─────────────────────────────────── */

.workspace {
    height: calc(100vh - var(--topbar-h));
    display: grid;
    grid-template-columns: 340px minmax(380px, 1fr) 380px;
    gap: 1px;
    background: var(--border);
}

.pane { background: var(--bg); display: flex; flex-direction: column; min-height: 0; }
.pane-queue { background: var(--surface); }
.pane-order { background: var(--surface); }

@media (max-width: 1280px) {
    .workspace { grid-template-columns: 300px 1fr 340px; }
}
@media (max-width: 1024px) {
    .workspace { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .pane-order { display: none; }
}

/* ── File de commandes ──────────────────────────────────────────────────── */

.pane-head { padding: 10px; border-bottom: 1px solid var(--border); background: var(--surface); }

.filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

.filter {
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 100px;
    background: transparent;
    color: var(--text-soft);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
}
.filter:hover { background: var(--surface-2); }
.filter.is-active { background: var(--accent); color: var(--accent-text); }

.filter .count {
    min-width: 17px; padding: 0 4px;
    background: rgba(0, 0, 0, .1);
    border-radius: 100px;
    font-size: 11px; font-variant-numeric: tabular-nums;
    text-align: center;
}
.filter.is-active .count { background: rgba(255, 255, 255, .25); }
.filter .count:empty, .filter .count[data-zero] { display: none; }

.search-row { display: flex; gap: 6px; }

.search-row input {
    flex: 1; min-width: 0;
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.search-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

#toggle-sound { padding: 6px 9px; line-height: 1; }
#toggle-sound.is-muted { opacity: .45; }

.queue-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; }

.queue-empty { padding: 28px 16px; text-align: center; color: var(--text-faint); font-size: 13px; }

.queue-item {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    border-left: 3px solid transparent;
}
.queue-item:hover { background: var(--surface-2); }
.queue-item.is-selected { background: var(--accent-soft); border-left-color: var(--accent); }
.queue-item.is-locked { opacity: .55; }
.queue-item.is-due { border-left-color: var(--warn); }
.queue-item.is-unread { border-left-color: var(--success); }

.qi-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-meta { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center;
           font-size: 12px; color: var(--text-soft); }
.qi-amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.qi-ref { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }

.pill {
    padding: 1px 6px; border-radius: 100px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.pill-new     { background: var(--info-soft);    color: var(--accent); }
.pill-progress{ background: var(--accent-soft);  color: var(--accent); }
.pill-callback{ background: var(--warn-soft);    color: var(--warn); }
.pill-unreach { background: var(--warn-soft);    color: var(--warn); }
.pill-ok      { background: var(--success-soft); color: var(--success); }
.pill-ko      { background: var(--danger-soft);  color: var(--danger); }
.pill-dup     { background: var(--danger-soft);  color: var(--danger); }

.qi-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center;
    background: var(--success); color: #fff;
    border-radius: 100px;
    font-size: 11px; font-weight: 700;
}

/* ── Conversation ───────────────────────────────────────────────────────── */

.chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.chat-head .muted { margin-left: 8px; font-size: 12px; color: var(--text-soft); }
.chat-head-actions { display: flex; align-items: center; gap: 8px; }
.viewers { font-size: 12px; color: var(--warn); }

.messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 4px; }

.chat-placeholder, .order-placeholder {
    margin: auto; text-align: center; color: var(--text-faint); font-size: 13px;
}

.msg { max-width: 68%; padding: 7px 11px; border-radius: 10px; word-wrap: break-word; }
.msg-in  { align-self: flex-start; background: var(--surface); border: 1px solid var(--border);
           border-bottom-left-radius: 3px; }
.msg-out { align-self: flex-end; background: var(--accent-soft); border: 1px solid transparent;
           border-bottom-right-radius: 3px; }
.msg-auto { border-style: dashed; border-color: var(--border-strong); }

.msg-body { white-space: pre-wrap; }
.msg-foot { margin-top: 3px; display: flex; gap: 6px; align-items: center;
            font-size: 11px; color: var(--text-faint); justify-content: flex-end; }
.msg-in .msg-foot { justify-content: flex-start; }

.msg-ack { font-size: 11px; }
.msg-ack.is-read { color: var(--accent); }
.msg-ack.is-failed { color: var(--danger); }

.msg-media img, .msg-media video { max-width: 100%; border-radius: 6px; display: block; }
.msg-media a { color: var(--accent); }
.msg-pending-media { font-size: 12px; color: var(--text-faint); font-style: italic; }

.day-separator {
    align-self: center; margin: 8px 0;
    padding: 2px 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 11px; color: var(--text-soft);
}

.composer { border-top: 1px solid var(--border); background: var(--surface); padding: 8px 12px 10px; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }

.composer textarea {
    flex: 1;
    padding: 8px 10px;
    max-height: 140px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    resize: none;
}
.composer textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.composer-hint { margin: 5px 0 0; font-size: 11px; color: var(--text-faint); }

.quick-replies { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.quick-replies button {
    padding: 3px 8px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12px; color: var(--text-soft); cursor: pointer;
}
.quick-replies button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Fiche commande ─────────────────────────────────────────────────────── */

.order-card { flex: 1; overflow-y: auto; padding: 12px 14px 4px; }

.order-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.order-ref { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.order-date { font-size: 12px; }

.badge { margin-left: 8px; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; }

.lock-banner, .dup-banner {
    margin-bottom: 10px; padding: 7px 10px;
    border-radius: var(--radius-sm); font-size: 12px;
}
.lock-banner { background: var(--warn-soft); color: var(--warn); }
.dup-banner  { background: var(--danger-soft); color: var(--danger); }

.order-block { margin-bottom: 16px; }
.order-block h3 {
    margin: 0 0 7px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint);
}

.order-block label { display: block; margin-bottom: 7px; font-size: 12px; color: var(--text-soft); }

.order-block input,
.order-block textarea,
.order-block select {
    width: 100%; margin-top: 3px; padding: 6px 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.order-block input:focus, .order-block textarea:focus {
    outline: 2px solid var(--accent); outline-offset: -1px;
}
.order-block textarea { resize: vertical; }

.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.items { margin: 0; padding: 0; list-style: none; }
.items li {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.items li.is-removed { opacity: .45; text-decoration: line-through; }
.item-variant { font-size: 11px; color: var(--text-faint); }
.item-price { font-variant-numeric: tabular-nums; white-space: nowrap; }

.history, .notes, .timeline { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.history li, .notes li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.notes li { color: var(--text-soft); }

.timeline li {
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--border);
    color: var(--text-soft);
}
.timeline .t-time { color: var(--text-faint); font-size: 11px; }

.order-actions {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    display: flex; flex-direction: column; gap: 7px;
}
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.action-row-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px; }

.btn-call {
    display: grid; place-items: center;
    background: var(--info-soft); color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}
.btn-call:hover { background: var(--accent); color: var(--accent-text); }

.composer-icon {
    padding: 8px 10px; line-height: 1; font-size: 16px;
    align-self: flex-end;
}
.composer-icon.is-recording {
    background: var(--danger); color: #fff; border-color: var(--danger);
    animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }

/* ── Boutons ────────────────────────────────────────────────────────────── */

.btn {
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent);  color: var(--accent-text); }
.btn-success { background: var(--success); color: #fff; padding: 10px; font-size: 14px; }
.btn-warn    { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn); }
.btn-danger  { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-ghost   { background: var(--surface-2);   color: var(--text-soft); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-strong); color: var(--text); }

/* ── Modales ────────────────────────────────────────────────────────────── */

.modal {
    width: min(420px, 92vw);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(12, 16, 22, .5); }
.modal form { padding: 16px; }
.modal h2 { margin: 0 0 12px; font-size: 15px; }

.modal select, .modal textarea, .modal input {
    width: 100%; margin-bottom: 10px; padding: 7px 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.modal menu { margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: 8px; }

.preset-row { display: flex; gap: 6px; margin-bottom: 10px; }
.preset-row button {
    flex: 1; padding: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
}
.preset-row button:hover { border-color: var(--accent); color: var(--accent); }

.template-list { margin: 0 0 12px; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; }
.template-list li {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin-bottom: 6px; cursor: pointer;
}
.template-list li:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── Notifications ──────────────────────────────────────────────────────── */

.toast-zone {
    position: fixed; right: 16px; bottom: 16px; z-index: 60;
    display: flex; flex-direction: column; gap: 8px;
}
.toast {
    min-width: 240px; max-width: 380px;
    padding: 10px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
}
.toast-error   { border-left-color: var(--danger); }
.toast-success { border-left-color: var(--success); }
.toast-warn    { border-left-color: var(--warn); }

/* ── Connexion ──────────────────────────────────────────────────────────── */

.page-login { display: grid; place-items: center; background: var(--bg); }

.login-card {
    width: min(360px, 92vw);
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .brand-mark { margin: 0 auto 10px; width: 38px; height: 38px; font-size: 19px; }
.login-brand h1 { margin: 0; font-size: 17px; letter-spacing: .3px; }
.login-brand p { margin: 4px 0 0; font-size: 12px; color: var(--text-soft); }

.login-card label { display: block; margin: 12px 0 4px; font-size: 12px; color: var(--text-soft); }
.login-card input {
    width: 100%; padding: 9px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.login-card .btn { margin-top: 18px; padding: 10px; }

.alert { padding: 9px 11px; border-radius: var(--radius-sm); font-size: 13px; margin: 0 0 8px; }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-ok    { background: var(--success-soft); color: var(--success); }
.alert-warn  { background: var(--warn-soft); color: var(--warn); }

/* ── Supervision et statistiques ────────────────────────────────────────── */

.page-monitoring .content,
.page-agents .content,
.page-stats .content { padding: 20px; max-width: 1100px; margin: 0 auto; }

.page-head { display: flex; align-items: center; justify-content: space-between; }

table.data tr.is-inactive { opacity: .5; }
table.data td.row-actions { text-align: right; white-space: nowrap; }
table.data td.row-actions .btn { padding: 4px 9px; font-size: 12px; margin-left: 4px; }

.modal .field { display: block; margin-bottom: 10px; font-size: 12px; color: var(--text-soft); }
.modal .field input,
.modal .field select { margin-top: 3px; margin-bottom: 0; }
.modal .field-hint { margin: -6px 0 12px; font-size: 11px; color: var(--text-faint); }
.modal .check { display: flex; align-items: center; gap: 7px; margin: 12px 0 16px; font-size: 13px; }
.modal .check input { width: auto; margin: 0; }

.pw-form { display: flex; gap: 8px; max-width: 560px; }
.pw-form input {
    flex: 1; padding: 7px 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.stat-card {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stat-card .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); }
.stat-card .v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }
.stat-card .s { font-size: 12px; color: var(--text-soft); }
.stat-card.is-bad .v { color: var(--danger); }
.stat-card.is-good .v { color: var(--success); }

table.data { width: 100%; border-collapse: collapse; margin-top: 18px; background: var(--surface); }
table.data th, table.data td {
    padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px;
}
table.data th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

.qr-frame {
    display: grid; place-items: center;
    padding: 20px; margin: 16px 0;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
.qr-frame img { width: 260px; height: 260px; image-rendering: pixelated; }