/* -------------------------------------------------------------------------- */
/* Trade Control base theme variables                                         */
/* -------------------------------------------------------------------------- */

:root {
    --tc-footer-height: 60px;
    --tc-header-gradient-start: #a63d00;
    --tc-header-gradient-end: #8f3200;
    --tc-header-border: #6f2600;
    --tc-header-link-hover: #fffde7;
    --tc-brand-text: #fffde7;
    --tc-brand-hover: #ffd54f;
    --tc-auth-link: #ffd54f;
    --tc-auth-link-hover: #ffffff;
    --tc-footer-bg: #a63d00;
    --tc-footer-text: #ffffff;
    --tc-footer-border: #6f2600;
    --tc-footer-shadow: rgba(255, 152, 0, 0.08);
    --tc-heading-colour: #a63d00;
    --tc-table-bg: #ffffff;
    --tc-table-shadow: rgba(255, 152, 0, 0.04);
    --tc-table-head-bg: #ffe0b2;
    --tc-table-head-text: #a63d00;
    --tc-table-striped-bg: #fffde7;
    --tc-input-border: #a63d00;
    --tc-input-focus-border: #8f3200;
    --tc-input-focus-shadow: rgba(245, 124, 0, 0.15);
    --tc-button-bg: #a63d00;
    --tc-button-border: #a63d00;
    --tc-button-hover-bg: #8f3200;
    --tc-button-hover-border: #8f3200;
    --tc-button-text: #ffffff;
    --tc-dropdown-bg: #ffffff;
    --tc-dropdown-text: #a63d00;
    --tc-dropdown-border: #8f3200;
    --tc-dropdown-hover-bg: #ffe0b2;
    --tc-dropdown-hover-text: #a63d00;
    --tc-section-bg: #ffe0b2;
    --tc-section-text: #222222;
    --tc-section-shadow: rgba(255, 152, 0, 0.08);
    --tc-base: #a63d00;
    --tc-base-600: #8f3200;
    --tc-on-base: #ffffff;
    --tc-muted: #6c757d;
    --tc-split-gutter: #e0e0e0;
    --tc-split-gutter-hover: #d0d0d0;
    --tc-tree-selected-bg: #ffe0b2;
    --tc-tree-selected-fg: #a63d00;
    --tc-tree-hover-bg: #fffde7;
    --tc-tree-icon-muted: #6c757d;
    --tc-tree-drop-target-bg: rgba(25, 135, 84, 0.12);
    --tc-tree-drop-target-outline: #198754;
    --tc-tree-icon-root: #f57c00;
    --tc-tree-icon-setup: #1976d2;
    --tc-tree-icon-filetransfer: #198754;
    --tc-tree-icon-contenttype: #fbc02d;
    --tc-tree-icon-users: #0d6efd;
    --tc-tree-icon-mapped: #198754;
    --tc-tree-icon-enabled: #198754;
    --tc-tree-icon-disabled: #6c757d;
    --tc-tree-glyph-mapped: #198754;
    --tc-tree-glyph-disabled: #6c757d;
    --tc-mobile-actionbar-shadow: rgba(0, 0, 0, 0.25);
    --tc-back-btn-gradient-start: #a63d00;
    --tc-back-btn-gradient-end: #8f3200;
    --tc-back-btn-text: #ffffff;
    --tc-back-btn-shadow: rgba(255, 122, 0, 0.28);
    --tc-back-btn-hover-shadow: rgba(255, 122, 0, 0.34);
    --tc-back-btn-active-shadow: rgba(255, 122, 0, 0.24);
    --tc-admin-html-icon: #6f42c1;
    --tc-admin-files-icon: #0d6efd;
    --tc-admin-images-icon: #d63384;
    --tc-admin-paperclip-icon: #20c997;
    --tc-admin-file-icon: #fd7e14;
    --tc-admin-receipt-icon: #6f42c1;
    --tc-admin-gear-icon: #495057;
    --tc-admin-envelope-icon: #0dcaf0;
    --tc-admin-calendar-icon: #0d6efd;
    --tc-admin-sliders-icon: #20c997;
    --tc-admin-bank-icon: #198754;
    --tc-admin-hash-icon: #0dcaf0;
    --tc-admin-tags-icon: #fd7e14;
    --tc-tax-geo-icon: #a63d00;
    --tc-tax-diagram-icon: #1976d2;
    --tc-tax-bullseye-icon: #198754;
    --tc-tax-calculator-icon: #6f42c1;
    --tc-tax-collection-icon: #0dcaf0;
    --tc-tax-tag-icon: #0d6efd;
    --tc-subject-real-icon: coral;
    --tc-subject-virtual-icon: #6c757d;
    --tc-subject-income-icon: #198754;
    --tc-subject-expense-icon: #dc3545;
    --tc-subject-structural-icon: gold;
    --tc-subject-default-light: #ced4da;
    --tc-subject-default-real: #198754;
    --tc-subject-default-border: #ffffff;
    --tc-subject-default-shadow: rgba(0, 0, 0, 0.08);
    --tc-cat-income: #000000;
    --tc-cat-expense: #e53935;
    --tc-cat-neutral: #1976d2;
    --tc-cat-dot-shadow: rgba(0, 0, 0, 0.04);
    --tc-mobile-sheet-shadow: rgba(0, 0, 0, 0.25);
    --tc-selected-row-bg: rgba(255, 152, 0, 0.14);
    --tc-selected-row-border: rgba(230, 110, 0, 0.45);
    --tc-selected-row-text: inherit;
}

/* --- Trade Control Corporate Theme (Bootstrap 4/5 compatible) --- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px #000000 !important;
}

/* Header and Navbar */
header, .navbar, .tc-header {
    background: linear-gradient(90deg, var(--tc-header-gradient-start) 0%, var(--tc-header-gradient-end) 100%);
    color: var(--tc-footer-text);
    border-bottom: 2px solid var(--tc-header-border);
}

nav.navbar {
    border-bottom: none !important;
    box-shadow: none !important;
}

.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover {
    color: var(--tc-header-link-hover) !important;
    background-color: transparent;
}

/* Keep navbar container flush to the left so logo/brand sit close to screen edge */
.navbar > .container,
.navbar > .container-fluid,
header .navbar > .container,
header .navbar > .container-fluid {
    margin-left: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Styling for navbar links / brand */
header .navbar .navbar-collapse > ul.navbar-nav > li > a.nav-link,
header .navbar .navbar-brand {
    color: var(--tc-footer-text) !important;
    transition: color 0.2s;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

header .navbar .navbar-collapse > ul.navbar-nav > li > a.nav-link:hover,
header .navbar .navbar-collapse > ul.navbar-nav > li > a.nav-link:focus {
    color: var(--tc-table-head-bg) !important;
}

/* Company name in navbar */
header .tc-brand,
.navbar .tc-brand,
.navbar .container .tc-brand,
.nav-link.tc-brand {
    color: var(--tc-brand-text) !important;
    font-weight: 700;
    font-size: 1.25rem !important;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0 !important;
    padding-left: 0.125rem !important;
    margin-right: 0 !important;
    max-width: calc(100vw - 4rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    header .tc-brand:hover,
    header .tc-brand:focus,
    .navbar .tc-brand:hover,
    .navbar .tc-brand:focus,
    .navbar .container .tc-brand:hover,
    .nav-link.tc-brand:hover,
    .nav-link.tc-brand:focus {
        color: var(--tc-brand-hover) !important;
        text-decoration: none;
    }

/* Navbar Logo Styles (keeps absolute helper if used) */
.navbar-logo-absolute {
    position: absolute;
    top: 0;
    left: 4px;
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 4px;
    z-index: 101;
}

.navbar-logo-absolute img {
    height: 28px;
    width: auto;
    display: block;
}

.navbar-nav.ms-auto {
    align-items: center;
}

/* Logo sizing used in brand anchor */
.tc-logo {
    height: 28px;
    width: auto;
    vertical-align: middle;
    display: inline-block;
    margin-right: 0.25rem;
}

/* Auth links: Register, Login, Logout */
.tc-auth-link {
    color: var(--tc-auth-link) !important;
    font-weight: 500;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    /*    vertical-align: middle;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    line-height: 1.5;
    transition: color 0.2s;*/
}

    .tc-auth-link:hover,
    .tc-auth-link:focus {
        color: var(--tc-auth-link-hover) !important;
        text-decoration: none;
    }

/* Body and Footer */
body {
    margin-bottom: var(--tc-footer-height);
}

body.tc-header-hidden > header,
body.tc-footer-hidden > footer {
    display: none !important;
}

body.tc-footer-hidden {
    --tc-footer-height: 0px;
    margin-bottom: 0;
}

body.tc-footer-unavailable {
    --tc-footer-height: 0px;
    margin-bottom: 0;
}

.tc-display-controls {
    position: fixed;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 1100;
}

.tc-display-controls > .btn {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

body:not(.tc-footer-hidden) .tc-display-controls {
    bottom: calc(var(--tc-footer-height) + 0.5rem);
}

body.tc-footer-unavailable .tc-display-controls {
    bottom: 0.5rem;
}

footer, .footer, .tc-footer {
    background: var(--tc-footer-bg);
    color: var(--tc-footer-text);
    border-top: 2px solid var(--tc-footer-border);
    font-size: 1.05rem;
    font-weight: 500;
    box-shadow: 0 -2px 8px var(--tc-footer-shadow);
    text-align: center;
    line-height: var(--tc-footer-height);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    white-space: normal;
    padding: 0 2rem;
    z-index: 100;
}

    footer.text-muted,
    .footer.text-muted,
    .tc-footer.text-muted {
        color: var(--tc-footer-text) !important;
    }

/* Headings */
h1, h2, h3, h4, h5 {
    color: var(--tc-heading-colour);
    font-weight: 600;
}

/* Tables */
.table {
    width: 100%;
    table-layout: auto;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px var(--tc-table-shadow);
    background: var(--tc-table-bg);
}

    .table thead {
        background: var(--tc-table-head-bg);
        color: var(--tc-table-head-text);
        font-weight: 600;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--tc-table-striped-bg);
}

/* Prefer wrapping at word boundaries. Avoid breaking words in the middle.
   Use overflow-wrap to allow long unbroken tokens to break if necessary,
   but keep word-break normal so browsers do not break anywhere (per-character). */
.table th, .table td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.95rem;
}

/* Keep action buttons horizontal and evenly padded inside table cells */
.table .action-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
}

    .table .action-buttons .btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.35rem 0.6rem;
    }

/* If a previous rule forces the last table column to nowrap, ensure our container handles it */
.table td:last-child > .action-buttons,
.table th:last-child > .action-buttons {
    min-width: 0 !important;
}

/* Selected row styling shared by standard tables and MudBlazor grids */
.tc-selected-row,
.table tbody tr.tc-selected-row,
.mud-table-body .tc-selected-row,
.mud-table-row.tc-selected-row {
    background-color: var(--tc-selected-row-bg) !important;
    color: var(--tc-selected-row-text) !important;
}

.table tbody tr.tc-selected-row > td,
.mud-table-row.tc-selected-row > td {
    background-color: var(--tc-selected-row-bg) !important;
    color: var(--tc-selected-row-text) !important;
    box-shadow: inset 0 1px 0 var(--tc-selected-row-border), inset 0 -1px 0 var(--tc-selected-row-border);
}

.table tbody tr.tc-selected-row > td:first-child,
.mud-table-row.tc-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--tc-selected-row-border), inset 0 1px 0 var(--tc-selected-row-border), inset 0 -1px 0 var(--tc-selected-row-border);
}

/* Forms and Buttons */
select,
input[type="submit"] {
    border: 1px solid var(--tc-input-border);
    border-radius: 4px;
}

    select:focus {
        border-color: var(--tc-input-focus-border);
        box-shadow: none;
    }

    /* Base button theme (custom, do not override Bootstrap's btn-warning) */
    input[type="submit"].tc-btn-base,
    button.tc-btn-base,
    a.tc-btn-base {
        background: var(--tc-button-bg);
        color: var(--tc-button-text);
        font-weight: 500;
        border: 1px solid var(--tc-button-border);
        border-radius: 4px;
        transition: background 0.2s;
    }

        input[type="submit"].tc-btn-base:hover,
        input[type="submit"].tc-btn-base:focus,
        button.tc-btn-base:hover,
        button.tc-btn-base:focus,
        a.tc-btn-base:hover,
        a.tc-btn-base:focus {
            background: var(--tc-button-hover-bg);
            border-color: var(--tc-button-hover-border);
            color: var(--tc-button-text);
        }

/* Dropdown menus and select options */
select,
.dropdown-menu {
    background: var(--tc-dropdown-bg);
    color: var(--tc-dropdown-text);
}

    select option {
        color: var(--tc-dropdown-text);
        background: var(--tc-dropdown-bg);
    }

.dropdown-menu {
    background: var(--tc-dropdown-bg);
    color: var(--tc-dropdown-text);
    border: 1px solid var(--tc-dropdown-border);
}

    .dropdown-menu .nav-link,
    .dropdown-menu a {
        color: var(--tc-dropdown-text) !important;
        background: transparent;
    }

        .dropdown-menu .nav-link:hover,
        .dropdown-menu a:hover {
            color: var(--tc-dropdown-hover-text) !important;
            background: var(--tc-dropdown-hover-bg);
        }

/* Utility: base text and border */
.tc-text-base {
    color: var(--tc-heading-colour) !important;
}

.tc-border-base {
    border-color: var(--tc-heading-colour) !important;
}

.tc-text-info {
    color: var(--tc-heading-colour) !important;
}

/* Accent Section */
.tc-section {
    background: var(--tc-section-bg);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px var(--tc-section-shadow);
}

    .tc-section dt {
        color: var(--tc-heading-colour);
        font-weight: 600;
    }

    .tc-section dd {
        color: var(--tc-section-text);
        font-size: 1.1rem;
    }

    .tc-section a {
        color: #084298;
    }

/* Main content container */
.tc-body-align {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Highlight only the filter dropdown and text input inside the standard filter form
   (selector targets the pattern used in your pages: form.mb-3 > .row.g-2.align-items-center) */
form.mb-3 > .row.g-2.align-items-center select.form-control,
form.mb-3 > .row.g-2.align-items-center input.form-control[type="text"] {
    border: 1px solid var(--tc-input-border);
    border-radius: 4px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    /* Focus state: stronger orange outline */
    form.mb-3 > .row.g-2.align-items-center select.form-control:focus,
    form.mb-3 > .row.g-2.align-items-center input.form-control[type="text"]:focus {
        border-color: var(--tc-input-focus-border);
        outline: none;
        box-shadow: 0 0 0 0.15rem var(--tc-input-focus-shadow);
    }

/* Mobile Devices */
@media (max-width: 420px) {
    :root {
        --tc-footer-height: 40px;
    }

    footer, .footer, .tc-footer {
        padding: 0 0.5rem;
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    body {
        margin-bottom: var(--tc-footer-height);
    }

    .tc-body-align {
        padding-left: 8px;
        padding-right: 8px;
    }

    .table {
        display: block;
        font-size: 0.92rem;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table .action-buttons {
            flex-wrap: wrap;
            gap: 0.15rem;
        }

            .table .action-buttons .btn {
                padding: 0.15rem 0.35rem !important;
                min-width: 1.6rem !important;
                font-size: 0.88rem !important;
            }

                .table .action-buttons .btn i {
                    vertical-align: middle;
                    font-size: 1.05em;
                    margin: 0;
                }

        .table thead,
        .table tbody,
        .table tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        .table th,
        .table td {
            min-width: 0 !important;
            white-space: normal !important;
            overflow-wrap: break-word;
            word-break: normal;
            -webkit-hyphens: auto;
            hyphens: auto;
        }

            .table th:last-child,
            .table td:last-child {
                min-width: 0 !important;
                white-space: normal !important;
            }

    header .navbar > .container,
    header .navbar > .container-fluid {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    header .navbar .navbar-brand:first-of-type {
        margin-right: 0.25rem;
    }

    header .navbar .tc-brand {
        min-width: 0;
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    header .navbar .navbar-toggler {
        margin-left: 0.25rem;
        justify-self: end;
    }

    header .navbar .navbar-collapse {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.35rem 0.25rem 0.65rem;
        border-top: 1px solid rgba(255, 255, 255, 0.35);
    }

    header .navbar .navbar-collapse .navbar-nav {
        align-items: stretch;
    }

    header .navbar .navbar-collapse .nav-link,
    header .navbar .navbar-collapse .tc-auth-link {
        padding: 0.45rem 0.5rem;
    }

    header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        position: relative;
        background-image: none;
    }

    header .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: currentColor;
        font-size: 2rem;
        font-weight: 300;
        line-height: 1;
        content: "\00d7";
    }

    .tc-subject-browser-modes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
    }

    .tc-subject-browser-modes > .btn {
        width: 100%;
        border-radius: var(--bs-btn-border-radius) !important;
    }

    .navbar > .container,
    .navbar > .container-fluid {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

@media (max-width: 768px) {
    .table td:last-child, .table th:last-child {
        min-width: 80px;
        white-space: nowrap;
    }

    .table td .btn {
        display: inline-block;
        width: auto;
        margin-bottom: 0;
        margin-right: 4px;
    }

    .table {
        font-size: 0.92rem;
    }
}

/* Category tree polarity icons: small colored dots before the title */
.tc-cat-icon {
    display: inline-block;
    width: 0.66rem;
    height: 0.66rem;
    border-radius: 50%;
    margin-right: 0.45rem;
    vertical-align: text-bottom;
    box-shadow: 0 0 0 1px var(--tc-cat-dot-shadow) inset;
}

/* Cash-code icon (no polarity dot). Smaller margin and consistent alignment with category titles */
.tc-code-icon {
    margin-right: 0.45rem;
    font-size: 0.95rem;
    vertical-align: text-bottom;
    color: inherit;
}

/* Polarity colours:
   Income -> black
   Expense -> red
   Neutral -> blue */
.tc-cat-income {
    background-color: var(--tc-cat-income);
}

.tc-cat-expense {
    background-color: var(--tc-cat-expense);
}

.tc-cat-neutral {
    background-color: var(--tc-cat-neutral);
}

/* Ensure Fancytree will render HTML in titles for these pages */
.fancytree-community .fancytree-title {
}

/* Cards with p-0 body + tables: remove any perceived gap between card-header and table header */
.card > .card-body.p-0 {
    padding-top: 0 !important;
}

    .card > .card-body.p-0 > .table-responsive {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

        .card > .card-body.p-0 > .table-responsive > table.table {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

/* On very small screens we flip .table to display:block; keep card tables behaving normally */
@media (max-width: 420px) {
    .card > .card-body.p-0 > .table-responsive > table.table {
        display: table !important;
    }

        .card > .card-body.p-0 > .table-responsive > table.table thead,
        .card > .card-body.p-0 > .table-responsive > table.table tbody,
        .card > .card-body.p-0 > .table-responsive > table.table tr {
            display: table-row-group;
        }

        .card > .card-body.p-0 > .table-responsive > table.table tr {
            display: table-row;
        }
}