/* #region App Utilities */

/* Make the hidden attribute win over layout classes like .wa-stack (display: flex) */
[hidden] {
  display: none !important;
}

/* See also: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using */
@media screen and (max-width: calc(768px - 1px)) {
  .app-desktop-only {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .app-mobile-only {
    display: none;
  }
}

/* #endregion */

:root{
  /* Font: Schibsted Grotesk (Google Fonts, loaded in index.php) */
  --wa-font-family-body: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-heading: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-longform: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --wa-font-weight-heading: 600;

  /* Text size: 1 = WebAwesome default (16px). 0.9375 = 15px */
  --wa-font-size-scale: 0.9375;

  /* Layout */
  --app-sidebar-width: 15rem;
  --app-canvas-bg: #f4f5f7;
  --app-card-bg: #ffffff;
  --app-card-radius: 0.875rem;
  --app-card-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 4px 16px rgb(16 24 40 / 0.06);
  --app-divider: #e4e7ec;

  --wa-color-brand-05: #340000;
  --wa-color-brand-10: #480000;
  --wa-color-brand-20: #700000;
  --wa-color-brand-30: #910007;
  --wa-color-brand-40: #ab1d21;
  --wa-color-brand-50: #d04440;
  --wa-color-brand-60: #f4655e;
  --wa-color-brand-70: #ff847b;
  --wa-color-brand-80: #ffb1a7;
  --wa-color-brand-90: #ffd8d1;
  --wa-color-brand-95: #ffeae6; 
}

/* Dark mode (toolbar toggle adds .wa-dark to <html>) */
html.wa-dark {
  --app-canvas-bg: var(--wa-color-surface-lowered);
  --app-card-bg: var(--wa-color-surface-default);
  --app-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
  --app-divider: var(--wa-color-surface-border);
}

html {
  overflow-y: scroll; /* Prevent layout jank when pages change height */
}

body {
  /* Recommended minimum for accessibility */
  min-width: 320px;
  /* Maintain mobile Safari font size on orientation change */
  -webkit-text-size-adjust: 100%;
}

/* Grey canvas behind the app (not the login pages, which have their own layout) */
body:has(> wa-page) {
  background: var(--app-canvas-bg);
}

/* See also: https://webawesome.com/docs/components/page#css-parts */
/* "body" prefix so these win over the inline <style> in templates/common/navigation.php */
body wa-page {
  /* Center the page */
  margin: 0 auto;
  /* See also: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env#safe-area-inset-top */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  max-inline-size: 1920px;
  background: var(--app-canvas-bg);

  &::part(drawer__body) {
    padding-top: 0;
  }

  &::part(main-header),
  header[slot='navigation-header'] {
    position: sticky;
    top: 0;
    /* Fix content overlap */
    z-index: 1;
  }

  /* Sidebar */
  header[slot='navigation-header'] {
    padding: var(--wa-space-l) var(--wa-space-m) var(--wa-space-m);
  }

  [slot='navigation'] {
    padding-inline: var(--wa-space-xs);
  }

  /* Top header bar: white with a subtle dividing line */
  &::part(main-header) {
    background: var(--app-card-bg);
    border-bottom: 1px solid var(--app-divider);
  }

  /* Content: grey canvas. The page title, breadcrumb and main buttons sit on
     the canvas; the rest of the page goes in .page-body, the white card. */
  &::part(main-content) {
    background: var(--app-canvas-bg);
  }

  main {
    /* Override default padding */
    padding: var(--wa-space-l) var(--wa-space-s) var(--wa-space-xl);
  }

  .page-body {
    background: var(--app-card-bg);
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-card-shadow);
    padding: var(--wa-space-l);
  }

  header[slot='main-header'] {
    /* Override default padding */
    padding: var(--wa-space-m) var(--wa-space-xl);
  }

  wa-button[data-toggle-nav] {
    /* Visually align button label with main content */
    margin-inline-start: calc(var(--wa-form-control-padding-inline) * -1);
  }

  &[view='desktop'] {
    --menu-width: var(--app-sidebar-width);

    &::part(menu) {
      height: auto;
      /* Scrollbar appears inset to avoid main content jank */
      width: var(--app-sidebar-width);
      max-width: var(--app-sidebar-width);
    }

    &::part(main-header),
    &::part(main-content) {
      border-left: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    }

    main {
      /* Override default padding */
      padding: var(--wa-space-xl) var(--wa-space-2xl) var(--wa-space-2xl);
    }

    .page-body {
      padding: var(--wa-space-2xl);
    }

    header[slot='main-header'] {
      /* Override default padding */
      padding: var(--wa-space-m) var(--wa-space-2xl);
    }
  }
}

h2{
  font-size: var(--wa-font-size-xl);
}

/* Headings a touch tighter with Schibsted Grotesk */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

/*
 * Small components everywhere
 * WebAwesome gives every component size="m" by default, and page styles beat a
 * component's own styles, so this makes default-size components small without
 * touching any markup. A component given another size (e.g. size="l") keeps it.
 */
:is(
  wa-button, wa-button-group, wa-input, wa-textarea, wa-select, wa-combobox,
  wa-number-input, wa-date-input, wa-time-input, wa-otp-input, wa-file-input,
  wa-checkbox, wa-radio-group, wa-switch, wa-slider, wa-color-picker, wa-rating,
  wa-dropdown, wa-tag, wa-tag-input, wa-callout
)[size='m'] {
  font-size: var(--wa-font-size-s);
}

/* Sidebar menu stays at the normal size, to match its Parts/More dropdowns */
wa-page [slot='navigation'] wa-button[size='m'] {
  font-size: var(--wa-font-size-m);
}

/* login page styles */       
.login-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ── Left: Form panel ── */
.form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2rem;
  background: var(--color-bg);
  position: relative;
}

.form-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(45, 90, 61, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.form-inner {
  width: 100%;
  max-width: 380px;
  position: relative;
  z-index: 1;
}

/* ── Right: Image panel ── */
.image-panel {
  position: relative;
  overflow: hidden;
}

.image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: none;
}

/* Subtle overlay for depth */
.image-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(45, 90, 61, 0.25) 0%,
    transparent 50%,
    rgba(26, 24, 22, 0.3) 100%
  );
}

/* ── Responsive: hide image panel ── */
@media (max-width: 768px) {
  .login-layout {
    grid-template-columns: 1fr;
  }

  .image-panel {
    display: none;
  }

  .form-panel {
    padding: 2.5rem 1.5rem;
    min-height: 100vh;
  }
}

/* ── Fade-in animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-inner > * {
  animation: fadeUp 0.5s ease both;
}
/* end login page styles */

/* 404 page */
.container-404{
    text-align: center;
}
.container-404 img{
    width: 120px;
}
.container-404 h1{
    font-size: 2.5em;
    font-weight: 500;
}
  

header .logo{
  max-width: 80%;
}

/* Logo: logo.svg on light, logo-dark.svg (white "JMS") in dark mode */
.app-logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.app-logo-dark,
html.wa-dark .app-logo-light {
  display: none;
}
html.wa-dark .app-logo-dark {
  display: block;
}

/* toolbar account button, remove hover */
wa-button#account-menu-trigger::part(base):hover {
  background-color: transparent;
}
/* toolbar account button, adjust image size to fit */
wa-avatar#account-menu-avatar {
  --size: 2rem;
}


/* Data Tables override styling*/
.dataTable-sorter::before {  
  bottom: 9px;
}
.dataTable-selector{
  width: 65px;  
  margin-block-start: 0;
}

/* table styling*/
.table-child-row{
  padding-left: 20px;
  font-size: .85em;
}
.table-icon wa-icon{
  color: var(--wa-color-border-loud);
}

/* Keep text on one line (table cells, or parts of one) */
:is(td, span).nowrap {
  white-space: nowrap;
}

/* A table that can't fit its card scrolls sideways inside it, rather than
   spilling out (e.g. on a phone) */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

/* Numbers and money in tables: right-aligned, digits lined up */
:is(td, th).number {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Job tables: "(add. to 630967)" after a variation order's IJN */
.job-parent {
  font-style: italic;
  font-size: var(--wa-font-size-smaller);
  color: var(--wa-color-text-quiet);
}

.number-field{
  max-width: 200px;
}

.short-field{
  max-width: 200px;
}

/*
 * Job status badges: <wa-badge class="job-status" data-status="..."> where
 * data-status is the status name as a key (Job::statusKey(), e.g. "no-access-tbc").
 * Each status sets the badge's fill and text colour, so we aren't limited to
 * WebAwesome's variant colours. Fills match the client's existing system;
 * text is white or dark, whichever reads better on the fill. Statuses not
 * listed (not yet confirmed by the client) stay neutral (dark).
 */
wa-badge.job-status {
  --job-status-light-text: #ffffff;
  --job-status-dark-text: #1a1a1a;
  --wa-color-fill-loud: var(--job-status-bg, var(--wa-color-neutral-fill-loud));
  --wa-color-on-loud: var(--job-status-fg, var(--wa-color-neutral-on-loud));

  /* Green */
  &:is([data-status='completed'], [data-status='completed-tbc'], [data-status='accepted']) {
    --job-status-bg: #379b3c;
    --job-status-fg: var(--job-status-light-text);
  }

  /* Red */
  &:is([data-status='no-access-tbc'], [data-status='in-progress']) {
    --job-status-bg: #ff0000;
    --job-status-fg: var(--job-status-light-text);
  }

  /* Amber */
  &[data-status='variation-order-tbc'] {
    --job-status-bg: #eead2f;
    --job-status-fg: var(--job-status-dark-text);
  }

  /* Light blue */
  &[data-status='pending-allocation'] {
    --job-status-bg: #4acfec;
    --job-status-fg: var(--job-status-dark-text);
  }

  /* Blue */
  &:is([data-status='delivered'], [data-status='on-site'], [data-status='travelling']) {
    --job-status-bg: #629fcf;
    --job-status-fg: var(--job-status-dark-text);
  }
}

/* Find a Job form: rows of one or two fields, like the old system's layout */
.job-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-l);
}

.job-search-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 28rem));
  gap: var(--wa-space-xl);
  align-items: start;
}

.job-search-range {
  display: flex;
  align-items: end;
  gap: var(--wa-space-s);

  wa-date-input {
    flex: 1;
  }

  span {
    display: flex;
    align-items: center;
    height: var(--wa-form-control-height);
  }
}

@media (max-width: 767px) {
  .job-search-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Find a Job results: the criteria searched for */
.job-search-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-2xs) var(--wa-space-l);
  font-size: var(--wa-font-size-s);
}