/* =========================================================
   SNT Design System — admin theme layer
   Source: DESIGN.md (SNT Group). Loads after app.css / custom.css.
   White canvas, one blue, Space Grotesk 500 headings over Inter,
   weight ceiling 500, 2px buttons, flat surfaces, hairline borders.
   ========================================================= */

:root {
    --snt-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --snt-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --snt-primary: #3084C2;
    --snt-primary-hover: color-mix(in srgb, #3084C2 92%, #000000);
    --snt-primary-pressed: color-mix(in srgb, #3084C2 88%, #000000);
    --snt-on-primary: #FFFFFF;
    --snt-primary-tonal: #EBF1FA;
    --snt-primary-strong: #2D6FA3;

    --snt-surface: #FFFFFF;
    --snt-surface-2: #F0F0F0;
    --snt-surface-3: #E6E6E6;
    --snt-on-surface: #171717;
    --snt-on-surface-2: #5C5C5C;
    --snt-on-surface-3: #919191;
    --snt-border: #C9C9C9;
    --snt-border-subtle: #E6E6E6;
    --snt-hover: rgba(0, 0, 0, 0.08);
    --snt-pressed: rgba(0, 0, 0, 0.12);

    --snt-confirmation: #1A7F37;
    --snt-confirmation-tonal: #E3F5E1;
    --snt-attention: #8A7237;
    --snt-attention-tonal: #FAF3D1;
    --snt-invalid: #A32C28;
    --snt-invalid-tonal: #F9EEEE;
    --snt-information: #2D6FA3;
    --snt-information-tonal: #EBF1FA;
    --snt-dark-surface: #193E5D;

    --snt-radius-xs: 2px;
    --snt-radius-sm: 4px;
    --snt-radius-md: 8px;
    --snt-radius-lg: 16px;

    --snt-elev-subtle: 0 4px 12px rgba(0, 0, 0, .07);
    --snt-elev-strong: 0 5px 17px rgba(0, 0, 0, .20), 0 2px 7px rgba(0, 0, 0, .15);
    --snt-ease: 0.3s;
}

/* ---------- Base ---------- */
body {
    font-family: var(--snt-font-body);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.14px;
    background-color: var(--snt-surface);
    color: var(--snt-on-surface-2);
}
p, li, a, span, td, th, label, input, select, textarea, button, small {
    font-family: var(--snt-font-body);
}
h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .modal-title {
    font-family: var(--snt-font-display);
    font-weight: 500;
    color: var(--snt-on-surface);
}
/* Weight ceiling is 500 — no bold anywhere */
b, strong, .fw-bold, .fw-bolder, .fw-semibold, .font-weight-bold { font-weight: 500 !important; }

a { color: var(--snt-primary-strong); transition: color var(--snt-ease); }
a:hover { color: var(--snt-dark-surface); }

.page-title { font-size: 24px; line-height: 32px; letter-spacing: 0; }
.card-title { font-size: 20px; line-height: 28px; }

:focus-visible { outline: 2px solid var(--snt-primary); outline-offset: 2px; }
::selection { background-color: var(--snt-primary-tonal); color: var(--snt-on-surface); }
hr { border-color: var(--snt-border-subtle); opacity: 1; }

.text--small, .text--gray, .text-muted { color: var(--snt-on-surface-2) !important; }

/* ---------- Body wrapper ---------- */
.body-wrapper, .bodywrapper__inner { background-color: var(--snt-surface); }

/* ---------- Sidebar (white, hairline right rule) ---------- */
.sidebar,
.sidebar.bg--dark {
    background: var(--snt-surface) !important;
    border-right: 1px solid var(--snt-border-subtle);
    box-shadow: none !important;
}
.sidebar__logo {
    background-color: var(--snt-surface);
    border-bottom: 1px solid var(--snt-border-subtle);
    min-height: 64px;
    display: flex;
    align-items: center;
}
.sidebar__menu-header {
    color: var(--snt-on-surface-2) !important;
    font-family: var(--snt-font-body);
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;
    font-weight: 500;
    text-transform: none;
    opacity: 1;
}
.sidebar__menu .menu-icon,
.sidebar__menu .menu-title {
    color: var(--snt-on-surface) !important;
    text-shadow: none !important;
}
.sidebar__menu .menu-icon { color: var(--snt-on-surface-2) !important; }
.sidebar__menu .menu-title { font-size: 14px; font-weight: 500; letter-spacing: 0.14px; }
.sidebar__menu .sidebar-menu-item > a {
    border-left: 0;
    border-radius: var(--snt-radius-sm);
    margin: 0 8px;
    transition: background-color var(--snt-ease), color var(--snt-ease);
}
.sidebar__menu .sidebar-menu-item > a:hover {
    background-color: var(--snt-hover) !important;
}
.sidebar__menu .sidebar-menu-item > a:hover .menu-icon,
.sidebar__menu .sidebar-menu-item > a:hover .menu-title { color: var(--snt-on-surface) !important; }

.sidebar__menu .sidebar-menu-item .side-menu--open,
.sidebar__menu .sidebar-menu-item.active > a {
    background-color: var(--snt-primary-tonal) !important;
}
.sidebar__menu .sidebar-menu-item.active > a .menu-icon,
.sidebar__menu .sidebar-menu-item.active > a .menu-title,
.sidebar__menu .sidebar-menu-item .side-menu--open .menu-icon,
.sidebar__menu .sidebar-menu-item .side-menu--open .menu-title { color: var(--snt-primary-strong) !important; }

.sidebar__menu .sidebar-dropdown > a::before { color: var(--snt-on-surface-2) !important; }
.sidebar__menu .sidebar-submenu { background-color: transparent !important; }
.sidebar__menu .sidebar-submenu .sidebar-menu-item > a { margin-left: 16px; }
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active > a { background-color: transparent !important; }
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active a .menu-icon,
.sidebar__menu .sidebar-submenu .sidebar-menu-item.active a .menu-title { color: var(--snt-primary-strong) !important; }
.sidebar__menu .sidebar-submenu .sidebar-menu-item a:hover .menu-icon,
.sidebar__menu .sidebar-submenu .sidebar-menu-item a:hover .menu-title { color: var(--snt-on-surface) !important; }

.sidebar__menu-wrapper::-webkit-scrollbar-track { background: var(--snt-surface); }
.sidebar__menu-wrapper::-webkit-scrollbar-thumb { background: var(--snt-border); }
.res-sidebar-close-btn { color: var(--snt-on-surface); }
.menu-badge { border-radius: var(--snt-radius-sm); }

/* ---------- Topbar (64px, white, hairline + subtle elevation) ---------- */
.navbar-wrapper {
    background-color: var(--snt-surface) !important;
    border-bottom: 1px solid var(--snt-border-subtle);
    box-shadow: none;
    min-height: 64px;
}
.navbar__right button,
.navbar__right button i,
.navbar__left button i,
.res-sidebar-open-btn i { color: var(--snt-on-surface) !important; text-shadow: none; }
.navbar__right .primary--layer { border-radius: var(--snt-radius-md); }
.navbar__right .primary--layer:hover { background-color: var(--snt-hover); }
.navbar-user__name { font-weight: 500; color: var(--snt-on-surface); }
.navbar-user__desig { color: var(--snt-on-surface-2); font-size: 12px; letter-spacing: 0.3px; }
.dropdown-menu {
    border: 1px solid var(--snt-border-subtle);
    border-radius: var(--snt-radius-lg);
    box-shadow: var(--snt-elev-subtle);
    padding: 8px;
}
.dropdown-menu .dropdown-item,
.dropdown-menu__item {
    border-radius: var(--snt-radius-sm);
    color: var(--snt-on-surface);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu__item:hover { background-color: var(--snt-hover); }
.dropdown-menu__header { border-bottom: 1px solid var(--snt-border-subtle); }

/* ---------- Breadcrumb ---------- */
.page-breadcrumb li, .page-breadcrumb li a { color: var(--snt-on-surface-2); }
.page-breadcrumb li a:hover { color: var(--snt-primary-strong); }

/* ---------- Cards: flat, hairline, no shadow ---------- */
.card {
    background-color: var(--snt-surface);
    border: 1px solid var(--snt-border-subtle) !important;
    border-radius: 0;
    box-shadow: none !important;
}
.card-header, .card-footer {
    background-color: var(--snt-surface) !important;
    border-color: var(--snt-border-subtle) !important;
}
.card-header .card-title,
.card-header h5, .card-header h6 { font-family: var(--snt-font-display); font-weight: 500; color: var(--snt-on-surface); }

/* ---------- Buttons: 2px radius, sentence case, overlay states ---------- */
.btn {
    border-radius: var(--snt-radius-xs) !important;
    font-family: var(--snt-font-body);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none !important;
    transition: background-color var(--snt-ease), color var(--snt-ease), border-color var(--snt-ease);
}
.btn:disabled, .btn.disabled { opacity: 0.38; }

.btn--primary, .btn-outline--primary { --color: #3084C2; }
.btn--primary:hover, .btn--primary:focus, .btn--primary:focus-visible { --color: #2C79B2; }
.btn--primary:active { --color: #2A74AB; }
.btn--secondary, .btn-outline--secondary { --color: #5C5C5C; }
.btn--secondary:hover, .btn--secondary:focus, .btn--secondary:active { --color: #454545; }
.btn--success, .btn-outline--success { --color: #1A7F37; }
.btn--success:hover, .btn--success:focus, .btn--success:active { --color: #10662D; }
.btn--danger, .btn-outline--danger { --color: #A32C28; }
.btn--danger:hover, .btn--danger:focus, .btn--danger:active { --color: #71211E; }
.btn--warning, .btn-outline--warning { --color: #8A7237; }
.btn--warning:hover, .btn--warning:focus, .btn--warning:active { --color: #6B5A39; }
.btn--info, .btn-outline--info { --color: #2D6FA3; }
.btn--info:hover, .btn--info:focus, .btn--info:active { --color: #23567F; }
.btn--dark, .btn-outline--dark { --color: #171717; }
.btn--dark:hover, .btn--dark:focus, .btn--dark:active { --color: #2E2E2E; }

/* Bootstrap stock buttons that slip through */
.btn-primary { background-color: var(--snt-primary); border-color: var(--snt-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--snt-primary-hover); border-color: var(--snt-primary-hover); }

/* ---------- Semantic surfaces ---------- */
.bg--primary   { background-color: #3084C2 !important; }
.bg--secondary { background-color: #5C5C5C !important; }
.bg--success   { background-color: #1A7F37 !important; }
.bg--danger    { background-color: #A32C28 !important; }
.bg--warning   { background-color: #8A7237 !important; }
.bg--info      { background-color: #2D6FA3 !important; }
.bg--dark      { background-color: #171717 !important; }

.text--primary   { color: #2D6FA3 !important; }
.text--secondary { color: #5C5C5C !important; }
.text--success   { color: #1A7F37 !important; }
.text--danger    { color: #A32C28 !important; }
.text--warning   { color: #8A7237 !important; }
.text--info      { color: #2D6FA3 !important; }
.text--dark      { color: #171717 !important; }

.border--primary { border-color: #3084C2 !important; }
.border--success { border-color: #1A7F37 !important; }
.border--danger  { border-color: #A32C28 !important; }
.border--warning { border-color: #8A7237 !important; }
.border--info    { border-color: #2D6FA3 !important; }

/* Loud stock utility palette → SNT blue / neutral ramps (no decorative status colours) */
.bg--red, .bg--pink                       { background-color: #A32C28 !important; }
.bg--purple, .bg--deep-purple, .bg--indigo{ background-color: #23567F !important; }
.bg--blue, .bg--light-blue, .bg--cyan     { background-color: #3084C2 !important; }
.bg--teal, .bg--blue-gray                 { background-color: #193E5D !important; }
.bg--green, .bg--light-green, .bg--lime   { background-color: #1A7F37 !important; }
.bg--yellow, .bg--amber, .bg--orange      { background-color: #8A7237 !important; }
.bg--brown, .bg--gray                     { background-color: #5C5C5C !important; }
.bg--black                                { background-color: #171717 !important; }

.text--red, .text--pink                          { color: #A32C28 !important; }
.text--purple, .text--deep-purple, .text--indigo { color: #23567F !important; }
.text--blue, .text--light-blue, .text--cyan      { color: #2D6FA3 !important; }
.text--teal, .text--blue-gray                    { color: #193E5D !important; }
.text--green, .text--light-green, .text--lime    { color: #1A7F37 !important; }
.text--yellow, .text--amber, .text--orange       { color: #8A7237 !important; }
.text--brown                                     { color: #5C5C5C !important; }

.border--red { border-color: #A32C28 !important; }
.border--green { border-color: #1A7F37 !important; }
.border--blue, .border--cyan, .border--indigo, .border--purple, .border--teal { border-color: #3084C2 !important; }
.border--amber, .border--orange { border-color: #8A7237 !important; }
.border--brown, .border--gray { border-color: #C9C9C9 !important; }

/* ---------- Dashboard widgets: white, hairline, one blue chip ---------- */
.widget-two,
.widget-two[class*="bg--"],
.widget-card, .widget-card-inner, .widget-three, .widget-four,
.widget-five, .widget-six, .widget-seven, .widget-eight {
    background-color: var(--snt-surface) !important;
    background-image: none !important;
    border: 1px solid var(--snt-border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.widget-two .widget-two__content h2,
.widget-two .widget-two__content h3,
.widget-two[class*="bg--"] .widget-two__content h2,
.widget-two[class*="bg--"] .widget-two__content h3,
.widget-card-amount {
    font-family: var(--snt-font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--snt-on-surface) !important;
}
.widget-two .widget-two__content p,
.widget-two[class*="bg--"] .widget-two__content p,
.widget-card-title {
    color: var(--snt-on-surface-2) !important;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.14px;
    text-transform: none;
    font-weight: 400;
    text-shadow: none;
}
.widget-two .widget-two__icon,
.widget-two.style--two .widget-two__icon,
.widget-two[class*="bg--"] .widget-two__icon {
    background-color: var(--snt-primary-tonal) !important;
    border: 0 !important;
    color: var(--snt-primary-strong) !important;
    border-radius: var(--snt-radius-md) !important;
}
.widget-two .widget-two__icon i { color: var(--snt-primary-strong) !important; }
.widget-two.style--two::before,
.widget-two.style--two::after { display: none !important; }
.widget-two .overlay-icon { color: var(--snt-on-surface) !important; opacity: 0.04 !important; }
.widget-two .widget-two__btn,
.widget-two.style--two .widget-two__btn {
    background-color: var(--snt-primary-tonal) !important;
    border: 0 !important;
    color: var(--snt-primary-strong) !important;
    border-radius: var(--snt-radius-xs) !important;
    font-weight: 500;
}
.widget-two .widget-two__btn:hover,
.widget-two.style--two .widget-two__btn:hover {
    background-color: var(--snt-primary) !important;
    color: var(--snt-on-primary) !important;
}

/* ---------- Badges (4px, caption-medium, tonal) ---------- */
.badge {
    border-radius: var(--snt-radius-sm);
    font-family: var(--snt-font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;
    text-transform: none;
    padding: 2px 8px;
}
.badge--primary { background-color: var(--snt-primary-tonal) !important; color: var(--snt-primary-strong) !important; border-color: transparent !important; }
.badge--success { background-color: var(--snt-confirmation-tonal) !important; color: var(--snt-confirmation) !important; border-color: transparent !important; }
.badge--danger, .badge--red { background-color: var(--snt-invalid-tonal) !important; color: var(--snt-invalid) !important; border-color: transparent !important; }
.badge--warning, .badge--pending { background-color: var(--snt-attention-tonal) !important; color: var(--snt-attention) !important; border-color: transparent !important; }
.badge--info { background-color: var(--snt-information-tonal) !important; color: var(--snt-information) !important; border-color: transparent !important; }
.badge--dark, .badge--secondary { background-color: var(--snt-surface-2) !important; color: var(--snt-on-surface) !important; border-color: transparent !important; }

/* ---------- Tables: hairlines, no zebra ---------- */
.table th,
.table thead th {
    font-family: var(--snt-font-body);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
    color: var(--snt-on-surface-2) !important;
    background-color: var(--snt-surface) !important;
    border-bottom: 1px solid var(--snt-border-subtle) !important;
}
.table td { color: var(--snt-on-surface); }
.table td, .table th { border-color: var(--snt-border-subtle) !important; }
.table-striped tbody tr:nth-of-type(odd),
.table-responsive--lg tbody tr:nth-child(odd),
.table-responsive--md tbody tr:nth-child(odd),
.table-responsive--sm tbody tr:nth-child(odd),
.table-responsive--xs tbody tr:nth-child(odd) { background-color: transparent !important; }
.table tbody tr { transition: background-color var(--snt-ease); }
.table tbody tr:hover { background-color: var(--snt-surface-2) !important; }

/* ---------- Forms: 0 radius, #C9C9C9 border, 2px blue focus ---------- */
.form-control, .form-select, .form--control {
    border-radius: 0 !important;
    border: 1px solid var(--snt-border);
    color: var(--snt-on-surface);
    background-color: var(--snt-surface);
    font-size: 14px;
    box-shadow: none;
    transition: border-color var(--snt-ease), box-shadow var(--snt-ease);
}
.form-control:focus, .form-select:focus, .form--control:focus {
    border-color: var(--snt-primary) !important;
    box-shadow: inset 0 0 0 1px var(--snt-primary) !important;
}
.form-control.is-invalid { border-color: var(--snt-invalid) !important; }
.form-control:disabled, .form-control[readonly] { background-color: var(--snt-surface-2); }
.form-control::placeholder { color: var(--snt-on-surface-3); }
.input-group-text {
    border-radius: 0 !important;
    border-color: var(--snt-border);
    background-color: var(--snt-surface-2);
    color: var(--snt-on-surface-2);
}
.form-group label, .form-label, .label--text {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.14px;
    text-transform: none;
    color: var(--snt-on-surface);
    font-weight: 500;
}
.form-check-input:checked { background-color: var(--snt-primary); border-color: var(--snt-primary); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 0 !important;
    border-color: var(--snt-border) !important;
}
.select2-dropdown {
    border-color: var(--snt-border-subtle) !important;
    box-shadow: var(--snt-elev-subtle);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--selectable:hover {
    background-color: var(--snt-hover) !important;
    color: var(--snt-on-surface) !important;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--snt-primary-tonal) !important;
    color: var(--snt-primary-strong) !important;
}
.toggle.btn { border-radius: var(--snt-radius-full, 999px) !important; }

/* ---------- Alerts: tonal, no edge bar ---------- */
.alert { border-radius: 0; border: 0; border-left: 0 !important; }
.alert-success, .alert--success { background-color: var(--snt-confirmation-tonal); color: var(--snt-confirmation); }
.alert-danger, .alert--danger { background-color: var(--snt-invalid-tonal); color: var(--snt-invalid); }
.alert-warning, .alert--warning { background-color: var(--snt-attention-tonal); color: var(--snt-attention); }
.alert-info, .alert--info, .alert-primary, .alert--primary { background-color: var(--snt-information-tonal); color: var(--snt-information); }

/* ---------- Pagination ---------- */
.pagination .page-link {
    color: var(--snt-on-surface);
    border-color: var(--snt-border-subtle);
    border-radius: var(--snt-radius-sm) !important;
    box-shadow: none;
}
.pagination .page-link:hover { background-color: var(--snt-hover); color: var(--snt-on-surface); }
.pagination .page-item.active .page-link {
    background-color: var(--snt-primary);
    border-color: var(--snt-primary);
    color: var(--snt-on-primary);
}

/* ---------- Tabs: underline style ---------- */
.nav-tabs { border-bottom: 1px solid var(--snt-border-subtle); }
.nav-tabs .nav-link {
    color: var(--snt-on-surface-2);
    font-weight: 500;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--snt-radius-sm) var(--snt-radius-sm) 0 0;
}
.nav-tabs .nav-link.active,
.nav-tabs-primary .nav-link.active {
    color: var(--snt-primary-strong) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom: 2px solid var(--snt-primary) !important;
}

/* ---------- Modal: 0 radius, strong elevation ---------- */
.modal-content {
    border-radius: 0;
    border: 0;
    box-shadow: var(--snt-elev-strong);
}
.modal-header, .modal-footer {
    background-color: var(--snt-surface);
    border-color: var(--snt-border-subtle);
    padding: 16px 24px;
}
.modal-body { padding: 24px; color: var(--snt-on-surface-2); }
.modal-title { font-size: 20px; line-height: 28px; }

.progress { border-radius: 0; background-color: var(--snt-surface-2); }
.progress-bar { background-color: var(--snt-primary); }

/* =========================================================
   Login / password reset — white canvas, flat card
   ========================================================= */
.login-main {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 48px 0;
    background: var(--snt-surface-2) !important;
    background-image: none !important;
}
.login-main::before,
.login-area::after,
.login-wrapper__top::after { display: none !important; }
.login-area { position: relative; z-index: 2; }

.login-wrapper {
    background-color: var(--snt-surface);
    border: 1px solid var(--snt-border-subtle);
    border-radius: 0;
    box-shadow: none;
    padding: 48px;
}
@media (max-width: 575px) {
    .login-wrapper { padding: 32px 24px; }
}
.login-wrapper__top {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0 0 32px !important;
    text-align: left;
}
.login-wrapper__logo { display: block; height: 48px; width: auto; max-width: 100%; margin-bottom: 32px; }
.login-wrapper__top .eyebrow {
    display: block;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;
    font-weight: 500;
    color: var(--snt-primary-strong) !important;
    margin-bottom: 8px;
}
.login-wrapper__top .title {
    font-family: var(--snt-font-display);
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.28px;
    font-weight: 500;
    color: var(--snt-on-surface) !important;
    margin-bottom: 8px;
}
.login-wrapper__top .title strong { color: var(--snt-on-surface); font-weight: 500; }
.login-wrapper__top p {
    font-size: 16px !important;
    line-height: 26px;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    color: var(--snt-on-surface-2) !important;
    margin: 0;
}
.login-wrapper__body { background-color: var(--snt-surface); padding: 0 !important; }
.login-wrapper__body .mt-30, .login-form.mt-30 { margin-top: 0 !important; }

.login-form .form-group, .login-wrapper__body .form-group { margin-bottom: 24px; }
.login-form label,
.login-wrapper__body label {
    color: var(--snt-on-surface) !important;
    font-size: 14px !important;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0.14px;
    text-transform: none;
    margin-bottom: 4px;
}
.login-form .form-control,
.login-wrapper__body .form-control,
.login-wrapper__body input[type="text"],
.login-wrapper__body input[type="email"],
.login-wrapper__body input[type="password"] {
    height: 48px;
    padding: 0 12px !important;
    font-size: 16px !important;
    background-color: var(--snt-surface) !important;
    border: 1px solid var(--snt-border) !important;
    border-radius: 0 !important;
    color: var(--snt-on-surface) !important;
    letter-spacing: 0;
}
.login-form .form-control:hover,
.login-wrapper__body .form-control:hover { background-color: #EBEBEB !important; }
.login-form .form-control:focus,
.login-wrapper__body .form-control:focus {
    background-color: var(--snt-surface) !important;
    border-color: var(--snt-primary) !important;
    box-shadow: inset 0 0 0 1px var(--snt-primary) !important;
}
.login-form .form-control::placeholder,
.login-wrapper__body .form-control::placeholder { color: var(--snt-on-surface-3) !important; opacity: 1; }
.login-wrapper__body input:-webkit-autofill,
.login-wrapper__body input:-webkit-autofill:hover,
.login-wrapper__body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--snt-on-surface);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    caret-color: var(--snt-on-surface);
}

.login-form .cmn-btn,
.login-form .btn,
.login-wrapper__body .cmn-btn {
    height: 48px;
    padding: 12px 16px;
    background-color: var(--snt-primary) !important;
    border: 0 !important;
    border-radius: var(--snt-radius-xs) !important;
    color: var(--snt-on-primary) !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.login-form .cmn-btn:hover,
.login-form .btn:hover,
.login-wrapper__body .cmn-btn:hover { background-color: var(--snt-primary-hover) !important; }
.login-form .cmn-btn:active,
.login-wrapper__body .cmn-btn:active { background-color: var(--snt-primary-pressed) !important; }

.forget-text,
.login-form .forget-text,
.login-wrapper__body .forget-text {
    color: var(--snt-primary-strong) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14px;
    text-decoration: none;
}
.login-form .forget-text:hover { text-decoration: underline; }

.login-form .form-check .form-check-label { color: var(--snt-on-surface-2); }
.login-form .form-check .form-check-input:checked ~ .form-check-label::before {
    background-color: var(--snt-primary) !important;
    border-color: var(--snt-primary) !important;
}
.login-wrapper__body p,
.login-wrapper__body .text--small { color: var(--snt-on-surface-2); }

.verification-code,
.pincode-input-container { display: flex; gap: 8px; justify-content: center; }
.verification-code input,
.pincode-input-container input,
.verification-code .form-control {
    background-color: var(--snt-surface) !important;
    border: 1px solid var(--snt-border) !important;
    border-radius: 0 !important;
    color: var(--snt-on-surface) !important;
    font-family: var(--snt-font-display);
    font-size: 20px !important;
    text-align: center;
    height: 48px;
    width: 48px !important;
}
.verification-code input:focus,
.pincode-input-container input:focus {
    border-color: var(--snt-primary) !important;
    box-shadow: inset 0 0 0 1px var(--snt-primary) !important;
}
.pincode-input-container input ~ input { border-left-width: 1px !important; }

.login-wrapper__body .alert,
.login-wrapper__body .invalid-feedback,
.login-wrapper__body .text--danger { color: var(--snt-invalid) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}