/* ============================================================
   iFastHosting "Trust" skin for the twenty-one client theme.
   Matches the main site: Nunito Sans, navy #0d2b56, green CTAs,
   black nav. Loaded automatically via head.tpl assetExists.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap');

:root {
  --t-navy: #0d2b56;
  --t-nav: #0e0e0e;
  --t-blue: #0e5cad;
  --t-green: #2fa84f;
  --t-green2: #279445;
  --t-red: #e02130;
  --t-light: #f4f6f9;
  --t-ink: #1e2b45;
  --t-gray: #5c6c82;
  --t-line: #e4e9f1;
}

body {
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  color: var(--t-ink);
  background-color: var(--t-light);
}
h1, h2, h3, h4, h5, .display-4, .h1, .h2, .h3, .card-title,
.header-lined h1, .page-header h1 {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  color: var(--t-navy);
}

/* ---------- top utility bar ---------- */
.header .navbar-light {
  background: #fff;
  border-bottom: 1px solid var(--t-line);
}
.navbar-brand img, .navbar-brand .logo-img { height: 38px; max-height: 38px; width: auto; }

/* ---------- main navigation (Trust black) ---------- */
.main-navbar-wrapper,
.navbar.main-navbar-wrapper {
  background: var(--t-nav) !important;
}
.main-navbar-wrapper .navbar-nav .nav-link {
  color: #fff !important;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-item.active .nav-link,
.main-navbar-wrapper .navbar-nav .nav-item.show .nav-link {
  color: #53bce6 !important;
  background: transparent;
}
.main-navbar-wrapper .dropdown-menu {
  border: 1px solid var(--t-line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(13, 43, 86, .16);
}
.main-navbar-wrapper .dropdown-item:hover { background: var(--t-light); color: var(--t-blue); }

/* ---------- links & buttons (green CTAs) ---------- */
a { color: var(--t-blue); }
a:hover { color: var(--t-navy); }
.btn-primary, .btn-success,
.btn-styled-dark,
.btn.btn-primary:not(:disabled):not(.disabled),
.btn-success:not(:disabled):not(.disabled) {
  background-color: var(--t-green) !important;
  border-color: var(--t-green) !important;
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .03em;
  border-radius: 8px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--t-green2) !important;
  border-color: var(--t-green2) !important;
}
.btn-outline-primary { color: var(--t-green2) !important; border-color: var(--t-green) !important; }
.btn-outline-primary:hover { background: var(--t-green) !important; color: #fff !important; }
.btn-default { border-radius: 8px; }
.btn-link { color: var(--t-blue); }
.text-primary { color: var(--t-blue) !important; }
.bg-primary { background-color: var(--t-navy) !important; }
.badge-info, .badge-primary { background-color: var(--t-green); }
.border-primary { border-color: var(--t-green) !important; }

/* ---------- cards / panels ---------- */
.card { border: 1px solid var(--t-line); border-radius: 14px; }
.card .card-header {
  background: #fff;
  border-bottom: 1px solid var(--t-line);
  border-radius: 14px 14px 0 0 !important;
  font-weight: 800;
  color: var(--t-navy);
}
.card[class*="card-accent-"] { border-top: 3px solid var(--t-green) !important; }

/* ---------- store product cards ---------- */
#products .card, .products .product, .card.product { transition: transform .16s ease, box-shadow .16s ease; }
#products .card:hover, .card.product:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(13, 43, 86, .12); }
.product .product-pricing .price, .pricing .price { color: var(--t-navy); font-weight: 900; }
.product.featured, .card.featured { border: 1.5px solid var(--t-green); }

/* ---------- breadcrumb / sidebar ---------- */
.master-breadcrumb { background: transparent; }
.master-breadcrumb .breadcrumb { background: transparent; font-size: .82rem; padding-left: 0; }
.breadcrumb-item.active { color: var(--t-gray); }
.sidebar .card-header { background: #fff; color: var(--t-navy); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
  background: rgba(47, 168, 79, .1);
  color: var(--t-green2);
  border-left: 3px solid var(--t-green);
  font-weight: 800;
}
.sidebar .list-group-item:hover { color: var(--t-green2); }

/* ---------- forms ---------- */
.form-control:focus, .custom-select:focus {
  border-color: var(--t-green);
  box-shadow: 0 0 0 .16rem rgba(47, 168, 79, .18);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--t-green);
  border-color: var(--t-green);
}

/* ---------- misc ---------- */
.alert-info { background: #E8F1FB; border-color: #bcd6f2; color: #123a75; }
.progress-bar { background-color: var(--t-green); }
.domain-checker-bg, .domain-checker-container {
  background: linear-gradient(135deg, #0f3766, #0b2348) !important;
  border-radius: 16px;
}
.domain-checker-bg .btn, .domain-checker-container .btn-search {
  background: var(--t-green) !important;
  border-color: var(--t-green) !important;
  color: #fff !important;
}
.table thead th { border-top: 0; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfd; }

/* ---------- footer ---------- */
#footer, .footer, section#footer { background: #0a1e3c !important; color: #b9c7dd; }
#footer a, .footer a { color: #dbe6f5; }
#footer a:hover, .footer a:hover { color: #7ee29b; }
.back-to-top { background: var(--t-green); }
.login-leftcol .card, .main-content .card { box-shadow: 0 6px 22px rgba(13, 43, 86, .06); }

@media (max-width: 767px) {
  .navbar-brand img { height: 30px; }
}

/* ============================================================
   PREMIUM DASHBOARD UPGRADE (v2 — 2026-07-17)
   Appended to the Trust skin. Modernises the client-area panel:
   premium stat tiles, softer cards, dashboard hero, polish.
   ============================================================ */

/* soft page backdrop */
body { background: linear-gradient(180deg,#f5f7fb 0%, #eef2f8 100%) !important; }

/* ---- main navigation: replace harsh black with premium brand navy ---- */
.main-navbar-wrapper,
.navbar.main-navbar-wrapper,
.header .main-navbar-wrapper {
  background: linear-gradient(90deg,#0d2b56 0%, #123e7e 55%, #0e5cad 130%) !important;
  border-bottom: 3px solid #2fa84f;               /* brand green underline accent */
  box-shadow: 0 6px 18px rgba(13,43,86,.18);
}
/* nav links are plain <a class="pr-4"> anchors (not .nav-link) — target broadly */
.main-navbar-wrapper a,
.main-navbar-wrapper .nav-link,
.main-navbar-wrapper .navbar-text,
.main-navbar-wrapper .fa-caret-down { color:#eef4fc !important; opacity:1 !important; font-weight:700; }
.main-navbar-wrapper a:hover,
.main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .show > a,
.main-navbar-wrapper .active > a { color:#8ff0b0 !important; }
/* keep dropdown-menu items dark on their white background */
.main-navbar-wrapper .dropdown-menu a,
.main-navbar-wrapper .dropdown-item { color:#1e2b45 !important; font-weight:600; }
.main-navbar-wrapper .dropdown-menu a:hover,
.main-navbar-wrapper .dropdown-item:hover { color:#0e5cad !important; }

/* ---- dashboard welcome hero (injected before .clientarea panels) ---- */
.ifh-hero {
  background: linear-gradient(120deg,#0d2b56 0%, #0e5cad 60%, #12a37a 130%);
  color:#fff; border-radius:18px; padding:26px 30px; margin:6px 0 24px;
  box-shadow:0 18px 40px rgba(13,43,86,.20); position:relative; overflow:hidden;
}
.ifh-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 200px at 88% 10%,rgba(126,226,155,.30),transparent);}
.ifh-hero h2{color:#fff;margin:0 0 4px;font-size:1.5rem;font-weight:900;position:relative}
.ifh-hero p{color:#d9e4f5;margin:0;position:relative}
.ifh-hero .ifh-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;position:relative}
.ifh-hero .btn{border-radius:10px;font-weight:800}
.ifh-hero .btn-light{background:#fff;color:#0d2b56}
.ifh-hero .btn-glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4)}

/* ---- premium stat tiles ---- */
a.tile, .clientarea-primary-panels a.tile {
  display:flex !important; flex-direction:column; align-items:flex-start; justify-content:center;
  background:#fff; border:1px solid var(--t-line); border-radius:16px;
  padding:20px 22px; min-height:118px; text-decoration:none; position:relative; overflow:hidden;
  box-shadow:0 6px 22px rgba(13,43,86,.06); transition:transform .18s ease, box-shadow .18s ease;
}
a.tile:hover { transform:translateY(-4px); box-shadow:0 20px 44px rgba(13,43,86,.14); text-decoration:none; }
a.tile i {
  font-size:1.15rem; color:#fff !important; width:48px; height:48px; border-radius:13px;
  display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(135deg,var(--t-navy),var(--t-blue));
}
a.tile .stat { font-size:2.1rem; font-weight:900; color:var(--t-navy); line-height:1; }
a.tile .title { font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--t-gray); font-weight:800; margin-top:4px; }
a.tile .highlight { position:absolute !important; left:0; right:0; bottom:0; top:auto !important; height:4px !important; width:100% !important; opacity:.9; }
/* per-tile icon colour matched to the tile's highlight */
a.tile:has(.bg-color-blue) i    { background:linear-gradient(135deg,#0e5cad,#53bce6); }
a.tile:has(.bg-color-green) i,
a.tile:has(.bg-color-emerald) i { background:linear-gradient(135deg,#2fa84f,#7ee29b); }
a.tile:has(.bg-color-red) i     { background:linear-gradient(135deg,#e02130,#ff7a85); }
a.tile:has(.bg-color-gold) i,
a.tile:has(.bg-color-orange) i,
a.tile:has(.bg-color-sun-flower) i { background:linear-gradient(135deg,#f39c12,#ffcf6b); }

/* ---- dashboard cards ---- */
.main-content .card, .clientarea .card {
  border:1px solid var(--t-line); border-radius:16px;
  box-shadow:0 6px 22px rgba(13,43,86,.06); transition:box-shadow .18s ease, transform .18s ease;
}
.main-content .card:hover { box-shadow:0 14px 34px rgba(13,43,86,.10); }
.main-content .card .card-header, .clientarea .card .card-header {
  background:#fff; border-bottom:1px solid var(--t-line); padding:15px 20px;
  border-radius:16px 16px 0 0 !important; font-weight:800; color:var(--t-navy); font-size:1rem;
}
.card-accent-gold     { border-top:3px solid #f39c12 !important; }
.card-accent-blue     { border-top:3px solid var(--t-blue) !important; }
.card-accent-emerald  { border-top:3px solid var(--t-green) !important; }
.card-accent-asbestos { border-top:3px solid #8494a7 !important; }

/* active service row polish */
.card .list-group-item { border-color:var(--t-line); }
.label-success, .badge-success { background:var(--t-green) !important; border-radius:6px; font-weight:800; padding:.35em .6em; }

/* sidebar cards */
.card-sidebar .card-header { font-size:.95rem; }
.card-sidebar { border-radius:16px; }

/* breadcrumb sits tighter under hero */
.master-breadcrumb { margin-top:8px; }

/* buttons a touch more premium */
.btn { border-radius:10px; }
.btn-primary, .btn-success { box-shadow:0 8px 20px rgba(47,168,79,.24); }

/* promo band (Get your website online) — refine */
.get-started-band, .promo-band { border-radius:0; }

@media (max-width:767px){
  .ifh-hero{padding:22px;border-radius:14px}
  a.tile{min-height:104px;padding:16px}
  a.tile .stat{font-size:1.7rem}
}