/* *****************************************************
   SkyHostic — Nexus Bright SkyHostic (locked v2 Bright Sky)
***************************************************** */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap");

:root {
  --navy: #13112F;
  --blue: #28A3FC;
  --blue-deep: #0E8DDB;
  --purple: #3F1EBD;
  --magenta: #86029F;
  --soft: #F0F6FF;
  --muted: #5B647A;
  --line: rgba(19, 17, 47, 0.09);
  --bolt: linear-gradient(135deg, #2AA3F9 0%, #3F1EBD 55%, #86029F 100%);
  --btn: linear-gradient(90deg, #1295FC, #0E8DDB);
  --shadow: 0 30px 80px rgba(19, 17, 47, 0.12);
  --shadow-sm: 0 14px 40px rgba(19, 17, 47, 0.08);

  --white: #fff;
  --neutral-50: #f5f8fc;
  --neutral-100: #eef4fb;
  --neutral-200: #dde7f4;
  --neutral-300: #c5d3e8;
  --neutral-400: #8b97ad;
  --neutral-500: #5b647a;
  --neutral-600: #3d4660;
  --neutral-700: #2a3148;
  --neutral-800: #1a1f33;
  --neutral-900: #13112f;
  --neutral-950: #0a0918;

  --primary-50: #eff8ff;
  --primary-100: #dbebff;
  --primary-200: #b9d9ff;
  --primary-300: #7cbcff;
  --primary-400: #28a3fc;
  --primary-500: #1295fc;
  --primary-600: #0e8ddb;
  --primary-700: #3f1ebd;
  --primary-800: #2a157f;
  --primary-900: #1a0e4d;
  --primary-950: #13112f;

  --primary: #0e8ddb;
  --primary-lifted: #1295fc;
  --primary-accented: #3f1ebd;

  --secondary: #5b647a;
  --secondary-lifted: #3d4660;
  --secondary-accented: #2a3148;

  --success: #059669;
  --success-lifted: #047857;
  --success-accented: #065f46;

  --info: #0e8ddb;
  --info-lifted: #28a3fc;
  --info-accented: #3f1ebd;

  --notice: #3f1ebd;
  --notice-lifted: #86029f;
  --notice-accented: #5d0ec0;

  --warning: #d97706;
  --warning-lifted: #b45309;
  --warning-accented: #92400e;

  --error: #dc2626;
  --error-lifted: #b91c1c;
  --error-accented: #991b1b;

  --grayscale: var(--neutral-900);
  --grayscale-lifted: var(--neutral-800);
  --grayscale-accented: var(--neutral-700);

  --neutral: var(--neutral-500);
  --neutral-lifted: var(--neutral-600);
  --neutral-accented: var(--neutral-700);

  --text-inverted: var(--white);
  --text-muted: var(--neutral-500);
  --text-lifted: var(--neutral-600);
  --text-accented: var(--neutral-700);
  --text: var(--navy);

  --border-muted: var(--neutral-200);
  --border: rgba(19, 17, 47, 0.09);
  --border-lifted: var(--neutral-400);
  --border-accented: var(--neutral-600);

  --bg: #fff;
  --bg-muted: #f5f8fc;
  --bg-lifted: #eef4fb;
  --bg-accented: #e8f0fa;
  --bg-inverted: var(--navy);
}

html,
body {
  font-family: Manrope, system-ui, sans-serif !important;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

/* theme.min sets html+body to --bg-inverted (navy); that bleeds as a black
   band under short body paint when scrolling client area. Keep canvas light. */
html {
  background: #f5f8fc !important;
  background-color: #f5f8fc !important;
}

body {
  background:
    radial-gradient(ellipse 70% 50% at 100% -10%, rgba(40, 163, 252, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(63, 30, 189, 0.08), transparent 45%),
    #f5f8fc !important;
  min-height: 100vh;
  height: auto !important;
}

/* Top bar — Bright Sky gradient */
#header .topbar {
  background: linear-gradient(90deg, #0e8ddb, #28a3fc 45%, #3f1ebd) !important;
  color: #fff !important;
  border: 0 !important;
}
#header .topbar a,
#header .topbar .btn,
#header .topbar .input-group-text {
  color: #fff !important;
}

#header .navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
}

#header .navbar .navbar-brand img {
  max-height: 36px;
}

/* Primary buttons */
.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary {
  background: var(--btn) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 32px rgba(14, 141, 219, 0.28);
}
.btn-primary:hover,
a.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-default,
.btn-secondary {
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 1.5px solid rgba(14, 141, 219, 0.28) !important;
  background: linear-gradient(180deg, #fff, #f4f8ff) !important;
  color: var(--navy) !important;
}

/* Client home tiles */
.tiles .tile {
  border-radius: 20px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tiles .tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow) !important;
}
.tiles .tile .stat {
  font-weight: 800 !important;
  color: var(--navy) !important;
}
.tiles .tile .highlight.bg-color-blue {
  background: var(--blue) !important;
}
.tiles .tile .highlight.bg-color-green {
  background: #059669 !important;
}
.tiles .tile .highlight.bg-color-red {
  background: #dc2626 !important;
}
.tiles .tile .highlight.bg-color-gold {
  background: var(--purple) !important;
}

/* Cards / panels */
.card,
.panel,
.list-group,
.dataTables_wrapper {
  border-radius: 16px !important;
  border-color: var(--line) !important;
}

.card {
  box-shadow: var(--shadow-sm);
}

/* Sidebar / primary nav */
.primary-content,
#main-body {
  font-family: Manrope, system-ui, sans-serif;
}

/* Tables — denser, icon-action friendly */
.table th {
  font-weight: 800 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table td {
  vertical-align: middle !important;
}

/* Login / register */
.logincontainer,
.providerLinkingFeedback {
  border-radius: 24px !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--line) !important;
}

/* Links */
a {
  color: var(--blue-deep);
}
a:hover {
  color: var(--purple);
}

/* Footer */
.footer {
  border-top: 1px solid var(--line) !important;
  background: #fff !important;
}