:root{
  --ink:#0f1923;
  --muted:#6b7785;
  --brand:#0aa0a8;
  --brand-strong:#05767c;
  --bg:#f7f9fb;
  --card:#ffffff;
  --line:#e5e9ef;
  --focus:#0aa0a833;
  --radius:14px;
  --success:#1b8a4f;
  --danger:#c53f3f;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Work Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
}

.wrap{
  max-width:920px;
  margin:32px auto;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.admin-wrap{
  max-width:none;
  width:95%;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(16,24,40,.04);
  padding:28px;
}

header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
}
header img{height:40px;width:auto}
header .title{
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.2px;
}
header .subtitle{
  font-size:.98rem;color:var(--muted);
}

h2{
  font-size:1.05rem;
  margin:28px 0 10px;
  padding-top:6px;
  border-top:1px dashed var(--line);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}

label{
  font-weight:600;
  font-size:.92rem;
  display:block;
  margin-bottom:6px;
}
.hint{font-size:.85rem;color:var(--muted);margin-top:4px}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
select,
textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font:inherit;
  outline:none;
}
textarea{min-height:88px;resize:vertical}
input:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 6px var(--focus);
  border-color:var(--brand);
}

.checkline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  gap:12px;
  background:#fff;
}
.checkline p{margin:0}
.checks{display:flex; gap:14px; align-items:center; white-space:nowrap}

.slot{
  display:grid;
  grid-template-columns: 1.2rem auto;
  gap:10px;
  align-items:start;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.slot + .slot{margin-top:10px}

.signature{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  align-items:end;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
button{
  appearance:none;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
button.secondary{
  background:#fff;color:var(--brand);
}
button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}
button:not(:disabled):hover{transform:translateY(-1px);}

.tiny{font-size:.85rem;color:var(--muted)}
.feedback{
  margin:12px 0 0;
  font-size:.92rem;
  color:var(--muted);
}

.detail-wrap{
  gap:22px;
  max-width:1180px;
  width:min(90%,1180px);
}
.detail-summary .summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:16px 0 12px;
}
.summary-item{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
}
.summary-item dt{
  font-size:.8rem;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 6px;
}
.summary-item dd{
  margin:0;
  font-size:1rem;
  word-break:break-word;
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:var(--brand-strong);
  text-decoration:none;
  margin-top:12px;
}
.back-link:hover{text-decoration:underline;}

.admin-form header{margin-bottom:10px;padding-bottom:10px;}
.admin-fieldset{
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  margin:18px 0 0;
}
.admin-fieldset legend{
  font-weight:700;
  padding:0 6px;
  font-size:.95rem;
}
.compact-grid{gap:12px;}
.task-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}
.task-table{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.task-header{
  display:grid;
  grid-template-columns:minmax(240px,2fr) repeat(2,minmax(160px,1fr));
  gap:12px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
  padding:0 4px;
}
.task-row{
  display:grid;
  grid-template-columns:minmax(240px,2fr) repeat(2,minmax(160px,1fr));
  gap:12px;
  align-items:start;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  background:#fff;
}
.task-row .task-item{
  margin:0;
}
.task-row .task-item > span{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.task-subtext{
  font-size:.82rem;
  color:var(--muted);
  font-weight:500;
}
.task-tech,
.task-note{
  width:100%;
}
.task-table .task-tech,
.task-table .task-note{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font:inherit;
}
.task-table textarea.task-note{
  min-height:80px;
  resize:vertical;
}
.stage-status{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:14px 0 18px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(10,160,168,.08);
}
.stage-status--sub{
  margin-top:8px;
}
.stage-status label{
  font-weight:600;
  font-size:.92rem;
}
.stage-status-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.stage-status .status-select{
  flex:1;
  min-width:200px;
  max-width:240px;
}
.status-button{
  padding:10px 18px;
}
.notify-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  color:var(--muted);
}
.notify-toggle input{margin:0;}
.form-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
  margin-bottom:8px;
  font-size:.88rem;
  color:var(--muted);
}
.form-meta span{font-weight:600;color:var(--ink);}
.task-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.94rem;
}
.task-item input[type="checkbox"]{margin-top:3px;}
.admin-form textarea{min-height:70px;}
.file-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.file-list li{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}
.file-list a{
  color:var(--brand-strong);
  font-weight:600;
  text-decoration:none;
}
.file-list a:hover{text-decoration:underline;}
.file-meta{font-size:.85rem;color:var(--muted);}

.status-select{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  background:#fff;
}
.status-select:focus{box-shadow:0 0 0 4px var(--focus);border-color:var(--brand);}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(10,160,168,.12);
  color:var(--brand-strong);
  text-transform:capitalize;
}
.status-pill[data-status="completed"]{
  background:rgba(27,138,79,.15);
  color:var(--success);
}
.status-pill[data-status="cancelled"]{
  background:rgba(197,63,63,.15);
  color:var(--danger);
}

.table-card h2{margin:0 0 14px;font-size:1.1rem;}
.table-controls{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
.table-controls input[type="search"]{
  flex:1;
  min-width:220px;
  max-width:360px;
  border-radius:999px;
  padding:12px 20px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 6px 18px rgba(15,25,35,.08);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.table-controls input[type="search"]::placeholder{color:var(--muted);}
.table-controls input[type="search"]:focus{
  box-shadow:0 0 0 6px var(--focus),0 10px 24px rgba(5,118,124,.18);
  border-color:var(--brand);
}
.table-scroll{
  overflow:auto;
  border-radius:12px;
  border:1px solid var(--line);
}
table{width:100%;border-collapse:collapse;background:#fff;}
thead{background:rgba(10,160,168,.08);}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:.92rem;}
th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:24px;}
th.sortable::after{
  content:'\25B4\25BE';
  font-size:.65rem;
  position:absolute;
  right:6px;
  color:var(--muted);
  opacity:.6;
}
th.sortable[data-direction="asc"]::after{content:'\25B4';opacity:1;}
th.sortable[data-direction="desc"]::after{content:'\25BE';opacity:1;}
tbody tr:hover{background:rgba(10,160,168,.06);}
tbody tr.empty td{text-align:center;color:var(--muted);padding:28px 16px;}

.computer-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(10,160,168,.12);
  color:var(--brand-strong);
  font-weight:600;
  text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.computer-link:hover{background:rgba(10,160,168,.18);transform:translateY(-1px);}
.computer-link:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus);}
.computer-link i{font-size:.9rem;}

@media (max-width:720px){
  .wrap{padding:16px;margin:16px auto;}
  header{flex-direction:column;align-items:flex-start;}
  .signature{grid-template-columns:repeat(6,1fr);}
  .col-6{grid-column:span 6;}
  .col-12{grid-column:span 6;}
  .table-controls{flex-direction:column;align-items:flex-start;}
  .table-controls input[type="search"]{max-width:100%;width:100%;}
  .task-header{display:none;}
  .task-row{grid-template-columns:1fr;}
  .stage-status{padding:12px;gap:8px;}
  .stage-status .status-select{max-width:100%;}
}

@media print{
  body{background:#fff}
  .wrap{margin:0; padding:0}
  .card{border:none;box-shadow:none}
  .actions{display:none}
  .table-card{display:none}
  a[href]:after{content:""}
}