@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600;700&display=swap");

/* ==========================================================================
   ADN TRACKER: Baserow Application Builder custom CSS
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Page canvas
   3.  Status badge
   4.  Fixed header navigation
   5.  Overview page: hero
   6.  Job listing page
   7.  Job detail page: title + numbered tabs
   8.  Job detail page: Models tab
   9.  Add Job page
   10. Modals: edit model / create model

   Rule of thumb: nearly everything uses !important because Baserow's own
   styles are inline/variable-driven. Order inside a section matters wherever
   two rules have equal specificity, so do not shuffle rules within a block.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root
 {
  --adn-canvas: #f7f7f1;        /* off-white page + panel background */
  --adn-border: #b8b8b0;        /* fine grid lines */
  --adn-ink: #262626;           /* charcoal: headings, hover fills */
  --adn-text: #343430;          /* body text */
  --adn-muted: #74746d;         /* labels, counters, focus rings */
  --adn-accent: #a8c28e;        /* green action buttons */
  --adn-accent-hover: #97b67a
;
  --adn-disable: #b4b4b0; /* resting form labels + idle submit text */
  --adn-mono: "SFMono-Regular", Consolas, "Liberation Mono"
, Menlo, monospace;
  --adn-sans
: Arial, Helvetica, sans-serif;
  --adn-fade: .15s
 ease;
  --adn-geist: "Geist Mono", "SFMono-Regular", Consolas, monospace;               /* header + hero button */
  --adn-grotesk: "Inter Tight", Arial, sans-serif;        /* header brand label */
}

/* Fonts: Inter Tight (headings/body) + Geist Mono (labels) load from Google Fonts
   via the @import at the very top of this file (it must stay the first rule).
   Swap the family names in --adn-grotesk / --adn-geist above to change them. */


/* ==========================================================================
   2. PAGE CANVAS
   Job Detail, Job Listing and Overview share the same off-white background.
   ========================================================================== */

body:has(.job-detail-tabs
),
.page:has(.job-detail-tabs
),
.page__content:has(.job-detail-tabs
),
body:has(.job-listing-table
),
.page:has(.job-listing-table
),
.page__content:has(.job-listing-table
),
body:has(.adn-overview-hero
),
.page:has(.adn-overview-hero
),
.page__content:has(.adn-overview-hero
) {
  background-color: var(--adn-canvas) !important
;
}


/* ==========================================================================
   3. STATUS BADGE
   Color comes from Jobs > Status > color.
   ========================================================================== */

.job-status-badge
 {
  width: fit-content !important
;
  max-width: 100%
;
  border-radius: 999px
;
  background-color: var(--job-status-background, #f5f5f5) !important
;
  color: #111827 !important
;
  padding: 4px 10px
;
}

.job-status-badge p
 {
  margin: 0
;
  color: inherit !important
;
}

/* The Markdown code token carries the database color, not visible text. */
.job-status-badge code { display: none !important
; }


/* ==========================================================================
   4. FIXED HEADER NAVIGATION
   The native Baserow menu is hidden and replaced by a script-built
   .adn-header-nav. The last column's native button is restyled as the
   green-text "Add" cell, and the first column shows the brand label.
   ========================================================================== */

/* 4a. Container + grid */
.page__fixed-stack--top:has(.menu-element__wrapper
) {
  --adn-header-cell: clamp(110px, 11vw, 180px
);
  background: var(--adn-canvas) !important
;
  padding: 7px 7px 0 !important
;
  border: 0 !important
;
  box-sizing
: border-box;
  overflow: visible !important
;
}

.page__fixed-stack--top .column-element:has(.menu-element__wrapper
) {
  display: grid !important
;
  grid-template-columns: minmax(0, 1fr) calc(2 * var(--adn-header-cell)) var(--adn-header-cell) !important
;
  gap: 0 !important
;
  align-items: stretch !important
;
  min-height: 58px
;
  border: 1px
 solid 
var(--adn-border);
  background: var(--adn-canvas) !important
;
}

.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column
 {
  min-width: 0 !important
;
}

.page__fixed-stack--top:has(.menu-element__wrapper) .element__wrapper
 {
  --element-padding-top: 0px !important
;
  --element-padding-bottom: 0px !important
;
  --element-padding-left: 0px !important
;
  --element-padding-right: 0px !important
;
  overflow: visible !important
;
}

.page__fixed-stack--top:has(.menu-element__wrapper) .element__inner-wrapper
 {
  width: 100% !important
;
  max-width: none !important
;
}

.page__fixed-stack--top:has(.menu-element__wrapper) .image-element { display: none !important
; }

/* Keep native navigation hidden from first render; preserve its actions for forwarding. */
.page__fixed-stack--top .menu-element__wrapper:has(a[href*="job_type="]) > :not(.adn-header-nav
) {
  display: none !important
;
}

/* 4b. Brand label (first column) */
.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:first-child
 {
  display: flex !important
;
  align-items: flex-start !important
;
  justify-content: center !important
;
  position
: relative;
}

.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:first-child::before
 {
  content: "ADN INTERNATIONAL SDN BHD"
;
  display
: block;
  padding: 10px 26px
;
  color
: 
var(--adn-ink);
  font: 700 20px/1.1
 var(--adn-grotesk);
  letter-spacing: -.035em
;
  word-spacing: 0
;
}

/* 4c. Nav cells: links, dropdown toggle, and the native Add button (last column) */
.adn-header-nav
 {
  display
: flex;
  align-items
: stretch;
  position
: relative;
  height: 100%
;
}
.adn-header-nav .adn-header-link
,
.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:last-child button
{
  display: flex !important
;
  align-items
: flex-start;
  justify-content
: flex-start;
  text-align
: left;
  position
: relative;
  box-sizing
: border-box;
  width: var(--adn-header-cell) !important
;
  min-width: 0 !important
;
  height: 58px !important
;
  min-height: 58px !important
;
  margin: 0 !important
;
  padding: 10px 10px !important
;
  border: 0 !important
;
  border-left: 1px solid var(--adn-border) !important
;
  border-radius: 0 !important
;
  background: var(--adn-canvas) !important
;
  color: var(--adn-text) !important
;
  font: 500 12px/1.4 var(--adn-geist) !important
;
  text-transform
: uppercase;
  letter-spacing: 0
;
  word-spacing: 0
;
  text-decoration: none !important
;
  box-shadow: none !important
;
  cursor
: pointer;
}
.adn-header-nav .adn-header-link:hover
{
  background: var(--adn-ink) !important
;
  color: var(--adn-canvas) !important
;
}

/* Add button: green text on canvas, green fill on hover */
.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:last-child button
 {
  background: var(--adn-canvas) !important
;
  color: var(--adn-accent-hover) !important
;
}

.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:last-child button:hover
 {
  background: var(--adn-accent) !important
;
  color: var(--adn-ink) !important
;
}

.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:last-child button::after
 {
  content: "→"
;
  position
: absolute;
  right: 12px
;
  bottom: 4px
;
  font: 24px/1
 Arial, sans-serif;
  color
: inherit;
}

.page__fixed-stack--top .button-element:has(.adn-header-add
) {
  align-items: stretch !important
;
  --button-alignment: stretch !important
;
}

.page__fixed-stack--top .adn-header-add :is(span, p
) {
  font: inherit !important
;
  color: inherit !important
;
}

/* 4d. Dropdown panel */

/* 4e. Focus */
.adn-header-nav a:focus-visible
,
.page__fixed-stack--top .adn-header-add:focus-visible
{
  outline: 2px
 solid 
var(--adn-muted);
  outline-offset: -4px
;
}

/* 4f. Mobile (the two original 600px queries merged; the repeated
       grid-template-columns was identical to the base rule, so it is dropped) */
@media (max-width: 600px
) {
  .page__fixed-stack--top:has(.menu-element__wrapper
) {
    --adn-header-cell: clamp(78px, 23vw, 138px
);
    padding: 7px 7px 0 !important
;
  }

  .page__fixed-stack--top .column-element:has(.menu-element__wrapper) { min-height: 52px
; }
.adn-header-nav .adn-header-link
,
  .page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:last-child button
{
    height: 52px !important
;
    min-height: 52px !important
;
    padding: 12px 6px !important
;
    font-size: 10px !important
;
  }

  .page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:first-child::before
 {
    font-size: 9px
;
    padding: 6px
;
    overflow-wrap
: anywhere;
  }

  .page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:last-child button::after
 {
    font-size: 18px
;
    right: 6px
;
    bottom: 3px
;
  }
}


/* 4g. Current page indicator (Heron-style): a small square after the label.
aria-current is set by the custom JS "Header: mark the current page". */
.adn-header-nav .adn-header-link[aria-current="page"]::after
{
content: "";
position: absolute;
top: 15px;
right: 14px;
width: 6px;
height: 6px;
background: currentColor;
}

/* ==========================================================================
5. OVERVIEW PAGE ("main", page 125) — Heron-inspired
Three framed bands, top to bottom:
hero (copy | artwork) -> counters (3 cells) -> today's incoming jobs
(title | list). Counts and the list come from page data sources
(Count New / Count In Progress / Count Completed / Today Jobs).
5a. Frame          5b. Hero grid      5c. Hero copy + CTA   5d. Artwork
5e. Counters       5f. Today's jobs   5g. Responsive
========================================================================== */

/* 5a. Frame: bordered page like Add Job; every band is a full-width row */
.page__content:has(.adn-overview-hero)
{
--ov-x: clamp(20px, 2.8vw, 40px);
--ov-green-text: #6e9a4b;
background: var(--adn-canvas) !important;
margin: 0 7px !important;
border: 1px solid var(--adn-border);
border-top: 0;
min-height: calc(100vh - 65px);
}

.page__content:has(.adn-overview-hero) > .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
border-bottom: 1px solid var(--adn-border);
}

.page__content:has(.adn-overview-hero) > .element__wrapper > .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}

/* Strip native spacing from every element inside the three bands */
:is(.adn-overview-hero, .adn-overview-stats, .adn-overview-today) .element__wrapper
{
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
}

:is(.adn-overview-hero, .adn-overview-stats, .adn-overview-today) .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}

/* 5b. Hero grid: copy left, artwork right, divider between */
.adn-overview-hero
{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
align-items: start;
min-height: clamp(420px, 52vh, 560px);
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
text-align: left !important;
}

.adn-overview-hero > .element__wrapper
{
grid-column: 1;
padding: 0 var(--ov-x) !important;
justify-content: flex-start !important;
}

.adn-overview-hero > .element__wrapper:nth-child(1) { padding-top: clamp(40px, 6vh, 64px) !important; }
.adn-overview-hero > .element__wrapper:nth-child(2) { padding-top: 22px !important; }
.adn-overview-hero > .element__wrapper:nth-child(3) { padding-top: 32px !important; padding-bottom: 48px !important; }

/* 5c. Hero copy + CTA */
.adn-overview-hero-title
{
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}


.adn-overview-hero-title h1
{
max-width: 640px;
margin: 0 !important;
font: 700 clamp(40px, 4.4vw, 64px)/.95 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
text-align: left !important;
text-wrap: balance;
color: var(--adn-ink) !important;
}

.adn-overview-hero-copy,
.adn-overview-hero-copy p
{
max-width: 520px;
margin: 0 !important;
padding: 0 !important;
font: 500 clamp(16px, 1.25vw, 18px)/1.25 var(--adn-grotesk) !important;
letter-spacing: -.02em;
text-align: left !important;
color: rgba(38, 38, 38, .72) !important;
}

.adn-overview-hero-action
{
display: flex !important;
justify-content: flex-start !important;
--button-alignment: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}

.adn-overview-hero-action :is(button, a)
{
display: inline-flex !important;
align-items: center;
gap: 20px;
min-height: 52px;
margin: 0 !important;
padding: 0 0 0 22px !important;
border: 1px solid var(--adn-accent) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
font: 500 13px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none !important;
transition: background-color var(--adn-fade), border-color var(--adn-fade);
}

.adn-overview-hero-action :is(button, a) :is(span, p)
{
font: inherit !important;
color: inherit !important;
}

.adn-overview-hero-action :is(button, a)::after
{
content: "→";
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
width: 52px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 18px/1 var(--adn-geist);
transition: transform .2s ease;
}

.adn-overview-hero-action :is(button, a):hover
{
background: var(--adn-accent-hover) !important;
border-color: var(--adn-accent-hover) !important;
}

.adn-overview-hero-action :is(button, a):focus-visible
{
outline: 2px solid var(--adn-ink) !important;
outline-offset: 4px;
}

/* 5d. Artwork: fills the whole right cell */
.adn-overview-hero > .element__wrapper:has(img)
{
grid-column: 2;
grid-row: 1 / -1;
position: relative;
overflow: hidden;
align-self: stretch;
height: 100%;
padding: 0 !important;
border-left: 1px solid var(--adn-border);
}

.adn-overview-hero > .element__wrapper:has(img) > .element__inner-wrapper,
.adn-overview-hero .image-element
{
height: 100%;
--image-wrapper-width: 100% !important;
--image-wrapper-max-width: 100% !important;
}

/* Smaller, quieter artwork: centred in the cell with generous margins so
   the headline and counters lead, not the logo */
.adn-overview-hero img
{
position: absolute !important;
inset: 10% 12%;
display: block;
width: 76% !important;
max-width: none !important;
height: 80% !important;
min-height: 0;
object-fit: contain;
object-position: center;
mix-blend-mode: multiply;
opacity: .82;
}

/* 5e. Counters: three equal cells, big figure + mono label on one baseline */
.adn-overview-stats
{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0 !important;
padding: 0 !important;
}

.adn-overview-stats > .element__wrapper + .element__wrapper
{
border-left: 1px solid var(--adn-border);
}

.adn-stat
{
display: flex !important;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 18px;
padding: clamp(24px, 3.2vh, 34px) var(--ov-x) !important;
}

.adn-stat > .element__wrapper
{
width: auto !important;
}

.adn-stat-value,
.adn-stat-value h2
{
margin: 0 !important;
padding: 0 !important;
font: 400 clamp(48px, 5.2vw, 80px)/.9 var(--adn-grotesk) !important;
letter-spacing: -.04em !important;
color: var(--adn-ink) !important;
font-variant-numeric: tabular-nums;
}

.adn-stat-label,
.adn-stat-label p
{
margin: 0 !important;
padding: 0 !important;
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

/* Completed reads in brand green */
.adn-overview-stats > .element__wrapper:nth-child(3) :is(.adn-stat-value h2, .adn-stat-label p)
{
color: var(--ov-green-text) !important;
}

/* 5f. Today's incoming jobs: title cell | list cell */
.adn-overview-today
{
display: grid !important;
/* 1 : 2 so the title cell is exactly one third wide, lining up with the
   counters band above and the resources band below */
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
min-height: 240px;
margin: 0 !important;
padding: 0 !important;
}

.adn-overview-today > .element__wrapper:first-child
{
padding: clamp(24px, 3.2vh, 34px) var(--ov-x) !important;
}

/* divider drawn on the left of the list cell (not the right of the title
   cell) so it sits on the same pixel as the counters and resources lines */
.adn-overview-today > .element__wrapper + .element__wrapper
{
border-left: 1px solid var(--adn-border);
}

.adn-today-title,
.adn-today-title h2
{
margin: 0 !important;
padding: 0 !important;
font: 700 clamp(30px, 3.2vw, 46px)/.95 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}



.adn-today-list
{
margin: 0 !important;
padding: 0 !important;
}

.adn-today-list .collection-element__header { display: none !important; }

.adn-today-list :is(.repeat-element__repeated-elements, .repeat-element__repeated-element)
{
display: block !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}

.adn-today-list .repeat-element__repeated-element
{
border-bottom: 1px dashed var(--adn-border);
}

.adn-today-item
{
display: block !important;
width: 100% !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}

.adn-today-item a
{
position: relative;
display: block !important;
width: 100% !important;
box-sizing: border-box;
padding: 14px 64px 14px var(--ov-x) !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: 500 16px/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: var(--adn-ink) !important;
text-decoration: none !important;
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.adn-today-item a::after
{
content: "→";
position: absolute;
right: var(--ov-x);
top: 50%;
transform: translateY(-50%);
font: 400 18px/1 var(--adn-geist);
transition: transform .2s ease;
}

.adn-today-item a:is(:hover, :focus-visible)
{
background: var(--adn-ink);
color: var(--adn-canvas) !important;
outline: 0;
}

.adn-today-item a:hover::after
{
transform: translate(4px, -50%);
}

/* Empty state when nothing arrived today */
.adn-today-list:not(:has(.repeat-element__repeated-element))::after
{
content: "No jobs received today.";
display: block;
padding: clamp(24px, 3.2vh, 34px) var(--ov-x);
font: 500 12px/1.4 var(--adn-geist);
text-transform: uppercase;
color: var(--adn-muted);
}

.adn-today-list .repeat-element__footer:empty { display: none; }

/* Scrollable list: about five rows tall, newest first; the rest scrolls */
.adn-today-list > .repeat-element--orientation-vertical > .repeat-element__repeated-elements,
.adn-today-list .repeat-element__repeated-elements
{
max-height: 250px;
overflow-y: auto !important;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--adn-border) transparent;
}
.adn-today-list .repeat-element__repeated-elements::-webkit-scrollbar { width: 6px; }
.adn-today-list .repeat-element__repeated-elements::-webkit-scrollbar-thumb { background: var(--adn-border); }
.adn-today-list .repeat-element__footer { display: none !important; }

/* Received date/time sits in a fixed mono column at the start of each row;
   the whole row stays one link (the date ignores the pointer) */
.adn-today-list .repeat-element__repeated-element { position: relative; }
.adn-today-list .element__wrapper:has(> .element__inner-wrapper > .adn-today-date)
{
position: absolute !important;
left: var(--ov-x, 24px);
top: 50%;
z-index: 1;
width: auto !important;
transform: translateY(-50%);
pointer-events: none;
}
.adn-today-date, .adn-today-date p
{
margin: 0 !important;
padding: 0 !important;
font: 500 12px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
white-space: nowrap;
color: var(--adn-muted) !important;
transition: color var(--adn-fade);
}
.adn-today-list .repeat-element__repeated-element:has(.adn-today-date) .adn-today-item a
{
padding-left: calc(var(--ov-x, 24px) + 150px) !important;
}
.adn-today-list .repeat-element__repeated-element:hover .adn-today-date p
{
color: rgba(247, 247, 241, .72) !important;
}
@media (max-width: 640px)
{
.adn-today-list .element__wrapper:has(> .element__inner-wrapper > .adn-today-date) { top: 12px; transform: none; }
.adn-today-list .repeat-element__repeated-element:has(.adn-today-date) .adn-today-item a
{
padding: 32px 56px 14px var(--ov-x, 18px) !important;
white-space: normal;
}
}

/* 5g. Responsive */
@media (max-width: 800px)
{
.adn-overview-hero
{
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}

.adn-overview-hero > .element__wrapper:has(img)
{
grid-column: 1;
grid-row: auto;
height: 300px;
border-left: 0;
border-top: 1px solid var(--adn-border);
}

.adn-overview-today
{
grid-template-columns: minmax(0, 1fr);
}

.adn-overview-today > .element__wrapper:first-child
{
border-right: 0;
border-bottom: 1px solid var(--adn-border);
}

.adn-overview-today > .element__wrapper + .element__wrapper
{
border-left: 0;
}
}

@media (max-width: 600px)
{
.adn-overview-stats
{
grid-template-columns: minmax(0, 1fr);
}

.adn-overview-stats > .element__wrapper + .element__wrapper
{
border-left: 0;
border-top: 1px solid var(--adn-border);
}
}

/* ==========================================================================
6. JOB LISTING PAGE ("Home" /, filtered by ?job_type=) — Heron pricing-table style
Bands, top to bottom (all inside container .adn-jobs-page):
title (.adn-jobs-title) + count (.adn-jobs-count) -> job-type tabs
(.adn-jobs-tabs) -> filter/search row -> table (.job-listing-table).
Table columns: 1 subject, 2 client, 3 job type, 4 priority, 5 PIC,
6 date received, 7 status.
6a. Frame   6b. Title band   6c. Tabs   6d. Filter/search row
6e. Table   6f. Cells        6g. Rows   6h. Load more   6i. Responsive
========================================================================== */

/* 6a. Frame: bordered page, bands run edge to edge */
.page__content:has(.adn-jobs-page)
{
--jl-x: clamp(16px, 2vw, 28px);
background: var(--adn-canvas) !important;
margin: 0 7px !important;
border: 1px solid var(--adn-border);
border-top: 0;
min-height: calc(100vh - 65px);
}

.page__content:has(.adn-jobs-page) > .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
--element-border-top: none !important;
--element-border-bottom: none !important;
--element-border-left: none !important;
--element-border-right: none !important;
background: transparent !important;
}

.page__content:has(.adn-jobs-page) > .element__wrapper > .element__inner-wrapper,
.adn-jobs-page .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}

.adn-jobs-page,
.adn-jobs-page .element__wrapper
{
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
}

/* 6b. Title band: centred heading + count, like Heron's pricing hero */
.adn-jobs-title
{
padding: clamp(36px, 5vh, 56px) 20px 0 !important;
text-align: center !important;
}

.adn-jobs-title::before
{
content: "JOB LISTING";
display: block;
margin-bottom: 16px;
font: 500 12px/1.4 var(--adn-geist);
color: rgba(38, 38, 38, .72);
}

.adn-jobs-title h1
{
margin: 0 !important;
font: 700 clamp(40px, 5vw, 72px)/.95 var(--adn-grotesk) !important;
letter-spacing: -.03em !important;
text-transform: uppercase;
text-align: center !important;
color: var(--adn-ink) !important;
}

.adn-jobs-count
{
padding: 14px 20px clamp(28px, 4vh, 44px) !important;
text-align: center !important;
border-bottom: 1px solid var(--adn-border);
}

.adn-jobs-count p
{
margin: 0 !important;
font: 500 clamp(15px, 1.2vw, 17px)/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
text-align: center !important;
white-space: pre-wrap;
color: rgba(38, 38, 38, .72) !important;
}

/* 6c. Job-type tabs: equal cells across the full width; active = charcoal */
.adn-jobs-tabs
{
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid var(--adn-border);
}

.adn-jobs-tabs .menu-element__container
{
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 0 !important;
width: 100%;
}

.adn-jobs-tabs .menu-element__menu-item-link
{
min-width: 0;
border-right: 1px solid var(--adn-border);
}

.adn-jobs-tabs .menu-element__menu-item-link:last-child
{
border-right: 0;
}

.adn-jobs-tabs .menu-element__menu-item-link > div,
.adn-jobs-tabs .menu-element__menu-item-link > div > div
{
display: block !important;
width: 100%;
height: 100%;
}

.adn-jobs-tabs a
{
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
box-sizing: border-box;
padding: 0 8px !important;
border-radius: 0 !important;
background: transparent !important;
font: 500 12px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
color: var(--adn-text) !important;
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.adn-jobs-tabs a:hover,
.adn-jobs-tabs a[data-adn-job-active="true"]
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.adn-jobs-tabs a:focus-visible
{
outline: 2px solid var(--adn-muted);
outline-offset: -4px;
}

/* 6d. Filter / search row (native table header), one line under the tabs */
.job-listing-table
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}

.job-listing-table .collection-element__header
{
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
background: transparent;
}

.job-listing-table .local-baserow-adhoc-header
{
display: flex !important;
align-items: stretch !important;
gap: 0 !important;
min-height: 44px;
margin: 0 !important;
padding: 0 !important;
}

.job-listing-table .local-baserow-adhoc-header__item
{
display: flex;
align-items: stretch;
margin: 0 !important;
padding: 0 !important;
}

.job-listing-table .local-baserow-adhoc-header__item:first-child,
.job-listing-table .local-baserow-adhoc-header__item:last-child
{
flex: 0 0 auto !important;
min-width: 112px;
}

.job-listing-table .local-baserow-adhoc-header__item > div
{
flex: 1;
width: 100% !important;
min-width: 0;
}

.job-listing-table .local-baserow-adhoc-header > .flex-grow-1
{
min-width: 0;
border-left: 1px solid var(--adn-border);
border-right: 1px solid var(--adn-border);
}

.job-listing-table .collection-element__header .header__filter-link
{
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: 100% !important;
height: 100% !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--adn-text) !important;
font: 500 12px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
text-decoration: none !important;
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.job-listing-table .collection-element__header .header__filter-link:hover
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.job-listing-table .header__filter-name,
.job-listing-table .header__filter-link i
{
font: inherit !important;
color: inherit !important;
}

.job-listing-table .header__search
{
width: 100% !important;
height: 100% !important;
min-width: 0;
}

.job-listing-table .header__search .header__filter-link
{
width: 100% !important;
min-width: 112px;
}

.job-listing-table .header__search input
{
max-width: 100%;
box-sizing: border-box;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
color: var(--adn-ink) !important;
font: 500 14px/1.3 var(--adn-grotesk) !important;
}

.job-listing-table .header__filter-link:focus-visible
{
outline: 2px solid var(--adn-muted);
outline-offset: -4px;
}

/* 6e. Table: fixed column widths, fine grid, header stays in view */
.job-listing-table :is(.ab-table__wrapper, .baserow-table-wrapper, .ab-table)
{
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}

.job-listing-table table
{
width: 100% !important;
table-layout: fixed;
border-collapse: collapse !important;
border-spacing: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}

.job-listing-table :is(th, td)
{
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
border-left: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
vertical-align: middle;
box-sizing: border-box;
}

.job-listing-table .ab-table__cell-content
{
margin: 0 !important;
padding: 0 !important;
}

.job-listing-table :is(th, td):first-child
{
border-left: 0 !important;
}

.job-listing-table :is(th, td):nth-child(1) { width: 31%; }
.job-listing-table :is(th, td):nth-child(2) { width: 18%; }
.job-listing-table :is(th, td):nth-child(3) { width: 8%; }
.job-listing-table :is(th, td):nth-child(4) { width: 9%; }
.job-listing-table :is(th, td):nth-child(5) { width: 8%; }
.job-listing-table :is(th, td):nth-child(6) { width: 11%; }
.job-listing-table :is(th, td):nth-child(7) { width: 15%; }

.job-listing-table th
{
position: sticky;
top: 65px;
z-index: 3;
height: 44px;
padding: 0 var(--jl-x) !important;
text-align: left !important;
}

.job-listing-table th,
.job-listing-table th *
{
font: 500 11px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

/* 6f. Cells */
.job-listing-table td
{
padding: 14px var(--jl-x) !important;
}

.job-listing-table td,
.job-listing-table td :is(p, span, a, div)
{
font: 500 14px/1.35 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: var(--adn-text) !important;
--body-text-color: var(--adn-text) !important;
}

/* Subject: darker, cut to two lines */
.job-listing-table td:nth-child(1) a
{
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-weight: 500 !important;
color: var(--adn-ink) !important;
text-decoration: none !important;
overflow-wrap: anywhere;
}

/* PIC + date in mono so they line up */
.job-listing-table td:nth-child(5) :is(span, p),
.job-listing-table td:nth-child(6) :is(span, p)
{
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
}

/* Empty cells read as a faint dash, not a gap */
.job-listing-table .ab-table__cell-content:has(> .ab-text:empty)::after,
.job-listing-table .ab-table__cell-content:has(> .tag-field:empty)::after,
.job-listing-table .ab-table__cell-content:empty::after
{
content: "—";
color: var(--adn-disable);
}

/* Job type + priority: square mono chips in the record's own colour */
.job-listing-table td:is(:nth-child(3), :nth-child(4)) .ab-tag
{
display: inline-block;
margin: 0 !important;
padding: 3px 7px !important;
border: 1px solid color-mix(in srgb, var(--tag-background-color, #f5f5f5) 70%, #262626) !important;
border-radius: 0 !important;
background: var(--tag-background-color, #f5f5f5) !important;
font: 500 11px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

/* Status: coloured square + plain label */
.job-listing-table td:nth-child(7) .ab-tag
{
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
font: 500 13px/1.3 var(--adn-grotesk) !important;
white-space: normal;
color: var(--adn-ink) !important;
}

.job-listing-table td:nth-child(7) .ab-tag::before
{
content: "";
flex: 0 0 10px;
width: 10px;
height: 10px;
/* database colours are pastel; deepen them so the square reads on canvas */
background: var(--tag-background-color, #f5f5f5);
filter: saturate(2.4) brightness(.82);
box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .25);
}

/* 6g. Rows: whole row is clickable (custom JS); charcoal on hover with an arrow */
.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"])
{
cursor: pointer;
}

.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]) td
{
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td
{
background: var(--adn-ink) !important;
}

.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td :is(p, span:not(.ab-tag), a, div:not(.tag-field)),
.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td:nth-child(7) .ab-tag
{
color: var(--adn-canvas) !important;
--body-text-color: var(--adn-canvas) !important;
}

.job-listing-table td:last-child
{
position: relative;
padding-right: 44px !important;
}

.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]) td:last-child::after
{
content: "→";
position: absolute;
right: var(--jl-x);
top: 50%;
transform: translate(-4px, -50%);
opacity: 0;
font: 400 18px/1 var(--adn-geist);
color: var(--adn-canvas);
transition: opacity var(--adn-fade), transform .2s ease;
}

.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td:last-child::after
{
opacity: 1;
transform: translate(0, -50%);
}

.job-listing-table a[href*="/job-detail/"]:focus-visible
{
outline: 2px solid currentColor;
outline-offset: 4px;
}

/* 6h. Load more: full-width row */
.job-listing-table .table-element__footer
{
margin: 0 !important;
padding: 0 !important;
}

.job-listing-table .table-element__footer:not(:has(button))
{
display: none;
}

.job-listing-table .table-element__footer button
{
display: flex !important;
align-items: center;
justify-content: center;
gap: 12px;
width: 100% !important;
min-height: 56px;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--adn-text) !important;
font: 500 12px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.job-listing-table .table-element__footer button::after
{
content: "↓";
}

.job-listing-table .table-element__footer button:hover
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

/* 6i. Responsive: narrow screens scroll the table sideways (no sticky header) */
@media (min-width: 1000px)
{
.job-listing-table :is(.ab-table__wrapper, .baserow-table-wrapper, .ab-table)
{
overflow: visible !important;
}
}

@media (max-width: 999px)
{
.job-listing-table table
{
min-width: 900px;
}

.job-listing-table th
{
position: static;
}

.adn-jobs-tabs .menu-element__container
{
grid-auto-columns: minmax(84px, 1fr);
overflow-x: auto;
scrollbar-width: none;
}
}

/* ==========================================================================
7. JOB DETAIL PAGE (/job-detail/:id) — Heron-inspired
Bands inside the root container .job-status-color-source:
title (.adn-job-title, subject .adn-job-subject) -> key facts
(.adn-job-facts, one .adn-fact--* per item) -> numbered tabs
(.job-detail-tabs) -> Details form (.adn-job-details > .adn-detail-fields,
one .adn-df--* per field). Models (section 8) and Attachments follow as
their own root bands.
7a. Frame   7b. Title   7c. Key facts   7d. Tabs   7e. Details form
7f. Responsive
========================================================================== */

/* 7a. Frame: bordered full-width page like the other screens */
.page__content:has(.job-status-color-source)
{
--jd-x: clamp(18px, 2.4vw, 32px);
background: var(--adn-canvas) !important;
margin: 0 7px !important;
border: 1px solid var(--adn-border);
border-top: 0;
min-height: calc(100vh - 65px);
}

.page__content:has(.job-status-color-source) > .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
}

.page__content:has(.job-status-color-source) > .element__wrapper > .element__inner-wrapper,
.job-status-color-source .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}

.job-status-color-source,
.job-status-color-source .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-color: transparent !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
}

/* 7b. Title band: left-aligned so long email subjects read naturally */
.adn-job-title
{
padding: clamp(32px, 5vh, 52px) var(--jd-x) clamp(20px, 3vh, 28px) !important;
text-align: left !important;
}

.adn-job-title::before
{
content: "JOB DETAIL";
display: block;
margin-bottom: 16px;
font: 500 12px/1.4 var(--adn-geist);
color: rgba(38, 38, 38, .72);
}

.adn-job-subject,
.adn-job-subject h1
{
max-width: 1180px;
margin: 0 !important;
padding: 0 !important;
font: 700 clamp(26px, 2.7vw, 40px)/1.05 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
text-align: left !important;
text-wrap: pretty;
overflow-wrap: anywhere;
color: var(--adn-ink) !important;
}

/* 7c. Key facts: an open row under the title (no boxes) — mono label
above each value, generous spacing, wraps on narrow screens */
.adn-job-facts
{
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 18px clamp(28px, 3.6vw, 56px);
padding: 0 var(--jd-x) clamp(26px, 3.6vh, 36px) !important;
border: 0 !important;
}

.adn-job-facts > .element__wrapper
{
width: auto !important;
min-width: 0;
max-width: 320px;
padding: 0 !important;
border: 0 !important;
}

.adn-fact
{
margin: 0 !important;
padding: 0 !important;
}

.adn-fact::before
{
display: block;
margin-bottom: 8px;
font: 500 11px/1.3 var(--adn-geist);
letter-spacing: 0;
text-transform: uppercase;
color: rgba(38, 38, 38, .72);
}

.adn-fact--status::before { content: "STATUS"; }
.adn-fact--client::before { content: "CLIENT"; }
.adn-fact--type::before { content: "JOB TYPE"; }
.adn-fact--priority::before { content: "PRIORITY"; }
.adn-fact--pic::before { content: "PIC"; }
.adn-fact--received::before { content: "RECEIVED"; }
.adn-fact--gmail::before { content: "EMAIL"; }

.adn-fact :is(p, span, a)
{
margin: 0 !important;
font: 500 15px/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
overflow-wrap: anywhere;
color: var(--adn-ink) !important;
}

.adn-fact--received :is(p, span)
{
font: 500 13px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
}

/* Status: a filled chip in the database colour, the same as the Job Listing
   status chip (21a), shown first in the row */
.adn-job-facts > .element__wrapper:has(.adn-fact--status),
.adn-job-facts > div > .element__wrapper:has(.adn-fact--status)
{
order: -1;
}

.job-status-badge.adn-fact--status
{
width: auto !important;
max-width: none;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}

.job-status-badge.adn-fact--status p
{
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
padding: 6px 10px;
font: 500 11px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

.job-status-badge.adn-fact--status p::before
{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--job-status-background, #f5f5f5);
filter: saturate(1.9) brightness(.93);
}

/* Gmail: mono action link; a dash when the job has no Gmail link */
.adn-fact--gmail a
{
display: inline-flex !important;
align-items: center;
gap: 6px;
font: 500 12px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
text-decoration: none !important;
color: var(--ov-green-text, #6e9a4b) !important;
}

.adn-fact--gmail a::after
{
content: "↗";
font-size: 14px;
}

.adn-fact--gmail a:hover
{
color: var(--adn-ink) !important;
}

.adn-fact--gmail a:is([href=""], :not([href]))
{
pointer-events: none;
font-size: 0 !important;
}

.adn-fact--gmail a:is([href=""], :not([href]))::after
{
content: "—";
font: 500 15px/1.3 var(--adn-grotesk);
color: var(--adn-disable);
}

/* 7d. Numbered tabs: five full-width cells, [01]–[05] counters,
charcoal hover + active (data-adn-detail-active is set by custom JS) */
.job-status-color-source .element__wrapper:has(> .element__inner-wrapper > .job-detail-tabs)
{
padding: 0 !important;
}

.job-detail-tabs
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 1px solid var(--adn-border) !important;
border-bottom: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: transparent !important;
}

.job-detail-tabs .menu-element__container
{
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0 !important;
align-items: stretch;
width: 100% !important;
overflow-x: auto;
scrollbar-width: none;
}

.job-detail-tabs .menu-element__container::-webkit-scrollbar { display: none; }

.job-detail-tabs .menu-element__menu-item-link
{
min-width: 0 !important;
border-right: 1px solid var(--adn-border);
}

.job-detail-tabs .menu-element__menu-item-link:last-child { border-right: 0; }

.job-detail-tabs a[href]
{
position: relative;
display: flex !important;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 10px !important;
width: 100% !important;
min-width: 0;
min-height: 64px !important;
box-sizing: border-box;
margin: 0 !important;
padding: 12px var(--jd-x, 18px) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--adn-text) !important;
font: 500 12px/1.4 var(--adn-geist) !important;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.job-detail-tabs a[href]::after { display: none !important; }

.job-detail-tabs a[href]::before
{
display: block;
font: 500 11px/1.3 var(--adn-geist);
color: var(--adn-muted);
}

.job-detail-tabs a[href*="tab=Details"]::before { content: "[01]"; }
.job-detail-tabs a[href*="tab=Models"]::before { content: "[02]"; }
.job-detail-tabs a[href*="tab=Attachments"]::before { content: "[03]"; }
.job-detail-tabs a[href*="tab=Quotation"]::before { content: "[04]"; }
.job-detail-tabs a[href*="tab=Invoice"]::before { content: "[05]"; }

.job-detail-tabs a[href]:hover,
.job-detail-tabs a[data-adn-detail-active="true"]
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.job-detail-tabs a[href]:hover::before,
.job-detail-tabs a[data-adn-detail-active="true"]::before
{
color: #deded6;
}

.job-detail-tabs a[href]:focus-visible
{
outline: 2px solid var(--adn-muted);
outline-offset: -4px;
}

/* 7e. Details form: Heron feature panel — intro on the left, ruled field
cells on the right, full-width SAVE CHANGES row. */
.job-status-color-source .element__wrapper:has(> .element__inner-wrapper > .adn-job-details)
{
padding: 0 !important;
}

.adn-job-details
{
display: grid !important;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}

/* Intro (left) spans the field rows; fields + save sit on the right */
.adn-job-details > div:first-child
{
display: contents !important;
}

.adn-job-details > div:first-child > .element__wrapper:has(.adn-job-intro)
{
grid-column: 1;
grid-row: 1 / span 2;
border-right: 1px solid var(--adn-border) !important;
}

.adn-job-details > div:first-child > .element__wrapper:has(.adn-detail-fields)
{
grid-column: 2;
grid-row: 1;
}

.adn-job-intro
{
padding: clamp(28px, 4vh, 40px) var(--jd-x) !important;
}


.adn-job-intro-title,
.adn-job-intro-title h2
{
margin: 0 !important;
padding: 0 !important;
font: 700 clamp(24px, 2.2vw, 32px)/1 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

.adn-job-intro-copy
{
margin-top: 14px !important;
}

.adn-job-intro-copy p
{
max-width: 340px;
margin: 0 !important;
font: 500 15px/1.35 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: rgba(38, 38, 38, .72) !important;
}

/* Six-column grid: Client | Status | Job Type, CI | Consignor | Consignee, Remarks */
.adn-detail-fields
{
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin: 0 !important;
padding: 0 !important;
}

.adn-detail-fields > .element__wrapper
{
min-width: 0;
border-bottom: 1px solid var(--adn-border) !important;
transition: background-color var(--adn-fade), box-shadow var(--adn-fade);
}

.adn-detail-fields > .element__wrapper { grid-column: span 2; }
.adn-detail-fields > .element__wrapper:has(.adn-df--remarks) { grid-column: 1 / -1; }

.adn-detail-fields > .element__wrapper:has(:is(.adn-df--status, .adn-df--type, .adn-df--consignor, .adn-df--consignee))
{
border-left: 1px solid var(--adn-border) !important;
}

.adn-detail-fields > .element__wrapper:hover
{
background: rgba(38, 38, 38, .025) !important;
}

.adn-detail-fields > .element__wrapper:focus-within
{
box-shadow: inset 0 -2px 0 var(--adn-accent);
}

.adn-df
{
box-sizing: border-box;
min-height: 92px;
margin: 0 !important;
padding: 16px var(--jd-x) 18px !important;
}

.adn-df .ab-form-group__label
{
margin: 0 0 10px !important;
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

.adn-df :is(.ab-input, .ab-dropdown__selected)
{
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background: transparent !important;
color: var(--adn-ink) !important;
font: 500 clamp(16px, 1.3vw, 19px)/1.3 var(--adn-grotesk) !important;
text-decoration: none !important;
}

.adn-df textarea.ab-input
{
min-height: 4.2em !important;
resize: vertical;
}

.adn-df .ab-input::placeholder,
.adn-df .ab-dropdown__selected-placeholder
{
color: var(--adn-disable) !important;
}

.adn-df .ab-dropdown__selected
{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.adn-df .ab-dropdown__toggle-icon
{
font-size: 14px !important;
color: var(--adn-muted) !important;
}

.adn-df .ab-dropdown__items
{
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
box-shadow: 0 18px 40px rgba(38, 38, 38, .10) !important;
}

.adn-df .ab-dropdownitem__item
{
border-radius: 0 !important;
font: 500 14px/1.4 var(--adn-grotesk) !important;
}

.adn-df .ab-dropdownitem__item:hover
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

/* Save row */
.adn-job-details > .form-container-element__submit-button
{
grid-column: 2;
grid-row: 2;
margin: 0 !important;
padding: 0 !important;
}

.adn-job-details > .form-container-element__submit-button button
{
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100% !important;
min-height: 76px;
margin: 0 !important;
padding: 0 64px 0 var(--jd-x) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--adn-ink) !important;
font: 600 clamp(18px, 1.6vw, 22px)/1 var(--adn-grotesk) !important;
letter-spacing: -.01em;
text-transform: uppercase;
transition: background-color var(--adn-fade);
}

.adn-job-details > .form-container-element__submit-button button :is(span, p)
{
font: inherit !important;
color: inherit !important;
}

.adn-job-details > .form-container-element__submit-button button::after
{
content: "→";
position: absolute;
right: 22px;
bottom: 16px;
font: 400 16px/1 var(--adn-geist);
transition: transform .2s ease;
}

.adn-job-details > .form-container-element__submit-button button:is(:hover, :focus-visible)
{
background: var(--adn-accent) !important;
outline: 0;
}

.adn-job-details > .form-container-element__submit-button button:hover::after
{
transform: translateX(4px);
}

/* Validation: red underline, messages kept for screen readers */
.adn-detail-fields > .element__wrapper:has([data-form-error="true"])
{
box-shadow: inset 0 -2px 0 #e44424 !important;
}

/* 7f. Responsive */
@media (max-width: 900px)
{
.adn-job-details
{
grid-template-columns: minmax(0, 1fr);
}

.adn-job-details > div:first-child > .element__wrapper:has(.adn-job-intro)
{
grid-row: auto;
border-right: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
}

.adn-job-details > div:first-child > .element__wrapper,
.adn-job-details > .form-container-element__submit-button
{
grid-column: 1 !important;
grid-row: auto !important;
}

.job-detail-tabs .menu-element__container
{
grid-template-columns: repeat(5, minmax(118px, 1fr));
}
}

@media (max-width: 560px)
{
.adn-detail-fields
{
grid-template-columns: minmax(0, 1fr);
}

.adn-detail-fields > .element__wrapper
{
grid-column: 1 / -1 !important;
border-left: 0 !important;
border-right: 0 !important;
}
}

/* ==========================================================================
8. JOB DETAIL PAGE: MODELS TAB
Selected-model panel (.job-model-info, shown when ?view_model is set) ->
"+ Add Model" action row (.job-add-model-action) -> models table
(.job-model-table). All full width inside the section 7 frame.
8a. Panel   8b. Action row   8c. Table   8d. Rows   8e. Responsive
========================================================================== */

/* Root bands on this page carry no native padding or card styling */
.page__content:has(.job-status-color-source) > .element__wrapper :is(.element__wrapper)
{
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
}

/* Models bands span the full frame (Baserow sets them to medium width) */
.page__content:has(.job-status-color-source) .element__wrapper:has(:is(.job-add-model-action, .job-model-table, .job-model-info))
{
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
}

.page__content:has(.job-status-color-source) .element__wrapper:has(:is(.job-add-model-action, .job-model-table, .job-model-info)) > .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}

/* 8a. Selected-model panel: label column + details, like the Details intro */
.page__content > .element__wrapper:has(.job-model-info)
{
--element-background-color: transparent !important;
--element-border-top: none !important;
--element-border-bottom: none !important;
--element-border-left: none !important;
--element-border-right: none !important;
}

.job-model-info
{
display: grid !important;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid var(--adn-border);
background: transparent !important;
}

.job-model-info::before
{
content: "SELECTED MODEL";
grid-column: 1;
grid-row: 1 / span 9;
padding: clamp(24px, 3.4vh, 34px) var(--jd-x, 24px);
border-right: 1px solid var(--adn-border);
font: 500 12px/1.4 var(--adn-geist);
letter-spacing: 0;
color: rgba(38, 38, 38, .72);
}

.job-model-info > .element__wrapper
{
grid-column: 2;
margin: 0 !important;
padding: 0 var(--jd-x, 24px) !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
}

.job-model-info > .element__wrapper:first-of-type
{
padding-top: clamp(24px, 3.4vh, 34px) !important;
}

.job-model-info > .element__wrapper:last-child
{
padding-bottom: clamp(24px, 3.4vh, 34px) !important;
}

.job-model-info .element__wrapper
{
border: 0 !important;
--element-border-top: none !important;
--element-border-bottom: none !important;
}

.job-model-info :is(p, h4)
{
margin: 0 !important;
font: 500 14px/1.5 var(--adn-grotesk) !important;
color: var(--adn-text) !important;
}

/* Model name */
.job-model-info .text-element[style*="32px"] p
{
font: 700 clamp(26px, 2.4vw, 34px)/1.05 var(--adn-grotesk) !important;
letter-spacing: -.02em;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

/* Certificate block */
.job-model-info .element:has(> .element__wrapper h4)
{
margin-top: 18px !important;
padding-top: 16px !important;
border-top: 1px dashed var(--adn-border);
}

.job-model-info h4
{
margin-bottom: 6px !important;
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

/* 8b. "+ Add Model" action row: empty cell + green action cell */
.element__wrapper:has(> .element__inner-wrapper > .job-add-model-action),
.element__wrapper:has(> .element__inner-wrapper > .job-model-table)
{
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
}

.job-add-model-action
{
display: grid !important;
grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
align-items: stretch !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
background: transparent;
}

.job-add-model-action::before
{
content: "[02] MODELS — ITEMS ON THIS JOB";
display: flex;
align-items: center;
min-height: 52px;
padding: 0 var(--jd-x, 24px);
border-right: 1px solid var(--adn-border);
font: 500 12px/1.4 var(--adn-geist);
color: rgba(38, 38, 38, .72);
}

.job-add-model-action :is(button, a)
{
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 52px !important;
margin: 0 !important;
padding: 0 var(--jd-x, 24px) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
transition: background-color var(--adn-fade);
}

.job-add-model-action :is(button, a) :is(span, p)
{
font: inherit !important;
color: inherit !important;
}

.job-add-model-action :is(button, a)::after
{
content: "↗";
margin-left: 16px;
font-size: 18px;
line-height: 1;
}

.job-add-model-action :is(button, a):hover
{
background: var(--adn-accent-hover) !important;
}

/* 8c. Models table: same type system as Job Listing */
.job-model-table,
.job-model-table :is(.ab-table__wrapper, .baserow-table-wrapper, .ab-table)
{
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}

.job-model-table .collection-element__header { margin-bottom: 0 !important; }

.job-model-table table
{
width: 100% !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border: 0 !important;
}

.job-model-table :is(th, td)
{
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
border-left: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
}

.job-model-table :is(th, td):first-child { border-left: 0 !important; }

.job-model-table .ab-table__cell-content
{
margin: 0 !important;
padding: 0 !important;
}

.job-model-table th
{
height: 44px;
padding: 0 var(--jd-x, 24px) !important;
}

.job-model-table th,
.job-model-table th *
{
font: 500 11px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

.job-model-table td
{
padding: 14px var(--jd-x, 24px) !important;
}

.job-model-table td,
.job-model-table td :is(p, span, div, a)
{
font: 500 14px/1.35 var(--adn-grotesk) !important;
color: var(--adn-text) !important;
--body-text-color: var(--adn-text) !important;
}

/* ID column in mono */
.job-model-table td:first-child :is(p, span, a)
{
font: 500 12px/1.4 var(--adn-geist) !important;
}

/* Application status chip: square, record colour */
.job-model-table .ab-tag
{
padding: 3px 7px !important;
border: 1px solid color-mix(in srgb, var(--tag-background-color, #f5f5f5) 70%, #262626) !important;
border-radius: 0 !important;
background: var(--tag-background-color, #f5f5f5) !important;
font: 500 11px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

/* 8d. Rows: click selects (custom JS follows the View link); Edit stays separate */
.job-model-table [data-adn-model-row] { cursor: pointer; }

.job-model-table [data-adn-model-row] td
{
transition: background-color var(--adn-fade);
}

.job-model-table [data-adn-model-row]:hover td { background: #edede6 !important; }
.job-model-table [data-adn-model-selected="true"] td { background: #e4e4dc !important; }

.job-model-table [data-adn-model-selected="true"] td:first-child
{
box-shadow: inset 3px 0 0 var(--adn-ink);
}

.job-model-table a[href*="view_model="]
{
font-weight: 500 !important;
color: var(--adn-ink) !important;
text-decoration: none !important;
}

.job-model-table a[href*="view_model="]:hover { text-decoration: underline !important; }

.job-model-table a[href*="edit_model="]
{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px !important;
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: transparent !important;
font: 500 11px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
text-decoration: none !important;
color: var(--adn-text) !important;
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.job-model-table a[href*="edit_model="]:hover
{
background: var(--adn-ink) !important;
border-color: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.job-add-model-action :is(button, a):focus-visible,
.job-model-table a:focus-visible
{
outline: 2px solid var(--adn-muted);
outline-offset: 3px;
}

/* Empty state */
.job-model-table .ab-table__empty-message,
.job-model-table td[colspan]
{
font: 500 12px/1.4 var(--adn-geist) !important;
text-transform: uppercase;
color: var(--adn-muted) !important;
}

/* 8e. Responsive */
@media (max-width: 900px)
{
.job-model-info
{
grid-template-columns: minmax(0, 1fr);
}

.job-model-info::before
{
grid-row: auto;
border-right: 0;
border-bottom: 1px solid var(--adn-border);
}

.job-model-info > .element__wrapper { grid-column: 1; }

.job-add-model-action
{
grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
}
}

/* ==========================================================================
9. ADD JOB PAGE (Heron-inspired)
Layout: centred title row, then one framed row:
[gutter | job form | artwork or client form | gutter].
Native fields, validation, submission and the add_client=1 visibility
toggle stay intact; this section only restyles them.
9a. Paper texture     9b. Frame + title     9c. Grid row
9d. Shared form grid  9e. Floating labels   9f. Dropdowns
9g. Job form cells    9h. Submit rows       9i. Artwork panel
9j. Client panel      9k. Validation        9l. Responsive
========================================================================== */

.page__content:has(.adn-job-art)
{
--adn-title-row: 76px;
--adn-field-row: 92px;
--adn-cell-x: 24px;
--adn-field-font: 500 clamp(17px, 1.45vw, 20px)/1.2 var(--adn-grotesk);
--adn-ease: cubic-bezier(.22, .61, .36, 1);
}

/* 9a. Paper grain over the whole page (sits above everything, never blocks clicks).
   Also used by the Overview page. */
body:has(.adn-job-art)::after,
body:has(.adn-overview-hero)::after
{
content: "";
position: fixed;
inset: 0;
z-index: 2147483000;
pointer-events: none;
mix-blend-mode: multiply;
opacity: .55;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .42 0 0 0 0 .38 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 9b. Page frame + centred title */
.page__content:has(.adn-job-art)
{
background: var(--adn-canvas) !important;
margin: 0 7px !important;
border: 1px solid var(--adn-border);
border-top: 0;
min-height: calc(100vh - 65px);
}

.page__content:has(.adn-job-art)::before
{
content: "ADD JOB";
display: block;
padding: clamp(36px, 4.5vw, 56px) 20px;
text-align: center;
font: 700 clamp(40px, 5vw, 72px)/.95 var(--adn-grotesk);
letter-spacing: -.03em;
color: var(--adn-ink);
border-bottom: 1px solid var(--adn-border);
}

/* 9c. Grid row: full-width bottom line, gutter lines from the column borders */
.page__content:has(.adn-job-art) > .element__wrapper
{
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
border-radius: 0 !important;
background: transparent !important;
}

.page__content:has(.adn-job-art) > .element__wrapper:has(.adn-job-art)
{
border-bottom: 1px solid var(--adn-border);
}

.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .column-element):has(.adn-job-art)
{
width: 80% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
--element-background-color: transparent !important;
--element-border-size: 0px !important;
--element-background-radius: 0px !important;
}

.page__content:has(.adn-job-art) .element__inner-wrapper:has(> .column-element):has(.adn-job-art)
{
width: 100% !important;
max-width: none !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art)
{
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
gap: 0 !important;
align-items: stretch !important;
border: 0;
border-left: 1px solid var(--adn-border);
border-right: 1px solid var(--adn-border);
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column
{
min-width: 0;
align-self: stretch;
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column:first-child
{
border-right: 1px solid var(--adn-border);
}

/* 9d. Shared form grid (job form + client form) */
/* Strip Baserow's white rounded form card */
.page__content:has(.adn-job-art) .column-element__column > .column-element__element > .element__wrapper:has(> .element__inner-wrapper > .element > .form-container-element__submit-button)
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-background-color: transparent !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
--element-border-size: 0px !important;
}

.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .element > .form-container-element__submit-button) > .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button)
{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0 !important;
background: transparent;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > div:first-child
{
display: contents !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > div:first-child > .element__wrapper
{
width: 100% !important;
max-width: none !important;
min-width: 0;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
justify-self: stretch !important;
border-bottom: 1px solid var(--adn-border);
background: transparent !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-background-color: transparent !important;
--element-background-radius: 0px !important;
transition: background-color var(--adn-fade), box-shadow var(--adn-fade);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > div:first-child > .element__wrapper > .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
height: 100%;
box-sizing: border-box !important;
}

/* Field cells: quiet hover tint, green underline while focused */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > div:first-child > .element__wrapper:has(.ab-form-group):hover
{
background: rgba(38, 38, 38, .025) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > div:first-child > .element__wrapper:has(.ab-form-group):focus-within
{
box-shadow: inset 0 -2px 0 var(--adn-accent);
}

/* 9e. Floating labels: big grey label rests in the empty field, shrinks to the
top on focus or once a value exists (Heron contact form pattern). */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group
{
position: relative !important;
box-sizing: border-box;
height: 100%;
min-height: var(--adn-field-row);
margin: 0 !important;
padding: 38px var(--adn-cell-x) 16px !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group__label
{
position: absolute !important;
top: 16px;
left: var(--adn-cell-x);
right: var(--adn-cell-x);
z-index: 1;
margin: 0 !important;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font: 600 11px/1.2 var(--adn-grotesk) !important;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--adn-muted) !important;
transition: top .24s var(--adn-ease), font-size .24s var(--adn-ease), color .24s var(--adn-ease);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group__label span
{
color: inherit !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:has(.ab-input:placeholder-shown):not(:focus-within) .ab-form-group__label,
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:has(.ab-dropdown__selected-placeholder):not(:focus-within) .ab-form-group__label
{
top: 36px;
font-size: clamp(17px, 1.45vw, 20px) !important;
letter-spacing: -.01em;
color: var(--adn-disable) !important;
}

/* Leave room for the dropdown chevron */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:has(.ab-dropdown) .ab-form-group__label
{
right: calc(var(--adn-cell-x) + 22px);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-input
{
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background: transparent !important;
color: var(--adn-ink) !important;
font: var(--adn-field-font) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-input::placeholder
{
color: var(--adn-disable);
opacity: 1;
transition: opacity .2s ease;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:not(:focus-within) .ab-input::placeholder
{
opacity: 0;
}

/* 9f. Dropdowns: same type as text values; the whole cell opens the list */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdown
{
position: static !important;
width: 100%;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdown__selected
{
position: static !important;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--adn-ink) !important;
font: var(--adn-field-font) !important;
text-decoration: none !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdown__selected::before
{
content: "";
position: absolute;
inset: 0;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdown__selected-placeholder
{
color: var(--adn-disable) !important;
transition: opacity .2s ease;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:not(:focus-within) .ab-dropdown__selected-placeholder
{
opacity: 0;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdown__toggle-icon
{
position: absolute;
top: 40px;
right: calc(var(--adn-cell-x) - 6px);
font-size: 14px !important;
color: var(--adn-muted) !important;
transition: transform .2s var(--adn-ease);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:focus-within .ab-dropdown__toggle-icon
{
transform: rotate(180deg);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdown__items
{
top: 100% !important;
left: -1px !important;
right: -1px !important;
width: auto !important;
margin: 0 !important;
z-index: 40;
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
box-shadow: 0 18px 40px rgba(38, 38, 38, .10) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdown__items :is(.select__search, .select__search-input)
{
border-radius: 0 !important;
background: transparent !important;
font: 500 13px/1.4 var(--adn-grotesk) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdownitem__item
{
border-radius: 0 !important;
font: 500 14px/1.4 var(--adn-grotesk) !important;
color: var(--adn-text) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdownitem__item-link
{
padding-left: var(--adn-cell-x) !important;
padding-right: var(--adn-cell-x) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdownitem__item:hover,
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdownitem__item.active
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

/* 9g. Job form cells. DOM order: 1 title, 2 subject, 3 client, 4 job type,
5 person in charge, 6 priority, 7 "+ New Client" link. */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(1)
{
grid-column: 1 / -1;
grid-row: 1;
display: flex;
align-items: center;
min-height: var(--adn-title-row);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(1) > .element__inner-wrapper
{
display: flex !important;
align-items: center;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(1) .heading-element
{
width: 100%;
margin: 0 !important;
padding: 0 !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) h1,
.page__content:has(.adn-job-art) .adn-job-art .element:has(> .form-container-element__submit-button)::before
{
margin: 0 !important;
padding: 0 var(--adn-cell-x) !important;
font: 600 clamp(20px, 2.1vw, 30px)/1 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
text-align: left !important;
color: var(--adn-ink) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(3) { grid-column: 2; grid-row: 3; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(4) { grid-column: 1; grid-row: 3; border-right: 1px solid var(--adn-border); }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(5) { grid-column: 1; grid-row: 4; border-right: 1px solid var(--adn-border); }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(6) { grid-column: 2; grid-row: 4; }

/* "+ New Client" sits in the top-right corner of the Client cell */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7)
{
grid-column: 2;
grid-row: 3;
align-self: start;
justify-self: end !important;
width: auto !important;
z-index: 2;
border: 0 !important;
background: transparent !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) a
{
display: inline-block;
padding: 10px var(--adn-cell-x) 8px 12px;
font: 500 10px/1.4 var(--adn-geist) !important;
font-style: normal !important;
text-transform: uppercase;
text-decoration: none !important;
color: var(--adn-accent-hover) !important;
transition: color var(--adn-fade);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) a::after
{
content: " →";
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) a:hover
{
color: var(--adn-ink) !important;
}

/* 9h. Submit rows: large quiet caps (Heron "SUBMIT"); ink once every field
is filled; green fill on hover. */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button
{
grid-column: 1 / -1;
margin: 0 !important;
padding: 0 !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button button
{
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100% !important;
min-height: var(--adn-title-row);
margin: 0 !important;
padding: 0 64px 0 var(--adn-cell-x) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--adn-disable) !important;
font: 600 clamp(18px, 1.6vw, 22px)/1 var(--adn-grotesk) !important;
letter-spacing: -.01em;
text-transform: uppercase;
text-align: left !important;
transition: background-color var(--adn-fade), color var(--adn-fade);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button button :is(span, p)
{
font: inherit !important;
color: inherit !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button button::after
{
content: "→";
position: absolute;
right: 20px;
bottom: 14px;
font: 400 16px/1 var(--adn-geist);
color: inherit;
transition: transform .2s var(--adn-ease);
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):not(:has(.ab-dropdown__selected-placeholder)):not(:has(.ab-input:placeholder-shown)) > .form-container-element__submit-button button
{
color: var(--adn-ink) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button button:is(:hover, :focus-visible)
{
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
outline: 0;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button button:hover::after
{
transform: translateX(4px);
}

/* 9i. Artwork panel (right column when add_client is not set) */
.page__content:has(.adn-job-art) .column-element__element:has(> .element__wrapper > .element__inner-wrapper > .adn-job-art)
{
flex: 1;
display: flex;
}

.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .adn-job-art)
{
position: relative;
flex: 1;
width: 100%;
display: flex;
min-height: 360px;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background-color: var(--adn-canvas) !important;
background-size: 100% auto !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-blend-mode: multiply;
}

.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .adn-job-art) > .element__inner-wrapper
{
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}

.page__content:has(.adn-job-art) .adn-job-art
{
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
}

/* Blueprint caption, artwork state only */
.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .adn-job-art):not(:has(.form-container-element__submit-button))::before
{
content: "ADN INTERNATIONAL SDN BHD";
position: absolute;
left: var(--adn-cell-x);
bottom: 16px;
font: 500 10px/1.4 var(--adn-geist);
letter-spacing: .02em;
color: var(--adn-muted);
}

/* 9j. Client panel (right column when add_client=1) */
.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .adn-job-art):has(.form-container-element__submit-button)
{
background-image: none !important;
--element-background-image: none !important;
overflow: hidden;
}

.page__content:has(.adn-job-art) .adn-job-art > .element__wrapper:has(.form-container-element__submit-button)
{
flex: 1;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-background-color: var(--adn-canvas) !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background-color: var(--adn-canvas) !important;
animation: adn-client-enter .42s var(--adn-ease) both;
}

.page__content:has(.adn-job-art) .adn-job-art > .element__wrapper:has(.form-container-element__submit-button) > .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
height: 100%;
}

.page__content:has(.adn-job-art) .adn-job-art .element:has(> .form-container-element__submit-button)
{
grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--adn-title-row) repeat(3, minmax(var(--adn-field-row), auto)) auto;
height: 100%;
background: var(--adn-canvas);
}

.page__content:has(.adn-job-art) .adn-job-art .element:has(> .form-container-element__submit-button)::before
{
content: "NEW CLIENT DETAILS";
display: flex;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid var(--adn-border);
}

@keyframes adn-client-enter
{
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce)
{
.page__content:has(.adn-job-art) .adn-job-art > .element__wrapper:has(.form-container-element__submit-button) { animation: none !important; }
.page__content:has(.adn-job-art) .ab-form-group__label { transition: none !important; }
}

/* 9k. Validation: messages stay for screen readers; the cell gets a red underline */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > div:first-child > .element__wrapper:has([data-form-error="true"])
{
box-shadow: inset 0 -2px 0 #e44424 !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) :is(.ab-form-group__error-message, .control--error > .control__messages)
{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}

/* 9l. Responsive */
@media (max-width: 800px)
{
.page__content:has(.adn-job-art)
{
--adn-cell-x: 18px;
}

.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .column-element):has(.adn-job-art)
{
width: 100% !important;
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art)
{
grid-template-columns: minmax(0, 1fr) !important;
border-left: 0;
border-right: 0;
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column:first-child
{
border-right: 0;
border-bottom: 1px solid var(--adn-border);
}

.page__content:has(.adn-job-art)::before
{
padding: 32px 16px;
}
}

@media (max-width: 520px)
{
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper
{
grid-column: 1 / -1 !important;
grid-row: auto !important;
border-right: 0 !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7)
{
justify-self: stretch !important;
width: 100% !important;
text-align: right;
border-bottom: 1px solid var(--adn-border) !important;
}
}

/* ==========================================================================
10. MODALS: EDIT MODEL / CREATE MODEL — Heron chat-widget style
Square panel, charcoal title bar (the form's first heading), ruled fields,
full-width green save row. Both share one layout; only the width differs.
10a. Backdrop + shell   10b. Title bar   10c. Fields   10d. Actions
10e. Create-only        10f. Mobile
========================================================================== */

/* 10a. Backdrop + shell */
.adn-model-backdrop
{
position: fixed;
inset: 0;
z-index: 90;
background: rgba(38, 38, 38, .38);
}

.job-edit-model-modal[data-adn-modal-open],
.job-create-model-modal[data-adn-create-open]
{
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 100 !important;
width: min(var(--adn-modal-width), calc(100vw - 32px)) !important;
max-width: var(--adn-modal-width) !important;
max-height: calc(100dvh - 48px);
overflow: auto;
overscroll-behavior: contain;
box-sizing: border-box;
margin: 0 !important;
padding: 0 0 20px !important;
border: 1px solid var(--adn-ink) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
box-shadow: 0 24px 60px rgba(38, 38, 38, .22);
}

.job-edit-model-modal[data-adn-modal-open] { --adn-modal-width: 680px; }
.job-create-model-modal[data-adn-create-open] { --adn-modal-width: 760px; }

.job-edit-model-modal[data-adn-modal-open] .element__wrapper,
.job-create-model-modal[data-adn-create-open] .element__wrapper
{
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
}

/* 10b. Title bar: the first heading becomes a charcoal strip */
:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) > div:first-child > .element__wrapper:first-child
{
margin: 0 0 4px !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
background: var(--adn-ink) !important;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) h1
{
margin: 0 !important;
padding: 14px 56px 14px 24px !important;
font: 500 13px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
color: var(--adn-canvas) !important;
}

/* Sub-line under the bar (#61 · model) */
:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) > div:first-child > .element__wrapper:nth-child(2)
{
padding: 12px 24px 16px !important;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) > div:first-child > .element__wrapper:nth-child(2) p
{
font: 600 clamp(18px, 1.6vw, 22px)/1.2 var(--adn-grotesk) !important;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

/* Close (×) sits on the title bar */
.adn-model-close
{
position: absolute;
right: 8px;
top: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--adn-canvas);
font-size: 24px;
line-height: 1;
cursor: pointer;
}

.adn-model-close:hover
{
background: var(--adn-canvas);
color: var(--adn-ink);
}

/* 10c. Fields: square inputs, mono labels */
:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) .ab-form-group__label
{
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) :is(.ab-input, .ab-dropdown__selected)
{
min-height: 42px;
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-canvas) !important;
color: var(--adn-ink) !important;
font: 500 15px/1.3 var(--adn-grotesk) !important;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) :is(.ab-input, .ab-dropdown__selected):focus
{
border-color: var(--adn-ink) !important;
outline: 0 !important;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) .ab-dropdown__items
{
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
}

/* 10d. Actions: green full-width save row + quiet mono cancel */
:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) .form-container-element__submit-button
{
margin: 20px 24px 0 !important;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) .form-container-element__submit-button button
{
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100% !important;
min-height: 52px;
padding: 0 56px 0 20px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
font: 500 13px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) .form-container-element__submit-button button :is(span, p)
{
font: inherit !important;
color: inherit !important;
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) .form-container-element__submit-button button::after
{
content: "→";
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 18px/1 var(--adn-geist);
}

:is(.job-edit-model-modal[data-adn-modal-open], .job-create-model-modal[data-adn-create-open]) .form-container-element__submit-button button:hover
{
background: var(--adn-accent-hover) !important;
}

.adn-model-cancel
{
display: block;
margin: 12px auto 0;
padding: 8px 18px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--adn-muted);
font: 500 12px/1.3 var(--adn-geist);
text-transform: uppercase;
cursor: pointer;
}

.adn-model-cancel:hover
{
color: var(--adn-ink);
text-decoration: underline;
}

.adn-model-close:focus-visible,
.adn-model-cancel:focus-visible
{
outline: 2px solid var(--adn-muted);
outline-offset: 2px;
}

/* 10e. Create-only: hide the page's own cancel button inside the popup */
.job-create-model-modal[data-adn-create-open] .job-create-model-cancel { display: none !important; }

/* 10f. Mobile */
@media (max-width: 640px)
{
.job-edit-model-modal[data-adn-modal-open],
.job-create-model-modal[data-adn-create-open]
{
max-height: calc(100dvh - 24px);
}
}

/* ==========================================================================
11. JOB DETAIL PAGE: ATTACHMENTS TAB — Heron accordion
One ruled row per document category: [01] number, category name, file
chips, and an action cell. "Add file" opens the row (?attach=row id) and
reveals a dashed drop zone + green UPLOAD bar; the action cell turns into
a charcoal "Close" cell.
11a. Reset   11b. Intro row   11c. Rows   11d. Files   11e. Action cell
11f. Open row + upload   11g. Responsive
========================================================================== */
/* 11a. Reset: no native padding, borders or cards anywhere in the tab */
.page__content .element__wrapper:has(> .element__inner-wrapper > .adn-attach),
.adn-attach .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-border-top: none !important;
--element-border-bottom: none !important;
--element-border-left: none !important;
--element-border-right: none !important;
--element-background-color: transparent !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
}
.adn-attach .element__inner-wrapper,
.page__content .element__wrapper:has(> .element__inner-wrapper > .adn-attach) > .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}
.adn-attach-list > .collection-element__header { display: none !important; }
.adn-attach :is(.repeat-element__repeated-elements, .repeat-element__repeated-element)
{
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 11b. Intro row: mono label left, hint right (matches the Models row) */
.adn-attach-title
{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 52px;
padding: 0 var(--jd-x, 24px);
border-bottom: 1px solid var(--adn-border);
}
.adn-attach-title h1
{
margin: 0 !important;
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}
.adn-attach-title h1::before { content: "[03] "; }
.adn-attach-title::after
{
content: "One row per document type";
font: 500 11px/1.4 var(--adn-geist);
text-transform: uppercase;
color: var(--adn-muted);
}
/* 11c. Rows: number | category | files | action */
.adn-attach-list .repeat-element__repeated-elements { counter-reset: adn-attach; }
.adn-attach .column-element.adn-attach-row
{
display: grid !important;
grid-template-columns: minmax(170px, 1.25fr) minmax(0, 3fr) minmax(130px, .8fr);
align-items: stretch;
gap: 0 !important;
min-height: 68px;
border-bottom: 1px solid var(--adn-border);
counter-increment: adn-attach;
transition: background-color var(--adn-fade);
}
.adn-attach-row:hover { background: #f1f1ea; }
.adn-attach-row > .column-element__column,
.adn-attach-row > .column-element__column > .column-element__element
{
display: contents !important;
}
.adn-attach-row::before
{
content: none;
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
padding-left: var(--jd-x, 24px);
font: 500 12px/1 var(--adn-geist);
color: var(--adn-muted);
}
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-cat)
{
grid-column: 1;
grid-row: 1;
display: flex !important;
align-items: center;
padding: 16px 20px 16px var(--jd-x, 24px) !important;
}
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-cat) > .element__inner-wrapper
{
flex: 1;
min-width: 0;
}
.adn-attach-cat p
{
margin: 0 !important;
font: 600 17px/1.2 var(--adn-grotesk) !important;
letter-spacing: -.01em;
text-align: left !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}
/* 11d. Files: square mono chips, opens in a new tab */
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-files)
{
grid-column: 2;
grid-row: 1;
display: flex !important;
align-items: center;
padding: 14px 20px !important;
border-left: 1px solid var(--adn-border) !important;
}
.adn-attach-files .repeat-element__repeated-elements
{
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
gap: 8px !important;
}
.adn-attach-files .repeat-element__repeated-element { width: auto !important; }
.adn-attach-file a
{
display: inline-flex !important;
align-items: center;
gap: 10px;
max-width: 320px;
min-height: 32px;
padding: 6px 10px !important;
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-canvas) !important;
color: var(--adn-ink) !important;
font: 500 12px/1.2 var(--adn-geist) !important;
text-decoration: none !important;
transition: background-color var(--adn-fade), color var(--adn-fade), border-color var(--adn-fade);
}
.adn-attach-file a :is(span, p)
{
overflow: hidden;
font: inherit !important;
color: inherit !important;
text-overflow: ellipsis;
white-space: nowrap;
}
.adn-attach-file a::after
{
content: "↗";
flex: none;
font-size: 13px;
}
.adn-attach-file a:hover
{
border-color: var(--adn-ink) !important;
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}
/* Empty category */
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-files):not(:has(.adn-attach-file a))::before
{
content: "No files yet";
font: 500 11px/1.4 var(--adn-geist);
text-transform: uppercase;
flex: none;
white-space: nowrap;
color: var(--adn-disable, #b4b4b0);
}
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-files) > .element__inner-wrapper
{
flex: 1;
min-width: 0;
}
.adn-attach-files :is(.repeat-element__empty, .collection-element__empty) { display: none !important; }
/* 11e. Action cell: "Add file +" / charcoal "Close ×" */
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > :is(.adn-attach-add, .adn-attach-close))
{
grid-column: 3;
grid-row: 1;
display: flex !important;
border-left: 1px solid var(--adn-border) !important;
}
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > :is(.adn-attach-add, .adn-attach-close)) > .element__inner-wrapper,
.adn-attach-add,
.adn-attach-close
{
display: flex !important;
flex: 1;
flex-direction: row !important;
align-items: stretch !important;
}
.adn-attach-add a,
.adn-attach-close a
{
display: flex !important;
flex: 1;
align-self: stretch !important; /* fill the full row height (Baserow aligns links to the bottom) */
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 68px;
padding: 0 var(--jd-x, 24px) !important;
font: 500 12px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
color: var(--adn-ink) !important;
transition: background-color var(--adn-fade), color var(--adn-fade);
}
.adn-attach-add a::after { content: "+"; font: 400 20px/1 var(--adn-geist); }
.adn-attach-close a::after { content: "×"; font: 400 22px/1 var(--adn-geist); }
.adn-attach-add a:hover { background: var(--adn-accent) !important; }
.adn-attach-close a
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}
.adn-attach-close a:hover { background: #3a3a3a !important; }
.adn-attach :is(a, button):focus-visible
{
outline: 2px solid var(--adn-muted);
outline-offset: -3px;
}
/* 11f. Open row: tinted, upload area spans the full row */
.adn-attach-row:has(.adn-attach-upload) { background: #edede6; }
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-upload)
{
grid-column: 1 / -1;
grid-row: 2;
padding: 4px var(--jd-x, 24px) 24px !important;
}
.adn-attach-form .ab-form-group__label,
.adn-attach-form label:not(.ab-file-input)
{
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}
.adn-attach-form .ab-file-input
{
min-height: 112px;
border: 1px dashed var(--adn-ink) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
color: var(--adn-text) !important;
font: 500 12px/1.4 var(--adn-geist) !important;
text-transform: uppercase;
transition: background-color var(--adn-fade);
}
.adn-attach-form .ab-file-input:hover { background: #f1f1ea !important; }
.adn-attach-form .ab-file-input :is(*:not(input))
{
border-radius: 0 !important;
font-family: var(--adn-geist) !important;
}
.adn-attach-form .form-container-element__submit-button { margin: 12px 0 0 !important; }
.adn-attach-form .form-container-element__submit-button button
{
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100% !important;
min-height: 52px;
padding: 0 64px 0 20px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
font: 500 13px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
}
.adn-attach-form .form-container-element__submit-button button :is(span, p)
{
font: inherit !important;
color: inherit !important;
}
.adn-attach-form .form-container-element__submit-button button::after
{
content: "→";
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 18px/1 var(--adn-geist);
}
.adn-attach-form .form-container-element__submit-button button:hover
{
background: var(--adn-accent-hover) !important;
}
/* 11g. Responsive: number + name + action on top, files below */
@media (max-width: 760px)
{
.adn-attach-title::after { display: none; }
.adn-attach .column-element.adn-attach-row
{
grid-template-columns: minmax(0, 1fr) auto;
}
.adn-attach-row::before { padding-left: 16px; }
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-files)
{
grid-column: 1 / -1;
grid-row: 2;
padding: 0 var(--jd-x, 18px) 16px !important;
border-left: 0 !important;
}
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > :is(.adn-attach-add, .adn-attach-close))
{
grid-column: 2;
}
.adn-attach-add a,
.adn-attach-close a
{
min-height: 56px;
padding: 0 16px !important;
}
.adn-attach-row .element__wrapper:has(> .element__inner-wrapper > .adn-attach-upload)
{
grid-row: 3;
padding: 4px var(--jd-x, 18px) 20px !important;
}
}

/* ==========================================================================
12. ADD MODEL PAGE (/add-model/:job_id) — same frame as Job Detail
Header band (.adn-am-head: subject + open facts row) -> feature panel
(.adn-am-panel): intro on the left (.adn-am-intro, back link), ruled form
on the right (.adn-am-form, fields .adn-amf-*), green ADD MODEL bar.
The Create New Model popup (.job-create-model-modal, section 10) gets its
charcoal title bar and flat ruled sections here (.adn-cm-*).
12a. Frame   12b. Header   12c. Panel + intro   12d. Form fields
12e. Save bar   12f. Create New Model popup   12g. Responsive
========================================================================== */
/* 12a. Frame: bordered full-width page, no native cards */
.page__content:has(.adn-am-panel)
{
--jd-x: clamp(18px, 2.4vw, 32px);
background: var(--adn-canvas) !important;
margin: 0 7px !important;
border: 1px solid var(--adn-border);
border-top: 0;
min-height: calc(100vh - 65px);
}
.page__content:has(.adn-am-panel) > .element__wrapper,
:is(.adn-am-head, .adn-am-panel) .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-border-top: none !important;
--element-border-bottom: none !important;
--element-border-left: none !important;
--element-border-right: none !important;
--element-background-color: transparent !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
}
.page__content:has(.adn-am-panel) > .element__wrapper > .element__inner-wrapper,
:is(.adn-am-head, .adn-am-panel) .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}
:is(.adn-am-head, .adn-am-panel)
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* 12b. Header: eyebrow, left-aligned subject, open facts row */
.adn-am-head
{
padding: clamp(32px, 5vh, 52px) var(--jd-x) clamp(26px, 3.6vh, 36px) !important;
border-bottom: 1px solid var(--adn-border) !important;
text-align: left !important;
}
.adn-am-head::before
{
content: "ADD MODEL";
display: block;
margin-bottom: 16px;
font: 500 12px/1.4 var(--adn-geist);
color: rgba(38, 38, 38, .72);
}
.adn-am-subject,
.adn-am-subject :is(h1, h2, h3)
{
max-width: 1180px;
margin: 0 !important;
padding: 0 !important;
font: 700 clamp(26px, 2.7vw, 40px)/1.05 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
text-align: left !important;
text-wrap: pretty;
overflow-wrap: anywhere;
color: var(--adn-ink) !important;
}
.adn-am-head .element__wrapper:has(> .element__inner-wrapper > .adn-am-facts)
{
margin-top: 20px !important;
}
.adn-am-facts
{
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 18px clamp(28px, 3.6vw, 56px) !important;
}
.adn-am-facts > .column-element__column,
.adn-am-facts > .column-element__column > .column-element__element
{
display: contents !important;
}
.adn-am-facts .element__wrapper
{
width: auto !important;
max-width: 420px !important;
}
.adn-am-meta.adn-fact--client::before { content: "CLIENT · JOB TYPE"; }
/* 12c. Panel: intro on the left, form on the right */
.adn-am-panel
{
display: grid !important;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
align-items: stretch;
border-bottom: 1px solid var(--adn-border) !important;
}
.adn-am-panel > .element__wrapper:has(> .element__inner-wrapper > .adn-am-intro)
{
grid-column: 1;
grid-row: 1;
}
.adn-am-panel > .element__wrapper:has(> .element__inner-wrapper > .adn-am-form)
{
grid-column: 2;
grid-row: 1;
border-left: 1px solid var(--adn-border) !important;
}
.adn-am-intro
{
padding: clamp(28px, 4vh, 40px) var(--jd-x) !important;
}
.adn-am-intro::before
{
content: "[02] MODELS";
display: block;
margin-bottom: 18px;
font: 500 12px/1.4 var(--adn-geist);
color: var(--ov-green-text, #6e9a4b);
}
/* Heading and back link stack instead of sitting side by side */
.adn-am-intro .column-element
{
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 0 !important;
}
.adn-am-intro .column-element__column
{
width: 100% !important;
max-width: none !important;
flex: none !important;
}
.adn-am-title,
.adn-am-title :is(h1, h2, h3)
{
margin: 0 !important;
padding: 0 !important;
font: 700 clamp(24px, 2.2vw, 32px)/1 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-align: left !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}
.adn-am-title::after
{
content: "Type the model name, then add its invoice and shipping details. The new item appears on the job's Models tab.";
display: block;
max-width: 340px;
margin-top: 14px;
font: 500 15px/1.35 var(--adn-grotesk);
letter-spacing: -.01em;
text-transform: none;
color: rgba(38, 38, 38, .72);
}
.adn-am-back
{
flex-direction: row !important;
justify-content: flex-start !important;
align-items: flex-start !important;
margin-top: 28px !important;
}
.adn-am-back button
{
display: inline-flex !important;
align-items: center;
gap: 10px;
width: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 4px !important;
border: 0 !important;
border-bottom: 1px solid currentColor !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--adn-text) !important;
font: 500 12px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
transition: color var(--adn-fade);
}
.adn-am-back button::before { content: "←"; font-size: 14px; }
.adn-am-back button :is(span, p)
{
font: inherit !important;
color: inherit !important;
}
.adn-am-back button:hover { color: var(--adn-ink) !important; }
/* 12d. Form: two-column ruled cells
   Model (full width) | Invoice, Country of Origin | Quantity, Value */
.adn-am-form
{
margin: 0 !important;
padding: 0 !important;
}
.adn-am-form > div:first-child
{
position: relative;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.adn-am-form > div:first-child > .element__wrapper:has(> .element__inner-wrapper > .adn-am-cols),
.adn-am-form > div:first-child > .element__wrapper:has(> .element__inner-wrapper > .adn-am-cols) > .element__inner-wrapper,
.adn-am-cols,
.adn-am-cols > .column-element__column,
.adn-am-cols > .column-element__column > .column-element__element
{
display: contents !important;
}
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > :is(.adn-amf-model, .adn-amf-invoice, .adn-amf-origin, .adn-amf-qty, .adn-amf-value))
{
min-width: 0;
border-bottom: 1px solid var(--adn-border) !important;
transition: background-color var(--adn-fade), box-shadow var(--adn-fade);
}
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > .adn-amf-model)   { grid-column: 1 / -1; order: 1; }
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > .adn-amf-invoice) { grid-column: 1; order: 2; }
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > .adn-amf-origin)  { grid-column: 2; order: 3; border-left: 1px solid var(--adn-border) !important; }
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > .adn-amf-qty)     { grid-column: 1; order: 4; }
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > .adn-amf-value)   { grid-column: 2; order: 5; border-left: 1px solid var(--adn-border) !important; }
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > :is(.adn-amf-model, .adn-amf-invoice, .adn-amf-origin, .adn-amf-qty, .adn-amf-value)):hover
{
background: rgba(38, 38, 38, .025) !important;
}
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > :is(.adn-amf-model, .adn-amf-invoice, .adn-amf-origin, .adn-amf-qty, .adn-amf-value)):focus-within
{
box-shadow: inset 0 -2px 0 var(--adn-accent);
}
.adn-am-form :is(.adn-amf-model, .adn-amf-invoice, .adn-amf-origin, .adn-amf-qty, .adn-amf-value)
{
box-sizing: border-box;
min-height: 92px;
margin: 0 !important;
padding: 16px var(--jd-x) 18px !important;
}
.adn-am-form .ab-form-group__label
{
margin: 0 0 10px !important;
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}
.adn-am-form :is(.ab-input, .ab-dropdown__selected)
{
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background: transparent !important;
color: var(--adn-ink) !important;
font: 500 clamp(16px, 1.3vw, 19px)/1.3 var(--adn-grotesk) !important;
}
.adn-am-form .ab-input::placeholder,
.adn-am-form .ab-dropdown__selected-placeholder
{
color: var(--adn-disable) !important;
}
.adn-am-form .ab-dropdown__selected
{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.adn-am-form .ab-dropdown__toggle-icon
{
font-size: 14px !important;
color: var(--adn-muted) !important;
}
.adn-am-form .ab-dropdown__items
{
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
box-shadow: 0 18px 40px rgba(38, 38, 38, .10) !important;
}
.adn-am-form .ab-dropdownitem__item
{
border-radius: 0 !important;
font: 500 14px/1.4 var(--adn-grotesk) !important;
}
.adn-am-form .ab-dropdownitem__item:hover
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}
.adn-am-form .element__wrapper:has([data-form-error="true"])
{
box-shadow: inset 0 -2px 0 #e44424 !important;
}
/* "+ New model" sits in the Model cell, top-right beside its label */
/* 12e. Save bar: green, full width, arrow cell (matches the popups) */
.adn-am-form > .form-container-element__submit-button
{
margin: 0 !important;
padding: 0 !important;
}
.adn-am-form > .form-container-element__submit-button button
{
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100% !important;
min-height: 64px;
margin: 0 !important;
padding: 0 76px 0 var(--jd-x) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
font: 500 13px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
transition: background-color var(--adn-fade);
}
.adn-am-form > .form-container-element__submit-button button :is(span, p)
{
font: inherit !important;
color: inherit !important;
}
.adn-am-form > .form-container-element__submit-button button::after
{
content: "→";
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 18px/1 var(--adn-geist);
}
.adn-am-form > .form-container-element__submit-button button:is(:hover, :focus-visible)
{
background: var(--adn-accent-hover) !important;
outline: 0;
}
.adn-am-back button:focus-visible
{
outline: 2px solid var(--adn-muted);
outline-offset: 3px;
}
/* 12f. Create New Model popup: charcoal title bar + flat ruled sections */
.job-create-model-modal[data-adn-create-open] .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-sechead :is(h1, h2, h3, h4)
{
text-align: left !important;
}
.job-create-model-modal[data-adn-create-open] .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;

--element-background-color: transparent !important;
--element-border-top: none !important;
--element-border-bottom: none !important;
--element-border-left: none !important;
--element-border-right: none !important;
background: transparent !important;
}
.job-create-model-modal[data-adn-create-open] > .element__wrapper:has(> .element__inner-wrapper > .adn-cm-titlebar)
{
margin: 0 0 4px !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
background: var(--adn-ink) !important;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-title :is(h1, h2, h3)
{
margin: 0 !important;
padding: 14px 56px 14px 24px !important;
font: 500 13px/1.3 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-align: left !important;
text-transform: uppercase;
color: var(--adn-canvas) !important;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-form
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-sec
{
display: flex !important;
flex-direction: column;
margin: 0 !important;
padding: 18px 24px 8px !important;
border: 0 !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
background: transparent !important;
box-shadow: none !important;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-sec > .element__wrapper:has(> .element__inner-wrapper > .adn-cm-sechead)
{
order: -1;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-sec-inner
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-sechead :is(h1, h2, h3, h4)
{
margin: 0 0 6px !important;
padding: 0 !important;
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
color: var(--ov-green-text, #6e9a4b) !important;
}
.job-create-model-modal[data-adn-create-open] .adn-cm-form > .form-container-element__submit-button
{
margin: 20px 24px 0 !important;
}
.job-create-model-modal[data-adn-create-open] .ab-file-input
{
border: 1px dashed var(--adn-ink) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
font: 500 12px/1.4 var(--adn-geist) !important;
text-transform: uppercase;
}
/* 12g. Responsive */
@media (max-width: 900px)
{
.adn-am-panel
{
grid-template-columns: minmax(0, 1fr);
}
.adn-am-panel > .element__wrapper:has(> .element__inner-wrapper > .adn-am-form)
{
grid-column: 1;
grid-row: 2;
border-left: 0 !important;
border-top: 1px solid var(--adn-border) !important;
}
}
@media (max-width: 560px)
{
.adn-am-form > div:first-child
{
grid-template-columns: minmax(0, 1fr);
}
.adn-am-form .element__wrapper:has(> .element__inner-wrapper > :is(.adn-amf-model, .adn-amf-invoice, .adn-amf-origin, .adn-amf-qty, .adn-amf-value))
{
grid-column: 1 !important;
border-left: 0 !important;
}
}

/* ==========================================================================
   13. JOB DETAIL TABS: HOVER
   Hovering a tab that is not the open one keeps the background, the [0x]
   number and the size as they are; only the label and number turn green. The open
   (black) tab is unchanged. Not applied while the block is sliding to a
   newly clicked tab.
   ========================================================================== */
.job-detail-tabs:not([data-adn-sliding]) a[href]:not([data-adn-detail-active="true"]):hover
{
background: transparent !important;
color: var(--jd-hover-text, #6e9a4b) !important;
}

.job-detail-tabs:not([data-adn-sliding]) a[href]:not([data-adn-detail-active="true"]):hover::before
{
color: var(--jd-hover-text, #6e9a4b) !important;
}

/* ==========================================================================
   14. JOB DETAIL "DETAILS" FORM: DROPDOWNS
   Same dropdown as the Add Job form: the whole cell opens it, the arrow
   flips, and the list drops straight below the cell at the cell's full width,
   square, flat border, soft shadow, rows lined up with the cell padding and
   turning charcoal on hover / for the current choice.
   ========================================================================== */
.adn-detail-fields .ab-form-group:has(.ab-dropdown)
{
position: relative !important;
}

.adn-detail-fields .ab-dropdown,
.adn-detail-fields .ab-dropdown__selected
{
position: static !important;
}

.adn-detail-fields .ab-dropdown__selected::before
{
content: "";
position: absolute;
inset: 0;
}

.adn-detail-fields .ab-dropdown__toggle-icon
{
transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}

.adn-detail-fields .ab-form-group:focus-within .ab-dropdown__toggle-icon
{
transform: rotate(180deg);
}

.adn-detail-fields .ab-dropdown__items
{
position: absolute !important;
top: 100% !important;
left: -1px !important;
right: -1px !important;
width: auto !important;
margin: 0 !important;
z-index: 40;
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: var(--adn-canvas) !important;
box-shadow: 0 18px 40px rgba(38, 38, 38, .10) !important;
}

.adn-detail-fields .ab-dropdown__items :is(.select__search, .select__search-input)
{
border-radius: 0 !important;
background: transparent !important;
font: 500 13px/1.4 var(--adn-grotesk) !important;
}

.adn-detail-fields .ab-dropdownitem__item
{
border-radius: 0 !important;
font: 500 14px/1.4 var(--adn-grotesk) !important;
color: var(--adn-text) !important;
}

.adn-detail-fields .ab-dropdownitem__item-link
{
padding-left: var(--jd-x, 24px) !important;
padding-right: var(--jd-x, 24px) !important;
}

.adn-detail-fields .ab-dropdownitem__item:hover,
.adn-detail-fields .ab-dropdownitem__item.active
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.adn-detail-fields .ab-dropdownitem__item:is(:hover, .active) *
{
color: var(--adn-canvas) !important;
}

/* ==========================================================================
   15. ATTACHMENTS: FILE NAME CHIPS FIT THEIR NAME
   The chip grows to the width of its file name (it was capped at 320px, so
   long names ran out of the box). It never gets wider than its cell; a name
   longer than that wraps onto a second line inside the box, with the arrow
   kept on the right.
   ========================================================================== */
.adn-attach-file a
{
width: fit-content !important;
max-width: 100% !important;
height: auto !important;
white-space: normal !important;
overflow-wrap: anywhere;
text-align: left;
}

.adn-attach-file a > *
{
min-width: 0;
}

.adn-attach-file a::before,
.adn-attach-file a::after
{
flex-shrink: 0;
}

/* ==========================================================================
   16. ADD JOB: DROPDOWN OPTION TEXT ON HOVER
   The option row turned charcoal on hover / for the current choice, but its
   text kept its own dark colour (Baserow colours the inner name and tick
   separately), so it disappeared into the row. The text and tick now turn
   light with the row. Covers the Add Job form and the Add client panel.
   ========================================================================== */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-dropdownitem__item:is(:hover, .active) *,
.adn-df .ab-dropdownitem__item:is(:hover, .active) *
{
color: var(--adn-canvas) !important;
}

/* ==========================================================================
   17. JOB DETAIL: FACTS ROW UNDER THE TITLE
   Client and Job type are not repeated under the title (they are edited in
   the Details tab), and Status stays as a chip in its database colour
   (see 7c). Status, Priority, PIC, Received and Email stay. The
   small "JOB DETAIL" line above the title is hidden as well.
   ========================================================================== */
.adn-job-facts > .element__wrapper:has(:is(.adn-fact--client, .adn-fact--type))
{
display: none !important;
}

.adn-job-title::before
{
display: none !important;
}

/* ==========================================================================
   18. OVERVIEW: COMPANY + RESOURCES BAND (Heron-style footer grid)
   Under "Today's incoming jobs". Three columns that line up with the bands
   above: SIRIM and MITI links on row 1, DagangNet links and the address
   (+ Directions) on row 2, and the logo line art (JS block "ADN Overview
   logo art") in the right column across both rows. Resource links
   open in a new tab, carry a small ↗ and turn green on hover. All content is
   ordinary builder elements, so the text, address and links are edited in
   the builder (page "main", container .adn-overview-footer).
   ========================================================================== */
.adn-overview-footer .element__wrapper
{
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
}

.adn-overview-footer .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}

.adn-overview-footer
{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}

/* grid lines between the cells */
.adn-overview-footer > .element__wrapper + .element__wrapper
{
border-left: 1px solid var(--adn-border);
}

/* row 1: SIRIM | MITI | logo art (both rows); row 2: DagangNet | address.
   Columns stay in thirds so the lines continue from the bands above. */
.adn-overview-footer > .element__wrapper:nth-child(1) { grid-column: 1; grid-row: 1; }
.adn-overview-footer > .element__wrapper:nth-child(2) { grid-column: 2; grid-row: 1; }
.adn-overview-footer > .element__wrapper:nth-child(3) { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--adn-border); }
.adn-overview-footer > .element__wrapper:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
.adn-overview-footer > .element__wrapper:nth-child(5) { grid-column: 2; grid-row: 2; border-top: 1px solid var(--adn-border); }

/* the cell holds a small text element only so Baserow renders it (an empty
   container is left out of the page); the line art replaces it */
.adn-ft-logo > .element__wrapper
{
display: none !important;
}

/* the logo cell fills both rows so the letters sit in the middle of it */
.adn-overview-footer > .element__wrapper:nth-child(4) > .element__inner-wrapper
{
height: 100%;
}

.adn-ft-logo
{
display: flex !important;
height: 100%;
align-items: center;
justify-content: center;
min-height: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: clamp(24px, 3.2vh, 34px) var(--ov-x) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}

/* the other cells: small label, then links / text */
.adn-ft-col
{
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-height: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: clamp(24px, 3.2vh, 34px) var(--ov-x) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}

.adn-ft-col > .element__wrapper
{
width: auto !important;
}

.adn-ft-label,
.adn-ft-label p
{
margin: 0 0 6px !important;
padding: 0 !important;
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
text-align: left !important;
color: rgba(38, 38, 38, .72) !important;
}

.adn-ft-text,
.adn-ft-text p
{
margin: 0 !important;
padding: 0 !important;
max-width: 420px;
font: 500 16px/1.35 var(--adn-grotesk) !important;
letter-spacing: -.01em;
text-align: left !important;
color: var(--adn-ink) !important;
}

.adn-ft-link
{
justify-content: flex-start !important;
}

.adn-ft-link a
{
display: inline-flex !important;
align-items: baseline;
gap: 8px;
margin: 0 !important;
padding: 0 !important;
font: 500 16px/1.35 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: var(--adn-ink) !important;
text-decoration: none !important;
transition: color var(--adn-fade);
}

.adn-ft-link a::after
{
content: "↗";
font: 400 13px/1 var(--adn-geist);
color: rgba(38, 38, 38, .55);
transition: transform .2s ease, color var(--adn-fade);
}

.adn-ft-link a:is(:hover, :focus-visible)
{
color: var(--ov-green-text, #6e9a4b) !important;
outline: 0;
}

.adn-ft-link a:is(:hover, :focus-visible)::after
{
color: var(--ov-green-text, #6e9a4b);
transform: translate(2px, -2px);
}

/* Directions sits under the address with a little air */
.adn-ft-col--address .adn-ft-link
{
margin-top: 6px;
}

@media (max-width: 600px)
{
.adn-overview-footer
{
grid-template-columns: minmax(0, 1fr);
}

.adn-overview-footer > .element__wrapper:is(:nth-child(n))
{
grid-column: 1 / -1;
grid-row: auto;
border-left: 0;
border-top: 1px solid var(--adn-border);
}

.adn-overview-footer > .element__wrapper:first-child
{
border-top: 0;
}
}

/* ==========================================================================
   19. OVERVIEW: CENTRED HERO (no artwork)
   The hero logo art was removed, so the hero is one centred column:
   label, title, body text and the View Jobs button, all centred.
   Overrides 5b/5c above; delete this section to go back to left-aligned.
   ========================================================================== */
.adn-overview-hero
{
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
align-content: center;
text-align: center !important;
}

.adn-overview-hero > .element__wrapper
{
justify-content: center !important;
}

.adn-overview-hero-title,
.adn-overview-hero-title h1,
.adn-overview-hero-copy,
.adn-overview-hero-copy p
{
text-align: center !important;
}

.adn-overview-hero-title h1
{
max-width: 820px;
margin: 0 auto !important;
}

.adn-overview-hero-copy,
.adn-overview-hero-copy p
{
margin: 0 auto !important;
}

.adn-overview-hero-action
{
justify-content: center !important;
--button-alignment: center !important;
}

/* ==========================================================================
   20. OVERVIEW: RESOURCES BAND WITHOUT THE ADN LINE ART
   The animated ADN letters were removed (JS block deleted), so the logo
   cell is hidden and the band reflows: SIRIM | MITI | DagangNet on row 1,
   the address (+ Directions) across the full width on row 2.
   Overrides the placement in 18 above.
   ========================================================================== */
.adn-overview-footer > .element__wrapper:has(.adn-ft-logo)
{
display: none !important;
}

@media (min-width: 601px)
{
.adn-overview-footer > .element__wrapper:nth-child(3)
{
grid-column: 3;
grid-row: 1;
border-left: 1px solid var(--adn-border);
border-top: 0;
}

.adn-overview-footer > .element__wrapper:nth-child(5)
{
grid-column: 1 / -1;
grid-row: 2;
border-left: 0;
border-top: 1px solid var(--adn-border);
}
}

/* ==========================================================================
   21. JOB LISTING: SCANNABLE STATUS
   21a. Status is a filled chip in the status's own colour (same square,
        bordered style as the job type / priority chips, but a little
        larger and deeper so it reads at a glance down the column).
   21b. Finished jobs (Completed, Cancelled) are faded so the jobs still
        in progress stand out; hover brings a row back to full strength.
        The row's status is copied onto the row by the JS block
        "ADN Job listing row status" (data-adn-status).
   Overrides the "Status: coloured square + plain label" rules in 6.
   ========================================================================== */

/* 21a. Status chip */
.job-listing-table td:nth-child(7) .ab-tag
{
position: relative;
isolation: isolate;
display: inline-flex !important;
align-items: center;
gap: 7px;
padding: 6px 10px !important;
border: 0 !important; /* no outline: the fill alone reads cleaner and sets status apart from the bordered priority chips */
background: transparent !important;
font: 500 11px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
white-space: normal; /* long names (Awaiting Payment Approval) wrap inside the column */
text-align: left;
max-width: 100%;
box-sizing: border-box;
color: var(--adn-ink) !important;
}

/* the fill: database colours are pastel, so deepen them behind the text */
.job-listing-table td:nth-child(7) .ab-tag::after
{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--tag-background-color, #f5f5f5);
filter: saturate(1.9) brightness(.93);
}

/* no marker: the chip's fill carries the status (removes the square from 6) */
.job-listing-table td:nth-child(7) .ab-tag::before
{
content: none !important;
display: none !important;
}

/* 21b. Finished rows fade back */
.job-listing-table tr:is([data-adn-status="completed"], [data-adn-status="cancelled"]) td
{
opacity: .45;
transition: opacity .2s ease, background-color var(--adn-fade, .2s ease), color var(--adn-fade, .2s ease);
}

.job-listing-table tr:is([data-adn-status="completed"], [data-adn-status="cancelled"]):is(:hover, :focus-within) td
{
opacity: 1;
}

/* a cancelled job also reads as struck through */
.job-listing-table tr[data-adn-status="cancelled"] td:nth-child(1) :is(p, a, span)
{
text-decoration: line-through;
text-decoration-thickness: 1px;
}

/* ==========================================================================
   22. JOB LISTING: SOFT ROW HOVER
   Hovering a row now tints it a slightly darker shade of the page colour
   instead of turning it charcoal; text and chips keep their normal colours.
   Overrides the hover rules in 6g. Delete this section to go back.
   ========================================================================== */
.job-listing-table
{
--jl-row-hover: color-mix(in srgb, var(--adn-canvas) 90%, var(--adn-ink));
}

.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td
{
background: var(--jl-row-hover) !important;
}

.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td :is(p, span:not(.ab-tag), a, div:not(.tag-field)),
.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td:nth-child(7) .ab-tag
{
color: var(--adn-ink) !important;
--body-text-color: var(--adn-ink) !important;
}

/* the arrow at the row end stays dark on the light hover */
.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]) td:last-child::after
{
color: var(--adn-ink) !important;
}

/* ==========================================================================
   23. OVERVIEW: INCOMING JOBS CHART (last 30 days)
   Band between the counters and "Today's incoming jobs":
   title cell (one third, lines up with the bands above/below) | line chart.
   Data: page data source "Jobs Last 30 Days" (Created on, last 30 days,
   oldest first) feeds a hidden repeat (.adn-chart-data) whose text element
   holds each job's "Received Day" (YYYY-MM-DD, Malaysia time). The JS block
   "ADN Overview incoming jobs chart" counts jobs per day (days with no
   jobs count as 0) and draws the chart in .adn-chart.
   ========================================================================== */
.adn-overview-chart .element__wrapper
{
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
background: transparent !important;
}

.adn-overview-chart .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}

.adn-overview-chart
{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
min-height: 300px;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}

/* the hidden data list */
.adn-overview-chart > .element__wrapper:has(.adn-chart-data)
{
display: none !important;
}

/* title cell */
.adn-overview-chart > .element__wrapper:first-child
{
grid-column: 1;
padding: clamp(24px, 3.2vh, 34px) var(--ov-x) !important;
}

.adn-chart-title,
.adn-chart-title :is(h1, h2, h3)
{
margin: 0 !important;
padding: 0 !important;
font: 700 clamp(30px, 3.2vw, 46px)/.95 var(--adn-grotesk) !important;
letter-spacing: -.02em !important;
text-transform: uppercase;
text-align: left !important;
color: var(--adn-ink) !important;
}

.adn-chart-title::before
{
content: "LAST 30 DAYS — BY DATE RECEIVED";
display: block;
margin-bottom: 16px;
font: 500 12px/1.4 var(--adn-geist);
letter-spacing: 0;
color: rgba(38, 38, 38, .72);
}



/* chart cell */
.adn-chart
{
grid-column: 2;
grid-row: 1;
position: relative;
min-width: 0;
padding: clamp(20px, 3vh, 30px) var(--ov-x) 14px;
border-left: 1px dashed var(--adn-border); /* dashed divider between title and chart */
}

.adn-chart svg
{
display: block;
width: 100%;
height: 230px;
overflow: visible;
}

.adn-chart .grid line
{
stroke: var(--adn-border);
stroke-width: 1;
shape-rendering: crispEdges;
}

.adn-chart .grid line.base
{
stroke: rgba(38, 38, 38, .55);
}

.adn-chart .wkend
{
fill: rgba(38, 38, 38, .035);
}

.adn-chart text
{
font: 500 11px/1 var(--adn-geist);
fill: rgba(38, 38, 38, .6);
}

.adn-chart .area
{
fill: rgba(38, 38, 38, .05);
}

.adn-chart .line
{
fill: none;
stroke: var(--adn-ink);
stroke-width: 1.5;
stroke-linejoin: round;
}

.adn-chart .today
{
fill: var(--adn-accent, #a8c28e);
stroke: var(--adn-ink);
stroke-width: 1;
}

.adn-chart .guide
{
stroke: var(--adn-ink);
stroke-width: 1;
stroke-dasharray: 3 3;
shape-rendering: crispEdges;
}

.adn-chart .pt
{
fill: var(--adn-canvas);
stroke: var(--adn-ink);
stroke-width: 1.5;
}

.adn-chart .hit
{
fill: transparent;
cursor: crosshair;
}

.adn-chart-tip
{
position: absolute;
top: 8px;
z-index: 2;
padding: 7px 10px;
border: 1px solid var(--adn-ink);
background: var(--adn-canvas);
font: 500 11px/1.35 var(--adn-geist);
text-transform: uppercase;
white-space: nowrap;
color: var(--adn-ink);
pointer-events: none;
transform: translateX(-50%);
opacity: 0;
transition: opacity .12s ease;
}

.adn-chart-tip.on
{
opacity: 1;
}

.adn-chart-tip b
{
display: block;
font: 700 15px/1.1 var(--adn-grotesk);
letter-spacing: -.01em;
}

/* ==========================================================================
   24. JOB LISTING: STICKY JOB TYPE TABS
   The job type tabs (All, IOR, EOR, ...) stay pinned under the header while
   the list scrolls, and the table column header now pins just below them
   (instead of directly under the header, see 6). Desktop only for now.
   ========================================================================== */
.adn-jobs-page
{
--jl-tabs-h: 49px; /* height of the tab bar; the column header sits below it */
}

.adn-jobs-page > .element__wrapper:has(.adn-jobs-tabs)
{
position: sticky !important;
top: 66px !important; /* just under the header's line */
z-index: 4;
margin-top: -1px !important; /* its own top line sits on the line above it when not pinned */
background: var(--adn-canvas) !important;
box-shadow: inset 0 1px 0 var(--adn-border); /* top line that travels with the pinned bar */
}

.job-listing-table th
{
top: calc(66px + var(--jl-tabs-h, 49px)) !important;
/* the table's own bottom line stays behind when the header pins, so draw it on the cell instead */
border-bottom: 0 !important;
box-shadow: inset 0 -1px 0 var(--adn-border);
}

/* ==========================================================================
   25. JOB LISTING: MOBILE + TABLET
   Tablet (701–1000px): same table, PIC column dropped, tighter cells.
   Phone (700px and under):
   25a. Title band a little tighter.
   25b. Job type tabs: Baserow folds the 9 tabs into a ☰ menu on narrow
        screens, so the JS block "ADN Job listing mobile tabs" adds a strip
        of the same tabs (read from the tab menu itself) that swipes
        sideways, keeps the active tab in view and stays pinned on top.
   25c. Filter / search bar: bigger tap targets.
   25d. Table becomes a list of cards: status + priority, subject (2 lines),
        client · job type, PIC · date, arrow. Whole card opens the job.
        Finished jobs stay faded (section 21).
   25e. "Show more" button full width.
   Desktop is untouched.
   ========================================================================== */

/* Tablet */
@media (min-width: 701px) and (max-width: 1000px)
{
/* fit the table to the screen instead of its 900px desktop minimum */
.job-listing-table table
{
min-width: 0 !important;
width: 100% !important;
}

.job-listing-table :is(th, td):nth-child(5)
{
display: none !important;
}

.job-listing-table :is(th, td)
{
padding-left: 12px !important;
padding-right: 12px !important;
}

.job-listing-table td:last-child
{
padding-right: 36px !important;
}
}

/* Phone */
@media (max-width: 700px)
{
/* 25a. Title band */
.adn-jobs-title
{
padding-top: 28px !important;
}

/* 25b. Tabs: hide Baserow's ☰ menu, show the swipe strip instead */
.adn-jobs-page > .element__wrapper:has(.adn-jobs-strip) .menu-element__wrapper
{
display: none !important;
}

.adn-jobs-page
{
--jl-tabs-h: 44px;
}

.adn-jobs-page > .element__wrapper:has(.adn-jobs-tabs)
{
top: 60px !important; /* the phone header is shorter */
}

.adn-jobs-strip
{
display: flex;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid var(--adn-border);
}

.adn-jobs-strip::-webkit-scrollbar
{
display: none;
}

.adn-jobs-strip a
{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 72px;
height: 43px;
padding: 0 16px;
box-sizing: border-box;
border-right: 1px solid var(--adn-border);
font: 500 12px/1 var(--adn-geist);
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
color: var(--adn-ink) !important;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
}

.adn-jobs-strip a[aria-current="page"]
{
background: var(--adn-ink);
color: var(--adn-canvas) !important;
}

/* 25c. Filter / search bar */
.job-listing-table .local-baserow-adhoc-header__container
{
min-height: 48px;
}

.job-listing-table .local-baserow-adhoc-header__item
{
min-height: 48px;
}

/* 25d. Cards */
.job-listing-table thead
{
display: none !important;
}

.job-listing-table .ab-table__wrapper,
.job-listing-table table,
.job-listing-table tbody
{
display: block !important;
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}

.job-listing-table tbody tr
{
position: relative;
display: grid !important;
grid-template-columns: auto auto minmax(0, 1fr) auto;
grid-template-areas:
"st st st pr"
"su su su su"
"cl cl cl ty"
"pi da da ar";
column-gap: 8px;
row-gap: 8px;
padding: 16px var(--jl-x, 20px) 14px;
border-bottom: 1px solid var(--adn-border);
}

.job-listing-table tbody td
{
display: block !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
}

.job-listing-table tbody td:nth-child(1) { grid-area: su; }
.job-listing-table tbody td:nth-child(2) { grid-area: cl; }
.job-listing-table tbody td:nth-child(3) { grid-area: ty; justify-self: end; }
.job-listing-table tbody td:nth-child(4) { grid-area: pr; justify-self: end; }
.job-listing-table tbody td:nth-child(5) { grid-area: pi; }
.job-listing-table tbody td:nth-child(6) { grid-area: da; }
.job-listing-table tbody td:nth-child(7) { grid-area: st; }

/* subject: the card's headline, two lines at most */
.job-listing-table tbody td:nth-child(1) :is(a, p, span)
{
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font: 500 16px/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
white-space: normal !important;
color: var(--adn-ink) !important;
}

/* client, job type, PIC, date: small secondary lines */
.job-listing-table tbody td:is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)) :is(p, span, a)
{
font: 500 12px/1.35 var(--adn-geist) !important;
letter-spacing: 0;
white-space: normal !important;
color: rgba(38, 38, 38, .72) !important;
}

.job-listing-table tbody td:nth-child(2) :is(p, span, a)
{
display: -webkit-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* "Ikmal · 22/10/2026 11:15" */
.job-listing-table tbody td:nth-child(6)::before
{
content: "·";
margin-right: 6px;
color: rgba(38, 38, 38, .45);
}

.job-listing-table tbody td:nth-child(6)
{
display: flex !important;
align-items: baseline;
}

/* the row arrow moves to the card's bottom right */
.job-listing-table tbody td:last-child::after
{
display: none !important;
}

.job-listing-table tbody tr::after
{
content: "→";
grid-area: ar;
align-self: end;
font: 400 16px/1 var(--adn-geist);
color: var(--adn-ink);
}

/* tap feedback instead of hover */
.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td
{
background: transparent !important;
}

.job-listing-table tbody tr:active
{
background: var(--jl-row-hover, rgba(38, 38, 38, .08));
}

/* empty client reads as a dash, already handled in 6; keep it small */
.job-listing-table tbody td .ab-table__cell-content:empty::after
{
font: 500 12px/1.35 var(--adn-geist);
}

/* 25e. Show more */
.job-listing-table .table-element__footer
{
padding: 16px var(--jl-x, 20px) !important;
}

.job-listing-table .table-element__footer button
{
width: 100% !important;
min-height: 48px;
}
}

/* ==========================================================================
   26. HEADER: MOBILE MENU (Heron-style)
   Phones (700px and under): the header is two cells, company name | MENU.
   MENU opens a dropdown under its own cell: Overview, Main Listing (the
   current page marked ■) and Add Job (green, with an arrow). Built by the
   JS block "ADN Mobile header menu"; Baserow's ☰ and the Add Job cell are
   hidden on phones. Closes on tap outside, Esc, or after choosing an item.
   Desktop is untouched.
   ========================================================================== */
@media (max-width: 700px)
{
/* two cells: company name | MENU (the header is a 3-column grid on desktop) */
.page__fixed-stack--top .column-element:has(.adn-mmenu)
{
grid-template-columns: minmax(0, 1fr) 46% !important;
}

.page__fixed-stack--top .column-element:has(.adn-mmenu) > .column-element__column:nth-child(2)
{
position: relative;
border-left: 1px solid var(--adn-border);
}

.page__fixed-stack--top .column-element:has(.adn-mmenu) > .column-element__column:nth-child(3),
.page__fixed-stack--top .column-element:has(.adn-mmenu) .menu-element__compact-menu-trigger,
.page__fixed-stack--top .column-element:has(.adn-mmenu) .menu-element__wrapper
{
display: none !important;
}

.adn-mmenu
{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
min-height: 52px;
padding: 0 16px;
box-sizing: border-box;
border: 0;
background: transparent;
font: 500 13px/1 var(--adn-geist);
text-transform: uppercase;
color: var(--adn-ink);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

/* three lines that fold into one dash when open */
.adn-mmenu i
{
position: relative;
width: 16px;
height: 10px;
}

.adn-mmenu i::before,
.adn-mmenu i::after,
.adn-mmenu i b
{
content: "";
position: absolute;
left: 0;
right: 0;
height: 1.5px;
background: var(--adn-ink);
transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}

.adn-mmenu i::before { top: 0; }
.adn-mmenu i b { top: 4.25px; }
.adn-mmenu i::after { bottom: 0; }

.adn-mmenu[aria-expanded="true"] i::before { transform: translateY(4.25px); }
.adn-mmenu[aria-expanded="true"] i::after { transform: translateY(-4.25px); }

/* company name a little larger now it has the room */
.page__fixed-stack--top .column-element:has(.adn-mmenu) > .column-element__column:nth-child(1)::before
{
font-size: clamp(13px, 3.8vw, 16px) !important;
line-height: 1.05 !important;
}

/* dropdown under the MENU cell */
.adn-mmenu-panel
{
position: absolute;
top: 100%;
left: -1px;
right: -1px;
z-index: 20;
display: grid;
margin-top: 1px;
border: 1px solid var(--adn-border);
border-top: 0;
background: var(--adn-canvas);
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
}

.adn-mmenu-panel.on
{
visibility: visible;
opacity: 1;
transform: none;
transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

.adn-mmenu-panel a
{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 0 16px;
border-top: 1px solid var(--adn-border);
font: 500 13px/1 var(--adn-geist);
text-transform: uppercase;
text-decoration: none !important;
color: var(--adn-ink) !important;
-webkit-tap-highlight-color: transparent;
}

.adn-mmenu-panel a:first-child
{
border-top: 0;
}

.adn-mmenu-panel a:active
{
background: color-mix(in srgb, var(--adn-canvas) 90%, var(--adn-ink));
}

/* current page */
.adn-mmenu-panel a[aria-current="page"]::after
{
content: "";
width: 7px;
height: 7px;
background: var(--adn-ink);
}

/* Add Job: the call to action, in the accent green with an arrow */
.adn-mmenu-panel a.cta
{
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 10px;
min-height: 64px;
color: var(--ov-green-text, #6e9a4b) !important;
}

.adn-mmenu-panel a.cta::after
{
content: "→";
align-self: flex-end;
width: auto;
height: auto;
background: none;
font: 400 18px/1 var(--adn-geist);
}
}

/* ==========================================================================
   27. ADD JOB: PHONE LAYOUT (Heron "Get in touch" form)
   Phones (700px and under):
   27a. Title left-aligned with a one-line intro under it.
   27b. Shorter field rows (about 60px), text at least 16px so iPhones do
        not zoom in when a field is tapped.
   27c. "+ New client" sits right under the Client field as its own row.
   27d. Create Job: full-width row, turns green once every field is filled.
   27e. Artwork hidden; the new client panel (add_client=1) opens above the
        job form so it is in view straight away.
   27f. Missed required fields: red line only, no message (as on desktop).
   Desktop is untouched.
   ========================================================================== */
@media (max-width: 700px)
{
.page__content:has(.adn-job-art)
{
--adn-title-row: 56px;
--adn-field-row: 62px;
--adn-cell-x: 16px;
--adn-field-font: 500 17px/1.2 var(--adn-grotesk);
}

/* 27a. Title + intro */
.page__content:has(.adn-job-art)::before
{
padding: 28px 16px 10px !important;
text-align: left !important;
font-size: 44px !important;
border-bottom: 0 !important;
}

.page__content:has(.adn-job-art) > .element__wrapper:first-of-type::before
{
content: "Log a new job from a client email. Fields marked * are required.";
display: block;
padding: 0 16px 22px;
border-bottom: 1px solid var(--adn-border);
font: 500 16px/1.35 var(--adn-grotesk);
letter-spacing: -.01em;
color: rgba(38, 38, 38, .72);
}

/* 27b. Rows */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group
{
min-height: var(--adn-field-row) !important;
padding: 30px var(--adn-cell-x) 10px !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group__label
{
top: 11px !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:has(.ab-input:placeholder-shown):not(:focus-within) .ab-form-group__label,
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:has(.ab-dropdown__selected-placeholder):not(:focus-within) .ab-form-group__label
{
top: 22px !important;
font-size: 17px !important;
}

.page__content:has(.adn-job-art) :is(input, textarea, select)
{
font-size: max(16px, 1em) !important;
}

/* dropdown lists: full width of the row, easy to scroll and tap */
.page__content:has(.adn-job-art) .ab-dropdown__items
{
left: 0 !important;
right: 0 !important;
width: auto !important;
max-height: 55vh;
}

.page__content:has(.adn-job-art) .ab-dropdown__item
{
min-height: 44px;
}

.page__content:has(.adn-job-art) .ab-dropdown__search input
{
font-size: 16px !important;
}

/* 27f. no message space: the hidden "required" text no longer makes the row taller; the red line stays */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .control__messages
{
display: none !important;
}

/* 27c. Job form order: title, subject, client, + new client, job type, PIC, priority */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper
{
grid-column: 1 / -1 !important;
grid-row: auto !important;
border-right: 0 !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(1) { order: 1; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(2) { order: 2; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(3) { order: 3; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) { order: 4; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(4) { order: 5; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(5) { order: 6; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(6) { order: 7; }

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7)
{
justify-self: stretch !important;
width: 100% !important;
margin-top: -1px !important;
border-top: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
text-align: left !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) :is(.element__inner-wrapper, .element, .link-element)
{
display: block !important;
width: 100% !important;
text-align: left !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) a
{
display: flex !important;
width: 100%;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
min-height: 44px;
padding: 0 var(--adn-cell-x) !important;
font: 500 12px/1 var(--adn-geist) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) a::after
{
content: none !important;
}

/* 27c2. "+ New client" sits inside the Client box, top right (as on desktop):
   fixed rows so the link shares the Client row */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(1) { grid-row: 1 !important; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(2) { grid-row: 2 !important; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(3) { grid-row: 3 !important; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) { grid-row: 3 !important; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(4) { grid-row: 4 !important; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(5) { grid-row: 5 !important; }
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(6) { grid-row: 6 !important; }

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7)
{
align-self: start !important;
justify-self: end !important;
width: auto !important;
z-index: 2;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) :is(.element__inner-wrapper, .element, .link-element)
{
width: auto !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(7) a
{
width: auto !important;
min-height: 40px !important;
padding: 0 var(--adn-cell-x) 0 12px !important;
}

/* 27d. Create Job */
/* green text so it reads as a button, not another field (Add Client too) */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button button
{
color: var(--ov-green-text, #6e9a4b) !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button
{
order: 99; /* after every field */
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) > .form-container-element__submit-button button
{
min-height: 64px !important;
font-size: 20px !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):not(:has(.ab-dropdown__selected-placeholder)):not(:has(.ab-input:placeholder-shown)) > .form-container-element__submit-button button
{
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
}

/* 27e. Artwork off on phones; the new client panel shows first when open */
.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column:has(.adn-job-art):not(:has(.form-container-element__submit-button))
{
display: none !important;
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column:first-child
{
border-bottom: 0 !important;
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column:has(.adn-job-art .form-container-element__submit-button)
{
order: -1;
border-bottom: 1px solid var(--adn-border);
}

.page__content:has(.adn-job-art) .adn-job-art > .element__wrapper:has(.form-container-element__submit-button)
{
animation: none !important;
}

/* the artwork cell's minimum height does not apply to the client panel */
.page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .adn-job-art)
{
min-height: 0 !important;
}

.page__content:has(.adn-job-art) .adn-job-art > .element__wrapper:has(.form-container-element__submit-button) > .element__inner-wrapper
{
height: auto !important;
}

/* client panel rows as short as the job rows */
.page__content:has(.adn-job-art) .adn-job-art .element:has(> .form-container-element__submit-button)
{
height: auto !important;
grid-template-rows: none !important;
grid-auto-rows: auto;
}

.page__content:has(.adn-job-art) .adn-job-art .element:has(> .form-container-element__submit-button)::before
{
min-height: var(--adn-title-row);
}
}

/* ==========================================================================
   28. ADD JOB: NEW CLIENT AS A FULL-SCREEN PANEL (phones)
   With add_client=1 the New Client form slides up under the header and
   covers the job form (which keeps what was typed). Top row: NEW CLIENT |
   CLOSE — (same look as the header's MENU cell). Close, Esc or the phone's
   back button return to the job form. The Close cell is added by the JS
   block "ADN Add Job new client panel". Desktop is untouched.
   ========================================================================== */
@media (max-width: 700px)
{
/* the panel: fixed under the header, inside the page frame */
.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column:has(.adn-job-art .form-container-element__submit-button)
{
position: fixed !important;
top: 61px; /* just below the header's bottom line */
left: 7px;
right: 7px;
bottom: 0;
z-index: 40;
display: block !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
border: 1px solid var(--adn-border);
border-top: 0;
border-bottom: 0 !important;
background: var(--adn-canvas);
animation: adn-nc-up .38s cubic-bezier(.16, 1, .3, 1) both;
}

.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column.adn-nc-closing
{
animation: adn-nc-down .22s ease-in both;
}

@keyframes adn-nc-up
{
from { transform: translateY(100%); }
to { transform: none; }
}

@keyframes adn-nc-down
{
from { transform: none; }
to { transform: translateY(100%); }
}

/* the page behind does not scroll while the panel is open */
html:has(.adn-job-art .form-container-element__submit-button),
html:has(.adn-job-art .form-container-element__submit-button) body
{
overflow: hidden !important;
}

/* title row: NEW CLIENT | CLOSE — */
.page__content:has(.adn-job-art) .adn-job-art .element:has(> .form-container-element__submit-button)
{
position: relative;
}

.page__content:has(.adn-job-art) .adn-job-art .element:has(> .form-container-element__submit-button)::before
{
content: "NEW CLIENT" !important;
padding-right: calc(46% + 16px) !important;
}

.adn-nc-close
{
position: absolute;
top: 0;
right: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
width: 46%;
height: var(--adn-title-row, 56px);
padding: 0 16px;
box-sizing: border-box;
border: 0;
border-left: 1px solid var(--adn-border);
border-bottom: 1px solid var(--adn-border);
background: var(--adn-canvas);
font: 500 13px/1 var(--adn-geist);
text-transform: uppercase;
color: var(--adn-ink);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.adn-nc-close::after
{
content: "";
width: 16px;
height: 1.5px;
background: var(--adn-ink);
}

.adn-nc-close:active
{
background: color-mix(in srgb, var(--adn-canvas) 90%, var(--adn-ink));
}
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce)
{
.page__content:has(.adn-job-art) .column-element:has(.adn-job-art) > .column-element__column:has(.adn-job-art .form-container-element__submit-button)
{
animation: none !important;
}
}

/* ==========================================================================
   29. JOB DETAIL: PHONE LAYOUT
   Phones (700px and under):
   29a. Title: subject a little smaller, wraps in full.
   29b. Key facts as two-column rows (Heron pricing style): Status (chip in
        the status colour), Client, Job type, Priority, PIC, Received, Email.
   29c. Progress: removed.
   29d. Tabs: swipe strip [01] Details … [05] Invoice in place of Baserow's ☰,
        pinned under the header (same JS block).
   29e. Details form: one column, shorter rows, even borders.
   29f. Models table becomes cards: model + status, invoice, qty, value,
        ID and the Edit button.
   Desktop is untouched.
   ========================================================================== */
@media (max-width: 700px)
{
/* 29a. Title */
.adn-job-subject :is(h1, h2, h3)
{
font-size: 24px !important;
line-height: 1.05 !important;
overflow-wrap: anywhere;
}

/* 29b. Facts */
.adn-job-facts
{
display: flex !important;
flex-direction: column;
gap: 0 !important;
row-gap: 0 !important;
padding: 0 !important;
border-top: 1px solid var(--adn-border) !important;
}

/* (doubled classes: beats the desktop rule that hides status, client and type here) */
.adn-job-facts.adn-job-facts > .element__wrapper.element__wrapper:has(.adn-fact),
.adn-job-facts.adn-job-facts > div > .element__wrapper.element__wrapper:has(.adn-fact)
{
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
}

.adn-job-facts .adn-fact
{
display: grid !important;
grid-template-columns: 38% minmax(0, 1fr);
align-items: center;
column-gap: 12px;
min-height: 44px;
margin: 0 !important;
padding: 8px 16px !important;
box-sizing: border-box;
width: 100% !important;
}

.adn-job-facts .adn-fact::before
{
margin: 0 !important;
padding: 0 !important;
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

.adn-job-facts .adn-fact :is(p, a, .markdown)
{
margin: 0 !important;
font: 500 15px/1.3 var(--adn-grotesk) !important;
text-align: left !important;
overflow-wrap: anywhere;
}

.adn-job-facts .adn-fact--received :is(p, a)
{
font: 500 13px/1.3 var(--adn-geist) !important;
}

/* status: the chip from 7c, first in the row */
/* doubled class: beats the phone facts type so the chip keeps its small mono label */
.adn-job-facts.adn-job-facts .adn-fact--status.adn-fact--status :is(p, .markdown p)
{
justify-self: start;
font: 500 11px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
}


/* 29c. Progress: removed (the status shows as a chip in the facts row) */

/* 29d. Tabs strip */
.element__wrapper:has(> .element__inner-wrapper > .job-detail-tabs)
{
position: sticky !important;
top: 61px;
z-index: 5;
background: var(--adn-canvas) !important;
}

.element__wrapper:has(.adn-jd-strip) .job-detail-tabs
{
display: none !important;
}

.adn-jd-strip
{
display: flex;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
border-top: 1px solid var(--adn-border);
border-bottom: 1px solid var(--adn-border);
}

.adn-jd-strip::-webkit-scrollbar
{
display: none;
}

.adn-jd-strip a
{
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
height: 46px;
padding: 0 16px;
box-sizing: border-box;
border-right: 1px solid var(--adn-border);
font: 500 12px/1 var(--adn-geist);
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
color: var(--adn-ink) !important;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
}

/* tab names only, no [01] numbering */
.adn-jd-strip a b
{
display: none !important;
}

.adn-jd-strip a[aria-current="page"]
{
background: var(--adn-ink);
color: var(--adn-canvas) !important;
}

.adn-jd-strip a[aria-current="page"] b
{
color: rgba(247, 247, 241, .6);
}

/* 29e. Details form */
/* (doubled classes: beats the desktop two-column dividers) */
.adn-detail-fields.adn-detail-fields > .element__wrapper.element__wrapper,
.adn-detail-fields.adn-detail-fields > div > .element__wrapper.element__wrapper
{
border-left: 0 !important;
border-right: 0 !important;
}

.adn-detail-fields .ab-form-group
{
padding: 10px 16px 12px !important;
min-height: 0 !important;
}

.adn-detail-fields .ab-form-group__label
{
margin-bottom: 4px !important;
}

.adn-detail-fields :is(input, textarea, select)
{
font-size: max(16px, 1em) !important;
}

.adn-job-details button
{
min-height: 60px !important;
color: var(--ov-green-text, #6e9a4b) !important; /* reads as the action, like Create Job */
}

/* 29f. Models table as cards */
.job-model-table thead
{
display: none !important;
}

.job-model-table .ab-table__wrapper,
.job-model-table table,
.job-model-table tbody
{
display: block !important;
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}

.job-model-table tbody tr
{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
grid-template-areas:
"md md st"
"in in in"
"qt tv tv"
"id id ac";
gap: 8px 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--adn-border);
}

.job-model-table tbody td
{
display: block !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
text-align: left !important;
}

.job-model-table tbody td:nth-child(1) { grid-area: id; align-self: center; }
.job-model-table tbody td:nth-child(2) { grid-area: md; }
.job-model-table tbody td:nth-child(3) { grid-area: in; }
.job-model-table tbody td:nth-child(4) { grid-area: qt; }
.job-model-table tbody td:nth-child(5) { grid-area: tv; }
.job-model-table tbody td:nth-child(6) { grid-area: st; justify-self: end; }
.job-model-table tbody td:nth-child(7) { grid-area: ac; justify-self: end; }

.job-model-table tbody td:nth-child(2) :is(p, span)
{
font: 600 18px/1.2 var(--adn-grotesk) !important;
color: var(--adn-ink) !important;
}

.job-model-table tbody td:is(:nth-child(3), :nth-child(4), :nth-child(5))::before
{
display: block;
margin-bottom: 2px;
font: 500 10px/1.3 var(--adn-geist);
text-transform: uppercase;
color: rgba(38, 38, 38, .6);
}

.job-model-table tbody td:nth-child(3)::before { content: "Invoice"; }
.job-model-table tbody td:nth-child(4)::before { content: "Quantity"; }
.job-model-table tbody td:nth-child(5)::before { content: "Total value"; }

.job-model-table tbody td:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(5)) :is(p, span)
{
font: 500 13px/1.3 var(--adn-geist) !important;
overflow-wrap: anywhere;
}

.job-model-table tbody td:nth-child(7) :is(a, button)
{
min-height: 40px;
}

.job-model-table tbody td :is(.ab-table__cell-content, p, span)
{
text-align: left !important;
justify-content: flex-start !important;
align-items: flex-start !important; /* the cells are centred columns on desktop */
}

/* empty quantity / value read as a dash */
.job-model-table tbody td .ab-text:empty::after
{
content: "—";
color: var(--adn-disable, #b4b4b0);
}
}

/* ==========================================================================
   30. OVERVIEW: CONTACT BLOCK + PHONE LAYOUT
   30a. Contact (desktop + phone): label, company name, address, email
        (mailto) and Directions. Desktop: two columns, company + address
        on the left, email + Directions on the right. Builder elements in
        the column .adn-ft-col--address, so text is edited in the builder.
   Phones (700px and under):
   30b. Hero a little tighter.
   30c. Counters in one row of three, number above its label.
   30d. Chart band stacked: label, title on one line, one-line summary,
        then the chart full width.
   30e. Today's incoming jobs: smaller title; each job shows its time
        above a two-line subject.
   30f. Resources: SIRIM | MITI side by side, DagangNet links on one row.
   Desktop is untouched apart from 30a.
   ========================================================================== */

/* 30a. Contact */
.adn-ft-col.adn-ft-col--address
{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--ov-x);
row-gap: 10px;
align-items: start;
}

.adn-ft-col--address > .element__wrapper:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
.adn-ft-col--address > .element__wrapper:nth-child(2) { grid-column: 1; grid-row: 2; }
.adn-ft-col--address > .element__wrapper:nth-child(3) { grid-column: 1; grid-row: 3; }
.adn-ft-col--address > .element__wrapper:nth-child(4) { grid-column: 2; grid-row: 2; }
.adn-ft-col--address > .element__wrapper:nth-child(5) { grid-column: 2; grid-row: 3; }

.adn-ft-col--address .adn-ft-link
{
margin-top: 0 !important;
}

.adn-ft-company,
.adn-ft-company p
{
font-weight: 600 !important;
}

/* email opens the mail app, not a website: no ↗ */
.adn-ft-email a::after
{
content: none !important;
}

@media (max-width: 700px)
{
/* 30a on phones: one column, in reading order */
.adn-ft-col.adn-ft-col--address
{
grid-template-columns: minmax(0, 1fr);
}

.adn-ft-col--address > .element__wrapper:nth-child(n)
{
grid-column: 1 !important;
grid-row: auto !important;
}

.adn-ft-col--address > .element__wrapper:nth-child(4)
{
margin-top: 6px !important;
}

/* 30b. Hero */
.adn-overview-hero > .element__wrapper:nth-child(1)
{
padding-top: 36px !important;
}

.adn-overview-hero > .element__wrapper:nth-child(3)
{
padding-bottom: 36px !important;
}

/* 30c. Counters */
.adn-overview-stats.adn-overview-stats
{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.adn-overview-stats.adn-overview-stats > .element__wrapper
{
border-top: 0 !important;
}

.adn-overview-stats.adn-overview-stats > .element__wrapper + .element__wrapper
{
border-left: 1px solid var(--adn-border) !important;
}

.adn-stat.adn-stat
{
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 18px 14px !important;
}

.adn-stat-value.adn-stat-value,
.adn-stat-value.adn-stat-value h2
{
font-size: 40px !important;
}

.adn-stat-label.adn-stat-label,
.adn-stat-label.adn-stat-label p
{
font-size: 10px !important;
line-height: 1.3 !important;
}

/* 30d. Chart band */
.adn-overview-chart.adn-overview-chart
{
grid-template-columns: minmax(0, 1fr) !important;
min-height: 0;
}

.adn-overview-chart > .element__wrapper:first-child
{
padding: 24px var(--ov-x) 4px !important;
}

.adn-chart-title.adn-chart-title,
.adn-chart-title.adn-chart-title :is(h1, h2, h3)
{
font-size: 30px !important;
}

.adn-chart-title::before
{
margin-bottom: 10px !important;
}



.adn-chart.adn-chart
{
grid-column: 1;
grid-row: 2;
border-left: 0 !important;
padding: 10px var(--ov-x) 14px;
}

/* 30e. Today's incoming jobs */
.adn-today-title.adn-today-title,
.adn-today-title.adn-today-title h2
{
font-size: 28px !important;
}

.adn-overview-today.adn-overview-today
{
min-height: 0 !important;
}

.adn-overview-today > .element__wrapper:first-child
{
padding: 24px var(--ov-x) !important;
}

.adn-today-list .repeat-element__repeated-element
{
position: relative;
padding-top: 12px !important;
}

.adn-today-date.adn-today-date,
.adn-today-date.adn-today-date p
{
position: static !important;
display: block !important;
width: auto !important;
margin: 0 !important;
padding: 0 var(--ov-x) !important;
}

.adn-today-item a
{
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal !important;
padding: 4px 44px 14px var(--ov-x) !important;
}

/* 30f. Resources */
.adn-overview-footer.adn-overview-footer
{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.adn-overview-footer.adn-overview-footer > .element__wrapper:nth-child(1)
{
grid-column: 1 !important;
grid-row: 1 !important;
border-left: 0 !important;
border-top: 0 !important;
}

.adn-overview-footer.adn-overview-footer > .element__wrapper:nth-child(2)
{
grid-column: 2 !important;
grid-row: 1 !important;
border-left: 1px solid var(--adn-border) !important;
border-top: 0 !important;
}

.adn-overview-footer.adn-overview-footer > .element__wrapper:nth-child(3)
{
grid-column: 1 / -1 !important;
grid-row: 2 !important;
border-left: 0 !important;
border-top: 1px solid var(--adn-border) !important;
}

.adn-overview-footer.adn-overview-footer > .element__wrapper:nth-child(3) .adn-ft-col
{
flex-direction: row !important;
flex-wrap: wrap;
align-items: baseline;
column-gap: 22px;
}

/* the label keeps its own line; the links sit side by side under it */
.adn-overview-footer.adn-overview-footer > .element__wrapper:nth-child(3) .adn-ft-col > .element__wrapper:first-child
{
flex-basis: 100%;
}

.adn-overview-footer.adn-overview-footer > .element__wrapper:nth-child(5)
{
grid-column: 1 / -1 !important;
grid-row: 3 !important;
border-left: 0 !important;
border-top: 1px solid var(--adn-border) !important;
}

.adn-overview-footer .adn-ft-col
{
padding: 20px var(--ov-x) !important;
}
}

/* ==========================================================================
   32. JOB DETAIL: INVOICE TAB ([05], ?tab=Invoice)
   The invoice form also carries the Details classes (.adn-job-details,
   .adn-detail-fields), so it takes the same panel from 7e: intro on the
   left, ruled cells on the right, full-width SAVE row (and the phone layout
   from 29e). This section only adds what is invoice-specific.
   Data: data source "Job Invoice" (Invoice rows linked to this job, max 1).
   Save creates the invoice the first time, then updates it.
   32a. Reset   32b. Field cells   32c. Intro facts + payment status
   32d. Invoice PDF row   32e. Responsive
   ========================================================================== */

/* 32a. Reset: no native spacing anywhere in the tab */
.adn-invoice,
.adn-invoice .element__wrapper
{
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
}

.adn-invoice .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}

/* close the tab with a line under its last row (Record invoice, or the PDF
   row once an invoice exists), the same way the Details tab ends */
.adn-invoice
{
border-bottom: 1px solid var(--adn-border) !important;
}

/* 32b. Field cells: No | Date | Amount, Description full width,
   Payment date | Amount received | Mark as paid */
.adn-invoice-fields > .element__wrapper:has(.adn-inv--desc) { grid-column: 1 / -1; }

.adn-invoice-fields > .element__wrapper:has(:is(.adn-inv--date, .adn-inv--amount, .adn-inv--received, .adn-inv--paid))
{
border-left: 1px solid var(--adn-border) !important;
}

.adn-invoice-fields .adn-df textarea
{
min-height: 3.9em !important;
resize: vertical;
}

/* date pickers read like the other cells: no box, calendar icon kept */
.adn-invoice-fields .ab-datetime-picker__wrapper
{
display: flex;
align-items: center;
gap: 10px;
width: 100% !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
}

.adn-invoice-fields .ab-datetime-picker__icon
{
position: static !important;
color: var(--adn-muted) !important;
}

/* mark as paid: square box + label, sitting where the value would */
.adn-invoice-fields .adn-inv--paid
{
display: flex !important;
flex-direction: column;
justify-content: flex-end;
}

.adn-invoice-fields .adn-inv--paid::before
{
content: "PAYMENT";
margin: 0 0 10px;
font: 500 11px/1.3 var(--adn-geist);
color: rgba(38, 38, 38, .72);
}

.adn-invoice-fields .ab-checkbox
{
display: flex;
align-items: center;
gap: 10px;
}

.adn-invoice-fields .ab-checkbox__input
{
width: 18px;
height: 18px;
margin: 0;
border-radius: 0 !important;
accent-color: var(--adn-accent);
}

.adn-invoice-fields .ab-checkbox__label
{
font: 500 clamp(16px, 1.3vw, 19px)/1.3 var(--adn-grotesk) !important;
color: var(--adn-ink) !important;
}

/* required fields left empty: red line only, as on Add Job (9k) */
.adn-invoice-fields > .element__wrapper:has([data-form-error="true"])
{
box-shadow: inset 0 -2px 0 #e44424 !important;
}

.adn-invoice-fields :is(.ab-form-group__error-message, .control--error > .control__messages)
{
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}

/* 32c. Intro facts (only once an invoice exists): payment status chip,
   company, balance; mono label above each value like the job facts */
.adn-invoice-intro :is(.adn-invoice-status, .adn-inv-fact)
{
margin-top: 22px !important;
}

.adn-invoice-intro .adn-invoice-status + .element__wrapper .adn-inv-fact,
.adn-invoice-intro .element__wrapper:has(.adn-invoice-status) ~ .element__wrapper .adn-inv-fact
{
margin-top: 16px !important;
}

.adn-invoice-status::before,
.adn-inv-fact::before
{
display: block;
margin-bottom: 8px;
font: 500 11px/1.3 var(--adn-geist);
text-transform: uppercase;
color: rgba(38, 38, 38, .72);
}

.adn-invoice-status::before { content: "PAYMENT STATUS"; }
.adn-inv-fact--company::before { content: "COMPANY"; }
.adn-inv-fact--balance::before { content: "BALANCE"; }

/* status tag: colour from the hidden code token (status-badge script),
   filled like the Job Listing status chip (21a) */
.job-status-badge.adn-invoice-status
{
width: auto !important;
max-width: none;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}

.adn-invoice-status p::before
{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--job-status-background, #f5f5f5);
filter: saturate(1.9) brightness(.93);
}

.adn-invoice-status p
{
position: relative;
isolation: isolate;
display: inline-block;
margin: 0 !important;
padding: 6px 10px;
background: transparent;
font: 500 11px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

.adn-inv-fact p
{
margin: 0 !important;
font: 500 15px/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: var(--adn-ink) !important;
}

.adn-inv-fact--balance p { font: 500 13px/1.4 var(--adn-geist) !important; }

/* 32d. Invoice PDF row: label on the left; one box on the right with the
   file chips and, beside them, the upload (no divider between the two) */
.adn-invoice-pdf
{
display: grid !important;
grid-template-columns: minmax(220px, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
align-items: stretch;
border-top: 1px solid var(--adn-border);
}

.adn-invoice-pdf > .element__wrapper:has(.adn-invoice-pdf-label) { grid-column: 1; grid-row: 1; }
.adn-invoice-pdf > .element__wrapper:has(.adn-invoice-pdf-list) { grid-column: 2; grid-row: 1; }
.adn-invoice-pdf > .element__wrapper:has(.adn-invoice-upload) { grid-column: 3; grid-row: 1; }

/* one divider between the label and the right-hand box */
.adn-invoice-pdf > .element__wrapper:has(.adn-invoice-pdf-list)
{
border-left: 1px solid var(--adn-border);
}

.adn-invoice-pdf-label
{
padding: 20px var(--jd-x, 24px) !important;
}

.adn-invoice-pdf-label p
{
margin: 0 !important;
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: rgba(38, 38, 38, .72) !important;
}

.adn-invoice-pdf-list
{
padding: 14px var(--jd-x, 24px) !important;
}

.adn-invoice-pdf-list .collection-element__header,
.adn-invoice-pdf-list .repeat-element__footer { display: none !important; }

.adn-invoice-pdf-list :is(.repeat-element__repeated-elements, .repeat-element__repeated-element)
{
display: flex !important;
flex-wrap: wrap;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}

/* no file yet */
.adn-invoice-pdf-files:not(:has(a[href]))::after
{
content: "NO PDF YET";
font: 500 11px/1.3 var(--adn-geist);
color: var(--adn-disable);
}

.adn-invoice-pdf-file a
{
display: inline-flex !important;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 6px 10px !important;
border: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font: 500 11px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
text-decoration: none !important;
color: var(--adn-ink) !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.adn-invoice-pdf-file a::after { content: "↗"; }

.adn-invoice-pdf-file a:hover
{
background: var(--adn-ink) !important;
border-color: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

/* upload: drop area + a quiet mono button */
.adn-invoice-upload
{
display: flex !important;
flex-direction: column;
gap: 10px;
padding: 14px var(--jd-x, 24px) !important;
}

.adn-invoice-upload .form-container-element__submit-button { margin: 0 !important; padding: 0 !important; }

.adn-invoice-upload .form-container-element__submit-button button
{
width: 100% !important;
min-height: 40px;
margin: 0 !important;
border: 1px solid var(--adn-accent) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
font: 500 12px/1.2 var(--adn-geist) !important;
text-transform: uppercase;
}

.adn-invoice-upload .form-container-element__submit-button button:hover
{
background: var(--adn-accent-hover) !important;
border-color: var(--adn-accent-hover) !important;
}

.adn-invoice-upload :is(.ab-form-group__error-message, .control--error > .control__messages) { display: none !important; }

/* 32e. Responsive */
@media (max-width: 800px)
{
.adn-invoice-pdf { grid-template-columns: minmax(0, 1fr); }
.adn-invoice-pdf > .element__wrapper { grid-column: 1 !important; grid-row: auto !important; border-left: 0 !important; }
.adn-invoice-pdf > .element__wrapper:has(.adn-invoice-pdf-list) { border-top: 1px solid var(--adn-border); }
}

@media (max-width: 700px)
{
.adn-invoice-fields > .element__wrapper { border-left: 0 !important; }
}

/* ==========================================================================
   33. INVOICES PAGE (/invoices, ?view=to_invoice|unpaid|paid|all)
   Uses the Job Listing frame and tabs (section 6) but its own tables, so it
   reads as a billing page, not a second job list:
   .adn-toinv-table  To invoice: Client | Job | Job Type | Received | RECORD INVOICE ->
   .adn-inv-table    Invoices:   Invoice No | Date | Client | Job | Amount |
                                 Received | Balance | Status
   Amounts are right-aligned mono; the JS block "ADN Invoice amounts" adds
   thousands separators.
   33a. Header: third link   33b. Title band   33c. To invoice table
   33d. Invoices table   33e. Phones
   ========================================================================== */

/* 33a. Header: room for Overview | Main Listing | Invoices (desktop only;
   phones use the MENU dropdown from section 26) */
@media (min-width: 701px)
{
.page__fixed-stack--top .column-element:has(.menu-element__wrapper)
{
grid-template-columns: minmax(0, 1fr) calc(3 * var(--adn-header-cell)) var(--adn-header-cell) !important;
}
}

/* 33b. Title band: eyebrow BILLING, fixed INVOICES title; the band closes
   with its own line now that there is no count line under the title */
.adn-inv-page .adn-jobs-title::before { content: "BILLING"; }

.adn-inv-page .adn-jobs-title
{
padding-bottom: clamp(28px, 4vh, 44px) !important;
border-bottom: 1px solid var(--adn-border);
}

/* 33c. To invoice table */
.adn-toinv-table.job-listing-table :is(th, td):nth-child(1) { width: 16%; }
.adn-toinv-table.job-listing-table :is(th, td):nth-child(2) { width: 46%; }
.adn-toinv-table.job-listing-table :is(th, td):nth-child(3) { width: 10%; }
.adn-toinv-table.job-listing-table :is(th, td):nth-child(4) { width: 13%; }
.adn-toinv-table.job-listing-table :is(th, td):nth-child(5) { width: 15%; }

/* job: the dark two-line subject, like the Job Listing */
.adn-toinv-table.job-listing-table td:nth-child(2) a
{
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
color: var(--adn-ink) !important;
text-decoration: none !important;
}

/* received in mono */
.adn-toinv-table.job-listing-table td:nth-child(4) :is(span, p)
{
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
}

/* action: the header cell stays empty; the link reads as a green mono action */
.adn-toinv-table.job-listing-table th:nth-child(5) * { color: transparent !important; }

/* a filled green button (like + ADD MODEL), so it reads as an action, not data */
.adn-toinv-table.job-listing-table td:nth-child(5) a
{
display: inline-flex !important;
align-items: center;
gap: 14px;
min-height: 36px;
box-sizing: border-box;
padding: 0 0 0 14px !important;
border: 1px solid var(--adn-accent) !important;
background: var(--adn-accent) !important;
font: 500 11px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
color: var(--adn-ink) !important;
transition: background-color var(--adn-fade), border-color var(--adn-fade), color var(--adn-fade);
}

/* arrow in its own cell behind a dashed divider, like the VIEW JOBS button */
.adn-toinv-table.job-listing-table td:nth-child(5) a::after
{
content: "→";
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
width: 34px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 15px/1 var(--adn-geist);
}

/* hovering the row: the button stays green (rows only tint, section 22);
   hovering the button itself: charcoal with light text (beats 22's dark text) */
.page .adn-toinv-table.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]) td:nth-child(5) a:hover
{
background: var(--adn-ink) !important;
border-color: var(--adn-ink) !important;
}

.page .adn-toinv-table.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td:nth-child(5) a:hover,
.page .adn-toinv-table.job-listing-table :is(tr, [role="row"]):has(a[href*="/job-detail/"]):hover td:nth-child(5) a:hover *
{
color: var(--adn-canvas) !important;
--body-text-color: var(--adn-canvas) !important;
}

.page .adn-toinv-table.job-listing-table td:nth-child(5) a:hover::after { border-left-color: rgba(247, 247, 241, .45); }

/* the row's own hover arrow is not needed next to the action */
.adn-toinv-table.job-listing-table :is(tr, [role="row"]) td:last-child::after { display: none !important; }

/* 33d. Invoices table */
.adn-inv-table.job-listing-table :is(th, td):nth-child(1) { width: 11%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(2) { width: 9%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(3) { width: 12%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(4) { width: 28%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(5) { width: 9%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(6) { width: 9%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(7) { width: 9%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(8) { width: 13%; }

/* invoice no, date and the three amounts in mono */
.adn-inv-table.job-listing-table td:is(:nth-child(1), :nth-child(2), :nth-child(5), :nth-child(6), :nth-child(7)) :is(span, p)
{
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
}

.adn-inv-table.job-listing-table td:nth-child(1) :is(span, p) { color: var(--adn-ink) !important; }

/* amounts right-aligned, headers too */
.adn-inv-table.job-listing-table :is(th, td):is(:nth-child(5), :nth-child(6), :nth-child(7)),
.adn-inv-table.job-listing-table :is(th, td):is(:nth-child(5), :nth-child(6), :nth-child(7)) *
{
text-align: right !important;
justify-content: flex-end !important;
}

/* job: dark two-line subject */
.adn-inv-table.job-listing-table td:nth-child(4) a
{
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
color: var(--adn-ink) !important;
text-decoration: none !important;
}

/* status: filled chip in its colour, the same as the Job Listing (21a) */
.adn-inv-table.job-listing-table td:nth-child(8) .ab-tag
{
position: relative;
isolation: isolate;
display: inline-flex !important;
align-items: center;
margin: 0 !important;
padding: 6px 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
font: 500 11px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
color: var(--adn-ink) !important;
}

.adn-inv-table.job-listing-table td:nth-child(8) .ab-tag::after
{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--tag-background-color, #f5f5f5);
filter: saturate(1.9) brightness(.93);
}

/* 33e. Phones: each table gets its own card layout */
@media (max-width: 700px)
{
.page .adn-toinv-table.job-listing-table tbody tr
{
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"cl ty"
"su su"
"da ac";
}

.page .adn-toinv-table.job-listing-table tbody td:nth-child(1) { grid-area: cl; }
.page .adn-toinv-table.job-listing-table tbody td:nth-child(2) { grid-area: su; }
.page .adn-toinv-table.job-listing-table tbody td:nth-child(3) { grid-area: ty; justify-self: end; }
.page .adn-toinv-table.job-listing-table tbody td:nth-child(4) { grid-area: da; }
.page .adn-toinv-table.job-listing-table tbody td:nth-child(5) { grid-area: ac; justify-self: end; }

.page .adn-inv-table.job-listing-table tbody tr
{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"no dt st"
"su su su"
"cl cl cl"
"am rc bl";
}

.page .adn-inv-table.job-listing-table tbody td:nth-child(1) { grid-area: no; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(2) { grid-area: dt; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(3) { grid-area: cl; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(4) { grid-area: su; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(5) { grid-area: am; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(6) { grid-area: rc; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(7) { grid-area: bl; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(8) { grid-area: st; justify-self: end; }

/* no "·" separator from the Job Listing cards */
.page :is(.adn-toinv-table, .adn-inv-table).job-listing-table tbody td::before { content: none !important; }

/* text sizes: job is the headline, everything else small */
.page :is(.adn-toinv-table, .adn-inv-table).job-listing-table tbody td :is(p, span, a)
{
font: 500 12px/1.35 var(--adn-geist) !important;
letter-spacing: 0;
color: rgba(38, 38, 38, .72) !important;
}

.page .adn-toinv-table.job-listing-table tbody td:nth-child(2) a,
.page .adn-inv-table.job-listing-table tbody td:nth-child(4) a
{
font: 500 16px/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: var(--adn-ink) !important;
}

.page .adn-toinv-table.job-listing-table tbody td:nth-child(5) a { color: var(--adn-ink) !important; font-size: 11px !important; }

/* amounts: small label above each, values left-aligned in the card */
.page .adn-inv-table.job-listing-table tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7)),
.page .adn-inv-table.job-listing-table tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7)) *
{
text-align: left !important;
justify-content: flex-start !important;
}

.page .adn-inv-table.job-listing-table tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7))::before
{
display: block;
margin-bottom: 2px;
font: 500 10px/1.2 var(--adn-geist);
color: var(--adn-muted);
}

.page .adn-inv-table.job-listing-table tbody td:nth-child(5)::before { content: "AMOUNT USD" !important; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(6)::before { content: "RECEIVED" !important; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(7)::before { content: "BALANCE" !important; }
.page .adn-inv-table.job-listing-table tbody td:nth-child(7) :is(p, span) { color: var(--adn-ink) !important; }
}

/* ==========================================================================
   34. LOGIN PAGE (/, page "login") — Heron-style
   Bordered full-screen frame (the shared header is hidden on this page):
   brand bar (.adn-login-bar) -> body (.adn-login-body): blank left panel
   (.adn-login-art, company caption only) | sign-in panel (.adn-login-panel:
   title + Baserow's own login form .adn-login-form).
   Wrong email/password: Baserow's error box is moved above LOG IN and
   restyled as one red mono line; both fields get a red underline. The JS
   block "ADN Login page" hides it again as soon as the user types.
   34a. Frame   34b. Brand bar   34c. Panels   34d. Fields
   34e. Error   34f. Log in row   34g. Phones
   ========================================================================== */

/* 34a. Frame */
.page__content:has(.adn-login)
{
background: var(--adn-canvas) !important;
margin: 7px !important;
padding: 0 !important;
border: 1px solid var(--adn-border);
box-sizing: border-box;
}

.page__content:has(.adn-login) > .element__wrapper,
.adn-login .element__wrapper
{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
--element-padding-top: 0px !important;
--element-padding-bottom: 0px !important;
--element-padding-left: 0px !important;
--element-padding-right: 0px !important;
--element-margin-top: 0px !important;
--element-margin-bottom: 0px !important;
--element-background-radius: 0px !important;
--element-border-radius: 0px !important;
background: transparent !important;
}

.page__content:has(.adn-login) > .element__wrapper > .element__inner-wrapper,
.adn-login .element__inner-wrapper
{
width: 100% !important;
max-width: none !important;
}

.adn-login
{
--lx: clamp(20px, 2.8vw, 40px);
display: flex !important;
flex-direction: column;
min-height: calc(100vh - 16px);
}

/* 34b. Brand bar: company name | STAFF ACCESS */
.adn-login-bar
{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 58px;
padding: 0 26px !important;
border-bottom: 1px solid var(--adn-border);
}

.adn-login-bar > .element__wrapper { width: auto !important; }

.adn-login-brand p
{
margin: 0 !important;
font: 700 20px/1.1 var(--adn-grotesk) !important;
letter-spacing: -.035em;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

.adn-login-tag p
{
margin: 0 !important;
font: 500 12px/1.4 var(--adn-geist) !important;
text-transform: uppercase;
color: var(--adn-text) !important;
}

/* 34c. Panels: blank left | sign-in right, filling the frame */
.adn-login > .element__wrapper:has(.adn-login-body)
{
flex: 1;
display: flex;
}

.adn-login > .element__wrapper:has(.adn-login-body) > .element__inner-wrapper
{
display: flex;
flex: 1;
}

.adn-login-body
{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
flex: 1;
}

.adn-login-body > .element__wrapper,
.adn-login-body > .element__wrapper > .element__inner-wrapper
{
height: 100%;
}

.adn-login-body > .element__wrapper:has(.adn-login-art)
{
border-right: 1px solid var(--adn-border);
}

.adn-login-art
{
display: flex !important;
flex-direction: column;
justify-content: flex-end;
height: 100%;
box-sizing: border-box;
padding: 24px 26px !important;
}

.adn-login-caption p
{
margin: 0 !important;
font: 500 11px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
color: var(--adn-muted) !important;
}

.adn-login-panel
{
display: flex !important;
flex-direction: column;
justify-content: center;
height: 100%;
}

.adn-login-title
{
padding: clamp(40px, 8vh, 96px) var(--lx) 28px !important;
}

.adn-login-title h1
{
margin: 0 !important;
font: 700 clamp(44px, 5vw, 72px)/.95 var(--adn-grotesk) !important;
letter-spacing: -.03em !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

/* 34d. Fields: floating labels, the same as Add Job (9e): the big grey label
   rests in the empty field and slides up to a small label on focus or once a
   value is typed. Baserow's placeholder text is hidden so only the label shows. */
.adn-login-form form
{
display: flex;
flex-direction: column;
border-top: 1px solid var(--adn-border);
}

.adn-login-form .ab-form-group
{
order: 1;
position: relative !important;
box-sizing: border-box;
min-height: 92px;
margin: 0 !important;
padding: 0 var(--lx) !important; /* the input fills the cell, so a click anywhere in it starts typing */
border-bottom: 1px solid var(--adn-border);
transition: box-shadow var(--adn-fade);
}

.adn-login-form .ab-form-group__label
{
position: absolute !important;
top: 16px;
left: var(--lx);
right: var(--lx);
z-index: 1;
margin: 0 !important;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font: 600 11px/1.2 var(--adn-grotesk) !important;
letter-spacing: .01em;
text-transform: uppercase;
color: var(--adn-muted) !important;
transition: top .24s cubic-bezier(.22, .61, .36, 1), font-size .24s cubic-bezier(.22, .61, .36, 1), color .24s cubic-bezier(.22, .61, .36, 1);
}

.adn-login-form .ab-form-group__label span { color: inherit !important; }

/* empty and not focused: the label is the big grey title of the cell */
.adn-login-form .ab-form-group:has(.ab-input:placeholder-shown):not(:focus-within) .ab-form-group__label
{
top: 36px;
font-size: clamp(17px, 1.45vw, 20px) !important;
letter-spacing: -.01em;
color: var(--adn-disable) !important;
}

.adn-login-form .ab-input
{
width: 100% !important;
height: auto !important;
min-height: 92px !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 38px 0 16px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
background: transparent !important;
font: 500 clamp(17px, 1.45vw, 20px)/1.2 var(--adn-grotesk) !important;
color: var(--adn-ink) !important;
}

.adn-login-form .ab-input::placeholder { color: transparent !important; }

.adn-login-form .ab-form-group:focus-within
{
box-shadow: inset 0 -2px 0 var(--adn-accent);
}

/* empty required field: red line only (message kept for screen readers) */
.adn-login-form .ab-form-group[data-form-error="true"]
{
box-shadow: inset 0 -2px 0 #e44424;
}

.adn-login-form :is(.ab-form-group__error-message, .control--error > .control__messages)
{
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}

/* 34e. Wrong email or password: Baserow's error box (the only other child
   of the form), moved above LOG IN and reworded */
.adn-login-form form > :not(.ab-form-group):not(.auth-form__footer)
{
order: 2;
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 16px var(--lx) !important;
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: rgba(228, 68, 36, .06) !important;
}

.adn-login-form form > :not(.ab-form-group):not(.auth-form__footer) > * { display: none !important; }

.adn-login-form form > :not(.ab-form-group):not(.auth-form__footer)::before
{
content: "";
flex: 0 0 8px;
width: 8px;
height: 8px;
background: #e44424;
}

.adn-login-form form > :not(.ab-form-group):not(.auth-form__footer)::after
{
content: "INCORRECT EMAIL OR PASSWORD. PLEASE TRY AGAIN.";
font: 500 12px/1.4 var(--adn-geist);
color: #c2381c;
}

.adn-login-form form:not([data-adn-err-hide]):has(> :not(.ab-form-group):not(.auth-form__footer)) .ab-form-group
{
box-shadow: inset 0 -2px 0 #e44424;
}

/* typing again clears it (set by the JS) */
.adn-login-form form[data-adn-err-hide] > :not(.ab-form-group):not(.auth-form__footer) { display: none !important; }

/* 34f. LOG IN: full-width green row with the arrow */
.adn-login-form .auth-form__footer
{
order: 3;
margin: 0 !important;
padding: 0 !important;
}

.adn-login-form .auth-form__footer button
{
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100% !important;
min-height: 76px;
margin: 0 !important;
padding: 0 64px 0 var(--lx) !important;
border: 0 !important;
border-bottom: 1px solid var(--adn-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
color: var(--adn-ink) !important;
font: 600 clamp(18px, 1.6vw, 22px)/1 var(--adn-grotesk) !important;
text-transform: uppercase;
}

.adn-login-form .auth-form__footer button span { font: inherit !important; color: inherit !important; }

.adn-login-form .auth-form__footer button::after
{
content: "→";
position: absolute;
right: var(--lx);
top: 50%;
transform: translateY(-50%);
font: 400 20px/1 var(--adn-geist);
}

.adn-login-form .auth-form__footer button:focus-visible
{
outline: 2px solid var(--adn-ink) !important;
outline-offset: -4px;
}

/* 34g. Phones: no left panel, smaller brand */
@media (max-width: 700px)
{
.adn-login-body { grid-template-columns: minmax(0, 1fr); }
.adn-login-body > .element__wrapper:has(.adn-login-art) { display: none !important; }
.adn-login-bar { padding: 0 16px !important; }
.adn-login-brand p { font-size: 14px !important; }
.adn-login-tag p { font-size: 10px !important; }
.adn-login-panel { justify-content: flex-start; }
}

/* ==========================================================================
   35. ADD JOB: CLICK ANYWHERE IN A TEXT CELL
   The text input fills its whole cell (its padding replaces the cell's), so
   a click anywhere in the box starts typing, not only on the middle strip.
   Looks the same as 9e / 27b. Text fields only: dropdown cells keep their
   own layout (9f). Same idea as the login fields (34d).
   ========================================================================== */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:has(.ab-input):not(:has(.ab-dropdown))
{
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:not(:has(.ab-dropdown)) .ab-input
{
min-height: var(--adn-field-row) !important;
box-sizing: border-box !important;
padding: 38px 0 16px !important;
}

@media (max-width: 700px)
{
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button) .ab-form-group:not(:has(.ab-dropdown)) .ab-input
{
padding: 30px 0 10px !important;
}
}

/* ==========================================================================
   36. ALIGNMENT FIXES: Invoices cards on phones, Today's incoming jobs
   36a. Invoices: ACTION header text hidden (desktop)
   36b. Invoices phones: tabs fill the strip
   36c. Invoices phones: own card grids (the Job Listing's 25d card rules
        no longer leak in: no row arrow, no right-aligned cells)
   36d. Today's incoming jobs: date and title share one baseline (desktop),
        date above a two-line title on one left edge (phones)
   ========================================================================== */

/* 36a. */
.adn-toinv-table.job-listing-table th:nth-child(5)
{
font-size: 0 !important;
color: transparent !important;
}

@media (max-width: 700px)
{
/* 36b. */
.adn-inv-page .adn-jobs-strip > a
{
flex: 1 1 auto !important;
justify-content: center;
}

.adn-inv-page .adn-jobs-strip > a:last-child { border-right: 0 !important; }

/* 36c. Shared: no Job Listing row arrow, every cell starts at the left */
.page :is(.adn-toinv-table, .adn-inv-table).job-listing-table tbody tr::after
{
content: none !important;
display: none !important;
}

.page :is(.adn-toinv-table, .adn-inv-table).job-listing-table tbody td
{
display: block !important;
justify-self: stretch !important;
align-self: start;
text-align: left !important;
}

.page :is(.adn-toinv-table, .adn-inv-table).job-listing-table tbody td:last-child { padding: 0 !important; }

.page :is(.adn-toinv-table, .adn-inv-table).job-listing-table tbody td .ab-table__cell-content
{
display: block !important;
text-align: left !important;
}

/* block text so neighbouring cells line up on the same top edge */
.page :is(.adn-toinv-table, .adn-inv-table).job-listing-table tbody td .ab-text { display: block !important; }

/* To invoice card:
   client ............ type
   job title (2 lines)
   received date
   [ RECORD INVOICE          -> ]  */
.page .adn-toinv-table.job-listing-table tbody tr
{
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"cl ty"
"su su"
"da da"
"ac ac" !important;
row-gap: 8px !important;
}

.page .adn-toinv-table.job-listing-table tbody td:nth-child(1) :is(p, span)
{
display: block !important;
overflow: hidden;
white-space: nowrap !important;
text-overflow: ellipsis;
}

.page .adn-toinv-table.job-listing-table tbody td:nth-child(3)
{
justify-self: end !important;
text-align: right !important;
}

.page .adn-toinv-table.job-listing-table tbody td:nth-child(4) :is(p, span)
{
white-space: nowrap !important;
}

.page .adn-toinv-table.job-listing-table tbody td:nth-child(5) { margin-top: 6px !important; }

.page .adn-toinv-table.job-listing-table tbody td:nth-child(5) a
{
display: flex !important;
width: 100% !important;
box-sizing: border-box;
justify-content: space-between !important;
min-height: 44px;
}

/* Invoice card:
   invoice no | date | ........ status
   job title (2 lines)
   client
   AMOUNT USD | RECEIVED | BALANCE   */
.page .adn-inv-table.job-listing-table tbody tr
{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-areas:
"no dt st"
"su su su"
"cl cl cl"
"am rc bl" !important;
row-gap: 8px !important;
}

.page .adn-inv-table.job-listing-table tbody td:is(:nth-child(1), :nth-child(2)) { align-self: center !important; }

.page .adn-inv-table.job-listing-table tbody td:nth-child(8)
{
justify-self: end !important;
align-self: center;
}

.page .adn-inv-table.job-listing-table tbody td:nth-child(3) :is(p, span)
{
display: block !important;
overflow: hidden;
white-space: nowrap !important;
text-overflow: ellipsis;
}

.page .adn-inv-table.job-listing-table tbody td:is(:nth-child(5), :nth-child(6), :nth-child(7))
{
margin-top: 6px !important;
}

/* empty amount: the faint dash sits under its label, on the left */
.page .adn-inv-table.job-listing-table tbody td .ab-table__cell-content:has(> .ab-text:empty)::after,
.page .adn-inv-table.job-listing-table tbody td .ab-table__cell-content:empty::after
{
display: block;
text-align: left !important;
}
}

/* 36d. Today's incoming jobs: the date gets the title's line box, so both
   sit on the same baseline (15.5px: the mono font's baseline offset) */
.adn-today-list .element__wrapper:has(> .element__inner-wrapper > .adn-today-date)
{
top: 15.5px !important;
transform: none !important;
}

.adn-today-list .adn-today-date.adn-today-date,
.adn-today-list .adn-today-date.adn-today-date p
{
padding: 0 !important;
line-height: 20.8px !important;
}

@media (max-width: 700px)
{
.adn-today-list .repeat-element__repeated-element.repeat-element__repeated-element
{
padding-top: 0 !important;
}

/* date above the title, both on the row's left edge */
.adn-today-list .element__wrapper:has(> .element__inner-wrapper > .adn-today-date)
{
position: absolute !important;
left: var(--ov-x, 18px) !important;
top: 14px !important;
transform: none !important;
}

.adn-today-list .adn-today-date.adn-today-date,
.adn-today-list .adn-today-date.adn-today-date p
{
line-height: 16px !important;
}

/* title: two lines at most, with room under the date and beside the arrow;
   the bottom space is a transparent border, so a clamped third line can't
   show through it */
.adn-today-list .repeat-element__repeated-element:has(.adn-today-date) .adn-today-item a,
.adn-today-list .adn-today-item a
{
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: normal !important;
padding: 38px 48px 0 var(--ov-x, 18px) !important;
border-bottom: 14px solid transparent !important;
max-height: none !important;
height: auto !important;
}
}

/* ==========================================================================
   37. OVERVIEW RESOURCES: one cell
   The SIRIM, MITI and DagangNet boxes become one row of links (no
   "RESOURCES · ..." labels); on phones the links wrap inside the same
   cell. Contact stays below in its own row. CSS only: the elements are
   unchanged in the editor.
   ========================================================================== */

.adn-overview-footer.adn-overview-footer.adn-overview-footer
{
display: flex !important;
flex-wrap: wrap !important;
align-items: center;
gap: 0 !important;
}

/* the three resource boxes sit side by side with no lines between them */
.adn-overview-footer.adn-overview-footer.adn-overview-footer > .element__wrapper:nth-child(-n+3)
{
flex: 0 0 auto !important;
width: auto !important;
border: 0 !important;
}

/* contact: full width on its own row */
.adn-overview-footer.adn-overview-footer.adn-overview-footer > .element__wrapper:has(.adn-ft-col--address)
{
flex: 0 0 100% !important;
width: 100% !important;
border-left: 0 !important;
border-top: 1px solid var(--adn-border) !important;
}

/* no group labels */
.adn-overview-footer.adn-overview-footer.adn-overview-footer .adn-ft-col:not(.adn-ft-col--address) > .element__wrapper:has(.adn-ft-label)
{
display: none !important;
}

/* links in a row; the same gap between links and between groups */
.adn-overview-footer.adn-overview-footer.adn-overview-footer .adn-ft-col:not(.adn-ft-col--address)
{
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: var(--ov-x) !important;
row-gap: 12px !important;
padding: 24px 0 24px var(--ov-x) !important;
}

.adn-overview-footer.adn-overview-footer.adn-overview-footer .adn-ft-col:not(.adn-ft-col--address) > .element__wrapper
{
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
}

/* phones: tighter rows, so wrapped lines read as one cell */
@media (max-width: 700px)
{
.adn-overview-footer.adn-overview-footer.adn-overview-footer
{
padding-top: 10px !important;
}

.adn-overview-footer.adn-overview-footer.adn-overview-footer .adn-ft-col:not(.adn-ft-col--address)
{
padding: 8px 0 8px var(--ov-x) !important;
}

.adn-overview-footer.adn-overview-footer.adn-overview-footer > .element__wrapper:has(.adn-ft-col--address)
{
margin-top: 10px !important;
}
}

/* ==========================================================================
   38. PHONES: MENU dropdown above the page tabs
   The tab strips (Job Listing job types, Invoices views) stick under the
   header with z-index 4, above the header's 3, so the MENU dropdown opened
   behind them. The header now sits above them (still below toasts, 10).
   ========================================================================== */

@media (max-width: 700px)
{
.page__fixed-stack.page__fixed-stack--top
{
z-index: 6 !important;
}
}

/* ==========================================================================
   39. JOB DETAIL: STATUS TRACK (brought back)
   Built by the JS block "ADN Job Detail progress", above the tabs: an open
   line with four square markers New -> Reviewing -> In progress ->
   Completed. The current point shows the real status as a chip in its
   database colour (--st-bg, copied from the status badge, same filter as
   the Job Listing chips). Cancelled: the track greys out and a Cancelled
   chip sits above it.
   ========================================================================== */

.adn-stage
{
margin: 0;
padding: 6px var(--jd-x, 24px) 30px;
}

/* head row: only shown for a cancelled job */
.adn-stage-head
{
display: none;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin: 0 0 16px;
}

.adn-stage[data-kind="cancel"] .adn-stage-head { display: flex; }

.adn-stage ol
{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}

.adn-stage li
{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
min-width: 0;
padding-right: 14px;
}

/* square markers on the line */
.adn-stage-mk
{
position: relative;
z-index: 1;
width: 12px;
height: 12px;
box-sizing: border-box;
border: 1px solid var(--adn-border);
background: var(--adn-canvas);
}

.adn-stage li.past .adn-stage-mk
{
border-color: var(--adn-accent);
background: var(--adn-accent);
}

/* current point: bigger square in the status colour, blinking centre */
.adn-stage li.cur .adn-stage-mk
{
width: 16px;
height: 16px;
margin: -2px 0 -2px -2px;
border-color: var(--adn-ink);
background: var(--mk-bg);
filter: saturate(1.9) brightness(.93);
}

.adn-stage li.cur .adn-stage-mk::after
{
content: "";
position: absolute;
inset: 4px;
background: var(--adn-ink);
animation: adnStageBlink 1.1s steps(1) infinite;
}

@keyframes adnStageBlink { 50% { opacity: .15; } }

/* the current marker takes the status colour */
.adn-stage { --mk-bg: var(--st-bg, #e2e2da); }

/* the line: dashed ahead, green once passed */
.adn-stage-ln
{
position: absolute;
top: 5px;
left: 12px;
right: 0;
height: 2px;
background: repeating-linear-gradient(90deg, var(--adn-border) 0 6px, transparent 6px 11px);
}

.adn-stage li:last-child .adn-stage-ln { display: none; }

.adn-stage-ln i
{
position: absolute;
inset: 0;
background: var(--adn-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .15s);
}

.adn-stage.is-in li.past .adn-stage-ln i { transform: none; }

/* labels: plain names; the current one becomes the status chip */
.adn-stage-nm
{
font: 500 14px/1.25 var(--adn-grotesk);
letter-spacing: -.01em;
color: var(--adn-disable);
}

.adn-stage li.past .adn-stage-nm { color: var(--adn-ink); }

/* cancelled: track greys out, names struck through */
.adn-stage[data-kind="cancel"] ol { opacity: .55; }
.adn-stage[data-kind="cancel"] .adn-stage-nm { text-decoration: line-through; }

@media (prefers-reduced-motion: reduce)
{
.adn-stage-ln i { transition: none; }
.adn-stage li.cur .adn-stage-mk::after { animation: none; }
}

/* phones: same track, smaller type, the chip may wrap */
@media (max-width: 700px)
{
.adn-stage li { padding-right: 8px; }
.adn-stage-nm { font-size: 12px; letter-spacing: 0; }
.adn-stage li.cur .adn-stage-nm { white-space: normal; font-size: 10px; }
}


/* status chip: same look as the status badge under the title */
.adn-stage .adn-st-chip
{
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
max-width: 100%;
box-sizing: border-box;
padding: 6px 10px;
font: 500 11px/1.2 var(--adn-geist);
letter-spacing: 0;
text-transform: uppercase;
color: var(--adn-ink);
text-decoration: none !important;
}

.adn-stage .adn-st-chip::before
{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--st-bg, #e2e2da);
filter: saturate(1.9) brightness(.93);
}

.adn-stage .adn-stage-head .adn-st-chip:empty { display: none; }

/* ==========================================================================
   40. FEEDBACK: messages, saving state, empty lists
   40a. Messages ("Changes Saved!", errors): Heron-style ruled card under
        the header, a coloured square instead of the round icon
        (green = done, red = failed, amber = warning)
   40b. Saving: a form button shows SAVING... with a moving bar and can't be
        pressed again until the save finishes (JS block "ADN Feedback")
   40c. Empty lists: a short message for the view instead of
        "No items have been found." (text set by the JS)
   ========================================================================== */

/* 40a. Messages */
.ab-toasts__container-top
{
top: 72px !important;
right: 16px !important;
width: 340px !important;
max-width: calc(100vw - 32px);
}

.ab-toast
{
align-items: flex-start !important;
gap: 12px !important;
margin: 0 0 8px !important;
padding: 14px 14px 14px 16px !important;
border: 1px solid var(--adn-ink) !important;
border-radius: 0 !important;
box-shadow: 4px 4px 0 rgba(38, 38, 38, .12) !important;
background: var(--adn-canvas) !important;
}

.ab-toast__icon
{
flex: 0 0 10px !important;
width: 10px !important;
height: 10px !important;
min-width: 0 !important;
margin: 3px 0 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: var(--adn-accent) !important;
}

.ab-toast__icon i { display: none !important; }
.ab-toast__icon[class*="--error"] { background: #e44424 !important; }
.ab-toast__icon[class*="--warning"] { background: #d4b04f !important; }
.ab-toast__icon[class*="--info-neutral"] { background: var(--adn-border) !important; }

.ab-toast__content { flex: 1; min-width: 0; }

.ab-toast__title
{
margin: 0 !important;
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0 !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

.ab-toast__message,
.ab-toast__message *
{
font: 500 13px/1.35 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: rgba(38, 38, 38, .72) !important;
}

.ab-toast__message:has(> div:empty) { display: none !important; }
.ab-toast__message:not(:has(*)):empty { display: none !important; }

.ab-toast__close
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: rgba(38, 38, 38, .55) !important;
line-height: 1 !important;
}

.ab-toast__close:hover { color: var(--adn-ink) !important; }

@media (max-width: 700px)
{
.ab-toasts__container-top
{
top: 66px !important;
right: 8px !important;
left: 8px !important;
width: auto !important;
max-width: none;
}
}

/* 40b. Saving */
button[data-adn-busy]
{
position: relative !important;
pointer-events: none !important;
cursor: progress !important;
}

button[data-adn-busy] > :not(.adn-busy) { visibility: hidden !important; }
button[data-adn-busy]::after { visibility: hidden !important; }

/* busy: no grey 'disabled' look while it works (Baserow disables the button) */
button[data-adn-busy]
{
opacity: 1 !important;
filter: none !important;
}

button .adn-busy
{
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: inherit;
overflow: hidden;
font: inherit;
color: inherit;
letter-spacing: inherit;
text-transform: uppercase;
pointer-events: none;
}

/* a short bar sliding along the bottom edge */
button .adn-busy::after
{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 30%;
height: 3px;
background: currentColor;
opacity: .55;
animation: adnBusyBar 1s ease-in-out infinite;
}

@keyframes adnBusyBar
{
0% { transform: translateX(-100%); }
100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce)
{
button .adn-busy::after { animation: none; width: 100%; opacity: .3; }
}

/* 40c. Empty lists */
.ab-table__empty-state[data-adn-msg]
{
font-size: 0 !important;
}

.ab-table__empty-state[data-adn-msg]::before
{
content: attr(data-adn-msg);
display: block;
padding: 28px 0;
font: 500 12px/1.4 var(--adn-geist);
letter-spacing: 0;
text-transform: uppercase;
color: rgba(38, 38, 38, .6);
}

/* ==========================================================================
   41. COMPANY SWITCHER (header name cell, desktop and phones)
   The header name becomes a switch between ADN INTERNATIONAL SDN BHD and
   ADN TRADING AND SERVICES. The JS block "ADN Company switcher" puts a
   button (.adn-co-switch: name + chevron, only as wide as the name) in the
   name cell, in place of the cell's ::before name, and a dropdown
   (.adn-co-menu) that opens like the phone MENU (section 26): fades in and
   slides down 6px. No hover effect for now. Lists and counts follow the
   ?company= page parameter (intl when empty).
   ========================================================================== */

/* the button carries the name now */
.page__fixed-stack--top .column-element:has(.menu-element__wrapper) > .column-element__column:first-child[data-adn-co]::before
{
content: none !important;
display: none !important;
}

.adn-co-switch
{
display: inline-flex;
align-items: center;
gap: 12px;
max-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 10px 26px;
border: 0;
background: transparent;
font: 700 20px/1.1 var(--adn-grotesk);
letter-spacing: -.035em;
word-spacing: 0;
text-align: left;
text-transform: uppercase;
color: var(--adn-ink);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.adn-co-switch:focus-visible
{
outline: 2px solid var(--adn-ink);
outline-offset: 2px;
}

.adn-co-name { min-width: 0; }

/* chevron: turns over while the dropdown is open */
.adn-co-caret
{
flex: 0 0 7px;
width: 7px;
height: 7px;
margin-top: -4px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .25s cubic-bezier(.16, 1, .3, 1), margin .25s cubic-bezier(.16, 1, .3, 1);
}

.adn-co-switch[aria-expanded="true"] .adn-co-caret
{
margin-top: 4px;
transform: rotate(-135deg);
}

/* dropdown under the name cell, same look and motion as the phone MENU */
.adn-co-menu
{
position: absolute;
top: 100%;
left: -1px;
z-index: 20;
display: grid;
width: 360px;
max-width: calc(100% + 2px);
margin: 1px 0 0;
padding: 0;
border: 1px solid var(--adn-border);
border-top: 0;
background: var(--adn-canvas);
list-style: none;
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
}

.column-element__column[data-adn-co-open] .adn-co-menu
{
visibility: visible;
opacity: 1;
transform: none;
transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

.adn-co-menu li + li { border-top: 1px solid var(--adn-border); }

.adn-co-menu button
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
margin: 0;
padding: 10px 16px;
border: 0;
background: transparent;
font: 500 13px/1.25 var(--adn-geist);
text-transform: uppercase;
text-align: left;
color: var(--adn-ink);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.adn-co-menu button:active
{
background: color-mix(in srgb, var(--adn-canvas) 90%, var(--adn-ink));
}

.adn-co-menu button:focus-visible
{
outline: 2px solid var(--adn-ink);
outline-offset: -2px;
}

/* current company: a small square, like the current page in the MENU */
.adn-co-menu button[aria-current="true"]::after
{
content: "";
flex: 0 0 7px;
width: 7px;
height: 7px;
background: var(--adn-ink);
}

@media (max-width: 700px)
{
.adn-co-switch
{
gap: 10px;
font-size: clamp(13px, 3.8vw, 16px);
line-height: 1.05;
}

/* the dropdown spans the name cell, like MENU spans its own cell */
.adn-co-menu
{
right: -1px;
width: auto;
max-width: none;
}
}

@media (max-width: 600px)
{
.adn-co-switch { padding: 6px; }
}

/* desktop: the options line up with the name */
@media (min-width: 701px)
{
.adn-co-menu button { padding: 10px 26px; }
}

@media (prefers-reduced-motion: reduce)
{
.adn-co-menu,
.column-element__column[data-adn-co-open] .adn-co-menu,
.adn-co-caret { transition: none; }
}

/* ==========================================================================
   42. COMPANY ON JOB PAGES
   42a. Job detail: COMPANY fact under the title (.adn-fact--company)
   42b. Job detail Details form: Company | Remarks share the last row
   42c. Add Job: Company as the last row of the form (desktop grid row 5,
        phones after Priority)
   42d. Add Job artwork caption follows the selected company (the JS block
        "ADN Company switcher" sets data-adn-co on <html>)
   ========================================================================== */

/* 42a. */
.adn-fact--company::before { content: "COMPANY"; }

/* 42b. */
.adn-detail-fields > .element__wrapper:has(.adn-df--company) { grid-column: span 2; }
.adn-detail-fields > .element__wrapper:has(.adn-df--remarks) { grid-column: span 4; }

@media (min-width: 561px)
{
.adn-detail-fields > .element__wrapper:has(.adn-df--remarks)
{
border-left: 1px solid var(--adn-border) !important;
}
}

@media (max-width: 560px)
{
.adn-detail-fields > .element__wrapper:has(:is(.adn-df--company, .adn-df--remarks)) { grid-column: 1 / -1; }
}

/* 42c. */
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(8)
{
grid-column: 1 / -1;
grid-row: 5;
}

@media (max-width: 700px)
{
.page__content:has(.adn-job-art) .element:has(> .form-container-element__submit-button):has(input[placeholder="Enter email subject"]) > div:first-child > .element__wrapper:nth-child(8)
{
order: 8;
}
}

/* 42d. */
html[data-adn-co="trading"] .page__content:has(.adn-job-art) .element__wrapper:has(> .element__inner-wrapper > .adn-job-art):not(:has(.form-container-element__submit-button))::before
{
content: "ADN TRADING AND SERVICES" !important;
}

/* ==========================================================================
   43. ADN TRADING AND SERVICES COLOURS
   When ADN Trading and Services is selected (html[data-adn-co="trading"],
   set by the JS block "ADN Company switcher"), the green accent becomes
   orange everywhere it is used: buttons (View Jobs, Add Job, Save, Log
   in rows...), RECORD INVOICE, the chart line, status track, accent text
   and message squares. Status colours from the database stay as they are.
   The pixel hover fills are re-coloured by the JS block
   "ADN Company colours".
   ========================================================================== */

html[data-adn-co="trading"],
html[data-adn-co="trading"] .page__content,
html[data-adn-co="trading"] .page__content:has(.adn-overview-hero)
{
--adn-accent: #f2a65e;
--adn-accent-hover: #ec9443;
--ov-green-text: #b35f17;
--jd-hover-text: #b35f17;          /* job detail tab hover text */
}

/* the job status track (section 39) keeps its green for both companies */
html[data-adn-co="trading"] .adn-stage
{
--adn-accent: #a8c28e;
}

/* Speed-up (stage 2/3): the Add Model field rules used [class*="adn-amf-"]
   inside :has(), which made the browser re-check whole pages on every
   change (about 6 ms per change on the Main Listing). They now list the
   five field classes instead (same result, about 0.01 ms). Unused rules for
   the old header dropdown and the "+ New model" link were removed. */

/* ==========================================================================
   44. FINANCE: QUOTATIONS + INVOICES
   44a. Header: Finance dropdown (Quotation | Invoice), same look and motion
        as the company switcher (41); phone MENU: Finance label + two items
   44b. Finance page (/invoices?doc=quotation|invoice): ADD QUOTATION row,
        Invoice No / Quotation No read as mono links
   44c. Quotations table: desktop columns, phone cards
   44d. Form pages (/quotation-form, /invoice-form): title band and the field
        grid (No | Date | Amount, Job/Client | Quotation/Job, Description,
        payment row)
   ========================================================================== */

/* 44a. Header dropdown */
.adn-header-nav { position: relative; }

.adn-fin-menu
{
position: absolute;
top: 100%;
z-index: 20;
display: grid;
width: 240px;
margin: 1px 0 0;
padding: 0;
border: 1px solid var(--adn-border);
border-top: 0;
background: var(--adn-canvas);
list-style: none;
visibility: hidden;
opacity: 0;
transform: translateY(-6px);
transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
}

.adn-fin-menu.on
{
visibility: visible;
opacity: 1;
transform: none;
transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

.adn-fin-menu li + li { border-top: 1px solid var(--adn-border); }

.adn-fin-menu button
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
margin: 0;
padding: 10px 16px;
border: 0;
background: transparent;
font: 500 13px/1.25 var(--adn-geist);
text-transform: uppercase;
text-align: left;
color: var(--adn-ink);
cursor: pointer;
}

.adn-fin-menu button:active { background: color-mix(in srgb, var(--adn-canvas) 90%, var(--adn-ink)); }
.adn-fin-menu button:focus-visible { outline: 2px solid var(--adn-ink); outline-offset: -2px; }

.adn-fin-menu button[aria-current="true"]::after
{
content: "";
flex: 0 0 7px;
width: 7px;
height: 7px;
background: var(--adn-ink);
}

@media (max-width: 700px) { .adn-fin-menu { display: none; } }

@media (prefers-reduced-motion: reduce) { .adn-fin-menu, .adn-fin-menu.on { transition: none; } }

/* phone MENU: Finance as a label, Quotation / Invoice indented under it */
.adn-mmenu-panel .adn-mmenu-label
{
display: flex;
align-items: center;
min-height: 40px;
padding: 0 16px;
border-top: 1px solid var(--adn-border);
font: 500 11px/1 var(--adn-geist);
text-transform: uppercase;
color: var(--adn-muted);
}

.adn-mmenu-panel a.sub
{
padding-left: 32px !important;
border-top: 1px dashed var(--adn-border) !important;
}

.adn-mmenu-panel .adn-mmenu-label + a.sub { border-top: 0 !important; }

/* 44b. Finance page: ADD QUOTATION under the title */
.adn-inv-page:has(> .element__wrapper .adn-fin-add) .adn-jobs-title
{
padding-bottom: 20px !important;
border-bottom: 0 !important;
}

.adn-inv-page .element__wrapper:has(> .element__inner-wrapper > .adn-fin-add)
{
display: flex;
justify-content: center;
padding: 0 0 clamp(24px, 3.5vh, 36px) !important;
border-bottom: 1px solid var(--adn-border);
}

.adn-fin-add a
{
display: inline-flex !important;
align-items: center;
min-height: 40px;
margin: 0 !important;
padding: 0 0 0 16px !important;
border: 1px solid var(--adn-accent) !important;
border-radius: 0 !important;
background: var(--adn-accent) !important;
font: 500 12px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none !important;
color: var(--adn-ink) !important;
}

.adn-fin-add a::after
{
content: "+";
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
align-self: stretch;
margin-left: 16px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 16px/1 var(--adn-geist);
}

/* Invoice No / Quotation No: mono links to the form page */
.page :is(.adn-inv-table, .adn-quo-table).job-listing-table td:nth-child(1) a
{
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
color: var(--adn-ink) !important;
text-decoration: underline !important;
text-decoration-color: var(--adn-border) !important;
text-underline-offset: 3px;
}

.page :is(.adn-inv-table, .adn-quo-table).job-listing-table td:nth-child(1) a:hover
{
text-decoration-color: var(--adn-ink) !important;
}

/* 44c. Quotations table */
.adn-quo-table.job-listing-table :is(th, td):nth-child(1) { width: 12%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(2) { width: 10%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(3) { width: 17%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(4) { width: 25%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(5) { width: 11%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(6) { width: 15%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(7) { width: 10%; }

.adn-quo-table.job-listing-table td:is(:nth-child(2), :nth-child(5)) :is(span, p)
{
font: 500 12px/1.4 var(--adn-geist) !important;
letter-spacing: 0;
}

.adn-quo-table.job-listing-table :is(th, td):nth-child(5),
.adn-quo-table.job-listing-table :is(th, td):nth-child(5) *
{
text-align: right !important;
justify-content: flex-end !important;
}

.adn-quo-table.job-listing-table td:is(:nth-child(4), :nth-child(6)) :is(a, p, span)
{
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
}

.adn-quo-table.job-listing-table td:nth-child(6) a
{
color: var(--adn-ink) !important;
text-decoration: none !important;
}

/* Invoiced: filled chip, like the invoice Status */
.adn-quo-table.job-listing-table td:nth-child(7) .ab-tag
{
position: relative;
isolation: isolate;
display: inline-flex !important;
align-items: center;
margin: 0 !important;
padding: 6px 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
font: 500 11px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
color: var(--adn-ink) !important;
}

.adn-quo-table.job-listing-table td:nth-child(7) .ab-tag::after
{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--tag-background-color, #f5f5f5);
filter: saturate(1.9) brightness(.93);
}

.adn-quo-table.job-listing-table :is(tr, [role="row"]) td:last-child::after { display: none !important; }

@media (max-width: 700px)
{
.page .adn-quo-table.job-listing-table tbody tr::after { content: none !important; display: none !important; }

.page .adn-quo-table.job-listing-table tbody tr
{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
grid-template-areas:
"no dt st"
"de de de"
"cl cl am"
"jb jb jb" !important;
row-gap: 8px !important;
}

.page .adn-quo-table.job-listing-table tbody td
{
display: block !important;
justify-self: stretch !important;
align-self: start;
text-align: left !important;
}

.page .adn-quo-table.job-listing-table tbody td::before { content: none !important; }
.page .adn-quo-table.job-listing-table tbody td:last-child { padding: 0 !important; }
.page .adn-quo-table.job-listing-table tbody td .ab-table__cell-content { display: block !important; text-align: left !important; }
.page .adn-quo-table.job-listing-table tbody td .ab-text { display: block !important; }

.page .adn-quo-table.job-listing-table tbody td:nth-child(1) { grid-area: no; align-self: center !important; }
.page .adn-quo-table.job-listing-table tbody td:nth-child(2) { grid-area: dt; align-self: center !important; }
.page .adn-quo-table.job-listing-table tbody td:nth-child(3) { grid-area: cl; }
.page .adn-quo-table.job-listing-table tbody td:nth-child(4) { grid-area: de; }
.page .adn-quo-table.job-listing-table tbody td:nth-child(5) { grid-area: am; justify-self: end !important; }
.page .adn-quo-table.job-listing-table tbody td:nth-child(6) { grid-area: jb; }
.page .adn-quo-table.job-listing-table tbody td:nth-child(7) { grid-area: st; justify-self: end !important; align-self: center !important; }

.page .adn-quo-table.job-listing-table tbody td :is(p, span, a)
{
font: 500 12px/1.35 var(--adn-geist) !important;
letter-spacing: 0;
color: rgba(38, 38, 38, .72) !important;
}

.page .adn-quo-table.job-listing-table tbody td:nth-child(4) :is(p, span)
{
font: 500 16px/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: var(--adn-ink) !important;
}

.page .adn-quo-table.job-listing-table tbody td:is(:nth-child(1), :nth-child(5)) :is(p, span, a) { color: var(--adn-ink) !important; }
}

/* 44d. Form pages */
.adn-fin-form-page .adn-jobs-title::before { content: "FINANCE"; }

.adn-fin-form-page .adn-jobs-title
{
padding-bottom: clamp(28px, 4vh, 44px) !important;
border-bottom: 1px solid var(--adn-border);
}

/* field order: No | Date | Amount, then Job | Source quotation (invoice) or
   Client | Job (quotation), then Description, then the payment row */
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(.adn-inv--no) { order: 1; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(.adn-inv--date) { order: 2; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(.adn-inv--amount) { order: 3; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(:is(.adn-inv--job, .adn-quo--client)) { order: 4; grid-column: span 3; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(:is(.adn-inv--quo, .adn-quo--job)) { order: 5; grid-column: span 3; border-left: 1px solid var(--adn-border) !important; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(.adn-inv--desc) { order: 6; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(.adn-inv--paydate) { order: 7; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(.adn-inv--received) { order: 8; }
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(.adn-inv--paid) { order: 9; }

/* AMOUNT fact on the quotation (the invoice shows BALANCE) */
.adn-inv-fact--amount::before { content: "AMOUNT"; }

@media (max-width: 560px)
{
.adn-fin-form-page .adn-invoice-fields > .element__wrapper:has(:is(.adn-inv--job, .adn-quo--client, .adn-inv--quo, .adn-quo--job))
{
grid-column: 1 / -1;
border-left: 0 !important;
}
}

/* 44e. Fixes after the first look on the live site */
.adn-fin-form-page { --jd-x: clamp(18px, 2.4vw, 32px); }
.adn-inv-fact--company::before { content: "CLIENT"; }
.adn-quo-form-page .adn-invoice-status::before { content: "INVOICE"; }
.adn-inv-page .adn-jobs-title::before { content: "FINANCE"; }
.adn-inv-page .adn-fin-add a { align-self: center !important; }

/* the job page has three tabs now (Details, Models, Attachments) */
.job-detail-tabs .menu-element__container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(4) { width: 22%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(7) { width: 13%; }

/* 44f. Phone MENU: Finance opens its own sub-list, like Heron's MENU.
   The Finance row is a toggle (no page of its own): open, it fills charcoal
   and its corner mark moves from bottom-right to top-right; Quotation and
   Invoice slide open under it on a faint tint, as normal rows. */
.adn-mmenu-panel .adn-mm-sub-btn
{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 48px;
margin: 0;
padding: 0 16px;
border: 0;
border-top: 1px solid var(--adn-border);
overflow: hidden;
background: transparent;
font: 500 13px/1 var(--adn-geist);
text-transform: uppercase;
text-align: left;
color: var(--adn-ink);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color .4s, color .4s;
}

.adn-mmenu-panel .adn-mm-sub-btn[aria-expanded="true"]
{
background: var(--adn-ink);
color: var(--adn-canvas);
}

.adn-mm-ic
{
position: absolute;
right: 6px;
width: 6px;
height: 6px;
box-sizing: border-box;
border-right: 1.5px solid currentColor;
transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}

.adn-mm-ic--bot { bottom: 6px; border-bottom: 1.5px solid currentColor; }
.adn-mm-ic--top { top: 6px; border-top: 1.5px solid currentColor; transform: translate(18px, -18px); }

.adn-mm-sub-btn[aria-expanded="true"] .adn-mm-ic--bot { transform: translate(18px, 18px); }
.adn-mm-sub-btn[aria-expanded="true"] .adn-mm-ic--top { transform: none; }

.adn-mmenu-panel .adn-mm-sub
{
display: grid;
grid-template-rows: 0fr;
background: rgba(38, 38, 38, .04);
transition: grid-template-rows .38s cubic-bezier(.65, 0, .35, 1);
}

.adn-mmenu-panel .adn-mm-sub.on { grid-template-rows: 1fr; }

.adn-mm-sub-inner
{
display: grid;
min-height: 0;
overflow: hidden;
}

@media (prefers-reduced-motion: reduce)
{
.adn-mmenu-panel .adn-mm-sub, .adn-mm-ic, .adn-mmenu-panel .adn-mm-sub-btn { transition: none; }
}
.adn-mmenu-panel .adn-mm-sub-inner a:first-child { border-top: 1px solid var(--adn-border) !important; }

/* 44g. Finance tables: no clickable rows; each row has its own action
   button instead (RECORD INVOICE on To invoice, EDIT on Invoices and
   Quotations). The JS block "Job listing: follow the native subject link"
   skips these three tables. */
.page .job-listing-table:is(.adn-toinv-table, .adn-inv-table, .adn-quo-table) :is(tr, [role="row"]) { cursor: default !important; }
.page .job-listing-table:is(.adn-toinv-table, .adn-inv-table, .adn-quo-table) :is(tr, [role="row"]):hover td,
.page .job-listing-table:is(.adn-toinv-table, .adn-inv-table, .adn-quo-table) tbody tr:active { background: transparent !important; }
.page .job-listing-table:is(.adn-toinv-table, .adn-inv-table, .adn-quo-table) :is(tr, [role="row"]) td:last-child::after { display: none !important; }

/* widths with the new Action column */
.adn-inv-table.job-listing-table :is(th, td):nth-child(1) { width: 10%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(2) { width: 8%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(3) { width: 13%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(4) { width: 22%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(5) { width: 8%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(6) { width: 8%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(7) { width: 8%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(8) { width: 12%; }
.adn-inv-table.job-listing-table :is(th, td):nth-child(9) { width: 11%; }

.adn-quo-table.job-listing-table :is(th, td):nth-child(1) { width: 11%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(2) { width: 9%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(3) { width: 14%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(4) { width: 20%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(5) { width: 10%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(6) { width: 14%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(7) { width: 12%; }
.adn-quo-table.job-listing-table :is(th, td):nth-child(8) { width: 10%; }

/* the Action header stays empty */
.adn-inv-table.job-listing-table th:nth-child(9),
.adn-quo-table.job-listing-table th:nth-child(8) { font-size: 0 !important; color: transparent !important; }

/* Invoice No / Quotation No are plain mono text again */
.adn-quo-table.job-listing-table td:nth-child(1) :is(span, p) { font: 500 12px/1.4 var(--adn-geist) !important; letter-spacing: 0; color: var(--adn-ink) !important; }

/* EDIT: the same green action button as RECORD INVOICE */
.page :is(.adn-inv-table.job-listing-table td:nth-child(9), .adn-quo-table.job-listing-table td:nth-child(8)) a
{
display: inline-flex !important;
align-items: center;
gap: 14px;
min-height: 36px;
box-sizing: border-box;
padding: 0 0 0 14px !important;
border: 1px solid var(--adn-accent) !important;
background: var(--adn-accent) !important;
font: 500 11px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
color: var(--adn-ink) !important;
transition: background-color var(--adn-fade), border-color var(--adn-fade), color var(--adn-fade);
}

.page :is(.adn-inv-table.job-listing-table td:nth-child(9), .adn-quo-table.job-listing-table td:nth-child(8)) a::after
{
content: "\2192";
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
width: 34px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 15px/1 var(--adn-geist);
}

.page :is(.adn-inv-table.job-listing-table td:nth-child(9), .adn-quo-table.job-listing-table td:nth-child(8)) a:hover,
.page :is(.adn-inv-table.job-listing-table td:nth-child(9), .adn-quo-table.job-listing-table td:nth-child(8)) a:hover *
{
background: var(--adn-ink) !important;
border-color: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.page :is(.adn-inv-table.job-listing-table td:nth-child(9), .adn-quo-table.job-listing-table td:nth-child(8)) a:hover * { background: transparent !important; }

@media (max-width: 700px)
{
.page .adn-inv-table.job-listing-table tbody tr
{
grid-template-areas:
"no dt st"
"su su su"
"cl cl cl"
"am rc bl"
"ac ac ac" !important;
}

.page .adn-quo-table.job-listing-table tbody tr
{
grid-template-areas:
"no dt st"
"de de de"
"cl cl am"
"jb jb jb"
"ac ac ac" !important;
}

.page .adn-inv-table.job-listing-table tbody td:nth-child(9),
.page .adn-quo-table.job-listing-table tbody td:nth-child(8) { grid-area: ac; margin-top: 6px !important; }

.page :is(.adn-inv-table.job-listing-table td:nth-child(9), .adn-quo-table.job-listing-table td:nth-child(8)) a
{
display: flex !important;
width: 100% !important;
justify-content: space-between !important;
min-height: 44px;
color: var(--adn-ink) !important;
}
}

/* ==========================================================================
   45. JOB COMPLETION (job page)
   Completed is no longer in the Status dropdown. MARK AS COMPLETED (facts
   row, everyone, until the job is completed) opens a confirmation
   (?complete=1). CONFIRM sets Status = Completed and the Completion Date to
   today, emails Ikmal that the job needs an invoice, and shows "Job
   completed". A completed job shows its status read-only; REOPEN (Admins
   only, set on the element's roles) puts it back to Processing.
   45a. Facts row buttons   45b. Read-only status cell   45c. Confirmation
   ========================================================================== */

/* 45a. MARK AS COMPLETED / REOPEN sit at the right end of the facts row */
.adn-job-facts > .element__wrapper:has(:is(.adn-complete-btn, .adn-reopen-btn))
{
order: 99;
margin-left: auto !important;
align-self: center;
}

.adn-complete-btn a,
.adn-reopen-btn button
{
display: inline-flex !important;
align-items: center;
gap: 14px;
min-height: 36px;
box-sizing: border-box;
margin: 0 !important;
padding: 0 0 0 14px !important;
border: 1px solid var(--adn-accent) !important;
border-radius: 0 !important;
background: var(--adn-accent) !important;
box-shadow: none !important;
font: 500 11px/1.2 var(--adn-geist) !important;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none !important;
white-space: nowrap;
color: var(--adn-ink) !important;
transition: background-color var(--adn-fade), border-color var(--adn-fade), color var(--adn-fade);
}

.adn-complete-btn a::after,
.adn-reopen-btn button::after
{
content: "\2713";
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
width: 34px;
border-left: 1px dashed rgba(38, 38, 38, .45);
font: 400 14px/1 var(--adn-geist);
}

/* REOPEN: outlined, it undoes something */
.adn-reopen-btn button
{
border-color: var(--adn-ink) !important;
background: transparent !important;
}

.adn-reopen-btn button::after { content: "\21BA"; }

.adn-complete-btn a:hover,
.adn-reopen-btn button:hover
{
border-color: var(--adn-ink) !important;
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.adn-complete-btn a:hover::after,
.adn-reopen-btn button:hover::after { border-left-color: rgba(247, 247, 241, .45); }

/* 45b. Read-only status cell (in place of the dropdown once completed) */
.adn-df--locked::before
{
content: "STATUS";
display: block;
margin-bottom: 10px;
font: 500 11px/1.3 var(--adn-geist);
text-transform: uppercase;
color: rgba(38, 38, 38, .72);
}

.adn-df--locked p
{
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 !important;
font: 500 16px/1.3 var(--adn-grotesk) !important;
letter-spacing: -.01em;
color: var(--adn-ink) !important;
}

/* a small lock mark after the value */
.adn-df--locked p::after
{
content: "LOCKED";
padding: 3px 6px;
border: 1px solid var(--adn-border);
font: 500 10px/1.2 var(--adn-geist);
letter-spacing: 0;
color: rgba(38, 38, 38, .6);
}

/* 45c. Confirmation: a centred card over a dimmed page */
.element__wrapper:has(> .element__inner-wrapper > .adn-complete-modal)
{
position: fixed !important;
inset: 0;
z-index: 40;
display: flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 16px !important;
border: 0 !important;
background: rgba(38, 38, 38, .45) !important;
animation: adnCompleteIn .2s ease both;
}

.element__wrapper:has(> .element__inner-wrapper > .adn-complete-modal) > .element__inner-wrapper
{
width: 100% !important;
max-width: 520px !important;
}

.adn-complete-modal
{
padding: 28px 28px 0 !important;
border: 1px solid var(--adn-ink) !important;
background: var(--adn-canvas) !important;
box-shadow: 6px 6px 0 rgba(38, 38, 38, .18) !important;
animation: adnCompleteCard .25s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes adnCompleteIn { from { opacity: 0; } }
@keyframes adnCompleteCard { from { opacity: 0; transform: translateY(8px); } }

.adn-complete-modal .element__wrapper
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}

.adn-complete-title,
.adn-complete-title :is(h1, h2, h3)
{
margin: 0 0 12px !important;
font: 700 26px/1.05 var(--adn-grotesk) !important;
letter-spacing: -.03em !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

.adn-complete-copy p
{
margin: 0 0 18px !important;
font: 500 14px/1.45 var(--adn-grotesk) !important;
color: rgba(38, 38, 38, .72) !important;
}

/* the job's subject, so it's clear which job is being completed */
.adn-complete-job p
{
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0 0 20px !important;
padding: 12px 14px;
border: 1px solid var(--adn-border);
font: 500 12px/1.45 var(--adn-geist) !important;
color: var(--adn-ink) !important;
}

/* CONFIRM: full-width green row; Cancel: a quiet mono link above it */
.adn-complete-modal .form-container-element__submit-button
{
margin: 0 -28px !important;
padding: 0 !important;
border-top: 1px solid var(--adn-border);
}

.adn-complete-modal .form-container-element__submit-button button
{
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100% !important;
min-height: 60px;
margin: 0 !important;
padding: 0 64px 0 28px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--adn-accent) !important;
font: 600 16px/1 var(--adn-grotesk) !important;
text-transform: uppercase;
color: var(--adn-ink) !important;
}

.adn-complete-modal .form-container-element__submit-button button::after
{
content: "\2713";
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
font: 400 18px/1 var(--adn-geist);
}

.adn-complete-modal .form-container-element__submit-button button:hover
{
background: var(--adn-ink) !important;
color: var(--adn-canvas) !important;
}

.adn-complete-cancel a
{
display: inline-block;
margin: 0 0 20px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
font: 500 12px/1.3 var(--adn-geist) !important;
text-transform: uppercase;
text-decoration: underline !important;
text-underline-offset: 3px;
color: rgba(38, 38, 38, .72) !important;
}

.adn-complete-cancel a:hover { color: var(--adn-ink) !important; }

@media (max-width: 700px)
{
.adn-job-facts > .element__wrapper:has(:is(.adn-complete-btn, .adn-reopen-btn))
{
flex-basis: 100%;
margin-left: 0 !important;
}

.adn-complete-btn a,
.adn-reopen-btn button
{
width: 100% !important;
justify-content: space-between;
min-height: 44px;
}

.adn-complete-modal { padding: 22px 20px 0 !important; }
.adn-complete-modal .form-container-element__submit-button { margin: 0 -20px !important; }
.adn-complete-title, .adn-complete-title :is(h1, h2, h3) { font-size: 22px !important; }
}

@media (prefers-reduced-motion: reduce)
{
.element__wrapper:has(> .element__inner-wrapper > .adn-complete-modal), .adn-complete-modal { animation: none; }
}

/* 45d. Fixes after testing: the confirmation sits above everything on the
   page (the MARK AS COMPLETED button showed through it), and CONFIRM keeps
   its green while it saves */
.element__wrapper:has(> .element__inner-wrapper > .adn-complete-modal) { z-index: 1000 !important; }
.adn-complete-modal .form-container-element__submit-button button[data-adn-busy] { background: var(--adn-accent) !important; color: var(--adn-ink) !important; }

/* ==========================================================================
   46. LOGIN PAGE: OPENING STATE
   When the browser holds a saved login, the JS block "ADN Login page" sets
   data-adn-opening on <html> while Baserow restores it: the form is hidden
   and an OPENING... row with a moving bar shows instead, then the page
   forwards (to the ?next= page, or Overview). After 3.5 s without a login
   the form comes back.
   ========================================================================== */

html[data-adn-opening] .adn-login-form { display: none !important; }

html[data-adn-opening] .adn-login-panel::after
{
content: "Opening\2026";
display: block;
padding: 22px var(--lx) 24px;
border-top: 1px solid var(--adn-border);
border-bottom: 1px solid var(--adn-border);
background:
 linear-gradient(var(--adn-ink), var(--adn-ink)) no-repeat 0 100% / 30% 3px;
font: 500 12px/1.4 var(--adn-geist);
letter-spacing: 0;
text-transform: uppercase;
color: rgba(38, 38, 38, .72);
animation: adnOpeningBar 1s ease-in-out infinite;
}

@keyframes adnOpeningBar
{
0% { background-position: -40% 100%; }
100% { background-position: 140% 100%; }
}

@media (prefers-reduced-motion: reduce)
{
html[data-adn-opening] .adn-login-panel::after { animation: none; background-size: 100% 3px; }
}

/* ==========================================================================
   47. LOG OUT (company switcher dropdown, CSS 41)
   The last row of the company dropdown signs the user out. Its text uses the
   company accent like ADD JOB (green for International, orange for Trading,
   via --adn-accent-hover from section 43), with an arrow at the right.
   ========================================================================== */
.adn-co-menu li.adn-co-out { border-top: 1px solid var(--adn-border); }

.adn-co-menu button.adn-co-logout
{
color: var(--adn-accent-hover, #97b67a);
}

.adn-co-menu button.adn-co-logout::after
{
content: "\2192";
flex: 0 0 auto;
font: 400 16px/1 var(--adn-geist);
}

.adn-co-menu button.adn-co-logout[disabled]
{
cursor: progress;
opacity: .6;
}

/* ==========================================================================
   48. JOB PAGE: TABS ON PHONES + COMPLETION BUTTONS UNDER THE INTRO
   48a. The phone tab strip (.adn-jd-strip, 29d) has three tabs now: they
        share the full width in equal cells instead of leaving a gap.
   48b. MARK AS COMPLETED / REOPEN moved from the facts row into the Details
        intro (.adn-job-intro), under "Update the client, status ...".
   ========================================================================== */

/* 48a */
.adn-jd-strip a
{
flex: 1 1 0;
min-width: max-content;
}

.adn-jd-strip a:last-child { border-right: 0; }

/* 48b */
.adn-job-intro .element__wrapper:has(> .element__inner-wrapper > :is(.adn-complete-btn, .adn-reopen-btn))
{
margin: 22px 0 0 !important;
}

.adn-job-intro :is(.adn-complete-btn, .adn-reopen-btn)
{
align-items: flex-start !important;
}

/* ==========================================================================
   49. HEADER ABOVE THE STICKY STRIPS
   The header's fixed stack (z-index 3) sat under the sticky job-type and
   Quotation | Invoice strips (z-index 4) and table headers (3), so the
   FINANCE and company dropdowns opened behind them once the page scrolled.
   ========================================================================== */
.page__fixed-stack--top { z-index: 30 !important; }

/* 49b. FINANCE dropdown rows use the header's pixel hover (JS "ADN pixel
   hover", .adn-fin-menu button); the current-page square turns light on
   the dark fill */
.adn-fin-menu button[data-px-hover][aria-current="true"]::after { background: var(--adn-canvas); }

/* ==========================================================================
   50. FINANCE ONLY FOR ADMIN AND FINANCE
   The JS block "ADN Finance by role" sets data-adn-nofin on <html> for
   other roles (Operation): the FINANCE header link, its dropdown and the
   phone MENU Finance row are hidden, and the desktop header goes back to
   two link cells (Overview | Main Listing).
   ========================================================================== */
html[data-adn-nofin] :is(.adn-header-fin, .adn-fin-menu, .adn-mm-sub-btn, .adn-mm-sub) { display: none !important; }

@media (min-width: 701px)
{
html[data-adn-nofin] .page__fixed-stack--top .column-element:has(.menu-element__wrapper)
{
grid-template-columns: minmax(0, 1fr) calc(2 * var(--adn-header-cell)) var(--adn-header-cell) !important;
}
}

/* ==========================================================================
   51. LOGIN PAGE ON PHONES
   The frame fills the visible screen (dvh, so the browser bar doesn't push
   it off), the SIGN IN block sits centred (a touch above true centre) and
   the two-company caption from the left panel comes back as a footer row.
   ========================================================================== */
.adn-login { min-height: calc(100dvh - 16px); }

@media (max-width: 700px)
{
.adn-login-body
{
grid-template-rows: minmax(0, 1fr) auto !important;
flex: 1 1 auto;
}

.adn-login-body > .element__wrapper:has(> .element__inner-wrapper > .adn-login-panel) { order: 1; }

.adn-login-body > .element__wrapper:has(> .element__inner-wrapper > .adn-login-art)
{
order: 2;
display: block !important;
border-right: 0 !important; /* the desktop divider between the two halves */
}

.adn-login-panel
{
justify-content: center !important;
padding-bottom: 6vh !important;
}

.adn-login-art
{
min-height: 0 !important;
height: auto !important;
padding: 0 var(--lx) 16px !important;
border-top: 0 !important;
border-right: 0 !important;
}
}