/* ==========================================================================
    IMPORTS & KEYFRAMES
   ========================================================================== */

/* Google Fonts import - Montserrat for consistent typography */
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pulse animation for ticket alerts */
@keyframes colorPulse {
    0%   { background-color: rgba(255, 0, 0, 0.14); }
    25%  { background-color: rgba(255, 0, 0, 0.20); }
    50%  { background-color: rgba(255, 0, 0, 0.30); }
    75%  { background-color: rgba(255, 0, 0, 0.20); }
    100% { background-color: rgba(255, 0, 0, 0.14); }
}

i.fa-kit{
	display:inline-block;
	line-height:1;
	vertical-align:-0.125em; /* matches FA default optical alignment */
	font-size:16px;
}

/* ==========================================================================
   THEME TOKENS (GLOBAL)
   - Define once
   - Override once for dark mode
   ========================================================================== */

:root {
	--surface-1:#ffffff;
	--surface-2:rgba(0,0,0,.02);
	--border-1:rgba(0,0,0,.10);
	--divider-1:rgba(0,0,0,.08);
	--hover-1:rgba(0,0,0,.04);
	--pill-bg-1:rgba(0,0,0,.03);
	--pill-border-1:rgba(0,0,0,.14);
	--text-muted-1:rgba(0,0,0,.70);
}

/* Dark mode overrides (match your actual dark-mode hooks) */
body.dark-mode, .dark-mode, [data-theme="dark"]{
	--surface-1:rgba(255,255,255,.03);
	--surface-2:rgba(255,255,255,.05);
	--border-1:rgba(255,255,255,.12);
	--divider-1:rgba(255,255,255,.10);
	--hover-1:rgba(255,255,255,.07);
	--pill-bg-1:rgba(255,255,255,.07);
	--pill-border-1:rgba(255,255,255,.18);
	--text-muted-1:rgba(255,255,255,.70);
}


/* ==========================================================================
    BASE / RESET
   ========================================================================== */

/* Base link structure (colors defined later in theme section) */
a { text-decoration: none; }
a:focus, a:hover { text-decoration: underline; }
a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

html, body {
    min-height: 100%;
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
:after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body {
    margin: 0;
    font-family: Montserrat, Arial;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: auto;
}


/* ==========================================================================
    TYPOGRAPHY
   ========================================================================== */

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.h1, .h2, .h3,
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }

.h4, .h5, .h6,
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }

.h1, h1 { font-size: 36px; }
.h2, h2 { font-size: 30px; }
.h3, h3 { font-size: 24px; }
.h4, h4 { font-size: 18px; }
.h5, h5 { font-size: 14px; }
.h6, h6 { font-size: 12px; }

.small, small { font-size: 85%; }

.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-lowercase { text-transform: lowercase; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }

.truncate-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/* ==========================================================================
    LAYOUT: WRAPPERS / CONTAINER / GRID
   ========================================================================== */

/* --- Wrappers --- */
.wrapper {
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.wrapper:before, .wrapper:after { content: " "; display: table; }
.wrapper:after { clear: both; }

.content-wrapper {
    min-height: 100%;
    margin-left: 230px;
    padding-top: 50px;
}

.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* --- Container --- */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

@media (max-width: 767px) {
    .content-wrapper { margin-left: 0; padding-top: 0px; }
}

/* --- Grid system (Bootstrap 3 style) --- */
.row { margin-right: -15px; margin-left: -15px; }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { float: left; }

.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }

.col-xs-pull-12 { right: 100%; }
.col-xs-pull-11 { right: 91.66666667%; }
.col-xs-pull-10 { right: 83.33333333%; }
.col-xs-pull-9 { right: 75%; }
.col-xs-pull-8 { right: 66.66666667%; }
.col-xs-pull-7 { right: 58.33333333%; }
.col-xs-pull-6 { right: 50%; }
.col-xs-pull-5 { right: 41.66666667%; }
.col-xs-pull-4 { right: 33.33333333%; }
.col-xs-pull-3 { right: 25%; }
.col-xs-pull-2 { right: 16.66666667%; }
.col-xs-pull-1 { right: 8.33333333%; }
.col-xs-pull-0 { right: auto; }

.col-xs-push-12 { left: 100%; }
.col-xs-push-11 { left: 91.66666667%; }
.col-xs-push-10 { left: 83.33333333%; }
.col-xs-push-9 { left: 75%; }
.col-xs-push-8 { left: 66.66666667%; }
.col-xs-push-7 { left: 58.33333333%; }
.col-xs-push-6 { left: 50%; }
.col-xs-push-5 { left: 41.66666667%; }
.col-xs-push-4 { left: 33.33333333%; }
.col-xs-push-3 { left: 25%; }
.col-xs-push-2 { left: 16.66666667%; }
.col-xs-push-1 { left: 8.33333333%; }
.col-xs-push-0 { left: auto; }

.col-xs-offset-12 { margin-left: 100%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-9 { margin-left: 75%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-offset-6 { margin-left: 50%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-offset-0 { margin-left: 0; }

/* sm/md/lg media blocks unchanged from your common.css (kept for compatibility) */
@media (min-width: 768px) {
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left; }
    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666667%; }
    .col-sm-10 { width: 83.33333333%; }
    .col-sm-9 { width: 75%; }
    .col-sm-8 { width: 66.66666667%; }
    .col-sm-7 { width: 58.33333333%; }
    .col-sm-6 { width: 50%; }
    .col-sm-5 { width: 41.66666667%; }
    .col-sm-4 { width: 33.33333333%; }
    .col-sm-3 { width: 25%; }
    .col-sm-2 { width: 16.66666667%; }
    .col-sm-1 { width: 8.33333333%; }
    .col-sm-pull-12 { right: 100%; }
    .col-sm-pull-11 { right: 91.66666667%; }
    .col-sm-pull-10 { right: 83.33333333%; }
    .col-sm-pull-9 { right: 75%; }
    .col-sm-pull-8 { right: 66.66666667%; }
    .col-sm-pull-7 { right: 58.33333333%; }
    .col-sm-pull-6 { right: 50%; }
    .col-sm-pull-5 { right: 41.66666667%; }
    .col-sm-pull-4 { right: 33.33333333%; }
    .col-sm-pull-3 { right: 25%; }
    .col-sm-pull-2 { right: 16.66666667%; }
    .col-sm-pull-1 { right: 8.33333333%; }
    .col-sm-pull-0 { right: auto; }
    .col-sm-push-12 { left: 100%; }
    .col-sm-push-11 { left: 91.66666667%; }
    .col-sm-push-10 { left: 83.33333333%; }
    .col-sm-push-9 { left: 75%; }
    .col-sm-push-8 { left: 66.66666667%; }
    .col-sm-push-7 { left: 58.33333333%; }
    .col-sm-push-6 { left: 50%; }
    .col-sm-push-5 { left: 41.66666667%; }
    .col-sm-push-4 { left: 33.33333333%; }
    .col-sm-push-3 { left: 25%; }
    .col-sm-push-2 { left: 16.66666667%; }
    .col-sm-push-1 { left: 8.33333333%; }
    .col-sm-push-0 { left: auto; }
    .col-sm-offset-12 { margin-left: 100%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-9 { margin-left: 75%; }
    .col-sm-offset-8 { margin-left: 66.66666667%; }
    .col-sm-offset-7 { margin-left: 58.33333333%; }
    .col-sm-offset-6 { margin-left: 50%; }
    .col-sm-offset-5 { margin-left: 41.66666667%; }
    .col-sm-offset-4 { margin-left: 33.33333333%; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-2 { margin-left: 16.66666667%; }
    .col-sm-offset-1 { margin-left: 8.33333333%; }
    .col-sm-offset-0 { margin-left: 0; }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left; }
    .col-md-12 { width: 100%; }
    .col-md-11 { width: 91.66666667%; }
    .col-md-10 { width: 83.33333333%; }
    .col-md-9 { width: 75%; }
    .col-md-8 { width: 66.66666667%; }
    .col-md-7 { width: 58.33333333%; }
    .col-md-6 { width: 50%; }
    .col-md-5 { width: 41.66666667%; }
    .col-md-4 { width: 33.33333333%; }
    .col-md-3 { width: 25%; }
    .col-md-2 { width: 16.66666667%; }
    .col-md-1 { width: 8.33333333%; }
    .col-md-pull-12 { right: 100%; }
    .col-md-pull-11 { right: 91.66666667%; }
    .col-md-pull-10 { right: 83.33333333%; }
    .col-md-pull-9 { right: 75%; }
    .col-md-pull-8 { right: 66.66666667%; }
    .col-md-pull-7 { right: 58.33333333%; }
    .col-md-pull-6 { right: 50%; }
    .col-md-pull-5 { right: 41.66666667%; }
    .col-md-pull-4 { right: 33.33333333%; }
    .col-md-pull-3 { right: 25%; }
    .col-md-pull-2 { right: 16.66666667%; }
    .col-md-pull-1 { right: 8.33333333%; }
    .col-md-pull-0 { right: auto; }
    .col-md-push-12 { left: 100%; }
    .col-md-push-11 { left: 91.66666667%; }
    .col-md-push-10 { left: 83.33333333%; }
    .col-md-push-9 { left: 75%; }
    .col-md-push-8 { left: 66.66666667%; }
    .col-md-push-7 { left: 58.33333333%; }
    .col-md-push-6 { left: 50%; }
    .col-md-push-5 { left: 41.66666667%; }
    .col-md-push-4 { left: 33.33333333%; }
    .col-md-push-3 { left: 25%; }
    .col-md-push-2 { left: 16.66666667%; }
    .col-md-push-1 { left: 8.33333333%; }
    .col-md-push-0 { left: auto; }
    .col-md-offset-12 { margin-left: 100%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-9 { margin-left: 75%; }
    .col-md-offset-8 { margin-left: 66.66666667%; }
    .col-md-offset-7 { margin-left: 58.33333333%; }
    .col-md-offset-6 { margin-left: 50%; }
    .col-md-offset-5 { margin-left: 41.66666667%; }
    .col-md-offset-4 { margin-left: 33.33333333%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-2 { margin-left: 16.66666667%; }
    .col-md-offset-1 { margin-left: 8.33333333%; }
    .col-md-offset-0 { margin-left: 0; }
}

@media (min-width: 1200px) {
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float: left; }
    .col-lg-12 { width: 100%; }
    .col-lg-11 { width: 91.66666667%; }
    .col-lg-10 { width: 83.33333333%; }
    .col-lg-9 { width: 75%; }
    .col-lg-8 { width: 66.66666667%; }
    .col-lg-7 { width: 58.33333333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-5 { width: 41.66666667%; }
    .col-lg-4 { width: 33.33333333%; }
    .col-lg-3 { width: 25%; }
    .col-lg-2 { width: 16.66666667%; }
    .col-lg-1 { width: 8.33333333%; }
    .col-lg-pull-12 { right: 100%; }
    .col-lg-pull-11 { right: 91.66666667%; }
    .col-lg-pull-10 { right: 83.33333333%; }
    .col-lg-pull-9 { right: 75%; }
    .col-lg-pull-8 { right: 66.66666667%; }
    .col-lg-pull-7 { right: 58.33333333%; }
    .col-lg-pull-6 { right: 50%; }
    .col-lg-pull-5 { right: 41.66666667%; }
    .col-lg-pull-4 { right: 33.33333333%; }
    .col-lg-pull-3 { right: 25%; }
    .col-lg-pull-2 { right: 16.66666667%; }
    .col-lg-pull-1 { right: 8.33333333%; }
    .col-lg-pull-0 { right: auto; }
    .col-lg-push-12 { left: 100%; }
    .col-lg-push-11 { left: 91.66666667%; }
    .col-lg-push-10 { left: 83.33333333%; }
    .col-lg-push-9 { left: 75%; }
    .col-lg-push-8 { left: 66.66666667%; }
    .col-lg-push-7 { left: 58.33333333%; }
    .col-lg-push-6 { left: 50%; }
    .col-lg-push-5 { left: 41.66666667%; }
    .col-lg-push-4 { left: 33.33333333%; }
    .col-lg-push-3 { left: 25%; }
    .col-lg-push-2 { left: 16.66666667%; }
    .col-lg-push-1 { left: 8.33333333%; }
    .col-lg-push-0 { left: auto; }
    .col-lg-offset-12 { margin-left: 100%; }
    .col-lg-offset-11 { margin-left: 91.66666667%; }
    .col-lg-offset-10 { margin-left: 83.33333333%; }
    .col-lg-offset-9 { margin-left: 75%; }
    .col-lg-offset-8 { margin-left: 66.66666667%; }
    .col-lg-offset-7 { margin-left: 58.33333333%; }
    .col-lg-offset-6 { margin-left: 50%; }
    .col-lg-offset-5 { margin-left: 41.66666667%; }
    .col-lg-offset-4 { margin-left: 33.33333333%; }
    .col-lg-offset-3 { margin-left: 25%; }
    .col-lg-offset-2 { margin-left: 16.66666667%; }
    .col-lg-offset-1 { margin-left: 8.33333333%; }
    .col-lg-offset-0 { margin-left: 0; }
}


/* ==========================================================================
    HEADER (STRUCTURE)
   ========================================================================== */

.main-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    max-height: 100px;
    z-index: 1030;
}

.main-header .navbar {
    border: none;
    border-radius: 0;
    margin: 0;
    min-height: 50px;
    transition: margin-left 0.3s ease-in-out;
}

.main-header .navbar .nav > li > a > .label {
    position: absolute;
    top: 9px;
    right: 7px;
    font-size: 9px;
    padding: 2px 3px;
    line-height: 0.9;
    text-align: center;
}

.main-header .logo {
    float: left;
    height: 50px;
    width: 230px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.main-header .logo span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
    white-space: nowrap;
}

.main-header .logo img { max-height: 50px; max-width: 230px; }
.main-header .logo:hover { text-decoration: none; }

.main-header .sidebar-toggle {
    display: none;
    float: left;
    background-color: transparent;
    background-image: none;
    padding: 15px 15px;
    cursor: pointer;
}
.main-header .sidebar-toggle:focus,
.main-header .sidebar-toggle:active { background: transparent; }
.main-header .sidebar-toggle .icon-bar { display: none; }

.main-header .navbar-custom-menu { float: right; }


/* ==========================================================================
    OPEN/CLOSE SIDEBAR BUTTON (ANIMATED HAMBURGER TO X)
   ========================================================================== */

.sidebar-toggle {
  --icon-w: 18px;
  --icon-h: 14px;
  --line-h: 2px;
  --line-r: 2px;

  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;

  /* middle line */
  background-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(50% - (var(--line-h) / 2)),
    currentColor calc(50% - (var(--line-h) / 2)),
    currentColor calc(50% + (var(--line-h) / 2)),
    transparent calc(50% + (var(--line-h) / 2)),
    transparent 100%
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-w) var(--icon-h);
}

.sidebar-toggle::before,
.sidebar-toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--icon-w);
  height: var(--line-h);
  background: currentColor;
  border-radius: var(--line-r);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* top line */
.sidebar-toggle::before {
  transform: translate(-50%, calc(-50% - 6px));
}

/* bottom line */
.sidebar-toggle::after {
  transform: translate(-50%, calc(-50% + 6px));
}

/* OPEN STATE: turn into X */
body.sidebar-open .sidebar-toggle {
  background-image: none;
}

body.sidebar-open .sidebar-toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

body.sidebar-open .sidebar-toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* ==========================================================================
    SIDEBAR (STRUCTURE)
   ========================================================================== */

.main-sidebar {
    background-color: var(--sidebar-bg);
    overflow: visible !important;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 60px;
    min-height: 100%;
    width: 230px;
    z-index: 810;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

.sidebar {
    overflow: visible !important;
    position: relative;
    padding-bottom: 10px;
    z-index: 1000;
}

.sidebar-menu {
    overflow: visible !important;
    position: relative;
    list-style: none;
    margin-top: 10px;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-menu > li { position: relative; margin: 5px 0; padding: 0; }

.sidebar-menu > li > a {
    padding: 7px 0px 7px 15px;
    display: block;
    position: relative;
    text-decoration: none;
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion { width: 20px; }

.sidebar-menu > li .label,
.sidebar-menu > li .badge { margin-right: 5px; }
.sidebar-menu > li .badge { margin-top: 3px; }

.sidebar-menu li.header {
    padding: 10px 25px 10px 15px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: clip;
}

.sidebar-menu li > a > .fa-angle-left,
.sidebar-menu li > a > .pull-right-container > .fa-angle-left {
    width: auto;
    height: auto;
    padding: 0;
    margin-right: 10px;
}

.sidebar-menu li.active > a > .fa-angle-left,
.sidebar-menu li.active > a > .pull-right-container > .fa-angle-left {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.sidebar-menu li.active > .treeview-menu { display: block; }

.sidebar-menu .treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 5px;
}
.sidebar-menu .treeview-menu .treeview-menu { padding-left: 20px; }
.sidebar-menu .treeview-menu > li { margin: 5px 15px 0 0; }

.sidebar-menu .treeview-menu > li > a {
    padding: 5px 5px 5px 15px;
    display: block;
    font-size: 11px;
    margin-left: 30px;
}

.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar-menu .treeview-menu > li > a > .ion { width: 20px; }

.sidebar-menu .treeview-menu > li > a > .pull-right-container > .fa-angle-left,
.sidebar-menu .treeview-menu > li > a > .pull-right-container > .fa-angle-down,
.sidebar-menu .treeview-menu > li > a > .fa-angle-left,
.sidebar-menu .treeview-menu > li > a > .fa-angle-down { width: auto; }

.sidebar-menu .treeview-menu > li > a > span { text-decoration: none; }
.sidebar-menu > li > .treeview-menu { margin: 0 1px; }

.sidebar-menu li > a > .pull-right-container {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -7px;
}

.sidebar-form > .input-group { margin: 10px 10px 0 10px; }
.sidebar-form input[type="text"] { height: 31px; }
.sidebar-form input:focus { border-color: transparent; }

.sidebar-form,
.sidebar-menu > li.header {
    overflow: hidden;
    text-overflow: clip;
}


/* ==========================================================================
    NAVIGATION (BOOTSTRAP NAVS, TABS, COLLAPSE)
   ========================================================================== */

.collapse { display: none; }
tr.collapse.in { display: table-row; }
tbody.collapse.in { display: table-row-group; }

.nav { padding-left: 0; margin-bottom: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li.disabled > a { cursor: not-allowed; }

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover { border-color: #337ab7; }

.nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; }
.nav > li > a > img { max-width: none; }

.nav-tabs { border-bottom: 1px solid #ddd; }
.nav-tabs > li { float: left; margin-bottom: -1px; }
.nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover { cursor: default; border: 1px solid #ddd; border-bottom-color: transparent; }

.nav-tabs.nav-justified { width: 100%; border-bottom: 0; }
.nav-tabs.nav-justified > li { float: none; }
.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center; }
.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; }

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }
    .nav-tabs.nav-justified > li > a { margin-bottom: 0; }
}

.nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px; }

.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:focus,
.nav-tabs.nav-justified > .active > a:hover { border: 1px solid #ddd; }

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }
    .nav-tabs.nav-justified > .active > a,
    .nav-tabs.nav-justified > .active > a:focus,
    .nav-tabs.nav-justified > .active > a:hover { border-bottom-color: #fff; }
}

.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

.nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }

.navbar { position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; }

@media (min-width: 768px) {
    .navbar { border-radius: 4px; }
    .navbar-header { float: left; }
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in { overflow-y: auto; }

@media (min-width: 768px) {
    .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; }
    .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; }
    .navbar-collapse.in { overflow-y: visible; }
}

.container > .navbar-collapse,
.container > .navbar-header { margin-right: -15px; margin-left: -15px; }

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.navbar-toggle:focus { outline: 0; }

.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

@media (min-width: 768px) { .navbar-toggle { display: none; } }

.navbar-nav { margin: 7.5px -15px; }
.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .navbar-nav .open .dropdown-menu .dropdown-header,
    .navbar-nav .open .dropdown-menu > li > a { padding: 5px 15px 5px 25px; }

    .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; }

    .navbar-nav .open .dropdown-menu > li > a:focus,
    .navbar-nav .open .dropdown-menu > li > a:hover { background-image: none; }
}

@media (min-width: 768px) {
    .navbar-nav { float: left; margin: 0; }
    .navbar-nav > li { float: left; }
    .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }
}


/* ==========================================================================
    NOTIFICATIONS PANEL
   ========================================================================== */

#notifications_panel{
	position:fixed !important;
	display:none;
	width:360px;
	max-width:calc(100vw - 20px);
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	border-radius:12px;
	box-shadow:0 12px 30px rgba(0,0,0,.18);
	z-index:999999 !important;
	overflow:hidden;
}

#notifications_panel:before{
	content:'';
	position:absolute;
	right:14px;
	top:-7px;
	width:14px;
	height:14px;
	background:#fff;
	border-left:1px solid rgba(0,0,0,.08);
	border-top:1px solid rgba(0,0,0,.08);
	transform:rotate(45deg);
}

#notifications_panel .nav-notify-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:10px 12px;
	border-bottom:1px solid rgba(0,0,0,.06);
	background:#fafafa;
}

#notifications_panel .nav-notify-title{
	font-weight:700;
	font-size:13px;
	color:#111;
}

#notifications_panel .nav-notify-close{
	display:inline-block;
	width:28px;
	height:28px;
	line-height:26px;
	text-align:center;
	border-radius:8px;
	color:#666;
	text-decoration:none;
	border:1px solid rgba(0,0,0,.08);
	background:#fff;
}

#notifications_panel .nav-notify-loading{
	padding:12px;
	text-align:center;
	border-bottom:1px solid rgba(0,0,0,.06);
	display:none;
}

#notifications_panel .nav-notify-list{
	max-height:320px;
	overflow:auto;
	padding:10px;
	background:#fff;
}

#notifications_panel .nav-notify-item{
	position:relative;
	display:flex;
	gap:10px;
	align-items:flex-start;
	padding:10px 10px 10px 14px;
	border:1px solid rgba(0,0,0,.06);
	border-radius:12px;
	background:#fff;
	margin-bottom:8px;
	text-decoration:none;
	color:inherit;
}

#notifications_panel .nav-notify-item:last-child{ margin-bottom:0; }

#notifications_panel .nav-notify-accent{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:5px;
	border-radius:12px 0 0 12px;
	opacity:.9;
}

#notifications_panel .nav-notify-icon{
	width:28px;
	min-width:28px;
	height:28px;
	border-radius:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#f3f4f6;
	color:#2c3e50;
	margin-top:1px;
}

#notifications_panel .nav-notify-content{ flex:1; min-width:0; }

#notifications_panel .nav-notify-item-title{
	font-weight:700;
	font-size:13px;
	line-height:1.2;
	color:#111;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

#notifications_panel .nav-notify-item-text{
	font-size:12px;
	color:#666;
	margin-top:3px;
	line-height:1.3;
}

#notifications_panel .nav-notify-item-due{
	font-size:12px;
	color:#888;
	margin-top:4px;
}

#notifications_panel .nav-notify-footer{
	padding:10px 12px;
	border-top:1px solid rgba(0,0,0,.06);
	background:#fafafa;
	text-align:right;
}

#notifications_panel .nav-notify-empty{
	padding:14px 10px;
	color:#666;
	font-size:12px;
	border:1px dashed rgba(0,0,0,.10);
	border-radius:12px;
	background:#fbfbfb;
}


/* ==========================================================================
    TOOLTIP (COMPONENT)
   ========================================================================== */

.tooltip {
    position: absolute;
    z-index: 107000000000;
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    filter: alpha(opacity=0);
    opacity: 0;
    line-break: auto
}
.tooltip.in { filter: alpha(opacity=90); opacity: .9 }
.tooltip.top { padding: 5px 0; margin-top: -3px }
.tooltip.right { padding: 0 5px; margin-left: 3px }
.tooltip.bottom { padding: 5px 0; margin-top: 3px }
.tooltip.left { padding: 0 5px; margin-left: -3px }

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #013572;
    border-radius: 4px
}
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}
.tooltip.top .tooltip-arrow {
    bottom: 0; left: 50%; margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #013572
}
.tooltip.top-left .tooltip-arrow {
    right: 5px; bottom: 0; margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #013572
}
.tooltip.top-right .tooltip-arrow {
    bottom: 0; left: 5px; margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #013572
}
.tooltip.right .tooltip-arrow {
    top: 50%; left: 0; margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #013572
}
.tooltip.left .tooltip-arrow {
    top: 50%; right: 0; margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #013572
}
.tooltip.bottom .tooltip-arrow {
    top: 0; left: 50%; margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #013572
}
.tooltip.bottom-left .tooltip-arrow {
    top: 0; right: 5px; margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #013572
}
.tooltip.bottom-right .tooltip-arrow {
    top: 0; left: 5px; margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #013572
}


/* ==========================================================================
    File List Component (Enhanced File Input)
   ========================================================================== */
/* Enhanced file input (global) */
.k-filelist{
    
}
.k-filelist__top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
}
.k-filelist__hint{
	font-size:12px;
	color:#4b5563; /* darker grey */
	opacity:1;
}
.k-filelist__native{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	opacity:0;
}
/* list container */
.k-filelist__list{
	margin-top:10px;
	border:1px solid #ffffff;
	border-radius:10px;
	overflow:hidden;
	display:none;
}
.k-filelist__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:10px 12px;
	border-bottom:1px solid #fff;
	font-weight:600;
}
.k-filelist__link{
	font-weight:400;
	font-size:12px;
	text-decoration:none;
}
/* row */
.k-filelist__row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:10px 12px;
	border-bottom:1px solid rgba(0,0,0,.06);
}
.k-filelist__row:last-child{
    border-bottom:0;
}
.k-filelist__left{
    min-width:0;
}
.k-filelist__name{
	font-weight:600;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	max-width:520px;
}
.k-filelist__meta{
	font-size:12px;
	margin-top:2px;
	color:#6b7280;
	opacity:1;
}
.k-filelist__remove{
	border:0;
	background:transparent;
	cursor:pointer;
	font-size:12px;
	padding:6px 8px;
	border-radius:8px;
	border:1px solid rgba(0,0,0,.12);
}
.k-filelist__remove:hover{
    background:rgba(0,0,0,.03);
}
.k-filelist__error{
	margin-top:8px;
	font-size:12px;
	color:#b00020;
	display:none;
}
.k-att__path{
	font-size:12px;
	color:#6b7280;
	opacity:1;
}


/* ==========================================================================
    UI COMPONENTS — CARDS, BOXES, PICKER
   ========================================================================== */

/* --- Mini Cards --- */
.mini-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:0.7rem;
    margin-bottom:0.8rem;
}
.mini-card{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:0.6rem 0.8rem;
    display:flex;
    align-items:flex-start;
}
.mini-card:hover{
    background:#eef5ff;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.mini-card-content{
    flex:1 1 auto;
    min-width:0;
    margin-right:0.6rem;
}
.mini-card .value,.mini-card .label{
    margin:0;
    padding:5px 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
    display:block !important;
}
.mini-card .value{ font-size:1rem; font-weight:700; color:#222; }
.mini-card .label{ font-size:0.8rem; font-weight:500; color:#666; margin-top:2px; }
.mini-card .icon{ flex:0 0 auto; font-size:1.4rem; opacity:0.85; }

/* --- Small Box --- */
.small-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.small-box > .inner { padding: 10px; }
.small-box > .small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    display: block;
    z-index: 10;
    background: rgba(0,0,0,0.1);
    text-decoration: none;
}
.small-box > .small-box-footer:hover { background: rgba(0,0,0,0.15); }
.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
    z-index: 5px;
}
.small-box p { font-size: 15px; z-index: 5px; }
.small-box p > small {
    display: block;
    font-size: 13px;
    margin-top: 5px;
}
.small-box .icon {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0,0,0,0.15);
}
.small-box:hover { text-decoration: none; }
.small-box:hover .icon { font-size: 95px; }

/* --- Info Box --- */
.info-box {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

/* --- Box --- */
.box {
    position: relative;
    border-radius: 10px;
    margin-bottom: 20px;
    width: 100%;
    border-color: rgba(0, 189, 176, 0.45);
    outline: 0;
    -webkit-box-shadow:
        0 0 0 0px rgba(0, 189, 176, 0.08),
        0 0 15px 0px rgba(0, 189, 176, 0.06),
        0 0 14px rgba(2, 52, 113, 0.10);
    box-shadow:
        0 0 0 0px rgba(0, 189, 176, 0.08),
        0 0 15px 0px rgba(0, 189, 176, 0.06),
        0 0 14px rgba(2, 52, 113, 0.10);
}
.box.collapsed-box .box-body,
.box.collapsed-box .box-footer { display: none; }

.box-header:before, .box-body:before, .box-footer:before,
.box-header:after, .box-body:after, .box-footer:after {
    content: " ";
    display: table;
}
.box-header:after, .box-body:after, .box-footer:after { clear: both; }

.box-header {
    display: block;
    padding: 10px;
    position: relative;
    margin-bottom: 15px;
}
.box-header > .box-title {
    font-size: 16px;
    margin: 5px 0;
    line-height: 1;
    color: var(--box-titles);
    width: 100%;
}
.box-header > .box-title > i { color: var(--box-titles); }
.box-header > .box-tools {
    position: absolute;
    right: 0px;
}
.box-header > .box-tools [data-toggle="tooltip"] { position: relative; }
.box-header > .box-tools .btn {
    padding: 5px;
    font-size: 10px;
}

.btn-box-tool {
    padding: 5px;
    font-size: 12px;
    background: transparent;
}
.btn-box-tool.btn:active { box-shadow: none; }

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.box-body > .table { margin-bottom: 0; }
.box-footer { padding: 10px; }

.box .overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box .overlay .fa-refresh {
    font-size: 2em;
    animation: fa-spin 1s infinite linear;
}

/* --- Color Picker (Pickr) --- */
.pickr {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.pcr-button { width: 32px !important; height: 32px !important; }

/* --- Box header helper --- */
.box-header.with-border .box-title + p.text-muted { margin: 6px 0 0 0; }

/* ==========================================================================
   BOX HEADER: responsive filter bar (global)
   - Keeps title + filters + tools on one line when possible
   - Wraps instead of squashing on smaller screens
   ========================================================================== */

.box > .box-header{
	display:flex;
	align-items:center;
	flex-wrap:wrap;          /* key: wrap instead of squash */
	gap:8px;                 /* spacing between wrapped rows */
}

/* Make child controls flexible */
.box > .box-header > .box-tools .input-group > .form-control,
.box > .box-header > .box-tools .input-group > .btn,
.box > .box-header > .box-tools .input-group > a.btn{
	flex:1 1 180px;          /* default: each control can shrink/grow */
	min-width:160px;
	width:auto !important;   /* override inline width:auto/inline-block */
}

/* Your spacer spans (width:10px) are causing layout issues in flex; hide them */
.box > .box-header > .box-tools .input-group > .input-group-btn{
	display:none;
}

/* Refresh button should behave like a control, no negative margins */
.box > .box-header > .box-tools .input-group #refreshBtn{
	flex:0 0 auto;
	min-width:40px;
	margin-top:0 !important;
}

/* ==========================================================================
   Chips: responsive grid behaviour (global)
   ========================================================================== */

.k-chip-grid{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	align-items:center;
	min-width:0;
}

.k-chip{
	flex:0 0 auto;
	max-width:100%;
}

/* ==========================================================================
   Breakpoints: ensure chips drop under tools cleanly on smaller screens
   ========================================================================== */

@media (max-width: 991px){
	/* Stack tools and chips into their own full-width rows */
	.box > .box-header > .k-chip-grid{
		flex:0 0 100%;
		order:3;              /* after title + tools */
	}

	.box > .box-header > .box-tools{
		flex:0 0 100%;
		order:2;
		margin-left:0;
	}

	/* Title stays on top */
	.box > .box-header > .box-title{
		flex:0 0 100%;
		order:1;
	}
}

/* Extra-small: controls become 2 per row, then 1 per row if needed */
@media (max-width: 767px){
	.box > .box-header > .box-tools .input-group > .form-control,
	.box > .box-header > .box-tools .input-group > .btn,
	.box > .box-header > .box-tools .input-group > a.btn{
		flex:1 1 48%;
		min-width:140px;
	}

	/* If you prefer single-column controls on phones, use this instead:
	.box > .box-header > .box-tools .input-group > .form-control,
	.box > .box-header > .box-tools .input-group > .btn,
	.box > .box-header > .box-tools .input-group > a.btn{
		flex:0 0 100%;
		min-width:0;
	}
	*/
}

/* ==========================================================================
    STAT BOXES
   ========================================================================== */

.stat-box{
	border-radius:12px;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(0,0,0,0.08);
}

/* Sections */
.stat-box__header,
.stat-box__body,
.stat-box__footer{
	border:0;
}

/* Title */
.stat-box__header{
	padding:12px;
	text-align:center;
}

.stat-box__title{
	font-weight:800;
	letter-spacing:0.08em;
	text-transform:uppercase;
	line-height:1.2;
}

/* Body + number */
.stat-box__body{
	padding:14px 12px 16px;
}

.stat-box__number{
	font-weight:800;
	font-size:56px;
	line-height:1;
	color:inherit; /* relies on text colour rules below */
}

/* Footer + button */
.stat-box__footer{
	padding:12px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);
}

.stat-box__footer .btn{
	background:rgba(255,255,255,0.16);
	border-color:rgba(255,255,255,0.28);
	color:inherit;
	font-weight:700;
}

.stat-box__footer .btn:hover,
.stat-box__footer .btn:focus{
	background:rgba(255,255,255,0.22);
	border-color:rgba(255,255,255,0.35);
	color:inherit;
}

/* Ensure stat boxes always have vertical spacing (Bootstrap 3 safe) */
.row > [class*="col-"]{
	margin-bottom:15px; /* matches BS3 default gutter feel */
}

/* Optional: a little more breathing room on phones */
@media (max-width: 767px){
	.row > [class*="col-"]{
		margin-bottom:12px;
	}
}
   

/* ==========================================================================
    UI COMPONENTS — QUICK NOTE
   ========================================================================== */

#ticket_quick_note_editor:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}
#ticket_quick_note_editor {
    width: 100%;
    border: 1px solid #ccc;
    padding: 8px;
    min-height: 30px;
    outline: none;
    white-space: pre-wrap;
}
#ticket_quick_note_tag_dropdown {
    display: none;
    list-style: none;
    padding: 10px;
    border: 1px solid rgb(153, 153, 153);
    background: rgb(255, 255, 255);
    z-index: 1000;
    left: 30px;
    width: 200px;
    max-width: 100%;
    max-width: 100%;
    cursor: pointer;
}
#ticket_quick_note_tag_dropdown li { padding: 10px; }
#ticket_quick_note_tag_dropdown li:hover { background-color: #f7fafc; }
#ticket_quick_note_tag_dropdown li.is-active { background: #eef6ff; }


/* ==========================================================================
    UI COMPONENTS — TICKETS (ROWS, DASHBOARD, THREADS)
   ========================================================================== */

/* --- Ticket rows (list view) --- */
.ticket-row {
    padding: 10px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    margin: 10px 5px 0 5px;
    border-radius: 10px;
    line-height: 25px;
}
.ticket-row.ticket-alert {
    background-color: rgba(255, 0, 0, 0.14);
    border: 1px solid rgba(255, 0, 0, 0.35);
    animation: colorPulse 2s ease-in-out infinite;
}

/* Red corner accent (old version for .ticket-row – currently disabled) */
/*
.ticket-row.ticket-alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: #f4f3f7;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
*/

.ticket-row .with-weight { font-weight: 500; }
.ticket-row a { color: #05baad; text-decoration: none !important; }

/* User badge for rows + dashboard */
.ticket-row .user-badge,
.ticket-dashboard .user-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: 3px;
    vertical-align: top;
}
.ticket-row .user-badge i,
.ticket-dashboard .user-badge i { display: block; }
.ticket-row .user-badge label,
.ticket-dashboard .user-badge label {
    margin-top: 4px;
    font-size: 0.8em;
    line-height: 1;
}

/* Ticket dashboard status title (legacy underscore selector) */
.ticket_dashboard .status_title {
    background-color: #d9d9d9;
    color: #013572;
    margin: 0 16px 8px 16px;
    padding: 6px;
    border-radius: 5px;
}

/* Row action trigger + menu */
.ticket-row .ticket-actions-icon { color: #d9d9d9; transition: color 0.2s; }
.ticket-row .ticket-actions-toggle { margin-top: 7px; margin-right: 10px; }
.ticket-row .ticket-actions-toggle:hover,
.ticket-row .ticket-actions-toggle:focus,
.ticket-dashboard .ticket-actions-toggle:hover,
.ticket-dashboard .ticket-actions-toggle:focus {
    color: #d5378b;
    text-decoration: none;
}
.ticket-row .open > .ticket-row-actions .ticket-actions-icon { color: #d5378b; }
.ticket-row .ticket-actions-menu { padding: 5px 0; min-width: 120px; }
.ticket-row .ticket-actions-menu li a {
    padding: 5px 10px;
    color: #333;
    font-size: 12px !important;
}
.ticket-row .ticket-actions-menu li a:hover { background-color: #f5f5f5; }

/* Responsive ticket row layout */
@media (max-width: 767px) {
    .ticket-row {
        flex-direction: column;
        align-items: stretch;
        line-height: 20px;
    }
    .ticket-row > .text-right { text-align: left !important; }
    .ticket-row > div {
        width: 100%;
        margin-bottom: 8px;
        min-width: 0;
    }
    .ticket-row > div:last-child {
        margin-bottom: 0;
        text-align: right;
    }
    .ticket-row .ticket-row-actions {
        position: absolute;
        right: 20px;
        width: auto;
    }
    .ticket-row .ticket-actions-menu { margin-left: -100px; }
}

/* --- Ticket dashboard card --- */
.ticket-dashboard {
    position: relative; /* needed for ::before positioning */
    background: #ffffff;
    color: #013572;
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Red corner accent on dashboard card */
.ticket-dashboard.ticket-alert::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 50px; height: 50px;
    background: #f4f3f7; /* solid corner color */
    border-bottom-left-radius: 160px; /* makes it a soft curve */
    pointer-events: none;
}
/* Icon positioned in dashboard corner */
.ticket-dashboard.ticket-alert .corner-icon {
    position: absolute;
    top: 10px; right: 10px;
    color: #013572;
    font-size: 20px;
    z-index: 1;
    pointer-events: none;
}
/* Corner sits cleanly above border */
.ticket-dashboard.ticket-alert { overflow: hidden; }

.ticket-dashboard p {
    margin-top: 0; margin-bottom: 0; padding: 0; line-height: 1.4;
}
.ticket-dashboard h4 { font-weight: 600; }
.ticket-dashboard a { text-decoration: none !important; }
.ticket-dashboard .btn { margin-top: 12px; width: 100%; }

/* --- Threaded ticket updates (old thread-table layout) --- */
#ticket_updates .thread-table.table-hover > tbody > tr:hover > * {
    background: #EAF0F5 !important;
}
#ticket_updates .thread-table > tbody > tr.thread-row.is-selected > * {
    background: #EAF0F5 !important;
}
#ticket_updates .thread-table > tbody > tr.thread-row.is-selected > *:first-child {
    box-shadow: inset 3px 0 0 0 #013572 !important; /* left border on selected */
}
/* Active (press): same as selected */
#ticket_updates .thread-table > tbody > tr.thread-row:active > * {
    background: #EAF0F5 !important;
}

/* Caret rotation – works via aria-expanded OR explicit .is-open */
#ticket_updates tr.thread-header .caret-icon {
    display: inline-block; /* allow transform on the icon */
    transition: transform 240ms ease;
    transform: rotate(0deg);
}
#ticket_updates tr.thread-header[aria-expanded="true"] .caret-icon,
#ticket_updates tr.thread-header .caret-icon.is-open {
    transform: rotate(90deg); /* points down when open */
}

#ticket_updates .thread-table > tbody > tr.thread-row.is-unread > td {
    font-weight: 600;
}
#ticket_updates tr.thread-header.has-unread > td {
    font-weight: 700; /* bold header */
}
#ticket_updates tr.thread-header.has-unread .group-label::after {
    content: " •";
    color: #d00;
    margin-left: 4px;
    font-weight: 700;
}

/* --- Status changes list --- */
.ticket-status-changes {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 13px;
}
.ticket-status-changes-list {
    overflow: hidden;
    transition: max-height 250ms ease;
}
.ticket-status-changes-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    margin: 6px 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.ticket-status-changes-when { font-size: 11px; color: #6b7280; }
.ticket-status-changes-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ticket-status-changes-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
}
.ticket-status-changes-from { background: #fee2e2; border-color: #fecaca; }
.ticket-status-changes-to { background: #dcfce7; border-color: #bbf7d0; }
.ticket-status-changes-arrow { margin: 0 2px; }
.ticket-status-changes-toggle {
    display: block; width: 100%; margin-top: 6px; padding: 6px;
    cursor: pointer; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #f9fafb; font-size: 12px; text-align: center;
}
.ticket-status-changes-toggle:hover { background: #f3f4f6; }
.ticket-status-changes-empty {
    color: #6b7280; font-size: 13px; padding: 6px 0;
}

/* --- Ticket updates list (flat) --- */
#ticket_updates .ticket_update { cursor: pointer; }
#ticket_updates .ticket_update.is-unread {
    font-weight: 600; background-color: #fff9e6;
}
#ticket_updates .ticket_update.is-selected { background-color: #f7fafc; }
#ticket_updates .ticket_update.is-unread.is-selected { background-color: #f3f4ff; }
#ticket_updates .ticket_update.is-unread td:first-child { border-left: 3px solid #f0ad4e; }
#ticket_updates .update-icon-cell i { font-size: 14px; }

/* --- Updates table layout --- */
#ticket_updates_container { width: 100%; table-layout: fixed; }
#ticket_updates_container .update-icon-cell { width: 32px; white-space: nowrap; }
#ticket_updates_container .update-sender-cell { width: 12px !important; max-width: 12px !important; }
#ticket_updates_container .update-subject-cell { width: auto; }
#ticket_updates_container .update-time-cell { width: 80px; white-space: nowrap; text-align: right; }
#ticket_updates_container .update-email-cell { width: 120px; white-space: nowrap; }
/* Main flexible column */
#ticket_updates_container .update-main-cell { width: auto; }

/* --- Ticket updates list layout (flex rows) --- */
#ticket_updates_container tbody#ticket_updates tr.ticket_update .update-main-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px; margin-bottom: 2px;
}
#ticket_updates_container tbody#ticket_updates tr.ticket_update .update-main-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* Ellipsis for sender + subject */
#ticket_updates_container tbody#ticket_updates tr.ticket_update .update-sender-text,
#ticket_updates_container tbody#ticket_updates tr.ticket_update .update-subject-text {
    min-width: 0; width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tags block on the right should not shrink into nothing */
#ticket_updates_container tbody#ticket_updates tr.ticket_update .update-tags {
    flex-shrink: 0; white-space: nowrap;
}
#ticket_updates_container tbody#ticket_updates tr.ticket_update .update-tags .label {
    display: inline-block; margin-left: 4px; margin-bottom: 1px; vertical-align: middle;
}
#ticket_updates_container tbody#ticket_updates tr.ticket_update .update-tags .label:first-child { margin-left: 0; }


/* ==========================================================================
    ALERTS & LABELS (STRUCTURE)
   ========================================================================== */

.alert {
    padding: 4px 15px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert .icon { margin-right: 10px; }

.label {
    display: inline;
    padding: .3em .7em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .55em;
}
a.label:focus, a.label:hover { text-decoration: none; cursor: pointer; }
.label:empty { display: none; }
.btn .label { position: relative; top: -1px; }


/* ==========================================================================
    DROPDOWN MENUS (STRUCTURE)
   ========================================================================== */

.dropdown { position: relative; }
.dropdown-toggle:focus { outline: 0; }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu.pull-right { right: 0; left: auto; }
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; }

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    white-space: nowrap;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:focus,
.dropdown-menu > .disabled > a:hover {
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
    background-image: none;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}
.open > .dropdown-menu { display: block; }
.open > a { outline: 0; }
.pull-right > .dropdown-menu { right: 0; left: auto; }

.caret {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}


/* ==========================================================================
   SELECT2 — MATCH FORM-CONTROL LOOK & FEEL
   - Matches your .form-control (height, padding, radius, bg vars, focus ring)
   - Covers single + multiple, dropdown, placeholder, disabled
   ========================================================================== */

/* Base container width */
.select2-container { width: 100% !important; }

/* Shared selection shell (single + multiple) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
    display:block;
    width:100%;
    min-height:34px;            /* match .form-control height */
    padding:6px 12px;           /* match .form-control padding */
    font-size:14px;
    line-height:1.42857143;
    background-image:none;
    border:0;
    border-radius:10px;         /* match .form-control radius */
    background-color:var(--field-background);
    color:#555;
    font-weight:500;
    box-shadow:none;
}

/* Single: align text & arrow within the padded shell */
.select2-container--default .select2-selection--single{
    padding-right:34px;         /* space for arrow */
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    padding:0;                  /* we already padded the shell */
    line-height:22px;           /* keeps it vertically tidy inside 34px */
    color:#555;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:#999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:100%;
    right:10px;
    top:0;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
    margin-right:8px;
}

/* Multiple: let choices sit nicely inside the padded shell */
.select2-container--default .select2-selection--multiple{
    padding:4px 8px;            /* slightly tighter so chips fit */
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
    padding:0;
    margin:0;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field{
    margin:0;
    padding:4px 4px;
    font-size:14px;
    line-height:1.42857143;
    height:24px;
    color:#555;
}

/* Multiple choice "chips" */
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background:#ffffff;
    color:#111;
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:2px 8px;
    margin:3px 4px 0 0;
    box-shadow:none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color:#777;
    margin-right:6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    color:#111;
}

/* Active/focus state to match .form-control:focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple{
    background-color:var(--field-background-active);
    outline:0;
    -webkit-box-shadow:0 0 0 2px rgba(0, 189, 176, 0.18), 0 1px 2px rgba(2, 52, 113, 0.12);
    box-shadow:0 0 0 2px rgba(0, 189, 176, 0.18), 0 1px 2px rgba(2, 52, 113, 0.12);
}

/* Dropdown panel (match your modal/panel feel: rounded + soft border, no harsh shadow) */
.select2-container--default .select2-dropdown{
    border:1px solid #eee;
    border-radius:10px;
    box-shadow:none;
    overflow:hidden;
}
.select2-container--default .select2-results__option{
    padding:8px 12px;
    font-size:14px;
}

/* Hover/highlight (keep readable; aligns with your dropdown hover patterns) */
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color:#f5f5f5;
    color:#262626;
}
.select2-container--default .select2-results__option[aria-selected="true"]{
    background-color:#e9e9e9;
    color:#262626;
}

/* Disabled matches .form-control disabled look */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple{
    background-color:#eee;
    cursor:not-allowed;
    opacity:1;
}
.select2-container--default.select2-container--disabled .select2-selection__rendered{
    color:#777;
}

/* Ensure select2 inside input-groups sits nicely */
.input-group .select2-container--default .select2-selection--single,
.input-group .select2-container--default .select2-selection--multiple{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.input-group .input-group-addon + .select2-container--default .select2-selection--single,
.input-group .input-group-addon + .select2-container--default .select2-selection--multiple{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}


/* ==========================================================================
    FORMS (STRUCTURE)
   ========================================================================== */

button, input, optgroup, select, textarea {
    margin: 0; font: inherit; color: inherit;
}
button {
    overflow: visible;
}
button, select {
    text-transform: none;
}
button, html input[type=button], input[type=reset], input[type=submit] {
    cursor: pointer;
}
button[disabled], html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0;
}
input {
    line-height: normal;
}
input[type=checkbox], input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto;
}
input[type=search] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}
textarea {
    overflow: auto;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500;
}
input[type=checkbox],
input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px\9;
    line-height: normal;
}
input[type=file] {
    display: block;
}
input[type=range] {
    display: block;
    width: 100%;
}
select[multiple],
select[size] {
    height: auto;
}
input[type=file]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    background-image: none;
    border: 0;
    border-radius: 10px;
}
.form-control:focus {
    border-color: rgba(0, 189, 176, 0.55);
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(0, 189, 176, 0.18), 0 1px 2px rgba(2, 52, 113, 0.12);
    box-shadow: 0 0 0 2px rgba(0, 189, 176, 0.18), 0 1px 2px rgba(2, 52, 113, 0.12);
}
.form-control::-moz-placeholder {
    opacity: 1;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: not-allowed;
}
textarea.form-control {
    height: auto;
}
.form-group {
    margin-bottom: 15px;
}
.checkbox, .radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px\9;
    margin-left: -20px;
}
.checkbox + .checkbox, .radio + .radio {
    margin-top: -5px;
}
.checkbox-inline, .radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}
.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline {
    margin-top: 0;
    margin-left: 10px;
}
fieldset[disabled] input[type=checkbox],
fieldset[disabled] input[type=radio],
input[type=checkbox].disabled,
input[type=checkbox][disabled],
input[type=radio].disabled,
input[type=radio][disabled] {
    cursor: not-allowed;
}
.checkbox-inline.disabled,
.radio-inline.disabled,
fieldset[disabled] .checkbox-inline,
fieldset[disabled] .radio-inline {
    cursor: not-allowed;
}
.checkbox.disabled label,
.radio.disabled label,
fieldset[disabled] .checkbox label,
fieldset[disabled] .radio label {
    cursor: not-allowed;
}


/* ==========================================================================
    BUTTONS & BUTTON GROUPS (STRUCTURE)
   ========================================================================== */

.btn, a.btn {
    display: inline-block;
    padding: 7px 15px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 999px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: 1px solid transparent;
    border-width: 1px;
    text-decoration: none;
    min-width: 27px;
    min-height: 27px;
}
.btn:not(:last-child) { margin-right: 0.5rem; }

.btn.disabled, .btn[disabled] {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
a.btn.disabled, a.btn.disabled { pointer-events: none; }

.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 5px; }

input[type=button].btn-block,
input[type=reset].btn-block,
input[type=submit].btn-block { width: 100%; }

/* --- Button groups --- */
.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-group-vertical > .btn,
.btn-group > .btn { position: relative; float: left; }

.btn-group-vertical > .btn.active,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:hover,
.btn-group > .btn.active,
.btn-group > .btn:active,
.btn-group > .btn:focus,
.btn-group > .btn:hover { z-index: 2; }

.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group { margin-left: -1px; }

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

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > .btn-group { float: left; }
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; }
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle { outline: 0; }
.btn-group > .btn + .dropdown-toggle { padding-right: 8px; padding-left: 8px; }
.btn-group > .btn-lg + .dropdown-toggle { padding-right: 12px; padding-left: 12px; }

.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn .caret { margin-left: 0; }
.btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; }

[data-toggle=buttons] > .btn input[type=checkbox],
[data-toggle=buttons] > .btn input[type=radio],
[data-toggle=buttons] > .btn-group > .btn input[type=checkbox],
[data-toggle=buttons] > .btn-group > .btn input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}


/* ==========================================================================
    INPUT GROUPS (STRUCTURE)
   ========================================================================== */

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.input-group[class*=col-] {
    float: none; padding-right: 0; padding-left: 0;
}
.input-group .form-control {
    position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0;
}
.input-group .input-group-addon {
    border-radius: 0;
    border-color: #d2d6de;
}

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
    height: 46px; padding: 10px 16px; font-size: 18px;
    line-height: 1.3333333; border-radius: 6px;
}
select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
    height: 46px; line-height: 46px;
}
select[multiple].input-group-lg > .form-control,
select[multiple].input-group-lg > .input-group-addon,
select[multiple].input-group-lg > .input-group-btn > .btn,
textarea.input-group-lg > .form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn { height: auto; }

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px;
}
select.input-group-sm > .form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
    height: 30px; line-height: 30px;
}
select[multiple].input-group-sm > .form-control,
select[multiple].input-group-sm > .input-group-addon,
select[multiple].input-group-sm > .input-group-btn > .btn,
textarea.input-group-sm > .form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn { height: auto; }

.input-group .form-control,
.input-group-addon,
.input-group-btn { display: table-cell; }

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

.input-group-addon,
.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.input-group-addon {
    padding: 6px 12px; font-size: 14px; font-weight: 400;
    line-height: 1; text-align: center; border: 1px solid #ccc; border-radius: 4px;
}
.input-group-addon input[type=checkbox],
.input-group-addon input[type=radio] { margin-top: 0; }

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

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

.input-group-btn {
    position: relative; font-size: 0; white-space: nowrap;
}
.input-group-btn > .btn { position: relative; }
.input-group-btn > .btn + .btn { margin-left: -1px; }
.input-group-btn > .btn:active,
.input-group-btn > .btn:focus,
.input-group-btn > .btn:hover { z-index: 2; }
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group { margin-right: -1px; }
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group {
    z-index: 2; margin-left: -1px;
}


/* ==========================================================================
    TABLES (STRUCTURE)
   ========================================================================== */

.table-responsive{
	width:100%;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	margin-bottom:15px;
}

/* Base tables */
table{
	width:100%;
	min-width:100%;
	max-width:100%;
	border-collapse:separate;
	border-spacing:0;
	table-layout:auto;
	margin-bottom:10px;
	display:table;
}

/* Fixed tables (optional) */
table.table-fixed{
	width:100%;
	table-layout:fixed !important;
}

/* Allow fixed tables to scroll on small screens */
.table-responsive > table.table-fixed{
	min-width:0;
}

/* If tbody is empty, keep a minimum visual height */
table tbody:empty::before{
	content:"";
	display:table-row;
	height:42px;
}

/* Header rounding */
thead th:first-child{ border-top-left-radius:10px; }
thead th:last-child{  border-top-right-radius:10px; }

/* Header styling */
thead th{
	background: var(--table-header-bg);
	color: var(--table-header-text);
	float:none !important;
	display:table-cell !important;
	font-size:0.85rem;
	padding:0.75rem 1rem;
	text-align:left;
	white-space:nowrap;
}

/* Non-fixed tables: let browser decide widths */
table:not(.table-fixed) thead th{
	width:auto !important;
}

/* Body cells */
tbody td{
	padding:10px;
	border-bottom:1px solid #e2e8f0;
	vertical-align:middle;
}

/* Hover */
table:not(.no-hover) tbody tr:hover td{
	background: var(--table-row-bg-hover);
}

/* Fixed tables: keep content tidy */
table.table-fixed th,
table.table-fixed td{
	box-sizing:border-box;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* Actions column: don't allow overflow to create phantom scroll width (fixed tables only) */
table.table-fixed td:last-child{
	overflow:hidden;
	text-overflow:clip;
	white-space:nowrap;
}

/* Optional wrap cell in fixed tables */
table.table-fixed td.td-wrap{
	white-space:normal;
	overflow:visible;
	text-overflow:clip;
}

/* Fallback (no :has support): add .has-actions to table via JS if needed */
table.has-actions thead th:last-child{
	text-align:right;
}
table.has-actions tbody td:last-child{
	width:1%;
	white-space:nowrap;
	text-align:right;
}
table.has-actions tbody td:last-child .btn{
	padding:5px;
	font-size:10px;
}

/* Only apply when the last cell contains buttons/btn links (modern browsers) */
@supports selector(td:has(.btn)){
	table tbody td:last-child:has(.btn),
	table tbody td:last-child:has(button),
	table tbody td:last-child:has(a.btn){
		width:1%;
		white-space:nowrap;
		text-align:right;
	}

	/* Right-align the header only when actions exist in the last column */
	table:has(tbody td:last-child .btn) thead th:last-child,
	table:has(tbody td:last-child button) thead th:last-child,
	table:has(tbody td:last-child a.btn) thead th:last-child{
		text-align:right;
	}

	table tbody td:last-child:has(.btn) .btn,
	table tbody td:last-child:has(a.btn) .btn{
		padding:5px;
		font-size:10px;
	}
}

/* Loading row: keep it looking neat (doesn't fix column-count by itself) */
tbody td[colspan]{
	text-align:center;
}


/* ==========================================================================
    MODALS & OVERLAYS
   ========================================================================== */

.modal { display: none; }
.modal > .modal-dialog {
    position: fixed;
    top: 60px; left: 50%;
    transform: translateX(-50%);
    max-width: 1000px; width: 80%;
    max-height: 90vh; overflow-y: auto;
}
@media (max-width: 768px) { 
    .modal > .modal-dialog {
        top: 120px !important;
    }
}

.modal-content {
    display: flex; flex-direction: column;
    max-height: 90vh;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    outline: 0;
}
.modal-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    cursor: move;
    user-select: none;
}
.modal-header .modal-title { flex: 1; margin: 0; line-height: 1; }
.modal-header > button {
    flex: none;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}
.modal-header > button:hover { color: #00BDB0; }
.modal-body {
    position: relative; z-index: 1;
    overflow-y: auto; overflow-x: hidden;
    padding: 15px; flex: 1 1 auto;
}


/* ==========================================================================
    BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
    font-size: 12px;
    margin: 5px 0 20px 0;
    list-style: none;
    padding: 7px 10px;
    background-color: #d2d6de;
    color: #444;
    border-radius: 2px;
}
.breadcrumbs li { display: inline; }
.breadcrumbs li:not(:last-child)::after {
    content: ">";
    margin: 0 5px;
    color: #999;
}
.breadcrumbs a { text-decoration: none; color: #333; }
.breadcrumbs a:hover { text-decoration: none; }


/* ==========================================================================
    LOADING / SPINNER
   ========================================================================== */

.loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
}
.loading-overlay .loading-spinner {
    text-align: center; color: #fff; font-family: Arial, sans-serif;
}
.loading-overlay .loading-spinner .spinner {
    width: 50px; height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}


/* ==========================================================================
    CLEARFIX & UTILITIES
   ========================================================================== */

.btn-group-vertical > .btn-group:after,
.btn-group-vertical > .btn-group:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
    display: table; content: " ";
}
.clearfix:after,
.container-fluid:after,
.container:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after { clear: both; }

.pull-right{ float:right !important; }
@supports (display:flex){
	/* only when the element is treated as a flex item */
	.nav-tabs-custom > .nav-tabs > .pull-right{
		float:none !important;
		margin-left:auto !important;
	}
}
.pull-left { float: left !important; }

@media (max-width: 767px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }


/* ==========================================================================
    Autocomplete
   ========================================================================== */
.str-autocomplete{
	position:fixed;
	z-index:999999;
	background:#fff;
	border:1px solid #ddd;
	border-radius:8px;
	box-shadow:0 4px 12px rgba(0,0,0,0.1);
	max-height:300px;
	overflow-y:auto;
	font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;
	font-size:14px;
	padding:4px 0;
	min-width:300px;
	width:auto !important;
}
.str-autocomplete-item{
	padding:10px 14px;
	color:#333;
	cursor:pointer;
	border-radius:4px;
	transition:background .15s ease;
}
.str-autocomplete-item:hover{ background:#f5f5f7; color:#000; }
.str-autocomplete-item.disabled{
	color:#999;
	cursor:default;
	pointer-events:none;
	background:#fafafa;
	font-style:italic;
}


/* ==========================================================================
    THEME UTILITIES (LABELS/ALERTS COLORS & COMMON)
   ========================================================================== */

.label { color: #ffffff; }
a.label:focus, a.label:hover { color: #ffffff; }

.label-default { background-color: #777; }
.label-default[href]:focus, .label-default[href]:hover { background-color: #5e5e5e; }

.label-primary { background-color: var(--color-primary); }
.label-primary[href]:focus, .label-primary[href]:hover { background-color: #286090; }

.label-success { background-color: #5cb85c; }
.label-success[href]:focus, .label-success[href]:hover { background-color: #449d44; }

.label-info { background-color: #5bc0de; }
.label-info[href]:focus, .label-info[href]:hover { background-color: #31b0d5; }

.label-warning { background-color: #f0ad4e; }
.label-warning[href]:focus, .label-warning[href]:hover { background-color: #ec971f; }

.label-danger { background-color: #d9534f; }
.label-danger[href]:focus, .label-danger[href]:hover { background-color: #c9302c; }

.alert a { color: #ffffff; text-decoration: underline; }
.alert-success { background-color: #00a65a; border-color: #008d4c; color: #ffffff; }
.alert-error { background-color: #dd4b39; border-color: #d73925; color: #ffffff; }
.alert-warning { background-color: #f39c12; border-color: #e08e0b; color: #ffffff; }
.alert-info { background-color: #013572; border-color: #00acd6; color: #ffffff; }

/* ==========================================================================
   BG helpers: explicit text colours per class (no auto contrast)
   ========================================================================== */

/* Make all descendants inherit the bg-* text color */
[class^="bg-"], [class*=" bg-"]{
  color:inherit; /* does nothing by itself, keeps defaults for unknown bg-* */
}
[class^="bg-"] *, [class*=" bg-"] *{
  color:inherit !important;
}

/* Disabled state */
[class^="bg-"].disabled, [class*=" bg-"].disabled{
  opacity:.65;
}

/* ==========================================================================
   Text classes: explicit text colour
   ========================================================================== */
.text-red       { color:#dd4b39 !important; }
.text-green    { color:#00a65a !important; }
.text-blue      { color:#0073b7 !important; }
.text-light-blue{ color:#3c8dbc !important; }
.text-dark-blue { color:#023471 !important; }
.text-navy      { color:#001f3f !important; }
.text-yellow    { color:#f39c12 !important; }
.text-aqua      { color:#00ffff !important; }
.text-teal      { color:#39cccc !important; }
.text-lime      { color:#01ff70 !important; }
.text-grey      { color:#d2d6de !important; }
.text-purple    { color:#605ca8 !important; }
.text-olive     { color:#3d9970 !important; }
.text-orange    { color:#ff851b !important; }
.text-cyan      { color:#139c9c !important; }
.text-maroon    { color:#85144b !important; }
.text-black     { color:#111 !important; }
.text-gray-dark { color:#222 !important; }
.text-fuchsia   { color:#f012be !important; }
.text-indigo    { color:#3f51b5 !important; }
.text-amber     { color:#ffc107 !important; }
   
/* ==========================================================================
   BG classes: background + explicit text colour
   ========================================================================== */

.bg-red        { background-color:#dd4b39 !important; color:#fff !important; }
.bg-yellow     { background-color:#f39c12 !important; color:#fff !important; }
.bg-aqua       { background-color:#00ffff !important; color:#111 !important; }
.bg-teal       { background-color:#39cccc !important; color:#111 !important; }
.bg-lime       { background-color:#01ff70 !important; color:#111 !important; }
.bg-grey       { background-color:#d2d6de !important; color:#111 !important; }
.bg-blue       { background-color:#0073b7 !important; color:#fff !important; }
.bg-light-blue { background-color:#3c8dbc !important; color:#fff !important; }
.bg-dark-blue  { background-color:#023471 !important; color:#fff !important; }
.bg-navy       { background-color:#001f3f !important; color:#fff !important; }
.bg-purple     { background-color:#605ca8 !important; color:#fff !important; }
.bg-green      { background-color:#00a65a !important; color:#fff !important; }
.bg-olive      { background-color:#3d9970 !important; color:#fff !important; }
.bg-orange     { background-color:#ff851b !important; color:#111 !important; }
.bg-cyan       { background-color:#139c9c !important; color:#fff !important; }
.bg-maroon     { background-color:#85144b !important; color:#fff !important; }
.bg-black      { background-color:#111 !important; color:#fff !important; }
.bg-gray-dark  { background-color:#222 !important; color:#fff !important; }
.bg-fuchsia    { background-color:#f012be !important; color:#fff !important; }
.bg-indigo { background-color:#3f51b5 !important; color:#fff !important; }
.bg-amber  { background-color:#ffc107 !important; color:#111 !important; }

/* ==========================================================================
   AdminLTE: only override .box-title when the header has a bg-* class
   ========================================================================== */

.box-header[class^="bg-"] .box-title,
.box-header[class^="bg-"] .box-tools,
.box-header[class^="bg-"] .box-tools *,

.box-header[class*=" bg-"] .box-title,
.box-header[class*=" bg-"] .box-tools,
.box-header[class*=" bg-"] .box-tools *{
  color:inherit !important;
}

.text-muted { color: #777; }


/* ==========================================================================
    DATE/TIME PICKER (COMPONENT)
   ========================================================================== */

.hasDatepicker:focus {
    outline: none;
    border-color: #2b67ff;
    box-shadow: 0 0 0 2px rgba(43,103,255,.25);
}
.hasDatepicker:focus-visible { outline: none; }

.dtp-panel {
    background: #fff;
    border: 1px solid #e8e9ee;
    border-radius: 14px;
    padding: 12px;
    width: 300px;
    box-shadow: 0 12px 30px rgba(16,24,40,.12);
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 9999;
    display: none;
}
.dtp-panel.open { display: block; }

.dtp-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.dtp-month { font-weight: 600; letter-spacing: .2px; }

.dtp-btn {
    border: none; background: #f4f6fa; border-radius: 8px;
    padding: 6px 10px; cursor: pointer;
    transition: background .15s ease, transform .06s ease;
}
.dtp-btn:hover { background: #e9ecf5; }
.dtp-btn:active { transform: translateY(1px); }

.dtp-dow {
    color: #8a93a1; font-size: 12px; font-weight: 600;
    text-align: center; text-transform: uppercase; padding: 4px 0 6px;
}

.dtp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }

.dtp-day {
    border: none; background: transparent; color: #1f2328;
    padding: 8px 0; border-radius: 10px; cursor: pointer; line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.dtp-day:hover { background: #f4f7ff; }
.dtp-day.muted { color: #b3bac6; }
.dtp-day.today { box-shadow: inset 0 0 0 1px #9bb9ff; border-radius: 10px; }
.dtp-day.selected {
    background: #2b67ff; color: #fff; box-shadow: 0 2px 6px rgba(43,103,255,.3);
}

.dtp-footer { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }

.dtp-timebox {
    display: flex; align-items: center; gap: .4rem; justify-content: center;
}
.dtp-time-part { display: flex; flex-direction: column; align-items: center; }
.dtp-time-part input {
    width: 2.5em; border: 1px solid #e8e9ee; border-radius: 6px;
    padding: 4px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px;
}
.dtp-time-part button {
    border: none; background: #f4f6fa; cursor: pointer; font-size: 12px; line-height: 1;
    width: 100%; padding: 2px 0; border-radius: 4px; transition: background .15s ease;
}
.dtp-time-part button:hover { background: #e9ecf5; }

.dtp-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.dtp-actions .dtp-btn { background: #fff; border: 1px solid #e8e9ee; }
.dtp-actions .dtp-btn.primary {
    background: #2b67ff; border-color: #2b67ff; color: #fff;
    box-shadow: 0 6px 14px rgba(43,103,255,.25);
}
.dtp-actions .dtp-btn.primary:hover { filter: brightness(1.05); }


/* ==========================================================================
    ACCORDION (COMPONENT)
   ========================================================================== */

.accordion-item {
    background: #ffffff; border-radius: 12px;
    border: 1px solid #d6dde5; margin-bottom: 12px; overflow: hidden;
}
.accordion-title {
    width: 100%; background: #ffffff; border: none; outline: none;
    text-align: left; padding: 16px 20px; font-size: 14px; font-weight: 600;
    color: #003566; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.accordion-title::after { content: "+"; font-weight: 700; }
.accordion-item.open .accordion-title::after { content: "-"; }
.accordion-content {
    padding: 0 20px 20px 20px; border-radius: 12px; display: none;
}
.accordion-item.open .accordion-content {
    max-height: 1000px; padding: 0 20px 16px 20px;
}
.accordion-content p { margin: 14px 0 0; line-height: 1.5; }
@media (max-width: 600px) {
    .accordion-title { font-size: 16px; padding: 14px 16px; }
    .accordion-content { padding: 0 16px 16px 16px; }
}


/* ==========================================================================
    CHIPS (COMPONENT)
   ========================================================================== */

.k-chip-grid {
	display:flex;
    gap:6px;
    max-width:100%;
	grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.k-chip {
	width:auto;
    min-width:0;
    display:flex;
    justify-content:center;
    text-align:center;
	padding:6px 10px;
    line-height:1.2;
    border:1px solid #ddd;
    border-radius:6px;
	box-sizing:border-box;
    cursor:pointer;
    user-select:none;
    background:#fff;
    font-size:12px;
	overflow:hidden;
    text-overflow:ellipsis;
	background:var(--chip-off-bg, #fff);
	color:var(--chip-off-color, inherit);
	border-color:var(--chip-off-border, #ddd);
    align-items:center;
    white-space:normal;
}

/* Active (on) */
.k-chip.is-active{
	border-color:var(--chip-on-border, #3f81a3);
	background:var(--chip-on-bg, #3f81a3);
	color:var(--chip-on-color, #fff);
    font-weight: 700;
}

.k-chip.k-chip-block{
	flex:0 0 100%;
	width:100%;
}

.k-chip.k-chip-grow {
    flex:1 1 0;
    width:auto;
}

@media (max-width: 991px) {
    .k-chip-grid {
        gap:5px;
    }
}
@media (max-width: 420px) {
    .k-chip {
        padding:5px 0;
        font-size:12px;
    }
}


/* ==========================================================================
    FLOW WIZARD (COMPONENT)
   ========================================================================== */

.flow-wizard .nav-tabs>li>a { pointer-events: none; cursor: default; }
.flow-wizard .flow-step { display: none; }
.flow-wizard .flow-step.active { display: block; }
.flow-wizard .nav-tabs>li .step-icon:before { content: ''; }
.flow-wizard .nav-tabs>li.done .step-icon:before { content: '✓'; }
.flow-wizard .nav-tabs>li.active .step-icon:before { content: '•'; }


/* ==========================================================================
    THEME — BASE LINK COLORS
   ========================================================================== */

a { color: var(--link-color); }
a:focus, a:hover { color: var(--link-color-hover); }


/* ==========================================================================
    THEME — HEADER COLORS
   ========================================================================== */

.main-header { background-color: var(--header-bg); }
.main-header .navbar .nav > li > a,
.main-header .navbar .sidebar-toggle { color: #000000; }
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav > li > a:active,
.main-header .navbar .sidebar-toggle:hover {
    color: var(--btn-text);
    background-color: var(--btn-bg);
}


/* ==========================================================================
    THEME — SIDEBAR COLORS
   ========================================================================== */

.sidebar { background-color: var(--sidebar-bg); }
.sidebar a { color: #120f2e; }
.sidebar a:hover { text-decoration: none; color: #ffffff; }
.sidebar-menu > li.header { color: #4b646f; }

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
    color: var(--sidebar-on-text);
    background: var(--sidebar-on-bg);
    opacity: 0.8;
}

.sidebar-menu .treeview-menu > li > a { color: #000000; }
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li > a:focus,
.sidebar-menu .treeview-menu > li.active > a {
    color: var(--sidebar-sub-on-text);
    background-color: var(--sidebar-sub-on-bg);
    text-decoration: none;
    border-radius: 7px;
}
.sidebar-menu .treeview-menu > li > a:hover .fa { color: inherit; }


/* ==========================================================================
    THEME — BUTTON COLORS
   ========================================================================== */

.btn, a.btn {
    background-color: var(--btn-bg);
    color: var(--btn-text);
}
.btn:hover, .btn:active, .btn.hover {
    background-color: var(--btn-on-bg);
    color: var(--btn-on-text);
}


/* ==========================================================================
    THEME — DROPDOWN COLORS
   ========================================================================== */

.dropdown-menu {
    box-shadow: none;
    border-color: #eee;
    background-color: #ffffff;
}
.dropdown-menu > li > a { color: #777; }
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
.dropdown-menu > li > a:hover { background-color: #e1e3e9; color: #333; }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
    color: #ffffff;
    text-decoration: none;
    outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:focus,
.dropdown-menu > .disabled > a:hover { color: #777; }
.dropdown-menu .divider { background-color: #e5e5e5; }


/* ==========================================================================
    THEME — FORM COLORS
   ========================================================================== */

.form-control {
    color: #555;
    background-color: var(--field-background);
    font-weight: 500;
}
.form-control:active,
.form-control:focus,
.form-control:focus-visible { background-color: var(--field-background-active); }

.form-control::-moz-placeholder { color: #999; }
.form-control:-ms-input-placeholder { color: #999; }
.form-control::-webkit-input-placeholder { color: #999; }

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #eee; }

.input-group .input-group-addon {
    background-color: #ffffff;
    color: #555;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid #eee;
}

/* ==========================================================================
   INPUT GROUP ADDON — FIX LEFT/RIGHT ROUNDED CORNERS
   - Ensures left addon: left rounded, right square
   - Ensures right addon: right rounded, left square
   ========================================================================== */

.input-group .input-group-addon{
    border-radius:0; /* reset any previous theme rounding */
}

/* Addon on the LEFT */
.input-group .input-group-addon:first-child{
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    border-right:0; /* match your existing structure rule */
}

/* Addon on the RIGHT */
.input-group .input-group-addon:last-child{
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left:0; /* match your existing structure rule */
}


/* ==========================================================================
    THEME — COMPONENT COLORS
   ========================================================================== */

.content-wrapper { background-color: #ecf0f5; }
.small-box > .small-box-footer { color: #ffffff; }
.small-box > .small-box-footer:hover { color: #ffffff; }
.small-box p > small { color: #f9f9f9; }
.small-box:hover { color: #f9f9f9; }

.info-box { background: #f9f9f9; }
.box {
    background: #ffffff;
    overflow: hidden;
    padding: 30px;
}
.box-header {
    color: #444;
}
.box .overlay .fa-refresh { color: #555; }


/* ==========================================================================
    THEME — NAV COLORS + NAV TABS CUSTOM
   ========================================================================== */

.nav > li > a:focus, .nav > li > a:hover { background-color: #eee; }
.nav > li.disabled > a { color: #777; }
.nav > li.disabled > a:focus, .nav > li.disabled > a:hover { color: #777; background-color: transparent; }
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { background-color: #eee; }
.nav .nav-divider { background-color: #e5e5e5; }

/* Nav tabs (lozenge / pill style) */
.nav-tabs-custom {
    border-radius: 10px;
    margin-bottom: 20px;
}
.nav-tabs-custom > .nav-tabs {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
    padding: 15px 8px; background: var(--tab-background); border-radius: 10px; border: 0;
}
.nav-tabs-custom > .nav-tabs > li {
    float: none; margin: 0; border: 0;
}
.nav-tabs-custom > .nav-tabs > li > a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: 0; border-radius: 10px;
    background: var(--tab-color); color: var(--tab-text-color);
    text-decoration: none; line-height: 1;
}
.nav-tabs-custom > .nav-tabs > li > a > .fa {
    font-size: 16px; line-height: 1;
}
.nav-tabs-custom > .nav-tabs > li > a:hover,
.nav-tabs-custom > .nav-tabs > li > a:focus,
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover,
.nav-tabs-custom > .nav-tabs > li.active > a:focus {
    background: var(--active-tab-color);
    color: var(--active-tab-text-color);
    border: 0;
}
.nav-tabs-custom .dropdown.open > a,
.nav-tabs-custom .dropdown.open > a:focus,
.nav-tabs-custom .dropdown.open > a:active {
    background: rgba(11, 61, 145, 0.08);
    color: #0b3d91;
}


/* ==========================================================================
    RESPONSIVE — HEADER / SIDEBAR / MISC
   ========================================================================== */

@media (max-width: 767px) {
    .small-box { text-align: center; }
    .small-box .icon { display: none; }
    .small-box p { font-size: 12px; }

    .main-sidebar {
        padding-top: 100px;
        -webkit-transform: translate(-230px, 0);
        -ms-transform: translate(-230px, 0);
        -o-transform: translate(-230px, 0);
        transform: translate(-230px, 0);
    }
    .sidebar-open .main-sidebar {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .main-header { position: relative; }
    .main-header .logo, .main-header .navbar { width: 100%; float: none; }

    .main-header .navbar {
        margin: 0; text-align: center; min-height: auto;
    }
    .main-header .navbar-custom-menu { float: right; }
    .main-header .navbar-custom-menu .nav {
        float: none !important; display: inline-block !important;
    }
    .main-header .navbar-custom-menu .nav > li {
        float: none !important; display: inline-block !important;
    }

    .main-header .logo {
        float: none !important; display: block; width: auto !important;
        margin: 0 auto; text-align: center;
    }

    .main-header .sidebar-toggle {
        float: none !important; position: absolute; left: 0; top: 35%;
        transform: translateY(-50%); margin: 0; display: inline-block;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type=date].form-control,
    input[type=time].form-control,
    input[type=datetime-local].form-control,
    input[type=month].form-control { line-height: 34px; }

    .input-group-sm input[type=date],
    .input-group-sm input[type=time],
    .input-group-sm input[type=datetime-local],
    .input-group-sm input[type=month] { line-height: 30px; }

    .input-group-lg input[type=date],
    .input-group-lg input[type=time],
    .input-group-lg input[type=datetime-local],
    .input-group-lg input[type=month] { line-height: 46px; }
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu { right: 0; left: auto; }
    .navbar-right .dropdown-menu-left { right: auto; left: 0; }
}

/* Disable transitions on key layout elements to avoid jank */
body.content-wrapper,
body.main-footer,
body.main-sidebar,
body.main-header .navbar,
body.main-header .logo {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

/* Small-screen dropdown link theming (header) */
@media (max-width: 767px) {
    .main-header .dropdown-menu li a { color: #ffffff; }
    .main-header .dropdown-menu li a:hover { background: #d73925; }
}


/* ==========================================================================
    LAYOUT VARIANT — TOP NAV (layout-top-nav)
   ========================================================================== */
/* Requires: <body class="layout-top-nav"> */

body.layout-top-nav{
	padding-top:50px;
}

body.layout-top-nav .main-header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1030;
	display:block !important;
	visibility:visible !important;
	opacity:1 !important;
	background:transparent;
}

body.layout-top-nav .main-header .navbar{
	min-height:50px;
	margin:0;
	border:0;
	border-radius:0;
	position:relative;
	background:linear-gradient(90deg,var(--topnav-bg-start) 0%,var(--topnav-bg-end) 100%) !important;
	border:none;
}

body.layout-top-nav .main-header .navbar > .container{
	width:100% !important;
	max-width:none !important;
	margin-left:0 !important;
	margin-right:0 !important;
	display:flex !important;
	align-items:center;
	flex-wrap:nowrap;
}

/* kill clearfix pseudo elements */
body.layout-top-nav .main-header .navbar > .container:before,
body.layout-top-nav .main-header .navbar > .container:after{
	content:none !important;
	display:none !important;
}

/* remove sidebar for top-nav layouts */
body.layout-top-nav .main-sidebar,
body.layout-top-nav .sidebar,
body.layout-top-nav .left-side,
body.layout-top-nav .sidebar-toggle{
	display:none !important;
}

body.layout-top-nav .wrapper,
body.layout-top-nav .content-wrapper,
body.layout-top-nav .main-footer,
body.layout-top-nav .right-side,
body.layout-top-nav .main-header{
	margin-left:0 !important;
}

body.layout-top-nav .content-wrapper{
	margin-left:0 !important;
}

/* brand */
body.layout-top-nav .main-header .navbar-header{
	margin-left:0 !important;
	padding-left:0 !important;
	display:flex;
	align-items:center;
	flex:0 0 auto;
	float:none !important;
}

body.layout-top-nav .main-header .navbar-brand{
	margin:0 !important;
	padding:10px 15px !important;
	padding-left:20px !important;
	height:50px;
	display:flex;
	align-items:center;
	line-height:50px;
	color:var(--topnav-link) !important;
}

body.layout-top-nav .main-header .navbar-brand img{
	height:26px !important;
	width:auto !important;
	max-height:26px !important;
	max-width:220px;
	display:block;
	object-fit:contain;
}

body.layout-top-nav .main-header .navbar-brand img.large{
	display:block !important;
}

body.layout-top-nav .main-header .navbar-brand img.small{
	display:none !important;
}

@media (max-width:494px){
	body.layout-top-nav .main-header .navbar-brand img.large{
		display:none !important;
	}

	body.layout-top-nav .main-header .navbar-brand img.small{
		display:block !important;
	}
}

/* left / middle / right alignment */
body.layout-top-nav .main-header .navbar-header,
body.layout-top-nav .main-header .navbar-collapse,
body.layout-top-nav .main-header .navbar-custom-menu{
	float:none !important;
}

body.layout-top-nav .main-header .navbar-collapse{
	flex:1 1 auto;
	width:auto !important;
}

body.layout-top-nav .main-header .navbar-collapse .navbar-nav{
	float:none !important;
	margin:0 !important;
}

body.layout-top-nav .main-header .navbar-custom-menu{
	flex:0 0 auto;
	margin-left:auto !important;
	padding-right:0 !important;
}

body.layout-top-nav .main-header .navbar-custom-menu .navbar-nav{
	display:flex !important;
	align-items:center;
	margin:0 !important;
	float:none !important;
}

body.layout-top-nav .main-header .navbar-custom-menu .navbar-nav > li > a{
	padding-left:12px;
	padding-right:12px;
}

/* nav colours */
body.layout-top-nav .main-header .navbar .nav > li > a,
body.layout-top-nav .main-header .navbar .navbar-toggle,
body.layout-top-nav .main-header .navbar .navbar-brand{
	color:var(--topnav-link) !important;
}

body.layout-top-nav .main-header .navbar .nav > li > a{
	background:transparent;
	white-space:nowrap;
}

body.layout-top-nav .main-header .navbar .nav > li > a:hover,
body.layout-top-nav .main-header .navbar .nav > li > a:focus,
body.layout-top-nav .main-header .navbar .nav > li > a:active{
	background:var(--topnav-link-hover-bg) !important;
	color:var(--topnav-link-hover) !important;
	text-decoration:none;
}

body.layout-top-nav .navbar .caret{
	border-top-color:#fff;
	border-bottom-color:#fff;
}

/* dropdowns */
body.layout-top-nav .navbar-nav > li > .dropdown-menu{
	margin-top:0;
	border-radius:10px;
	border:1px solid rgba(0,0,0,0.08);
	box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

body.layout-top-nav .navbar-nav > li > .dropdown-menu > li > a{
	padding:8px 14px;
	font-size:13px;
}

body.layout-top-nav .navbar-nav > li > .dropdown-menu > li > a:hover,
body.layout-top-nav .navbar-nav > li > .dropdown-menu > li > a:focus{
	background:#f5f5f5;
}

/* search */
body.layout-top-nav #navbar-search-form{
	display:none;
	position:relative;
	overflow:hidden;
	width:0;
	transition:width 0.3s ease;
}

body.layout-top-nav #navbar-search-close{
	position:absolute;
	right:8px;
	top:50%;
	transform:translateY(-50%);
	color:#888;
	text-decoration:none;
}

body.layout-top-nav #navbar-search-input.form-control{
	background:rgba(255,255,255,0.20);
	border-color:transparent;
	margin-top:10px;
	height:28px;
	color:#fff;
}

body.layout-top-nav #navbar-search-input.form-control::placeholder{
	color:rgba(255,255,255,0.75);
	opacity:1;
}

body.layout-top-nav #navbar-search-input.form-control:focus,
body.layout-top-nav #navbar-search-input.form-control:active{
	background:rgba(255,255,255,0.95);
	border-color:rgba(0,0,0,0.10);
	color:#111;
}

body.layout-top-nav.navbar-search-open #navbar-search-form{
	display:block;
}

body.layout-top-nav.navbar-search-open #navbar-search-toggle{
	display:none;
}

/* toggle */
body.layout-top-nav .navbar-toggle{
	color:#fff;
	border:0;
	margin:0;
	padding:15px 15px;
}

/* desktop open nav only */
@media (min-width:1200px){
	body.layout-top-nav .main-header #navbar-collapse{
		display:flex !important;
		align-items:center;
		flex:1 1 auto;
	}

	body.layout-top-nav .main-header #navbar-collapse > .nav{
		display:flex;
		align-items:center;
		margin:0;
	}

	body.layout-top-nav .main-header .navbar-nav > li{
		float:none;
	}

	body.layout-top-nav .main-header .dropdown-menu{
		position:absolute;
	}
}

/* collapsed nav for anything below desktop */
@media (max-width:1199px){
	body.layout-top-nav .main-header .navbar > .container{
		position:relative;
		display:block !important;
		padding-left:0 !important;
		padding-right:0 !important;
	}

	body.layout-top-nav .main-header .navbar-header{
		width:100%;
		padding-left:15px;
		padding-right:15px;
		display:flex !important;
		align-items:center;
	}

	body.layout-top-nav .main-header .navbar-toggle{
		display:block !important;
		margin-left:auto;
		margin-right:0;
		padding:15px 12px;
	}

	body.layout-top-nav .main-header .navbar-collapse{
		float:none !important;
		clear:both !important;
		width:100% !important;
		padding:0 !important;
		margin:0 !important;
		border:0 !important;
		box-shadow:none !important;
		background:linear-gradient(90deg,rgba(0,189,176,1) 0%, rgba(1,53,114,1) 100%) !important;
	}

	body.layout-top-nav .main-header .navbar-collapse.collapse{
		display:none !important;
	}

	body.layout-top-nav .main-header .navbar-collapse.collapse.in{
		display:block !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav{
		float:none !important;
		width:100% !important;
		margin:0 !important;
		padding:10px 0 !important;
		display:block !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav > li{
		float:none !important;
		width:100% !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav > li > a{
		display:block !important;
		width:100% !important;
		padding:10px 15px !important;
		line-height:18px !important;
		margin:0 !important;
		border-radius:0 !important;
		white-space:normal !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .dropdown-menu{
		position:static !important;
		float:none !important;
		display:none;
		width:100% !important;
		margin:0 !important;
		padding:6px 0 !important;
		border:0 !important;
		border-radius:0 !important;
		box-shadow:none !important;
		background:transparent !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .dropdown.open > .dropdown-menu{
		display:block !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .dropdown-menu > li > a{
		display:block !important;
		width:100% !important;
		padding:2px 15px 2px 30px !important;
		line-height:18px !important;
		color:#fff !important;
		white-space:normal !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav > li > a:hover,
	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav > li > a:focus,
	body.layout-top-nav .main-header .navbar-collapse .dropdown-menu > li > a:hover,
	body.layout-top-nav .main-header .navbar-collapse .dropdown-menu > li > a:focus{
		background:rgba(0,0,0,0.12) !important;
		text-decoration:none !important;
	}

	body.layout-top-nav #navbar-search-toggle{
		display:none !important;
	}

	body.layout-top-nav .main-header #navbar-search-form{
		display:block !important;
		width:100% !important;
		padding:8px 15px !important;
		margin:0 !important;
		overflow:visible !important;
		clear:both !important;
		box-sizing:border-box;
		transition:none !important;
	}

	body.layout-top-nav .main-header #navbar-search-form .form-group{
		position:relative;
		margin:0 !important;
	}

	body.layout-top-nav .main-header #navbar-search-input.form-control{
		width:100% !important;
		box-sizing:border-box;
		padding-right:38px !important;
	}

	body.layout-top-nav .main-header #navbar-search-close{
		right:26px !important;
		top:50% !important;
		transform:translateY(-50%) !important;
	}
}

/* keep right icons pinned right on tablet / medium widths */
@media (min-width:768px) and (max-width:1199px){
	body.layout-top-nav .main-header .navbar-custom-menu{
		position:absolute !important;
		top:0;
		right:55px;
		width:auto !important;
		margin:0 !important;
		float:none !important;
		padding-right:0 !important;
		z-index:1031;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav{
		display:flex !important;
		flex-direction:row !important;
		flex-wrap:nowrap !important;
		align-items:center !important;
		justify-content:flex-end !important;
		margin:0 !important;
		width:auto !important;
		padding:0 !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li{
		float:none !important;
		width:auto !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li > a{
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
		padding:15px 9px !important;
	}
}

/* phone-only refinements */
@media (max-width:767px){
	body.layout-top-nav .main-header .navbar-custom-menu{
		position:static !important;
		float:none !important;
		width:100% !important;
		padding-right:0 !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav{
		float:none !important;
		width:100% !important;
		margin:0 !important;
		padding:0 15px 10px 15px !important;
		display:flex !important;
		justify-content:flex-start;
		gap:6px;
		flex-wrap:wrap;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li{
		float:none !important;
		width:auto !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li > a{
		padding:12px 12px !important;
	}

	body.layout-top-nav .main-header .navbar-nav .open .dropdown-menu .divider{
		margin:6px 0 !important;
	}
}

/* theme vars (topnav) */
:root{
	--topnav-bg-start:var(--link-color);
	--topnav-bg-end:#013572;
	--topnav-link:#ffffff;
	--topnav-link-hover-bg:rgba(0,0,0,0.10);
	--topnav-link-hover:#ffffff;
}

/* spacing */
html body.layout-top-nav .content-wrapper{
	margin-top:0 !important;
	padding-top:0 !important;
}

html body.layout-top-nav section.content,
html body.layout-top-nav .content{
	margin-top:0 !important;
	padding-top:15px;
}

@media (max-width:1199px){
	html body.layout-top-nav section.content,
	html body.layout-top-nav .content{
		padding-top:85px !important;
	}
}


/* ==========================================================================
    LAYOUT VARIANT — LEFT NAV (CP) HEADER TWEAKS
   ========================================================================== */

/* make content sit lower under the fixed header */
html body:not(.layout-top-nav) .content{
    margin-top:0 !important;
}
/* optional: if your sidebar search is inside .sidebar-form */
html body:not(.layout-top-nav) .sidebar-form{ margin-top:0px !important; }
/* small screens: header can get taller, so add a bit more */
@media (max-width: 767px){
    html body.sidebar-open:not(.layout-top-nav) .main-sidebar{
        padding-top:100px !important;
        width: 100%;
    }
}

/* CP (left-nav) header: force right-aligned navbar-custom-menu */
body:not(.layout-top-nav) .main-header .navbar{
    display:flex !important; align-items:center !important;
}
body:not(.layout-top-nav) .main-header .navbar .sidebar-toggle,
body:not(.layout-top-nav) .main-header .navbar .navbar-nav{
    flex:0 0 auto !important;
}
body:not(.layout-top-nav) .main-header .navbar .navbar-custom-menu{
    margin-left:auto !important; float:none !important;
}
body:not(.layout-top-nav) .main-header .navbar .navbar-custom-menu > .nav{
    display:flex !important; align-items:center !important; margin:0 !important;
}
body:not(.layout-top-nav) .main-header .navbar .navbar-custom-menu > .nav > li > a{
    padding-top:15px; padding-bottom:15px;
}

/* Keep CP right-side icons in one horizontal row (mobile) */
@media (max-width:767px){
    /* Ensure the right menu stays on the right and doesn't become a full-width block */
    .main-header .navbar .navbar-custom-menu{
        width:auto !important; flex:0 0 auto !important; margin-left:auto !important;
    }
    /* Force icons row (no vertical stacking) */
    .main-header .navbar .navbar-custom-menu > .nav{
        display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
        align-items:center !important; justify-content:flex-end !important; margin:0 !important;
    }
    /* Each li stays inline */
    .main-header .navbar .navbar-custom-menu > .nav > li{
        float:none !important; display:block !important; width:auto !important;
    }
    /* Tighter tap targets */
    .main-header .navbar .navbar-custom-menu > .nav > li > a{
        display:flex !important; align-items:center !important; justify-content:center !important;
        padding:12px 10px !important;
    }
}

/* ==========================================================================
   NAVBAR THEME TOGGLE (AdminLTE-safe, no height increase)
   Requires: <li class="theme-toggle-li"><a class="theme-toggle">...</a></li>
   ========================================================================== */

/* Hard-disable hover/active background for the theme toggle nav item */
html body .main-header .navbar .navbar-nav > li.theme-toggle-li,
html body .main-header .navbar .navbar-nav > li.theme-toggle-li:hover{
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;
}

html body .main-header .navbar .navbar-nav > li.theme-toggle-li > a,
html body .main-header .navbar .navbar-nav > li.theme-toggle-li > a:hover,
html body .main-header .navbar .navbar-nav > li.theme-toggle-li > a:focus,
html body .main-header .navbar .navbar-nav > li.theme-toggle-li > a:active,
html body .main-header .navbar .navbar-nav > li.theme-toggle-li.open > a,
html body .main-header .navbar .navbar-nav > li.theme-toggle-li.open > a:hover,
html body .main-header .navbar .navbar-nav > li.theme-toggle-li.open > a:focus{
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;
	box-shadow:none !important;
	color:inherit !important;
	text-decoration:none !important;
}

/* Click target: keep AdminLTE sizing, don't add padding/flex height */
.main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle{
	display:block;               /* match other nav links */
	padding:0 12px !important;   /* horizontal only (no vertical height change) */
	line-height:50px;            /* AdminLTE default navbar height */
	height:50px;                 /* prevent taller anchors */
	user-select:none;
	-webkit-tap-highlight-color:transparent;
}

/* Center the switch within the 50px tall link */
.main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle .theme-toggle__switch{
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

/* Switch body */
.theme-toggle__switch{
	width:44px;
	height:22px;
	border-radius:999px;
	background:rgba(0,0,0,0.12);
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0.10);
	display:inline-block;
	overflow:hidden;
	vertical-align:middle;
}

/* Moon + Sun icons */
.theme-toggle__switch::before,
.theme-toggle__switch::after{
	font-family:FontAwesome;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	font-size:12px;
	line-height:1;
	opacity:.78;
	pointer-events:none;
	z-index:1;
}

.theme-toggle__switch::before{ content:"\f186"; left:6px; } /* moon */
.theme-toggle__switch::after{  content:"\f185"; right:6px; } /* sun */

/* Mask (no halo) */
.theme-toggle__mask{
	position:absolute;
	top:3px;
	left:3px;
	width:16px;
	height:16px;
	border-radius:999px;
	background:inherit;
	z-index:2;
	pointer-events:none;
	transition:transform .18s ease;
}

/* Knob */
.theme-toggle__knob{
	position:absolute;
	top:3px;
	left:3px;
	width:16px;
	height:16px;
	border-radius:999px;
	background:#fff;
	box-shadow:0 2px 6px rgba(0,0,0,0.18);
	transition:transform .18s ease;
	z-index:3;
}

/* Dark mode track */
html[data-theme="dark"] .theme-toggle__switch{
	background:rgba(255,255,255,0.18);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16);
}

/* Move knob + mask in dark mode */
html[data-theme="dark"] .theme-toggle__knob{ transform:translateX(22px); }
html[data-theme="dark"] .theme-toggle__mask{ transform:translateX(22px); }

/* Optional: emphasise active icon */
html:not([data-theme="dark"]) .theme-toggle__switch::before{ opacity:1; }
html:not([data-theme="dark"]) .theme-toggle__switch::after{  opacity:.35; }
html[data-theme="dark"] .theme-toggle__switch::before{ opacity:.35; }
html[data-theme="dark"] .theme-toggle__switch::after{  opacity:1; }

/* Focus ring only (no hover ring) */
.main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle:focus .theme-toggle__switch,
.main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle:focus-visible .theme-toggle__switch{
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 2px rgba(0,189,176,0.18);
}

html[data-theme="dark"] .main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle:focus .theme-toggle__switch,
html[data-theme="dark"] .main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle:focus-visible .theme-toggle__switch{
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 2px rgba(0,189,176,0.18);
}

/* Click target: keep AdminLTE sizing, but use flex for perfect vertical centering */
.main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle{
	display:flex !important;
	align-items:center;
	justify-content:center;      /* centres the switch within the link */
	height:50px !important;      /* lock height so it cannot grow the navbar */
	padding:0 12px !important;   /* horizontal only */
	line-height:50px !important; /* harmless; keeps text-based items consistent */
	user-select:none;
	-webkit-tap-highlight-color:transparent;
}

/* Remove the old centering hack entirely */
.main-header .navbar .navbar-nav > li.theme-toggle-li > a.theme-toggle .theme-toggle__switch{
	top:auto;
	transform:none;
}

























/* ==========================================================================
   DARK MODE OVERRIDES (drop-in file)
   Requires: <html data-theme="dark">
   Load AFTER your existing CSS
   ========================================================================== */

/* Default (light) */
#header_logo_dark_img{ display:none; }

/* Dark mode */
html[data-theme="dark"] #header_logo_img{ display:none; }
html[data-theme="dark"] #header_logo_dark_img{ display:inline-block; }

/* ============================================================
   Native <select> dropdown fix (Chrome) - dark mode
   ============================================================ */

/* When your site is in dark mode, tell the browser to render native controls in dark UI */
html[data-theme="dark"],
body.theme-dark,
body.darkmode{
	color-scheme: dark;
}

/* If your default/light theme needs it (optional) */
html[data-theme="light"]{
	color-scheme: light;
}

/* Stop selects inheriting forced white text (your bg-* inherit rule can cause this) */
select.form-control.no_select2{
	color: #555; /* light mode text */
}

/* Dark mode: ensure the select control itself uses readable text */
html[data-theme="dark"] select.form-control.no_select2,
body.theme-dark select.form-control.no_select2,
body.darkmode select.form-control.no_select2{
	color: var(--text-1, #e6e6e6) !important;
	background-color: var(--field-background, #1f1f1f) !important;
	border-color: var(--border-1, #333) !important;
}

/* Try to help the dropdown list too (Chrome honors this; some browsers may ignore) */
html[data-theme="dark"] select.form-control.no_select2 option,
html[data-theme="dark"] select.form-control.no_select2 optgroup,
body.theme-dark select.form-control.no_select2 option,
body.theme-dark select.form-control.no_select2 optgroup,
body.darkmode select.form-control.no_select2 option,
body.darkmode select.form-control.no_select2 optgroup{
	color: var(--text-1, #e6e6e6);
	background-color: var(--surface-2, #1f1f1f);
}

/* If these selects are ever placed inside bg-* wrappers, escape your global inherit rule */
[class^="bg-"] select.form-control.no_select2,
[class*=" bg-"] select.form-control.no_select2{
	color: #555 !important;
}
html[data-theme="dark"] [class^="bg-"] select.form-control.no_select2,
html[data-theme="dark"] [class*=" bg-"] select.form-control.no_select2,
body.theme-dark [class^="bg-"] select.form-control.no_select2,
body.theme-dark [class*=" bg-"] select.form-control.no_select2,
body.darkmode [class^="bg-"] select.form-control.no_select2,
body.darkmode [class*=" bg-"] select.form-control.no_select2{
	color: var(--text-1, #e6e6e6) !important;
}

/* --------------------------------------------------------------------------
   1) Theme tokens (map to your existing var names where possible)
   -------------------------------------------------------------------------- */

html[data-theme="dark"]{
	/* Base surfaces */
	--page-bg:#0b1220;
	--surface-0:#0b1220;  /* page */
	--surface-1:#0f172a;  /* cards/panels */
	--surface-2:#111c33;  /* elevated (dropdown/modal/panels) */
	--surface-3:#0a1326;  /* sidebar */

	/* Text */
	--text-1:#e5e7eb;     /* primary */
	--text-2:#a9b1c3;     /* muted */
	--text-3:#7d879c;     /* subtle */

	/* Borders */
	--border-1:rgba(255,255,255,0.10);
	--border-2:rgba(255,255,255,0.14);

	/* Accents / brand */
	--accent:#00bdb0;
	--accent-2:#2b67ff;

	/* Links */
	--link-color:var(--accent);
	--link-color-hover:#7ce7df;

	/* Header */
	--header-bg:var(--surface-2);

	/* Sidebar */
	--sidebar-bg:var(--surface-3);
	--sidebar-on-bg:rgba(0,189,176,0.18);
	--sidebar-on-text:var(--text-1);
	--sidebar-sub-on-bg:rgba(255,255,255,0.08);
	--sidebar-sub-on-text:var(--text-1);

	/* Buttons */
	--btn-bg:rgba(255,255,255,0.10);
	--btn-text:var(--text-1);
	--btn-on-bg:rgba(255,255,255,0.16);
	--btn-on-text:var(--text-1);

	/* Fields */
	--field-background:rgba(255,255,255,0.08);
	--field-background-active:rgba(255,255,255,0.12);

	/* Tabs */
	--tab-background:rgba(255,255,255,0.06);
	--tab-color:rgba(255,255,255,0.08);
	--tab-text-color:var(--text-1);
	--active-tab-color:rgba(0,189,176,0.22);
	--active-tab-text-color:var(--text-1);

	/* Tables */
	--table-header-bg:rgba(255,255,255,0.07);
	--table-header-text:var(--text-1);
	--table-row-bg-hover:rgba(255,255,255,0.06);

	/* Box titles */
	--box-titles:var(--text-1);

	/* Top nav vars (your layout-top-nav section reads these) */
	--topnav-bg-start:var(--accent);
	--topnav-bg-end:#013572;
	--topnav-link:#ffffff;
	--topnav-link-hover-bg:rgba(0,0,0,0.18);
	--topnav-link-hover:#ffffff;
}

/* --------------------------------------------------------------------------
   2) Global page + base text
   -------------------------------------------------------------------------- */

html[data-theme="dark"] body{
	background:var(--page-bg);
	color:var(--text-1);
}

/* Your default content wrapper is hard-coded #ecf0f5 */
html[data-theme="dark"] .content-wrapper{
	background:var(--surface-0);
}

/* General “light” hard-coded text colours */
html[data-theme="dark"] .mini-card .value{ color:var(--text-1); }
html[data-theme="dark"] .mini-card .label{ color:var(--text-2); }

/* Muted helper */
html[data-theme="dark"] .text-muted{ color:var(--text-2) !important; }

/* Links */
html[data-theme="dark"] a{ color:var(--link-color); }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus{ color:var(--link-color-hover); }

/* --------------------------------------------------------------------------
   3) Header tweaks (your CSS forces header links to #000)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .main-header{
	background-color:var(--header-bg);
}

/* You have: .main-header .navbar .nav > li > a { color:#000000; } */
html[data-theme="dark"] .main-header .navbar .nav > li > a,
html[data-theme="dark"] .main-header .navbar .sidebar-toggle{
	color:var(--text-1) !important;
}

html[data-theme="dark"] .main-header .navbar .nav > li > a:hover,
html[data-theme="dark"] .main-header .navbar .nav > li > a:focus,
html[data-theme="dark"] .main-header .navbar .nav > li > a:active,
html[data-theme="dark"] .main-header .navbar .sidebar-toggle:hover{
	background-color:rgba(255,255,255,0.10) !important;
	color:var(--text-1) !important;
}

/* Logo text in header */
html[data-theme="dark"] .main-header .logo span{ color:var(--text-1); }

/* --------------------------------------------------------------------------
   4) Sidebar colours (you already use vars but also hard-coded link colours)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .sidebar{
	background-color:var(--sidebar-bg);
}

/* You have: .sidebar a { color:#120f2e; } */
html[data-theme="dark"] .sidebar a{ color:var(--text-1) !important; }
html[data-theme="dark"] .sidebar-menu > li.header{ color:var(--text-2); }

/* Submenu links were forced #000 */
html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a{
	color:var(--text-1) !important;
}

html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a:hover,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li > a:focus,
html[data-theme="dark"] .sidebar-menu .treeview-menu > li.active > a{
	background-color:var(--sidebar-sub-on-bg) !important;
	color:var(--sidebar-sub-on-text) !important;
}

/* Active/hover parent items */
html[data-theme="dark"] .sidebar-menu > li:hover > a,
html[data-theme="dark"] .sidebar-menu > li.active > a{
	background:var(--sidebar-on-bg) !important;
	color:var(--sidebar-on-text) !important;
	opacity:1;
}

/* --------------------------------------------------------------------------
   5) Core components: cards/boxes/panels
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .box,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .ticket-dashboard,
html[data-theme="dark"] .accordion-item{
	background:var(--surface-1) !important;
	border-color:var(--border-1) !important;
	color:var(--text-1);
}

/* Your .box has extra shadow glow; keep but ensure looks OK */
html[data-theme="dark"] .box{
	box-shadow:
		0 0 0 0px rgba(0, 189, 176, 0.08),
		0 0 15px 0px rgba(0, 189, 176, 0.06),
		0 0 14px rgba(2, 52, 113, 0.10);
}

/* Box header text */
html[data-theme="dark"] .box-header{ color:var(--text-1) !important; }

/* Your box overlay uses white tint */
html[data-theme="dark"] .box .overlay{
	background:rgba(0,0,0,0.55) !important;
}
html[data-theme="dark"] .box .overlay .fa-refresh{ color:var(--text-1) !important; }

/* Mini cards */
html[data-theme="dark"] .mini-card{
	background:var(--surface-1) !important;
	border-color:var(--border-1) !important;
}
html[data-theme="dark"] .mini-card:hover{
	background:rgba(255,255,255,0.06) !important;
}

/* --------------------------------------------------------------------------
   6) Forms / inputs / input groups
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .form-control{
	background-color:var(--field-background) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-control:active,
html[data-theme="dark"] .form-control:focus-visible{
	background-color:var(--field-background-active) !important;
	box-shadow:0 0 0 2px rgba(0, 189, 176, 0.22), 0 1px 2px rgba(2, 52, 113, 0.18) !important;
}

/* Placeholders */
html[data-theme="dark"] .form-control::-webkit-input-placeholder{ color:var(--text-3); }
html[data-theme="dark"] .form-control::-moz-placeholder{ color:var(--text-3); opacity:1; }
html[data-theme="dark"] .form-control:-ms-input-placeholder{ color:var(--text-3); }

/* Disabled fields */
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] fieldset[disabled] .form-control{
	background-color:rgba(255,255,255,0.06) !important;
	color:var(--text-2) !important;
}

/* Input addon (your theme sets it white) */
html[data-theme="dark"] .input-group .input-group-addon{
	background-color:rgba(255,255,255,0.06) !important;
	color:var(--text-2) !important;
	border-color:var(--border-1) !important;
}

/* --------------------------------------------------------------------------
   7) Buttons (vars already apply; ensure borders/readability)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .btn, 
html[data-theme="dark"] a.btn{
	border-color:var(--border-1);
}

/* --------------------------------------------------------------------------
   8) Tabs / nav
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .nav > li > a:focus,
html[data-theme="dark"] .nav > li > a:hover,
html[data-theme="dark"] .nav .open > a,
html[data-theme="dark"] .nav .open > a:focus,
html[data-theme="dark"] .nav .open > a:hover{
	background-color:rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .nav .nav-divider{
	background-color:var(--border-1) !important;
}

/* Your nav-tabs base border uses #ddd */
html[data-theme="dark"] .nav-tabs{
	border-bottom:1px solid var(--border-1) !important;
}

/* nav-tabs-custom pills already use vars; just ensure surfaces fit */
html[data-theme="dark"] .nav-tabs-custom{
	background:transparent;
}

/* --------------------------------------------------------------------------
   9) Tables
   -------------------------------------------------------------------------- */

/* Header vars already apply; ensure body borders + base row bg */
html[data-theme="dark"] table{
	color:var(--text-1);
}

/* Table body cells border hard-coded #e2e8f0 */
html[data-theme="dark"] tbody td{
	border-bottom:1px solid var(--border-1) !important;
}

/* Hover var already defined, but ensure it applies everywhere */
html[data-theme="dark"] table:not(.no-hover) tbody tr:hover td{
	background:var(--table-row-bg-hover) !important;
}

/* --------------------------------------------------------------------------
   10) Dropdowns
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .dropdown-menu{
	background-color:var(--surface-2) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
}

html[data-theme="dark"] .dropdown-menu > li > a{
	color:var(--text-1) !important;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus{
	background-color:rgba(255,255,255,0.08) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .dropdown-menu .divider{
	background-color:var(--border-1) !important;
}

/* --------------------------------------------------------------------------
   11) Modals
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .modal-content{
	background-color:var(--surface-2) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
	color:var(--text-1);
}

html[data-theme="dark"] .modal-header{
	background-color:rgba(255,255,255,0.04) !important;
	border-bottom:1px solid var(--border-1) !important;
}

html[data-theme="dark"] .modal-header > button:hover{
	color:var(--accent) !important;
}

/* --------------------------------------------------------------------------
   12) Notifications panel (lots of #fff/#fafafa/#111/#666)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] #notifications_panel{
	background:var(--surface-2) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
	color:var(--text-1);
}

html[data-theme="dark"] #notifications_panel:before{
	background:var(--surface-2) !important;
	border-left:1px solid var(--border-1) !important;
	border-top:1px solid var(--border-1) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-head,
html[data-theme="dark"] #notifications_panel .nav-notify-footer{
	background:rgba(255,255,255,0.05) !important;
	border-color:var(--border-1) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-title{
	color:var(--text-1) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-close{
	background:rgba(255,255,255,0.06) !important;
	border-color:var(--border-1) !important;
	color:var(--text-2) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-list{
	background:var(--surface-2) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-item{
	background:var(--surface-1) !important;
	border-color:var(--border-1) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-icon{
	background:rgba(255,255,255,0.07) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-item-title{
	color:var(--text-1) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-item-text,
html[data-theme="dark"] #notifications_panel .nav-notify-item-due{
	color:var(--text-2) !important;
}

html[data-theme="dark"] #notifications_panel .nav-notify-empty{
	background:rgba(255,255,255,0.04) !important;
	border-color:rgba(255,255,255,0.16) !important;
	color:var(--text-2) !important;
}

/* --------------------------------------------------------------------------
   13) Tooltip (keep your tooltip blue, but ensure arrow stays consistent)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .tooltip-inner{
	background-color:#013572;
	color:#fff;
}

/* --------------------------------------------------------------------------
   14) Autocomplete (hard-coded #fff/#333/#f5f5f7)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .str-autocomplete{
	background:var(--surface-2) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
	color:var(--text-1);
}

html[data-theme="dark"] .str-autocomplete-item{
	color:var(--text-1) !important;
}

html[data-theme="dark"] .str-autocomplete-item:hover{
	background:rgba(255,255,255,0.08) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .str-autocomplete-item.disabled{
	background:rgba(255,255,255,0.04) !important;
	color:var(--text-3) !important;
}

/* --------------------------------------------------------------------------
   15) Select2 (you hard-code a lot of light values)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple{
	background-color:var(--field-background) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{
	color:var(--text-1) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder{
	color:var(--text-3) !important;
}

html[data-theme="dark"] .select2-container--default .select2-dropdown{
	background:var(--surface-2) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option{
	color:var(--text-1) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected]{
	background:rgba(255,255,255,0.08) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"]{
	background:rgba(255,255,255,0.10) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple{
	background-color:rgba(255,255,255,0.05) !important;
	color:var(--text-2) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice{
	background:rgba(255,255,255,0.08) !important;
	border-color:var(--border-1) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
	color:var(--text-2) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
	color:var(--text-1) !important;
}

/* --------------------------------------------------------------------------
   16) Date/time picker (dtp-*) (hard-coded light surfaces)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .dtp-panel{
	background:var(--surface-2) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
	color:var(--text-1);
}

html[data-theme="dark"] .dtp-dow{ color:var(--text-2) !important; }
html[data-theme="dark"] .dtp-day{ color:var(--text-1) !important; }
html[data-theme="dark"] .dtp-day.muted{ color:var(--text-3) !important; }

html[data-theme="dark"] .dtp-day:hover{
	background:rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .dtp-day.today{
	box-shadow:inset 0 0 0 1px rgba(155,185,255,0.6) !important;
}

html[data-theme="dark"] .dtp-day.selected{
	background:var(--accent-2) !important;
	color:#fff !important;
	box-shadow:none !important;
}

html[data-theme="dark"] .dtp-btn,
html[data-theme="dark"] .dtp-time-part button{
	background:rgba(255,255,255,0.06) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .dtp-btn:hover,
html[data-theme="dark"] .dtp-time-part button:hover{
	background:rgba(255,255,255,0.10) !important;
}

html[data-theme="dark"] .dtp-time-part input{
	background:rgba(255,255,255,0.06) !important;
	border-color:var(--border-1) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .dtp-actions .dtp-btn{
	background:rgba(255,255,255,0.06) !important;
	border-color:var(--border-1) !important;
}

html[data-theme="dark"] .dtp-actions .dtp-btn.primary{
	background:var(--accent-2) !important;
	border-color:var(--accent-2) !important;
	color:#fff !important;
	box-shadow:none !important;
}

/* --------------------------------------------------------------------------
   17) Accordion (hard-coded #fff and blue-ish text)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .accordion-title{
	background:var(--surface-1) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .accordion-content{
	color:var(--text-1);
}

/* --------------------------------------------------------------------------
   18) Tickets (rows/dashboard/updates/thread states)
   -------------------------------------------------------------------------- */

/* Ticket row base uses border #eee */
html[data-theme="dark"] .ticket-row{
	border-color:var(--border-1) !important;
	background:var(--surface-1);
}

/* Ticket row actions menu hover uses #f5f5f5 */
html[data-theme="dark"] .ticket-row .ticket-actions-menu li a{
	color:var(--text-1) !important;
}
html[data-theme="dark"] .ticket-row .ticket-actions-menu li a:hover{
	background:rgba(255,255,255,0.08) !important;
}

/* Dashboard card had white bg, blue text */
html[data-theme="dark"] .ticket-dashboard{
	color:var(--text-1) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
}

/* Dashboard “corner” was #f4f3f7 */
html[data-theme="dark"] .ticket-dashboard.ticket-alert::before{
	background:rgba(255,255,255,0.06) !important;
}

html[data-theme="dark"] .ticket-dashboard.ticket-alert .corner-icon{
	color:var(--text-1) !important;
}

/* Thread table hover/selected are #EAF0F5 */
html[data-theme="dark"] #ticket_updates .thread-table.table-hover > tbody > tr:hover > *,
html[data-theme="dark"] #ticket_updates .thread-table > tbody > tr.thread-row.is-selected > *,
html[data-theme="dark"] #ticket_updates .thread-table > tbody > tr.thread-row:active > *{
	background:rgba(255,255,255,0.06) !important;
}

/* Selected left border stays your blue */
html[data-theme="dark"] #ticket_updates .thread-table > tbody > tr.thread-row.is-selected > *:first-child{
	box-shadow:inset 3px 0 0 0 #013572 !important;
}

/* Unread update row uses #fff9e6 */
html[data-theme="dark"] #ticket_updates .ticket_update.is-unread{
	background-color:rgba(240,173,78,0.10) !important;
}

/* Selected update row uses #f7fafc */
html[data-theme="dark"] #ticket_updates .ticket_update.is-selected{
	background-color:rgba(255,255,255,0.06) !important;
}

html[data-theme="dark"] #ticket_updates .ticket_update.is-unread.is-selected{
	background-color:rgba(43,103,255,0.10) !important;
}

/* Status changes cards */
html[data-theme="dark"] .ticket-status-changes-item{
	background:var(--surface-1) !important;
	border-color:var(--border-1) !important;
	box-shadow:none !important;
}
html[data-theme="dark"] .ticket-status-changes-when,
html[data-theme="dark"] .ticket-status-changes-empty{
	color:var(--text-2) !important;
}
html[data-theme="dark"] .ticket-status-changes-badge{
	background:rgba(255,255,255,0.06) !important;
	border-color:var(--border-1) !important;
	color:var(--text-1) !important;
}

/* “from/to” badges were red/green light tints; use darker-friendly tints */
html[data-theme="dark"] .ticket-status-changes-from{
	background:rgba(217,83,79,0.16) !important;
	border-color:rgba(217,83,79,0.28) !important;
}
html[data-theme="dark"] .ticket-status-changes-to{
	background:rgba(92,184,92,0.16) !important;
	border-color:rgba(92,184,92,0.28) !important;
}

html[data-theme="dark"] .ticket-status-changes-toggle{
	background:rgba(255,255,255,0.06) !important;
	border-color:var(--border-1) !important;
	color:var(--text-1) !important;
}
html[data-theme="dark"] .ticket-status-changes-toggle:hover{
	background:rgba(255,255,255,0.10) !important;
}

/* --------------------------------------------------------------------------
   19) Chips
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .k-chip{
	background:var(--chip-off-bg, rgba(255,255,255,0.06)) !important;
	color:var(--chip-off-color, var(--text-1)) !important;
	border-color:var(--chip-off-border, var(--border-1)) !important;
}

html[data-theme="dark"] .k-chip.is-active{
	background:var(--chip-on-bg, rgba(0,189,176,0.22)) !important;
	color:var(--chip-on-color, var(--text-1)) !important;
	border-color:var(--chip-on-border, rgba(0,189,176,0.35)) !important;
}

/* --------------------------------------------------------------------------
   20) Breadcrumbs (hard-coded #d2d6de bg)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .breadcrumbs{
	background-color:rgba(255,255,255,0.06) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] .breadcrumbs a{
	color:var(--text-1) !important;
}
html[data-theme="dark"] .breadcrumbs li:not(:last-child)::after{
	color:var(--text-3) !important;
}

/* --------------------------------------------------------------------------
   21) Loading overlay
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .loading-overlay{
	background:rgba(0,0,0,0.65) !important;
}

/* --------------------------------------------------------------------------
   22) Quick note editor + dropdown (hard-coded whites)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] #ticket_quick_note_editor{
	background:var(--field-background) !important;
	border-color:var(--border-1) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] #ticket_quick_note_editor:empty:before{
	color:var(--text-3) !important;
}

html[data-theme="dark"] #ticket_quick_note_tag_dropdown{
	background:var(--surface-2) !important;
	border-color:var(--border-1) !important;
	color:var(--text-1) !important;
}

html[data-theme="dark"] #ticket_quick_note_tag_dropdown li:hover{
	background-color:rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] #ticket_quick_note_tag_dropdown li.is-active{
	background:rgba(0,189,176,0.18) !important;
}

/* --------------------------------------------------------------------------
   23) Misc: ensure “white” panel areas don’t blind you
   -------------------------------------------------------------------------- */

/* Anywhere you’ve used explicit white backgrounds */
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs,
html[data-theme="dark"] .small-box,
html[data-theme="dark"] .small-box > .inner{
	color:var(--text-1);
}

/* If any plugin injects inline white backgrounds, this helps a bit */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"]{
	background-color:var(--surface-2) !important;
}

/* --------------------------------------------------------------------------
   Optional: auto-enable dark if user prefers it (remove if you don't want it)
   -------------------------------------------------------------------------- */
/*
@media (prefers-color-scheme: dark){
	html:not([data-theme]){ }
}
*/

/* ==========================================================================
   TOP NAV - collapse earlier to stop overlap
   ========================================================================== */

@media (max-width: 1199px){
	body.layout-top-nav .main-header .navbar > .container{
		padding-left:0 !important;
		padding-right:0 !important;
		display:block !important;
	}

	body.layout-top-nav .main-header .navbar-header{
		width:100%;
		padding-left:15px;
		padding-right:15px;
		display:flex !important;
		align-items:center;
	}

	body.layout-top-nav .main-header .navbar-toggle{
		display:block !important;
		margin-left:auto;
		margin-right:0;
		padding:15px 12px;
	}

	body.layout-top-nav .main-header .navbar-collapse{
		float:none !important;
		clear:both !important;
		width:100% !important;
		padding:0 !important;
		margin:0 !important;
		border:0 !important;
		box-shadow:none !important;
		background:linear-gradient(90deg,rgba(0,189,176,1) 0%, rgba(1,53,114,1) 100%) !important;
	}

	body.layout-top-nav .main-header .navbar-collapse.collapse{
		display:none !important;
	}

	body.layout-top-nav .main-header .navbar-collapse.collapse.in{
		display:block !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav{
		float:none !important;
		width:100% !important;
		margin:0 !important;
		padding:10px 0 !important;
		display:block !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav > li{
		float:none !important;
		width:100% !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .nav.navbar-nav > li > a{
		display:block !important;
		width:100% !important;
		padding:10px 15px !important;
		line-height:18px !important;
		margin:0 !important;
		border-radius:0 !important;
		white-space:normal !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .dropdown-menu{
		position:static !important;
		float:none !important;
		display:none;
		width:100% !important;
		margin:0 !important;
		padding:6px 0 !important;
		border:0 !important;
		border-radius:0 !important;
		box-shadow:none !important;
		background:transparent !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .dropdown.open > .dropdown-menu{
		display:block !important;
	}

	body.layout-top-nav .main-header .navbar-collapse .dropdown-menu > li > a{
		display:block !important;
		width:100% !important;
		padding:2px 15px 2px 30px !important;
		line-height:18px !important;
		color:#fff !important;
		white-space:normal !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu{
		position:static !important;
		float:none !important;
		width:100% !important;
		padding-right:0 !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav{
		float:none !important;
		width:100% !important;
		margin:0 !important;
		padding:0 15px 10px 15px !important;
		display:flex !important;
		justify-content:flex-start;
		gap:6px;
		flex-wrap:wrap;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li{
		float:none !important;
		width:auto !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li > a{
		padding:12px 12px !important;
	}

	body.layout-top-nav #navbar-search-toggle{
		display:none !important;
	}

	body.layout-top-nav .main-header #navbar-search-form{
		display:block !important;
		width:100% !important;
		padding:8px 15px !important;
		margin:0 !important;
		overflow:visible !important;
		clear:both !important;
		box-sizing:border-box;
		transition:none !important;
	}

	body.layout-top-nav .main-header #navbar-search-form .form-group{
		position:relative;
		margin:0 !important;
	}

	body.layout-top-nav .main-header #navbar-search-input.form-control{
		width:100% !important;
		box-sizing:border-box;
		padding-right:38px !important;
	}

	body.layout-top-nav .main-header #navbar-search-close{
		right:26px !important;
		top:50% !important;
		transform:translateY(-50%) !important;
	}
}

@media (max-width: 1199px){
	html body.layout-top-nav section.content,
	html body.layout-top-nav .content{
		padding-top:85px !important;
	}
}


/* Keep top-nav right icons pinned right before full mobile collapse */
@media (min-width:768px) and (max-width:1199px){
	body.layout-top-nav .main-header .navbar > .container{
		position:relative;
		display:block !important;
		padding-left:0 !important;
		padding-right:0 !important;
	}

	body.layout-top-nav .main-header .navbar-header{
		width:100%;
		padding-left:15px;
		padding-right:15px;
		display:flex !important;
		align-items:center;
	}

	body.layout-top-nav .main-header .navbar-toggle{
		display:block !important;
		margin-left:auto;
		margin-right:0;
		order:3;
	}

	body.layout-top-nav .main-header .navbar-custom-menu{
		position:absolute !important;
		top:0;
		right:55px;
		width:auto !important;
		margin:0 !important;
		float:none !important;
		padding-right:0 !important;
		z-index:1031;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav{
		display:flex !important;
		flex-direction:row !important;
		flex-wrap:nowrap !important;
		align-items:center !important;
		justify-content:flex-end !important;
		margin:0 !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li{
		float:none !important;
		width:auto !important;
	}

	body.layout-top-nav .main-header .navbar-custom-menu .nav.navbar-nav > li > a{
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
		padding:15px 9px !important;
	}

	/* collapsed menu sits below the header row */
	body.layout-top-nav .main-header .navbar-collapse{
		clear:both !important;
		margin-top:0 !important;
	}
}