/* ==========================================================================
   WABAA — composants partagés
   Source unique des styles communs : en-têtes, panneaux, boutons, champs et rangées d’actions.
   Les feuilles de page gardent uniquement la disposition et les variantes locales.
   ========================================================================== */

/* 1. Jetons communs */
:root {
    --ui-blue: #0d73df;
    --ui-blue-strong: #126fd5;
    --ui-blue-light: #159ee6;
    --ui-green: #15995c;
    --ui-gray: #607b9e;
    --ui-danger: #c93636;
    --ui-text: #18345f;
    --ui-border: #cbdced;
    --ui-surface: #ffffff;
    --ui-background: #f3f7fc;
    --ui-muted: #64748b;
    --ui-focus: rgba(22, 167, 232, 0.12);
    --ui-button-radius: 10px;
    --ui-control-radius: 10px;
}

/* 2. En-têtes et surfaces communes */
.topbar,
.root-top {
    height: 72px;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: #ffffff;
    background: linear-gradient(100deg, #103b86 0%, #126fd5 58%, #18a9df 100%);
    box-shadow: 0 7px 24px rgba(8, 38, 84, 0.18);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-left,
.root-top-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.panel,
.root-panel,
.stat-card,
.root-stat {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(24, 62, 112, 0.12);
}

.panel,
.root-panel {
    padding: 21px;
}

@media (max-width: 850px) {
    .root-top {
        height: 62px;
        padding: 0 12px;
    }
}

@media (max-width: 650px) {
    .topbar,
    .root-top {
        height: 64px;
        padding: 0 12px;
    }
}

/* 3. Typographie et éléments de formulaire partagés */
button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.field,
.select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]),
select,
textarea {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    padding: 11px 13px;
    min-height: 42px;
    outline: none;
}

.field:focus,
.select:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]):focus,
select:focus,
textarea:focus {
    border-color: #4aa9e8;
    box-shadow: 0 0 0 3px var(--ui-focus);
}

input[type="checkbox"],
input[type="radio"] {
    min-height: 0;
    padding: 0;
}

/* 4. Bouton standard et variantes réutilisées dans les pages */
.btn,
.primary {
    border: 0;
    border-radius: var(--ui-button-radius);
    padding: 11px 17px;
    background: linear-gradient(135deg, var(--ui-blue), var(--ui-blue-light));
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(13, 115, 223, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover,
.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(18, 111, 213, 0.18);
}

.btn.green {
    background: var(--ui-green);
}

.btn.gray {
    background: var(--ui-gray);
    box-shadow: none;
}

.btn.danger {
    background: var(--ui-danger);
}

.btn:disabled,
.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 5. Disposition partagée des actions dans les fenêtres */
.modal-actions,
.wabaa-action-modal-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
/* Reprise statique de la page Paramètres membre : éviter la grille à deux colonnes. */
.member-settings-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}
.member-settings-layout > .settings-card {
  width: 100%;
  box-sizing: border-box;
}
.member-settings-layout .preview[hidden] {
  display: none !important;
}

/* Sous-menus statiques de Paramètres membre, sans flash de la page entière. */
.settings-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 16px;
}
.settings-tab {
  flex: 0 0 auto;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--ui-text);
  background: var(--ui-surface);
  font-weight: 650;
}
.settings-tab.is-active {
  color: #fff;
  border-color: #126fd5;
  background: linear-gradient(100deg, #126fd5, #18a9df);
}
[data-settings-panel]:not([data-settings-panel="general"]):not([data-settings-panel="admin-general"]) { display: none; }
[data-settings-panel].settings-panel-active { display: block !important; }
.settings-apply { margin-top: 16px; }

/* Centralized currency management */
.currency-create-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;margin:18px 0;padding:16px;border:1px solid var(--border-color,#dbe4ef);border-radius:12px;background:var(--surface-muted,#f5f8fc)}
.currency-create-form label{display:grid;gap:6px;font-weight:600}
.currency-create-form input{min-width:0}
.currency-table{width:100%;border-collapse:collapse}
.currency-table th,.currency-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-color,#dbe4ef)}
.currency-default{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#e8f3ff;color:#1558a6;font-size:.75em;font-weight:700}
@media(max-width:700px){.currency-table{min-width:680px}.currency-create-form{grid-template-columns:1fr 1fr}}

.currency-pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 0}.currency-pagination button:disabled{opacity:.5;cursor:not-allowed}.currency-pagination span{color:var(--text-muted,#64748b);font-size:.9rem}

.currency-search-label{display:block;margin:14px 0 6px;font-weight:600}.currency-search{display:block;width:min(100%,420px);margin:0 0 14px;background:var(--input-bg,var(--surface,#fff));color:var(--text-color,inherit)}
.terms-editor{display:block;width:100%;min-height:400px;margin:8px 0;white-space:pre-wrap;font:inherit;line-height:1.5}.terms-editor-hint{color:var(--text-muted,#64748b);font-size:.92rem}