:root {
  --hex-bg: #f3f7fb;
  --hex-bg-2: #eef4f8;
  --hex-card: #ffffff;
  --hex-text: #0f172a;
  --hex-muted: #50627c;
  --hex-border: #d8e3ef;
  --hex-green: #31a83b;
  --hex-green-2: #83c841;
  --hex-green-3: #0f8f2f;
  --hex-mint: #eaf8eb;
  --hex-navy: #07111f;
  --hex-navy-2: #0c1a2a;
  --hex-navy-3: #142338;
  --hex-shadow: 0 24px 70px rgba(15, 23, 42, .10);
  --hex-radius: 22px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 20% 8%, rgba(131, 200, 65, .10), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, var(--hex-bg-2) 100%);
  color: var(--hex-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.015em;
}

a {
  color: var(--hex-green-3);
  text-decoration: none;
}

a:hover {
  color: #076b24;
}

.hex-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hex-logo {
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
}

.hex-logo.compact {
  width: 54px;
  height: 54px;
}

.hex-brand-title {
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.03em;
}

.hex-brand-title .green {
  color: var(--hex-green);
}

.hex-brand-subtitle {
  margin-top: 8px;
  color: #7890ad;
  font-size: 15px;
  font-weight: 600;
}

.hex-btn,
.btn,
.btn-primary,
button,
input[type=submit] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--hex-green-2), var(--hex-green-3));
  color: #ffffff !important;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(49, 168, 59, .24);
}

.hex-btn.secondary,
.btn-secondary {
  background: #ffffff;
  color: var(--hex-green-3) !important;
  border: 1px solid rgba(49, 168, 59, .45);
  box-shadow: none;
}

.hex-btn.dark {
  background: rgba(255,255,255,.09);
  color: #eaf6ff !important;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

input,
select,
textarea,
.form-control {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--hex-border);
  border-radius: 14px;
  padding: 11px 13px;
  background: #ffffff;
  color: var(--hex-text);
  font: inherit;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: 3px solid rgba(49, 168, 59, .18);
  border-color: var(--hex-green);
}

table,
.table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  overflow: hidden;
}

th,
td,
.table th,
.table td {
  padding: 15px 16px;
  border-bottom: 1px solid var(--hex-border);
  text-align: left;
}

th,
.table th {
  background: #f8fbff;
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Public order / landing layout */

.hex-public-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 10%, rgba(131,200,65,.11), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, #edf4f8 100%);
}

.hex-public-top {
  min-height: 92px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hex-border);
  display: flex;
  align-items: center;
}

.hex-public-top-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hex-public-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hex-public-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1f2937;
  font-weight: 900;
  padding: 11px 14px;
  border-radius: 14px;
}

.hex-public-link:hover {
  background: #eef4f8;
  color: #0f172a;
}

.hex-public-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 36px 34px;
}

.hex-order-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .72fr);
  gap: 28px;
  align-items: start;
}

.hex-order-panel {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--hex-border);
  border-radius: 26px;
  box-shadow: var(--hex-shadow);
  padding: 32px;
}

.hex-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--hex-mint);
  color: #087029;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .075em;
}

.hex-title {
  margin: 0;
  color: #0f172a;
  max-width: 740px;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.03;
  letter-spacing: -.065em;
}

.hex-subtitle {
  max-width: 720px;
  margin: 16px 0 0;
  color: var(--hex-muted);
  font-size: 17px;
  line-height: 1.72;
}

.hex-divider {
  border: 0;
  border-top: 1px solid var(--hex-border);
  margin: 26px 0;
}

.hex-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.hex-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--hex-mint);
  color: var(--hex-green-3);
  font-weight: 950;
}

.hex-section-title {
  margin: 0;
  font-size: 26px;
  letter-spacing: -.04em;
}

.hex-section-subtitle {
  margin: 0 0 18px;
  color: var(--hex-muted);
  font-size: 17px;
  line-height: 1.6;
}

.hex-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hex-product-card {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  padding: 16px;
  color: var(--hex-text);
  background: #ffffff;
  transition: .15s ease;
}

.hex-product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(49,168,59,.62);
  box-shadow: 0 20px 40px rgba(15,23,42,.08);
}

.hex-product-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--hex-mint);
  color: var(--hex-green-3);
  font-size: 26px;
  margin-bottom: 12px;
}

.hex-product-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  letter-spacing: -.03em;
}

.hex-product-card span {
  color: #334155;
  line-height: 1.55;
}

.hex-panel-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.hex-order-aside {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(131,200,65,.22), transparent 14rem),
    linear-gradient(145deg, #07111f 0%, #0d1a29 100%);
  color: #eaf6ff;
  border-radius: 26px;
  box-shadow: var(--hex-shadow);
  padding: 32px;
}

.hex-order-aside:after {
  content: "";
  position: absolute;
  right: -54px;
  top: 52px;
  width: 190px;
  height: 190px;
  background: url('../img/hexssl-logo.jpg') center/contain no-repeat;
  opacity: .14;
  filter: saturate(1.05);
}

.hex-order-aside h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  font-size: 30px;
  letter-spacing: -.05em;
}

.hex-order-aside h2 .green {
  color: var(--hex-green-2);
}

.hex-order-aside > p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 330px;
  color: #d1deef;
  font-size: 17px;
  line-height: 1.62;
}

.hex-trust-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.hex-trust-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}

.hex-trust-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--hex-green-2);
  font-size: 28px;
}

.hex-trust-item strong {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 17px;
}

.hex-trust-item span {
  color: #c7d5e7;
  line-height: 1.5;
}

.hex-trust-arrow {
  color: #c7d5e7;
  font-size: 26px;
}

.hex-public-benefits {
  margin-top: 34px;
  background: linear-gradient(135deg, #07111f, #0c1a2a);
  color: #eaf6ff;
}

.hex-benefits-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.hex-benefit {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.hex-benefit-icon {
  color: var(--hex-green-2);
  font-size: 28px;
}

.hex-benefit strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
}

.hex-benefit span {
  color: #b7c8e3;
  line-height: 1.5;
}

.hex-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 36px 34px;
  color: #64748b;
  font-size: 13px;
}

/* Client dashboard layout */

.hex-shell {
  min-height: 100vh;
  display: flex;
}

.hex-sidebar {
  width: 292px;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 28px 22px;
  overflow-y: auto;
  background:
    radial-gradient(circle at top left, rgba(131,200,65,.14), transparent 24rem),
    linear-gradient(180deg, #07111f 0%, #0d1a29 100%);
  color: #eaf6ff;
}

.hex-sidebar .hex-brand {
  padding-bottom: 30px;
}

.hex-sidebar .hex-logo {
  width: 48px;
  height: 48px;
}

.hex-sidebar .hex-brand-title {
  font-size: 21px;
}

.hex-sidebar .hex-brand-subtitle {
  font-size: 12px;
  color: #9fb4d1;
}

.hex-nav-section {
  margin: 18px 4px 8px;
  color: #7890b2;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 900;
}

.hex-nav {
  display: grid;
  gap: 7px;
}

.hex-nav a {
  display: flex;
  align-items: center;
  color: #b7c8e3;
  padding: 13px 14px;
  border-radius: 15px;
  font-weight: 850;
}

.hex-nav a:hover {
  background: rgba(255,255,255,.08);
  color: #ffffff;
}

.hex-sidebar-card {
  margin-top: 28px;
  padding: 16px;
  border-radius: 19px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}

.hex-sidebar-card p {
  margin: 7px 0 0;
  color: #9fb7d7;
  font-size: 13px;
  line-height: 1.45;
}

.hex-main {
  width: calc(100% - 292px);
  margin-left: 292px;
  min-height: 100vh;
}

.hex-topbar {
  min-height: 82px;
  padding: 0 36px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hex-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hex-topbar-title {
  font-weight: 950;
  font-size: 16px;
}

.hex-topbar-subtitle {
  color: var(--hex-muted);
  font-size: 13px;
  margin-top: 3px;
}

.hex-user-pill {
  padding: 10px 14px;
  border: 1px solid var(--hex-border);
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.hex-page {
  padding: 38px;
}

.hex-grid {
  display: grid;
  gap: 18px;
}

.hex-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hex-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hex-card {
  background: #ffffff;
  border: 1px solid var(--hex-border);
  border-radius: 22px;
  box-shadow: var(--hex-shadow);
  padding: 26px;
}

.hex-card.dark {
  background:
    radial-gradient(circle at 90% 10%, rgba(131,200,65,.22), transparent 18rem),
    linear-gradient(145deg, #07111f, #0d1a29);
  color: #eaf6ff;
}

.hex-muted {
  color: var(--hex-muted);
}

.hex-card.dark .hex-muted {
  color: #b7c8e3;
}

.hex-metric {
  display: block;
  font-size: 38px;
  font-weight: 950;
  letter-spacing: -.055em;
}

.hex-metric-label {
  color: var(--hex-muted);
  font-size: 13px;
  font-weight: 850;
}

.hex-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.hex-login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(131,200,65,.20), transparent 28rem),
    linear-gradient(135deg,#07111f,#0d1a29);
}

.hex-login-card {
  width: min(100%, 470px);
  background: #ffffff;
  border-radius: 28px;
  padding: 38px;
  box-shadow: 0 28px 90px rgba(0,0,0,.25);
}

.alert,
.message,
.notification {
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--hex-border);
  background: #ffffff;
}

.hex-badge,
.badge,
.label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
  background: var(--hex-mint);
  color: #087029;
}

@media (max-width: 1080px) {
  .hex-order-shell {
    grid-template-columns: 1fr;
  }

  .hex-order-aside {
    min-height: auto;
  }

  .hex-product-grid,
  .hex-benefits-inner {
    grid-template-columns: 1fr;
  }

  .hex-shell {
    display: block;
  }

  .hex-sidebar {
    position: static;
    width: 100%;
  }

  .hex-main {
    margin-left: 0;
    width: 100%;
  }

  .hex-grid-2,
  .hex-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .hex-public-top-inner {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .hex-public-nav,
  .hex-panel-actions {
    width: 100%;
  }

  .hex-btn {
    width: 100%;
  }

  .hex-public-main {
    padding: 28px 18px 36px;
  }

  .hex-order-panel,
  .hex-order-aside {
    padding: 26px;
  }

  .hex-title {
    font-size: 34px;
  }

  .hex-logo {
    width: 58px;
    height: 58px;
  }

  .hex-brand-title {
    font-size: 24px;
  }
}


/* HEXSSL 0.2.1 layout polish */
.hex-order-shell {
  align-items: start !important;
}

.hex-order-aside {
  height: fit-content;
  min-height: unset !important;
}

.hex-order-panel {
  height: fit-content;
}

.hex-public-top {
  min-height: 92px;
}

.hex-public-main {
  padding-top: 34px;
}

.hex-logo {
  width: 64px;
  height: 64px;
}

.hex-brand-title {
  font-size: 28px;
}

.hex-brand-subtitle {
  font-size: 14px;
}

.hex-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hex-product-card {
  min-height: 136px;
}

.hex-order-aside h2 {
  font-size: 27px;
}

.hex-order-aside > p {
  font-size: 16px;
}

.hex-trust-item {
  min-height: 86px;
}

@media (max-width: 1080px) {
  .hex-order-shell {
    grid-template-columns: 1fr;
  }

  .hex-order-aside {
    position: static;
  }
}


/* HEXSSL 0.2.2 logo and icon polish */
.hex-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}

.hex-sidebar .hex-logo {
  width: 60px;
  height: 60px;
}

.hex-login-card .hex-logo.compact {
  width: 58px;
  height: 58px;
}

.hex-icon {
  width: 42px;
  height: 42px;
  color: var(--hex-green-2);
  display: block;
}

.hex-btn-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.hex-trust-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--hex-green-2);
  font-size: 0;
}

.hex-product-icon {
  font-size: 0;
}

.hex-product-icon .hex-icon {
  width: 34px;
  height: 34px;
  color: var(--hex-green-3);
}

.hex-panel-actions .hex-btn {
  gap: 10px;
}

@media (max-width: 680px) {
  .hex-logo {
    width: 60px;
    height: 60px;
  }
}


/* HEXSSL 0.2.3 public header login polish */
.hex-public-nav {
  gap: 12px;
}

.hex-public-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--hex-green-2), var(--hex-green-3));
  color: #ffffff !important;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(49, 168, 59, .24);
}

.hex-public-login:hover {
  color: #ffffff !important;
  filter: brightness(.97);
}

.hex-public-order-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(49,168,59,.38);
  background: #ffffff;
  color: var(--hex-green-3) !important;
  font-weight: 900;
}

.hex-public-order-link:hover {
  background: var(--hex-mint);
  color: var(--hex-green-3) !important;
}

@media (max-width: 680px) {
  .hex-public-nav {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .hex-public-login,
  .hex-public-order-link {
    width: 100%;
  }
}


/* HEXSSL 0.2.4 login form */
.hex-login-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.hex-form-group {
  display: grid;
  gap: 8px;
}

.hex-form-group label {
  font-weight: 850;
  color: #1f2937;
}

.hex-login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
  font-size: 14px;
}

.hex-login-meta a {
  font-weight: 800;
}

.hex-login-submit {
  width: 100%;
  margin-top: 6px;
}

.hex-login-footer {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hex-border);
  color: var(--hex-muted);
  font-size: 14px;
  line-height: 1.55;
}

.hex-login-error {
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
  color: #991b1b;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
}


/* HEXSSL 0.2.5 route/login/account fixes */
.hex-login-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.hex-form-group {
  display: grid;
  gap: 8px;
}

.hex-form-group label {
  font-weight: 850;
  color: #1f2937;
}

.hex-login-submit {
  width: 100%;
}

.hex-account-card {
  max-width: 780px;
}

.hex-account-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.hex-account-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hex-border);
}

.hex-account-row strong {
  color: #0f172a;
}

.hex-account-row span {
  color: var(--hex-muted);
}


/* HEXSSL 0.2.6 login modal */
.hex-login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 22, .68);
  backdrop-filter: blur(10px);
}

.hex-login-modal.is-open {
  display: flex;
}

.hex-login-modal-card {
  width: min(100%, 460px);
  background: #ffffff;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 28px 90px rgba(0,0,0,.32);
  position: relative;
}

.hex-login-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--hex-border);
  background: #ffffff;
  color: #0f172a !important;
  box-shadow: none;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}

.hex-login-modal-trigger {
  text-decoration: none;
}

.hex-login-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.hex-form-group {
  display: grid;
  gap: 8px;
}

.hex-form-group label {
  font-weight: 850;
  color: #1f2937;
}

.hex-login-submit {
  width: 100%;
}


/* HEXSSL 0.2.7 login visibility + API login */
.hex-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hex-login-message {
  display: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 750;
  line-height: 1.45;
}

.hex-login-message.is-error {
  display: block;
  background: rgba(239, 68, 68, .10);
  border: 1px solid rgba(239, 68, 68, .25);
  color: #991b1b;
}

.hex-login-message.is-success {
  display: block;
  background: rgba(49, 168, 59, .10);
  border: 1px solid rgba(49, 168, 59, .25);
  color: #087029;
}

.hex-sidebar-login {
  margin-top: 16px;
}

.hex-sidebar-login .hex-btn {
  width: 100%;
}

.hex-public-login,
.hex-login-modal-trigger {
  cursor: pointer;
}


/* HEXSSL 0.2.14 pagination fallback */
.hex-pagination,
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.pagination .page-item {
  list-style: none;
}

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--hex-border);
  border-radius: 12px;
  background: #fff;
  color: var(--hex-green-3);
  font-weight: 800;
}

.pagination .page-item.active .page-link {
  background: var(--hex-green-3);
  border-color: var(--hex-green-3);
  color: #fff;
}


/* HEXSSL 0.2.15 native FOSSBilling compatibility */
.card {
  background: #ffffff;
  border: 1px solid var(--hex-border);
  border-radius: 22px;
  box-shadow: var(--hex-shadow);
  overflow: hidden;
}

.card-header {
  background: #ffffff;
  border-bottom: 1px solid var(--hex-border);
  padding: 22px 24px;
}

.card-body {
  padding: 24px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.col-md-12,
.col-md-6,
.col-md-4,
.col-md-3 {
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.table-responsive { overflow-x: auto; }
.mb-1 { margin-bottom: .25rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.my-2 { margin-top: .5rem; margin-bottom: .5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ml-2 { margin-left: .5rem; }
.small { font-size: .875rem; }
.text-secondary { color: var(--hex-muted); }
.m-0 { margin: 0; }

.btn-sm {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}

.btn-outline-primary {
  background: #ffffff;
  color: var(--hex-green-3) !important;
  border: 1px solid rgba(49,168,59,.45);
  box-shadow: none;
}

.btn-success,
.bg-success {
  background: #10b981 !important;
  color: #fff !important;
}

.bg-warning {
  background: #f59e0b !important;
  color: #111827 !important;
}

.bg-danger {
  background: #ef4444 !important;
  color: #fff !important;
}

.bg-secondary {
  background: #64748b !important;
  color: #fff !important;
}

.table-striped tbody tr:nth-child(odd) {
  background: #fbfdff;
}

.table-hover tbody tr:hover {
  background: #f1f8f1;
}

.modal {
  display: none;
}

.modal.show {
  display: block;
}

.hex-editor-textarea {
  min-height: 180px;
}


/* HEXSSL 0.2.16 modal fallback */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  overflow: auto;
  background: rgba(5, 8, 22, .62);
  padding: 32px 18px;
}

.modal.show {
  display: block;
}

.modal-dialog {
  width: min(100%, 760px);
  margin: 0 auto;
}

.modal-content {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(0,0,0,.25);
  overflow: hidden;
}

.modal-header,
.modal-footer {
  padding: 18px 22px;
  border-bottom: 1px solid var(--hex-border);
}

.modal-footer {
  border-top: 1px solid var(--hex-border);
  border-bottom: 0;
}

.modal-body {
  padding: 22px;
}

.btn-close {
  float: right;
  background: transparent;
  color: #0f172a !important;
  box-shadow: none;
  min-height: 0;
  padding: 0;
  font-size: 22px;
}


/* HEXSSL 0.2.17 tabs/native form polish */
.nav,
.nav-tabs,
.nav-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--hex-border);
  background: #fff;
  color: var(--hex-green-3);
  font-weight: 850;
  cursor: pointer;
}

.nav-link.active,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background: var(--hex-green-3);
  color: #fff;
  border-color: var(--hex-green-3);
}

.tab-pane {
  display: none;
}

.tab-pane.active,
.tab-pane.show {
  display: block;
}

.modal-open {
  overflow: hidden;
}

.hex-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


/* HEXSSL 0.2.18 support modal close/cancel */
.modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hex-modal-x,
.btn-close {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--hex-border);
  background: #ffffff;
  color: #0f172a !important;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.hex-modal-x:hover,
.btn-close:hover {
  background: #f1f5f9;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.hex-btn-danger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  background: #dc2626;
  color: #ffffff !important;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(220, 38, 38, .20);
}

.hex-btn-danger:hover {
  background: #b91c1c;
}


/* HEXSSL 0.2.19 support submit and modal close cleanup */
.modal-header .btn-close {
  margin-left: auto;
  font-size: 0 !important;
  position: relative;
}

.modal-header .btn-close::before {
  content: "×";
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.hex-modal-x {
  display: none !important;
}

.modal-footer .hex-login-message {
  margin-right: auto;
  max-width: 420px;
}

.hex-login-message.is-error,
.hex-login-message.is-success {
  display: block;
}

button[disabled],
.hex-btn[disabled] {
  opacity: .72;
  cursor: not-allowed;
}


/* HEXSSL 0.3.0 account edit */
.hex-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.hex-form-wide { grid-column: 1 / -1; }
.hex-account-form { margin-top: 20px; }
.hex-account-note {
  margin-top: 24px;
  padding: 16px;
  border-radius: 16px;
  background: var(--hex-mint);
  color: #087029;
  line-height: 1.55;
  font-weight: 700;
}

/* HEXSSL 0.3.0 invoice/proforma tab visibility */
.nav-tabs,
.nav-pills,
.nav {
  background: #eef4f8;
  border: 1px solid var(--hex-border);
  border-radius: 16px;
  padding: 6px;
  display: inline-flex;
  gap: 6px;
}
.nav-link,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  background: #dbe7f1 !important;
  color: #334155 !important;
  border: 1px solid #c6d6e3 !important;
  border-radius: 12px !important;
  font-weight: 900;
  min-height: 40px;
  padding: 10px 15px;
}
.nav-link:hover,
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  background: #cfe0ec !important;
  color: #0f172a !important;
}
.nav-link.active,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background: var(--hex-green-3) !important;
  border-color: var(--hex-green-3) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(49,168,59,.18);
}

/* HEXSSL 0.3.0 invoice/proforma preview polish */
.invoice,
.invoice-preview,
.proforma,
.card:has(table) {
  line-height: 1.55;
}

.hex-page > .card,
.hex-page .invoice,
.hex-page .invoice-preview,
.hex-page .proforma {
  background: #ffffff;
  border: 1px solid var(--hex-border);
  border-radius: 24px;
  box-shadow: var(--hex-shadow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--hex-border);
  padding: 20px 24px;
}

.card-header h1,
.card-header h2,
.card-header h3 {
  margin: 0;
}

.card-body {
  padding: 28px 24px;
}

.hex-page .card-body > div,
.hex-page .card-body p {
  margin-bottom: 12px;
}

.hex-page dl,
.hex-page .invoice-details,
.hex-page .proforma-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hex-page dt,
.hex-page .label,
.hex-page strong {
  color: #0f172a;
  font-weight: 900;
}

.hex-page dd {
  margin: 0;
  color: #334155;
}

.hex-page table {
  margin-top: 20px;
  border-radius: 18px;
  overflow: hidden;
}

.hex-page table th {
  background: #f3f8fc !important;
  color: #475569 !important;
  letter-spacing: .07em;
}

.hex-page table td,
.hex-page table th {
  vertical-align: top;
}

.hex-page table tfoot td,
.hex-page table tr:last-child td {
  font-weight: 900;
}

.badge,
.label,
span.badge {
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-weight: 900 !important;
}

.btn-success,
.btn-primary {
  background: var(--hex-green-3) !important;
  color: #ffffff !important;
}

.btn-outline-primary,
.btn-light,
.btn-default {
  background: #dbe7f1 !important;
  color: #334155 !important;
  border: 1px solid #c6d6e3 !important;
}

.btn-outline-primary:hover,
.btn-light:hover,
.btn-default:hover {
  background: #cfe0ec !important;
  color: #0f172a !important;
}

@media (max-width: 780px) {
  .hex-form-grid,
  .hex-page dl,
  .hex-page .invoice-details,
  .hex-page .proforma-details {
    grid-template-columns: 1fr;
  }

  .card-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* HEXSSL 0.3.1 invoice/proforma layout correction */

/* restore sane Bootstrap-like grid widths instead of forcing everything to 100% */
@media (min-width: 768px) {
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
}

.row {
  row-gap: 18px;
}

/* invoice/proforma content should be compact, not scattered across the whole width */
.hex-page .card {
  overflow: hidden;
}

.hex-page .card-body {
  padding: 30px 34px;
}

.hex-page .card-body > .row {
  align-items: flex-start;
}

/* make invoice metadata blocks more readable */
.hex-page .card-body .row .col-md-3,
.hex-page .card-body .row .col-md-4,
.hex-page .card-body .row .col-md-6 {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* labels + values: keep them close together */
.hex-page .card-body strong,
.hex-page .card-body b,
.hex-page .card-body label {
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
  font-weight: 900;
}

.hex-page .card-body p,
.hex-page .card-body span,
.hex-page .card-body div {
  line-height: 1.55;
}

/* invoice header actions */
.hex-page .card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.hex-page .card-header .btn,
.hex-page .card-header a.btn,
.hex-page .card-header button {
  margin-left: 8px;
}

/* make company/client sections visually tighter */
.hex-page .card-body h1,
.hex-page .card-body h2,
.hex-page .card-body h3,
.hex-page .card-body h4,
.hex-page .card-body h5,
.hex-page .card-body h6 {
  margin-top: 26px;
  margin-bottom: 12px;
}

.hex-page .card-body h1:first-child,
.hex-page .card-body h2:first-child,
.hex-page .card-body h3:first-child,
.hex-page .card-body h4:first-child,
.hex-page .card-body h5:first-child,
.hex-page .card-body h6:first-child {
  margin-top: 0;
}

/* invoice tables: keep them clean and aligned */
.hex-page table.table,
.hex-page table {
  margin-top: 22px;
  width: 100%;
}

.hex-page table th,
.hex-page table td {
  white-space: normal;
}

.hex-page table th:nth-child(1),
.hex-page table td:nth-child(1) {
  width: 8%;
}

.hex-page table th:nth-child(2),
.hex-page table td:nth-child(2) {
  width: 45%;
}

.hex-page table th:nth-child(3),
.hex-page table td:nth-child(3),
.hex-page table th:nth-child(4),
.hex-page table td:nth-child(4) {
  width: 20%;
}

/* remove weird dot/pseudo element from paid/unpaid badges */
.badge::before,
.badge::after,
.label::before,
.label::after,
.hex-badge::before,
.hex-badge::after {
  content: none !important;
  display: none !important;
}

.badge,
.label,
.hex-badge {
  gap: 0 !important;
}

/* paid badge specifically: clean pill */
.badge.bg-success,
.bg-success.badge,
.badge-success,
.label-success {
  background: #10b981 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* invoice detail visual grouping */
.hex-invoice-compact-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 42px;
  margin: 18px 0 28px;
}

.hex-invoice-compact-meta .hex-meta-item {
  padding: 14px 16px;
  border: 1px solid var(--hex-border);
  border-radius: 16px;
  background: #fbfdff;
}

.hex-invoice-compact-meta .hex-meta-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 900;
  color: #0f172a;
}

.hex-invoice-compact-meta .hex-meta-value {
  color: #334155;
}

.hex-invoice-parties {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin: 26px 0;
}

.hex-invoice-party {
  padding: 18px;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  background: #ffffff;
}

.hex-invoice-party h3 {
  margin: 0 0 14px !important;
  font-size: 16px;
}

.hex-invoice-party-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
}

.hex-invoice-party-row strong {
  margin: 0 !important;
}

@media (max-width: 900px) {
  .hex-invoice-compact-meta,
  .hex-invoice-parties {
    grid-template-columns: 1fr;
  }

  .hex-page .card-header {
    grid-template-columns: 1fr;
  }
}


/* HEXSSL 0.3.2 logged-in app mode */
body .hex-shell {
  min-height: 100vh;
}

.hex-main .hex-public-top,
.hex-main .hex-public-page,
.hex-main .hex-public-main,
.hex-main .hex-public-benefits,
.hex-main .hex-footer {
  display: none !important;
}

.hex-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hex-sidebar-login {
  margin-top: 18px;
}

.hex-sidebar-login .hex-btn {
  width: 100%;
}

@media (max-width: 1080px) {
  .hex-sidebar {
    position: relative;
  }
}


/* HEXSSL 0.3.3 support ticket detail */
.hex-ticket-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hex-ticket-meta > div {
  padding: 16px;
  border: 1px solid var(--hex-border);
  border-radius: 16px;
  background: #fbfdff;
}

.hex-ticket-meta strong {
  display: block;
  margin-bottom: 8px;
  font-weight: 900;
  color: #0f172a;
}

.hex-ticket-meta span {
  color: #334155;
}

.hex-ticket-thread {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.hex-ticket-message {
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
}

.hex-ticket-message-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #f3f8fc;
  border-bottom: 1px solid var(--hex-border);
}

.hex-ticket-message-head span {
  color: var(--hex-muted);
  font-size: 13px;
}

.hex-ticket-message-body {
  padding: 18px;
  color: #1f2937;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .hex-ticket-meta {
    grid-template-columns: 1fr;
  }
}


/* HEXSSL 0.3.4 stronger invoice/proforma readability */

/* Overall invoice/proforma detail card */
.hex-page .card {
  border-radius: 26px;
}

.hex-page .card-header {
  min-height: 86px;
  padding: 24px 28px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.hex-page .card-header > div:first-child,
.hex-page .card-header .d-flex:first-child {
  max-width: 760px;
}

.hex-page .card-header .btn,
.hex-page .card-header button,
.hex-page .card-header a.btn {
  min-width: 72px;
}

/* Give detail pages a readable max-width instead of scattering content */
.hex-page .card-body {
  padding: 34px 36px !important;
}

.hex-page .card-body > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0;
}

/* Invoice/proforma top info: readable stacked metadata */
.hex-page .card-body > .row:first-of-type {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px !important;
  margin-bottom: 34px !important;
}

.hex-page .card-body > .row:first-of-type > [class*="col-"],
.hex-page .card-body > .row:first-of-type > div {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 18px 20px !important;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  background: #fbfdff;
}

.hex-page .card-body > .row:first-of-type strong,
.hex-page .card-body > .row:first-of-type b,
.hex-page .card-body > .row:first-of-type label {
  display: block;
  margin: 0 0 8px !important;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.hex-page .card-body > .row:first-of-type span,
.hex-page .card-body > .row:first-of-type div,
.hex-page .card-body > .row:first-of-type p {
  color: #334155;
  font-size: 15px;
}

/* Company / Client blocks: more compact and left-aligned */
.hex-page .card-body h5,
.hex-page .card-body h6,
.hex-page .card-body .h5,
.hex-page .card-body .h6 {
  margin: 30px 0 14px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hex-border);
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hex-page .card-body > .row:not(:first-of-type):has(.col-md-6),
.hex-page .card-body > .row:not(:first-of-type):has(.col-md-4),
.hex-page .card-body > .row:not(:first-of-type):has(.col-md-3) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px !important;
  margin-bottom: 24px !important;
}

.hex-page .card-body > .row:not(:first-of-type) > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

.hex-page .card-body > .row:not(:first-of-type) > [class*="col-"] > div,
.hex-page .card-body > .row:not(:first-of-type) > [class*="col-"] > p {
  margin-bottom: 8px !important;
}

.hex-page .card-body > .row:not(:first-of-type) strong,
.hex-page .card-body > .row:not(:first-of-type) b,
.hex-page .card-body > .row:not(:first-of-type) label {
  display: block;
  margin-bottom: 4px !important;
  font-size: 13px;
  color: #0f172a;
  font-weight: 900;
}

/* Invoice table */
.hex-page .table,
.hex-page table {
  margin-top: 28px !important;
  border: 1px solid var(--hex-border) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.hex-page table thead th,
.hex-page .table thead th {
  padding: 17px 18px !important;
  background: #f3f8fc !important;
  border-bottom: 1px solid var(--hex-border) !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hex-page table tbody td,
.hex-page .table tbody td {
  padding: 18px !important;
  border-bottom: 1px solid #edf2f7 !important;
  font-size: 15px;
  color: #1f2937;
}

.hex-page table tbody tr:last-child td,
.hex-page .table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Totals row */
.hex-page table tr:last-child td,
.hex-page .table tr:last-child td,
.hex-page table tfoot td,
.hex-page .table tfoot td {
  background: #fbfdff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  color: #0f172a !important;
}

/* Ensure badge is clean */
.hex-page .badge,
.hex-page .label,
.hex-page .hex-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
}

.hex-page .badge::before,
.hex-page .badge::after,
.hex-page .label::before,
.hex-page .label::after {
  content: none !important;
}

/* Action buttons */
.hex-page .btn-success,
.hex-page .btn-primary {
  background: var(--hex-green-3) !important;
  color: #fff !important;
  border: 0 !important;
}

.hex-page .btn:not(.btn-success):not(.btn-primary),
.hex-page .btn-secondary,
.hex-page .btn-outline-primary {
  background: #dbe7f1 !important;
  color: #334155 !important;
  border: 1px solid #c6d6e3 !important;
}

/* DOM-polished invoice */
.hex-polished-invoice-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px !important;
  margin-bottom: 32px !important;
}

.hex-polished-invoice-section {
  padding: 20px !important;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  background: #ffffff;
}

.hex-polished-invoice-section-title {
  margin: 0 0 12px !important;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 980px) {
  .hex-page .card-body > .row:first-of-type,
  .hex-polished-invoice-meta,
  .hex-page .card-body > .row:not(:first-of-type):has(.col-md-6),
  .hex-page .card-body > .row:not(:first-of-type):has(.col-md-4),
  .hex-page .card-body > .row:not(:first-of-type):has(.col-md-3) {
    grid-template-columns: 1fr !important;
  }

  .hex-page .card-body {
    padding: 24px 18px !important;
  }
}


/* HEXSSL 0.3.6 hard invoice/proforma readability layer */

.hex-invoice-clean {
  max-width: 1180px;
  margin: 0 auto;
}

.hex-invoice-clean .card,
.hex-invoice-clean.card {
  border-radius: 26px !important;
  border: 1px solid var(--hex-border) !important;
  box-shadow: var(--hex-shadow) !important;
  overflow: hidden !important;
}

.hex-invoice-clean .card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 24px 30px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--hex-border) !important;
}

.hex-invoice-clean .card-header h1,
.hex-invoice-clean .card-header h2,
.hex-invoice-clean .card-header h3,
.hex-invoice-clean .card-header h4,
.hex-invoice-clean .card-header h5 {
  margin: 0 !important;
  font-size: 24px !important;
  letter-spacing: -.035em !important;
}

.hex-invoice-clean .card-body {
  padding: 32px !important;
}

.hex-invoice-summary {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(320px, 1.15fr) minmax(220px, .7fr);
  gap: 18px;
  margin-bottom: 26px;
}

.hex-invoice-box {
  border: 1px solid var(--hex-border);
  border-radius: 20px;
  background: #fbfdff;
  padding: 18px 20px;
}

.hex-invoice-box-title {
  display: block;
  margin-bottom: 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .075em;
}

.hex-invoice-main-no {
  font-size: 24px;
  font-weight: 950;
  color: #0f172a;
  letter-spacing: -.04em;
}

.hex-invoice-status {
  display: inline-flex;
  margin-top: 10px;
  width: fit-content;
}

.hex-invoice-date-stack {
  display: grid;
  gap: 12px;
}

.hex-invoice-date-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid #e8eef5;
}

.hex-invoice-date-row:last-child {
  border-bottom: 0;
}

.hex-invoice-date-row strong {
  margin: 0 !important;
  color: #0f172a;
  font-weight: 950;
}

.hex-invoice-date-row span {
  color: #334155;
  font-weight: 700;
}

.hex-invoice-parties-clean {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0;
}

.hex-invoice-party-clean {
  border: 1px solid var(--hex-border);
  border-radius: 20px;
  background: #ffffff;
  padding: 20px;
}

.hex-invoice-party-clean h3 {
  margin: 0 0 14px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hex-border);
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.hex-invoice-party-clean .line {
  margin: 5px 0;
  color: #334155;
  line-height: 1.45;
}

.hex-invoice-party-clean .line.strong {
  color: #0f172a;
  font-weight: 900;
}

.hex-invoice-clean table,
.hex-invoice-clean .table {
  margin-top: 24px !important;
  border: 1px solid var(--hex-border) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.hex-invoice-clean table th,
.hex-invoice-clean .table th {
  padding: 16px 18px !important;
  background: #f3f8fc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

.hex-invoice-clean table td,
.hex-invoice-clean .table td {
  padding: 17px 18px !important;
  color: #1f2937 !important;
  vertical-align: top !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.hex-invoice-clean table tr:last-child td,
.hex-invoice-clean .table tr:last-child td,
.hex-invoice-clean table tfoot td,
.hex-invoice-clean .table tfoot td {
  background: #fbfdff !important;
  color: #0f172a !important;
  font-weight: 950 !important;
}

.hex-invoice-clean .badge,
.hex-invoice-clean .label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

.hex-invoice-clean .badge::before,
.hex-invoice-clean .badge::after,
.hex-invoice-clean .label::before,
.hex-invoice-clean .label::after {
  content: none !important;
  display: none !important;
}

.hex-invoice-native-noise-hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .hex-invoice-summary,
  .hex-invoice-parties-clean {
    grid-template-columns: 1fr;
  }

  .hex-invoice-clean .card-body {
    padding: 22px !important;
  }

  .hex-invoice-date-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* HEXSSL 0.3.7 order/dashboard/profile fixes */
.hex-product-grid-client {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hex-page > .hex-product-grid,
.hex-page .hex-product-grid-client {
  max-width: 1120px;
}

.hex-page .hex-product-card {
  min-height: 150px;
}

@media (max-width: 980px) {
  .hex-product-grid-client {
    grid-template-columns: 1fr;
  }
}


/* HEXSSL 0.3.8 safe invoice/proforma layout
   No generated data, no hardcoded language. Native values and labels remain intact. */

.hex-invoice-summary,
.hex-invoice-parties-clean,
.hex-invoice-native-noise-hidden {
  display: none !important;
}

.hex-invoice-native-clean .card-header,
.hex-page .card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px 28px !important;
}

.hex-invoice-native-clean .card-header .btn,
.hex-page .card-header .btn {
  margin-left: 8px;
}

.hex-invoice-native-clean .card-body {
  padding: 30px 32px !important;
}

/* First metadata row: keep existing labels/values, but make it compact */
.hex-invoice-native-meta-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 28px !important;
}

.hex-invoice-native-meta-row > [class*="col-"],
.hex-invoice-native-meta-row > div {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 16px 18px !important;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  background: #fbfdff;
}

/* Party rows: keep native values, make blocks tighter */
.hex-invoice-native-party-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 24px 0 !important;
}

.hex-invoice-native-party-row > [class*="col-"],
.hex-invoice-native-party-row > div {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 18px !important;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  background: #ffffff;
}

.hex-invoice-native-clean strong,
.hex-invoice-native-clean b,
.hex-invoice-native-clean label {
  color: #0f172a;
  font-weight: 900;
}

.hex-invoice-native-clean table,
.hex-invoice-native-clean .table {
  margin-top: 24px !important;
  border: 1px solid var(--hex-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.hex-invoice-native-clean table th,
.hex-invoice-native-clean .table th {
  padding: 16px 18px !important;
  background: #f3f8fc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.hex-invoice-native-clean table td,
.hex-invoice-native-clean .table td {
  padding: 17px 18px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.hex-invoice-native-clean .badge::before,
.hex-invoice-native-clean .badge::after,
.hex-invoice-native-clean .label::before,
.hex-invoice-native-clean .label::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 980px) {
  .hex-invoice-native-meta-row,
  .hex-invoice-native-party-row {
    grid-template-columns: 1fr !important;
  }
}


/* HEXSSL 0.3.9 stability overrides */

/* Never show generated invoice/proforma blocks from previous builds */
.hex-invoice-summary,
.hex-invoice-parties-clean,
.hex-invoice-native-noise-hidden {
  display: none !important;
}

/* Native invoice/proforma stays native, only styled for readability */
.hex-page .card {
  border-radius: 24px;
  border: 1px solid var(--hex-border);
  box-shadow: var(--hex-shadow);
  background: #ffffff;
}

.hex-page .card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px 28px !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--hex-border) !important;
}

.hex-page .card-body {
  padding: 28px !important;
}

.hex-page .card-body .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  row-gap: 14px;
}

.hex-page table,
.hex-page .table {
  margin-top: 22px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.hex-page .badge::before,
.hex-page .badge::after,
.hex-page .label::before,
.hex-page .label::after,
.hex-badge::before,
.hex-badge::after {
  content: none !important;
  display: none !important;
}

/* Client order service grid */
.hex-product-grid-client {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px;
}

@media (max-width: 980px) {
  .hex-product-grid-client {
    grid-template-columns: 1fr;
  }
}


/* === 0.3.10 FONT WEIGHT FIX (tickets + invoices) === */

.table,
.table td,
.table th,
.hex-page table,
.hex-page table td,
.hex-page table th {
  font-weight: 400 !important;
}

.table th,
.hex-page table th {
  font-weight: 600 !important;
}

.table strong,
.hex-page table strong {
  font-weight: 600 !important;
}

.badge,
.hex-badge {
  font-weight: 600 !important;
}

strong,
b {
  font-weight: 600;
}

/* better readability */
.table td {
  color: #334155;
}

.table th {
  color: #64748b;
}


/* === 0.3.11 STRONG OVERRIDE: list/table font weight fix === */

.hex-page .table,
.hex-page .table *,
.hex-page table,
.hex-page table *,
.card-body .table,
.card-body .table *,
.card-body table,
.card-body table * {
  font-weight: 400 !important;
}

.hex-page .table th,
.hex-page table th,
.card-body .table th,
.card-body table th,
.table thead th,
table thead th {
  font-weight: 600 !important;
  color: #64748b !important;
}

.hex-page .table td,
.hex-page table td,
.card-body .table td,
.card-body table td,
.table tbody td,
table tbody td {
  font-weight: 400 !important;
  color: #334155 !important;
}

.hex-page .table td strong,
.hex-page table td strong,
.card-body .table td strong,
.card-body table td strong {
  font-weight: 600 !important;
}

.hex-page .badge,
.hex-page .label,
.hex-page .hex-badge,
.card-body .badge,
.card-body .label,
.card-body .hex-badge {
  font-weight: 600 !important;
}

/* prevent global heading-like weight from leaking into module lists */
.hex-page .card-body table b,
.hex-page .card-body table strong,
.hex-page .card-body .table b,
.hex-page .card-body .table strong {
  font-weight: 600 !important;
}

/* keep regular text regular inside invoice/ticket/order tables */
.hex-page .card-body table span,
.hex-page .card-body table a,
.hex-page .card-body table div,
.hex-page .card-body .table span,
.hex-page .card-body .table a,
.hex-page .card-body .table div {
  font-weight: 400 !important;
}

/* but buttons should stay readable */
.hex-page .card-body table .btn,
.hex-page .card-body .table .btn {
  font-weight: 700 !important;
}


/* === HEXSSL 0.4.0 final stability overrides === */

/* Tables/lists: invoices, support tickets, orders */
.hex-page .table,
.hex-page .table *,
.hex-page table,
.hex-page table *,
.card-body .table,
.card-body .table *,
.card-body table,
.card-body table * {
  font-weight: 400 !important;
}

.hex-page .table th,
.hex-page table th,
.card-body .table th,
.card-body table th,
.table thead th,
table thead th {
  font-weight: 600 !important;
  color: #64748b !important;
}

.hex-page .table td,
.hex-page table td,
.card-body .table td,
.card-body table td,
.table tbody td,
table tbody td {
  font-weight: 400 !important;
  color: #334155 !important;
}

.hex-page .table td strong,
.hex-page table td strong,
.card-body .table td strong,
.card-body table td strong {
  font-weight: 600 !important;
}

.hex-page .badge,
.hex-page .label,
.hex-page .hex-badge,
.card-body .badge,
.card-body .label,
.card-body .hex-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.hex-page .badge::before,
.hex-page .badge::after,
.hex-page .label::before,
.hex-page .label::after,
.hex-badge::before,
.hex-badge::after,
.badge::before,
.badge::after,
.label::before,
.label::after {
  content: none !important;
  display: none !important;
}

/* Account form */
.hex-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.hex-form-wide {
  grid-column: 1 / -1;
}

.hex-account-form {
  margin-top: 20px;
}

.hex-account-form .hex-form-group {
  display: grid;
  gap: 7px;
  margin-bottom: 0;
}

.hex-page .hex-account-form label {
  color: #0f172a;
  font-weight: 600 !important;
}

.hex-page .hex-account-form input,
.hex-page .hex-account-form select,
.hex-page .hex-account-form textarea {
  font-weight: 400 !important;
}

.hex-account-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--hex-mint);
  color: #087029;
  line-height: 1.55;
  font-weight: 600;
}

/* Client order service grid */
.hex-product-grid-client {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px;
}

@media (max-width: 980px) {
  .hex-product-grid-client,
  .hex-form-grid {
    grid-template-columns: 1fr;
  }
}


/* === HEXSSL 0.4.2 FINAL LIST/TABS FONT FIX === */

/* Remove artifacts/dots/pills from invoice tabs and Bootstrap nav links */
.nav::before,
.nav::after,
.nav-tabs::before,
.nav-tabs::after,
.nav-pills::before,
.nav-pills::after,
.nav-link::before,
.nav-link::after,
.nav-item::before,
.nav-item::after,
button.nav-link::before,
button.nav-link::after,
a.nav-link::before,
a.nav-link::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hide empty children inside Paid/Unpaid tabs */
.nav-link > .badge:empty,
.nav-link > .label:empty,
.nav-link > span:empty,
.nav-link.active > .badge:empty,
.nav-link.active > .label:empty,
.nav-link.active > span:empty {
  display: none !important;
}

/* Invoice tabs should be buttons, not toggles */
.nav-tabs,
.nav-pills,
.nav {
  align-items: center !important;
}

.nav-link,
.nav-tabs .nav-link,
.nav-pills .nav-link,
button.nav-link,
a.nav-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* Strong table/list font normalization for invoices, support tickets, orders */
.hex-page .table,
.hex-page table,
.hex-page .table *,
.hex-page table *,
.hex-page .card-body .table,
.hex-page .card-body table,
.hex-page .card-body .table *,
.hex-page .card-body table *,
.support-tickets .table,
.support-tickets .table *,
.invoices .table,
.invoices .table *,
.invoice .table,
.invoice .table *,
.orders .table,
.orders .table * {
  font-weight: 400 !important;
}

/* Header columns: readable, not heavy */
.hex-page .table thead th,
.hex-page table thead th,
.hex-page .card-body .table thead th,
.hex-page .card-body table thead th,
.support-tickets .table thead th,
.invoices .table thead th,
.orders .table thead th {
  font-weight: 600 !important;
  color: #64748b !important;
  letter-spacing: .06em !important;
}

/* Body cells and links */
.hex-page .table tbody td,
.hex-page table tbody td,
.hex-page .table tbody td *,
.hex-page table tbody td *,
.hex-page .table tbody td a,
.hex-page table tbody td a,
.support-tickets .table tbody td,
.support-tickets .table tbody td *,
.invoices .table tbody td,
.invoices .table tbody td *,
.orders .table tbody td,
.orders .table tbody td * {
  font-weight: 400 !important;
  color: #334155 !important;
}

/* Keep title/first column only slightly emphasized */
.hex-page .table tbody td:first-child,
.hex-page table tbody td:first-child,
.hex-page .table tbody td:first-child *,
.hex-page table tbody td:first-child *,
.support-tickets .table tbody td:first-child,
.support-tickets .table tbody td:first-child *,
.invoices .table tbody td:first-child,
.invoices .table tbody td:first-child * {
  font-weight: 600 !important;
  color: #0f172a !important;
}

/* Amounts semi-bold only */
.hex-page .table tbody td:nth-last-child(2),
.hex-page .table tbody td:nth-last-child(2) *,
.hex-page table tbody td:nth-last-child(2),
.hex-page table tbody td:nth-last-child(2) *,
.hex-page .table tbody td:nth-last-child(3),
.hex-page table tbody td:nth-last-child(3) {
  font-weight: 600 !important;
}

/* Buttons inside tables */
.hex-page .table .btn,
.hex-page table .btn,
.hex-page .table button,
.hex-page table button {
  font-weight: 600 !important;
}

/* Badges/statuses: no pseudo-elements and no artifacts */
.badge,
.label,
.hex-badge,
span.badge,
span.label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.badge::before,
.badge::after,
.label::before,
.label::after,
.hex-badge::before,
.hex-badge::after,
span.badge::before,
span.badge::after,
span.label::before,
span.label::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
}

/* Override previous overly-heavy product/list inheritance */
.hex-page td strong,
.hex-page td b,
.hex-page td a,
.hex-page table strong,
.hex-page table b,
.hex-page table a {
  font-weight: 600 !important;
}

.hex-page td div,
.hex-page td span,
.hex-page table div,
.hex-page table span {
  font-weight: inherit !important;
}

/* Card headings remain clear, but not black-heavy */
.hex-page .card-header h1,
.hex-page .card-header h2,
.hex-page .card-header h3,
.hex-page .card-header h4,
.hex-page .card-header h5,
.hex-page .card-header h6 {
  font-weight: 700 !important;
}


/* HEXSSL 0.4.3 invoice list readability */
.hex-page table tbody td:first-child,
.hex-page .table tbody td:first-child {
  white-space: nowrap;
}

.hex-page table tbody td,
.hex-page .table tbody td {
  vertical-align: middle !important;
}


/* HEXSSL 0.4.4 invoice list exact UI */
.hex-invoice-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  margin: 26px 0;
  border: 1px solid var(--hex-border);
  border-radius: 18px;
  background: #eef7f1;
}

.hex-invoice-tab {
  appearance: none;
  border: 1px solid #c8d8e5;
  background: #dbe7f1;
  color: #334155;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hex-invoice-tab.active {
  border-color: var(--hex-green-3);
  background: var(--hex-green-3);
  color: #fff;
}

.hex-invoice-tab::before,
.hex-invoice-tab::after,
.hex-invoice-tab *::before,
.hex-invoice-tab *::after {
  content: none !important;
  display: none !important;
}

.hex-invoice-tab-panel {
  display: none;
}

.hex-invoice-tab-panel.active {
  display: block;
}

.hex-invoice-list-table .hex-doc-number {
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap;
}

.hex-invoice-list-table td,
.hex-invoice-list-table td *,
.hex-invoice-list-table th {
  font-weight: 400 !important;
}

.hex-invoice-list-table th {
  font-weight: 600 !important;
}

.hex-invoice-list-table td:nth-child(4),
.hex-invoice-list-table td:nth-child(4) * {
  font-weight: 600 !important;
}


/* HEXSSL 0.4.5 stable invoice tabs */
.hex-invoice-tabs.nav,
.hex-invoice-tabs.nav-pills,
.hex-invoice-tabs.nav-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px !important;
  margin: 26px 0 !important;
  border: 1px solid #cfe0ec !important;
  border-radius: 18px !important;
  background: #edf6f1 !important;
  list-style: none !important;
}

.hex-invoice-tabs .nav-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hex-invoice-tabs .nav-link {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 13px !important;
  border: 1px solid #bdd2e3 !important;
  background: #dce9f2 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.hex-invoice-tabs .nav-link.active {
  background: var(--hex-green-3) !important;
  border-color: var(--hex-green-3) !important;
  color: #fff !important;
}

.hex-invoice-tabs .nav-link::before,
.hex-invoice-tabs .nav-link::after,
.hex-invoice-tabs .nav-item::before,
.hex-invoice-tabs .nav-item::after,
.hex-invoice-tabs::before,
.hex-invoice-tabs::after {
  content: none !important;
  display: none !important;
}

.hex-invoice-tab-content .tab-pane {
  display: none;
}

.hex-invoice-tab-content .tab-pane.active {
  display: block;
}

.hex-invoice-list-table .hex-doc-number {
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap;
}

.hex-invoice-list-table td,
.hex-invoice-list-table td *,
.hex-invoice-list-table th {
  font-weight: 400 !important;
}

.hex-invoice-list-table th {
  font-weight: 600 !important;
}

.hex-invoice-list-table td:nth-child(4),
.hex-invoice-list-table td:nth-child(4) * {
  font-weight: 600 !important;
}


/* HEXSSL 0.4.7 sidebar/order/support/invoice stability */

/* Sidebar must not change spacing on Order Services */
.hex-sidebar {
  box-sizing: border-box !important;
}

.hex-nav {
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
}

.hex-nav a {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.hex-nav a *,
.hex-nav a::before,
.hex-nav a::after {
  line-height: 1 !important;
}

/* Prevent product/order pages from stretching sidebar internals */
.hex-product-grid,
.hex-product-grid-client {
  align-items: stretch !important;
}

/* Help desk values should be normal weight */
.support-tickets td,
.support-tickets td *,
.support-ticket td,
.support-ticket td *,
.hex-page table td,
.hex-page table td *,
.hex-page .table td,
.hex-page .table td * {
  font-weight: 400 !important;
}

.support-tickets td strong,
.support-ticket td strong,
.hex-page table td strong,
.hex-page .table td strong {
  font-weight: 600 !important;
}

/* Support Help Desk column specifically */
.support-tickets table tbody td:nth-child(3),
.support-tickets table tbody td:nth-child(3) *,
.hex-page table tbody td:nth-child(3),
.hex-page table tbody td:nth-child(3) * {
  font-weight: 400 !important;
}

/* Invoice paid/unpaid tabs */
.hex-invoice-tabs.nav,
.hex-invoice-tabs.nav-pills,
.hex-invoice-tabs.nav-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px !important;
  margin: 26px 0 !important;
  border: 1px solid #cfe0ec !important;
  border-radius: 18px !important;
  background: #edf6f1 !important;
  list-style: none !important;
}

.hex-invoice-tabs .nav-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hex-invoice-tabs .nav-link {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  border-radius: 13px !important;
  border: 1px solid #bdd2e3 !important;
  background: #dce9f2 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.hex-invoice-tabs .nav-link.active {
  background: var(--hex-green-3) !important;
  border-color: var(--hex-green-3) !important;
  color: #fff !important;
}

.hex-invoice-tabs .nav-link::before,
.hex-invoice-tabs .nav-link::after,
.hex-invoice-tabs .nav-item::before,
.hex-invoice-tabs .nav-item::after,
.hex-invoice-tabs::before,
.hex-invoice-tabs::after {
  content: none !important;
  display: none !important;
}

.hex-invoice-tab-content .tab-pane {
  display: none;
}

.hex-invoice-tab-content .tab-pane.active {
  display: block;
}

.hex-invoice-list-table .hex-doc-number {
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap;
}

.hex-ticket-message-head strong,
.hex-ticket-message-head span {
  font-weight: 600 !important;
}

.hex-ticket-message-body {
  font-weight: 400 !important;
}


/* HEXSSL 0.4.8 layout polish */

/* Hide duplicated topbar if a module accidentally renders layout content inside content area */
.hex-page .hex-topbar,
.hex-page .hex-main > .hex-topbar,
.hex-page header.hex-topbar {
  display: none !important;
}

/* Order services duplicate header/card cleanup */
.hex-page .card .hex-topbar,
.hex-page .card header.hex-topbar,
.hex-page .hex-order-panel .hex-topbar {
  display: none !important;
}

/* Keep sidebar spacing absolutely stable across all pages */
.hex-sidebar {
  width: 284px !important;
  flex: 0 0 284px !important;
  box-sizing: border-box !important;
}

.hex-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hex-nav a {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.hex-nav-section {
  margin: 22px 0 10px !important;
}

.hex-sidebar-card {
  margin-top: 22px !important;
  margin-bottom: 18px !important;
}

/* Invoice list column distribution: less empty space */
.hex-invoice-list-table {
  table-layout: fixed !important;
  width: 100% !important;
}

.hex-invoice-list-table th:nth-child(1),
.hex-invoice-list-table td:nth-child(1) {
  width: 18% !important;
}

.hex-invoice-list-table th:nth-child(2),
.hex-invoice-list-table td:nth-child(2) {
  width: 18% !important;
}

.hex-invoice-list-table th:nth-child(3),
.hex-invoice-list-table td:nth-child(3) {
  width: 22% !important;
}

.hex-invoice-list-table th:nth-child(4),
.hex-invoice-list-table td:nth-child(4) {
  width: 18% !important;
}

.hex-invoice-list-table th:nth-child(5),
.hex-invoice-list-table td:nth-child(5) {
  width: 12% !important;
  text-align: right !important;
}

.hex-invoice-list-table td,
.hex-invoice-list-table th {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Help Desk / General normal weight */
.support-tickets table tbody td:nth-child(3),
.support-tickets table tbody td:nth-child(3) *,
.hex-page table tbody td:nth-child(3),
.hex-page table tbody td:nth-child(3) * {
  font-weight: 400 !important;
}

/* Ticket thread author/date readable but not broken */
.hex-ticket-message-head strong {
  font-weight: 600 !important;
}

.hex-ticket-message-head span,
.hex-ticket-message-body {
  font-weight: 400 !important;
}

@media (max-width: 1080px) {
  .hex-sidebar {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .hex-nav {
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto !important;
  }

  .hex-nav a {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 780px) {
  .hex-invoice-list-table {
    table-layout: auto !important;
    min-width: 760px !important;
  }
}


/* HEXSSL 0.4.11 emergency app-shell repair
   Restore normal desktop structure:
   sidebar left, main area right, topbar inside main, content visible.
*/

@media (min-width: 1081px) {
  body {
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .hex-shell {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 100vh !important;
  }

  .hex-sidebar {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 284px !important;
    min-width: 284px !important;
    max-width: 284px !important;
    flex: 0 0 284px !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }

  .hex-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: calc(100% - 284px) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .hex-main > .hex-topbar {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 74px !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 18px 34px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .hex-main > .hex-page {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 38px 42px !important;
    position: relative !important;
  }

  .hex-topbar-title,
  .hex-topbar-subtitle {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .hex-topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
  }

  .hex-topbar-actions .hex-btn {
    white-space: nowrap !important;
  }
}

/* Sidebar stable, but no content crushing */
.hex-sidebar .hex-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.hex-sidebar .hex-nav a {
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hex-sidebar .hex-sidebar-card {
  background: rgba(30, 41, 59, .78) !important;
  color: #c7d4e6 !important;
}

.hex-sidebar .hex-sidebar-card strong {
  color: #f8fafc !important;
}

.hex-sidebar .hex-sidebar-card p {
  color: #c7d4e6 !important;
}

/* Main content cards/grids should stay readable */
.hex-page .hex-product-grid,
.hex-page .hex-product-grid-client {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1180px !important;
}

.hex-page .hex-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

.hex-page .hex-grid,
.hex-page .hex-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

.hex-page .hex-product-card,
.hex-page .hex-card {
  min-width: 0 !important;
  width: auto !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Hide only nested duplicate topbar inside content, never the real main topbar */
.hex-page > .hex-topbar,
.hex-page .card .hex-topbar,
.hex-page .hex-order-panel .hex-topbar {
  display: none !important;
}

/* Mobile */
@media (max-width: 1080px) {
  .hex-shell {
    display: block !important;
  }

  .hex-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .hex-main {
    width: 100% !important;
  }

  .hex-main > .hex-topbar {
    width: 100% !important;
  }

  .hex-main > .hex-page {
    width: 100% !important;
    padding: 18px 14px !important;
  }

  .hex-sidebar .hex-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
  }

  .hex-sidebar .hex-nav a {
    flex: 0 0 auto !important;
  }

  .hex-page .hex-product-grid,
  .hex-page .hex-product-grid-client,
  .hex-page .hex-grid,
  .hex-page .hex-grid-2,
  .hex-page .hex-grid-3 {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }
}


/* HEXSSL 0.4.12 Order Services nested layout fix */

/* If Order Services accidentally renders a full client shell inside the content card,
   hide only the nested sidebar/topbar. Keep the real outer sidebar and real topbar. */
.hex-page .hex-shell .hex-sidebar,
.hex-page .hex-shell > .hex-sidebar,
.hex-page .card .hex-sidebar,
.hex-page .hex-order-panel .hex-sidebar {
  display: none !important;
}

.hex-page .hex-shell .hex-main,
.hex-page .hex-shell > .hex-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

.hex-page .hex-shell {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
}

.hex-page .hex-shell .hex-topbar,
.hex-page .hex-shell > .hex-main > .hex-topbar {
  display: none !important;
}

.hex-page .hex-shell .hex-page,
.hex-page .hex-shell > .hex-main > .hex-page {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Order services card should not show duplicated outer card header layout */
.hex-page .card:has(.hex-shell) {
  overflow: hidden !important;
}

/* Ensure product area remains readable */
.hex-page .hex-shell .hex-product-grid,
.hex-page .hex-shell .hex-product-grid-client {
  max-width: none !important;
  width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* Fallback for browsers without :has(): make nested shell content normal width */
.hex-page .hex-shell .hex-title,
.hex-page .hex-shell .hex-subtitle,
.hex-page .hex-shell .hex-kicker,
.hex-page .hex-shell .hex-product-grid {
  margin-left: 0 !important;
}


/* HEXSSL 0.4.18 global rollback + scoped invoice polish */

/* Remove previous generated invoice layouts if any leaked from cached CSS/JS */
.hex-invoice-generated {
  display: none !important;
}

.hex-invoice-native-hidden {
  display: revert !important;
}

/* Restore normal card headers across modules: Services, Support, Account, Orders */
.hex-page .card:not(.hex-invoice-native-detail) > .card-header,
.hex-page .card:not(.hex-invoice-native-detail) .card-header {
  display: block !important;
  text-align: left !important;
  justify-content: initial !important;
  align-items: initial !important;
  grid-template-columns: none !important;
}

.hex-page .card:not(.hex-invoice-native-detail) > .card-header h1,
.hex-page .card:not(.hex-invoice-native-detail) > .card-header h2,
.hex-page .card:not(.hex-invoice-native-detail) > .card-header h3,
.hex-page .card:not(.hex-invoice-native-detail) > .card-header h4,
.hex-page .card:not(.hex-invoice-native-detail) > .card-header h5,
.hex-page .card:not(.hex-invoice-native-detail) > .card-header h6 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Services empty state should remain centered naturally, not pulled to right */
.hex-page .card:not(.hex-invoice-native-detail) .card-body {
  text-align: initial !important;
}

/* Invoice/proforma detail: safe native styling only */
.hex-invoice-native-detail > .card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 22px 28px !important;
  text-align: left !important;
}

.hex-invoice-native-detail > .card-header > div:last-child,
.hex-invoice-native-detail > .card-header .btn-group,
.hex-invoice-native-detail > .card-header .d-flex:last-child {
  margin-left: auto !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.hex-invoice-native-detail > .card-header .btn,
.hex-invoice-native-detail > .card-header a.btn,
.hex-invoice-native-detail > .card-header button {
  min-width: 76px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  margin-left: 8px !important;
}

/* Native invoice body: make it readable without forcing micro columns */
.hex-invoice-native-detail > .card-body {
  padding: 30px 32px !important;
  text-align: left !important;
}

.hex-invoice-native-detail > .card-body > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  row-gap: 18px !important;
  align-items: start !important;
}

/* Do NOT force all rows into grids. Only make large party rows breathe. */
.hex-invoice-native-detail > .card-body h5,
.hex-invoice-native-detail > .card-body h6,
.hex-invoice-native-detail > .card-body .h5,
.hex-invoice-native-detail > .card-body .h6 {
  display: block !important;
  margin: 22px 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--hex-border) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-align: left !important;
}

/* Invoice detail tables remain full width and readable */
.hex-invoice-native-detail table,
.hex-invoice-native-detail .table {
  width: 100% !important;
  table-layout: auto !important;
  margin-top: 26px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.hex-invoice-native-detail table th,
.hex-invoice-native-detail .table th {
  font-weight: 700 !important;
  text-align: left !important;
}

.hex-invoice-native-detail table td,
.hex-invoice-native-detail .table td {
  font-weight: 500 !important;
  vertical-align: middle !important;
}

/* If native invoice has Bootstrap columns, do not squeeze them */
.hex-invoice-native-detail .row > [class*="col-"] {
  min-width: 220px !important;
}

/* Keep status badge clean */
.hex-invoice-native-detail .badge::before,
.hex-invoice-native-detail .badge::after,
.hex-invoice-native-detail .label::before,
.hex-invoice-native-detail .label::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 900px) {
  .hex-invoice-native-detail > .card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hex-invoice-native-detail > .card-header > div:last-child,
  .hex-invoice-native-detail > .card-header .btn-group,
  .hex-invoice-native-detail > .card-header .d-flex:last-child {
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }

  .hex-invoice-native-detail > .card-body {
    padding: 22px 18px !important;
  }

  .hex-invoice-native-detail .row > [class*="col-"] {
    min-width: 0 !important;
  }
}


/* HEXSSL 0.4.19 support header and modal language/layout fix */

/* Support header: keep New ticket close to Support tickets title, not centered */
.support-tickets .card-header,
.hex-page .card-header:has(#open-ticket-modal),
.hex-page .card-header:has([data-bs-target="#open-ticket-modal"]),
.hex-page .card-header:has(button[data-bs-target="#open-ticket-modal"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  text-align: left !important;
}

.support-tickets .card-header .d-flex,
.hex-page .card-header:has(#open-ticket-modal) .d-flex,
.hex-page .card-header:has([data-bs-target="#open-ticket-modal"]) .d-flex {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 18px !important;
  width: auto !important;
}

.support-tickets .card-header .d-flex > div:last-child,
.hex-page .card-header:has([data-bs-target="#open-ticket-modal"]) .d-flex > div:last-child {
  margin-left: 0 !important;
}

.support-tickets [data-bs-target="#open-ticket-modal"],
.hex-page [data-bs-target="#open-ticket-modal"] {
  margin-left: 0 !important;
  align-self: center !important;
}

/* Keep support modal footer buttons aligned and readable */
#open-ticket-modal .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}

#open-ticket-modal .modal-footer .btn,
#open-ticket-modal .modal-footer button,
#open-ticket-modal .modal-footer .hex-btn,
#open-ticket-modal .modal-footer .hex-btn-danger {
  min-width: 110px !important;
  font-weight: 700 !important;
}

/* Ensure cancel-style button is red only visually; label must come from template/trans or native JS */
#open-ticket-modal .modal-footer .btn-danger,
#open-ticket-modal .modal-footer .hex-btn-danger,
#open-ticket-modal [data-bs-dismiss="modal"].btn-danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}


/* HEXSSL 0.4.20 Order Services duplicate title cleanup */

.hex-order-services-clean {
  width: 100% !important;
}

.hex-order-services-clean > .hex-section-subtitle {
  margin: 0 0 24px !important;
  max-width: 720px !important;
}

.hex-page .hex-order-services-clean .hex-kicker,
.hex-page .hex-order-services-clean .hex-title,
.hex-page .card-body > .hex-kicker:first-child,
.hex-page .card-body > .hex-title:first-child {
  display: none !important;
}

.hex-order-services-clean .hex-product-grid,
.hex-order-services-clean .hex-product-grid-client {
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1180px !important;
}

@media (max-width: 900px) {
  .hex-order-services-clean .hex-product-grid,
  .hex-order-services-clean .hex-product-grid-client {
    grid-template-columns: 1fr !important;
  }
}


/* HEXSSL 0.4.21 language/layout safety */
.hex-order-services-clean .hex-title,
.hex-order-services-clean .hex-kicker {
  display: none !important;
}


/* HEXSSL 0.4.22 language switcher */

.hex-language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 30;
}

.hex-language-current {
  min-width: 48px;
  min-height: 38px;
  border: 1px solid #c6d6e3;
  border-radius: 12px;
  background: #dbe7f1;
  color: #334155;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hex-language-current:hover {
  background: #cfe0ec;
}

.hex-language-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 84px;
  padding: 6px;
  border: 1px solid var(--hex-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--hex-shadow);
  display: none;
}

.hex-language-switcher.is-open .hex-language-menu {
  display: grid;
  gap: 4px;
}

.hex-language-menu button {
  border: 0;
  background: transparent;
  color: #334155;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.hex-language-menu button:hover,
.hex-language-menu button.is-active {
  background: var(--hex-mint);
  color: var(--hex-green-4);
}

.hex-sidebar .hex-language-switcher {
  display: none;
}

@media (max-width: 1080px) {
  .hex-language-current {
    min-height: 40px;
  }

  .hex-topbar-actions .hex-language-switcher {
    flex: 0 0 auto !important;
  }

  .hex-public-nav .hex-language-switcher {
    grid-column: 1 / -1;
    justify-self: end;
  }
}


/* HEXSSL 0.4.23 language switcher visibility/fix */

.hex-language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 999 !important;
  flex: 0 0 auto !important;
}

.hex-language-current {
  min-width: 54px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
}

.hex-language-current:hover,
.hex-language-switcher.is-open .hex-language-current {
  background: #111827 !important;
  color: #ffffff !important;
}

.hex-language-menu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  min-width: 124px !important;
  padding: 8px !important;
  border: 1px solid #d7e2ec !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important;
  display: none !important;
  z-index: 1000 !important;
}

.hex-language-switcher.is-open .hex-language-menu {
  display: grid !important;
  gap: 6px !important;
}

.hex-language-menu button {
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-weight: 800 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.hex-language-menu button:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

.hex-language-menu button.is-active {
  background: var(--hex-green-3) !important;
  color: #ffffff !important;
  border-color: var(--hex-green-3) !important;
}

.hex-topbar-actions .hex-language-switcher {
  order: -1 !important;
}

.hex-public-nav .hex-language-switcher {
  margin-right: 4px !important;
}

@media (max-width: 1080px) {
  .hex-topbar-actions .hex-language-switcher {
    flex: 0 0 64px !important;
  }

  .hex-language-current {
    width: 100% !important;
  }

  .hex-public-nav .hex-language-switcher {
    grid-column: 1 / -1 !important;
    justify-self: end !important;
  }
}


/* HEXSSL 0.5.1 product icon SVG fix
   Wymusza spójny rozmiar SVG ikon w product cards niezależnie od klasy SVG (.hex-icon / .hex-btn-icon).
   Przed fixem: cart() używał .hex-btn-icon (22px) a shield()/support() używały .hex-icon (34px),
   co powodowało rozjechaną sekcję services. */
.hex-product-icon svg {
  width: 34px !important;
  height: 34px !important;
  color: var(--hex-green-3);
  display: block;
}

/* Defensywne: jeśli SVG nie ma jawnego rozmiaru w atrybutach, kontener ogranicza */
.hex-product-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}


/* HEXSSL 0.5.2 — natywny selector języka w stylu FOSSBilling/Huragi
   Używamy <select class="js-language-selector"> obsługiwany przez
   bibliotekę FOSSBilling Api/API.js. Stylujemy zgodnie z resztą motywu. */
.hex-language-select {
  min-height: 40px;
  padding: 8px 32px 8px 12px;
  border: 1px solid #c6d6e3;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230f172a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
  min-width: 110px;
  max-width: 180px;
}

.hex-language-select:hover {
  border-color: var(--hex-green-3);
  background-color: #f8fbff;
}

.hex-language-select:focus {
  outline: none;
  border-color: var(--hex-green-3);
  box-shadow: 0 0 0 3px rgba(49, 168, 59, 0.15);
}

/* Topbar i public-nav: spójna pozycja */
.hex-topbar-actions .hex-language-switcher,
.hex-public-nav .hex-language-switcher {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 680px) {
  .hex-language-select {
    width: 100%;
    max-width: none;
  }
}


/* ============================================================
   HEXSSL 0.5.3 — RESPONSYWNOŚĆ (mobile-first fix)
   ============================================================ */

/* --- Hamburger button --- */
.hex-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hex-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.hex-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #0f172a;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

.hex-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hex-hamburger.is-open span:nth-child(2) { opacity: 0; }
.hex-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Overlay pod sidebar (mobile) --- */
.hex-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7,17,31,.48);
  z-index: 99;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hex-sidebar-overlay.is-visible {
  display: block;
}

/* --- Topbar left (hamburger + title) --- */
.hex-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hex-topbar-left .hex-topbar-title,
.hex-topbar-left .hex-topbar-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Breakpoint: tablet (≤1080px) ===== */
@media (max-width: 1080px) {

  /* Sidebar chowa się jako drawer po lewej stronie */
  .hex-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 100 !important;
    overflow-y: auto;
  }

  .hex-sidebar.is-open {
    transform: translateX(0);
  }

  /* Main zajmuje całą szerokość */
  .hex-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Hamburger widoczny */
  .hex-hamburger {
    display: flex;
  }

  /* Topbar mniejszy padding */
  .hex-topbar {
    padding: 0 20px;
    min-height: 66px;
  }

  /* Nav items w siatce 2-kolumnowej */
  .hex-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: unset !important;
    overflow-x: unset !important;
    gap: 4px !important;
  }

  .hex-nav a {
    flex: unset !important;
  }
}

/* ===== Breakpoint: mobile (≤680px) ===== */
@media (max-width: 680px) {

  /* Topbar: bardzo mały padding, subtitle ukryty */
  .hex-topbar {
    padding: 0 14px;
    min-height: 58px;
    gap: 8px;
  }

  .hex-topbar-subtitle {
    display: none;
  }

  .hex-topbar-title {
    font-size: 14px;
  }

  /* Topbar-actions: upraszczamy — tylko language switcher i jeden przycisk */
  .hex-topbar-actions {
    gap: 8px;
  }

  .hex-topbar-actions .hex-btn.secondary {
    display: none; /* Account button ukryte — jest w sidebarze */
  }

  /* Dashboard product grid: 2 kolumny na tablecie, 1 na małym telefonie */
  .hex-product-grid-client {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hex-page padding */
  .hex-page {
    padding: 20px 16px !important;
  }

  /* Karty — mniejszy padding */
  .hex-card {
    padding: 20px 16px !important;
  }

  /* Language switcher przycisk mniejszy */
  .hex-language-current {
    min-width: 44px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .hex-language-menu {
    right: 0 !important;
    left: auto !important;
  }
}

/* ===== Breakpoint: bardzo małe telefony (≤380px) ===== */
@media (max-width: 380px) {
  .hex-product-grid-client {
    grid-template-columns: 1fr !important;
  }

  .hex-topbar-title {
    font-size: 12px;
  }

  .hex-topbar-actions .hex-language-switcher {
    display: none; /* Na bardzo małych — language w sidebarze */
  }
}

/* ===== Product grid auto-fit (ogólny) ===== */
/* Naprawia brak auto-fit — zamiast repeat(3, 1fr) które łamie się brzydko */
.hex-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

/* ===== Invoice/support tabele na mobile ===== */
@media (max-width: 680px) {
  .hex-invoice-list-table,
  .hex-support-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hex-invoice-list-table table,
  .hex-support-table table {
    min-width: 560px;
  }
}


/* ============================================================
   HEXSSL 0.5.3 — RESPONSYWNOŚĆ (mobile-first fix)
   ============================================================ */

.hex-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hex-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.hex-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #0f172a;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

.hex-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hex-hamburger.is-open span:nth-child(2) { opacity: 0; }
.hex-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hex-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7,17,31,.48);
  z-index: 99;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hex-sidebar-overlay.is-visible {
  display: block;
}

.hex-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hex-topbar-left .hex-topbar-title,
.hex-topbar-left .hex-topbar-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1080px) {
  .hex-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 100 !important;
    overflow-y: auto;
  }

  .hex-sidebar.is-open {
    transform: translateX(0);
  }

  .hex-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .hex-hamburger {
    display: flex;
  }

  .hex-topbar {
    padding: 0 20px;
    min-height: 66px;
  }

  .hex-nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: unset !important;
    overflow-x: unset !important;
    gap: 4px !important;
  }

  .hex-nav a {
    flex: unset !important;
  }
}

@media (max-width: 680px) {
  .hex-topbar {
    padding: 0 14px;
    min-height: 58px;
    gap: 8px;
  }

  .hex-topbar-subtitle {
    display: none;
  }

  .hex-topbar-title {
    font-size: 14px;
  }

  .hex-topbar-actions {
    gap: 8px;
  }

  .hex-topbar-actions .hex-btn.secondary {
    display: none;
  }

  .hex-product-grid-client {
    grid-template-columns: 1fr 1fr !important;
  }

  .hex-page {
    padding: 20px 16px !important;
  }

  .hex-card {
    padding: 20px 16px !important;
  }

  .hex-language-current {
    min-width: 44px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 380px) {
  .hex-product-grid-client {
    grid-template-columns: 1fr !important;
  }

  .hex-topbar-title {
    font-size: 12px;
  }
}

.hex-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

@media (max-width: 680px) {
  .hex-invoice-list-table,
  .hex-support-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hex-invoice-list-table table,
  .hex-support-table table {
    min-width: 560px;
  }
}


/* ============================================================
   HEXSSL 0.5.4 — canonical mobile hamburger navigation
   This block intentionally wins over older duplicated responsive blocks.
   ============================================================ */

/* Desktop: normal sidebar, no hamburger, no overlay */
@media (min-width: 1081px) {
  .hex-hamburger {
    display: none !important;
  }

  .hex-sidebar-overlay {
    display: none !important;
  }

  .hex-sidebar {
    transform: none !important;
  }

  .hex-sidebar-mobile-language {
    display: none !important;
  }
}

/* Shared hamburger look */
.hex-hamburger {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 1px solid var(--hex-border) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
}

.hex-hamburger span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #0f172a !important;
  transition: transform .2s ease, opacity .2s ease !important;
}

.hex-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

.hex-hamburger.is-open span:nth-child(2) {
  opacity: 0 !important;
}

.hex-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* Overlay used only when drawer is opened */
.hex-sidebar-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999 !important;
  background: rgba(7, 17, 31, .54) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.hex-sidebar-overlay.is-visible {
  display: block !important;
}

/* Tablet + mobile: sidebar becomes off-canvas drawer */
@media (max-width: 1080px) {
  body {
    overflow-x: hidden !important;
  }

  .hex-shell {
    display: block !important;
    min-height: 100vh !important;
  }

  .hex-hamburger {
    display: flex !important;
  }

  .hex-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 286px !important;
    min-width: 286px !important;
    max-width: 286px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 1000 !important;
    transform: translateX(-104%) !important;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-shadow: 22px 0 48px rgba(0, 0, 0, .26) !important;
  }

  .hex-sidebar.is-open {
    transform: translateX(0) !important;
  }

  .hex-main {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .hex-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    min-height: 66px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .hex-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .hex-topbar-left > div {
    min-width: 0 !important;
  }

  .hex-topbar-title {
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hex-topbar-subtitle {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hex-topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .hex-topbar-actions .hex-btn.secondary {
    display: none !important;
  }

  .hex-sidebar .hex-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .hex-sidebar .hex-nav a {
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    white-space: nowrap !important;
  }

  .hex-sidebar-mobile-language {
    display: block !important;
    margin: 18px 0 8px !important;
  }

  .hex-sidebar-mobile-language .hex-language-switcher {
    width: 100% !important;
  }

  .hex-sidebar-mobile-language .hex-language-current {
    width: 100% !important;
    justify-content: center !important;
  }

  .hex-sidebar-mobile-language .hex-language-menu {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
  }
}

/* Phone tuning */
@media (max-width: 680px) {
  .hex-sidebar {
    width: 282px !important;
    min-width: 282px !important;
    max-width: 282px !important;
  }

  .hex-topbar {
    min-height: 60px !important;
    padding: 10px 14px !important;
  }

  .hex-topbar-subtitle {
    display: none !important;
  }

  .hex-topbar-actions {
    gap: 6px !important;
  }

  .hex-topbar-actions .hex-btn:not(.secondary) {
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .hex-page {
    padding: 18px 14px !important;
  }
}


/* HEXSSL 0.5.5 language dropdown in hamburger drawer */

.hex-sidebar-mobile-language {
  display: none;
}

.hex-language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 1200 !important;
}

.hex-language-current {
  min-width: 54px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
}

.hex-language-menu {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  min-width: 124px !important;
  padding: 8px !important;
  border: 1px solid #d7e2ec !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important;
  display: none !important;
  z-index: 1300 !important;
}

.hex-language-switcher.is-open .hex-language-menu {
  display: grid !important;
  gap: 6px !important;
}

.hex-language-menu button {
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-weight: 800 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.hex-language-menu button:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

.hex-language-menu button.is-active {
  background: var(--hex-green-3) !important;
  color: #ffffff !important;
  border-color: var(--hex-green-3) !important;
}

.hex-language-switcher,
.hex-language-switcher * {
  pointer-events: auto !important;
}

@media (min-width: 1081px) {
  .hex-sidebar-mobile-language {
    display: none !important;
  }
}

@media (max-width: 1080px) {
  .hex-sidebar-mobile-language {
    display: block !important;
    margin: 18px 0 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 16px !important;
    background: rgba(15, 23, 42, .28) !important;
  }

  .hex-sidebar-mobile-language-label {
    margin: 0 0 10px !important;
    color: #9fb3cc !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .hex-sidebar-mobile-language .hex-language-switcher {
    width: 100% !important;
  }

  .hex-sidebar-mobile-language .hex-language-current {
    width: 100% !important;
    justify-content: center !important;
    background: #0f172a !important;
    color: #fff !important;
  }

  .hex-sidebar-mobile-language .hex-language-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    box-shadow: none !important;
  }

  .hex-topbar-actions > .hex-language-switcher {
    display: none !important;
  }
}


/* HEXSSL 0.5.7 backend language switcher */

.hex-language-menu a {
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-weight: 800 !important;
  text-align: left !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
}

.hex-language-menu a:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

.hex-language-menu a.is-active {
  background: var(--hex-green-3) !important;
  color: #ffffff !important;
  border-color: var(--hex-green-3) !important;
}


/* =========================================================
   HEXSSL 0.5.9 REAL FLAT PAGE LAYOUT
   Removes giant boxed wrapper from support/services/products
   ========================================================= */

.hex-flat-page{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:0 !important;
}

.hex-flat-page-header{
  background:transparent !important;
  border:0 !important;
  padding:0 0 34px 0 !important;
  margin:0 !important;
}

.hex-flat-page-body{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}

.hex-flat-page-header h1,
.hex-flat-page-header h2,
.hex-flat-page-header h3{
  font-size:clamp(42px,4vw,68px) !important;
  line-height:.95 !important;
  letter-spacing:-.06em !important;
  font-weight:900 !important;
  color:#0f172a !important;
  margin:0 0 16px 0 !important;
}

.hex-flat-page-header p,
.hex-flat-page-header .small{
  font-size:18px !important;
  color:#64748b !important;
  max-width:760px !important;
}

/* actual data surface only */
.hex-flat-page .table-responsive,
.hex-flat-page table,
.hex-flat-page .hex-product-grid-client{
  background:#fff !important;
  border:1px solid #dbe4ee !important;
  border-radius:28px !important;
}

.hex-flat-page .table-responsive{
  overflow:hidden !important;
  box-shadow:0 20px 45px rgba(15,23,42,.06) !important;
}

.hex-flat-page .hex-product-grid-client{
  padding:28px !important;
}

.hex-flat-page .hex-product-card{
  border-radius:24px !important;
}


/* HEXSSL flat page layout for module overrides */
.hex-page .hex-page-cardless {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.hex-page .hex-page-cardless > .card-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 30px 0 !important;
}

.hex-page .hex-page-cardless > .card-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.hex-page .hex-page-cardless > .card-header h1 {
  margin: 0 0 12px !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.hex-page .hex-page-cardless > .card-header .small,
.hex-page .hex-page-cardless > .card-header .text-secondary {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #64748b !important;
}

.hex-page .hex-page-cardless > .card-header .d-flex {
  justify-content: flex-start !important;
  gap: 24px !important;
}

.hex-page .hex-page-cardless > .card-header .d-flex > div:last-child {
  margin-left: 0 !important;
}

.hex-page .hex-page-cardless > .card-body.table-responsive,
.hex-page .hex-page-cardless > .card-body > .table-responsive {
  background: #fff !important;
  border: 1px solid #dbe4ee !important;
  border-radius: 28px !important;
  padding: 26px !important;
  box-shadow: 0 20px 45px rgba(15,23,42,.06) !important;
}

.hex-page .hex-page-cardless > .card-body.overflow-hidden,
.hex-page .hex-page-cardless > .card-body > .overflow-hidden {
  background: #fff !important;
  border: 1px solid #dbe4ee !important;
  border-radius: 28px !important;
  padding: 26px !important;
  box-shadow: 0 20px 45px rgba(15,23,42,.06) !important;
}

@media (max-width: 768px) {
  .hex-page .hex-page-cardless > .card-header h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .hex-page .hex-page-cardless > .card-body.table-responsive,
  .hex-page .hex-page-cardless > .card-body > .table-responsive,
  .hex-page .hex-page-cardless > .card-body.overflow-hidden,
  .hex-page .hex-page-cardless > .card-body > .overflow-hidden {
    padding: 18px !important;
    border-radius: 22px !important;
  }
}

/* HEXSSL force flat layout for active module overrides */
.hex-page .card.hex-page-cardless {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.hex-page .card.hex-page-cardless > .card-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 28px 0 !important;
}

.hex-page .card.hex-page-cardless > .card-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.hex-page .card.hex-page-cardless > .card-body.table-responsive {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* HEXSSL: remove green section kicker globally */
.hex-kicker,
.hex-section-kicker,
.hex-page-kicker {
  display: none !important;
}

.hex-title,
.hex-page h1 {
  margin-top: 0 !important;
}

/* HEXSSL unified page typography/layout */

/* Main page headers */
.hex-page h1,
.hex-title,
.hex-page .card-header h1,
.hex-flat-page-header h1,
.hex-page-cardless > .card-header h1 {
  font-size: clamp(34px, 3.4vw, 48px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin: 0 0 18px 0 !important;
}

/* Page subtitles/descriptions */
.hex-page p,
.hex-subtitle,
.hex-section-subtitle,
.hex-page .card-header .small,
.hex-page .card-header .text-secondary {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  font-weight: 400 !important;
}

/* Main page spacing */
.hex-page {
  padding-top: 56px !important;
}

/* Dashboard/order product cards unified */
.hex-product-grid,
.hex-product-grid-client {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-top: 34px !important;
}

.hex-product-card {
  min-height: 210px !important;
  padding: 30px !important;
  border-radius: 24px !important;
  border: 1px solid #d7e2ec !important;
  background: #fff !important;
  box-shadow: none !important;
}

.hex-product-card strong {
  display: block !important;
  margin-top: 22px !important;
  margin-bottom: 12px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
  font-weight: 850 !important;
  color: #0f172a !important;
}

.hex-product-card span,
.hex-product-card p {
  font-size: 18px !important;
  line-height: 1.45 !important;
  color: #334155 !important;
  font-weight: 400 !important;
}

.hex-product-icon {
  width: 64px !important;
  height: 64px !important;
}

/* Tables/cards inside pages */
.hex-page table th {
  font-size: 13px !important;
  letter-spacing: .12em !important;
  font-weight: 800 !important;
}

.hex-page table td {
  font-size: 17px !important;
  font-weight: 500 !important;
}

/* Mobile */
@media (max-width: 1080px) {
  .hex-product-grid,
  .hex-product-grid-client {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .hex-page {
    padding-top: 32px !important;
  }

  .hex-page h1,
  .hex-title,
  .hex-page .card-header h1,
  .hex-flat-page-header h1,
  .hex-page-cardless > .card-header h1 {
    font-size: clamp(30px, 9vw, 40px) !important;
  }

  .hex-product-grid,
  .hex-product-grid-client {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .hex-product-card {
    min-height: auto !important;
    padding: 24px !important;
  }
}