:root {
    --ui-bg: #f6f7f9;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-border: #dde3ea;
    --ui-border-strong: #c4ced8;
    --ui-text: #18202b;
    --ui-muted: #667085;
    --ui-primary: #dc1f2e;
    --ui-primary-strong: #b91724;
    --ui-primary-soft: #fff1f2;
    --ui-success: #16875d;
    --ui-warning: #b7791f;
    --ui-danger: #dc1f2e;
    --ui-info: #2563a8;
    --ui-radius: 8px;
    --ui-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 24px;
    --ui-space-6: 32px;
    --ui-font-sm: 13px;
    --ui-font-md: 14px;
    --ui-font-lg: 18px;
    --ui-sidebar-width: 276px;
}

body.primary {
    --ui-theme: #007bff;
    --ui-theme-strong: #0063c5;
    --ui-theme-soft: #e7f1ff;
    --ui-theme-focus: rgba(0, 123, 255, 0.18);
}

body.secondary {
    --ui-theme: #6c757d;
    --ui-theme-strong: #545d65;
    --ui-theme-soft: #f0f2f4;
    --ui-theme-focus: rgba(108, 117, 125, 0.18);
}

body.danger {
    --ui-theme: #d32535;
    --ui-theme-strong: #a51f28;
    --ui-theme-soft: #fff1f2;
    --ui-theme-focus: rgba(211, 37, 53, 0.18);
}

body.warning {
    --ui-theme: #ffc107;
    --ui-theme-strong: #b18407;
    --ui-theme-soft: #fff8e1;
    --ui-theme-focus: rgba(255, 193, 7, 0.22);
}

body.info {
    --ui-theme: #148ea1;
    --ui-theme-strong: #0f7484;
    --ui-theme-soft: #e7f7fa;
    --ui-theme-focus: rgba(20, 142, 161, 0.18);
}

body.success {
    --ui-theme: #28a745;
    --ui-theme-strong: #269342;
    --ui-theme-soft: #e8f7ee;
    --ui-theme-focus: rgba(40, 167, 69, 0.18);
}

body.dark {
    --ui-theme: #343a40;
    --ui-theme-strong: #2c3037;
    --ui-theme-soft: #eceff2;
    --ui-theme-focus: rgba(52, 58, 64, 0.18);
}

body.ui-modern,
body:has(.ui-page) {
    background: var(--ui-bg) !important;
    color: var(--ui-text);
    letter-spacing: 0;
}

.modern-login-body {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: "Poppins", sans-serif;
    letter-spacing: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.modern-login-shell {
    display: grid;
    grid-template-columns: minmax(420px, 1.1fr) minmax(420px, 0.9fr);
    min-height: 100dvh;
}

.modern-login-visual {
    background: #fff;
    border-right: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 34px;
    position: relative;
}

.modern-login-brand {
    align-items: center;
    display: flex;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.modern-login-brand img {
    max-height: 44px;
    max-width: 170px;
}

.modern-login-hero {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    padding: 36px 0;
}

.modern-login-hero img {
    max-height: 520px;
    max-width: min(620px, 92%);
    object-fit: contain;
}

.modern-login-copy {
    border-top: 1px solid var(--ui-border);
    padding-top: var(--ui-space-5);
}

.modern-login-copy span {
    color: var(--ui-theme, var(--ui-primary));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.modern-login-copy h1 {
    color: var(--ui-text);
    font-size: 32px;
    font-weight: 750;
    margin: 8px 0 8px;
}

.modern-login-copy p {
    color: var(--ui-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 520px;
}

.modern-login-panel {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 40px;
}

.modern-login-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    max-width: 460px;
    padding: 34px;
    width: 100%;
}

.modern-login-card__brand {
    display: none;
    margin-bottom: var(--ui-space-4);
}

.modern-login-card__brand img {
    max-height: 44px;
    max-width: 180px;
}

.modern-login-card__header {
    margin-bottom: var(--ui-space-5);
}

.modern-login-card__header span {
    color: var(--ui-theme, var(--ui-primary));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.modern-login-card__header h2 {
    color: var(--ui-text);
    font-size: 28px;
    font-weight: 750;
    margin: 8px 0 8px;
}

.modern-login-card__header p {
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.modern-login-form {
    display: grid;
    gap: var(--ui-space-4);
}

.modern-login-field label {
    color: var(--ui-text);
    display: block;
    font-size: var(--ui-font-sm);
    font-weight: 700;
    margin-bottom: 7px;
}

.modern-login-input {
    align-items: center;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    display: grid;
    gap: 10px;
    grid-template-columns: 18px 1fr;
    min-height: 46px;
    padding: 0 14px;
}

.modern-login-input:focus-within {
    border-color: var(--ui-theme, var(--ui-primary));
    box-shadow: 0 0 0 3px var(--ui-theme-focus, rgba(220, 31, 46, 0.12));
}

.modern-login-input.is-invalid {
    border-color: var(--ui-danger);
}

.modern-login-input i {
    color: var(--ui-muted);
}

.modern-login-input input {
    background: transparent;
    border: 0;
    color: var(--ui-text);
    font-size: 14px;
    height: 44px;
    outline: 0;
    width: 100%;
}

.modern-login-input--password {
    grid-template-columns: 18px 1fr 32px;
}

.modern-login-eye {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--ui-muted);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.modern-login-eye:hover {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    color: var(--ui-theme, var(--ui-primary));
}

.modern-login-error {
    color: var(--ui-danger);
    font-size: 12px;
    margin-top: 6px;
}

.modern-login-options {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.modern-login-check {
    align-items: center;
    color: var(--ui-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--ui-font-sm);
    gap: 8px;
    margin: 0;
}

.modern-login-check input {
    accent-color: var(--ui-theme, var(--ui-primary));
}

.modern-login-options a {
    color: var(--ui-theme, var(--ui-primary));
    font-size: var(--ui-font-sm);
    font-weight: 700;
}

.modern-login-submit {
    align-items: center;
    background: var(--ui-theme, var(--ui-primary));
    border: 1px solid var(--ui-theme, var(--ui-primary));
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    font-weight: 750;
    gap: 8px;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    width: 100%;
}

.modern-login-submit:hover,
.modern-login-submit:focus {
    background: var(--ui-theme-strong, var(--ui-primary-strong));
    border-color: var(--ui-theme-strong, var(--ui-primary-strong));
    color: #fff;
}

.modern-login-demo {
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    display: grid;
    gap: 8px;
    padding: var(--ui-space-3);
}

.modern-login-demo div {
    display: flex;
    justify-content: space-between;
}

.modern-login-demo strong,
.modern-login-demo span {
    font-size: 12px;
}

.ui-modern .main-header.navbar {
    min-height: 58px;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    padding-left: 14px;
    padding-right: 16px;
}

.ui-modern .main-sidebar {
    background: #fff !important;
    border-right: 1px solid var(--ui-border);
    box-shadow: none;
    width: var(--ui-sidebar-width);
}

.ui-modern.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 4.6rem;
}

.ui-modern .brand-link {
    align-items: center;
    background: #fff !important;
    border-bottom: 1px solid var(--ui-border) !important;
    display: flex;
    min-height: 78px;
    padding: 14px 20px;
}

.ui-modern .brand-link .brand-image {
    margin: 0 !important;
    max-height: 50px !important;
    opacity: 1;
}

.ui-modern .sidebar {
    height: calc(100vh - 78px);
    padding: 14px 12px 24px !important;
}

.ui-modern #left_sidebar {
    overflow-y: auto;
    padding-right: 8px;
}

.ui-modern .nav-sidebar .nav-header {
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 14px 4px 6px;
    padding: 0;
    text-transform: uppercase;
}

.ui-modern .nav-sidebar .nav-header p {
    font-size: 11px;
    margin: 0;
}

.ui-modern .nav-sidebar .nav-link {
    align-items: center;
    border-radius: 7px;
    color: #374151 !important;
    display: flex;
    margin: 2px 0;
    min-height: 38px;
    padding: 8px 10px;
}

.ui-modern .nav-sidebar .nav-link p {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    margin: 0;
}

.ui-modern .nav-sidebar .nav-icon {
    color: #4b5563;
    font-size: 15px;
    margin-right: 10px;
    text-align: center;
    width: 18px;
}

.ui-modern .nav-sidebar .nav-link.active,
.ui-modern .nav-sidebar .menu-open > .nav-link {
    background: var(--ui-theme-soft, var(--ui-primary-soft)) !important;
    box-shadow: none !important;
    color: var(--ui-theme, var(--ui-primary)) !important;
    font-weight: 650;
}

.ui-modern .nav-sidebar .nav-link.active .nav-icon,
.ui-modern .nav-sidebar .menu-open > .nav-link .nav-icon {
    color: var(--ui-theme, var(--ui-primary));
}

.ui-modern .nav-treeview {
    margin-left: 10px;
    padding-left: 8px;
    border-left: 1px solid #edf1f5;
}

.ui-modern .main-header .nav-link {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
    height: 38px;
    line-height: 1;
    min-height: 36px;
    min-width: 36px;
    padding-left: 10px;
    padding-right: 10px;
}

.ui-modern .main-header .navbar-nav.ml-auto {
    align-items: center;
    gap: 6px;
}

.ui-modern .main-header .navbar-nav.ml-auto > .nav-item,
.ui-modern .main-header .navbar-nav.ml-auto > .action {
    align-items: center;
    display: inline-flex;
    height: 40px;
}

.ui-modern .main-header .nav-link .fa,
.ui-modern .main-header .nav-link i {
    line-height: 1;
}

.ui-modern .main-header .nav-link:hover {
    background: rgba(255, 255, 255, 0.14);
}

.ui-modern .main-header.navbar-light .nav-link {
    color: rgba(0, 0, 0, 0.58);
}

.ui-modern .main-header.navbar-light .nav-link:hover {
    background: rgba(15, 23, 42, 0.06);
    color: rgba(0, 0, 0, 0.74);
}

.ui-modern .main-header.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.78);
}

.ui-modern .main-header.navbar-dark .nav-link:hover {
    color: #fff;
}

.ui-modern .action .profile {
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    min-height: 38px;
}

.ui-modern .action .profile.bg-primary,
.ui-modern .action .profile.bg-secondary,
.ui-modern .action .profile.bg-danger,
.ui-modern .action .profile.bg-info,
.ui-modern .action .profile.bg-success,
.ui-modern .action .profile.bg-dark {
    color: #fff !important;
}

.ui-modern .action .profile.bg-warning,
.ui-modern .action .profile.bg-light,
.ui-modern .action .profile.bg-white {
    color: #1f2937 !important;
}

.ui-modern .action:not(.navbar-account) .profile::before {
    align-items: center;
    background: #eef2f7;
    border-radius: 999px;
    color: #374151;
    content: "AD";
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    margin-right: 8px;
    width: 34px;
}

.ui-modern .navbar-account {
    margin-left: 8px;
    position: relative;
}

.ui-modern .navbar-account__button {
    align-items: center;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    gap: 7px;
    height: 40px;
    justify-content: center;
    min-height: 40px;
    min-width: 58px;
    padding: 3px 9px 3px 3px !important;
}

.ui-modern .navbar-account__avatar {
    align-items: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    width: 34px;
}

.ui-modern .navbar-account__button.bg-warning .navbar-account__avatar,
.ui-modern .navbar-account__button.bg-light .navbar-account__avatar,
.ui-modern .navbar-account__button.bg-white .navbar-account__avatar {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.08);
}

.ui-modern .navbar-account__button .arrow {
    font-size: 11px;
    margin: 0;
}

.ui-modern .navbar-account__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    display: grid;
    gap: 3px;
    padding: 12px 16px;
}

.ui-modern .navbar-account__header strong {
    color: inherit;
    font-size: 13px;
    font-weight: 750;
}

.ui-modern .navbar-account__header small {
    color: inherit;
    font-size: 12px;
    opacity: 0.76;
}

.ui-modern .action .menu {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

.ui-modern .content-wrapper,
.ui-modern .main-footer {
    margin-left: var(--ui-sidebar-width) !important;
}

.ui-modern .main-header {
    margin-left: var(--ui-sidebar-width) !important;
}

.ui-modern.sidebar-mini.sidebar-collapse .content-wrapper,
.ui-modern.sidebar-mini.sidebar-collapse .main-footer,
.ui-modern.sidebar-mini.sidebar-collapse .main-header {
    margin-left: 4.6rem !important;
}

.ui-modern .content-wrapper {
    background: var(--ui-bg);
    padding-left: 18px;
    padding-right: 18px;
}

.ui-modern .content-header:not(.ui-page-header) {
    padding: var(--ui-space-5) 0 var(--ui-space-4);
}

.ui-modern .content-header:not(.ui-page-header) .container-fluid {
    align-items: flex-start;
    display: flex;
    gap: var(--ui-space-4);
    justify-content: space-between;
}

.ui-modern .content-header:not(.ui-page-header) .row {
    align-items: flex-start;
    display: contents;
}

.ui-modern .content-header:not(.ui-page-header) h1 {
    color: var(--ui-text);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.2;
    margin: 0;
}

.ui-modern .content-header:not(.ui-page-header) h1 small {
    color: var(--ui-muted);
    font-size: var(--ui-font-md);
    font-weight: 500;
}

.ui-modern .content-header:not(.ui-page-header) .breadcrumb {
    background: transparent;
    margin: 0;
    padding-top: var(--ui-space-1);
}

.ui-modern .content:not(.ui-page__content) {
    padding: 0 0 var(--ui-space-5);
}

.ui-modern .content:not(.ui-page__content) > .card,
.ui-modern .content:not(.ui-page__content) > form > .card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    margin-bottom: var(--ui-space-5);
}

.ui-modern .card:not(.ui-panel) > .card-header {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
    padding: 0;
}

.ui-modern .card:not(.ui-panel) > .card-header > .float-left,
.ui-modern .card:not(.ui-panel) > .card-header > strong {
    display: block;
    font-size: var(--ui-font-lg);
    font-weight: 650;
    padding: var(--ui-space-4);
}

.ui-modern .card:not(.ui-panel) > .card-body,
.ui-modern .card:not(.ui-panel) > .card-body.card-block {
    padding: var(--ui-space-4);
}

.ui-modern .card-header-tabs {
    align-items: center !important;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin: 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    width: 100%;
}

.ui-modern .card-header-tabs .nav-link,
.ui-modern .ml-auto.d-inline-flex .nav-link {
    border: 0;
    border-radius: 6px;
    color: var(--ui-muted);
    font-size: var(--ui-font-md);
    padding: 8px 12px;
}

.ui-modern .card-header-tabs .nav-link.active,
.ui-modern .card-header-tabs .nav-link:hover,
.ui-modern .ml-auto.d-inline-flex .nav-link:hover {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    color: var(--ui-theme-strong, var(--ui-primary-strong));
}

.ui-modern .btn:not(.btn-link):not(.ui-btn) {
    border-radius: 6px;
    font-weight: 650;
}

.ui-modern .btn-primary,
.ui-modern .btn-danger {
    background-color: var(--ui-theme, var(--ui-primary)) !important;
    border-color: var(--ui-theme, var(--ui-primary)) !important;
}

.ui-modern .btn-primary:hover,
.ui-modern .btn-danger:hover {
    background-color: var(--ui-theme-strong, var(--ui-primary-strong)) !important;
    border-color: var(--ui-theme-strong, var(--ui-primary-strong)) !important;
}

.ui-modern .btn-group-sm > .btn,
.ui-modern .btn-sm {
    border-radius: 5px;
}

.ui-modern .btn-link {
    align-items: center;
    border-radius: 6px;
    color: #475467;
    display: inline-flex;
    justify-content: center;
    min-height: 30px;
    min-width: 30px;
    padding: 5px 8px;
}

.ui-modern .btn-link:hover,
.ui-modern .btn-link:focus {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    color: var(--ui-theme, var(--ui-primary));
    text-decoration: none;
}

.ui-modern .btn-link.text-danger:hover,
.ui-modern .btn-link.text-danger:focus {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    color: var(--ui-theme, var(--ui-primary)) !important;
}

.ui-modern .form-control,
.ui-modern .ts-control,
.ui-modern .select2-container .select2-selection {
    border-color: var(--ui-border);
    border-radius: 6px !important;
}

.ui-modern .form-control:focus,
.ui-modern .ts-control.focus,
.ui-modern .select2-container--focus .select2-selection {
    border-color: var(--ui-theme, var(--ui-primary));
    box-shadow: 0 0 0 3px var(--ui-theme-focus, rgba(23, 105, 170, 0.12));
}

.ui-modern label,
.ui-modern .control-label {
    color: #344054;
    font-size: var(--ui-font-sm);
    font-weight: 650;
}

.ui-modern .form-text,
.ui-modern .text-muted {
    color: var(--ui-muted) !important;
}

.ui-modern .alert {
    border-radius: var(--ui-radius);
}

.ui-modern .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

.ui-modern .modal-header {
    border-bottom-color: var(--ui-border);
}

.ui-modern .modal-footer {
    border-top-color: var(--ui-border);
}

.ui-modern .form-horizontal .control-group,
.ui-modern .upload-input-group,
.ui-modern .entry.input-group {
    min-width: 0;
}

.ui-modern input[type="file"].form-control {
    height: auto;
    min-height: 38px;
}

.ui-modern .card .upload-input-group {
    align-items: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px dashed #c7d0dc;
    border-radius: var(--ui-radius);
    display: flex;
    gap: 12px;
    min-height: 104px;
    padding: 18px;
    position: relative;
}

.ui-modern .card .upload-input-group::before {
    align-items: center;
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    border-radius: 999px;
    color: var(--ui-theme, var(--ui-primary));
    content: "\f1c3";
    display: inline-flex;
    flex: 0 0 42px;
    font-family: FontAwesome;
    font-size: 20px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ui-modern .card .upload-input-group::after {
    color: var(--ui-muted);
    content: "Chọn file Excel .xlsx hoặc .xls để import";
    font-size: 12px;
    left: 72px;
    position: absolute;
    top: 56px;
}

.ui-modern .card .upload-input-group input[type="file"].form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #475467;
    flex: 1 1 auto;
    margin-right: 0 !important;
    padding-bottom: 18px;
    padding-left: 0;
}

.ui-modern .card .upload-input-group input[type="file"]::file-selector-button {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: #1f2937;
    cursor: pointer;
    font-weight: 650;
    margin-right: 12px;
    padding: 8px 12px;
}

.ui-modern .card .upload-input-group input[type="file"]::file-selector-button:hover {
    border-color: var(--ui-theme, var(--ui-primary));
    color: var(--ui-theme, var(--ui-primary));
}

.ui-modern .card .control-group#files > .control-label {
    color: #1f2937;
    display: block;
    font-size: 14px;
    font-weight: 750;
    margin-bottom: 10px;
}

.ui-modern .card .control-group#files > .btn {
    margin-top: 12px !important;
}

.ui-modern .order-export-filter-container,
.ui-modern .date-filter-container,
.ui-modern .card-block .form-horizontal {
    background: var(--ui-surface-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    padding: var(--ui-space-4) !important;
}

.ui-action-bar {
    align-items: center;
    border-top: 1px solid var(--ui-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    justify-content: flex-end;
    margin: var(--ui-space-4) calc(var(--ui-space-4) * -1) calc(var(--ui-space-4) * -1);
    padding: var(--ui-space-4);
}

.ui-filter-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-3);
}

.ui-filter-chips__label {
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
}

.ui-filter-chip {
    align-items: center;
    background: #eef2f7;
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    color: #344054;
    display: inline-flex;
    font-size: var(--ui-font-sm);
    gap: 8px;
    min-height: 28px;
    padding: 4px 10px;
}

.ui-filter-chip button,
.ui-filter-chip a {
    background: transparent;
    border: 0;
    color: #667085;
    padding: 0;
}

.ui-badge {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 5px;
    line-height: 1;
    min-height: 24px;
    padding: 5px 9px;
}

.ui-badge--default {
    background: #eef2f7;
    color: #475467;
}

.ui-badge--primary {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    color: var(--ui-theme, var(--ui-primary));
}

.ui-badge--success {
    background: #dcf5e8;
    color: var(--ui-success);
}

.ui-badge--warning {
    background: #fff1d6;
    color: #9a670f;
}

.ui-badge--danger {
    background: var(--ui-primary-soft);
    color: var(--ui-primary);
}

.ui-modern .date-filter-container .row,
.ui-modern .order-export-filter-container .row {
    gap: var(--ui-space-2) 0;
}

.ui-file-selected {
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.ui-page__content {
    padding: 0 var(--ui-space-4) var(--ui-space-5);
}

.ui-page-header {
    padding: var(--ui-space-5) var(--ui-space-4) var(--ui-space-4);
}

.ui-page-header__inner {
    align-items: flex-start;
    display: flex;
    gap: var(--ui-space-4);
    justify-content: space-between;
}

.ui-page-header__title {
    color: var(--ui-text);
    font-size: 24px;
    font-weight: 650;
    line-height: 1.2;
    margin: 0;
}

.ui-page-header__description {
    color: var(--ui-muted);
    font-size: var(--ui-font-md);
    margin: var(--ui-space-1) 0 0;
}

.ui-breadcrumb {
    background: transparent;
    margin: 0;
    padding: var(--ui-space-1) 0 0;
}

.ui-breadcrumb a {
    color: var(--ui-theme, var(--ui-primary));
}

.ui-panel {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    margin-bottom: var(--ui-space-5);
}

.ui-panel__header {
    align-items: center;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    border-radius: var(--ui-radius) var(--ui-radius) 0 0 !important;
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.ui-panel__heading {
    align-items: center;
    display: flex;
    gap: var(--ui-space-2);
    padding: var(--ui-space-4);
}

.ui-panel__icon {
    align-items: center;
    background: var(--ui-theme-soft, #e7f1fb);
    border-radius: 6px;
    color: var(--ui-theme, var(--ui-primary));
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.ui-panel__title,
.ui-form-section__header h3 {
    color: var(--ui-text);
    font-size: var(--ui-font-lg);
    font-weight: 650;
    line-height: 1.25;
    margin: 0;
}

.ui-panel__body {
    padding: var(--ui-space-4);
}

.ui-panel__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    justify-content: flex-end;
    padding: var(--ui-space-3) var(--ui-space-4);
}

.ui-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin: 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    width: 100%;
}

.ui-tabs .nav-link {
    border: 0;
    border-radius: 6px;
    color: var(--ui-muted);
    font-size: var(--ui-font-md);
    padding: 8px 12px;
}

.ui-tabs .nav-link.active {
    background: var(--ui-theme-soft, #e7f1fb);
    color: var(--ui-theme-strong, var(--ui-primary-strong));
    font-weight: 650;
}

.ui-btn {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    font-size: var(--ui-font-md);
    font-weight: 650;
    gap: var(--ui-space-2);
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
}

.ui-btn--primary {
    background: var(--ui-theme, var(--ui-primary));
    border-color: var(--ui-theme, var(--ui-primary));
    color: #fff;
}

.ui-btn--secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-text);
}

.ui-btn--danger {
    background: var(--ui-danger);
    border-color: var(--ui-danger);
    color: #fff;
}

.ui-btn--primary:hover,
.ui-btn--danger:hover {
    background: var(--ui-theme-strong, var(--ui-primary-strong));
    border-color: var(--ui-theme-strong, var(--ui-primary-strong));
    color: #fff;
}

.ui-btn--success {
    background: var(--ui-success);
    border-color: var(--ui-success);
    color: #fff;
}

.ui-form-section {
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: var(--ui-space-4);
}

.ui-form-section__header {
    align-items: center;
    display: flex;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-4);
}

.ui-form-section label {
    color: #344054;
    font-size: var(--ui-font-sm);
    font-weight: 650;
    margin-bottom: 6px;
}

.ui-form-grid {
    display: grid;
    gap: var(--ui-space-4);
    grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.ui-form-grid--compact {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.ui-filter-fieldset {
    min-width: 0;
}

.ui-form-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    justify-content: flex-end;
    margin-top: var(--ui-space-4);
}

.ui-datatable {
    overflow-x: auto;
    width: 100%;
}

.ui-datatable__toolbar {
    align-items: center;
    display: flex;
    gap: var(--ui-space-3);
    justify-content: space-between;
    margin-bottom: var(--ui-space-3);
}

.ui-modern .datatable-container,
.ui-datatable .datatable-container {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    max-height: 80vh;
    overflow: auto;
}

.ui-modern .dataTables_wrapper .dataTables_length,
.ui-modern .dataTables_wrapper .dataTables_filter,
.ui-modern .dataTables_wrapper .dataTables_info,
.ui-modern .dataTables_wrapper .dataTables_paginate {
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
}

.ui-modern .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid transparent !important;
    border-radius: 6px !important;
}

.ui-modern .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--ui-theme, var(--ui-primary)) !important;
    border-color: var(--ui-theme, var(--ui-primary)) !important;
    color: #fff !important;
}

.ui-datatable table.dataTable,
.ui-datatable table,
.ui-modern table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

.ui-datatable .dataTables_wrapper {
    font-size: var(--ui-font-md);
}

.ui-datatable table thead th,
.ui-modern table.dataTable thead th {
    background: #eef3f8;
    border-bottom: 1px solid var(--ui-border) !important;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-datatable table tbody td,
.ui-modern table.dataTable tbody td {
    border-top: 1px solid #edf1f5;
    color: var(--ui-text);
    vertical-align: middle;
}

.ui-datatable .filter-input,
.ui-modern table.dataTable .filter-input {
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    font-size: var(--ui-font-sm);
    min-width: 120px;
}

.ui-detail-grid {
    display: grid;
    gap: var(--ui-space-3);
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.ui-detail-item {
    border-bottom: 1px solid var(--ui-border);
    display: grid;
    gap: var(--ui-space-2);
    grid-template-columns: minmax(120px, 180px) 1fr;
    margin: 0;
    padding: var(--ui-space-3) 0;
}

.ui-detail-item dt {
    color: var(--ui-muted);
    font-weight: 650;
}

.ui-detail-item dd {
    color: var(--ui-text);
    margin: 0;
    overflow-wrap: anywhere;
}

.ui-alert {
    align-items: flex-start;
    border-radius: var(--ui-radius);
    display: flex;
    gap: var(--ui-space-2);
}

.ui-alert--info {
    background: #e7f1fb;
    border-color: #bfd8f2;
    color: #174c7d;
}

.ui-alert--warning {
    background: #fff7e6;
    border-color: #f5d28c;
    color: #8a5b12;
}

.ui-alert--danger {
    background: #fdecec;
    border-color: #f4b8b4;
    color: #8e2b27;
}

.ui-alert--success {
    background: #e8f7f0;
    border-color: #a8dfc4;
    color: #146747;
}

.ui-state {
    align-items: center;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius);
    color: var(--ui-muted);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    justify-content: center;
    min-height: 180px;
    padding: var(--ui-space-5);
    text-align: center;
}

.ui-state i {
    color: var(--ui-theme, var(--ui-primary));
    font-size: 28px;
}

.ui-state h3 {
    color: var(--ui-text);
    font-size: var(--ui-font-lg);
    margin: 0;
}

.ui-state p {
    margin: 0;
}

.ui-summary-header {
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    display: flex;
    gap: var(--ui-space-4);
    justify-content: space-between;
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-4);
}

.ui-summary-header__main {
    align-items: center;
    display: flex;
    gap: var(--ui-space-4);
    min-width: 0;
}

.ui-summary-header__avatar {
    align-items: center;
    background: var(--ui-theme, var(--ui-primary));
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 64px;
    font-size: 26px;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.ui-summary-header__title-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.ui-summary-header h2 {
    color: var(--ui-text);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.ui-summary-header p,
.ui-summary-header__meta {
    color: var(--ui-muted);
    font-size: var(--ui-font-md);
    margin: 5px 0 0;
}

.ui-summary-header__badges,
.ui-summary-header__meta,
.ui-summary-header__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.ui-timeline {
    display: grid;
    gap: var(--ui-space-3);
}

.ui-timeline-item {
    display: grid;
    gap: var(--ui-space-3);
    grid-template-columns: 34px 1fr;
    position: relative;
}

.ui-timeline-item:not(:last-child)::after {
    background: var(--ui-border);
    content: "";
    height: calc(100% + var(--ui-space-3));
    left: 16px;
    position: absolute;
    top: 34px;
    width: 1px;
}

.ui-timeline-item__icon {
    align-items: center;
    background: #eef2f7;
    border-radius: 999px;
    color: var(--ui-muted);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    position: relative;
    width: 34px;
    z-index: 1;
}

.ui-timeline-item--success .ui-timeline-item__icon {
    background: #dcf5e8;
    color: var(--ui-success);
}

.ui-timeline-item--primary .ui-timeline-item__icon {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    color: var(--ui-theme, var(--ui-primary));
}

.ui-timeline-item__content h4 {
    font-size: var(--ui-font-md);
    font-weight: 700;
    margin: 0;
}

.ui-timeline-item__content p {
    color: var(--ui-muted);
    font-size: var(--ui-font-sm);
    margin: 3px 0 0;
}

.settings-page {
    background: var(--ui-bg);
    min-height: calc(100vh - 64px);
}

.settings-page__crumbbar {
    background: #fff;
    border-bottom: 1px solid var(--ui-border);
    min-height: 48px;
    padding: 16px 20px 0;
}

.settings-page__crumbbar a,
.settings-page__header .breadcrumb a {
    color: var(--ui-theme, var(--ui-primary));
}

.settings-page__header {
    align-items: center;
    display: flex;
    gap: var(--ui-space-4);
    justify-content: space-between;
    padding: 18px 22px 26px;
}

.settings-page__header h1 {
    color: var(--ui-text);
    display: inline;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.settings-page__header p {
    color: #344054;
    display: inline;
    font-size: 16px;
    margin: 0 0 0 6px;
}

.settings-page__header .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
}

.settings-page__content {
    padding: 0 24px 28px;
}

.settings-nav-panel {
    align-items: flex-start;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    display: grid;
    gap: 28px;
    grid-template-columns: auto 1fr auto;
    margin-bottom: var(--ui-space-4);
    padding: 14px 18px;
}

.settings-nav-title {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.settings-nav-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-nav-pill {
    align-items: center;
    background: #eef2f7;
    border-radius: 999px;
    color: #344054;
    display: inline-flex;
    font-size: 13px;
    gap: 7px;
    min-height: 34px;
    padding: 8px 12px;
}

.settings-nav-pill:hover,
.settings-nav-pill.active {
    background: var(--ui-theme, var(--ui-primary));
    color: #fff;
    text-decoration: none;
}

.settings-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    min-height: 700px;
}

.settings-card__tabs {
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 12px;
}

.settings-tab {
    align-items: center;
    align-self: stretch;
    border: 1px solid var(--ui-border);
    border-bottom-color: #fff;
    border-radius: 4px 4px 0 0;
    color: #475467;
    display: inline-flex;
    font-size: 13px;
    gap: 8px;
    margin-bottom: -1px;
    padding: 0 14px;
}

.settings-card__actions {
    align-items: center;
    display: flex;
    gap: 22px;
}

.settings-card__actions a {
    color: var(--ui-theme, var(--ui-primary));
    font-size: 13px;
}

.settings-form {
    display: flex;
    flex-direction: column;
    min-height: 648px;
}

.settings-form__grid {
    display: grid;
    flex: 1 1 auto;
    gap: 70px;
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
    padding: 24px 34px 30px;
}

.settings-field,
.settings-media-field,
.settings-toggle-field {
    align-items: flex-start;
    display: grid;
    gap: 18px;
    grid-template-columns: 170px minmax(0, 1fr);
    margin-bottom: 18px;
}

.settings-field__label {
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
    line-height: 36px;
    margin: 0;
    text-align: right;
}

.settings-field__control .form-control,
.settings-field__control .select2-container .select2-selection {
    min-height: 38px;
}

.settings-field__control .form-text,
.settings-media-field__footer .form-text,
.settings-switch-row small {
    color: #7a8699 !important;
    font-size: 12px;
    margin-top: 6px;
}

.settings-media-dropzone {
    align-items: center;
    background: #fff !important;
    border: 1px dashed #c7d0dc !important;
    border-radius: 3px;
    display: flex;
    min-height: 156px;
    padding: 18px;
}

.settings-media-dropzone.dz-started .dz-message {
    display: none;
}

.settings-media-dropzone .dz-preview {
    margin: 0 12px 0 0;
}

.settings-media-dropzone .dz-image {
    align-items: center;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
}

.settings-media-dropzone .dz-remove {
    color: var(--ui-theme, var(--ui-primary));
    font-size: 13px;
    margin-top: 12px;
}

.settings-media-field__footer {
    align-items: flex-start;
    display: flex;
    gap: var(--ui-space-3);
    justify-content: space-between;
    margin-top: 4px;
}

.settings-media-field__footer .btn {
    border-color: var(--ui-theme, var(--ui-primary));
    color: var(--ui-theme, var(--ui-primary));
    white-space: nowrap;
}

.settings-toggle-field {
    align-items: center;
}

.settings-switch-row {
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;
}

.settings-switch-row input {
    margin: 2px 8px 0 0;
}

.settings-switch-row span {
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
}

.settings-switch-row small {
    grid-column: 2;
}

.settings-form__footer {
    align-items: center;
    border-top: 1px solid var(--ui-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
    padding: 24px 22px;
}

.settings-form__footer .btn-danger {
    background: var(--ui-theme, var(--ui-primary));
    border-color: var(--ui-theme, var(--ui-primary));
}

.settings-form--modern {
    display: block;
    min-height: 0;
}

.settings-modern-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: -6px 0 14px;
    position: relative;
}

.settings-modern-actions::before {
    background: var(--ui-theme, var(--ui-primary));
    border-radius: 999px;
    content: "";
    height: 28px;
    margin-right: auto;
    width: 4px;
}

.settings-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.settings-grid--three-blocks {
    align-items: stretch;
}

.settings-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    min-width: 0;
    overflow: hidden;
}

.settings-section--general,
.settings-section--appearance {
    height: 100%;
}

.settings-section--general .settings-section__body,
.settings-section--appearance .settings-section__body {
    align-content: start;
    height: 100%;
}

.settings-section__header {
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    gap: 10px;
    min-height: 52px;
    padding: 0 18px;
}

.settings-section__header i {
    color: var(--ui-theme, var(--ui-primary));
}

.settings-section__header h3 {
    color: var(--ui-text);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: 0;
    margin: 0;
}

.settings-section__body {
    display: grid;
    gap: 18px;
    padding: 18px;
}

.settings-section--appearance .settings-section__body {
    gap: 16px;
}

.settings-section__body .settings-field,
.settings-section__body .settings-media-field,
.settings-section__body .settings-toggle-field {
    gap: 12px;
    grid-template-columns: 150px minmax(0, 1fr);
    margin-bottom: 0;
}

.settings-section__body .settings-field__label {
    font-size: 13px;
    line-height: 34px;
}

.settings-choice-group {
    display: grid;
    gap: 10px;
}

.settings-choice-group__title {
    color: #344054;
    font-size: 13px;
    font-weight: 750;
}

.settings-choice-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}

.settings-section--appearance .settings-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.settings-choice-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
}

.settings-section--appearance .settings-choice-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.settings-choice-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: 6px;
    justify-items: center;
    margin: 0;
    min-height: 94px;
    padding: 12px 10px 10px;
    position: relative;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.settings-section--appearance .settings-choice-card {
    min-height: 84px;
    padding: 10px 8px 9px;
}

.settings-choice-card:hover {
    border-color: var(--ui-theme, var(--ui-primary));
}

.settings-choice-card input {
    opacity: 0;
    position: absolute;
}

.settings-choice-card:has(input:checked) {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    border-color: var(--ui-theme, var(--ui-primary));
    box-shadow: 0 0 0 3px var(--ui-theme-focus, rgba(23, 105, 170, 0.12));
}

.settings-choice-card strong {
    color: #1f2937;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
}

.settings-choice-card small {
    color: var(--ui-muted);
    font-size: 11px;
}

.settings-section--appearance .settings-choice-card small {
    display: none;
}

.settings-choice-card__swatch,
.settings-choice-card__logo-bg,
.settings-choice-card__preview {
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12), 0 7px 16px rgba(15, 23, 42, 0.12);
    display: inline-flex;
    height: 34px;
    width: 34px;
}

.settings-choice-card__bar {
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    display: block;
    height: 13px;
    width: 64px;
}

.settings-choice-card__logo-bg {
    align-items: center;
    color: #fff;
    font-weight: 800;
    justify-content: center;
}

.settings-choice-card__preview {
    align-items: center;
    background: #fff;
    justify-content: center;
}

.settings-choice-card__preview span {
    background: #182b73;
    border-radius: 999px;
    display: block;
    height: 22px;
    width: 22px;
}

.settings-choice-card--contrast-dark .settings-choice-card__preview {
    background: #111827;
}

.settings-choice-card--contrast-dark .settings-choice-card__preview span {
    background: #fff;
}

.settings-choice-card--primary .settings-choice-card__swatch,
.settings-choice-card--logo-primary .settings-choice-card__logo-bg,
.settings-choice-card--nav-primary .settings-choice-card__bar {
    background: #1769aa;
}

.settings-choice-card--secondary .settings-choice-card__swatch,
.settings-choice-card--logo-gray .settings-choice-card__logo-bg,
.settings-choice-card--nav-gray .settings-choice-card__bar {
    background: #6b7280;
}

.settings-choice-card--danger .settings-choice-card__swatch,
.settings-choice-card--logo-danger .settings-choice-card__logo-bg,
.settings-choice-card--nav-danger .settings-choice-card__bar {
    background: #e6293b;
}

.settings-choice-card--warning .settings-choice-card__swatch,
.settings-choice-card--logo-warning .settings-choice-card__logo-bg,
.settings-choice-card--nav-warning .settings-choice-card__bar {
    background: #f59e0b;
}

.settings-choice-card--info .settings-choice-card__swatch,
.settings-choice-card--logo-info .settings-choice-card__logo-bg,
.settings-choice-card--nav-info .settings-choice-card__bar {
    background: #0ea5e9;
}

.settings-choice-card--success .settings-choice-card__swatch,
.settings-choice-card--logo-success .settings-choice-card__logo-bg,
.settings-choice-card--nav-success .settings-choice-card__bar {
    background: #16a34a;
}

.settings-choice-card--nav-white .settings-choice-card__bar,
.settings-choice-card--logo-white .settings-choice-card__logo-bg,
.settings-choice-card--logo-clear .settings-choice-card__logo-bg {
    background: #fff;
    color: #e6293b;
}

.settings-choice-card--nav-dark .settings-choice-card__bar,
.settings-choice-card--logo-dark .settings-choice-card__logo-bg {
    background: #111827;
}

.settings-media-field__body {
    min-width: 0;
}

.settings-section .settings-media-dropzone {
    border-radius: 8px;
    min-height: 132px;
}

.settings-compact-media {
    border-top: 1px solid var(--ui-border);
    display: grid;
    gap: 12px;
    margin-top: 2px;
    padding-top: 12px;
}

.settings-compact-media__title {
    color: #344054;
    font-size: 13px;
    font-weight: 750;
}

.settings-media-field--compact {
    align-items: flex-start;
    display: grid;
    gap: 12px;
    grid-template-columns: 150px minmax(0, 1fr);
    margin: 0;
}

.settings-media-field--compact .settings-field__label {
    line-height: 1.3;
    padding-top: 4px;
}

.settings-media-row {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.settings-media-row__meta {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.settings-media-row__meta .btn {
    border-color: var(--ui-border);
    color: #1f2937;
    font-weight: 650;
    justify-self: start;
}

.settings-media-row__meta .btn:hover,
.settings-media-row__meta .btn:focus {
    border-color: var(--ui-theme, var(--ui-primary));
    color: var(--ui-theme, var(--ui-primary));
}

.settings-media-dropzone--compact {
    align-items: center;
    border-radius: 8px !important;
    flex: 0 0 64px;
    height: 64px;
    justify-content: center;
    min-height: 64px !important;
    overflow: hidden;
    padding: 0 !important;
    width: 64px;
}

.settings-media-dropzone--compact .dz-message {
    display: none;
}

.settings-media-dropzone--compact .dz-preview {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    margin: 0;
    min-height: 0;
    width: 100%;
}

.settings-media-dropzone--compact .dz-image {
    height: 52px !important;
    width: 52px !important;
}

.settings-media-dropzone--compact .dz-image img {
    max-height: 52px;
    max-width: 52px;
    object-fit: contain;
}

.settings-media-dropzone--compact .dz-details,
.settings-media-dropzone--compact .dz-progress,
.settings-media-dropzone--compact .dz-error-message,
.settings-media-dropzone--compact .dz-success-mark,
.settings-media-dropzone--compact .dz-error-mark,
.settings-media-dropzone--compact .dz-remove {
    display: none !important;
}

.settings-section__body--toggles {
    gap: 22px;
}

.settings-toggle-stack {
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    padding: 14px;
}

.settings-toggle-stack .settings-toggle-field {
    grid-template-columns: 150px minmax(0, 1fr);
}

.settings-form__footer--sticky {
    background: transparent;
    border: 0;
    border-radius: 0;
    bottom: 14px;
    box-shadow: none;
    margin-top: 10px;
    padding: 0;
    position: sticky;
    z-index: 20;
}

.dashboard-modern {
    display: grid;
    gap: 18px;
}

.dashboard-kpi-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-kpi-card {
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    color: var(--ui-text);
    display: grid;
    gap: 12px;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 116px;
    padding: 16px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dashboard-kpi-card:hover,
.dashboard-kpi-card:focus {
    border-color: var(--ui-theme, var(--ui-primary));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    color: var(--ui-text);
    text-decoration: none;
    transform: translateY(-1px);
}

.dashboard-kpi-card__icon {
    align-items: center;
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    border-radius: 8px;
    color: var(--ui-theme, var(--ui-primary));
    display: inline-flex;
    font-size: 18px;
    height: 46px;
    justify-content: center;
    width: 46px;
}

.dashboard-kpi-card--earnings .dashboard-kpi-card__icon {
    background: #fff1f2;
    color: #d32535;
}

.dashboard-kpi-card--stores .dashboard-kpi-card__icon {
    background: #e8f7ee;
    color: #16875d;
}

.dashboard-kpi-card--clients .dashboard-kpi-card__icon {
    background: #fff8e1;
    color: #b18407;
}

.dashboard-kpi-card__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-kpi-card__label {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-kpi-card strong {
    color: var(--ui-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.dashboard-kpi-card__link {
    color: var(--ui-theme, var(--ui-primary));
    font-size: 12px;
    font-weight: 700;
}

.dashboard-main-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
}

.dashboard-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    min-width: 0;
    overflow: hidden;
}

.dashboard-panel__header {
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 58px;
    padding: 14px 16px;
}

.dashboard-panel__header h3 {
    color: var(--ui-text);
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.dashboard-panel__header p {
    color: var(--ui-muted);
    font-size: 12px;
    margin: 3px 0 0;
}

.dashboard-panel__link,
.dashboard-panel__icon-link,
.dashboard-row-action {
    align-items: center;
    border-radius: 6px;
    color: var(--ui-theme, var(--ui-primary));
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
}

.dashboard-panel__link:hover,
.dashboard-panel__icon-link:hover,
.dashboard-row-action:hover {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    color: var(--ui-theme, var(--ui-primary));
    text-decoration: none;
}

.dashboard-chart-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 16px 0;
}

.dashboard-chart-summary div {
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.dashboard-chart-summary span {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-chart-summary strong {
    color: var(--ui-text);
    font-size: 20px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.dashboard-chart-wrap {
    height: 280px;
    padding: 18px 16px 0;
}

.dashboard-chart-wrap canvas {
    min-height: 250px;
}

.dashboard-chart-legend {
    color: var(--ui-muted);
    display: flex;
    font-size: 12px;
    justify-content: flex-end;
    padding: 8px 16px 16px;
}

.dashboard-chart-legend__swatch {
    color: var(--ui-theme, var(--ui-primary));
}

.dashboard-table-wrap {
    overflow-x: auto;
}

.dashboard-table {
    margin: 0;
}

.dashboard-table thead th {
    background: #eef3f8;
    border-bottom: 1px solid var(--ui-border);
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    padding: 12px 14px;
    white-space: nowrap;
}

.dashboard-table tbody td {
    border-top: 1px solid #eef2f6;
    color: #344054;
    font-size: 13px;
    padding: 12px 14px;
    vertical-align: middle;
}

.dashboard-table tbody tr:hover {
    background: var(--ui-surface-soft);
}

.modern-profile-layout {
    display: grid;
    gap: var(--ui-space-5);
    grid-template-columns: minmax(260px, 340px) 1fr;
}

.modern-profile-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    padding: var(--ui-space-5);
}

.modern-profile-card__avatar {
    align-items: center;
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    display: flex;
    height: 112px;
    justify-content: center;
    margin: 0 auto var(--ui-space-3);
    overflow: hidden;
    width: 112px;
}

.modern-profile-card__avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.modern-profile-card h2 {
    color: var(--ui-text);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.modern-profile-card__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: var(--ui-space-2) 0 var(--ui-space-4);
}

.modern-profile-card__roles span {
    background: var(--ui-theme-soft, var(--ui-primary-soft));
    border-radius: 999px;
    color: var(--ui-theme, var(--ui-primary));
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
}

.modern-profile-card__email {
    align-items: center;
    border: 1px solid #9bd7e3;
    border-radius: 6px;
    color: #1897aa;
    display: flex;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
}

.modern-profile-card__section {
    border-top: 1px solid var(--ui-border);
    margin-top: var(--ui-space-5);
    padding-top: var(--ui-space-4);
}

.modern-profile-card__section h3 {
    align-items: center;
    color: var(--ui-text);
    display: flex;
    font-size: var(--ui-font-md);
    font-weight: 700;
    gap: 8px;
    margin: 0 0 var(--ui-space-3);
}

.modern-profile-meta {
    display: grid;
    gap: 4px;
    padding: 8px 0;
}

.modern-profile-meta strong {
    color: var(--ui-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.modern-profile-main {
    min-width: 0;
}

.modern-form-grid,
.modern-product-grid {
    display: grid;
    gap: var(--ui-space-4);
    grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.modern-form-section {
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: var(--ui-space-4);
}

.modern-form-section--full {
    margin-top: var(--ui-space-4);
}

.modern-form-section__header {
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
    display: flex;
    gap: 8px;
    margin-bottom: var(--ui-space-4);
    padding-bottom: var(--ui-space-3);
}

.modern-form-section__header i {
    color: var(--ui-theme, var(--ui-primary));
}

.modern-form-section__header h3 {
    color: var(--ui-text);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.modern-field {
    align-items: flex-start;
    display: grid;
    gap: var(--ui-space-3);
    grid-template-columns: 160px minmax(0, 1fr);
    margin-bottom: var(--ui-space-3);
}

.modern-field__label {
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    line-height: 36px;
    margin: 0;
    text-align: right;
}

.modern-field__control .form-control,
.modern-field__control .ts-control,
.modern-field__control .select2-container .select2-selection {
    min-height: 38px;
}

.modern-field__control .form-text {
    color: var(--ui-muted) !important;
    font-size: 12px;
    margin-top: 5px;
}

.modern-form-footer {
    align-items: center;
    border-top: 1px solid var(--ui-border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: var(--ui-space-5) calc(var(--ui-space-4) * -1) calc(var(--ui-space-4) * -1);
    padding: var(--ui-space-4);
}

.modern-toggle-row {
    align-items: center;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--ui-space-2);
    min-height: 42px;
    padding: 9px 12px;
}

.modern-toggle-row span {
    color: var(--ui-text);
    font-size: var(--ui-font-sm);
    font-weight: 700;
}

.modern-toggle-row input[type="checkbox"] {
    accent-color: var(--ui-theme, var(--ui-primary));
    height: 18px;
    width: 18px;
}

.modern-product-form .ui-panel__body {
    padding-bottom: 0;
}

.modern-status-list {
    display: grid;
    gap: var(--ui-space-2);
}

.modern-status-list > div {
    align-items: center;
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    display: flex;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 10px;
}

.modern-status-list span {
    color: var(--ui-text);
    font-weight: 700;
}

.ui-modal .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

.ui-modern-toast {
    border-radius: var(--ui-radius) !important;
}

@media (max-width: 1199.98px) {
    .modern-login-shell {
        grid-template-columns: 1fr;
    }

    .modern-login-visual {
        display: none;
    }

    .modern-login-card__brand {
        display: block;
    }

    .modern-login-panel {
        min-height: 100vh;
    }

    .ui-form-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .settings-nav-panel,
    .settings-form__grid,
    .modern-profile-layout,
    .modern-form-grid,
    .modern-product-grid,
    .dashboard-main-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-form__grid {
        gap: var(--ui-space-4);
    }

    .ui-modern .content-wrapper,
    .ui-modern .main-footer {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .modern-login-panel {
        padding: var(--ui-space-4);
    }

    .modern-login-card {
        box-shadow: none;
        padding: var(--ui-space-5) var(--ui-space-4);
    }

    .modern-login-card__header h2 {
        font-size: 24px;
    }

    .ui-page__content,
    .ui-page-header {
        padding-left: var(--ui-space-3);
        padding-right: var(--ui-space-3);
    }

    .ui-page-header__inner {
        display: block;
    }

    .ui-modern .content-header:not(.ui-page-header) .container-fluid {
        display: block;
    }

    .ui-breadcrumb {
        margin-top: var(--ui-space-3);
    }

    .ui-panel__body {
        padding: var(--ui-space-3);
    }

    .ui-form-grid,
    .ui-detail-grid,
    .dashboard-kpi-grid,
    .dashboard-chart-summary {
        grid-template-columns: 1fr;
    }

    .settings-page__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-page__content {
        padding-left: var(--ui-space-3);
        padding-right: var(--ui-space-3);
    }

    .settings-nav-panel,
    .settings-form__grid {
        padding-left: var(--ui-space-3);
        padding-right: var(--ui-space-3);
    }

    .settings-field,
    .settings-media-field,
    .settings-toggle-field,
    .modern-field {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .settings-field__label,
    .modern-field__label {
        line-height: 1.3;
        text-align: left;
    }

    .settings-media-field__footer,
    .settings-form__footer,
    .modern-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-summary-header {
        align-items: stretch;
        flex-direction: column;
    }

    .ui-summary-header__actions {
        justify-content: stretch;
    }

    .ui-summary-header__actions .ui-btn,
    .ui-summary-header__actions .btn {
        flex: 1 1 100%;
    }

    .ui-detail-item {
        grid-template-columns: 1fr;
    }

    .ui-form-actions {
        justify-content: stretch;
    }

    .ui-form-actions .ui-btn,
    .ui-form-actions .btn {
        flex: 1 1 100%;
    }

    .ui-modern .card-header-tabs,
    .ui-modern .ml-auto.d-inline-flex {
        display: flex !important;
        flex: 1 1 100%;
        width: 100%;
    }

    .ui-modern .card-header-tabs .nav-item,
    .ui-modern .ml-auto.d-inline-flex .nav-item {
        flex: 1 1 auto;
    }

    .ui-modern .card-header-tabs .nav-link,
    .ui-modern .ml-auto.d-inline-flex .nav-link {
        text-align: center;
        width: 100%;
    }
}