.ops-dashboard {
    --ops-blue: #2f6df6;
    --ops-blue-dark: #255bd4;
    --ops-bg: #eef3f8;
    --ops-card: #fff;
    --ops-text: #172033;
    --ops-muted: #8a99ad;
    --ops-border: #dbe4ee;
    --ops-green: #16a34a;
    --ops-green-soft: #dcfce7;
    --ops-red: #ef4444;
    --ops-red-soft: #fee2e2;
    --ops-amber: #f59e0b;
    --ops-amber-soft: #fef3c7;
    color: var(--ops-text);
    display: grid;
    gap: 1.5rem;
}

.ops-dashboard__header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.ops-dashboard__title h1 {
    font-size: 1.7rem;
    font-weight: 900;
    margin: 0;
}

.ops-breadcrumb {
    align-items: center;
    color: var(--ops-muted);
    display: flex;
    font-weight: 700;
    gap: .45rem;
    margin-bottom: .35rem;
}

.ops-breadcrumb strong {
    color: var(--ops-blue);
}

.ops-button {
    align-items: center;
    background: var(--ops-blue);
    border: 1px solid var(--ops-blue);
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    font-weight: 850;
    gap: .5rem;
    justify-content: center;
    min-height: 44px;
    padding: .7rem 1.1rem;
    text-decoration: none;
}

.ops-button:hover {
    background: var(--ops-blue-dark);
    color: #fff;
}

.ops-panel {
    background: var(--ops-card);
    border: 1px solid var(--ops-border);
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(22, 34, 51, .06);
}

.ops-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 2fr) minmax(320px, .95fr);
}

.ops-panel {
    overflow: hidden;
}

.ops-panel__header {
    align-items: center;
    border-bottom: 1px solid #edf1f5;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.ops-panel__header h2 {
    font-size: 1.03rem;
    font-weight: 900;
    margin: 0;
}

.ops-filter-panel {
    padding: 1.25rem;
}

.ops-filter-panel__header h2 {
    align-items: center;
    display: flex;
    font-size: 1.05rem;
    font-weight: 900;
    gap: .5rem;
    margin: 0 0 1rem;
}

.ops-filter-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.ops-filter-field {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--ops-border);
    border-radius: 9px;
    color: #4b5b72;
    display: flex;
    gap: .55rem;
    grid-column: span 3;
    min-height: 44px;
    padding: 0 .8rem;
}

.ops-filter-field--wide {
    grid-column: span 6;
}

.ops-filter-field--date {
    grid-column: span 2;
}

.ops-filter-field input,
select.ops-filter-field {
    /*background: transparent;
    border: 0;*/
    color: #4b5b72;
    font: inherit;
    font-weight: 750;
    outline: 0;
    width: 100%;
}

.ops-filter-field input{
    background: transparent;
    border: 0;
    color: #4b5b72;
    font: inherit;
    font-weight: 750;
    outline: 0;
    width: 100%;
}

select.ops-filter-field {
    appearance: auto;
}

.ops-filter-actions {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.ops-reset {
    align-items: center;
    color: #8a99ad;
    display: inline-flex;
    font-weight: 800;
    gap: .45rem;
    text-decoration: none;
}

.ops-table-toolbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.ops-checkline {
    align-items: center;
    color: #66758d;
    display: flex;
    font-weight: 800;
    gap: .7rem;
    margin: 0;
}

.ops-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
}

.ops-count {
    background: #fef3c7;
    border-radius: 999px;
    color: #9a6700;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    min-width: 28px;
    padding: .22rem .55rem;
}

.ops-link {
    color: var(--ops-blue);
    font-weight: 900;
    text-decoration: none;
}

.ops-search {
    border-bottom: 1px solid #edf1f5;
    padding: .8rem 1.25rem;
}

.ops-search input {
    border: 1px solid var(--ops-border);
    border-radius: 9px;
    min-height: 40px;
    padding: .55rem .8rem;
    width: 100%;
}

.ops-table {
    margin: 0;
}

.ops-table th {
    background: #f8fafc;
    color: #66758d;
    font-size: .84rem;
    font-weight: 900;
    padding: .85rem 1.25rem;
}

.ops-table td {
    border-top: 1px solid #edf1f5;
    padding: .9rem 1.25rem;
    vertical-align: middle;
}

.ops-table--requests th:first-child,
.ops-table--requests td:first-child {
    width: 42px;
}

.ops-reference {
    background: #eaf2ff;
    border-radius: 6px;
    color: var(--ops-blue);
    font-weight: 950;
    padding: .12rem .35rem;
    text-decoration: none;
}

.ops-person {
    align-items: center;
    display: flex;
    gap: .75rem;
}

.ops-person small {
    color: #9aa7b8;
    display: block;
    font-weight: 800;
}

.ops-avatar {
    align-items: center;
    background: #dbeafe;
    border-radius: 50%;
    color: var(--ops-blue);
    display: inline-flex;
    flex: 0 0 34px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    overflow: hidden;
    width: 34px;
}

.ops-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ops-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    padding: .28rem .65rem;
}

.ops-pill--pending { background: var(--ops-amber-soft); color: #6b4a00; }
.ops-pill--orange { background: #ffedd5; color: #c2410c; }
.ops-pill--blue { background: #dbeafe; color: var(--ops-blue); }
.ops-pill--green { background: var(--ops-green-soft); color: var(--ops-green); }
.ops-pill--red { background: var(--ops-red-soft); color: #dc2626; }
.ops-pill--muted { background: #eef2f7; color: #64748b; }

.ops-dot {
    background: var(--ops-dot-color, var(--ops-blue));
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    margin-right: .45rem;
    width: 8px;
}

.ops-row-actions {
    display: flex;
    gap: .45rem;
}

.ops-action {
    border: 0;
    border-radius: 8px;
    color: #4b5b72;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    min-height: 32px;
    padding: .4rem .7rem;
    text-decoration: none;
}

.ops-action--muted { background: #f1f5f9; }
.ops-action--success { background: var(--ops-green-soft); color: #15803d; }
.ops-action--danger { background: var(--ops-red-soft); color: #dc2626; }

.ops-icon-action {
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    color: #64748b;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    text-decoration: none;
    width: 32px;
}

.ops-absent-list {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

.ops-absent {
    align-items: center;
    display: flex;
    gap: .8rem;
}

.ops-absent__meta {
    flex: 1;
}

.ops-absent__name {
    display: block;
    font-weight: 900;
}

.ops-absent__detail {
    color: #8b9ab0;
    display: block;
    font-size: .88rem;
}

@media (max-width: 1200px) {
    .ops-filter-field,
    .ops-filter-field--wide,
    .ops-filter-field--date {
        grid-column: span 6;
    }

    .ops-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .ops-dashboard__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ops-filter-field,
    .ops-filter-field--wide,
    .ops-filter-field--date {
        grid-column: 1 / -1;
    }

    .ops-filter-actions,
    .ops-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ops-table-actions {
        justify-content: stretch;
    }

    .ops-table th,
    .ops-table td {
        padding: .8rem;
    }
}