/* =============================================================================
   ApartmentAccounting — App Styles
   Uses Tabler (Bootstrap 5) as the base framework, Syncfusion EJ2 for grids and
   form inputs. Mirrors the GatePass/GPMS.MVC design conventions.
   Sections: Navbar · Page · Cards · Stat Cards · View Header · Login ·
             Form Helpers · Statement Table · Syncfusion Overrides
   ============================================================================= */

/* ── Navbar ─────────────────────────────────────────────────────────────────── */
.navbar {
    border-bottom: 1px solid var(--tblr-border-color);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}
.navbar .nav-item.active > .nav-link {
    color: var(--tblr-primary) !important;
    font-weight: 600;
}

/* ── Page layout ────────────────────────────────────────────────────────────── */
.page-body {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* ── View header (title + action button row) ──────────────────────────────────
   Named .view-header to avoid collision with Tabler's own .page-header class. */
.view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.view-header h1, .view-header h4 {
    margin: 0;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--tblr-body-color);
}

/* ── Card shell ─────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg, 12px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}
.card-header {
    background: var(--tblr-card-cap-bg, transparent);
    border-bottom: 1px solid var(--tblr-border-color);
    font-weight: 600;
    padding: 14px 18px;
}

/* ── Stat cards (Dashboard) ─────────────────────────────────────────────────── */
.stat-card {
    background: var(--tblr-card-bg, #fff);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
    border: 1px solid var(--tblr-border-color);
    transition: transform .15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}
.stat-icon.green  { background: #d8f3dc; color: #2d6a4f; }
.stat-icon.blue   { background: #cff4fc; color: #055160; }
.stat-icon.amber  { background: #fef3c7; color: #92400e; }
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--tblr-body-color); line-height: 1; }
.stat-label { font-size: .8rem; color: var(--tblr-muted-color, #6c757d); margin-top: 2px; }

/* ── Login page ─────────────────────────────────────────────────────────────── */
.login-body {
    background: linear-gradient(135deg, #0f2b4e 0%, #2d6a4f 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    background: var(--tblr-card-bg, #fff);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo i { font-size: 3rem; color: #2d6a4f; }
.login-logo h4 { font-weight: 700; color: var(--tblr-body-color); margin-top: 8px; margin-bottom: 0; }
.login-logo p { color: var(--tblr-muted-color, #6c757d); font-size: .85rem; margin: 0; }

/* ── Form helpers ───────────────────────────────────────────────────────────── */
.form-section-title {
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--tblr-muted-color, #6c757d);
    margin-bottom: 12px; padding-bottom: 6px;
    border-bottom: 1px solid var(--tblr-border-color);
}
.field-group { margin-bottom: 1rem; }
.field-group label {
    font-size: .85rem; font-weight: 500;
    color: var(--tblr-body-color);
    margin-bottom: 4px; display: block;
}

/* ── Cash Flow statement table ─────────────────────────────────────────────── */
.statement-table td, .statement-table th { padding: .5rem .75rem; }
.statement-section-row td {
    font-weight: 700;
    padding-top: 1rem;
    color: var(--tblr-primary);
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--tblr-border-color);
}
.statement-subtotal-row td {
    font-weight: 700;
    border-top: 1px solid var(--tblr-border-color);
}
.statement-total-row td {
    font-weight: 700;
    background: var(--tblr-active-bg, rgba(var(--tblr-primary-rgb), .06));
    border-top: 2px solid var(--tblr-primary);
    border-bottom: 2px solid var(--tblr-primary);
}

@media print {
    .navbar, .cashflow-toolbar { display: none !important; }
    /* Strip shadows/rounding on any printed card so it reads as a flat printed page
       rather than a floating UI element - applies to the Cash Flow statement card
       and anything else printed from this app. */
    .card { box-shadow: none !important; border-radius: 0 !important; }
}

/* ── Syncfusion overrides ───────────────────────────────────────────────────── */
/* Keep EJ2 grid/inputs visually consistent with Tabler's rounded, bordered look */
.e-grid { border-radius: var(--tblr-border-radius-lg, 12px); overflow: hidden; border: 1px solid var(--tblr-border-color) !important; }
.e-grid .e-gridheader { background: var(--tblr-card-cap-bg, transparent); }
.e-grid .e-toolbar { border: none; background: transparent; }
.e-dropdownlist.e-input-group, .e-datepicker.e-input-group, .e-numeric.e-input-group {
    border-radius: var(--tblr-border-radius, 4px);
}

/* Amount coloring inside grids/tables */
.amount-negative { color: var(--tblr-danger, #d63939); }
.amount-positive { color: var(--tblr-success, #2fb344); }

/* ── Cash Book (printable ledger register) ─────────────────────────────────────
   Deliberately its own visual identity - a traditional accounting register look
   (ledger-cloth green masthead, red ink for payments, gold total rule) rather
   than the app's usual Tabler chrome, since this is meant to be printed and
   filed. Approved via a design-sample artifact before this was built. */
.cashbook-shell {
    --cb-paper: #f4efe0;
    --cb-paper-raised: #faf7ec;
    --cb-paper-line: #ded2ae;
    --cb-paper-line-soft: #e8ddbc;
    --cb-ink: #2b241c;
    --cb-ink-soft: #6b6152;
    --cb-cloth: #1f4a3d;
    --cb-cloth-deep: #163730;
    --cb-cloth-tint: #e7eee7;
    --cb-cloth-tint-line: #cfe0d0;
    --cb-red-ink: #a13a2e;
    --cb-gold: #a9822f;
    --cb-gold-soft: #e7d9ad;
    --cb-shadow: rgba(31, 26, 16, .18);
}
[data-bs-theme="dark"] .cashbook-shell {
    --cb-paper: #241f18;
    --cb-paper-raised: #2b251c;
    --cb-paper-line: #423a29;
    --cb-paper-line-soft: #352e21;
    --cb-ink: #ece4d2;
    --cb-ink-soft: #a89b81;
    --cb-cloth: #3f8068;
    --cb-cloth-deep: #2c5c4a;
    --cb-cloth-tint: #26332c;
    --cb-cloth-tint-line: #37493e;
    --cb-red-ink: #e2796a;
    --cb-gold: #d3ac5c;
    --cb-gold-soft: #4a3f26;
    --cb-shadow: rgba(0, 0, 0, .45);
}

.cashbook-shell { color: var(--cb-ink); font-family: "IBM Plex Sans", var(--tblr-font-sans-serif, sans-serif); }

.cashbook-page {
    background: var(--cb-paper);
    border-radius: 3px;
    box-shadow: 0 18px 40px -18px var(--cb-shadow), 0 2px 0 var(--cb-paper-line);
    overflow: hidden;
    margin-bottom: 0;
}

.cashbook-masthead {
    background: linear-gradient(160deg, var(--cb-cloth) 0%, var(--cb-cloth-deep) 100%);
    color: #f4efe0;
    padding: 1.5rem 2rem 1.35rem;
    position: relative;
}
.cashbook-masthead::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
    background: repeating-linear-gradient(90deg, var(--cb-gold) 0 10px, transparent 10px 20px);
    opacity: .55;
}
.cashbook-masthead-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cashbook-society-name { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.cashbook-page-index { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em; opacity: .72; }
.cashbook-masthead-title { display: flex; align-items: baseline; gap: .9rem; margin-top: .35rem; flex-wrap: wrap; }
.cashbook-masthead-title h2 { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 2.1rem; margin: 0; letter-spacing: .01em; }
.cashbook-masthead-title .cashbook-month { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-style: italic; font-size: 1.25rem; opacity: .9; }

.cashbook-bf {
    display: flex; gap: 1.75rem; flex-wrap: wrap;
    padding: .85rem 2rem;
    background: var(--cb-cloth-tint);
    border-bottom: 1px solid var(--cb-cloth-tint-line);
    font-family: "IBM Plex Mono", monospace; font-size: .8rem;
}
.cashbook-bf-item { display: flex; gap: .5rem; align-items: baseline; }
.cashbook-bf-label { font-family: "IBM Plex Sans", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--cb-ink-soft); }
.cashbook-bf-value { font-weight: 600; font-variant-numeric: tabular-nums; }

.cashbook-body { padding: 1.75rem 2rem 2.1rem; }
.cashbook-account + .cashbook-account { margin-top: 2.25rem; }

.cashbook-account-heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.cashbook-account-heading .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cb-cloth); flex-shrink: 0; }
.cashbook-account-heading h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15rem; margin: 0; }
.cashbook-account-heading .sub { font-size: .75rem; color: var(--cb-ink-soft); font-family: "IBM Plex Mono", monospace; }

.cashbook-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .cashbook-side-grid { grid-template-columns: 1fr; } }

.cashbook-side-label {
    font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: .5rem; padding-bottom: .4rem; border-bottom: 1.5px solid var(--cb-paper-line);
}
.cashbook-side-label.dr { color: var(--cb-cloth); }
.cashbook-side-label.cr { color: var(--cb-red-ink); }

table.cashbook-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cashbook-table thead th {
    text-align: left; font-weight: 600; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--cb-ink-soft); padding: .3rem .4rem; border-bottom: 1px solid var(--cb-paper-line-soft);
}
.cashbook-table thead th.num { text-align: right; }
.cashbook-table td { padding: .42rem .4rem; border-bottom: 1px dotted var(--cb-paper-line-soft); vertical-align: top; }
.cashbook-table td.date { white-space: nowrap; color: var(--cb-ink-soft); font-family: "IBM Plex Mono", monospace; font-size: .78rem; }
.cashbook-table td.particulars .cat { display: block; font-size: .72rem; color: var(--cb-ink-soft); margin-top: .1rem; }
.cashbook-table td.num { text-align: right; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cashbook-table td.num.dr { color: var(--cb-cloth); }
.cashbook-table td.num.cr { color: var(--cb-red-ink); }
.cashbook-table tr.empty td { color: var(--cb-ink-soft); font-style: italic; }
.cashbook-table tfoot td {
    padding-top: .55rem; border-top: 2px solid var(--cb-gold); border-bottom: none; font-weight: 700;
    font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums;
}
.cashbook-table tfoot td.label { font-family: "IBM Plex Sans", sans-serif; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.cashbook-table tfoot td.num.dr { color: var(--cb-cloth); }
.cashbook-table tfoot td.num.cr { color: var(--cb-red-ink); }

.cashbook-closing-strip { margin-top: 1.1rem; display: flex; justify-content: flex-end; }
.cashbook-closing-box {
    display: flex; align-items: baseline; gap: .6rem; padding: .5rem .9rem;
    background: var(--cb-paper-raised); border: 1px solid var(--cb-gold-soft); border-radius: 2px;
}
.cashbook-closing-box .label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-ink-soft); }
.cashbook-closing-box .value { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }

.cashbook-month-summary {
    margin-top: 1.9rem; padding-top: 1.1rem; border-top: 1.5px solid var(--cb-paper-line);
    display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .75rem;
}
.cashbook-month-summary .msg { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: .85rem; color: var(--cb-ink-soft); }
.cashbook-month-summary .totals-final { display: flex; gap: 1.5rem; font-family: "IBM Plex Mono", monospace; font-size: .85rem; font-weight: 600; }
.cashbook-month-summary .totals-final span.tag { font-family: "IBM Plex Sans", sans-serif; font-weight: 500; color: var(--cb-ink-soft); margin-right: .35rem; }

.cashbook-page-break { display: flex; align-items: center; gap: .85rem; padding: 1.6rem .5rem; color: var(--cb-ink-soft); }
.cashbook-page-break .tear { flex: 1; height: 0; border-top: 2px dashed var(--cb-paper-line); }
.cashbook-page-break .tab {
    font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    background: var(--cb-cloth); color: #f4efe0; padding: .32rem .75rem; border-radius: 999px;
    white-space: nowrap; box-shadow: 0 4px 10px -4px var(--cb-shadow);
}
.cashbook-page-break .tab i { margin-right: .3rem; }

@media print {
    .navbar, .cashbook-toolbar, .cashbook-page-break { display: none !important; }
    body { background: #fff; }
    .cashbook-page { box-shadow: none; border-radius: 0; page-break-after: always; }
}