/* ============================================================
Deemeter UI — composants réutilisables
Utiliser les classes db-* dans les vues Filament custom
============================================================ */
/* --- Thème (clair / sombre) --------------------------------- */
/* Filament ajoute la classe "dark" sur (toggle utilisateur ou
préférence système) : tous les composants db-* ci-dessous utilisent ces
variables plutôt que des couleurs en dur, pour rester lisibles dans les
deux thèmes. La sidebar reste volontairement sombre en permanence (cf.
.fi-sidebar plus bas dans AdminPanelProvider), indépendamment de ce toggle. */
:root {
--db-surface: #ffffff;
--db-surface-hover: #f9fafb;
--db-surface-alt: #f3f4f6;
--db-border: #e5e7eb;
--db-border-light: #f3f4f6;
--db-border-strong: #d1d5db;
--db-text: #111827;
--db-text-secondary: #374151;
--db-text-muted: #6b7280;
--db-text-faint: #9ca3af;
--db-thead-bg: #f9fafb;
--db-input-bg: #ffffff;
--db-row-link-hover: #f0f7ff;
--db-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--db-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--db-inline-input-bg: #f0f7ff;
--db-inline-input-border: #bfdbfe;
}
.dark {
--db-surface: #1c2333;
--db-surface-hover: #262e42;
--db-surface-alt: #262e42;
--db-border: #333d54;
--db-border-light: #2a3247;
--db-border-strong: #3d4863;
--db-text: #f1f5f9;
--db-text-secondary: #cbd5e1;
--db-text-muted: #94a3b8;
--db-text-faint: #64748b;
--db-thead-bg: #232b3f;
--db-input-bg: #161c2c;
--db-row-link-hover: #24304a;
--db-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
--db-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
--db-inline-input-bg: rgba(59, 130, 246, 0.14);
--db-inline-input-border: rgba(96, 165, 250, 0.4);
}
/* --- Alpine.js --------------------------------------------- */
[x-cloak] {
display: none !important;
}
/* --- Police uniforme ----------------------------------------
Les navigateurs n'héritent PAS la police par défaut sur button/input/
select/textarea (comportement standard, indépendant de tout style Filament
ou db-*) : sans ce reset, ces éléments retombent sur la police système au
lieu de la police de l'app (Inter, définie par Filament sur html.fi),
créant un mélange de polices selon les composants. Couvre aussi tous les
futurs boutons/inputs custom sans avoir à répéter font-family: inherit
sur chaque classe db-*. */
button,
input,
select,
textarea,
optgroup {
font-family: inherit;
}
/* --- Filament overrides ------------------------------------ */
main.fi-main {
padding-inline: 0.5rem !important;
}
/* --- Layout ------------------------------------------------ */
.db-p6 {
padding: 1.5rem;
}
.db-flex {
display: flex;
}
.db-grid {
display: grid;
}
.db-items-start {
align-items: flex-start;
}
.db-items-end {
align-items: flex-end;
}
.db-items-center {
align-items: center;
}
.db-justify-between {
justify-content: space-between;
}
.db-gap-3 {
gap: 0.75rem;
}
.db-gap-4 {
gap: 1rem;
}
.db-shrink-0 {
flex-shrink: 0;
}
.db-min-w-0 {
min-width: 0;
}
.db-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.db-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.db-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.db-grid-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
}
.db-grid-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 1rem;
}
.db-col-2 {
grid-column: span 2 / span 2;
}
.db-col-3 {
grid-column: span 3 / span 3;
}
/* --- Spacing ----------------------------------------------- */
.db-mb-1 {
margin-bottom: 0.25rem;
}
.db-mb-4 {
margin-bottom: 1rem;
}
.db-mb-6 {
margin-bottom: 1.5rem;
}
.db-mt-1 {
margin-top: 0.25rem;
}
.db-mt-2 {
margin-top: 0.5rem;
}
.db-space-y-3 > * + * {
margin-top: 0.75rem;
}
.db-space-y-05 > * + * {
margin-top: 0.125rem;
}
/* --- Typography -------------------------------------------- */
.db-text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.db-text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.db-fw-600 {
font-weight: 600;
}
.db-fw-700 {
font-weight: 700;
}
.db-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-c-gray {
color: var(--db-text-muted);
}
.db-c-dark {
color: var(--db-text);
}
.db-c-green {
color: #16a34a;
}
.db-c-red {
color: #dc2626;
}
/* --- KPI Card ---------------------------------------------- */
.db-card {
background: var(--db-surface);
border: 1px solid var(--db-border);
border-radius: 0.75rem;
box-shadow: var(--db-shadow);
padding: 1rem;
}
.db-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.db-card-title {
font-size: 0.75rem;
color: var(--db-text-muted);
margin: 0;
}
.db-big-num {
margin-top: 0.5rem;
font-size: 1.875rem;
font-weight: 700;
line-height: 1;
color: var(--db-text);
}
.db-card-sub {
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--db-text-muted);
}
/* KPI dot colors */
.db-dot {
display: inline-block;
border-radius: 9999px;
width: 0.625rem;
height: 0.625rem;
flex-shrink: 0;
margin-top: 0.125rem;
}
.db-dot-green {
background: #4ade80;
}
.db-dot-red {
background: #f87171;
}
.db-dot-blue {
background: #60a5fa;
}
.db-dot-orange {
background: #fb923c;
}
/* KPI number colors */
.db-num-green {
color: #16a34a;
}
.db-num-red {
color: #dc2626;
}
.db-num-blue {
color: #2563eb;
}
.db-num-orange {
color: #ea580c;
}
.dark .db-num-green {
color: #4ade80;
}
.dark .db-num-red {
color: #f87171;
}
.dark .db-num-blue {
color: #60a5fa;
}
.dark .db-num-orange {
color: #fb923c;
}
/* --- Section box ------------------------------------------- */
.db-box {
background: var(--db-surface);
border: 1px solid var(--db-border);
border-radius: 0.75rem;
box-shadow: var(--db-shadow);
overflow: hidden;
}
.db-box-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--db-border-light);
}
.db-box-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--db-text);
margin: 0;
}
.db-box-sub {
font-size: 0.75rem;
color: var(--db-text-muted);
margin-top: 0.125rem;
}
.db-inner {
padding: 1.25rem;
}
.db-overflow-x {
/* overflow-x seul forcerait overflow-y à "auto" côté navigateur sans
jamais réellement défiler (pas de hauteur bornée) — l'en-tête sticky
ci-dessous ne s'accrocherait alors qu'au conteneur, pas à la page. On
borne donc la hauteur pour que le scroll (et le collage de l'en-tête)
se fasse à l'intérieur du tableau — mais relative au viewport (pas une
valeur fixe en rem) : un petit tableau (ex. 17 lignes) doit continuer à
occuper naturellement l'espace dispo sans laisser de vide en bas de
page ; seul un tableau qui dépasserait vraiment l'écran doit défiler. */
overflow: auto;
max-height: calc(100vh - 15rem);
}
/* --- Buttons ----------------------------------------------- */
.db-btn-outline {
border: 1px solid var(--db-border-strong);
background: var(--db-surface);
border-radius: 0.5rem;
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--db-text-secondary);
cursor: pointer;
}
.db-btn-outline:hover {
background: var(--db-surface-hover);
}
.db-btn-traiter {
border: 1px solid #bfdbfe;
background: #eff6ff;
border-radius: 9999px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
color: #1d4ed8;
cursor: pointer;
}
.db-btn-traiter:hover {
background: #dbeafe;
}
.dark .db-btn-traiter {
border-color: rgba(96, 165, 250, 0.35);
background: rgba(59, 130, 246, 0.15);
color: #93c5fd;
}
.dark .db-btn-traiter:hover {
background: rgba(59, 130, 246, 0.25);
}
/* --- Search / Date ----------------------------------------- */
.db-search-wrap {
position: relative;
}
.db-search {
width: 20rem;
border-radius: 0.5rem;
border: 1px solid var(--db-border-strong);
background: var(--db-input-bg);
padding: 0.5rem 2.5rem 0.5rem 1rem;
font-size: 0.875rem;
color: var(--db-text-secondary);
outline: none;
}
.db-search:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.db-search-icon {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: var(--db-text-faint);
}
.db-date-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--db-border-strong);
background: var(--db-surface);
border-radius: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--db-text-secondary);
cursor: pointer;
}
.db-date-btn:hover {
background: var(--db-surface-hover);
}
/* --- Table ------------------------------------------------- */
.db-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
table-layout: fixed;
}
.db-thead tr {
background: var(--db-thead-bg);
}
.db-th {
padding: 0.75rem 1.5rem;
text-align: left;
font-size: 0.75rem;
font-weight: 500;
color: var(--db-text-muted);
white-space: nowrap;
/* En-tête figé lors du scroll vertical à l'intérieur de .db-overflow-x
(cf. plus haut) — le fond doit être posé directement sur le | (et
pas seulement sur la | ) pour rester opaque une fois "collé". */
position: sticky;
top: 0;
z-index: 2;
background: var(--db-thead-bg);
}
.db-th-r {
text-align: right;
}
.db-td {
padding: 0.875rem 1.5rem;
color: var(--db-text-secondary);
border-top: 1px solid var(--db-border-light);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-td-mono {
font-family: ui-monospace, monospace;
font-size: 0.75rem;
color: var(--db-text);
}
.db-td-wrap {
white-space: normal;
}
.db-td-r {
text-align: right;
font-weight: 500;
}
.db-tr:hover td {
background: var(--db-surface-hover);
}
/* --- Badges ------------------------------------------------ */
.db-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding: 0.125rem 0.625rem;
font-size: 0.75rem;
font-weight: 500;
}
.db-badge-orange {
background: #fff7ed;
color: #c2410c;
}
.db-badge-blue {
background: #eff6ff;
color: #1d4ed8;
}
.db-badge-gray {
background: var(--db-surface);
border: 1px solid var(--db-border-strong);
color: var(--db-text-secondary);
}
.db-badge-green {
background: #f0fdf4;
color: #15803d;
}
.db-badge-red {
background: #fef2f2;
color: #b91c1c;
}
.dark .db-badge-orange {
background: rgba(251, 146, 60, 0.16);
color: #fdba74;
}
.dark .db-badge-blue {
background: rgba(59, 130, 246, 0.16);
color: #93c5fd;
}
.dark .db-badge-green {
background: rgba(74, 222, 128, 0.14);
color: #86efac;
}
.dark .db-badge-red {
background: rgba(248, 113, 113, 0.16);
color: #fca5a5;
}
/* --- Gravity circle ---------------------------------------- */
.db-grav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 9999px;
background: #fee2e2;
color: #dc2626;
font-size: 0.75rem;
font-weight: 700;
}
.db-grav-4 {
background: #fee2e2;
color: #dc2626;
}
.db-grav-3 {
background: #fef3c7;
color: #b45309;
}
.db-grav-2 {
background: var(--db-surface-alt);
color: var(--db-text-secondary);
}
.db-grav-1 {
background: var(--db-surface-alt);
color: var(--db-text-muted);
}
.dark .db-grav-4 {
background: rgba(248, 113, 113, 0.18);
color: #fca5a5;
}
.dark .db-grav-3 {
background: rgba(251, 191, 36, 0.18);
color: #fcd34d;
}
/* --- Amounts ----------------------------------------------- */
.db-amount-pos {
color: #16a34a;
font-weight: 600;
}
.db-amount-neg {
color: #dc2626;
font-weight: 600;
}
.dark .db-amount-pos {
color: #4ade80;
}
.dark .db-amount-neg {
color: #f87171;
}
/* --- Activity list ----------------------------------------- */
.db-act-dot {
width: 0.625rem;
height: 0.625rem;
border-radius: 9999px;
flex-shrink: 0;
margin-top: 0.375rem;
}
.db-act-green {
background: #22c55e;
}
.db-act-blue {
background: #3b82f6;
}
.db-act-orange {
background: #f97316;
}
/* --- Tabs -------------------------------------------------- */
.db-tabs {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--db-border);
padding-bottom: 0;
}
.db-tab {
padding: 0.5rem 1rem;
border-radius: 0.5rem 0.5rem 0 0;
font-size: 0.875rem;
font-weight: 500;
color: var(--db-text-muted);
background: transparent;
border: none;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.db-tab:hover {
color: var(--db-text-secondary);
background: var(--db-surface-hover);
}
.db-tab-active {
color: var(--db-text) !important;
background: var(--db-surface-alt) !important;
border-bottom: 2px solid #2563eb !important;
}
.dark .db-tab-active {
border-bottom-color: #60a5fa !important;
}
/* --- Toggle (display only) --------------------------------- */
.db-toggle {
display: inline-flex;
align-items: center;
width: 2.5rem;
height: 1.375rem;
border-radius: 9999px;
padding: 0.125rem;
transition: background 0.2s;
}
.db-toggle-on {
background: #1e3a5f;
justify-content: flex-end;
}
.db-toggle-off {
background: var(--db-border-strong);
justify-content: flex-start;
}
.db-toggle-thumb {
width: 1.125rem;
height: 1.125rem;
border-radius: 9999px;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* --- Breadcrumb (manual, below title) ---------------------- */
.db-breadcrumb {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
}
.db-breadcrumb-link {
font-size: 0.8rem;
color: var(--db-text-faint);
text-decoration: none;
}
.db-breadcrumb-link:hover {
color: var(--db-text-muted);
text-decoration: underline;
}
.db-breadcrumb-sep {
font-size: 0.8rem;
color: var(--db-border-strong);
}
.db-breadcrumb-current {
font-size: 0.8rem;
color: var(--db-text-muted);
}
/* --- Partner detail page ----------------------------------- */
.db-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.db-info-table {
width: 100%;
border-collapse: collapse;
}
.db-info-table tr + tr td {
padding-top: 0.75rem;
}
.db-info-label {
font-size: 0.8rem;
color: var(--db-text-faint);
padding-right: 2rem;
width: 40%;
vertical-align: top;
}
.db-info-value {
font-size: 0.875rem;
color: var(--db-text);
font-weight: 500;
}
.db-siren-placeholder {
display: inline-block;
width: 8rem;
height: 0.75rem;
background: var(--db-border-strong);
border-radius: 0.25rem;
}
.db-tr-link {
cursor: pointer;
}
.db-tr-link:hover td {
background: var(--db-row-link-hover);
}
.db-param-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.db-param-label {
font-size: 0.75rem;
color: var(--db-text-faint);
margin: 0 0 0.25rem;
}
.db-param-value {
font-size: 0.875rem;
font-weight: 600;
color: var(--db-text);
margin: 0;
}
.db-param-note {
border-top: 1px solid var(--db-border-light);
padding-top: 1rem;
margin-top: 1.25rem;
}
/* --- Quick links ------------------------------------------- */
.db-ql-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem;
border-radius: 0.5rem;
text-decoration: none;
}
.db-ql-item:hover {
background: var(--db-surface-alt);
}
.db-ql-bullet {
width: 0.375rem;
height: 0.375rem;
border-radius: 9999px;
background: var(--db-text-faint);
flex-shrink: 0;
}
.db-ql-inner {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.db-ql-label {
font-weight: 600;
color: var(--db-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.875rem;
}
.db-ql-count {
font-size: 0.75rem;
color: var(--db-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-ql-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-radius: 0.75rem;
border: 1px solid var(--db-border);
background: var(--db-surface);
text-decoration: none;
transition:
background 0.1s,
border-color 0.1s;
}
.db-ql-card:hover {
background: var(--db-surface-hover);
border-color: var(--db-border-strong);
}
.db-ql-icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5rem;
background: #eff6ff;
flex-shrink: 0;
}
.dark .db-ql-icon {
background: rgba(59, 130, 246, 0.16);
}
.db-ql-text {
min-width: 0;
flex: 1;
}
.db-ql-title {
font-weight: 600;
color: var(--db-text-secondary);
font-size: 0.875rem;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-ql-sub {
font-size: 0.75rem;
color: var(--db-text-faint);
margin: 0.125rem 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- Anomalies repartition footer ---------------------------- */
.db-repartition {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding-top: 0.875rem;
margin-top: 0.5rem;
border-top: 1px solid var(--db-border-light);
font-size: 0.75rem;
color: var(--db-text-muted);
padding: 10px;
}
/* --- Inline table editing ---------------------------------- */
.db-inline-input {
width: 100%;
padding: 0.25rem 0.5rem;
border: 1px solid var(--db-inline-input-border);
border-radius: 0.375rem;
font-size: 0.8125rem;
color: var(--db-text);
background: var(--db-inline-input-bg);
box-sizing: border-box;
outline: none;
min-width: 6rem;
}
.db-inline-input:focus {
border-color: #3b82f6;
background: var(--db-input-bg);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.db-inline-input-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.db-tr-editing td {
background: var(--db-row-link-hover) !important;
}
.db-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.625rem;
height: 1.625rem;
border-radius: 0.375rem;
border: 1px solid var(--db-border);
background: var(--db-surface);
color: var(--db-text-faint);
cursor: pointer;
transition:
background 0.1s,
color 0.1s,
border-color 0.1s;
}
.db-btn-icon:hover {
background: var(--db-surface-alt);
color: var(--db-text-secondary);
border-color: var(--db-border-strong);
}
.db-btn-icon-save {
color: #16a34a;
border-color: #bbf7d0;
background: #f0fdf4;
}
.db-btn-icon-save:hover {
background: #dcfce7;
border-color: #86efac;
color: #15803d;
}
.db-btn-icon-cancel {
color: #dc2626;
border-color: #fecaca;
background: #fff5f5;
}
.db-btn-icon-cancel:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #b91c1c;
}
.dark .db-btn-icon-save {
color: #86efac;
border-color: rgba(74, 222, 128, 0.35);
background: rgba(74, 222, 128, 0.12);
}
.dark .db-btn-icon-save:hover {
background: rgba(74, 222, 128, 0.2);
border-color: rgba(74, 222, 128, 0.5);
color: #bbf7d0;
}
.dark .db-btn-icon-cancel {
color: #fca5a5;
border-color: rgba(248, 113, 113, 0.35);
background: rgba(248, 113, 113, 0.12);
}
.dark .db-btn-icon-cancel:hover {
background: rgba(248, 113, 113, 0.2);
border-color: rgba(248, 113, 113, 0.5);
color: #fecaca;
}
/* --- Period picker ----------------------------------------- */
.db-period-picker {
position: relative;
display: inline-block;
}
.db-period-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.875rem;
border-radius: 0.5rem;
border: 1px solid var(--db-border-strong);
background: var(--db-surface);
font-size: 0.875rem;
font-weight: 500;
color: var(--db-text-secondary);
cursor: pointer;
font-family: inherit;
transition:
background 0.1s,
border-color 0.1s;
}
.db-period-btn:hover {
background: var(--db-surface-hover);
border-color: var(--db-text-faint);
}
.db-period-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
/* Ancré à droite du déclencheur (et non à gauche) : ce picker est
systématiquement le dernier élément à droite d'un header — l'ancrer à
gauche pousse le panneau hors de l'écran quand le bouton est proche du
bord droit (ex: TransfersPage, avec 2 boutons avant le picker). */
right: 0;
z-index: 60;
background: var(--db-surface);
border: 1px solid var(--db-border);
border-radius: 0.875rem;
box-shadow: var(--db-shadow-lg);
padding: 1rem;
min-width: 17rem;
}
.db-period-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
border: 1px solid var(--db-border);
background: var(--db-surface);
color: var(--db-text-muted);
cursor: pointer;
transition: background 0.1s;
}
.db-period-nav-btn:hover {
background: var(--db-surface-alt);
}
.db-period-month-btn {
padding: 0.375rem 0.25rem;
border-radius: 0.375rem;
border: 1px solid var(--db-border);
background: var(--db-surface);
font-size: 0.75rem;
color: var(--db-text-secondary);
cursor: pointer;
font-family: inherit;
text-align: center;
transition:
background 0.1s,
color 0.1s,
border-color 0.1s;
}
.db-period-month-btn:hover {
background: var(--db-surface-alt);
}
.db-period-month-btn.selected {
background: #2563eb;
color: white;
border-color: #2563eb;
font-weight: 600;
}
.db-period-apply-btn {
padding: 0.375rem 1rem;
border-radius: 0.5rem;
border: none;
background: #2563eb;
color: white;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background 0.1s;
}
.db-period-apply-btn:hover {
background: #1d4ed8;
}
.dark .db-period-apply-btn:hover {
background: #3b82f6;
}
/* --- Date range picker --------------------------------------- */
.db-range-dropdown {
min-width: 19rem;
}
.db-range-inputs {
display: flex;
gap: 0.625rem;
margin-bottom: 0.875rem;
}
.db-range-label {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.7rem;
color: var(--db-text-muted);
flex: 1;
}
.db-range-input {
padding: 0.375rem 0.5rem;
border-radius: 0.375rem;
border: 1px solid var(--db-border);
background: var(--db-input-bg);
font-size: 0.8rem;
color: var(--db-text);
font-family: inherit;
}
.db-range-shortcuts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.375rem;
margin-bottom: 0.875rem;
}
.db-range-shortcut-btn {
padding: 0.375rem 0.5rem;
border-radius: 0.375rem;
border: 1px solid var(--db-border);
background: var(--db-surface);
font-size: 0.75rem;
color: var(--db-text-secondary);
cursor: pointer;
font-family: inherit;
transition: background 0.1s;
}
.db-range-shortcut-btn:hover {
background: var(--db-surface-alt);
}
/* --- Badges supplémentaires -------------------------------- */
.db-badge-red {
background: #fee2e2;
color: #dc2626;
}
.dark .db-badge-red {
background: rgba(248, 113, 113, 0.16);
color: #fca5a5;
}
/* --- Filter pills + search input --------------------------- */
.db-filter-pill {
appearance: none;
-webkit-appearance: none;
padding: 0.375rem 0.875rem;
border-radius: 999px;
border: 1px solid var(--db-border-strong);
background: var(--db-surface);
font-size: 0.8rem;
color: var(--db-text-secondary);
cursor: pointer;
font-family: inherit;
}
.db-filter-pill:focus {
outline: none;
border-color: #3b82f6;
}
.db-search-input {
padding: 0.375rem 0.875rem;
border-radius: 0.5rem;
border: 1px solid var(--db-border-strong);
background: var(--db-input-bg);
font-size: 0.8rem;
color: var(--db-text-secondary);
font-family: inherit;
}
.db-search-input:focus {
outline: none;
border-color: #3b82f6;
}
.db-search-input::placeholder {
color: var(--db-text-faint);
}
.db-textarea {
width: 100%;
min-height: 4.5rem;
resize: vertical;
padding: 0.625rem 0.875rem;
border-radius: 0.5rem;
border: 1px solid var(--db-border-strong);
background: var(--db-input-bg);
font-size: 0.8rem;
color: var(--db-text-secondary);
font-family: inherit;
box-sizing: border-box;
}
.db-textarea:focus {
outline: none;
border-color: #3b82f6;
}
.db-textarea::placeholder {
color: var(--db-text-faint);
}
/* --- Formulaire (champs pleine largeur, pas les pilules filtre) --- */
.db-form-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
/* Variante label à gauche de l'input (page "Demander un virement") */
.db-form-group-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.db-form-group-row .db-form-label {
flex: 0 0 11rem;
padding-top: 0.6rem;
}
.db-form-group-row .db-form-control {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.db-form-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--db-text-secondary);
}
.db-form-label-required::after {
content: ' *';
color: #dc2626;
}
.db-form-input,
.db-form-select {
width: 100%;
/* Hauteur explicite : un