/* Base styles for the classes sklib/django/admin/utils.py emits: color_badge()
   and table(). Load it from the project's admin/base_site.html:

       {% block extrastyle %}
           {{ block.super }}
           <link rel="stylesheet" href="{% static 'sklib/css/admin_utils.css' %}">
       {% endblock %}

   Colours come from the theme's --table-* and --primary-* variables when it
   defines them, and from the admin's own otherwise. */

/* No negative margin: a badge grows its line by ~2px rather than overhanging
   it, so badges on stacked lines never overlap, however they are joined. */
.color-badge {
    display: inline-block;
    padding: 3px 4px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.color-badge[title] {
    cursor: help;
}

.tablewrap {
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    border: 1px solid var(--table-border-outer, var(--hairline-color));
    border-radius: 6px;
    margin-top: 6px;
    background: var(--body-bg);
}

.tablewrap table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    background: var(--body-bg);
    color: var(--body-loud-color);
}

.tablewrap thead th {
    background: var(--table-header-bg, var(--darkened-bg));
    color: var(--table-header-fg, var(--body-quiet-color));
    font-weight: 600;
    padding: 6px 10px;
    border-top: none;
    border-right: 1px solid var(--table-border-inner, var(--hairline-color));
    border-bottom: 1px solid var(--table-border-inner, var(--hairline-color));
    border-left: none;
}

.tablewrap thead tr th:last-child {
    border-right: none;
}

.tablewrap thead tr:first-child th {
    text-align: center;
}

.tablewrap thead tr:nth-child(2) th {
    text-align: left;
}

/* !important: the admin's own td padding outranks this in inlines. */
.tablewrap tbody td {
    padding: 6px 10px !important;
    border-top: 1px solid var(--table-border-inner, var(--hairline-color));
    border-right: 1px solid var(--table-border-inner, var(--hairline-color));
    border-bottom: none;
    border-left: none;
    background: var(--body-bg);
    color: var(--body-loud-color);
}

.tablewrap tbody tr td:last-child {
    border-right: none;
}

.tablewrap table:not(:has(thead)) tbody tr:first-child td {
    border-top: none;
}

.tablewrap td[style*="text-align:right"] {
    text-align: right;
}

.tablewrap tbody tr:nth-child(even) td {
    background: var(--primary-100, var(--darkened-bg));
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .tablewrap tbody tr:nth-child(even) td {
        background: var(--primary-825, var(--darkened-bg));
    }
}

html[data-theme="dark"] .tablewrap tbody tr:nth-child(even) td {
    background: var(--primary-825, var(--darkened-bg));
}

/* A tabular inline renders a readonly field as <p>{{ contents }}</p>. A block
   in the contents (a table, a <div>) closes that <p>, and the parser leaves an
   empty <p></p> on either side of it, each carrying paragraph margins. */
.inline-group .tabular td > p:empty {
    display: none;
}

/* The table is then the cell's first content. The specificity also outranks a
   theme's older `p + .tablewrap` pull-up, which would still match a hidden <p>. */
.inline-group .tabular td > p:empty + .tablewrap {
    margin-top: 0;
}