/*
| OperaFlow Admin UI Standard
| Stage30F2B
| Purpose: consistent, readable, centered and page-logical admin UI.
| Scope: admin layout only, loaded after existing OperaFlow v2 CSS.
*/

:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="mocha-ocher"] {
    --of-admin-primary: var(--of-primary, #0f6f82);
    --of-admin-primary-hover: var(--of-primary-hover, #0b5f70);
    --of-admin-primary-text: #ffffff;
    --of-admin-secondary-bg: rgba(255, 255, 255, 0.94);
    --of-admin-secondary-text: var(--of-text, #142033);
    --of-admin-border: var(--of-border, rgba(20, 32, 51, 0.16));
    --of-admin-danger: #dc2626;
    --of-admin-danger-hover: #b91c1c;
    --of-admin-success: #047857;
    --of-admin-success-soft: rgba(4, 120, 87, 0.12);
    --of-admin-warning: #b45309;
    --of-admin-warning-soft: rgba(180, 83, 9, 0.14);
    --of-admin-muted: var(--of-muted, #53647a);
    --of-admin-card: var(--of-card, #ffffff);
    --of-admin-table-head: rgba(15, 111, 130, 0.11);
    --of-admin-table-head-text: #123044;
    --of-admin-table-row: rgba(255, 255, 255, 0.96);
    --of-admin-table-hover: rgba(15, 111, 130, 0.065);
    --of-admin-shadow-soft: 0 10px 26px rgba(20, 32, 51, 0.10);
}

html[data-theme="dark"] {
    --of-admin-secondary-bg: rgba(15, 23, 42, 0.86);
    --of-admin-secondary-text: #e5eef8;
    --of-admin-border: rgba(226, 232, 240, 0.18);
    --of-admin-muted: #b8c5d6;
    --of-admin-card: rgba(15, 23, 42, 0.92);
    --of-admin-table-head: rgba(34, 211, 238, 0.12);
    --of-admin-table-head-text: #eaf6ff;
    --of-admin-table-row: rgba(15, 23, 42, 0.88);
    --of-admin-table-hover: rgba(34, 211, 238, 0.09);
}

/* Buttons: readable, centered text, clear hierarchy */
.main .content .btn,
.main .content a.btn,
.main .content button.btn,
.main .content input[type="submit"].btn,
.main .content form button:not([class]),
.main .content form input[type="submit"]:not([class]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
    border: 1px solid var(--of-admin-border) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease !important;
}

.main .content .btn:hover,
.main .content form button:not([class]):hover,
.main .content form input[type="submit"]:not([class]):hover {
    transform: translateY(-1px);
    box-shadow: var(--of-admin-shadow-soft) !important;
}

.main .content .btn:focus-visible,
.main .content button:focus-visible,
.main .content input[type="submit"]:focus-visible {
    outline: 3px solid rgba(15, 111, 130, .28) !important;
    outline-offset: 2px !important;
}

.main .content .btn-primary,
.main .content .of-btn-primary,
.main .content form button[type="submit"]:not([class]),
.main .content form input[type="submit"]:not([class]) {
    background: var(--of-admin-primary) !important;
    border-color: var(--of-admin-primary) !important;
    color: var(--of-admin-primary-text) !important;
}

.main .content .btn-primary:hover,
.main .content .of-btn-primary:hover,
.main .content form button[type="submit"]:not([class]):hover,
.main .content form input[type="submit"]:not([class]):hover {
    background: var(--of-admin-primary-hover) !important;
    border-color: var(--of-admin-primary-hover) !important;
    color: #ffffff !important;
}

.main .content .btn-secondary,
.main .content .btn-light,
.main .content .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.of-btn-primary):not(.of-btn-danger) {
    background: var(--of-admin-secondary-bg) !important;
    border-color: var(--of-admin-border) !important;
    color: var(--of-admin-secondary-text) !important;
}

.main .content .btn-danger,
.main .content .of-btn-danger,
.main .content .danger,
.main .content .btnDanger {
    background: var(--of-admin-danger) !important;
    border-color: var(--of-admin-danger) !important;
    color: #ffffff !important;
}

.main .content .btn-danger:hover,
.main .content .of-btn-danger:hover,
.main .content .danger:hover,
.main .content .btnDanger:hover {
    background: var(--of-admin-danger-hover) !important;
    border-color: var(--of-admin-danger-hover) !important;
    color: #ffffff !important;
}

.main .content .btn-success {
    background: var(--of-admin-success) !important;
    border-color: var(--of-admin-success) !important;
    color: #ffffff !important;
}

.main .content .btn-warning {
    background: var(--of-admin-warning) !important;
    border-color: var(--of-admin-warning) !important;
    color: #ffffff !important;
}

.main .content .btn-sm {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

.main .content .btn-group,
.main .content .actions,
.main .content .table-actions,
.main .content .of-table-actions,
.main .content .page-actions,
.main .content .toolbar,
.main .content .filters,
.main .content .filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Tables: clear headers, readable rows, controlled actions */
.main .content .table-wrap,
.main .content .table-responsive,
.main .content .of-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
}

.main .content table,
.main .content .table,
.main .content .of-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--of-admin-secondary-text);
}

.main .content table thead th,
.main .content .table thead th,
.main .content .of-table thead th {
    background: var(--of-admin-table-head) !important;
    color: var(--of-admin-table-head-text) !important;
    font-weight: 900 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--of-admin-border) !important;
    text-align: left !important;
    vertical-align: middle !important;
}

.main .content table tbody td,
.main .content .table tbody td,
.main .content .of-table tbody td {
    background: var(--of-admin-table-row) !important;
    color: var(--of-admin-secondary-text) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--of-admin-border) !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
}

.main .content table tbody tr:hover td,
.main .content .table tbody tr:hover td,
.main .content .of-table tbody tr:hover td {
    background: var(--of-admin-table-hover) !important;
}

.main .content table td .btn,
.main .content .table td .btn,
.main .content .of-table td .btn {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

/* Pagination: visible, compact, high contrast */
.main .content nav[aria-label="Pagination Navigation"],
.main .content nav[role="navigation"][aria-label*="Pagination"],
.main .content .pagination,
.main .content .of-pagination,
.main .content .cli-pagination,
.main .content .wo-pagination,
.main .content .inv-pagination,
.main .content .pay-pagination,
.main .content .pagination-wrap {
    margin-top: 16px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: var(--of-admin-secondary-text) !important;
}

.main .content nav[aria-label="Pagination Navigation"] a,
.main .content nav[aria-label="Pagination Navigation"] span,
.main .content nav[role="navigation"][aria-label*="Pagination"] a,
.main .content nav[role="navigation"][aria-label*="Pagination"] span,
.main .content .pagination a,
.main .content .pagination span {
    color: var(--of-admin-secondary-text) !important;
    border-color: var(--of-admin-border) !important;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.main .content nav[aria-label="Pagination Navigation"] span[aria-current="page"] > span {
    background: var(--of-admin-primary) !important;
    border-color: var(--of-admin-primary) !important;
    color: #ffffff !important;
}

.main .content nav[aria-label="Pagination Navigation"] svg,
.main .content nav[role="navigation"][aria-label*="Pagination"] svg,
.main .content .pagination svg {
    width: 18px !important;
    height: 18px !important;
}

/* Text contrast: important information must be readable */
.main .content .muted,
.main .content .text-muted,
.main .content small,
.main .content .table-muted,
.main .content .of-table-muted {
    color: var(--of-admin-muted) !important;
}

.main .content .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 11px;
    border-radius: 999px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.main .content .badge.bg-success,
.main .content .badge.success {
    background: var(--of-admin-success-soft) !important;
    color: var(--of-admin-success) !important;
}

.main .content .badge.bg-warning,
.main .content .badge.warning {
    background: var(--of-admin-warning-soft) !important;
    color: var(--of-admin-warning) !important;
}

.main .content .badge.bg-danger,
.main .content .badge.danger {
    background: rgba(220, 38, 38, 0.12) !important;
    color: var(--of-admin-danger) !important;
}

/* Forms: readable fields and logical spacing */
.main .content .form-control,
.main .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.main .content select,
.main .content textarea {
    min-height: 42px;
    border-radius: 14px;
    border-color: var(--of-admin-border);
    color: var(--of-admin-secondary-text);
}

.main .content label {
    color: var(--of-admin-secondary-text);
    font-weight: 800;
}

@media (max-width: 760px) {
    .main .content .btn,
    .main .content a.btn,
    .main .content button.btn,
    .main .content form button:not([class]),
    .main .content form input[type="submit"]:not([class]) {
        width: 100%;
        white-space: normal !important;
    }

    .main .content .btn-group,
    .main .content .actions,
    .main .content .table-actions,
    .main .content .of-table-actions,
    .main .content .page-actions,
    .main .content .toolbar,
    .main .content .filters,
    .main .content .filter-row {
        align-items: stretch;
    }

    .main .content table,
    .main .content .table,
    .main .content .of-table {
        min-width: 760px;
    }
}