:root {
    --erp-surface: rgba(255, 255, 255, 0.92);
    --erp-surface-strong: #ffffff;
    --erp-border: rgba(226, 232, 240, 0.92);
    --erp-text: #14213d;
    --erp-text-soft: #64748b;
    --erp-accent: #2563eb;
    --erp-accent-strong: #1d4ed8;
    --erp-sidebar-top: #1597a8;
    --erp-sidebar-bottom: #0e7d8d;
    --erp-shadow: 0 22px 45px rgba(15, 23, 42, 0.06);
    --erp-radius-card: 22px;
    --erp-radius-control: 14px;
}

html,
body {
    min-height: 100%;
}

body.erp-shell-modern {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    color: var(--erp-text);
    background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.erp-shell-modern .wrapper {
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.erp-shell-modern .content-wrapper {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
    min-height: calc(100vh - 57px);
    flex: 1 0 auto;
}

body.erp-shell-modern .content {
    flex: 1 0 auto;
}

body.erp-shell-modern .content,
body.erp-shell-modern .container-fluid {
    padding-top: 18px;
    padding-bottom: 24px;
}

body.erp-shell-modern .main-header.navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

body.erp-shell-modern .main-header .nav-link,
body.erp-shell-modern .main-header .navbar-nav .nav-item {
    color: var(--erp-text) !important;
}

body.erp-shell-modern .main-sidebar {
    background: linear-gradient(180deg, var(--erp-sidebar-top) 0%, var(--erp-sidebar-bottom) 100%) !important;
    box-shadow: 14px 0 40px rgba(15, 23, 42, 0.12);
}

body.erp-shell-modern .brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

body.erp-shell-modern .brand-text {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

body.erp-shell-modern .sidebar {
    padding: 14px 10px 22px;
}

body.erp-shell-modern .nav-sidebar > .nav-item {
    margin-bottom: 10px;
}

body.erp-shell-modern .nav-sidebar .nav-link {
    border-radius: 18px;
    min-height: 58px;
    padding: 0.95rem 1rem;
    background: rgba(255, 255, 255, 0.88);
    color: var(--erp-text) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.erp-shell-modern .nav-sidebar .nav-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

body.erp-shell-modern .nav-sidebar .nav-link.active,
body.erp-shell-modern .nav-sidebar .menu-open > .nav-link {
    background: linear-gradient(135deg, #11a9c1 0%, #178fb1 100%) !important;
    color: #fff !important;
    border-color: transparent;
}

body.erp-shell-modern .nav-sidebar .nav-treeview {
    padding-top: 8px;
}

body.erp-shell-modern .nav-sidebar .nav-treeview > .nav-item {
    margin-bottom: 8px;
}

body.erp-shell-modern .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    min-height: 52px;
    padding-left: 1.25rem;
}

body.erp-shell-modern .card {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-card);
    box-shadow: var(--erp-shadow);
    overflow: hidden;
}

body.erp-shell-modern .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    padding: 1.1rem 1.35rem 0.95rem;
}

body.erp-shell-modern .card-title,
body.erp-shell-modern h1,
body.erp-shell-modern h2,
body.erp-shell-modern h3,
body.erp-shell-modern h4,
body.erp-shell-modern h5,
body.erp-shell-modern h6 {
    color: var(--erp-text);
}

body.erp-shell-modern .card-body,
body.erp-shell-modern .card-footer {
    padding: 1.25rem 1.35rem;
}

body.erp-shell-modern .btn {
    border-radius: 14px;
    font-weight: 700;
    box-shadow: none;
}

body.erp-shell-modern .btn-primary,
body.erp-shell-modern .btn-info,
body.erp-shell-modern .btn-success {
    border-color: transparent;
}

body.erp-shell-modern .btn-primary {
    background: linear-gradient(135deg, var(--erp-accent), var(--erp-accent-strong));
}

body.erp-shell-modern .btn-info {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

body.erp-shell-modern .btn-success {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

body.erp-shell-modern .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
    color: #fff;
}

body.erp-shell-modern .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
}

body.erp-shell-modern .form-control,
body.erp-shell-modern .custom-select,
body.erp-shell-modern select.form-control {
    min-height: 46px;
    border-radius: var(--erp-radius-control);
    border: 1px solid #d9e2ef;
    background: rgba(255, 255, 255, 0.98);
    color: var(--erp-text);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

body.erp-shell-modern textarea.form-control {
    min-height: 120px;
}

body.erp-shell-modern .form-control:focus,
body.erp-shell-modern .custom-select:focus,
body.erp-shell-modern .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: rgba(37, 99, 235, 0.38);
    box-shadow: 0 0 0 0.18rem rgba(37, 99, 235, 0.12);
}

body.erp-shell-modern .select2-container--bootstrap4 .select2-selection {
    min-height: 46px;
    border-radius: var(--erp-radius-control);
    border: 1px solid #d9e2ef;
}

body.erp-shell-modern .table {
    background: transparent;
    color: var(--erp-text);
}

body.erp-shell-modern .table thead th {
    background: #f8fbff;
    color: #475569;
    border-bottom: 1px solid #dbe4f0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.erp-shell-modern .table td,
body.erp-shell-modern .table th {
    vertical-align: middle;
    border-color: #edf2f7;
}

body.erp-shell-modern .table-hover tbody tr:hover {
    background: rgba(37, 99, 235, 0.04);
}

body.erp-shell-modern .breadcrumb {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}

body.erp-shell-modern .breadcrumb-item,
body.erp-shell-modern .breadcrumb-item a,
body.erp-shell-modern .text-muted,
body.erp-shell-modern small,
body.erp-shell-modern .small {
    color: var(--erp-text-soft) !important;
}

body.erp-shell-modern .main-footer {
    background: rgba(255, 255, 255, 0.88);
    border-top: 1px solid rgba(226, 232, 240, 0.88);
    color: var(--erp-text-soft);
    margin-top: auto;
}

body.erp-shell-modern .main-footer strong {
    color: var(--erp-text);
}

body.erp-shell-modern .content-wrapper .row {
    row-gap: 18px;
}

body.erp-shell-modern .badge {
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    font-weight: 700;
}

body.erp-shell-modern .login-page {
    background:
        radial-gradient(circle at top left, rgba(17, 169, 193, 0.22), transparent 28%),
        linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%) !important;
}

body.erp-login-modern {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
}

body.erp-login-modern .login-box .card {
    border-radius: 26px !important;
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08) !important;
    background: rgba(255, 255, 255, 0.94);
}

body.erp-login-modern .form-control {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid #d9e2ef;
}

body.erp-login-modern .btn-primary {
    background: linear-gradient(135deg, var(--erp-accent), var(--erp-accent-strong));
    border-color: transparent;
    border-radius: 14px;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    body.erp-shell-modern .content,
    body.erp-shell-modern .container-fluid {
        padding-top: 14px;
        padding-bottom: 18px;
    }

    body.erp-shell-modern .main-header.navbar {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    body.erp-shell-modern .nav-sidebar .nav-link {
        min-height: 52px;
    }
}