/* ---------------------------------------------------------------------------
   app.css: React replacements for the behaviour Materialize's jQuery plugins
   used to apply as inline styles. Loaded AFTER materialize.min.css and
   stylesheet.css, so the original design is untouched; this file only supplies
   the "open"/"active" states the old JS produced.
   --------------------------------------------------------------------------- */

/* ---- Sidenav (was $('.sidenav').sidenav()) ------------------------------- */
.sidenav {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidenav.is-open {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
}
.sidenav-overlay {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sidenav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
body.sidenav-locked {
  overflow: hidden;
}

/* ---- Collapsible accordion (was $('.collapsible').collapsible()) --------- */
.collapsible-header {
  user-select: none;
}
.collapsible li.is-open > .collapsible-body {
  display: block;
}

/* ---- Nav dropdown (was $('.dropdown-trigger').dropdown({hover:true})) ----
   Materialize positioned #product_dropdown absolutely from JS. Here it is a
   child of its <li>, anchored to the bottom edge of the trigger, the same
   place, without the measuring code.                                         */
.nav-dropdown-host {
  position: relative;
}
.nav-dropdown-host > .dropdown-content {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  min-width: 100%;
  max-height: 80vh;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0.3);
  transform-origin: 0 0;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown-host.is-open > .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}
.nav-dropdown-host > .dropdown-content li {
  min-height: 0;
  line-height: 1.5rem;
}
.nav-dropdown-host > .dropdown-content li > a {
  line-height: 22px;
  padding: 14px 16px;
  white-space: nowrap;
}

/* The fixed navbar must not clip the dropdown that hangs below it. */
.navbar-fixed nav,
.navbar-fixed .nav-wrapper {
  overflow: visible;
}

/* ---- Card flip (was the .card-container hover handler) -------------------
   The old handler set transform:rotateY(179deg) on BOTH enter and leave, so
   the card never flipped back in modern browsers. CSS :hover fixes that.     */
.card-container:hover .rotable,
.card-container:focus-within .rotable {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}
/* NB: stylesheet.css declares `perspective: 600` with no unit, which is
   invalid and therefore ignored, so the cards flip flat. That is how the site
   has always looked, so no perspective is added here: supplying one changes
   the compositing path and visibly resamples the card photos. */

/* ---- Loader (was $('.loader').fadeOut()) -------------------------------- */
.loader {
  transition: opacity 0.4s ease;
}
.loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.loader.is-gone {
  display: none;
}

/* ---- Text field labels (was $('input').autoInit / M.updateTextFields) ---- */
.input-field > label.active {
  transform: translateY(-14px) scale(0.8);
  -webkit-transform: translateY(-14px) scale(0.8);
  transform-origin: 0 0;
}

/* ---- Product table rows are real links now (SEO fix) --------------------- */
#product tr.product_row td:first-child a {
  color: inherit;
  display: block;
}
#product tr.product_row td a {
  color: inherit;
}

/* =========================================================================
   Responsive layer.

   The legacy site is already responsive: Materialize's s/m/l grid stacks the
   columns, the navbar collapses into the drawer, and the products table sits in
   an overflow-x wrapper. The brief was that the look must be identical, so
   nothing here changes type size, spacing or the logo at any width. What is
   left are guards that are invisible when the content already fits:
   ========================================================================= */

/* Nothing on the page may scroll the document sideways. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Rich HTML that comes out of the database (product specifications,
   application details) can be wider than a phone, so let it scroll itself
   instead of the page. */
.db-html img,
.db-html iframe {
  max-width: 100%;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   SEO / accessibility layer.

   Every rule here exists so that semantic markup added for crawlers renders
   exactly like the legacy markup it replaced. Nothing below changes a pixel.
   ========================================================================= */

/* Page titles were <h2> in the CodeIgniter views because no page had an <h1>.
   They are <h1> now; these declarations reproduce Materialize's h2 metrics plus
   the stylesheet.css h2 override, so the rendered box is identical. */
h1 {
  font-size: 26px;
  letter-spacing: 2px;
  line-height: 40px;
  font-weight: 700;
  margin: 2.3733333333rem 0 1.424rem 0;
}

/* The <main> landmark must not introduce a box of its own: the legacy body had
   the .row sections as direct children and their margins collapse against it. */
.site-main {
  display: contents;
}

/* Text that exists for screen readers and crawlers but is not painted:
   the home page's descriptive <h1> sits behind the rotating hero tagline. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Off-screen until it takes focus, then it lands above the fixed navbar. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: #fff6e5;
  color: #000;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}

/* Intrinsic width/height attributes were added to the fixed-size images so the
   browser can reserve their space (CLS). The attributes must not override the
   CSS width, so the height stays proportional. */
img[width][height] {
  height: auto;
}

/* --- Admin: lead filter, pagination and captcha ------------------------- */

/* One line on a desktop. It wraps only when the viewport genuinely cannot fit
   the controls, which on this bar is below roughly 620px. */
.leads-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 30px 0 10px;
  padding: 15px;
  background: #fff6e5;
  border-radius: 2px;
}

/* Sized to match the 38px controls so the row shares one baseline. */
.leads-filter label {
  font-size: 13px;
  color: #616161;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  line-height: 38px;
}

/* Materialize claims `input[type=date]:not(.browser-default)` for its own
   datepicker: width 100%, height 3rem, an underline border and a focus shadow.
   Left alone, the two custom-range inputs would each take a full row and break
   the bar into a stack the moment "Date range" is chosen. */
.leads-filter input[type='date'] {
  display: inline-block;
  width: auto;
  height: 38px;
  margin: 0;
  border-bottom: none;
  box-shadow: none;
}

.leads-filter__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* `hidden` loses to the flex display above unless it is spelled out. */
.leads-filter__custom[hidden] {
  display: none;
}

/* Materialize stretches every select to 100%; these are sized individually. */
.leads-filter select {
  width: auto;
  display: inline-block;
}

.leads-filter .btn {
  padding: 0 22px;
}

.leads-filter__clear {
  margin-left: 4px;
}

/* Header cells wrap onto two lines at narrow widths otherwise ("Sr. No."),
   which knocks the whole header row out of alignment with the body. */
.leads-table th {
  white-space: nowrap;
  vertical-align: bottom;
}

.leads-table td {
  vertical-align: top;
}

.leads-table__date {
  white-space: nowrap;
}

.leads-summary,
.leads-footnote,
.leads-notice {
  font-size: 14px;
  color: #616161;
  margin: 10px 0;
}

.leads-notice {
  padding: 12px 15px;
  background: #FFF3E0;
  border-left: 3px solid #FDAA75;
}

.leads-footnote {
  font-size: 12px;
  text-align: right;
}

.leads-pagination {
  text-align: center;
  margin: 20px 0 40px;
}

.leads-pagination .pagination li {
  vertical-align: middle;
}

/* Materialize styles pagination through <a>; the current page and the gaps are
   <span>s, so they need the same box. */
.leads-pagination .pagination li span {
  display: inline-block;
  padding: 0 10px;
  line-height: 30px;
  color: #444;
}

.leads-pagination .pagination li.active span {
  color: #fff;
}

.leads-pagination .pagination li.disabled span {
  color: #999;
  cursor: not-allowed;
}

/* The admin footer used to be position:fixed. There is content below the table
   now (pagination), which a fixed bar would sit on top of. */
.admin-footer {
  margin-top: 40px;
}

/* The reCAPTCHA iframe is a fixed 304px wide. Below that it is scaled down so
   it cannot push the form sideways on a small phone. */
.recaptcha-field {
  margin-top: 10px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 360px) {
  .recaptcha-field > div {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}