/* OaklandScraper Custom Styles */

:root {
    --color-primary: #283618;
    /* Bootstrap's focus-shadow variables take a bare triple, not a colour. */
    --color-primary-rgb: 40, 54, 24;
    --color-primary-dark: #1a2410;
    --color-accent: #fcbf49;
    --color-secondary: #003844;
    --color-bg: #e5e5ef;
    --color-text: #222222;
    --color-text-secondary: #666666;
    --color-border: #d4d4d4;
    --color-error: #dc3545;
    --color-success: #283618;
    --color-warning: #fcbf49;
    /* The fixed header's height, and the offset every fixed thing under it
       uses -- the sidebar's top, the content's margin. It is 16px padding +
       48px logo + 16px + 1px border, and the header is pinned to it below so
       the two cannot drift: it read 81px against a header that measured 91,
       hiding the top 10px of every page (#144). */
    --app-header-height: 91px;
}

/* Body & Layout */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.login-body {
    background-color: #e5e5ef;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.login-body .main-container {
    margin-top: 0;
    min-height: auto;
    display: block;
    width: 100%;
    max-width: 400px;
}

body.login-body .content-area {
    margin-left: 0;
    padding: 0;
    min-height: auto;
    background-color: transparent;
}

.main-container {
    flex: 1;
    display: flex;
    margin-top: var(--app-header-height);
}

.content-area {
    flex: 1;
    margin-left: 240px;
    padding: 16px 20px;
    background-color: var(--color-bg);
    min-height: calc(100dvh - var(--app-header-height));
}

footer {
    margin-top: auto;
}

/* Header */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* Pinned to the variable, so a taller logo overflows visibly instead of
       silently sliding under the content that offsets by it. */
    height: var(--app-header-height);
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 1030;
}

.navbar-brand img {
    transition: opacity 0.3s ease;
    width: 48px;
    height: 48px;
}

.navbar-brand:hover img {
    opacity: 0.8;
}

/* User Avatar */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: 16px;
}

/* Profile Dropdown */
.profile-dropdown {
    position: relative;
}

.profile-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-btn:hover {
    border-color: var(--color-accent);
    background-color: rgba(252, 191, 73, 0.05);
}

.profile-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(40, 54, 24, 0.1);
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: white;
}

.profile-avatar svg {
    width: 20px;
    height: 20px;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    min-width: 200px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.3s ease;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
}

.dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.dropdown-item:hover {
    background-color: rgba(252, 191, 73, 0.1);
    color: var(--color-text);
}

.dropdown-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.dropdown-icon svg {
    width: 18px;
    height: 18px;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: 0;
}

/* Login Page */
.login-container {
    width: 100%;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 40px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.login-card img {
    max-width: 100%;
    height: auto;
}

.login-card h1 {
    color: var(--color-primary);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(40, 54, 24, 0.15);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 54, 24, 0.2);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Login page button - Secondary accent gold */
.login-card .btn-primary {
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    color: var(--color-text);
    box-shadow: 0 4px 12px rgba(252, 191, 73, 0.15);
}

.login-card .btn-primary:hover {
    background: #f5ae2a;
    border-color: #f5ae2a;
    color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(252, 191, 73, 0.2);
}

.login-card .btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: #f5ae2a;
    border-color: #f5ae2a;
    color: var(--color-text);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Forms */
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.form-control {
    background-color: #ffffff;
    border: 1.5px solid var(--color-border);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(40, 54, 24, 0.1);
    color: var(--color-text);
}

.form-control::placeholder {
    color: #999999;
}

.form-control.is-invalid {
    border-color: var(--color-error);
    background-color: #fff5f5;
}

.invalid-feedback {
    color: #721c24;
    font-size: 12px;
    font-weight: 400;
}

/* Cards */
.card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
    background: linear-gradient(to right, #f0f0f8 0%, #ffffff 100%);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

/* Alerts */
.alert {
    border-radius: 6px;
    border: none;
    border-left: 4px solid;
    padding: 14px 16px;
}

.alert-success {
    background-color: rgba(40, 54, 24, 0.08);
    border-left-color: var(--color-success);
    color: #1a3d1a;
}

.alert-danger,
.alert-error {
    background-color: rgba(220, 53, 69, 0.08);
    border-left-color: var(--color-error);
    color: #721c24;
}

.alert-warning {
    background-color: rgba(252, 191, 73, 0.1);
    border-left-color: var(--color-warning);
    color: #8b6914;
}

.alert-info {
    background-color: rgba(0, 56, 68, 0.08);
    border-left-color: var(--color-secondary);
    color: #00212f;
}

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.dropdown-item:hover {
    background-color: rgba(252, 191, 73, 0.1);
    color: var(--color-text);
}

.dropdown-item.active {
    background-color: var(--color-primary);
    color: white;
}

/* Tables */
table {
    border-collapse: collapse;
}

.table {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.table thead {
    background: linear-gradient(to right, #f0f0f8 0%, #ffffff 100%);
}

.table thead th {
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text);
}

.table tbody tr:hover {
    background-color: rgba(40, 54, 24, 0.04);
}

/* Badges */
.badge {
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge.bg-success,
.badge.badge-success {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: white;
}

.badge.bg-warning,
.badge.badge-warning {
    background-color: #fff3cd !important;
    color: #8b6914;
}

/* Sidebar Navigation */
.sidebar {
    position: fixed;
    left: 0;
    top: var(--app-header-height);
    width: 240px;
    height: calc(100dvh - var(--app-header-height));
    background-color: var(--color-bg);
    border-right: 1px solid var(--color-border);
    z-index: 1019;
    overflow-y: auto;
    padding: 20px 0;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-item {
    margin: 0;
}

.sidebar-item:first-child {
    margin-top: 30px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin: 0 8px;
    border-radius: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.sidebar-link:hover {
    background-color: rgba(40, 54, 24, 0.08);
    color: var(--color-text);
}

.sidebar-link.active {
    border-left: 4px solid var(--color-primary);
    padding-left: 16px;
    color: var(--color-primary);
    background: linear-gradient(to right, rgba(40, 54, 24, 0.1) 0%, transparent 100%);
    font-weight: 600;
}

/* Sidebar Icon Styling */
.sidebar-link .icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-link .icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Sidebar Submenu Styling */
.sidebar-submenu-item {
    position: relative;
}

.submenu-toggle {
    justify-content: space-between;
}

.submenu-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.sidebar-submenu-item.open .submenu-arrow {
    transform: rotate(180deg);
}

.sidebar-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: rgba(40, 54, 24, 0.04);
}

.sidebar-submenu-item.open .sidebar-submenu {
    max-height: 200px;
    padding: 8px 0;
}

.submenu-link {
    padding: 10px 20px 10px 44px;
    margin: 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.submenu-link .icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: -6px;
}

.submenu-link .icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.submenu-link:hover {
    background-color: rgba(40, 54, 24, 0.08);
    color: var(--color-text);
}

.submenu-link.active {
    color: var(--color-primary);
    font-weight: 500;
    border-left: 3px solid var(--color-primary);
    padding-left: 41px;
}

/* Profile Avatar Icon */
.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.profile-avatar svg {
    width: 20px;
    height: 20px;
    stroke: white;
    fill: none;
    stroke-width: 2;
}

/* Dropdown Icon Styling */
.dropdown-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Dashboard Card */
.dashboard-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.dashboard-card .card-header {
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 12px 24px;
}

.dashboard-card .card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card .card-header h1,
.dashboard-card .card-header h2,
.dashboard-card .card-header h3,
.dashboard-card .card-header h4,
.dashboard-card .card-header h5,
.dashboard-card .card-header h6 {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.card-summary {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    opacity: 0.7;
    letter-spacing: 0.01em;
}

.dashboard-card .card-body {
    padding: 24px;
}

.empty-state-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 32px 0;
    margin: 0;
}

/* Dashboard Page Layout */
.dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1280px;
    padding: 0 8px;
}

/* Command Bar */
.command-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 4px 0;
}

.command-bar-context {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.command-bar-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.command-bar-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #34a853;
    flex-shrink: 0;
}

.status-text {
    opacity: 0.7;
}

.status-separator {
    opacity: 0.3;
}

.command-bar-actions .btn {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.command-bar-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Dashboard Data Status Table */
.dashboard-table {
    border-collapse: collapse;
}

.dashboard-table thead th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 24px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: transparent;
}

.dashboard-table .source-column {
    width: 44%;
    text-transform: none;
    letter-spacing: 0.01em;
}

.dashboard-table .month-column {
    width: 28%;
}

.dashboard-table .month-active {
    color: var(--color-text);
}

.dashboard-table .month-active .month-name {
    font-weight: 600;
}

.month-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.month-header .month-name {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* Group rows */
.group-row {
    height: 32px;
}

.group-cell {
    padding: 12px 24px 4px !important;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: none !important;
}

/* Source rows */
.source-row {
    height: 42px;
    transition: background-color 180ms ease;
}

.source-row:hover {
    background-color: rgba(0, 0, 0, 0.012);
}

.source-row td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.source-row:last-child td {
    border-bottom: none;
}

.source-cell {
    padding: 0 24px 0 40px;
    vertical-align: middle;
}

.source-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.source-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    color: var(--color-text-secondary);
    opacity: 0.4;
}

.source-name {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--color-text);
    letter-spacing: 0.005em;
}

.upload-link {
    opacity: 0;
    transition: opacity 180ms ease;
    color: var(--color-text-secondary);
    margin-left: auto;
    display: flex;
    align-items: center;
}

.source-row:hover .upload-link {
    opacity: 0.35;
}

.upload-link:hover {
    opacity: 0.7 !important;
    color: var(--color-primary);
}

/* Count badges */
.count-cell {
    padding: 0 24px;
    vertical-align: middle;
}

.count-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 54px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.count-value.has-data {
    color: #1a6d35;
    background-color: rgba(40, 167, 69, 0.06);
    font-weight: 600;
}

.count-value.no-data {
    color: var(--color-text-secondary);
    opacity: 0.3;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Content Header (kept for non-dashboard pages) */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 0;
}

.content-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.015em;
}

.content-actions .btn {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.content-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Clickable count badges */
.clickable-count {
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
}

.clickable-count:hover {
    background-color: rgba(40, 167, 69, 0.12);
    transform: scale(1.05);
}

.clickable-count:active {
    transform: scale(0.97);
}

/* Preview Modal */
#previewModal .modal-content {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    min-height: 70vh;
}

#previewModal .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 16px 24px;
}

#previewModal .modal-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

#previewModal .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

#previewModal .table-responsive {
    flex: 1;
}

.preview-controls {
    padding: 14px 24px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.search-toolbar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-input {
    display: flex;
    align-items: center;
    width: 360px;
    height: 36px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0 10px;
    gap: 8px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.search-input:hover {
    border-color: rgba(0, 0, 0, 0.16);
}

.search-input:focus-within {
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 0 2px rgba(40, 54, 24, 0.04);
}

.search-input-icon {
    flex-shrink: 0;
    opacity: 0.35;
    color: var(--color-text-secondary);
}

.search-input input {
    flex: 1;
    border: none;
    outline: none;
    box-shadow: none;
    background: none;
    font-size: 0.8125rem;
    color: var(--color-text);
    padding: 0;
    height: 100%;
}

.search-input input:focus {
    outline: none;
    box-shadow: none;
}

.search-input input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.45;
}

.search-input-clear {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    transition: opacity 150ms ease;
}

.search-input-clear:hover {
    background: rgba(0, 0, 0, 0.08);
}

.search-input.has-value .search-input-clear {
    display: flex;
}

.search-toolbar-meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    opacity: 0.6;
    padding-left: 2px;
}



/* Preview table */
.preview-table {
    margin: 0;
    font-size: 0.8125rem;
}

.preview-table thead th {
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    user-select: none;
}

.preview-table tbody td {
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    vertical-align: middle;
}

.preview-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.012);
}

.sortable-header {
    cursor: pointer;
    transition: color 180ms ease;
}

.sortable-header:hover {
    color: var(--color-text);
}

.sort-indicator {
    opacity: 0.3;
    margin-left: 4px;
    vertical-align: middle;
}

.sort-indicator.active {
    opacity: 0.8;
    color: var(--color-primary);
}

/* Preview footer */
.preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.preview-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-per-page select {
    width: auto;
    min-width: 60px;
    font-size: 0.75rem;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 4px 8px;
}

.preview-per-page-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.preview-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Profile Section */
.profile-section {
    max-width: 600px;
}

.profile-avatar-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.profile-avatar-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    font-weight: 600;
    font-size: 48px;
    box-shadow: 0 4px 12px rgba(40, 54, 24, 0.15);
}

/* Profile Information */
.profile-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.profile-item:last-child {
    border-bottom: none;
}

.profile-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.profile-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar {
        padding: 0.75rem 0;
    }

    :root {
        /* 12px padding + 58px content + 12px + 1px, per the narrower navbar
           padding above. It read 57px against a header measuring 83. */
        --app-header-height: 83px;
    }

    .login-card {
        padding: 24px 16px;
    }

    .main-container {
        margin-top: var(--app-header-height);
        flex-direction: column;
    }

    .sidebar {
        display: none;
    }

    .content-area {
        margin-left: 0;
        padding: 12px 16px;
    }
}

/* Focus States */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner-border-sm {
    border-width: 0.2em;
    width: 1rem;
    height: 1rem;
}

/* Utilities */
.text-muted {
    color: var(--color-text-secondary) !important;
}

.border-top {
    border-top: 1px solid var(--color-border) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--color-border) !important;
}

/* Accounting Upload Styles */
.accounting-section {
    padding: 0;
}

.accounting-description {
    text-align: center;
    color: var(--color-text-secondary);
}

.upload-zone {
    border: 2px dashed var(--color-border);
    background-color: var(--color-bg);
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: var(--color-primary);
    background-color: rgba(40, 54, 24, 0.04);
}

.upload-zone.drag-over {
    border-color: var(--color-accent);
    border-style: solid;
    background-color: rgba(252, 191, 73, 0.08);
}

.upload-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--color-text-secondary);
}

.upload-icon svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.upload-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
}

.upload-hint {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 8px 0 0 0;
}

.file-input {
    display: none;
}

.file-info {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.file-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.file-name {
    font-weight: 500;
    color: var(--color-text);
    word-break: break-word;
}

.file-size {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.upload-progress {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
}

.progress-info {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--color-text);
    font-weight: 500;
}

.progress {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    transition: width 0.3s ease;
}

.upload-results {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
}

.alert-success,
.alert-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.alert-success {
    border-left: 4px solid var(--color-success);
    background-color: rgba(40, 54, 24, 0.08);
    color: #1a3d1a;
}

.alert-error {
    border-left: 4px solid var(--color-error);
    background-color: rgba(220, 53, 69, 0.08);
    color: #721c24;
}

.alert-success .icon,
.alert-error .icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-success .icon svg,
.alert-error .icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.result-card {
    background-color: #f9fafb;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
}

.result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.result-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.result-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

.text-center {
    text-align: center;
}

.btn-outline-danger {
    color: var(--color-error);
    border-color: var(--color-error);
}

.btn-outline-danger:hover {
    background-color: var(--color-error);
    color: white;
}

.btn-outline-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--color-secondary);
    color: white;
}

.text-muted {
    color: var(--color-text-secondary);
}

@media (max-width: 576px) {
    .upload-zone {
        padding: 32px 16px;
        min-height: 160px;
    }

    .file-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }
}

/* Print Styles */
@media print {
    .navbar,
    footer,
    .btn-close {
        display: none;
    }
}

/* Accessibility - Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================ */
/* Bank Upload Page Styles */
/* ============================================================================ */

/* Upload Zone */
.upload-zone {
    border: 2px dashed #b8b8b8;
    background-color: #e5e5ef;
    border-radius: 8px;
    padding: 48px 24px;
    min-height: 200px;
    text-align: center;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.upload-zone:hover {
    border-color: #283618;
    background-color: rgba(40, 54, 24, 0.04);
}

.upload-zone.drag-over {
    border-color: #fcbf49;
    border-style: solid;
    background-color: rgba(252, 191, 73, 0.08);
}

.upload-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    color: #666666;
    margin-bottom: 16px;
}

.upload-icon svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    fill: none;
}

.upload-text {
    font-size: 16px;
    font-weight: 500;
    color: #222222;
    margin: 12px 0;
}

.upload-hint {
    font-size: 12px;
    color: #999999;
    margin: 8px 0;
}

/* File Info */
.file-info {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 16px;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-details {
    display: flex;
    flex-direction: column;
}

.file-name {
    font-weight: 500;
    color: #222222;
    font-size: 14px;
}

.file-size {
    font-size: 12px;
    color: #999999;
    margin-top: 4px;
}

/* Bank Selection */
.bank-selection {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 16px;
}

.bank-selection .info-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    color: #999999;
}

/* Upload Progress */
.upload-progress {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 16px;
}

.progress-info {
    margin-bottom: 12px;
    font-size: 14px;
    color: #666666;
}

.progress {
    height: 6px;
    background-color: #e5e5ef;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(135deg, #283618, #1a2410);
    height: 100%;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Upload Results */
.upload-results {
    background-color: #ffffff;
}

.alert-success,
.alert-error {
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.alert-success {
    border-left-color: #283618;
    background-color: rgba(40, 54, 24, 0.08);
    color: #1a3d1a;
}

.alert-error {
    border-left-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.08);
    color: #721c24;
}

.alert-success .icon,
.alert-error .icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.alert-success .icon svg,
.alert-error .icon svg {
    width: 20px;
    height: 20px;
}

.result-card {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 24px;
}

.result-title {
    font-weight: 600;
    color: #222222;
    margin-bottom: 16px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.result-item {
    display: flex;
    flex-direction: column;
}

.result-label {
    font-size: 12px;
    font-weight: 600;
    color: #283618;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.result-value {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
}

/* Unknown Transactions Section */
#unknownTransactionsSection {
    margin-top: 24px;
}

.batch-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.batch-controls .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.batch-controls .btn .icon {
    width: 16px;
    height: 16px;
}

.batch-controls .btn .icon svg {
    width: 16px;
    height: 16px;
}

.batch-controls .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#selectedCountDisplay {
    font-size: 13px;
}

/* Tables */
.table {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    overflow: hidden;
}

.table thead {
    background: linear-gradient(to right, #f0f0f8, #ffffff);
    border-bottom: 1px solid #d4d4d4;
}

.table thead th {
    font-weight: 600;
    color: #222222;
    padding: 14px 16px;
    border: none;
}

.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: rgba(40, 54, 24, 0.04);
}

.table .badge {
    font-size: 11px;
    padding: 4px 8px;
}

.table .icon {
    width: 16px;
    height: 16px;
}

.table .icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.table-sm {
    font-size: 13px;
}

.table-sm thead th,
.table-sm tbody td {
    padding: 10px 12px;
}

/* Empty State */
.empty-state {
    padding: 48px 24px;
    text-align: center;
}

.empty-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    color: #b8b8b8;
    margin-bottom: 16px;
}

.empty-icon svg {
    width: 64px;
    height: 64px;
    stroke: currentColor;
    fill: none;
}

.empty-state h5 {
    font-weight: 600;
    color: #222222;
    margin-top: 16px;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: #999999;
}

/* Buttons */
.btn-secondary {
    background-color: #fcbf49;
    border-color: #fcbf49;
    color: #222222;
    font-weight: 600;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #f5ae2a;
    border-color: #f5ae2a;
    color: #222222;
}

.btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-outline-secondary {
    border-color: #003844;
    color: #003844;
}

.btn-outline-secondary:hover {
    background-color: #003844;
    border-color: #003844;
    color: white;
}

.btn-outline-primary {
    border-color: #283618;
    color: #283618;
}

.btn-outline-primary:hover {
    background-color: #283618;
    border-color: #283618;
    color: white;
}

.btn .icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.btn .icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Modal */
.modal-header {
    background: linear-gradient(to right, #f0f0f8, #ffffff);
    border-bottom: 1px solid #d4d4d4;
}

.modal-title {
    font-weight: 600;
    color: #222222;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    background-color: #e5e5ef;
    border-top: 1px solid #d4d4d4;
    padding: 16px 24px;
}

/* Sync Log */
#syncLogSection {
    margin-top: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .upload-zone {
        padding: 32px 16px;
        min-height: 150px;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }

    .batch-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .batch-controls .btn {
        width: 100%;
    }

    .table-responsive {
        font-size: 12px;
    }

    .table thead th,
    .table tbody td {
        padding: 8px 10px;
    }
}

/* Editable fields styling */
.editable-field {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: inline-block;
}

.editable-field:hover {
    background-color: rgba(252, 191, 73, 0.1);
    border: 1px dashed #fcbf49;
}

/* Badge styling */
.badge {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background-color: rgba(40, 54, 24, 0.15);
    color: #1a3d1a;
    border: 1px solid #283618;
}

.badge-warning {
    background-color: rgba(252, 191, 73, 0.1);
    color: #8b6914;
    border: 1px solid #fcbf49;
}

.badge-secondary {
    background-color: #d4d4d4;
    color: #666666;
}

/* Tab styling */
.nav-tabs {
    border-bottom: 2px solid #d4d4d4;
}

.nav-tabs .nav-link {
    color: #666666;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-tabs .nav-link:hover {
    color: #283618;
    border-bottom-color: #fcbf49;
}

.nav-tabs .nav-link.active {
    color: #283618;
    background-color: transparent;
    border-bottom-color: #283618;
}

/* Toast styling aligned with UI Style Guide.
   Named outside Bootstrap's `.toast`, which carries `:not(.show){display:none}`
   at a higher specificity and hid every one of these (#135). */
.app-toast-container {
    position: fixed;
    /* Clear of the header: a toast pinned at 20px sat on top of it. */
    top: calc(var(--app-header-height) + 16px);
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-toast {
    border-left: 4px solid;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 300px;
    animation: slideIn 0.3s ease-out;
}

.app-toast__close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
}

.app-toast__close:hover {
    opacity: 1;
}

/* Sits between the message and the dismiss, and reads as the thing to click. */
.app-toast__action {
    background: none;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    white-space: nowrap;
}

.app-toast__action:hover {
    background-color: rgb(0 0 0 / 6%);
}

.app-toast--success {
    background-color: #eeefed;
    border-left-color: #283618;
    color: #1a3d1a;
}

.app-toast--error,
.app-toast--danger {
    background-color: #fceff0;
    border-left-color: #dc3545;
    color: #721c24;
}

.app-toast--warning {
    background-color: #fff9ed;
    border-left-color: #fcbf49;
    color: #8b6914;
}

.app-toast--info {
    background-color: #ebeff0;
    border-left-color: #003844;
    color: #00212f;
}

/* Written by formatAmountColored in ui.js. The copies it replaced each carried
   an inline style="color: #dc3545", twenty of them, so the one colour the app
   uses for a negative was unchangeable from the stylesheet. */
.amount-negative {
    color: var(--color-error);
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================================
   Inline Editing for Pending Transactions Table
   ============================================================================ */

/* Edit mode row styling - subtle background change per UI guide */
.pending-transaction-row.edit-mode {
    background-color: rgba(40, 54, 24, 0.04);
}

.pending-transaction-row.edit-mode td {
    padding: 12px 16px;
}

/* Autocomplete dropdown items, rendered by step4_transactions_edit.js */
.autocomplete-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 200ms;
}

.autocomplete-dropdown-item:last-child {
    border-bottom: none;
}

.autocomplete-dropdown-item:hover {
    background-color: rgba(40, 54, 24, 0.08);
}

.autocomplete-dropdown-item.selected {
    background-color: rgba(252, 191, 73, 0.15);
}

.autocomplete-dropdown-item .account-number {
    font-weight: 600;
    color: #283618;
    margin-right: 12px;
}

.autocomplete-dropdown-item .account-description {
    color: #666666;
    font-size: 13px;
}

.autocomplete-dropdown-item-no-results {
    padding: 24px 16px;
    text-align: center;
    color: #999999;
    font-size: 14px;
}

/* Validation error message */
.error-message {
    color: #721c24;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
    display: none;
}

.error-message.show {
    display: block;
}

/* Save/Cancel button indicators */
.edit-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.edit-actions .saving-indicator {
    font-size: 12px;
    color: #666666;
    display: none;
}

.edit-actions .saving-indicator.show {
    display: inline;
}

.edit-actions .saving-indicator::before {
    content: '⏳ ';
}

/* Save/Cancel buttons in edit mode */
.edit-actions .save-edit-btn {
    padding: 4px 8px;
    font-size: 13px;
    height: auto;
    min-width: auto;
}

.edit-actions .save-edit-btn:hover {
    background-color: #20843d;
    border-color: #20843d;
}

.edit-actions .cancel-edit-btn {
    padding: 4px 8px;
    font-size: 13px;
    height: auto;
    min-width: auto;
}

.edit-actions .cancel-edit-btn:hover {
    background-color: #f0f0f0;
}

.edit-actions .delete-edit-btn {
    padding: 4px 8px;
    font-size: 13px;
    height: auto;
    min-width: auto;
}

/* Accounting Codes tab — status pill and the active/inactive toggle */
.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge-active {
    background: linear-gradient(135deg, #283618 0%, #1a2410 100%);
    color: #ffffff;
}

.status-badge-inactive {
    background-color: #d4d4d4;
    color: #666666;
}

.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    display: none;
}

.toggle-switch-slider {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    background-color: #d4d4d4;
    border-radius: 13px;
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch input:checked + .toggle-switch-slider {
    background-color: #283618;
}

.toggle-switch-slider:before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-switch input:checked + .toggle-switch-slider:before {
    transform: translateX(22px);
}

.toggle-switch-slider:focus-within {
    box-shadow: 0 0 0 3px rgba(40, 54, 24, 0.1);
}

.accounting-code-row.edit-mode .edit-input-cell input {
    width: 100%;
    background-color: #ffffff;
    border: 1.5px solid #d4d4d4;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accounting-code-row.edit-mode .edit-input-cell input:focus {
    outline: none;
    border-color: #283618;
    box-shadow: 0 0 0 3px rgba(40, 54, 24, 0.1);
}

.accounting-code-row.edit-mode .edit-input-cell input.error {
    border-color: #dc3545;
    background-color: #fff5f5;
}

/* Table cell alignment for edit mode */
.pending-transaction-row.edit-mode td:nth-child(6),
.pending-transaction-row.edit-mode td:nth-child(7) {
    vertical-align: middle;
}

/* Override overflow for pending transactions table to allow dropdown visibility */
#pendingTransactionsTable {
    overflow: visible !important;
}

#pendingTransactionsTable tbody {
    overflow: visible !important;
}

#pendingTransactionsTable .description-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-transaction-row.edit-mode td {
    overflow: visible !important;
    position: relative;
}

.account-code-cell {
    position: relative;
    overflow: visible !important;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 1100; /* Higher than modal default z-index of 1050 */
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.autocomplete-dropdown.show {
    display: block;
}



/* Delete Confirmation Modal - UI Style Guide Compliance */
#deleteConfirmModal .modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

#deleteConfirmModal .modal-header {
    background: linear-gradient(to right, #f0f0f8, #ffffff);
    border-bottom: 1px solid #d4d4d4;
    padding: 24px;
}

#deleteConfirmModal .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
}

#deleteConfirmModal .btn-close {
    opacity: 0.6;
}

#deleteConfirmModal .btn-close:hover {
    opacity: 1;
}

#deleteConfirmModal .modal-body {
    padding: 24px;
    background-color: #ffffff;
}

/* Alert icon styling */
#deleteConfirmModal .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

#deleteConfirmModal .text-danger {
    color: #dc3545 !important;
}

#deleteConfirmModal h6 {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
}

#deleteConfirmModal .text-muted {
    color: #666666;
    font-size: 14px;
    line-height: 1.6;
}

#deleteConfirmModal .modal-footer {
    background-color: #e5e5ef;
    border-top: 1px solid #d4d4d4;
    padding: 16px 24px;
    gap: 12px;
}

/* Delete button styling */
#deleteConfirmModal .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 6px;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

#deleteConfirmModal .btn-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Cancel button styling */
#deleteConfirmModal .btn-outline-secondary {
    border-color: #d4d4d4;
    color: #222222;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 6px;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

#deleteConfirmModal .btn-outline-secondary:hover {
    background-color: rgba(40, 54, 24, 0.04);
    border-color: #b8b8b8;
    color: #222222;
}

/* Modal animation */
.modal.fade .modal-dialog {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-header-gradient {
    background: linear-gradient(to right, #f0f0f8, #ffffff);
    border-bottom: 1px solid #d4d4d4;
    padding: 16px 20px;
}

.card-title {
    color: #283618;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

/* Metrics card specific styling */
.metrics-card .card-body {
    padding: 24px;
}

.metric-display {
    text-align: center;
}

.metric-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.metric-icon .lucide-icon {
    width: 48px;
    height: 48px;
    color: #283618;
    stroke-width: 1.5;
}

.metric-value {
    font-size: 36px;
    font-weight: 700;
    color: #283618;
    line-height: 1.2;
    margin-bottom: 8px;
}

.metric-label {
    font-size: 14px;
    color: #666666;
    font-weight: 500;
}

/* Step breakdown grid */
.step-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
}

.step-item {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 12px 8px;
    text-align: center;
    background-color: #f8f8f8;
    transition: all 200ms ease;
}

.step-item:hover {
    border-color: #d4d4d4;
    background-color: #f0f0f0;
}

.step-label {
    font-size: 11px;
    color: #666666;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.step-count {
    font-size: 24px;
    font-weight: 700;
    color: #283618;
    line-height: 1;
}

/* Dashboard grid layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}


/* Sortable table headers.

   The cursor stays on the cell because step 3's bills table still sorts from a
   listener on the `th` itself. Every other sortable header sorts from the
   button below, which fills the cell. */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* The sort control is a real button inside the header, so Tab reaches it and
   Enter and Space activate it without any key handling of our own. It is styled
   to look exactly like the header text it replaced.

   Shared rather than page-scoped. Three sheets carried their own copy, each
   reaching only its own screen, and the one table nobody copied it to rendered
   its headers as grey bevelled push-buttons -- the browser's default, on a
   screen that had shipped that way since the control was introduced (#168).

   It fills the cell. Without a width it was 67px of a 125px header, so most of
   what the pointer offered to sort did nothing when clicked. */
th.sortable .sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

th.sortable .sort-trigger:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

th.sortable span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

th.sortable .sort-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    opacity: 0.5;
    transition: opacity 150ms ease;
}

th.sortable:hover .sort-icon {
    opacity: 0.8;
}

th.sortable.sorted .sort-icon {
    opacity: 1;
}

th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

th.sortable.sorted {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Modal scrollable improvements for dropdowns */
#bulkAssignModal .modal-body {
    overflow: visible;
    /* Allow dropdown to overflow modal-body but stay within modal-content */
}

#bulkAssignModal .modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    /* Re-enable scrolling but dropdown positioning handles overflow */
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
}

.pagination-controls .form-select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 13px;
    height: 34px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    background-color: #ffffff;
    cursor: pointer;
    padding-right: 2.25rem; /* Extra space for dropdown arrow */
    background-position: right 0.5rem center;
    background-size: 16px 12px;
}

.pagination-controls .form-select:focus {
    border-color: #283618;
    box-shadow: 0 0 0 0.2rem rgba(40, 54, 24, 0.15);
    outline: none;
}

.pagination-controls label {
    font-weight: 500;
    color: #666666;
}

/* ============================================================================ */
/* Upload Progress Steps */
/* ============================================================================ */

.upload-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    padding: 16px 0;
}

.upload-steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 300ms ease;
}

.upload-steps .step.active,
.upload-steps .step.completed {
    opacity: 1;
}

.upload-steps .step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #e5e5ef;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 300ms ease;
}

.upload-steps .step-icon .icon {
    width: 24px;
    height: 24px;
    color: #666666;
}

.upload-steps .step.active .step-icon {
    background-color: #fcbf49;
    box-shadow: 0 0 0 4px rgba(252, 191, 73, 0.2);
}

.upload-steps .step.active .step-icon .icon {
    color: #222222;
}

.upload-steps .step.completed .step-icon {
    background-color: #283618;
}

.upload-steps .step.completed .step-icon .icon {
    color: #ffffff;
}

.upload-steps .step-label {
    font-size: 12px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.upload-steps .step.active .step-label,
.upload-steps .step.completed .step-label {
    color: #222222;
}

.upload-steps .step-connector {
    width: 60px;
    height: 2px;
    background-color: #d4d4d4;
    margin: 0 8px;
    margin-bottom: 24px;
    transition: background-color 300ms ease;
}

.upload-steps .step-connector.completed {
    background-color: #283618;
}

/* ============================================================================ */
/* Confidence Score Badges */
/* ============================================================================ */

.confidence-badge {
    font-weight: 600;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
}

.confidence-high {
    background-color: rgba(40, 54, 24, 0.15);
    color: #1a3d1a;
}

.confidence-medium {
    background-color: rgba(252, 191, 73, 0.25);
    color: #8a6914;
}

.confidence-low {
    background-color: rgba(220, 53, 69, 0.15);
    color: #721c24;
}

/* ============================================================================ */
/* Bank Records Page */
/* ============================================================================ */

.records-filters {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 20px;
}

.records-filters .form-label {
    font-size: 12px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.records-table {
    font-size: 14px;
}

.records-table .description-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-actions {
    background-color: rgba(252, 191, 73, 0.1);
    border: 1px solid #fcbf49;
    border-radius: 6px;
    padding: 12px 16px;
}

.loading-state {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pagination-container {
    border-top: 1px solid #d4d4d4;
    padding-top: 16px;
}

.pagination-info {
    font-size: 13px;
    color: #666666;
}

.pagination .page-link {
    color: #283618;
    border-color: #d4d4d4;
    padding: 6px 12px;
    font-size: 13px;
}

.pagination .page-item.active .page-link {
    background-color: #283618;
    border-color: #283618;
    color: #ffffff;
}

.pagination .page-item.disabled .page-link {
    color: #999999;
}

.pagination .page-link:hover {
    background-color: rgba(40, 54, 24, 0.08);
    border-color: #283618;
}

/* Header actions */
.header-actions {
    display: flex;
    gap: 8px;
}

.header-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-actions .btn .icon {
    width: 14px;
    height: 14px;
}

/* ============================================================================
   Upload Page - Inline Records Editing
   ============================================================================ */

/* Inline Records Section */
.inline-records-section {
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    padding: 20px;
}

.inline-records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.inline-records-header h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #283618;
    margin: 0;
}

.inline-records-header h5 .icon {
    width: 20px;
    height: 20px;
    color: #283618;
}

.inline-records-header .record-count {
    font-size: 13px;
    color: #666666;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-group-search {
    flex: 1;
    max-width: 400px;
}

.filter-bar .form-control {
    font-size: 13px;
    padding: 8px 12px;
}

/* Inline Records Table */
#inlineRecordsTable {
    font-size: 13px;
}

#inlineRecordsTable thead th {
    font-size: 12px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 12px 16px;
    white-space: nowrap;
}

#inlineRecordsTable .sortable-header {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

#inlineRecordsTable .sortable-header:hover {
    color: #283618;
}

#inlineRecordsTable .sortable-header .sort-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity 0.2s;
}

#inlineRecordsTable .sortable-header:hover .sort-icon {
    opacity: 1;
}

#inlineRecordsTable .sortable-header.sort-asc .sort-icon,
#inlineRecordsTable .sortable-header.sort-desc .sort-icon {
    opacity: 1;
    color: #283618;
}

#inlineRecordsTable tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}

#inlineRecordsTable .description-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editable Cell Styling */
.editable-cell {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.editable-cell:hover {
    background-color: rgba(252, 191, 73, 0.08);
}

.editable-cell.editing {
    background-color: rgba(40, 54, 24, 0.04);
}

.editable-cell .cell-value {
    display: block;
}

/* Account Select Button (inside editable cell) */
.account-select-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: border-color 0.2s;
}

.account-select-btn:hover {
    border-color: #283618;
}

.account-select-btn .select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions Column */
.actions-col {
    width: 100px;
    text-align: center;
    white-space: nowrap;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    background: none;
    border: 1px solid transparent;
    color: #666666;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-icon:hover {
    background-color: rgba(40, 54, 24, 0.08);
    border-color: #d4d4d4;
    color: #283618;
}

.btn-icon.btn-success {
    background-color: #283618;
    border-color: #283618;
    color: #ffffff;
}

.btn-icon.btn-success:hover {
    background-color: #1a2410;
}

/* Edit Row Styling */
#inlineRecordsTable tr.editing {
    background-color: rgba(252, 191, 73, 0.08);
}

#inlineRecordsTable tr.saving {
    opacity: 0.6;
    pointer-events: none;
}

/* Account Combobox (account_combobox.js) — one picker for every account field */
.account-combobox {
    position: fixed;
    z-index: 9999;
    display: none;
    flex-direction: column;
    min-width: 280px;
    max-width: 400px;
    max-height: calc(100vh - 16px);
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.account-combobox.show {
    display: flex;
}

.account-combobox__search {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.account-combobox__search:focus {
    outline: none;
    border-bottom-color: #283618;
    box-shadow: inset 0 -2px 0 #283618;
}

.account-combobox__list {
    flex: 1;
    min-height: 0;
    max-height: 250px;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
}

.account-combobox__option {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}

.account-combobox__option:hover {
    background-color: rgba(40, 54, 24, 0.06);
}

/* The active option is the one Enter would take, so it has to read as chosen
   rather than merely hovered. */
.account-combobox__option[aria-selected="true"] {
    background-color: rgba(40, 54, 24, 0.12);
    font-weight: 600;
}

.account-combobox__no {
    min-width: 48px;
    font-family: monospace;
    font-weight: 600;
    color: #283618;
}

.account-combobox__name {
    overflow: hidden;
    color: #444444;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-combobox__status {
    display: none;
    margin: 0;
    padding: 12px;
    color: #999999;
    font-size: 13px;
    text-align: center;
}

/* Read when the row is saved, so it sits with the account it qualifies */
.apply-to-matching {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    color: #666666;
    font-size: 12px;
    cursor: pointer;
}

.apply-to-matching input[type="checkbox"] {
    accent-color: #283618;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pagination-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-label {
    font-size: 13px;
    color: #666666;
    white-space: nowrap;
}

.pagination-left select {
    width: auto;
    padding: 4px 8px;
    font-size: 13px;
}

.pagination-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-controls .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
}

.pagination-controls .pagination-info {
    font-size: 13px;
    color: #666666;
}

/* Alert Container (positioned at top of page) */
.alert-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
}

.alert-container .alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease;
    transition: opacity 0.3s ease;
}

/* Confidence Badge Variations */
.confidence-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.confidence-high {
    background-color: rgba(40, 54, 24, 0.12);
    color: #283618;
}

.confidence-medium {
    background-color: rgba(252, 191, 73, 0.15);
    color: #8b6914;
}

.confidence-low {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Spinner for loading states */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #f0f0f0;
    border-top-color: #283618;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Loading Row */
.loading-row td {
    text-align: center;
    padding: 32px 16px !important;
}

/* Empty State in inline records */
#inlineEmptyState {
    padding: 32px;
    text-align: center;
    background-color: #f9fafb;
    border-radius: 8px;
}

#inlineEmptyState .icon {
    color: #b8b8b8;
    margin-bottom: 12px;
}

#inlineEmptyState h3 {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 8px;
}

#inlineEmptyState .text-muted {
    font-size: 13px;
}

/* Bank Selection Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.modal-overlay .modal-content {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    max-width: 90vw;
    animation: modalFadeIn 0.2s ease-out;
}

.modal-overlay .modal-sm {
    width: 400px;
}

.modal-overlay .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #d4d4d4;
    background: linear-gradient(to right, #f0f0f8, #ffffff);
}

.modal-overlay .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #222222;
}

.modal-overlay .modal-body {
    padding: 24px;
}

.modal-overlay .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #d4d4d4;
    background-color: #e5e5ef;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.konto-cell {
    padding: 2px 6px;
    background: none;
    border: none;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 150ms ease;
}

.konto-cell:hover {
    background: rgba(40, 54, 24, 0.08);
}

.konto-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #283618;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1300;
}

/* Written by renderTablePagination in ui.js. It sat in automatization.css while
   that page was the only caller, with a note to move it here when a second one
   adopted the helper; the DATEV preview is that second one. Not `.pagination` --
   Bootstrap owns that name and brings its own layout, which is how `.toast` came
   to be invisible (#135). */
.table-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.table-pagination__gap,
.table-pagination__status {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.table-pagination__status {
    margin-left: 12px;
}

/* Both footers already space their row; the margin above is for a pagination
   sitting under a table, and in a footer it only drops the buttons out of line
   with the count beside them. */
.preview-footer .table-pagination,
.datev-preview-footer .table-pagination {
    margin-top: 0;
}