:root {
    --psri-primary: #126d72;
    --psri-primary-dark: #0c4d50;
    --psri-danger: #a3332f;
}

body {
    background: #f3f6f8;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.page-body {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.container-xl {
    padding-left: max(var(--tblr-gutter-x, 1rem), env(safe-area-inset-left));
    padding-right: max(var(--tblr-gutter-x, 1rem), env(safe-area-inset-right));
}

.navbar .container-xl {
    min-height: 3.75rem;
}

.navbar-brand a {
    color: inherit;
    text-decoration: none;
}

.panel {
    background: var(--tblr-card-bg);
    border: var(--tblr-card-border-width) solid var(--tblr-card-border-color);
    border-radius: var(--tblr-card-border-radius);
    box-shadow: var(--tblr-card-box-shadow);
    margin-bottom: 1rem;
    padding: 1rem;
}

.panel h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.grid {
    display: grid;
    gap: 1rem;
}

.grid.two {
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.3fr);
}

.grid.three {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
}

.breaker-add-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(360px, 0.95fr) minmax(320px, 34rem);
}

.breaker-wizard,
.breaker-placement-panel {
    margin-bottom: 0;
}

.breaker-placement-panel {
    justify-self: start;
    width: 100%;
}

.stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    margin-bottom: 1rem;
}

.stat-grid.compact {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    margin: 1rem 0 0;
}

.stat {
    background: var(--tblr-card-bg);
    border: var(--tblr-card-border-width) solid var(--tblr-card-border-color);
    border-radius: var(--tblr-card-border-radius);
    box-shadow: var(--tblr-card-box-shadow);
    padding: 1rem;
}

.stat span {
    color: var(--tblr-secondary);
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.stat strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1.1;
    margin-top: .35rem;
}

.section-heading,
.toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.toolbar {
    justify-content: flex-start;
}

.form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

label {
    color: var(--tblr-secondary);
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    font-weight: 700;
    gap: .35rem;
    text-transform: uppercase;
}

.check {
    align-items: center;
    flex-direction: row;
    gap: .5rem;
    text-transform: none;
}

input,
select,
textarea {
    appearance: none;
    background: var(--tblr-bg-forms);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-body-color);
    display: block;
    font: inherit;
    min-height: 2.75rem;
    padding: .4375rem .75rem;
    width: 100%;
}

input[type="checkbox"] {
    appearance: auto;
    min-height: auto;
    padding: 0;
    width: auto;
}

textarea {
    min-height: 4.75rem;
    resize: vertical;
}

.field-row {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
}

button,
.button {
    align-items: center;
    background: var(--psri-primary);
    border: 1px solid var(--psri-primary);
    border-radius: var(--tblr-border-radius);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 2.75rem;
    padding: .4375rem .75rem;
    text-decoration: none;
    touch-action: manipulation;
}

button:hover,
.button:hover {
    background: var(--psri-primary-dark);
    border-color: var(--psri-primary-dark);
    color: #fff;
    text-decoration: none;
}

.button.secondary {
    background: #eef3f6;
    border-color: var(--tblr-border-color);
    color: var(--tblr-body-color);
}

.button.secondary:hover {
    background: #dfe8ee;
    color: var(--tblr-body-color);
}

button.link {
    background: transparent;
    border: 0;
    color: var(--tblr-link-color);
    min-height: 0;
    padding: 0;
}

button.danger {
    color: var(--psri-danger);
}

.dropdown-menu button.dropdown-item {
    background: transparent;
    border: 0;
    color: inherit;
    display: block;
    font-weight: 400;
    justify-content: flex-start;
    min-height: auto;
    text-align: left;
    width: 100%;
}

.dropdown-menu button.dropdown-item:hover {
    background: var(--tblr-dropdown-link-hover-bg);
    color: var(--tblr-dropdown-link-hover-color);
}

.btn-primary {
    background: var(--psri-primary);
    border-color: var(--psri-primary);
}

.btn-primary:hover {
    background: var(--psri-primary-dark);
    border-color: var(--psri-primary-dark);
}

.inline {
    display: inline;
}

.button-row,
.action-cell {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.sort-link {
    color: inherit;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

table {
    border-collapse: collapse;
    min-width: 680px;
    width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--tblr-border-color);
    padding: .625rem .5rem;
    text-align: left;
    vertical-align: top;
}

td:last-child,
th:last-child {
    white-space: nowrap;
}

th {
    color: var(--tblr-secondary);
    font-size: .75rem;
    text-transform: uppercase;
}

tr:last-child td {
    border-bottom: 0;
}

.empty,
.empty-state p,
.muted {
    color: var(--tblr-secondary);
    margin: 0;
}

.empty-state {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.detail-hero {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.detail-hero p {
    color: var(--tblr-secondary);
    margin: .35rem 0 0;
}

dl {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(85px, 1fr));
    margin: 0;
    min-width: 430px;
}

.account-facts {
    grid-template-columns: 1fr;
    min-width: 0;
}

dt {
    color: var(--tblr-secondary);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
}

dd {
    font-weight: 700;
    margin: .125rem 0 0;
}

.tag {
    background: rgba(18, 109, 114, .12);
    border-radius: var(--tblr-border-radius);
    color: var(--psri-primary-dark);
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    margin-left: .35rem;
    padding: .125rem .35rem;
}

.breaker-layout {
    background: #24323a;
    border: 1px solid #152129;
    border-radius: var(--tblr-border-radius);
    display: grid;
    gap: .45rem;
    max-width: 34rem;
    padding: .75rem;
    width: 100%;
}

.breaker-layout-head,
.breaker-layout-row {
    display: grid;
    gap: .45rem;
    grid-template-columns: 1fr 1fr;
}

.breaker-layout-head {
    color: #dce7ec;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

.breaker-space {
    align-content: start;
    background: #f6f8fa;
    border: 1px solid #d5dee4;
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-body-color);
    display: grid;
    gap: .15rem;
    min-height: 4.25rem;
    padding: .45rem .55rem;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
}

.breaker-space strong,
.breaker-space small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breaker-space strong {
    font-size: .82rem;
    line-height: 1.15;
    padding-right: 1.65rem;
}

.breaker-space small {
    color: var(--tblr-secondary);
    font-size: .7rem;
}

.breaker-number {
    align-items: center;
    background: #dbe5ea;
    border-radius: 999px;
    color: #21313a;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    height: 1.35rem;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0 .25rem;
    position: absolute;
    right: .45rem;
    top: .45rem;
}

.empty-space {
    background: #ffffff;
    border-style: dashed;
}

.empty-space:hover {
    background: #edf8f8;
    border-color: var(--psri-primary);
    color: var(--tblr-body-color);
}

.read-only:hover {
    background: #ffffff;
    border-color: #d5dee4;
}

.occupied {
    background: #e7edf1;
    border-color: #aebcc5;
}

.span-start {
    border-left: .35rem solid var(--psri-primary);
}

.span-continue {
    background: #d9e2e7;
    border-left: .35rem solid #7d8e98;
}

.blank {
    visibility: hidden;
}

.report p {
    color: var(--tblr-secondary);
    margin: .35rem 0 0;
}

.attachment-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.attachment-card {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem;
}

.attachment-card img,
.pdf-tile {
    aspect-ratio: 4 / 3;
    background: #eef3f6;
    border-radius: var(--tblr-border-radius);
    display: block;
    object-fit: cover;
    width: 100%;
}

.pdf-tile {
    align-items: center;
    color: var(--psri-primary-dark);
    display: flex;
    font-size: 1.4rem;
    font-weight: 800;
    justify-content: center;
}

.attachment-meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.attachment-meta strong {
    overflow-wrap: anywhere;
}

.attachment-meta span {
    color: var(--tblr-secondary);
    font-size: .75rem;
}

.audit-details {
    max-width: 420px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.user-table {
    min-width: 980px;
}

.user-table input,
.user-table select {
    min-height: 2.35rem;
}

.user-table button {
    min-height: 2.35rem;
    white-space: nowrap;
}

.user-active {
    color: var(--tblr-body-color);
    font-size: .875rem;
    font-weight: 600;
}

.login-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100dvh - 4rem);
}

.login-card {
    width: min(100%, 24rem);
}

code {
    background: #eef3f6;
    border-radius: var(--tblr-border-radius);
    padding: .0625rem .25rem;
}

pre {
    background: #18232b;
    border-radius: var(--tblr-border-radius);
    color: #eef5f7;
    margin: 0;
    overflow-x: auto;
    padding: .75rem;
    width: 100%;
}

pre code {
    background: transparent;
    padding: 0;
}

@media (max-width: 1180px) {
    .grid.three {
        grid-template-columns: 1fr 1fr;
    }

    .stat-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}

@media (max-width: 960px) {
    .grid.two,
    .grid.three,
    .breaker-add-grid {
        grid-template-columns: 1fr;
    }

    .stat-grid,
    .stat-grid.compact {
        grid-template-columns: 1fr 1fr;
    }

    .detail-hero {
        flex-direction: column;
    }

    dl {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 820px) {
    .navbar-collapse {
        border-top: 1px solid var(--tblr-border-color);
        margin-top: .5rem;
        padding-top: .5rem;
    }

    .panel {
        padding: .875rem;
    }

    table {
        min-width: 620px;
    }
}

@media (max-width: 720px) {
    .grid.two,
    .grid.three,
    .breaker-add-grid,
    .stat-grid,
    .stat-grid.compact,
    dl {
        grid-template-columns: 1fr;
    }

    .section-heading,
    .toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar .button,
    .toolbar button {
        width: 100%;
    }

    .breaker-layout {
        max-width: none;
    }

    .breaker-space {
        min-height: 4.75rem;
    }
}