:root {
--copper: #a95738;
--copper-dark: #8e452e;
--charcoal: #3f454c;
--charcoal-dark: #252d33;
--charcoal-deep: #1d252b;
--white: #ffffff;
--grey-light: #d2d0cc;
--grey: #74777c;
--grey-mid: #a6a5a1;
--sidebar-width: 13rem;
--topbar-height: 4.5rem;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
min-height: 100%;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: var(--charcoal-deep);
color: var(--white);
}

button,
input {
font: inherit;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

a {
color: inherit;
text-decoration: none;
}

button {
border: 0;
}

.appShell {
display: flex;
width: 100%;
min-height: 100vh;
}

.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-width);
display: flex;
flex-direction: column;
background: var(--copper);
color: var(--white);
z-index: 10;
}

.sidebarBrand {
padding: 1.6rem 1.5rem 1.2rem;
}

.brandName {
font-size: 1.45rem;
font-weight: 800;
letter-spacing: -0.045em;
}

.brandLine {
width: 2.5rem;
height: 1px;
margin: 0.65rem 0 0.75rem;
background: rgba(255, 255, 255, 0.75);
}

.brandTagline {
font-size: 0.62rem;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.08em;
}

.sidebarNav {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 1.1rem;
}

.navItem {
position: relative;
display: grid;
grid-template-columns: 1.8rem 1fr auto;
align-items: center;
gap: 0.7rem;
min-height: 3.65rem;
padding: 0 1.5rem;
font-size: 0.92rem;
transition: background 160ms ease;
}

.navItem:hover {
background: rgba(0, 0, 0, 0.08);
}

.navItemActive {
background: var(--charcoal-deep);
}

.navItemActive:hover {
    background: var(--charcoal-deep);
}

.navItemActive::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.2rem;
background: var(--white);
}

.navIcon {
display: flex;
align-items: center;
justify-content: center;
width: 1.8rem;
font-size: 1.35rem;
}

.navCount {
display: flex;
align-items: center;
justify-content: center;
width: 1.45rem;
height: 1.45rem;
border-radius: 50%;
background: var(--white);
color: var(--copper);
font-size: 0.75rem;
font-weight: 700;
}

.navCount[hidden] {
display: none;
}

.profileLink {
cursor: default;
}

.logoutButton {
opacity: 0.58;
cursor: default;
}

.searchBox {
opacity: 0.58;
}

.searchBox input:disabled {
cursor: default;
}

.notificationButton:disabled {
opacity: 0.58;
cursor: default;
}

.sidebarAccount {
margin-top: auto;
padding: 0 1.5rem 1.5rem;
}

.sidebarDivider {
width: 2.6rem;
height: 1px;
margin-bottom: 1.25rem;
background: rgba(255, 255, 255, 0.7);
}

.companyName {
font-size: 0.88rem;
line-height: 1.5;
}

.profile {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 1.35rem;
}

.profileAvatar {
display: flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
flex: 0 0 2.65rem;
border-radius: 50%;
background: var(--grey-light);
color: var(--copper-dark);
font-weight: 700;
}

.profileName {
font-size: 0.85rem;
}

.profileLink {
margin-top: 0.2rem;
font-size: 0.73rem;
color: rgba(255, 255, 255, 0.72);
}

.logoutButton {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1.3rem 0;
background: transparent;
color: var(--white);
cursor: pointer;
}

.logoutButton span:first-child {
font-size: 1.35rem;
}

.sidebarFooter {
font-size: 0.66rem;
font-weight: 600;
line-height: 1.65;
letter-spacing: 0.2em;
}

.appMain {
width: calc(100% - var(--sidebar-width));
min-height: 100vh;
margin-left: var(--sidebar-width);
background: var(--charcoal-deep);
}

.topbar {
height: var(--topbar-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 0 1.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.topbarIdentity {
display: flex;
align-items: center;
gap: 1.4rem;
white-space: nowrap;
font-size: 0.82rem;
}

.topbarCompany {
font-weight: 600;
}

.topbarSeparator {
width: 1px;
height: 1.8rem;
background: rgba(255, 255, 255, 0.18);
}

.topbarDate,
.topbarTime {
color: var(--grey-light);
}

.topbarActions {
display: flex;
align-items: center;
gap: 1rem;
}

.searchBox {
width: 21rem;
height: 2.8rem;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0 1rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.35rem;
background: rgba(255, 255, 255, 0.04);
}

.searchIcon {
position: relative;
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
border: 2px solid var(--white);
border-radius: 50%;
}

.searchIcon::after {
content: "";
position: absolute;
width: 0.45rem;
height: 2px;
right: -0.35rem;
bottom: -0.15rem;
background: var(--white);
transform: rotate(45deg);
transform-origin: left center;
}

.searchBox input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--white);
font-size: 0.78rem;
}

.searchBox input::placeholder {
color: var(--grey-mid);
}

.notificationButton {
position: relative;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--white);
cursor: pointer;
}

.notificationBell {
font-size: 1.55rem;
}

.notificationDot {
position: absolute;
top: 0.25rem;
right: 0.3rem;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--copper);
}

.addButton {
height: 2.8rem;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 1.2rem;
border-radius: 0.35rem;
background: var(--copper);
color: var(--white);
font-weight: 600;
cursor: pointer;
transition: background 160ms ease;
}

.addButton:hover {
background: var(--copper-dark);
}

.addButtonIcon {
font-size: 1.5rem;
font-weight: 300;
}

.dashboard {
width: 100%;
max-width: 100rem;
height: calc(100vh - var(--topbar-height));
min-height: 0;
display: grid;
grid-template-rows: 11.5rem 4.75rem 14rem minmax(10.5rem, 1fr);
gap: 0.75rem;
margin: 0 auto;
padding: 1rem 1.5rem;
overflow: hidden;
}

.dashboardHero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1fr);
align-items: center;
width: 100%;
height: 100%;
}

.heroPanel {
position: relative;
height: 11.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.6rem 2rem;
background: #f8f7f6;
color: var(--charcoal-deep);
border: 1px solid #e2dfdb;
}

.heroEnquiries {
padding-right: 5rem;
border-radius: 1.4rem 0 0 1.4rem;
}

.heroBedrock {
padding-left: 5rem;
border-radius: 0 1.4rem 1.4rem 0;
}

.heroEnquiries::after,
.heroBedrock::before {
content: "";
position: absolute;
top: 50%;
width: 5rem;
height: 5rem;
background: #f8f7f6;
transform: translateY(-50%) rotate(45deg);
}

.heroEnquiries::after {
right: -2.5rem;
}

.heroBedrock::before {
left: -2.5rem;
}

.heroIcon {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: 3.6rem;
height: 3.6rem;
flex: 0 0 3.6rem;
border: 1px solid #dedbd7;
border-radius: 50%;
background: #eeece9;
}

.heroIcon svg {
width: 1.55rem;
height: 1.55rem;
fill: none;
stroke: var(--charcoal-deep);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.heroBadge {
position: absolute;
top: -0.35rem;
right: -0.35rem;
display: grid;
place-items: center;
width: 1.45rem;
height: 1.45rem;
border-radius: 50%;
background: var(--copper);
color: var(--white);
font-size: 0.76rem;
font-weight: 700;
}

.heroPanelContent {
position: relative;
z-index: 2;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
min-width: 0;
height: 100%;
}

.heroEyebrow {
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--copper-dark);
}

.heroValueRow {
display: flex;
align-items: baseline;
gap: 0.65rem;
margin-top: 0.45rem;
}

.heroValue {
font-size: 3.2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.05em;
color: var(--charcoal-deep);
}

.heroValueLabel {
font-size: 1rem;
font-weight: 600;
color: var(--charcoal);
}

.heroLatest {
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px solid #d8d5d1;
}

.heroLatestMeta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.25rem;
font-size: 0.78rem;
color: var(--grey);
}

.heroLatestCompany {
font-size: 1rem;
font-weight: 700;
color: var(--charcoal-deep);
}

.heroLatestMessage {
margin-top: 0.2rem;
overflow: hidden;
font-size: 0.86rem;
color: var(--charcoal);
text-overflow: ellipsis;
white-space: nowrap;
}

.heroCentre {
position: relative;
z-index: 5;
width: 8.75rem;
height: 8.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
justify-self: center;
border: 0.4rem solid var(--copper);
border-radius: 50%;
background: var(--charcoal-deep);
color: var(--white);
text-align: center;
box-shadow: 0 0 0 0.65rem var(--charcoal-deep);
}

.heroCentreValue {
font-size: 3.2rem;
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.05em;
}

.heroCentreLabel {
margin-top: 0.65rem;
font-size: 0.86rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.1em;
}

.heroBedrockDetails {
display: flex;
gap: 2.5rem;
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px solid #d8d5d1;
}

.heroBedrockDetails div {
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.heroDetailLabel {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--grey);
text-transform: uppercase;
}

.heroBedrockDetails strong {
font-size: 0.96rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.dashboardStats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
height: 100%;
margin-top: 0;
}

.statItem {
display: flex;
align-items: center;
min-width: 0;
height: 100%;
padding: 0 1.25rem;
background: #343c42;
border: 1px solid rgba(169, 87, 56, 0.35);
border-radius: 0.5rem;
}

.statIcon {
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
flex: 0 0 2.6rem;
margin-right: 1rem;
border-right: 1px solid rgba(169, 87, 56, 0.5);
}

.statIcon svg {
width: 1.35rem;
height: 1.35rem;
fill: none;
stroke: var(--copper);
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}

.statContent {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}

.statValue {
font-size: 1.95rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--white);
}

.statValueSmall {
font-size: 1.7rem;
}

.statText {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.15rem;
}

.statText strong {
font-size: 0.9rem;
font-weight: 600;
color: var(--white);
}

.statText span {
overflow: hidden;
font-size: 0.78rem;
color: var(--grey-mid);
text-overflow: ellipsis;
white-space: nowrap;
}

.dashboardPrimary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
height: 100%;
min-height: 0;
margin-top: 0;
}

.dashboardPanel {
min-width: 0;
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
min-height: 0;
height: 100%;
padding: 1rem 1.35rem 0.5rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.panelHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}

.panelEyebrow {
display: block;
margin-bottom: 0.25rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--copper-dark);
}

.panelHeader h2 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--charcoal-deep);
}

.panelLink {
display: flex;
align-items: center;
gap: 0.4rem;
padding-bottom: 0.1rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--charcoal);
transition: color 160ms ease;
}

.panelLink:hover {
color: var(--copper-dark);
}

.panelLink span {
font-size: 1.1rem;
color: var(--copper);
}

.dataTable {
width: 100%;
}

.tableHeader,
.tableRow {
display: grid;
align-items: center;
column-gap: 1rem;
}

.enquiryTable .tableHeader,
.enquiryTable .tableRow {
grid-template-columns: 4rem 1fr 1.35fr 0.7fr 1rem;
}

.jobsTable .tableHeader,
.jobsTable .tableRow {
grid-template-columns: 1.4fr 1fr 4rem 1rem;
}

.tableHeader {
font-size: 0.72rem;
min-height: 1.6rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--charcoal);
text-transform: uppercase;
}

.tableRow {
min-height: 2.5rem;
border-top: 1px solid var(--grey-light);
font-size: 0.9rem;
color: var(--charcoal);
transition: background 160ms ease;
}

.tableRow:hover {
background: rgba(169, 87, 56, 0.06);
}

.tablePrimary {
overflow: hidden;
font-weight: 600;
color: var(--charcoal-deep);
text-overflow: ellipsis;
white-space: nowrap;
}

.tableDate {
color: var(--charcoal);
}

.sourceBadge,
.statusBadge {
justify-self: start;
padding: 0.3rem 0.5rem;
border: 1px solid var(--grey-mid);
border-radius: 0.25rem;
font-size: 0.74rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.statusBadge {
min-width: 3.2rem;
text-align: center;
text-transform: uppercase;
}

.statusBadgeWon {
border-color: var(--copper);
background: rgba(169, 87, 56, 0.12);
color: var(--copper-dark);
}

.tableArrow {
justify-self: end;
font-size: 1rem;
color: var(--copper);
}

.dashboardSecondary {
display: grid;
grid-template-columns: 1.7fr 1fr 0.8fr;
gap: 0.75rem;
height: 100%;
min-height: 0;
margin-top: 0;
align-items: stretch;
}

.activityPanel {
padding-bottom: 0.75rem;
}

.secondaryPlaceholder {
background: #343c42;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
}

.activityList {
position: relative;
}

.activityList::before {
content: "";
position: absolute;
top: 1.5rem;
bottom: 1.5rem;
left: 0.3rem;
width: 1px;
background: rgba(169, 87, 56, 0.7);
}

.activityItem {
position: relative;
display: grid;
grid-template-columns: 0.7rem 2.5rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.8rem;
min-height: 2.8rem;
border-top: 1px solid var(--grey-light);
}

.activityItem:first-child {
border-top: 0;
}

.activityMarker {
position: relative;
z-index: 2;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background: var(--copper);
}

.activityIcon {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(169, 87, 56, 0.35);
border-radius: 0.35rem;
}

.activityIcon svg {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: var(--charcoal);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.activityContent {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.activityContent strong {
overflow: hidden;
font-size: 0.9rem;
font-weight: 600;
color: var(--charcoal-deep);
text-overflow: ellipsis;
white-space: nowrap;
}

.activityContent span {
overflow: hidden;
font-size: 0.78rem;
color: var(--charcoal);
text-overflow: ellipsis;
white-space: nowrap;
}

.activityItem time {
font-size: 0.76rem;
color: var(--charcoal);
white-space: nowrap;
}

.resultsPanel,
.workPanel {
height: 100%;
}

.periodSelect {
height: 1.9rem;
padding: 0 1.7rem 0 0.65rem;
border: 1px solid var(--grey-mid);
border-radius: 0.3rem;
outline: 0;
background: #f8f7f6;
color: var(--charcoal-deep);
font-size: 0.78rem;
}

.resultsList {
display: flex;
flex-direction: column;
}

.resultItem {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 2.65rem;
border-top: 1px solid var(--grey-light);
}

.resultItem:first-child {
border-top: 0;
}

.resultValue {
min-width: 2.5rem;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--charcoal-deep);
}

.resultText {
display: flex;
flex-direction: column;
gap: 0.15rem;
}

.resultText strong {
font-size: 0.86rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.resultText span {
font-size: 0.75rem;
color: var(--charcoal);
}

.sourceSummary {
margin-top: 0.6rem;
padding-top: 0.75rem;
border-top: 1px solid var(--grey-light);
}

.sourceSummaryHeader {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
font-weight: 600;
color: var(--charcoal);
}

.sourceBar {
display: flex;
height: 0.35rem;
margin-top: 0.65rem;
overflow: hidden;
border-radius: 1rem;
background: var(--grey-light);
}

.sourceBarWebsite {
width: 71%;
background: var(--copper);
}

.sourceBarGoogle {
width: 29%;
background: var(--grey);
}

.sourceLegend {
display: flex;
gap: 1rem;
margin-top: 0.6rem;
}

.sourceLegend span {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.72rem;
color: var(--charcoal);
}

.sourceLegend i {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: var(--copper);
}

.sourceLegend span:nth-child(2) i {
background: var(--grey);
}

.sourceLegend strong {
margin-left: 0.15rem;
color: var(--charcoal-deep);
}

.workList {
display: flex;
flex-direction: column;
}

.workItem {
display: grid;
grid-template-columns: 1.6rem 1fr;
align-items: center;
gap: 0.7rem;
min-height: 2.75rem;
border-top: 1px solid var(--grey-light);
}

.workItem:first-child {
border-top: 0;
}

.workStatus {
display: grid;
place-items: center;
width: 1.45rem;
height: 1.45rem;
border: 1.5px solid var(--copper);
border-radius: 50%;
color: var(--copper-dark);
font-size: 0.78rem;
font-weight: 700;
}

.workItem div {
display: flex;
flex-direction: column;
gap: 0.15rem;
}

.workItem strong {
font-size: 0.84rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.workItem span:last-child {
font-size: 0.73rem;
color: var(--charcoal);
}

.nextWork {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 0.75rem;
padding-top: 0.8rem;
border-top: 1px solid var(--grey-light);
}

.nextWorkLabel {
font-size: 0.71rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--copper-dark);
}

.nextWork strong {
font-size: 0.85rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.nextWork > span:last-child {
font-size: 0.73rem;
color: var(--charcoal);
}


.enquiriesPage {
width: 100%;
max-width: 100rem;
min-height: calc(100vh - var(--topbar-height));
margin: 0 auto;
padding: 1.25rem 1.5rem 1.5rem;
}

.enquiriesPageHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
}

.enquiriesPageTitle {
min-width: 0;
}

.pageEyebrow {
display: block;
margin-bottom: 0.3rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--copper);
}

.enquiriesPageTitle h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--white);
}

.enquiriesPageTitle p {
margin-top: 0.45rem;
font-size: 0.82rem;
color: var(--grey-mid);
}

.enquiriesOverview {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}

.enquiriesOverviewCard {
display: flex;
align-items: center;
min-width: 0;
height: 4.75rem;
padding: 0 1.15rem;
background: #343c42;
border: 1px solid rgba(169, 87, 56, 0.35);
border-radius: 0.5rem;
}

.enquiriesOverviewCardNew {
border-color: var(--copper);
}

.enquiriesOverviewIcon {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
margin-right: 0.9rem;
border-right: 1px solid rgba(169, 87, 56, 0.5);
}

.enquiriesOverviewIcon svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: var(--copper);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.enquiriesOverviewContent {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: baseline;
column-gap: 0.6rem;
min-width: 0;
}

.enquiriesOverviewContent > span {
grid-column: 1 / -1;
margin-bottom: 0.2rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--grey-mid);
}

.enquiriesOverviewContent strong {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--white);
}

.enquiriesOverviewContent small {
overflow: hidden;
font-size: 0.75rem;
color: var(--grey-mid);
text-overflow: ellipsis;
white-space: nowrap;
}

.enquiriesMainPanel {
width: 100%;
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.enquiriesToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.35rem;
border-bottom: 1px solid #dedbd7;
}

.enquiriesSearch {
width: min(24rem, 100%);
height: 2.5rem;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0 0.85rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
background: var(--white);
}

.enquiriesSearch svg {
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
fill: none;
stroke: var(--charcoal);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.enquiriesSearch input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--charcoal-deep);
font-size: 0.8rem;
}

.enquiriesSearch input::placeholder {
color: var(--grey);
}

.enquiriesFilters {
display: flex;
align-items: center;
gap: 0.6rem;
}

.enquiriesFilter {
height: 2.5rem;
padding: 0 2rem 0 0.75rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
outline: 0;
background: var(--white);
color: var(--charcoal);
font-size: 0.78rem;
cursor: pointer;
}

.enquiriesListHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.35rem 0.65rem;
}

.enquiriesListHeading .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.enquiriesListHeading h2 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--charcoal-deep);
}

.enquiriesListCount {
padding-bottom: 0.15rem;
font-size: 0.78rem;
color: var(--grey);
}

.enquiriesTable {
width: 100%;
padding: 0 1.35rem;
}

.enquiriesTableHeader,
.enquiriesTableRow {
display: grid;
grid-template-columns: 6rem 1.15fr 1.15fr 1.8fr 5.5rem 2rem;
align-items: center;
column-gap: 1rem;
}

.enquiriesTableHeader {
min-height: 2rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--grey);
text-transform: uppercase;
}

.enquiriesTableRow {
position: relative;
min-height: 4.6rem;
border-top: 1px solid var(--grey-light);
color: var(--charcoal);
cursor: pointer;
transition: background 160ms ease;
}

.enquiriesTableRow:hover {
background: rgba(169, 87, 56, 0.06);
}

.enquiriesTableRowUnread {
background: rgba(169, 87, 56, 0.035);
}

.enquiriesTableRowUnread:hover {
background: rgba(169, 87, 56, 0.08);
}

.enquiryReceived {
display: grid;
grid-template-columns: 0.5rem 1fr;
align-items: center;
gap: 0.55rem;
min-width: 0;
}

.enquiryReceived > div,
.enquiryContact,
.enquiryCompany,
.enquiryMessage {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.enquiryUnreadMarker {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: transparent;
}

.enquiriesTableRowUnread .enquiryUnreadMarker {
background: var(--copper);
}

.enquiryReceived strong,
.enquiryContact strong,
.enquiryCompany strong,
.enquiryMessage strong {
overflow: hidden;
font-size: 0.84rem;
font-weight: 600;
color: var(--charcoal-deep);
text-overflow: ellipsis;
white-space: nowrap;
}

.enquiriesTableRowUnread .enquiryReceived strong,
.enquiriesTableRowUnread .enquiryContact strong,
.enquiriesTableRowUnread .enquiryCompany strong,
.enquiriesTableRowUnread .enquiryMessage strong {
font-weight: 700;
}

.enquiryReceived span:last-child,
.enquiryContact span,
.enquiryCompany span,
.enquiryMessage span {
overflow: hidden;
font-size: 0.75rem;
color: var(--grey);
text-overflow: ellipsis;
white-space: nowrap;
}

.enquirySource {
justify-self: start;
padding: 0.3rem 0.5rem;
border: 1px solid var(--grey-mid);
border-radius: 0.25rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.enquiryOpenButton {
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
justify-self: end;
border-radius: 50%;
background: transparent;
color: var(--copper);
font-size: 1.05rem;
cursor: pointer;
transition: background 160ms ease, color 160ms ease;
}

.enquiryOpenButton:hover {
background: var(--copper);
color: var(--white);
}

.enquiriesTableFooter {
min-height: 3.6rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.35rem;
border-top: 1px solid #dedbd7;
font-size: 0.75rem;
color: var(--grey);
}

.enquiriesPagination {
display: flex;
align-items: center;
gap: 0.3rem;
}

.enquiriesPagination button,
.enquiriesPagination span {
width: 1.9rem;
height: 1.9rem;
display: grid;
place-items: center;
border: 1px solid var(--grey-light);
border-radius: 0.25rem;
background: var(--white);
color: var(--charcoal);
font-size: 0.74rem;
}

.enquiriesPagination button {
cursor: pointer;
}

.enquiriesPagination button:hover:not(:disabled) {
border-color: var(--copper);
color: var(--copper-dark);
}

.enquiriesPagination button:disabled {
opacity: 0.4;
cursor: default;
}

.enquiriesPagination span {
border-color: var(--copper);
background: var(--copper);
color: var(--white);
font-weight: 700;
}








.jobsPage {
width: 100%;
max-width: 100rem;
min-height: calc(100vh - var(--topbar-height));
margin: 0 auto;
padding: 1.25rem 1.5rem 1.5rem;
}

.jobsPageHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
}

.jobsPageTitle {
min-width: 0;
}

.jobsPageTitle h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--white);
}

.jobsPageTitle p {
margin-top: 0.45rem;
font-size: 0.82rem;
color: var(--grey-mid);
}

.jobsOverview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}

.jobsOverviewCard {
display: flex;
align-items: center;
min-width: 0;
height: 4.75rem;
padding: 0 1.15rem;
background: #343c42;
border: 1px solid rgba(169, 87, 56, 0.35);
border-radius: 0.5rem;
}

.jobsOverviewCardOpen {
border-color: var(--copper);
}

.jobsOverviewIcon {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
margin-right: 0.9rem;
border-right: 1px solid rgba(169, 87, 56, 0.5);
}

.jobsOverviewIcon svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: var(--copper);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.jobsOverviewContent {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: baseline;
column-gap: 0.6rem;
min-width: 0;
}

.jobsOverviewContent > span {
grid-column: 1 / -1;
margin-bottom: 0.2rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--grey-mid);
}

.jobsOverviewContent strong {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--white);
}

.jobsOverviewContent small {
overflow: hidden;
font-size: 0.75rem;
color: var(--grey-mid);
text-overflow: ellipsis;
white-space: nowrap;
}

.jobsMainPanel {
width: 100%;
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.jobsToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.35rem;
border-bottom: 1px solid #dedbd7;
}

.jobsSearch {
width: min(24rem, 100%);
height: 2.5rem;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0 0.85rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
background: var(--white);
}

.jobsSearch svg {
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
fill: none;
stroke: var(--charcoal);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.jobsSearch input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--charcoal-deep);
font-size: 0.8rem;
}

.jobsSearch input::placeholder {
color: var(--grey);
}

.jobsFilters {
display: flex;
align-items: center;
gap: 0.6rem;
}

.jobsFilter {
height: 2.5rem;
padding: 0 2rem 0 0.75rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
outline: 0;
background: var(--white);
color: var(--charcoal);
font-size: 0.78rem;
cursor: pointer;
}

.jobsListHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.35rem 0.65rem;
}

.jobsListHeading .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.jobsListHeading h2 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--charcoal-deep);
}

.jobsListCount {
padding-bottom: 0.15rem;
font-size: 0.78rem;
color: var(--grey);
}

.jobsTable {
width: 100%;
padding: 0 1.35rem;
}

.jobsTableHeader,
.jobsTableRow {
display: grid;
grid-template-columns: 1.5fr 1.35fr 1fr 0.8fr 0.8fr 5rem 2rem;
align-items: center;
column-gap: 1rem;
}

.jobsTableHeader {
min-height: 2rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--grey);
text-transform: uppercase;
}

.jobsTableRow {
min-height: 4.6rem;
border-top: 1px solid var(--grey-light);
color: var(--charcoal);
cursor: pointer;
transition: background 160ms ease;
}

.jobsTableRow:hover {
background: rgba(169, 87, 56, 0.06);
}

.jobProject,
.jobCompany,
.jobLocation,
.jobCreated,
.jobValue {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.jobProject strong,
.jobCompany strong,
.jobLocation strong,
.jobCreated strong,
.jobValue strong {
overflow: hidden;
font-size: 0.84rem;
font-weight: 600;
color: var(--charcoal-deep);
text-overflow: ellipsis;
white-space: nowrap;
}

.jobProject span,
.jobCompany span,
.jobLocation span,
.jobCreated span,
.jobValue span {
overflow: hidden;
font-size: 0.75rem;
color: var(--grey);
text-overflow: ellipsis;
white-space: nowrap;
}

.jobStatus {
justify-self: start;
min-width: 3.8rem;
padding: 0.3rem 0.55rem;
border: 1px solid var(--grey-mid);
border-radius: 0.25rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
text-transform: uppercase;
}

.jobStatusOpen {
border-color: var(--copper);
color: var(--copper-dark);
}

.jobStatusWon {
border-color: var(--charcoal);
background: var(--charcoal);
color: var(--white);
}

.jobStatusLost {
border-color: var(--grey-mid);
color: var(--grey);
}

.jobOpenButton {
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
justify-self: end;
border-radius: 50%;
background: transparent;
color: var(--copper);
font-size: 1.05rem;
cursor: pointer;
transition: background 160ms ease, color 160ms ease;
}

.jobOpenButton:hover {
background: var(--copper);
color: var(--white);
}





.contactsPage {
width: 100%;
max-width: 100rem;
min-height: calc(100vh - var(--topbar-height));
margin: 0 auto;
padding: 1.25rem 1.5rem 1.5rem;
}

.contactsPageHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
}

.contactsPageTitle {
min-width: 0;
}

.contactsPageTitle h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--white);
}

.contactsPageTitle p {
margin-top: 0.45rem;
font-size: 0.82rem;
color: var(--grey-mid);
}

.contactsOverview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}

.contactsOverviewCard {
display: flex;
align-items: center;
min-width: 0;
height: 4.75rem;
padding: 0 1.15rem;
background: #343c42;
border: 1px solid rgba(169, 87, 56, 0.35);
border-radius: 0.5rem;
}

.contactsOverviewCardAll {
border-color: var(--copper);
}

.contactsOverviewIcon {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
margin-right: 0.9rem;
border-right: 1px solid rgba(169, 87, 56, 0.5);
}

.contactsOverviewIcon svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: var(--copper);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.contactsOverviewContent {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: baseline;
column-gap: 0.6rem;
min-width: 0;
}

.contactsOverviewContent > span {
grid-column: 1 / -1;
margin-bottom: 0.2rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--grey-mid);
}

.contactsOverviewContent strong {
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--white);
}

.contactsOverviewContent small {
overflow: hidden;
font-size: 0.75rem;
color: var(--grey-mid);
text-overflow: ellipsis;
white-space: nowrap;
}

.contactsMainPanel {
width: 100%;
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.contactsToolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1.35rem;
border-bottom: 1px solid #dedbd7;
}

.contactsSearch {
width: min(24rem, 100%);
height: 2.5rem;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0 0.85rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
background: var(--white);
}

.contactsSearch svg {
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
fill: none;
stroke: var(--charcoal);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.contactsSearch input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--charcoal-deep);
font-size: 0.8rem;
}

.contactsSearch input::placeholder {
color: var(--grey);
}

.contactsFilters {
display: flex;
align-items: center;
gap: 0.6rem;
}

.contactsFilter {
height: 2.5rem;
padding: 0 2rem 0 0.75rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
outline: 0;
background: var(--white);
color: var(--charcoal);
font-size: 0.78rem;
cursor: pointer;
}

.contactsListHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.35rem 0.65rem;
}

.contactsListHeading .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.contactsListHeading h2 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--charcoal-deep);
}

.contactsListCount {
padding-bottom: 0.15rem;
font-size: 0.78rem;
color: var(--grey);
}

.contactsTable {
width: 100%;
padding: 0 1.35rem;
}

.contactsTableHeader,
.contactsTableRow {
display: grid;
grid-template-columns: 1.45fr 1.35fr 0.8fr 1fr 0.55fr 0.7fr 2rem;
align-items: center;
column-gap: 1rem;
}

.contactsTableHeader {
min-height: 2rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--grey);
text-transform: uppercase;
}

.contactsTableRow {
min-height: 4.6rem;
border-top: 1px solid var(--grey-light);
color: var(--charcoal);
cursor: pointer;
transition: background 160ms ease;
}

.contactsTableRow:hover {
background: rgba(169, 87, 56, 0.06);
}

.contactPerson,
.contactCompany,
.contactLocation,
.contactJobs,
.contactAdded {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.contactPerson strong,
.contactCompany strong,
.contactLocation strong,
.contactJobs strong,
.contactAdded strong {
overflow: hidden;
font-size: 0.84rem;
font-weight: 600;
color: var(--charcoal-deep);
text-overflow: ellipsis;
white-space: nowrap;
}

.contactPerson span,
.contactCompany span,
.contactLocation span,
.contactJobs span,
.contactAdded span {
overflow: hidden;
font-size: 0.75rem;
color: var(--grey);
text-overflow: ellipsis;
white-space: nowrap;
}

.contactType {
justify-self: start;
padding: 0.3rem 0.5rem;
border: 1px solid var(--grey-mid);
border-radius: 0.25rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}

.contactTypeCommercial {
border-color: var(--charcoal);
background: var(--charcoal);
color: var(--white);
}

.contactTypeResidential {
border-color: var(--copper);
color: var(--copper-dark);
}

.contactOpenButton {
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
justify-self: end;
border-radius: 50%;
background: transparent;
color: var(--copper);
font-size: 1.05rem;
cursor: pointer;
transition: background 160ms ease, color 160ms ease;
}

.contactOpenButton:hover {
background: var(--copper);
color: var(--white);
}




.bedrockPage {
width: 100%;
max-width: 100rem;
min-height: calc(100vh - var(--topbar-height));
margin: 0 auto;
padding: 1.25rem 1.5rem 1.5rem;
}

.bedrockPageHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
}

.bedrockPageTitle {
min-width: 0;
}

.bedrockPageTitle h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--white);
}

.bedrockPageTitle p {
margin-top: 0.45rem;
font-size: 0.82rem;
color: var(--grey-mid);
}

.bedrockServiceStatus {
display: flex;
align-items: center;
gap: 0.55rem;
padding-bottom: 0.2rem;
font-size: 0.76rem;
font-weight: 600;
color: var(--grey-light);
}

.bedrockServiceStatusDot {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--copper);
}

.bedrockHero {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}

.bedrockMonth,
.bedrockCurrentWork {
min-height: 15rem;
border-radius: 0.75rem;
overflow: hidden;
}

.bedrockMonth {
position: relative;
display: flex;
flex-direction: column;
padding: 1.4rem 1.5rem;
background: var(--copper);
color: var(--white);
}

.bedrockMonth .pageEyebrow {
color: rgba(255, 255, 255, 0.7);
}

.bedrockSectionHeading h2 {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -0.025em;
}

.bedrockMonthStats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}

.bedrockMonthStat {
display: flex;
flex-direction: column;
padding-right: 1rem;
border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.bedrockMonthStat:last-child {
border-right: 0;
}

.bedrockMonthStat strong {
font-size: 2.7rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.055em;
}

.bedrockMonthStat span {
margin-top: 0.4rem;
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.78);
}

.bedrockMonthNote {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.bedrockMonthNote span {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
}

.bedrockMonthNote p {
font-size: 0.74rem;
color: rgba(255, 255, 255, 0.72);
}

.bedrockCurrentWork {
display: flex;
flex-direction: column;
padding: 1.4rem 1.5rem;
background: #f8f7f6;
border: 1px solid #dedbd7;
color: var(--charcoal-deep);
}

.bedrockCurrentWork .pageEyebrow {
color: var(--copper-dark);
}

.bedrockCurrentWorkItem {
margin-top: 1.3rem;
padding: 1rem 1.1rem;
border-left: 0.2rem solid var(--copper);
background: var(--white);
}

.bedrockCurrentWorkTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.65rem;
}

.bedrockWorkLabel,
.bedrockWorkStatus {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.bedrockWorkLabel {
color: var(--copper-dark);
}

.bedrockWorkStatus {
color: var(--grey);
}

.bedrockCurrentWorkItem h3 {
font-size: 0.95rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.bedrockCurrentWorkItem p {
max-width: 38rem;
margin-top: 0.4rem;
font-size: 0.76rem;
line-height: 1.5;
color: var(--grey);
}

.bedrockNextAction {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--grey-light);
}

.bedrockNextAction span {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--copper-dark);
}

.bedrockNextAction strong {
font-size: 0.78rem;
font-weight: 600;
text-align: right;
color: var(--charcoal-deep);
}

.bedrockContentGrid {
display: grid;
grid-template-columns: 0.8fr 1.4fr;
gap: 1rem;
align-items: start;
}

.bedrockServicesPanel,
.bedrockActivityPanel {
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.bedrockPanelHeader {
min-height: 4.5rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.25rem 0.8rem;
border-bottom: 1px solid #dedbd7;
}

.bedrockPanelHeader .pageEyebrow {
margin-bottom: 0.15rem;
color: var(--copper-dark);
}

.bedrockPanelHeader h2 {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -0.02em;
}

.bedrockPanelMeta {
padding-bottom: 0.1rem;
font-size: 0.72rem;
color: var(--grey);
}

.bedrockServiceList {
padding: 0 1.25rem;
}

.bedrockServiceItem {
min-height: 4.6rem;
display: grid;
grid-template-columns: 2.4rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
border-bottom: 1px solid var(--grey-light);
}

.bedrockServiceItem:last-child {
border-bottom: 0;
}

.bedrockServiceIcon {
width: 2.4rem;
height: 2.4rem;
display: grid;
place-items: center;
border: 1px solid rgba(169, 87, 56, 0.4);
border-radius: 0.35rem;
}

.bedrockServiceIcon svg {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: var(--copper);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.bedrockServiceCopy {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.bedrockServiceCopy strong {
overflow: hidden;
font-size: 0.82rem;
font-weight: 600;
color: var(--charcoal-deep);
text-overflow: ellipsis;
white-space: nowrap;
}

.bedrockServiceCopy span {
overflow: hidden;
font-size: 0.72rem;
color: var(--grey);
text-overflow: ellipsis;
white-space: nowrap;
}

.bedrockServiceState {
padding: 0.28rem 0.5rem;
border: 1px solid var(--copper);
border-radius: 0.25rem;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--copper-dark);
text-transform: uppercase;
}

.bedrockActivityList {
padding: 0 1.25rem;
}

.bedrockActivityItem {
min-height: 4.6rem;
display: grid;
grid-template-columns: 2.4rem 0.55rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.8rem;
border-bottom: 1px solid var(--grey-light);
}

.bedrockActivityItem:last-child {
border-bottom: 0;
}

.bedrockActivityDate {
display: flex;
flex-direction: column;
align-items: center;
}

.bedrockActivityDate strong {
font-size: 1rem;
font-weight: 700;
line-height: 1;
color: var(--charcoal-deep);
}

.bedrockActivityDate span {
margin-top: 0.2rem;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--grey);
}

.bedrockActivityMarker {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--copper);
}

.bedrockActivityCopy {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.bedrockActivityCopy strong {
overflow: hidden;
font-size: 0.82rem;
font-weight: 600;
color: var(--charcoal-deep);
text-overflow: ellipsis;
white-space: nowrap;
}

.bedrockActivityCopy span {
overflow: hidden;
font-size: 0.72rem;
color: var(--grey);
text-overflow: ellipsis;
white-space: nowrap;
}

.bedrockActivityType {
padding: 0.28rem 0.5rem;
border: 1px solid var(--grey-mid);
border-radius: 0.25rem;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--charcoal);
text-transform: uppercase;
}


.settingsPage {
width: 100%;
max-width: 100rem;
min-height: calc(100vh - var(--topbar-height));
margin: 0 auto;
padding: 1.25rem 1.5rem 1.5rem;
}

.settingsPageHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
}

.settingsPageTitle {
min-width: 0;
}

.settingsPageTitle h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--white);
}

.settingsPageTitle p {
margin-top: 0.45rem;
font-size: 0.82rem;
color: var(--grey-mid);
}

.settingsLayout {
display: grid;
grid-template-columns: 18rem minmax(0, 1fr);
gap: 1rem;
align-items: start;
}

.settingsNav {
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
}

.settingsNavHeader {
height: 3rem;
display: flex;
align-items: center;
padding: 0 1.25rem;
border-bottom: 1px solid #dedbd7;
}

.settingsNavHeader span {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--copper-dark);
}

.settingsNavItem {
position: relative;
width: 100%;
min-height: 4.5rem;
display: grid;
grid-template-columns: 2.3rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.8rem;
padding: 0 1.1rem;
border-bottom: 1px solid var(--grey-light);
background: transparent;
color: var(--charcoal-deep);
text-align: left;
cursor: pointer;
transition: background 160ms ease;
}

.settingsNavItem:last-child {
border-bottom: 0;
}

.settingsNavItem:hover {
background: rgba(169, 87, 56, 0.06);
}

.settingsNavItemActive {
background: rgba(169, 87, 56, 0.08);
}

.settingsNavItemActive::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.2rem;
background: var(--copper);
}

.settingsNavIcon {
width: 2.3rem;
height: 2.3rem;
display: grid;
place-items: center;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
background: var(--white);
}

.settingsNavItemActive .settingsNavIcon {
border-color: rgba(169, 87, 56, 0.45);
}

.settingsNavIcon svg {
width: 1.05rem;
height: 1.05rem;
fill: none;
stroke: var(--copper);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.settingsNavCopy {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.settingsNavCopy strong {
font-size: 0.8rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.settingsNavCopy span {
font-size: 0.7rem;
color: var(--grey);
}

.settingsNavArrow {
font-size: 0.9rem;
color: var(--copper);
}

.settingsPanel {
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.settingsPanelHeader {
min-height: 5.5rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
padding: 1.1rem 1.4rem;
border-bottom: 1px solid #dedbd7;
}

.settingsPanelHeader .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.settingsPanelHeader h2 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--charcoal-deep);
}

.settingsPanelHeader p {
margin-top: 0.3rem;
font-size: 0.74rem;
color: var(--grey);
}

.settingsPanelStatus {
padding-bottom: 0.15rem;
font-size: 0.72rem;
color: var(--grey);
}

.settingsForm {
width: 100%;
}

.settingsFormSection {
display: grid;
grid-template-columns: 13rem minmax(0, 1fr);
gap: 2rem;
padding: 1.4rem;
border-bottom: 1px solid #dedbd7;
}

.settingsFormSectionHeading h3 {
font-size: 0.88rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.settingsFormSectionHeading p {
margin-top: 0.3rem;
font-size: 0.72rem;
line-height: 1.45;
color: var(--grey);
}

.settingsFields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.settingsField {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}

.settingsFieldFull {
grid-column: 1 / -1;
}

.settingsField > span {
font-size: 0.7rem;
font-weight: 600;
color: var(--charcoal);
}

.settingsField input {
width: 100%;
height: 2.65rem;
padding: 0 0.8rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
outline: 0;
background: var(--white);
color: var(--charcoal-deep);
font-size: 0.78rem;
transition: border-color 160ms ease;
}

.settingsField input:focus {
border-color: var(--copper);
}

.settingsFormFooter {
min-height: 4.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 1.4rem;
}

.settingsSaveNote {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.7rem;
color: var(--grey);
}

.settingsSaveNoteIcon {
width: 1.2rem;
height: 1.2rem;
display: grid;
place-items: center;
border: 1px solid var(--grey-mid);
border-radius: 50%;
font-size: 0.65rem;
font-weight: 700;
color: var(--grey);
}

.settingsSaveButton {
height: 2.5rem;
padding: 0 1rem;
border-radius: 0.35rem;
background: var(--copper);
color: var(--white);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 160ms ease;
}

.settingsSaveButton:hover {
background: var(--copper-dark);
}


.enquiryDetailPage {
width: 100%;
max-width: 100rem;
min-height: calc(100vh - var(--topbar-height));
margin: 0 auto;
padding: 1.25rem 1.5rem 1.5rem;
}

.enquiryDetailBack {
margin-bottom: 1rem;
}

.enquiryDetailBack a {
display: inline-flex;
align-items: center;
font-size: 0.74rem;
font-weight: 600;
color: var(--grey-mid);
text-decoration: none;
transition: color 160ms ease;
}

.enquiryDetailBack a:hover {
color: var(--white);
}

.enquiryDetailHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
}

.enquiryDetailTitle {
min-width: 0;
}

.enquiryDetailTitleTop {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.3rem;
}

.enquiryDetailTitle h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--white);
}

.enquiryDetailTitle p {
margin-top: 0.45rem;
font-size: 0.82rem;
color: var(--grey-mid);
}

.enquiryDetailStatus {
display: inline-flex;
align-items: center;
height: 1.4rem;
padding: 0 0.55rem;
border: 1px solid var(--copper);
border-radius: 999rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--copper);
}

.enquiryDetailActions {
display: flex;
align-items: center;
gap: 0.6rem;
}

.enquiryDetailSecondaryButton,
.enquiryDetailPrimaryButton {
height: 2.55rem;
padding: 0 1rem;
border-radius: 0.35rem;
font-size: 0.76rem;
font-weight: 600;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.enquiryDetailSecondaryButton {
border: 1px solid var(--grey-mid);
background: transparent;
color: var(--white);
}

.enquiryDetailSecondaryButton:hover {
border-color: var(--white);
}

.enquiryDetailPrimaryButton {
border: 1px solid var(--copper);
background: var(--copper);
color: var(--white);
}

.enquiryDetailPrimaryButton:hover {
background: var(--copper-dark);
border-color: var(--copper-dark);
}

.enquiryDetailGrid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.7fr);
gap: 1rem;
align-items: start;
}

.enquiryDetailMain,
.enquiryDetailSidebar {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}

.enquiryDetailPanel {
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.enquiryDetailPanelHeader {
min-height: 5rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid #dedbd7;
}

.enquiryDetailPanelHeader .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.enquiryDetailPanelHeader h2 {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--charcoal-deep);
}

.enquiryDetailSource {
display: inline-flex;
align-items: center;
height: 1.5rem;
padding: 0 0.55rem;
border: 1px solid rgba(169, 87, 56, 0.35);
border-radius: 999rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--copper-dark);
}

.enquiryDetailMessage {
padding: 1.4rem 1.25rem;
border-bottom: 1px solid #dedbd7;
}

.enquiryDetailMessage > span {
display: block;
margin-bottom: 0.65rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--copper-dark);
}

.enquiryDetailMessage p {
max-width: 52rem;
font-size: 0.86rem;
line-height: 1.7;
color: var(--charcoal);
}

.enquiryDetailInformation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.enquiryDetailInformationItem {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-height: 5rem;
padding: 1rem 1.25rem;
border-right: 1px solid #dedbd7;
border-bottom: 1px solid #dedbd7;
}

.enquiryDetailInformationItem:nth-child(2n) {
border-right: 0;
}

.enquiryDetailInformationItem:nth-last-child(-n + 2) {
border-bottom: 0;
}

.enquiryDetailInformationItem span,
.enquiryDetailContactField span {
font-size: 0.65rem;
font-weight: 600;
color: var(--grey);
}

.enquiryDetailInformationItem strong,
.enquiryDetailContactField strong {
font-size: 0.78rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.enquiryDetailContact {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.15rem 1.25rem;
border-bottom: 1px solid #dedbd7;
}

.enquiryDetailContactInitials {
width: 2.75rem;
height: 2.75rem;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
background: var(--charcoal-deep);
font-size: 0.75rem;
font-weight: 700;
color: var(--white);
}

.enquiryDetailContactName {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}

.enquiryDetailContactName strong {
font-size: 0.84rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.enquiryDetailContactName span {
font-size: 0.7rem;
color: var(--grey);
}

.enquiryDetailContactFields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.enquiryDetailContactField {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
padding: 0.9rem 1.25rem;
border-right: 1px solid #dedbd7;
border-bottom: 1px solid #dedbd7;
}

.enquiryDetailContactField:nth-child(2n) {
border-right: 0;
}

.enquiryDetailContactField:nth-last-child(-n + 2) {
border-bottom: 0;
}

.enquiryDetailContactField strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.enquiryDetailNext {
padding: 1.2rem 1.25rem;
}

.enquiryDetailNext p {
margin-bottom: 1rem;
font-size: 0.74rem;
line-height: 1.55;
color: var(--grey);
}

.enquiryDetailPrimaryButtonFull {
width: 100%;
}

.enquiryDetailTextButton {
width: 100%;
margin-top: 0.5rem;
padding: 0.5rem;
background: transparent;
font-size: 0.7rem;
font-weight: 600;
color: var(--copper-dark);
cursor: pointer;
}

.enquiryDetailTextButton:hover {
text-decoration: underline;
}

.modalOpen {
overflow: hidden;
}

.createJobModal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 160ms ease, visibility 160ms ease;
}

.createJobModalOpen {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.createJobModalBackdrop {
position: absolute;
inset: 0;
background: rgba(20, 27, 32, 0.76);
}

.createJobModalDialog {
position: relative;
z-index: 1;
width: min(42rem, 100%);
max-height: calc(100vh - 4rem);
overflow-y: auto;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
background: #f8f7f6;
color: var(--charcoal-deep);
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
}

.createJobModalHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding: 1.25rem 1.4rem;
border-bottom: 1px solid #dedbd7;
}

.createJobModalHeader .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.createJobModalHeader h2 {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--charcoal-deep);
}

.createJobModalHeader p {
margin-top: 0.3rem;
font-size: 0.74rem;
color: var(--grey);
}

.createJobModalClose {
width: 2.25rem;
height: 2.25rem;
display: grid;
place-items: center;
flex: 0 0 auto;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
background: var(--white);
cursor: pointer;
transition: border-color 160ms ease;
}

.createJobModalClose:hover {
border-color: var(--copper);
}

.createJobModalClose svg {
width: 0.9rem;
height: 0.9rem;
fill: none;
stroke: var(--charcoal);
stroke-width: 1.8;
stroke-linecap: round;
}

.createJobFormSection {
padding: 1.25rem 1.4rem;
border-bottom: 1px solid #dedbd7;
}

.createJobFormSectionHeading {
margin-bottom: 1rem;
}

.createJobFormSectionHeading .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.createJobFormSectionHeading h3 {
font-size: 0.92rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.createJobFields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.createJobField {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}

.createJobFieldFull {
grid-column: 1 / -1;
}

.createJobField > span {
font-size: 0.68rem;
font-weight: 600;
color: var(--charcoal);
}

.createJobField input,
.createJobField select {
width: 100%;
height: 2.7rem;
padding: 0 0.8rem;
border: 1px solid var(--grey-light);
border-radius: 0.35rem;
outline: 0;
background: var(--white);
color: var(--charcoal-deep);
font-size: 0.78rem;
font-family: inherit;
transition: border-color 160ms ease;
}

.createJobField input:focus,
.createJobField select:focus {
border-color: var(--copper);
}

.createJobMoneyField {
position: relative;
}

.createJobMoneyField > span {
position: absolute;
left: 0.8rem;
top: 50%;
z-index: 1;
transform: translateY(-50%);
font-size: 0.78rem;
font-weight: 600;
color: var(--charcoal);
}

.createJobMoneyField input {
padding-left: 1.7rem;
}

.createJobCustomer {
border: 1px solid #dedbd7;
border-radius: 0.45rem;
background: var(--white);
overflow: hidden;
}

.createJobCustomerTop {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border-bottom: 1px solid #dedbd7;
}

.createJobCustomerInitials {
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
background: var(--charcoal-deep);
font-size: 0.7rem;
font-weight: 700;
color: var(--white);
}

.createJobCustomerTop > div:last-child {
display: flex;
flex-direction: column;
gap: 0.18rem;
}

.createJobCustomerTop strong {
font-size: 0.8rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.createJobCustomerTop span {
font-size: 0.68rem;
color: var(--grey);
}

.createJobCustomerDetails {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.createJobCustomerDetails > div {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.85rem 1rem;
border-right: 1px solid #dedbd7;
}

.createJobCustomerDetails > div:last-child {
border-right: 0;
}

.createJobCustomerDetails span {
font-size: 0.64rem;
font-weight: 600;
color: var(--grey);
}

.createJobCustomerDetails strong {
font-size: 0.74rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.createJobCustomerNote {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.75rem 1rem;
border-top: 1px solid #dedbd7;
background: rgba(169, 87, 56, 0.05);
}

.createJobCustomerNote > span {
width: 1.2rem;
height: 1.2rem;
display: grid;
place-items: center;
flex: 0 0 auto;
border: 1px solid var(--copper);
border-radius: 50%;
font-size: 0.62rem;
font-weight: 700;
color: var(--copper-dark);
}

.createJobCustomerNote p {
font-size: 0.68rem;
line-height: 1.4;
color: var(--grey);
}

.createJobFormFooter {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.6rem;
padding: 1rem 1.4rem;
}

.createJobCancelButton,
.createJobSubmitButton {
height: 2.5rem;
padding: 0 1rem;
border-radius: 0.35rem;
font-size: 0.76rem;
font-weight: 600;
cursor: pointer;
}

.createJobCancelButton {
border: 1px solid var(--grey-light);
background: var(--white);
color: var(--charcoal-deep);
}

.createJobCancelButton:hover {
border-color: var(--grey-mid);
}

.createJobSubmitButton {
border: 1px solid var(--copper);
background: var(--copper);
color: var(--white);
}

.createJobSubmitButton:hover {
background: var(--copper-dark);
border-color: var(--copper-dark);
}


.jobDetailPage {
width: 100%;
max-width: 100rem;
min-height: calc(100vh - var(--topbar-height));
margin: 0 auto;
padding: 1.25rem 1.5rem 1.5rem;
}

.jobDetailBack {
margin-bottom: 1rem;
}

.jobDetailBack a {
font-size: 0.74rem;
font-weight: 600;
color: var(--grey-mid);
text-decoration: none;
transition: color 160ms ease;
}

.jobDetailBack a:hover {
color: var(--white);
}

.jobDetailHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1rem;
}

.jobDetailTitleTop {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.3rem;
}

.jobDetailTitle h1 {
font-size: 2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.035em;
color: var(--white);
}

.jobDetailTitle p {
margin-top: 0.45rem;
font-size: 0.82rem;
color: var(--grey-mid);
}

.jobDetailStatus {
display: inline-flex;
align-items: center;
height: 1.4rem;
padding: 0 0.55rem;
border: 1px solid var(--copper);
border-radius: 999rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--copper);
}

.jobDetailActions {
display: flex;
align-items: center;
gap: 0.6rem;
}

.jobDetailSecondaryButton,
.jobDetailPrimaryButton {
height: 2.55rem;
padding: 0 1rem;
border-radius: 0.35rem;
font-size: 0.76rem;
font-weight: 600;
cursor: pointer;
}

.jobDetailSecondaryButton {
border: 1px solid var(--grey-mid);
background: transparent;
color: var(--white);
}

.jobDetailSecondaryButton:hover {
border-color: var(--white);
}

.jobDetailPrimaryButton {
border: 1px solid var(--copper);
background: var(--copper);
color: var(--white);
}

.jobDetailPrimaryButton:hover {
background: var(--copper-dark);
border-color: var(--copper-dark);
}

.jobDetailGrid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.7fr);
gap: 1rem;
align-items: start;
}

.jobDetailMain,
.jobDetailSidebar {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}

.jobDetailPanel {
background: #f8f7f6;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
overflow: hidden;
color: var(--charcoal-deep);
}

.jobDetailPanelHeader {
min-height: 5rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid #dedbd7;
}

.jobDetailPanelHeader .pageEyebrow {
margin-bottom: 0.2rem;
color: var(--copper-dark);
}

.jobDetailPanelHeader h2 {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--charcoal-deep);
}

.jobDetailType {
display: inline-flex;
align-items: center;
height: 1.5rem;
padding: 0 0.55rem;
border: 1px solid rgba(169, 87, 56, 0.35);
border-radius: 999rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--copper-dark);
}

.jobDetailInformation {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobDetailInformationItem {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-height: 5rem;
padding: 1rem 1.25rem;
border-right: 1px solid #dedbd7;
border-bottom: 1px solid #dedbd7;
}

.jobDetailInformationItem:nth-child(2n) {
border-right: 0;
}

.jobDetailInformationItem:nth-last-child(-n + 2) {
border-bottom: 0;
}

.jobDetailInformationItem span,
.jobDetailContactFields span,
.jobDetailSource span {
font-size: 0.65rem;
font-weight: 600;
color: var(--grey);
}

.jobDetailInformationItem strong,
.jobDetailContactFields strong,
.jobDetailSource strong {
font-size: 0.78rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.jobDetailSource {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem;
}

.jobDetailSource > div {
display: flex;
flex-direction: column;
gap: 0.35rem;
}

.jobDetailSource a {
font-size: 0.72rem;
font-weight: 600;
color: var(--copper-dark);
text-decoration: none;
}

.jobDetailSource a:hover {
text-decoration: underline;
}

.jobDetailContact {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.15rem 1.25rem;
border-bottom: 1px solid #dedbd7;
}

.jobDetailContactInitials {
width: 2.75rem;
height: 2.75rem;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 50%;
background: var(--charcoal-deep);
font-size: 0.75rem;
font-weight: 700;
color: var(--white);
}

.jobDetailContact > div:last-child {
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.jobDetailContact strong {
font-size: 0.84rem;
font-weight: 600;
color: var(--charcoal-deep);
}

.jobDetailContact > div:last-child span {
font-size: 0.7rem;
color: var(--grey);
}

.jobDetailContactFields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jobDetailContactFields > div {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
padding: 0.9rem 1.25rem;
border-right: 1px solid #dedbd7;
border-bottom: 1px solid #dedbd7;
}

.jobDetailContactFields > div:nth-child(2n) {
border-right: 0;
}

.jobDetailContactFields > div:nth-last-child(-n + 2) {
border-bottom: 0;
}

.jobDetailContactFields strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.jobDetailEmpty {
padding: 2rem;
border: 1px solid #dedbd7;
border-radius: 0.75rem;
background: #f8f7f6;
}

.jobDetailEmpty .pageEyebrow {
color: var(--copper-dark);
}

.jobDetailEmpty h1 {
margin-top: 0.25rem;
font-size: 1.5rem;
color: var(--charcoal-deep);
}

.jobDetailEmpty p {
margin-top: 0.5rem;
font-size: 0.78rem;
color: var(--grey);
}

.jobDetailEmpty a {
display: inline-block;
margin-top: 1rem;
font-size: 0.76rem;
font-weight: 600;
color: var(--copper-dark);
}

.enquiryModal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}

.enquiryModalOpen {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.enquiryModalBackdrop {
position: absolute;
inset: 0;
background: rgba(18, 24, 28, 0.78);
}

.enquiryModalDialog {
position: relative;
z-index: 1;
width: min(31rem, 100%);
background: #f8f7f6;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.28);
}

.enquiryModalHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding: 1.75rem 2rem 1.5rem;
border-bottom: 1px solid #d2d0cc;
}

.enquiryModalHeader h2 {
margin: 0.3rem 0 0.35rem;
font-size: 1.6rem;
line-height: 1.1;
color: #1c252b;
}

.enquiryModalHeader p {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: #74777c;
}

.enquiryModalClose {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
padding: 0;
border: 1px solid #d2d0cc;
border-radius: 50%;
background: transparent;
color: #3f454c;
font: inherit;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.enquiryModalClose:hover {
border-color: #a95738;
background: #a95738;
color: #ffffff;
}

.enquiryModalBody {
padding: 1.75rem 2rem 2rem;
}

.enquiryFormField {
display: flex;
flex-direction: column;
gap: 0.55rem;
}

.enquiryFormField label {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #3f454c;
}

.enquiryValueInput {
display: flex;
align-items: center;
height: 3.25rem;
border: 1px solid #d2d0cc;
border-radius: 0.45rem;
background: #ffffff;
overflow: hidden;
transition: border-color 0.2s ease;
}

.enquiryValueInput:focus-within {
border-color: #a95738;
}

.enquiryValueInput span {
display: flex;
align-items: center;
align-self: stretch;
padding: 0 0 0 1rem;
font-size: 1rem;
font-weight: 700;
color: #3f454c;
}

.enquiryValueInput input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0 1rem 0 0.45rem;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 1rem;
color: #1c252b;
}

.enquiryValueInput input::placeholder {
color: #a6a5a1;
}

.enquiryModalFooter {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.25rem 2rem;
border-top: 1px solid #d2d0cc;
background: #f3f2f0;
}

.enquiryModalCancel,
.enquiryModalSubmit {
height: 2.75rem;
padding: 0 1.25rem;
border-radius: 0.4rem;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.enquiryModalCancel {
border: 1px solid #d2d0cc;
background: transparent;
color: #3f454c;
}

.enquiryModalCancel:hover {
border-color: #74777c;
}

.enquiryModalSubmit {
border: 1px solid #a95738;
background: #a95738;
color: #ffffff;
}

.enquiryModalSubmit:hover {
background: #93482f;
border-color: #93482f;
}

.addRecordChooser {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}

.addRecordChoice {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
min-height: 7rem;
padding: 1.25rem;
border: 1px solid var(--grey-light);
border-radius: 0.5rem;
background: #f8f7f6;
color: var(--charcoal-deep);
text-align: left;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease;
}

.addRecordChoice:hover {
border-color: var(--copper);
background: rgba(169, 87, 56, 0.06);
}

.addRecordChoiceIcon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border: 1px solid rgba(169, 87, 56, 0.4);
border-radius: 50%;
color: var(--copper-dark);
font-size: 1.3rem;
}

.addRecordChoiceContent {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}

.addRecordChoiceContent strong {
font-size: 1rem;
font-weight: 700;
color: var(--charcoal-deep);
}

.addRecordChoiceContent small {
font-size: 0.78rem;
line-height: 1.45;
color: var(--grey);
}

.addRecordChoiceArrow {
color: var(--copper);
font-size: 1.25rem;
}

.addRecordFormGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}

#addJobNewContactFields {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--grey-light);
}

#addJobNewContactFields[hidden] {
display: none;
}

.modalOpen {
overflow: hidden;
}

.contactDetailPage {
display: flex;
flex-direction: column;
gap: 1.15rem;
width: 100%;
padding: 2rem 2.25rem 3rem;
}

.contactDetailBack {
display: inline-flex;
align-items: center;
align-self: flex-start;
color: var(--grey-light);
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}

.contactDetailBack:hover {
color: var(--white);
}

.contactDetailHeader {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0.4rem 0 0.8rem;
}

.contactDetailHeader > div {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.contactDetailHeader .pageEyebrow {
color: var(--copper);
}

.contactDetailHeader h1 {
margin: 0.3rem 0 0;
color: var(--white);
font-size: 2.1rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
}

.contactDetailHeader p {
margin: 0.55rem 0 0;
color: var(--grey-light);
font-size: 0.84rem;
}

.contactDetailPanel {
width: 100%;
background: #f8f7f6;
border-radius: 0.5rem;
overflow: hidden;
}

.contactDetailPanelHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 4.4rem;
padding: 0.95rem 1.4rem;
border-bottom: 1px solid #d2d0cc;
}

.contactDetailPanelHeader > div {
display: flex;
flex-direction: column;
align-items: flex-start;
}

.contactDetailPanelHeader .pageEyebrow {
color: var(--copper);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.13em;
}

.contactDetailPanelHeader h2 {
margin: 0.2rem 0 0;
color: var(--charcoal-dark);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
}

.contactDetailCount {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.75rem;
padding: 0 0.5rem;
border-radius: 50%;
background: var(--charcoal-dark);
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
}

.contactDetailInfoGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contactDetailInfoItem {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.45rem;
min-height: 5.75rem;
padding: 1.15rem 1.4rem;
border-right: 1px solid #d2d0cc;
border-bottom: 1px solid #d2d0cc;
}

.contactDetailInfoItem:nth-child(3n) {
border-right: 0;
}

.contactDetailInfoItem:nth-child(n + 4) {
border-bottom: 0;
}

.contactDetailInfoItem span {
color: var(--copper);
font-size: 0.61rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1;
text-transform: uppercase;
}

.contactDetailInfoItem strong {
color: var(--charcoal-dark);
font-size: 0.84rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}

.contactDetailRecords {
display: flex;
flex-direction: column;
}

.contactDetailRecord {
display: grid;
align-items: stretch;
min-height: 5.5rem;
border-bottom: 1px solid #d2d0cc;
color: inherit;
text-decoration: none;
transition: background 0.18s ease;
}

.contactDetailRecord:last-child {
border-bottom: 0;
}

.contactDetailRecord:hover {
background: var(--white);
}

.contactDetailEnquiryRecord {
grid-template-columns: minmax(16rem, 1.5fr) minmax(10rem, 0.8fr) minmax(9rem, 0.65fr) minmax(9rem, 0.65fr) 4rem;
}

.contactDetailJobRecord {
grid-template-columns: minmax(16rem, 1.5fr) minmax(10rem, 0.8fr) minmax(8rem, 0.6fr) minmax(8rem, 0.6fr) minmax(10rem, 0.75fr) 4rem;
}

.contactDetailRecordField {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.45rem;
min-width: 0;
padding: 1rem 1.4rem;
border-right: 1px solid #d2d0cc;
}

.contactDetailRecordField span {
color: var(--copper);
font-size: 0.59rem;
font-weight: 800;
letter-spacing: 0.11em;
line-height: 1;
text-transform: uppercase;
}

.contactDetailRecordField strong {
color: var(--charcoal-dark);
font-size: 0.8rem;
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}

.contactDetailRecordArrow {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
justify-self: center;
width: 1.8rem;
height: 1.8rem;
border: 1px solid #d2d0cc;
border-radius: 50%;
color: var(--charcoal-dark);
font-size: 0.75rem;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.contactDetailRecord:hover .contactDetailRecordArrow {
border-color: var(--copper);
background: var(--copper);
color: var(--white);
transform: translateX(0.1rem);
}

.contactDetailEmpty {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 0.35rem;
min-height: 6rem;
padding: 1.25rem 1.4rem;
}

.contactDetailEmpty strong {
color: var(--charcoal-dark);
font-size: 0.82rem;
font-weight: 700;
}

.contactDetailEmpty p {
margin: 0;
color: var(--grey-medium);
font-size: 0.74rem;
}

.contactDetailNotFound {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 36rem;
padding: 1.5rem;
background: #f8f7f6;
border-radius: 0.5rem;
}

.contactDetailNotFound .pageEyebrow {
color: var(--copper);
}

.contactDetailNotFound h1 {
margin: 0.3rem 0 0;
color: var(--charcoal-dark);
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.025em;
}

.contactDetailNotFound p {
margin: 0.65rem 0 0;
color: var(--grey-medium);
font-size: 0.82rem;
}

.contactDetailEditButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0 1.1rem;
border: 1px solid var(--copper);
border-radius: 0.35rem;
background: transparent;
color: var(--white);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}

.contactDetailEditButton:hover {
background: var(--copper);
color: var(--white);
}

.enquiryDetailDeleteButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0 1rem;
border: 1px solid #a95738;
border-radius: 0.35rem;
background: transparent;
color: #a95738;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}

.enquiryDetailDeleteButton:hover {
background: #a95738;
color: #ffffff;
}

.enquiryDeleteDialog {
max-width: 31rem;
}

.enquiryDeleteWarning {
display: flex;
flex-direction: column;
gap: 0.55rem;
}

.enquiryDeleteWarning strong {
color: var(--charcoal-dark);
font-size: 0.95rem;
font-weight: 700;
}

.enquiryDeleteWarning p {
margin: 0;
color: var(--grey-medium);
font-size: 0.8rem;
line-height: 1.55;
}

.enquiryDeleteConfirmButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0 1rem;
border: 1px solid #a95738;
border-radius: 0.35rem;
background: #a95738;
color: #ffffff;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}

.jobDetailDeleteButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0 1rem;
border: 1px solid #a95738;
border-radius: 0.35rem;
background: transparent;
color: #a95738;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}

.jobDetailDeleteButton:hover {
background: #a95738;
color: #ffffff;
}

.jobDeleteDialog {
max-width: 31rem;
}

.jobDeleteWarning {
display: flex;
flex-direction: column;
gap: 0.55rem;
}

.jobDeleteWarning strong {
color: var(--charcoal-dark);
font-size: 0.95rem;
font-weight: 700;
}

.jobDeleteWarning p {
margin: 0;
color: var(--grey-medium);
font-size: 0.8rem;
line-height: 1.55;
}

.jobDeleteConfirmButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0 1rem;
border: 1px solid #a95738;
border-radius: 0.35rem;
background: #a95738;
color: #ffffff;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}

.contactDetailHeaderActions {
display: flex;
align-items: center;
gap: 0.65rem;
}

.contactDetailDeleteButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0 1rem;
border: 1px solid #a95738;
border-radius: 0.35rem;
background: transparent;
color: #a95738;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}

.contactDetailDeleteButton:hover {
background: #a95738;
color: #ffffff;
}

.contactDeleteDialog {
max-width: 31rem;
}

.contactDeleteWarning {
display: flex;
flex-direction: column;
gap: 0.55rem;
}

.contactDeleteWarning strong {
color: var(--charcoal-dark);
font-size: 0.95rem;
font-weight: 700;
}

.contactDeleteWarning p {
margin: 0;
color: var(--grey-medium);
font-size: 0.8rem;
line-height: 1.55;
}

.contactDeleteConfirmButton {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0 1rem;
border: 1px solid #a95738;
border-radius: 0.35rem;
background: #a95738;
color: #ffffff;
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}

.contactDeleteLinkedRecords {
display: flex;
gap: 0.75rem;
margin: 0.35rem 0;
}

.contactDeleteLinkedRecords > div {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 8rem;
padding: 0.75rem;
background: #f8f7f6;
border: 1px solid #d2d0cc;
}

.contactDeleteLinkedRecords strong {
color: #a95738;
font-size: 1.1rem;
font-weight: 700;
}

.contactDeleteLinkedRecords span {
color: #74777c;
font-size: 0.72rem;
font-weight: 600;
}

.settingsAccountDetails {
display: flex;
flex-direction: column;
border: 1px solid #d2d0cc;
background: #f8f7f6;
}

.settingsAccountRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1rem 1.1rem;
border-bottom: 1px solid #d2d0cc;
}

.settingsAccountRow:last-child {
border-bottom: 0;
}

.settingsAccountRow span {
color: #74777c;
font-size: 0.75rem;
font-weight: 600;
}

.settingsAccountRow strong {
color: #3f454c;
font-size: 0.82rem;
font-weight: 700;
text-align: right;
}

.settingsInformationCard {
display: flex;
align-items: flex-start;
gap: 0.9rem;
padding: 1rem 1.1rem;
background: #f8f7f6;
border: 1px solid #d2d0cc;
}

.settingsInformationIcon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 1.65rem;
width: 1.65rem;
height: 1.65rem;
background: #a95738;
color: #ffffff;
font-size: 0.72rem;
font-weight: 700;
}

.settingsInformationCard strong {
display: block;
color: #3f454c;
font-size: 0.82rem;
font-weight: 700;
}

.settingsInformationCard p {
margin: 0.3rem 0 0;
color: #74777c;
font-size: 0.76rem;
line-height: 1.55;
}

.settingsDangerSection {
border-top-color: #a95738;
}

.settingsDangerCard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1rem 1.1rem;
background: #f8f7f6;
border: 1px solid #d2d0cc;
}

.settingsDangerCard strong {
display: block;
color: #3f454c;
font-size: 0.82rem;
font-weight: 700;
}

.settingsDangerCard p {
margin: 0.3rem 0 0;
color: #74777c;
font-size: 0.76rem;
line-height: 1.5;
}

.settingsDangerButton,
.settingsResetConfirmButton {
appearance: none;
border: 1px solid #a95738;
background: #a95738;
color: #ffffff;
font: inherit;
font-size: 0.76rem;
font-weight: 700;
cursor: pointer;
transition: background 160ms ease, color 160ms ease;
}

.settingsDangerButton {
flex: 0 0 auto;
padding: 0.7rem 0.9rem;
}

.settingsResetConfirmButton {
padding: 0.72rem 1rem;
}

.settingsDangerButton:hover,
.settingsResetConfirmButton:hover {
background: #3f454c;
border-color: #3f454c;
}

.settingsResetDialog {
max-width: 34rem;
}

.settingsResetWarning {
padding: 1rem 1.1rem;
background: #f8f7f6;
border: 1px solid #d2d0cc;
border-left: 3px solid #a95738;
}

.settingsResetWarning strong {
display: block;
color: #3f454c;
font-size: 0.84rem;
font-weight: 700;
}

.settingsResetWarning p {
margin: 0.35rem 0 0;
color: #74777c;
font-size: 0.76rem;
line-height: 1.55;
}