/* ============================================================
   OASIS WATER — Admin Portal Design
   SPIE V3 (Porto) layout language, rebranded to the Oasis Water
   Brand Identity Manual (ver 3.0). Colour tokens below drive the
   entire UI — see /Input/www_style.md.
     Oasis Blue   #041E42  (primary)   -> --navy
     Oasis LtBlue #4789C8 / #3A73AB    -> accents
     Plus Jakarta Sans                 -> --f
   ============================================================ */

/* ── CSS VARIABLES ── */
:root {
  --bg:      #F6F8FA;   /* cool off-white page background */
  --bg2:     #EEF2F6;   /* hover / subtle fill */
  --bg3:     #E3E9F0;
  --panel:   #FFFFFF;   /* cards, header, sidebar */
  --ink:     #0C2340;   /* primary text (Oasis ink) */
  --ink2:    #23384F;
  --ink3:    #5A6B80;   /* muted text */
  --ink4:    #93A2B3;
  --rule:    #D6DEE8;   /* borders / dividers */
  --rule2:   #C2CDDA;
  --navy:    #041E42;   /* Oasis Blue — primary brand */
  --navy2:   #3A73AB;   /* readable accent (Oasis Light Blue, darkened) */
  --navy-l:  #E6F0F9;   /* active-state tint (Oasis Light Blue 100) */
  --psl:     #2E8B57;   /* success / positive */
  --psl-d:   #1F6B41;
  --psl-l:   #E6F3EC;
  --amber:   #C77700;   /* warning */
  --amber-l: #F7E9CE;
  --red:     #C0392B;   /* error */
  --red-l:   #F7DDD9;
  --up:      #2E8B57;
  --up-l:    #E6F3EC;
  --dn:      #C0392B;
  --dn-l:    #F7DDD9;
  --f: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --r:  8px;
  --rl: 12px;
}

/* ── BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  font-family: var(--f) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-size: 14px;
  line-height: 1.5;
}

/* ── TOPBAR / HEADER ── */
.header {
  background: var(--panel) !important;
  color: var(--ink) !important;
  height: 52px !important;
  min-height: 52px !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.header .logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  background: transparent !important;
  padding: 0 !important;
  width: auto !important;
  border: none !important;
}

.header .logo-container .logo {
  display: flex;
  align-items: center;
  margin: 0 !important;  /* override Porto's margin: 10px 0 0 15px */
}

.header .logo-container .logo img {
  margin: 0 0 0 -10px !important;
  /* max-height 22px: in a 52px header, flex-centering gives (52-22)/2 = 15px top gap,
     matching the 15px header padding-left so spacing is equal on all sides */
  max-height: 40px;
  width: auto;
}

.header .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* user dropdown */
.header #userbox > a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2) !important;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r);
  transition: background .12s;
}

.header #userbox > a:hover {
  background: var(--bg2);
  color: var(--ink) !important;
}

.header #userbox .name {
  color: var(--ink2);
  font-weight: 600;
  font-size: 13px;
}

.header #userbox {
  position: relative !important;
}

.header #userbox .dropdown-menu {
  top: 100% !important;
  margin-top: 4px !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
  padding: 4px !important;
  min-width: 160px;
}

.header #userbox .dropdown-menu li a,
.header #userbox .dropdown-menu a[role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink2) !important;
  border-radius: 6px;
  transition: background .1s;
  text-decoration: none;
}

.header #userbox .dropdown-menu li a:hover,
.header #userbox .dropdown-menu a[role="menuitem"]:hover {
  background: var(--bg2) !important;
  color: var(--ink) !important;
}

.header #userbox .dropdown-menu li a i,
.header #userbox .dropdown-menu a i {
  color: var(--ink4);
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.header .separator {
  width: 1px;
  height: 20px;
  background: var(--rule2);
  display: inline-block;
}

/* hide dropdown divider (removed from HTML too, belt+suspenders) */
.header #userbox .dropdown-menu .divider {
  display: none !important;
}

/* profile-info in header */
.header .profile-info {
  padding: 0;
  background: none !important;
}

/* ── INNER WRAPPER ── */
.inner-wrapper {
  background: var(--bg) !important;
}

/* Porto fixed layout uses top:60px and padding-top:110px based on its 60px header
   + 50px page-header. Override to match our 52px header (page-header is hidden). */
html.fixed .sidebar-left {
  top: 52px !important;
}
html.fixed .inner-wrapper {
  padding-top: 52px !important;
}

/* ── SIDEBAR ── */
.sidebar-left {
  background: var(--panel) !important;
  border-right: 1px solid var(--rule) !important;
  box-shadow: none !important;
}

/* Sidebar header bar
   Porto sets height:50px, toggle is position:absolute top:0 height:50px background:#171717
   We match the height, clear toggle dark bg, and left-align the title. */
.sidebar-left .sidebar-header {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 0 0 0 1rem !important;
  height: 50px !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.sidebar-left .sidebar-header .sidebar-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink4);
  background: transparent !important;
  padding: 0 !important;
}

.sidebar-left .sidebar-header .sidebar-toggle {
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--ink4);
}

.sidebar-left .sidebar-header .sidebar-toggle:hover {
  color: var(--navy2);
}

.sidebar-left .sidebar-header .sidebar-toggle i {
  color: inherit !important;
  line-height: 50px !important;
}

/* Porto sets ul.nav-main { margin-right: 5px } which creates a right-side gap.
   Remove it so active highlight fills the full sidebar width. */
.sidebar-left ul.nav-main {
  margin-right: 0 !important;
}

/* Nav items */
.nav-main > li > a,
.sidebar-left ul.nav-main > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: .5rem 1rem !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink3) !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: all .12s !important;
  line-height: 1.4 !important;
}

.nav-main > li > a:hover,
.sidebar-left ul.nav-main > li > a:hover {
  color: var(--ink) !important;
  background: var(--bg2) !important;
  border-left-color: transparent !important;
}

.nav-main > li.nav-active > a,
.sidebar-left ul.nav-main > li.nav-active > a {
  color: var(--navy) !important;
  background: var(--navy-l) !important;
  border-left-color: transparent !important;  /* no border gap at left edge */
  box-shadow: 3px 0 0 var(--navy) inset !important;  /* left indicator via shadow, no layout shift */
  font-weight: 700 !important;
}

.nav-main > li > a i,
.sidebar-left ul.nav-main > li > a i {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: inherit;
}

/* ── EXPANDED PARENT ITEM (nav-expanded) ──
   Porto sets background:#21262d which looks like a dark separator bar
   on the now-white sidebar. Replace with a subtle V3 tint. */
ul.nav-main > li.nav-expanded > a,
.sidebar-left ul.nav-main > li.nav-expanded > a {
  background: var(--bg2) !important;
}

/* ── DROPDOWN ARROW ──
   Porto's default arrow has padding:14px 25px designed for its tall nav items.
   Our nav items use less padding, so we reduce the arrow padding to match. */
.nav-main li.nav-parent > a:after,
.sidebar-left ul.nav-main li.nav-parent > a:after {
  padding: 7px 16px !important;
  font-size: 1.2rem !important;
}

/* Sub-menu items */
.nav-main > li > ul > li > a,
.sidebar-left ul.nav-main > li > ul > li > a {
  padding-left: 2.5rem !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ink3) !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
  transition: all .1s !important;
}

.nav-main > li > ul > li > a:hover,
.sidebar-left ul.nav-main > li > ul > li > a:hover {
  color: var(--ink) !important;
  background: var(--bg2) !important;
}

.nav-main > li > ul > li.nav-active > a {
  color: var(--navy2) !important;
  background: var(--navy-l) !important;
  font-weight: 600 !important;
}

/* Sub-menu container */
.nav-main > li > ul,
.sidebar-left ul.nav-main > li > ul {
  background: var(--bg) !important;
  border: none !important;
  padding: 0 !important;
}

/* Nano scroller — sidebar uses nano as its inner scroll container;
   Porto's default gives it a dark background which we must override here */
.sidebar-left .nano,
.sidebar-left .nano .nano-content {
  background: var(--panel) !important;
}

.nano > .nano-pane {
  background: var(--rule) !important;
}
.nano > .nano-pane > .nano-slider {
  background: var(--rule2) !important;
}

/* ── CONTENT BODY ── */
.content-body {
  background: var(--bg) !important;
  padding: 0 !important;  /* Porto adds 40px padding; spacing is handled by content-main-row margin */
}

/* Page header (breadcrumb bar) — hidden per V3 design */
.content-body .page-header {
  display: none !important;
}

.content-body .page-header .breadcrumbs {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.content-body .page-header .breadcrumbs > li {
  font-size: 11px;
  color: var(--ink4);
}

.content-body .page-header .breadcrumbs > li + li::before {
  color: var(--ink4);
}

.content-body .page-header .breadcrumbs > li a {
  color: var(--ink4) !important;
}

.content-body .page-header .breadcrumbs > li:last-child span {
  color: var(--ink3);
  font-weight: 600;
}

/* ── CONTENT MAIN ROW ── */
/* Replaces legacy inline margin:-45px/-25px full-bleed hack.
   10px below header (content-body starts at header bottom),
   10px from sidebar edge (container-fluid padding zeroed, margin provides gap). */
.content-body .row.content-main-row {
  margin: 15px 15px 0 15px !important;
}
.content-body .row.content-main-row .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── PANELS / CARDS ── */
.panel {
  background: var(--panel) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--rl) !important;
  box-shadow: none !important;
}

.panel .panel-body {
  padding: 1.25rem !important;
}

.panel-heading {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--rule) !important;
  border-radius: var(--rl) var(--rl) 0 0 !important;
  padding: .875rem 1.25rem !important;
}

.panel-heading .panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.panel-footer {
  background: var(--bg2) !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 0 var(--rl) var(--rl) !important;
  padding: .75rem 1.25rem !important;
}

/* ── TABLES ── */
.table {
  font-size: 12px;
  color: var(--ink2);
}

.table > thead > tr > th {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--ink4) !important;
  padding: 8px 10px !important;
  border-bottom: 2px solid var(--rule2) !important;
  background: var(--bg2) !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

.table > tbody > tr > td {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--rule) !important;
  vertical-align: middle !important;
  color: var(--ink2);
}

.table > tbody > tr:hover > td {
  background: var(--bg2) !important;
}

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

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: var(--bg) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td {
  background: var(--bg2) !important;
}

.table-bordered {
  border: 1px solid var(--rule) !important;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--rule) !important;
}

/* Responsive table wrapper */
.table-responsive {
  border: none !important;
}

/* ── BUTTONS ── */
.btn {
  font-family: var(--f) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  border-radius: var(--r) !important;
  transition: all .12s !important;
  cursor: pointer;
  line-height: 1.4;
}

.btn-primary {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--navy2) !important;
  border-color: var(--navy2) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--psl) !important;
  border-color: var(--psl) !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
  background: var(--psl-d) !important;
  border-color: var(--psl-d) !important;
  color: #fff !important;
}

.btn-danger {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
  background: #7f1515 !important;
  border-color: #7f1515 !important;
  color: #fff !important;
}

.btn-warning {
  background: var(--amber) !important;
  border-color: var(--amber) !important;
  color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus {
  background: #92400e !important;
  border-color: #92400e !important;
  color: #fff !important;
}

.btn-default {
  background: var(--panel) !important;
  border-color: var(--rule2) !important;
  color: var(--ink2) !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--bg2) !important;
  border-color: var(--ink4) !important;
  color: var(--ink) !important;
}

.btn-dark {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}
.btn-dark:hover, .btn-dark:focus {
  background: var(--navy2) !important;
  border-color: var(--navy2) !important;
  color: #fff !important;
}

.btn-sm {
  font-size: 11px !important;
  padding: 4px 10px !important;
}

.btn-lg {
  font-size: 13px !important;
  padding: 10px 22px !important;
}

.btn-block {
  width: 100%;
}

/* ── FORMS ── */
.form-control {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  background: var(--bg2) !important;
  border: 1px solid var(--rule2) !important;
  border-radius: var(--r) !important;
  padding: 7px 12px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color .12s, background .12s !important;
  line-height: 1.5 !important;
}

.form-control:focus {
  outline: none !important;
  border-color: var(--navy2) !important;
  background: var(--panel) !important;
  box-shadow: 0 0 0 3px rgba(37,88,160,.12) !important;
}

.form-control::placeholder {
  color: var(--ink4) !important;
}

.input-group-addon {
  background: var(--bg3) !important;
  border: 1px solid var(--rule2) !important;
  color: var(--ink4) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
}

.input-group .form-control:first-child {
  border-radius: var(--r) 0 0 var(--r) !important;
}

.form-group label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink3) !important;
  letter-spacing: .02em !important;
  margin-bottom: 5px !important;
  display: block;
}

.has-error .form-control {
  border-color: var(--red) !important;
  background: var(--red-l) !important;
}

.has-error .help-block,
.has-error .control-label {
  color: var(--red) !important;
}

.has-success .form-control {
  border-color: var(--psl) !important;
}

/* ── ALERTS ── */
.alert {
  border-radius: var(--r) !important;
  font-size: 13px !important;
  font-weight: 500;
  border: 1px solid;
  padding: 10px 14px !important;
}

.alert-success {
  background: var(--psl-l) !important;
  border-color: rgba(24,190,101,.35) !important;
  color: var(--psl-d) !important;
}

.alert-danger, .alert-error {
  background: var(--red-l) !important;
  border-color: rgba(153,27,27,.3) !important;
  color: var(--red) !important;
}

.alert-warning {
  background: var(--amber-l) !important;
  border-color: rgba(180,83,9,.3) !important;
  color: var(--amber) !important;
}

.alert-info {
  background: var(--navy-l) !important;
  border-color: rgba(37,88,160,.3) !important;
  color: var(--navy) !important;
}

/* ── BADGES / LABELS ── */
.label-primary, .badge-primary { background: var(--navy) !important; }
.label-success, .badge-success { background: var(--psl) !important; }
.label-danger,  .badge-danger  { background: var(--red) !important; }
.label-warning, .badge-warning { background: var(--amber) !important; color: #fff !important; }
.label-info,    .badge-info    { background: var(--navy2) !important; }
.label-default, .badge-default { background: var(--bg3) !important; color: var(--ink3) !important; }

/* ── PAGINATION ── */
.pagination > li > a,
.pagination > li > span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink3) !important;
  border-color: var(--rule2) !important;
  background: var(--panel) !important;
  border-radius: var(--r) !important;
  margin: 0 2px !important;
  padding: 5px 10px !important;
}

.pagination > li > a:hover {
  background: var(--bg2) !important;
  border-color: var(--rule2) !important;
  color: var(--ink) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

/* ── MODALS ── */
.modal-content {
  border: none !important;
  border-radius: var(--rl) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
}

.modal-header {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 1rem 1.25rem !important;
  border-radius: var(--rl) var(--rl) 0 0 !important;
}

.modal-header .modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.01em;
}

.modal-body {
  padding: 1.25rem !important;
  background: var(--panel);
}

.modal-footer {
  background: var(--bg2) !important;
  border-top: 1px solid var(--rule) !important;
  padding: .875rem 1.25rem !important;
  border-radius: 0 0 var(--rl) var(--rl) !important;
}

/* ── TABS ── */
.nav-tabs {
  border-bottom: 2px solid var(--rule) !important;
}

.nav-tabs > li > a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ink3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  transition: all .12s !important;
}

.nav-tabs > li > a:hover {
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom-color: var(--rule2) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--navy) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--navy) !important;
  font-weight: 700 !important;
}

.tab-content {
  padding: 1rem 0 0 !important;
}

/* ── PILLS NAV ── */
.nav-pills > li > a {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink3) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  transition: all .12s !important;
}

.nav-pills > li > a:hover {
  background: var(--bg2) !important;
  color: var(--ink) !important;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--navy) !important;
  color: #fff !important;
}

/* ── PROGRESS BARS ── */
.progress {
  background: var(--bg3) !important;
  border-radius: 20px !important;
  height: 6px !important;
  box-shadow: none !important;
}

.progress-bar {
  background: var(--navy) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.progress-bar-success { background: var(--psl) !important; }
.progress-bar-danger  { background: var(--red) !important; }
.progress-bar-warning { background: var(--amber) !important; }

/* ── DROPDOWNS ── */
.dropdown-menu {
  border: 1px solid var(--rule) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
  padding: 4px !important;
}

.dropdown-menu > li > a {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink2) !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  transition: background .1s !important;
}

.dropdown-menu > li > a:hover {
  background: var(--bg2) !important;
  color: var(--ink) !important;
}

.dropdown-menu > li.divider {
  background: var(--rule) !important;
  margin: 4px 0 !important;
}

/* ── WELL ── */
.well {
  background: var(--bg2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
  padding: 1rem 1.25rem !important;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11px;
}

.breadcrumb > li + li::before {
  color: var(--ink4) !important;
}

.breadcrumb > li a {
  color: var(--ink4) !important;
}

.breadcrumb > .active {
  color: var(--ink3) !important;
  font-weight: 600;
}

/* ── UTILITIES ── */

/* pill badges for status */
.spie-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-block;
}

.spie-pill-green  { background: var(--up-l);    color: var(--up); }
.spie-pill-red    { background: var(--dn-l);    color: var(--dn); }
.spie-pill-amber  { background: var(--amber-l); color: var(--amber); }
.spie-pill-navy   { background: var(--navy-l);  color: var(--navy2); }
.spie-pill-grey   { background: var(--bg3);     color: var(--ink3); }

/* KPI-style stat blocks */
.spie-stat {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--rl);
  border-top: 3px solid var(--psl);
  padding: 12px 14px;
}
.spie-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink4);
  margin-bottom: 6px;
}
.spie-stat-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.spie-stat-sub {
  font-size: 11px;
  color: var(--ink4);
  margin-top: 4px;
}

/* inline success/error messages */
.spie-msg-ok  { color: var(--up);    font-weight: 600; font-size: 13px; }
.spie-msg-err { color: var(--red);   font-weight: 600; font-size: 13px; }
.spie-msg-warn{ color: var(--amber); font-weight: 600; font-size: 13px; }

/* ── CONTENT PADDING ── */
.content-body .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.content-body > .row:first-child,
.content-body > .container-fluid:first-child {
  padding: 0 1.5rem 1.5rem !important;
}

/* offset panel wrapper injected by _top.asp */
.content-body > div[style*="margin-left:-45px"] {
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  padding: 0 1.5rem 1.5rem !important;
}

.content-body > div[style*="margin-left:-45px"] > .container-fluid {
  padding: 0 !important;
}

/* ── SCROLLBAR (webkit) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--rule2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink4); }

/* ── COLLAPSED SIDEBAR STATE ── */

/* Shrink to icon-only strip */
html.sidebar-left-collapsed .sidebar-left {
  width: 54px !important;
}

/* Hide "Navigation" title */
html.sidebar-left-collapsed .sidebar-left .sidebar-header .sidebar-title {
  display: none !important;
}

/* Hamburger stays absolutely anchored at top of strip (Porto requires this) */
html.sidebar-left-collapsed .sidebar-left .sidebar-header .sidebar-toggle {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 54px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* ── COLLAPSED STRIP (nano not hovered) — centre icons only ── */
/* Porto expands .nano to 300px on :hover; scope centering to non-hover only */
html.sidebar-left-collapsed .sidebar-left .nano:not(:hover) .nav-main > li > a {
  justify-content: center !important;
  padding: .5rem 0 !important;
  gap: 0 !important;
  border-left-color: transparent !important;
  box-shadow: none !important;  /* no left indicator in icon-only strip */
  overflow: hidden !important;
}

html.sidebar-left-collapsed .sidebar-left .nano:not(:hover) .nav-main > li > a > i {
  width: auto !important;
  font-size: 15px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Hide labels in collapsed strip */
html.sidebar-left-collapsed .sidebar-left .nano:not(:hover) .nav-main > li > a span {
  display: none !important;
}

/* ── COLLAPSED HOVER-EXPAND — Porto expands .nano to 300px on :hover ── */
/* Restore left-aligned flex layout and show labels */
html.sidebar-left-collapsed .sidebar-left .nano:hover .nav-main > li > a {
  justify-content: flex-start !important;
  padding: .5rem 1rem !important;
  gap: 8px !important;
  overflow: visible !important;
  border-left-color: transparent !important;
}

html.sidebar-left-collapsed .sidebar-left .nano:hover .nav-main > li > a > i {
  width: 18px !important;
  font-size: 13px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Higher specificity to override any display:none rules on spans during hover */
html.sidebar-left-collapsed .sidebar-left .nano:hover .nav-main > li > a span {
  display: inline !important;
  visibility: visible !important;
}

/* ── COLLAPSED — content body offset ── */
html.fixed.sidebar-left-collapsed .content-body,
html.sidebar-left-collapsed .content-body {
  margin-left: 54px !important;
  width: calc(100% - 54px) !important;
}

/* ── TOGGLE MOBILE SIDEBAR ── */
.visible-xs .toggle-sidebar-left {
  color: var(--ink3);
}

/* ── MISC OLD-THEME RESETS ── */
a { color: var(--navy2); }
a:hover { color: var(--navy); }

hr {
  border-top: 1px solid var(--rule) !important;
  margin: 1rem 0 !important;
}

/* Remove rounded inner containers that clash with panel */
.panel > .panel-body > .row > * > .panel {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Jumbotron */
.jumbotron {
  background: var(--bg2) !important;
  border: 1px solid var(--rule);
  border-radius: var(--rl) !important;
}

/* Select2 overrides */
.select2-container .select2-selection--single {
  border-color: var(--rule2) !important;
  border-radius: var(--r) !important;
  background: var(--bg2) !important;
  height: 34px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink) !important;
  line-height: 34px !important;
  padding-left: 12px !important;
  font-size: 13px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
}

.select2-dropdown {
  border-color: var(--rule) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.1) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--navy) !important;
}

/* Bootstrap datepicker */
.datepicker {
  border-radius: var(--r) !important;
  border-color: var(--rule) !important;
  font-family: var(--f) !important;
  font-size: 12px !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}
.datepicker table tr td:hover {
  background: var(--navy-l) !important;
}

/* ── SIGN / AUTH PAGES (forgot, register, recover) ── */
.body-sign {
  font-family: var(--f) !important;
  background: var(--bg) !important;
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.body-sign .center-sign {
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
}

/* Logo in sign pages */
.body-sign .logo img {
  max-height: 42px;
  width: auto;
  height: auto !important;
}

/* The panel card on sign pages */
.body-sign .panel-sign,
.body-sign .panel_login {
  background: var(--panel) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--rl) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.08) !important;
  overflow: hidden;
  margin-top: 1.25rem !important;
}

.body-sign .panel-title-sign {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 1rem 1.25rem !important;
  text-align: left !important;
  margin: 0 !important;
}

.body-sign .panel-title-sign h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
  text-transform: none !important;
  font-style: normal;
}

.body-sign .panel-title-sign h2 i {
  color: var(--navy2) !important;
  margin-right: 8px;
}

.body-sign .panel-body {
  padding: 1.25rem 1.5rem 1.5rem !important;
}

/* Forgot/recover info box */
.body-sign .alert-default {
  background: var(--navy-l) !important;
  border: 1px solid rgba(37,88,160,.2) !important;
  border-radius: var(--r) !important;
  color: var(--navy) !important;
  font-size: 13px !important;
  font-weight: 500;
  padding: 10px 14px !important;
  margin-bottom: 1rem;
}

/* Sign page form controls */
.body-sign .form-control {
  font-family: var(--f) !important;
  font-size: 13px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--rule2) !important;
  border-radius: var(--r) !important;
  color: var(--ink) !important;
  height: 40px !important;
  padding: 9px 12px !important;
  box-shadow: none !important;
}

.body-sign .form-control:focus {
  border-color: var(--navy2) !important;
  background: var(--panel) !important;
  box-shadow: 0 0 0 3px rgba(37,88,160,.12) !important;
}

.body-sign .input-group-btn .btn {
  height: 40px !important;
  line-height: 1.4 !important;
}

/* Sign page footer text */
.body-sign > .center-sign > p.text-muted {
  font-size: 12px;
  color: var(--ink4) !important;
  margin-top: 1.5rem !important;
  text-align: center;
}

.body-sign > .center-sign > p a {
  color: var(--ink3) !important;
}

.body-sign > .center-sign > p a:hover {
  color: var(--navy2) !important;
}

/* ============================================================
   OASIS — Sign-in screen (logged-out shell)
   Rendered by /include/default_top.asp when session not logged in.
   ============================================================ */
body.body-oasis-sign {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem; background: var(--bg) !important;
}
.login-wrap { width: 100%; max-width: 400px; }
.login-logo { text-align: center; margin-top: 1rem; margin-bottom: 2rem; }
.login-logo img { max-height: 46px; width: auto; }
.login-card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--rl); box-shadow: 0 4px 24px rgba(4,30,66,.10); overflow: hidden;
}
.login-card-header { padding: 1.25rem 1.5rem 0; border-bottom: none; }
.login-card-header h2 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin: 0 0 2px; }
.login-card-header p { font-size: 13px; color: var(--ink3); margin: 0; }
.login-card-divider { height: 1px; background: var(--rule); margin: 1rem 1.5rem 0; }
.login-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.login-card-body form { width: 100%; margin: 0; background: none; }
.field-group { margin-bottom: 1rem; }
.field-group label {
  display: block; float: none; width: auto; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--ink3); letter-spacing: .04em; margin: 0 0 5px;
}
.input-wrap { position: relative; }
.login-card .input-wrap input {
  box-sizing: border-box !important;
  width: 100% !important; font-family: var(--f); font-size: 13px; font-weight: 400;
  color: var(--ink); background: var(--bg2);
  border: 1px solid var(--rule2); border-radius: var(--r);
  padding: 9px 12px 9px 35px !important; height: 40px !important;
  transition: border-color .12s, background .12s; outline: none;
}
.login-card .input-wrap input:focus {
  border-color: var(--navy2); background: var(--panel);
  box-shadow: 0 0 0 3px rgba(71,137,200,.18);
}
.input-wrap .field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 1;
  color: var(--ink4); font-size: 13px; pointer-events: none;
}
.login-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; gap: 10px; }
.forgot-link { font-size: 12px; font-weight: 500; color: var(--ink3); text-decoration: none; transition: color .12s; }
.forgot-link:hover { color: var(--navy2); }
.btn-signin {
  font-family: var(--f); font-size: 13px; font-weight: 700;
  padding: 9px 22px; border-radius: var(--r); border: none;
  background: var(--navy); color: #fff; cursor: pointer;
  transition: background .12s; white-space: nowrap; line-height: 1.4;
}
.btn-signin:hover { background: var(--navy2); }
.login-error {
  display: flex; align-items: center; gap: 8px;
  background: var(--red-l); border: 1px solid rgba(192,57,43,.25);
  border-radius: var(--r); padding: 10px 14px; margin-top: 1rem;
  font-size: 13px; font-weight: 500; color: var(--red);
}
.login-error i { flex-shrink: 0; }
.login-notice {
  background: var(--amber-l); border: 1px solid rgba(199,119,0,.25);
  border-radius: var(--r); padding: 10px 14px; margin-bottom: 1rem;
  font-size: 12.5px; font-weight: 500; color: var(--amber);
}
.login-footer { text-align: center; margin-top: 1.5rem; font-size: 12px; color: var(--ink4); }
.login-footer a { color: var(--ink3); text-decoration: none; }
.login-footer a:hover { color: var(--navy2); }

/* ── Oasis footer bar inside the logged-in shell ── */
.oasis-footer {
  padding: 10px 18px; font-size: 12px; color: var(--ink4);
  border-top: 1px solid var(--rule); background: var(--panel);
  text-align: center;
}
.oasis-footer a { color: var(--ink3); text-decoration: none; }
.oasis-footer a:hover { color: var(--navy2); }

/* ============================================================
   OASIS — Legacy module compatibility layer
   The Franchise modules were built for the old fixed-width theme
   (css/default.css, css/style.css) which is no longer loaded.
   These rules keep legacy markup (utility links, tables, forms)
   looking clean inside the new Porto/Oasis panels.
   ============================================================ */

/* Keep wide legacy tables from breaking the panel */
.panel-body { overflow-x: auto; }
.panel-body img { max-width: 100%; height: auto; }

/* Legacy utility links */
a.admin_link { color: var(--navy2) !important; font-weight: 600; text-decoration: none; }
a.admin_link:hover { color: var(--navy) !important; text-decoration: underline; }
a.normal_link { color: var(--ink2) !important; text-decoration: none; }
a.normal_link:hover { color: var(--navy2) !important; }

/* Legacy data tables (many modules render bare <table>s) */
.panel-body table { border-collapse: collapse; max-width: 100%; }
.panel-body table.table_layout,
.panel-body table.table_left { margin: 0; border: 0; }
.panel-body th { background: var(--bg2); color: var(--ink2); font-weight: 700;
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--rule); }
.panel-body td { padding: 7px 10px; border-bottom: 1px solid var(--rule); color: var(--ink2); vertical-align: top; }

/* Legacy inline submit buttons / generic buttons inside content */
.panel-body input[type="submit"],
.panel-body input[type="button"],
.panel-body button:not(.btn-signin):not(.close) {
  font-family: var(--f); font-size: 13px; font-weight: 700;
  background: var(--navy); color: #fff; border: none;
  padding: 7px 16px; border-radius: var(--r); cursor: pointer;
  transition: background .12s;
}
.panel-body input[type="submit"]:hover,
.panel-body input[type="button"]:hover,
.panel-body button:not(.btn-signin):not(.close):hover { background: var(--navy2); }

/* Legacy fieldset/legend from old form.css usage */
.panel-body fieldset { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; }
.panel-body legend { color: var(--ink); font-weight: 700; font-size: 14px; padding: 0 6px; width: auto; border: 0; }

/* Legacy messages.css alerts sit fine, but give them breathing room */
.panel-body .message, .panel-body .messages { margin-bottom: 12px; }