/*
 * Modern POS — "Glass" look, ported from CoreFit (theme-glass.css).
 * Loaded LAST on every screen (after theme.css, the skins, main.css, responsive.css, pos.css, rtl.css),
 * so it wins over the old colour skins. The <body> carries the class "ui-glass".
 *
 * A deep blue-green backdrop, smoked-glass menu and top bar, see-through panels with a glossy title strip,
 * two-tone glossy buttons and the CoreFit brand orange.
 * Brand colour: change --ff-brand / --ff-brand-rgb / --ff-brand-dark below.
 */

@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-standard-normal.woff2') format('woff2-variations'), url('../fonts/archivo-latin-standard-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-ext-standard-normal.woff2') format('woff2-variations'), url('../fonts/archivo-latin-ext-standard-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

body.ui-glass {
  --ff-brand: #e8590c;
  --ff-brand-rgb: 232, 89, 12;
  --ff-brand-dark: #c2410c;

  --gs-ink: #0f2540;
  --gs-title: #1e3f66;
  --gs-muted: #4d6079;
  --gs-line: #d3dce8;
  --gs-soft: #f3f7fb;
  --gs-panel: rgba(255, 255, 255, .86);
  --gs-panel-edge: rgba(10, 35, 70, .45);
  --gs-strip: linear-gradient(180deg, #fdfeff 0%, #eef5fc 49%, #dce8f6 50%, #e8f1fa 100%);
  --gs-strip-line: #b3c7df;
  --gs-smoke: rgba(10, 28, 52, .58);
  --gs-sheen: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .06) 100%);
  --gs-orange: linear-gradient(180deg, #ffb27a 0%, #fb8a3c 49%, #e8600f 50%, #f37b2a 100%);
  --gs-orange-hover: linear-gradient(180deg, #ffc293 0%, #ff9a52 49%, #f06d1c 50%, #fb8c3d 100%);
  --gs-grey: linear-gradient(180deg, #f6f6f6 0%, #ececec 49%, #dcdcdc 50%, #d0d0d0 100%);
  --gs-blue-hover: linear-gradient(180deg, #eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
  --gs-blue-pressed: linear-gradient(180deg, #e5f4fc 0%, #c4e5f6 49%, #98d1ef 50%, #68b3db 100%);
  --gs-thead: linear-gradient(180deg, #ffffff 0%, #f6f8fa 49%, #eceff3 50%, #f2f4f7 100%);

  font-family: 'Segoe UI', 'Archivo', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-stretch: 100%;
  color: var(--gs-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- The backdrop: deep blue into teal and green, with soft light streaks ---------- */
html:has(> body.ui-glass),
html body.ui-glass {
  background:
    radial-gradient(ellipse 70% 45% at 15% 105%, rgba(150, 235, 120, .55), transparent 62%),
    radial-gradient(ellipse 55% 40% at 88% 12%, rgba(130, 205, 255, .55), transparent 60%),
    linear-gradient(158deg, transparent 38%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .03) 50%, transparent 58%),
    linear-gradient(166deg, transparent 52%, rgba(255, 255, 255, .10) 60%, transparent 66%),
    linear-gradient(170deg, #0a3566 0%, #1b62a0 38%, #2797b4 68%, #379e6a 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
.ui-glass .wrapper,
.ui-glass .content-wrapper,
.ui-glass .right-side,
.ui-glass[class*="skin-"] .wrapper { background: transparent !important; }
.ui-glass a { color: var(--ff-brand-dark); }
.ui-glass a:hover, .ui-glass a:focus { color: #9a3412; }
.ui-glass h1, .ui-glass h2, .ui-glass h3, .ui-glass h4, .ui-glass h5, .ui-glass h6,
.ui-glass .h1, .ui-glass .h2, .ui-glass .h3, .ui-glass .h4, .ui-glass .h5, .ui-glass .h6 { font-family: inherit; }
.ui-glass ::selection { background: rgba(var(--ff-brand-rgb), .25); }

/* ======================================================================
 * Smoked glass: top bar and menu
 * ====================================================================== */
.ui-glass .main-header { box-shadow: 0 2px 10px rgba(0, 20, 50, .25); }
.ui-glass .main-header .logo,
.ui-glass .main-header .navbar,
.ui-glass[class*="skin-"] .main-header .logo,
.ui-glass[class*="skin-"] .main-header .navbar {
  background: var(--gs-sheen), var(--gs-smoke) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: #e6effa;
  border-bottom: 1px solid rgba(0, 0, 0, .5) !important;
}
.ui-glass .main-header .navbar { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2); }
.ui-glass .main-header .logo { border-right: 1px solid rgba(0, 0, 0, .55); box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .2); }
.ui-glass .main-header .logo,
.ui-glass .main-header .logo b { color: #fff !important; font-weight: 600; text-shadow: 0 0 10px rgba(130, 200, 255, .55); letter-spacing: .01em; }
.ui-glass .main-header .logo:hover { background: var(--gs-sheen), rgba(10, 28, 52, .66) !important; }

.ui-glass .main-header .navbar .nav > li > a,
.ui-glass .main-header .navbar .sidebar-toggle,
.ui-glass[class*="skin-"] .main-header .navbar .nav > li > a,
.ui-glass[class*="skin-"] .main-header .navbar .sidebar-toggle { color: #e6effa !important; border: 1px solid transparent; border-radius: 4px; }
.ui-glass .main-header .navbar .nav > li > a { margin: 7px 1px; padding-top: 7px; padding-bottom: 7px; }
.ui-glass .main-header .navbar .nav > li > a:hover,
.ui-glass .main-header .navbar .nav > li > a:focus,
.ui-glass .main-header .navbar .nav .open > a,
.ui-glass .main-header .navbar .sidebar-toggle:hover,
.ui-glass[class*="skin-"] .main-header .navbar .nav > li > a:hover,
.ui-glass[class*="skin-"] .main-header .navbar .nav > li > a:focus,
.ui-glass[class*="skin-"] .main-header .navbar .nav .open > a,
.ui-glass[class*="skin-"] .main-header .navbar .sidebar-toggle:hover {
  color: #fff !important; border-color: rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .10) 49%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .10) 100%) !important;
  box-shadow: 0 0 8px rgba(120, 190, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ui-glass .main-header .navbar .nav > .active > a,
.ui-glass[class*="skin-"] .main-header .navbar .nav > .active > a {
  color: #fff !important; border-color: rgba(120, 40, 0, .7); text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  background: var(--gs-orange) !important;
  box-shadow: 0 0 10px rgba(255, 140, 60, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* old skins drew a little triangle under the hovered item */
.ui-glass .navbar-custom-menu > .navbar-nav > li > a:after { display: none !important; }
/* icons in the top bar: white on smoked glass */
.ui-glass .main-header .navbar .svg-icon { filter: brightness(0) invert(1); opacity: .95; }
.ui-glass .main-header .navbar .nav > li > a > .fa { color: inherit; }
.ui-glass .main-header .navbar .label,
.ui-glass .main-header .navbar .label-warning {
  background: var(--gs-orange) !important; color: #fff !important; border: 1px solid rgba(120, 40, 0, .6);
  border-radius: 15px; font-size: 9.8px; line-height: 1; padding: 2px 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ui-glass #live_datetime { color: rgba(230, 240, 250, .85) !important; font-variant-numeric: tabular-nums; }
.ui-glass #live_datetime:hover { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.ui-glass .main-header .navbar .dropdown-menu { margin-top: 2px; }

/* ---------- Menu ---------- */
.ui-glass .main-sidebar,
.ui-glass .left-side,
.ui-glass[class*="skin-"] .main-sidebar,
.ui-glass[class*="skin-"] .left-side {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 64px, rgba(255, 255, 255, 0) 65px), var(--gs-smoke) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-right: 1px solid rgba(0, 0, 0, .55);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .22);
  color: #e6effa;
}
.ui-glass .user-panel,
.ui-glass[class*="skin-"] .user-panel { background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, .14); padding-bottom: 12px; }
.ui-glass .user-panel > .info,
.ui-glass .user-panel > .info > a,
.ui-glass[class*="skin-"] .user-panel > .info,
.ui-glass[class*="skin-"] .user-panel > .info > a { color: #fff !important; }
.ui-glass .user-panel > .info > p { font-weight: 600; text-shadow: 0 0 10px rgba(130, 200, 255, .55); }
.ui-glass .user-panel > .info > a { color: rgba(230, 240, 250, .8) !important; font-size: .85em; }
.ui-glass .user-panel > .info > a .fa,
.ui-glass[class*="skin-"] .user-panel > .info > a .fa { color: #3fd08f !important; }
.ui-glass .user-panel > .image img,
.ui-glass .user-panel > .image .svg-icon,
.ui-glass .user-panel .user-thumbnail { border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 2px rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .35); }

.ui-glass .sidebar-menu { padding: 6px 0 12px; }
.ui-glass .sidebar-menu > li.header,
.ui-glass[class*="skin-"] .sidebar-menu > li.header { background: transparent !important; color: rgba(200, 220, 240, .6) !important; font-size: 10.5px; letter-spacing: .08em; }
.ui-glass .sidebar a,
.ui-glass[class*="skin-"] .sidebar a { color: #e3edf9; }
.ui-glass .sidebar-menu > li > a,
.ui-glass[class*="skin-"] .sidebar-menu > li > a {
  color: #e3edf9 !important; border: 1px solid transparent !important; border-radius: 4px;
  margin: 1px 8px; padding: 8px 10px; background: transparent !important; text-transform: none;
}
.ui-glass .sidebar-menu > li > a > .svg-icon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.ui-glass .sidebar-menu > li > a > .fa { color: #a9d4ff; }
.ui-glass .sidebar-menu > li:hover > a,
.ui-glass .sidebar-menu > li > a:hover,
.ui-glass .sidebar-menu > li.menu-open > a,
.ui-glass[class*="skin-"] .sidebar-menu > li:hover > a,
.ui-glass[class*="skin-"] .sidebar-menu > li.menu-open > a {
  color: #fff !important; border-color: rgba(255, 255, 255, .35) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .10) 49%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .10) 100%) !important;
  box-shadow: 0 0 8px rgba(120, 190, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ui-glass .sidebar-menu > li.active > a,
.ui-glass[class*="skin-"] .sidebar-menu > li.active > a {
  color: #fff !important; font-weight: 600; border-color: rgba(120, 40, 0, .7) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  background: var(--gs-orange) !important;
  box-shadow: 0 0 10px rgba(255, 140, 60, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ui-glass .sidebar-menu > li.active > a > .fa { color: #fff; }
/* the old skins put a white arrow on the right of the active item */
.ui-glass .sidebar-menu > li.active > a:after,
.ui-glass .sidebar-menu > li > a:after { display: none !important; }
.ui-glass .sidebar-menu > li > .treeview-menu,
.ui-glass[class*="skin-"] .sidebar-menu > li > .treeview-menu {
  background: transparent !important; margin: 2px 8px 6px 22px; padding: 2px 0 2px 8px; border-left: 1px solid rgba(255, 255, 255, .18);
}
.ui-glass .treeview-menu > li > a,
.ui-glass[class*="skin-"] .treeview-menu > li > a { color: #c9dbef !important; border: 1px solid transparent; border-radius: 4px; padding: 6px 8px 6px 10px; margin: 1px 0; }
.ui-glass .treeview-menu > li > a:hover,
.ui-glass[class*="skin-"] .treeview-menu > li > a:hover { color: #fff !important; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
.ui-glass .treeview-menu > li.active > a,
.ui-glass[class*="skin-"] .treeview-menu > li.active > a {
  color: #fff !important; font-weight: 600; border-color: rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .1)); box-shadow: inset 3px 0 0 #fb8a3c;
}
.ui-glass .treeview-menu > li > a > .fa { color: #a9d4ff; }
.ui-glass .treeview-menu > li.active > a > .fa { color: #ffb27a; }

/* Mini (collapsed) menu: items fly out to the right, so no side margins there */
@media (min-width: 768px) {
  .ui-glass.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { margin: 1px 4px; }
  .ui-glass.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a { margin-right: 0; border-radius: 4px 0 0 4px; }
  .ui-glass.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
  .ui-glass.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 40px), #12304f !important;
    border: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 6px 18px rgba(0, 20, 50, .45);
  }
  .ui-glass.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu { margin: 0; border-left: 1px solid rgba(0, 0, 0, .55); padding: 4px; }
  .ui-glass.sidebar-mini.sidebar-collapse .main-header .logo { background: var(--gs-sheen), var(--gs-smoke) !important; }
}
/* On phones the menu slides over the page: make it solid enough to read */
@media (max-width: 767px) {
  .ui-glass .main-sidebar,
  .ui-glass[class*="skin-"] .main-sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03) 64px, rgba(255, 255, 255, 0) 65px), linear-gradient(170deg, #0d2f57, #123f6b 60%, #145061) !important; }
  .ui-glass .main-header .navbar .dropdown-menu li a { color: var(--gs-ink) !important; }
}

/* ======================================================================
 * Text sitting straight on the backdrop
 * ====================================================================== */
.ui-glass .content-header > h1,
.ui-glass[class*="skin-"] .content-header > h1 { color: #fff; font-weight: 600; text-shadow: 0 0 14px rgba(0, 40, 90, .7), 0 1px 2px rgba(0, 0, 0, .45); letter-spacing: -.005em; }
.ui-glass .content-header > h1 > small { color: rgba(240, 247, 255, .88); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); font-weight: 400; }
.ui-glass .content-header > .breadcrumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .1)), rgba(10, 28, 52, .45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, .35); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); padding: 5px 10px;
}
.ui-glass .content-header > .breadcrumb > li,
.ui-glass .content-header > .breadcrumb > li > a,
.ui-glass .content-header > .breadcrumb > li + li:before { color: #e6effa; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.ui-glass .content-header > .breadcrumb > li.active { color: #fff; font-weight: 600; }
.ui-glass .content-header > .breadcrumb > li > a:hover { color: #ffd2ad; }
.ui-glass .content > hr { border-top-color: rgba(255, 255, 255, .22); }
.ui-glass .content > p, .ui-glass .content > h2, .ui-glass .content > h3, .ui-glass .content > h4,
.ui-glass .content > .row > [class*="col-"] > h2, .ui-glass .content > .row > [class*="col-"] > h3, .ui-glass .content > .row > [class*="col-"] > h4,
.ui-glass .content > .row > [class*="col-"] > p { color: #f2f7fd; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

/* Footer: a thin smoked-glass strip */
.ui-glass .main-footer {
  background: var(--gs-sheen), rgba(10, 28, 52, .5) !important; color: rgba(230, 240, 250, .82); border-top: 1px solid rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ui-glass .main-footer a { color: #ffd2ad; }

/* ======================================================================
 * Glass window panels: .box, .panel, .nav-tabs-custom, .well, modals
 * ====================================================================== */
.ui-glass .box,
.ui-glass .nav-tabs-custom,
.ui-glass .panel,
.ui-glass .info-box {
  background: var(--gs-panel) !important; color: var(--gs-ink);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--gs-panel-edge) !important; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 8px 22px -4px rgba(0, 20, 50, .45);
}
/* coloured top borders of the old boxes are dropped: the title strip carries the panel */
.ui-glass .box.box-primary, .ui-glass .box.box-info, .ui-glass .box.box-success, .ui-glass .box.box-warning,
.ui-glass .box.box-danger, .ui-glass .box.box-default { border-top: 1px solid var(--gs-panel-edge) !important; }
.ui-glass .box-header,
.ui-glass .box .box-header.with-border,
.ui-glass .panel > .panel-heading {
  background: var(--gs-strip) !important; border-bottom: 1px solid var(--gs-strip-line) !important;
  border-radius: 7px 7px 0 0; color: var(--gs-title) !important; padding: 9px 14px;
}
.ui-glass .box-header > .box-title,
.ui-glass .box-header .box-title,
.ui-glass .panel-title { color: var(--gs-title) !important; font-weight: 600; font-size: 15px; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.ui-glass .box-header > .fa, .ui-glass .box-header > .ion, .ui-glass .box-header > .glyphicon,
.ui-glass .box-header .box-title > .fa { color: var(--ff-brand); text-shadow: none; }
.ui-glass .box-header > .box-tools { top: 6px; }
.ui-glass .box.collapsed-box .box-header,
.ui-glass .box > .box-header:only-child { border-radius: 7px; }
.ui-glass .box-body { color: var(--gs-ink); }
.ui-glass .box-footer,
.ui-glass .panel-footer { background: linear-gradient(180deg, rgba(243, 247, 251, .65), rgba(232, 240, 248, .85)) !important; border-top: 1px solid var(--gs-line) !important; border-radius: 0 0 7px 7px; }
.ui-glass .box-solid > .box-header,
.ui-glass .box.box-solid[class*="box-"] > .box-header { background: var(--gs-strip) !important; color: var(--gs-title) !important; }
.ui-glass .box .overlay, .ui-glass .overlay-wrapper .overlay { background: rgba(255, 255, 255, .55); border-radius: 8px; }
.ui-glass .btn-box-tool { color: var(--gs-muted); }
.ui-glass .btn-box-tool:hover { color: var(--ff-brand-dark); }
.ui-glass .sub-title, .ui-glass .box .sub-title { color: var(--gs-title); }
.ui-glass hr { border-top-color: var(--gs-line); }
.ui-glass .text-muted, .ui-glass .help-block { color: var(--gs-muted); }

/* Panels made with Bootstrap's .panel (e.g. dashboard shortcuts keep their own rule below) */
.ui-glass .panel { margin-bottom: 18px; }
.ui-glass .panel-body { background: transparent; }
.ui-glass .well,
.ui-glass .well-sm {
  background: linear-gradient(180deg, rgba(248, 251, 254, .92), rgba(236, 243, 250, .92)) !important; border: 1px solid #c7d3e1 !important;
  border-radius: 6px; box-shadow: inset 0 1px 2px rgba(0, 30, 60, .08); color: var(--gs-ink);
}
.ui-glass .content > .well, .ui-glass .content > .row > [class*="col-"] > .well { background: var(--gs-panel) !important; border-color: var(--gs-panel-edge) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 6px 16px -4px rgba(0, 20, 50, .4); }
.ui-glass .callout { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 4px 14px rgba(0, 20, 50, .25); }

/* Tabs inside a panel */
.ui-glass .nav-tabs-custom > .nav-tabs { background: var(--gs-strip); border-bottom: 1px solid var(--gs-strip-line) !important; border-radius: 7px 7px 0 0; padding: 4px 4px 0; }
.ui-glass .nav-tabs-custom > .nav-tabs > li { border-top: 0 !important; margin-bottom: -1px; margin-right: 2px; }
.ui-glass .nav-tabs-custom > .nav-tabs > li > a { color: var(--gs-muted); border: 1px solid transparent !important; border-radius: 4px 4px 0 0; padding: 7px 14px; }
.ui-glass .nav-tabs-custom > .nav-tabs > li > a:hover { color: var(--gs-ink); background: rgba(255, 255, 255, .6); }
.ui-glass .nav-tabs-custom > .nav-tabs > li.active > a,
.ui-glass .nav-tabs-custom > .nav-tabs > li.active:hover > a {
  color: var(--gs-title); font-weight: 600; background: #fff !important; border-color: var(--gs-strip-line) var(--gs-strip-line) transparent !important;
  box-shadow: inset 0 2px 0 var(--ff-brand);
}
.ui-glass .nav-tabs-custom > .tab-content { background: transparent; border-radius: 0 0 7px 7px; }
.ui-glass .nav-tabs-custom > .nav-tabs > li.header { color: var(--gs-title); }
/* Plain tabs */
.ui-glass .nav-tabs { border-bottom-color: var(--gs-strip-line); }
.ui-glass .nav-tabs > li > a { border-radius: 4px 4px 0 0; color: var(--gs-muted); }
.ui-glass .nav-tabs > li > a:hover { background: rgba(255, 255, 255, .6); border-color: transparent; }
.ui-glass .nav-tabs > li.active > a, .ui-glass .nav-tabs > li.active > a:hover, .ui-glass .nav-tabs > li.active > a:focus { color: var(--gs-title); font-weight: 600; background: #fff; border-color: var(--gs-strip-line) var(--gs-strip-line) transparent; }
.ui-glass .nav-pills > li > a { border-radius: 4px; border: 1px solid transparent; color: var(--gs-ink); }
.ui-glass .nav-pills > li.active > a, .ui-glass .nav-pills > li.active > a:hover, .ui-glass .nav-pills > li.active > a:focus { color: #fff; border-color: #9c3d06; background: var(--gs-orange); text-shadow: 0 -1px 0 rgba(0, 0, 0, .28); }
.ui-glass .nav-stacked > li > a { border-left: 0 !important; }

/* Lists */
.ui-glass .list-group-item { background: rgba(255, 255, 255, .7); border-color: var(--gs-line); color: var(--gs-ink); }
.ui-glass .list-group-item:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.ui-glass .list-group-item:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.ui-glass a.list-group-item:hover { background: linear-gradient(180deg, #f2f8fd, #dcecfc); }
.ui-glass .list-group-item.active, .ui-glass .list-group-item.active:hover { background: var(--gs-orange); border-color: #9c3d06; color: #fff; }

/* ======================================================================
 * Dashboard
 * ====================================================================== */
/* Shortcut buttons (POS, Sell List, Reports…): small glass tiles */
.ui-glass .panel-app,
.ui-glass .action-button-sm .panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(246, 250, 254, .9) 49%, rgba(226, 238, 250, .9) 50%, rgba(238, 245, 252, .92) 100%) !important;
  border: 1px solid var(--gs-panel-edge) !important; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 6px 14px -4px rgba(0, 20, 50, .45); transition: box-shadow .15s, border-color .15s;
}
.ui-glass .panel-app:hover,
.ui-glass .action-button-sm .panel:hover { border-color: #3c7fb1 !important; background: var(--gs-blue-hover) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 12px rgba(120, 190, 255, .7); }
.ui-glass .panel-app a.panel-app-link, .ui-glass .panel-app .small, .ui-glass .panel-app .small2 { color: var(--gs-title) !important; font-weight: 600; text-decoration: none; }
.ui-glass .action-button-sm .svg-icon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }

/* Coloured counter tiles: glossy, like CoreFit's dashboard KPIs */
.ui-glass .small-box,
.ui-glass .info-box .info-box-icon,
.ui-glass .info-box[class*="bg-"] {
  --kc: #1a56c8; --kc2: #4fa8ff;
  color: #fff !important; border: 1px solid rgba(0, 0, 0, .45); border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .12) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .08) 100%), linear-gradient(160deg, var(--kc2), var(--kc)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 8px 20px -6px rgba(0, 20, 50, .55);
}
.ui-glass .bg-yellow.small-box, .ui-glass .bg-orange.small-box, .ui-glass .info-box .bg-yellow, .ui-glass .info-box .bg-orange, .ui-glass .info-box.bg-yellow, .ui-glass .info-box.bg-orange { --kc: #d9520a; --kc2: #ff9f4a; }
.ui-glass .bg-aqua.small-box, .ui-glass .bg-blue.small-box, .ui-glass .bg-light-blue.small-box, .ui-glass .info-box .bg-aqua, .ui-glass .info-box .bg-blue, .ui-glass .info-box.bg-aqua, .ui-glass .info-box.bg-blue { --kc: #1a56c8; --kc2: #4fa8ff; }
.ui-glass .bg-green.small-box, .ui-glass .bg-olive.small-box, .ui-glass .bg-teal.small-box, .ui-glass .info-box .bg-green, .ui-glass .info-box.bg-green { --kc: #0b8a5a; --kc2: #3fd08f; }
.ui-glass .bg-purple.small-box, .ui-glass .bg-navy.small-box, .ui-glass .bg-maroon.small-box, .ui-glass .info-box .bg-purple, .ui-glass .info-box.bg-purple { --kc: #5b2fc9; --kc2: #a57bff; }
.ui-glass .bg-red.small-box, .ui-glass .info-box .bg-red, .ui-glass .info-box.bg-red { --kc: #b81e63; --kc2: #ff6aa6; }
.ui-glass .small-box:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 16px rgba(120, 190, 255, .55); }
.ui-glass .small-box h3, .ui-glass .small-box p, .ui-glass .small-box .inner,
.ui-glass .small-box h3 a, .ui-glass .small-box .inner a, .ui-glass .small-box p a { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ui-glass .small-box h3 { font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ui-glass .small-box p { font-weight: 600; letter-spacing: .02em; }
.ui-glass .small-box .icon { color: rgba(255, 255, 255, .22); }
.ui-glass .small-box > .small-box-footer {
  background: rgba(0, 0, 0, .14) !important; color: rgba(255, 255, 255, .95) !important; border-top: 1px solid rgba(255, 255, 255, .22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3); font-weight: 600;
}
.ui-glass .small-box > .small-box-footer:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
.ui-glass .info-box { min-height: 86px; }
.ui-glass .info-box .info-box-icon { border-radius: 7px 0 0 7px; border: 0; border-right: 1px solid rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.ui-glass .info-box-text { color: var(--gs-muted); font-weight: 600; }
.ui-glass .info-box-number { color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.ui-glass .description-block > .description-header { color: var(--gs-ink); }
.ui-glass .progress { background: rgba(15, 37, 64, .08); border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.ui-glass .progress-bar { background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 50%); }
.ui-glass .progress-bar:not([class*="progress-bar-"]), .ui-glass .progress-bar-primary { background-color: var(--ff-brand); }

/* ======================================================================
 * Glossy two-tone buttons
 * ====================================================================== */
.ui-glass .btn { border-radius: 3px; font-weight: 400; text-decoration: none; transition: box-shadow .12s, background .12s; }
.ui-glass .btn.btn-flat { border-radius: 3px; border-width: 1px; }
.ui-glass .btn:focus, .ui-glass .btn.focus { outline: 0; box-shadow: 0 0 0 1px #3d7bad, 0 0 6px rgba(61, 123, 173, .5); }
.ui-glass .btn.disabled, .ui-glass .btn[disabled] { opacity: .55; }

.ui-glass .btn-default, .ui-glass .btn-default.btn-flat {
  color: #0f2540 !important; border: 1px solid #707070 !important; text-shadow: none;
  background: var(--gs-grey) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
}
.ui-glass .btn-default:hover, .ui-glass .btn-default:focus { color: #0f2540 !important; border-color: #3c7fb1 !important; background: var(--gs-blue-hover) !important; }
.ui-glass .btn-default:active, .ui-glass .btn-default.active, .ui-glass .open > .dropdown-toggle.btn-default {
  color: #0f2540 !important; border-color: #2c628b !important; box-shadow: inset 0 1px 3px rgba(0, 30, 60, .35) !important; background: var(--gs-blue-pressed) !important;
}

.ui-glass .btn-primary, .ui-glass .btn-primary.btn-flat {
  color: #fff !important; border: 1px solid #9c3d06 !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .28);
  background: var(--gs-orange) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ui-glass .btn-primary:hover, .ui-glass .btn-primary:focus { color: #fff !important; border-color: #8a3404 !important; background: var(--gs-orange-hover) !important; box-shadow: 0 0 8px rgba(255, 140, 60, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ui-glass .btn-primary:active, .ui-glass .btn-primary.active { background: linear-gradient(180deg, #e8600f, #c9500a) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3) !important; }

.ui-glass .btn-success, .ui-glass .btn-success.btn-flat {
  color: #fff !important; border: 1px solid #0a6a43 !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .28);
  background: linear-gradient(180deg, #7fe3b0 0%, #3fc585 49%, #149a5e 50%, #2db474 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ui-glass .btn-success:hover, .ui-glass .btn-success:focus { color: #fff !important; background: linear-gradient(180deg, #92eabf 0%, #52d193 49%, #1aa868 50%, #38c27f 100%) !important; box-shadow: 0 0 8px rgba(60, 200, 130, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ui-glass .btn-success:active, .ui-glass .btn-success.active { background: linear-gradient(180deg, #149a5e, #0e7a4a) !important; }

.ui-glass .btn-info, .ui-glass .btn-info.btn-flat {
  color: #fff !important; border: 1px solid #1d4f8a !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .28);
  background: linear-gradient(180deg, #8cc8ff 0%, #4fa3f0 49%, #1f74d0 50%, #3a8fe6 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ui-glass .btn-info:hover, .ui-glass .btn-info:focus { color: #fff !important; background: linear-gradient(180deg, #a1d3ff 0%, #62b0f7 49%, #2a82dc 50%, #4a9cf0 100%) !important; box-shadow: 0 0 8px rgba(80, 160, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ui-glass .btn-info:active, .ui-glass .btn-info.active { background: linear-gradient(180deg, #1f74d0, #185eaa) !important; }

.ui-glass .btn-warning, .ui-glass .btn-warning.btn-flat {
  color: #3d2600 !important; border: 1px solid #a8740a !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  background: linear-gradient(180deg, #ffe7a3 0%, #ffd25e 49%, #f3b420 50%, #f8c742 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.ui-glass .btn-warning:hover, .ui-glass .btn-warning:focus { color: #3d2600 !important; background: linear-gradient(180deg, #fff0c2 0%, #ffdc7a 49%, #f7bf35 50%, #fbd25a 100%) !important; box-shadow: 0 0 8px rgba(255, 200, 60, .6), inset 0 1px 0 rgba(255, 255, 255, .55); }

.ui-glass .btn-danger, .ui-glass .btn-danger.btn-flat {
  color: #fff !important; border: 1px solid #8c1c13 !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .28);
  background: linear-gradient(180deg, #ff9d92 0%, #f2604f 49%, #d6301f 50%, #e8483a 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ui-glass .btn-danger:hover, .ui-glass .btn-danger:focus { color: #fff !important; background: linear-gradient(180deg, #ffb1a8 0%, #f8735f 49%, #e03a28 50%, #f05a4b 100%) !important; box-shadow: 0 0 8px rgba(255, 90, 70, .55), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ui-glass .btn-danger:active, .ui-glass .btn-danger.active { background: linear-gradient(180deg, #d6301f, #b02417) !important; }

.ui-glass .btn-link { color: var(--ff-brand-dark); }
.ui-glass .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; }
.ui-glass .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-radius: 3px 0 0 3px; }
.ui-glass .btn-group > .btn:last-child:not(:first-child), .ui-glass .btn-group > .dropdown-toggle:not(:first-child) { border-radius: 0 3px 3px 0; }
/* Buttons coloured with .bg-* helper classes */
.ui-glass .btn.bg-green, .ui-glass .btn.bg-olive { color: #fff !important; border: 1px solid #0a6a43; background: linear-gradient(180deg, #7fe3b0 0%, #3fc585 49%, #149a5e 50%, #2db474 100%) !important; }
.ui-glass .btn.bg-red, .ui-glass .btn.bg-maroon { color: #fff !important; border: 1px solid #8c1c13; background: linear-gradient(180deg, #ff9d92 0%, #f2604f 49%, #d6301f 50%, #e8483a 100%) !important; }
.ui-glass .btn.bg-yellow, .ui-glass .btn.bg-orange { color: #fff !important; border: 1px solid #9c3d06; background: var(--gs-orange) !important; }
.ui-glass .btn.bg-blue, .ui-glass .btn.bg-aqua, .ui-glass .btn.bg-light-blue { color: #fff !important; border: 1px solid #1d4f8a; background: linear-gradient(180deg, #8cc8ff 0%, #4fa3f0 49%, #1f74d0 50%, #3a8fe6 100%) !important; }
.ui-glass .btn.bg-purple, .ui-glass .btn.bg-navy { color: #fff !important; border: 1px solid #3f1f93; background: linear-gradient(180deg, #c3a8ff 0%, #9469f5 49%, #6a3fd8 50%, #7f55e6 100%) !important; }

/* ======================================================================
 * Fields
 * ====================================================================== */
.ui-glass .form-control,
.ui-glass select.form-control,
.ui-glass .select2-container--default .select2-selection--single,
.ui-glass .select2-container--default .select2-selection--multiple {
  border-radius: 3px !important; border: 1px solid #a3acb8; border-top-color: #8a939f; background-color: #fff; color: var(--gs-ink);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.ui-glass .form-control:hover,
.ui-glass .select2-container--default .select2-selection--single:hover,
.ui-glass .select2-container--default .select2-selection--multiple:hover { border-color: #5a9bd5; }
.ui-glass .form-control:focus,
.ui-glass .select2-container--default.select2-container--focus .select2-selection--multiple,
.ui-glass .select2-container--default.select2-container--open .select2-selection--single,
.ui-glass .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #3d7bad !important; box-shadow: 0 0 0 1px #3d7bad, 0 0 6px rgba(61, 123, 173, .5); outline: 0;
}
.ui-glass .form-control::placeholder { color: #8b94a3; }
.ui-glass .form-control[disabled], .ui-glass .form-control[readonly], .ui-glass fieldset[disabled] .form-control { background-color: #eef2f7; }
.ui-glass .input-group-addon {
  border-color: #a3acb8; color: var(--gs-muted);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 49%, #e8ecf1 50%, #eff2f6 100%);
}
.ui-glass .input-group .form-control:first-child, .ui-glass .input-group-addon:first-child,
.ui-glass .input-group-btn:first-child > .btn { border-radius: 3px 0 0 3px !important; }
.ui-glass .input-group .form-control:last-child, .ui-glass .input-group-addon:last-child,
.ui-glass .input-group-btn:last-child > .btn { border-radius: 0 3px 3px 0 !important; }
.ui-glass .input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.ui-glass .control-label, .ui-glass label { color: var(--gs-ink); font-weight: 600; }
.ui-glass .has-error .form-control { border-color: #d6301f; }
.ui-glass .has-success .form-control { border-color: #149a5e; }
.ui-glass input[type="checkbox"], .ui-glass input[type="radio"] { accent-color: var(--ff-brand); }
.ui-glass .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--gs-ink); }
.ui-glass .select2-container--default .select2-results__option--highlighted[aria-selected],
.ui-glass .select2-container--default .select2-results__option--highlighted { background: linear-gradient(180deg, #ffb27a, #e8600f) !important; color: #fff !important; }
.ui-glass .select2-dropdown { border-color: #97a3b3 !important; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 20, 50, .35); }
.ui-glass .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--gs-orange); border-color: #9c3d06; color: #fff; border-radius: 3px; }
.ui-glass .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255, 255, 255, .85); }

/* ======================================================================
 * Lists (tables, DataTables, pagination)
 * ====================================================================== */
.ui-glass .table { color: var(--gs-ink); background: transparent; }
.ui-glass .table > thead > tr > th,
.ui-glass .table > thead > tr > td,
.ui-glass table.dataTable thead th,
.ui-glass table.dataTable thead td,
.ui-glass .table > thead > tr.bg-gray > th,
.ui-glass .table > tbody > tr.bg-gray > th,
.ui-glass .table > tfoot > tr.bg-gray > th,
.ui-glass .table tr.bg-gray > td {
  background: var(--gs-thead) !important; color: #3b4f69 !important; font-weight: 600;
  border-bottom: 1px solid #c7d0dc !important; box-shadow: inset -1px 0 0 #e1e6ec; text-shadow: 0 1px 0 #fff;
}
.ui-glass .table > tbody > tr > td, .ui-glass .table > tbody > tr > th,
.ui-glass .table > tfoot > tr > td, .ui-glass .table > tfoot > tr > th { border-top-color: var(--gs-line); }
.ui-glass .table-bordered, .ui-glass .table-bordered > thead > tr > th, .ui-glass .table-bordered > tbody > tr > td,
.ui-glass .table-bordered > tbody > tr > th, .ui-glass .table-bordered > tfoot > tr > td, .ui-glass .table-bordered > tfoot > tr > th,
.ui-glass .table-bordered > thead > tr > td { border-color: var(--gs-line) !important; }
.ui-glass .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(243, 247, 251, .75); }
.ui-glass .table-hover > tbody > tr:hover,
.ui-glass table.dataTable tbody tr:hover,
.ui-glass .table-hovered > tbody > tr:hover { background-image: linear-gradient(180deg, rgba(220, 238, 252, .7), rgba(196, 225, 250, .55)) !important; background-color: transparent; }
.ui-glass table.dataTable tbody tr { background-color: transparent; }
.ui-glass table.dataTable tbody tr.selected { background: rgba(var(--ff-brand-rgb), .12) !important; }
.ui-glass .table > tbody > tr.bg-gray, .ui-glass .bg-gray { background-color: #e8eef5 !important; color: var(--gs-ink) !important; }
.ui-glass table.dataTable thead .sorting:after, .ui-glass table.dataTable thead .sorting_asc:after, .ui-glass table.dataTable thead .sorting_desc:after { color: #3d7bad; opacity: .6; }
.ui-glass .dataTables_wrapper .dataTables_filter input,
.ui-glass .dataTables_wrapper .dataTables_length select { border-radius: 3px; border: 1px solid #a3acb8; }
.ui-glass .dataTables_wrapper .dataTables_info { color: var(--gs-muted); }
.ui-glass div.dt-buttons .btn, .ui-glass .dt-buttons .dt-button { border-radius: 3px; }

.ui-glass .pagination > li > a, .ui-glass .pagination > li > span {
  color: var(--gs-ink); border-color: #a3acb8; background: var(--gs-grey); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); margin-left: -1px;
}
.ui-glass .pagination > li > a:hover, .ui-glass .pagination > li > span:hover { color: var(--gs-ink); border-color: #3c7fb1; background: var(--gs-blue-hover); }
.ui-glass .pagination > .active > a, .ui-glass .pagination > .active > span,
.ui-glass .pagination > .active > a:hover, .ui-glass .pagination > .active > span:hover {
  color: #fff; border-color: #9c3d06; background: var(--gs-orange); text-shadow: 0 -1px 0 rgba(0, 0, 0, .28); z-index: 3;
}
.ui-glass .pagination > .disabled > a, .ui-glass .pagination > .disabled > span { color: #8b94a3; background: #f1f3f6; }
.ui-glass .pagination > li:first-child > a, .ui-glass .pagination > li:first-child > span { border-radius: 3px 0 0 3px; }
.ui-glass .pagination > li:last-child > a, .ui-glass .pagination > li:last-child > span { border-radius: 0 3px 3px 0; }

/* ======================================================================
 * Badges, alerts, menus, modals
 * ====================================================================== */
.ui-glass .label, .ui-glass .badge { border-radius: 3px; font-weight: 600; }
.ui-glass .label-primary, .ui-glass .badge.bg-primary { background: var(--ff-brand) !important; }

.ui-glass .alert { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 14px rgba(0, 20, 50, .3); text-shadow: none; }
.ui-glass .alert-info { background: #e8f4fd !important; color: #0c4a7a !important; border: 1px solid #a8cbee !important; }
.ui-glass .alert-success { background: #e7f8ef !important; color: #0b5e3b !important; border: 1px solid #9fdcbc !important; }
.ui-glass .alert-warning { background: #fff6e0 !important; color: #7a4b00 !important; border: 1px solid #f2cf7c !important; }
.ui-glass .alert-danger, .ui-glass .alert-error { background: #fdecea !important; color: #8c1c13 !important; border: 1px solid #f2b2aa !important; }
.ui-glass .alert a, .ui-glass .alert .alert-link { color: inherit !important; text-decoration: underline; }
.ui-glass .box .alert, .ui-glass .modal .alert, .ui-glass .well .alert { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }

.ui-glass .dropdown-menu { border-radius: 4px; border: 1px solid #97a3b3; box-shadow: 0 6px 18px rgba(0, 20, 50, .35); padding: 4px; background: #fff; }
.ui-glass .dropdown-menu > li > a { border-radius: 3px; border: 1px solid transparent; color: var(--gs-ink); padding: 5px 12px; }
.ui-glass .dropdown-menu > li > a:hover, .ui-glass .dropdown-menu > li > a:focus { background: linear-gradient(180deg, #f2f8fd, #dcecfc) !important; border-color: #a8cbee; color: var(--gs-ink); }
.ui-glass .dropdown-menu > .active > a, .ui-glass .dropdown-menu > .active > a:hover { background: var(--gs-orange) !important; color: #fff; border-color: #9c3d06; }
.ui-glass .dropdown-menu > .divider { background-color: var(--gs-line); }

.ui-glass .modal-backdrop.in { opacity: .45; background: #04142a; }
.ui-glass .modal-content {
  border-radius: 8px; border: 1px solid rgba(10, 35, 70, .55) !important; overflow: hidden;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 70px -18px rgba(0, 20, 50, .65);
}
.ui-glass .modal-header,
.ui-glass[class*="skin-"] .modal-header {
  background: var(--gs-strip) !important; border-bottom: 1px solid var(--gs-strip-line) !important; color: var(--gs-title) !important; padding: 10px 15px;
}
.ui-glass .modal-title,
.ui-glass[class*="skin-"] .modal-title { color: var(--gs-title) !important; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.ui-glass .modal-header .close { color: #1e3f66; opacity: .6; text-shadow: 0 1px 0 #fff; }
.ui-glass .modal-header .close:hover { opacity: 1; color: #d6301f; }
.ui-glass .modal-footer { background: linear-gradient(180deg, rgba(243, 247, 251, .8), rgba(232, 240, 248, .95)); border-top: 1px solid var(--gs-line); }
.ui-glass .modal-lg .modal-content { border-color: rgba(10, 35, 70, .55) !important; }

/* SweetAlert, Toastr */
.ui-glass .sweet-alert { border-radius: 8px; border: 1px solid rgba(10, 35, 70, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 70px -18px rgba(0, 20, 50, .65); font-family: inherit; }
.ui-glass .sweet-alert h2 { color: var(--gs-title); font-weight: 600; }
.ui-glass .sweet-alert button { border-radius: 3px !important; border: 1px solid #9c3d06 !important; background: var(--gs-orange) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45) !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, .28); font-weight: 600; }
.ui-glass .sweet-alert button.cancel { color: #0f2540 !important; border-color: #707070 !important; background: var(--gs-grey) !important; text-shadow: none; }
.ui-glass #toast-container > div { border-radius: 6px; opacity: .97; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 20, 50, .4); }

/* Report sidebar that slides in from the right */
.ui-glass .scrolling-sidebar,
.ui-glass .scrolling-sidebar-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .03) 64px, rgba(255, 255, 255, 0) 65px), linear-gradient(170deg, #0d2f57, #123f6b 60%, #145061) !important;
  border-left: 1px solid rgba(0, 0, 0, .55); box-shadow: -8px 0 24px rgba(0, 20, 50, .45);
}
.ui-glass .scrolling-sidebar-title { background: var(--gs-sheen), rgba(10, 28, 52, .5) !important; color: #fff !important; text-shadow: 0 0 10px rgba(130, 200, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ui-glass .scrolling-sidebar .list-group-item { background: transparent; border: 0; }
.ui-glass .scrolling-sidebar .btn { border-radius: 4px !important; text-align: left; }
.ui-glass .scrolling-sidebar .btn-success {
  color: #e3edf9 !important; border: 1px solid rgba(255, 255, 255, .2) !important; text-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .01) 50%, rgba(255, 255, 255, .06)) !important; box-shadow: none;
}
.ui-glass .scrolling-sidebar .btn-success:hover { color: #fff !important; border-color: rgba(120, 40, 0, .7) !important; background: var(--gs-orange) !important; box-shadow: 0 0 10px rgba(255, 140, 60, .55); }

/* Filter box that drops down under the page title */
.ui-glass .filter-box, .ui-glass #filter-box { background: var(--gs-panel); border: 1px solid var(--gs-panel-edge); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 8px 22px -4px rgba(0, 20, 50, .45); }

/* Glass needs a current browser: older ones get solid panels */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-glass .box, .ui-glass .nav-tabs-custom, .ui-glass .panel, .ui-glass .info-box, .ui-glass .modal-content { background: #fff !important; }
  .ui-glass .main-sidebar, .ui-glass .main-header .logo, .ui-glass .main-header .navbar { background: #12304f !important; }
}

/* ======================================================================
 * Point of sale screen (admin/pos.php)
 * ====================================================================== */
body.ui-glass.pos::after { display: none !important; }                 /* the old wallpaper pattern */
.ui-glass.pos .main-header .logo { border-bottom: 1px solid rgba(0, 0, 0, .5) !important; }
.ui-glass #left-panel, .ui-glass #right-panel { background: transparent; }
.ui-glass #left-panel {
  background: rgba(255, 255, 255, .45) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-right: 1px solid var(--gs-panel-edge);
}
.ui-glass #right-panel {
  background: var(--gs-panel) !important; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  border-left: 1px solid var(--gs-panel-edge); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .7), -6px 0 18px -6px rgba(0, 20, 50, .35);
}
/* search bar across the top of the products */
.ui-glass #searchbox { background: var(--gs-strip) !important; border-bottom: 1px solid var(--gs-strip-line) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.ui-glass #searchbox input { color: var(--gs-ink); background: transparent; font-family: inherit; }
.ui-glass #searchbox input::placeholder { color: var(--gs-muted); }
.ui-glass #searchbox .category-search .select2-container--default .select2-selection--single { border-radius: 3px !important; }

/* product tiles */
.ui-glass #item-list .item .item-inner {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(240, 246, 252, .95)) !important; border: 1px solid var(--gs-panel-edge) !important; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 4px 12px -3px rgba(0, 20, 50, .35); transition: box-shadow .12s, border-color .12s;
}
.ui-glass #item-list .item:hover .item-inner { border-color: #3c7fb1 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 12px rgba(120, 190, 255, .75); }
.ui-glass #item-list .item.select .item-inner { border-color: #9c3d06 !important; box-shadow: 0 0 0 2px rgba(255, 140, 60, .7), 0 0 12px rgba(255, 140, 60, .5) !important; }
.ui-glass #item-list .item .item-info { background: var(--gs-strip) !important; border-top: 1px solid var(--gs-strip-line); color: var(--gs-title) !important; }
.ui-glass #item-list .item .item-info span { color: var(--gs-title) !important; font-weight: 600; }
.ui-glass .ibadge { background: var(--gs-orange) !important; color: #fff !important; border: 1px solid #9c3d06; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }
.ui-glass .ibadge:after { border-top-color: #c9500a !important; }
.ui-glass .add-new-product-btn .btn,
.ui-glass .add-new-product .btn { border-radius: 4px !important; }

/* left tool strip */
.ui-glass #vertial-toolbar { background: rgba(10, 28, 52, .5) !important; border: 1px solid rgba(0, 0, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); border-radius: 0 6px 6px 0; }
.ui-glass #vertial-toolbar .toolbar-icon { border-radius: 4px; }

/* customer bar */
.ui-glass #people-area { background: var(--gs-strip) !important; border-bottom: 1px solid var(--gs-strip-line); }
.ui-glass #people-area > input,
.ui-glass[class*="skin-"] #people-area > input { background: #fff !important; color: var(--gs-ink) !important; border: 1px solid #a3acb8 !important; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); font-weight: 600; }
.ui-glass #people-area .previous-due,
.ui-glass[class*="skin-"] .previous-due { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 50%), #12304f !important; border-left: 1px solid rgba(0, 0, 0, .45); }
.ui-glass #people-area .previous-due h4 { color: #e6effa !important; }
.ui-glass #people-area .previous-due span,
.ui-glass[class*="skin-"] .previous-due span { background: linear-gradient(180deg, #ff9d92 0%, #f2604f 49%, #d6301f 50%, #e8483a 100%) !important; color: #fff; border: 1px solid #8c1c13; border-radius: 3px !important; }
.ui-glass #people-area .add-icon,
.ui-glass[class*="skin-"] .add-icon { background: var(--gs-orange) !important; border-left: 1px solid #9c3d06; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.ui-glass #people-area .edit-icon .btn, .ui-glass #toggle_customer { border-radius: 3px !important; }
.ui-glass #people-area .slidedown-menu { border: 1px solid #97a3b3; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 20, 50, .35); }

/* the item list in the cart */
.ui-glass #invoice-item-head thead tr,
.ui-glass[class*="skin-"] #list-table-head tr,
.ui-glass #invoice-item-head thead tr th { background: var(--gs-thead) !important; color: #3b4f69 !important; border-bottom: 1px solid #c7d0dc; text-shadow: 0 1px 0 #fff; }
.ui-glass #invoice-item-list, .ui-glass #invoice-item { background: transparent !important; }
.ui-glass #invoice-item-list table tbody td, .ui-glass[class*="skin-"] #list-table-div table tr { background: transparent !important; border-color: var(--gs-line) !important; color: var(--gs-ink); }
.ui-glass #invoice-item-list .invoice-item:hover td { background-image: linear-gradient(180deg, rgba(220, 238, 252, .7), rgba(196, 225, 250, .55)) !important; }
.ui-glass #invoice-item-list .invoice-item .product-name span,
.ui-glass[class*="skin-"] .product-name span { background: var(--gs-orange) !important; border: 1px solid #9c3d06 !important; color: #fff !important; border-radius: 3px; }
.ui-glass #invoice-item-list .product-quantity button { color: var(--gs-title); }

/* totals */
.ui-glass #invoice-calculation, .ui-glass #invoice-calculation .table { background: transparent !important; }
.ui-glass #invoice-calculation .table tr,
.ui-glass[class*="skin-"] #invoice-calculation .table tbody tr.row2,
.ui-glass[class*="skin-"] #invoice-calculation .table tbody tr.row3 { background: transparent !important; color: var(--gs-ink) !important; }
.ui-glass #invoice-calculation .table tr:first-child,
.ui-glass #invoice-calculation .table tr:last-child { background: var(--gs-thead) !important; color: #3b4f69 !important; }
.ui-glass #invoice-calculation .table td { border-color: var(--gs-line) !important; }
.ui-glass #invoice-calculation input,
.ui-glass[class*="skin-"] #invoice-calculation .table tbody tr td input {
  background: #fff !important; color: var(--gs-ink) !important; border: 1px solid #a3acb8 !important; border-top-color: #8a939f !important;
  border-radius: 3px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.ui-glass #invoice-calculation input:focus { border-color: #3d7bad !important; box-shadow: 0 0 0 1px #3d7bad, 0 0 6px rgba(61, 123, 173, .5); outline: 0; }
.ui-glass[class*="skin-"] .total-cal { border-top: 1px solid var(--gs-strip-line) !important; }
.ui-glass[class*="skin-"] #totaltbl table tr.row1,
.ui-glass[class*="skin-"] #totaltbl table tr.row2 { background: var(--gs-soft) !important; }
.ui-glass[class*="skin-"] #totaltbl table tr.row3 { background: var(--gs-thead) !important; }

/* big total bar along the bottom */
.ui-glass #total-amount,
.ui-glass[class*="skin-"] #total-amount {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .05) 100%), rgba(10, 28, 52, .62) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.ui-glass #total-amount .total-amount-inner,
.ui-glass[class*="skin-"] .total-amount-inner { color: #fff !important; text-shadow: 0 0 14px rgba(255, 140, 60, .55), 0 1px 2px rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
.ui-glass #total-amount .total-amount-inner .currency-symbol { color: #ffb27a; }
.ui-glass #created_at input { border-radius: 3px !important; border: 1px solid rgba(0, 0, 0, .45) !important; background: rgba(255, 255, 255, .92) !important; color: var(--gs-ink); }
.ui-glass #invoice-note .fa, .ui-glass[class*="skin-"] #invoice-note .fa { color: #e6effa !important; }
.ui-glass #invoice-note .fa:hover { color: #ffb27a !important; }

/* Pay / hold */
.ui-glass #pay-button button { border-radius: 0 !important; font-weight: 600; letter-spacing: .03em; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); }
.ui-glass #pay-button button.paynow-btn,
.ui-glass[class*="skin-"] .paynow-btn,
.ui-glass #pay-button .btn-success {
  color: #fff !important; border: 1px solid #9c3d06 !important; background: var(--gs-orange) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ui-glass #pay-button button.paynow-btn:hover, .ui-glass[class*="skin-"] .paynow-btn:hover, .ui-glass #pay-button .btn-success:hover { background: var(--gs-orange-hover) !important; box-shadow: 0 0 14px rgba(255, 140, 60, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.ui-glass #pay-button .btn-danger {
  color: #fff !important; border: 1px solid rgba(0, 0, 0, .6) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .1) 49%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .1) 100%), #1b4a7a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.ui-glass #pay-button .btn-danger:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .14) 49%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .12) 100%), #235d97 !important; box-shadow: 0 0 12px rgba(120, 190, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* POS modals (payment, customers…) */
.ui-glass .pay-top td input, .ui-glass[class*="skin-"] .pay-top td input { background: #12304f !important; color: #fff !important; border-radius: 3px; }
.ui-glass .meme-customer-info, .ui-glass .calculation-box,
.ui-glass[class*="skin-"] .meme-customer-info, .ui-glass[class*="skin-"] .calculation-box { background: var(--gs-soft) !important; border: 1px solid var(--gs-line); border-radius: 6px; }
.ui-glass .context-menu-list { border-radius: 4px; border: 1px solid #97a3b3; box-shadow: 0 6px 18px rgba(0, 20, 50, .35); }
.ui-glass .context-menu-item.context-menu-hover { background: linear-gradient(180deg, #ffb27a, #e8600f); color: #fff; }

/* ======================================================================
 * Sign-in, lock screen, store picker, password reset (body.login-page / .lockscreen)
 * ====================================================================== */
html body.ui-glass.login-page,
html body.ui-glass.lockscreen { min-height: 100vh; }
.ui-glass .login-logo, .ui-glass .login-logo a, .ui-glass .lockscreen-logo, .ui-glass .lockscreen-logo a {
  color: #fff !important; font-weight: 700; text-shadow: 0 0 18px rgba(120, 190, 255, .55), 0 2px 4px rgba(0, 0, 0, .45) !important; letter-spacing: -.01em;
}
.ui-glass .login-box-body, .ui-glass .register-box-body, .ui-glass .lockscreen-wrapper .lockscreen-item, .ui-glass .store-box, .ui-glass .login-box .box {
  background: rgba(255, 255, 255, .88) !important; color: var(--gs-ink);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(10, 35, 70, .55) !important; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 70px -18px rgba(0, 20, 50, .65) !important;
}
.ui-glass .login-box-msg { color: var(--gs-title); font-weight: 600; }
.ui-glass .login-page .text-center a, .ui-glass.login-page > .text-center, .ui-glass.login-page .copyright, .ui-glass .lockscreen-footer { color: rgba(240, 247, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

/* The split sign-in card (index.php): smoked-glass welcome side, frosted form side */
.ui-glass .auth-split {
  width: min(1100px, 100%); min-height: 560px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; position: relative; color: var(--gs-ink);
  background: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(10, 35, 70, .55); border-radius: 10px; padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 30px 70px -18px rgba(0, 20, 50, .65);
}
.ui-glass .auth-split::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 10px 10px 0 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06)); }
.ui-glass .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 6vh 16px; }
.ui-glass .auth-art {
  position: relative; overflow: hidden; display: flex; align-items: center; padding: 48px 9%;
  border-radius: 6px; border: 1px solid rgba(0, 0, 0, .45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, 0) 43%),
    radial-gradient(520px 360px at 85% 25%, rgba(var(--ff-brand-rgb), .45), transparent 70%),
    linear-gradient(160deg, rgba(10, 40, 80, .82), rgba(12, 60, 95, .78) 55%, rgba(15, 80, 80, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.ui-glass .auth-art > span { position: absolute; display: block; pointer-events: none; }
.ui-glass .auth-orb { width: 220px; height: 220px; border-radius: 50%; top: 9%; right: 5%;
  background: radial-gradient(circle at 35% 30%, #ffd2ad 0%, #fb8a3c 30%, #e8600f 62%, rgba(232, 96, 15, 0) 72%); box-shadow: inset 0 -20px 40px rgba(120, 40, 0, .35); filter: saturate(115%); }
.ui-glass .auth-art .pill { width: 112px; border-radius: 999px; transform: rotate(45deg); transform-origin: bottom center;
  background: linear-gradient(to top, rgba(255, 255, 255, .02), rgba(255, 255, 255, .22)); border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ui-glass .auth-art .p1 { height: 300px; left: 4%; bottom: -70px; }
.ui-glass .auth-art .p2 { height: 270px; left: 36%; bottom: -60px; width: 128px; }
.ui-glass .auth-art .p3 { height: 250px; left: 68%; bottom: 10px; }
.ui-glass .auth-art .p4 { height: 200px; left: 20%; bottom: -120px; width: 90px; opacity: .7; }
.ui-glass .auth-art .streak { width: 9px; border-radius: 9px; transform: rotate(45deg); background: linear-gradient(to top, rgba(160, 220, 255, .9), rgba(255, 255, 255, 0)); }
.ui-glass .auth-art .s1 { height: 190px; left: 74%; bottom: 50%; }
.ui-glass .auth-art .s2 { height: 150px; left: 14%; bottom: 14%; }
.ui-glass .auth-art .s3 { height: 180px; left: 50%; bottom: 8%; opacity: .7; }
.ui-glass .auth-art .s4 { height: 130px; left: 76%; bottom: 4%; }
.ui-glass .auth-art .s5 { height: 220px; left: 88%; bottom: 12%; opacity: .6; }
.ui-glass .auth-art .s6 { height: 110px; left: 50%; bottom: 30%; opacity: .55; }
.ui-glass .auth-welcome { position: relative; z-index: 1; color: #fff; max-width: 510px; margin-bottom: 12%; }
.ui-glass .auth-welcome h1 { font-family: 'Archivo', system-ui, sans-serif; font-weight: 750; font-stretch: 100%; font-size: clamp(31.5px, 4.1vw, 51px);
  line-height: 1.05; letter-spacing: -.01em; margin: 0 0 13.5px; text-wrap: balance; color: #fff; text-shadow: 0 0 18px rgba(120, 190, 255, .55), 0 2px 4px rgba(0, 0, 0, .45); }
.ui-glass .auth-welcome p { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.5; margin: 0; opacity: .92; max-width: 450px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }

.ui-glass .auth-panel {
  display: flex; flex-direction: column; justify-content: center; position: relative; padding: 70px clamp(24px, 5vw, 60px) 40px;
  border-radius: 6px; border: 1px solid rgba(10, 35, 70, .35); background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}
.ui-glass .auth-panel::before { content: attr(data-title); position: absolute; left: 0; right: 0; top: 0; height: 38px; padding: 0 16px; display: flex; align-items: center;
  border-radius: 5px 5px 0 0; border-bottom: 1px solid #b3c7df; color: #1e3f66; font-weight: 600; font-size: 13.5px;
  background: linear-gradient(180deg, #fdfeff 0%, #eef5fc 49%, #dce8f6 50%, #e8f1fa 100%); }
.ui-glass .auth-form { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ui-glass .auth-brand { display: flex; justify-content: center; margin: 0 0 4px; }
.ui-glass .auth-brand img { display: block; max-width: 220px; max-height: 84px; width: auto; height: auto; object-fit: contain; }
.ui-glass .auth-brand .brand-logo { width: 60px; height: 60px; font-size: 25.5px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 50%), var(--ff-brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 6px 14px rgba(150, 60, 0, .35); text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }
.ui-glass .auth-form h2 { font-family: 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 22.5px; color: #1e3f66; text-align: center; margin: 0 0 8px; }
.ui-glass .auth-field { position: relative; display: flex; align-items: center; height: 46px; padding: 0 12px 0 14px; margin: 0; cursor: text;
  border-radius: 4px; background: #fff; border: 1px solid #a3acb8; border-top-color: #8a939f; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); transition: border-color .15s, box-shadow .15s; }
.ui-glass .auth-field:hover { border-color: #5a9bd5; }
.ui-glass .auth-field:focus-within { border-color: #3d7bad; box-shadow: 0 0 0 1px #3d7bad, 0 0 8px rgba(61, 123, 173, .55); }
.ui-glass .auth-field > .fa { color: #3d7bad; font-size: 16.5px; width: 18px; text-align: center; }
.ui-glass .auth-field input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--gs-ink); font-size: 15px; padding: 0 0 0 12px; height: 100%; }
.ui-glass .auth-field input::placeholder { color: #8b94a3; }
.ui-glass .auth-eye { border: 0; background: transparent; color: #4d6079; font-size: 15.8px; padding: 6px; line-height: 1; border-radius: 50%; cursor: pointer; }
.ui-glass .auth-eye:hover { color: var(--ff-brand); }
.ui-glass .auth-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 13.5px; color: #4d6079; padding: 0 4px; }
.ui-glass .auth-row a { color: #4d6079; }
.ui-glass .auth-row a:hover { color: var(--ff-brand-dark); }
.ui-glass .auth-btn {
  width: 100%; height: 46px; margin-top: 6px; border-radius: 4px !important; border: 1px solid #9c3d06 !important; color: #fff !important; font-weight: 600; font-size: 15.3px; letter-spacing: .03em;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); background: var(--gs-orange) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 6px rgba(150, 60, 0, .3);
}
.ui-glass .auth-btn:hover, .ui-glass .auth-btn:focus { background: var(--gs-orange-hover) !important; box-shadow: 0 0 12px rgba(255, 140, 60, .7), inset 0 1px 0 rgba(255, 255, 255, .55); }
.ui-glass .auth-btn:active { background: linear-gradient(180deg, #e8600f, #c9500a) !important; }
.ui-glass .auth-btn:focus-visible, .ui-glass .auth-eye:focus-visible { outline: 3px solid rgba(var(--ff-brand-rgb), .45); outline-offset: 3px; }
.ui-glass .auth-hint { font-size: 12.3px; color: #4d6079; margin: 6px 0 0; line-height: 1.45; text-align: center; }
.ui-glass .auth-copyright { position: fixed; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12.8px; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ui-glass .auth-copyright a { color: #ffd2ad; }
@media (max-height: 700px) { .ui-glass .auth-copyright { position: static; margin: 15px 0; } }
@media (max-width: 860px) {
  .ui-glass .auth-split { grid-template-columns: 1fr; min-height: 0; padding: 6px; }
  .ui-glass .auth-art { min-height: 200px; padding: 28px; align-items: flex-end; }
  .ui-glass .auth-welcome { margin: 0; }
  .ui-glass .auth-welcome h1 { font-size: 30px; margin-bottom: 6px; }
  .ui-glass .auth-orb { width: 150px; height: 150px; top: -20px; right: -10px; }
  .ui-glass .auth-art .p2 { left: 58%; } .ui-glass .auth-art .p3 { left: 84%; }
  .ui-glass .auth-panel { padding: 64px 22px 32px; }
}
@media (max-width: 560px) {
  .ui-glass .auth-wrap { padding: 0; place-items: stretch; }
  .ui-glass .auth-split { border-radius: 0; border: 0; padding: 0; gap: 0; min-height: 100vh; grid-template-rows: auto 1fr; }
  .ui-glass .auth-art, .ui-glass .auth-panel { border-radius: 0; }
  .ui-glass .auth-welcome p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-glass .auth-field, .ui-glass .btn { transition: none; } }

/* ---------- Printing: plain paper ---------- */
@media print {
  html body.ui-glass { background: #fff !important; }
  .ui-glass .box, .ui-glass .panel, .ui-glass .nav-tabs-custom, .ui-glass .well { background: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ui-glass .content-header > h1 { color: #000; text-shadow: none; }
}

/* Lock screen and store picker: text straight on the backdrop */
.ui-glass.lockscreen .lockscreen-wrapper > h4, .ui-glass.lockscreen .lockscreen-wrapper > h4 small,
.ui-glass.lockscreen .lockscreen-name, .ui-glass.lockscreen .help-block,
.ui-glass.login-page .login-box > .text-center, .ui-glass.login-page .login-box > p, .ui-glass.login-page .login-box > h3, .ui-glass.login-page .login-box > h4 {
  color: #f2f7fd !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.ui-glass.lockscreen .lockscreen-wrapper > h4 { font-weight: 700; letter-spacing: .02em; text-shadow: 0 0 14px rgba(120, 190, 255, .55), 0 1px 2px rgba(0, 0, 0, .45); }
.ui-glass.lockscreen .lockscreen-name { font-weight: 600; font-size: 1.15em; }
.ui-glass.lockscreen .lockscreen-wrapper a, .ui-glass.lockscreen .lockscreen-footer a { color: #ffd2ad !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.ui-glass.lockscreen .lockscreen-image { background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 6px 14px rgba(0, 20, 50, .45); }
.ui-glass.lockscreen .lockscreen-credentials .btn { color: #fff; background: var(--gs-orange); border: 1px solid #9c3d06; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.ui-glass.lockscreen .lockscreen-credentials .form-control { border: 0; box-shadow: none; }

/* Menu type size like CoreFit (about 14px) */
.ui-glass .sidebar-menu > li > a { font-size: 14px; }
.ui-glass .treeview-menu > li > a { font-size: 13.5px; }

/* ---------- POS: finishing touches ---------- */
.ui-glass #invoice-calculation { border-top: 1px solid var(--gs-strip-line) !important; box-shadow: 0 -1px 0 rgba(255, 255, 255, .8); }
.ui-glass #invoice-calculation .table tr { border-bottom: 1px solid var(--gs-line) !important; }
.ui-glass #people-area { border-bottom: 1px solid var(--gs-strip-line) !important; }
/* "+ Add to cart" strip under each product: smoked glass instead of black/orange */
.ui-glass #item-list .item .item-mask,
.ui-glass[class*="skin-"] #item-list .item .item-mask {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .05) 100%), #1b4a7a !important;
  border-top: 1px solid rgba(0, 0, 0, .45);
}
.ui-glass #item-list .item .item-mask span { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); line-height: 33px; text-align: center; }
.ui-glass #item-list .item:hover .item-mask,
.ui-glass[class*="skin-"] #item-list .item:hover .item-mask { background: var(--gs-orange) !important; border-top-color: #9c3d06; }
.ui-glass #item-list .item .item-img { background: #fff; }
/* cart lines: plain rows like CoreFit's till */
.ui-glass #invoice-item-list table tbody tr,
.ui-glass #invoice-item-list .invoice-item,
.ui-glass #invoice-item-list .invoice-item td { background: transparent !important; }
.ui-glass #invoice-item-list .invoice-item td { border-bottom: 1px solid var(--gs-line) !important; }
.ui-glass #invoice-item-list .invoice-item .product-name span,
.ui-glass[class*="skin-"] #invoice-item-list .invoice-item .product-name span,
.ui-glass[class*="skin-"] .product-name span {
  background: transparent !important; border: 0 !important; color: var(--gs-ink) !important; font-weight: 600; text-shadow: none; box-shadow: none; padding-left: 0; padding-right: 0;
}
.ui-glass #invoice-item-list .invoice-item .product-price,
.ui-glass #invoice-item-list .invoice-item .product-subtotal { color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.ui-glass #invoice-item-list .invoice-item .product-subtotal { font-weight: 600; }
.ui-glass #invoice-item-list .product-quantity button.btn-up,
.ui-glass #invoice-item-list .product-quantity button.btn-down {
  color: var(--gs-title) !important; border: 1px solid #a3acb8; border-radius: 3px; background: var(--gs-grey) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
}
.ui-glass #invoice-item-list .product-quantity button.btn-up:hover,
.ui-glass #invoice-item-list .product-quantity button.btn-down:hover { border-color: #3c7fb1; background: var(--gs-blue-hover) !important; }
.ui-glass #invoice-item-list .product-quantity input { border: 1px solid #a3acb8; border-radius: 3px; }
.ui-glass #invoice-item-list .invoice-item .delete-icon, .ui-glass #invoice-item-list .product-delete { color: #d6301f; }
/* third level (e.g. System › Store › Store setting) */
.ui-glass .treeview-menu .treeview-menu { margin: 2px 0 4px 12px; padding: 2px 0 2px 6px; border-left: 1px solid rgba(255, 255, 255, .18); background: transparent !important; }
.ui-glass .treeview-menu .treeview-menu > li > a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-glass .treeview-menu > li > a { position: relative; padding-right: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-glass .treeview-menu > li > a > .pull-right { position: absolute; right: 8px; top: 9px; margin: 0; }

/* Right-to-left languages: mirror the sub-menu guide line */
.ui-glass.rtl .sidebar-menu > li > .treeview-menu { margin: 2px 22px 6px 8px; padding: 2px 8px 2px 0; border-left: 0; border-right: 1px solid rgba(255, 255, 255, .18); }
.ui-glass.rtl .treeview-menu > li.active > a { box-shadow: inset -3px 0 0 #fb8a3c; }
.ui-glass.rtl .treeview-menu > li > a { padding-right: 10px; padding-left: 24px; }
.ui-glass.rtl .treeview-menu > li > a > .pull-right { right: auto; left: 8px; }

/* ---------- AdminLTE colour helpers, re-tinted to the CoreFit palette ---------- */
.ui-glass .bg-blue, .ui-glass .bg-aqua, .ui-glass .bg-light-blue { background-color: #1f74d0 !important; color: #fff !important; }
.ui-glass .bg-green, .ui-glass .bg-olive { background-color: #149a5e !important; color: #fff !important; }
.ui-glass .bg-red { background-color: #d6301f !important; color: #fff !important; }
.ui-glass .bg-yellow, .ui-glass .bg-orange { background-color: #e8600f !important; color: #fff !important; }
.ui-glass .bg-purple { background-color: #6a3fd8 !important; color: #fff !important; }
.ui-glass .bg-maroon { background-color: #b81e63 !important; color: #fff !important; }
.ui-glass .bg-navy { background-color: #12304f !important; color: #fff !important; }
.ui-glass .bg-teal { background-color: #0e8f8f !important; color: #fff !important; }
.ui-glass .label-success { background-color: #149a5e !important; }
.ui-glass .label-danger { background-color: #d6301f !important; }
.ui-glass .label-warning { background-color: #e8600f !important; }
.ui-glass .label-info { background-color: #1f74d0 !important; }
.ui-glass .label-default { background-color: #dfe6ee !important; color: var(--gs-ink) !important; }
.ui-glass .text-green { color: #149a5e !important; }
.ui-glass .text-red { color: #d6301f !important; }
.ui-glass .text-yellow { color: #c9500a !important; }
.ui-glass .text-blue, .ui-glass .text-aqua, .ui-glass .text-light-blue { color: #1f74d0 !important; }
/* Report summary cells (Overview report etc.): glossy like the dashboard tiles */
.ui-glass td[class*="bg-"]:not(.bg-gray):not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary),
.ui-glass .panel-heading[class*="bg-"]:not(.bg-gray):not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .10) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .07) 100%) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.ui-glass td[class*="bg-"]:not(.bg-gray):not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary) a { color: rgba(255, 255, 255, .92) !important; }
.ui-glass .panel-heading[class*="bg-"]:not(.bg-gray):not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary), .ui-glass .panel-heading[class*="bg-"]:not(.bg-gray):not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary) .panel-title { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ui-glass .login-logo .text, .ui-glass .login-logo .text p, .ui-glass .login-logo .text strong {
  color: #fff !important; font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(120, 190, 255, .55), 0 2px 4px rgba(0, 0, 0, .45) !important;
}
.ui-glass.login-page .copyright a, .ui-glass.lockscreen .copyright a { color: #ffd2ad !important; }
.ui-glass .store-list .list-group-item a { color: var(--gs-title); font-weight: 600; }
.ui-glass .store-list .list-group-item:hover { border-color: #3c7fb1; background: var(--gs-blue-hover); }

/* ======================================================================
 * Core Retail Management brand
 * ====================================================================== */
.ui-glass .main-header .logo { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; }
.ui-glass .main-header .logo .logo-lg { display: flex; align-items: center; gap: 9px; }
.ui-glass .main-header .logo .brand-mark { height: 34px; width: auto; filter: drop-shadow(0 0 6px rgba(130, 200, 255, .45)) drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.ui-glass .main-header .logo .logo-mini .brand-mark { height: 32px; }
.ui-glass .main-header .logo b { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.ui-glass.sidebar-mini.sidebar-collapse .main-header .logo { padding: 0; }
@media (min-width: 768px) { .ui-glass.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { display: flex !important; align-items: center; justify-content: center; } }
.ui-glass .auth-brand img.auth-logo { max-width: 240px; max-height: 200px; }
.ui-glass .auth-welcome .auth-tagline { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #ffb27a; opacity: 1; }
.ui-glass .auth-copyright a { white-space: nowrap; }
.ui-glass .lock-brand img { width: 96px; height: auto; margin-bottom: 6px; filter: drop-shadow(0 0 12px rgba(130, 200, 255, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.ui-glass .main-footer .copyright a { color: #ffd2ad; }
.ui-glass .support-card .panel { box-shadow: none; }
@media (max-width: 860px) { .ui-glass .auth-brand img.auth-logo { max-height: 140px; } }