@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap');

/* ==========================================================================
   StackLinux client portal — Aurora design system, light edition.
   Matches stacklinux.com: Sora (display) + Hanken Grotesk (body),
   black #04060A header/footer, pill gradient-blue CTAs with ink text,
   soft-shadow white cards. Light UI by design — no dark mode.
   Maintained in Theme Editor > StackLinux > custom.css.
   ========================================================================== */

:root {
  --sl-black: #04060A;
  --sl-ink: #101828;
  --sl-dim: #5B6676;
  --sl-line: #E6EAF1;
  --sl-bg: #F6F8FB;
  --sl-card: #FFFFFF;
  --sl-blue: #4BA9F5;
  --sl-blue-deep: #1971C2;
  --sl-blue-deeper: #155a9c;
  --sl-grad: linear-gradient(120deg, #4BA9F5, #7FC2F8);
  --sl-green: #12915F;
  --sl-display: 'Sora', system-ui, sans-serif;
  --sl-body: 'Hanken Grotesk', system-ui, sans-serif;
  --sl-radius: 14px;
  --sl-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.05);
}

/* ---------- Base ---------- */

body, body.primary-bg-color {
  background-color: var(--sl-bg) !important;
  font-family: var(--sl-body);
  color: var(--sl-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, legend {
  font-family: var(--sl-display);
  color: var(--sl-ink);
  letter-spacing: -0.02em;
}

a { color: var(--sl-blue-deep); }
a:hover { color: var(--sl-blue-deeper); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sl-blue);
  outline-offset: 2px;
}

/* Page title */
.header-lined h1, #main-body h1 {
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--sl-ink);
}
.header-lined { border-bottom: 0; }

/* ---------- Header: black, matching the site ---------- */

#header .navbar-light,
#header .main-navbar-wrapper {
  background: var(--sl-black) !important;
  border: 0;
  box-shadow: none;
}
#header .navbar-light { padding-top: .9rem; padding-bottom: .35rem; }
#header .main-navbar-wrapper { padding-bottom: .4rem; }

#header .logo-img { height: 30px; width: auto; }

/* Primary nav links */
#header .main-navbar-wrapper #nav > li > a {
  color: #8E99AB !important;
  font-family: var(--sl-body);
  font-size: .92rem;
  font-weight: 500;
  transition: color .2s;
}
#header .main-navbar-wrapper #nav > li > a:hover,
#header .main-navbar-wrapper #nav > li.active > a {
  color: #FFFFFF !important;
  text-decoration: none;
}

/* Account / toolbar */
#header .navbar-nav.toolbar .nav-link,
#header .navbar-nav.toolbar .btn {
  color: #8E99AB !important;
}
#header .navbar-nav.toolbar .nav-link:hover,
#header .navbar-nav.toolbar .btn:hover { color: #fff !important; }
#header .badge-info { background: var(--sl-blue); color: #041018; }

/* Header search: dark glass pill */
#header .input-group.search .form-control {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  color: #EDF1F7;
  box-shadow: none;
}
#header .input-group.search .form-control::placeholder { color: rgba(142,153,171,.75); }
#header .input-group.search .input-group-prepend .btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  color: #8E99AB;
}
#header .input-group.search .form-control:focus {
  border-color: rgba(75,169,245,.6);
  background: rgba(255,255,255,.09);
}

/* Mobile navbar toggler on dark */
#header .navbar-toggler { border-color: rgba(255,255,255,.2); color: #fff; }

/* Dropdown menus */
.dropdown-menu {
  border: 1px solid var(--sl-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,24,40,.14);
  padding: .4rem;
}
.dropdown-menu .dropdown-item,
.dropdown-menu a {
  border-radius: 8px;
  font-size: .92rem;
  color: var(--sl-ink);
  padding: .5rem .8rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a:hover {
  background: #F1F6FC;
  color: var(--sl-ink);
  text-decoration: none;
}

/* ---------- Breadcrumb: quiet, no box ---------- */

.master-breadcrumb {
  background: transparent !important;
  border: 0;
  box-shadow: none;
  padding: .35rem 0 0;
}
.master-breadcrumb .breadcrumb {
  background: transparent;
  font-size: .8rem;
  color: var(--sl-dim);
  margin-bottom: 0;
  padding: .5rem 0;
}
.master-breadcrumb .breadcrumb a { color: var(--sl-dim); }
.master-breadcrumb .breadcrumb-item.active { color: var(--sl-dim); }

/* ---------- Cards & panels ---------- */

.card, .panel {
  background: var(--sl-card);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
}
.card .card-header, .panel .card-header,
.panel-heading, .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sl-line);
  font-family: var(--sl-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--sl-ink);
  padding: .9rem 1.25rem;
}
.card .card-footer, .panel-footer {
  background: #FAFBFD;
  border-top: 1px solid var(--sl-line);
  border-radius: 0 0 var(--sl-radius) var(--sl-radius);
}

/* Sidebar panels */
.card-sidebar .card-header { font-size: .9rem; }
.list-group-item { border-color: var(--sl-line); font-size: .92rem; }
.list-group-item.active,
.card-sidebar .list-group-item.active {
  background: #EDF5FE;
  border-color: var(--sl-line);
  color: var(--sl-blue-deep);
  font-weight: 600;
}

/* ---------- Buttons: pill, Sora, gradient CTAs ---------- */

.btn {
  font-family: var(--sl-display);
  font-weight: 600;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary, .btn-success {
  background: var(--sl-grad) !important;
  border: 0 !important;
  color: #041018 !important;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
  background: var(--sl-grad) !important;
  color: #041018 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(75,169,245,.4);
}
.btn-primary:not(:disabled):active, .btn-success:not(:disabled):active {
  background: var(--sl-grad) !important;
  color: #041018 !important;
  transform: none;
}
.btn-primary:focus, .btn-success:focus,
.btn-primary.focus, .btn-success.focus {
  box-shadow: 0 0 0 .2rem rgba(75,169,245,.35) !important;
}

.btn-default, .btn-secondary, .btn-light {
  background: #fff;
  border: 1px solid #D9E0EA;
  color: var(--sl-ink);
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  border-color: var(--sl-blue);
  background: rgba(75,169,245,.08);
  color: var(--sl-ink);
}

.btn-outline-primary { color: var(--sl-blue-deep); border-color: var(--sl-blue-deep); }
.btn-outline-primary:hover { background: var(--sl-blue-deep); border-color: var(--sl-blue-deep); color: #fff; }

.btn-link { font-family: var(--sl-body); font-weight: 500; color: var(--sl-blue-deep); }

/* Header utility buttons keep dark-glass look */
#header .btn { background: transparent; border: 0; }

/* ---------- Store product cards ---------- */

#main-body .product {
  background: var(--sl-card);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
#main-body .product:hover { transform: translateY(-3px); border-color: rgba(75,169,245,.5); }
#main-body .product header,
#main-body .product .product-title {
  background: transparent !important;
  border-bottom: 1px solid var(--sl-line);
}
#main-body .product header span,
#main-body .product h3 {
  font-family: var(--sl-display);
  font-weight: 600;
  color: var(--sl-ink);
}
#main-body .product .price {
  font-family: var(--sl-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: var(--sl-ink);
}

/* ---------- Tables ---------- */

.table thead th {
  font-family: var(--sl-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-dim);
  border-top: 0;
  border-bottom: 1px solid var(--sl-line) !important;
}
.table td, .table th { border-color: #EDF0F5; vertical-align: middle; }
.table-hover tbody tr:hover { background: #F4F8FD; }
.table-striped tbody tr:nth-of-type(odd) { background: #FAFBFD; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { border-radius: 10px; border: 1px solid #D9E0EA; }

/* ---------- Forms ---------- */

#main-body .form-control, #main-body select.form-control, #main-body textarea.form-control {
  border: 1px solid #D9E0EA;
  border-radius: 10px;
  color: var(--sl-ink);
  box-shadow: none;
}
#main-body .form-control:focus {
  border-color: var(--sl-blue);
  box-shadow: 0 0 0 3px rgba(75,169,245,.18);
}
label, .col-form-label { font-size: .85rem; font-weight: 600; color: var(--sl-ink); }
.form-text, .help-block, small.text-muted { color: var(--sl-dim) !important; }

.input-group-text { border-radius: 10px; border-color: #D9E0EA; background: #FAFBFD; color: var(--sl-dim); }

/* ---------- Alerts ---------- */

.alert { border: 0; border-radius: 12px; font-size: .93rem; }
.alert-info    { background: rgba(75,169,245,.12);  color: #12599c; }
.alert-success { background: rgba(61,220,151,.16);  color: #0d6b46; }
.alert-warning { background: rgba(246,180,66,.18);  color: #7a4d05; }
.alert-danger  { background: rgba(240,82,82,.12);   color: #9c1d1d; }

/* ---------- Badges & status ---------- */

.badge { border-radius: 999px; font-weight: 600; padding: .35em .8em; }
.badge-info { background: rgba(75,169,245,.16); color: var(--sl-blue-deep); }
.status-active, .badge-success, .label-success { background: rgba(61,220,151,.18) !important; color: var(--sl-green) !important; }
.status-pending, .badge-warning { background: rgba(246,180,66,.2) !important; color: #7a4d05 !important; }
.status-suspended, .badge-danger { background: rgba(240,82,82,.14) !important; color: #9c1d1d !important; }

/* ---------- Footer: black, matching the site ---------- */

#footer {
  background: var(--sl-black) !important;
  color: #8E99AB;
  border-top: 0;
  margin-top: 4rem;
  padding: 2.6rem 0;
  font-size: .86rem;
}
#footer a { color: #8E99AB; }
#footer a:hover { color: #fff; text-decoration: none; }
#footer .btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #8E99AB;
  border-radius: 999px;
  font-size: .8rem;
}
#footer .btn:hover { color: #fff; border-color: rgba(75,169,245,.5); }

/* ---------- Misc polish ---------- */

/* Home shortcut tiles: neutralize rainbow top borders, unify hover */
#main-body .tile, #main-body .item {
  border-radius: var(--sl-radius);
}
.jumbotron { background: transparent; }

/* Pagination */
.page-link { color: var(--sl-blue-deep); border-color: var(--sl-line); }
.page-item.active .page-link { background: var(--sl-blue-deep); border-color: var(--sl-blue-deep); }

/* Modals */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 64px rgba(16,24,40,.22); }
.modal-header { border-bottom: 1px solid var(--sl-line); }
.modal-footer { border-top: 1px solid var(--sl-line); }

/* Tabs */
.nav-tabs { border-bottom: 1px solid var(--sl-line); }
.nav-tabs .nav-link { color: var(--sl-dim); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--sl-blue-deep); border-bottom-color: var(--sl-blue-deep); background: transparent; }


/* ---------- Client home: stat tiles ---------- */

#main-body .tile {
  background: #fff;
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-shadow);
  transition: transform .2s ease, border-color .2s ease;
  overflow: hidden;
}
#main-body .tile:hover {
  transform: translateY(-3px);
  border-color: rgba(75,169,245,.5);
  text-decoration: none;
}
#main-body .tile .stat {
  font-family: var(--sl-display);
  font-weight: 700;
  color: var(--sl-ink);
}
#main-body .tile .title {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-dim);
}
#main-body .tile > i { color: #B9C2CF; }
/* One brand accent instead of four different colors */
#main-body .tile .highlight { background: var(--sl-grad) !important; }

/* ---------- Home shortcut tiles: kill rainbow accents ---------- */

#main-body a[class*="card-accent-"] {
  border: 1px solid var(--sl-line) !important;
  border-radius: var(--sl-radius);
  background: #fff;
  box-shadow: var(--sl-shadow);
  color: var(--sl-dim);
  font-weight: 500;
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
#main-body a[class*="card-accent-"]:hover {
  transform: translateY(-3px);
  border-color: rgba(75,169,245,.5) !important;
  color: var(--sl-ink);
  text-decoration: none;
}
#main-body a[class*="card-accent-"] .ico-container i {
  color: #9AA5B5;
  transition: color .2s ease;
}
#main-body a[class*="card-accent-"]:hover .ico-container i { color: var(--sl-blue-deep); }
/* Non-link accent cards (panels) get a quiet top edge too */
#main-body .card[class*="card-accent-"] { border-top: 1px solid var(--sl-line) !important; }

/* ---------- Hide stock MarketConnect / SolusVM promo panel ---------- */

[menuitemname="SolusVM2Panel"] { display: none !important; }

/* ---------- Section headings on portal home ---------- */

#main-body h2 { font-size: 1.45rem; font-weight: 700; }


/* ---------- Refinement pass 2 ---------- */

/* Homepage shortcut cards: stationary on hover; icon animates instead */
#main-body a[class*="card-accent-"]:hover { transform: none; }
#main-body a[class*="card-accent-"] .ico-container i {
  transition: transform .2s ease, color .2s ease;
}
#main-body a[class*="card-accent-"]:hover .ico-container i {
  transform: scale(1.15);
  color: var(--sl-blue-deep);
}

/* Input groups: merge icon boxes with fields (login page etc.) */
#main-body .input-group > .input-group-prepend > .input-group-text,
#main-body .input-group > .input-group-prepend > .btn {
  border-radius: 10px 0 0 10px;
  border-right: 0;
}
#main-body .input-group > .input-group-append > .input-group-text,
#main-body .input-group > .input-group-append > .btn {
  border-radius: 0 10px 10px 0;
  border-left: 0;
  border-color: #D9E0EA;
  background: #FAFBFD;
  color: var(--sl-dim);
}
#main-body .input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#main-body .input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#main-body .input-group .input-group-text i { font-size: .9rem; }

/* ---------- StackLinux footer ---------- */

#footer { padding: 3rem 0 2.2rem; }
.sl-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2.4rem;
}
.sl-footer-brand img { height: 26px; width: auto; margin-bottom: 12px; }
.sl-footer-brand p { font-size: .82rem; color: #8E99AB; margin: 0; max-width: 26em; }
.sl-footer-col { font-size: .88rem; }
.sl-footer-col strong {
  display: block;
  font-family: var(--sl-display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8E99AB;
  margin-bottom: 10px;
}
.sl-footer-col a { display: block; color: #8E99AB; padding: 3px 0; }
.sl-footer-col a:hover { color: #fff; text-decoration: none; }
.sl-footer-legal {
  border-top: 1px solid rgba(237,241,247,.1);
  padding-top: 1.4rem;
  font-size: .78rem;
  color: #8E99AB;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sl-footer-legal a { color: #8E99AB; }
.sl-footer-legal a:hover { color: #fff; }
.sl-footer-legal-links { display: inline-flex; align-items: center; }
#footer .sl-lang-btn {
  font-size: .74rem;
  padding: .25rem .9rem;
  margin-left: 14px;
}


/* Kill the theme's layout-shifting icon growth on homepage cards.
   The parent theme bumps .ico-container font-size 2.6em -> 3.4em on hover,
   which reflows the page (pushes the footer). Pin the font-size; the icon
   already scales visually via transform (no layout impact). */
.action-icon-btns a:hover .ico-container { font-size: 2.6em !important; }