/* ============================================================
   TooFast — WHMCS Client Area Theme
   Child of Twenty-One (Bootstrap 4). WHMCS 8.13.1.
   Brand-matches toofastweb.com / toofasthosting.com.
   Load order: this file loads AFTER Twenty-One's core CSS,
   so these rules win without !important wherever possible.
   ============================================================ */

/* ---- Brand fonts (Fontshare: Satoshi + General Sans) ---- */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,700,900&f[]=general-sans@400,500,600,700&display=swap');

:root{
  --tf-black:#0c0d10;
  --tf-black-soft:#13151a;
  --tf-black-card:#16181e;
  --tf-line:#23262e;
  --tf-white:#fbfbf9;
  --tf-ink:#0c0d10;
  --tf-gray:#9a9a93;
  --tf-gray-cool:#6b7280;
  --tf-gray-mid:#7c818c;
  --tf-gray-light:#e7e7e2;
  --tf-accent:#ff5026;
  --tf-accent-soft:#ff6a47;
  --tf-accent-glow:rgba(255,80,38,.16);
  --tf-radius:16px;
  --tf-radius-sm:12px;
  --tf-font-display:'Satoshi',system-ui,-apple-system,sans-serif;
  --tf-font-body:'General Sans',system-ui,-apple-system,sans-serif;
  --tf-ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   GLOBAL
   ============================================================ */
body{
  font-family:var(--tf-font-body);
  background:var(--tf-white);
  color:var(--tf-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,
.page-header h1,.card-title{
  font-family:var(--tf-font-display);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--tf-ink);
}
a{ color:var(--tf-accent); transition:color .2s var(--tf-ease); }
a:hover{ color:var(--tf-accent-soft); text-decoration:none; }

/* ============================================================
   TOP NAVBAR / HEADER  (matches main marketing site)
   ============================================================ */
#header,
.navbar-brand-bar,
header .navbar,
#main-menu .navbar{
  background:rgba(251,251,249,.85)!important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:none;
}
.navbar-brand img,
#logo img,
.brand-logo img{
  height:48px;
  width:auto;
}
#main-menu .navbar-nav > li > a,
.navbar-nav .nav-link{
  font-family:var(--tf-font-body);
  font-weight:500;
  color:#3a3c42!important;
}
#main-menu .navbar-nav > li > a:hover,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
  color:var(--tf-ink)!important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--tf-font-body);
  font-weight:600;
  border-radius:var(--tf-radius-sm);
  padding:.6rem 1.25rem;
  transition:transform .15s var(--tf-ease), box-shadow .2s var(--tf-ease), background .2s var(--tf-ease);
  border:1px solid transparent;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--tf-accent);
  border-color:var(--tf-accent);
  color:#fff;
  box-shadow:0 6px 18px -6px var(--tf-accent-glow);
}
.btn-primary:hover,.btn-primary:focus{
  background:var(--tf-accent-soft);
  border-color:var(--tf-accent-soft);
  color:#fff;
  box-shadow:0 10px 26px -8px var(--tf-accent-glow);
}
.btn-secondary,.btn-default{
  background:var(--tf-ink);
  border-color:var(--tf-ink);
  color:#fff;
}
.btn-secondary:hover,.btn-default:hover{
  background:#000;
  color:#fff;
}
.btn-outline-primary{
  color:var(--tf-accent);
  border-color:var(--tf-accent);
  background:transparent;
}
.btn-outline-primary:hover{
  background:var(--tf-accent);
  color:#fff;
}
/* Transfer button + any stock-green action -> brand dark */
.btn-success{
  background:var(--tf-ink)!important;
  border-color:var(--tf-ink)!important;
  color:#fff!important;
}
.btn-success:hover,.btn-success:focus{
  background:#000!important;
  border-color:#000!important;
  color:#fff!important;
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card,.panel{
  border:1px solid var(--tf-gray-light);
  border-radius:var(--tf-radius);
  box-shadow:0 1px 2px rgba(12,13,16,.04);
  background:#fff;
}
.card-header,.panel-heading{
  background:#fbfbf9;
  border-bottom:1px solid var(--tf-gray-light);
  font-family:var(--tf-font-display);
  font-weight:700;
  letter-spacing:-.01em;
  border-radius:var(--tf-radius) var(--tf-radius) 0 0!important;
}
.card-accent-blue,.card-accent-green,.card-accent-orange,
.card-accent-red,.card-accent-info{
  border-top:3px solid var(--tf-accent);
}

/* ============================================================
   DASHBOARD TILES  (clientareahome)
   ============================================================ */
.tiles .tile{
  border:1px solid var(--tf-gray-light);
  border-radius:var(--tf-radius);
  background:#fff;
  transition:transform .18s var(--tf-ease), box-shadow .2s var(--tf-ease), border-color .2s var(--tf-ease);
  overflow:hidden;
  position:relative;
}
.tiles .tile:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px -18px rgba(12,13,16,.25);
  border-color:#d7d7d0;
}
.tiles .tile .stat{
  font-family:var(--tf-font-display);
  font-weight:900;
  color:var(--tf-ink);
}
.tiles .tile i{ color:var(--tf-accent); }
.tiles .tile .title{
  color:var(--tf-gray-cool);
  font-weight:500;
  letter-spacing:.02em;
}
.tiles .tile .highlight,
.tile .highlight.bg-color-blue,
.tile .highlight.bg-color-green,
.tile .highlight.bg-color-orange{
  background:var(--tf-accent)!important;
}

/* ============================================================
   FORMS  (login, register, ticket submit)
   ============================================================ */
.form-control,.form-control:focus{
  border-radius:var(--tf-radius-sm);
  border:1px solid var(--tf-gray-light);
  font-family:var(--tf-font-body);
  color:var(--tf-ink);
  box-shadow:none;
}
.form-control:focus{
  border-color:var(--tf-accent);
  box-shadow:0 0 0 3px var(--tf-accent-glow);
}
label,.control-label{
  font-weight:600;
  color:#3a3c42;
}
.input-group-text{
  background:#fbfbf9;
  border:1px solid var(--tf-gray-light);
  border-radius:var(--tf-radius-sm);
}

/* Login / register split card */
.logincontainer,.signupcontainer,
.card.login,.auth-card{
  border-radius:var(--tf-radius);
  border:1px solid var(--tf-gray-light);
  box-shadow:0 24px 60px -30px rgba(12,13,16,.35);
}

/* ============================================================
   TABLES  (invoices, services, tickets list)
   ============================================================ */
.table{ color:var(--tf-ink); }
.table thead th,
.table > thead > tr > th{
  font-family:var(--tf-font-body);
  font-weight:700;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--tf-gray-cool);
  border-bottom:1px solid var(--tf-gray-light);
  background:#fbfbf9;
}
.table > tbody > tr{ transition:background .15s var(--tf-ease); }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover{ background:#fbf6f3; }
.table td,.table th{ border-color:#eeeee9; vertical-align:middle; }

/* Status pills */
.label,.badge,
.status-pill,
span[class*="status-"]{
  border-radius:999px;
  font-family:var(--tf-font-body);
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.02em;
  padding:.35em .8em;
}
.label-success,.badge-success,.status-Paid,.status-Active{ background:#dcfce7;color:#15803d; }
.label-warning,.badge-warning,.status-Unpaid,.status-Pending{ background:#fef3c7;color:#b45309; }
.label-danger,.badge-danger,.status-Overdue,.status-Cancelled{ background:#fee2e2;color:#b91c1c; }
.label-default,.badge-secondary{ background:#f1f1ec;color:var(--tf-gray-cool); }

/* ============================================================
   SUPPORT TICKETS
   ============================================================ */
.ticket-reply,.ticket-message,.post{
  border:1px solid var(--tf-gray-light);
  border-radius:var(--tf-radius);
  margin-bottom:1rem;
  overflow:hidden;
}
.ticket-reply.staff,.post.staff{
  border-left:3px solid var(--tf-accent);
  background:#fffaf8;
}
.ticket-reply .ticket-header,.post-header{
  background:#fbfbf9;
  border-bottom:1px solid var(--tf-gray-light);
  font-weight:600;
}

/* ============================================================
   ALERTS / FLASH MESSAGES
   ============================================================ */
.alert{
  border-radius:var(--tf-radius-sm);
  border:1px solid transparent;
  font-family:var(--tf-font-body);
}
.alert-success{ background:#dcfce7;color:#15803d;border-color:#bbf7d0; }
.alert-warning{ background:#fef3c7;color:#b45309;border-color:#fde68a; }
.alert-danger{ background:#fee2e2;color:#b91c1c;border-color:#fecaca; }
.alert-info{ background:#fff1ec;color:#c2410c;border-color:#ffd9cb; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar .list-group-item,
.panel-sidebar .list-group-item{
  border:none;
  border-radius:var(--tf-radius-sm);
  font-weight:500;
  color:#3a3c42;
  transition:background .15s var(--tf-ease), color .15s var(--tf-ease);
}
.sidebar .list-group-item:hover,
.sidebar .list-group-item.active{
  background:var(--tf-accent-glow);
  color:var(--tf-accent);
}
.sidebar .panel-title,.sidebar-menu .menu-heading{
  font-family:var(--tf-font-display);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--tf-ink);
}

/* ============================================================
   BREADCRUMB + PAGE HEADER
   ============================================================ */
.breadcrumb{
  background:transparent;
  padding-left:0;
  font-size:.85rem;
}
.breadcrumb-item.active{ color:var(--tf-gray-cool); }
.page-header{ border-bottom:1px solid var(--tf-gray-light); }

/* ============================================================
   FOOTER
   ============================================================ */
#footer,.footer{
  background:var(--tf-black);
  color:var(--tf-gray);
  border-top:none;
}
#footer a,.footer a{ color:var(--tf-gray-light); }
#footer a:hover,.footer a:hover{ color:var(--tf-accent); }

/* ============================================================
   DARK MODE (optional, follows OS) — keep client area light
   to match marketing site; we only theme the footer dark.
   ============================================================ */

/* ============================================================
   FOOTER — CSS-only branding (SAFE build)
   We do NOT override footer.tpl (that caused blank pages).
   Instead we restyle Twenty-One's stock footer to go dark/brand.
   ============================================================ */
#footer,
.footer,
footer#footer,
body > footer{
  background:#0c0d10 !important;
  color:#9a9a93 !important;
  border-top:none !important;
}
#footer a,.footer a,footer a{ color:#cfcfca !important; }
#footer a:hover,.footer a:hover,footer a:hover{ color:#ff5026 !important; }
#footer .text-muted,.footer .text-muted{ color:#7c818c !important; }