/* Most styling comes from Theme/AppTheme.cs. This file is only for the login page and small fixes. */
html, body { margin: 0; }

.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1F5AA6 0%, #0F9D8A 100%);
    font-family: "Segoe UI", Tahoma, Cairo, Arial, sans-serif;
}
.login-card {
    width: 340px; background: #fff; border-radius: 10px; padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; flex-direction: column;
}
.login-logo { font-size: 28px; font-weight: 700; color: #1F5AA6; text-align: center; }
.login-sub { color: #6b7280; text-align: center; margin-bottom: 20px; }
.login-card label { font-size: 13px; color: #374151; margin: 8px 0 4px; }
.login-card input { padding: 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; }
.login-card input:focus { outline: 2px solid #1F5AA6; border-color: transparent; }
.login-card button {
    margin-top: 20px; padding: 11px; border: 0; border-radius: 6px; background: #1F5AA6;
    color: #fff; font-size: 15px; cursor: pointer;
}
.login-card button:hover { background: #184a8a; }
.login-error { background: #fde8e8; color: #b42318; padding: 8px; border-radius: 6px; font-size: 13px; }
.login-lang { margin-top: 16px; text-align: center; font-size: 13px; }
.login-lang a { color: #1F5AA6; text-decoration: none; }

#blazor-error-ui { display: none; }

/* Payment box: paid amount above the payment method, easy to see */
.pay-box {
    display: flex; flex-direction: column; gap: 12px; padding: 14px;
    border: 2px solid var(--mud-palette-success); border-radius: 10px;
    background: rgba(var(--mud-palette-success-rgb), 0.06);
}
/* Amount starts on the same side as the method text below it, so the eye does not jump across */
.pay-amount input { font-size: 1.5rem; font-weight: 700; text-align: start; }

/* Sizes you can change in one place */
:root {
    /* Action pane buttons (cards): height, smallest width, icon size, empty space before Delete */
    --pane-button-height: 60px;
    --pane-button-min-width: 76px;
    --pane-icon-size: 26px;
    --pane-delete-gap: 32px;
    /* Receipt / payment: normal field width, wide fields (contact, description), last-5 box width */
    --money-field-width: 340px;
    --money-wide-field-width: 680px;
    --money-recent-width: 280px;
}

/* Receipt / payment: details column (date, contact, reference, description), amount column (balance, amount, method),
   last-5 box at the far right */
.money-layout {
    display: grid; gap: 24px; align-items: start;
    grid-template-columns: minmax(var(--money-field-width), var(--money-wide-field-width)) var(--money-field-width) minmax(var(--money-recent-width), 1fr);
}
.money-recent { justify-self: end; width: var(--money-recent-width); max-width: 100%; }
@media (max-width: 1200px) { .money-layout { grid-template-columns: minmax(0, var(--money-wide-field-width)); } .money-recent { justify-self: start; } }
.money-details > .money-field { width: var(--money-field-width); max-width: 100%; }
.contact-balance { display: flex; gap: 8px; padding: 0 4px; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.contact-balance b { color: var(--mud-palette-text-primary); }
.recent-trans td, .recent-trans th { font-size: .78rem !important; white-space: nowrap; padding: 4px 6px !important; }
.paym-icon .mud-badge { transform: scale(.8); }

/* Entry date / user / branch, top right of entry forms */
.entry-info { font-size: .78rem; line-height: 1.35; color: var(--mud-palette-text-secondary); text-align: end; margin-inline-end: 12px; }
.entry-info span { font-weight: 600; }

/* Journal lines: small cell padding so the narrow columns (type, debit, credit) show full values */
.journal-lines td, .journal-lines th { padding: 4px 6px !important; }
.journal-lines { display: inline-block; width: fit-content; align-self: flex-start; max-width: 100%; overflow-x: auto; } /* grid only as wide as its columns */
.journal-lines table { width: auto; table-layout: fixed; }
.journal-lines th { white-space: nowrap; }
.journal-lines td:nth-child(6) input, .journal-lines td:nth-child(7) input { text-align: end; } /* debit, credit (flag is column 4) */
.journal-total td { background: var(--mud-palette-background-gray); }

/* Action pane, top left of header and list forms: Back, Add, Edit, Save, Delete, Export + the page's buttons */
/* Each button is a clickable card: icon above the text */
.action-pane { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.action-pane .mud-button-root {
    text-transform: none; height: var(--pane-button-height); min-width: var(--pane-button-min-width); padding: 4px 10px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; font-size: .85rem; line-height: 1.2;
}
.action-pane .mud-button-root:not(.mud-button-filled) { background: var(--mud-palette-surface); }
.action-pane .mud-button-root:not(:disabled):hover { border-color: var(--mud-palette-primary); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.action-pane .mud-button-root:disabled { opacity: .55; }
.action-pane .mud-button-label { flex-direction: column; gap: 2px; }
.action-pane .mud-button-icon-start { margin: 0 !important; }
.action-pane .mud-button-icon-start svg, .action-pane .mud-button-icon-start .mud-icon-root { font-size: var(--pane-icon-size) !important; width: var(--pane-icon-size); height: var(--pane-icon-size); }
.action-pane .action-pressed { border-color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), 0.10) !important; }
.action-pane .action-delete { margin-inline-start: var(--pane-delete-gap); }
.action-pane .mud-divider-vertical { height: calc(var(--pane-button-height) - 16px); align-self: center; }
/* Selected row on list and setup grids (Edit / Delete act on it) */
.mud-table-row.row-selected > td { background: rgba(var(--mud-palette-primary-rgb), 0.12) !important; }

/* Date fields: room for about 15 characters (dd/MM/yyyy + calendar icon).
   The calendar has no big header (ShowToolbar="false") so it fits under a field on short screens. */
.date-field { width: calc(15ch + 56px) !important; max-width: 100%; flex: 0 0 auto; }

/* Posted transactions inquiry: read-only header boxes in rows (small, medium, large), compact lines grid */
.posted-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.posted-fields .mud-input-control { margin: 0; flex: 0 0 auto; max-width: 100%; }
.posted-fields .field-s { width: calc(12ch + 28px); }
.posted-fields .field-m { width: calc(26ch + 28px); }
.posted-fields .field-l { width: calc(52ch + 28px); }
.posted-fields .num input { text-align: end; }
/* Posted list: one line per row, scroll sideways on small screens */
.posted-grid td, .posted-grid th { white-space: nowrap; }
.posted-lines { max-width: 100%; overflow-x: auto; }
.posted-lines td, .posted-lines th { font-size: .8rem !important; padding: 4px 6px !important; white-space: nowrap; }
.posted-lines td.cell-m { white-space: normal; min-width: 18ch; max-width: 26ch; }

/* Home page tiles: the whole card is the link */
.home-tile { display: block; width: 75%; text-decoration: none; }
.home-tile .mud-paper { height: 60px; transition: box-shadow .15s, background-color .15s; }
.home-tile:hover .mud-paper { background-color: var(--mud-palette-action-default-hover); box-shadow: var(--mud-elevation-4); }
@media (max-width: 599px) { .home-tile { width: 100%; } }

/* Report screens: filters in one row under the buttons (wrap on small screens) */
.report-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 4px 4px 8px; }
.report-filters > * { flex: 0 0 auto; }
.report-filters .filter-wide { width: 320px; max-width: 100%; }
.report-filters .filter-date { width: 170px; }
.report-filters .filter-select { width: 200px; }
/* Posted voucher tabs under the lines: account and contact names on one line, long descriptions wrap */
.posted-voucher .posted-lines td.cell-m { white-space: nowrap; min-width: 0; max-width: none; }
.posted-voucher .posted-lines td.cell-m:last-child { white-space: normal; min-width: 20ch; max-width: 40ch; }

/* Cell alignment used by the grids (MudBlazor has no text-end / text-center classes): numbers end-aligned in both languages */
.text-end { text-align: end !important; }
.text-center { text-align: center !important; }