/* =====================================================================
   HUB Hosting — standalone UI stylesheet
   ---------------------------------------------------------------------
   Drop-in alternative to The Right Way theme CSS. It implements the same
   class names the application mark-up uses (page, page__header,
   page__content, page-aside, navigation, informer, card, user, badge …)
   so the system is fully styled with no theme licence required.

   If you later install the real theme, put its styles.css in place of
   this file — the application will adopt it unchanged.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --hub-ink:        #1b2333;
  --hub-ink-soft:   #5b6577;
  --hub-muted:      #8b93a3;
  --hub-line:       #e4e8ef;
  --hub-line-soft:  #f0f3f7;
  --hub-bg:         #f5f7fa;
  --hub-surface:    #ffffff;
  --hub-primary:    #2f6fed;
  --hub-primary-dk: #2459c4;
  --hub-aside:      #1b2333;
  --hub-aside-ink:  #aab3c4;
  --hub-success:    #1c7a3f;
  --hub-success-bg: #e6f6ec;
  --hub-warning:    #8a5a00;
  --hub-warning-bg: #fdf1dc;
  --hub-danger:     #c0392b;
  --hub-danger-bg:  #fbe9e7;
  --hub-info:       #1c5d99;
  --hub-info-bg:    #e6f0fb;
  --hub-radius:     10px;
  --hub-radius-sm:  7px;
  --hub-shadow:     0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --hub-shadow-lg:  0 10px 30px rgba(16, 24, 40, .10);
  --hub-header-h:   64px;
  --hub-aside-w:    248px;
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hub-ink);
  background: var(--hub-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .85rem; }
a  { color: var(--hub-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--hub-line); margin: 1rem 0; }

/* ------------------------------------------- layout: page + header */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--hub-bg);
}

.page__header {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--hub-header-h);
  padding: 0 22px;
  background: var(--hub-surface);
  border-bottom: 1px solid var(--hub-line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.page__header .logo-holder { flex: 0 0 auto; }

.logo-text {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--hub-ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-text strong { font-weight: 700; color: var(--hub-primary); }
.logo-text:hover { text-decoration: none; }

.page__header .page-heading { display: flex; flex: 1 1 auto; align-items: center; }
.page__header .page-heading__container { min-width: 0; }
.page__header .page-heading .title { font-size: 1rem; font-weight: 600; margin: 0; }

.page-header-search { position: relative; max-width: 260px; }
.page-header-search .form-control { padding-right: 34px; }
.page-header-search__icon {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; opacity: .4;
  background: no-repeat center/15px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2333' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
}

/* ------------------------------------------ layout: content + aside */
.page__content {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
}

.page-aside {
  flex: 0 0 var(--hub-aside-w);
  width: var(--hub-aside-w);
  background: var(--hub-aside);
  color: var(--hub-aside-ink);
  padding: 18px 0;
}
.page-aside.invert { background: #141a26; }

.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px 26px 40px;
}

/* ------------------------------------------------ navigation (aside) */
.navigation { font-size: .875rem; }
.navigation ul { list-style: none; margin: 0; padding: 0; }
.navigation li { margin: 0; }

.navigation li.title {
  padding: 16px 22px 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b7688;
}
.navigation li.title:first-child { padding-top: 4px; }

.navigation li > a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 22px;
  color: var(--hub-aside-ink);
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.navigation li > a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  text-decoration: none;
}
.navigation li.active > a {
  background: rgba(47, 111, 237, .16);
  border-left-color: var(--hub-primary);
  color: #fff;
  font-weight: 500;
}

.navigation .icon {
  width: 17px; height: 17px; flex: 0 0 17px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px;
  opacity: .85;
}
.navigation .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* minimal icon set (inline SVG, no icon font required) */
.navigation .li-home      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5.5 9.5V21h13V9.5'/></svg>"); }
.navigation .li-cart      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M2.5 3h2.6l2.4 11.2h11l2-7.6H6'/></svg>"); }
.navigation .li-server    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='6.5' rx='1.5'/><rect x='3' y='13.5' width='18' height='6.5' rx='1.5'/><path d='M7 7.2h.01M7 16.8h.01'/></svg>"); }
.navigation .li-receipt   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h14v18l-2.3-1.6L14.4 21l-2.4-1.6L9.6 21l-2.3-1.6L5 21z'/><path d='M8.5 8h7M8.5 12h7'/></svg>"); }
.navigation .li-wallet    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='13' rx='2.5'/><path d='M3 10h18M16 14.5h2'/></svg>"); }
.navigation .li-clock     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3.2 2'/></svg>"); }
.navigation .li-bubble    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v11H9l-5 4z'/></svg>"); }
.navigation .li-user      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8.5' r='3.8'/><path d='M4.5 20.5c1.2-3.6 3.9-5.5 7.5-5.5s6.3 1.9 7.5 5.5'/></svg>"); }
.navigation .li-users     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.4'/><path d='M2.5 20c1-3.2 3.4-5 6.5-5s5.5 1.8 6.5 5'/><path d='M16.5 6.2a3.4 3.4 0 0 1 0 6.6M18 15.4c2 .7 3.3 2.3 4 4.6'/></svg>"); }
.navigation .li-box       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 3 7.5v9L12 21l9-4.5v-9z'/><path d='M3 7.5 12 12l9-4.5M12 12v9'/></svg>"); }
.navigation .li-file-check{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9z'/><path d='M13 3v6h6M8.6 15l2 2 3.8-4'/></svg>"); }
.navigation .li-sync      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 0 0-13.8-5.4L3 8'/><path d='M4 13a8 8 0 0 0 13.8 5.4L21 16'/><path d='M3 4v4h4M21 20v-4h-4'/></svg>"); }
.navigation .li-chart-bars{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20V4M16 20v-7M22 20H2'/></svg>"); }
.navigation .li-exit      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/><path d='M10 8 6 12l4 4M6 12h9'/></svg>"); }

/* navigation user block */
.navigation .user { padding: 4px 20px 18px; }
.navigation .user img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.navigation .user__name strong { color: #fff; font-weight: 600; font-size: .875rem; }
.navigation .user__name .caption { color: #7f8a9c; font-size: .75rem; }
.navigation .user__lineunder { border-top: 1px solid rgba(255,255,255,.08); margin-top: 16px; }

/* -------------------------------------------- page heading (in page) */
.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-heading__container { min-width: 0; }
.page-heading .title { margin: 0; font-size: 1.35rem; font-weight: 600; }
.page-heading .caption { color: var(--hub-muted); font-size: .84rem; margin: 2px 0 0; }

/* --------------------------------------------------------- user card */
.user { display: flex; align-items: center; gap: 10px; }
.user img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.user--rounded img { border-radius: 50%; }
.user--bordered img { box-shadow: 0 0 0 1px var(--hub-line); }
.user--lg img { width: 42px; height: 42px; }
.user__name { line-height: 1.25; }
.user__name strong { font-size: .875rem; }
.user__name .caption { color: var(--hub-muted); font-size: .75rem; }

/* -------------------------------------------------------------- cards */
.card {
  background: var(--hub-surface);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius);
  box-shadow: var(--hub-shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hub-line-soft);
  background: #fcfdfe;
}
.card-title { margin: 0; font-size: .98rem; font-weight: 600; }
.card-body { padding: 18px; }
.card-body > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- informer */
.informer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--hub-surface);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius);
  box-shadow: var(--hub-shadow);
  margin-bottom: 20px;
  min-height: 88px;
}
.informer--icon-right { flex-direction: row-reverse; text-align: right; }
.informer__icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 10px;
  background: var(--hub-info-bg) no-repeat center / 21px;
  background-image: var(--icon, none);
}
.informer__num { font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.informer__title { color: var(--hub-muted); font-size: .8rem; }
.informer__wrapper { min-width: 0; }

/* informer icon glyphs (inherit the same SVGs, tinted primary) */
.informer .informer__icon.li-server { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='6.5' rx='1.5'/><rect x='3' y='13.5' width='18' height='6.5' rx='1.5'/><path d='M7 7.2h.01M7 16.8h.01'/></svg>"); }
.informer .informer__icon.li-receipt { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h14v18l-2.3-1.6L14.4 21l-2.4-1.6L9.6 21l-2.3-1.6L5 21z'/><path d='M8.5 8h7M8.5 12h7'/></svg>"); }
.informer .informer__icon.li-wallet { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='13' rx='2.5'/><path d='M3 10h18M16 14.5h2'/></svg>"); }
.informer .informer__icon.li-clock { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3.2 2'/></svg>"); }
.informer .informer__icon.li-users { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3.4'/><path d='M2.5 20c1-3.2 3.4-5 6.5-5s5.5 1.8 6.5 5'/><path d='M16.5 6.2a3.4 3.4 0 0 1 0 6.6M18 15.4c2 .7 3.3 2.3 4 4.6'/></svg>"); }
.informer .informer__icon.li-bubble { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v11H9l-5 4z'/></svg>"); }

/* -------------------------------------------------------------- tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.table thead th {
  text-align: left;
  padding: 11px 18px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hub-muted);
  background: #fafbfd;
  border-bottom: 1px solid var(--hub-line);
  white-space: nowrap;
}
.table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--hub-line-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { background: #f8fafc; }
.table .text-muted { color: var(--hub-muted); }
.table .caption { color: var(--hub-muted); font-size: .76rem; }

/* -------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge-success   { background: var(--hub-success-bg); color: var(--hub-success); }
.badge-warning   { background: var(--hub-warning-bg); color: var(--hub-warning); }
.badge-danger    { background: var(--hub-danger-bg);  color: var(--hub-danger); }
.badge-info      { background: var(--hub-info-bg);    color: var(--hub-info); }
.badge-secondary { background: #eef1f5; color: #5b6577; }

/* -------------------------------------------------------------- alerts */
.alert {
  padding: 12px 16px;
  border-radius: var(--hub-radius-sm);
  border: 1px solid transparent;
  margin-bottom: 18px;
  font-size: .875rem;
}
.alert-success { background: var(--hub-success-bg); border-color: #bfe6cd; color: var(--hub-success); }
.alert-danger  { background: var(--hub-danger-bg);  border-color: #f3c8c2; color: var(--hub-danger); }
.alert-warning { background: var(--hub-warning-bg); border-color: #f0dcae; color: var(--hub-warning); }
.alert-info    { background: var(--hub-info-bg);    border-color: #c3daf3; color: var(--hub-info); }
.alert a { font-weight: 600; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid transparent;
  border-radius: var(--hub-radius-sm);
  cursor: pointer;
  background: #eef1f5;
  color: var(--hub-ink);
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--hub-primary); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--hub-primary); color: #fff; }
.btn-primary:hover { background: var(--hub-primary-dk); color: #fff; }

.btn-success { background: var(--hub-success); color: #fff; }
.btn-success:hover { background: #166432; color: #fff; }

.btn-danger { background: var(--hub-danger); color: #fff; }
.btn-danger:hover { background: #a5301f; color: #fff; }

.btn-outline-primary { background: transparent; border-color: var(--hub-primary); color: var(--hub-primary); }
.btn-outline-primary:hover { background: var(--hub-primary); color: #fff; }

.btn-outline-secondary { background: transparent; border-color: #cfd6e0; color: var(--hub-ink-soft); }
.btn-outline-secondary:hover { background: #eef1f5; color: var(--hub-ink); }

.btn-outline-danger { background: transparent; border-color: #e3a79f; color: var(--hub-danger); }
.btn-outline-danger:hover { background: var(--hub-danger); color: #fff; }

.btn-sm { padding: 5px 11px; font-size: .79rem; }
.btn-lg { padding: 12px 22px; font-size: .95rem; }
.btn-block { display: flex; width: 100%; }

/* --------------------------------------------------------------- forms */
.form-group { margin-bottom: 15px; }
.form-group label,
label { display: block; margin-bottom: 5px; font-size: .82rem; font-weight: 500; color: var(--hub-ink-soft); }

.form-control {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: .875rem;
  color: var(--hub-ink);
  background: #fff;
  border: 1px solid #d5dbe4;
  border-radius: var(--hub-radius-sm);
  transition: border-color .12s, box-shadow .12s;
}
.form-control:focus {
  outline: 0;
  border-color: var(--hub-primary);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .14);
}
.form-control:disabled { background: #f5f7fa; color: var(--hub-muted); }
.form-control-sm { padding: 6px 10px; font-size: .82rem; }
textarea.form-control { resize: vertical; min-height: 76px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6577' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; padding-right: 32px; }

.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.form-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--hub-primary); }
.form-check label { margin: 0; }

/* ---------------------------------------------------------------- grid */
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.row > [class*="col"] { padding: 0 10px; width: 100%; }
.col-12 { width: 100%; }
.col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8 {
  width: 100%;
}
@media (min-width: 768px) {
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333%; }
  .col-md-5 { width: 41.6667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333%; }
  .col-md-8 { width: 66.6667%; }
}
@media (min-width: 992px) {
  .col-lg-4 { width: 33.3333%; }
}
.col-lg-4 { width: 100%; }
.col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6 { width: 100%; }
@media (min-width: 576px) {
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.3333%; }
  .col-sm-5 { width: 41.6667%; }
  .col-sm-6 { width: 50%; }
}

/* --------------------------------------------------------- utilities */
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-20 { margin-bottom: 20px; }
.text-muted { color: var(--hub-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }
.caption { color: var(--hub-muted); font-size: .78rem; }
.float-end { margin-left: auto; }
.d-flex { display: flex; }
.d-flex.align-items-end { align-items: flex-end; }
.w-100 { width: 100%; }
.collapse { display: none; }
.collapse.show { display: block; }

/* ------------------------------------------------- sign-in / register */
.important-container {
  max-width: 420px;
  margin: 7vh auto 0;
  padding: 0 18px;
}
.important-container .content {
  background: var(--hub-surface);
  border: 1px solid var(--hub-line);
  border-radius: 14px;
  box-shadow: var(--hub-shadow-lg);
  padding: 32px 30px;
}
.important-container h1 {
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.important-container h1 span {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--hub-muted);
}
.important-container .page__content { display: block; }

/* ------------------------------------------------------- responsive */
@media (max-width: 992px) {
  .page__content { flex-direction: column; }
  .page-aside {
    flex: 0 0 auto;
    width: 100%;
    padding: 10px 0;
  }
  .navigation li.title { padding-top: 10px; }
  .navigation li > a { padding: 8px 18px; }
  .content { padding: 18px 16px 32px; }
  .page__header { padding: 0 16px; gap: 12px; }
  .page-header-search { display: none; }
}

@media (max-width: 640px) {
  .page-heading { flex-direction: column; }
  .informer { min-height: 0; }
  .card-header { flex-wrap: wrap; }
  .table thead th, .table tbody td { padding: 10px 12px; }
}

/* ------------------------------------------------------------- print */
@media print {
  .page-aside, .page__header, .btn, .page-heading__container.float-end { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}