/* Shared mobile shell; loaded after page styles to keep legacy views consistent. */
.cts-mobile-menu-button { display: none; }
.layout-page, .content-wrapper, .content-wrapper .row > *, .dataTables_wrapper { min-width: 0; }
.cts-table-scroll { max-width: 100%; overflow-x: auto; }
.cts-table-host { overflow: visible; }
.cts-datatable-toolbar { display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
body div.dataTables_wrapper .cts-datatable-toolbar .dataTables_length,
body div.dataTables_wrapper .cts-datatable-toolbar .dataTables_filter { width: auto; float: none; padding: 0; }
body div.dataTables_wrapper .cts-datatable-toolbar .dataTables_filter { margin-left: auto; }
body div.dataTables_wrapper .cts-datatable-toolbar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
body div.dataTables_wrapper .cts-datatable-toolbar select { width: 68px; }
body div.dataTables_wrapper .cts-datatable-toolbar input { width: clamp(110px, 32vw, 220px); }
body div.dataTables_wrapper .cts-datatable-toolbar input,
body div.dataTables_wrapper .cts-datatable-toolbar select { height: 36px; min-height: 36px; margin: 0; font-size: 13px; }

/* Collapsible Filter Section System */
.cts-filter-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cts-filter-card:hover {
    border-color: #cbd5e1;
}
.cts-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(181, 28, 0, 0.08);
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.15s ease, border-color 0.3s ease;
    touch-action: manipulation;
    position: relative;
    z-index: 5;
}
.cts-filter-header:hover,
.cts-filter-header:active {
    background: #f1f5f9;
}
.cts-filter-header:focus-visible {
    outline: 2px solid #b51c00;
    outline-offset: -2px;
}
.cts-filter-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    pointer-events: none;
}
.cts-filter-title-wrap i,
.cts-filter-title-wrap svg,
.cts-filter-title-wrap .material-symbols-outlined {
    font-size: 1.1rem;
    color: #b51c00;
    flex-shrink: 0;
}
.cts-filter-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 600;
}
.cts-filter-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    pointer-events: none;
}
.cts-filter-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 0.5rem;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    color: #475467;
    font-size: 1.15rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    pointer-events: none;
    position: relative;
    flex-shrink: 0;
}
.cts-filter-toggle-icon i,
.cts-filter-toggle-icon svg {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.cts-filter-header:hover .cts-filter-toggle-icon,
.cts-filter-header:active .cts-filter-toggle-icon {
    color: #b51c00;
    border-color: #cbd5e1;
    background: #fff;
}

/* Collapsible Body Grid Animation */
.cts-filter-collapse-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cts-filter-collapse-inner {
    overflow: hidden;
    min-height: 0;
}
.cts-filter-body {
    padding: 1rem;
    background: #ffffff;
}

/* Collapsed State */
.cts-filter-card.is-collapsed .cts-filter-collapse-wrapper {
    grid-template-rows: 0fr;
}
.cts-filter-card.is-collapsed .cts-filter-header {
    border-bottom-color: transparent;
}
.cts-filter-card.is-collapsed .cts-filter-toggle-icon i,
.cts-filter-card.is-collapsed .cts-filter-toggle-icon svg {
    transform: rotate(-90deg);
}

/* Expanded State */
.cts-filter-card.is-expanded .cts-filter-collapse-wrapper {
    grid-template-rows: 1fr;
}
.cts-filter-card.is-expanded .cts-filter-header {
    border-bottom-color: #e5e7eb;
}
.cts-filter-card.is-expanded .cts-filter-toggle-icon i,
.cts-filter-card.is-expanded .cts-filter-toggle-icon svg {
    transform: rotate(0deg);
}

/* Card inner overrides */
.cts-filter-card .terminal-filter-panel,
.cts-filter-card .report-filters,
.cts-filter-card .activity-filter-panel,
.cts-filter-card .message-filters {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

@media (max-width: 1199.98px) {
    .cts-mobile-menu-button { display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid #e4e7ec; border-radius: 9px; background: #fff; color: #b51c00; font-size: 24px; }
    .cts-mobile-menu-button:focus-visible { outline: 2px solid #b51c00; outline-offset: 2px; }
    .page-title-wrapper { position: sticky; top: 0; z-index: 1020; background: #f8f9fd; padding-top: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid #e4e7ec; }
    .page-title-wrapper > div > .bx-layout { display: none; }
    .page-title-wrapper span { overflow-wrap: anywhere; }
    #layout-menu { width: min(280px, calc(100vw - 48px)) !important; max-width: calc(100vw - 48px); height: 100dvh !important; transition: transform .2s ease !important; }
    #layout-menu .app-brand .layout-menu-toggle { display: flex !important; position: static; flex-shrink: 0; margin: 0 !important; }
    #layout-menu .app-brand.demo .text { display: block; font-size: 18px; }
    #layout-menu .menu-inner { overflow-y: auto; overscroll-behavior: contain; }
    .layout-overlay { z-index: 1025 !important; }
    html.layout-menu-fixed .layout-page { padding-left: 0 !important; margin-left: 0 !important; }
    .cts-configurator { height: auto !important; min-height: calc(100dvh - 80px); overflow: visible !important; }
    .cts-configurator > header { height: auto !important; padding: 12px !important; flex-wrap: wrap; gap: 12px; }
    .cts-configurator > header > div { flex-wrap: wrap; min-width: 0; gap: 8px; }
    .cts-configurator > header select { max-width: 100%; }
    .cts-configurator-body { flex-direction: column; overflow: visible !important; }
    .cts-configurator-body > aside { width: 100% !important; height: auto !important; max-height: none; border-left: 0; }
    .cts-configurator-body #canvasWrapper { flex: none; width: 100%; min-height: 380px; max-height: 65dvh; overflow: auto; align-items: flex-start; justify-content: flex-start; }
    #previewCanvas { flex-shrink: 0; }
}
@media (max-width: 767.98px) {
    .layout-page .container-xxl, .layout-page .container, .page-title-wrapper { padding-left: 12px !important; padding-right: 12px !important; }
    .container-p-y { padding-top: 12px; padding-bottom: 16px; }
    .content-wrapper .card-body, .content-wrapper .card-header { padding: 16px; }
    .content-wrapper .card-header.d-flex { flex-wrap: wrap; gap: 10px; }
    .content-wrapper form .row { row-gap: 10px; }
    .content-wrapper form .col-form-label { padding-bottom: 4px; }
    .content-wrapper .select2-container, .modal .select2-container { width: 100% !important; min-width: 0; max-width: 100%; }
    .select2-selection__rendered { max-width: 100%; }
    .select2-selection__choice { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .content-wrapper .form-control, .content-wrapper .form-select, .modal .form-control, .modal .form-select { max-width: 100%; }
    .content-wrapper .input-group { min-width: 0; }
    .user-toolbar-actions, .role-toolbar-actions, .terminal-actions, .terminal-filter-actions, .report-buttons { flex-wrap: wrap; gap: 8px; }
    .user-filter-field, .role-filter-field, .user-search-field, .role-search-field { min-width: 0; max-width: 100%; }
    .setting-item { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 0; }
    .setting-info, .setting-control { width: 100%; max-width: 100%; min-width: 0; }
    .setting-control { justify-content: flex-start; }
    .gp-content { padding: 16px; }
    .notebook-tabs, .terminal-type-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-left: 0; }
    .notebook-tab-link { padding: 10px 12px; white-space: nowrap; font-size: 12px; }
    .cts-table-host { overflow: visible; }
    .cts-table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 8px; }
    .cts-table-scroll:focus-visible { outline: 2px solid #b51c00; outline-offset: 2px; }
    body div.dataTables_wrapper { display: block; max-width: 100%; }
    body div.dataTables_wrapper .dataTables_length, body div.dataTables_wrapper .dataTables_filter { float: none; width: auto; margin-top: 0; margin-bottom: 0; padding: 0; }
    div.dataTables_wrapper .dataTables_filter { margin-left: auto; text-align: right; }
    div.dataTables_wrapper .dataTables_length label, div.dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
    div.dataTables_wrapper .dataTables_length select, div.dataTables_wrapper .dataTables_filter input { height: 36px; min-height: 36px; margin: 0; font-size: 13px; }
    div.dataTables_wrapper .dataTables_filter input { width: clamp(110px, 32vw, 200px); max-width: 100%; }
    .cts-datatable-toolbar { display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
    div.dataTables_wrapper .dataTables_info { white-space: normal; padding-top: 10px; font-size: 12px; }
    div.dataTables_wrapper .dataTables_paginate { max-width: 100%; margin-top: 10px; overflow-x: auto; }
    div.dataTables_wrapper .pagination { flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
    div.dataTables_wrapper .page-link { padding: 7px 9px; font-size: 12px; }
    .content-wrapper table.table td, .content-wrapper table.table th { padding: 10px 12px; }
    .modal-dialog { margin: 12px; max-width: calc(100% - 24px); }
    .modal-header, .modal-body, .modal-footer { padding: 16px !important; }
    .modal-body { overflow-wrap: anywhere; }
    .modal-content { max-height: calc(100dvh - 24px); }
    .modal-body { overflow-y: auto; min-height: 0; }
    .modal-footer { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 575.98px) {
    .page-title-wrapper span { font-size: 16px !important; }
    .content-wrapper form .row > [class*="col-sm-"] { width: 100%; margin-left: 0; }
    .message-filters { grid-template-columns: minmax(0, 1fr); }
    .message-header, .message-results-header { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    #layout-menu { transition: none !important; }
}