body { overflow-x: clip !important; }
/* ── Compact header height ───────────────────────────────────────────────────
 * Override from --sp10 (11.25rem) to --sp6 (6.75rem).
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
  --site-header-height-wide: var(--sp6);

  /* Change only this variable to restyle the entire header background.
   * Override in mampan.variables.css with your own colour. */
  --mampan-header-bg: var(--color--primary-50);
}

/* Apply the background token to every header zone so they all match. */
.site-header__inner,
.site-header__initial,
.site-branding,
[dir="rtl"] .site-branding {
  background: var(--mampan-header-bg);
  background-image: none;
}

/* Mobile nav panel — same background + matching top border spacer. */
.header-nav {
  background-color: var(--mampan-header-bg);
  border-block-start-color: var(--mampan-header-bg);
}

/* ── Mobile: fix hamburger icon and nav link colours ─────────────────────────
 * Hamburger bars use border-top: var(--color--primary-50) — same as header
 * background — making them invisible. Override to white.
 * Nav links inside the panel also need white text to be readable.
 * ─────────────────────────────────────────────────────────────────────────── */
.mobile-nav-button__icon,
.mobile-nav-button__icon::before,
.mobile-nav-button__icon::after {
  border-top-color: var(--color--white);
}

.mobile-nav-button__label {
  color: var(--color--white);
}

.header-nav .primary-nav__menu-link,
.header-nav .secondary-nav__menu-link,
.header-nav .primary-nav__menu-link--button {
  color: var(--color--white);
}

/* Highlight the active/current menu link in the header */
.header-nav .primary-nav__menu-link--active-trail,
.header-nav .primary-nav__menu-item--active-trail .primary-nav__menu-link,
.header-nav .secondary-nav__menu-link--active-trail,
.header-nav .secondary-nav__menu-item--active-trail .secondary-nav__menu-link,
.header-nav a[aria-current="page"] {
  color: var(--color--accent, #ffd166);
  font-weight: 700;
}

/* Mobile sticky header is handled entirely by mampan.sticky-header.js
 * (uses position:fixed + dynamic padding-top on .page-wrapper). */

/* ── Always-fixed inner on wide screens ──────────────────────────────────────
 * On desktop .site-header__fixable is position:fixed (always visible).
 * is-fixed (added by JS on scroll) triggers the fold animation only.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header__fixable {
    position: fixed;
    z-index: 102;
    inset-block-start: var(--drupal-displace-offset-top, 0px);
    max-width: var(--max-bg-color);
  }

  body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
    inset-block-start: var(--drupal-displace-offset-top, 0px) !important;
  }

  .site-header {
    min-height: var(--site-header-height-wide);
  }
}

.page-wrapper {
    background: var(--mampan-header-bg);
    margin: auto;
}


.main-content {
    @media (min-width: 75rem) {

        box-shadow: 15px 15px 16px 4px inset #00000066;
    }
}

/* Make hero behave like a normal contained block rather than a full-bleed
 * element. This neutralises full-bleed positioning and prevents overflow.
 */
.region--hero,
.spcp-hero {
  position: static !important;
  width: auto !important;
  max-width: var(--site-content-max-width, 1200px) !important;
  margin: 1em 0 0 auto !important;
  transform: none !important;
  left: auto !important;
  padding: 1rem 1rem 2rem !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  z-index: auto !important;
}

.spcp-hero .spcp-hero-inner {
  max-width: inherit;
  padding: 0;
}

/* Views: senarai-data responsive table */
.senarai-data .view-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
.senarai-data .views-table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; }
.senarai-data .views-table th, .senarai-data .views-table td { white-space: normal !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; hyphens: auto !important; padding: 0.75rem 0.5rem !important; }
.senarai-data .views-table thead th { text-align: left !important; }
.senarai-data .views-table a { overflow-wrap: anywhere !important; word-break: break-word !important; }
.senarai-data .views-table img, .senarai-data .views-table svg { max-width: 100% !important; height: auto !important; }

@media (max-width: 600px) {
  .senarai-data .views-table th,
  .senarai-data .views-table td {
    padding: 0.5rem 0.375rem;
  }
}

/* Modern table styling */
.senarai-data .views-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  box-shadow: 0 8px 24px rgba(16,24,40,0.06) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.senarai-data .views-table thead th {
  background: #0f1724 !important; /* dark table header */
  color: #f8fafc !important;    /* light text */
  font-weight: 700 !important;
  padding: 1rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  text-align: left !important;
}
.senarai-data .views-table tbody td {
  background: #fff !important;
  padding: 1rem !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(16,24,40,0.04) !important;
  color: #39404a !important;
}
.senarai-data .views-table tbody tr:last-child td {
  border-bottom: none !important;
}
.senarai-data .views-table .views-field.views-field-counter {
  width: 56px !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
}

/* Process button styling */
.senarai-data .views-table .views-field-nothing a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  min-width: 72px !important;
  padding: 0.45rem 0.9rem !important;
  background: linear-gradient(180deg, #464748, #d2d0c9) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(45,108,223,0.12) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.senarai-data .views-table .views-field-nothing a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgb(80 80 80 / 51%) !important;
}



/* Zebra striping and hover for better row differentiation */
.senarai-data .views-table tbody tr:nth-child(even) td {
  background-color: rgba(16,24,40,0.03) !important;
}
.senarai-data .views-table tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}
.senarai-data .views-table tbody tr:hover td {
  background-color: rgb(255 251 218 / 87%) !important;
  transform: translateZ(0);
}

/* Content region background image */
#main {
  /* background-image: url("/web/themes/custom/mampan/images/greyrep.jpg") !important;
  background-repeat: repeat !important;
  background-position: top center !important;
  background-size: contain;
  position: relative !important; */
background-color: #F7F7F7;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 1200'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(360,768,347)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23c3c3c3'/%3E%3Cstop offset='0.02' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.02' stop-color='%23f5f5f5'/%3E%3Cstop offset='0.032' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.032' stop-color='%23e9e9e9'/%3E%3Cstop offset='0.056' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.056' stop-color='%23ebebeb'/%3E%3Cstop offset='0.07' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.07' stop-color='%23f7f7f7'/%3E%3Cstop offset='0.1' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.1' stop-color='%23f8f8f8'/%3E%3Cstop offset='0.126' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.126' stop-color='%23cccccc'/%3E%3Cstop offset='0.142' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.142' stop-color='%23ececec'/%3E%3Cstop offset='0.159' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.159' stop-color='%23d9d9d9'/%3E%3Cstop offset='0.17' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.17' stop-color='%23f6f6f6'/%3E%3Cstop offset='0.197' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.197' stop-color='%23f0f0f0'/%3E%3Cstop offset='0.218' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.218' stop-color='%23c9c9c9'/%3E%3Cstop offset='0.239' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.239' stop-color='%23efefef'/%3E%3Cstop offset='0.254' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.254' stop-color='%23d1d1d1'/%3E%3Cstop offset='0.283' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.283' stop-color='%23dfdfdf'/%3E%3Cstop offset='0.294' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.294' stop-color='%23f7f7f7'/%3E%3Cstop offset='0.305' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.305' stop-color='%23f2f2f2'/%3E%3Cstop offset='0.332' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.332' stop-color='%23f1f1f1'/%3E%3Cstop offset='0.346' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.346' stop-color='%23ececec'/%3E%3Cstop offset='0.362' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.362' stop-color='%23afafaf'/%3E%3Cstop offset='0.381' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.381' stop-color='%23e1e1e1'/%3E%3Cstop offset='0.415' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.415' stop-color='%23ebebeb'/%3E%3Cstop offset='0.428' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.428' stop-color='%23dddddd'/%3E%3Cstop offset='0.442' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.442' stop-color='%23cfcfcf'/%3E%3Cstop offset='0.456' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.456' stop-color='%23d9d9d9'/%3E%3Cstop offset='0.498' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.498' stop-color='%23cacaca'/%3E%3Cstop offset='0.511' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.511' stop-color='%23ededed'/%3E%3Cstop offset='0.532' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.532' stop-color='%23e8e8e8'/%3E%3Cstop offset='0.541' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.541' stop-color='%23dbdbdb'/%3E%3Cstop offset='0.56' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.56' stop-color='%23f5f5f5'/%3E%3Cstop offset='0.581' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.581' stop-color='%23d2d2d2'/%3E%3Cstop offset='0.6' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.6' stop-color='%23c8c8c8'/%3E%3Cstop offset='0.618' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.618' stop-color='%23ededed'/%3E%3Cstop offset='0.656' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.656' stop-color='%23cbcbcb'/%3E%3Cstop offset='0.679' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.679' stop-color='%23aeaeae'/%3E%3Cstop offset='0.689' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.689' stop-color='%23ededed'/%3E%3Cstop offset='0.720' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.720' stop-color='%23dedede'/%3E%3Cstop offset='0.734' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.734' stop-color='%23f9f9f9'/%3E%3Cstop offset='0.748' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.748' stop-color='%23e6e6e6'/%3E%3Cstop offset='0.764' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.764' stop-color='%23e3e3e3'/%3E%3Cstop offset='0.788' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.788' stop-color='%23dedede'/%3E%3Cstop offset='0.808' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.808' stop-color='%23e7e7e7'/%3E%3Cstop offset='0.831' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.831' stop-color='%23ebebeb'/%3E%3Cstop offset='0.856' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.856' stop-color='%23d8d8d8'/%3E%3Cstop offset='0.872' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.872' stop-color='%23f3f3f3'/%3E%3Cstop offset='0.894' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.894' stop-color='%23e6e6e6'/%3E%3Cstop offset='0.914' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.914' stop-color='%23cacaca'/%3E%3Cstop offset='0.942' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.942' stop-color='%23f3f3f3'/%3E%3Cstop offset='0.957' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.957' stop-color='%23e6e6e6'/%3E%3Cstop offset='0.973' stop-color='%23F7F7F7'/%3E%3Cstop offset='0.973' stop-color='%23d2d2d2'/%3E%3Cstop offset='1' stop-color='%23F7F7F7'/%3E%3Cstop offset='1' stop-color='%23f4f4f4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' x='0' y='0' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}

/* Optional subtle overlay for readability */
#main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 20%);
    pointer-events: none;
}

/* Ensure inner content sits above overlay */
#main > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  #main::before {
    background: rgba(255,255,255,0.85);
  }
  #main {
    background-position: center top !important;
    background-size: cover !important;
  }
}


.site-header__inner {/* box-shadow: #000000b0 0px 8px 15px 0px; */}

.social-bar {
    @media (min-width: 75rem) {
        background-color: var(--mampan-header-bg);/* box-shadow: #0000009e 16px 0px 24px 0; */
    }
}

.site-footer {
   background: var(--mampan-header-bg);
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-footer {
    border-inline-start: none;
  }
}




.site-branding__name {
    @media (min-width: 75rem) {
        font-size: 1.5rem;

    }
}

/* Unified JS-driven side panels: left/right widths set by JS.
 * JavaScript sets `--side-panel-left-width` and `--side-panel-right-width` on :root.
 * Panels are hidden by default and shown only when <html> contains
 * `.viewport-wider-than-content` (the behaviour toggles that class).
 */
:root {
  --side-panel-left-width: 0px;
  --side-panel-right-width: 0px;
  /*--side-panel-bg: rgba(220, 38, 38, 0.28); /* semi-transparent red for debugging */
  --side-panel-bg: black;
}

body::before,
body::after {
  content: '';
  position: fixed;
  top: 0;
  height: 100vh;
  background: var(--side-panel-bg);
  z-index: 99999999999999999999999999999999999;
  pointer-events: none;
  display: none;
}

body::before { left: 0; width: var(--side-panel-left-width); }
body::after  { right: 0; width: var(--side-panel-right-width); }

@media (min-width: 75rem) {
  html.viewport-wider-than-content body::before,
  html.viewport-wider-than-content body::after {
    display: block;
  }
}

/* Ensure the main layers sit above the side panels */
.page-wrapper,
#site-header__inner,
#main,
.site-footer {
  position: relative;
  z-index: 1;
}

.primary-nav__menu-link {
  flex-grow: 1; text-decoration: none; color: var(--color-text-neutral-loud); font-size: 1.75rem; font-weight: bold; line-height: var(--sp2);
  &:focus { outline: auto 2px var(--color--primary-50); outline-offset: 2px; }
}

/* Matches the .header-nav specificity used above so this wins regardless
 * of which library aggregation order a given page (e.g. authenticated
 * vs anonymous) loads the base theme's nav CSS in. */
.header-nav .primary-nav__menu-link:hover {
  color: #fc909c;
}

/* Mobile: make content span full grid and reduce container padding */
@media (max-width: 768px) {
  .layout--content-medium,
  .layout--pass--content-medium > * {
    grid-column: 1 / -1 !important;
  }

  .container,
  .container-max-bg {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    max-width: 100% !important;
  }
  /* Collapse the grid to a single column on mobile so the grid gutters
     do not create side whitespace. This targets grid-full utility used
     on region containers. */
  .grid-full {
    grid-template-columns: 1fr !important;
    column-gap: 0.5rem !important;
    row-gap: 0.75rem !important;
  }

  /* Ensure direct children occupy the full single column. */
  .grid-full > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* Strong override: force stacked views-table on small screens (last in file)
   This overrides earlier table rules that may re-enable table layout. */
@media (max-width: 800px) {
  .senarai-data .view-content .views-table,
  .senarai-data .view-content .views-table thead,
  .senarai-data .view-content .views-table tbody,
  .senarai-data .view-content .views-table tr,
  .senarai-data .view-content .views-table th,
  .senarai-data .view-content .views-table td {
    display: block !important;
    width: 100% !important;
  }

  .senarai-data .view-content .views-table thead {
    display: none !important;
  }

  .senarai-data .view-content .views-table tbody tr {
    margin-bottom: 1rem !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .senarai-data .view-content .views-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    background: transparent !important;
  }

  .senarai-data .view-content .views-table td::before {
    content: attr(data-label) ":" !important;
    display: block !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.2rem !important;
  }
}

/* Responsive table: stacked rows on small screens */
@media (max-width: 768px) {
  .senarai-data .views-table {
    display: block !important;
    width: 100% !important;
  }
  .senarai-data .views-table thead {
    display: none !important;
  }
  .senarai-data .views-table tbody, .senarai-data .views-table tr {
    display: block !important;
    margin-bottom: 1rem !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    background: #fff !important;
  }
  .senarai-data .views-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  }
  .senarai-data .views-table td::before {
    content: attr(data-label) ":";
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
  }
}

/* Agihan and JKW webform table headers.
 * Duplicated here (theme-level) because these forms are embedded via the
 * "proses" View on the /proses route, where Webform's per-form CSS asset
 * library never attaches (its attachment logic depends on route/entity
 * context that this custom route doesn't provide). The theme stylesheet
 * always loads, so styling lives here instead of relying on that. */
.agihan .webform-table thead th,
.jkw #edit-payment-table thead th {
  background: #000;
  color: #fff;
}