/*************************************************************
  STRICT GLOBAL FONT APPLICATION: Noto Sans across Power Pages
  ------------------------------------------------------------
  Scope:
  - Bootstrap v4/v5 components
  - Navigation, breadcrumbs, pagination
  - Buttons, forms, inputs, labels, help text
  - Dataverse entity forms, webforms, subgrids
  - Tables, cards, modals, alerts, badges
  - Portal messages, site header/footer
  - Common widget classes (lookup, picklist, datetime)
  Notes:
  - PCF controls use Shadow DOM; you can't style inside the shadow tree,
    but you can style their host container and any exposed CSS variables.
  - We use aggressive selectors + a few !important where Bootstrap is stubborn.
**************************************************************/

/* 0) Root variables for reuse */
:root {
  --pp-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
                    Arial, sans-serif !important;
  --pp-font-size-base: 16px;
  --pp-line-height-base: 1.6;
}

/* 1) Global defaults */
html, body {
  font-family: var(--pp-font-family) !important;
  font-size: var(--pp-font-size-base);
  line-height: var(--pp-line-height-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2) Universal fallback (careful but effective) */
*:not(i):not([class*="icon"]):not([class*="glyph"]) {
  font-family: var(--pp-font-family) !important;
}

/* 3) Headings & typographic elements */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
p, small, strong, em, blockquote, cite,
code, pre, kbd, samp {
  font-family: var(--pp-font-family) !important;
}

/* 4) Links, list text, labels */
a, a.btn, a.nav-link,
ul, ol, li, dl, dt, dd,
label, legend, .form-text, .help-block, .text-muted {
  font-family: var(--pp-font-family) !important;
}

/* 5) Navigation, menus, breadcrumbs, pagination */
.nav, .navbar, .navbar-nav, .navbar-brand, .nav-item, .nav-link,
.breadcrumb, .breadcrumb-item, .pagination, .page-link, .page-item {
  font-family: var(--pp-font-family) !important;
  font-weight: 400;
}

/* 6) Buttons */
button, .btn,
.btn-primary, .btn-secondary,
.btn-outline-primary, .btn-outline-secondary,
.btn-link, .btn-light, .btn-dark,
input[type="button"], input[type="submit"], input[type="reset"] {
  font-family: var(--pp-font-family) !important;
  font-weight: 500;
}

/* 7) Forms & inputs (Bootstrap + portal classes) */
input, select, textarea,
.form-control, .form-select, .form-check-label, .form-check-input,
.input-group-text, .custom-select, .custom-control-label,
.portal-forms *, .entityform *, .webform *,
.lookup, .lookup-field, .picklist, .datetimepicker, .datepicker {
  font-family: var(--pp-font-family) !important;
}

/* 8) Tables & grids */
table, .table, .table-striped, .table-bordered, .table-hover,
thead, tbody, tfoot, th, td,
.subgrid, .entitylist, .view-grid, .ms-crm-SubGrid,
.grid, .list-group, .list-group-item {
  font-family: var(--pp-font-family) !important;
}

/* 9) Cards, sections, containers */
.card, .card-header, .card-body, .card-title, .card-subtitle, .card-text,
.section, .container, .row, .col, .content, .page-copy,
.site-header, .site-footer, .footer, .header {
  font-family: var(--pp-font-family) !important;
}

/* 10) Feedback UI */
.alert, .badge, .tag, .label, .toast, .tooltip, .popover,
.modal, .modal-title, .modal-body, .modal-footer,
.spinner, .progress, .progress-bar {
  font-family: var(--pp-font-family) !important;
}

/* 11) Portal system messages & metadata */
.validation-summary, .validation-summary-errors,
.alert-danger, .alert-warning, .alert-info, .alert-success,
.field-validation-error, .field-validation-valid,
.portal-notification, .message, .status, .description {
  font-family: var(--pp-font-family) !important;
}

/* 12) Common MS Dataverse portal elements */
.entityform, .webform, .cell, .control, .attribute, .logical-name,
.crmEntityFormView, .tab, .section, .label-cell, .value-cell,
.required, .optional, .notes, .subgrid-title {
  font-family: var(--pp-font-family) !important;
}

/* 13) Search, filters, chips */
.search, .search-box, .search-input, .search-results,
.filter, .filter-label, .filter-pill, .chip, .tokenfield {
  font-family: var(--pp-font-family) !important;
}

/* 14) Pagination & breadcrumbs inside components */
.pagination, .pagination .page-link, .breadcrumb, .breadcrumb-item {
  font-family: var(--pp-font-family) !important;
}

/* 15) Accessibility helpers */
.sr-only, .visually-hidden, [aria-live], [role="alert"], [role="status"] {
  font-family: var(--pp-font-family) !important;
}

/* 16) Aggressive catch-all for bootstrap wrappers */
body :where(.bootstrap, .msportals, .site, .page, .content, .main, .app) * {
  font-family: var(--pp-font-family) !important;
}

/* 17) PCF host containers (Shadow DOM caveat) */
pcf-control, .pcf-control, .pcf-container, .pcf-host,
.powerapps-component, .fluent-control {
  font-family: var(--pp-font-family) !important;
}
/* If a PCF exposes CSS variables, you can often set them like this: */
:root {
  --ms-font-family: var(--pp-font-family);
  --font-family: var(--pp-font-family);
}

/* 18) Inputs & placeholders */
input, textarea {
  font-family: var(--pp-font-family) !important;
}
::placeholder {
  font-family: var(--pp-font-family) !important;
}

/* 19) Prevent icon fonts from breaking (keep i/glyph untouched) */
i, .fa, .fas, .far, .fal, .fab, .glyphicon, [class*="fa-"] {
  font-family: inherit !important; /* let icon font keep its own */
}

/* 20) Optional heading scale for Noto Sans (clean hierarchy) */
h1, .h1 { font-weight: 700; line-height: 1.2; font-size: clamp(2rem, 4vw, 2.25rem); }
h2, .h2 { font-weight: 600; line-height: 1.25; font-size: clamp(1.75rem, 3vw, 1.875rem); }
h3, .h3 { font-weight: 600; line-height: 1.3; font-size: clamp(1.5rem, 2.5vw, 1.625rem); }
h4, .h4 { font-weight: 600; line-height: 1.35; font-size: clamp(1.25rem, 2vw, 1.375rem); }
h5, .h5 { font-weight: 500; line-height: 1.4;  font-size: 1.125rem; }
h6, .h6 { font-weight: 500; line-height: 1.45; font-size: 1rem; }



:root {
  --site-max-width: 1280px;
  --site-gutter: 16px;
}
.events-stack { display: block; }

html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.qr-section { flex: 1;
} /* content grows; footer pushed to bottom */

/* Constrain the content width */
.qr-content {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 var(--site-gutter);
  box-sizing: border-box;
}



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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Full viewport height */
}

main {
  flex: 1; /* Push footer to bottom */
}

/* Prevent horizontal scroll */
html, body {
    margin: 0;
    padding: 0;
    /* overflow-x: hidden;  */
}


/* dissable btn css code  */
/* Central disabled button styling */
button.disabled-btn,
button[disabled],
button[aria-disabled="true"] {
  background-color: #d1d5db !important;  /* Gray background */
  color: #6b7280 !important;             /* Muted gray text */
  cursor: not-allowed !important;        /* Disable pointer */
  opacity: 0.75;                         /* Make lighter */
  pointer-events: none !important;       /* Stop all clicks */
  border-color: #d1d5db !important;      /* Match border */
  box-shadow: none !important;           /* Remove active shadow */
  filter: grayscale(40%);
  transform: none !important;            /* Remove press animation */
}

/* Optional: keep hover same as disabled */
button.disabled-btn:hover,
button[disabled]:hover,
button[aria-disabled="true"]:hover {
  background-color: #d1d5db !important;
  color: #6b7280 !important;
}