/* FinTrack - Cool Professional Theme */
/* Uses Bootstrap 5 utilities where possible, custom CSS only for gaps */

:root {
    /* Cool color palette - blues, greens, teals */
    --ft-primary: #2563eb;        /* Vibrant blue */
    --ft-secondary: #0d9488;      /* Teal */
    --ft-accent: #10b981;         /* Emerald green */
    --ft-success: #22c55e;        /* Green */
    --ft-info: #06b6d4;           /* Cyan */
    --ft-warning: #f59e0b;        /* Amber */
    --ft-danger: #ef4444;         /* Red */
    --ft-background: #f8fafc;     /* Slate 50 */
    --ft-surface: #ffffff;        /* White */
    --ft-dark: #1e293b;           /* Slate 800 */
    --ft-muted: #64748b;          /* Slate 500 */
    
    /* Bootstrap overrides */
    --bs-primary: var(--ft-primary);
    --bs-secondary: var(--ft-secondary);
    --bs-success: var(--ft-success);
    --bs-info: var(--ft-info);
    --bs-body-bg: var(--ft-background);
    --bs-body-color: var(--ft-dark);
}

/* Body */
body {
    background-color: var(--ft-background);
}

/* Navbar - cool gradient with fish background */
.fintrack-navbar {
    background: linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-secondary) 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible; /* Allow dropdowns to overflow */
}

.fintrack-navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/branding/fish-background-white.svg');
    background-size: 500px; /* Larger = bigger fish/bubbles visible */
    background-position: left top;
    background-repeat: repeat;
    pointer-events: none;
    opacity: 0.25; /* Subtler so labels are readable */
}

.fintrack-navbar > * {
    position: relative;
    z-index: 1;
}

/* Ensure navbar text is white and readable */
.fintrack-navbar .nav-link,
.fintrack-navbar .navbar-brand,
.fintrack-navbar .dropdown-toggle {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fintrack-navbar .nav-link:hover,
.fintrack-navbar .dropdown-toggle:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fintrack-navbar .navbar-brand {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Fix dropdown menus not showing */
.fintrack-navbar .dropdown-menu {
    z-index: 1050;
}

/* App container - simple flexbox layout */
.app-container {
    display: flex;
    /* 100dvh tracks dynamic viewport (mobile URL bar retract). */
    min-height: calc(100dvh - 56px);
}

/* Sidebar - fixed width with fish background */
.sidebar {
    width: 200px;
    flex-shrink: 0;
    background-color: #e8f0f8; /* Pale steel blue base */
    border-right: 1px solid var(--bs-border-color);
    position: relative;
    overflow: hidden;
}

/* Main content - fills remaining space */
.app-main {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
    padding: 1.5rem;
    position: relative;
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/branding/fish-background.svg');
    background-size: 500px;
    background-position: top left;
    background-repeat: repeat;
    pointer-events: none;
    /* Lighter blue tint */
    filter: sepia(1) saturate(1.5) hue-rotate(200deg) brightness(0.85);
    opacity: 0.4;
}

.sidebar > * {
    position: relative;
    z-index: 1;
}

/* Make sidebar accordion/buttons semi-transparent to show fish but keep labels readable */
.sidebar .accordion-item,
.sidebar .accordion-button,
.sidebar .accordion-collapse {
    background-color: transparent !important;
}

.sidebar .accordion-button {
    font-weight: 600;
    color: var(--ft-dark) !important;
}

.sidebar .btn-group-vertical {
    background-color: transparent;
}

/* Ensure sidebar button labels are readable */
.sidebar .btn {
    font-weight: 500;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Main content area - fish background */
.app-main::before {
    content: '';
    position: fixed;
    top: 56px; /* Below navbar */
    left: 200px; /* After sidebar */
    right: 0;
    bottom: 0;
    background-image: url('../img/branding/fish-background.svg');
    background-size: 1000px;
    background-position: center;
    background-repeat: repeat;
    pointer-events: none;
    z-index: -1;
    /* Blue-tinted fish */
    filter: sepia(1) saturate(2) hue-rotate(200deg) brightness(0.6);
    opacity: 0.5;
}

.sidebar .nav-link {
    color: var(--ft-dark);
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    margin: 0.125rem 0.5rem;
    transition: background-color 0.15s ease;
}

.sidebar .nav-link:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--ft-primary);
}

.sidebar .nav-link.active {
    background-color: var(--ft-primary);
    color: white;
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ft-dark);
}

.sidebar-subheading {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: var(--ft-muted);
    opacity: 0.8;
}

/* Sidebar accordion - supergroup headers */
.sidebar .accordion-button {
    background-color: transparent;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ft-dark);
    padding: 0.5rem 0.75rem;
    box-shadow: none;
}

/* Personal header - clickable link + separate toggle */
.sidebar-heading-link {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ft-dark);
}

.sidebar-heading-link:hover {
    color: var(--ft-primary);
}

.sidebar-heading-toggle {
    width: auto;
    flex-shrink: 0;
    background-color: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ft-dark);
    box-shadow: none;
}

.sidebar-heading-toggle::after {
    margin-left: 0;
}

/* Sidebar buttons - larger font, better readability */
.sidebar-btn {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-btn .sidebar-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Business entity buttons - two-line format */
.sidebar-btn-business {
    padding: 0.375rem 0.75rem;
    white-space: normal;
}

.sidebar-business-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
}

.sidebar-type-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    opacity: 0.7;
}

.sidebar-entity-name {
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Allow sidebar column to be slightly wider on larger screens */
@media (min-width: 992px) {
    .sidebar {
        max-width: 200px;
    }
}

.sidebar .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--ft-muted);
}

.sidebar .accordion-button::after {
    width: 0.75rem;
    height: 0.75rem;
    background-size: 0.75rem;
}

/* Gap between supergroup header and group list */
.sidebar .accordion-collapse .btn-group-vertical {
    margin-top: 0.25rem;
}

/* Sidebar module header - shown in non-dashboard modules */
.sidebar-module-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.module-icon-sm {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-section-label {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

/* Module header - main content area */
.module-header {
    flex-shrink: 0;
}

.module-icon-wrapper {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Cards - clean and minimal */
.card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: var(--ft-surface);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
}

/* Tables */
.table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--ft-muted);
}

/* Status Badges - using Bootstrap colors */
.badge-pending { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.badge-provisional { background-color: var(--bs-info-bg-subtle) !important; color: var(--bs-info-text-emphasis) !important; }
.badge-actual { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary-text-emphasis) !important; }
.badge-complete { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }

/* Buttons - use Bootstrap's btn-* classes, these are overrides */
.btn-primary {
    --bs-btn-bg: var(--ft-primary);
    --bs-btn-border-color: var(--ft-primary);
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
}

.btn-success {
    --bs-btn-bg: var(--ft-success);
    --bs-btn-border-color: var(--ft-success);
}

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

/* =============================================================================
   Responsive Tables - Hide columns on narrow screens, NEVER use horizontal scroll
   ============================================================================= */
@media (max-width: 768px) {
    /* Hide Type column on tablets and smaller */
    .expense-table th:nth-child(2),
    .expense-table td:nth-child(2),
    .table .col-type {
        display: none;
    }
}

@media (max-width: 576px) {
    /* Hide more columns on mobile */
    .expense-table th:nth-child(3),
    .expense-table td:nth-child(3) {
        display: none;
    }
}

/* Dashboard Stats */
.stat-card {
    text-align: center;
    padding: 1.5rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ft-primary);
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--ft-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* HTMX Loading Indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Expense row editable cells - click to inline edit */
.expense-editable-cell {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.expense-editable-cell:hover {
    background-color: var(--bs-warning-bg-subtle) !important;
}

/* Tracker row backgrounds - type-tinted rows with raised alpha for clarity */
.tracker-expense-row,
.tracker-expense-row td {
    background-color: rgba(var(--bs-danger-rgb), 0.10) !important;
}
.tracker-income-row,
.tracker-income-row td {
    background-color: rgba(var(--bs-success-rgb), 0.10) !important;
}
.tracker-refund-row,
.tracker-refund-row td {
    background-color: rgba(var(--bs-warning-rgb), 0.08) !important;
}
.tracker-transfer-debit-row,
.tracker-transfer-debit-row td {
    background-color: rgba(var(--bs-danger-rgb), 0.08) !important;
}
.tracker-transfer-credit-row,
.tracker-transfer-credit-row td {
    background-color: rgba(var(--bs-success-rgb), 0.08) !important;
}
.tracker-transfer-accounts-row,
.tracker-transfer-accounts-row td {
    background-color: rgba(var(--bs-info-rgb), 0.08) !important;
}
.tracker-transfer-groups-row,
.tracker-transfer-groups-row td {
    background-color: rgba(var(--bs-warning-rgb), 0.08) !important;
}

/* Tracker UI state backgrounds (non-domain states: selected/pending/neutral) */
.tracker-state-balanced,
.tracker-state-balanced td {
    background-color: rgba(var(--bs-success-rgb), 0.06) !important;
}

.tracker-state-pending,
.tracker-state-pending td {
    background-color: rgba(var(--bs-warning-rgb), 0.06) !important;
}

.tracker-state-neutral,
.tracker-state-neutral td {
    background-color: rgba(var(--bs-secondary-rgb), 0.05) !important;
}

.tracker-validation-match {
    color: var(--bs-success-text-emphasis) !important;
}

.tracker-validation-mismatch {
    color: var(--bs-danger-text-emphasis) !important;
}

.tracker-watch-active {
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
    border-color: var(--bs-primary) !important;
}
.flip-h {
    transform: scaleX(-1);
}
.flip-v {
    transform: scaleY(-1);
}
.flip-hv {
    transform: scale(-1, -1);
}

/* Tracker expense amount - much darker red, still recognizably red */
.tracker-expense-row .text-danger-emphasis {
    color: #6d0f24 !important;
}

/* Amount formatting - tabular-nums for decimal alignment in columns */
.amount {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Tracker amount column - right-aligned, overflow spills LEFT into Description (not right) */
#cashflow-list td:nth-child(3),
#expense-list td:nth-child(3) {
    text-align: right !important;  /* physical right - end would flip in rtl */
    overflow: visible;
    direction: rtl;  /* overflow extends leftward into Description column */
}
#cashflow-list td:nth-child(3) .amount,
#expense-list td:nth-child(3) .amount {
    direction: ltr;  /* keep number digit order correct */
    display: inline-block;
}

.amount.positive { color: var(--ft-success); }
.amount.negative { color: var(--ft-danger); }

/* Modal styling */
.modal-content {
    border: none;
    border-radius: 0.5rem;
}

/* Calendar Grid - flexible columns that squeeze on smaller screens */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* minmax(0,1fr) allows columns to shrink */
    gap: 2px;
}

.calendar-header {
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.25rem;
    min-width: 0; /* Allow header to shrink */
}

.calendar-day {
    min-height: 80px;
    min-width: 0; /* Allow cells to shrink - prevents column squishing */
    background-color: var(--ft-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    padding: 0.25rem;
    padding-bottom: 1.25rem; /* Space for day number at bottom-right */
    position: relative;
}

@media (max-width: 575.98px) {
    .calendar-day { min-height: 60px; }
}

.calendar-day-empty {
    background-color: var(--bs-tertiary-bg);
    border-color: transparent;
}

.calendar-day-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ft-muted);
    position: absolute;
    bottom: 0.25rem;
    right: 0.5rem;
}

/* Calendar items - type-based backgrounds (shared with Porter/Tracker, 0.06 alpha) */
.calendar-item {
    font-size: 0.625rem;
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    min-width: 0; /* Allow flex child to shrink */
}

.calendar-item-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-item-amount {
    flex-shrink: 0; /* Keep amount visible */
}

.calendar-expense { background-color: rgba(var(--bs-danger-rgb), 0.06); }
.calendar-income { background-color: rgba(var(--bs-success-rgb), 0.06); }
.calendar-transfer { background-color: rgba(var(--bs-info-rgb), 0.06); }
.calendar-refund { background-color: rgba(var(--bs-warning-rgb), 0.06); }

/* Lowered-alpha tints for subtle full-row highlights */
.bg-danger-tint { background-color: rgba(var(--bs-danger-rgb), 0.06) !important; }
.bg-success-tint { background-color: rgba(var(--bs-success-rgb), 0.06) !important; }
.bg-warning-tint { background-color: rgba(var(--bs-warning-rgb), 0.06) !important; }
.bg-info-tint { background-color: rgba(var(--bs-info-rgb), 0.06) !important; }
.bg-primary-tint { background-color: rgba(var(--bs-primary-rgb), 0.06) !important; }
.bg-secondary-tint { background-color: rgba(var(--bs-secondary-rgb), 0.06) !important; }

.calendar-item:hover {
    filter: brightness(0.95);
}

.calendar-item i {
    font-size: 0.5625rem;
    flex-shrink: 0;
}

/* Table with fixed layout for proper truncation */
.table-layout-fixed {
    table-layout: fixed;
    width: 100%;
}

.table-layout-fixed td.text-truncate,
.table-layout-fixed th.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cashflow chart - reduced height */
#cashflow-chart-container {
    height: 150px !important;
    max-height: 150px !important;
}

/* Budget estimate indicator - dark yellow question mark */
.budget-indicator {
    color: #b45309; /* amber-700 - dark yellow/orange */
}

/* Transaction group separator - dark top border on first row cells */
.txn-border-top {
    border-top: 2px solid #212529 !important;
}

/* Transaction row top border - separates each transaction visually */
/* Must use border-collapse: separate to override Bootstrap's collapsed borders */
#transactions-list table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.transaction > td {
    border-top: 2px solid #212529;
}

/* =====================================================
   Transaction Row States - Reconciliation Preview
   ===================================================== */

/* Transaction row status is indicated by match row background colors, not row styling */

/* Subtle debit/credit background colors for transaction rows */
tr.transaction.txn-debit > td {
    background-color: rgba(220, 53, 69, 0.06);
}

tr.transaction.txn-credit > td {
    background-color: rgba(25, 135, 84, 0.06);
}

/* =============================================================================
   Porter Page Styles
   ============================================================================= */

/* Transaction group separator - dark top border on first row of each group */
/* Using high specificity to override Bootstrap table styles */
table.table tbody.porter-txn-group > tr:first-child > td,
table.table tfoot.porter-txn-group > tr:first-child > td {
    border-top: 2px solid #212529 !important;
}

/* Single-row match selector - radio button toggle styling */
.transfer-account-selector label,
.cc-payment-selector label {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.transfer-account-selector label:has(input:checked),
.cc-payment-selector label:has(input:checked) {
    /* Override to solid success when checked */
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: white !important;
}
.transfer-account-selector label:has(input:checked) .badge,
.cc-payment-selector label:has(input:checked) .badge {
    background-color: rgba(255,255,255,0.9) !important;
    color: var(--bs-success) !important;
}

/* Porter button styling */
.porter-txn-btn {
    background-color: transparent;
    border: none;
}
.porter-txn-btn:hover {
    transform: scale(1.15);
    transition: transform 0.1s ease-in-out;
}
.porter-txn-btn:disabled {
    /* WCAG: disabled control must remain perceivable. 0.5 is the floor. */
    opacity: 0.5;
    cursor: not-allowed;
}
.porter-txn-btn:disabled:hover {
    transform: none;
}

/* Collapse chevron: rotates 90° when the sibling collapse is shown */
.collapse-chevron {
    transition: transform 0.2s ease;
}
[data-bs-toggle="collapse"]:not(.collapsed) .collapse-chevron {
    transform: rotate(90deg);
}

/* Porter type section: collapsed = single row (header only); chevron rotates when expanded */
/* scroll-margin-top: the type-count strip (spec-fintrack-porter-type-count-strip)
   anchor-jumps here; offset the landing point so a sticky navbar never covers
   the header the operator just jumped to. */
.porter-type-header {
    line-height: 1.25;
    min-height: 0;
    scroll-margin-top: 4.5rem;
}

/* Type-count strip: clicking a chip anchor-jumps to #porter-type-header-{key}.
   Smooth-scroll the document via CSS (no JS handler). */
html {
    scroll-behavior: smooth;
}
#porter-type-count-strip .character-icon,
#porter-type-count-strip svg,
#porter-type-count-strip img {
    width: 1rem;
    height: 1rem;
}
[data-bs-toggle="collapse"][data-ft-collapse-persist^="porter-"]:not(.collapsed) i.fa-chevron-down {
    transform: rotate(180deg);
}

/* Important button styling - active state, not dimmed */
.important-btn {
    background-color: transparent;
    border: none;
}
.important-btn:hover {
    transform: scale(1.1);
}

/* Allow text truncation in flex containers */
.min-width-0 {
    min-width: 0;
}


/* ImportAnt rotation for transaction direction */
/* Debit (money out) = points right (no rotation needed, icon is pre-rotated) */
.important-debit {
    display: inline-block;
}
/* Credit (money in) = points left (flip horizontally) */
.important-credit {
    display: inline-block;
    transform: scaleX(-1);
}

/* =============================================================================
   Porter Navigation Header
   ============================================================================= */

/* Account badge cards in Porter navigation */
.porter-account-badge {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.125);
    min-width: 120px;
    transition: all 0.15s ease-in-out;
}
.porter-account-badge:hover {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: var(--bs-primary);
    transform: translateY(-1px);
}
.porter-account-badge.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}
.porter-account-badge.active .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}
.porter-account-badge.active .text-warning {
    color: #ffc107 !important;
}
.porter-account-badge.active .text-success {
    color: #90EE90 !important;
}

.porter-account-badge .badge-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}
.porter-account-badge .account-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.porter-account-badge .unreconciled-indicator {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.porter-account-badge .badge-stats {
    font-size: 0.75rem;
}

/* Transfer Account Badge Picker (horizontal radio badges in match rows) */
/* Uses Bootstrap btn-check pattern - label wraps hidden radio input */
.transfer-badge-option {
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.transfer-badge-option:has(input:checked) {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: white !important;
}
.transfer-badge-option:has(input:checked) .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}
.transfer-badge-option:hover:not(:has(input:checked)) {
    background-color: var(--bs-light);
    border-color: var(--bs-info);
}

/* =============================================================================
   Unified Dropzone (inline style)
   ============================================================================= */

/* Porter Summary Cards (transparent with thin borders) */
.porter-summary-card {
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.porter-summary-card .card-body {
    background-color: transparent;
}

/* Porter Accounts Table (pivoted layout) */
.porter-accounts-table {
    table-layout: auto;
    background-color: transparent;
}
.porter-accounts-table th,
.porter-accounts-table td {
    vertical-align: middle;
    white-space: nowrap;
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.08);
}
.porter-accounts-table th:first-child,
.porter-accounts-table td:first-child {
    width: 70px;
    min-width: 70px;
}

/* Porter Navigation Buttons (compact for table headers) */
.porter-nav-btn {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--bs-body-color);
    transition: all 0.15s ease-in-out;
    white-space: nowrap;
}
.porter-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.porter-nav-btn.active {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 600;
}

/* Shared ripple animation for dropzone water effects */
@keyframes ripple {
    from { background-position: 0 0; }
    to { background-position: 60px 0; }
}

/* Title bar dropzone (swimming pool effect) */
.dropzone-title {
    padding: 0.375rem 1rem;
    border: 2px solid var(--bs-dark);
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #e0f4ff 0%, #b8e6ff 50%, #7dd3fc 100%);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
/* Water ripple effect */
.dropzone-title::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.5) 10px,
        rgba(255, 255, 255, 0.5) 20px
    );
    animation: ripple 6s linear infinite;
    pointer-events: none;
}
.dropzone-title:hover {
    border-color: var(--bs-primary);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}
.dropzone-title.drag-over {
    border-color: var(--bs-primary);
    background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 50%, #0284c7 100%);
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}
.dropzone-title .dropzone-text {
    color: #0369a1;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.dropzone-title i {
    position: relative;
    z-index: 1;
}

/* Compact dropzone variant (for headers) */
.dropzone-title.dropzone-compact {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}
.dropzone-title.dropzone-compact:hover {
    transform: scale(1.01);
}

/* =============================================================================
   Custom Icon Dropdown (Account Group Selector)
   ============================================================================= */

.account-group-dropdown .dropdown-toggle {
    background: var(--ft-surface);
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    min-height: 42px;
}

.account-group-dropdown .dropdown-toggle:hover {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.account-group-dropdown .dropdown-toggle:focus {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.account-group-dropdown .dropdown-toggle::after {
    transition: transform 0.2s ease;
}

.account-group-dropdown .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.account-group-dropdown .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    animation: dropdownFadeIn 0.15s ease-out;
    /* No scrollbar - dropdown auto-positions via Bootstrap's Popper.js */
    overflow: visible;
}

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

.account-group-dropdown .dropdown-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ft-muted);
    padding: 0.5rem 0.75rem 0.25rem;
}

.account-group-dropdown .dropdown-item {
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.15s ease;
    font-weight: 500;
}

.account-group-dropdown .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(13, 148, 136, 0.08) 100%);
    transform: translateX(2px);
}

.account-group-dropdown .dropdown-item.active {
    background: linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-secondary) 100%);
    color: white;
}

.account-group-dropdown .dropdown-item.active:hover {
    transform: translateX(2px);
}

.account-group-dropdown .dropdown-item img {
    transition: transform 0.15s ease;
}

.account-group-dropdown .dropdown-item:hover img {
    transform: scale(1.1);
}

.account-group-dropdown .dropdown-divider {
    margin: 0.25rem 0.5rem;
    opacity: 0.1;
}

.account-group-dropdown .selected-group-display img {
    margin-right: 0.5rem;
}

/* Group badge icons - ensure consistent sizing */
.group-badge-icon {
    object-fit: cover;
    flex-shrink: 0;
}

/* =============================================================================
   Generic Icon Select Dropdown (DRY component for all icon-enabled selects)
   ============================================================================= */

.icon-select-dropdown .dropdown-toggle {
    background: var(--ft-surface);
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.icon-select-dropdown .dropdown-toggle:hover,
.icon-select-dropdown .dropdown-toggle:focus {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
    color: inherit;
    background-color: var(--ft-surface);
}

.icon-select-dropdown .dropdown-toggle::after {
    transition: transform 0.2s ease;
}

.icon-select-dropdown .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.icon-select-dropdown .icon-select-menu {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    max-width: 90vw;
    /* No overflow:auto here — would clip the position:absolute submenu
       on parent rows (per CSS spec, setting overflow on one axis forces
       the other off `visible`). Tiered submenus must escape this box. */
    overflow: visible;
}

/* Multi-column grid layout for icon options — applied to <ul> so each <li>
   option is a direct grid item (Bootstrap dropdown-menu wants <li> children;
   the previous wrapper-<li> with display:grid hid options in some browsers).

   Columns: auto-fit by min cell width so longer option lists use 3-4 columns
   instead of overflowing the viewport at 2 columns.

   Position: always drop BELOW the trigger button (top of menu = bottom of
   button). data-bs-display="static" on the toggle disables Popper's auto-flip
   so the menu never covers the active row. See
   spec-stained-glass-dropdown-escape-clipping RULES 4.5 + 5. */
.icon-select-dropdown .icon-select-menu.show {
    display: grid;
    /* Wider min so longer labels (Computer, Professional Services,
       Internet/Phone) fit without truncation. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.25rem;
    min-width: 380px;
    max-width: min(820px, 94vw);
    top: 100%;
    bottom: auto;
    transform: none;
}

/* Viewport flip-up (spec-fintrack-refund-vendor-entry-and-dropdown-viewport-fit
   PART A). data-bs-display="static" pins the menu open DOWNWARD (top:100%),
   which disables Popper's auto-flip — so near the bottom of a long Porter
   statement the tiered category menu ran off the bottom of the viewport. JS
   (icon-select.js handleDropdownShown) measures the menu after it is shown and,
   when the full menu would overflow the viewport bottom AND there is more room
   above the button, adds .icon-select-menu--flip-up. We then anchor the menu's
   BOTTOM to the top of the button (bottom:100%) so the whole menu stays
   on-screen. The submenu flyout (left/right, JS submenu-flip-left) and the
   overflow:visible escape are untouched — this only swaps the vertical anchor. */
.icon-select-dropdown .icon-select-menu.show.icon-select-menu--flip-up {
    top: auto;
    bottom: 100%;
    margin-bottom: 0.125rem;
}

/* Transaction-type recharacterize menu (includes/fields/transaction_type_select.html):
   a SHORT type list (Transfer/Expense/Income/Refund/CC Payment/Split) anchored in
   the narrow right-side status cell. The shared 380px+ multi-column grid above is
   built for the LARGE expense/income icon pickers and runs off the right of the
   viewport here. Scope this menu to a single content-sized vertical column so all
   options stay on-screen. Paired with dropdown-menu-end on the <ul> to align the
   menu to the cell's right edge (opens toward the viewport).
   See spec-stained-glass-dropdown-escape-clipping RULES 4.5 + 5 and
   spec-fintrack-porter-txn-type-recharacterize-menu-single-column. */
.icon-select-dropdown .icon-select-menu--list.show {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 280px;
}

/* Force option labels to show in full — wrap to a second line rather than
   ellipsis-clip. Overrides Bootstrap's white-space:nowrap on .dropdown-item
   and any inherited overflow:hidden from ancestors. */
.icon-select-dropdown .icon-select-menu.show .dropdown-item,
.icon-select-dropdown .icon-select-menu.show .dropdown-item > span {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
    line-height: 1.2;
}

/* Rows that span the whole grid (search input, no-results message) */
.icon-select-dropdown .icon-select-menu.show .icon-select-grid-full {
    grid-column: 1 / -1;
}

/* Legacy class kept for any callers still using the old wrapper-<li> shape */
.icon-select-dropdown .icon-select-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
    padding: 0.25rem;
}

/* Single column for grouped dropdowns (has headers) */
.icon-select-dropdown .icon-select-menu.show:has(.dropdown-header) {
    display: flex;
    flex-direction: column;
    max-width: 280px;
}

.icon-select-dropdown .dropdown-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ft-muted);
    padding: 0.5rem 0.75rem 0.25rem;
}

.icon-select-dropdown .dropdown-item {
    border-radius: 0.375rem;
    padding: 0.5rem 0.625rem;
    transition: all 0.15s ease;
    font-weight: 500;
    font-size: 0.85rem;
    background: var(--bs-gray-100, #f8f9fa);
    border: 1px solid transparent;
}

.icon-select-dropdown .dropdown-item:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(13, 148, 136, 0.12) 100%);
    border-color: rgba(37, 99, 235, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.icon-select-dropdown .dropdown-item.active {
    background: linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-secondary) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.icon-select-dropdown .dropdown-item.active:hover {
    background: linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-secondary) 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);
}

.icon-select-dropdown .dropdown-item img,
.icon-select-dropdown .dropdown-item i {
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.icon-select-dropdown .dropdown-item:hover img,
.icon-select-dropdown .dropdown-item:hover i {
    transform: scale(1.1);
}

.icon-select-dropdown .dropdown-divider {
    margin: 0.25rem 0.5rem;
    opacity: 0.1;
}

.icon-select-dropdown .selected-display img,
.icon-select-dropdown .selected-display i {
    flex-shrink: 0;
}

/* Search input in icon select dropdown */
.icon-select-dropdown .icon-select-search-container {
    position: sticky;
    top: 0;
    background: var(--bs-dropdown-bg, #fff);
    z-index: 1;
}

.icon-select-dropdown .icon-select-search {
    font-size: 0.8rem;
}

.icon-select-dropdown .icon-select-search:focus {
    border-color: var(--ft-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Tiered icon-select — parent rows with nested submenu.
   spec-fintrack-expense-type-hierarchy Pass C: top-level parents reveal a
   right-side submenu of children on click. Standalone leaves commit directly. */
.icon-select-menu .icon-select-option.has-submenu {
    position: relative;
}
.icon-select-menu .icon-select-submenu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 2px;
    /* Sized to fit full child names without truncation; max-width keeps
       it from running wild for unusually long labels. */
    min-width: 220px;
    max-width: 340px;
    width: max-content;
    background: var(--bs-dropdown-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    border-radius: 0.375rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    list-style: none;
    z-index: 1070;
    max-height: 60vh;
    overflow-y: auto;
    /* Items wrap inside the submenu rather than getting clipped. */
    white-space: normal;
}
.icon-select-menu .icon-select-submenu .dropdown-item {
    white-space: normal;
}
.icon-select-menu .icon-select-submenu.submenu-open {
    display: block;
}
/* When opening on the right would overflow the viewport, JS adds
   .submenu-flip-left and the submenu opens to the LEFT of the parent row. */
.icon-select-menu .icon-select-submenu.submenu-flip-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
}
.icon-select-menu .icon-select-parent.parent-open {
    background: rgba(37, 99, 235, 0.08);
}
.icon-select-menu .icon-select-parent .fa-chevron-right {
    transition: transform 0.15s ease;
}
.icon-select-menu .icon-select-parent.parent-open .fa-chevron-right {
    transform: rotate(90deg);
}
@media (max-width: 576px) {
    /* On narrow viewports, stack the submenu below the parent rather than
       letting it escape the viewport horizontally. */
    .icon-select-menu .icon-select-submenu {
        position: static;
        margin-left: 1rem;
        box-shadow: none;
        border-left: 2px solid rgba(37, 99, 235, 0.25);
        border-radius: 0;
    }
}

/* Locked expense type display (when match is selected) */
.expense-type-locked {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.expense-type-locked img {
    width: 20px;
    height: 20px;
}

.expense-type-locked-label {
    font-weight: 500;
    color: var(--bs-secondary, #6c757d);
}

/* Ensure icon select dropdowns appear above table rows and other dropdowns */
.icon-select-dropdown {
    position: relative;
}

/* =============================================================================
   Porter Matcher Row - Transaction matching controls
   Layout: [ExpenseType] [note...] [🔍] [☐ All]
   ============================================================================= */
.porter-matcher {
    flex-wrap: nowrap;
}
.porter-matcher-type {
    flex: 0 0 auto; /* Fixed size, don't grow or shrink */
    min-width: 100px; /* Ensure enough space for icon + short name */
    max-width: 140px; /* Cap width to prevent taking too much space */
}
.porter-matcher-type .selected-display {
    /* spec-fintrack-expense-type-picker-no-truncate-full-path: show the full
       'Parent › Leaf' path — wrap in-column instead of ellipsizing. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.porter-matcher-note {
    flex: 0 1 auto; /* Can shrink if needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px; /* Limit note width */
}

/* Compact icon select - minimal styling for inline use (e.g., Porter matcher row) */
.icon-select-dropdown.icon-select-compact {
    display: inline-flex;
    max-width: 100%; /* Respect parent constraints */
}
.icon-select-dropdown.icon-select-compact .dropdown-toggle {
    background: transparent;
    border: none;
    padding: 0 0.25rem;
    box-shadow: none;
    max-width: 100%; /* Respect parent constraints */
    /* spec-fintrack-expense-type-picker-no-truncate-full-path: visible so a
       wrapped 2nd line of the Parent › Leaf path is not clipped. */
    overflow: visible;
    white-space: normal;
}
.icon-select-dropdown.icon-select-compact .dropdown-toggle:hover,
.icon-select-dropdown.icon-select-compact .dropdown-toggle:focus {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    box-shadow: none;
}
.icon-select-dropdown.icon-select-compact .selected-display {
    /* spec-fintrack-expense-type-picker-no-truncate-full-path: full path,
       wrap-to-content, no ellipsis. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* When dropdown is open, elevate the entire container above siblings */
.icon-select-dropdown:has(.icon-select-menu.show) {
    z-index: 1050;
}

.icon-select-dropdown .icon-select-menu.show {
    z-index: 1060 !important;
    position: absolute;
}

/* =============================================================================
   Porter Responsive Design - No Horizontal Scrollbars
   ============================================================================= */

/* Base responsive utilities for Porter */
#transactions-card {
    overflow: visible; /* Allow dropdowns to flow outside card boundaries */
}
#transactions-card .card-body {
    overflow: visible;
}
#transactions-list {
    /* overflow-x: clip + overflow-y: visible — `clip` blocks horizontal scroll
       WITHOUT forcing the implicit auto-conversion that `hidden` does on the
       other axis. With `hidden`, the spec converts overflow-y:visible to
       overflow-y:auto, which clipped the expense-type dropdown vertically. */
    overflow-x: clip;
    overflow-y: visible;
}
#transactions-list table {
    table-layout: fixed;
    width: 100%;
    overflow: visible;
}

/* Important help div - light brown background to match ant icon */
.important-help-bg {
    background-color: #f5e6d3 !important;
}

/* Expense Type Dropdown - ensure it appears above table rows */
.expense-type-dropdown {
    position: relative;
    z-index: 10;
}
.expense-type-dropdown .dropdown-menu.show {
    z-index: 1060 !important;
}
/* No-match form rows need visible overflow for dropdowns */
.no-match-form-row td {
    overflow: visible !important;
    position: relative;
}
/* Ensure the dropdown button has proper styling */
.expense-type-dropdown .btn {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}
.porter-col-date { /* Date column */ }
.porter-description-cell { 
    /* Description column - use table-layout: fixed behavior */
    width: 100%;
    max-width: 0; /* Forces cell to respect flex children's overflow */
}
.porter-col-actions { min-width: 40px; width: 40px; } /* Actions column - single Porter/Important button only */
.porter-status-label { /* Text labels in status badges */ }
.porter-status-icon { /* Icons that stay visible */ }
.porter-match-name { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}
.porter-form-input {
    width: 100%;
    max-width: 100%;
}
.porter-amount-cell {
    white-space: nowrap;
}

/* Match row: show amount only when checkbox/radio is selected */
.porter-amount-cell.match-amount-when-selected {
    visibility: hidden;
}
tbody tr:has(.match-checkbox:checked) .porter-amount-cell.match-amount-when-selected,
tbody tr:has(.expense-match-checkbox:checked) .porter-amount-cell.match-amount-when-selected,
tbody tr:has(.transfer-account-radio:checked) .porter-amount-cell.match-amount-when-selected {
    visibility: visible;
}

/* Date and Amount stacking for diffs */
.porter-date-stack,
.porter-amount-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
}
.porter-date-stack {
    justify-content: flex-start;
}
.porter-amount-stack {
    justify-content: flex-end;
}

/* Cross-period badge in the reconciled drawers' record-facts strip
   (was an inline style; templates-no-style-blocks) */
.badge-cross-period { font-size: 0.65rem; }

/* Diff styling - monospace, no parentheses */
.porter-date-diff,
.porter-amount-diff {
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    font-weight: 500;
}
/* UNRULED SCHEDULE DRIFT (spec-fintrack-harden-schedule-ledger-alignment-for-
   multi-tenant-before-dominic STAGE 3). A STATE on the diff badge that is
   already there, never a third number on the row -- row density T-1 ("ONE
   AMOUNT") already made T-3's expected+diff an explicit exception, and a third
   figure would fight it. The amber pill reads as "answer me" against the
   red/green the badge already carries for direction, which stays intact: the
   sign colour still says which way, the tint says nobody has ruled on it.
   Lights up ONLY when the bill's measured drift is material AND no current
   operator disposition covers that figure. */
.porter-amount-diff-residual {
    background-color: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.6);
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    font-weight: 700;
}
/* Transaction row description truncation - use inner element, not td */
#transactions-list .transaction td:nth-child(2) {
    /* Don't set overflow on td - let inner elements handle truncation */
}
#transactions-list .transaction .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Transfer match description: less stark white */
.transfer-match-description-input {
    background-color: rgba(255, 243, 205, 0.7) !important;
    border-color: rgba(253, 186, 116, 0.4) !important;
}

/* Transfer match row: seed [x] | Group: Account | Description | Amount. Partner left, one line when space. */
.transfer-match-account-desc {
    flex-wrap: nowrap;
}
.transfer-match-partner {
    flex-shrink: 0;
}

/* Cross-border amount inputs: numbers right-aligned for columnar display */
.cross-border-from-amount,
.cross-border-to-amount,
.cross-border-rate {
    text-align: right !important;
    direction: ltr;
}

/* Porter Transfer Match: Description stacks below partner at narrow widths */
@media (max-width: 1015px) {
    .transfer-match-account-desc {
        flex-wrap: wrap;
    }
    .transfer-match-account-desc .transfer-match-description-input {
        flex: 1 1 100%;
        min-width: 120px;
    }
}

/* Porter Responsive - Tablet (768px - 1106px) */
@media (max-width: 1106px) {
    /* Transaction row: narrow Status column, hide verbose text */
    .porter-status-label { display: none; }
    
    /* Match rows: constrain description width */
    .porter-match-name { max-width: 180px; }
    
    /* Score badge: hide percentage text on narrow screens */
    .porter-score-text { display: none; }
    
    /* Type badge: always show label with icon */
    
    /* No-match form: narrow inputs */
    .porter-form-input { max-width: 200px; }
    
    /* Bill It label: hide text, keep icon */
    .porter-bill-label { display: none; }
    
    /* Parson inspector: reduce padding */
    .parson-inspector { padding: 0.5rem !important; }
    .parson-inspector .badge { font-size: 0.65rem; }
}

/* Porter Responsive - Small Tablet (below 992px) */
@media (max-width: 992px) {
    /* Further narrow match names */
    .porter-match-name { max-width: 140px; }
    
    /* Narrow form inputs more */
    .porter-form-input { max-width: 160px; }
    
    /* Transaction description truncation */
    #transactions-list .transaction td:nth-child(2) {
        max-width: 200px;
    }
}

/* Porter Responsive - Narrow Tablet (below 850px) */
@media (max-width: 850px) {
    /* Date column: narrower */
    .porter-col-date { 
        width: 65px !important;
        padding-left: 0.375rem !important;
        padding-right: 0.25rem !important;
    }
    
    /* Match names much narrower */
    .porter-match-name { max-width: 120px; }
    
    /* Form inputs narrower */
    .porter-form-input { max-width: 130px; }
    
    /* Status column: narrower */
    #transactions-list th:nth-child(3),
    #transactions-list td:nth-child(3) {
        width: 120px !important;
        max-width: 120px;
    }
    
    /* Amount column: narrower */
    #transactions-list th:nth-child(4),
    #transactions-list td:nth-child(4) {
        width: 80px !important;
    }
    
    /* Hide "Bill It" label text */
    .porter-bill-label { display: none; }
    
    /* Expense Type select: more compact */
    .porter-form-input,
    #transactions-list select.form-select-sm {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Transaction description narrower */
    #transactions-list .transaction td:nth-child(2) {
        max-width: 160px;
    }
    
    /* Smaller badges */
    #transactions-list .badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.35rem;
    }
}

/* Porter Responsive - Mobile (below 768px) */
@media (max-width: 768px) {
    /* Date column: compact format, narrower */
    .porter-col-date { 
        width: 50px !important;
        font-size: 0.7rem;
        padding-left: 0.25rem !important;
        padding-right: 0.125rem !important;
    }
    
    /* Status column even narrower */
    #transactions-list th:nth-child(3),
    #transactions-list td:nth-child(3) {
        width: 100px !important;
        max-width: 100px;
    }
    
    /* Amount column narrower */
    #transactions-list th:nth-child(4),
    #transactions-list td:nth-child(4) {
        width: 70px !important;
    }
    
    /* Stack Date + Diff and Amount + Diff vertically on mobile */
    .porter-date-stack,
    .porter-amount-stack {
        flex-direction: column;
    }
    .porter-date-stack {
        align-items: flex-start;
    }
    .porter-amount-stack {
        align-items: flex-end;
    }
    
    /* Match names even narrower */
    .porter-match-name { max-width: 100px; }
    
    /* Form inputs full width on mobile */
    .porter-form-input { 
        max-width: 120px;
        font-size: 0.8rem;
    }
    
    /* Parson inspector: compact mode */
    .parson-inspector { 
        font-size: 0.7rem;
        padding: 0.375rem !important;
    }
    .parson-inspector .badge { 
        font-size: 0.6rem;
        padding: 0.15rem 0.3rem;
    }
    .parson-inspector .fw-semibold { font-size: 0.75rem; }
    
    /* Hide timing details on mobile */
    .porter-timing-details { display: none; }
    
    /* Transaction row adjustments */
    #transactions-list .transaction td {
        padding: 0.25rem 0.375rem;
    }
    #transactions-list .transaction td:nth-child(2) {
        max-width: 150px;
    }
    
    /* Status badges: icon only */
    .porter-status-badge .porter-status-label { display: none; }
    
    /* Checkbox column narrower */
    #transactions-list th:last-child,
    #transactions-list td:last-child {
        width: 30px !important;
        padding: 0.25rem !important;
    }
}

/* Character icon default sizes (SVGs have no intrinsic dimensions) */
.character-icon-sm {
    width: 24px;
    height: 24px;
}

/* Porter Responsive - Extra Small Mobile (below 576px) */
@media (max-width: 576px) {
    /* Date column: even more compact */
    .porter-col-date { 
        width: 45px !important;
        font-size: 0.65rem;
    }
    
    /* Even more compact */
    .porter-match-name { max-width: 80px; }
    .porter-form-input { max-width: 100px; }
    
    /* Hide account group badges on very small screens */
    .porter-group-badge { display: none; }
    
    /* Smaller character icons */
    .character-icon-sm {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Transaction description very compact */
    #transactions-list .transaction td:nth-child(2) {
        max-width: 120px;
    }
}

/* ============================================
   Porter Import Animations
   ============================================ */

/* Fade out animation for imported transactions */
@keyframes porter-fade-out {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    70% {
        opacity: 0.5;
        transform: translateX(10px);
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

.imported-fade-out {
    animation: porter-fade-out 0.5s ease-out forwards;
}

/* Highlight animation for newly imported rows */
@keyframes porter-highlight-new {
    0% {
        background-color: var(--bs-success-bg-subtle);
    }
    100% {
        background-color: transparent;
    }
}

.imported-row-new {
    animation: porter-highlight-new 2s ease-out forwards;
}

/* Reconciled rows: icon and its img inherit row bg (no white box) */
.imported-row .imported-row-icon,
.imported-row .imported-row-icon img,
.imported-row .imported-row-icon .character-icon {
    background: transparent !important;
}

/* Reconciled list: numbers right-align, overflow visible, tabular nums */
.porter-reconciled-amount {
    font-variant-numeric: tabular-nums;
    min-width: 4.5em;
}
.reconciled-rows {
    overflow: visible;
}
.font-tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Expense edit date stack — fixed-width label column so the date inputs (and
   their day-of-month digits, via .font-tabular-nums) align in one vertical
   scan column. spec-fintrack-expense-date-stack-vertical-and-est-belongs-with-amount */
.expense-date-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.expense-date-stack .date-stack-row {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
}
.expense-date-stack .date-stack-label {
    flex: 0 0 6.5rem;
    margin-bottom: 0;
}

/* ============================================
   Utility Classes
   ============================================ */

/* Table column widths */
.col-date { width: 80px; }
.col-amount { width: 100px; }
.col-actions { width: 120px; }
.col-type { width: 150px; }
/* Small icon column (e.g., settings table icon column) */
.col-icon-sm { width: 50px; }

/* Font size utilities (extending Bootstrap) */
.fs-7 { font-size: 0.8rem !important; }
.fs-8 { font-size: 0.7rem !important; }

/* Width utilities */
.w-80 { width: 80px; }
.w-100px { width: 100px; }
.w-120 { width: 120px; }
.w-150 { width: 150px; }
.w-200 { width: 200px; }

/* Min-width utilities */
.min-w-80 { min-width: 80px; }
.min-w-100 { min-width: 100px; }
.min-w-150 { min-width: 150px; }
.min-w-200 { min-width: 200px; }

/* Max-width utilities */
.max-w-80 { max-width: 80px; }
.max-w-100 { max-width: 100px; }
.max-w-150 { max-width: 150px; }
.max-w-200 { max-width: 200px; }
.max-w-300 { max-width: 300px; }
.max-w-400 { max-width: 400px; }

/* Group background tint - uses CSS custom property */
.group-bg-tint {
    background-color: color-mix(in srgb, var(--group-color, #6c757d) 10%, transparent);
}

/* Icon editor specific sizes */
.icon-preview-sm { width: 24px; height: 24px; }
.icon-preview-md { width: 48px; height: 48px; }
.icon-preview-lg { width: 96px; height: 96px; }
.icon-preview-xl { width: 128px; height: 128px; }

/* Crop container */
.crop-container {
    width: 400px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

/* Form input compact sizes */
.form-control-xs {
    padding: 0.15rem 0.35rem;
    font-size: 0.7rem;
}

.form-select-xs {
    padding: 0.15rem 1.5rem 0.15rem 0.35rem;
    font-size: 0.7rem;
}

/* Porter/compact font-size utilities (beyond Bootstrap's fs-6) */
.fs-xs  { font-size: 0.6rem !important; }   /* 9.6px - badges, tiny labels */
.fs-xxs { font-size: 0.5rem !important; }   /* 8px - sub-labels */

/* Porter compact form input widths */
.porter-select-auto   { width: auto; }
.porter-select-narrow { width: 80px; min-width: 60px; }
.porter-select-md     { width: 120px; min-width: 100px; }
.porter-select-wide   { width: 160px; min-width: 100px; }
.porter-select-xl     { width: 220px; min-width: 150px; }

/* Summary/divider borders (replaces inline border-top: 2px solid) */
.porter-divider-top { border-top: 2px solid #212529 !important; }

/* Pre-formatted debug/log output */
.debug-pre {
    white-space: pre-wrap;
    font-family: var(--bs-font-monospace);
    font-size: 0.7rem;
    max-height: 200px;
    overflow-y: auto;
}

/* Force table cell to respect text-truncate in fixed-layout tables */
.td-truncate { max-width: 0; }

/* Table column width utilities (common sizes for th/col elements) */
.col-w-20  { width: 20px; }
.col-w-40  { width: 40px; }
.col-w-48  { width: 48px; }
.col-w-50  { width: 50px; }
.col-w-60  { width: 60px; }
.col-w-70  { width: 70px; }
.col-w-80  { width: 80px; }
.col-w-90  { width: 90px; }
.col-w-100 { width: 100px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-200 { width: 200px; }

/* Page header breadcrumb separator chevron (small relative to h1) */
.breadcrumb-chevron { font-size: 0.5em; }

/* Page header module icon (sized relative to h1) */
.header-module-icon { width: 1.5em; height: 1.5em; vertical-align: -0.2em; }

/* Input group compact width */
.input-group-w-110 { width: 110px; margin-left: auto; }
.input-group-w-120 { width: 120px; }

/* =============================================================================
   Toast Overlay - Fixed position, no layout shift, draggable
   ============================================================================= */

.toast-overlay-container {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1070; /* Above dropdowns (1060) */
    max-width: 480px;
    width: 100%;
    pointer-events: none; /* Allow clicks through container */
}

.toast-overlay-container .alert {
    pointer-events: auto; /* Toast itself is clickable */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.4rem 0.75rem; /* Compact: ~2 rows height */
    font-size: 0.9rem;
}

.toast-overlay-container .alert .fa-lg {
    font-size: 1rem;
}

.toast-overlay-container .alert.dragging {
    opacity: 0.9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Header is the ONLY drag surface — grip glyph + icon + title + actions. */
.ft-toast-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: grab;
    user-select: none; /* header text is not meant to be selected */
}

.ft-toast-header.dragging,
.toast-overlay-container .alert.dragging .ft-toast-header {
    cursor: grabbing;
}

.ft-toast-grip {
    cursor: grab;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    flex-shrink: 0;
}

.ft-toast-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ft-toast-copy {
    --bs-btn-padding-y: 0.05rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    /* Footprint-neutral: reserve enough width for the wider "✓ Copied"
       label so the ⧉ Copy → ✓ Copied swap on click never changes the
       button's rendered width. Without this the label change reflows the
       header (title shrinks) and, in any content-width layout context, the
       center-anchored container would recenter and the toast would jump. */
    min-width: 4.75rem;
    text-align: center;
    box-sizing: border-box;
}

.ft-toast-copy.ft-toast-copied {
    color: var(--bs-success, #198754);
}

/* Body is freely selectable so operators can copy error text by hand. */
.ft-toast-body {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    margin-top: 0.15rem;
}

.border-dashed {
    border-style: dashed !important;
}

/* =============================================================================
   CC Paid badge - sharp rendering
   ============================================================================= */

.cc-paid-badge {
    font-size: 11px !important;  /* Integer px for crisp text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-width: 36px;
    min-height: 22px;
}

.cc-paid-badge svg {
    shape-rendering: geometricPrecision;
}

.cc-paid-badge .cc-paid-text {
    font-size: 11px !important;
    font-weight: 900;
}

/* =============================================================================
   Porter reconcile fade-in-place (replaces the prior toast pattern)
   ============================================================================= */

/* On successful reconcile the pending tbody gets `.porter-row-fading` (set by
   the `porterReconcileRowFade` HX-Trigger handler in porter.js). The original
   row content stays put at full height — we tint the cells green and overlay
   a large "RECONCILED" label via `::after`. After ~3s of hold, the whole tbody
   fades over 0.5s; JS removes it on animationend. No content swap. */
tbody.porter-row-fading {
    position: relative;
    animation: porter-row-fade-out 3.5s ease-out forwards;
}
tbody.porter-row-fading > tr > td,
tbody.porter-row-fading > tr > th {
    background-color: rgba(34, 197, 94, 0.18) !important; /* var(--ft-success) tint */
    transition: background-color 0.15s ease-in;
}
tbody.porter-row-fading > tr:first-child > td:first-child,
tbody.porter-row-fading > tr:first-child > th:first-child {
    box-shadow: inset 4px 0 0 0 var(--bs-success);
}
/* Big "RECONCILED" label overlay — sits on top of the tinted rows. */
tbody.porter-row-fading::after {
    content: "RECONCILED";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(34, 197, 94, 0.45);
    color: #064e3b; /* deep emerald for contrast against the green wash */
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 2;
}
@keyframes porter-row-fade-out {
    0%, 86% { opacity: 1; }
    100%    { opacity: 0; }
}

/* ============================================================
   Tier 0 pair-lock ribbon · spec-fintrack-porter-pair-lock-ribbon
   Direction-tinted (matches existing porter transfer-row convention)
   ============================================================ */
.porter-pair-lock-row td {
    border-left: 3px solid transparent;
}
.porter-pair-lock-row.bg-success-tint td {
    border-left-color: var(--bs-success, #198754);
}
.porter-pair-lock-row.bg-danger-tint td {
    border-left-color: var(--bs-danger, #dc3545);
}
.porter-pair-confirm {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile (<768px): stack the pair-lock ribbon vertically; full-width tap target. */
@media (max-width: 767.98px) {
    .porter-pair-lock-row td {
        padding: 0.5rem 0.75rem;
    }
    .porter-pair-lock-row .porter-pair-lock-inner {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .porter-pair-confirm {
        width: 100%;
        margin-top: 0.5rem;
        margin-left: 0 !important;
    }
}

/* =============================================================================
   SAM Schedule C Part II — the per-line '+ adjust' inline panel cell. The panel
   <td> sits directly under every form line and is EMPTY until the TaxItem
   fragment is hx-swapped in (spec-no-modals-htmx-inline-expansion): zero
   height while empty (no padding, no border — the row is invisible), padded
   once it holds the form. Cancel swaps '' back in and it collapses again.
   NOTE: :empty needs the td rendered with NO whitespace between its tags.
   ============================================================================= */
.schc-adjust-panel { padding: 0 !important; border: 0 !important; }
.schc-adjust-panel:not(:empty) { padding: 0.5rem 0.75rem 0.25rem !important; }
.schc-adjust-btn { opacity: 0.55; }
.schc-adjust-btn:hover, .schc-adjust-btn:focus-visible { opacity: 1; }

/* =============================================================================
   EVE retirement budget — derivation audit trail, per-year totals stack.
   The PER-YEAR TOTALS column used to pack both years into one inline run-on
   ("2025: $X · 2026: $Y"), so the second year started at a different x on
   every row and the two years could not be compared by eye down the column —
   which is the entire point of showing them together. Stack them instead:
   label left, figure RIGHT, tabular digits so the columns of digits line up,
   and one shared right edge for every figure in the column (a table column is
   uniform width, and the grid's 1fr figure track pins to its right edge, so
   the edge holds from row to row regardless of the figure's own width).
   A currency prefix wider than "$" (e.g. "CAD $") simply grows leftward.
   spec-fintrack-eve-budget-per-year-totals-stack-and-right-align
   ============================================================================= */
.eve-year-stack {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.1rem;
    align-items: baseline;
}
.eve-year-label,
.eve-year-figure,
.eve-year-fx {
    white-space: nowrap;
}
.eve-year-label {
    text-align: left;
}
.eve-year-figure {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* The FX conversion note sits UNDER its figure inside the SAME right-aligned
   column — never as a third column. A third column would collapse to zero
   width on the USD-only rows, which would move the figure column's right edge
   from row to row and undo the alignment this whole block exists for. */
.eve-year-fx {
    grid-column: 2;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
}
.eve-derivation-chain {
    line-height: 1.7;
}