/* ---- Synopsys brand palette (sampled from www.synopsys.com, 2026-06) ---- */
:root {
  --syn-dark: #111c24;      /* primary text / headings (rgb 17,28,36) */
  --syn-purple: #7e45af;    /* signature brand accent / primary CTA */
  --syn-purple-dark: #5a2a82;
  --syn-blue: #316aca;      /* links */
  --syn-grey: #f0f0f0;
}

html {
  font-size: 14px;
}

/* ---- Branding ---- */
body { color: var(--syn-dark); }

/* Dark navbar: Synopsys-dark bar with the wordmark reversed out to white */
.syn-navbar { background: var(--syn-dark); }
.navbar-brand { padding-top: .25rem; padding-bottom: .25rem; }
.syn-navbar .navbar-brand img { display: block; filter: brightness(0) invert(1); }
.brand-divider {
  width: 1px; height: 22px; background: rgba(255, 255, 255, .28); margin: 0 12px;
}
.brand-sub {
  font-size: 1.15rem; font-weight: 600; color: #c6a8e6;
  letter-spacing: .2px;
}

/* Two-row header: thin divider between the brand row and the nav row */
.syn-navrow { border-top: 1px solid rgba(255, 255, 255, .12); min-height: 0; }
.syn-navrow .nav-link.text-dark { padding-top: .4rem; padding-bottom: .4rem; }

/* Keep the signed-in user + Logout inline on the brand row (navbar-nav is column by default here) */
.syn-brandrow .navbar-nav { flex-direction: row; align-items: center; gap: .75rem; }
.syn-brandrow .navbar-nav .nav-link { padding-top: 0; padding-bottom: 0; }
.syn-brandrow form { margin: 0; }

/* Indent the nav row so the menu begins just past the "Media Fulfilment" title above
   (rather than butting against the far-left logo). Only when the horizontal menu shows. */
@media (min-width: 576px) {
  .syn-navrow .navbar-nav { padding-left: calc(308px + 1.5cm); }
}

.syn-navbar .nav-link.text-dark { color: rgba(255, 255, 255, .82) !important; font-weight: 500; }
.syn-navbar .nav-link.text-dark:hover,
.syn-navbar .nav-link.text-dark.active { color: #fff !important; }

a { color: var(--syn-blue); }
a:hover { color: var(--syn-purple); }

/* Primary actions adopt the Synopsys purple */
.btn-primary {
  --bs-btn-bg: var(--syn-purple);
  --bs-btn-border-color: var(--syn-purple);
  --bs-btn-hover-bg: var(--syn-purple-dark);
  --bs-btn-hover-border-color: var(--syn-purple-dark);
  --bs-btn-active-bg: var(--syn-purple-dark);
  --bs-btn-active-border-color: var(--syn-purple-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--syn-purple);
  --bs-btn-border-color: var(--syn-purple);
  --bs-btn-hover-bg: var(--syn-purple);
  --bs-btn-hover-border-color: var(--syn-purple);
  --bs-btn-active-bg: var(--syn-purple-dark);
  --bs-btn-active-border-color: var(--syn-purple-dark);
}

h1, h2, h3, h4, h5 { color: var(--syn-dark); }

.footer a { color: var(--syn-blue); }

/* ---- Worklist right-hand detail panel ---- */
.syn-detail { width: 320px; }
.syn-detail .card-header { background: var(--syn-grey); border-bottom: 2px solid var(--syn-purple); }
.syn-detail dt { font-size: .8rem; }
.syn-address { white-space: pre-line; font-size: .85rem; line-height: 1.35; min-height: 6rem; }

/* Below large screens the panel drops under the grid rather than squeezing it. */
@media (max-width: 991.98px) {
  .syn-worklist { flex-direction: column; }
  .syn-detail { width: 100%; }
}

/* Date criteria fields: EJ2 datepickers fill their container, so bound the container
   to roughly what dd/MM/yyyy plus the calendar button needs. */
.syn-datefield { width: 11rem; }

/* ---- Dialogs ----
   EJ2 works out a dialog's max-height ONCE, when the dialog initialises at page load —
   at which point the grids haven't rendered and <body> is still short — and never
   recalculates it on open. On our tallest dialog (Create Shipment) that stale cap came
   out at 373px, forcing a scrollbar on the content and pushing Create/Cancel out of
   sight, regardless of how big the browser window was. Overriding it lets a dialog size
   to its content, still bounded by the viewport so a long one scrolls rather than
   overflowing the screen. !important is needed because EJ2 sets max-height inline. */
.e-dialog { max-height: 90vh !important; }

/* ---- Line Items grouped action panels (ribbon-style groups) ---- */
.syn-actiongroup {
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  background: #fff;
  padding: .3rem .5rem .15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.syn-actiongroup-body { display: flex; gap: .25rem; }
.syn-actiongroup-label {
  text-align: center;
  font-size: .68rem;
  color: #6c757d;
  margin-top: .25rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--syn-purple);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Identity pages (sign in, forgotten password, reset). The pages that come from the Identity UI
   package emit bare <h1>/<h2> with no classes, which render at Bootstrap's default display sizes —
   far larger than any heading the rest of the application uses. Sized here to match our own pages:
   the <h1> reads as a page title, the <h2> as the instruction line beneath it. */
.identity-page h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.identity-page h2 {
  font-size: 1rem;
  font-weight: 400;
  color: var(--bs-secondary-color, #6c757d);
  margin-bottom: 0.75rem;
}

/* ---- Header-only tabs (Order Reporting) ----

   The Reporting tabs carry no content of their own - the panes are separate divs toggled by
   d-none, because a grid initialised inside an EJ2 Tab pane measures against a zero-size
   container. That works, but it left the strip with nothing to make it look like a tab strip:
   the site rule `a { color: var(--syn-blue) }` reached the inactive tab's anchor, so it rendered
   as blue link text beside plain grey text. Two words, one of which looked like a hyperlink -
   and it was missed entirely on first use.

   So: give the strip a baseline, give the inactive tab body colour, and mark the active one with
   the brand accent it already uses for the current nav item. */
#reportTabs { border-bottom: 1px solid #dee2e6; }

#reportTabs .e-tab-text { color: var(--syn-dark); }

#reportTabs .e-toolbar-item.e-active .e-tab-text {
  color: var(--syn-purple);
  font-weight: 600;
}

/* Sits on the strip's baseline, so the active tab reads as joined to the pane below it. */
#reportTabs .e-toolbar-item.e-active { box-shadow: inset 0 -3px 0 0 var(--syn-purple); }

#reportTabs .e-toolbar-item:not(.e-active):hover .e-tab-text { color: var(--syn-purple); }