@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* =========================
   Base
   ========================= */
html, body, #app { height: 100%; }
html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  /* Consider removing if you need page-level scroll */
  overflow: hidden;
}

/* App root layout */
#app {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* avoid flex overflow */
}
.page { flex: 1 1 auto; min-height: 0; }

/* App page content container (layout-level, responsive) */
.app-main-content {
  padding: 1.5rem;
  --app-main-mobile-inline-padding: .5rem;
}

@media (max-width: 767.98px) {
  .app-main-content {
    padding: .375rem var(--app-main-mobile-inline-padding) .5rem var(--app-main-mobile-inline-padding);
  }
}

/* =========================
   Forms / validation
   ========================= */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }
.button-link { text-decoration: unset; }

/* =========================
   Blazor error bar
   ========================= */
#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0,0,0,.2);
  display: none;
  left: 0;
  padding: .6rem 1.25rem .7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: .75rem;
  top: .5rem;
}

/* =========================
   Typography blocks
   ========================= */
.title { display: flex; flex-direction: column; gap: .5rem; padding-bottom: .625rem; }
.title.title-secondary { padding-top: .313rem; padding-bottom: 0; color: var(--bs-secondary-color, var(--DS-color-content-neutral-default-rest)); }
.title-header-text { font-size: 2.5rem; line-height: 3rem; font-weight: 600; letter-spacing: 0; padding: .3125rem 0; }
.title-content-text { font-size: 1.75rem; font-weight: 400; line-height: 2.5rem; letter-spacing: 0; }

/* =========================
   Center helpers
   ========================= */
.main-content {
  display: flex; justify-content: center; align-items: center;
  height: 100%; width: 100%;
}
.block-content {
  width: 31.25rem; max-width: 100%;
  display: flex; flex-direction: column; gap: .625rem;
}

/* =========================
   Icons
   ========================= */
.icon {
  width: var(--icon-width); height: var(--icon-height);
  background-color: currentcolor;
  mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: var(--icon-mask-image); mask-image: var(--icon-mask-image);
}
.dxbl-image.icon{
  display: inline-block;
  width: var(--icon-width, 1.25rem);
  height: var(--icon-height, 1.25rem);
  background-color: currentColor;
  -webkit-mask-image: var(--icon-mask-image) !important;
          mask-image: var(--icon-mask-image) !important;
  -webkit-mask-repeat: no-repeat;         mask-repeat: no-repeat;
  -webkit-mask-position: center;          mask-position: center;
  -webkit-mask-size: contain;             mask-size: contain;
}
.menu .dxbl-image.icon { color: #fff; }

/* =========================
   A11y helpers
   ========================= */
.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  margin:-1px!important; padding:0!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}
#route-focus:focus{ outline:0!important; box-shadow:none!important; }

/* =========================
   Drawers
   ========================= */
.drawer-desktop { display: block; }
.drawer-mobile  { display: none; }

@media (max-width: 768px) {
  .drawer-desktop { display: none; }
  .drawer-mobile  { display: block; }
}

.drawer-container,
.drawer-desktop,
.drawer-mobile { height: 100%; }

.drawer-desktop .dxbl-drawer,
.drawer-mobile  .dxbl-drawer { height: 100%; }

.navigation-drawer .dxbl-drawer-panel {
  height: 100%;
  display: flex; flex-direction: column;
}

.navigation-drawer .menu {
  flex: 1 1 auto;
  min-height: 0;  /* allow scrolling */
  overflow: auto;
}

.navigation-drawer .dxbl-drawer-target { min-height: 0; }
/* Fallback if a parent fails to size: */
/* .drawer-container { height: 100vh; } */

/* =========================
   Cards grid (responsive)
   ========================= */
/* Use this container around your 4 cards */
.cards-grid {
  display: grid;
  gap: 1rem;
  /* Fluid: 2× on typical widths, 1× on narrow, more columns on very wide screens */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Make cards stretch nicely */
.cards-grid .welcome-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}