:root {
    --qp-main-bg: #f5f8fc;
    --qp-main-surface: #ffffff;
    --qp-main-surface-soft: #f8fbff;
    --qp-main-border: #dbe4ef;
    --qp-main-text: #142033;
    --qp-main-muted: #5f7087;
    --qp-main-primary: #4b75ad;
    --qp-main-primary-strong: #376192;
    --qp-main-primary-soft: rgba(75, 117, 173, 0.13);
    --qp-main-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

body:not(.login-page) {
    background: var(--qp-main-bg);
    color: var(--qp-main-text);
}

.content-wrapper,
.right-side {
    background:
        radial-gradient(circle at 50% 0%, rgba(75, 117, 173, 0.10), transparent 28rem),
        linear-gradient(180deg, #f9fbff 0%, var(--qp-main-bg) 100%) !important;
}

.main-header.navbar {
    border-bottom: 1px solid var(--qp-main-border) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(14px);
}

.main-header .nav-link {
    color: var(--qp-main-muted) !important;
}

.main-header .nav-link:hover {
    color: var(--qp-main-primary-strong) !important;
}

.main-sidebar {
    background: var(--qp-main-surface) !important;
    border-right: 1px solid var(--qp-main-border);
    box-shadow: 14px 0 34px rgba(15, 23, 42, 0.05);
}

.brand-link {
    border-bottom: 1px solid var(--qp-main-border) !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.brand-link .brand-text {
    color: var(--qp-main-text) !important;
    font-weight: 800;
}

.sidebar {
    background: transparent !important;
}

#ew-menu {
    padding: 0.45rem 0.55rem;
}

.nav-sidebar .nav-header {
    color: #3f5168 !important;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0;
    padding: 0.78rem 0.72rem 0.32rem;
}

.nav-sidebar > .nav-item > .nav-link {
    min-height: 37px;
    margin: 0.12rem 0;
    border-radius: 8px;
    color: #4f6178 !important;
    font-size: 0.86rem;
    font-weight: 760;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nav-sidebar > .nav-item > .nav-link .nav-icon {
    color: #27384c !important;
    font-size: 1rem;
}

.nav-sidebar > .nav-item > .nav-link .right {
    color: #5a6b80 !important;
    font-size: 0.78rem;
}

.nav-sidebar > .nav-item > .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--qp-main-primary), var(--qp-main-primary-strong)) !important;
    box-shadow: 0 12px 26px rgba(75, 117, 173, 0.24);
}

.nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar > .nav-item > .nav-link.active .right {
    color: #ffffff !important;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    color: #ffffff !important;
    background: #5d83b8 !important;
    box-shadow: 0 10px 22px rgba(75, 117, 173, 0.18);
    transform: translateY(-1px);
}

.nav-sidebar > .nav-item > .nav-link:hover .nav-icon,
.nav-sidebar > .nav-item > .nav-link:hover .right {
    color: #ffffff !important;
}

.nav-sidebar .nav-treeview {
    padding-left: 0.35rem;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    margin: 0.08rem 0 0.08rem 1rem;
    border-radius: 7px;
    color: #64748b !important;
    font-size: 0.82rem;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    color: #2f557f !important;
    background: var(--qp-main-primary-soft) !important;
    box-shadow: none;
    transform: none;
}

.sidebar .form-control-sidebar,
.sidebar .btn-sidebar {
    border-color: #dce5ef !important;
    background: #ffffff !important;
    color: #53657a !important;
}

.sidebar .form-control-sidebar::placeholder {
    color: #8a97a8;
}

.sidebar .btn-sidebar:hover {
    background: #f2f6fb !important;
}

.content-header h1,
.ew-page-title {
    color: var(--qp-main-text);
    font-weight: 850;
    letter-spacing: 0;
}

.card,
.ew-card,
.ew-grid,
.ew-list-form,
.ew-view-form,
.ew-add-edit-form {
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    border-radius: 8px !important;
    background: var(--qp-main-surface) !important;
    box-shadow: var(--qp-main-shadow);
}

.card-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: linear-gradient(180deg, #ffffff, var(--qp-main-surface-soft)) !important;
}

.table,
.ew-table {
    color: var(--qp-main-text);
}

.table thead th,
.ew-table thead th {
    border-bottom-color: var(--qp-main-border) !important;
    background: #f8fbff;
    color: #34465d;
    font-weight: 800;
}

.table td,
.table th,
.ew-table td,
.ew-table th {
    border-top-color: #e7edf5 !important;
}

.btn-primary,
.ew-btn-primary {
    border-color: var(--qp-main-primary) !important;
    background: linear-gradient(135deg, var(--qp-main-primary), var(--qp-main-primary-strong)) !important;
    box-shadow: 0 12px 24px rgba(75, 117, 173, 0.20);
}

.btn-primary:hover,
.ew-btn-primary:hover {
    border-color: var(--qp-main-primary-strong) !important;
    filter: brightness(1.02);
}

.form-control,
.custom-select,
.select2-container--bootstrap4 .select2-selection {
    border-color: #d8e2ef !important;
    border-radius: 7px !important;
}

.form-control:focus,
.custom-select:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--qp-main-primary) !important;
    box-shadow: 0 0 0 0.16rem rgba(75, 117, 173, 0.16) !important;
}

/* Compact 2 x 2 action grid used in PHPMaker process-version rows. */
.qp-process-row-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 28px) !important;
    grid-auto-rows: 27px;
    gap: 3px;
    width: max-content;
    margin: 0 auto;
}

.qp-process-row-action.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 27px;
    min-width: 0;
    padding: 0;
    border: 1px solid #d2d6de;
    border-radius: 3px;
    background: #fff;
    color: #34465d;
    box-shadow: none;
}

.qp-process-row-action.btn:hover,
.qp-process-row-action.btn:focus {
    border-color: #b8bec5;
    background: #f4f6f9;
    color: #24364b;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .main-sidebar {
        box-shadow: 18px 0 42px rgba(15, 23, 42, 0.14);
    }
}