.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.7rem;
    min-height:46px;
    border:1px solid transparent;
    border-radius:6px;
    padding:.75rem 1.2rem;
    text-decoration:none;
    font-weight:600;
    font-size:.85rem
}

.button-primary {
    background:var(--color-sidebar);
    color:#fff
}

.button-primary:hover {
    background:#41483b
}

.button-secondary {
    background:white;
    border-color:var(--color-border);
    color:var(--color-text)
}

.button-full {
    width:100%
}

.icon-button {
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid var(--color-border);
    background:transparent;
    border-radius:6px
}

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

.field {
    display:flex;
    flex-direction:column;
    gap:.45rem;
    min-width:0
}

.field label {
    font-size:.78rem;
    font-weight:600
}

.input {
    width:100%;
    min-height:46px;
    padding:.75rem .9rem;
    background:var(--color-surface);
    border:1px solid #d7dace;
    border-radius:6px;
    color:var(--color-text)
}

.input::placeholder {
    color:#92978a
}

.input[aria-invalid=true] {
    border-color:var(--color-danger)
}

.field small {
    font-size:.75rem;
    color:var(--color-muted)
}

.field .field-error {
    color:var(--color-danger)
}

.card {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    overflow:hidden;
    min-width:0
}

.card-header {
    padding:1.5rem 1.5rem 0;
    display:flex;
    justify-content:space-between;
    gap:1rem
}

.card-header p {
    font-size:.76rem;
    color:var(--color-muted);
    margin-top:.35rem
}

.badge {
    display:inline-flex;
    align-items:center;
    padding:.35rem .7rem;
    border-radius:4px;
    background:#f0f1eb;
    font-size:.69rem;
    white-space:nowrap
}

.badge-gold {
    background:var(--color-gold-soft);
    color:#80662f;
    border:1px solid #e8ddc4
}

.badge-success {
    color:var(--color-success);
    background:#ebf3ed
}

.empty-state {
    text-align:center;
    padding:2.7rem 1.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:235px
}

.empty-icon {
    display:grid;
    place-items:center;
    border:1px solid var(--color-border);
    width:48px;
    height:48px;
    border-radius:50%;
    color:#9a9e8e;
    background:#fafbf7;
    margin-bottom:1rem
}

.empty-state h3 {
    font-weight:500;
    font-size:.9rem
}

.empty-state p {
    color:var(--color-muted);
    font-size:.78rem;
    max-width:350px;
    margin-top:.5rem;
    line-height:1.7
}

.alert {
    padding:1rem 1.2rem;
    border-radius:6px;
    border:1px solid;
    margin:1rem 0;
    font-size:.85rem
}

.alert-success {
    background:#edf5ee;
    border-color:#c9dfcd;
    color:var(--color-success)
}

.alert-error {
    background:#fff2f0;
    border-color:#e8c8c4;
    color:var(--color-danger)
}

.alert ul {
    padding-left:1.3rem;
    margin:.4rem 0 0
}

.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-bottom:2rem
}

.page-heading p {
    color:var(--color-muted);
    font-size:.85rem;
    margin-top:.6rem
}

.page-heading .eyebrow {
    margin-bottom:.5rem
}

.metric {
    padding:1.5rem;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    min-width:0
}

.metric-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.8rem;
    font-size:.76rem;
    color:#666c60
}

.metric-label .icon {
    color:#9c9f90;
    width:17px;
    height:17px
}

.metric-value {
    font-size:2rem;
    line-height:1.4;
    margin:.9rem 0 .3rem;
    color:#969b8b;
    font-weight:400
}

.metric-note {
    font-size:.66rem;
    color:var(--color-muted)
}

.table-scroll {
    overflow-x:auto
}

table {
    border-collapse:collapse;
    width:100%;
    text-align:left
}

caption {
    text-align:left;
    padding:1rem;
    font-weight:600
}

th,td {
    padding:1rem;
    border-bottom:1px solid var(--color-border)
}

th {
    background:var(--color-bg);
    font-size:.8rem
}

.pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
    padding:1rem
}

.pagination a,.pagination>span {
    padding:.5rem;
    min-height:44px
}

.pagination [aria-disabled] {
    color:var(--color-muted)
}

.modal {
    border:1px solid var(--color-border);
    border-radius:var(--radius);
    padding:2rem;
    max-width:480px;
    width:calc(100% - 2rem)
}

.modal::backdrop {
    background:#17201788
}

.modal h2 {
    margin-bottom:1rem
}

.modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:.7rem;
    margin-top:2rem
}

.loading {
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    color:var(--color-muted);
    font-size:.8rem
}

.spinner {
    width:16px;
    height:16px;
    border:2px solid var(--color-border);
    border-top-color:var(--color-gold);
    border-radius:50%;
    animation:spin .8s linear infinite
}

@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}

@media(max-width:550px) {
    .page-heading {
        align-items:flex-start
    }
    .page-heading .badge {
        display:none
    }
    .page-heading h1 {
        font-size:1.85rem
    }
    .metric {
        padding:1.1rem
    }
    .metric-label {
        font-size:.72rem
    }
    .card-header {
        padding:1.3rem 1.2rem 0
    }
}

.button-danger {
    background:var(--color-danger);
    color:#fff
}
.button-danger:hover {
    opacity:.9
}

.demo-banner { padding: .75rem 1rem; background: #fff2cc; color: #513d0c; text-align: center; font-weight: 600; overflow-wrap: anywhere; }

@media (min-width: 801px) { .with-sidebar .demo-banner { margin-left: var(--sidebar-width); } }

/* Keep the focus indicator on the control without changing its geometry. */
.input:focus,.input:focus-visible{outline:none;border-color:var(--color-gold);box-shadow:0 0 0 1px var(--color-gold)}
.input[aria-invalid=true]:focus{border-color:var(--color-danger);box-shadow:0 0 0 1px var(--color-danger)}
.ts-wrapper:focus-within{outline:none}
body .ts-wrapper.single.focus .ts-control,body .ts-wrapper.multi.focus .ts-control{outline:none;outline-offset:0;border-color:var(--color-gold);box-shadow:0 0 0 1px var(--color-gold)}
.ts-control input:focus-visible{outline:none;box-shadow:none}

.ts-dropdown .dropdown-input:focus{outline:none;border-color:var(--color-gold);box-shadow:0 0 0 1px var(--color-gold)}