.tech-app{
  max-width:420px;
  margin:auto;
  font-family:Arial;
}
.screen{ display:none; }
.screen.active{ display:block; }

input,button{
  width:100%;
  padding:10px;
  margin-bottom:10px;
}
.header{
  background:#0d6efd;
  color:#fff;
  padding:12px;
}
.job{
  background:#fff;
  margin:10px;
  padding:10px;
  border-radius:8px;
}
.job button{
  margin-top:5px;
}
/* ===== TECHNICIAN JOB CARD ===== */
.job-card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  margin:15px;
  position:relative;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.job-id{
  font-weight:700;
  color:#444;
  margin-bottom:6px;
}

.job-title{
  font-size:15px;
  color:#222;
  margin-bottom:8px;
}

.job-status{
  font-size:13px;
  color:#666;
  margin-bottom:14px;
}

/* CALL BUTTON */
.call-btn{
  position:absolute;
  right:16px;
  top:18px;
}

.call-btn a{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1e6bff;
  color:#fff;
  border-radius:50%;
  text-decoration:none;
  font-size:18px;
  box-shadow:0 6px 14px rgba(30,107,255,0.35);
}

/* PRIMARY BUTTON */
.primary-btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:#1e6bff;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.call-btn{
  position:absolute;
  right:16px;
  top:18px;
  width:44px;
  height:44px;
  background:#1e6bff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(30,107,255,0.35);
}

.call-btn svg{
  display:block;
}

.wallet-box{
  background:#f4f7ff;
  border:1px dashed #c7d6ff;
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
}
.wallet-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}
.wallet-use{
  font-size:13px;
}
.invoice-preview{
  font-size:13px;
  background:#fafafa;
  border:1px solid #eee;
  padding:8px;
  border-radius:8px;
  margin-top:8px;
}
/* ===== Invoice 2 Column Layout ===== */
.ct-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}

.ct-field{
  display:flex;
  flex-direction:column;
}

.ct-full{
  grid-column: span 2;
}

/* Mobile friendly */
@media (max-width: 600px){
  .ct-grid{
    grid-template-columns: 1fr;
  }
}


/* ===== MODAL BACKDROP ===== */
.ct-modal{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  display:none;              /* default hidden */
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* ===== MODAL BOX ===== */
.ct-invoice-pro{
  background:#fff;
  width:95%;
  max-width:420px;
  border-radius:12px;
  padding:15px;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

/* ===== GRID ===== */
.ct-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.ct-field{
  display:flex;
  flex-direction:column;
}

.ct-full{
  grid-column: span 2;
}

@media(max-width:600px){
  .ct-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   INVOICE HEADER (BLUE)
========================= */
.ct-header-ui{
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  padding: 16px;
  border-radius: 12px 12px 0 0;
  text-align: center;
}

.ct-h-title{
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.ct-h-sub{
  color: #dbe6ff;
  font-size: 13px;
}