/*
  Earthworm theme: "safety tape and paper."
  The logo is loud, so the chrome is quiet. One accent (the logo's safety yellow),
  charcoal for text, paper background, white surfaces with hairline borders.
  The worm's red is reserved for destructive actions only, so it keeps meaning.
  Page titles sit on a skewed yellow plate echoing the logo's banner; that is the
  one signature element, everything else stays disciplined.
*/

:root {
  --ew-charcoal: #23252b;
  --ew-paper: #f5f5f2;
  --ew-surface: #ffffff;
  --ew-line: #e3e3de;
  --ew-muted: #70737a;
  --ew-safety: #f2c700;
  --ew-safety-dark: #d9b200;
  --ew-red: #b3372a;
}

body {
  background: var(--ew-paper);
  color: var(--ew-charcoal);
  font-family: 'Barlow', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---- Navbar: white, hairline under it, safety stripe as the accent ---- */

.ewNavbar {
  border-bottom: 3px solid var(--ew-safety);
  box-shadow: 0 1px 0 var(--ew-line);
}

.ewNavbarLogo {
  height: 44px;
  width: auto;
}

.ewBrandText {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.35rem;
  color: var(--ew-charcoal);
}

.ewNavbar .nav-link {
  color: var(--ew-charcoal);
  font-weight: 500;
}

.ewNavbar .nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ew-safety);
  text-decoration-thickness: 2px;
}

/* ---- Page title on a skewed yellow plate, the logo-banner echo ---- */

.ewPageTitle {
  display: inline-block;
  width: fit-content;
  background: var(--ew-safety);
  transform: skewX(-8deg);
  padding: 0.3rem 1.1rem;
  margin-bottom: 1.5rem;
}

.ewPageTitle > span {
  display: inline-block;
  transform: skewX(8deg);
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.55rem;
  color: #141518;
}

/* ---- Surfaces ---- */

.ewCard {
  background: var(--ew-surface);
  border: 1px solid var(--ew-line);
  border-radius: 8px;
  padding: 1.25rem;
}

/* ---- Sections and action bars ---- */

.ewSection {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--ew-line);
}

.ewSection:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.ewSectionHeader {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ewSectionHeader i {
  color: var(--ew-safety-dark);
}

.ewActionBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- Tables: white surface, quiet uppercase column labels ---- */

.table {
  background: var(--ew-surface);
}

.table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ew-muted);
  border-bottom: 2px solid var(--ew-line);
}

.table td {
  vertical-align: middle;
}

tr.inactive td {
  color: var(--ew-muted);
}

/* ---- Buttons: primary wears the safety yellow, danger wears the worm's red ---- */

.btn-primary {
  --bs-btn-bg: var(--ew-safety);
  --bs-btn-border-color: var(--ew-safety);
  --bs-btn-color: #141518;
  --bs-btn-hover-bg: var(--ew-safety-dark);
  --bs-btn-hover-border-color: var(--ew-safety-dark);
  --bs-btn-hover-color: #141518;
  --bs-btn-active-bg: var(--ew-safety-dark);
  --bs-btn-active-border-color: var(--ew-safety-dark);
  --bs-btn-active-color: #141518;
  font-weight: 600;
}

.btn-outline-secondary {
  --bs-btn-color: var(--ew-charcoal);
  --bs-btn-border-color: var(--ew-line);
  --bs-btn-hover-bg: var(--ew-charcoal);
  --bs-btn-hover-border-color: var(--ew-charcoal);
  --bs-btn-hover-color: #ffffff;
}

.btn-danger {
  --bs-btn-bg: var(--ew-red);
  --bs-btn-border-color: var(--ew-red);
  --bs-btn-hover-bg: #992e23;
  --bs-btn-hover-border-color: #992e23;
}

/* ---- Forms ---- */

.form-control:focus,
.form-select:focus {
  border-color: var(--ew-safety-dark);
  box-shadow: 0 0 0 0.2rem rgba(242, 199, 0, 0.25);
}

/* ---- Footer strip ---- */

.ewFooter {
  background: var(--ew-charcoal);
  color: #b9bbc1;
  font-size: 0.85rem;
  padding: 1rem 0;
  margin-top: 3rem;
}

.ewDevCredit {
  color: var(--ew-muted);
  font-size: 0.8rem;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.ewDevCredit img {
  filter: grayscale(1);
}

.ewDevCredit:hover {
  opacity: 1;
}

.ewDevCredit:hover img {
  filter: none;
}

.ewLoginHeading {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

/* ---- Field labels and badges ---- */

.ewFieldLabel {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ew-muted);
}

.ewStatusBadge {
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* ---- Job detail page toolbar and panels (shared by jobs, create, users) ---- */

.ewJobToolbar,
.ewJobMessage,
.ewJobCard {
  width: 100%;
  max-width: 960px;
}

/* Full-width variant for list pages, where the table wants the room. */
.ewToolbarWide {
  max-width: none;
}

.ewJobToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-top: 3px solid var(--ew-safety);
}

.ewJobIdentity,
.ewJobToolbarActions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.ewJobKicker {
  color: var(--ew-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ewJobNumber {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

.ewJobStatus {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.ewJobStatusDot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

.ewJobStatusActive {
  background: #e7f4eb;
  color: #25683c;
}
.ewJobStatusTodo {
  background: #fdf3cd;
  color: #7a5d00;
}

.ewJobStatusTodo .ewJobStatusDot {
  background: #f2c700;
}

/* Small variant for table cells: same badge, row-friendly size. */
.ewJobStatusBadgeSm {
  font-size: 0.78rem;
  padding: 2px 8px;
}

.ewJobStatusDone {
  background: #eceef0;
  color: #51555c;
}

.ewJobStatusCancelled {
  background: #f4e7e5;
  color: #8e2d24;
}

.ewJobCard {
  margin-top: 0.55rem;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(35, 37, 43, 0.05);
}

/*
  Quiet panels for grouped form sections. .ewPanelGroup is the opt-in hook (users page).
  The job page's old boxed-section treatment is gone; its header is now the dense form.
*/
.ewJobCard .ewPanelGroup > .ewSection:not(:last-child) {
  background: #fafaf8;
  border: 1px solid var(--ew-line);
  border-radius: 7px;
  padding: 0.75rem 1rem;
  margin-top: 0.65rem;
}

.ewJobCard .ewPanelGroup > .ewSection:first-child {
  margin-top: 0;
}

.ewJobCard .ewSectionHeader {
  font-style: normal;
  font-size: 1rem;
  margin-bottom: 0.55rem;
  padding-left: 0.6rem;
  border-left: 4px solid var(--ew-safety);
}

.ewJobCard .ewSectionHeader i {
  color: var(--ew-charcoal);
}

.ewJobCard .form-label {
  color: var(--ew-muted);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.ewJobCard .row {
  --bs-gutter-y: 0.65rem;
}

.ewJobCard .form-control,
.ewJobCard .form-select {
  border-color: #d8d8d2;
  background-color: #ffffff;
}

.ewJobCard .form-control:hover,
.ewJobCard .form-select:hover {
  border-color: #b9b9b2;
}

.ewJobCard .ewPanelGroup > .ewSection:last-child {
  padding-top: 0.65rem;
  margin-top: 0.65rem;
}

/* ---- Dense header form, Roese-inspired: label left, input right, tight rows ---- */

.ewJobHeaderCard {
  padding: 0.85rem 1rem;
}

.ewDenseField {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.ewDenseField > label {
  flex: 0 0 110px;
  text-align: right;
  color: var(--ew-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
}

.ewDenseField > input,
.ewDenseField > select,
.ewDenseField > textarea {
  flex: 1;
  min-width: 0;
}

.ewDenseValue {
  flex: 1;
  font-size: 0.88rem;
  padding: 0.15rem 0;
}

.ewDenseColumnHeader {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  border-left: 4px solid var(--ew-safety);
  padding-left: 0.6rem;
  margin-bottom: 0.45rem;
}

.ewDenseCheckLabel {
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .ewDenseField > label {
    flex-basis: 130px;
  }
}

@media (max-width: 575.98px) {
  .ewJobToolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ewJobIdentity {
    flex-wrap: wrap;
  }

  .ewJobToolbarActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ewJobToolbarActions .btnSaveJob {
    grid-column: 1 / -1;
  }

  .ewJobCard {
    padding: 0.75rem;
  }

  .ewJobCard .ewActionBar {
    align-items: stretch;
  }

  .ewJobCard .ewActionBar > div {
    display: flex;
    flex-wrap: wrap;
  }
}

/* ---- Media section: photo/video grids on the job page ---- */

.ewMediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

.ewMediaTile {
  position: relative;
  border: 1px solid var(--ew-line);
  border-radius: 6px;
  overflow: hidden;
  background: #fafaf8;
  display: flex;
  flex-direction: column;
}

.ewMediaTileMedia {
  aspect-ratio: 1;
}

.ewMediaTileMedia img,
.ewMediaTileMedia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ewMediaClickable {
  cursor: pointer;
}

.ewMediaCaption {
  font-size: 0.72rem;
  color: var(--ew-muted);
  padding: 0.3rem 0.45rem;
  border-top: 1px solid var(--ew-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ewMediaDelete {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  padding: 0.15rem 0.4rem;
  opacity: 0.85;
}

.ewMediaDelete:hover {
  opacity: 1;
}

.ewMediaModalPreview img,
.ewMediaModalPreview video {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
  background: #141518;
  border-radius: 6px;
}

/* ---- Job page tabs: quiet tabs, active one carries the safety underline ---- */

.ewTabs {
  border-bottom: 1px solid var(--ew-line);
}

.ewTabs .nav-link {
  color: var(--ew-muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.5rem 1rem;
}

.ewTabs .nav-link:hover {
  color: var(--ew-charcoal);
  border-bottom-color: var(--ew-line);
}

.ewTabs .nav-link.active {
  color: var(--ew-charcoal);
  border-bottom-color: var(--ew-safety);
  background: transparent;
}

.ewTabs .nav-link i {
  color: var(--ew-safety-dark);
  margin-right: 0.25rem;
}

/* ---- Save button "Saved" flash, so success never shifts the layout ---- */
.btnSaveJob.ewBtnSaved {
  --bs-btn-disabled-bg: var(--ew-safety);
  --bs-btn-disabled-border-color: var(--ew-safety);
  --bs-btn-disabled-color: #141518;
  --bs-btn-disabled-opacity: 1;
}

/* ---- Comments: field-notes log, avatar disc plus quiet panel per note ---- */

.ewCommentsList {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ewComment {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.ewCommentAvatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ew-safety);
  color: #141518;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.ewCommentContent {
  flex: 1;
  min-width: 0;
  background: #fafaf8;
  border: 1px solid var(--ew-line);
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
}

.ewCommentHeader {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}

.ewCommentAuthor {
  font-weight: 600;
  font-size: 0.88rem;
}

.ewCommentTime {
  color: var(--ew-muted);
  font-size: 0.75rem;
}

.ewCommentActions {
  margin-left: auto;
  display: flex;
  gap: 0.6rem;
}

.ewCommentActions .btn-link {
  font-size: 0.78rem;
  text-decoration: none;
}

.ewCommentBody {
  font-size: 0.92rem;
  white-space: pre-wrap;
}

.ewCommentComposer {
  max-width: 720px;
  margin-top: 0.9rem;
}

/* ---- Navbar link icons ---- */

.ewNavbar .nav-link i {
  color: var(--ew-safety-dark);
  margin-right: 0.15rem;
}

/* ---- Site start/end stamp strip on the job page ---- */



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

.ewSiteStampLabel {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ew-muted);
  white-space: nowrap;
}

.ewSiteStampLabel i {
  color: var(--ew-safety-dark);
}

.ewSiteStampValue {
  font-size: 0.9rem;
  font-weight: 600;
}

.ewSiteStampPending {
  color: var(--ew-muted);
  font-weight: 400;
}


.ewAdminCard {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--ew-surface);
  border: 1px solid var(--ew-line);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  color: var(--ew-charcoal);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.ewAdminCard:hover {
  border-color: var(--ew-safety);
  color: var(--ew-charcoal);
}

.ewAdminCard i {
  font-size: 1.6rem;
  color: var(--ew-safety-dark);
}

.ewAdminCardTitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}

.ewAdminCardBlurb {
  font-size: 0.82rem;
  color: var(--ew-muted);
}
/* ---- Breadcrumb trail inside toolbar cards: links wear the theme yellow ---- */

.ewCrumbLink {
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ew-safety-dark);
  text-decoration: none;
  line-height: 1;
}

.ewCrumbLink:hover {
  color: var(--ew-charcoal);
  text-decoration: underline;
  text-decoration-color: var(--ew-safety);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ewCrumbSep {
  color: var(--ew-muted);
  font-size: 1.1rem;
  line-height: 1;
}