/* Shared responsive polish for ASSURF product screens. */
:root {
    --assurf-ui-bg: var(--surface-page, #f5f7fb);
    --assurf-ui-surface: var(--surface-card, #ffffff);
    --assurf-ui-surface-soft: var(--surface-card-header, #f8fafc);
    --assurf-ui-text: var(--text-body, #111827);
    --assurf-ui-muted: var(--text-muted-theme, #64748b);
    --assurf-ui-border: var(--border-color, #e5e7eb);
    --assurf-ui-border-strong: var(--border-color-strong, #cbd5e1);
    --assurf-ui-primary: var(--primary-color, #1e3a8a);
    --assurf-ui-primary-soft: rgba(30, 58, 138, 0.08);
    --assurf-ui-radius: 8px;
    --assurf-ui-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

html {
    overflow-x: hidden;
}

body {
    min-width: 320px;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video,
canvas {
    height: auto;
}

:where(main, .main, .main-content, .content, .content-wrapper, #content, #gestion-content, .container, .container-fluid, .ab-main, .ai-main, .cn-main) {
    min-width: 0;
}

:where(.row, .d-flex, .card, .modal-dialog, .dropdown-menu, .tab-content, .table-responsive) {
    min-width: 0;
}

:where(.card, .panel, .ab-panel, .dashboard-card, .stat-card, .feature-card) {
    overflow-wrap: anywhere;
}

.container {
    width: min(100%, 1320px);
}

.container-fluid {
    width: 100%;
}

/* Tables */
:where(.table-responsive, .responsive-table, .table-wrap, .table-container, .dataTables_wrapper) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--assurf-ui-radius);
}

:where(.table-responsive, .responsive-table, .table-wrap, .table-container) > table {
    margin-bottom: 0;
}

:where(main, .main-content, #content, #gestion-content, .content-wrapper, .ab-content, .ai-content, .cn-content, .card-body, .modal-body) table:not([role="presentation"]):not(.calendar):not(.ui-datepicker-calendar) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--assurf-ui-surface);
    color: var(--assurf-ui-text);
    border: 1px solid var(--assurf-ui-border);
    border-radius: var(--assurf-ui-radius);
    overflow: hidden;
}

:where(main, .main-content, #content, #gestion-content, .content-wrapper, .ab-content, .ai-content, .cn-content, .card-body, .modal-body) table:not([role="presentation"]):not(.calendar):not(.ui-datepicker-calendar) th,
:where(main, .main-content, #content, #gestion-content, .content-wrapper, .ab-content, .ai-content, .cn-content, .card-body, .modal-body) table:not([role="presentation"]):not(.calendar):not(.ui-datepicker-calendar) td {
    padding: 0.8rem 0.95rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--assurf-ui-border);
    overflow-wrap: anywhere;
}

:where(main, .main-content, #content, #gestion-content, .content-wrapper, .ab-content, .ai-content, .cn-content, .card-body, .modal-body) table:not([role="presentation"]):not(.calendar):not(.ui-datepicker-calendar) thead th {
    background: var(--assurf-ui-surface-soft);
    color: var(--assurf-ui-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    border-bottom: 1px solid var(--assurf-ui-border-strong);
    white-space: nowrap;
}

:where(main, .main-content, #content, #gestion-content, .content-wrapper, .ab-content, .ai-content, .cn-content, .card-body, .modal-body) table:not([role="presentation"]):not(.calendar):not(.ui-datepicker-calendar) tbody tr:last-child td {
    border-bottom: 0;
}

:where(main, .main-content, #content, #gestion-content, .content-wrapper, .ab-content, .ai-content, .cn-content, .card-body, .modal-body) table:not([role="presentation"]):not(.calendar):not(.ui-datepicker-calendar) tbody tr:hover {
    background: var(--assurf-ui-primary-soft);
}

:where(.table, table) :where(.btn, .badge, .dropdown-toggle) {
    white-space: nowrap;
}

.dataTables_wrapper {
    padding: 0.25rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--assurf-ui-border-strong);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    background: var(--assurf-ui-surface);
    color: var(--assurf-ui-text);
}

@media (max-width: 991.98px) {
    :where(.container, .container-fluid) {
        width: 100%;
        max-width: 100%;
        padding-left: clamp(0.75rem, 4vw, 1.25rem);
        padding-right: clamp(0.75rem, 4vw, 1.25rem);
    }

    :where(.main-content, .gs-main, .ab-main, .ai-main, .cn-main) {
        padding-left: clamp(0.75rem, 4vw, 1.25rem);
        padding-right: clamp(0.75rem, 4vw, 1.25rem);
    }

    :where(.card-body, .modal-body, .panel-body, .ab-panel-body) {
        padding: clamp(0.85rem, 4vw, 1.25rem);
    }

    :where(.row) {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
}

@media (max-width: 767.98px) {
    :where(h1, .h1) {
        font-size: clamp(1.7rem, 8vw, 2.2rem);
        line-height: 1.15;
    }

    :where(h2, .h2) {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
        line-height: 1.2;
    }

    :where(.btn-toolbar, .btn-group, .actions, .page-actions, .header-actions, .card-actions) {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    :where(.btn-toolbar .btn, .actions .btn, .page-actions .btn, .header-actions .btn, .card-actions .btn) {
        max-width: 100%;
    }

    :where(.table-responsive, .responsive-table, .table-wrap, .table-container, .dataTables_wrapper) {
        border: 1px solid var(--assurf-ui-border);
        background: var(--assurf-ui-surface);
        box-shadow: none;
    }

    :where(.table-responsive, .responsive-table, .table-wrap, .table-container, .dataTables_wrapper) table {
        min-width: 640px;
        border: 0;
        border-radius: 0;
    }

    :where(main, .main-content, #content, #gestion-content, .content-wrapper, .ab-content, .ai-content, .cn-content, .card-body, .modal-body) > table:not([role="presentation"]):not(.calendar):not(.ui-datepicker-calendar) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.assurf-stacked,
    table[data-responsive="stack"] {
        display: block;
        border: 0;
        background: transparent;
    }

    table.assurf-stacked thead,
    table[data-responsive="stack"] thead {
        display: none;
    }

    table.assurf-stacked tbody,
    table.assurf-stacked tr,
    table.assurf-stacked td,
    table[data-responsive="stack"] tbody,
    table[data-responsive="stack"] tr,
    table[data-responsive="stack"] td {
        display: block;
        width: 100%;
    }

    table.assurf-stacked tr,
    table[data-responsive="stack"] tr {
        margin-bottom: 0.85rem;
        border: 1px solid var(--assurf-ui-border);
        border-radius: var(--assurf-ui-radius);
        background: var(--assurf-ui-surface);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    table.assurf-stacked td,
    table[data-responsive="stack"] td {
        display: grid;
        grid-template-columns: minmax(7rem, 42%) 1fr;
        gap: 0.75rem;
        align-items: start;
        border-bottom: 1px solid var(--assurf-ui-border);
        text-align: left !important;
    }

    table.assurf-stacked td::before,
    table[data-responsive="stack"] td::before {
        content: attr(data-label);
        color: var(--assurf-ui-muted);
        font-weight: 700;
    }

    table.assurf-stacked td:last-child,
    table[data-responsive="stack"] td:last-child {
        border-bottom: 0;
    }
}

[data-theme="dark"] {
    --assurf-ui-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    --assurf-ui-primary-soft: rgba(96, 165, 250, 0.13);
}