/* ===========================================================================
   LedgerLite — base styles
   Professional, accounting-focused: white backgrounds, light-gray sections,
   black text, hard 1px borders, square corners, no gradients.
   Tailwind (CDN) provides utilities; this file enforces the design rules and
   styles native form controls that Tailwind does not normalise.
   =========================================================================== */

:root {
    --ink: #111827;        /* near-black text   */
    --line: #111827;       /* hard border color */
    --line-soft: #d1d5db;  /* secondary borders */
    --panel: #f3f4f6;      /* light gray panel  */
    --panel-2: #f9fafb;
    --income: #15803d;
    --expense: #b91c1c;
}

* {
    /* Enforce square corners everywhere, including native controls. */
    border-radius: 0 !important;
}

html, body {
    background: #ffffff;
    color: var(--ink);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Tabular figures make currency columns line up. */
.amount, td.amount, .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

a { color: inherit; }

/* Form controls -------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--ink);
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    color: var(--ink);
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}
input[type="color"] {
    padding: 0;
    height: 2.375rem;
    width: 3.5rem;
    border: 1px solid var(--ink);
    cursor: pointer;
}
label { font-size: 0.8125rem; font-weight: 600; }

/* Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid var(--ink);
    background: #ffffff;
    color: var(--ink);
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.btn:hover { background: var(--panel); }
.btn-primary { background: var(--ink); color: #ffffff; }
.btn-primary:hover { background: #000000; }
.btn-danger { border-color: var(--expense); color: var(--expense); background: #ffffff; }
.btn-danger:hover { background: var(--expense); color: #ffffff; }
.btn-sm { padding: 0.3125rem 0.5rem; font-size: 0.75rem; }

/* Tables --------------------------------------------------------------- */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
table.data th, table.data td {
    border: 1px solid var(--line-soft);
    padding: 0.5rem 0.625rem;
    text-align: left;
    vertical-align: middle;
}
table.data thead th {
    background: var(--panel);
    border-color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}
table.data tbody tr:hover { background: var(--panel-2); }

/* Cards / panels ------------------------------------------------------- */
.panel { border: 1px solid var(--ink); background: #ffffff; }
.panel-head {
    border-bottom: 1px solid var(--ink);
    background: var(--panel);
    padding: 0.625rem 0.875rem;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Inline icon swatch for category / bank account icons ----------------- */
.swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--ink);
    overflow: hidden;
    flex: 0 0 auto;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch .initial { font-size: 0.6875rem; font-weight: 700; color: #ffffff; }

/* Badges --------------------------------------------------------------- */
.badge {
    display: inline-block;
    border: 1px solid var(--ink);
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-income  { color: var(--income);  border-color: var(--income); }
.badge-expense { color: var(--expense); border-color: var(--expense); }
.text-income  { color: var(--income); }
.text-expense { color: var(--expense); }

/* Field error text ----------------------------------------------------- */
.field-error { color: var(--expense); font-size: 0.75rem; margin-top: 0.25rem; }

/* Sidebar nav links ---------------------------------------------------- */
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: #e5e7eb;
    border-left: 3px solid transparent;
    text-decoration: none;
}
.nav-link:hover { background: #1f2937; color: #ffffff; }
.nav-link.active { background: #1f2937; color: #ffffff; border-left-color: #ffffff; }
.nav-section { padding: 0.75rem 1rem 0.25rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; }