
/* ========================================================================
 * tinytable CSS - Dark Theme
 * Optimized for dark background websites
 * ======================================================================== */

/* ========================================================================
 * CSS Custom Properties (Theme Variables)
 * ======================================================================== */
.tinytable {
    /* Colors - Dark Theme */
    --tt-text-color: #e0e0e0;                    /* Light gray text */
    --tt-line-color: #888888;                    /* Light gray borders */
    --tt-border-color: var(--tt-line-color);
    --tt-striped-bg: rgba(255, 255, 255, .03);   /* Subtle light stripe */
    --tt-hover-bg: rgba(255, 255, 255, .06);     /* Subtle hover effect */
    --tt-background-color: transparent;          /* Inherit from page background */
    --tt-footnote-bg: var(--tt-background-color);

    /* Spacing */
    --tt-cell-padding: .5rem;
    --tt-cell-padding-sm: calc(var(--tt-cell-padding) / 2);
    --tt-table-margin: .5rem 0;
    --tt-caption-padding: .5rem 0;
    --tt-footnote-padding: .2rem .5rem;
    --tt-footnote-first-padding-top: .5rem;
    --tt-footnote-gap: .1rem;
    --tt-container-padding: 10px;

    /* Typography */
    --tt-font-size-footnote: 0.875rem;
    --tt-font-size-caption: 1rem;
    --tt-font-size-sup: 0.75em;
    --tt-line-height-footnote: 1.25;
    --tt-line-height-footnote-tight: 1.2;
    --tt-font-weight-header: normal;

    /* Alignment */
    --tt-cell-valign: top;
    --tt-header-align: left;
    --tt-header-valign: bottom;
    --tt-caption-align: var(--tt-header-align);
    --tt-caption-side: top;

    /* Layout */
    --tt-table-width: 100%;

    /* Border widths */
    --tt-border-width: 1px;
    --tt-border-width-tbody: 2px;
}

/* ========================================================================
 * Base Table Styles
 * ======================================================================== */
.tinytable {
    width: var(--tt-table-width);
    margin: var(--tt-table-margin);
    border-collapse: collapse;
    background-color: var(--tt-background-color);
    color: var(--tt-text-color);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tinytable *:not(mjx-container):not(mjx-container *) {
    font-family: inherit;
}

/* ========================================================================
 * Cell Styles
 * ======================================================================== */
.tinytable th,
.tinytable td {
    position: relative;
    padding: var(--tt-cell-padding);
    vertical-align: var(--tt-cell-valign);
}

.tinytable thead th {
    text-align: var(--tt-header-align);
    vertical-align: var(--tt-header-valign);
    font-weight: var(--tt-font-weight-header);
    border-bottom: none;
}

.tinytable thead th[align="center"] {
    text-align: center;
}

.tinytable tbody + tbody {
    border-top: var(--tt-border-width-tbody) solid var(--tt-border-color);
}

/* ========================================================================
 * Table Variants
 * ======================================================================== */

/* Small padding variant */
.tinytable-sm th,
.tinytable-sm td {
    padding: var(--tt-cell-padding-sm);
}

/* Bordered variant */
.tinytable-bordered {
    border: var(--tt-border-width) solid var(--tt-border-color);
}

.tinytable-bordered th,
.tinytable-bordered td {
    border: var(--tt-border-width) solid var(--tt-border-color);
}

/* Striped rows variant */
.tinytable-striped tbody tr:nth-of-type(odd) {
    background-color: var(--tt-striped-bg);
}

/* Hover effect variant */
.tinytable-hover tbody tr:hover {
    background-color: var(--tt-hover-bg);
}

/* Responsive wrapper */
.tinytable-responsive {
    width: var(--tt-table-width);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================================================
 * Custom Border System (Pseudo-elements)
 * ======================================================================== */
.tinytable :is(td, th)[class*="tinytable_css_"] {
    position: relative;

    /* Border control variables */
    --border-top: 0;
    --border-right: 0;
    --border-bottom: 0;
    --border-left: 0;

    /* Border color variables */
    --line-color-top: currentColor;
    --line-color-right: currentColor;
    --line-color-bottom: currentColor;
    --line-color-left: currentColor;

    /* Border width variables */
    --line-width-top: 0.1em;
    --line-width-right: 0.1em;
    --line-width-bottom: 0.1em;
    --line-width-left: 0.1em;

    /* Border type variables */
    --line-type-top: solid;
    --line-type-right: solid;
    --line-type-bottom: solid;
    --line-type-left: solid;

    /* Border trim variables */
    --trim-top-left: 0%;
    --trim-top-right: 0%;
    --trim-right-top: 0%;
    --trim-right-bottom: 0%;
    --trim-bottom-left: 0%;
    --trim-bottom-right: 0%;
    --trim-left-top: 0%;
    --trim-left-bottom: 0%;
}

/* Top, left, and right borders using ::before */
.tinytable :is(td, th)[class*="tinytable_css_"]::before {
    content: "";
    position: absolute;
    top: var(--trim-top-left, var(--trim-top-right, 0));
    left: var(--trim-left-top, 0);
    right: var(--trim-right-top, 0);
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-top: calc(var(--border-top) * var(--line-width-top)) var(--line-type-top, solid) var(--line-color-top);
    border-right: calc(var(--border-right) * var(--line-width-right)) var(--line-type-right, solid) var(--line-color-right);
    border-left: calc(var(--border-left) * var(--line-width-left)) var(--line-type-left, solid) var(--line-color-left);
}

/* Bottom border using ::after */
.tinytable :is(td, th)[class*="tinytable_css_"]::after {
    content: "";
    position: absolute;
    left: var(--trim-bottom-left, 0);
    right: var(--trim-bottom-right, 0);
    bottom: var(--trim-left-bottom, var(--trim-right-bottom, 0));
    height: 0;
    border-bottom: calc(var(--border-bottom) * var(--line-width-bottom)) var(--line-type-bottom, solid) var(--line-color-bottom);
    pointer-events: none;
    z-index: 2;
}

/* ========================================================================
 * Container and Layout Components
 * ======================================================================== */
.tinytable-container {
    padding: var(--tt-container-padding);
    overflow-x: auto;
    overflow-y: auto;
    width: auto;
    height: auto;
}

/* ========================================================================
 * Caption Styling
 * ======================================================================== */
.tinytable caption {
    padding: var(--tt-caption-padding);
    caption-side: var(--tt-caption-side);
    font-size: var(--tt-font-size-caption);
    text-align: var(--tt-caption-align);
}

/* ========================================================================
 * Footnotes and Table Footer
 * ======================================================================== */

.tinytable tfoot tr:first-child td {
    padding-top: var(--tt-footnote-first-padding-top);
}

.tinytable tfoot td {
    padding: var(--tt-footnote-padding);
    font-size: var(--tt-font-size-footnote);
    line-height: var(--tt-line-height-footnote);
    background-color: var(--tt-footnote-bg);
}

/* Remove extra gap between footnote rows */
.tinytable tfoot tr + tr td {
    padding-top: var(--tt-footnote-gap);
}

/* Make superscripts not inflate line boxes */
.tinytable tfoot sup {
    font-size: var(--tt-font-size-sup);
    line-height: 0;
    vertical-align: text-top;
}

/* Slightly tighter for wrapped footnote text */
.tinytable tfoot tr:nth-child(n+2) td {
    line-height: var(--tt-line-height-footnote-tight);
}

