/* SmartFuel - "Dark Energy" theme. Additive reskin layered over Bootstrap 3 + smartfuel.css.
   Strong restyle of the chrome (dark sidebar + light topbar, fuel-orange accents); light, safe polish on page content.
   Loaded only behind ?skin=dark so live users are unaffected until approved. */
:root{
  --de-rail:#0E1526; --de-rail-2:#0A0F1D; --de-ink:#EAEEF6; --de-mut:#9AA6BC; --de-line:#1E2840;
  --de-canvas:#F3F5F8; --de-surface:#FFFFFF; --de-ctext:#1A2030; --de-cmut:#5B6678; --de-cline:#E6E9EF;
  --de-acc:#F97316; --de-acc2:#FBBF24; --de-acc-deep:#A8420B; --de-acc-tint:#FFF2E8;
}

/* ---------- canvas ---------- */
body{ background:var(--de-canvas) !important; }
#page-content-wrapper{ background:var(--de-canvas) !important; }
.page-content{ background:var(--de-canvas) !important; color:var(--de-ctext); }

/* ---------- topbar ---------- */
.smartfuel-navbar-header{ background:var(--de-surface) !important; border-bottom:1px solid var(--de-cline) !important; box-shadow:0 1px 4px rgba(18,24,38,.06); min-height:62px !important; }
.navbar_right, .navbar_right span, .navbar_right a{ color:var(--de-ctext) !important; }
.navbar_right a[href*="logout"]{ color:var(--de-acc-deep) !important; font-weight:600; }
.notify-bubble{ background:var(--de-acc) !important; color:#fff !important; border:2px solid var(--de-surface) !important; }
.notify-container .glyphicon-bell{ color:var(--de-cmut) !important; }
.navbar_center.alert-warning{ background:var(--de-acc-tint) !important; border-color:#F6C99A !important; color:var(--de-acc-deep) !important; border-radius:999px !important; }

/* ---------- sidebar shell ---------- */
#sidebar-wrapper{ background:var(--de-rail) !important; border-right:1px solid var(--de-line) !important; }
#sidebar-wrapper::-webkit-scrollbar{ width:9px; }
#sidebar-wrapper::-webkit-scrollbar-track{ background:var(--de-rail-2); }
#sidebar-wrapper::-webkit-scrollbar-thumb{ background:#26324c; border-radius:9px; border:2px solid var(--de-rail); }
#sidebar-menu, #sidebar-menu .panel, #sidebar-menu .panel-collapse{ background:transparent !important; border:0 !important; box-shadow:none !important; margin:0 !important; border-radius:0 !important; }
#sidebar-menu .panel-body{ background:var(--de-rail-2) !important; border:0 !important; padding:6px 0 8px !important; }

/* ---------- top-level menu ---------- */
#sidebar-menu .panel-heading{ background-color:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; border-left:3px solid transparent; transition:background .15s, border-color .15s; }
#sidebar-menu .panel-heading:hover{ background-color:rgba(249,115,22,.10) !important; }
#sidebar-menu .panel-title, #sidebar-menu .panel-title a, #sidebar-menu .collapsible{ color:var(--de-ink) !important; font-weight:500; }
#sidebar-menu .panel-title{ font-size:1.02em !important; }
#sidebar-menu .collapsible:not(.collapsed){ color:#ffffff !important; }
#sidebar-menu .panel:has(.collapsible:not(.collapsed)) .panel-heading{ background-color:rgba(249,115,22,.15) !important; border-left-color:var(--de-acc) !important; }
#panel-heading-hidemenu .panel-title a{ color:var(--de-mut) !important; text-transform:uppercase; letter-spacing:.07em; font-size:.8em !important; }

/* ---------- submenu ---------- */
#sidebar-menu .sidebar-submenu-item a, #sidebar-menu .sidebar-submenu-item1 a, #sidebar-menu .sidebar-submenu-item2 a{ color:var(--de-mut) !important; transition:color .13s; }
#sidebar-menu .sidebar-submenu-item a:hover, #sidebar-menu .sidebar-submenu-item1 a:hover, #sidebar-menu .sidebar-submenu-item2 a:hover{ color:var(--de-acc2) !important; }
#sidebar-menu .separate-2px-h-dark{ background:var(--de-line) !important; height:1px !important; }
.input-filter{ background:#111a2e !important; border:1px solid var(--de-line) !important; color:var(--de-ink) !important; border-radius:8px; padding:5px 10px; }
.input-filter::placeholder{ color:#6b7791 !important; }

/* ---------- hover name tooltip (shows the menu name, essential when the rail is collapsed) ---------- */
#sidebar-menu [data-tip]{ position:relative; }
#sidebar-menu [data-tip]:hover::after{ content:attr(data-tip); position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:10px; background:#0B1220; color:#fff; padding:6px 11px; border-radius:8px; white-space:nowrap; font-size:12.5px; font-weight:500; z-index:3000; box-shadow:0 8px 22px rgba(0,0,0,.4); pointer-events:none; }
#sidebar-menu [data-tip]:hover::before{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:4px; border:6px solid transparent; border-right-color:#0B1220; z-index:3000; pointer-events:none; }

/* ---------- buttons & accents ---------- */
.btn-primary{ background-color:var(--de-acc) !important; border-color:var(--de-acc) !important; color:#fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active{ background-color:#EA6A0C !important; border-color:#EA6A0C !important; }
a.btn-link, .text-primary{ color:var(--de-acc-deep) !important; }

/* ---------- content panels / cards (light polish) ---------- */
#page-content-wrapper .panel{ border:1px solid var(--de-cline) !important; border-radius:12px !important; box-shadow:0 1px 2px rgba(18,24,38,.04) !important; overflow:hidden; }
#page-content-wrapper .panel-default>.panel-heading{ background:var(--de-surface) !important; border-bottom:1px solid var(--de-cline) !important; color:var(--de-ctext) !important; font-weight:600; }
#page-content-wrapper .panel-primary>.panel-heading{ background:var(--de-rail) !important; border-color:var(--de-rail) !important; }
#page-content-wrapper .well{ background:var(--de-surface) !important; border:1px solid var(--de-cline) !important; border-radius:12px !important; box-shadow:none !important; }

/* ---------- tables ---------- */
#page-content-wrapper .table>thead>tr>th{ border-bottom:2px solid var(--de-cline) !important; color:var(--de-cmut) !important; text-transform:uppercase; font-size:.78em; letter-spacing:.04em; }
#page-content-wrapper .table-hover>tbody>tr:hover{ background:#FAFAFC !important; }

/* ---------- form focus + nav accents ---------- */
#page-content-wrapper .form-control:focus{ border-color:var(--de-acc2) !important; box-shadow:0 0 0 3px rgba(251,191,36,.18) !important; }
#page-content-wrapper .nav-tabs>li.active>a{ border-top:2px solid var(--de-acc) !important; }
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover{ background-color:var(--de-acc) !important; border-color:var(--de-acc) !important; }
.label-primary{ background-color:var(--de-acc) !important; }

/* ---------- login screen (CSS only - form markup/action untouched) ---------- */
body#login-body{ background:var(--de-rail) url('de-doodle.svg') repeat !important; }
#login-box-wrapper{ margin-top:7vh !important; }
#login-box{ width:430px !important; max-width:92vw; padding:34px 34px 30px !important; background:var(--de-surface) !important; border:1px solid rgba(0,0,0,.06) !important; border-radius:16px !important; box-shadow:0 24px 70px rgba(0,0,0,.5) !important; }
#smartfuel-login-logo{ margin:0 auto 12px !important; }
#login-box .form-signin-heading{ text-align:center; color:var(--de-ctext) !important; font-weight:600; font-size:20px; margin:2px 0 6px; }
#login-box .input-block-level{ width:100%; border:1px solid var(--de-cline) !important; border-radius:10px !important; padding:11px 13px !important; font-size:15px !important; margin-bottom:12px !important; color:var(--de-ctext); background:#fff; box-shadow:none !important; }
#login-box .input-block-level:focus{ border-color:var(--de-acc2) !important; box-shadow:0 0 0 3px rgba(251,191,36,.2) !important; outline:none; }
#login-box .btn-primary, #login-box input[type="submit"]{ background:var(--de-acc) !important; border-color:var(--de-acc) !important; color:#fff !important; border-radius:10px !important; padding:12px !important; font-weight:600 !important; font-size:15px !important; margin-top:4px; }
#login-box .btn-primary:hover, #login-box input[type="submit"]:hover{ background:#EA6A0C !important; border-color:#EA6A0C !important; }
#login-box hr{ border-top:1px solid var(--de-cline) !important; margin:18px 0 14px; }
#login-box a{ color:var(--de-acc-deep) !important; font-weight:500; text-decoration:none; }
#login-box a:hover{ color:var(--de-acc) !important; text-decoration:underline; }
#login-box hr ~ div{ text-align:center; font-size:13px; color:var(--de-cmut); }

/* ---------- top bar: modern account cluster ---------- */
.smartfuel-navbar-header{ min-height:64px !important; }
#log.navbar_right{ display:flex !important; align-items:center; gap:13px; height:64px; padding-right:22px; color:var(--de-cmut) !important; font-size:13px; }
#log.navbar_right span{ color:var(--de-cmut) !important; }
#log.navbar_right > span:not([class]){ color:var(--de-ctext) !important; font-weight:600; font-size:14px; letter-spacing:.1px; }
/* bell -> circular button */
#log .notify-container{ position:relative; width:38px; height:38px; border-radius:50%; background:#F1F3F8; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; flex:0 0 auto; }
#log .notify-container:hover{ background:#E6EAF2; }
#log .notify-container .glyphicon-bell{ color:var(--de-cmut) !important; font-size:16px; top:0; }
#log .notify-container:hover .glyphicon-bell{ color:var(--de-acc) !important; }
#log .notify-bubble{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; line-height:15px; padding:0 4px; font-size:10px; text-align:center; }
/* logout -> pill */
#log a[href*="logout"]{ display:inline-flex; align-items:center; gap:6px; background:var(--de-acc-tint) !important; color:var(--de-acc-deep) !important; border:1px solid #F6D4B5; padding:7px 14px; border-radius:999px; font-weight:600; font-size:12.5px; line-height:1; transition:all .15s; text-decoration:none !important; }
#log a[href*="logout"]:hover{ background:var(--de-acc) !important; border-color:var(--de-acc) !important; color:#fff !important; }
#log a[href*="logout"]::before{ font-family:'Glyphicons Halflings'; content:"\e163"; font-size:11px; }

/* ---------- modern flash / alert messages ---------- */
.messages .alert:not(.btn), #page-content-wrapper .alert:not(.btn){
  position:relative; border:0; border-radius:12px; padding:14px 46px 14px 18px;
  margin-bottom:18px; font-size:14.5px; line-height:1.5; color:var(--de-ctext);
  background:var(--de-surface); box-shadow:0 8px 24px rgba(18,24,38,.08);
}
.messages .alert:not(.btn) .close, #page-content-wrapper .alert:not(.btn) .close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); float:none;
  opacity:.4; font-size:18px; font-weight:600; color:var(--de-cmut); text-shadow:none;
  width:26px; height:26px; border-radius:7px; transition:opacity .15s, background .15s;
}
.messages .alert:not(.btn) .close:hover, #page-content-wrapper .alert:not(.btn) .close:hover{ opacity:1; background:rgba(18,24,38,.06); }
/* variants: left accent + soft tint + icon badge */
.messages .alert-success:not(.btn), #page-content-wrapper .alert-success:not(.btn){ background:#ECFDF3 !important; border-left:4px solid #16A34A; padding-left:48px; }
.messages .alert-danger:not(.btn),  #page-content-wrapper .alert-danger:not(.btn){  background:#FEF2F2 !important; border-left:4px solid #DC2626; padding-left:48px; }
.messages .alert-warning:not(.btn), #page-content-wrapper .alert-warning:not(.btn){ background:#FFFBEB !important; border-left:4px solid #D97706; padding-left:48px; }
.messages .alert-info:not(.btn),    #page-content-wrapper .alert-info:not(.btn){    background:#EFF6FF !important; border-left:4px solid #2563EB; padding-left:48px; }
.messages .alert:not(.btn)[class*="alert-"]::before, #page-content-wrapper .alert:not(.btn)[class*="alert-"]::before{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:700; font-family:Arial, Helvetica, sans-serif;
}
.messages .alert-success:not(.btn)::before, #page-content-wrapper .alert-success:not(.btn)::before{ content:"\2713"; background:#16A34A; }
.messages .alert-danger:not(.btn)::before,  #page-content-wrapper .alert-danger:not(.btn)::before{  content:"\2715"; background:#DC2626; }
.messages .alert-warning:not(.btn)::before, #page-content-wrapper .alert-warning:not(.btn)::before{ content:"!";     background:#D97706; }
.messages .alert-info:not(.btn)::before,    #page-content-wrapper .alert-info:not(.btn)::before{    content:"i";     background:#2563EB; }