/*
 * MSauce redesign (movements, new movement, check balances).
 * Everything is scoped under .ms-* classes so the original theme (app.css) keeps working for the other pages.
 * Loaded after app.css from assets/app.js.
 */
:root {
    --ms-bg: #f4f5f7;
    --ms-surface: #ffffff;
    --ms-border: #e1e4e8;
    --ms-text: #24292f;
    --ms-muted: #6a737d;
    --ms-accent: #2f7d86;
    --ms-accent-dark: #245f66;
    --ms-accent-soft: #e3f1f2;
    --ms-positive: #1a7f37;
    --ms-positive-soft: #dafbe1;
    --ms-negative: #b42318;
    --ms-negative-soft: #fde8e7;
    --ms-radius: 10px;
    --ms-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
}

.ms-page {
    font-family: var(--ms-font);
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: normal;
    color: var(--ms-text);
    max-width: 1100px;
    margin: 0 auto;
}

.ms-page h2, .ms-page h3 {
    font-family: var(--ms-font);
    letter-spacing: normal;
    text-transform: none;
    color: var(--ms-text);
    margin: 0;
}

/* Page header */
.ms-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.ms-header h2 { font-size: 24px; font-weight: 600; }
.ms-header p { margin: 2px 0 0; color: var(--ms-muted); font-size: 14px; }

/* Buttons */
.ms-page .ms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    padding: 9px 16px;
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    background: var(--ms-surface);
    color: var(--ms-text);
    font: 500 14px var(--ms-font);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.ms-page .ms-btn:hover { border-color: var(--ms-accent); color: var(--ms-accent-dark); }

.ms-page .ms-btn-primary {
    background: var(--ms-accent);
    border-color: var(--ms-accent);
    color: #fff;
}

.ms-page .ms-btn-primary:hover { background: var(--ms-accent-dark); color: #fff; }

.ms-page .ms-btn-danger { color: var(--ms-negative); }
.ms-page .ms-btn-danger:hover { border-color: var(--ms-negative); color: var(--ms-negative); background: var(--ms-negative-soft); }

.ms-page .ms-btn-small { padding: 4px 10px; font-size: 13px; }

/* Cards */
.ms-card {
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.ms-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ms-card-title h3 { font-size: 16px; font-weight: 600; }

/* Summary: one tile per user */
.ms-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.ms-summary .ms-card { margin-bottom: 0; }
.ms-user-name { font-weight: 600; font-size: 15px; }
.ms-user-paid { color: var(--ms-muted); font-size: 13px; margin-top: 2px; }

.ms-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--ms-bg);
    color: var(--ms-muted);
}

.ms-badge-positive { background: var(--ms-positive-soft); color: var(--ms-positive); }
.ms-badge-negative { background: var(--ms-negative-soft); color: var(--ms-negative); }

.ms-type {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ms-bg);
    color: var(--ms-muted);
}

.ms-type-deposit { background: var(--ms-accent-soft); color: var(--ms-accent-dark); }

/* Month selector: links styled as a segmented control */
.ms-segmented {
    display: inline-flex;
    max-width: 100%;
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    overflow-x: auto;
}

.ms-segmented a {
    padding: 5px 12px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--ms-muted);
    text-decoration: none;
    border-left: 1px solid var(--ms-border);
}

.ms-segmented a:first-child { border-left: none; }
.ms-segmented a:hover { background: var(--ms-bg); color: var(--ms-text); }
.ms-segmented a.is-active { background: var(--ms-accent); color: #fff; }

/* Chart */
.ms-chart { position: relative; height: 320px; }

/* Movements table */
.ms-table-wrap { overflow-x: auto; }

.ms-page table.ms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ms-page table.ms-table th,
.ms-page table.ms-table td {
    border: none;
    border-bottom: 1px solid var(--ms-border);
    padding: 9px 10px;
    text-align: left;
    background: transparent;
    vertical-align: middle;
}

.ms-page table.ms-table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ms-muted);
}

.ms-page table.ms-table tr:nth-child(even) { background: transparent; }
.ms-page table.ms-table tbody tr:hover { background: var(--ms-bg); }

.ms-page table.ms-table tr.ms-day td {
    background: var(--ms-bg);
    font-weight: 600;
    font-size: 13px;
    color: var(--ms-muted);
    padding: 6px 10px;
}

.ms-page table.ms-table .ms-num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-page table.ms-table .ms-actions { text-align: right; width: 1%; }
.ms-inline-form { display: inline; margin: 0; }

.ms-empty {
    text-align: center;
    padding: 36px 10px;
    color: var(--ms-muted);
}

.ms-empty p { margin: 0 0 14px; }

/* Form */
.ms-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 20px;
    align-items: start;
}

.ms-form .ms-field { margin-bottom: 16px; }

.ms-page .ms-form label {
    display: block;
    padding: 0;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ms-text);
    text-align: left;
}

.ms-page .ms-form label:after { content: none; }

.ms-page .ms-form input[type=text],
.ms-page .ms-form input[type=number],
.ms-page .ms-form input[type=date],
.ms-page .ms-form select {
    display: block;
    width: 100%;
    height: auto;
    padding: 9px 12px;
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    background: var(--ms-surface);
    font: 15px var(--ms-font);
    color: var(--ms-text);
}

.ms-page .ms-form select {
    -webkit-appearance: auto;
    appearance: auto;
}

.ms-page .ms-form input:focus,
.ms-page .ms-form select:focus {
    border-color: var(--ms-accent);
    box-shadow: 0 0 0 3px var(--ms-accent-soft);
}

.ms-page .ms-form .ms-amount input { font-size: 26px; font-weight: 600; padding: 8px 12px; }

.ms-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ms-hint { margin: 5px 0 0; font-size: 12px; color: var(--ms-muted); }

.ms-page .ms-form ul { margin: 6px 0 0; padding: 0; }
.ms-page .ms-form li { color: var(--ms-negative); font-size: 13px; }

/* Payment / Deposit radios as a segmented control */
.ms-choice > div { display: inline-flex; border: 1px solid var(--ms-border); border-radius: 8px; overflow: hidden; }
.ms-page .ms-choice input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }

.ms-page .ms-choice input[type=radio] + label {
    margin: 0;
    padding: 8px 18px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border-left: 1px solid var(--ms-border);
}

.ms-page .ms-choice div > label:first-of-type { border-left: none; }
.ms-page .ms-choice input[type=radio]:checked + label { background: var(--ms-accent); color: #fff; }
.ms-page .ms-choice input[type=radio]:focus-visible + label { box-shadow: inset 0 0 0 2px var(--ms-accent-dark); }

.ms-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.ms-recent { list-style: none; margin: 0; padding: 0; }

.ms-recent li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ms-border);
    font-size: 14px;
}

.ms-recent li:last-child { border-bottom: none; }
.ms-recent small { display: block; color: var(--ms-muted); font-size: 12px; }

/* Check page */
.ms-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 16px;
}

.ms-status-ok { background: var(--ms-positive-soft); color: var(--ms-positive); }
.ms-status-ko { background: var(--ms-negative-soft); color: var(--ms-negative); }

@media (max-width: 760px) {
    .ms-form-layout, .ms-form-row { grid-template-columns: 1fr; }
    .ms-chart { height: 240px; }
    .ms-page table.ms-table .ms-hide-mobile { display: none; }
}