/* **** LOADING INDICATOR **** */ /* Hide the raw TablePress HTML until DataTables has fully initialized. CSS is in so this applies before the browser paints, preventing the flash of 800+ unstyled rows. The table is revealed by JS inside init.dt after the filter bar is built and columns.adjust() has run. */ #tablepress-46 { display: none; } /* While body.habeas-is-loading (set by JS at document-ready, removed in init.dt setTimeout), also hide the DataTables wrapper and filter bar so nothing is visible except the spinner. */ body.habeas-is-loading #tablepress-46_wrapper, body.habeas-is-loading #habeas-filter, body.habeas-is-loading #habeas-row-count { display: none; } #habeas-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; gap: 14px; color: #555; font-size: 0.9rem; } .habeas-spinner { width: 32px; height: 32px; border: 3px solid #e0e0e0; border-top-color: #1a6496; border-radius: 50%; animation: habeas-spin 0.75s linear infinite; } @keyframes habeas-spin { to { transform: rotate(360deg); } } /* **** COLUMN WIDTHS **** */ #tablepress-46_wrapper .column-1 { width: 380px; } /* Case Details */ #tablepress-46_wrapper .column-2 { width: 320px; } /* Date Petition Filed */ #tablepress-46_wrapper .column-4 { width: 275px; } /* Non-Compliance */ #tablepress-46_wrapper .column-5 { width: 275px; } /* Escalation */ /* **** STICKY FILTER BAR **** */ #habeas-filter { display: block; padding: 10px 15px; position: sticky; top: var(--habeas-filter-top, 0px); z-index: 500; background: #fff; margin-bottom: 8px; } /* On mobile: only sticky when collapsed */ @media (max-width: 767px) { #habeas-filter { position: static; } #habeas-filter:has(#habeas-filter-body.is-collapsed) { position: sticky; top: var(--habeas-filter-top, 0px); } } /* Toggle button */ #habeas-filter-toggle { display: flex; align-items: center; gap: 6px; padding: 4px 0 8px; background: none; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #333; text-align: left; margin-bottom: 10px; } #habeas-filter-toggle .hf-chevron { font-style: normal; font-size: 0.7rem; transition: transform 0.15s; } #habeas-filter-toggle.is-open .hf-chevron { transform: rotate(180deg); } /* Filter controls body */ #habeas-filter-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 0 14px; } #habeas-filter-body.is-collapsed { display: none; } /* **** ROW COUNT **** */ #habeas-row-count { font-size: 0.85rem; color: #555; margin-bottom: 6px; } /* **** FILTER BOXES **** */ .habeas-filter-box { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d0d0d0; border-radius: 6px; padding: 6px 10px; background: #fafafa; } .habeas-filter-box .habeas-filter-logic { padding-left: 0; font-size: 0.775rem; } .habeas-filter-group { position: relative; } /* Dropdown button */ .habeas-filter-dropdown-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #bbb; border-radius: 4px; background: #fff; cursor: pointer; font-size: 0.875rem; white-space: nowrap; } .habeas-filter-dropdown-btn.is-active { border-color: #1a6496; background: #e8f2f9; } .habeas-filter-dropdown-btn .hf-count { display: none; background: #1a6496; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 0.75rem; font-weight: 600; } .habeas-filter-dropdown-btn.is-active .hf-count { display: inline; } .habeas-filter-dropdown-btn .hf-chevron { font-style: normal; font-size: 0.7rem; transition: transform 0.15s; } .habeas-filter-dropdown-btn.is-open .hf-chevron { transform: rotate(180deg); } /* Dropdown panel */ .habeas-filter-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 999; background: #fff; border: 1px solid #bbb; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); padding: 8px 0; min-width: 280px; } .habeas-filter-panel.is-open { display: block; } .habeas-filter-panel label { display: flex; align-items: baseline; gap: 8px; padding: 5px 14px; font-size: 0.875rem; cursor: pointer; margin: 0; } .habeas-filter-panel label:hover { background: #f0f4f8; } .habeas-filter-panel input[type="checkbox"] { flex-shrink: 0; margin: 0; } /* AND/OR logic toggle */ .habeas-filter-logic { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: #555; padding-left: 4px; } .habeas-filter-logic label { display: flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; } /* Single-select dropdown */ .habeas-filter-select { padding: 6px 12px; border: 1px solid #bbb; border-radius: 4px; background: #fff; cursor: pointer; font-size: 0.875rem; height: auto; } .habeas-filter-select.is-active { border-color: #1a6496; background: #e8f2f9; } /* **** DATE RANGE FILTER **** */ .habeas-filter-daterange { gap: 10px; } .habeas-filter-daterange-label { font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: #333; } .habeas-filter-daterange-field { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #555; margin: 0; cursor: default; } .habeas-filter-daterange-field input[type="date"] { padding: 4px 8px; border: 1px solid #bbb; border-radius: 4px; font-size: 0.875rem; background: #fff; } .habeas-filter-daterange-field input[type="date"]:focus { outline: none; border-color: #1a6496; } /* **** PILLS **** */ /* Case detail stacked rows */ .stack-spacer { margin-bottom: 10px; } .tp-pill { display: inline-block; border-radius: 3px; margin: 2px 2px 2px 0; white-space: wrap; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 500; padding: .1rem .45rem; background: var(--js-platinum); color: var(--js-onyx); } #tablepress-46 tbody tr:hover .tp-pill { background: color-mix(in srgb, var(--js-platinum) 82%, #444); } /* **** BUTTONS IN FILTER BAR **** */ .habeas-btn-group { display: flex; flex-wrap: nowrap; gap: 8px; } #habeas-filter button.dt-button { background: linear-gradient(180deg, rgba(230,230,230,.1) 0, rgba(0,0,0,.1) 100%); border: 1px solid rgba(0,0,0,.3); border-radius: 2px; color: inherit; cursor: pointer; display: inline-block; font-size: .88em; line-height: normal; outline: none; padding: .5em 1em; text-decoration: none; user-select: none; white-space: nowrap; } #habeas-filter button.dt-button:hover:not(:disabled) { background: linear-gradient(180deg, rgba(153,153,153,.1) 0, rgba(0,0,0,.1) 100%); border-color: #666; } #habeas-filter button.dt-button:disabled { cursor: default; opacity: .4; } /* **** BACK TO TOP **** */ #habeas-back-to-top { position: fixed; bottom: 24px; right: 24px; z-index: 600; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #d0d0d0; border-radius: 6px; background: #fafafa; cursor: pointer; font-size: 1.1rem; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: background 0.15s, border-color 0.15s; } #habeas-back-to-top.is-visible { display: flex; } #habeas-back-to-top:hover { background: #e8f2f9; border-color: #1a6496; color: #1a6496; } @media (max-width: 600px) { #habeas-back-to-top { bottom: 16px; right: 16px; width: 48px; height: 48px; } } @media (max-width: 499px) { #habeas-filter { padding-left: 0; padding-right: 0; } .habeas-filter-daterange { flex-direction: column; align-items: flex-start; } }