/* AssoBudget - interface styles. */

:root
    {
    --bleu     : #1f4e79;
    --bleu-clair: #e8f0f8;
    --vert     : #1e7b3a;
    --rouge    : #b3261e;
    --gris     : #666;
    --trait    : #d9d9d9;
    --fond     : #f4f5f7;
    --blanc    : #fff;
    --jaune    : #fff6cc;
    }

*
    {
    box-sizing: border-box;
    }

body
    {
    margin      : 0;
    background  : var(--fond);
    color       : #222;
    font        : 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

a
    {
    color: var(--bleu);
    }

h1
    {
    font-size : 1.5rem;
    margin    : 0 0 16px;
    }

h1 small, h2 small
    {
    font-weight : normal;
    color       : var(--gris);
    font-size   : .85rem;
    margin-left : 8px;
    }

h2
    {
    font-size : 1.15rem;
    margin    : 0 0 10px;
    }

/* ------------------------------------------------------------ layout */

header.top
    {
    display         : flex;
    flex-wrap       : wrap;
    align-items     : center;
    gap             : 8px 24px;
    background      : var(--bleu);
    color           : var(--blanc);
    padding         : 8px 20px;
    }

header.top a
    {
    color           : var(--blanc);
    text-decoration : none;
    }

header.top .brand
    {
    font-weight : bold;
    font-size   : 1.1rem;
    }

header.top .brand .assoc
    {
    font-weight : normal;
    opacity     : .85;
    margin-left : 10px;
    font-size   : .95rem;
    }

header.top .menu
    {
    display   : flex;
    flex-wrap : wrap;
    gap       : 2px;
    }

header.top .menu a
    {
    padding       : 6px 12px;
    border-radius : 4px;
    }

header.top .menu a:hover, header.top .menu a.on
    {
    background: rgba( 255, 255, 255, .18 );
    }

header.top .session
    {
    margin-left : auto;
    display     : flex;
    align-items : center;
    gap         : 14px;
    font-size   : .9rem;
    }

header.top .session select
    {
    padding: 3px 6px;
    }

main
    {
    padding   : 20px;
    max-width : 1400px;
    margin    : 0 auto;
    }

footer.bottom
    {
    text-align : center;
    color      : var(--gris);
    font-size  : .8rem;
    padding    : 20px;
    }

.box
    {
    background    : var(--blanc);
    border        : 1px solid var(--trait);
    border-radius : 6px;
    padding       : 16px 18px;
    margin-bottom : 20px;
    }

.box.login
    {
    max-width : 380px;
    margin    : 60px auto;
    }

.grid2, .grid3
    {
    display               : grid;
    gap                   : 20px;
    grid-template-columns : 1fr;
    }

@media ( min-width: 900px )
    {
    .grid2 { grid-template-columns: 1fr 1fr; }
    .grid3 { grid-template-columns: 1fr 1.4fr 1fr; }
    }

/* ------------------------------------------------------------ messages */

.flash
    {
    padding       : 10px 14px;
    border-radius : 4px;
    margin-bottom : 14px;
    background    : var(--bleu-clair);
    border        : 1px solid #b9cde3;
    }

.flash.success { background: #e5f5e9; border-color: #a9d7b5; }
.flash.error   { background: #fbe9e7; border-color: #efb3ad; }
.warn          { background: var(--jaune); padding: 6px 10px; border-radius: 4px; }
.muted         { color: var(--gris); }

/* ------------------------------------------------------------ tables */

table.data
    {
    width           : 100%;
    border-collapse : collapse;
    font-size       : .92rem;
    }

table.data th, table.data td
    {
    padding        : 6px 8px;
    border-bottom  : 1px solid var(--trait);
    text-align     : left;
    vertical-align : top;
    }

table.data thead th
    {
    background : var(--bleu-clair);
    font-weight: 600;
    }

table.data tfoot th
    {
    border-top : 2px solid var(--bleu);
    }

table.data tr:hover td
    {
    background: #fafbfd;
    }

.num
    {
    text-align         : right !important;
    font-variant-numeric: tabular-nums;
    white-space        : nowrap;
    }

.pos { color: var(--vert); }
.neg { color: var(--rouge); }

tr.pointe td     { color: var(--gris); }
tr.selected td   { background: var(--jaune) !important; }

/* ------------------------------------------------------------ forms */

form.inline
    {
    display : inline;
    }

form.filters
    {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 8px 12px;
    align-items : flex-end;
    margin-bottom: 14px;
    }

label
    {
    display   : block;
    font-size : .85rem;
    color     : var(--gris);
    }

label input, label select, label textarea
    {
    display    : block;
    width      : 100%;
    margin-top : 2px;
    }

input, select, textarea, button
    {
    font    : inherit;
    padding : 6px 8px;
    border  : 1px solid #bbb;
    border-radius: 4px;
    background: var(--blanc);
    }

input[type="checkbox"]
    {
    width : auto;
    display: inline;
    }

form.filters label
    {
    min-width: 120px;
    }

.form-grid
    {
    display               : grid;
    grid-template-columns : repeat( auto-fit, minmax( 200px, 1fr ) );
    gap                   : 12px 16px;
    margin-bottom         : 14px;
    }

.form-grid .wide
    {
    grid-column: 1 / -1;
    }

button, .btn
    {
    background      : var(--bleu);
    color           : var(--blanc);
    border          : none;
    cursor          : pointer;
    text-decoration : none;
    display         : inline-block;
    padding         : 7px 14px;
    border-radius   : 4px;
    }

button:hover, .btn:hover
    {
    filter: brightness( 1.1 );
    color : var(--blanc);
    }

button.light, .btn.light
    {
    background : var(--blanc);
    color      : var(--bleu);
    border     : 1px solid var(--bleu);
    }

button.danger, .btn.danger
    {
    background: var(--rouge);
    }

button.small, .btn.small
    {
    padding   : 3px 8px;
    font-size : .85rem;
    }

.actions
    {
    display     : flex;
    gap         : 8px;
    flex-wrap   : wrap;
    align-items : center;
    margin      : 10px 0;
    }

.actions .right
    {
    margin-left: auto;
    }

/* ------------------------------------------------------------ reconciliation */

.rapp
    {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 20px;
    }

@media ( min-width: 1100px )
    {
    .rapp { grid-template-columns: 1fr 1fr; }
    }

.soldes
    {
    display   : flex;
    flex-wrap : wrap;
    gap       : 12px 28px;
    margin-bottom: 14px;
    }

.soldes div
    {
    font-size: .85rem;
    color    : var(--gris);
    }

.soldes strong
    {
    display   : block;
    font-size : 1.3rem;
    color     : #222;
    }

.tabs
    {
    display       : flex;
    gap           : 6px;
    flex-wrap     : wrap;
    margin-bottom : 16px;
    }

.tabs a
    {
    padding         : 6px 12px;
    border          : 1px solid var(--trait);
    border-radius   : 4px;
    background      : var(--blanc);
    text-decoration : none;
    }

.tabs a.on
    {
    background   : var(--bleu);
    color        : var(--blanc);
    border-color : var(--bleu);
    }

details.lines
    {
    font-size: .85rem;
    }