/* Shared by OtelAPP.WebUI and STSetup.WebUI; keep both copies in sync. */
.dt-container { width: 100%; max-width: 100%; min-width: 0; padding: 12px; box-sizing: border-box; overflow-x: auto; scroll-behavior: auto !important; }
.dt-container .dt-layout-row { gap: 12px; }
.dt-container .dt-search, .dt-container .dt-length { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dt-container .dt-search label, .dt-container .dt-length label { margin: 0; }
.dt-container .dt-input { box-sizing: border-box; width: auto; color: #253347; background: #fff; border: 1px solid #cbd5e1; border-radius: 5px; padding: 6px 8px; font: inherit; line-height: 1.4; height: auto; margin: 0; }
.dt-container table.dataTable { width: 100% !important; margin: 0; }
.dt-container table.dataTable td.dt-empty { padding: 20px; text-align: center; }
.dt-container table.dataTable .dt-column-header { gap: 8px; }
.dt-container table.dataTable span.dtcc { flex-shrink: 0; }
/* The shared appDropdown places menus in the body, outside scrollable tables. */
div.dtcc-dropdown { color: #253347; font-size: 14px; font-weight: 400; text-transform: none; --dtcc-dropdown_width: 260px; --dtcc-dropdown_z-index: 2100; --dtcc-dropdown-button_color: #253347; }
div.dtcc-dropdown input, div.dtcc-dropdown select { color: #253347; background-color: #fff; font: inherit; height: auto; min-width: 0; line-height: 1.4; }
div.dtcc-dropdown button { font: inherit; box-shadow: none; }
div.dtcc-dropdown.app-column-menu { max-width: calc(100vw - 16px); margin: 0; }
div.dtcc-dropdown .dtcc-dropdown-liner { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; }
div.dtcc-dropdown .dtcc-list-buttons { max-height: 200px; overflow-y: auto; }
div.dtcc-dropdown .app-date-start { display: block; flex: 0 0 100%; margin: 8px 0 4px; font: inherit; }
div.dtcc-dropdown .app-date-end { display: block; margin: 8px 0 0; font: inherit; }
div.dtcc-dropdown .app-date-start[hidden], div.dtcc-dropdown .app-date-end[hidden] { display: none !important; }
div.dtcc-dropdown .app-date-end span { display: block; margin-bottom: 4px; }
div.dtcc-dropdown .app-date-end input { box-sizing: border-box; width: 100%; padding: 5px; border: 1px solid #aaa; border-radius: 3px; }
div.dtcc-dropdown .app-date-message { color: #a12622; font-size: 12px; line-height: 1.4; }
div.dtcc-dropdown .app-date-message:empty, div.dtcc-dropdown .app-values-status:empty { display: none; }
div.dtcc-dropdown .app-values-status { padding: 8px 12px; white-space: normal; font-size: 12px; }
.app-table-scroll {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    height: 18px;
    z-index: 1040;
    overflow-x: scroll;
    overflow-y: hidden;
    background: #e8dfd5;
    border-top: 1px solid #a79480;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
    scroll-behavior: auto !important;
    scrollbar-color: #a79480 #e8dfd5;
}
.app-table-scroll[hidden] { display: none !important; }
.app-table-scroll > div { height: 1px; }
.app-table-scroll::-webkit-scrollbar { height: 16px; }
.app-table-scroll::-webkit-scrollbar-track { background: #e8dfd5; }
.app-table-scroll::-webkit-scrollbar-thumb { background: #a79480; border: 2px solid #e8dfd5; border-radius: 8px; }
.app-table-scroll:focus-visible { outline: 2px solid #64748b; outline-offset: -2px; }
.dt-container input:focus-visible, .dt-container select:focus-visible, .dt-container button:focus-visible,
div.dtcc-dropdown input:focus-visible, div.dtcc-dropdown select:focus-visible, div.dtcc-dropdown button:focus-visible { outline: 2px solid #64748b !important; outline-offset: 2px; }
.app-table-loading { padding: 20px; text-align: center; }
@media (max-width: 767px) {
    .dt-container { padding: 8px; }
    .dt-container .dt-layout-row { flex-direction: column; align-items: stretch; }
    .dt-container .dt-search { justify-content: flex-start; }
}