:root {
    --oms-blue-900: #12325d;
    --oms-blue-800: #18457c;
    --oms-blue-700: #215b9c;
    --oms-blue-500: #3d7dd8;
    --oms-blue-200: #d9e7fb;
    --oms-surface: #f4f8ff;
    --oms-surface-2: #eef4ff;
    --oms-border: #d7e2f5;
}

body {
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
}

.bg-oms-page {
    background:
        radial-gradient(circle at top right, rgba(61, 125, 216, 0.12), transparent 24rem),
        linear-gradient(180deg, #f6faff 0%, #eef5ff 100%);
}

.brand-oms {
    background: linear-gradient(135deg, var(--oms-blue-900), var(--oms-blue-700));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-oms {
    border-bottom: 1px solid var(--oms-border);
    box-shadow: 0 8px 24px rgba(20, 52, 100, 0.06);
}

.sidebar-oms {
    background: linear-gradient(180deg, #15355f 0%, #102846 100%);
}

.sidebar-oms .nav-link.active {
    background: rgba(61, 125, 216, 0.22);
    border-left: 3px solid #8fb8ff;
}

.btn-oms,
.btn-primary {
    background: linear-gradient(180deg, #2f7de4 0%, #1f66ce 100%);
    border-color: #1f66ce;
    border-radius: 0.7rem;
    box-shadow: 0 8px 18px rgba(31, 102, 206, 0.18);
}

.btn-outline-primary {
    color: var(--oms-blue-700);
    border-color: var(--oms-blue-500);
}

.card {
    border: 1px solid var(--oms-border);
    box-shadow: 0 14px 32px rgba(18, 50, 93, 0.05);
}

.card-primary.card-outline {
    border-top: 3px solid var(--oms-blue-500);
}

.small-box {
    border-radius: 0.75rem;
    overflow: hidden;
}

.small-box .icon {
    opacity: 0.25;
}

.table thead th {
    background: var(--oms-surface-2);
    color: var(--oms-blue-900);
    border-bottom: 1px solid var(--oms-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(217, 231, 251, 0.24);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--oms-blue-200) !important;
    border-color: var(--oms-border) !important;
}

.workflow-card {
    background: linear-gradient(180deg, #fdfefe 0%, #f3f8ff 100%);
}

.workflow-list dt {
    color: #4c627e;
    font-weight: 600;
}

.workflow-list dd {
    margin-bottom: 0.8rem;
}

.badge {
    letter-spacing: 0.02em;
}

.oms-login-page {
    background: linear-gradient(180deg, #d8d8d8 0%, #cfcfcf 100%);
}

.oms-login-page .login-box {
    width: 800px;
    max-width: calc(100vw - 28px);
}

.oms-login-page .card {
    border-radius: 1.6rem;
    border: 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.oms-login-page .card-body {
    padding: 3rem 4rem 4rem;
}

.oms-login-page .login-logo {
    display: none;
}

.oms-login-brand {
    padding-top: 0.4rem;
}

.oms-login-logo {
    width: 78px;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
    image-rendering: auto;
}

.oms-login-kicker {
    font-size: 1.2rem;
    color: #2b466c;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.oms-login-title {
    font-size: 2.2rem;
    color: #1e2d42;
    font-weight: 500;
    margin-top: 0.15rem;
    margin-bottom: 1.2rem;
}

.oms-auth-logo {
    display: none;
}

.oms-forgot-link {
    color: #6d7d91;
    font-size: 0.98rem;
}

.oms-forgot-link:hover {
    color: #1f66ce;
    text-decoration: none;
}

.oms-login-page .form-control {
    height: calc(2.8rem + 1.3rem);
    font-size: 1.15rem;
    border-radius: 0.75rem;
}

.btn-oms-auth {
    height: 5.2rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.modal-content {
    border-radius: 1rem;
    border: 1px solid var(--oms-border);
}

@media (max-width: 768px) {
    .oms-login-page .login-box {
        width: 100%;
    }

    .oms-login-page .card-body {
        padding: 2rem 1.4rem 2.2rem;
    }

    .oms-login-title {
        font-size: 1.8rem;
    }

    .btn-oms-auth {
        height: 4.2rem;
    }
}