/* ============================================================
   Asset ICT brand + modern overlay for the HostBill "assetict" theme
   (forked from design11). Loaded LAST in header.tpl so it wins the cascade.
   Brand: teal #007E8C / charcoal #15191c, Plus Jakarta Sans + Inter.
   Login page validated live; dashboard pass to refine against a logged-in render.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --aict-teal:#007E8C; --aict-teal-bright:#11A8B8; --aict-teal-deep:#045863;
  --aict-ink:#1b2024; --aict-charcoal:#15191c; --aict-soft:#F4F8F9; --aict-line:#E4ECEE;
  --aict-page:#F7FAFB;
}

/* ---------- Typography ---------- */
body, #ca11, .span10, input, select, textarea, button, .btn, p, td, li, label{
  font-family:'Inter', system-ui, -apple-system, Arial, sans-serif !important;
  color:var(--aict-ink);
}
h1, h2, h3, h4, h5, .dashboard h1, .dashboard h2, .dashboard h3, .news-body h4{
  font-family:'Plus Jakarta Sans','Inter',sans-serif !important;
  letter-spacing:-.01em;
}

/* ---------- Modern base ---------- */
body, #main-section, .dashboard{ background:var(--aict-page) !important; }
#page{ background:var(--aict-page) !important; }

/* ============================================================
   DASHBOARD CHROME (top bar + sidebar) — validated live on a
   logged-in client area 30 Jun 2026.
   ============================================================ */
/* Top bar */
.navbar .navbar-inner, #main-header .navbar-inner{
  background:var(--aict-charcoal) !important; background-image:none !important;
  border:0 !important; box-shadow:0 1px 0 rgba(255,255,255,.05) !important;
}
.navbar-inner .brand, .navbar-inner a, .navbar-inner .nav > li > a,
.navbar-inner .icon, .navbar-inner [class^="icon-"], .navbar-inner [class*=" icon-"],
.navbar-inner [class^="icon "], .navbar-inner .entypo{ color:#fff !important; }
.navbar-inner .badge-top{ border:1px solid var(--aict-charcoal) !important; }
.aict-nav-logo{ height:32px; width:auto; display:inline-block; vertical-align:middle; }

/* ---------- Links ---------- */
a{ color:var(--aict-teal); }
a:hover{ color:var(--aict-teal-deep); }

/* ---------- Buttons ---------- */
.btn, button.btn, .progress-button, .progress-btn{
  border-radius:9px !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:600 !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  background-image:none !important;
  text-shadow:none !important;
}
.btn-success, .btn-primary, .progress-button,
.btn-success:focus, .btn-primary:focus, .btn-info{
  background:var(--aict-teal) !important; color:#fff !important; border-color:var(--aict-teal) !important;
}
.btn-success:hover, .btn-primary:hover, .progress-button:hover, .btn-info:hover{
  background:var(--aict-teal-deep) !important; border-color:var(--aict-teal-deep) !important; color:#fff !important;
}
.btn-default, .btn-grey, .btn-secondary{
  background:#fff !important; color:var(--aict-ink) !important; border:1px solid var(--aict-line) !important;
}
.btn-default:hover, .btn-grey:hover{ border-color:var(--aict-teal) !important; color:var(--aict-teal) !important; }

/* ---------- Left side menu (design11 stacked nav) ----------
   design11 ships #main-side at rgb(207,215,229) pale blue with a
   rgb(39,86,154) toggle block; every <li>/<a> also carries the pale
   fill, and the unfold slide-out + the absolutely-positioned #logout
   inherit it. We force the whole column (folded, unfolded and logout)
   to charcoal. Validated live on a logged-in dashboard 30 Jun 2026. */
/* Every widening surface (panel, the rgb(39,86,154) toggle header, nav, and
   the hover/unfold "main menu" flyout) must be OPAQUE charcoal: on hover
   #main-side gets a .hover class and nav/header widen 68->210px, overflowing
   the 68px column — if they are transparent the flyout shows the page behind.
   Only the <li>/<a> stay transparent so the charcoal shows through. */
#main-side, aside#main-side,
#main-side header, #main-side nav, #main-side .nav-stacked, #main-side ul.nav,
#main-side .main_menu{ background:var(--aict-charcoal) !important; border:0 !important; }
#main-side header{ box-shadow:none !important; }
/* collapsed, the column only grows as tall as its menu items, leaving a white
   gap above the absolutely-pinned Logout — stretch it to full height. */
#main-side, aside#main-side{ min-height:100vh !important; }
#main-side li{ background:transparent !important; }
#main-side header h4{ color:#fff !important; }
#main-side header .icon-reorder, #main-side header i, #main-side header a{ color:#fff !important; }
.nav-stacked > li > a{ background:transparent !important; color:rgba(255,255,255,.85) !important; border:0 !important; }
.nav-stacked > li > a:hover,
.nav-stacked > li.active > a,
.nav-stacked > li > a.active{
  background:rgba(17,168,184,.16) !important; color:#fff !important;
  border-left:3px solid var(--aict-teal-bright) !important;
}
/* Note: do NOT force the label span's opacity here — design11 already hides
   it collapsed and reveals it via .unfold / #main-side.hover. Overriding it
   makes the labels peek out of the 68px collapsed rail. */
/* Logout sits OUTSIDE #main-side (absolute under #page) — colour it to match */
#logout, #logout > li{ background:var(--aict-charcoal) !important; }
#logout > li > a{ background:transparent !important; color:rgba(255,255,255,.85) !important; border:0 !important; }
#logout > li > a:hover{ background:rgba(17,168,184,.16) !important; color:#fff !important; }

/* Sidebar submenu flyouts (Order / Services etc.) shipped white on hover —
   darken so the slide-out matches the charcoal column. */
#main-side .dropdown-menu{
  background:var(--aict-charcoal) !important; border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.30) !important; border-radius:12px !important; padding:6px !important;
}
#main-side .dropdown-menu > li > a{
  background:transparent !important; color:rgba(255,255,255,.82) !important; border:0 !important; border-radius:8px !important;
}
#main-side .dropdown-menu > li > a:hover{ background:rgba(17,168,184,.16) !important; color:#fff !important; }
#main-side .dropdown-menu .divider{ background:rgba(255,255,255,.08) !important; border:0 !important; }
/* design11 drew a left-pointing caret on BOTH the menu and every item (a pale
   border triangle) — once darkened it showed as a "double arrow". Hide them. */
#main-side .dropdown-menu::before, #main-side .dropdown-menu::after,
#main-side .dropdown-menu > li > a::before, #main-side .dropdown-menu > li > a::after{
  display:none !important; content:none !important; border:0 !important;
}

/* ---------- Top tabs / submenu accent ---------- */
#mainmenu .nav-tabs > li.active > a,
#mainmenu .nav-tabs > li > a:hover,
.dropdown.open .dropdown-toggle{
  color:var(--aict-teal) !important; border-bottom-color:var(--aict-teal) !important;
}

/* ---------- Tables ---------- */
.table thead th, .table th{
  background:var(--aict-soft) !important; color:var(--aict-ink) !important;
  border-bottom:1px solid var(--aict-line) !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
}
.table td, .table th{ border-color:var(--aict-line) !important; }
.table-striped tbody tr:nth-child(odd) td{ background:#fafcfc !important; }

/* ---------- Form fields ---------- */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], select, textarea{
  border:1px solid var(--aict-line) !important; border-radius:9px !important; box-shadow:none !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--aict-teal) !important;
  box-shadow:0 0 0 3px rgba(0,126,140,.12) !important; outline:none !important;
}

/* ---------- Cards / panels / boxes (modern) ---------- */
.box, .panel, .news-container, .dashboardblock, .well, .square-box, .product-box, .pricebox{
  border-radius:14px !important;
  border:1px solid var(--aict-line) !important;
  box-shadow:0 1px 3px rgba(16,39,44,.04) !important;
}

/* ---------- Root dashboard tiles -> brand palette ---------- */
.square-box-sky-blue{ background:var(--aict-teal) !important; }
.square-box-green{ background:var(--aict-teal-deep) !important; }
.square-box-grey{ background:var(--aict-charcoal) !important; }
.square-box .middle-cricle{ background:rgba(255,255,255,.15) !important; }
.square-box p{ font-family:'Plus Jakarta Sans',sans-serif !important; }

/* ---------- Cart / order progress ---------- */
.progress-indicator .active, .step.active, .nav-cart li.active,
.steps .active, .order-steps .active{ color:var(--aict-teal) !important; }
.price, .pricebox .price, .amount, .product-price{ color:var(--aict-teal) !important; }

/* ---------- Status labels that used the old blue ---------- */
.label-Answered, .label-Sent, .label-In-Progress, .label-info{
  background:var(--aict-teal) !important; color:#fff !important;
}

/* ---------- Catch-all for inline sky-blue accents ---------- */
[style*="#2fbbf8"], [style*="#3875d7"], [style*="#26a5d8"], [style*="#2a62bc"]{
  color:var(--aict-teal) !important;
}

/* ============================================================
   LOGIN PAGE (#left_login sidebar + #right_login form) — validated live
   ============================================================ */
#login-widget, #login-widget-form, #right_login, .login-widget-form{ background:#fff !important; }
#left_login{ background:linear-gradient(160deg, var(--aict-charcoal), #0c1d21) !important; }
#left_login, #left_login *{ color:#fff !important; }
#left_login h4{
  color:rgba(255,255,255,.6) !important; font-family:'Inter',sans-serif !important;
  font-weight:500 !important; letter-spacing:.05em; text-transform:uppercase; font-size:12px !important;
}
#left_login h1{ font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800 !important; letter-spacing:-.02em; margin:8px 0 0 !important; }
.aict-login-logo{ max-width:190px; height:auto; display:block; }
#left_login .login-divider{ background:rgba(255,255,255,.14) !important; height:1px !important; border:0 !important; }
#left_login .create_account a, #left_login .create_account .entypo{ color:var(--aict-teal-bright) !important; }

#right_login h1{ color:var(--aict-ink) !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800 !important; }
#right_login h4{ color:#5b6a70 !important; font-family:'Inter',sans-serif !important; font-weight:400 !important; }
#right_login .top_divider{ background:var(--aict-teal) !important; height:3px !important; width:54px !important; border-radius:3px; margin:6px 0 18px; }

.login-input{ margin-bottom:14px !important; background:transparent !important; border:0 !important; padding:0 !important; }
.login-input .add-on{ display:none !important; }                 /* drop the dated emoji icons */
.login-input input{
  border:1px solid var(--aict-line) !important; border-radius:9px !important;
  box-shadow:none !important; padding:9px 14px !important; height:auto !important; background:#fff !important;
}
.login-input input:focus{ border-color:var(--aict-teal) !important; box-shadow:0 0 0 3px rgba(0,126,140,.12) !important; }

#login-widget-submit{
  background:var(--aict-teal) !important; border:0 !important; border-radius:9px !important; color:#fff !important;
  font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:600 !important;
  box-shadow:none !important; background-image:none !important; text-shadow:none !important; padding:11px 26px !important;
}
#login-widget-submit:hover{ background:var(--aict-teal-deep) !important; }
.login_footer h6{ color:#9aa6ab !important; font-family:'Inter',sans-serif !important; letter-spacing:.04em; }