/* Add here all your CSS customizations */
#login_box .LV_validation_message {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 1px 3px 0;
  border: 1px solid #aaa;
  background-color: #fff;
}
#login_box .LV_invalid {
  border-color: #a30617;
  background-color: #f80e27;
  color: #fff;
  text-shadow: 0px 1px 0px #a30617;
}

form .LV_validation_message {
  clear: both;
  display: block;
  font-size: 11px;
}

#login_box .LV_validation_message {
  margin: 0;
}

form .LV_invalid {
  color: #f80e27;
}

.cl_previews {
  float: left;
  padding: 10px;
  text-align: center;
  color: #000;
  font-size: 1.2em;
}

.widget-summary .widget-summary-col {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.widget-summary .summary {
  min-height: 0;
  word-break: break-all;
}

.marg-bott {
  margin-bottom: 20px;
}

/* Fix: active pagination page number text colour (Bootstrap 5 structure) */
.pagination .page-item.active .page-link {
  color: #fff !important;
}

/* ============================================================
   IPRESS DARK SHELL THEME
   Charcoal slate — a step brighter than the order form.
   Design tokens match order-light.html accent (#c8880a amber).
   ============================================================ */

:root {
  /* Medium slate — clearly lighter than near-black, to cut the harsh contrast
     with the light content area. */
  --sh-bg:       #343845;   /* page background  */
  --sh-header:   #2f333f;   /* top header bar   */
  --sh-sidebar:  #3b3f4d;   /* sidebar panel    */
  --sh-raised:   #464b5a;   /* hover / elevated */
  --sh-sub:      #333743;   /* sub-menu bg      */
  --sh-border:   #4a4f5f;   /* dividers         */
  --sh-text:     #b8bcc8;   /* nav link text    */
  --sh-muted:    #6a6e82;   /* secondary text   */
  --sh-bright:   #dde0ea;   /* active/bright    */
  --sh-accent:   #c8880a;   /* amber — same as order form */
  --sh-accent2:  rgba(200,136,10,0.15);
}

/* ── PAGE BODY ── */
body,
.body,
html body {
  background: var(--sh-bg) !important;
  color: var(--sh-text) !important;
}

.content-body {
  background: var(--sh-bg) !important;
}

/* ── TOP HEADER ── */
.header {
  background: var(--sh-header) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.35) !important;
}

.header .logo-container {
  background: var(--sh-header) !important;
  border-right: 1px solid var(--sh-border) !important;
}

/* User box in header */
.header .profile-info .name  { color: var(--sh-bright) !important; }
.header .profile-info .role  { color: var(--sh-muted)  !important; }
.header .userbox > a         { color: var(--sh-text)   !important; }
.header .separator           { background: var(--sh-border) !important; }
.header .fa.custom-caret     { color: var(--sh-muted)  !important; }

/* Header dropdown menu */
.header .userbox .dropdown-menu {
  background: var(--sh-raised)  !important;
  border: 1px solid var(--sh-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.header .userbox .dropdown-menu li a {
  color: var(--sh-text) !important;
  padding: 0.45rem 1.25rem !important;
}
.header .userbox .dropdown-menu li a:hover {
  background: var(--sh-accent2) !important;
  color: var(--sh-accent) !important;
}
.header .userbox .dropdown-menu .divider,
.header .userbox .dropdown-menu li.divider {
  background: var(--sh-border) !important;
}

/* ── SIDEBAR ── */
.sidebar-left,
html.fixed .sidebar-left {
  background: var(--sh-sidebar) !important;
  border-right: 1px solid var(--sh-border) !important;
}

.sidebar-left .sidebar-header {
  background: var(--sh-header) !important;
  border-bottom: 1px solid var(--sh-border) !important;
}

.sidebar-left .sidebar-header .sidebar-title {
  color: var(--sh-muted) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.sidebar-left .sidebar-header .sidebar-toggle i,
.sidebar-left .sidebar-header .sidebar-toggle:hover i {
  color: var(--sh-muted) !important;
}
.sidebar-left .sidebar-header .sidebar-toggle:hover i {
  color: var(--sh-accent) !important;
}

/* ── NAV LINKS — match theme.css specificity (ul.nav-main > li > a) ── */
ul.nav-main > li > a,
ul.nav-main > li > a span,
ul.nav-main li > a,
ul.nav-main li > a span {
  color: var(--sh-text) !important;
  font-size: 0.83rem !important;
  transition: background 0.15s, color 0.15s !important;
}

ul.nav-main > li > a:hover,
ul.nav-main > li > a:focus,
ul.nav-main li > a:hover,
ul.nav-main li > a:focus {
  background-color: var(--sh-raised) !important;
  color: var(--sh-bright) !important;
}
ul.nav-main > li > a:hover span,
ul.nav-main li > a:hover span {
  color: var(--sh-bright) !important;
}

/* Icons */
ul.nav-main li > a i {
  color: var(--sh-muted) !important;
  transition: color 0.15s !important;
}
ul.nav-main li > a:hover i {
  color: var(--sh-accent) !important;
}

/* Active / current page — override theme's grey box-shadow with amber */
ul.nav-main > li.nav-active > a,
ul.nav-main > li.active > a,
ul.nav-main li.nav-active > a,
ul.nav-main li.active > a {
  background: var(--sh-accent2) !important;
  color: var(--sh-accent) !important;
  box-shadow: 3px 0 0 var(--sh-accent) inset !important;
}
ul.nav-main li.nav-active > a i,
ul.nav-main li.active > a i {
  color: var(--sh-accent) !important;
}
ul.nav-main li.nav-active > a span,
ul.nav-main li.active > a span {
  color: var(--sh-accent) !important;
}

/* Open parent (expanded accordion) */
ul.nav-main > li.nav-expanded > a,
ul.nav-main li.nav-parent.nav-expanded > a {
  background: var(--sh-raised) !important;
  color: var(--sh-bright) !important;
}
ul.nav-main li.nav-parent.nav-expanded > a span {
  color: var(--sh-bright) !important;
}
ul.nav-main li.nav-parent.nav-expanded > a i {
  color: var(--sh-accent) !important;
}

/* Sub-menu */
ul.nav-main ul.nav-children {
  background: var(--sh-sub) !important;
  border-top: 1px solid var(--sh-border) !important;
}
ul.nav-main ul.nav-children li > a {
  font-size: 0.79rem !important;
  color: var(--sh-muted) !important;
  box-shadow: none !important;
}
ul.nav-main ul.nav-children li > a:hover {
  background: var(--sh-raised) !important;
  color: var(--sh-bright) !important;
}
ul.nav-main ul.nav-children li.active > a,
ul.nav-main ul.nav-children li.nav-active > a {
  color: var(--sh-accent) !important;
  background: var(--sh-accent2) !important;
}

/* Badges in nav — dark number on the amber pill by default. */
ul.nav-main .badge {
  background: var(--sh-accent) !important;
  color: #0a0a0f !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
}
/* On the SELECTED (active) item the link text turns amber; force the badge
   number to white so it doesn't vanish into the amber pill. High specificity +
   the .badge-primary class so it wins over the active span-colour rule. */
ul.nav-main li.nav-active > a span.badge.badge-primary,
ul.nav-main li.active > a span.badge.badge-primary,
ul.nav-main li.nav-active > a span.badge,
ul.nav-main li.active > a span.badge {
  color: #ffffff !important;
  background: var(--sh-accent) !important;
}

/* Separator line */
.sidebar-left hr.separator,
.sidebar-left .separator {
  border-color: var(--sh-border) !important;
}

/* Nano scrollbar */
.nano > .nano-pane { background: var(--sh-border) !important; }
.nano > .nano-pane > .nano-slider { background: var(--sh-raised) !important; }

/* ── PAGE HEADER / BREADCRUMBS ── */
.page-header {
  background: var(--sh-bg) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  box-shadow: none !important;   /* kill theme.css's stray light line under the title */
}
.page-header h2 { color: var(--sh-bright) !important; }
.breadcrumb { background: transparent !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--sh-muted) !important; }
.breadcrumb-item.active { color: var(--sh-text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sh-border) !important; }

/* ── CARDS & PANELS (global pages) ── */
.card, .panel {
  background: #272a35 !important;
  border: 1px solid var(--sh-border) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.25) !important;
}
.card-header, .panel-heading {
  background: #2a2d38 !important;
  border-bottom: 1px solid var(--sh-border) !important;
  color: var(--sh-bright) !important;
}
.card-body, .panel-body { color: var(--sh-text) !important; }

/* card-title is hardcoded #33353F in theme — force bright text on dark headers */
.card-title,
.card-header .card-title,
h2.card-title,
h3.card-title,
h4.card-title {
  color: var(--sh-bright) !important;
}
html .card-title { color: var(--sh-bright) !important; }

/* ── TABLES ── */
.table { color: var(--sh-text) !important; }
.table thead th {
  background: var(--sh-raised) !important;
  border-color: var(--sh-border) !important;
  color: #eef1f6 !important;          /* bright, readable header text */
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.table td, .table th { border-color: var(--sh-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.02) !important; }
.table-hover tbody tr:hover { background: var(--sh-accent2) !important; }

/* ── FORMS (global) ── */
.form-control, input, select, textarea {
  background: var(--sh-sub) !important;
  border: 1px solid var(--sh-border) !important;
  color: var(--sh-bright) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--sh-accent) !important;
  box-shadow: 0 0 0 2px rgba(200,136,10,0.2) !important;
  background: var(--sh-raised) !important;
}
label { color: var(--sh-text) !important; }

/* ── BUTTONS (keep Bootstrap colors mostly, just fix outline) ── */
.btn-default, .btn-secondary {
  background: var(--sh-raised) !important;
  border-color: var(--sh-border) !important;
  color: var(--sh-bright) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: #353848 !important;
  color: var(--sh-bright) !important;
}

/* ── PAGINATION ── */
.pagination .page-link {
  background: var(--sh-raised) !important;
  border-color: var(--sh-border) !important;
  color: var(--sh-text) !important;
}
.pagination .page-link:hover {
  background: var(--sh-accent2) !important;
  color: var(--sh-accent) !important;
}
.pagination .page-item.active .page-link {
  background: var(--sh-accent) !important;
  border-color: var(--sh-accent) !important;
  color: #0a0a0f !important;
}

/* ── ALERTS ── */
.alert-danger  { background: rgba(208,64,64,0.12)   !important; border-color: rgba(208,64,64,0.3)   !important; color: #e87070 !important; }
.alert-success { background: rgba(50,160,80,0.12)   !important; border-color: rgba(50,160,80,0.3)   !important; color: #6dcf8a !important; }
.alert-info    { background: rgba(40,120,200,0.12)  !important; border-color: rgba(40,120,200,0.3)  !important; color: #78b4e8 !important; }
.alert-warning { background: rgba(200,136,10,0.12)  !important; border-color: rgba(200,136,10,0.3)  !important; color: var(--sh-accent) !important; }

/* ── DROPDOWN MENUS (global) ── */
.dropdown-menu {
  background: var(--sh-raised) !important;
  border: 1px solid var(--sh-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.dropdown-item {
  color: var(--sh-text) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--sh-accent2) !important;
  color: var(--sh-accent) !important;
}
.dropdown-divider { border-color: var(--sh-border) !important; }

/* ── MODALS ── */
.modal-content {
  background: var(--sh-sidebar) !important;
  border: 1px solid var(--sh-border) !important;
}
.modal-header {
  background: var(--sh-raised) !important;
  border-bottom: 1px solid var(--sh-border) !important;
}
.modal-header .modal-title { color: var(--sh-bright) !important; }
.modal-footer { border-top: 1px solid var(--sh-border) !important; }
.modal-backdrop { background: #000 !important; }