:root{
  --bg:#FFFFFF;
  --card:#EFEFEF;
  --muted:#6b7280;      /* gray */
  --text:#111111;       /* near-black */
  --line:#b3b3b3;       /* light gray border */
  --accent:#111111;     /* monochrome */
  --chip:#f3f4f6;       /* very light gray */
  --btn:#111111;        /* primary button bg */
  --btn2:#b1bce3;       /* secondary button bg */
  --shadow:0 0 6px 8px rgba(0,0,0,.08);

  /* TOPBAR */
  --dw-topbar-h: 56px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: var(--bg);
  color: var(--text);
}

a{color:inherit}

.wrap{max-width:1040px;margin:0 auto;padding:18px}

header{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 0 8px 0;
}

.brand{display:flex;flex-direction:column;gap:2px}
.brand h1{margin:0;font-size:22px;letter-spacing:.2px}
.brand .sub{color:var(--muted);font-size:13px}

.topActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  text-decoration:none;background:var(--btn2);
  color: var(--text);
  font-weight:600;font-size:14px;
}

.btn.primary{background:var(--btn);border-color:transparent;color:#fff}
.btn.secondary{background:#ffffff;border-color:var(--line);color:var(--text)}
.btn.secondary:hover{border-color:#d1d5db}

.panel{
  border:1px solid var(--line);
  background: var(--card);
  border-radius:18px;
  padding:14px;
  box-shadow: var(--shadow);
}

form.filters{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
}

label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 2px}

input, select{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#ffffff;
  color: var(--text);
  outline:none;
}

input::placeholder{color:#9ca3af}
.filters .go{padding:11px 14px;border-radius:14px}

.metaRow{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 2px 0 2px;color:var(--muted);font-size:13px;
}

.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 820px){
  form.filters{grid-template-columns:1fr 1fr;}
  .grid{grid-template-columns:1fr;}
}

.job{
  border:1px solid var(--line);
  background:#ffffff;
  border-radius:18px;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .08s ease, border-color .08s ease;
}

.job:hover{transform:translateY(-1px);border-color:#d1d5db}

.jobTop{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}
.title{font-size:16px;font-weight:800;margin:0}
.company{margin:2px 0 0 0;color:var(--muted);font-size:13px}

.chips{display:flex;gap:6px;flex-wrap:wrap}

.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--chip);
  border:1px solid var(--line);
  color:var(--muted);
  white-space:nowrap;
}

.summary{margin:0;color:#111111;font-size:14px;line-height:1.35}

.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.small{color:var(--muted);font-size:12px}

.apply{display:flex;gap:8px;flex-wrap:wrap;}
.apply a{
  text-decoration:none;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#ffffff;
  font-weight:700;
  font-size:13px;
  color: var(--text);
}
.apply a.primary{background:var(--btn);border-color:transparent;color:#fff}

.pagination{
  display:flex;gap:8px;justify-content:center;align-items:center;
  margin:18px 0 6px 0;
  color:var(--muted);
}
.pagination a{
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#ffffff;
  color: var(--text);
  font-weight:700;
  font-size:13px;
}
.pagination .current{padding:8px 12px}

footer{color:var(--muted);font-size:12px;padding:18px 2px 0 2px;text-align:center}

/* Job detail */
.jobDetail{padding:25px}
.jobTitle{margin:0 0 10px 0;font-size:28px}
.jobMeta{font-size:15px;margin-bottom:12px;color:var(--muted)}
.jobMeta span{margin-right:12px}
.jobBadges{margin-bottom:20px}

.badge{
  display:inline-block;
  background:#f3f4f6;
  padding:6px 10px;
  margin-right:8px;
  border-radius:20px;
  font-size:13px;
  color:#111111;
  border:1px solid var(--line);
}
.badge.remote{background:#f9fafb}
.badge.salary{background:#f9fafb}

.jobDescription{line-height:1.6;margin-bottom:25px}
.jobActions{margin-top:20px}

/* ===========================
   SLIDE MENU - DAYTONWORK
=========================== */

.dw-menu-btn{
  position:fixed;
  top:16px;
  left:16px;
  z-index:1100;
  font-size:26px;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text);
}

.dw-overlay{
  position:fixed;
  inset:0;
  background:rgba(17,17,17,0.35);
  backdrop-filter:blur(2px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:1050;
}

.dw-side-menu{
  position:fixed;
  top:0;
  left:0;
  width:280px;
  height:100%;
  background:var(--card);
  box-shadow:var(--shadow);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:1500;
  display:flex;
  flex-direction:column;
}

.dw-side-menu.open{transform:translateX(0)}
.dw-overlay.show{opacity:1;pointer-events:auto}

.dw-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px;
  border-bottom:1px solid var(--line);
  font-weight:bold;
}

.dw-close-btn{
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
}

.dw-menu-links{
  list-style:none;
  padding:0;
  margin:0;
}

.dw-menu-links li{border-bottom:1px solid var(--line)}

.dw-menu-links a{
  display:block;
  padding:16px 18px;
  text-decoration:none;
  color:var(--text);
  font-size:15px;
}

.dw-menu-links a:hover{background:#f3f4f6}

/* Better PWA feel */
@media (display-mode: standalone){
  .dw-menu-btn{top:40px;} /* accounts for status bar */
}

/* ===========================
   TOPBAR - DAYTONWORK
=========================== */

.dw-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  height:var(--dw-topbar-h);
  padding-top:env(safe-area-inset-top);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:56px 1fr 86px;
  align-items:center;
}

.dw-topbar-spacer{
  height:calc(var(--dw-topbar-h) + env(safe-area-inset-top));
}

.dw-topbar-btn{
  height:44px;
  width:44px;
  margin:0 6px;
  border:none;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  color:var(--text);
  display:grid;
  place-items:center;
  border-radius:12px;
}

.dw-topbar-btn:active{background:rgba(0,0,0,0.06)}

.dw-topbar-title{
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
  text-decoration:none;
  font-size:16px;
  line-height:1;
  padding:0 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dw-topbar-cta{
  width:auto;
  padding:0 12px;
  font-size:14px;
  font-weight:700;
  border-radius:14px;
  background:var(--btn);
  color:#ffffff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  margin-right:10px;
}

.dw-topbar-cta:active{transform:scale(.98)}

.menu-link {
  display:block;
  padding:12px 18px;
  color:#111;
  text-decoration:none;
  font-weight:500;
}

.menu-link:hover {
  background:rgba(255,255,255,0.08);
}

.admin-link {
  color:#ffcc00;
}
.container {
  max-width:1100px;
  margin:40px auto;
  padding:20px;
}

.pageTitle {
  font-size:28px;
  margin-bottom:6px;
}

.pageSub {
  color:#777;
  margin-bottom:25px;
}

.adminGrid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
  margin-bottom:35px;
}

.adminCard {
  background:#111;
  color:#fff;
  padding:20px;
  border-radius:14px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.adminCard h3 {
  font-size:28px;
  margin:0;
}

.adminCard p {
  margin:8px 0 0;
  font-size:14px;
  opacity:.8;
}

.adminActions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.adminBtn {
  display:inline-block;
  padding:12px 18px;
  background:#007bff;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.adminBtn:hover {
  background:#0056b3;
}

.adminBtn.secondary {
  background:#444;
}
.dw-topbar{
  display:flex;
  align-items:center;
  gap:12px;
}

.dw-topbar-title{
  flex:1;              /* makes title take the middle space */
  text-align:center;   /* keeps it centered */
}

.dw-topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  min-width:44px;      /* keeps the right area stable */
}

.dw-topbar-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  text-decoration:none;
  font-size:18px;
  line-height:1;
  opacity:.88;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}

.dw-topbar-icon:hover{
  opacity:1;
  transform:scale(1.06);
  background:rgba(255,255,255,.08);
}

.dw-topbar-icon-admin{
  color:#000;
}
.dashboardCard{
  background:#111;
  color:#fff;
  padding:18px;
  border-radius:14px;
  margin-bottom:18px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.appList{
  list-style:none;
  padding:0;
  margin:12px 0 0 0;
}

.appRow{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.appMain{ display:block; }

.appTopLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.appJobLink{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

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

.appMeta{
  margin-top:6px;
  font-size:13px;
  opacity:.78;
}

.appResumeLink{
  color:#cfe7ff;
  text-decoration:none;
}
.appResumeLink:hover{ text-decoration:underline; }

/* Status badges */
.appStatus{
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.st-new{ background:rgba(0,123,255,.18); color:#9ad1ff; border:1px solid rgba(0,123,255,.35); }
.st-viewed{ background:rgba(255,193,7,.15); color:#ffd666; border:1px solid rgba(255,193,7,.35); }
.st-contacted{ background:rgba(0,255,153,.12); color:#74ffc2; border:1px solid rgba(0,255,153,.30); }
.st-rejected{ background:rgba(220,53,69,.16); color:#ff9aa6; border:1px solid rgba(220,53,69,.35); }
.st-hired{ background:rgba(40,167,69,.16); color:#b3ffbf; border:1px solid rgba(40,167,69,.35); }

.dashboardActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

.dashBtn{
  padding:12px 18px;
  background:#007bff;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}

.dashBtn:hover{ background:#0056b3; }

.dashBtn.secondary{ background:#444; }