/* ================== Tokens / Base ================== */
:root{
  --bg:#f7f7f8;
  --card:#fff;
  --muted:#667085;
  --line:#e5e7eb;
  --ink:#111827;
  --link:#0b5ed7;
  --focus:#2563eb;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --container:1180px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--link); text-decoration:none }
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ================== Layout ================== */
.layout{
  display:grid; grid-template-columns:240px 1fr;
  min-height:calc(100vh - 56px);
  background:var(--bg);
}
.layout-no-sidebar{ grid-template-columns:1fr; } /* single column */


/* ================== Main / Cards ================== */
.content{ padding:24px }
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
/* cap cards inside normal pages only */
.content > .card{ max-width:920px }

/* ================== Forms / Buttons / Misc ================== */
.err{ color:#b00020; margin:.5rem 0 }
label{ display:block; margin:.5rem 0 .2rem }
input,select,textarea{
  width:100%; padding:.6rem; border:1px solid #cbd5e1; border-radius:8px; background:#fff;
}
:where(input,select,textarea):focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(37,99,235,.15)
}

.btn-brand {
  background-color: #040B16; /* Deep navy/black */
  color: #fff;
  border: none;
  transition: background-color 0.2s ease-in-out;
}

.btn-brand:hover {
  background-color: #00050C; /* Slightly darker shade */
  color: #fff;
}


/* ================== Tables ================== */
.table{
  width:100%; border-collapse:collapse;
}
.table th, .table td{
  padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;
}
.table thead th{
  font-size:.9rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; background:#fafafa;
}
.table tbody tr:hover{ background:#f8fafc }

/* ================== Badges ================== */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:.85rem; line-height:1.6;
  border:1px solid var(--line); color:var(--ink); background:#fff;
}
.badge-open{      background:#ecfeff; border-color:#c7f3f7 }
.badge-quoted{    background:#f5f3ff; border-color:#e0d7ff }
.badge-booked{    background:#ecfdf5; border-color:#ccebdd }
.badge-completed{ background:#eef2ff; border-color:#d9e0ff }
.badge-cancelled{ background:#fff1f2; border-color:#ffd6db; color:#b42318 }
.badge-draft{     background:#f8fafc; border-color:#e5e7eb; color:#475569 }
.badge-expired{   background:#fff7ed; border-color:#fde68a; color:#92400e }

/* =========================================================
   HOMEPAGE (scoped to .home)
   ======================================================= */
.layout-no-sidebar .home{ display:block; width:100% }
.home > *{ display:block; width:100%; max-width:none }
.home .card{ width:100%; max-width:none }

/* Hero search row */
.home .home-search{
  display:flex; gap:8px; margin:8px 0 18px;
}
.home .home-search input{
  flex:1 1 auto; min-width:0; height:42px;
  border:1px solid #e5e7eb; border-radius:10px; padding:10px 12px; background:#fff;
}
.home .home-search :where(.btn,button){ height:42px }

/* Popular categories */
.home .home-cats{ display:flex; flex-wrap:wrap; gap:10px }
.home .home-cats .cat-pill{
  flex:0 1 180px; display:block; padding:14px;
  border:1px solid #e5e7eb; border-radius:12px; color:#111827; background:#fff; text-decoration:none;
}

/* Latest jobs */
.home .home-aside{ display:block; clear:both }
.home .job-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.home .job-item{ padding:12px; border:1px solid #f0f2f4; border-radius:10px; background:#fff }
.home .job-title{ font-weight:600; color:#1f2937; text-decoration:none }
.home .job-meta{ font-size:12px; color:#6b7280; margin-top:4px }

/* Hero “surface” */
.hero-surface{
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border:1px solid #e5e7eb; box-shadow:var(--shadow);
}

/* Category pills hover */
.cat-pill{ border:1px solid #e5e7eb; background:#fff }
.cat-pill:hover{ background:#f8fafc; border-color:#dbe1e8 }

/* Latest jobs links */
.job-link:hover{ text-decoration:underline }

/* Optional hero illustration */
.hero-illustration{ max-width:360px; height:auto }

/* Pill/segmented search bar (Airbnb-like) */
.search-bar{
  background:linear-gradient(180deg,#fff,#f7f7f8);
  border:1px solid #e5e7eb; padding:.5rem; border-radius:999px;
}
.search-bar-inner{
  display:grid; grid-template-columns:1.3fr 1.1fr 1fr 1fr auto;
  align-items:center; gap:.25rem;
}
.search-cell{
  background:#fff; padding:.75rem 1rem; border-radius:999px; display:grid;
}
.search-label{ font-size:.75rem; color:#6b7280; margin-bottom:.125rem }
.search-cell .form-control-plaintext{ padding:0; margin:0; color:#111827 }
.search-cta{ padding:.25rem .5rem }

/* Horizontal card scroller */
.cards-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
}
.cards-scroll::-webkit-scrollbar{ height:8px }
.cards-scroll::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px }
.card-spot{
  min-width:260px; border:0; border-radius:1rem; box-shadow:var(--shadow);
  position:relative; scroll-snap-align:start;
}
.card-spot .wish{ width:36px; height:36px; box-shadow:var(--shadow) }
.object-fit-cover{ object-fit:cover }

/* Responsive */
@media (max-width:992px){
  .search-bar-inner{ grid-template-columns:1fr 1fr auto }
  .search-cell:nth-child(3),
  .search-cell:nth-child(4){ display:none }
}