/* v3.0 // backend-mod/css/_lists.css */
/* ==========================================================================
   MODERN TABLE STYLES
   ========================================================================== */

/* --- Tabellen-Container: abgerundete Ecken, Schatten, kein äußerer Border --- */
.pcmsList,
#XCMS_Content .table {
    background-color: var(--table-bg);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    box-shadow: var(--table-shadow);
    overflow: hidden;
    border: none;
    margin-bottom: 20px;
}

/* --- Alle Bootstrap-Borders entfernen --- */
.pcmsList > thead > tr > th,
.pcmsList > thead > tr > td,
.pcmsList > tbody > tr > th,
.pcmsList > tbody > tr > td,
.pcmsList > tfoot > tr > th,
.pcmsList > tfoot > tr > td,
#XCMS_Content .table > thead > tr > th,
#XCMS_Content .table > thead > tr > td,
#XCMS_Content .table > tbody > tr > th,
#XCMS_Content .table > tbody > tr > td,
#XCMS_Content .table > tfoot > tr > th,
#XCMS_Content .table > tfoot > tr > td {
    border-top: none;
    border-bottom: 1px solid var(--table-border-color);
}

/* --- Zellen: mehr Whitespace, saubere Typografie --- */
.pcmsList th,
.pcmsList td,
#XCMS_Content .table th,
#XCMS_Content .table td {
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 16px;
    vertical-align: middle;
}

/* --- Header: modern, dezent, Uppercase --- */
.pcmsList > thead > tr > th,
#XCMS_Content .table > thead > tr > th {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 16px;
    border-bottom: 2px solid var(--table-border-color);
    white-space: nowrap;
}

/* --- Letzte Zeile: kein unterer Border --- */
.pcmsList > tbody > tr:last-child > td,
.pcmsList > tbody > tr:last-child > th,
#XCMS_Content .table > tbody > tr:last-child > td,
#XCMS_Content .table > tbody > tr:last-child > th {
    border-bottom: none;
}

/* --- Subtile Zebra-Stripes --- */
.pcmsList > tbody > tr:nth-of-type(even),
#XCMS_Content .table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--table-stripe-bg);
}

/* --- Sanfter Hover mit Transition --- */
.pcmsList > tbody > tr,
#XCMS_Content .table-hover > tbody > tr {
    transition: background-color 0.15s ease;
}

.pcmsList > tbody > tr:hover,
#XCMS_Content .table-hover > tbody > tr:hover {
    background-color: var(--table-row-hover-bg);
}

/* --- Boolean-Icons --- */
.pcmsList .boolean .boolean-txt {
    display: none;
}

.pcmsList .boolean.true:before {
    content: "";
}

.pcmsList .boolean.true {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    position: relative;
    top: 1px;
}

/* --- Sortierbare Spalten --- */
.pcmsList th.sortableCol {
    cursor: pointer;
    transition: color 0.15s ease;
}

.pcmsList th.sortableCol:hover {
    color: var(--text-color-primary);
}

.pcmsList th.sortableCol .sorticonhover,
.pcmsList th.sortableCol:hover .sorticon {
    display: none;
}

.pcmsList th.sortableCol:hover .sorticonhover,
.pcmsList th.sortableCol .sorticon {
    display: inline;
    font-size: 0.8em;
}

/* --- Action-Spalte --- */
.pcmsList .td_action {
    white-space: nowrap;
    text-align: right;
}

/* --- Action-Buttons: kompakt, abgerundet --- */
.pcmsList .td_action .btn {
    font-size: 12px;
    padding: 5px 10px;
    line-height: 1.2;
    border-radius: 4px;
    transition: all 0.15s ease;
}

/* --- "Bearbeiten"-Button mit Primärfarbe --- */
.pcmsList .td_action .btn:first-child {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-primary-bg);
}

.pcmsList .td_action .btn:first-child:hover,
.pcmsList .td_action .btn:first-child:focus {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-on-primary-bg);
}


/* --- Pagination-Ellipsis --- */
.pagination-ellipsis > span {
    border: none !important;
    background: transparent !important;
    color: var(--text-color-secondary);
    padding: 6px 8px;
    cursor: default;
    letter-spacing: 2px;
}


/* ==========================================================================
   MODERN PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pagination > li > a,
.pagination > li > span {
    font-size: 13px;
    line-height: 1.4;
    padding: 6px 12px;
    background-color: var(--pagination-bg);
    border: 1px solid var(--pagination-border);
    color: var(--pagination-color);
    border-radius: 6px !important;
    margin-left: 0;
    transition: all 0.15s ease;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 6px !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--pagination-hover-bg);
    border-color: var(--pagination-border);
    color: var(--pagination-color);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: var(--pagination-active-bg);
    border-color: var(--pagination-active-bg);
    color: var(--pagination-active-color);
    border-radius: 6px !important;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    background-color: var(--pagination-bg);
    border-color: var(--pagination-border);
    color: var(--text-color-secondary);
    opacity: 0.5;
}

/* --- "Datensätze pro Seite" Eingabefeld --- */
.XCMS_List_rpp {
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
}


/* ==========================================================================
   RESPONSIVE SPALTEN
   ========================================================================== */

/* col-hide-lg: ab <1440px ausblenden (kleine Laptops) */
@media (max-width: 1439px) {
    .pcmsList .col-hide-lg,
    #XCMS_Content .table .col-hide-lg {
        display: none !important;
    }
}

/* col-hide-md: ab <1200px ausblenden (Tablets landscape) */
@media (max-width: 1199px) {
    .pcmsList .col-hide-md,
    #XCMS_Content .table .col-hide-md {
        display: none !important;
    }
}

/* col-hide-sm: ab <992px ausblenden (Tablets portrait) */
@media (max-width: 991px) {
    .pcmsList .col-hide-sm,
    #XCMS_Content .table .col-hide-sm {
        display: none !important;
    }
}

/* col-hide-xs: ab <768px ausblenden (Smartphones) */
@media (max-width: 767px) {
    .pcmsList .col-hide-xs,
    #XCMS_Content .table .col-hide-xs {
        display: none !important;
    }
}

/* Tabellen-Layout für schmale Screens */
@media (max-width: 1199px) {
    .pcmsList,
    #XCMS_Content .table {
        table-layout: fixed;
        width: 100%;
    }

    .pcmsList td:first-child,
    .pcmsList th:first-child,
    #XCMS_Content .table td:first-child,
    #XCMS_Content .table th:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ==========================================================================
   DARK MODE ANPASSUNGEN
   ========================================================================== */

[data-theme="dark"] .XCMS_List_rpp {
    background-color: var(--form-control-bg);
    color: var(--form-control-text);
    border: 1px solid var(--form-control-border);
}

[data-theme="dark"] .table {
    background-color: var(--table-bg);
    color: var(--text-color-primary);
}

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > thead > tr > td,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > th,
[data-theme="dark"] .table > tfoot > tr > td {
    border-color: var(--table-border-color);
}

[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--table-bg);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) {
    background-color: var(--table-stripe-bg);
}

[data-theme="dark"] .table-hover > tbody > tr:hover,
[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--table-row-hover-bg);
}

/* v3.0 // backend-mod/css/_lists.css */