/* ============================================================================
   SAN Premium Theme Layer
   ----------------------------------------------------------------------------
   Token-driven visual layer over Metronic v4 / Bootstrap 3.

   Loaded LAST, after tokens.css and every plugin stylesheet. Nothing here
   changes markup or behaviour - it only re-skins existing classes so the
   legacy template reads as a modern product.

   Every value comes from tokens.css. If a value is missing, add a token
   there instead of hardcoding it here.

   !important is used only where the Metronic sheets already use it.
   ========================================================================== */


/* ==========================================================================
   1. BASE
   ========================================================================== */

body {
  font-family: var(--san-font-sans);
  font-size: var(--san-text-md);
  line-height: var(--san-leading-normal);
  color: var(--san-text-primary);
  background-color: var(--san-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Metronic sets "Open Sans" on ~40 selectors. One sweep keeps type coherent
   without editing the 320KB component sheets. */
body,
button,
input,
select,
textarea,
.form-control,
.btn,
h1, h2, h3, h4, h5, h6,
.page-title,
.portlet > .portlet-title > .caption,
.table,
.modal-title,
.dropdown-menu > li > a,
.nav-tabs > li > a,
.label,
.badge,
.note,
.alert,
.tooltip,
.popover,
.select2-container,
.select2-drop,
.bootstrap-switch,
.dataTables_wrapper {
  font-family: var(--san-font-sans);
}

h1, h2, h3, h4, h5, h6,
.page-title {
  color: var(--san-text-primary);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-tight);
  line-height: var(--san-leading-tight);
}

h1 { font-size: var(--san-text-4xl); }
h2 { font-size: var(--san-text-3xl); }
h3 { font-size: var(--san-text-2xl); }
h4 { font-size: var(--san-text-xl); }
h5 { font-size: var(--san-text-lg); }
h6 { font-size: var(--san-text-md); }

a {
  color: var(--san-text-link);
  transition: color var(--san-duration-fast) var(--san-ease-standard);
}

a:hover,
a:focus {
  color: var(--san-text-link-hover);
  text-decoration: none;
}

hr {
  border-top: 1px solid var(--san-border-subtle);
}

code, kbd, pre, samp,
.font-mono {
  font-family: var(--san-font-mono);
  font-size: var(--san-text-sm);
}

::selection {
  background: var(--san-alpha-brand-24);
  color: var(--san-text-primary);
}

/* Visible, consistent keyboard focus everywhere. Mouse clicks stay clean. */
:focus-visible {
  outline: none;
  box-shadow: var(--san-ring-brand);
  border-radius: var(--san-radius-xs);
}

/* Thin, quiet scrollbars - a big part of the "premium" read on dense screens */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--san-border-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--san-border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--san-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--san-neutral-400);
  border: 3px solid transparent;
  background-clip: content-box;
}


/* ==========================================================================
   2. HEADER
   Two-tier Metronic header (white top bar + dark mega-menu bar) is unified
   into one light, single-surface header with a brand underline for the
   active item. No markup change: the "hor-menu-light" look is applied via
   tokens on the existing classes.
   ========================================================================== */

.page-header {
  background: var(--san-surface-1);
  border-bottom: 1px solid var(--san-border);
  box-shadow: var(--san-shadow-xs);
}

.page-header .page-header-top {
  height: var(--san-header-height);
  background: var(--san-surface-1);
  border-bottom: 1px solid var(--san-border-subtle);
}

.page-header .page-header-top.fixed {
  background: var(--san-surface-1) !important;
  box-shadow: var(--san-shadow-sm);
}

.page-header .page-header-top .page-logo {
  padding: var(--san-space-4) 0;
}

.page-header .page-header-top .page-logo > a > .logo-default {
  max-height: 38px;
  width: auto;
}

/* -- Top-right utility menu ------------------------------------------------ */

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle {
  color: var(--san-text-secondary);
  border-radius: var(--san-radius-md);
  padding: var(--san-space-4) var(--san-space-5);
  transition: background var(--san-duration-fast) var(--san-ease-standard),
              color var(--san-duration-fast) var(--san-ease-standard);
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover,
.page-header .page-header-top .top-menu .navbar-nav > li.dropdown.open > .dropdown-toggle {
  background: var(--san-surface-hover) !important;
  color: var(--san-text-primary);
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > i {
  color: var(--san-text-muted);
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
  color: var(--san-text-primary);
  font-weight: var(--san-weight-medium);
}

.page-header .page-header-top .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > img {
  border-radius: var(--san-radius-pill);
  border: 1px solid var(--san-border);
}

/* -- Mega menu bar --------------------------------------------------------- */

.page-header .page-header-menu {
  height: auto;
  min-height: var(--san-header-menu-height);
  background: var(--san-surface-1);
}

.page-header .page-header-menu.fixed {
  box-shadow: var(--san-shadow-sm);
}

.page-header .page-header-menu .hor-menu .navbar-nav > li > a {
  color: var(--san-text-secondary) !important;
  font-size: var(--san-text-md);
  font-weight: var(--san-weight-medium);
  padding: var(--san-space-5) var(--san-space-5);
  border-radius: 0;
  position: relative;
  transition: color var(--san-duration-fast) var(--san-ease-standard),
              background var(--san-duration-fast) var(--san-ease-standard);
}

.page-header .page-header-menu .hor-menu .navbar-nav > li > a > i {
  color: var(--san-text-disabled) !important;
  margin-left: var(--san-space-2);
}

.page-header .page-header-menu .hor-menu .navbar-nav > li > a:hover,
.page-header .page-header-menu .hor-menu .navbar-nav > li.open > a {
  color: var(--san-text-primary) !important;
  background: var(--san-surface-hover) !important;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li.open > a > i,
.page-header .page-header-menu .hor-menu .navbar-nav > li > a:hover > i {
  color: var(--san-text-secondary) !important;
}

/* Active section: brand underline instead of a filled block. */
.page-header .page-header-menu .hor-menu .navbar-nav > li.active > a,
.page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:hover {
  color: var(--san-text-brand) !important;
  background: transparent !important;
  font-weight: var(--san-weight-semibold);
}

.page-header .page-header-menu .hor-menu .navbar-nav > li.active > a:after {
  content: "";
  position: absolute;
  left: var(--san-space-5);
  right: var(--san-space-5);
  bottom: 0;
  height: 2px;
  background: var(--san-brand);
  border-radius: var(--san-radius-pill) var(--san-radius-pill) 0 0;
}

.page-header .page-header-menu .hor-menu .navbar-nav > li.active > a > i {
  color: var(--san-brand) !important;
}

/* Mega/classic dropdown panels inside the menu bar */
.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border);
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-lg);
  padding: var(--san-space-3);
  margin-top: var(--san-space-2);
}

.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu > li > a {
  color: var(--san-text-secondary) !important;
  border-radius: var(--san-radius-sm);
  padding: var(--san-space-3) var(--san-space-5);
}

.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu > li > a:hover,
.page-header .page-header-menu .hor-menu .navbar-nav > li .dropdown-menu > li.active > a {
  color: var(--san-text-primary) !important;
  background: var(--san-surface-hover) !important;
}

/* Header search box */
.page-header .page-header-menu .search-form {
  background: var(--san-surface-sunken);
  border-radius: var(--san-radius-md);
}

.page-header .page-header-menu .search-form .form-control {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--san-text-primary);
}

/* Responsive menu toggler */
.page-header .page-header-top .menu-toggler {
  background-image: none;
  color: var(--san-text-secondary);
}


/* ==========================================================================
   3. PAGE HEAD / TITLE / BREADCRUMB
   ========================================================================== */

.page-container {
  background: var(--san-canvas);
}

.page-head {
  background: transparent;
  border-bottom: none;
  min-height: 0;
  margin-bottom: var(--san-space-2);
}

.page-head .page-title {
  padding: var(--san-space-7) 0 var(--san-space-4);
  margin: 0;
}

.page-head .page-title > h1,
.page-head .page-title > h3 {
  font-size: var(--san-text-3xl);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-tight);
  color: var(--san-text-primary);
  margin: 0;
}

/* Subtitle sits inline beside the h1, the way the old template had it
   (TVB2B-19921): "Settings  application settings". */
.page-head .page-title > h1 > small,
.page-head .page-title > h3 > small {
  display: inline;
  margin-left: var(--san-space-5);
  font-size: var(--san-text-lg);
  font-weight: var(--san-weight-regular);
  letter-spacing: var(--san-tracking-normal);
  line-height: var(--san-leading-tight);
  color: var(--san-text-muted);
}

.page-head .page-toolbar {
  padding-top: var(--san-space-7);
}

.page-bar {
  background: transparent;
  padding: 0;
  margin-bottom: var(--san-space-6);
}

.page-bar .page-breadcrumb > li > a,
.page-bar .page-breadcrumb > li > span {
  color: var(--san-text-muted);
  font-size: var(--san-text-sm);
}

.page-bar .page-breadcrumb > li > a:hover {
  color: var(--san-text-link);
}

.page-content {
  background: var(--san-canvas);
  padding: 0 var(--san-container-gutter) var(--san-space-9);
}

/* -- Footer ---------------------------------------------------------------
   The template ships two stacked dark bands: an always-empty .page-prefooter
   (#48525e) and .page-footer (#3b434c). Together they read as a broken slab
   below the content. The empty one goes, the real one becomes a light rule.
   ------------------------------------------------------------------------ */

/* Not :empty - the div holds a whitespace text node, so :empty never matches.
   _Layout.cshtml renders it unconditionally with no content. */
.page-prefooter {
  display: none;
}

/* Sticky footer. The template has no viewport-height rule, so on short pages
   (Dashboard, empty grids) the footer floated mid-screen with bare canvas
   under it. Body becomes a flex column and .page-container takes the slack.
   Scoped away from body.login, which has its own centred layout. */
html {
  min-height: 100%;
}

body:not(.login) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:not(.login) > .page-container {
  flex: 1 0 auto;
}

body:not(.login) > .page-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

.page-footer {
  background: var(--san-surface-1);
  border-top: 1px solid var(--san-border);
  color: var(--san-text-muted);
  font-size: var(--san-text-sm);
  font-weight: var(--san-weight-regular);
  padding: var(--san-space-6) 0;
}

.page-footer-inner {
  color: var(--san-text-muted);
  font-size: var(--san-text-sm);
}

.page-footer b,
.page-footer strong {
  color: var(--san-text-secondary);
  font-weight: var(--san-weight-semibold);
}

.scroll-to-top {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border);
  border-radius: var(--san-radius-md);
  box-shadow: var(--san-shadow-md);
  padding: var(--san-space-3) var(--san-space-4);
}

.scroll-to-top > i {
  color: var(--san-text-secondary);
  font-size: var(--san-text-xl);
  opacity: 1;
  filter: none;
}

/* Page load progress bar (pace) - was the raw legacy green */
.pace .pace-progress {
  background: var(--san-brand) !important;
}

/* Theme picker button in the page toolbar */
.page-head .page-toolbar .btn-theme-panel > .btn {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border);
  border-radius: var(--san-radius-md);
  color: var(--san-text-secondary);
  box-shadow: var(--san-shadow-xs);
}


/* ==========================================================================
   4. PORTLET  (the card primitive - 38 usages across the views)
   ========================================================================== */

.portlet {
  margin-bottom: var(--san-space-7);
  border-radius: var(--san-radius-lg);
}

.portlet.light {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border-subtle);
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-sm);
  padding: var(--san-space-5) var(--san-space-7) var(--san-space-7);
  transition: box-shadow var(--san-duration-normal) var(--san-ease-standard);
}

.portlet.light.portlet-fit {
  padding: 0;
}

.portlet.light > .portlet-title {
  border-bottom: 1px solid var(--san-border-subtle);
  min-height: 46px;
  padding: 0;
  margin-bottom: var(--san-space-5);
}

.portlet.light.portlet-fit > .portlet-title {
  padding: var(--san-space-5) var(--san-space-7) 0;
  margin-bottom: var(--san-space-5);
}

.portlet.light.portlet-fit > .portlet-body {
  padding: 0 var(--san-space-7) var(--san-space-7);
}

/* Caption: small, tracked, quiet. The screen title carries the emphasis. */
.portlet.light > .portlet-title > .caption {
  color: var(--san-text-primary);
  padding: var(--san-space-5) 0;
}

.portlet.light > .portlet-title > .caption > .caption-subject {
  font-size: var(--san-text-lg);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-normal);
  text-transform: none;
}

.portlet.light > .portlet-title > .caption > .caption-subject.uppercase {
  font-size: var(--san-text-sm);
  letter-spacing: var(--san-tracking-wide);
  text-transform: uppercase;
  color: var(--san-text-secondary);
}

.portlet.light > .portlet-title > .caption > .caption-helper {
  color: var(--san-text-muted);
  font-size: var(--san-text-sm);
}

.portlet.light > .portlet-title > .caption > i {
  color: var(--san-text-muted);
  font-size: var(--san-text-lg);
  margin-right: var(--san-space-3);
}

.portlet.light > .portlet-title > .actions,
.portlet.light > .portlet-title > .tools {
  padding: var(--san-space-4) 0;
}

/* Filter selects in a portlet toolbar. .tools is floated and shrink-wraps, so
   a width:100% child collapses to nothing useful - and the select2 panel
   inherits that width. Fixing it here fixes both (TVB2B-19921). */
/* display:block keeps them stacked. Metronic renders toolbar controls
   inline-block, and once they had a fixed width they lined up side by side
   instead of one per row (TVB2B-19921). */
.portlet > .portlet-title > .tools > select.form-control,
.portlet > .portlet-title > .tools > .bootstrap-select {
  display: block;
  width: var(--san-toolbar-select-width);
  max-width: 100%;
  margin-bottom: var(--san-space-3);
}

/* select2 writes width:100% straight onto the container as an inline style,
   which no class selector can beat - hence !important here. */
.portlet > .portlet-title > .tools > .select2-container {
  display: block;
  width: var(--san-toolbar-select-width) !important;
  max-width: 100%;
  margin-bottom: var(--san-space-3);
}

.portlet > .portlet-title > .tools > select.form-control:last-child,
.portlet > .portlet-title > .tools > .select2-container:last-child {
  margin-bottom: 0;
}

.portlet.light > .portlet-title > .tools > a {
  color: var(--san-text-muted);
  opacity: 1;
  transition: color var(--san-duration-fast) var(--san-ease-standard);
}

.portlet.light > .portlet-title > .tools > a:hover {
  color: var(--san-text-primary);
}

/* Plain (non-light) portlets and box variants */
.portlet:not(.light) {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border-subtle);
  box-shadow: var(--san-shadow-sm);
}

.portlet:not(.light) > .portlet-title {
  border-radius: var(--san-radius-lg) var(--san-radius-lg) 0 0;
  border-bottom: 1px solid var(--san-border-subtle);
  min-height: 46px;
  padding: 0 var(--san-space-7);
  margin-bottom: 0;
}

.portlet:not(.light) > .portlet-title > .caption {
  font-size: var(--san-text-lg);
  font-weight: var(--san-weight-semibold);
  color: var(--san-text-primary);
  padding: var(--san-space-5) 0;
}

.portlet:not(.light) > .portlet-body {
  padding: var(--san-space-7);
}

.portlet > .portlet-body > .form-actions,
.form-actions {
  background: var(--san-surface-2);
  border: 1px solid var(--san-border-subtle);
  border-radius: var(--san-radius-md);
  padding: var(--san-space-5) var(--san-space-6);
  margin-top: var(--san-space-7);
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

/* Centering is done with flex, not with height + line-height. Metronic and
   the page-level sheets (login.css, plugin sheets) each set their own
   vertical padding on .btn; a line-height that assumes zero padding drops
   the label and the icon off-centre. min-height + align-items is immune. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--san-space-4);
  border-radius: var(--san-radius-md);
  font-size: var(--san-text-md);
  font-weight: var(--san-weight-medium);
  letter-spacing: var(--san-tracking-normal);
  padding: 0 var(--san-space-6);
  min-height: var(--san-control-height-md);
  height: auto;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  border-width: 1px;
  box-shadow: var(--san-shadow-xs);
  transition: background var(--san-duration-fast) var(--san-ease-standard),
              border-color var(--san-duration-fast) var(--san-ease-standard),
              color var(--san-duration-fast) var(--san-ease-standard),
              box-shadow var(--san-duration-fast) var(--san-ease-standard),
              transform var(--san-duration-instant) var(--san-ease-standard);
}

/* flex gap already spaces the icon - Metronic's own margin would double it */
.btn > i,
.btn > .fa,
.btn > .glyphicon,
.btn > [class^="icon-"],
.btn > [class*=" icon-"] {
  margin: 0;
  line-height: 1;
  vertical-align: middle;
}

.btn.btn-block,
.btn-block {
  display: flex;
  width: 100%;
}

.btn:active,
.btn.active {
  transform: translateY(1px);
  box-shadow: var(--san-shadow-inset);
}

.btn:focus-visible {
  box-shadow: var(--san-ring-brand);
}

.btn.btn-sm,
.btn-sm {
  min-height: var(--san-control-height-sm);
  padding: 0 var(--san-space-5);
  font-size: var(--san-text-sm);
  gap: var(--san-space-3);
}

.btn.btn-lg,
.btn-lg {
  min-height: var(--san-control-height-lg);
  padding: 0 var(--san-space-7);
  font-size: var(--san-text-lg);
}

.btn.btn-circle,
.btn-circle {
  border-radius: var(--san-radius-pill);
}

.btn.btn-icon-only,
.btn-icon-only {
  width: var(--san-control-height-md);
  min-width: var(--san-control-height-md);
  padding: 0;
  gap: 0;
}

.btn.btn-icon-only.btn-sm,
.btn-icon-only.btn-sm {
  width: var(--san-control-height-sm);
  min-width: var(--san-control-height-sm);
}

.btn[disabled],
.btn.disabled {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}

/* -- Neutral / secondary (16 usages of ".btn default") -------------------- */

.btn.default,
.btn-default {
  background: var(--san-surface-1);
  border-color: var(--san-border-strong);
  color: var(--san-text-secondary);
}

.btn.default:hover,
.btn.default:focus,
.btn-default:hover,
.btn-default:focus {
  background: var(--san-surface-2);
  border-color: var(--san-neutral-400);
  color: var(--san-text-primary);
}

/* -- Primary / brand ------------------------------------------------------- */

.btn.btn-primary,
.btn.green,
.btn.btn-success,
.btn.green-sharp,
.btn.green-haze {
  background: var(--san-brand);
  border-color: var(--san-brand);
  color: var(--san-brand-on);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.green:hover,
.btn.green:focus,
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.green-sharp:hover,
.btn.green-haze:hover {
  background: var(--san-brand-hover);
  border-color: var(--san-brand-hover);
  color: var(--san-brand-on);
}

.btn.btn-primary:active,
.btn.btn-success:active,
.btn.green:active {
  background: var(--san-brand-active);
  border-color: var(--san-brand-active);
}

/* -- Status buttons -------------------------------------------------------- */

.btn.btn-info,
.btn.blue {
  background: var(--san-info);
  border-color: var(--san-info);
  color: var(--san-text-inverse);
}

.btn.btn-info:hover,
.btn.blue:hover {
  background: var(--san-info-600);
  border-color: var(--san-info-600);
}

.btn.btn-warning,
.btn.yellow {
  background: var(--san-warning);
  border-color: var(--san-warning);
  color: var(--san-text-inverse);
}

.btn.btn-warning:hover,
.btn.yellow:hover {
  background: var(--san-warning-600);
  border-color: var(--san-warning-600);
}

.btn.btn-danger,
.btn.red {
  background: var(--san-danger);
  border-color: var(--san-danger);
  color: var(--san-text-inverse);
}

.btn.btn-danger:hover,
.btn.red:hover {
  background: var(--san-danger-600);
  border-color: var(--san-danger-600);
}

.btn.btn-danger:focus-visible {
  box-shadow: var(--san-ring-danger);
}

/* -- Transparent / link ---------------------------------------------------- */

.btn.btn-transparent,
.btn.btn-link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--san-text-secondary);
}

.btn.btn-transparent:hover,
.btn.btn-link:hover {
  background: var(--san-surface-hover);
  border-color: transparent;
  color: var(--san-text-primary);
}

/* -- Groups ---------------------------------------------------------------- */

.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/* ==========================================================================
   6. FORMS
   ========================================================================== */

.form-control {
  height: var(--san-control-height-md);
  padding: 0 var(--san-space-5);
  font-size: var(--san-text-md);
  color: var(--san-text-primary);
  background: var(--san-surface-1);
  border: 1px solid var(--san-border-strong);
  border-radius: var(--san-radius-md);
  box-shadow: none;
  transition: border-color var(--san-duration-fast) var(--san-ease-standard),
              box-shadow var(--san-duration-fast) var(--san-ease-standard),
              background var(--san-duration-fast) var(--san-ease-standard);
}

textarea.form-control {
  height: auto;
  padding: var(--san-space-4) var(--san-space-5);
  line-height: var(--san-leading-normal);
}

select.form-control {
  padding-right: var(--san-space-7);
}

.form-control:hover {
  border-color: var(--san-neutral-400);
}

.form-control:focus {
  border-color: var(--san-border-brand);
  box-shadow: var(--san-ring-brand);
  outline: none;
}

.form-control::placeholder {
  color: var(--san-text-disabled);
}

.form-control[disabled],
.form-control[readonly] {
  background: var(--san-surface-sunken);
  color: var(--san-text-muted);
  border-color: var(--san-border);
  cursor: not-allowed;
}

.form-control.input-sm,
.input-sm {
  height: var(--san-control-height-sm);
  font-size: var(--san-text-sm);
  padding: 0 var(--san-space-4);
  border-radius: var(--san-radius-sm);
}

.form-control.input-lg,
.input-lg {
  height: var(--san-control-height-lg);
  font-size: var(--san-text-lg);
  border-radius: var(--san-radius-md);
}

.control-label,
label {
  font-size: var(--san-text-sm);
  font-weight: var(--san-weight-medium);
  color: var(--san-text-secondary);
  margin-bottom: var(--san-space-3);
}

.help-block,
.form-text {
  color: var(--san-text-muted);
  font-size: var(--san-text-sm);
}

.form-group {
  margin-bottom: var(--san-space-6);
}

/* Validation */
.has-error .form-control,
.input-validation-error {
  border-color: var(--san-border-danger);
}

.has-error .form-control:focus,
.input-validation-error:focus {
  box-shadow: var(--san-ring-danger);
}

.has-error .control-label,
.has-error .help-block,
.field-validation-error,
.validation-summary-errors {
  color: var(--san-danger);
}

.has-success .form-control {
  border-color: var(--san-success);
}

/* Input groups */
.input-group-addon,
.input-group-btn > .btn {
  border-radius: var(--san-radius-md);
}

.input-group-addon {
  background: var(--san-surface-sunken);
  border-color: var(--san-border-strong);
  color: var(--san-text-muted);
  font-size: var(--san-text-sm);
}

.input-group .form-control:not(:first-child),
.input-group-addon:not(:first-child),
.input-group-btn:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group .form-control:not(:last-child),
.input-group-addon:not(:last-child),
.input-group-btn:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* -- Uniform checkboxes / radios ------------------------------------------ */

.checker span,
.radio span {
  border-radius: var(--san-radius-xs);
  border-color: var(--san-border-strong);
  background: var(--san-surface-1);
  box-shadow: none;
  transition: background var(--san-duration-fast) var(--san-ease-standard),
              border-color var(--san-duration-fast) var(--san-ease-standard);
}

.radio span {
  border-radius: var(--san-radius-pill);
}

.checker span.checked,
.radio span.checked {
  background: var(--san-brand);
  border-color: var(--san-brand);
  color: var(--san-brand-on);
}

.checker input[type="checkbox"]:focus-visible + span,
.checker span:hover,
.radio span:hover {
  border-color: var(--san-border-brand);
}

/* -- bootstrap-switch ----------------------------------------------------- */

.bootstrap-switch {
  border-radius: var(--san-radius-pill);
  border-color: var(--san-border-strong);
  box-shadow: var(--san-shadow-xs);
}

.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
  font-size: var(--san-text-sm);
  font-weight: var(--san-weight-medium);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
  background: var(--san-brand);
  color: var(--san-brand-on);
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background: var(--san-surface-3);
  color: var(--san-text-secondary);
}

/* -- select2 -------------------------------------------------------------- */

.select2-container .select2-choice,
.select2-container-multi .select2-choices {
  height: var(--san-control-height-md);
  line-height: calc(var(--san-control-height-md) - 2px);
  background: var(--san-surface-1);
  border: 1px solid var(--san-border-strong);
  border-radius: var(--san-radius-md);
  box-shadow: none;
  color: var(--san-text-primary);
  transition: border-color var(--san-duration-fast) var(--san-ease-standard),
              box-shadow var(--san-duration-fast) var(--san-ease-standard);
}

.select2-container .select2-choice:hover {
  border-color: var(--san-neutral-400);
}

.select2-container.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices {
  border-color: var(--san-border-brand);
  box-shadow: var(--san-ring-brand);
}

.select2-container .select2-choice .select2-arrow {
  background: transparent;
  border-left: none;
}

.select2-drop {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border);
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-lg);
  padding: var(--san-space-2);
  overflow: hidden;
}

.select2-drop.select2-drop-above {
  border-radius: var(--san-radius-lg);
}

.select2-results .select2-result-label {
  border-radius: var(--san-radius-sm);
  padding: var(--san-space-4) var(--san-space-5);
  color: var(--san-text-secondary);
}

.select2-results .select2-highlighted {
  background: var(--san-surface-hover);
  color: var(--san-text-primary);
}

.select2-results .select2-highlighted .select2-result-label {
  color: var(--san-text-primary);
}

/* Search field inside the dropdown (Common.makeSearchable)
   -------------------------------------------------------------------------
   select2 v3 paints the magnifier from select2.png, a VERTICAL sprite pinned
   at "100% -22px". Any other background-position exposes the neighbouring
   sprite cells (chevrons, clear-x, spinner) all at once, so the sprite is
   dropped here and the icon is drawn as a masked SVG that takes its colour
   from a token. */
.select2-drop .select2-search {
  position: relative;
  padding: var(--san-space-2) var(--san-space-2) var(--san-space-3);
}

.select2-search input,
.select2-drop .select2-search input {
  height: var(--san-control-height-sm);
  padding: 0 var(--san-space-9) 0 var(--san-space-4);
  font-size: var(--san-text-md);
  color: var(--san-text-primary);
  border: 1px solid var(--san-border-strong);
  border-radius: var(--san-radius-sm);
  background-color: var(--san-surface-1);
  background-image: none;
}

.select2-drop .select2-search:after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--san-space-5);
  width: 14px;
  height: 14px;
  margin-top: -8px;
  pointer-events: none;
  background-color: var(--san-text-disabled);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.6' cy='6.6' r='4.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10.2 10.2 14 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.6' cy='6.6' r='4.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10.2 10.2 14 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* While select2 is loading it forces its spinner onto the input with
   !important - don't stack the magnifier on top of it. */
.select2-drop .select2-search:has(input.select2-active):after {
  display: none;
}

.select2-drop .select2-search input:focus {
  border-color: var(--san-border-brand);
  box-shadow: var(--san-ring-brand);
  outline: none;
}

.select2-drop .select2-results {
  margin: 0;
  padding: 0;
  max-height: 320px;
}

.select2-drop .select2-no-results,
.select2-drop .select2-searching {
  color: var(--san-text-muted);
  background: transparent;
  padding: var(--san-space-5);
  font-size: var(--san-text-sm);
}

/* select2 marks the typed substring with <span class="select2-match"> */
.select2-drop .select2-match {
  color: var(--san-text-brand);
  font-weight: var(--san-weight-semibold);
  text-decoration: none;
}

/* The mask select2 drops behind an open dropdown */
.select2-drop-mask {
  background: transparent;
}

/* -- bootstrap-select (multiselect plugin) -------------------------------- */

.bootstrap-select .btn {
  background: var(--san-surface-1);
  border-color: var(--san-border-strong);
  color: var(--san-text-primary);
}

.bootstrap-select .dropdown-menu {
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-lg);
  border-color: var(--san-border);
}

/* -- tagsinput / typeahead / fileinput ------------------------------------ */

.bootstrap-tagsinput {
  border: 1px solid var(--san-border-strong);
  border-radius: var(--san-radius-md);
  box-shadow: none;
  min-height: var(--san-control-height-md);
}

.bootstrap-tagsinput .tag {
  background: var(--san-brand-subtle);
  color: var(--san-text-brand);
  border-radius: var(--san-radius-sm);
  padding: var(--san-space-1) var(--san-space-4);
  font-size: var(--san-text-sm);
  font-weight: var(--san-weight-medium);
}

.typeahead.dropdown-menu {
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-lg);
}


/* ==========================================================================
   7. TABLES  (the densest surface in this app - DataTables everywhere)
   ========================================================================== */

.table {
  color: var(--san-text-primary);
  font-size: var(--san-text-md);
  font-feature-settings: var(--san-numeric-tabular);
  font-variant-numeric: tabular-nums slashed-zero;
  border-color: var(--san-border-subtle);
}

.table > thead > tr > th {
  background: var(--san-surface-2);
  color: var(--san-text-muted);
  font-size: var(--san-text-xs);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-wide);
  text-transform: uppercase;
  padding: var(--san-space-4) var(--san-space-5);
  border-bottom: 1px solid var(--san-border) !important;
  border-top: none;
  vertical-align: middle;
  white-space: nowrap;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: var(--san-space-5);
  border-top: 1px solid var(--san-border-subtle);
  vertical-align: middle;
}

.table > tbody > tr:last-child > td {
  border-bottom: none;
}

/* Zebra kept, but at a whisper - hover carries the row affordance. */
.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--san-surface-2);
}

.table-hover > tbody > tr:hover {
  background: var(--san-surface-selected);
  transition: background var(--san-duration-instant) var(--san-ease-standard);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--san-border-subtle);
}

/* Radius on a collapsed-border table needs a wrapper, so the corner rounding
   is applied to .table-scrollable below instead of switching this table to
   border-collapse: separate (which double-draws every inner border in BS3). */

.table > tbody > tr.active > td,
.table > tbody > tr > td.active {
  background: var(--san-brand-subtle) !important;
}

.table .actions,
.table td.actions {
  white-space: nowrap;
}

.table-scrollable {
  border: 1px solid var(--san-border-subtle);
  border-radius: var(--san-radius-md);
  box-shadow: none;
  /* No overflow:hidden here - Metronic relies on overflow-x:auto for wide
     grids, and clipping it would kill horizontal scrolling. */
}

/* Inside the wrapper the table's own outer border would double up. */
.table-scrollable > .table-bordered {
  border: none;
  margin-bottom: 0;
}

/* -- DataTables chrome ---------------------------------------------------- */

.dataTables_wrapper {
  font-size: var(--san-text-md);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: var(--san-control-height-sm);
  border: 1px solid var(--san-border-strong);
  border-radius: var(--san-radius-sm);
  background: var(--san-surface-1);
  color: var(--san-text-primary);
  padding: 0 var(--san-space-4);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--san-border-brand);
  box-shadow: var(--san-ring-brand);
  outline: none;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .seperator {
  color: var(--san-text-muted);
  font-size: var(--san-text-sm);
}

.dataTables_wrapper .dataTables_empty {
  color: var(--san-text-muted);
  padding: var(--san-space-10) var(--san-space-5);
  text-align: center;
}

/* Sort indicators */
.table.dataTable > thead > tr > th.sorting,
.table.dataTable > thead > tr > th.sorting_asc,
.table.dataTable > thead > tr > th.sorting_desc {
  cursor: pointer;
  color: var(--san-text-secondary);
}

.table.dataTable > thead > tr > th.sorting_asc,
.table.dataTable > thead > tr > th.sorting_desc {
  color: var(--san-text-brand);
  background: var(--san-brand-subtle);
}

/* Table toolbar above grids */
.table-toolbar {
  margin-bottom: var(--san-space-5);
}


/* ==========================================================================
   8. PAGINATION  (also covers DataTables bootstrap pagination)
   ========================================================================== */

.pagination {
  border-radius: var(--san-radius-md);
}

/* Same flex-centring rule as .btn - DataTables and Bootstrap each set their
   own padding on these anchors. */
.pagination > li > a,
.pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--san-text-secondary);
  background: var(--san-surface-1);
  border-color: var(--san-border);
  min-width: var(--san-control-height-sm);
  min-height: var(--san-control-height-sm);
  line-height: 1;
  padding: 0 var(--san-space-4);
  font-size: var(--san-text-sm);
  font-weight: var(--san-weight-medium);
  transition: background var(--san-duration-fast) var(--san-ease-standard),
              color var(--san-duration-fast) var(--san-ease-standard);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-top-left-radius: var(--san-radius-sm);
  border-bottom-left-radius: var(--san-radius-sm);
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: var(--san-radius-sm);
  border-bottom-right-radius: var(--san-radius-sm);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background: var(--san-surface-hover);
  color: var(--san-text-primary);
  border-color: var(--san-border);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--san-brand);
  border-color: var(--san-brand);
  color: var(--san-brand-on);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--san-text-disabled);
  background: var(--san-surface-2);
  border-color: var(--san-border-subtle);
}


/* ==========================================================================
   9. TABS
   ========================================================================== */

.nav-tabs {
  border-bottom: 1px solid var(--san-border);
}

.nav-tabs > li > a {
  color: var(--san-text-muted);
  font-size: var(--san-text-md);
  font-weight: var(--san-weight-medium);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--san-space-5) var(--san-space-6);
  margin-right: var(--san-space-2);
  background: transparent;
  transition: color var(--san-duration-fast) var(--san-ease-standard),
              border-color var(--san-duration-fast) var(--san-ease-standard);
}

.nav-tabs > li > a:hover {
  color: var(--san-text-primary);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--san-border-strong);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--san-text-brand);
  font-weight: var(--san-weight-semibold);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--san-brand);
}

.tab-content {
  padding-top: var(--san-space-6);
}

/* Pills / list groups */
.nav-pills > li > a {
  border-radius: var(--san-radius-md);
  color: var(--san-text-secondary);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
  background: var(--san-brand);
  color: var(--san-brand-on);
}

.list-group-item {
  border-color: var(--san-border-subtle);
  color: var(--san-text-secondary);
}

.list-group-item:first-child {
  border-top-left-radius: var(--san-radius-md);
  border-top-right-radius: var(--san-radius-md);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--san-radius-md);
  border-bottom-right-radius: var(--san-radius-md);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background: var(--san-brand-subtle);
  border-color: var(--san-border-brand);
  color: var(--san-text-brand);
  font-weight: var(--san-weight-medium);
}


/* ==========================================================================
   10. DROPDOWNS
   ========================================================================== */

.dropdown-menu {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border);
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-lg);
  padding: var(--san-space-2);
  margin-top: var(--san-space-2);
  font-size: var(--san-text-md);
}

.dropdown-menu > li > a {
  color: var(--san-text-secondary);
  border-radius: var(--san-radius-sm);
  padding: var(--san-space-4) var(--san-space-5);
  transition: background var(--san-duration-fast) var(--san-ease-standard),
              color var(--san-duration-fast) var(--san-ease-standard);
}

.dropdown-menu > li > a > i {
  color: var(--san-text-disabled);
  margin-right: var(--san-space-4);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li.active > a {
  background: var(--san-surface-hover);
  color: var(--san-text-primary);
}

.dropdown-menu > li > a:hover > i {
  color: var(--san-text-secondary);
}

.dropdown-menu .divider {
  background: var(--san-border-subtle);
  margin: var(--san-space-2) 0;
}

/* Metronic's dark dropdown variant, re-skinned to the inverse surface */
.dropdown-dark .dropdown-menu {
  background: var(--san-surface-inverse);
  border-color: transparent;
}

.dropdown-dark .dropdown-menu > li > a {
  color: var(--san-neutral-300);
}

.dropdown-dark .dropdown-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--san-neutral-0);
}


/* ==========================================================================
   11. MODALS
   ========================================================================== */

.modal-backdrop,
.modal-backdrop.in {
  background: var(--san-scrim);
  opacity: 1 !important;
}

.modal-content {
  background: var(--san-surface-1);
  border: none;
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-xl);
  /* Deliberately not clipped: pickers and dropdowns opened from inside a
     modal must be able to paint past the shell. Corners are rounded on the
     header/footer instead. */
}

.modal-header {
  background: var(--san-surface-1);
  border-bottom: 1px solid var(--san-border-subtle);
  border-radius: var(--san-radius-lg) var(--san-radius-lg) 0 0;
  padding: var(--san-space-6) var(--san-space-8);
}

.modal-header .close {
  color: var(--san-text-muted);
  opacity: 1;
  text-shadow: none;
  font-weight: var(--san-weight-regular);
  transition: color var(--san-duration-fast) var(--san-ease-standard);
}

.modal-header .close:hover {
  color: var(--san-text-primary);
}

.modal-title {
  font-size: var(--san-text-xl);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-tight);
  color: var(--san-text-primary);
}

.modal-body {
  padding: var(--san-space-8);
}

.modal-footer {
  background: var(--san-surface-2);
  border-top: 1px solid var(--san-border-subtle);
  border-radius: 0 0 var(--san-radius-lg) var(--san-radius-lg);
  padding: var(--san-space-5) var(--san-space-8);
}

/* bootbox dialogs use the same shell */
.bootbox .modal-footer {
  background: var(--san-surface-2);
}


/* ==========================================================================
   12. ALERTS / NOTES
   ========================================================================== */

.alert,
.note {
  border-radius: var(--san-radius-md);
  border: 1px solid transparent;
  padding: var(--san-space-5) var(--san-space-6);
  font-size: var(--san-text-md);
  box-shadow: none;
}

.alert-success,
.note-success {
  background: var(--san-success-subtle);
  border-color: var(--san-success-100);
  color: var(--san-success-700);
}

.alert-info,
.note-info {
  background: var(--san-info-subtle);
  border-color: var(--san-info-100);
  color: var(--san-info-700);
}

.alert-warning,
.note-warning {
  background: var(--san-warning-subtle);
  border-color: var(--san-warning-100);
  color: var(--san-warning-700);
}

.alert-danger,
.alert-error,
.note-danger,
.note-error,
.validation-summary-errors {
  background: var(--san-danger-subtle);
  border-color: var(--san-danger-100);
  color: var(--san-danger-700);
  border-radius: var(--san-radius-md);
  padding: var(--san-space-5) var(--san-space-6);
}

.alert > .close {
  color: inherit;
  opacity: 0.6;
  text-shadow: none;
}


/* ==========================================================================
   13. LABELS / BADGES
   ========================================================================== */

.label,
.badge {
  font-size: var(--san-text-xs);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-wide);
  border-radius: var(--san-radius-sm);
  padding: var(--san-space-1) var(--san-space-4);
  text-shadow: none;
}

.badge {
  border-radius: var(--san-radius-pill);
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 var(--san-space-3);
}

.label-default,
.badge-default {
  background: var(--san-surface-3);
  color: var(--san-text-secondary);
}

.label-primary,
.badge-primary {
  background: var(--san-brand-subtle);
  color: var(--san-text-brand);
}

.label-success,
.badge-success {
  background: var(--san-success-subtle);
  color: var(--san-success-700);
}

.label-info,
.badge-info {
  background: var(--san-info-subtle);
  color: var(--san-info-700);
}

.label-warning,
.badge-warning {
  background: var(--san-warning-subtle);
  color: var(--san-warning-700);
}

.label-danger,
.badge-danger {
  background: var(--san-danger-subtle);
  color: var(--san-danger-700);
}


/* ==========================================================================
   14. TOOLTIPS / POPOVERS
   ========================================================================== */

.tooltip-inner {
  background: var(--san-surface-inverse);
  color: var(--san-neutral-0);
  border-radius: var(--san-radius-md);
  padding: var(--san-space-3) var(--san-space-5);
  font-size: var(--san-text-sm);
  line-height: var(--san-leading-snug);
  box-shadow: var(--san-shadow-md);
}

.tooltip.top .tooltip-arrow    { border-top-color: var(--san-surface-inverse); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--san-surface-inverse); }
.tooltip.left .tooltip-arrow   { border-left-color: var(--san-surface-inverse); }
.tooltip.right .tooltip-arrow  { border-right-color: var(--san-surface-inverse); }

.tooltip.in {
  opacity: 1;
}

.popover {
  background: var(--san-surface-1);
  border: 1px solid var(--san-border);
  border-radius: var(--san-radius-lg);
  box-shadow: var(--san-shadow-lg);
  padding: 0;
}

.popover-title {
  background: var(--san-surface-2);
  border-bottom: 1px solid var(--san-border-subtle);
  border-radius: var(--san-radius-lg) var(--san-radius-lg) 0 0;
  font-size: var(--san-text-md);
  font-weight: var(--san-weight-semibold);
  color: var(--san-text-primary);
}


/* ==========================================================================
   15. LOGIN SCREEN  (_EmptyLayout.cshtml -> body.login)
   ========================================================================== */

/* Views/User/Logon.cshtml links Pages/css/login.css from inside the body, so
   that sheet loads AFTER premium.css and wins on equal specificity. Every
   rule below is therefore written one step more specific than its
   ".login .content X" counterpart (body.login ...), and uses !important only
   where login.css itself does. */

/* Stays dark on purpose - the shipped logo (logo-white-bg.png) is a white
   mark and disappears on a light ground. Flat #364150 becomes a deep ink
   gradient with a brand glow behind the card. */
body.login {
  background: linear-gradient(
      170deg,
      var(--san-auth-canvas-from) 0%,
      var(--san-auth-canvas-to) 100%
    ) !important;
  background-attachment: fixed !important;
}

body.login:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% -5%, var(--san-auth-glow) 0%, transparent 70%),
    radial-gradient(45% 45% at 105% 105%, var(--san-auth-glow-accent) 0%, transparent 70%);
}

body.login .logo {
  position: relative;
  margin: var(--san-space-11) auto var(--san-space-6);
  padding: 0;
}

body.login .content {
  position: relative;
  background: var(--san-surface-1);
  border: none;
  border-radius: var(--san-radius-xl);
  box-shadow: var(--san-shadow-xl);
  padding: var(--san-space-10);
  margin: 0 auto var(--san-space-5);
  width: 420px;
  max-width: calc(100% - var(--san-space-8));
  overflow: visible;
}

body.login .content h3,
body.login .content h3.form-title,
body.login .content .form-title {
  font-size: var(--san-text-2xl);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-tight);
  color: var(--san-text-primary);
  text-align: left;
  margin: 0 0 var(--san-space-8);
}

body.login .content p,
body.login .content .hint {
  color: var(--san-text-muted);
  margin-bottom: var(--san-space-8);
}

/* login.css fills these solid grey with no border - bring them back in line
   with every other input in the product. */
body.login .content .form-control {
  height: var(--san-control-height-lg);
  background: var(--san-surface-1);
  border: 1px solid var(--san-border-strong);
  border-radius: var(--san-radius-md);
  color: var(--san-text-primary);
  padding: 0 var(--san-space-5);
}

body.login .content .form-control:focus,
body.login .content .form-control:active {
  border: 1px solid var(--san-border-brand);
  box-shadow: var(--san-ring-brand);
}

body.login .content .form-control::placeholder {
  color: var(--san-text-disabled);
  opacity: 1;
}

/* login.css turns the action row into a full-bleed band with negative
   margins and a bottom rule. Inside a card that reads as a seam. */
body.login .content .form-actions {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--san-space-2) 0 0;
  margin: var(--san-space-8) 0 0;
  display: flex;
  align-items: center;
  gap: var(--san-space-6);
}

body.login .content .form-actions .btn {
  min-height: var(--san-control-height-lg);
  padding: 0 var(--san-space-8);
  font-weight: var(--san-weight-semibold);
  letter-spacing: var(--san-tracking-wide);
}

body.login .content .form-actions .rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--san-space-4);
  margin: 0;
  color: var(--san-text-secondary);
  font-weight: var(--san-weight-regular);
}

/* On the dark ground the copyright needs light ink, not --san-text-muted. */
body.login .copyright {
  position: relative;
  color: var(--san-auth-text-muted);
  font-size: var(--san-text-sm);
  padding: var(--san-space-6) 0 var(--san-space-10);
}

body.login .copyright b,
body.login .copyright strong {
  color: var(--san-auth-text);
  font-weight: var(--san-weight-semibold);
}


/* ==========================================================================
   16. UTILITY REMAPS
   Legacy Metronic colour utilities used in the views (59 usages of
   .font-green-sharp alone) are re-pointed at brand tokens so a token change
   propagates without touching a single view.
   ========================================================================== */

.theme-font,
.font-green-sharp,
.font-green,
.font-green-haze,
.font-green-jungle {
  color: var(--san-text-brand) !important;
}

.font-blue,
.font-blue-madison,
.font-blue-sharp {
  color: var(--san-info) !important;
}

.font-red,
.font-red-sunglo,
.font-red-intense {
  color: var(--san-danger) !important;
}

.font-yellow,
.font-yellow-crusta,
.font-yellow-gold {
  color: var(--san-warning) !important;
}

.font-grey,
.font-grey-mint,
.font-grey-cascade,
.font-grey-salsa {
  color: var(--san-text-muted) !important;
}

.font-dark,
.font-grey-gallery {
  color: var(--san-text-primary) !important;
}

.bg-green-sharp,
.bg-green {
  background-color: var(--san-brand) !important;
  color: var(--san-brand-on) !important;
}

/* Legacy helper kept from common.css semantics */
.withoutprice {
  color: var(--san-text-disabled) !important;
}

/* Numeric columns read better tabular - opt in per cell/table */
.numeric,
.text-numeric,
td.numeric {
  font-feature-settings: var(--san-numeric-tabular);
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
}