/* Optional: make regular buttons a bit thinner site-wide */
.btn {
    --bs-btn-padding-y: 0.3rem;
}
.btn-sm {
    --bs-btn-padding-y: 0.2rem;
}

/* Extra-small buttons (Bootstrap 6 style). Listed after .btn so this size wins. */
.btn-xs {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-border-radius: 0.25rem;
    line-height: 1.4;
}

/* Styled / depth look (gradient + subtle shadow) */
.btn-styled {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-styled:hover {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.08));
}
.btn-styled:active {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.1));
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Extra-extra-small button – thinner than native while still usable */
.btn-xxs {
    --bs-btn-padding-y: 0.05rem; /* ~0.8px */
    --bs-btn-padding-x: 0.4rem; /* comfortable horizontal space */
    --bs-btn-font-size: 0.75rem; /* 12px */
    --bs-btn-border-radius: 0.25rem;
    --bs-btn-line-height: 1.2;
    line-height: 1.2;
    padding: 1px 0.4rem; /* explicit override for maximum thinness */
    min-height: 0; /* prevent any min-height interference */
}

    /* Optional: slightly tighter when combined with other styles */
    .btn-xxs.btn-styled {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 1px rgba(0, 0, 0, 0.06);
    }

/* Bootstrap reboot sets border-collapse: collapse, which removes the browser's
   default 2px gap between cells. Restore it for tables that did not opt out.
   Tables with cellspacing="0", and GridViews (rules attribute), stay tight. */
table:not([cellspacing="0"]):not([rules]) {
    border-collapse: separate;
    border-spacing: 2px;
}

/* GridView cell borders come from the rules attribute. Bootstrap sets
   td/th border-width to 0. Draw a horizontal line between rows instead. */
table[rules] > tbody > tr > td,
table[rules] > tbody > tr > th,
table[rules] > tr > td,
table[rules] > tr > th {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: #808080;
}
table[rules] > tbody > tr:first-child > td,
table[rules] > tbody > tr:first-child > th,
table[rules] > tr:first-child > td,
table[rules] > tr:first-child > th {
    border-top-width: 1px;
}

/* HTML tables that set border="1" (not GridViews) kept a line around each cell. */
table[border]:not([border="0"]):not([rules]) > tbody > tr > td,
table[border]:not([border="0"]):not([rules]) > tbody > tr > th,
table[border]:not([border="0"]):not([rules]) > tr > td,
table[border]:not([border="0"]):not([rules]) > tr > th {
    border-width: 1px;
    border-style: solid;
}