@import "variables";
@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons.css";

:root {
  --brand-white:      #{$brand-white};
  --brand-red:        #{$brand-red};
  --brand-red-light:  #{$brand-red-light};
  --brand-gray-light: #{$brand-gray-light};
  --brand-text:       #{$brand-text};
  --brand-border:     #{$brand-border};
}

body { background: var(--brand-gray-light); }
@import "layout";
[x-cloak] { display: none !important; }

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-border);
    box-shadow: 0 0 0 .2rem rgba(33, 33, 33, .06);
}

/* Mobile: turn wide tables into stacked cards (no sideways scrolling) */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack tbody,
    .table-stack tr,
    .table-stack td { display: block; width: 100%; }
    .table-stack tr {
        border: 1px solid var(--brand-border);
        border-radius: .5rem;
        padding: .2rem .85rem;
        margin-bottom: .6rem;
        background: #fff;
    }
    .table-stack td {
        border: 0 !important;
        position: relative;
        padding: .45rem 0 .45rem 42% !important;
        text-align: right !important;
        min-height: 2.3rem;
    }
    .table-stack td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: .45rem;
        width: 38%;
        text-align: left;
        font-weight: 600;
        color: var(--brand-text);
    }
    .table-stack td[data-label=""] { padding-left: 0 !important; padding-top: .6rem !important; }
    .table-stack td[data-label=""]::before { content: none; }
    .table-stack td[colspan] { padding-left: 0 !important; text-align: center !important; }
    .table-stack td[colspan]::before { content: none; }
    /* page headers: let the action buttons wrap under the title on small screens */
    .sterna-topbar .small { display: none; }
}