/**
 * Hesaby UI Design System - Shared Styles
 * Reusable components for data-dense accounting views:
 * - Sticky bottom actions & balance dock
 * - Viewport-constrained table scroll container & sticky headers
 * - Select2 Bootstrap 5 & RTL fixes
 * - Tabular financial numbers and table ergonomics
 */

/* ==========================================================================
   1. Sticky Bottom Dock & Action Bar
   ========================================================================== */

.hesaby-sticky-dock,
.journal-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background-color: var(--bs-body-bg, #ffffff);
    border-top: 2px solid var(--bs-primary, #0d6efd);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Floating rounded card dock variant */
.hesaby-sticky-dock.card,
.journal-sticky-footer.card {
    border-radius: var(--bs-border-radius-lg, 0.5rem) !important;
    margin-bottom: 0.5rem;
}

/* Safe area support for mobile devices with home indicators */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .hesaby-sticky-dock,
    .journal-sticky-footer {
        padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
    }
}

/* ==========================================================================
   2. Scroll Container & Sticky Table Headers
   ========================================================================== */

.hesaby-scroll-container,
.journal-lines-container {
    max-height: calc(100vh - 370px);
    min-height: 250px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-secondary-bg, #ced4da) transparent;
}

/* Scroll container height variants */
.hesaby-scroll-container--sm {
    max-height: 280px;
    min-height: 180px;
}

.hesaby-scroll-container--lg {
    max-height: calc(100vh - 280px);
    min-height: 350px;
}

.hesaby-scroll-container--full {
    max-height: calc(100vh - 200px);
}

/* Sticky table headers inside scroll containers */
.hesaby-scroll-container table thead th,
.journal-lines-container table thead th,
.hesaby-table-sticky thead th {
    position: sticky;
    top: 0;
    background-color: var(--bs-light, #f8f9fa);
    z-index: 5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Dark mode sticky header background */
[data-bs-theme="dark"] .hesaby-scroll-container table thead th,
[data-bs-theme="dark"] .journal-lines-container table thead th,
[data-bs-theme="dark"] .hesaby-table-sticky thead th {
    background-color: var(--bs-dark, #212529);
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05);
}

/* WebKit subtle scrollbars */
.hesaby-scroll-container::-webkit-scrollbar,
.journal-lines-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.hesaby-scroll-container::-webkit-scrollbar-track,
.journal-lines-container::-webkit-scrollbar-track {
    background: transparent;
}

.hesaby-scroll-container::-webkit-scrollbar-thumb,
.journal-lines-container::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-bg, #ced4da);
    border-radius: 4px;
}

.hesaby-scroll-container::-webkit-scrollbar-thumb:hover,
.journal-lines-container::-webkit-scrollbar-thumb:hover {
    background: var(--bs-secondary-color, #adb5bd);
}

/* Dense table row ergonomics for master-detail document lines */
.hesaby-table-lines td,
.hesaby-table-dense td,
.table-lines td {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
}

/* ==========================================================================
   3. Select2 Bootstrap Integration & RTL Fixes
   ========================================================================== */

/* Full width container */
.select2-container {
    width: 100% !important;
}

/* Compact single-selection matching form-control-sm / form-select-sm */
.select2-container .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: var(--bs-border-radius-sm, 0.25rem) !important;
    border-color: var(--bs-border-color, #dee2e6) !important;
    display: flex !important;
    align-items: center !important;
    background-color: var(--bs-body-bg, #ffffff) !important;
    color: var(--bs-body-color, #212529) !important;
}

/* Focus and open ring state matching Bootstrap 5 */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #86b7fe !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Rendered single selection text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--bs-body-color, #212529) !important;
    width: 100%;
}

/* Dropdown arrow placement (LTR) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 6px !important;
    left: auto;
}

/* Dropdown arrow placement (RTL) */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 6px !important;
    right: auto !important;
}

/* Clear button alignment (RTL) */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__clear {
    float: left !important;
    margin-left: 14px !important;
    margin-right: 0 !important;
}

/* Select2 dropdown menu and search field (RTL) */
[dir="rtl"] .select2-dropdown {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .select2-container--default .select2-search--dropdown .select2-search__field {
    direction: rtl;
    text-align: right;
    padding: 0.25rem 0.5rem;
}

[dir="rtl"] .select2-results__option {
    text-align: right;
}

/* Dark mode compatibility for Select2 */
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--bs-dark, #212529);
    border-color: var(--bs-border-color, #495057);
    color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--bs-dark, #212529) !important;
    border-color: var(--bs-border-color, #495057) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color, #dee2e6) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--bs-dark, #2b3035);
    border-color: var(--bs-border-color, #495057);
    color: var(--bs-body-color, #dee2e6);
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--bs-primary, #0d6efd);
    color: #ffffff;
}

/* ==========================================================================
   4. Financial Typography & Tabular Numerics
   ========================================================================== */

.tabular-nums,
.font-tabular,
.hesaby-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}

/* Hesaby Finance theme integration */
.hesaby-sticky-dock,
.journal-sticky-footer {
    background-color: var(--hesaby-surface, #ffffff);
    border-top: 1px solid var(--hesaby-border-strong, #bccdc7);
    box-shadow: 0 -5px 14px rgba(16, 35, 31, 0.08);
}

.hesaby-scroll-container,
.journal-lines-container {
    scrollbar-color: var(--hesaby-border-strong, #bccdc7) transparent;
}

.hesaby-scroll-container::-webkit-scrollbar-thumb,
.journal-lines-container::-webkit-scrollbar-thumb {
    background: var(--hesaby-border-strong, #bccdc7);
}

.hesaby-scroll-container::-webkit-scrollbar-thumb:hover,
.journal-lines-container::-webkit-scrollbar-thumb:hover {
    background: #8fa9a0;
}

.select2-container .select2-selection--single {
    min-height: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0.55rem 0.75rem !important;
    color: var(--hesaby-ink, #18352e) !important;
    background-color: var(--hesaby-surface, #ffffff) !important;
    border-color: var(--hesaby-border-strong, #bccdc7) !important;
    border-radius: 0.5rem !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--hesaby-accent, #17745f) !important;
    box-shadow: 0 0 0 0.22rem var(--hesaby-focus, rgba(99, 212, 173, 0.32)) !important;
}

.select2-dropdown {
    color: var(--hesaby-ink, #18352e);
    background: var(--hesaby-surface, #ffffff);
    border-color: var(--hesaby-border-strong, #bccdc7);
    border-radius: 0.5rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #ffffff;
    background: var(--hesaby-accent, #17745f);
}